ui: undo toast after trash / archive

A global ToastHost (mounted in the app shell) shows a transient toast with
an Undo action, driven by the ui store (showToast/dismiss/runAction, 5s
auto-dismiss). The notes store fires it centrally: trash → Undo restores;
archive → Undo unarchives — so it works from card, editor, and keyboard.

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

@@ -8,6 +8,7 @@ import { useUiStore } from "../stores/ui";
 import CommandPalette from "./CommandPalette.vue";
 import Icon from "./Icon.vue";
 import LabelsModal from "./LabelsModal.vue";
+import ToastHost from "./ToastHost.vue";
 import { NOTE_SWATCH_CLASSES, type NoteColor } from "../notes/colors";
 
 const route = useRoute();
@@ -261,6 +262,8 @@ async function signOut() {
 
     <CommandPalette v-if="paletteOpen" @close="paletteOpen = false" />
 
+    <ToastHost />
+
     <div
       v-if="showShortcuts"
       class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"

frontend/src/components/ToastHost.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { useUiStore } from "../stores/ui";
+
+const ui = useUiStore();
+</script>
+
+<template>
+  <Transition
+    enter-active-class="transition duration-150"
+    enter-from-class="translate-y-2 opacity-0"
+    leave-active-class="transition duration-150"
+    leave-to-class="translate-y-2 opacity-0"
+  >
+    <div
+      v-if="ui.toast"
+      class="fixed bottom-4 left-1/2 z-50 flex -translate-x-1/2 items-center gap-3 rounded-lg bg-neutral-900 px-4 py-2.5 text-sm text-white shadow-lg dark:bg-neutral-100 dark:text-neutral-900"
+      role="status"
+      aria-live="polite"
+    >
+      <span>{{ ui.toast.message }}</span>
+      <button
+        type="button"
+        class="font-semibold text-brand hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-brand"
+        @click="ui.runToastAction()"
+      >
+        {{ ui.toast.actionLabel }}
+      </button>
+      <button
+        type="button"
+        class="text-white/60 hover:text-white dark:text-neutral-900/60 dark:hover:text-neutral-900"
+        aria-label="Dismiss"
+        @click="ui.dismissToast()"
+      >
+        ×
+      </button>
+    </div>
+  </Transition>
+</template>