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