From f36ca9317dad153c89643f8b8abee619df9a3aeb Mon Sep 17 00:00:00 2001
From: amblued <dev@usememos.com>
Date: Fri, 21 Aug 2026 21:14:28 +0800
Subject: [PATCH] feat(web): add a global memo composer to the sidebar (#6219)

---
 web/package.json                              |   6 +-
 web/src/components/AppSidebar/AppSidebar.tsx  |  65 ++++-
 .../components/AppSidebar/QuickFindDialog.tsx |  12 -
 web/src/components/MemoEditor/README.md       |  37 ++-
 web/src/components/MemoEditor/index.tsx       |   6 +
 .../components/MemoEditor/types/components.ts |   2 +
 web/src/contexts/GlobalMemoEditorContext.tsx  | 164 +++++++++++
 web/src/layouts/RootLayout.tsx                |  51 ++--
 web/src/locales/en.json                       |   1 +
 web/src/locales/zh-Hans.json                  |   1 +
 web/src/locales/zh-Hant.json                  |   1 +
 web/tests/about-page.test.tsx                 |   4 +-
 web/tests/app-sidebar-logo.test.tsx           |  59 +++-
 web/tests/attachment-library-stats.test.ts    |   2 +-
 .../auth-context-initialization.test.tsx      |   4 +-
 .../calendar-cell-empty-clickable.test.tsx    |   2 +-
 web/tests/editor.test.tsx                     |  11 +-
 web/tests/filtered-memo-stats.test.ts         |   6 +-
 web/tests/formatting-toolbar.test.tsx         |   7 +-
 web/tests/global-memo-editor.test.tsx         | 255 ++++++++++++++++++
 web/tests/guards.test.tsx                     |   2 +-
 web/tests/inline-image-upload-files.test.ts   |   1 -
 web/tests/managed-attachment.test.ts          |   6 +-
 web/tests/markdown-task-actions.test.ts       |   4 +-
 web/tests/media-loading.test.tsx              |   4 +-
 web/tests/memo-card-height.test.ts            |  16 +-
 web/tests/memo-comments-pagination.test.tsx   |   5 +-
 .../memo-content-lazy-renderers.test.tsx      |   4 +-
 web/tests/memo-share-image.test.ts            |   8 +-
 web/tests/memo-views.test.ts                  |   4 +-
 web/tests/near-viewport.test.tsx              |   1 +
 web/tests/placeholder-pool.test.ts            |   2 +-
 web/tests/query-deduplication.test.tsx        |   8 +-
 web/tests/root-layout-global-editor.test.tsx  |  80 ++++++
 web/tests/router-config.test.tsx              |  13 +-
 web/tests/scroll-restoration.test.tsx         |   6 +-
 web/tests/sidebar-row-grammar.test.tsx        |   3 +-
 web/tests/tag.test.ts                         |  13 +-
 web/tests/use-memo-init.test.tsx              |   6 +-
 web/tests/video-poster.test.tsx               |   9 +-
 web/tsconfig.json                             |   2 +-
 41 files changed, 720 insertions(+), 173 deletions(-)
 create mode 100644 web/src/contexts/GlobalMemoEditorContext.tsx
 create mode 100644 web/tests/global-memo-editor.test.tsx
 create mode 100644 web/tests/root-layout-global-editor.test.tsx

diff --git a/web/package.json b/web/package.json
index 63e7d208..6e9141af 100644
--- a/web/package.json
+++ b/web/package.json
@@ -9,9 +9,9 @@
     "dev": "vite",
     "build": "vite build",
     "release": "vite build --mode release --outDir=../server/router/frontend/dist --emptyOutDir",
-    "lint": "tsc --noEmit --skipLibCheck && biome check src",
-    "lint:fix": "biome check --write src",
-    "format": "biome format --write src",
+    "lint": "tsc --noEmit --skipLibCheck && biome check src tests",
+    "lint:fix": "biome check --write src tests",
+    "format": "biome format --write src tests",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage"
diff --git a/web/src/components/AppSidebar/AppSidebar.tsx b/web/src/components/AppSidebar/AppSidebar.tsx
index 44517b66..57069f16 100644
--- a/web/src/components/AppSidebar/AppSidebar.tsx
+++ b/web/src/components/AppSidebar/AppSidebar.tsx
@@ -20,6 +20,7 @@ import {
   PaperclipIcon,
   PlusIcon,
   SearchIcon,
+  SquarePenIcon,
   Trash2Icon,
   UserRoundIcon,
 } from "lucide-react";
@@ -39,6 +40,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/comp
 import { memoViewServiceClient } from "@/connect";
 import { type AttachmentSection, type InboxFilter, useAppSidebar } from "@/contexts/AppSidebarContext";
 import { useAuth } from "@/contexts/AuthContext";
+import { useGlobalMemoEditor } from "@/contexts/GlobalMemoEditorContext";
 import { useInstance } from "@/contexts/InstanceContext";
 import { stringifyFilters, useMemoFilterContext } from "@/contexts/MemoFilterContext";
 import { useAttachmentLibraryStats } from "@/hooks/useAttachmentLibrary";
@@ -72,6 +74,32 @@ import SidebarSection, {
 import TagsSection from "./TagsSection";
 
 const SIDEBAR_HORIZONTAL_PADDING = "px-3";
+const SIDEBAR_HEADER_ACTION_CLASSES = "size-7 shrink-0 rounded-md text-muted-foreground hover:text-foreground";
+
+const NewMemoAction = ({ onClick }: { onClick: () => void }) => {
+  const t = useTranslate();
+  const label = t("editor.new-memo");
+
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            className={SIDEBAR_HEADER_ACTION_CLASSES}
+            onClick={onClick}
+            aria-label={label}
+            data-new-memo-trigger
+          />
+        }
+      >
+        <SquarePenIcon className="size-4" strokeWidth={1.8} />
+      </TooltipTrigger>
+      <TooltipContent side="bottom">{label}</TooltipContent>
+    </Tooltip>
+  );
+};
 
 const ViewsSection = ({ manageActive = false }: { manageActive?: boolean }) => {
   const t = useTranslate();
@@ -604,6 +632,7 @@ const AppSidebar = ({ className }: { className?: string }) => {
   const t = useTranslate();
   const currentUser = useCurrentUser();
   const { setMobileOpen, setQuickFindOpen } = useAppSidebar();
+  const { canOpen: canCompose, openEditor } = useGlobalMemoEditor();
   return (
     <aside className={cn("flex h-full w-full select-none flex-col bg-sidebar text-sidebar-foreground", className)}>
       <div className={cn("flex h-13 shrink-0 items-center justify-between gap-2", SIDEBAR_HORIZONTAL_PADDING)}>
@@ -613,18 +642,21 @@ const AppSidebar = ({ className }: { className?: string }) => {
         >
           <MemosLogo compact />
         </Link>
-        <Button
-          variant="ghost"
-          size="icon-sm"
-          className="size-7 shrink-0 rounded-md text-muted-foreground hover:text-foreground"
-          onClick={() => {
-            setMobileOpen(false);
-            setQuickFindOpen(true);
-          }}
-          aria-label={t("common.search")}
-        >
-          <SearchIcon className="size-4" strokeWidth={1.8} />
-        </Button>
+        <div className="flex shrink-0 items-center gap-1">
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            className={SIDEBAR_HEADER_ACTION_CLASSES}
+            onClick={() => {
+              setMobileOpen(false);
+              setQuickFindOpen(true);
+            }}
+            aria-label={t("common.search")}
+          >
+            <SearchIcon className="size-4" strokeWidth={1.8} />
+          </Button>
+          {canCompose && <NewMemoAction onClick={openEditor} />}
+        </div>
       </div>
       <GlobalNavigation />
       <div className="mx-3 mt-2 border-t border-border/70" />
@@ -660,7 +692,14 @@ export const MobileAppHeader = () => {
   const { setMobileOpen } = useAppSidebar();
   return (
     <header className="sticky top-0 z-20 flex h-12 w-full items-center justify-start gap-1 border-b border-border/70 bg-background/90 px-2 backdrop-blur-md md:hidden">
-      <Button variant="ghost" size="icon-sm" className="size-8" onClick={() => setMobileOpen(true)} aria-label="Open navigation">
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        className="size-8"
+        onClick={() => setMobileOpen(true)}
+        aria-label="Open navigation"
+        data-mobile-navigation-trigger
+      >
         <MenuIcon className="size-[18px]" />
       </Button>
       <Link
diff --git a/web/src/components/AppSidebar/QuickFindDialog.tsx b/web/src/components/AppSidebar/QuickFindDialog.tsx
index 3cead97b..7257c29e 100644
--- a/web/src/components/AppSidebar/QuickFindDialog.tsx
+++ b/web/src/components/AppSidebar/QuickFindDialog.tsx
@@ -42,18 +42,6 @@ const QuickFindDialog = () => {
   const scopeLabel =
     viewApplies && memoView === BUILTIN_TASKS_VIEW_ID ? t("common.tasks") : selectedMemoView?.title || getScopeLabel(location.pathname, t);
 
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
-        event.preventDefault();
-        setQuickFindOpen(true);
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [setQuickFindOpen]);
-
   useEffect(() => {
     if (!quickFindOpen) return;
     setQuery(
diff --git a/web/src/components/MemoEditor/README.md b/web/src/components/MemoEditor/README.md
index 7ac4fcf7..91dee176 100644
--- a/web/src/components/MemoEditor/README.md
+++ b/web/src/components/MemoEditor/README.md
@@ -13,8 +13,10 @@ MemoEditor is a three-layer component. At its core is a single editor — `Edito
 └─────────────────┬───────────────────────┘
                   │ EditorController
 ┌─────────────────▼───────────────────────┐
-│   State Layer (Reducer + Context)       │
-│   - state/, useEditorContext()          │
+│   State Layer (reducer over an external │
+│   store; per-slice subscriptions)       │
+│   - state/, useEditorContext(),         │
+│     useEditorSelector()                 │
 │   - state.content  ← markdown (the      │
 │     single source of truth)             │
 └─────────────────┬───────────────────────┘
@@ -29,16 +31,18 @@ MemoEditor is a three-layer component. At its core is a single editor — `Edito
 
 ```
 MemoEditor/
+├── index.tsx               # The shell: EditorProvider + MemoEditorImpl
+├── loader.ts               # loadMemoEditor(): the shared lazy-load entry point
 ├── state/                  # State management (reducer, actions, context)
 ├── services/               # Business logic (pure functions)
 ├── components/             # UI components
 │   ├── EditorContent.tsx   # Hosts Editor; forwards its EditorController ref
-│   ├── EditorToolbar.tsx   # Toolbar
+│   ├── EditorMetadata.tsx  # Attachment strip below the document
 │   └── ...
 ├── hooks/                  # React hooks (utilities)
 │   ├── useMemoSave.ts      # Save transaction, cache invalidation, and reset
 │   └── useFocusMode.ts     # Scroll lock and layout-stable focus presentation
-├── Editor/           # The CodeMirror 6 decorated-source editor
+├── Editor/                 # The CodeMirror 6 decorated-source editor
 │   ├── index.tsx               # React wrapper: mounts the EditorView, owns the
 │   │                           #   controller refs, syncs initialContent in/out
 │   ├── extensions.ts           # buildEditorExtensions(): assembles the CM extension set
@@ -46,31 +50,35 @@ MemoEditor/
 │   ├── tagMentionDecorations.ts# ViewPlugin that decorates #tag / @mention spans
 │   ├── markdownTagRanges.ts    # Markdown syntax-tree adapter for the shared tag scanner
 │   ├── tagAutocomplete.ts      # CM autocompletion source for #tag
+│   ├── uploadAnchors.ts        # Widget decorations holding a slot per in-flight upload
 │   ├── formatting.ts           # FormattingController impl (toggle marks, headings, lists)
-│   └── controller.ts           # EditorController impl over an EditorView
+│   ├── controller.ts           # EditorController impl over an EditorView
+│   └── ...                     # Heading/list/viewport decorations, editor.css
 ├── formatting/
 │   └── commands.ts         # Backend-agnostic catalog of formatting verbs
-├── Toolbar/                # Toolbar sub-components (InsertMenu, VisibilitySelector)
+├── Toolbar/                # EditorToolbar, FormattingToolbar, InsertMenu, VisibilitySelector
 ├── constants.ts
-└── types/
-    └── editorController.ts # EditorController / FormattingController interfaces
+└── types/                  # EditorController / FormattingController, component props,
+                            #   attachment and insert-menu types
 ```
 
 ## Key Concepts
 
 ### State Management
 
-Uses `useReducer` + Context for predictable state transitions. All state changes go through action creators.
+A reducer (`state/reducer.ts`) drives an **external store**, not a `useReducer` in the provider, and consumers subscribe to just the slice they read via `useEditorSelector` (`useSyncExternalStore` under the hood). Content changes on every keystroke, so routing it through a single context value would re-render every consumer — toolbar, insert menu, metadata — per keystroke; with per-slice subscriptions only the components whose slice actually changed re-render. All state changes still go through action creators.
 
 `state.content` holds the document as a **markdown string** and is the single source of truth. Because the editor stores markdown verbatim, `state.content` is exactly the editor's document — there is no encoding or normalization step.
 
 ### The editor contract
 
-`types/editorController.ts` defines `EditorController` — `focus`, `getMarkdown`, `setMarkdown`, `insertMarkdown`, `selectAll`, `scrollToCursor`, plus an optional `formatting` capability. Callers outside the editor implementation use this interface exclusively and never reach into CodeMirror internals.
+`types/editorController.ts` defines `EditorController` — document access (`getMarkdown`, `setMarkdown`, `insertMarkdown`), cursor and focus (`focus`, `hasFocus`, `isEmpty`, `getCursor`, `setCursor`, `scrollToCursor`, `selectAll`), the upload-anchor group below, plus an optional `formatting` capability. Callers outside the editor implementation use this interface exclusively and never reach into CodeMirror internals.
 
 `Editor/controller.ts` implements `EditorController` over a CodeMirror `EditorView`: `getMarkdown` is just `view.state.doc.toString()`, `setMarkdown` replaces the whole document, and `insertMarkdown` block-pads the insertion so it lands as its own block.
 
-`FormattingController` (same file in `types/`) is the rich-formatting surface the focus-mode `FormattingToolbar` drives: `run(commandId, ctx?)`, `getActiveFormats()`, `getSelectedText()`, and `subscribe(listener)`. `Editor/formatting.ts` implements it by editing the markdown source directly — toggling inline marks (`**`/`*`/`` ` ``), line prefixes (`- `, `1. `, `- [ ] `), and ATX heading prefixes (`#`…) — and by reading active state from the Lezer syntax tree at the caret.
+`createUploadAnchor`/`updateUploadAnchor`/`resolveUploadAnchor`/`cancelUploadAnchor` drive `Editor/uploadAnchors.ts`, a `StateField` of widget decorations that hold a place in the document while an attachment uploads and carry its progress, failure message, and retry/keep affordances. `resolveUploadAnchor` replaces the anchor with the finished markdown (block-padded the same way `insertMarkdown` is); resolving with empty markdown cancels instead, as does `cancelUploadAnchor`.
+
+`FormattingController` (same file in `types/`) is the rich-formatting surface the focus-mode `FormattingToolbar` drives: `run(commandId, ctx?)`, `getActiveFormats()`, and `subscribe(listener)`. `Editor/formatting.ts` implements it by editing the markdown source directly — toggling inline marks (`**` and `*`) and single-backtick code delimiters, line prefixes (`-`, `1.`, and `- [ ]`, each followed by a space), and ATX heading prefixes (`#`…) — and by reading active state from the Lezer syntax tree at the caret.
 
 ### Formatting command catalog
 
@@ -78,7 +86,7 @@ Uses `useReducer` + Context for predictable state transitions. All state changes
 
 ### Editor extensions
 
-`Editor/extensions.ts` exports `buildEditorExtensions()`, which composes the CodeMirror extension set: `@codemirror/lang-markdown` (with GFM), line wrapping, a reconfigurable placeholder, the editor theme, the `#tag`/`@mention` decoration plugin, the `#tag` autocomplete, and an update listener that pushes document changes back to the reducer via `onChange`. Native CodeMirror paste/drop handlers intercept file payloads before its text insertion behavior and pass them to the attachment layer; ordinary markdown text paste/drop remains CodeMirror-owned.
+`Editor/extensions.ts` exports `buildEditorExtensions()`, which composes the CodeMirror extension set: `@codemirror/lang-markdown` (with GFM), line wrapping, a reconfigurable placeholder, the editor theme, the `#tag`/`@mention` decoration plugin, the `#tag` autocomplete, and an update listener that pushes document changes back to the reducer via `onChange`. It also binds the save shortcut: `Meta-Enter` and `Ctrl-Enter` both call `onSubmit`, bound explicitly rather than through the platform-dependent `Mod-` so either works everywhere, and ordered ahead of `defaultKeymap`'s own `Mod-Enter` (`insertBlankLine`) so saving never also edits the document. Native CodeMirror paste/drop handlers intercept file payloads before its text insertion behavior and pass them to the attachment layer; ordinary markdown text paste/drop remains CodeMirror-owned.
 
 `Editor/theme.ts` defines the decorated-source look: a `HighlightStyle` over the Lezer markdown highlight tags (headings, strong, emphasis, code, links, quotes, markers) and an `EditorView.theme`. Colors come from CSS custom properties so light/dark themes just work. This is the editor's own styling — the read-only memo view styles itself separately via `@/lib/markdownStyles`.
 
@@ -111,8 +119,9 @@ Thin presentation components that dispatch actions and render UI.
 ```typescript
 import MemoEditor from "@/components/MemoEditor";
 
+// Create mode: omit `memo`. Pass an existing Memo to edit it instead.
 <MemoEditor
-  memoName="memos/123"
+  cacheKey="home-composer"
   onConfirm={(name) => console.log('Saved:', name)}
   onCancel={() => console.log('Cancelled')}
 />
@@ -123,6 +132,6 @@ import MemoEditor from "@/components/MemoEditor";
 Services are pure functions — easy to unit test without React.
 
 ```typescript
-const state = mockEditorState();
+const state = createInitialState(); // from state/types.ts
 const result = await memoService.save(state, { memoName: 'memos/123' });
 ```
diff --git a/web/src/components/MemoEditor/index.tsx b/web/src/components/MemoEditor/index.tsx
index dda23126..d73bb20e 100644
--- a/web/src/components/MemoEditor/index.tsx
+++ b/web/src/components/MemoEditor/index.tsx
@@ -45,6 +45,7 @@ const MemoEditorImpl: React.FC<MemoEditorProps> = ({
   defaultCreateTime,
   onConfirm,
   onCancel,
+  onSavingChange,
 }) => {
   const t = useTranslate();
   const currentUser = useCurrentUser();
@@ -54,6 +55,7 @@ const MemoEditorImpl: React.FC<MemoEditorProps> = ({
   // typing (which changes content) does not re-render the editor shell and its
   // toolbar/metadata children.
   const isFocusMode = useEditorSelector((s) => s.ui.isFocusMode);
+  const isSaving = useEditorSelector((s) => s.ui.isLoading.saving);
   const hasTimestamp = useEditorSelector((s) => Boolean(s.timestamps.createTime));
   const { userGeneralSetting } = useAuth();
   const { aiSetting, fetchSetting } = useInstance();
@@ -89,6 +91,10 @@ const MemoEditorImpl: React.FC<MemoEditorProps> = ({
   });
   const isDraftCacheEnabled = !memo;
 
+  useEffect(() => {
+    onSavingChange?.(isSaving);
+  }, [isSaving, onSavingChange]);
+
   // Auto-save content to localStorage (subscribes to the store internally).
   const { discardDraft } = useAutoSave(currentUser?.name ?? "", cacheKey, isInitialized && isDraftCacheEnabled);
 
diff --git a/web/src/components/MemoEditor/types/components.ts b/web/src/components/MemoEditor/types/components.ts
index c0dc935b..dac08a66 100644
--- a/web/src/components/MemoEditor/types/components.ts
+++ b/web/src/components/MemoEditor/types/components.ts
@@ -25,6 +25,8 @@ export interface MemoEditorProps {
   defaultCreateTime?: Date;
   onConfirm?: (memoName: string) => void;
   onCancel?: () => void;
+  /** Reports save activity so external presentations can prevent dismissal mid-transaction. */
+  onSavingChange?: (isSaving: boolean) => void;
 }
 
 export interface EditorContentProps {
diff --git a/web/src/contexts/GlobalMemoEditorContext.tsx b/web/src/contexts/GlobalMemoEditorContext.tsx
new file mode 100644
index 00000000..b3147872
--- /dev/null
+++ b/web/src/contexts/GlobalMemoEditorContext.tsx
@@ -0,0 +1,164 @@
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { type ComponentType, createContext, type ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { loadMemoEditor } from "@/components/MemoEditor/loader";
+import type { MemoEditorProps } from "@/components/MemoEditor/types";
+import { VisuallyHidden } from "@/components/ui/visually-hidden";
+import { useAppSidebar } from "@/contexts/AppSidebarContext";
+import { useAuth } from "@/contexts/AuthContext";
+import useCurrentUser from "@/hooks/useCurrentUser";
+import { useTranslate } from "@/utils/i18n";
+
+interface GlobalMemoEditorContextValue {
+  /** Whether the signed-in user is ready to compose; gates every visible entry point. */
+  canOpen: boolean;
+  openEditor: () => void;
+}
+
+const GlobalMemoEditorContext = createContext<GlobalMemoEditorContextValue | null>(null);
+
+const isVisibleFocusTarget = (element: HTMLElement | null): element is HTMLElement => {
+  if (!element?.isConnected || element.tabIndex < 0 || element.matches(":disabled, [aria-disabled='true']")) return false;
+
+  // Walk ancestors: the mobile trigger is hidden by a `md:hidden` parent, which
+  // never shows up in the element's own computed style.
+  for (let current: HTMLElement | null = element; current; current = current.parentElement) {
+    const style = window.getComputedStyle(current);
+    if (style.display === "none" || style.visibility === "hidden" || style.visibility === "collapse") return false;
+  }
+
+  return true;
+};
+
+const findVisibleFocusTarget = (selector: string): HTMLElement | null =>
+  Array.from(document.querySelectorAll<HTMLElement>(selector)).find(isVisibleFocusTarget) ?? null;
+
+export function GlobalMemoEditorProvider({ children }: { children: ReactNode }) {
+  const t = useTranslate();
+  const currentUserName = useCurrentUser()?.name;
+  const { isUserSettingsInitialized } = useAuth();
+  const { setMobileOpen, setQuickFindOpen } = useAppSidebar();
+  // Keyed by the user who opened it, so signing out closes the composer in the
+  // same render and a different user signing in cannot resurrect it.
+  const [openedFor, setOpenedFor] = useState<string>();
+  const [EditorComponent, setEditorComponent] = useState<ComponentType<MemoEditorProps>>();
+  // Only ever read from event handlers, so a ref keeps each save from
+  // re-rendering the provider and the whole editor tree it hosts.
+  const isSavingRef = useRef(false);
+  const returnFocusRef = useRef<HTMLElement | null>(null);
+  const openRequestVersionRef = useRef(0);
+
+  const closeEditor = useCallback(() => {
+    openRequestVersionRef.current += 1;
+    isSavingRef.current = false;
+    setOpenedFor(undefined);
+  }, []);
+  const requestCloseEditor = useCallback(() => {
+    if (!isSavingRef.current) closeEditor();
+  }, [closeEditor]);
+  const reportSaving = useCallback((saving: boolean) => {
+    isSavingRef.current = saving;
+  }, []);
+
+  // The editor reads defaults out of user settings, so composing has to wait for
+  // them. Keep the rule here so every entry point uses the same gate.
+  const canOpen = Boolean(currentUserName) && isUserSettingsInitialized;
+
+  const openEditor = useCallback(() => {
+    if (!canOpen || !currentUserName) return;
+
+    // Owned here so no caller can leave a sidebar surface open underneath.
+    setMobileOpen(false);
+    setQuickFindOpen(false);
+
+    const requestVersion = ++openRequestVersionRef.current;
+    isSavingRef.current = false;
+    const activeElement = document.activeElement;
+    returnFocusRef.current = activeElement instanceof HTMLElement && activeElement !== document.body ? activeElement : null;
+
+    void loadMemoEditor()
+      .then(({ default: MemoEditor }) => {
+        if (openRequestVersionRef.current !== requestVersion) return;
+        setEditorComponent(() => MemoEditor);
+        setOpenedFor(currentUserName);
+      })
+      .catch(() => undefined);
+  }, [canOpen, currentUserName, setMobileOpen, setQuickFindOpen]);
+
+  useEffect(() => {
+    // RootLayout remains mounted when a public instance moves from Home to
+    // Explore on sign-out. Treat every auth/readiness transition as a session
+    // boundary so an open composer—or a pending lazy import—cannot survive it.
+    closeEditor();
+    returnFocusRef.current = null;
+  }, [closeEditor, currentUserName, isUserSettingsInitialized]);
+
+  const resolveFinalFocus = useCallback(() => {
+    // Release the remembered node here rather than in closeEditor: base-ui asks
+    // for it after close, and a trigger that unmounted with the drawer would
+    // otherwise keep its whole detached subtree alive until the next open.
+    const remembered = isVisibleFocusTarget(returnFocusRef.current) ? returnFocusRef.current : null;
+    returnFocusRef.current = null;
+
+    return remembered ?? findVisibleFocusTarget("[data-new-memo-trigger]") ?? findVisibleFocusTarget("[data-mobile-navigation-trigger]");
+  }, []);
+
+  const editorIsOpen = openedFor !== undefined && openedFor === currentUserName;
+  const value = useMemo(() => ({ canOpen, openEditor }), [canOpen, openEditor]);
+
+  return (
+    <GlobalMemoEditorContext.Provider value={value}>
+      {children}
+      <DialogPrimitive.Root
+        open={editorIsOpen}
+        onOpenChange={(open, eventDetails) => {
+          if (!open && isSavingRef.current) {
+            eventDetails.cancel();
+            return;
+          }
+          if (open) {
+            setOpenedFor(currentUserName);
+          } else {
+            closeEditor();
+          }
+        }}
+      >
+        {EditorComponent && (
+          <DialogPrimitive.Portal>
+            <DialogPrimitive.Backdrop className="fixed inset-0 z-overlay bg-transparent" />
+            <DialogPrimitive.Popup
+              className="fixed inset-0 z-overlay outline-none"
+              initialFocus
+              finalFocus={resolveFinalFocus}
+              aria-modal="true"
+            >
+              <VisuallyHidden>
+                <DialogPrimitive.Title>{t("editor.new-memo")}</DialogPrimitive.Title>
+              </VisuallyHidden>
+              <EditorComponent
+                autoFocus
+                initialFocusMode
+                cacheKey="global-memo-editor"
+                placeholder={t("editor.any-thoughts")}
+                onConfirm={closeEditor}
+                onCancel={closeEditor}
+                onFocusModeExit={requestCloseEditor}
+                onSavingChange={reportSaving}
+              />
+              <DialogPrimitive.Close className="sr-only focus-visible:not-sr-only focus-visible:fixed focus-visible:end-3 focus-visible:top-3 focus-visible:z-dropdown focus-visible:h-9 focus-visible:rounded-md focus-visible:bg-background focus-visible:px-3 focus-visible:text-sm focus-visible:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50">
+                {t("common.close")}
+              </DialogPrimitive.Close>
+            </DialogPrimitive.Popup>
+          </DialogPrimitive.Portal>
+        )}
+      </DialogPrimitive.Root>
+    </GlobalMemoEditorContext.Provider>
+  );
+}
+
+export function useGlobalMemoEditor() {
+  const context = useContext(GlobalMemoEditorContext);
+  if (!context) {
+    throw new Error("useGlobalMemoEditor must be used within GlobalMemoEditorProvider");
+  }
+  return context;
+}
diff --git a/web/src/layouts/RootLayout.tsx b/web/src/layouts/RootLayout.tsx
index f8908bf6..03c3fc96 100644
--- a/web/src/layouts/RootLayout.tsx
+++ b/web/src/layouts/RootLayout.tsx
@@ -10,6 +10,7 @@ import AppSidebar, {
   useSidebarWidth,
 } from "@/components/AppSidebar";
 import { AppSidebarProvider } from "@/contexts/AppSidebarContext";
+import { GlobalMemoEditorProvider } from "@/contexts/GlobalMemoEditorContext";
 import { useInstance } from "@/contexts/InstanceContext";
 import { MemoFilterProvider, useMemoFilterContext } from "@/contexts/MemoFilterContext";
 import useCurrentUser from "@/hooks/useCurrentUser";
@@ -67,35 +68,37 @@ const RootLayoutContent = () => {
   }
 
   return (
-    <AppSidebarProvider>
-      <div ref={shellRef} className="min-h-full w-full bg-background" style={{ [SIDEBAR_WIDTH_VAR]: `${sidebarWidth}px` } as CSSProperties}>
-        {md && (
-          <div className="fixed inset-y-0 start-0 z-30 w-(--app-sidebar-width) border-e border-border/70">
-            <AppSidebar />
-            <SidebarResizeHandle
-              width={sidebarWidth}
-              minWidth={minWidth}
-              maxWidth={maxWidth}
-              onWidthChange={setSidebarWidth}
-              targetRef={shellRef}
-            />
-          </div>
-        )}
-        <MobileAppSidebar />
-        <main className="flex min-h-full w-full min-w-0 flex-col items-center md:ps-(--app-sidebar-width)">
-          <MobileAppHeader />
-          {profile.demo && <DemoBanner />}
-          <Outlet />
-        </main>
-        <QuickFindDialog />
-      </div>
-    </AppSidebarProvider>
+    <div ref={shellRef} className="min-h-full w-full bg-background" style={{ [SIDEBAR_WIDTH_VAR]: `${sidebarWidth}px` } as CSSProperties}>
+      {md && (
+        <div className="fixed inset-y-0 start-0 z-30 w-(--app-sidebar-width) border-e border-border/70">
+          <AppSidebar />
+          <SidebarResizeHandle
+            width={sidebarWidth}
+            minWidth={minWidth}
+            maxWidth={maxWidth}
+            onWidthChange={setSidebarWidth}
+            targetRef={shellRef}
+          />
+        </div>
+      )}
+      <MobileAppSidebar />
+      <main className="flex min-h-full w-full min-w-0 flex-col items-center md:ps-(--app-sidebar-width)">
+        <MobileAppHeader />
+        {profile.demo && <DemoBanner />}
+        <Outlet />
+      </main>
+      <QuickFindDialog />
+    </div>
   );
 };
 
 const RootLayout = () => (
   <MemoFilterProvider>
-    <RootLayoutContent />
+    <AppSidebarProvider>
+      <GlobalMemoEditorProvider>
+        <RootLayoutContent />
+      </GlobalMemoEditorProvider>
+    </AppSidebarProvider>
   </MemoFilterProvider>
 );
 
diff --git a/web/src/locales/en.json b/web/src/locales/en.json
index 2fe4819f..061f04dd 100644
--- a/web/src/locales/en.json
+++ b/web/src/locales/en.json
@@ -269,6 +269,7 @@
       "uploading-images": "Uploading images {{completed}}/{{total}}",
       "upload-file": "Upload file"
     },
+    "new-memo": "New memo",
     "no-changes-detected": "No changes detected",
     "save": "Save",
     "saving": "Saving...",
diff --git a/web/src/locales/zh-Hans.json b/web/src/locales/zh-Hans.json
index 7d500d16..1b5ef36b 100644
--- a/web/src/locales/zh-Hans.json
+++ b/web/src/locales/zh-Hans.json
@@ -187,6 +187,7 @@
       "link-prompt": "输入链接地址",
       "more": "更多格式"
     },
+    "new-memo": "新建备忘录",
     "no-changes-detected": "未检测到更改",
     "save": "保存",
     "saving": "保存中...",
diff --git a/web/src/locales/zh-Hant.json b/web/src/locales/zh-Hant.json
index 328f6790..14105601 100644
--- a/web/src/locales/zh-Hant.json
+++ b/web/src/locales/zh-Hant.json
@@ -271,6 +271,7 @@
       "uploading-images": "正在上傳圖片 {{completed}}/{{total}}",
       "upload-file": "上傳文件"
     },
+    "new-memo": "新增備忘錄",
     "no-changes-detected": "未發現變更",
     "save": "儲存",
     "saving": "儲存中...",
diff --git a/web/tests/about-page.test.tsx b/web/tests/about-page.test.tsx
index 0ffcf2f1..2e864526 100644
--- a/web/tests/about-page.test.tsx
+++ b/web/tests/about-page.test.tsx
@@ -20,10 +20,10 @@ vi.mock("@/contexts/InstanceContext", () => ({
 vi.mock("@/utils/i18n", () => ({
   useTranslate: () => (key: string) =>
     (
-      {
+      ({
         "common.version": "Version",
         "about.powered-by": "Powered by Memos",
-      } as Record<string, string>
+      }) as Record<string, string>
     )[key] ?? key,
 }));
 
diff --git a/web/tests/app-sidebar-logo.test.tsx b/web/tests/app-sidebar-logo.test.tsx
index 98adf59a..6081d0e7 100644
--- a/web/tests/app-sidebar-logo.test.tsx
+++ b/web/tests/app-sidebar-logo.test.tsx
@@ -1,8 +1,8 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { fireEvent, render as testingLibraryRender, screen } from "@testing-library/react";
+import { fireEvent, screen, render as testingLibraryRender } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import AppSidebar, { MobileAppHeader } from "@/components/AppSidebar";
+import AppSidebar, { MobileAppHeader, MobileAppSidebar } from "@/components/AppSidebar";
 import { SIDEBAR_SECTION_ACTION_BUTTON_CLASSES, SIDEBAR_SECTION_ACTION_ICON_CLASSES } from "@/components/AppSidebar/SidebarSection";
 
 const authState = vi.hoisted(() => ({
@@ -11,6 +11,11 @@ const authState = vi.hoisted(() => ({
 }));
 const sidebarState = vi.hoisted(() => ({
   memoScope: "home" as "home" | "explore" | "archived",
+  mobileOpen: false,
+}));
+const globalEditorState = vi.hoisted(() => ({
+  canOpen: true,
+  openEditor: vi.fn(),
 }));
 
 vi.mock("@/components/MemosLogo", () => ({
@@ -41,7 +46,7 @@ vi.mock("@/contexts/AppSidebarContext", () => ({
     setInboxFilter: vi.fn(),
     memoDetail: undefined,
     setMemoDetail: vi.fn(),
-    mobileOpen: false,
+    mobileOpen: sidebarState.mobileOpen,
     setMobileOpen: vi.fn(),
     quickFindOpen: false,
     setQuickFindOpen: vi.fn(),
@@ -54,6 +59,10 @@ vi.mock("@/contexts/AuthContext", () => ({
   useAuth: () => ({ isInitialized: true }),
 }));
 
+vi.mock("@/contexts/GlobalMemoEditorContext", () => ({
+  useGlobalMemoEditor: () => globalEditorState,
+}));
+
 vi.mock("@/contexts/InstanceContext", () => ({
   useInstance: () => ({ isInitialized: true }),
 }));
@@ -123,23 +132,40 @@ describe("App sidebar logo", () => {
     authState.currentUser = { name: "users/test" };
     authState.memoViews = [];
     sidebarState.memoScope = "home";
+    sidebarState.mobileOpen = false;
+    globalEditorState.canOpen = true;
+    globalEditorState.openEditor.mockClear();
   });
 
-  it("navigates home instead of opening a global editor", () => {
+  it("keeps logo navigation unchanged and opens the global memo editor", () => {
     render(
-      <MemoryRouter initialEntries={["/"]}>
+      <MemoryRouter initialEntries={["/attachments"]}>
         <AppSidebar />
       </MemoryRouter>,
     );
 
     const logo = screen.getByRole("link", { name: "Memos logo" });
     expect(logo).toHaveAttribute("href", "/");
-    expect(screen.queryByRole("button", { name: /create.*memos/i })).not.toBeInTheDocument();
+    fireEvent.click(screen.getByRole("button", { name: "editor.new-memo" }));
+    expect(globalEditorState.openEditor).toHaveBeenCalledOnce();
     expect(screen.queryByText("common.calendar")).not.toBeInTheDocument();
   });
 
+  it("hides Compose when the composer reports it is not available", () => {
+    globalEditorState.canOpen = false;
+    render(
+      <MemoryRouter initialEntries={["/"]}>
+        <AppSidebar />
+      </MemoryRouter>,
+    );
+
+    expect(screen.queryByRole("button", { name: "editor.new-memo" })).not.toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "common.search" })).toBeInTheDocument();
+  });
+
   it("shows the compact public navigation for a guest", () => {
     authState.currentUser = undefined;
+    globalEditorState.canOpen = false;
     render(
       <MemoryRouter initialEntries={["/explore"]}>
         <AppSidebar />
@@ -149,6 +175,7 @@ describe("App sidebar logo", () => {
     expect(screen.getByRole("link", { name: "common.explore" })).toBeInTheDocument();
     expect(screen.getByRole("link", { name: "common.about" })).toHaveAttribute("href", "/about");
     expect(screen.getByRole("link", { name: "common.sign-in-to-memos" }).closest("footer")).not.toBeNull();
+    expect(screen.queryByRole("button", { name: "editor.new-memo" })).not.toBeInTheDocument();
     expect(screen.queryByRole("link", { name: "common.home" })).not.toBeInTheDocument();
   });
 
@@ -303,15 +330,29 @@ describe("App sidebar logo", () => {
     expectActiveNavPill(await screen.findByRole("button", { name: label, current: "page" }), label);
   });
 
-  it("keeps the mobile brand beside navigation without a duplicate search action", () => {
+  it("keeps the mobile header limited to navigation and brand", () => {
     render(
-      <MemoryRouter initialEntries={["/"]}>
+      <MemoryRouter initialEntries={["/about"]}>
         <MobileAppHeader />
       </MemoryRouter>,
     );
 
-    expect(screen.getByRole("button", { name: "Open navigation" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Open navigation" })).toHaveAttribute("data-mobile-navigation-trigger");
     expect(screen.getByRole("link", { name: "Memos logo" })).toHaveAttribute("href", "/");
     expect(screen.queryByRole("button", { name: "common.search" })).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "editor.new-memo" })).not.toBeInTheDocument();
+  });
+
+  it("exposes Compose in the mobile navigation drawer", () => {
+    sidebarState.mobileOpen = true;
+    render(
+      <MemoryRouter initialEntries={["/about"]}>
+        <MobileAppSidebar />
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByRole("button", { name: "common.search" })).toBeInTheDocument();
+    fireEvent.click(screen.getByRole("button", { name: "editor.new-memo" }));
+    expect(globalEditorState.openEditor).toHaveBeenCalledOnce();
   });
 });
diff --git a/web/tests/attachment-library-stats.test.ts b/web/tests/attachment-library-stats.test.ts
index 4632600a..81711bbb 100644
--- a/web/tests/attachment-library-stats.test.ts
+++ b/web/tests/attachment-library-stats.test.ts
@@ -5,11 +5,11 @@ import { createElement, type PropsWithChildren } from "react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { buildAttachmentLibraryStats, useAttachmentLibraryStats } from "@/hooks/useAttachmentLibrary";
 import {
+  type Attachment,
   AttachmentSchema,
   MotionMediaFamily,
   MotionMediaRole,
   MotionMediaSchema,
-  type Attachment,
 } from "@/types/proto/api/v1/attachment_service_pb";
 
 const clients = vi.hoisted(() => ({ listAttachments: vi.fn() }));
diff --git a/web/tests/auth-context-initialization.test.tsx b/web/tests/auth-context-initialization.test.tsx
index be92cfb5..9bd2458e 100644
--- a/web/tests/auth-context-initialization.test.tsx
+++ b/web/tests/auth-context-initialization.test.tsx
@@ -57,9 +57,7 @@ describe("AuthProvider initialization", () => {
   it("resets full readiness while post-sign-in settings are pending", async () => {
     let resolveSettings!: (value: { settings: [] }) => void;
     clients.getCurrentUser.mockResolvedValue({ user: { name: "users/alice", username: "alice" } });
-    clients.listUserSettings.mockImplementation(
-      () => new Promise<{ settings: [] }>((resolve) => (resolveSettings = resolve)),
-    );
+    clients.listUserSettings.mockImplementation(() => new Promise<{ settings: [] }>((resolve) => (resolveSettings = resolve)));
 
     render(<Probe />, { wrapper });
 
diff --git a/web/tests/calendar-cell-empty-clickable.test.tsx b/web/tests/calendar-cell-empty-clickable.test.tsx
index 2abfa76d..7adf0ef2 100644
--- a/web/tests/calendar-cell-empty-clickable.test.tsx
+++ b/web/tests/calendar-cell-empty-clickable.test.tsx
@@ -5,7 +5,7 @@ import type { CalendarDayCell } from "@/components/ActivityCalendar/types";
 
 const makeDay = (overrides: Partial<CalendarDayCell> = {}): CalendarDayCell => ({
   date: "2025-05-01",
-  label: "1",
+  label: 1,
   count: 0,
   isCurrentMonth: true,
   isToday: false,
diff --git a/web/tests/editor.test.tsx b/web/tests/editor.test.tsx
index b69d63da..3ad85295 100644
--- a/web/tests/editor.test.tsx
+++ b/web/tests/editor.test.tsx
@@ -14,16 +14,7 @@ vi.mock("@/hooks/useUserQueries", () => ({
 
 describe("Editor", () => {
   it("scopes tag autocomplete stats to the current user", () => {
-    render(
-      <Editor
-        className="x"
-        initialContent=""
-        placeholder="memo"
-        onContentChange={vi.fn()}
-        onFiles={vi.fn()}
-        onSubmit={vi.fn()}
-      />,
-    );
+    render(<Editor className="x" initialContent="" placeholder="memo" onContentChange={vi.fn()} onFiles={vi.fn()} onSubmit={vi.fn()} />);
 
     expect(queries.useTagCounts).toHaveBeenCalledWith(true);
   });
diff --git a/web/tests/filtered-memo-stats.test.ts b/web/tests/filtered-memo-stats.test.ts
index 4c17188f..d2a4204f 100644
--- a/web/tests/filtered-memo-stats.test.ts
+++ b/web/tests/filtered-memo-stats.test.ts
@@ -38,7 +38,7 @@ describe("useFilteredMemoStats", () => {
     vi.mocked(useAllUserStats).mockReturnValue({
       data: [],
       isLoading: false,
-    } as ReturnType<typeof useAllUserStats>);
+    } as unknown as ReturnType<typeof useAllUserStats>);
     vi.mocked(useUserStats).mockReturnValue({
       data: {
         memoCreatedTimestamps: [ts(2026, 5, 1), ts(2026, 5, 1), ts(2026, 5, 2)],
@@ -46,7 +46,7 @@ describe("useFilteredMemoStats", () => {
         tagCount: {},
       },
       isLoading: false,
-    } as ReturnType<typeof useUserStats>);
+    } as unknown as ReturnType<typeof useUserStats>);
   });
 
   afterEach(() => {
@@ -91,7 +91,7 @@ describe("useFilteredMemoStats", () => {
         tagCount: {},
       },
       isLoading: false,
-    } as ReturnType<typeof useUserStats>);
+    } as unknown as ReturnType<typeof useUserStats>);
     mockUseView.mockReturnValue({
       timeBasis: "update_time",
       orderByTimeAsc: false,
diff --git a/web/tests/formatting-toolbar.test.tsx b/web/tests/formatting-toolbar.test.tsx
index 729c1182..183a8ea0 100644
--- a/web/tests/formatting-toolbar.test.tsx
+++ b/web/tests/formatting-toolbar.test.tsx
@@ -17,7 +17,7 @@ beforeAll(() => {
   Element.prototype.releasePointerCapture = vi.fn();
 });
 
-function makeController(opts: { active?: Partial<ActiveFormatState>; getSelectedText?: () => string } = {}) {
+function makeController(opts: { active?: Partial<ActiveFormatState> } = {}) {
   const run = vi.fn();
   const activeFormats: ActiveFormatState = { ...EMPTY_ACTIVE_FORMATS, ...opts.active };
   const controller: EditorController = {
@@ -31,10 +31,13 @@ function makeController(opts: { active?: Partial<ActiveFormatState>; getSelected
     setCursor: vi.fn(),
     scrollToCursor: () => {},
     selectAll: () => {},
+    createUploadAnchor: vi.fn(),
+    updateUploadAnchor: vi.fn(),
+    resolveUploadAnchor: vi.fn(),
+    cancelUploadAnchor: vi.fn(),
     formatting: {
       run,
       getActiveFormats: () => activeFormats,
-      getSelectedText: opts.getSelectedText ?? (() => ""),
       subscribe: () => () => {},
     },
   };
diff --git a/web/tests/global-memo-editor.test.tsx b/web/tests/global-memo-editor.test.tsx
new file mode 100644
index 00000000..f5ceddce
--- /dev/null
+++ b/web/tests/global-memo-editor.test.tsx
@@ -0,0 +1,255 @@
+import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { useState } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { MemoEditorProps } from "@/components/MemoEditor/types";
+import { GlobalMemoEditorProvider, useGlobalMemoEditor } from "@/contexts/GlobalMemoEditorContext";
+
+const DIALOG = { name: "editor.new-memo" };
+
+const mocks = vi.hoisted(() => ({
+  currentUser: { name: "users/test" } as { name: string } | undefined,
+  isUserSettingsInitialized: true,
+  editorProps: undefined as MemoEditorProps | undefined,
+  loadMemoEditor: vi.fn(),
+  setMobileOpen: vi.fn(),
+  setQuickFindOpen: vi.fn(),
+}));
+
+vi.mock("@/components/MemoEditor/loader", () => ({
+  loadMemoEditor: mocks.loadMemoEditor,
+}));
+
+vi.mock("@/contexts/AppSidebarContext", () => ({
+  useAppSidebar: () => ({ setMobileOpen: mocks.setMobileOpen, setQuickFindOpen: mocks.setQuickFindOpen }),
+}));
+
+vi.mock("@/contexts/AuthContext", () => ({
+  useAuth: () => ({ isUserSettingsInitialized: mocks.isUserSettingsInitialized }),
+}));
+
+vi.mock("@/hooks/useCurrentUser", () => ({
+  default: () => mocks.currentUser,
+}));
+
+vi.mock("@/utils/i18n", () => ({
+  useTranslate: () => (key: string) => key,
+}));
+
+const MockMemoEditor = (props: MemoEditorProps) => {
+  mocks.editorProps = props;
+  return (
+    <div data-testid="global-editor">
+      <button type="button" onClick={() => props.onConfirm?.("memos/created")}>
+        Save memo
+      </button>
+      <button type="button" onClick={props.onCancel}>
+        Cancel editor
+      </button>
+      <button type="button" onClick={props.onFocusModeExit}>
+        Exit focus mode
+      </button>
+      <button type="button" onClick={() => props.onSavingChange?.(true)}>
+        Start saving
+      </button>
+    </div>
+  );
+};
+
+const Trigger = () => {
+  const { openEditor } = useGlobalMemoEditor();
+  return (
+    <button type="button" onClick={openEditor}>
+      Open editor
+    </button>
+  );
+};
+
+/** Stands in for the mobile drawer: its Compose button unmounts as the drawer closes. */
+const EphemeralTrigger = () => {
+  const { openEditor } = useGlobalMemoEditor();
+  const [dismissed, setDismissed] = useState(false);
+  return (
+    <>
+      {!dismissed && (
+        <button
+          type="button"
+          data-new-memo-trigger
+          onClick={() => {
+            setDismissed(true);
+            openEditor();
+          }}
+        >
+          Open drawer editor
+        </button>
+      )}
+      <button type="button" data-mobile-navigation-trigger>
+        Open navigation
+      </button>
+    </>
+  );
+};
+
+const renderProvider = (children = <Trigger />) => render(<GlobalMemoEditorProvider>{children}</GlobalMemoEditorProvider>);
+
+/** Renders, focuses the trigger so focus-return has something to restore, and opens. */
+const openViaTrigger = async () => {
+  renderProvider();
+  const trigger = screen.getByRole("button", { name: "Open editor" });
+  trigger.focus();
+  fireEvent.click(trigger);
+  await screen.findByRole("dialog", DIALOG);
+  return trigger;
+};
+
+const expectClosed = () => waitFor(() => expect(screen.queryByRole("dialog", DIALOG)).not.toBeInTheDocument());
+
+describe("GlobalMemoEditorProvider", () => {
+  beforeEach(() => {
+    mocks.currentUser = { name: "users/test" };
+    mocks.isUserSettingsInitialized = true;
+    mocks.editorProps = undefined;
+    mocks.loadMemoEditor.mockResolvedValue({ default: MockMemoEditor });
+    mocks.setMobileOpen.mockClear();
+    mocks.setQuickFindOpen.mockClear();
+  });
+
+  it("opens a modal focus-mode editor, closes the sidebar surfaces, and restores focus after Escape", async () => {
+    const trigger = await openViaTrigger();
+    const dialog = screen.getByRole("dialog", DIALOG);
+
+    expect(dialog).toHaveAttribute("aria-modal", "true");
+    expect(mocks.setMobileOpen).toHaveBeenCalledWith(false);
+    expect(mocks.setQuickFindOpen).toHaveBeenCalledWith(false);
+    expect(mocks.editorProps).toMatchObject({
+      autoFocus: true,
+      initialFocusMode: true,
+      cacheKey: "global-memo-editor",
+    });
+    await waitFor(() => expect(dialog).toContainElement(document.activeElement as HTMLElement | null));
+
+    fireEvent.keyDown(dialog, { key: "Escape" });
+
+    await expectClosed();
+    expect(trigger).toHaveFocus();
+  });
+
+  it.each(["Save memo", "Cancel editor", "Exit focus mode", "common.close"])("closes after %s", async (action) => {
+    const trigger = await openViaTrigger();
+
+    fireEvent.click(screen.getByRole("button", { name: action }));
+
+    await expectClosed();
+    expect(trigger).toHaveFocus();
+  });
+
+  it("prevents dialog and focus-mode dismissal while saving but lets save completion force close", async () => {
+    await openViaTrigger();
+    const dialog = screen.getByRole("dialog", DIALOG);
+
+    fireEvent.click(screen.getByRole("button", { name: "Start saving" }));
+    fireEvent.keyDown(dialog, { key: "Escape" });
+    expect(dialog).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "Exit focus mode" }));
+    expect(dialog).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "common.close" }));
+    expect(dialog).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "Save memo" }));
+    await expectClosed();
+  });
+
+  it("makes the screen-reader close control visible when keyboard-focused", async () => {
+    await openViaTrigger();
+    const close = screen.getByRole("button", { name: "common.close" });
+
+    expect(close).toHaveClass("sr-only", "focus-visible:not-sr-only");
+    close.focus();
+    expect(close).toHaveFocus();
+  });
+
+  it("returns focus to mobile navigation when the drawer's Compose trigger unmounts", async () => {
+    renderProvider(<EphemeralTrigger />);
+
+    fireEvent.click(screen.getByRole("button", { name: "Open drawer editor" }));
+    await screen.findByRole("dialog", DIALOG);
+    fireEvent.click(screen.getByRole("button", { name: "Cancel editor" }));
+
+    await expectClosed();
+    expect(screen.getByRole("button", { name: "Open navigation" })).toHaveFocus();
+  });
+
+  it("does not open or load the editor for a guest", () => {
+    mocks.currentUser = undefined;
+    renderProvider();
+
+    fireEvent.click(screen.getByRole("button", { name: "Open editor" }));
+
+    expect(mocks.loadMemoEditor).not.toHaveBeenCalled();
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+
+  it("invalidates a pending open request across sign-out and same-user sign-in", async () => {
+    let resolveEditorLoad!: (module: { default: typeof MockMemoEditor }) => void;
+    mocks.loadMemoEditor.mockReturnValue(
+      new Promise((resolve) => {
+        resolveEditorLoad = resolve;
+      }),
+    );
+    const view = renderProvider();
+
+    fireEvent.click(screen.getByRole("button", { name: "Open editor" }));
+    expect(mocks.loadMemoEditor).toHaveBeenCalledOnce();
+
+    mocks.currentUser = undefined;
+    view.rerender(
+      <GlobalMemoEditorProvider>
+        <Trigger />
+      </GlobalMemoEditorProvider>,
+    );
+    mocks.currentUser = { name: "users/test" };
+    view.rerender(
+      <GlobalMemoEditorProvider>
+        <Trigger />
+      </GlobalMemoEditorProvider>,
+    );
+
+    await act(async () => {
+      resolveEditorLoad({ default: MockMemoEditor });
+    });
+
+    expect(screen.queryByRole("dialog", DIALOG)).not.toBeInTheDocument();
+  });
+
+  it("does not resurrect an open composer after the same user signs out and back in", async () => {
+    const view = renderProvider();
+    fireEvent.click(screen.getByRole("button", { name: "Open editor" }));
+    await screen.findByRole("dialog", DIALOG);
+
+    mocks.currentUser = undefined;
+    view.rerender(
+      <GlobalMemoEditorProvider>
+        <Trigger />
+      </GlobalMemoEditorProvider>,
+    );
+    await expectClosed();
+
+    mocks.currentUser = { name: "users/test" };
+    view.rerender(
+      <GlobalMemoEditorProvider>
+        <Trigger />
+      </GlobalMemoEditorProvider>,
+    );
+
+    expect(screen.queryByRole("dialog", DIALOG)).not.toBeInTheDocument();
+  });
+
+  it("does not assign a global Compose shortcut", () => {
+    renderProvider(<span />);
+
+    fireEvent.keyDown(window, { key: "m", shiftKey: true, metaKey: true });
+
+    expect(mocks.loadMemoEditor).not.toHaveBeenCalled();
+  });
+});
diff --git a/web/tests/guards.test.tsx b/web/tests/guards.test.tsx
index 96a33077..a270e84f 100644
--- a/web/tests/guards.test.tsx
+++ b/web/tests/guards.test.tsx
@@ -1,5 +1,5 @@
-import type { ReactNode } from "react";
 import { render, screen } from "@testing-library/react";
+import type { ReactNode } from "react";
 import { MemoryRouter, Route, Routes, useLocation } from "react-router-dom";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
diff --git a/web/tests/inline-image-upload-files.test.ts b/web/tests/inline-image-upload-files.test.ts
index 17017f91..3eaf7ba3 100644
--- a/web/tests/inline-image-upload-files.test.ts
+++ b/web/tests/inline-image-upload-files.test.ts
@@ -1,4 +1,3 @@
-import { create } from "@bufbuild/protobuf";
 import { describe, expect, it } from "vitest";
 import { pairAppleLivePhotoFiles } from "@/components/MemoEditor/hooks";
 import { splitInlineLocalFiles } from "@/components/MemoEditor/hooks/useInlineImageUpload";
diff --git a/web/tests/managed-attachment.test.ts b/web/tests/managed-attachment.test.ts
index 28c0933c..baba9beb 100644
--- a/web/tests/managed-attachment.test.ts
+++ b/web/tests/managed-attachment.test.ts
@@ -39,11 +39,7 @@ describe("managed attachment Markdown", () => {
   });
 
   it("uses the first duplicate reference definition like Goldmark", () => {
-    const content = [
-      "![photo][asset]",
-      "[asset]: /file/attachments/first-image",
-      "[asset]: /file/attachments/second-image",
-    ].join("\n\n");
+    const content = ["![photo][asset]", "[asset]: /file/attachments/first-image", "[asset]: /file/attachments/second-image"].join("\n\n");
 
     expect(Array.from(extractManagedAttachmentUIDs(content))).toEqual(["first-image"]);
   });
diff --git a/web/tests/markdown-task-actions.test.ts b/web/tests/markdown-task-actions.test.ts
index bf5874b0..11c0cfe9 100644
--- a/web/tests/markdown-task-actions.test.ts
+++ b/web/tests/markdown-task-actions.test.ts
@@ -19,7 +19,9 @@ describe("uncheckAllTasks", () => {
   it("unchecks every checked task while preserving source formatting", () => {
     const markdown = ["Intro", "- [x] first", "* [X] second", "  + [ ] nested", "1. [x] ordered", "Outro"].join("\n");
 
-    expect(uncheckAllTasks(markdown)).toBe(["Intro", "- [ ] first", "* [ ] second", "  + [ ] nested", "1. [ ] ordered", "Outro"].join("\n"));
+    expect(uncheckAllTasks(markdown)).toBe(
+      ["Intro", "- [ ] first", "* [ ] second", "  + [ ] nested", "1. [ ] ordered", "Outro"].join("\n"),
+    );
   });
 
   it("returns the original string when no checkbox markers need changing", () => {
diff --git a/web/tests/media-loading.test.tsx b/web/tests/media-loading.test.tsx
index 39f030f6..1abbabac 100644
--- a/web/tests/media-loading.test.tsx
+++ b/web/tests/media-loading.test.tsx
@@ -15,9 +15,7 @@ describe("media loading", () => {
 
   it("does not bind an audio source until playback is requested", async () => {
     const play = vi.spyOn(HTMLMediaElement.prototype, "play").mockResolvedValue();
-    const { container } = render(
-      <AudioAttachmentItem filename="recording.mp3" sourceUrl="/recording.mp3" mimeType="audio/mpeg" />,
-    );
+    const { container } = render(<AudioAttachmentItem filename="recording.mp3" sourceUrl="/recording.mp3" mimeType="audio/mpeg" />);
     const audio = container.querySelector("audio");
 
     expect(audio).not.toHaveAttribute("src");
diff --git a/web/tests/memo-card-height.test.ts b/web/tests/memo-card-height.test.ts
index 936c6a26..11a813ed 100644
--- a/web/tests/memo-card-height.test.ts
+++ b/web/tests/memo-card-height.test.ts
@@ -1,16 +1,10 @@
-import { create } from "@bufbuild/protobuf";
+import { create, type MessageInitShape } from "@bufbuild/protobuf";
 import { describe, expect, it } from "vitest";
 import { estimateMemoCardHeight } from "@/components/PagedMemoList/memoCardHeight";
-import { type Attachment, AttachmentSchema } from "@/types/proto/api/v1/attachment_service_pb";
-import {
-  type Memo,
-  MemoRelation_MemoSchema,
-  MemoRelation_Type,
-  MemoRelationSchema,
-  MemoSchema,
-} from "@/types/proto/api/v1/memo_service_pb";
+import { AttachmentSchema } from "@/types/proto/api/v1/attachment_service_pb";
+import { MemoRelation_MemoSchema, MemoRelation_Type, MemoRelationSchema, MemoSchema } from "@/types/proto/api/v1/memo_service_pb";
 
-const buildAttachment = (overrides: Partial<Attachment>) =>
+const buildAttachment = (overrides: MessageInitShape<typeof AttachmentSchema>) =>
   create(AttachmentSchema, {
     name: "attachments/test",
     filename: "test.bin",
@@ -25,7 +19,7 @@ const buildCommentRelation = (memoName: string, index: number) =>
     relatedMemo: create(MemoRelation_MemoSchema, { name: memoName }),
   });
 
-const buildMemo = (overrides: Partial<Memo> = {}) =>
+const buildMemo = (overrides: MessageInitShape<typeof MemoSchema> = {}) =>
   create(MemoSchema, {
     name: "memos/main",
     content: "hello",
diff --git a/web/tests/memo-comments-pagination.test.tsx b/web/tests/memo-comments-pagination.test.tsx
index a743586b..657207a6 100644
--- a/web/tests/memo-comments-pagination.test.tsx
+++ b/web/tests/memo-comments-pagination.test.tsx
@@ -36,10 +36,7 @@ describe("useInfiniteMemoComments", () => {
     const { result } = renderHook(() => useInfiniteMemoComments("memos/parent", { pageSize: 2 }), { wrapper });
 
     await waitFor(() => expect(result.current.data?.map((memo) => memo.name)).toEqual(["memos/comment-1", "memos/comment-2"]));
-    expect(listMemoComments).toHaveBeenNthCalledWith(
-      1,
-      expect.objectContaining({ name: "memos/parent", pageSize: 2, pageToken: "" }),
-    );
+    expect(listMemoComments).toHaveBeenNthCalledWith(1, expect.objectContaining({ name: "memos/parent", pageSize: 2, pageToken: "" }));
     expect(result.current.hasNextPage).toBe(true);
 
     await act(async () => {
diff --git a/web/tests/memo-content-lazy-renderers.test.tsx b/web/tests/memo-content-lazy-renderers.test.tsx
index e81bf70b..b1a4b6a0 100644
--- a/web/tests/memo-content-lazy-renderers.test.tsx
+++ b/web/tests/memo-content-lazy-renderers.test.tsx
@@ -90,9 +90,7 @@ describe("memo content lazy renderers", () => {
   });
 
   it("escapes plain code and highlights common languages", async () => {
-    expect(await highlightCode('<script data-test="x">&</script>', "")).toBe(
-      "&lt;script data-test=&quot;x&quot;&gt;&amp;&lt;/script&gt;",
-    );
+    expect(await highlightCode('<script data-test="x">&</script>', "")).toBe("&lt;script data-test=&quot;x&quot;&gt;&amp;&lt;/script&gt;");
     expect(await highlightCode("echo hello", "bash")).toContain("hljs-built_in");
     expect(await highlightCode("const value = 1;", "js")).toContain("hljs-keyword");
   });
diff --git a/web/tests/memo-share-image.test.ts b/web/tests/memo-share-image.test.ts
index bcb66d98..f8f1aa3f 100644
--- a/web/tests/memo-share-image.test.ts
+++ b/web/tests/memo-share-image.test.ts
@@ -1,4 +1,4 @@
-import { create } from "@bufbuild/protobuf";
+import { create, type MessageInitShape } from "@bufbuild/protobuf";
 import { toBlob } from "html-to-image";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import {
@@ -10,14 +10,14 @@ import {
   getMemoShareRenderWidth,
 } from "@/components/MemoActionMenu/memoShareImage";
 import { buildMemoShareImagePreviewModel } from "@/components/MemoActionMenu/memoShareImagePreviewModel";
-import { type Attachment, AttachmentSchema } from "@/types/proto/api/v1/attachment_service_pb";
+import { AttachmentSchema } from "@/types/proto/api/v1/attachment_service_pb";
 import { type Memo, MemoSchema } from "@/types/proto/api/v1/memo_service_pb";
 
 vi.mock("html-to-image", () => ({
   toBlob: vi.fn(),
 }));
 
-const buildMemo = (overrides: Partial<Memo> = {}) =>
+const buildMemo = (overrides: MessageInitShape<typeof MemoSchema> = {}) =>
   create(MemoSchema, {
     name: "memos/test",
     content: "hello",
@@ -26,7 +26,7 @@ const buildMemo = (overrides: Partial<Memo> = {}) =>
     ...overrides,
   });
 
-const buildAttachment = (overrides: Partial<Attachment>) =>
+const buildAttachment = (overrides: MessageInitShape<typeof AttachmentSchema>) =>
   create(AttachmentSchema, {
     name: "attachments/test",
     filename: "test.bin",
diff --git a/web/tests/memo-views.test.ts b/web/tests/memo-views.test.ts
index 807c9974..418c65f7 100644
--- a/web/tests/memo-views.test.ts
+++ b/web/tests/memo-views.test.ts
@@ -91,9 +91,7 @@ describe("memo views", () => {
         filters: [{ factor: "displayTime", value: "2026-08-02" }],
         includePinned: false,
       }),
-    ).toBe(
-      `created_ts >= timestamp(${Math.floor(start.getTime() / 1000)}) && created_ts < timestamp(${Math.floor(end.getTime() / 1000)})`,
-    );
+    ).toBe(`created_ts >= timestamp(${Math.floor(start.getTime() / 1000)}) && created_ts < timestamp(${Math.floor(end.getTime() / 1000)})`);
   });
 
   it("ignores invalid display-time filter values", () => {
diff --git a/web/tests/near-viewport.test.tsx b/web/tests/near-viewport.test.tsx
index fa93dce1..7f9fbe95 100644
--- a/web/tests/near-viewport.test.tsx
+++ b/web/tests/near-viewport.test.tsx
@@ -9,6 +9,7 @@ class IntersectionObserverMock implements IntersectionObserver {
   readonly root = null;
   readonly rootMargin = "";
   readonly thresholds = [];
+  readonly scrollMargin = "";
 
   constructor(callback: IntersectionObserverCallback, options?: IntersectionObserverInit) {
     intersectionCallback = callback;
diff --git a/web/tests/placeholder-pool.test.ts b/web/tests/placeholder-pool.test.ts
index 54333688..04349492 100644
--- a/web/tests/placeholder-pool.test.ts
+++ b/web/tests/placeholder-pool.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
-import { TILE_SPRITES, pickTileSprite } from "@/components/Placeholder/tileSprites";
 import { DEFAULT_MESSAGES, type PlaceholderVariant } from "@/components/Placeholder/messages";
+import { pickTileSprite, TILE_SPRITES } from "@/components/Placeholder/tileSprites";
 
 describe("TILE_SPRITES integrity", () => {
   it("registers 32px by 32px sprite strips with animation-specific frame counts", () => {
diff --git a/web/tests/query-deduplication.test.tsx b/web/tests/query-deduplication.test.tsx
index 17928861..828a95ea 100644
--- a/web/tests/query-deduplication.test.tsx
+++ b/web/tests/query-deduplication.test.tsx
@@ -2,14 +2,10 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { renderHook, waitFor } from "@testing-library/react";
 import type { PropsWithChildren, ReactNode } from "react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import {
-  MentionResolutionProvider,
-  useResolvedMentionUsernames,
-  useResolvedUser,
-} from "@/components/MemoContent/MentionResolutionContext";
+import { MentionResolutionProvider, useResolvedMentionUsernames, useResolvedUser } from "@/components/MemoContent/MentionResolutionContext";
 import { useResolvedRelationMemos } from "@/components/MemoMetadata/Relation/useResolvedRelationMemos";
 import { memoKeys } from "@/hooks/useMemoQueries";
-import { useMemoViews, useUser, userKeys, useUsersByNames, useUsersByUsernames } from "@/hooks/useUserQueries";
+import { useMemoViews, userKeys, useUser, useUsersByNames, useUsersByUsernames } from "@/hooks/useUserQueries";
 import type { Memo } from "@/types/proto/api/v1/memo_service_pb";
 import type { User } from "@/types/proto/api/v1/user_service_pb";
 
diff --git a/web/tests/root-layout-global-editor.test.tsx b/web/tests/root-layout-global-editor.test.tsx
new file mode 100644
index 00000000..20ebe4e1
--- /dev/null
+++ b/web/tests/root-layout-global-editor.test.tsx
@@ -0,0 +1,80 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { MemoryRouter, Route, Routes, useLocation, useNavigate } from "react-router-dom";
+import { describe, expect, it, vi } from "vitest";
+import RootLayout from "@/layouts/RootLayout";
+
+vi.mock("@/components/AppSidebar", () => ({
+  default: () => <aside data-testid="desktop-sidebar">Desktop sidebar</aside>,
+  MobileAppHeader: () => <header data-testid="mobile-header">Mobile header</header>,
+  MobileAppSidebar: () => <aside data-testid="mobile-sidebar">Mobile sidebar</aside>,
+  QuickFindDialog: () => <div data-testid="quick-find">Quick Find</div>,
+  SIDEBAR_WIDTH_VAR: "--app-sidebar-width",
+  SidebarResizeHandle: () => <div data-testid="resize-handle" />,
+  useSidebarWidth: () => ({ width: 256, minWidth: 192, maxWidth: 384, setWidth: vi.fn() }),
+}));
+
+// GlobalMemoEditorContext is deliberately NOT mocked: the real provider calls
+// useAppSidebar(), which throws unless RootLayout nests it inside
+// AppSidebarProvider. That nesting is the only thing here that can break.
+vi.mock("@/contexts/AuthContext", () => ({
+  useAuth: () => ({ isUserSettingsInitialized: true }),
+}));
+
+vi.mock("@/contexts/InstanceContext", () => ({
+  useInstance: () => ({ profile: { instanceUrl: "https://example.com", demo: true } }),
+}));
+
+vi.mock("@/hooks/useCurrentUser", () => ({
+  default: () => ({ name: "users/test" }),
+}));
+
+vi.mock("@/hooks/useMediaQuery", () => ({
+  default: () => true,
+}));
+
+vi.mock("@/utils/i18n", () => ({
+  useTranslate: () => (key: string) => key,
+}));
+
+const SHELL_TEST_IDS = ["desktop-sidebar", "mobile-sidebar", "mobile-header", "quick-find"];
+
+const RouteState = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  return (
+    <div>
+      <output data-testid="route">{location.pathname}</output>
+      <button type="button" onClick={() => navigate("/inbox")}>
+        Open inbox
+      </button>
+    </div>
+  );
+};
+
+describe("RootLayout global editor shell", () => {
+  it("mounts the composer provider inside the sidebar provider and keeps the shell across routes", () => {
+    render(
+      <MemoryRouter initialEntries={["/attachments"]}>
+        <Routes>
+          <Route element={<RootLayout />}>
+            <Route path="attachments" element={<RouteState />} />
+            <Route path="inbox" element={<RouteState />} />
+          </Route>
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    for (const testId of SHELL_TEST_IDS) {
+      expect(screen.getByTestId(testId)).toBeInTheDocument();
+    }
+    // The composer stays closed until something calls openEditor.
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "Open inbox" }));
+
+    expect(screen.getByTestId("route")).toHaveTextContent("/inbox");
+    for (const testId of SHELL_TEST_IDS) {
+      expect(screen.getByTestId(testId)).toBeInTheDocument();
+    }
+  });
+});
diff --git a/web/tests/router-config.test.tsx b/web/tests/router-config.test.tsx
index 2c05a124..7f20f22b 100644
--- a/web/tests/router-config.test.tsx
+++ b/web/tests/router-config.test.tsx
@@ -1,13 +1,8 @@
 import { isValidElement } from "react";
 import type { RouteObject } from "react-router-dom";
 import { describe, expect, it } from "vitest";
-import { routeConfig, ROUTES } from "@/router";
-import {
-  RequireAuthRoute,
-  RequireFullInitializationRoute,
-  RequireGuestRoute,
-  RequireInstanceInitializationRoute,
-} from "@/router/guards";
+import { ROUTES, routeConfig } from "@/router";
+import { RequireAuthRoute, RequireFullInitializationRoute, RequireGuestRoute, RequireInstanceInitializationRoute } from "@/router/guards";
 
 // Walk the nested route config and find the first route with the given path,
 // starting from the provided roots. Returns undefined if nothing matches.
@@ -70,6 +65,10 @@ describe("router configuration", () => {
     expect(hasAncestorOfType(routeConfig, ROUTES.ABOUT, RequireInstanceInitializationRoute)).toBe(true);
   });
 
+  it("does not register a dedicated new memo route", () => {
+    expect(findByPath(routeConfig, "/new")).toBeUndefined();
+  });
+
   it("leaves memo feeds available for early queries", () => {
     for (const path of [ROUTES.EXPLORE, ROUTES.ARCHIVED, "memos/:uid", "memos/shares/:token", "u/:username"]) {
       expect(hasAncestorOfType(routeConfig, path, RequireFullInitializationRoute)).toBe(false);
diff --git a/web/tests/scroll-restoration.test.tsx b/web/tests/scroll-restoration.test.tsx
index 436a7c19..64fef46f 100644
--- a/web/tests/scroll-restoration.test.tsx
+++ b/web/tests/scroll-restoration.test.tsx
@@ -50,9 +50,9 @@ describe("scroll restoration", () => {
   });
 
   it("resets new routes and restores history entries", async () => {
-    const scrollTo = vi.spyOn(window, "scrollTo").mockImplementation((xOrOptions, y) => {
-      scrollY = typeof xOrOptions === "number" ? (y ?? 0) : (xOrOptions.top ?? 0);
-    });
+    const scrollTo = vi.spyOn(window, "scrollTo").mockImplementation(((xOrOptions?: number | ScrollToOptions, y?: number) => {
+      scrollY = typeof xOrOptions === "number" ? (y ?? 0) : (xOrOptions?.top ?? 0);
+    }) as typeof window.scrollTo);
     const router = createMemoryRouter(
       [
         {
diff --git a/web/tests/sidebar-row-grammar.test.tsx b/web/tests/sidebar-row-grammar.test.tsx
index e4313258..5f0916ad 100644
--- a/web/tests/sidebar-row-grammar.test.tsx
+++ b/web/tests/sidebar-row-grammar.test.tsx
@@ -1,4 +1,5 @@
 import { render, screen } from "@testing-library/react";
+import { HashIcon } from "lucide-react";
 import { describe, expect, it, vi } from "vitest";
 import SidebarRow, { SIDEBAR_ROW_BOX_CLASSES } from "@/components/AppSidebar/SidebarRow";
 import SidebarSection, { SIDEBAR_SECTION_CONTENT_CLASSES } from "@/components/AppSidebar/SidebarSection";
@@ -26,7 +27,7 @@ describe("sidebar row grammar", () => {
   });
 
   it("gives a nav row the shared row box", () => {
-    render(<SidebarRow icon={() => null} label="Tasks" />);
+    render(<SidebarRow icon={HashIcon} label="Tasks" />);
 
     expect(screen.getByRole("button", { name: "Tasks" })).toHaveClass(...boxClasses);
   });
diff --git a/web/tests/tag.test.ts b/web/tests/tag.test.ts
index 0c4baff6..38259dc5 100644
--- a/web/tests/tag.test.ts
+++ b/web/tests/tag.test.ts
@@ -1,12 +1,7 @@
 import { create, fromBinary, toBinary } from "@bufbuild/protobuf";
 import { describe, expect, it } from "vitest";
 import { findTagMetadata, mergeTagCounts } from "@/lib/tag";
-import {
-  type UserSetting_TagMetadata,
-  type UserSetting_TagsSetting,
-  UserSetting_TagsSettingSchema,
-  UserStatsSchema,
-} from "@/types/proto/api/v1/user_service_pb";
+import { UserSetting_TagMetadataSchema, UserSetting_TagsSettingSchema, UserStatsSchema } from "@/types/proto/api/v1/user_service_pb";
 
 describe("exact tag keys", () => {
   it("aggregates names that collide with Object prototype properties", () => {
@@ -51,13 +46,13 @@ describe("exact tag keys", () => {
     expect(Object.keys(created.tags).sort()).toEqual(["__proto__", "constructor", "normal"]);
     expect(Object.keys(decoded.tags).sort()).toEqual(["__proto__", "constructor", "normal"]);
     expect(decoded.tags.normal.blurContent).toBe(false);
-    expect(decoded.tags.constructor.blurContent).toBe(true);
+    expect(decoded.tags["constructor"].blurContent).toBe(true);
     expect(decoded.tags.__proto__.blurContent).toBe(true);
   });
 
   it("does not treat inherited properties as exact metadata", () => {
-    const metadata = { blurContent: true } as UserSetting_TagMetadata;
-    const setting = { tags: { ".*": metadata } } as UserSetting_TagsSetting;
+    const metadata = create(UserSetting_TagMetadataSchema, { blurContent: true });
+    const setting = create(UserSetting_TagsSettingSchema, { tags: { ".*": metadata } });
 
     expect(findTagMetadata("toString", setting)).toBe(metadata);
   });
diff --git a/web/tests/use-memo-init.test.tsx b/web/tests/use-memo-init.test.tsx
index 159dd82f..da71fc4c 100644
--- a/web/tests/use-memo-init.test.tsx
+++ b/web/tests/use-memo-init.test.tsx
@@ -42,11 +42,7 @@ describe("useMemoInit", () => {
       filename: "image.png",
       type: "image/png",
     });
-    cacheService.saveNow(
-      cacheService.key("users/steven", "restored-draft"),
-      "![image](/file/attachments/image-one)",
-      [attachment],
-    );
+    cacheService.saveNow(cacheService.key("users/steven", "restored-draft"), "![image](/file/attachments/image-one)", [attachment]);
 
     render(
       <EditorProvider>
diff --git a/web/tests/video-poster.test.tsx b/web/tests/video-poster.test.tsx
index 38ed6fa1..ac14c42e 100644
--- a/web/tests/video-poster.test.tsx
+++ b/web/tests/video-poster.test.tsx
@@ -10,6 +10,7 @@ describe("<VideoPoster>", () => {
       readonly root = null;
       readonly rootMargin = "200px 0px";
       readonly thresholds = [0];
+      readonly scrollMargin = "";
 
       constructor(callback: IntersectionObserverCallback) {
         intersectionCallback = callback;
@@ -84,13 +85,7 @@ describe("<VideoPoster>", () => {
   });
 
   it("uses an available poster without loading the video fallback", () => {
-    render(
-      <VideoPoster
-        sourceUrl="/file/attachments/video/video.mp4"
-        posterUrl="/file/attachments/video/poster.webp"
-        alt="clip.mp4"
-      />,
-    );
+    render(<VideoPoster sourceUrl="/file/attachments/video/video.mp4" posterUrl="/file/attachments/video/poster.webp" alt="clip.mp4" />);
 
     expect(screen.getByRole("img", { name: "clip.mp4" })).toHaveAttribute("src", "/file/attachments/video/poster.webp");
     expect(screen.queryByTestId("video-poster-fallback")).not.toBeInTheDocument();
diff --git a/web/tsconfig.json b/web/tsconfig.json
index 6dcf3c2c..45ed6daa 100644
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -20,5 +20,5 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["./src"]
+  "include": ["./src", "./tests"]
 }