From 44a5466793e62cdf01ec10de7ba524e30ee75e97 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Thu, 23 Jul 2026 21:58:59 -0400
Subject: [PATCH] M9 S5 (frontend): shared BaseModal for the standard modals +
 BaseInput in Account
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- BaseModal.vue (new): the backdrop + dialog-panel shell (dimmed fixed overlay,
  bordered rounded panel, role=dialog, close on Escape + backdrop mousedown).
  Caller sizes/pads/shadows the panel via `panelClass`, picks start/center
  `align`, and sets an `ariaLabel` for header-less panels.
- LabelsModal, CommandPalette, and the AppShell keyboard-shortcuts overlay drop
  their hand-rolled backdrop+panel shells and slot their content into BaseModal
  (~12 lines of overlay boilerplate each → gone).
- NoteEditor deliberately keeps its own shell: its backdrop mousedown is
  drag-guarded and its Esc/⌘-Enter handling is bespoke (unsaved-edit safety),
  so folding it in would risk regressing the app's core editing surface (rule 28).
- AccountView's one device-name field now uses the shared BaseInput. SettingsView
  is intentionally NOT converted — its rows are a horizontal label+control pattern
  (checkbox/number/text, direct value mutation), a different shape than BaseInput's
  vertical form field.

Frontend-only; CI vue-tsc is the type/template gate (no local typecheck, rule 10).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FRgehjoz7Yv8LkUfADxACm
---
 frontend/src/components/AppShell.vue       | 18 ++++------
 frontend/src/components/BaseModal.vue      | 41 ++++++++++++++++++++++
 frontend/src/components/CommandPalette.vue | 17 ++++-----
 frontend/src/components/LabelsModal.vue    | 17 +++------
 frontend/src/views/AccountView.vue         | 20 +++++------
 5 files changed, 66 insertions(+), 47 deletions(-)
 create mode 100644 frontend/src/components/BaseModal.vue

diff --git a/frontend/src/components/AppShell.vue b/frontend/src/components/AppShell.vue
index 2c02403..fac73a3 100644
--- a/frontend/src/components/AppShell.vue
+++ b/frontend/src/components/AppShell.vue
@@ -7,6 +7,7 @@ import { useLabelsStore } from "../stores/labels";
 import { useSavedFiltersStore, type SavedFilter } from "../stores/savedFilters";
 import { useReminderStore } from "../stores/reminders";
 import { useUiStore } from "../stores/ui";
+import BaseModal from "./BaseModal.vue";
 import CommandPalette from "./CommandPalette.vue";
 import Icon from "./Icon.vue";
 import ImportNotes from "./ImportNotes.vue";
@@ -382,17 +383,13 @@ async function signOut() {
 
     <CommandPalette v-if="paletteOpen" @close="paletteOpen = false" />
 
-    <div
+    <BaseModal
       v-if="showShortcuts"
-      class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
-      @click.self="showShortcuts = false"
+      panel-class="w-full max-w-sm p-5 shadow-xl"
+      align="center"
+      aria-label="Keyboard shortcuts"
+      @close="showShortcuts = false"
     >
-      <div
-        class="w-full max-w-sm rounded-xl border border-neutral-200 bg-white p-5 shadow-xl dark:border-neutral-700 dark:bg-neutral-900"
-        role="dialog"
-        aria-modal="true"
-        aria-label="Keyboard shortcuts"
-      >
         <div class="mb-3 flex items-center justify-between">
           <h2 class="text-sm font-semibold">Keyboard shortcuts</h2>
           <button
@@ -417,7 +414,6 @@ async function signOut() {
             </dd>
           </div>
         </dl>
-      </div>
-    </div>
+  </BaseModal>
   </div>
 </template>
diff --git a/frontend/src/components/BaseModal.vue b/frontend/src/components/BaseModal.vue
new file mode 100644
index 0000000..edf031b
--- /dev/null
+++ b/frontend/src/components/BaseModal.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+// The backdrop + centered dialog panel every modal shares: a fixed dimmed overlay and
+// a bordered, rounded panel with role="dialog". Emits `close` on Escape (while focus is
+// inside the panel — matching the app's existing modals) and on a backdrop pointer-down
+// (mousedown outside the panel). The caller sizes/shadows/pads the panel via `panelClass`
+// and fills it (its own header + content) through the default slot.
+//
+// NoteEditor deliberately does NOT use this — its backdrop mousedown is drag-guarded and
+// its Escape/⌘-Enter handling is bespoke (unsaved-edit safety), so it keeps its own shell.
+withDefaults(
+  defineProps<{
+    /** Panel size / shadow / padding classes (structure — rounded/border/bg — is fixed). */
+    panelClass?: string;
+    /** Vertical placement of the panel within the overlay. */
+    align?: "start" | "center";
+    /** aria-label for the panel when it has no visible heading (e.g. the command palette). */
+    ariaLabel?: string;
+  }>(),
+  { panelClass: "w-full max-w-sm shadow-xl", align: "start" },
+);
+const emit = defineEmits<{ (e: "close"): void }>();
+</script>
+
+<template>
+  <div
+    class="fixed inset-0 z-50 flex justify-center overflow-y-auto bg-black/40 p-4"
+    :class="align === 'center' ? 'items-center' : 'items-start pt-[12vh]'"
+    @mousedown.self="emit('close')"
+  >
+    <div
+      class="rounded-xl border border-neutral-200 bg-white dark:border-neutral-700 dark:bg-neutral-900"
+      :class="panelClass"
+      role="dialog"
+      aria-modal="true"
+      :aria-label="ariaLabel"
+      @keydown.esc="emit('close')"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/components/CommandPalette.vue b/frontend/src/components/CommandPalette.vue
index a9408b8..707301f 100644
--- a/frontend/src/components/CommandPalette.vue
+++ b/frontend/src/components/CommandPalette.vue
@@ -4,6 +4,7 @@ import { useRouter } from "vue-router";
 import { useSessionStore } from "../stores/session";
 import { useTitlesStore } from "../stores/titles";
 import { useUiStore } from "../stores/ui";
+import BaseModal from "./BaseModal.vue";
 
 const emit = defineEmits<{ (e: "close"): void }>();
 
@@ -94,16 +95,11 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div
-    class="fixed inset-0 z-50 flex items-start justify-center bg-black/40 p-4 pt-[12vh]"
-    @mousedown.self="emit('close')"
+  <BaseModal
+    panel-class="w-full max-w-lg overflow-hidden shadow-2xl"
+    aria-label="Command palette"
+    @close="emit('close')"
   >
-    <div
-      class="w-full max-w-lg overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-2xl dark:border-neutral-700 dark:bg-neutral-900"
-      role="dialog"
-      aria-modal="true"
-      aria-label="Command palette"
-    >
       <input
         ref="input"
         v-model="query"
@@ -135,6 +131,5 @@ onMounted(async () => {
         </li>
       </ul>
       <p v-else class="px-4 py-6 text-center text-sm text-neutral-400">No matches</p>
-    </div>
-  </div>
+  </BaseModal>
 </template>
diff --git a/frontend/src/components/LabelsModal.vue b/frontend/src/components/LabelsModal.vue
index 4f96c96..f0a8a4b 100644
--- a/frontend/src/components/LabelsModal.vue
+++ b/frontend/src/components/LabelsModal.vue
@@ -2,6 +2,7 @@
 import { computed, ref } from "vue";
 import { useLabelsStore, type Label } from "../stores/labels";
 import { NOTE_COLOR_KEYS, NOTE_COLOR_LABELS, NOTE_SWATCH_CLASSES, type NoteColor } from "../notes/colors";
+import BaseModal from "./BaseModal.vue";
 import Icon from "./Icon.vue";
 
 const emit = defineEmits<{ (e: "close"): void }>();
@@ -54,17 +55,8 @@ async function doMerge(sourceId: string, targetId: string) {
 </script>
 
 <template>
-  <div
-    class="fixed inset-0 z-40 flex items-start justify-center overflow-y-auto bg-black/40 p-4 pt-[12vh]"
-    @mousedown.self="emit('close')"
-  >
-    <div
-      class="w-full max-w-sm rounded-xl border border-neutral-200 bg-white shadow-xl dark:border-neutral-700 dark:bg-neutral-900"
-      role="dialog"
-      aria-modal="true"
-      @keydown.esc="emit('close')"
-    >
-      <div class="flex items-center justify-between border-b border-neutral-100 px-4 py-3 dark:border-neutral-800">
+  <BaseModal panel-class="w-full max-w-sm shadow-xl" @close="emit('close')">
+    <div class="flex items-center justify-between border-b border-neutral-100 px-4 py-3 dark:border-neutral-800">
         <h2 class="text-sm font-semibold">Manage labels</h2>
         <button type="button" class="icon-btn" aria-label="Close" @click="emit('close')"><Icon name="close" /></button>
       </div>
@@ -161,6 +153,5 @@ async function doMerge(sourceId: string, targetId: string) {
           No labels yet — create one above.
         </p>
       </div>
-    </div>
-  </div>
+  </BaseModal>
 </template>
diff --git a/frontend/src/views/AccountView.vue b/frontend/src/views/AccountView.vue
index d421dc7..d078b45 100644
--- a/frontend/src/views/AccountView.vue
+++ b/frontend/src/views/AccountView.vue
@@ -3,6 +3,7 @@ import { onMounted, ref } from "vue";
 import { useDevicesStore } from "../stores/devices";
 import { useUiStore } from "../stores/ui";
 import BaseButton from "../components/BaseButton.vue";
+import BaseInput from "../components/BaseInput.vue";
 import Icon from "../components/Icon.vue";
 
 // Per-user (not admin) management of linked native clients — the Tauri desktop and
@@ -124,18 +125,13 @@ onMounted(load);
 
     <!-- Create a device token -->
     <form class="mb-8 flex items-end gap-3" @submit.prevent="link">
-      <div class="flex flex-1 flex-col gap-1">
-        <label for="device-name" class="text-sm font-medium text-neutral-800 dark:text-neutral-200"
-          >Link a new device</label
-        >
-        <input
-          id="device-name"
-          v-model="newName"
-          type="text"
-          placeholder="e.g. My laptop, Pixel phone"
-          class="rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-brand dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100"
-        />
-      </div>
+      <BaseInput
+        id="device-name"
+        v-model="newName"
+        label="Link a new device"
+        placeholder="e.g. My laptop, Pixel phone"
+        class="flex-1"
+      />
       <BaseButton type="submit" :loading="creating">Create token</BaseButton>
     </form>