feat(mark): improve settings page layout and navigation

apps/mark/src-tauri/src/lib.rs

@@ -2103,6 +2103,14 @@ pub fn run() {
                     ..Default::default()
                 };
 
+                let settings_item = MenuItem::with_id(
+                    handle,
+                    "settings",
+                    "Preferences…",
+                    true,
+                    Some("CmdOrCtrl+,"),
+                )?;
+
                 let app_menu = Submenu::with_items(
                     handle,
                     "Mark",
@@ -2114,6 +2122,8 @@ pub fn run() {
                             Some(about_metadata),
                         )?,
                         &PredefinedMenuItem::separator(handle)?,
+                        &settings_item,
+                        &PredefinedMenuItem::separator(handle)?,
                         &PredefinedMenuItem::services(handle, None)?,
                         &PredefinedMenuItem::separator(handle)?,
                         &PredefinedMenuItem::hide(handle, None)?,
@@ -2165,27 +2175,9 @@ pub fn run() {
                     ],
                 )?;
 
-                let doctor_item =
-                    MenuItem::with_id(handle, "doctor", "Health Check…", true, None::<&str>)?;
-
-                let help_menu = Submenu::with_id_and_items(
-                    handle,
-                    tauri::menu::HELP_SUBMENU_ID,
-                    "Help",
-                    true,
-                    &[&doctor_item],
-                )?;
-
                 let menu = Menu::with_items(
                     handle,
-                    &[
-                        &app_menu,
-                        &file_menu,
-                        &edit_menu,
-                        &view_menu,
-                        &window_menu,
-                        &help_menu,
-                    ],
+                    &[&app_menu, &file_menu, &edit_menu, &view_menu, &window_menu],
                 )?;
 
                 app.set_menu(menu)?;
@@ -2302,10 +2294,10 @@ pub fn run() {
             Ok(())
         })
         .on_menu_event(|app, event| {
-            if event.id() == "doctor" {
-                // Emit an event to the frontend to open the doctor modal.
-                if let Err(e) = app.emit("menu:doctor", ()) {
-                    log::warn!("Failed to emit menu:doctor event: {e}");
+            if event.id() == "settings" {
+                // Emit an event to the frontend to open the settings page.
+                if let Err(e) = app.emit("menu:settings", ()) {
+                    log::warn!("Failed to emit menu:settings event: {e}");
                 }
             }
         })

apps/mark/src/App.svelte

@@ -13,28 +13,24 @@
   import ProjectHome from './lib/features/projects/ProjectHome.svelte';
   import ProjectsList from './lib/features/projects/ProjectsList.svelte';
   import SessionLauncher from './lib/features/sessions/SessionLauncher.svelte';
-  import DoctorModal from './lib/features/doctor/DoctorModal.svelte';
-  import ActionsPreferencesModal from './lib/features/settings/ActionsPreferencesModal.svelte';
+  import SettingsPage from './lib/features/settings/SettingsPage.svelte';
   import ToastHost from './lib/shared/ToastHost.svelte';
   import { preferences, initPreferences } from './lib/features/settings/preferences.svelte';
   import { refreshProviders } from './lib/features/agents/agent.svelte';
   import { refreshSqAvailability } from './lib/features/settings/sq.svelte';
-  import { navigation, initNavigation } from './lib/navigation.svelte';
+  import { navigation, initNavigation, openSettings } from './lib/navigation.svelte';
   import { projectStateStore } from './lib/stores/projectState.svelte';
   import { prStateStore } from './lib/stores/prState.svelte';
   import { sessionRegistry } from './lib/stores/sessionRegistry.svelte';
   import { extractPrUrl, extractPrNumber } from './lib/features/branches/branchCardHelpers';
   import type { StoreIncompatibility } from './lib/types';
 
   let showSessionLab = $state(false);
-  let showDoctor = $state(false);
-  let showActionsPreferences = $state(false);
-  let unlistenDoctor: UnlistenFn | undefined;
+  let unlistenSettings: UnlistenFn | undefined;
   let unlistenSessionStatus: UnlistenFn | undefined;
   let storeIncompat = $state<StoreIncompatibility | null>(null);
   let resetting = $state(false);
   let storeError = $state<string | null>(null);
-  let onOpenActionsPreferences: (() => void) | null = null;
 
   // Konami code: ↑↑↓↓←→←→BA
   const konamiSequence = [
@@ -72,23 +68,19 @@
 
   function handleGlobalShortcut(e: KeyboardEvent) {
     if (shouldIgnoreGlobalShortcut(e.target)) return;
-    if (e.key === ';') {
+    if ((e.metaKey || e.ctrlKey) && e.key === ',') {
       e.preventDefault();
-      showActionsPreferences = true;
+      openSettings();
     }
   }
 
   onMount(async () => {
     document.addEventListener('keydown', handleKonamiKey);
     document.addEventListener('keydown', handleGlobalShortcut);
-    onOpenActionsPreferences = () => {
-      showActionsPreferences = true;
-    };
-    window.addEventListener('mark:open-actions-preferences', onOpenActionsPreferences);
-
-    // Listen for the Help → Health Check… menu item.
-    unlistenDoctor = await listen('menu:doctor', () => {
-      showDoctor = true;
+
+    // Listen for the app menu Preferences item.
+    unlistenSettings = await listen('menu:settings', () => {
+      openSettings();
     });
 
     // Listen for session status changes globally to handle spinner cleanup
@@ -210,11 +202,7 @@
   onDestroy(() => {
     document.removeEventListener('keydown', handleKonamiKey);
     document.removeEventListener('keydown', handleGlobalShortcut);
-    if (onOpenActionsPreferences) {
-      window.removeEventListener('mark:open-actions-preferences', onOpenActionsPreferences);
-      onOpenActionsPreferences = null;
-    }
-    unlistenDoctor?.();
+    unlistenSettings?.();
     unlistenSessionStatus?.();
   });
 
@@ -293,6 +281,8 @@
           <div class="error-state">
             <p>{storeError}</p>
           </div>
+        {:else if navigation.activeView === 'settings'}
+          <SettingsPage />
         {:else if navigation.selectedProjectId}
           <ProjectHome selectedProjectId={navigation.selectedProjectId} />
         {:else}
@@ -306,14 +296,6 @@
     <SessionLauncher onClose={() => (showSessionLab = false)} />
   {/if}
 
-  {#if showDoctor}
-    <DoctorModal onClose={() => (showDoctor = false)} />
-  {/if}
-
-  {#if showActionsPreferences}
-    <ActionsPreferencesModal onClose={() => (showActionsPreferences = false)} />
-  {/if}
-
   <ToastHost />
 {/if}
 

apps/mark/src/lib/TopBar.svelte

@@ -9,6 +9,7 @@
   import { Palette, PanelLeftClose, PanelLeftOpen, Plus, SlidersHorizontal } from 'lucide-svelte';
   import { getCurrentWindow } from '@tauri-apps/api/window';
   import ThemeSelectorModal from './features/settings/ThemeSelectorModal.svelte';
+  import { navigation, openSettings } from './navigation.svelte';
   import {
     hydrateProjectsSidebarState,
     projectsSidebarState,
@@ -59,7 +60,10 @@
     <button
       class="icon-btn"
       onclick={() => window.dispatchEvent(new CustomEvent('mark:new-project'))}
-      title="New project (⌘N)"
+      disabled={navigation.activeView === 'settings'}
+      title={navigation.activeView === 'settings'
+        ? 'Unavailable while viewing settings'
+        : 'New project (⌘N)'}
     >
       <Plus size={14} />
     </button>
@@ -72,11 +76,7 @@
       <Palette size={14} />
     </button>
 
-    <button
-      class="icon-btn"
-      onclick={() => window.dispatchEvent(new CustomEvent('mark:open-actions-preferences'))}
-      title="Actions preferences (;)"
-    >
+    <button class="icon-btn" onclick={() => openSettings()} title="Settings (⌘,)">
       <SlidersHorizontal size={14} />
     </button>
 

apps/mark/src/lib/features/doctor/DoctorModal.svelte

@@ -1,7 +1,7 @@
 <!--
   DoctorModal.svelte — Health Check modal.
 
-  Opened via Help → Health Check menu item.
+  Opened from the Settings "Health Check" section.
   Runs all checks on mount and displays results with optional fix buttons.
 -->
 <script lang="ts">

apps/mark/src/lib/features/doctor/doctor.svelte.ts

@@ -1,5 +1,5 @@
 /**
- * doctor.svelte.ts — Reactive state for the system health-check modal.
+ * doctor.svelte.ts — Reactive state for the system health-check UI.
  *
  * Exposes `doctorState` (report + loading flag) and an action helper
  * that calls the Tauri `run_doctor` command.