M9 S5 (frontend): shared BaseModal for the standard modals + BaseInput in Account

- 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

@@ -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>