From 2aaea6e31cc6900f083e294c96a2ab62d99e6be3 Mon Sep 17 00:00:00 2001
From: Hiran Venugopalan <hiran.v@gmail.com>
Date: Wed, 18 Mar 2026 21:43:08 +0530
Subject: [PATCH 1/4] ui: added infinite/continuous page rendering for editor

---
 src/lib/components/Editor.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/Editor.svelte b/src/lib/components/Editor.svelte
index e76d6c7..2e68773 100644
--- a/src/lib/components/Editor.svelte
+++ b/src/lib/components/Editor.svelte
@@ -313,7 +313,8 @@
   .editor-container :global(.ProseMirror) {
     padding: 60px 72px;
     box-sizing: border-box;
-    min-height: 800px;
+    /* Increased from 800px to 2000px to simulate infinite/continuous page rendering */
+    min-height: 2000px;
     outline: none;
     font-family: var(--editor-font), sans-serif;
     font-size: 14px;

From c00fa27f0d2aa1ab0e54d3ef68b6d6c58b6406ca Mon Sep 17 00:00:00 2001
From: Hiran Venugopalan <hiran.v@gmail.com>
Date: Wed, 18 Mar 2026 21:58:10 +0530
Subject: [PATCH 2/4] ui: menu-bar-cleanup. Added left-pane button, removed
 rest to main bar.

---
 src-tauri/src/lib.rs               |  5 +++++
 src/lib/components/TitleBar.svelte | 28 +++++-----------------------
 src/routes/+page.svelte            | 15 ++++++++++++++-
 3 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index edd533d..6eda494 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -81,6 +81,9 @@ pub fn run() {
           &MenuItem::with_id(app, "statistics", "Statistics", true, Some("CmdOrCtrl+Shift+I"))?,
           &MenuItem::with_id(app, "scene-cards", "Scene Cards", true, Some("CmdOrCtrl+Shift+K"))?,
           &MenuItem::with_id(app, "story-mode", "Story Mode", true, Some("CmdOrCtrl+Shift+L"))?,
+          &PredefinedMenuItem::separator(app)?,
+          &MenuItem::with_id(app, "toggle-sidebar", "Toggle Sidebar", true, Some("CmdOrCtrl+B"))?,
+          &MenuItem::with_id(app, "edit-meta", "Edit Meta Data", true, None::<&str>)?,
         ],
       )?;
 
@@ -120,6 +123,8 @@ pub fn run() {
           "statistics" => { let _ = app.emit("menu-statistics", ()); }
           "scene-cards" => { let _ = app.emit("menu-scene-cards", ()); }
           "story-mode" => { let _ = app.emit("menu-story-mode", ()); }
+          "toggle-sidebar" => { let _ = app.emit("menu-toggle-sidebar", ()); }
+          "edit-meta" => { let _ = app.emit("menu-edit-meta", ()); }
           "find" => { let _ = app.emit("menu-find", ()); }
           "find-replace" => { let _ = app.emit("menu-find-replace", ()); }
           "quit" => { let _ = app.emit("menu-quit", ()); }
diff --git a/src/lib/components/TitleBar.svelte b/src/lib/components/TitleBar.svelte
index 2493e7f..40b083a 100644
--- a/src/lib/components/TitleBar.svelte
+++ b/src/lib/components/TitleBar.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
-  import { open } from '@tauri-apps/plugin-dialog';
   import { documentStore } from '$lib/stores/documentStore.svelte';
   import { themeStore } from '$lib/stores/themeStore.svelte';
-  import MetadataModal from './MetadataModal.svelte';
   import ExportModal from './ExportModal.svelte';
 
-  let showMetadata = $state(false);
+  let { onToggleSidebar } = $props<{ onToggleSidebar?: () => void }>();
+  
   let showExport = $state(false);
 
   // Derived display title — shows document title or "Untitled"
@@ -22,33 +21,17 @@
     statusTimeout = setTimeout(() => { statusMessage = ''; }, 3000);
   }
 
-  async function handleNew() {
-    if (!(await documentStore.confirmIfDirty())) return;
-    await documentStore.newDocument();
-  }
-
   async function handleSave() {
     await documentStore.saveWithDialog();
   }
 
-  async function handleOpen() {
-    if (!(await documentStore.confirmIfDirty())) return;
-    const path = await open({
-      multiple: false,
-      filters: [{ name: 'Screenplay', extensions: ['screenplay'] }]
-    });
-    if (typeof path === 'string') {
-      await documentStore.openDocument(path);
-    }
-  }
-
 </script>
 
 <div class="title-bar">
   <div class="btn-group left">
-    <button class="btn-ghost" onclick={handleNew}>New</button>
-    <button class="btn-ghost" onclick={() => { showMetadata = true; }}>Meta</button>
-    <button class="btn-ghost" onclick={handleOpen}>Open</button>
+    <button class="btn-icon" onclick={onToggleSidebar} title="Toggle Sidebar">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="3" x2="9" y2="21"></line></svg>
+    </button>
   </div>
 
   <div class="title-zone">
@@ -90,7 +73,6 @@
   </div>
 </div>
 
-<MetadataModal bind:open={showMetadata} />
 <ExportModal bind:open={showExport} />
 
 <style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4ea1ba6..57515d5 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -11,6 +11,7 @@
   import AboutModal from '$lib/components/AboutModal.svelte';
   import HelpModal from '$lib/components/HelpModal.svelte';
   import StatisticsModal from '$lib/components/StatisticsModal.svelte';
+  import MetadataModal from '$lib/components/MetadataModal.svelte';
   import { documentStore } from '$lib/stores/documentStore.svelte';
   import { themeStore } from '$lib/stores/themeStore.svelte';
 
@@ -22,6 +23,7 @@
   let findReplaceOpen = $state(false);
   let findReplaceMode = $state<'find' | 'replace'>('find');
   let showStatistics = $state(false);
+  let showMetadata = $state(false);
 
   // Module-level guard — prevents newDocument() from firing again on HMR re-mount
   let appInitialized = false;
@@ -170,6 +172,14 @@
       findReplaceMode = 'replace';
     });
 
+    const unlistenToggleSidebar = await listen('menu-toggle-sidebar', () => {
+      panelOpen = !panelOpen;
+    });
+
+    const unlistenEditMeta = await listen('menu-edit-meta', () => {
+      showMetadata = true;
+    });
+
     const unlistenQuit = await listen('menu-quit', async () => {
       if (!(await documentStore.confirmIfDirty())) return;
       quitConfirmed = true;
@@ -197,6 +207,8 @@
       unlistenStoryMode();
       unlistenFind();
       unlistenFindReplace();
+      unlistenToggleSidebar();
+      unlistenEditMeta();
       unlistenQuit();
       unlistenClose();
     };
@@ -204,7 +216,7 @@
 </script>
 
 <main>
-  <TitleBar />
+  <TitleBar onToggleSidebar={() => { panelOpen = !panelOpen; }} />
   <div class="workspace">
     {#if showSceneCards}
       <SceneCardsView onClose={() => { showSceneCards = false; }} />
@@ -222,6 +234,7 @@
 <AboutModal bind:open={showAbout} />
 <HelpModal bind:open={showHelp} />
 <StatisticsModal bind:open={showStatistics} />
+<MetadataModal bind:open={showMetadata} />
 
 <style>
   main {

From cb0ec29f085485f3314bdb8aedf2c4aa9a932898 Mon Sep 17 00:00:00 2001
From: Hiran Venugopalan <hiran.v@gmail.com>
Date: Wed, 18 Mar 2026 22:21:05 +0530
Subject: [PATCH 3/4] feat: integrated settings modal covering font, theme,
 language

---
 src/lib/components/Editor.svelte        |  83 +++----
 src/lib/components/SettingsModal.svelte | 284 ++++++++++++++++++++++++
 src/lib/components/TitleBar.svelte      |  24 --
 3 files changed, 320 insertions(+), 71 deletions(-)
 create mode 100644 src/lib/components/SettingsModal.svelte

diff --git a/src/lib/components/Editor.svelte b/src/lib/components/Editor.svelte
index e76d6c7..10d4e5d 100644
--- a/src/lib/components/Editor.svelte
+++ b/src/lib/components/Editor.svelte
@@ -13,6 +13,7 @@
   import { findReplacePlugin } from '$lib/editor/findReplace';
   import FindReplaceBar from '$lib/components/FindReplaceBar.svelte';
   import { InputModeManager } from '$lib/editor/input/InputModeManager';
+  import SettingsModal from '$lib/components/SettingsModal.svelte';
   import { documentStore } from '$lib/stores/documentStore.svelte';
   import { editorStore } from '$lib/stores/editorStore.svelte';
 
@@ -25,22 +26,16 @@
   let view: EditorView | null = null;
   const inputManager = InputModeManager.getInstance();
 
-  // Svelte 5 runes for reactive state
-  let currentMode = $state<'ENGLISH' | 'MALAYALAM'>('ENGLISH');
-  let currentElement = $state<string>('SCENE HEADING');
-  let modeFlash = $state(false);
-  let currentScheme = $state<'inscript1' | 'inscript2' | 'mozhi'>('mozhi');
+  const inputManager = InputModeManager.getInstance();
 
   // Map the font setting slug to a CSS font-family name
   let fontFamily = $derived(
     documentStore.currentFont === 'manjari' ? 'Manjari' : 'Noto Sans Malayalam'
   );
 
-  /** Switch the active Malayalam input scheme and update local state */
-  function selectScheme(scheme: 'inscript1' | 'inscript2' | 'mozhi') {
-    currentScheme = scheme;
-    inputManager.setScheme(scheme);
-  }
+  // Svelte 5 runes for reactive state
+  let currentElement = $state<string>('SCENE HEADING');
+  let showSettings = $state(false);
 
   // Create initial document with one empty scene_heading
   function createInitialDoc() {
@@ -172,14 +167,7 @@
       if (event.ctrlKey && event.code === 'Space') {
         event.preventDefault();
         event.stopPropagation();
-        const isNowMalayalam = inputManager.toggle();
-        currentMode = isNowMalayalam ? 'MALAYALAM' : 'ENGLISH';
-        // When toggling to Malayalam mode, ensure currentScheme reflects the manager's state
-        currentScheme = inputManager.scheme;
-
-        // Brief flash on the mode indicator for visual feedback
-        modeFlash = true;
-        setTimeout(() => { modeFlash = false; }, 500);
+        inputManager.toggle();
         return;
       }
 
@@ -259,34 +247,23 @@
   </div>
   <div class="status-bar">
     <div class="status-left">
-      <span class="status-mode" class:malayalam={currentMode === 'MALAYALAM'} class:flash={modeFlash}>
-        {currentMode}
-      </span>
-      {#if currentMode === 'MALAYALAM'}
-        <span class="status-separator">|</span>
-        <span class="scheme-selector">
-          <button
-            class="scheme-btn"
-            class:active={currentScheme === 'mozhi'}
-            onclick={() => selectScheme('mozhi')}
-          >Mozhi</button>
-          <button
-            class="scheme-btn"
-            class:active={currentScheme === 'inscript2'}
-            onclick={() => selectScheme('inscript2')}
-          >Inscript 2</button>
-          <button
-            class="scheme-btn"
-            class:active={currentScheme === 'inscript1'}
-            onclick={() => selectScheme('inscript1')}
-          >Inscript 1</button>
-        </span>
-      {/if}
+      <button class="settings-btn" onclick={() => { showSettings = true; }} title="Settings">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line>
+          <line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line>
+          <line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line>
+          <line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line>
+          <line x1="17" y1="16" x2="23" y2="16"></line>
+        </svg>
+        <span style="margin-left: 6px;">Settings</span>
+      </button>
     </div>
     <span class="status-element">{currentElement}</span>
   </div>
 </div>
 
+<SettingsModal bind:open={showSettings} />
+
 <style>
   .editor-wrapper {
     position: relative;
@@ -469,14 +446,26 @@
     letter-spacing: 0.04em;
   }
 
-  .scheme-btn:hover {
-    color: var(--text-secondary);
-    background: var(--surface-hover);
+  .settings-btn {
+    display: flex;
+    align-items: center;
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    font-family: system-ui, -apple-system, sans-serif;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    cursor: pointer;
+    padding: 2px 6px;
+    border-radius: 4px;
+    transition: background 120ms, color 120ms;
   }
 
-  .scheme-btn.active {
-    color: var(--accent);
-    font-weight: 600;
+  .settings-btn:hover {
+    color: var(--text-primary);
+    background: var(--surface-hover);
   }
 
   /* ─── Character autocomplete dropdown ─── */
diff --git a/src/lib/components/SettingsModal.svelte b/src/lib/components/SettingsModal.svelte
new file mode 100644
index 0000000..8264b3b
--- /dev/null
+++ b/src/lib/components/SettingsModal.svelte
@@ -0,0 +1,284 @@
+<script lang="ts">
+  import { documentStore } from '$lib/stores/documentStore.svelte';
+  import { themeStore } from '$lib/stores/themeStore.svelte';
+  import { InputModeManager } from '$lib/editor/input/InputModeManager';
+
+  let { open = $bindable(false) } = $props<{ open: boolean }>();
+
+  const inputManager = InputModeManager.getInstance();
+
+  // We sync local state when the modal opens, just in case
+  // it was changed via keyboard shortcuts (like Ctrl+Space).
+  let currentMode = $state<'ENGLISH' | 'MALAYALAM'>(inputManager.isMalayalam ? 'MALAYALAM' : 'ENGLISH');
+  let currentScheme = $state<'inscript1' | 'inscript2' | 'mozhi'>(inputManager.scheme);
+
+  $effect(() => {
+    if (open) {
+      currentMode = inputManager.isMalayalam ? 'MALAYALAM' : 'ENGLISH';
+      currentScheme = inputManager.scheme;
+    }
+  });
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      open = false;
+    }
+  }
+
+  function handleBackdropClick(event: MouseEvent) {
+    if (event.target === event.currentTarget) {
+      open = false;
+    }
+  }
+
+  function setLanguageMode(mode: 'ENGLISH' | 'MALAYALAM') {
+    if (mode === 'MALAYALAM' && !inputManager.isMalayalam) {
+      inputManager.toggle();
+    } else if (mode === 'ENGLISH' && inputManager.isMalayalam) {
+      inputManager.toggle();
+    }
+    currentMode = mode;
+  }
+
+  function setScheme(scheme: 'inscript1' | 'inscript2' | 'mozhi') {
+    inputManager.setScheme(scheme);
+    currentScheme = scheme;
+  }
+</script>
+
+{#if open}
+  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+  <div class="modal-backdrop" onclick={handleBackdropClick} onkeydown={handleKeydown} role="dialog" aria-modal="true" tabindex="-1">
+    <div class="modal-card">
+      <div class="modal-header">
+        <h2>Settings</h2>
+        <button class="btn-close" onclick={() => { open = false; }}>&times;</button>
+      </div>
+
+      <div class="settings-section">
+        <div class="section-label">Appearance</div>
+        
+        <div class="setting-row">
+          <span class="setting-name">Theme</span>
+          <div class="segmented">
+            <button
+              class="segmented-item"
+              class:active={!themeStore.isDark}
+              onclick={() => { if (themeStore.isDark) themeStore.toggle(); }}
+            >Light</button>
+            <button
+              class="segmented-item"
+              class:active={themeStore.isDark}
+              onclick={() => { if (!themeStore.isDark) themeStore.toggle(); }}
+            >Dark</button>
+          </div>
+        </div>
+
+        <div class="setting-row">
+          <span class="setting-name">Editor Font</span>
+          <div class="segmented">
+            <button
+              class="segmented-item"
+              class:active={documentStore.currentFont === 'noto-sans-malayalam'}
+              onclick={() => documentStore.setFont('noto-sans-malayalam')}
+            >Noto</button>
+            <button
+              class="segmented-item"
+              class:active={documentStore.currentFont === 'manjari'}
+              onclick={() => documentStore.setFont('manjari')}
+            >Manjari</button>
+          </div>
+        </div>
+      </div>
+
+      <div class="settings-section">
+        <div class="section-label">Typing & Language</div>
+        
+        <div class="setting-row">
+          <div class="setting-name-group">
+            <span class="setting-name">Input Mode</span>
+            <span class="setting-hint">Ctrl+Space to toggle</span>
+          </div>
+          <div class="segmented">
+            <button
+              class="segmented-item"
+              class:active={currentMode === 'ENGLISH'}
+              onclick={() => setLanguageMode('ENGLISH')}
+            >English</button>
+            <button
+              class="segmented-item"
+              class:active={currentMode === 'MALAYALAM'}
+              onclick={() => setLanguageMode('MALAYALAM')}
+            >Malayalam</button>
+          </div>
+        </div>
+
+        {#if currentMode === 'MALAYALAM'}
+          <div class="setting-row nested">
+            <span class="setting-name">Keyboard Scheme</span>
+            <div class="segmented">
+              <button
+                class="segmented-item"
+                class:active={currentScheme === 'mozhi'}
+                onclick={() => setScheme('mozhi')}
+              >Mozhi</button>
+              <button
+                class="segmented-item"
+                class:active={currentScheme === 'inscript2'}
+                onclick={() => setScheme('inscript2')}
+              >Inscript 2</button>
+              <button
+                class="segmented-item"
+                class:active={currentScheme === 'inscript1'}
+                onclick={() => setScheme('inscript1')}
+              >Inscript 1</button>
+            </div>
+          </div>
+        {/if}
+      </div>
+
+    </div>
+  </div>
+{/if}
+
+<style>
+  .modal-backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(4px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+  }
+
+  .modal-card {
+    background: var(--surface-float);
+    border: 1px solid var(--border-medium);
+    border-radius: 12px;
+    padding: 24px;
+    width: 480px;
+    max-width: 90vw;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+    animation: modal-in 150ms ease-out;
+    font-family: system-ui, -apple-system, sans-serif;
+  }
+
+  @keyframes modal-in {
+    from { opacity: 0; transform: scale(0.97); }
+    to { opacity: 1; transform: scale(1); }
+  }
+
+  .modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 24px;
+  }
+
+  .modal-header h2 {
+    margin: 0;
+    font-size: 15px;
+    color: var(--text-primary);
+    font-weight: 600;
+  }
+
+  .btn-close {
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--text-muted);
+    font-size: 18px;
+    cursor: pointer;
+    transition: background 120ms ease, color 120ms ease;
+  }
+
+  .btn-close:hover {
+    background: var(--surface-hover);
+    color: var(--text-primary);
+  }
+
+  .settings-section {
+    margin-bottom: 24px;
+  }
+  
+  .settings-section:last-child {
+    margin-bottom: 0;
+  }
+
+  .section-label {
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-bottom: 12px;
+    border-bottom: 1px solid var(--border-subtle);
+    padding-bottom: 6px;
+  }
+
+  .setting-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 0;
+  }
+
+  .setting-row.nested {
+    padding-top: 4px;
+    padding-bottom: 10px;
+  }
+
+  .setting-name-group {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .setting-name {
+    font-size: 13px;
+    color: var(--text-primary);
+  }
+
+  .setting-hint {
+    font-size: 11px;
+    color: var(--text-muted);
+  }
+
+  .segmented {
+    display: flex;
+    background: var(--surface-base);
+    border-radius: 6px;
+    padding: 2px;
+    gap: 1px;
+    border: 1px solid var(--border-subtle);
+  }
+
+  .segmented-item {
+    padding: 4px 12px;
+    border-radius: 4px;
+    border: none;
+    font-size: 12px;
+    font-family: system-ui, -apple-system, sans-serif;
+    color: var(--text-muted);
+    background: transparent;
+    cursor: pointer;
+    transition: background 100ms, color 100ms;
+  }
+
+  .segmented-item:hover {
+    color: var(--text-secondary);
+  }
+
+  .segmented-item.active {
+    background: var(--surface-elevated);
+    color: var(--text-primary);
+    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+  }
+</style>
diff --git a/src/lib/components/TitleBar.svelte b/src/lib/components/TitleBar.svelte
index 2493e7f..def8e27 100644
--- a/src/lib/components/TitleBar.svelte
+++ b/src/lib/components/TitleBar.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { open } from '@tauri-apps/plugin-dialog';
   import { documentStore } from '$lib/stores/documentStore.svelte';
-  import { themeStore } from '$lib/stores/themeStore.svelte';
   import MetadataModal from './MetadataModal.svelte';
   import ExportModal from './ExportModal.svelte';
 
@@ -62,29 +61,6 @@
   </div>
 
   <div class="btn-group right">
-    <!-- Theme toggle -->
-    <button class="btn-icon" onclick={() => themeStore.toggle()} title={themeStore.isDark ? 'Switch to light mode' : 'Switch to dark mode'}>
-      {themeStore.isDark ? 'Light' : 'Dark'}
-    </button>
-
-    <span class="separator"></span>
-
-    <!-- Font selector — segmented control -->
-    <div class="segmented">
-      <button
-        class="segmented-item"
-        class:active={documentStore.currentFont === 'noto-sans-malayalam'}
-        onclick={() => documentStore.setFont('noto-sans-malayalam')}
-      >Noto</button>
-      <button
-        class="segmented-item"
-        class:active={documentStore.currentFont === 'manjari'}
-        onclick={() => documentStore.setFont('manjari')}
-      >Manjari</button>
-    </div>
-
-    <span class="separator"></span>
-
     <button class="btn-ghost" onclick={() => { showExport = true; }}>Export</button>
     <button class="btn-primary" onclick={handleSave}>Save</button>
   </div>

From 694a64467e8564894feca6fd21de544af92301eb Mon Sep 17 00:00:00 2001
From: Hiran Venugopalan <hiran.v@gmail.com>
Date: Wed, 18 Mar 2026 22:59:30 +0530
Subject: [PATCH 4/4] feat: New Settings

---
 src/lib/components/Editor.svelte        |  53 +---
 src/lib/components/SettingsModal.svelte | 316 ++++++++++++++----------
 src/lib/components/TitleBar.svelte      |  53 ----
 src/routes/+page.svelte                 | 156 ++++++------
 4 files changed, 269 insertions(+), 309 deletions(-)

diff --git a/src/lib/components/Editor.svelte b/src/lib/components/Editor.svelte
index 10d4e5d..363c7e9 100644
--- a/src/lib/components/Editor.svelte
+++ b/src/lib/components/Editor.svelte
@@ -26,8 +26,6 @@
   let view: EditorView | null = null;
   const inputManager = InputModeManager.getInstance();
 
-  const inputManager = InputModeManager.getInstance();
-
   // Map the font setting slug to a CSS font-family name
   let fontFamily = $derived(
     documentStore.currentFont === 'manjari' ? 'Manjari' : 'Noto Sans Malayalam'
@@ -247,7 +245,7 @@
   </div>
   <div class="status-bar">
     <div class="status-left">
-      <button class="settings-btn" onclick={() => { showSettings = true; }} title="Settings">
+      <button class="settings-btn" onclick={() => { showSettings = true; }} title="Configure Settings">
         <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line>
           <line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line>
@@ -255,7 +253,6 @@
           <line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line>
           <line x1="17" y1="16" x2="23" y2="16"></line>
         </svg>
-        <span style="margin-left: 6px;">Settings</span>
       </button>
     </div>
     <span class="status-element">{currentElement}</span>
@@ -402,63 +399,21 @@
     gap: 8px;
   }
 
-  .status-mode {
-    font-weight: 600;
-    text-transform: uppercase;
-    color: var(--text-muted);
-  }
-
-  .status-mode.malayalam {
-    color: var(--accent);
-  }
-
-  .status-mode.flash {
-    background: var(--accent-muted);
-    border-radius: 3px;
-    padding: 1px 6px;
-    transition: background 0.5s ease-out;
-  }
-
-  .status-separator {
-    color: var(--border-medium);
-  }
-
   .status-element {
     color: var(--text-muted);
     text-transform: uppercase;
   }
 
-  .scheme-selector {
-    display: flex;
-    gap: 1px;
-  }
-
-  .scheme-btn {
-    background: none;
-    border: none;
-    padding: 2px 6px;
-    font-size: 11px;
-    font-family: system-ui, -apple-system, sans-serif;
-    color: var(--text-muted);
-    cursor: pointer;
-    border-radius: 3px;
-    transition: background 100ms, color 100ms;
-    letter-spacing: 0.04em;
-  }
-
   .settings-btn {
     display: flex;
     align-items: center;
+    justify-content: center;
     background: transparent;
     border: none;
     color: var(--text-muted);
-    font-family: system-ui, -apple-system, sans-serif;
-    font-size: 11px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
     cursor: pointer;
-    padding: 2px 6px;
+    width: 24px;
+    height: 24px;
     border-radius: 4px;
     transition: background 120ms, color 120ms;
   }
diff --git a/src/lib/components/SettingsModal.svelte b/src/lib/components/SettingsModal.svelte
index 8264b3b..7be9e94 100644
--- a/src/lib/components/SettingsModal.svelte
+++ b/src/lib/components/SettingsModal.svelte
@@ -11,6 +11,7 @@
   // it was changed via keyboard shortcuts (like Ctrl+Space).
   let currentMode = $state<'ENGLISH' | 'MALAYALAM'>(inputManager.isMalayalam ? 'MALAYALAM' : 'ENGLISH');
   let currentScheme = $state<'inscript1' | 'inscript2' | 'mozhi'>(inputManager.scheme);
+  let schemeDropdownOpen = $state(false);
 
   $effect(() => {
     if (open) {
@@ -55,86 +56,92 @@
         <button class="btn-close" onclick={() => { open = false; }}>&times;</button>
       </div>
 
-      <div class="settings-section">
-        <div class="section-label">Appearance</div>
-        
-        <div class="setting-row">
-          <span class="setting-name">Theme</span>
-          <div class="segmented">
-            <button
-              class="segmented-item"
-              class:active={!themeStore.isDark}
-              onclick={() => { if (themeStore.isDark) themeStore.toggle(); }}
-            >Light</button>
-            <button
-              class="segmented-item"
-              class:active={themeStore.isDark}
-              onclick={() => { if (!themeStore.isDark) themeStore.toggle(); }}
-            >Dark</button>
-          </div>
+      <div class="setting-row">
+        <div class="setting-name-group">
+          <span class="setting-name">Language</span>
+          <span class="setting-hint">⌃Space</span>
         </div>
-
-        <div class="setting-row">
-          <span class="setting-name">Editor Font</span>
-          <div class="segmented">
-            <button
-              class="segmented-item"
-              class:active={documentStore.currentFont === 'noto-sans-malayalam'}
-              onclick={() => documentStore.setFont('noto-sans-malayalam')}
-            >Noto</button>
-            <button
-              class="segmented-item"
-              class:active={documentStore.currentFont === 'manjari'}
-              onclick={() => documentStore.setFont('manjari')}
-            >Manjari</button>
-          </div>
+        <div class="segmented">
+          <button
+            class="segmented-item"
+            class:active={currentMode === 'ENGLISH'}
+            onclick={() => setLanguageMode('ENGLISH')}
+          >English</button>
+          <button
+            class="segmented-item"
+            class:active={currentMode === 'MALAYALAM'}
+            onclick={() => setLanguageMode('MALAYALAM')}
+          >മലയാളം</button>
         </div>
       </div>
 
-      <div class="settings-section">
-        <div class="section-label">Typing & Language</div>
-        
-        <div class="setting-row">
-          <div class="setting-name-group">
-            <span class="setting-name">Input Mode</span>
-            <span class="setting-hint">Ctrl+Space to toggle</span>
-          </div>
-          <div class="segmented">
-            <button
-              class="segmented-item"
-              class:active={currentMode === 'ENGLISH'}
-              onclick={() => setLanguageMode('ENGLISH')}
-            >English</button>
-            <button
-              class="segmented-item"
-              class:active={currentMode === 'MALAYALAM'}
-              onclick={() => setLanguageMode('MALAYALAM')}
-            >Malayalam</button>
+      {#if currentMode === 'MALAYALAM'}
+        <div class="setting-row nested">
+          <span class="setting-name">Keyboard</span>
+          
+          <div class="custom-select-container">
+            <button 
+              class="scheme-select" 
+              onclick={() => schemeDropdownOpen = !schemeDropdownOpen}
+            >
+              {currentScheme === 'mozhi' ? 'Mozhi Phonetic' : currentScheme === 'inscript2' ? 'Inscript Standard' : 'Inscript Legacy'}
+            </button>
+
+            {#if schemeDropdownOpen}
+              <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+              <div class="dropdown-backdrop" onclick={(e) => { e.stopPropagation(); schemeDropdownOpen = false; }}></div>
+              <div class="custom-options">
+                <button 
+                  class="custom-option" 
+                  class:selected={currentScheme === 'mozhi'}
+                  onclick={() => { setScheme('mozhi'); schemeDropdownOpen = false; }}
+                >Mozhi Phonetic</button>
+                <button 
+                  class="custom-option" 
+                  class:selected={currentScheme === 'inscript2'}
+                  onclick={() => { setScheme('inscript2'); schemeDropdownOpen = false; }}
+                >Inscript Standard</button>
+                <button 
+                  class="custom-option" 
+                  class:selected={currentScheme === 'inscript1'}
+                  onclick={() => { setScheme('inscript1'); schemeDropdownOpen = false; }}
+                >Inscript Legacy</button>
+              </div>
+            {/if}
           </div>
         </div>
+      {/if}
+
+      <div class="setting-row">
+        <span class="setting-name">Editor Font</span>
+        <div class="segmented">
+          <button
+            class="segmented-item"
+            class:active={documentStore.currentFont === 'noto-sans-malayalam'}
+            onclick={() => documentStore.setFont('noto-sans-malayalam')}
+          >Noto</button>
+          <button
+            class="segmented-item"
+            class:active={documentStore.currentFont === 'manjari'}
+            onclick={() => documentStore.setFont('manjari')}
+          >Manjari</button>
+        </div>
+      </div>
 
-        {#if currentMode === 'MALAYALAM'}
-          <div class="setting-row nested">
-            <span class="setting-name">Keyboard Scheme</span>
-            <div class="segmented">
-              <button
-                class="segmented-item"
-                class:active={currentScheme === 'mozhi'}
-                onclick={() => setScheme('mozhi')}
-              >Mozhi</button>
-              <button
-                class="segmented-item"
-                class:active={currentScheme === 'inscript2'}
-                onclick={() => setScheme('inscript2')}
-              >Inscript 2</button>
-              <button
-                class="segmented-item"
-                class:active={currentScheme === 'inscript1'}
-                onclick={() => setScheme('inscript1')}
-              >Inscript 1</button>
-            </div>
-          </div>
-        {/if}
+      <div class="setting-row">
+        <span class="setting-name">Theme</span>
+        <div class="segmented">
+          <button
+            class="segmented-item"
+            class:active={!themeStore.isDark}
+            onclick={() => { if (themeStore.isDark) themeStore.toggle(); }}
+          >Light</button>
+          <button
+            class="segmented-item"
+            class:active={themeStore.isDark}
+            onclick={() => { if (!themeStore.isDark) themeStore.toggle(); }}
+          >Dark</button>
+        </div>
       </div>
 
     </div>
@@ -145,58 +152,58 @@
   .modal-backdrop {
     position: fixed;
     inset: 0;
-    background: rgba(0, 0, 0, 0.6);
-    backdrop-filter: blur(4px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
+    z-index: 999;
+    /* Invisible backdrop just for capturing outside clicks */
   }
 
   .modal-card {
+    position: absolute;
+    bottom: 36px;
+    left: 16px;
     background: var(--surface-float);
-    border: 1px solid var(--border-medium);
-    border-radius: 12px;
-    padding: 24px;
-    width: 480px;
-    max-width: 90vw;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-    animation: modal-in 150ms ease-out;
+    border: 1px solid var(--border-subtle);
+    border-radius: 8px;
+    padding: 6px 14px;
+    width: 250px;
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.1);
+    animation: menu-in 100ms ease-out;
     font-family: system-ui, -apple-system, sans-serif;
+    z-index: 1000;
   }
 
-  @keyframes modal-in {
-    from { opacity: 0; transform: scale(0.97); }
-    to { opacity: 1; transform: scale(1); }
+  @keyframes menu-in {
+    from { opacity: 0; transform: translateY(4px); }
+    to { opacity: 1; transform: translateY(0); }
   }
 
   .modal-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 24px;
+    margin-bottom: 8px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid var(--border-subtle);
   }
 
   .modal-header h2 {
     margin: 0;
-    font-size: 15px;
+    font-size: 13px;
     color: var(--text-primary);
     font-weight: 600;
   }
 
   .btn-close {
-    width: 28px;
-    height: 28px;
+    width: 24px;
+    height: 24px;
     display: flex;
     align-items: center;
     justify-content: center;
     border: none;
-    border-radius: 6px;
+    border-radius: 4px;
     background: transparent;
     color: var(--text-muted);
-    font-size: 18px;
+    font-size: 16px;
     cursor: pointer;
-    transition: background 120ms ease, color 120ms ease;
   }
 
   .btn-close:hover {
@@ -204,35 +211,11 @@
     color: var(--text-primary);
   }
 
-  .settings-section {
-    margin-bottom: 24px;
-  }
-  
-  .settings-section:last-child {
-    margin-bottom: 0;
-  }
-
-  .section-label {
-    font-size: 11px;
-    font-weight: 600;
-    color: var(--text-muted);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    margin-bottom: 12px;
-    border-bottom: 1px solid var(--border-subtle);
-    padding-bottom: 6px;
-  }
-
   .setting-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 10px 0;
-  }
-
-  .setting-row.nested {
-    padding-top: 4px;
-    padding-bottom: 10px;
+    padding: 8px 0;
   }
 
   .setting-name-group {
@@ -242,13 +225,19 @@
   }
 
   .setting-name {
-    font-size: 13px;
+    font-size: 12px;
+    font-weight: 500;
     color: var(--text-primary);
   }
 
   .setting-hint {
-    font-size: 11px;
+    font-size: 10px;
     color: var(--text-muted);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    background: var(--surface-base);
+    padding: 2px 4px;
+    border-radius: 3px;
+    border: 1px solid var(--border-subtle);
   }
 
   .segmented {
@@ -258,13 +247,17 @@
     padding: 2px;
     gap: 1px;
     border: 1px solid var(--border-subtle);
+    width: 140px;
   }
 
   .segmented-item {
-    padding: 4px 12px;
+    flex: 1;
+    text-align: center;
+    padding: 4px 0;
     border-radius: 4px;
     border: none;
-    font-size: 12px;
+    font-size: 11px;
+    font-weight: 500;
     font-family: system-ui, -apple-system, sans-serif;
     color: var(--text-muted);
     background: transparent;
@@ -281,4 +274,77 @@
     color: var(--text-primary);
     box-shadow: 0 1px 2px rgba(0,0,0,0.1);
   }
+
+  .scheme-select {
+    appearance: none;
+    background: var(--surface-base) url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 6px center / 12px;
+    color: var(--text-primary);
+    border: 1px solid var(--border-subtle);
+    border-radius: 4px;
+    padding: 4px 24px 4px 8px;
+    font-size: 12px;
+    font-weight: 500;
+    font-family: inherit;
+    outline: none;
+    cursor: pointer;
+    width: 140px;
+    text-align: left;
+  }
+
+  .custom-select-container {
+    position: relative;
+  }
+
+  .dropdown-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+  }
+
+  .custom-options {
+    position: absolute;
+    bottom: calc(100% + 4px);
+    right: 0;
+    width: 160px;
+    background: var(--surface-elevated);
+    border: 1px solid var(--border-medium);
+    border-radius: 6px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+    padding: 4px;
+    z-index: 1001;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    animation: menu-up 100ms ease-out;
+    transform-origin: bottom center;
+  }
+
+  @keyframes menu-up {
+    from { opacity: 0; transform: translateY(4px) scale(0.98); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+  }
+
+  .custom-option {
+    background: transparent;
+    border: none;
+    padding: 6px 10px;
+    text-align: left;
+    font-size: 12px;
+    font-family: system-ui, -apple-system, sans-serif;
+    color: var(--text-secondary);
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background 100ms, color 100ms;
+  }
+
+  .custom-option:hover {
+    background: var(--surface-hover);
+    color: var(--text-primary);
+  }
+
+  .custom-option.selected {
+    background: var(--accent-muted);
+    color: var(--accent);
+    font-weight: 500;
+  }
 </style>
diff --git a/src/lib/components/TitleBar.svelte b/src/lib/components/TitleBar.svelte
index def8e27..a394858 100644
--- a/src/lib/components/TitleBar.svelte
+++ b/src/lib/components/TitleBar.svelte
@@ -160,57 +160,4 @@
   .btn-primary:hover {
     background: var(--accent-hover);
   }
-
-  /* ─── Icon button (theme toggle) ─── */
-  .btn-icon {
-    height: 28px;
-    padding: 0 8px;
-    border-radius: 6px;
-    border: none;
-    background: transparent;
-    color: var(--text-muted);
-    font-size: 11px;
-    font-family: system-ui, -apple-system, sans-serif;
-    cursor: pointer;
-    transition: background 120ms ease, color 120ms ease;
-  }
-  .btn-icon:hover {
-    background: var(--surface-hover);
-    color: var(--text-primary);
-  }
-
-  /* ─── Separator ─── */
-  .separator {
-    width: 1px;
-    height: 16px;
-    background: var(--border-subtle);
-    margin: 0 4px;
-  }
-
-  /* ─── Segmented control (font selector) ─── */
-  .segmented {
-    display: flex;
-    background: var(--surface-base);
-    border-radius: 6px;
-    padding: 2px;
-    gap: 1px;
-  }
-  .segmented-item {
-    padding: 3px 8px;
-    border-radius: 4px;
-    border: none;
-    font-size: 11px;
-    font-family: system-ui, -apple-system, sans-serif;
-    color: var(--text-muted);
-    background: transparent;
-    cursor: pointer;
-    transition: background 100ms, color 100ms;
-  }
-  .segmented-item:hover {
-    color: var(--text-secondary);
-  }
-  .segmented-item.active {
-    background: var(--surface-elevated);
-    color: var(--text-primary);
-  }
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4ea1ba6..2bd0aa8 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -28,14 +28,14 @@
   // Set to true after menu-quit confirms — prevents onCloseRequested from prompting again
   let quitConfirmed = false;
 
-  onMount(async () => {
+  onMount(() => {
     // Initialize theme on first mount
     themeStore.init();
 
     if (!appInitialized) {
       appInitialized = true;
       if (!documentStore.document) {
-        await documentStore.newDocument();
+        documentStore.newDocument();
       }
     }
 
@@ -113,92 +113,84 @@
 
     window.addEventListener('keydown', handleGlobalKeydown);
 
+    let unlistens: (() => void)[] = [];
+
     // Listen for native menu events emitted from the Rust backend.
     // Each custom menu item (New, Open, Save, Save As) emits an event
     // that we handle here to call the appropriate store method.
-    const unlistenNew = await listen('menu-new', async () => {
-      if (!(await documentStore.confirmIfDirty())) return;
-      await documentStore.newDocument();
-    });
-
-    const unlistenOpen = await listen('menu-open', async () => {
-      if (!(await documentStore.confirmIfDirty())) return;
-      const path = await open({
-        multiple: false,
-        filters: [{ name: 'Screenplay', extensions: ['screenplay'] }]
-      });
-      if (typeof path === 'string') {
-        await documentStore.openDocument(path);
-      }
-    });
-
-    const unlistenSave = await listen('menu-save', () => {
-      documentStore.saveWithDialog();
-    });
-
-    const unlistenSaveAs = await listen('menu-save-as', () => {
-      documentStore.saveAsDialog();
-    });
-
-    const unlistenAbout = await listen('menu-about', () => {
-      showAbout = true;
-    });
-
-    const unlistenHelpGuide = await listen('menu-help-guide', () => {
-      showHelp = true;
-    });
-
-    const unlistenStatistics = await listen('menu-statistics', () => {
-      showStatistics = true;
-    });
-
-    const unlistenSceneCards = await listen('menu-scene-cards', () => {
-      showSceneCards = !showSceneCards;
-    });
-
-    const unlistenStoryMode = await listen('menu-story-mode', () => {
-      showStoryMode = !showStoryMode;
-    });
-
-    const unlistenFind = await listen('menu-find', () => {
-      findReplaceOpen = true;
-      findReplaceMode = 'find';
-    });
-
-    const unlistenFindReplace = await listen('menu-find-replace', () => {
-      findReplaceOpen = true;
-      findReplaceMode = 'replace';
-    });
-
-    const unlistenQuit = await listen('menu-quit', async () => {
-      if (!(await documentStore.confirmIfDirty())) return;
-      quitConfirmed = true;
-      await getCurrentWindow().close();
-    });
-
-    // Intercept window close to prompt for unsaved changes
-    const unlistenClose = await getCurrentWindow().onCloseRequested(async (event) => {
-      if (quitConfirmed) return; // Already confirmed via menu-quit
-      if (!(await documentStore.confirmIfDirty())) {
-        event.preventDefault();
-      }
-    });
+    (async () => {
+      unlistens.push(await listen('menu-new', async () => {
+        if (!(await documentStore.confirmIfDirty())) return;
+        await documentStore.newDocument();
+      }));
+
+      unlistens.push(await listen('menu-open', async () => {
+        if (!(await documentStore.confirmIfDirty())) return;
+        const path = await open({
+          multiple: false,
+          filters: [{ name: 'Screenplay', extensions: ['screenplay'] }]
+        });
+        if (typeof path === 'string') {
+          await documentStore.openDocument(path);
+        }
+      }));
+
+      unlistens.push(await listen('menu-save', () => {
+        documentStore.saveWithDialog();
+      }));
+
+      unlistens.push(await listen('menu-save-as', () => {
+        documentStore.saveAsDialog();
+      }));
+
+      unlistens.push(await listen('menu-about', () => {
+        showAbout = true;
+      }));
+
+      unlistens.push(await listen('menu-help-guide', () => {
+        showHelp = true;
+      }));
+
+      unlistens.push(await listen('menu-statistics', () => {
+        showStatistics = true;
+      }));
+
+      unlistens.push(await listen('menu-scene-cards', () => {
+        showSceneCards = !showSceneCards;
+      }));
+
+      unlistens.push(await listen('menu-story-mode', () => {
+        showStoryMode = !showStoryMode;
+      }));
+
+      unlistens.push(await listen('menu-find', () => {
+        findReplaceOpen = true;
+        findReplaceMode = 'find';
+      }));
+
+      unlistens.push(await listen('menu-find-replace', () => {
+        findReplaceOpen = true;
+        findReplaceMode = 'replace';
+      }));
+
+      unlistens.push(await listen('menu-quit', async () => {
+        if (!(await documentStore.confirmIfDirty())) return;
+        quitConfirmed = true;
+        await getCurrentWindow().close();
+      }));
+
+      // Intercept window close to prompt for unsaved changes
+      unlistens.push(await getCurrentWindow().onCloseRequested(async (event) => {
+        if (quitConfirmed) return; // Already confirmed via menu-quit
+        if (!(await documentStore.confirmIfDirty())) {
+          event.preventDefault();
+        }
+      }));
+    })();
 
     return () => {
       window.removeEventListener('keydown', handleGlobalKeydown);
-      unlistenNew();
-      unlistenOpen();
-      unlistenSave();
-      unlistenSaveAs();
-      unlistenAbout();
-      unlistenHelpGuide();
-      unlistenStatistics();
-      unlistenSceneCards();
-      unlistenStoryMode();
-      unlistenFind();
-      unlistenFindReplace();
-      unlistenQuit();
-      unlistenClose();
+      unlistens.forEach(fn => fn());
     };
   });
 </script>