feat: Response mobile layout support v1

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 {