chore(release): v0.1.16

Move Check for Updates into the macOS app menu and add Settings (Cmd+,),
Save (Cmd+S), Find (Cmd+F), chapter navigation, and a Help > Report an
Issue link. Route new menu actions through menu-action events and trim
duplicate editor keybindings.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "margin-app",
   "private": true,
-  "version": "0.1.14",
+  "version": "0.1.16",
   "type": "module",
   "scripts": {
     "dev": "vite",

src-tauri/Cargo.lock

@@ -4713,7 +4713,7 @@ checksum = "3e2e65a1a2e43cfcb47a895c4c8b10d1f4a61097f9f254f183aee60cad9c651d"
 
 [[package]]
 name = "margin-app"
-version = "0.1.11"
+version = "0.1.15"
 dependencies = [
  "base64 0.22.1",
  "fontdb",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "margin-app"
-version = "0.1.14"
+version = "0.1.16"
 description = "A Tauri App"
 authors = ["you"]
 edition = "2021"
@@ -45,7 +45,15 @@ url = "2"
 # in the graph via Tauri, so this adds nothing new to the build.
 [target.'cfg(target_os = "macos")'.dependencies]
 objc2 = "0.6"
-objc2-app-kit = { version = "0.3", features = ["NSSpellChecker"] }
+objc2-app-kit = { version = "0.3", features = [
+    "NSSpellChecker",
+    "NSApplication",
+    "NSEvent",
+    "NSMenu",
+    "NSMenuItem",
+    "NSResponder",
+    "NSWritingToolsCoordinator",
+] }
 objc2-foundation = { version = "0.3", features = ["NSString", "NSArray", "NSRange", "NSTextCheckingResult"] }
 
 # Other platforms fall back to the bundled Hunspell dictionary via spellbook.

src-tauri/src/lib.rs

@@ -7,6 +7,7 @@ mod macspell;
 mod pdf;
 mod project;
 mod proofing;
+mod writingtools;
 
 #[cfg(desktop)]
 use tauri::menu::{Menu, MenuItemBuilder, MenuItemKind, PredefinedMenuItem, SubmenuBuilder};
@@ -16,50 +17,116 @@ use tauri::{Emitter, Runtime};
 #[cfg(desktop)]
 fn build_menu<R: Runtime>(handle: &tauri::AppHandle<R>) -> tauri::Result<Menu<R>> {
     let menu = Menu::default(handle)?;
+
     let new_book = MenuItemBuilder::with_id("new-book", "New Book")
         .accelerator("CmdOrCtrl+N")
         .build(handle)?;
-    let export_pdf = MenuItemBuilder::with_id("export-pdf", "Export as PDF…").build(handle)?;
-    let export_epub = MenuItemBuilder::with_id("export-epub", "Export as EPUB…").build(handle)?;
+    let save = MenuItemBuilder::with_id("save", "Save")
+        .accelerator("CmdOrCtrl+S")
+        .build(handle)?;
+    let export_pdf = MenuItemBuilder::with_id("export-pdf", "Export as PDF…")
+        .accelerator("CmdOrCtrl+Shift+P")
+        .build(handle)?;
+    let export_epub = MenuItemBuilder::with_id("export-epub", "Export as EPUB…")
+        .accelerator("CmdOrCtrl+Shift+E")
+        .build(handle)?;
     let check_updates =
         MenuItemBuilder::with_id("check-updates", "Check for Updates…").build(handle)?;
+    let settings = MenuItemBuilder::with_id("settings", "Settings…")
+        .accelerator("CmdOrCtrl+,")
+        .build(handle)?;
+    let find = MenuItemBuilder::with_id("find", "Find…")
+        .accelerator("CmdOrCtrl+F")
+        .build(handle)?;
+    let report_issue =
+        MenuItemBuilder::with_id("report-issue", "Report an Issue…").build(handle)?;
 
-    let file_submenu = menu
+    let submenus: Vec<_> = menu
         .items()?
         .into_iter()
-        .find_map(|item| match item {
-            MenuItemKind::Submenu(submenu)
-                if submenu.text().map(|t| t == "File").unwrap_or(false) =>
-            {
-                Some(submenu)
-            }
+        .filter_map(|item| match item {
+            MenuItemKind::Submenu(submenu) => Some(submenu),
             _ => None,
-        });
+        })
+        .collect();
 
-    match file_submenu {
+    let find_submenu = |name: &str| {
+        submenus
+            .iter()
+            .find(|submenu| submenu.text().map(|t| t == name).unwrap_or(false))
+            .cloned()
+    };
+
+    match find_submenu("File") {
         Some(submenu) => {
             submenu.prepend_items(&[
                 &new_book,
                 &PredefinedMenuItem::separator(handle)?,
+                &save,
+                &PredefinedMenuItem::separator(handle)?,
                 &export_pdf,
                 &export_epub,
                 &PredefinedMenuItem::separator(handle)?,
-                &check_updates,
-                &PredefinedMenuItem::separator(handle)?,
             ])?;
         }
         None => {
             let submenu = SubmenuBuilder::new(handle, "File")
                 .item(&new_book)
                 .item(&PredefinedMenuItem::separator(handle)?)
+                .item(&save)
+                .item(&PredefinedMenuItem::separator(handle)?)
                 .item(&export_pdf)
                 .item(&export_epub)
-                .item(&PredefinedMenuItem::separator(handle)?)
-                .item(&check_updates)
                 .build()?;
             menu.insert(&submenu, 1)?;
         }
     }
+
+    if let Some(edit) = find_submenu("Edit") {
+        edit.append_items(&[&PredefinedMenuItem::separator(handle)?, &find])?;
+    }
+
+    if let Some(help) = find_submenu("Help") {
+        help.append_items(&[&report_issue])?;
+    }
+
+    #[cfg(target_os = "macos")]
+    {
+        if let Some(app_submenu) = submenus.first() {
+            app_submenu.insert(&check_updates, 1)?;
+            app_submenu.insert(&settings, 3)?;
+            app_submenu.insert(&PredefinedMenuItem::separator(handle)?, 4)?;
+        }
+        if let Some(view) = find_submenu("View") {
+            let toggle_chapters = MenuItemBuilder::with_id("toggle-chapters", "Toggle Chapters")
+                .accelerator("CmdOrCtrl+\\")
+                .build(handle)?;
+            let next_chapter = MenuItemBuilder::with_id("next-chapter", "Next Chapter")
+                .accelerator("CmdOrCtrl+Alt+Down")
+                .build(handle)?;
+            let prev_chapter = MenuItemBuilder::with_id("prev-chapter", "Previous Chapter")
+                .accelerator("CmdOrCtrl+Alt+Up")
+                .build(handle)?;
+            view.prepend_items(&[
+                &toggle_chapters,
+                &PredefinedMenuItem::separator(handle)?,
+                &next_chapter,
+                &prev_chapter,
+                &PredefinedMenuItem::separator(handle)?,
+            ])?;
+        }
+    }
+
+    #[cfg(not(target_os = "macos"))]
+    {
+        if let Some(file) = find_submenu("File") {
+            file.append_items(&[&PredefinedMenuItem::separator(handle)?, &check_updates])?;
+        }
+        if let Some(edit) = find_submenu("Edit") {
+            edit.append_items(&[&settings])?;
+        }
+    }
+
     Ok(menu)
 }
 
@@ -85,6 +152,7 @@ pub fn run() {
         .manage(gdrive::GDriveState::default())
         .setup(|app| {
             gdrive::init_session(app.handle());
+            writingtools::label_writing_tool_shortcuts();
             Ok(())
         });
 
@@ -95,7 +163,17 @@ pub fn run() {
             .on_menu_event(|app, event| {
                 if matches!(
                     event.id().0.as_str(),
-                    "new-book" | "export-pdf" | "export-epub" | "check-updates"
+                    "new-book"
+                        | "save"
+                        | "export-pdf"
+                        | "export-epub"
+                        | "check-updates"
+                        | "settings"
+                        | "find"
+                        | "toggle-chapters"
+                        | "next-chapter"
+                        | "prev-chapter"
+                        | "report-issue"
                 ) {
                     app.emit("menu-action", event.id().0.as_str()).ok();
                 }
@@ -117,6 +195,7 @@ pub fn run() {
             library::delete_book,
             proofing::proof_text,
             proofing::remember_word,
+            writingtools::run_writing_tool,
             gdrive::gdrive_connect,
             gdrive::gdrive_disconnect,
             gdrive::gdrive_status,

src-tauri/src/library.rs

@@ -1,13 +1,16 @@
 use std::fs;
-use std::path::PathBuf;
+use std::path::{Path, PathBuf};
+use std::time::UNIX_EPOCH;
 use tauri::Manager;
 
 #[derive(serde::Serialize)]
+#[serde(rename_all = "camelCase")]
 pub struct BookSummary {
     id: String,
     title: String,
     author: String,
     corrupt: bool,
+    updated_at: u64,
 }
 
 fn corrupt_summary(stem: &str) -> BookSummary {
@@ -16,9 +19,33 @@ fn corrupt_summary(stem: &str) -> BookSummary {
         title: "Unreadable book".to_string(),
         author: String::new(),
         corrupt: true,
+        updated_at: 0,
     }
 }
 
+fn file_modified_ms(path: &Path) -> u64 {
+    fs::metadata(path)
+        .and_then(|m| m.modified())
+        .ok()
+        .and_then(|t| t.duration_since(UNIX_EPOCH).ok())
+        .map(|d| d.as_millis() as u64)
+        .unwrap_or(0)
+}
+
+fn latest_chapter_ms(value: &serde_json::Value) -> u64 {
+    value
+        .get("chapters")
+        .and_then(|c| c.as_array())
+        .map(|chapters| {
+            chapters
+                .iter()
+                .filter_map(|c| c.get("updatedAt").and_then(|v| v.as_u64()))
+                .max()
+                .unwrap_or(0)
+        })
+        .unwrap_or(0)
+}
+
 pub(crate) fn app_data_dir(app: &tauri::AppHandle) -> Result<PathBuf, String> {
     let dir = app.path().app_data_dir().map_err(|e| e.to_string())?;
     fs::create_dir_all(&dir).map_err(|e| e.to_string())?;
@@ -81,11 +108,16 @@ pub fn list_books(app: tauri::AppHandle) -> Result<Vec<BookSummary>, String> {
             .and_then(|v| v.as_str())
             .unwrap_or("")
             .to_string();
+        let updated_at = match latest_chapter_ms(&value) {
+            0 => file_modified_ms(&path),
+            ms => ms,
+        };
         books.push(BookSummary {
             id: id.to_string(),
             title,
             author,
             corrupt: false,
+            updated_at,
         });
     }
     Ok(books)

src-tauri/src/writingtools.rs

@@ -0,0 +1,81 @@
+#[cfg(target_os = "macos")]
+mod mac {
+    use objc2::rc::Retained;
+    use objc2::MainThreadMarker;
+    use objc2_app_kit::{NSApplication, NSEventModifierFlags, NSMenu, NSMenuItem};
+    use objc2_foundation::{NSArray, NSString};
+
+    const SHORTCUTS: [(&str, &str); 2] = [("Proofread", "f"), ("Rewrite", "r")];
+
+    fn submenu_named(items: &NSArray<NSMenuItem>, title: &str) -> Option<Retained<NSMenu>> {
+        for i in 0..items.count() {
+            let item = items.objectAtIndex(i);
+            if item.title().to_string() == title {
+                return item.submenu();
+            }
+        }
+        None
+    }
+
+    fn edit_menu(mtm: MainThreadMarker) -> Option<Retained<NSMenu>> {
+        let main = NSApplication::sharedApplication(mtm).mainMenu()?;
+        for i in 0..main.numberOfItems() {
+            let Some(item) = main.itemAtIndex(i) else { continue };
+            let Some(submenu) = item.submenu() else { continue };
+            if submenu.title().to_string() == "Edit" || item.title().to_string() == "Edit" {
+                return Some(submenu);
+            }
+        }
+        None
+    }
+
+    fn writing_tools_menu(mtm: MainThreadMarker) -> Option<Retained<NSMenu>> {
+        submenu_named(&edit_menu(mtm)?.itemArray(), "Writing Tools")
+    }
+
+    pub fn label_shortcuts() {
+        let Some(mtm) = MainThreadMarker::new() else { return };
+        let Some(menu) = writing_tools_menu(mtm) else { return };
+        let items = menu.itemArray();
+        for i in 0..items.count() {
+            let item = items.objectAtIndex(i);
+            let title = item.title().to_string();
+            let Some((_, key)) = SHORTCUTS.iter().find(|(name, _)| *name == title) else { continue };
+            item.setKeyEquivalent(&NSString::from_str(key));
+            item.setKeyEquivalentModifierMask(
+                NSEventModifierFlags::Shift | NSEventModifierFlags::Option,
+            );
+        }
+    }
+
+    pub fn perform(tool: &str) {
+        let Some(mtm) = MainThreadMarker::new() else { return };
+        let Some(menu) = writing_tools_menu(mtm) else { return };
+        let items = menu.itemArray();
+        for i in 0..items.count() {
+            if items.objectAtIndex(i).title().to_string() == tool {
+                menu.performActionForItemAtIndex(i as isize);
+                return;
+            }
+        }
+    }
+}
+
+pub fn label_writing_tool_shortcuts() {
+    #[cfg(target_os = "macos")]
+    mac::label_shortcuts();
+}
+
+#[tauri::command]
+pub fn run_writing_tool(app: tauri::AppHandle, tool: String) -> Result<(), String> {
+    #[cfg(target_os = "macos")]
+    {
+        app.run_on_main_thread(move || mac::perform(&tool))
+            .map_err(|e| e.to_string())
+    }
+    #[cfg(not(target_os = "macos"))]
+    {
+        let _ = (app, tool);
+        Ok(())
+    }
+}

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Margin",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "identifier": "studio.margin.app",
   "build": {
     "beforeDevCommand": "pnpm dev",

src/App.tsx

@@ -1,10 +1,12 @@
 import { useEffect } from "react";
 import { listen } from "@tauri-apps/api/event";
+import { openUrl } from "@tauri-apps/plugin-opener";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 import { Library } from "./components/Library";
 import { EditorView } from "./components/EditorView";
 import { BackupSettings } from "./components/BackupSettings";
 import { ExportPreview } from "./components/ExportPreview";
+import { UpdateDialog } from "./components/UpdateDialog";
 import { useBook } from "./store/useBook";
 import { useBackup } from "./store/useBackup";
 import { useExportPreview } from "./store/useExportPreview";
@@ -28,6 +30,8 @@ function App() {
       }
       else if (event.payload === "export-epub") runExport("epub");
       else if (event.payload === "check-updates") checkForUpdates(false);
+      else if (event.payload === "report-issue")
+        openUrl("https://github.com/priyanshujain/margin/issues").catch(() => {});
     });
     const unlistenWarn = listen<string>("pdf-warnings", (event) => {
       useBook.getState().setNotice(`PDF exported with warnings:\n${event.payload}`);
@@ -87,6 +91,7 @@ function App() {
       {book ? <EditorView /> : <Library onOpen={openBook} />}
       {isDesktop && <BackupSettings />}
       {isDesktop && <ExportPreview />}
+      {isDesktop && <UpdateDialog />}
     </>
   );
 }

src/components/AddPageMenu.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { PAGE_TYPES } from "../model/book";
+import { useEscapeLayer } from "../escape";
 import { Icon } from "./Icon";
 
 interface AddPageMenuProps {
@@ -44,12 +45,13 @@ export function AddPageMenu({ onAdd, onAddPart }: AddPageMenuProps) {
     popRef.current?.querySelector<HTMLElement>(".add-page-item")?.focus();
   }, [open]);
 
-  const onMenuKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Escape") {
-      e.preventDefault();
+  useEscapeLayer(open, () => {
     setOpen(false);
     btnRef.current?.focus();
-    } else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+  });
+
+  const onMenuKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
       e.preventDefault();
       const items = Array.from(popRef.current?.querySelectorAll<HTMLElement>(".add-page-item") ?? []);
       const idx = items.indexOf(document.activeElement as HTMLElement);

src/components/BackupSettings.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { Icon } from "./Icon";
 import { ConfirmDialog } from "./ConfirmDialog";
 import { useBackup } from "../store/useBackup";
+import { useEscapeLayer } from "../escape";
 import { formatBackupTime, gdriveListBackups } from "../backup";
 
 export function BackupSettings() {
@@ -38,6 +39,8 @@ export function BackupSettings() {
     };
   }, [open, connected, lastBackup]);
 
+  useEscapeLayer(open, close);
+
   if (!open) return null;
 
   return (

src/components/ConfirmDialog.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, type ReactNode } from "react";
+import { useEscapeLayer } from "../escape";
 import { Icon } from "./Icon";
 
 interface ConfirmDialogProps {
@@ -14,17 +15,10 @@ export function ConfirmDialog({ title, message, confirmLabel = "Delete", onConfi
 
   useEffect(() => {
     confirmRef.current?.focus();
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        onClose();
-      }
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEscapeLayer(true, onClose);
+
   return (
     <div className="overlay" onClick={onClose}>
       <div className="panel panel-confirm" onClick={(e) => e.stopPropagation()}>

src/components/EditorView.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { listen } from "@tauri-apps/api/event";
 import type { Editor as TiptapEditor } from "@tiptap/react";
 import { Sidebar } from "./Sidebar";
 import { Dock } from "./Dock";
@@ -21,11 +22,17 @@ import { useWidth } from "../store/useWidth";
 import { WIDTH_OPTIONS } from "../width";
 import { bodyNumber, chapterKind, partNumber, partRoman } from "../model/book";
 import { saveBook } from "../library";
-import { isDesktop } from "../ipc";
+import { useEscapeLayer } from "../escape";
+import { isDesktop, runWritingTool } from "../ipc";
 import { useCompact } from "../useMedia";
 import { issueSignature, rememberWord, runProof } from "../proofing";
 import { runExport } from "../export/run";
 
+const WRITING_TOOLS: Record<string, "Proofread" | "Rewrite"> = {
+  KeyF: "Proofread",
+  KeyR: "Rewrite",
+};
+
 export function EditorView() {
   const book = useBook((s) => s.book);
   const activeChapterId = useBook((s) => s.activeChapterId);
@@ -36,6 +43,8 @@ export function EditorView() {
   const setChapterContent = useBook((s) => s.setChapterContent);
   const setChapterTitle = useBook((s) => s.setChapterTitle);
   const setChapterNoTitle = useBook((s) => s.setChapterNoTitle);
+  const pendingTitleFocus = useBook((s) => s.pendingTitleFocus);
+  const clearTitleFocus = useBook((s) => s.clearTitleFocus);
   const markSaved = useBook((s) => s.markSaved);
   const theme = useTheme((s) => s.theme);
   const toggleTheme = useTheme((s) => s.toggle);
@@ -56,6 +65,10 @@ export function EditorView() {
   const [findOpen, setFindOpen] = useState(false);
   const [findExpanded, setFindExpanded] = useState(false);
   const [proofPopover, setProofPopover] = useState<{ issue: ProofIssue; coords: ProofCoords } | null>(null);
+  const [escArmed, setEscArmed] = useState(false);
+  const escArmedRef = useRef(false);
+  escArmedRef.current = escArmed;
+  const escTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
 
   const spelling = useProofing((s) => s.spelling);
   const grammar = useProofing((s) => s.grammar);
@@ -81,12 +94,32 @@ export function EditorView() {
     setDock(false);
   };
 
+  useEscapeLayer(true, () => {
+    clearTimeout(escTimer.current);
+    if (escArmedRef.current) {
+      setEscArmed(false);
+      useBook.getState().closeBook();
+      return;
+    }
+    (document.activeElement as HTMLElement | null)?.blur();
+    setEscArmed(true);
+    escTimer.current = setTimeout(() => setEscArmed(false), 1500);
+  });
+  useEscapeLayer(isCompact && (sidebarOpen || dock), closeDrawers);
+  useEscapeLayer(widthOpen, () => setWidthOpen(false));
+  useEscapeLayer(exportOpen, () => setExportOpen(false));
+  useEscapeLayer(moreOpen, () => setMoreOpen(false));
+  useEscapeLayer(!!proofPopover, () => setProofPopover(null));
+
+  useEffect(() => () => clearTimeout(escTimer.current), []);
+
   const openFind = useCallback((expanded: boolean) => {
     setFindExpanded(expanded);
     setFindOpen(true);
   }, []);
 
   const focusEditorSoon = useCallback(() => {
+    if (useBook.getState().pendingTitleFocus) return;
     requestAnimationFrame(() => editorRef.current?.commands.focus(undefined, { scrollIntoView: false }));
   }, []);
 
@@ -129,17 +162,14 @@ export function EditorView() {
 
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "s") {
+      if (e.metaKey && e.altKey && e.key.toLowerCase() === "f") {
         e.preventDefault();
-        saveNow();
-      } else if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "f") {
-        e.preventDefault();
-        openFind(e.altKey);
-      } else if (e.metaKey && e.altKey && (e.key === "ArrowDown" || e.key === "ArrowRight")) {
+        openFind(true);
+      } else if (e.metaKey && e.altKey && e.key === "ArrowRight") {
         e.preventDefault();
         e.stopPropagation();
         switchChapter(1);
-      } else if (e.metaKey && e.altKey && (e.key === "ArrowUp" || e.key === "ArrowLeft")) {
+      } else if (e.metaKey && e.altKey && e.key === "ArrowLeft") {
         e.preventDefault();
         e.stopPropagation();
         switchChapter(-1);
@@ -147,24 +177,34 @@ export function EditorView() {
         e.preventDefault();
         e.stopPropagation();
         switchChapter(e.shiftKey ? -1 : 1);
+      } else if (e.shiftKey && e.altKey && !e.metaKey && !e.ctrlKey && WRITING_TOOLS[e.code]) {
+        e.preventDefault();
+        e.stopPropagation();
+        runWritingTool(WRITING_TOOLS[e.code]).catch(() => {});
       }
     };
     window.addEventListener("keydown", onKey, true);
     return () => window.removeEventListener("keydown", onKey, true);
-  }, [saveNow, openFind, switchChapter]);
+  }, [openFind, switchChapter]);
+
+  const menuCommands = useRef({ saveNow, openFind, setSettingsOpen, toggleSidebar, switchChapter });
+  menuCommands.current = { saveNow, openFind, setSettingsOpen, toggleSidebar, switchChapter };
 
   useEffect(() => {
-    if (!widthOpen && !exportOpen && !moreOpen) return;
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        setWidthOpen(false);
-        setExportOpen(false);
-        setMoreOpen(false);
-      }
+    if (!isDesktop) return;
+    const unlisten = listen<string>("menu-action", (e) => {
+      const cmd = menuCommands.current;
+      if (e.payload === "save") cmd.saveNow();
+      else if (e.payload === "find") cmd.openFind(false);
+      else if (e.payload === "settings") cmd.setSettingsOpen(true);
+      else if (e.payload === "toggle-chapters") cmd.toggleSidebar();
+      else if (e.payload === "next-chapter") cmd.switchChapter(1);
+      else if (e.payload === "prev-chapter") cmd.switchChapter(-1);
+    });
+    return () => {
+      unlisten.then((stop) => stop());
     };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [widthOpen, exportOpen, moreOpen]);
+  }, []);
 
   useEffect(() => {
     if (!notice) return;
@@ -403,6 +443,8 @@ export function EditorView() {
                   chapter.noTitle ? "No title" : kind === "body" ? "Chapter title" : kind === "part" ? "Part title (optional)" : "Page title"
                 }
                 disabled={!!chapter.noTitle}
+                focusRequest={pendingTitleFocus === chapter.id}
+                onFocused={clearTitleFocus}
                 onChange={(value) => setChapterTitle(chapter.id, value)}
               />
               {(chapter.noTitle || !chapter.title.trim()) && (
@@ -458,6 +500,12 @@ export function EditorView() {
         />
       )}
 
+      {escArmed && (
+        <div className="esc-hint">
+          Press <kbd>Esc</kbd> again for All books
+        </div>
+      )}
+
       {settingsOpen && <Settings onClose={() => setSettingsOpen(false)} onSave={saveNow} />}
       {exporting && (
         <div className="export-overlay">
@@ -478,11 +526,15 @@ function ChapterTitleInput({
   value,
   placeholder,
   disabled,
+  focusRequest,
+  onFocused,
   onChange,
 }: {
   value: string;
   placeholder: string;
   disabled: boolean;
+  focusRequest: boolean;
+  onFocused: () => void;
   onChange: (value: string) => void;
 }) {
   const ref = useRef<HTMLTextAreaElement>(null);
@@ -494,6 +546,15 @@ function ChapterTitleInput({
     el.style.height = `${el.scrollHeight}px`;
   }, [value, disabled]);
 
+  useEffect(() => {
+    if (!focusRequest || disabled) return;
+    const el = ref.current;
+    if (!el) return;
+    el.focus();
+    el.select();
+    onFocused();
+  }, [focusRequest, disabled, onFocused]);
+
   return (
     <textarea
       ref={ref}

src/components/ExportPreview.tsx

@@ -7,6 +7,7 @@ import { useExportPreview } from "../store/useExportPreview";
 import { bookToPdfInputs, unsupportedScripts } from "../export/typst";
 import { compilePdf } from "../ipc";
 import { saveBytes } from "../project";
+import { useEscapeLayer } from "../escape";
 import { Icon } from "./Icon";
 
 pdfjs.GlobalWorkerOptions.workerSrc = workerUrl;
@@ -81,13 +82,7 @@ function ExportPreviewModal() {
     };
   }, [book]);
 
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") close();
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [close]);
+  useEscapeLayer(true, close);
 
   useEffect(() => {
     const el = panelRef.current;

src/components/FindBar.tsx

@@ -3,6 +3,7 @@ import type { Editor as TiptapEditor } from "@tiptap/react";
 import { buildRegex, getSearchState } from "../editor/search";
 import { countMatches, replaceInContent } from "../search-book";
 import { useBook } from "../store/useBook";
+import { useEscapeLayer } from "../escape";
 import { Icon } from "./Icon";
 
 interface FindBarProps {
@@ -95,6 +96,8 @@ export function FindBar({ editor, open, initialExpanded, onClose }: FindBarProps
     };
   }, [editor, pendingNav, activeChapterId]);
 
+  useEscapeLayer(open, onClose);
+
   if (!open || !editor) return null;
 
   const before = jsonCounts.slice(0, Math.max(0, activeIdx)).reduce((a, b) => a + b, 0);
@@ -163,9 +166,6 @@ export function FindBar({ editor, open, initialExpanded, onClose }: FindBarProps
     if (e.key === "Enter") {
       e.preventDefault();
       e.shiftKey ? prev() : next();
-    } else if (e.key === "Escape") {
-      e.preventDefault();
-      onClose();
     }
   };
 
@@ -256,9 +256,6 @@ export function FindBar({ editor, open, initialExpanded, onClose }: FindBarProps
                 if (e.key === "Enter") {
                   e.preventDefault();
                   replaceOne();
-                } else if (e.key === "Escape") {
-                  e.preventDefault();
-                  onClose();
                 }
               }}
             />

src/components/Library.tsx

@@ -10,10 +10,12 @@ import { RowMenu } from "./RowMenu";
 import { BackupButton } from "./BackupButton";
 import { useBackup } from "../store/useBackup";
 import { useBook } from "../store/useBook";
+import { relativeTime } from "../time";
 
 export function Library({ onOpen }: { onOpen: (book: Book) => void }) {
   const [books, setBooks] = useState<BookSummary[]>([]);
   const [loaded, setLoaded] = useState(false);
+  const [now, setNow] = useState(() => Date.now());
   const [busy, setBusy] = useState(false);
   const [pendingDelete, setPendingDelete] = useState<BookSummary | null>(null);
   const notice = useBook((s) => s.notice);
@@ -30,6 +32,10 @@ export function Library({ onOpen }: { onOpen: (book: Book) => void }) {
   useEffect(() => {
     refresh();
   }, []);
+  useEffect(() => {
+    const timer = setInterval(() => setNow(Date.now()), 60_000);
+    return () => clearInterval(timer);
+  }, []);
   useEffect(() => {
     if (restoreNonce) refresh();
   }, [restoreNonce]);
@@ -125,6 +131,7 @@ export function Library({ onOpen }: { onOpen: (book: Book) => void }) {
             >
               <span className="card-title">{b.title || "Untitled"}</span>
               {b.author && <span className="card-author">{b.author}</span>}
+              {b.updatedAt > 0 && <span className="card-meta">Edited {relativeTime(b.updatedAt, now)}</span>}
               <RowMenu label="Book options" className="card-menu" onDelete={() => setPendingDelete(b)} />
             </div>
           ),

src/components/RowMenu.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
+import { useEscapeLayer } from "../escape";
 import { Icon } from "./Icon";
 
 interface RowMenuProps {
@@ -38,12 +39,13 @@ export function RowMenu({ label, onDuplicate, onDelete, onToggleTitle, titleHidd
     popRef.current?.querySelector<HTMLElement>(".row-menu-item")?.focus();
   }, [open]);
 
-  const onMenuKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Escape") {
-      e.preventDefault();
+  useEscapeLayer(open, () => {
     setOpen(false);
     btnRef.current?.focus();
-    } else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+  });
+
+  const onMenuKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
       e.preventDefault();
       const items = Array.from(popRef.current?.querySelectorAll<HTMLElement>(".row-menu-item") ?? []);
       const idx = items.indexOf(document.activeElement as HTMLElement);

src/components/Settings.tsx

@@ -13,6 +13,7 @@ import {
   fontStack,
   pairingFor,
 } from "../model/fonts";
+import { useEscapeLayer } from "../escape";
 import { Icon } from "./Icon";
 
 const LANGUAGES = [
@@ -94,16 +95,7 @@ export function Settings({ onClose, onSave }: { onClose: () => void; onSave: ()
     });
   }, []);
 
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        onClose();
-      }
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [onClose]);
+  useEscapeLayer(true, onClose);
 
   if (!book) return null;
 

src/components/Sidebar.tsx

@@ -5,6 +5,7 @@ import { AddPageMenu } from "./AddPageMenu";
 import { ConfirmDialog } from "./ConfirmDialog";
 import { Icon } from "./Icon";
 import { RowMenu } from "./RowMenu";
+import { relativeTime } from "../time";
 
 interface Row {
   chapter: Chapter;
@@ -19,26 +20,6 @@ interface DropTarget {
   index: number;
 }
 
-function formatEdited(ts: number, now: number): string {
-  const diff = Math.max(0, now - ts);
-  const min = 60_000;
-  const hour = 60 * min;
-  const day = 24 * hour;
-  if (diff < min) return "just now";
-  if (diff < hour) {
-    const m = Math.floor(diff / min);
-    return `${m} minute${m === 1 ? "" : "s"} ago`;
-  }
-  if (diff < day) {
-    const h = Math.floor(diff / hour);
-    return `${h} hour${h === 1 ? "" : "s"} ago`;
-  }
-  if (diff < 2 * day) return "yesterday";
-  const d = Math.floor(diff / day);
-  if (d < 7) return `${d} days ago`;
-  return new Date(ts).toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" });
-}
-
 export function Sidebar({ onNavigate }: { onNavigate?: () => void }) {
   const chapters = useBook((s) => s.book?.chapters ?? []);
   const activeChapterId = useBook((s) => s.activeChapterId);
@@ -254,7 +235,7 @@ export function Sidebar({ onNavigate }: { onNavigate?: () => void }) {
                         </span>
                       )}
                       {row.chapter.id === activeChapterId && (
-                        <span className="meta">Edited {formatEdited(row.chapter.updatedAt, now)}</span>
+                        <span className="meta">Edited {relativeTime(row.chapter.updatedAt, now)}</span>
                       )}
                     </span>
                     <RowMenu
@@ -279,7 +260,13 @@ export function Sidebar({ onNavigate }: { onNavigate?: () => void }) {
                 )}
               </ul>
               {group.kind === "body" && (
-                <button className="add-chapter" onClick={addChapter}>
+                <button
+                  className="add-chapter"
+                  onClick={() => {
+                    addChapter();
+                    onNavigate?.();
+                  }}
+                >
                   <Icon d="M12 5v14M5 12h14" />
                   New chapter
                 </button>

src/components/UpdateDialog.tsx

@@ -0,0 +1,107 @@
+import { useUpdater } from "../store/useUpdater";
+import { installUpdate, dismissUpdate } from "../updater";
+import { useEscapeLayer } from "../escape";
+import { Icon } from "./Icon";
+
+const TITLES: Record<string, string> = {
+  checking: "Check for Updates",
+  available: "Update Available",
+  downloading: "Updating margin",
+  installing: "Updating margin",
+  uptodate: "Check for Updates",
+  error: "Update Failed",
+};
+
+export function UpdateDialog() {
+  const phase = useUpdater((s) => s.phase);
+  const version = useUpdater((s) => s.version);
+  const notes = useUpdater((s) => s.notes);
+  const downloaded = useUpdater((s) => s.downloaded);
+  const total = useUpdater((s) => s.total);
+  const error = useUpdater((s) => s.error);
+
+  const busy = phase === "downloading" || phase === "installing";
+  useEscapeLayer(phase !== "idle" && !busy, dismissUpdate);
+
+  if (phase === "idle") return null;
+
+  const pct = total > 0 ? Math.min(100, Math.round((downloaded / total) * 100)) : 0;
+  const close = busy ? undefined : dismissUpdate;
+
+  return (
+    <div className="overlay" onClick={close}>
+      <div className="panel panel-confirm" onClick={(e) => e.stopPropagation()}>
+        <div className="panel-head">
+          <h2>{TITLES[phase]}</h2>
+          {!busy && (
+            <button className="icon-btn" onClick={dismissUpdate} title="Close">
+              <Icon d="M6 6l12 12M18 6L6 18" />
+            </button>
+          )}
+        </div>
+
+        <div className="panel-body">
+          {phase === "checking" && (
+            <div className="update-status-row">
+              <span className="update-spinner" />
+              <span>Checking for updates…</span>
+            </div>
+          )}
+
+          {phase === "uptodate" && <p className="confirm-text">margin is up to date.</p>}
+
+          {phase === "available" && (
+            <>
+              <p className="confirm-text">
+                <strong>margin {version}</strong> is available.
+              </p>
+              {notes && <div className="update-notes">{notes}</div>}
+            </>
+          )}
+
+          {phase === "downloading" && (
+            <>
+              <div className={`update-progress${total > 0 ? "" : " indeterminate"}`}>
+                <div className="update-progress-fill" style={total > 0 ? { width: `${pct}%` } : undefined} />
+              </div>
+              <p className="update-status">{total > 0 ? `Downloading update… ${pct}%` : "Downloading update…"}</p>
+            </>
+          )}
+
+          {phase === "installing" && (
+            <div className="update-status-row">
+              <span className="update-spinner" />
+              <span>Installing update. margin will restart…</span>
+            </div>
+          )}
+
+          {phase === "error" && (
+            <>
+              <p className="confirm-text">Could not update margin.</p>
+              {error && <div className="update-notes">{error}</div>}
+            </>
+          )}
+        </div>
+
+        {phase === "available" && (
+          <div className="panel-foot">
+            <button className="btn-ghost" onClick={dismissUpdate}>
+              Later
+            </button>
+            <button className="btn-primary" onClick={installUpdate}>
+              Install &amp; Restart
+            </button>
+          </div>
+        )}
+
+        {(phase === "uptodate" || phase === "error") && (
+          <div className="panel-foot">
+            <button className="btn-primary" onClick={dismissUpdate}>
+              OK
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/editor/Editor.tsx

@@ -21,6 +21,8 @@ interface Cached {
   scroll: number;
 }
 
+const SCROLL_KEEPOUT = { top: 32, right: 0, bottom: 96, left: 0 };
+
 function buildState(editor: TiptapEditor, content: JSONContent, onError: (error: Error) => void): EditorState {
   const base = editor.view.state;
   try {
@@ -49,7 +51,11 @@ export function Editor({ bookId, chapterId, content, onChange, onReady, onConten
     content,
     immediatelyRender: false,
     enableContentCheck: true,
-    editorProps: { attributes: { class: "prose" } },
+    editorProps: {
+      attributes: { class: "prose" },
+      scrollThreshold: SCROLL_KEEPOUT,
+      scrollMargin: SCROLL_KEEPOUT,
+    },
     onContentError: ({ error }) => onContentErrorRef.current(error),
     onUpdate: ({ editor }) => onChangeRef.current(editor.getJSON()),
   });

src/editor/FloatingToolbar.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useReducer, useRef, useState, type ReactNode } from "react";
 import type { Editor } from "@tiptap/react";
 import { Icon } from "../components/Icon";
+import { useEscapeLayer } from "../escape";
 import type { Alignment } from "./align";
 
 const ALIGN_ICONS: Record<Alignment, string> = {
@@ -33,6 +34,12 @@ export function FloatingToolbar({ editor }: { editor: Editor | null }) {
   const [alignOpen, setAlignOpen] = useState(false);
   const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
+  const openLink = () => {
+    if (!editor) return;
+    setLinkValue((editor.getAttributes("link").href as string) ?? "");
+    setLinkOpen(true);
+  };
+
   useEffect(() => {
     if (linkOpen) linkInputRef.current?.focus();
   }, [linkOpen]);
@@ -46,6 +53,27 @@ export function FloatingToolbar({ editor }: { editor: Editor | null }) {
     };
   }, [editor]);
 
+  useEffect(() => {
+    if (!editor) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key.toLowerCase() !== "k" || !(e.metaKey || e.ctrlKey) || e.altKey || e.shiftKey) return;
+      if (!editor.isFocused && !linkOpen) return;
+      e.preventDefault();
+      e.stopPropagation();
+      if (linkOpen) setLinkOpen(false);
+      else openLink();
+    };
+    window.addEventListener("keydown", onKey, true);
+    return () => window.removeEventListener("keydown", onKey, true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, linkOpen]);
+
+  useEscapeLayer(linkOpen, () => {
+    setLinkOpen(false);
+    editor?.commands.focus();
+  });
+  useEscapeLayer(alignOpen, () => setAlignOpen(false));
+
   if (!editor) return null;
 
   const insertImage = async (file: File) => {
@@ -53,11 +81,6 @@ export function FloatingToolbar({ editor }: { editor: Editor | null }) {
     editor.chain().focus().insertContent({ type: "figure", attrs: { src, placement: "full-width" } }).run();
   };
 
-  const openLink = () => {
-    setLinkValue((editor.getAttributes("link").href as string) ?? "");
-    setLinkOpen(true);
-  };
-
   const applyLink = () => {
     const href = normalizeUrl(linkValue);
     if (!href) {
@@ -126,7 +149,7 @@ export function FloatingToolbar({ editor }: { editor: Editor | null }) {
       </span>
       <span className="tool-sep" />
       <span className="tool-wrap">
-        {tool(editor.isActive("link") || linkOpen, () => (linkOpen ? setLinkOpen(false) : openLink()), "Link", <Icon d="M10 13a5 5 0 0 0 7 0l2-2a5 5 0 0 0-7-7l-1 1M14 11a5 5 0 0 0-7 0l-2 2a5 5 0 0 0 7 7l1-1" />)}
+        {tool(editor.isActive("link") || linkOpen, () => (linkOpen ? setLinkOpen(false) : openLink()), "Link (⌘K)", <Icon d="M10 13a5 5 0 0 0 7 0l2-2a5 5 0 0 0-7-7l-1 1M14 11a5 5 0 0 0-7 0l-2 2a5 5 0 0 0 7 7l1-1" />)}
         {linkOpen && (
           <>
             <div className="link-pop-backdrop" onMouseDown={() => setLinkOpen(false)} />
@@ -142,9 +165,6 @@ export function FloatingToolbar({ editor }: { editor: Editor | null }) {
                   if (e.key === "Enter") {
                     e.preventDefault();
                     applyLink();
-                  } else if (e.key === "Escape") {
-                    e.preventDefault();
-                    setLinkOpen(false);
                   }
                 }}
               />

src/editor/extensions.ts

@@ -7,6 +7,7 @@ import { TextAlign } from "./align";
 import { SearchHighlight } from "./search";
 import { Proofing } from "./proofing";
 import { Paste } from "./paste";
+import { Shortcuts } from "./shortcuts";
 
 export const editorExtensions: Extensions = [
   StarterKit.configure({
@@ -23,4 +24,5 @@ export const editorExtensions: Extensions = [
   SearchHighlight,
   Proofing,
   Paste,
+  Shortcuts,
 ];

src/editor/shortcuts.ts

@@ -0,0 +1,11 @@
+import { Extension } from "@tiptap/core";
+
+export const Shortcuts = Extension.create({
+  name: "shortcuts",
+
+  addKeyboardShortcuts() {
+    return {
+      "Mod-Shift-x": () => this.editor.commands.toggleStrike(),
+    };
+  },
+});

src/escape.ts

@@ -0,0 +1,36 @@
+import { useEffect, useRef } from "react";
+
+type Handler = () => void;
+
+const layers: Handler[] = [];
+let bound = false;
+
+function onKeyDown(e: KeyboardEvent) {
+  if (e.key !== "Escape" || e.isComposing || e.defaultPrevented) return;
+  const top = layers[layers.length - 1];
+  if (!top) return;
+  e.preventDefault();
+  e.stopPropagation();
+  top();
+}
+
+function pushLayer(handler: Handler): () => void {
+  if (!bound) {
+    window.addEventListener("keydown", onKeyDown, true);
+    bound = true;
+  }
+  layers.push(handler);
+  return () => {
+    const i = layers.lastIndexOf(handler);
+    if (i !== -1) layers.splice(i, 1);
+  };
+}
+
+export function useEscapeLayer(active: boolean, onEscape: () => void): void {
+  const latest = useRef(onEscape);
+  latest.current = onEscape;
+  useEffect(() => {
+    if (!active) return;
+    return pushLayer(() => latest.current());
+  }, [active]);
+}

src/export/typst.ts

@@ -20,7 +20,7 @@ const TRIM: Record<TrimSize, { w: string; h: string }> = {
   a5: { w: "148mm", h: "210mm" },
 };
 
-const INLINE_SPECIAL = /[\\#$*_`<>@~[\]]/g;
+const INLINE_SPECIAL = /[\\#$*_`<>@~()[\]]/g;
 const LINE_SEPARATORS = /[\n\r\v\f\u2028\u2029]+/g;
 
 function esc(text: string): string {

src/ipc.ts

@@ -2,6 +2,11 @@ import { invoke } from "@tauri-apps/api/core";
 
 export const isDesktop = typeof window !== "undefined" && "__TAURI_INTERNALS__" in window;
 
+export async function runWritingTool(tool: "Proofread" | "Rewrite"): Promise<void> {
+  if (!isDesktop) return;
+  await invoke("run_writing_tool", { tool });
+}
+
 export interface ImageInput {
   path: string;
   data: string;

src/library.ts

@@ -6,6 +6,7 @@ export interface BookSummary {
   id: string;
   title: string;
   author: string;
+  updatedAt: number;
   corrupt?: boolean;
 }
 

src/store/useBook.ts

@@ -25,6 +25,8 @@ interface BookState {
   dirty: boolean;
   exporting: string | null;
   notice: string | null;
+  pendingTitleFocus: string | null;
+  clearTitleFocus: () => void;
   setExporting: (label: string | null) => void;
   setNotice: (message: string | null) => void;
   openBook: (book: Book) => void;
@@ -57,6 +59,8 @@ export const useBook = create<BookState>((set, get) => ({
   dirty: false,
   exporting: null,
   notice: null,
+  pendingTitleFocus: null,
+  clearTitleFocus: () => set({ pendingTitleFocus: null }),
   setExporting: (label) => set({ exporting: label }),
   setNotice: (message) => set({ notice: message }),
   openBook: (book) => {
@@ -66,14 +70,14 @@ export const useBook = create<BookState>((set, get) => ({
     const valid = saved === COVER_ID || normalized.chapters.some((c) => c.id === saved);
     const activeChapterId = valid ? (saved as string) : normalized.chapters[0]?.id ?? "";
     applyBookFonts(normalized.settings.fonts);
-    set({ book: normalized, activeChapterId, dirty: false });
+    set({ book: normalized, activeChapterId, dirty: false, pendingTitleFocus: null });
   },
   closeBook: () => {
     flushOutgoing(get().book, get().dirty);
     resetBookFonts();
-    set({ book: null, activeChapterId: "", dirty: false });
+    set({ book: null, activeChapterId: "", dirty: false, pendingTitleFocus: null });
   },
-  setActiveChapter: (id) => set({ activeChapterId: id }),
+  setActiveChapter: (id) => set({ activeChapterId: id, pendingTitleFocus: null }),
   goToAdjacentChapter: (dir) => {
     const { book, activeChapterId } = get();
     if (!book) return;
@@ -81,7 +85,7 @@ export const useBook = create<BookState>((set, get) => ({
     const i = ids.indexOf(activeChapterId);
     if (i === -1) return;
     const next = ids[(i + dir + ids.length) % ids.length];
-    if (next !== activeChapterId) set({ activeChapterId: next });
+    if (next !== activeChapterId) set({ activeChapterId: next, pendingTitleFocus: null });
   },
   setChapterContent: (id, content) =>
     set((s) =>
@@ -110,11 +114,16 @@ export const useBook = create<BookState>((set, get) => ({
   addChapter: () =>
     set((s) => {
       if (!s.book) return {};
-      const chapter = createChapter();
+      const chapter = createChapter("");
       const chapters = [...s.book.chapters];
       const backCount = chapters.filter((c) => chapterKind(c) === "back").length;
       chapters.splice(chapters.length - backCount, 0, chapter);
-      return { activeChapterId: chapter.id, dirty: true, book: { ...s.book, chapters } };
+      return {
+        activeChapterId: chapter.id,
+        pendingTitleFocus: chapter.id,
+        dirty: true,
+        book: { ...s.book, chapters },
+      };
     }),
   addPage: (group, title) =>
     set((s) => {

src/store/useUpdater.ts

@@ -0,0 +1,39 @@
+import { create } from "zustand";
+import type { Update } from "@tauri-apps/plugin-updater";
+
+export type UpdatePhase =
+  | "idle"
+  | "checking"
+  | "available"
+  | "downloading"
+  | "installing"
+  | "uptodate"
+  | "error";
+
+interface UpdaterState {
+  phase: UpdatePhase;
+  version: string;
+  notes: string;
+  downloaded: number;
+  total: number;
+  error: string;
+  update: Update | null;
+  set: (partial: Partial<UpdaterState>) => void;
+  reset: () => void;
+}
+
+const initial = {
+  phase: "idle" as UpdatePhase,
+  version: "",
+  notes: "",
+  downloaded: 0,
+  total: 0,
+  error: "",
+  update: null as Update | null,
+};
+
+export const useUpdater = create<UpdaterState>((set) => ({
+  ...initial,
+  set: (partial) => set(partial),
+  reset: () => set(initial),
+}));

src/styles/app.css

@@ -1566,6 +1566,19 @@ body.resizing .sidebar {
   color: var(--accent);
 }
 
+.card-meta {
+  position: absolute;
+  left: 14px;
+  right: 14px;
+  bottom: 14px;
+  font-family: var(--font-ui);
+  font-size: var(--t-1);
+  color: var(--ink-faint);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .card-action {
   background: transparent;
   border: 1px dashed var(--line-strong);
@@ -1615,6 +1628,72 @@ body.resizing .sidebar {
   color: var(--ink);
 }
 
+.update-notes {
+  max-height: 180px;
+  overflow-y: auto;
+  padding: 12px 14px;
+  border: 1px solid var(--line);
+  border-radius: var(--r-sm);
+  background: var(--raised);
+  font-size: var(--t-3);
+  line-height: 1.55;
+  color: var(--ink-soft);
+  white-space: pre-line;
+}
+
+.update-status-row {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  font-size: var(--t-4);
+  color: var(--ink-soft);
+}
+
+.update-spinner {
+  flex: none;
+  width: 18px;
+  height: 18px;
+  border: 2px solid var(--line-strong);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+}
+
+.update-progress {
+  width: 100%;
+  height: 7px;
+  border-radius: 999px;
+  background: var(--accent-wash);
+  overflow: hidden;
+}
+
+.update-progress-fill {
+  height: 100%;
+  border-radius: 999px;
+  background: var(--accent);
+  transition: width 160ms var(--ease);
+}
+
+.update-progress.indeterminate .update-progress-fill {
+  width: 40%;
+  animation: update-indeterminate 1.1s ease-in-out infinite;
+}
+
+@keyframes update-indeterminate {
+  0% {
+    transform: translateX(-120%);
+  }
+  100% {
+    transform: translateX(320%);
+  }
+}
+
+.update-status {
+  margin: 0;
+  font-size: var(--t-3);
+  color: var(--ink-soft);
+}
+
 .btn-primary,
 .btn-ghost,
 .btn-danger {
@@ -2017,6 +2096,32 @@ body.resizing .sidebar {
   }
 }
 
+.esc-hint {
+  position: fixed;
+  top: 54px;
+  left: 50%;
+  z-index: 30;
+  padding: 7px 14px;
+  font-family: var(--font-ui);
+  font-size: var(--t-2);
+  color: var(--ink-soft);
+  background: var(--glass);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  box-shadow: var(--shadow-pop);
+  pointer-events: none;
+  transform: translateX(-50%);
+  animation: find-drop 140ms var(--ease);
+}
+
+.esc-hint kbd {
+  font-family: var(--font-ui);
+  font-weight: 600;
+  color: var(--ink);
+}
+
 .find-expand {
   flex: none;
   width: 20px;

src/time.ts

@@ -0,0 +1,19 @@
+export function relativeTime(ts: number, now: number): string {
+  const diff = Math.max(0, now - ts);
+  const min = 60_000;
+  const hour = 60 * min;
+  const day = 24 * hour;
+  if (diff < min) return "just now";
+  if (diff < hour) {
+    const m = Math.floor(diff / min);
+    return `${m} minute${m === 1 ? "" : "s"} ago`;
+  }
+  if (diff < day) {
+    const h = Math.floor(diff / hour);
+    return `${h} hour${h === 1 ? "" : "s"} ago`;
+  }
+  if (diff < 2 * day) return "yesterday";
+  const d = Math.floor(diff / day);
+  if (d < 7) return `${d} days ago`;
+  return new Date(ts).toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" });
+}

src/updater.ts

@@ -1,31 +1,58 @@
 import { check } from "@tauri-apps/plugin-updater";
 import { relaunch } from "@tauri-apps/plugin-process";
-import { ask, message } from "@tauri-apps/plugin-dialog";
+import { useUpdater } from "./store/useUpdater";
 
-let running = false;
+let checking = false;
 
 export async function checkForUpdates(silent: boolean) {
-  if (running) return;
-  running = true;
+  if (checking) return;
+  checking = true;
+  const store = useUpdater.getState();
+  if (!silent) store.set({ phase: "checking", error: "" });
   try {
     const update = await check();
     if (!update) {
-      if (!silent) await message("margin is up to date.", { title: "Check for Updates" });
+      store.set(silent ? { phase: "idle" } : { phase: "uptodate" });
       return;
     }
-    const notes = update.body ? `\n\n${update.body}` : "";
-    const install = await ask(`margin ${update.version} is available.${notes}\n\nInstall now and restart?`, {
-      title: "Update Available",
-      kind: "info",
+    store.set({
+      phase: "available",
+      update,
+      version: update.version,
+      notes: update.body ?? "",
+      downloaded: 0,
+      total: 0,
+      error: "",
     });
-    if (!install) return;
-    await update.downloadAndInstall();
+  } catch (err) {
+    store.set(silent ? { phase: "idle" } : { phase: "error", error: String(err) });
+  } finally {
+    checking = false;
+  }
+}
+
+export async function installUpdate() {
+  const { update, phase } = useUpdater.getState();
+  if (!update || phase === "downloading" || phase === "installing") return;
+  try {
+    useUpdater.getState().set({ phase: "downloading", downloaded: 0, total: 0 });
+    await update.downloadAndInstall((event) => {
+      const s = useUpdater.getState();
+      if (event.event === "Started") {
+        s.set({ total: event.data.contentLength ?? 0, downloaded: 0 });
+      } else if (event.event === "Progress") {
+        s.set({ downloaded: s.downloaded + event.data.chunkLength });
+      } else if (event.event === "Finished") {
+        s.set({ phase: "installing" });
+      }
+    });
+    useUpdater.getState().set({ phase: "installing" });
     await relaunch();
   } catch (err) {
-    if (!silent) {
-      await message(`Could not check for updates.\n\n${err}`, { title: "Update Failed", kind: "error" });
-    }
-  } finally {
-    running = false;
+    useUpdater.getState().set({ phase: "error", error: String(err) });
   }
 }
+
+export function dismissUpdate() {
+  useUpdater.getState().reset();
+}