feat: Response mobile layout support v1

toju-app/src/app/features/settings/settings-modal/settings-modal.component.html

@@ -1,8 +1,8 @@
 <!-- eslint-disable @angular-eslint/template/cyclomatic-complexity -->
 @if (isOpen() && !isThemeStudioFullscreen()) {
-  <!-- Backdrop -->
+  <!-- Backdrop (hidden on mobile where the modal is full-screen) -->
   <div
-    class="fixed inset-0 z-[90] bg-black/80 backdrop-blur-sm transition-opacity duration-200"
+    class="fixed inset-0 z-[90] hidden bg-black/80 backdrop-blur-sm transition-opacity duration-200 md:block"
     [class.opacity-100]="animating()"
     [class.opacity-0]="!animating()"
     (click)="onBackdropClick()"
@@ -13,15 +13,14 @@
     aria-label="Close settings"
   ></div>
 
-  <!-- Modal -->
-  <div class="fixed inset-0 z-[91] flex items-center justify-center p-4 pointer-events-none">
+  <!-- Modal: full-screen page on mobile, centered dialog on desktop -->
+  <div class="fixed inset-0 z-[91] flex pointer-events-none md:items-center md:justify-center md:p-4">
     <div
       appThemeNode="settingsModalSurface"
-      class="pointer-events-auto relative flex w-full max-w-5xl overflow-hidden rounded-lg border border-border bg-card shadow-lg transition-all duration-200"
-      style="height: min(720px, 88vh)"
+      class="pointer-events-auto relative flex h-full w-full overflow-hidden bg-card transition-all duration-200 md:h-[min(720px,88vh)] md:max-w-5xl md:rounded-lg md:border md:border-border md:shadow-lg"
       [class.scale-100]="animating()"
       [class.opacity-100]="animating()"
-      [class.scale-95]="!animating()"
+      [class.md:scale-95]="!animating()"
       [class.opacity-0]="!animating()"
       (click)="$event.stopPropagation()"
       (keydown.enter)="$event.stopPropagation()"
@@ -31,18 +30,32 @@
       aria-labelledby="settings-modal-title"
       tabindex="-1"
     >
-      <!-- Side Navigation -->
+      <!-- Side Navigation: persistent on desktop; full-width "menu" page on mobile -->
       <nav
         appThemeNode="settingsModalNav"
-        class="flex w-56 flex-shrink-0 flex-col border-r border-border bg-card"
+        class="flex w-full flex-shrink-0 flex-col border-r border-border bg-card md:w-56"
+        [class.hidden]="isMobile() && mobilePage() !== 'menu'"
       >
-        <div class="border-b border-border px-3 py-3">
+        <div class="flex items-center justify-between border-b border-border px-3 py-3">
           <h2
             id="settings-modal-title"
             class="text-lg font-semibold text-foreground"
           >
             Settings
           </h2>
+          @if (isMobile()) {
+            <button
+              (click)="close()"
+              type="button"
+              aria-label="Close settings"
+              class="grid h-9 w-9 place-items-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground md:hidden"
+            >
+              <ng-icon
+                name="lucideX"
+                class="w-5 h-5"
+              />
+            </button>
+          }
         </div>
 
         <div class="flex-1 overflow-y-auto py-2">
@@ -52,8 +65,8 @@
             <button
               (click)="navigate(page.id)"
               type="button"
-              class="mx-2 flex w-[calc(100%-1rem)] items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors"
-              [class.bg-secondary]="activePage() === page.id"
+              class="mx-2 flex w-[calc(100%-1rem)] items-center gap-2.5 rounded-md px-2.5 py-2.5 text-sm transition-colors md:py-1.5"
+              [class.bg-secondary]="activePage() === page.id && !isMobile()"
               [class.text-foreground]="activePage() === page.id"
               [class.font-medium]="activePage() === page.id"
               [class.text-muted-foreground]="activePage() !== page.id"
@@ -92,8 +105,8 @@
                   <button
                     (click)="navigate(page.id)"
                     type="button"
-                    class="mx-2 flex w-[calc(100%-1rem)] items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors"
-                    [class.bg-secondary]="activePage() === page.id"
+                    class="mx-2 flex w-[calc(100%-1rem)] items-center gap-2.5 rounded-md px-2.5 py-2.5 text-sm transition-colors md:py-1.5"
+                    [class.bg-secondary]="activePage() === page.id && !isMobile()"
                     [class.text-foreground]="activePage() === page.id"
                     [class.font-medium]="activePage() === page.id"
                     [class.text-muted-foreground]="activePage() !== page.id"
@@ -123,66 +136,85 @@
         </div>
       </nav>
 
-      <!-- Content -->
-      <div class="flex-1 flex flex-col min-w-0">
+      <!-- Content: shown alongside nav on desktop; full-width "detail" page on mobile -->
+      <div
+        class="flex flex-1 flex-col min-w-0"
+        [class.hidden]="isMobile() && mobilePage() !== 'detail'"
+      >
         <!-- Header -->
         <div
           appThemeNode="settingsModalHeader"
-          class="flex items-center justify-between border-b border-border px-5 py-3 flex-shrink-0"
+          class="flex items-center justify-between border-b border-border px-3 py-3 flex-shrink-0 md:px-5"
         >
-          <h3 class="text-lg font-semibold text-foreground">
-            @switch (activePage()) {
-              @case ('general') {
-                General
-              }
-              @case ('plugins') {
-                Client Plugins
-              }
-              @case ('network') {
-                Network
-              }
-              @case ('theme') {
-                Theme Studio
-              }
-              @case ('notifications') {
-                Notifications
-              }
-              @case ('voice') {
-                Voice & Audio
-              }
-              @case ('updates') {
-                Updates
-              }
-              @case ('localApi') {
-                Local API
-              }
-              @case ('data') {
-                Data
-              }
-              @case ('debugging') {
-                Debugging
-              }
-              @case ('server') {
-                Server Settings
-              }
-              @case ('serverPlugins') {
-                Server Plugins
-              }
-              @case ('members') {
-                Members
-              }
-              @case ('bans') {
-                Bans
-              }
-              @case ('permissions') {
-                Permissions
-              }
+          <div class="flex min-w-0 items-center gap-1">
+            @if (isMobile()) {
+              <button
+                (click)="backToMenu()"
+                type="button"
+                aria-label="Back to settings menu"
+                class="grid h-9 w-9 shrink-0 place-items-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground md:hidden"
+              >
+                <ng-icon
+                  name="lucideChevronLeft"
+                  class="w-5 h-5"
+                />
+              </button>
             }
-          </h3>
+            <h3 class="truncate text-lg font-semibold text-foreground">
+              @switch (activePage()) {
+                @case ('general') {
+                  General
+                }
+                @case ('plugins') {
+                  Client Plugins
+                }
+                @case ('network') {
+                  Network
+                }
+                @case ('theme') {
+                  Theme Studio
+                }
+                @case ('notifications') {
+                  Notifications
+                }
+                @case ('voice') {
+                  Voice & Audio
+                }
+                @case ('updates') {
+                  Updates
+                }
+                @case ('localApi') {
+                  Local API
+                }
+                @case ('data') {
+                  Data
+                }
+                @case ('debugging') {
+                  Debugging
+                }
+                @case ('server') {
+                  Server Settings
+                }
+                @case ('serverPlugins') {
+                  Server Plugins
+                }
+                @case ('members') {
+                  Members
+                }
+                @case ('bans') {
+                  Bans
+                }
+                @case ('permissions') {
+                  Permissions
+                }
+              }
+            </h3>
+          </div>
           <div class="flex items-center gap-2">
             <button
               (click)="close()"
               type="button"
+              aria-label="Close settings"
               class="grid h-9 w-9 place-items-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
             >
               <ng-icon

toju-app/src/app/features/settings/settings-modal/settings-modal.component.ts

@@ -17,6 +17,7 @@ import {
   lucideX,
   lucideBug,
   lucideBell,
+  lucideChevronLeft,
   lucideDownload,
   lucideGlobe,
   lucideAudioLines,
@@ -30,6 +31,7 @@ import {
 } from '@ng-icons/lucide';
 
 import { SettingsModalService, SettingsPage } from '../../../core/services/settings-modal.service';
+import { ViewportService } from '../../../core/platform';
 import { RealtimeSessionFacade } from '../../../core/realtime';
 import { selectSavedRooms, selectCurrentRoom } from '../../../store/rooms/rooms.selectors';
 import { selectCurrentUser } from '../../../store/users/users.selectors';
@@ -83,6 +85,7 @@ import {
       lucideX,
       lucideBug,
       lucideBell,
+      lucideChevronLeft,
       lucideDownload,
       lucideGlobe,
       lucideAudioLines,
@@ -103,9 +106,21 @@ export class SettingsModalComponent {
   private webrtc = inject(RealtimeSessionFacade);
   private theme = inject(ThemeService);
   private themeLibrary = inject(ThemeLibraryService);
+  private viewport = inject(ViewportService);
   readonly thirdPartyLicenses: readonly ThirdPartyLicense[] = THIRD_PARTY_LICENSES;
   private lastRequestedServerId: string | null = null;
 
+  /** True on mobile breakpoints. Drives the full-screen, page-stack layout. */
+  readonly isMobile = this.viewport.isMobile;
+
+  /**
+   * Active mobile sub-page within the settings flow.
+   * 'menu'   -> the section list (nav)
+   * 'detail' -> the selected page content
+   * Ignored on desktop.
+   */
+  readonly mobilePage = signal<'menu' | 'detail'>('menu');
+
   private permissionsComponent = viewChild<PermissionsSettingsComponent>('permissionsComp');
 
   savedRooms = this.store.selectSignal(selectSavedRooms);
@@ -299,6 +314,11 @@ export class SettingsModalComponent {
       }
 
       this.animating.set(true);
+
+      // On mobile, always start on the section list so the user picks the page first.
+      if (this.isMobile()) {
+        this.mobilePage.set('menu');
+      }
     });
 
     effect(() => {
@@ -360,6 +380,12 @@ export class SettingsModalComponent {
     }
 
     if (this.isOpen()) {
+      // On mobile, Escape on the detail page just navigates back to the menu.
+      if (this.isMobile() && this.mobilePage() === 'detail') {
+        this.backToMenu();
+        return;
+      }
+
       this.close();
     }
   }
@@ -386,6 +412,16 @@ export class SettingsModalComponent {
 
   navigate(page: SettingsPage): void {
     this.modal.navigate(page);
+
+    // On mobile, advance to the detail page so the user sees the selected pane.
+    if (this.isMobile()) {
+      this.mobilePage.set('detail');
+    }
+  }
+
+  /** Go back to the section list on mobile. No-op on desktop. */
+  backToMenu(): void {
+    this.mobilePage.set('menu');
   }
 
   openThemeStudio(): void {