From 813a4e1050d7180409dad08bb45da9bd3eff9216 Mon Sep 17 00:00:00 2001
From: Irfan Fadilah <hello@irfanfadilah.com>
Date: Thu, 15 Oct 2026 10:59:29 +0700
Subject: [PATCH 1/9] Add Shared UI Components

---
 app/components/ui/ConfirmDialog.vue | 46 +++++++++++++++
 app/components/ui/Icon.vue          | 22 ++++++++
 app/components/ui/InlineConfirm.vue | 37 ++++++++++++
 app/components/ui/Modal.vue         | 88 +++++++++++++++++++++++++++++
 app/composables/useEscapeKey.ts     | 54 ++++++++++++------
 app/utils/download.ts               | 21 +++++++
 app/utils/focus.ts                  |  9 +++
 app/utils/icons.ts                  | 36 ++++++++++++
 app/utils/ui.ts                     |  6 ++
 9 files changed, 301 insertions(+), 18 deletions(-)
 create mode 100644 app/components/ui/ConfirmDialog.vue
 create mode 100644 app/components/ui/Icon.vue
 create mode 100644 app/components/ui/InlineConfirm.vue
 create mode 100644 app/components/ui/Modal.vue
 create mode 100644 app/utils/download.ts
 create mode 100644 app/utils/focus.ts
 create mode 100644 app/utils/icons.ts
 create mode 100644 app/utils/ui.ts

diff --git a/app/components/ui/ConfirmDialog.vue b/app/components/ui/ConfirmDialog.vue
new file mode 100644
index 0000000..7fca793
--- /dev/null
+++ b/app/components/ui/ConfirmDialog.vue
@@ -0,0 +1,46 @@
+<template>
+  <UiModal
+    role="alertdialog"
+    layer="top"
+    :labelledby="titleId"
+    backdrop-class="bg-black/50"
+    panel-class="bg-nord-mist dark:bg-nord-obsidian rounded-2xl p-6 w-full max-w-sm shadow-2xl"
+    @close="emit('cancel')"
+  >
+    <h2 :id="titleId" class="text-base font-semibold text-nord-storm dark:text-nord-snow mb-2">{{ title }}</h2>
+    <p class="text-sm text-nord-slate dark:text-nord-frost mb-6">
+      <slot />
+    </p>
+    <div class="flex gap-3 justify-end">
+      <button
+        type="button"
+        data-autofocus
+        class="px-4 py-2 text-sm text-nord-slate dark:text-nord-ice hover:bg-nord-ice dark:hover:bg-nord-graphite rounded-lg transition-colors"
+        @click="emit('cancel')"
+      >
+        Cancel
+      </button>
+      <button
+        type="button"
+        class="px-4 py-2 text-sm font-medium bg-nord-ember text-white rounded-lg hover:bg-nord-ember/80 transition-colors disabled:opacity-60"
+        :disabled="busy"
+        @click="emit('confirm')"
+      >
+        {{ busy ? 'Deleting…' : confirmLabel }}
+      </button>
+    </div>
+  </UiModal>
+</template>
+
+<script setup lang="ts">
+// Destructive-action confirmation. Focus starts on Cancel so Enter never deletes by accident.
+defineProps<{
+  title: string
+  confirmLabel: string
+  busy?: boolean
+}>()
+
+const emit = defineEmits<{ confirm: []; cancel: [] }>()
+
+const titleId = useId()
+</script>
diff --git a/app/components/ui/Icon.vue b/app/components/ui/Icon.vue
new file mode 100644
index 0000000..c17d2ad
--- /dev/null
+++ b/app/components/ui/Icon.vue
@@ -0,0 +1,22 @@
+<template>
+  <svg
+    viewBox="0 0 24 24"
+    :fill="icon.fill ? 'currentColor' : 'none'"
+    :stroke="icon.fill ? undefined : 'currentColor'"
+    :stroke-width="icon.fill ? undefined : (icon.strokeWidth ?? 1.5)"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <path v-for="(d, i) in icon.paths" :key="i" :d="d" />
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { ICONS, type IconName } from '~/utils/icons'
+
+const props = defineProps<{ name: IconName }>()
+
+const icon = computed<{ paths: string[]; fill?: boolean; strokeWidth?: number }>(() => ICONS[props.name])
+</script>
diff --git a/app/components/ui/InlineConfirm.vue b/app/components/ui/InlineConfirm.vue
new file mode 100644
index 0000000..4a4be72
--- /dev/null
+++ b/app/components/ui/InlineConfirm.vue
@@ -0,0 +1,37 @@
+<template>
+  <div
+    role="alertdialog"
+    :aria-label="message"
+    class="absolute inset-0 bg-black/70 flex flex-col items-center justify-center gap-2 rounded"
+    @click.stop
+  >
+    <p class="text-white text-xs font-medium">{{ message }}</p>
+    <div class="flex gap-2">
+      <button
+        ref="cancelButton"
+        type="button"
+        class="px-3 py-1 text-xs bg-nord-slate text-nord-snow rounded-full hover:bg-nord-graphite transition-colors"
+        @click.stop="emit('cancel')"
+      >
+        Cancel
+      </button>
+      <button
+        type="button"
+        class="px-3 py-1 text-xs bg-nord-ember text-white rounded-full hover:bg-nord-ember/80 transition-colors"
+        @click.stop="emit('confirm')"
+      >
+        {{ confirmLabel }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// Small confirmation overlay shown on top of an image tile.
+defineProps<{ message: string; confirmLabel: string }>()
+const emit = defineEmits<{ confirm: []; cancel: [] }>()
+
+const cancelButton = ref<HTMLButtonElement>()
+onMounted(() => cancelButton.value?.focus())
+useEscapeKey(() => emit('cancel'))
+</script>
diff --git a/app/components/ui/Modal.vue b/app/components/ui/Modal.vue
new file mode 100644
index 0000000..489b1b5
--- /dev/null
+++ b/app/components/ui/Modal.vue
@@ -0,0 +1,88 @@
+<template>
+  <Teleport to="body">
+    <div
+      class="fixed left-0 top-0 modal-viewport flex items-center justify-center px-4"
+      :class="[backdropClass, layer === 'top' ? 'z-[300]' : 'z-50']"
+      @mousedown.self="emit('close')"
+    >
+      <div
+        ref="panel"
+        :role="role"
+        aria-modal="true"
+        :aria-label="label"
+        :aria-labelledby="labelledby"
+        tabindex="-1"
+        class="outline-none"
+        :class="panelClass"
+        @keydown.tab="trapFocus"
+      >
+        <slot />
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+// Accessible modal shell: dialog semantics, focus trap and restore, scroll lock and Escape-to-close.
+withDefaults(defineProps<{
+  label?: string
+  labelledby?: string
+  role?: 'dialog' | 'alertdialog'
+  panelClass?: string
+  backdropClass?: string
+  /** 'top' renders above other modals and the lightbox (used by confirm dialogs) */
+  layer?: 'base' | 'top'
+}>(), {
+  label: undefined,
+  labelledby: undefined,
+  panelClass: '',
+  role: 'dialog',
+  backdropClass: 'bg-black/40',
+  layer: 'base',
+})
+
+const emit = defineEmits<{ close: [] }>()
+
+const panel = ref<HTMLElement>()
+let previouslyFocused: HTMLElement | null = null
+
+useBodyScrollLock(true)
+useEscapeKey(() => emit('close'))
+
+const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
+
+const focusableElements = () =>
+  Array.from(panel.value?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? [])
+    .filter((el) => el.offsetParent !== null || el === document.activeElement)
+
+const trapFocus = (e: KeyboardEvent) => {
+  const elements = focusableElements()
+  if (elements.length === 0) {
+    e.preventDefault()
+    return
+  }
+  const first = elements[0]!
+  const last = elements[elements.length - 1]!
+  if (e.shiftKey && (document.activeElement === first || document.activeElement === panel.value)) {
+    e.preventDefault()
+    last.focus()
+  } else if (!e.shiftKey && document.activeElement === last) {
+    e.preventDefault()
+    first.focus()
+  }
+}
+
+onMounted(() => {
+  previouslyFocused = document.activeElement as HTMLElement | null
+  // Children may already have focused something (e.g. the title of a new note)
+  nextTick(() => {
+    if (!panel.value || panel.value.contains(document.activeElement)) return
+    const preferred = panel.value.querySelector<HTMLElement>('[data-autofocus]')
+    ;(preferred ?? panel.value).focus()
+  })
+})
+
+// The panel is already detached here, so focus that was inside it has fallen back to <body>
+onUnmounted(() => restoreFocus(previouslyFocused))
+
+</script>
diff --git a/app/composables/useEscapeKey.ts b/app/composables/useEscapeKey.ts
index f400e1b..cca42e5 100644
--- a/app/composables/useEscapeKey.ts
+++ b/app/composables/useEscapeKey.ts
@@ -1,22 +1,40 @@
-import { useLightbox } from './useLightbox'
+import type { MaybeRefOrGetter } from 'vue'
 
-/**
- * Calls `fn` when the Escape key is pressed.
- * Listener is automatically removed when the component unmounts.
- *
- * If the lightbox is open, do not invoke the callback so the lightbox
- * remains the top-most handler for Escape.
- */
-export function useEscapeKey(fn: () => void) {
-  const { lightboxOpen } = useLightbox()
+// Escape closes only the top-most open layer (modal, menu, lightbox, confirm…), never
+// everything at once. Layers register while active; the most recently activated one wins.
+type Handler = () => void
 
-  const handler = (e: KeyboardEvent) => {
-    if (e.key === 'Escape') {
-      // Let the lightbox handle Escape when it's open.
-      if (lightboxOpen && lightboxOpen.value) return
-      fn()
-    }
+const stack: Handler[] = []
+let listening = false
+
+function onKeydown(e: KeyboardEvent) {
+  // Inputs that handle Escape themselves (e.g. inline rename) call preventDefault to claim it
+  if (e.key !== 'Escape' || e.defaultPrevented || e.isComposing) return
+  const top = stack[stack.length - 1]
+  if (!top) return
+  e.preventDefault()
+  top()
+}
+
+/** Run `fn` on Escape while `active` is true and this is the top-most active layer. */
+export function useEscapeKey(fn: Handler, active: MaybeRefOrGetter<boolean> = true) {
+  if (!import.meta.client) return
+  const handler: Handler = () => fn()
+
+  const remove = () => {
+    const index = stack.indexOf(handler)
+    if (index !== -1) stack.splice(index, 1)
   }
-  onMounted(() => document.addEventListener('keydown', handler))
-  onUnmounted(() => document.removeEventListener('keydown', handler))
+
+  onMounted(() => {
+    if (!listening) {
+      document.addEventListener('keydown', onKeydown)
+      listening = true
+    }
+    watch(() => toValue(active), (isActive) => {
+      remove()
+      if (isActive) stack.push(handler)
+    }, { immediate: true })
+  })
+  onUnmounted(remove)
 }
diff --git a/app/utils/download.ts b/app/utils/download.ts
new file mode 100644
index 0000000..38792e3
--- /dev/null
+++ b/app/utils/download.ts
@@ -0,0 +1,21 @@
+const isStandalonePwa = () =>
+  window.matchMedia('(display-mode: standalone)').matches ||
+  (window.navigator as Navigator & { standalone?: boolean }).standalone === true
+
+/**
+ * Download a file from the API. Installed PWAs have no tab to open, so they get a
+ * download link instead of a new window.
+ */
+export function downloadFile(url: string, filename: string) {
+  if (isStandalonePwa()) {
+    const link = document.createElement('a')
+    link.href = url
+    link.download = filename
+    link.rel = 'noopener'
+    document.body.appendChild(link)
+    link.click()
+    link.remove()
+    return
+  }
+  window.open(url, '_blank', 'noopener')
+}
diff --git a/app/utils/focus.ts b/app/utils/focus.ts
new file mode 100644
index 0000000..3fc3e6c
--- /dev/null
+++ b/app/utils/focus.ts
@@ -0,0 +1,9 @@
+/**
+ * Give focus back to `target` after a dialog or menu closes, unless the user has already moved
+ * it elsewhere (closing can finish late, e.g. after a save) — then leave it where it is.
+ */
+export function restoreFocus(target: HTMLElement | null, closingContainer?: HTMLElement | null) {
+  const active = document.activeElement
+  const focusWasLost = !active || active === document.body || !!closingContainer?.contains(active)
+  if (focusWasLost && target?.isConnected) target.focus()
+}
diff --git a/app/utils/icons.ts b/app/utils/icons.ts
new file mode 100644
index 0000000..78ee980
--- /dev/null
+++ b/app/utils/icons.ts
@@ -0,0 +1,36 @@
+// Outline icons (24×24, Heroicons style) used across the app. Rendered by <UiIcon name="…" />.
+
+interface IconDefinition {
+  paths: string[]
+  /** Filled icons use `fill`; everything else is stroked */
+  fill?: boolean
+  strokeWidth?: number
+}
+
+const TRASH = 'M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0'
+
+export const ICONS = {
+  'archive': { paths: ['M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z'] },
+  'arrow-up': { paths: ['M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18'], strokeWidth: 2 },
+  'backspace': { paths: ['M12 9l3 3-3 3m3-3H9m-6 0l6.75-7.5A1.5 1.5 0 0110.86 4.5h9.64a1.5 1.5 0 011.5 1.5v12a1.5 1.5 0 01-1.5 1.5h-9.64a1.5 1.5 0 01-1.11-.5L3 12z'], strokeWidth: 1.8 },
+  'check': { paths: ['M4.5 12.75l6 6 9-13.5'] },
+  'checklist': { paths: ['M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0118 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3l1.5 1.5 3-3.75'] },
+  'chevron-left': { paths: ['M15.75 19.5 8.25 12l7.5-7.5'] },
+  'chevron-right': { paths: ['M8.25 4.5l7.5 7.5-7.5 7.5'] },
+  'clipboard': { paths: ['M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184'] },
+  'document': { paths: ['M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z'] },
+  'download': { paths: ['M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3'] },
+  'drag-handle': { paths: ['M9 4a1 1 0 100 2 1 1 0 000-2zm6 0a1 1 0 100 2 1 1 0 000-2zM9 10a1 1 0 100 2 1 1 0 000-2zm6 0a1 1 0 100 2 1 1 0 000-2zM9 16a1 1 0 100 2 1 1 0 000-2zm6 0a1 1 0 100 2 1 1 0 000-2z'], fill: true },
+  'menu': { paths: ['M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5'] },
+  'paperclip': { paths: ['M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 002.112 2.13'] },
+  'pencil': { paths: ['M16.862 4.487a2.25 2.25 0 013.182 3.182L7.5 20.213l-4.5 1.125 1.125-4.5L16.862 4.487z'] },
+  'pencil-square': { paths: ['M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10'] },
+  'restore': { paths: ['M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.85l3.181 3.182m0-4.991v4.99'] },
+  'search': { paths: ['M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z'] },
+  'tag': { paths: ['M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z', 'M6 6h.008v.008H6V6z'] },
+  'trash': { paths: [TRASH] },
+  'warning': { paths: ['M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z'] },
+  'x-mark': { paths: ['M6 18 18 6M6 6l12 12'] },
+} satisfies Record<string, IconDefinition>
+
+export type IconName = keyof typeof ICONS
diff --git a/app/utils/ui.ts b/app/utils/ui.ts
new file mode 100644
index 0000000..e2ebc72
--- /dev/null
+++ b/app/utils/ui.ts
@@ -0,0 +1,6 @@
+/** Matches Tailwind's `md` breakpoint: below this the sidebar becomes an overlay. */
+export const MOBILE_BREAKPOINT_PX = 768
+
+export const SNACKBAR_DURATION_MS = 3500
+
+export const isMobileViewport = () => typeof window !== 'undefined' && window.innerWidth < MOBILE_BREAKPOINT_PX

From 8c5df2a4ccb234c96a12743e1b0bf3a342e91b66 Mon Sep 17 00:00:00 2001
From: Irfan Fadilah <hello@irfanfadilah.com>
Date: Thu, 15 Oct 2026 10:59:29 +0700
Subject: [PATCH 2/9] Split Notes Composable

---
 app/composables/useEventSource.ts      | 105 ++++-----
 app/composables/useLabels.ts           |  42 ++--
 app/composables/useNoteAttachments.ts  |  86 +++++++
 app/composables/useNoteMutations.ts    |  84 +++++++
 app/composables/useNoteUploadState.ts  |  11 +-
 app/composables/useNotes.ts            | 312 -------------------------
 app/composables/useNotesList.ts        | 155 ++++++++++++
 app/composables/useNotesPage.ts        |  29 ---
 app/composables/useRealtimeResource.ts |  32 +++
 9 files changed, 434 insertions(+), 422 deletions(-)
 create mode 100644 app/composables/useNoteAttachments.ts
 create mode 100644 app/composables/useNoteMutations.ts
 delete mode 100644 app/composables/useNotes.ts
 create mode 100644 app/composables/useNotesList.ts
 delete mode 100644 app/composables/useNotesPage.ts
 create mode 100644 app/composables/useRealtimeResource.ts

diff --git a/app/composables/useEventSource.ts b/app/composables/useEventSource.ts
index 2461c1c..c4457b2 100644
--- a/app/composables/useEventSource.ts
+++ b/app/composables/useEventSource.ts
@@ -1,42 +1,28 @@
-type RealtimeResource = 'notes' | 'labels' | 'all'
-type RealtimeEvent = { resource: RealtimeResource; data: unknown; type: string }
-type Listener = (event: RealtimeEvent) => void
+import type { RealtimeEvent } from '#shared/types/realtime'
+
+/** Server events plus the client-side signal sent after the stream reconnects. */
+export type ClientRealtimeEvent = RealtimeEvent | { type: 'reconnected'; data: { resource: 'all' } }
+type Listener = (event: ClientRealtimeEvent) => void
 
 const listeners = new Set<Listener>()
 let source: EventSource | null = null
 let retryTimer: ReturnType<typeof setTimeout> | null = null
 let retryAttempt = 0
 let started = false
-let stopped = false
 let connectedBefore = false
 
 const MAX_RETRY_DELAY = 30_000
 
-function resourceFor(type: string, data: unknown): RealtimeResource {
-  const eventType = String(type).toLowerCase()
-  if (eventType.startsWith('label.')) return 'labels'
-  if (eventType.startsWith('note.') || eventType.startsWith('attachment.')) return 'notes'
-  const record = typeof data === 'object' && data !== null ? data as Record<string, unknown> : {}
-  const value = record.resource ?? record.entity ?? record.scope
-  if (value === 'labels') return 'labels'
-  if (value === 'notes') return 'notes'
-  return 'all'
-}
-
-function dispatch(type: string, raw: string) {
-  let data: unknown = raw
+function dispatch(raw: string) {
+  let parsed: unknown
   try {
-    data = JSON.parse(raw)
+    parsed = JSON.parse(raw)
   } catch {
-    // Some SSE implementations use an empty heartbeat or a plain event name.
+    return
   }
-  const eventType = typeof data === 'object' && data !== null && 'type' in data
-    ? String(data.type)
-    : type
-  const eventData = typeof data === 'object' && data !== null && 'type' in data
-    ? Object.fromEntries(Object.entries(data).filter(([key]) => key !== 'type'))
-    : data
-  const event = { resource: resourceFor(eventType, eventData), data: eventData, type: eventType }
+  if (typeof parsed !== 'object' || parsed === null || !('type' in parsed)) return
+  const { type, ...data } = parsed as { type: string } & Record<string, unknown>
+  const event = { type, data } as ClientRealtimeEvent
   listeners.forEach((listener) => listener(event))
 }
 
@@ -45,8 +31,13 @@ function closeSource() {
   source = null
 }
 
+function cancelRetry() {
+  if (retryTimer) clearTimeout(retryTimer)
+  retryTimer = null
+}
+
 function scheduleReconnect() {
-  if (stopped || retryTimer || !navigator.onLine || document.visibilityState === 'hidden') return
+  if (!started || retryTimer || !navigator.onLine || document.visibilityState === 'hidden') return
   const delay = Math.min(MAX_RETRY_DELAY, 500 * 2 ** retryAttempt++) + Math.random() * 250
   retryTimer = setTimeout(() => {
     retryTimer = null
@@ -55,52 +46,56 @@ function scheduleReconnect() {
 }
 
 function connect() {
-  if (stopped || source || !navigator.onLine || document.visibilityState === 'hidden') return
-  closeSource()
+  if (!started || source || !navigator.onLine || document.visibilityState === 'hidden') return
   source = new EventSource('/api/events')
   source.onopen = () => {
     retryAttempt = 0
-    if (connectedBefore) {
-      dispatch('reconnected', JSON.stringify({ resource: 'all' }))
-    }
+    if (connectedBefore) dispatch(JSON.stringify({ type: 'reconnected', resource: 'all' }))
     connectedBefore = true
   }
-  source.onmessage = (event) => dispatch(event.type, event.data)
+  source.onmessage = (event) => dispatch(event.data)
   source.onerror = () => {
     closeSource()
     scheduleReconnect()
   }
+}
+
+function onOffline() {
+  cancelRetry()
+  closeSource()
+}
 
-  // Supporting named events keeps the client compatible with both generic
-  // invalidations and resource-specific SSE events.
-  for (const type of ['invalidate', 'notes', 'labels', 'notes.invalidate', 'labels.invalidate']) {
-    source.addEventListener(type, (event) => dispatch(type, (event as MessageEvent).data))
+function onVisibilityChange() {
+  if (document.visibilityState === 'visible') {
+    retryAttempt = 0
+    connect()
+  } else {
+    cancelRetry()
+    closeSource()
   }
 }
 
 function start() {
   if (!import.meta.client || started) return
   started = true
-  stopped = false
   window.addEventListener('online', connect)
-  window.addEventListener('offline', () => {
-    if (retryTimer) clearTimeout(retryTimer)
-    retryTimer = null
-    closeSource()
-  })
-  document.addEventListener('visibilitychange', () => {
-    if (document.visibilityState === 'visible') {
-      retryAttempt = 0
-      connect()
-    } else {
-      if (retryTimer) clearTimeout(retryTimer)
-      retryTimer = null
-      closeSource()
-    }
-  })
+  window.addEventListener('offline', onOffline)
+  document.addEventListener('visibilitychange', onVisibilityChange)
   connect()
 }
 
+/** Close the stream and remove listeners, e.g. when leaving the signed-in layout. */
+function stop() {
+  if (!started) return
+  started = false
+  connectedBefore = false
+  cancelRetry()
+  closeSource()
+  window.removeEventListener('online', connect)
+  window.removeEventListener('offline', onOffline)
+  document.removeEventListener('visibilitychange', onVisibilityChange)
+}
+
 export const useEventSource = () => {
   const subscribe = (listener: Listener) => {
     if (!import.meta.client) return () => {}
@@ -108,7 +103,5 @@ export const useEventSource = () => {
     return () => listeners.delete(listener)
   }
 
-  const startSource = () => start()
-
-  return { start: startSource, subscribe }
+  return { start, stop, subscribe }
 }
diff --git a/app/composables/useLabels.ts b/app/composables/useLabels.ts
index da28d6c..c66a573 100644
--- a/app/composables/useLabels.ts
+++ b/app/composables/useLabels.ts
@@ -1,38 +1,36 @@
 import type { Label, Note } from '#shared/types/notes'
+import type { ClientRealtimeEvent } from './useEventSource'
 
-// See noteUrl in useNotes for why this is typed as a plain string
+// See noteUrl in useNotesList for why this is typed as a plain string
 const labelUrl = (id: string): string => `/api/labels/${id}`
 
-export const useLabels = () => {
+const labelEventKeys = (event: ClientRealtimeEvent): string[] => {
+  if (event.data.resource !== 'labels') return []
+  const labelId = 'label' in event.data ? event.data.label.id : 'labelId' in event.data ? event.data.labelId : undefined
+  return labelId ? [`${event.type}:${labelId}`, event.type] : [event.type]
+}
+
+/** Pass `realtime: true` once (in the layout) to keep labels in sync with other devices. */
+export const useLabels = (options: { realtime?: boolean } = {}) => {
   // useState ensures SSR state is serialized in the Nuxt payload and
   // transferred to the client, preventing hydration mismatches.
   const labels = useState<Label[]>('labels', () => [])
-
   const apiFetch = useNuxtApp().$api
-  const { subscribe } = useEventSource()
-  const realtimeBound = useState<boolean>('labels-realtime-bound', () => false)
-  const { consume: consumeLocalLabelEvent, run: runLocalLabelMutation } =
-    useLocalRealtimeEvents('local-label-events')
 
   const fetchLabels = async () => {
     labels.value = await apiFetch<Label[]>('/api/labels')
   }
 
-  if (import.meta.client && !realtimeBound.value) {
-    realtimeBound.value = true
-    subscribe((event) => {
-      if (event.resource === 'labels' || event.type === 'reconnected') {
-        const data = event.data as { label?: { id?: string }; labelId?: string } | undefined
-        const labelId = data?.label?.id ?? data?.labelId
-        const eventKey = labelId ? `${event.type}:${labelId}` : event.type
-        if (
-          event.type !== 'reconnected' &&
-          (consumeLocalLabelEvent(eventKey) || (labelId ? consumeLocalLabelEvent(event.type) : false))
-        ) return
-        fetchLabels().catch((error) => console.warn('[realtime] Failed to refresh labels:', error))
-      }
-    })
-  }
+  const { runLocal: runLocalLabelMutation } = useRealtimeResource({
+    localEventsKey: 'local-label-events',
+    eventKeys: labelEventKeys,
+    onEvent: options.realtime
+      ? (event) => {
+          if (event.data.resource !== 'labels' && event.type !== 'reconnected') return
+          fetchLabels().catch((error) => console.warn('[realtime] Failed to refresh labels:', error))
+        }
+      : undefined,
+  })
 
   /** Resolves to the new label, or undefined on failure (an error snackbar is shown). */
   const createLabel = async (name: string) => {
diff --git a/app/composables/useNoteAttachments.ts b/app/composables/useNoteAttachments.ts
new file mode 100644
index 0000000..b07a5fd
--- /dev/null
+++ b/app/composables/useNoteAttachments.ts
@@ -0,0 +1,86 @@
+import type { Attachment } from '#shared/types/notes'
+
+const attachmentsUrl = (noteId: string): string => `/api/notes/${noteId}/attachments`
+const attachmentUrl = (noteId: string, attId: string): string => `/api/notes/${noteId}/attachments/${attId}`
+
+/** Give files without a usable extension (pasted images are often just "blob") one from their type. */
+function fileWithExt(f: File): [File, string] {
+  const raw = f.name || 'file'
+  const dotIdx = raw.lastIndexOf('.')
+  const ext = dotIdx > -1 ? raw.slice(dotIdx).toLowerCase() : ''
+  const mimeExt = MIME_TO_EXT[f.type]
+  if (mimeExt && (!ext || ext === '.bin' || raw === 'blob')) {
+    const base = ext ? raw.slice(0, dotIdx) : raw
+    return [f, `${base || 'file'}${mimeExt}`]
+  }
+  return [f, raw]
+}
+
+export const useNoteAttachments = () => {
+  const apiFetch = useNuxtApp().$api
+  const { updateLoadedNote } = useNotesState()
+  const { startUpload, endUpload } = useNoteUploadState()
+
+  /** Upload files one request at a time (keeps each under the server's size limit). Failures show a snackbar. */
+  const uploadAttachment = async (noteId: string, files: File[]) => {
+    const uploaded: Attachment[] = []
+    startUpload(noteId)
+    try {
+      for (const f of files) {
+        const form = new FormData()
+        const [file, name] = fileWithExt(f)
+        form.append('files', file, name)
+        const result = await withErrorSnackbar('Upload Failed', () =>
+          apiFetch<Attachment[]>(attachmentsUrl(noteId), { method: 'POST', body: form })
+        )
+        if (result) uploaded.push(...result)
+      }
+    } finally {
+      endUpload(noteId)
+    }
+    updateLoadedNote(noteId, (note) => ({ ...note, attachments: [...note.attachments, ...uploaded] }))
+    return uploaded
+  }
+
+  const deleteAttachment = async (noteId: string, attId: string) => {
+    const ok = await withErrorSnackbar('Failed to Delete Attachment', async () => {
+      await apiFetch(attachmentUrl(noteId, attId), { method: 'DELETE' })
+      return true
+    })
+    if (!ok) return false
+    updateLoadedNote(noteId, (note) => ({ ...note, attachments: note.attachments.filter((a) => a.id !== attId) }))
+    return true
+  }
+
+  /** Resolves to the renamed attachment, or undefined on failure (an error snackbar is shown). */
+  const renameAttachment = async (noteId: string, attId: string, filename: string) => {
+    const attachment = await withErrorSnackbar('Rename Failed', () =>
+      apiFetch<Attachment>(attachmentUrl(noteId, attId), { method: 'PUT', body: { filename } })
+    )
+    if (!attachment) return undefined
+    updateLoadedNote(noteId, (note) => ({
+      ...note,
+      attachments: note.attachments.map((a) => (a.id === attId ? attachment : a)),
+    }))
+    return attachment
+  }
+
+  const reorderAttachments = async (noteId: string, ids: string[]) => {
+    const ok = await withErrorSnackbar('Reorder Failed', async () => {
+      await apiFetch(`${attachmentsUrl(noteId)}/reorder`, { method: 'PUT', body: { ids } })
+      return true
+    })
+    if (!ok) return false
+    updateLoadedNote(noteId, (note) => {
+      const byId = new Map(note.attachments.map((a) => [a.id, a]))
+      const attachments = ids.flatMap((id, position) => {
+        const att = byId.get(id)
+        return att ? [{ ...att, position }] : []
+      })
+      return { ...note, attachments }
+    })
+    return true
+  }
+
+  return { uploadAttachment, deleteAttachment, renameAttachment, reorderAttachments }
+}
diff --git a/app/composables/useNoteMutations.ts b/app/composables/useNoteMutations.ts
new file mode 100644
index 0000000..2cfab63
--- /dev/null
+++ b/app/composables/useNoteMutations.ts
@@ -0,0 +1,84 @@
+import type { ChecklistItem, Note, NoteType } from '#shared/types/notes'
+
+export interface NotePayload {
+  type?: NoteType
+  title?: string
+  content?: string
+  labelIds?: string[]
+  checklistItems?: ChecklistItem[]
+}
+
+export const useNoteMutations = () => {
+  const apiFetch = useNuxtApp().$api
+  const { notes, updateLoadedNote, removeLoadedNote } = useNotesState()
+  const { uploadAttachment } = useNoteAttachments()
+  const { runLocal } = useRealtimeResource({ localEventsKey: 'local-note-events', eventKeys: noteEventKeys })
+  const snackbar = useSnackbar()
+
+  /** Create a note, then upload its files in the background. Throws on failure so the editor can stay open. */
+  const createNote = async (payload: NotePayload, files: File[] = []) => {
+    const note = await apiFetch<Note>('/api/notes', { method: 'POST', body: payload })
+    notes.value.unshift(note)
+    if (files.length) void uploadAttachment(note.id, files)
+    return note
+  }
+
+  /** Throws on failure so the editor can keep the user's changes. */
+  const updateNote = async (id: string, payload: NotePayload) => {
+    const updated = await runLocal(`note.updated:${id}`, () =>
+      apiFetch<Note>(noteUrl(id), { method: 'PUT', body: payload })
+    )
+    const previous = notes.value.find((n) => n.id === id)
+    const movedOut = previous && (updated.isArchived || updated.isTrashed) &&
+      (previous.isArchived !== updated.isArchived || previous.isTrashed !== updated.isTrashed)
+    if (movedOut) removeLoadedNote(id)
+    else updateLoadedNote(id, () => updated)
+    return updated
+  }
+
+  /** Change a note's archive/trash status and drop it from the current list. Resolves false on failure. */
+  const setNoteStatus = async (
+    id: string,
+    patch: { isArchived?: boolean; isTrashed?: boolean },
+    successMessage: string,
+    errorMessage: string,
+  ) => {
+    const ok = await withErrorSnackbar(errorMessage, async () => {
+      await runLocal(`note.updated:${id}`, () => apiFetch(noteUrl(id), { method: 'PUT', body: patch }))
+      return true
+    })
+    if (!ok) return false
+    removeLoadedNote(id)
+    snackbar.show(successMessage)
+    return true
+  }
+
+  const trashNote = (id: string) => setNoteStatus(id, { isTrashed: true }, 'Note Moved to Trash', 'Failed to Move Note to Trash')
+  const restoreNote = (id: string) => setNoteStatus(id, { isTrashed: false }, 'Note Restored', 'Failed to Restore Note')
+  const archiveNote = (id: string) => setNoteStatus(id, { isArchived: true }, 'Note Archived', 'Failed to Archive Note')
+  const unarchiveNote = (id: string) => setNoteStatus(id, { isArchived: false }, 'Note Unarchived', 'Failed to Unarchive Note')
+
+  const deleteNote = async (id: string) => {
+    const ok = await withErrorSnackbar('Failed to Delete Note', async () => {
+      await runLocal(`note.deleted:${id}`, () => apiFetch(noteUrl(id), { method: 'DELETE' }))
+      return true
+    })
+    if (!ok) return false
+    removeLoadedNote(id)
+    snackbar.show('Note Permanently Deleted')
+    return true
+  }
+
+  const emptyTrash = async () => {
+    const ok = await withErrorSnackbar('Failed to Empty Trash', async () => {
+      await apiFetch('/api/notes/trash', { method: 'DELETE' })
+      return true
+    })
+    if (!ok) return false
+    notes.value = notes.value.filter((n) => !n.isTrashed)
+    snackbar.show('All Trash Permanently Deleted')
+    return true
+  }
+
+  return { createNote, updateNote, trashNote, restoreNote, archiveNote, unarchiveNote, deleteNote, emptyTrash }
+}
diff --git a/app/composables/useNoteUploadState.ts b/app/composables/useNoteUploadState.ts
index da92063..7ae19b4 100644
--- a/app/composables/useNoteUploadState.ts
+++ b/app/composables/useNoteUploadState.ts
@@ -1,8 +1,13 @@
-const _uploading = reactive<Record<string, boolean>>({})
+// Number of uploads in flight per note (a note can have several concurrent uploads)
+const _uploading = reactive<Record<string, number>>({})
 
 export const useNoteUploadState = () => {
-  const startUpload = (noteId: string) => { _uploading[noteId] = true }
-  const endUpload = (noteId: string) => { delete _uploading[noteId] }
+  const startUpload = (noteId: string) => { _uploading[noteId] = (_uploading[noteId] ?? 0) + 1 }
+  const endUpload = (noteId: string) => {
+    const remaining = (_uploading[noteId] ?? 1) - 1
+    if (remaining > 0) _uploading[noteId] = remaining
+    else delete _uploading[noteId]
+  }
   const isUploading = (noteId: string) => !!_uploading[noteId]
   return { startUpload, endUpload, isUploading }
 }
diff --git a/app/composables/useNotes.ts b/app/composables/useNotes.ts
deleted file mode 100644
index 12ebd1f..0000000
--- a/app/composables/useNotes.ts
+++ /dev/null
@@ -1,312 +0,0 @@
-import type { Attachment, Note } from '#shared/types/notes'
-
-function fileWithExt(f: File): [File, string] {
-  const raw = f.name || 'file'
-  const dotIdx = raw.lastIndexOf('.')
-  const ext = dotIdx > -1 ? raw.slice(dotIdx).toLowerCase() : ''
-  // Use MIME-derived extension when filename has none, is generic (.bin), or is just 'blob'
-  const mimeExt = MIME_TO_EXT[f.type]
-  if (mimeExt && (!ext || ext === '.bin' || raw === 'blob')) {
-    const base = ext ? raw.slice(0, dotIdx) : raw
-    return [f, `${base || 'file'}${mimeExt}`]
-  }
-  return [f, raw]
-}
-
-// Typed as plain strings: Nitro's typed routes match `/api/notes/${id}` against static
-// siblings such as `/api/notes/search` (GET only) and would reject PUT/DELETE.
-const noteUrl = (id: string): string => `/api/notes/${id}`
-const attachmentUrl = (noteId: string, attId: string): string => `/api/notes/${noteId}/attachments/${attId}`
-
-type NotesParams = { archived?: boolean; trashed?: boolean; labelId?: string }
-type NotesPage = { notes: Note[]; hasMore: boolean }
-
-const notesQuery = (params: NotesParams, page: number): Record<string, string> => {
-  const query: Record<string, string> = { page: String(page) }
-  if (params.archived) query.archived = 'true'
-  if (params.trashed) query.trashed = 'true'
-  if (params.labelId) query.labelId = params.labelId
-  return query
-}
-
-export const useNotes = (options: { realtime?: boolean } = {}) => {
-  const notes = useState<Note[]>('notes', () => [])
-  const loading = useState<boolean>('notes-loading', () => false)
-  const hasMore = useState<boolean>('notes-has-more', () => false)
-  const notesPage = useState<number>('notes-page', () => 1)
-  const notesParams = useState<NotesParams>('notes-params', () => ({}))
-
-  const apiFetch = useNuxtApp().$api
-  const { syncNote, refreshSearch } = useSearch()
-  const refreshVersion = useState<number>('notes-refresh-version', () => 0)
-  const requestVersion = useState<number>('notes-request-version', () => 0)
-  const { consume: consumeLocalNoteEvent, run: runLocalNoteMutation } =
-    useLocalRealtimeEvents('local-note-events')
-
-  const fetchNotes = async (params: NotesParams = {}) => {
-    const version = ++requestVersion.value
-    loading.value = true
-    notesParams.value = params
-    notesPage.value = 1
-    try {
-      const data = await apiFetch<NotesPage>('/api/notes', {
-        query: { ...notesQuery(params, 1), _sync: String(Date.now()) },
-        cache: 'no-store',
-      })
-      if (version === requestVersion.value && JSON.stringify(params) === JSON.stringify(notesParams.value)) {
-        notes.value = data.notes
-        hasMore.value = data.hasMore
-      }
-    } finally {
-      loading.value = false
-    }
-  }
-
-  const fetchMoreNotes = async () => {
-    if (loading.value || !hasMore.value) return
-    loading.value = true
-    try {
-      const nextPage = notesPage.value + 1
-      const data = await apiFetch<NotesPage>('/api/notes', {
-        query: notesQuery(notesParams.value, nextPage),
-        cache: 'no-store',
-      })
-      notes.value = [...notes.value, ...data.notes]
-      hasMore.value = data.hasMore
-      notesPage.value = nextPage
-    } finally {
-      loading.value = false
-    }
-  }
-
-  const refreshLoadedNotes = async () => {
-    const version = ++refreshVersion.value
-    const request = ++requestVersion.value
-    const params = { ...notesParams.value }
-    const page = notesPage.value
-    const pages: Note[] = []
-    let nextHasMore = false
-
-    for (let currentPage = 1; currentPage <= page; currentPage++) {
-      const data = await apiFetch<NotesPage>('/api/notes', {
-        query: { ...notesQuery(params, currentPage), _sync: String(Date.now()) },
-        cache: 'no-store',
-      })
-      pages.push(...data.notes)
-      nextHasMore = data.hasMore
-      if (!data.hasMore) break
-    }
-
-    if (
-      version === refreshVersion.value &&
-      request === requestVersion.value &&
-      JSON.stringify(params) === JSON.stringify(notesParams.value)
-    ) {
-      notes.value = pages
-      hasMore.value = nextHasMore
-      await refreshSearch()
-    }
-  }
-
-  const refreshNote = async (id: string) => {
-    const index = notes.value.findIndex((note) => note.id === id)
-    if (index === -1) return
-    const note = await apiFetch<Note>(noteUrl(id), { cache: 'no-store' })
-    const currentIndex = notes.value.findIndex((item) => item.id === id)
-    if (currentIndex !== -1) {
-      notes.value[currentIndex] = note
-      syncNote(note)
-    }
-  }
-
-  const logRefreshError = (error: unknown) => console.warn('[realtime] Failed to refresh notes:', error)
-
-  if (options.realtime) {
-    const { subscribe } = useEventSource()
-    const unsubscribe = subscribe((event) => {
-      const labelsChanged = event.type === 'label.updated' || event.type === 'label.deleted'
-      const isLabelEvent = event.type.startsWith('label.')
-      if (isLabelEvent && !labelsChanged) return
-      const data = event.data as {
-        note?: { id?: string }
-        noteId?: string
-        refresh?: 'note' | 'list'
-      } | undefined
-      const noteId = data?.note?.id ?? data?.noteId
-      const eventKey = noteId ? `${event.type}:${noteId}` : null
-      if (eventKey && consumeLocalNoteEvent(eventKey)) return
-
-      if (event.type.startsWith('attachment.') && noteId) {
-        refreshNote(noteId).catch(logRefreshError)
-        return
-      }
-
-      if (event.type === 'note.updated' && noteId && data?.refresh !== 'list') {
-        refreshNote(noteId).catch(logRefreshError)
-        return
-      }
-
-      if (event.resource === 'notes' || event.resource === 'all' || labelsChanged) {
-        refreshLoadedNotes().catch(logRefreshError)
-      }
-    })
-    onScopeDispose(unsubscribe)
-  }
-
-  const createNote = async (payload: Partial<Note> & { labelIds?: string[] }) => {
-    const note = await apiFetch<Note>('/api/notes', { method: 'POST', body: payload })
-    notes.value.unshift(note)
-    return note
-  }
-
-  const updateNote = async (id: string, payload: Partial<Note> & { labelIds?: string[] }) => {
-    const updated = await runLocalNoteMutation(`note.updated:${id}`, () =>
-      apiFetch<Note>(noteUrl(id), { method: 'PUT', body: payload })
-    )
-    const idx = notes.value.findIndex((n) => n.id === id)
-    if (idx !== -1) {
-      const prev = notes.value[idx]!
-      const statusChanged = prev.isArchived !== updated.isArchived || prev.isTrashed !== updated.isTrashed
-      if (statusChanged && (updated.isArchived || updated.isTrashed)) {
-        notes.value.splice(idx, 1)
-      } else {
-        notes.value[idx] = updated
-      }
-    }
-    syncNote(updated)
-    return updated
-  }
-
-  /** Change a note's archive/trash status and drop it from the current list. Resolves false on failure. */
-  const setNoteStatus = async (
-    id: string,
-    patch: { isArchived?: boolean; isTrashed?: boolean },
-    successMessage: string,
-    errorMessage: string,
-  ) => {
-    const ok = await withErrorSnackbar(errorMessage, async () => {
-      await runLocalNoteMutation(`note.updated:${id}`, () => apiFetch(noteUrl(id), { method: 'PUT', body: patch }))
-      return true
-    })
-    if (!ok) return false
-    notes.value = notes.value.filter((n) => n.id !== id)
-    useSnackbar().show(successMessage)
-    return true
-  }
-
-  const trashNote = (id: string) => setNoteStatus(id, { isTrashed: true }, 'Note Moved to Trash', 'Failed to Move Note to Trash')
-  const restoreNote = (id: string) => setNoteStatus(id, { isTrashed: false }, 'Note Restored', 'Failed to Restore Note')
-  const archiveNote = (id: string) => setNoteStatus(id, { isArchived: true }, 'Note Archived', 'Failed to Archive Note')
-  const unarchiveNote = (id: string) => setNoteStatus(id, { isArchived: false }, 'Note Unarchived', 'Failed to Unarchive Note')
-
-  const deleteNote = async (id: string) => {
-    const ok = await withErrorSnackbar('Failed to Delete Note', async () => {
-      await apiFetch(noteUrl(id), { method: 'DELETE' })
-      return true
-    })
-    if (!ok) return false
-    notes.value = notes.value.filter((n) => n.id !== id)
-    useSnackbar().show('Note Permanently Deleted')
-    return true
-  }
-
-  // One request per file keeps each request under the server's upload size limit
-  const uploadAttachment = async (noteId: string, files: File[]) => {
-    const uploaded: Attachment[] = []
-    for (const f of files) {
-      const form = new FormData()
-      const [file, name] = fileWithExt(f)
-      form.append('files', file, name)
-      const result = await withErrorSnackbar('Upload Failed', () =>
-        apiFetch<Attachment[]>(`/api/notes/${noteId}/attachments`, { method: 'POST', body: form })
-      )
-      if (result) uploaded.push(...result)
-    }
-    const idx = notes.value.findIndex((n) => n.id === noteId)
-    if (idx !== -1) {
-      notes.value[idx]!.attachments.push(...uploaded)
-    }
-    return uploaded
-  }
-
-  const deleteAttachment = async (noteId: string, attId: string) => {
-    const ok = await withErrorSnackbar('Failed to Delete Attachment', async () => {
-      await apiFetch(attachmentUrl(noteId, attId), { method: 'DELETE' })
-      return true
-    })
-    if (!ok) return false
-    const idx = notes.value.findIndex((n) => n.id === noteId)
-    if (idx !== -1) {
-      notes.value[idx]!.attachments = notes.value[idx]!.attachments.filter((a) => a.id !== attId)
-    }
-    return true
-  }
-
-  /** Resolves to the renamed attachment, or undefined on failure (an error snackbar is shown). */
-  const renameAttachment = async (noteId: string, attId: string, filename: string) => {
-    const attachment = await withErrorSnackbar('Rename Failed', () =>
-      apiFetch<Attachment>(attachmentUrl(noteId, attId), { method: 'PUT', body: { filename } })
-    )
-    if (!attachment) return undefined
-    const idx = notes.value.findIndex((n) => n.id === noteId)
-    if (idx !== -1) {
-      const note = notes.value[idx]!
-      note.attachments = note.attachments.map((a) => (a.id === attId ? attachment : a))
-      syncNote(note)
-    }
-    return attachment
-  }
-
-  const reorderAttachments = async (noteId: string, ids: string[]) => {
-    const ok = await withErrorSnackbar('Reorder Failed', async () => {
-      await apiFetch(`/api/notes/${noteId}/attachments/reorder`, { method: 'PUT', body: { ids } })
-      return true
-    })
-    if (!ok) return false
-    const idx = notes.value.findIndex((n) => n.id === noteId)
-    if (idx !== -1) {
-      const note = notes.value[idx]!
-      const byId = new Map(note.attachments.map((a) => [a.id, a]))
-      note.attachments = ids
-        .map((id, position) => {
-          const att = byId.get(id)
-          return att ? { ...att, position } : null
-        })
-        .filter((a): a is NonNullable<typeof a> => Boolean(a))
-      syncNote(note)
-    }
-    return true
-  }
-
-  const emptyTrash = async () => {
-    const ok = await withErrorSnackbar('Failed to Empty Trash', async () => {
-      await apiFetch('/api/notes/trash', { method: 'DELETE' })
-      return true
-    })
-    if (!ok) return false
-    notes.value = notes.value.filter((n) => !n.isTrashed)
-    useSnackbar().show('All Trash Permanently Deleted')
-    return true
-  }
-
-  return {
-    notes: readonly(notes),
-    loading: readonly(loading),
-    hasMore: readonly(hasMore),
-    fetchNotes,
-    fetchMoreNotes,
-    refreshLoadedNotes,
-    createNote,
-    updateNote,
-    deleteNote,
-    trashNote,
-    restoreNote,
-    archiveNote,
-    unarchiveNote,
-    uploadAttachment,
-    deleteAttachment,
-    renameAttachment,
-    reorderAttachments,
-    emptyTrash,
-  }
-}
diff --git a/app/composables/useNotesList.ts b/app/composables/useNotesList.ts
new file mode 100644
index 0000000..7b6dcf3
--- /dev/null
+++ b/app/composables/useNotesList.ts
@@ -0,0 +1,155 @@
+import type { Note } from '#shared/types/notes'
+
+export type NotesParams = { archived?: boolean; trashed?: boolean; labelId?: string }
+type NotesPage = { notes: Note[]; hasMore: boolean }
+
+// Typed as plain strings: Nitro's typed routes match `/api/notes/${id}` against static
+// siblings such as `/api/notes/search` (GET only) and would reject PUT/DELETE.
+export const noteUrl = (id: string): string => `/api/notes/${id}`
+
+const notesQuery = (params: NotesParams, page: number): Record<string, string> => {
+  const query: Record<string, string> = { page: String(page) }
+  if (params.archived) query.archived = 'true'
+  if (params.trashed) query.trashed = 'true'
+  if (params.labelId) query.labelId = params.labelId
+  return query
+}
+
+/** List state shared by the list, note mutations and attachment mutations. */
+export const useNotesState = () => {
+  const notes = useState<Note[]>('notes', () => [])
+  const { syncNote } = useSearch()
+
+  /** Apply `update` to a loaded note and mirror the result into search results. */
+  const updateLoadedNote = (id: string, update: (note: Note) => Note) => {
+    const index = notes.value.findIndex((n) => n.id === id)
+    if (index === -1) return
+    const next = update(notes.value[index]!)
+    notes.value[index] = next
+    syncNote(next)
+  }
+
+  const removeLoadedNote = (id: string) => {
+    notes.value = notes.value.filter((n) => n.id !== id)
+  }
+
+  return {
+    notes,
+    loading: useState<boolean>('notes-loading', () => false),
+    hasMore: useState<boolean>('notes-has-more', () => false),
+    page: useState<number>('notes-page', () => 1),
+    params: useState<NotesParams>('notes-params', () => ({})),
+    updateLoadedNote,
+    removeLoadedNote,
+  }
+}
+
+export const useNotesList = (options: { realtime?: boolean } = {}) => {
+  const { notes, loading, hasMore, page, params, updateLoadedNote } = useNotesState()
+  const apiFetch = useNuxtApp().$api
+  const { refreshSearch } = useSearch()
+  const refreshVersion = useState<number>('notes-refresh-version', () => 0)
+  const requestVersion = useState<number>('notes-request-version', () => 0)
+
+  const fetchPage = (pageParams: NotesParams, pageNumber: number, bypassCache = false) =>
+    apiFetch<NotesPage>('/api/notes', {
+      query: bypassCache ? { ...notesQuery(pageParams, pageNumber), _sync: String(Date.now()) } : notesQuery(pageParams, pageNumber),
+      cache: 'no-store',
+    })
+
+  const fetchNotes = async (nextParams: NotesParams = {}) => {
+    const version = ++requestVersion.value
+    loading.value = true
+    params.value = nextParams
+    page.value = 1
+    try {
+      const data = await fetchPage(nextParams, 1, true)
+      if (version === requestVersion.value && JSON.stringify(nextParams) === JSON.stringify(params.value)) {
+        notes.value = data.notes
+        hasMore.value = data.hasMore
+      }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const fetchMoreNotes = async () => {
+    if (loading.value || !hasMore.value) return
+    loading.value = true
+    try {
+      const nextPage = page.value + 1
+      const data = await fetchPage(params.value, nextPage)
+      notes.value = [...notes.value, ...data.notes]
+      hasMore.value = data.hasMore
+      page.value = nextPage
+    } finally {
+      loading.value = false
+    }
+  }
+
+  /** Re-fetch every page loaded so far, e.g. after another device changed the list. */
+  const refreshLoadedNotes = async () => {
+    const version = ++refreshVersion.value
+    const request = ++requestVersion.value
+    const currentParams = { ...params.value }
+    const loaded: Note[] = []
+    let nextHasMore = false
+
+    for (let currentPage = 1; currentPage <= page.value; currentPage++) {
+      const data = await fetchPage(currentParams, currentPage, true)
+      loaded.push(...data.notes)
+      nextHasMore = data.hasMore
+      if (!data.hasMore) break
+    }
+
+    if (
+      version === refreshVersion.value &&
+      request === requestVersion.value &&
+      JSON.stringify(currentParams) === JSON.stringify(params.value)
+    ) {
+      notes.value = loaded
+      hasMore.value = nextHasMore
+      await refreshSearch()
+    }
+  }
+
+  const refreshNote = async (id: string) => {
+    if (!notes.value.some((note) => note.id === id)) return
+    const note = await apiFetch<Note>(noteUrl(id), { cache: 'no-store' })
+    updateLoadedNote(id, () => note)
+  }
+
+  if (options.realtime) {
+    const logRefreshError = (error: unknown) => console.warn('[realtime] Failed to refresh notes:', error)
+
+    useRealtimeResource({
+      localEventsKey: 'local-note-events',
+      eventKeys: noteEventKeys,
+      onEvent: (event) => {
+        // Label renames and deletions change the labels shown on notes
+        if (event.type === 'label.updated' || event.type === 'label.deleted') {
+          refreshLoadedNotes().catch(logRefreshError)
+          return
+        }
+        if (event.data.resource === 'labels') return
+
+        const noteId = 'noteId' in event.data ? event.data.noteId : 'note' in event.data ? event.data.note.id : undefined
+        if (event.type.startsWith('attachment.') && noteId) {
+          refreshNote(noteId).catch(logRefreshError)
+        } else if (event.type === 'note.updated' && event.data.refresh !== 'list') {
+          refreshNote(event.data.note.id).catch(logRefreshError)
+        } else {
+          refreshLoadedNotes().catch(logRefreshError)
+        }
+      },
+    })
+  }
+
+  return {
+    notes: readonly(notes),
+    loading: readonly(loading),
+    hasMore: readonly(hasMore),
+    fetchNotes,
+    fetchMoreNotes,
+  }
+}
diff --git a/app/composables/useNotesPage.ts b/app/composables/useNotesPage.ts
deleted file mode 100644
index 2cb4485..0000000
--- a/app/composables/useNotesPage.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import type { DeepReadonly } from 'vue'
-import type { Note } from '#shared/types/notes'
-
-/**
- * Shared setup for all note list pages.
- * Consolidates search state, editingNote, displayedNotes, infinite scroll sentinel,
- * and auto-clears search on unmount.
- */
-export function useNotesPage(
-  notes: Readonly<Ref<DeepReadonly<Note[]>>>,
-  hasMore: Readonly<Ref<boolean>>,
-  fetchMoreNotes: () => Promise<void>,
-) {
-  const { searchResults, searchQuery, hasMore: searchHasMore, fetchMore: fetchMoreSearch, clearSearch } = useSearch()
-  const editingNote = ref<Note | null>(null)
-  // useNotes/useSearch expose readonly views of their state; list components never mutate their props
-  const displayedNotes = computed(() => (searchResults.value ?? notes.value) as Note[])
-  const { sentinel } = useInfiniteScroll(() => {
-    if (searchQuery.value.trim()) {
-      if (searchHasMore.value) fetchMoreSearch()
-      return
-    }
-    if (hasMore.value) fetchMoreNotes()
-  })
-
-  onUnmounted(() => clearSearch())
-
-  return { searchResults, editingNote, displayedNotes, sentinel }
-}
diff --git a/app/composables/useRealtimeResource.ts b/app/composables/useRealtimeResource.ts
new file mode 100644
index 0000000..6c316d3
--- /dev/null
+++ b/app/composables/useRealtimeResource.ts
@@ -0,0 +1,32 @@
+import type { ClientRealtimeEvent } from './useEventSource'
+
+/**
+ * Subscribe to realtime events while skipping the echoes of this client's own mutations.
+ * Wrap a mutation in the returned `runLocal(key, request)` and the event with that key is ignored.
+ */
+export function useRealtimeResource(options: {
+  /** useState key holding this resource's pending local event keys */
+  localEventsKey: string
+  /** Keys under which an event may have been marked as local, tried in order */
+  eventKeys: (event: ClientRealtimeEvent) => string[]
+  onEvent?: (event: ClientRealtimeEvent) => void
+}) {
+  const { consume, run } = useLocalRealtimeEvents(options.localEventsKey)
+
+  if (options.onEvent) {
+    const onEvent = options.onEvent
+    const unsubscribe = useEventSource().subscribe((event) => {
+      if (options.eventKeys(event).some(consume)) return
+      onEvent(event)
+    })
+    onScopeDispose(unsubscribe)
+  }
+
+  return { runLocal: run }
+}
+
+export const noteEventKeys = (event: ClientRealtimeEvent): string[] => {
+  const data = event.data as { note?: { id: string }; noteId?: string }
+  const noteId = data.note?.id ?? data.noteId
+  return noteId ? [`${event.type}:${noteId}`] : []
+}

From 83476c5923e2ba3f1817c3d876fdfa0eb7421682 Mon Sep 17 00:00:00 2001
From: Irfan Fadilah <hello@irfanfadilah.com>
Date: Thu, 15 Oct 2026 10:59:29 +0700
Subject: [PATCH 3/9] Add Note List View

---
 app/components/note/ListView.vue | 145 +++++++++++++++++++++++++++++++
 app/pages/archive.vue            |  40 +--------
 app/pages/index.vue              |  40 +--------
 app/pages/label/[id].vue         |  34 +-------
 app/pages/trash.vue              |  76 +---------------
 5 files changed, 149 insertions(+), 186 deletions(-)
 create mode 100644 app/components/note/ListView.vue

diff --git a/app/components/note/ListView.vue b/app/components/note/ListView.vue
new file mode 100644
index 0000000..8482574
--- /dev/null
+++ b/app/components/note/ListView.vue
@@ -0,0 +1,145 @@
+<template>
+  <div>
+    <div
+      v-if="heading || mode === 'trash'"
+      class="flex items-center justify-between mb-4"
+    >
+      <h1 class="text-xs font-medium text-nord-slate dark:text-nord-frost uppercase tracking-wider" aria-live="polite">
+        {{ heading }}
+      </h1>
+      <button
+        v-if="mode === 'trash' && notes.length > 0 && searchResults === null"
+        type="button"
+        class="text-sm text-nord-ember hover:text-nord-ember/80 font-medium"
+        @click="confirmingEmpty = true"
+      >
+        Delete All
+      </button>
+    </div>
+
+    <template v-if="canCreate && searchResults === null">
+      <NoteCreateBar v-if="!isOffline" :default-label-ids="labelId ? [labelId] : undefined" />
+      <Transition
+        enter-active-class="transition-all duration-200 ease-out"
+        enter-from-class="opacity-0 -translate-y-2"
+        enter-to-class="opacity-100 translate-y-0"
+        leave-active-class="transition-all duration-150 ease-in"
+        leave-from-class="opacity-100 translate-y-0"
+        leave-to-class="opacity-0 -translate-y-2"
+      >
+        <UiAlertBanner v-if="isOffline" variant="warning">
+          You are offline. Changes you make will not be saved.
+        </UiAlertBanner>
+      </Transition>
+    </template>
+
+    <NoteGrid
+      :notes="displayedNotes"
+      :status="status"
+      :empty-message="emptyMessage"
+      @open="editingNote = $event"
+      @archive="(n) => archiveNote(n.id)"
+      @unarchive="(n) => unarchiveNote(n.id)"
+      @trash="(n) => trashNote(n.id)"
+      @restore="(n) => restoreNote(n.id)"
+      @delete="(n) => deleteNote(n.id)"
+    />
+
+    <div v-if="searchResults === null" ref="sentinel" class="h-4" />
+    <div v-if="loading && notes.length > 0" class="flex justify-center py-4" role="status" aria-label="Loading more notes">
+      <div class="w-5 h-5 border-2 border-nord-aurora border-t-transparent rounded-full animate-spin" />
+    </div>
+
+    <NoteModal
+      v-if="editingNote"
+      :note="editingNote"
+      :readonly="!!status"
+      @close="editingNote = null"
+      @unarchive="(n) => unarchiveNote(n.id)"
+      @trash="(n) => trashNote(n.id)"
+      @restore="(n) => restoreNote(n.id)"
+      @delete-forever="(n) => deleteNote(n.id)"
+    />
+
+    <UiConfirmDialog
+      v-if="confirmingEmpty"
+      title="Empty Trash?"
+      confirm-label="Delete All"
+      :busy="emptying"
+      @cancel="confirmingEmpty = false"
+      @confirm="onEmptyTrash"
+    >
+      All notes in Trash, including their images and attachments, will be permanently deleted and cannot be recovered.
+    </UiConfirmDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Note } from '#shared/types/notes'
+
+// One list page for every view: all notes, a label, the archive and the trash.
+const props = defineProps<{
+  mode: 'notes' | 'label' | 'archive' | 'trash'
+  labelId?: string
+}>()
+
+const { notes, loading, hasMore, fetchNotes, fetchMoreNotes } = useNotesList({ realtime: true })
+const { archiveNote, unarchiveNote, trashNote, restoreNote, deleteNote, emptyTrash } = useNoteMutations()
+const { searchResults, searchQuery, hasMore: searchHasMore, fetchMore: fetchMoreSearch, clearSearch } = useSearch()
+const { labels } = useLabels()
+const { isOffline } = useOffline()
+
+const status = computed(() => (props.mode === 'archive' ? 'archived' : props.mode === 'trash' ? 'trashed' : undefined))
+const canCreate = computed(() => props.mode === 'notes' || props.mode === 'label')
+const labelName = computed(() => labels.value.find((l) => l.id === props.labelId)?.name ?? '')
+
+const heading = computed(() => {
+  if (searchResults.value !== null) {
+    const count = searchResults.value.length
+    return count ? `${count} result${count !== 1 ? 's' : ''}` : 'No results found'
+  }
+  return { notes: '', label: labelName.value || 'Label', archive: 'Archive', trash: 'Trash' }[props.mode]
+})
+
+const emptyMessage = computed(() => ({
+  notes: 'Notes you add appear here.',
+  label: `No notes with label '${labelName.value}'.`,
+  archive: 'No notes in Archive.',
+  trash: 'No notes in Trash.',
+})[props.mode])
+
+const listParams = computed(() => ({
+  archived: props.mode === 'archive' || undefined,
+  trashed: props.mode === 'trash' || undefined,
+  labelId: props.mode === 'label' ? props.labelId : undefined,
+}))
+
+// useNotesList/useSearch expose readonly views of their state; list components never mutate their props
+const displayedNotes = computed(() => (searchResults.value ?? notes.value) as Note[])
+const editingNote = ref<Note | null>(null)
+
+const { sentinel } = useInfiniteScroll(() => {
+  if (searchQuery.value.trim()) {
+    if (searchHasMore.value) fetchMoreSearch()
+    return
+  }
+  if (hasMore.value) fetchMoreNotes()
+})
+
+const confirmingEmpty = ref(false)
+const emptying = ref(false)
+const onEmptyTrash = async () => {
+  emptying.value = true
+  try {
+    await emptyTrash()
+  } finally {
+    emptying.value = false
+    confirmingEmpty.value = false
+  }
+}
+
+onUnmounted(() => clearSearch())
+
+await fetchNotes(listParams.value)
+watch(listParams, (params) => fetchNotes(params))
+</script>
diff --git a/app/pages/archive.vue b/app/pages/archive.vue
index 21a1217..8d5f44f 100644
--- a/app/pages/archive.vue
+++ b/app/pages/archive.vue
@@ -1,45 +1,7 @@
 <template>
-  <div>
-    <div class="text-xs font-medium text-nord-slate dark:text-nord-frost uppercase tracking-wider mb-4">
-      <span v-if="searchResults !== null">
-        {{ searchResults.length ? `${searchResults.length} result${searchResults.length !== 1 ? 's' : ''}` : 'No results found' }}
-      </span>
-      <span v-else>Archive</span>
-    </div>
-    <NoteGrid
-      :notes="displayedNotes"
-      :is-archived="true"
-      empty-message="No notes in Archive."
-      @open="editingNote = $event"
-      @unarchive="(n) => restoreArchivedNote(n.id)"
-      @trash="(n) => trashNote(n.id)"
-      @label="editingNote = $event"
-    />
-
-    <div v-if="searchResults === null" ref="sentinel" class="h-4" />
-    <div v-if="loading && notes.length > 0" class="flex justify-center py-4">
-      <div class="w-5 h-5 border-2 border-nord-aurora border-t-transparent rounded-full animate-spin" />
-    </div>
-
-    <NoteModal
-      v-if="editingNote"
-      :note="editingNote"
-      :readonly="true"
-      :is-archived="true"
-      @close="editingNote = null"
-      @unarchive="(n) => { restoreArchivedNote(n.id); editingNote = null }"
-      @trash="(n) => { trashNote(n.id); editingNote = null }"
-    />
-  </div>
+  <NoteListView mode="archive" />
 </template>
 
 <script setup lang="ts">
 definePageMeta({ middleware: 'auth' })
-
-const { notes, loading, hasMore, fetchNotes, fetchMoreNotes, unarchiveNote, trashNote } = useNotes({ realtime: true })
-const { searchResults, editingNote, displayedNotes, sentinel } = useNotesPage(notes, hasMore, fetchMoreNotes)
-
-const restoreArchivedNote = (id: string) => unarchiveNote(id)
-
-await fetchNotes({ archived: true })
 </script>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 1c2fc60..fc42eb7 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,45 +1,7 @@
 <template>
-  <div>
-    <div v-if="searchResults !== null" class="text-xs font-medium text-nord-frost uppercase tracking-wider mb-4">
-      {{ searchResults.length ? `${searchResults.length} result${searchResults.length !== 1 ? 's' : ''}` : 'No results found' }}
-    </div>
-    <NoteCreateBar v-if="searchResults === null && !isOffline" />
-    <Transition
-      enter-active-class="transition-all duration-200 ease-out"
-      enter-from-class="opacity-0 -translate-y-2"
-      enter-to-class="opacity-100 translate-y-0"
-      leave-active-class="transition-all duration-150 ease-in"
-      leave-from-class="opacity-100 translate-y-0"
-      leave-to-class="opacity-0 -translate-y-2"
-    >
-      <UiAlertBanner v-if="isOffline" variant="warning">
-        You are offline. Changes you make will not be saved.
-      </UiAlertBanner>
-    </Transition>
-    <NoteGrid
-      :notes="displayedNotes"
-      empty-message="Notes you add appear here."
-      @open="editingNote = $event"
-      @archive="(n) => archiveNote(n.id)"
-      @trash="(n) => trashNote(n.id)"
-      @label="editingNote = $event"
-    />
-
-    <div v-if="searchResults === null" ref="sentinel" class="h-4" />
-    <div v-if="loading && notes.length > 0" class="flex justify-center py-4">
-      <div class="w-5 h-5 border-2 border-nord-aurora border-t-transparent rounded-full animate-spin" />
-    </div>
-
-    <NoteModal v-if="editingNote" :note="editingNote" @close="editingNote = null" />
-  </div>
+  <NoteListView mode="notes" />
 </template>
 
 <script setup lang="ts">
 definePageMeta({ middleware: 'auth' })
-
-const { notes, loading, hasMore, fetchNotes, fetchMoreNotes, archiveNote, trashNote } = useNotes({ realtime: true })
-const { isOffline } = useOffline()
-const { searchResults, editingNote, displayedNotes, sentinel } = useNotesPage(notes, hasMore, fetchMoreNotes)
-
-await fetchNotes()
 </script>
diff --git a/app/pages/label/[id].vue b/app/pages/label/[id].vue
index e49d7ce..a8e78b0 100644
--- a/app/pages/label/[id].vue
+++ b/app/pages/label/[id].vue
@@ -1,42 +1,10 @@
 <template>
-  <div>
-    <div class="text-xs font-medium text-nord-slate dark:text-nord-frost uppercase tracking-wider mb-4">
-      <span v-if="searchResults !== null">
-        {{ searchResults.length ? `${searchResults.length} result${searchResults.length !== 1 ? 's' : ''}` : 'No results found' }}
-      </span>
-      <span v-else>{{ currentLabel?.name ?? 'Label' }}</span>
-    </div>
-    <NoteCreateBar v-if="searchResults === null" :default-label-ids="[labelId]" />
-    <NoteGrid
-      :notes="displayedNotes"
-      :empty-message="`No notes with label '${currentLabel?.name ?? ''}'.`"
-      @open="editingNote = $event"
-      @archive="(n) => archiveNote(n.id)"
-      @trash="(n) => trashNote(n.id)"
-      @label="editingNote = $event"
-    />
-
-    <div v-if="searchResults === null" ref="sentinel" class="h-4" />
-    <div v-if="loading && notes.length > 0" class="flex justify-center py-4">
-      <div class="w-5 h-5 border-2 border-nord-aurora border-t-transparent rounded-full animate-spin" />
-    </div>
-
-    <NoteModal v-if="editingNote" :note="editingNote" @close="editingNote = null" />
-  </div>
+  <NoteListView mode="label" :label-id="labelId" />
 </template>
 
 <script setup lang="ts">
 definePageMeta({ middleware: 'auth' })
 
 const route = useRoute()
-const { notes, loading, hasMore, fetchNotes, fetchMoreNotes, archiveNote, trashNote } = useNotes({ realtime: true })
-const { labels } = useLabels()
-const { searchResults, editingNote, displayedNotes, sentinel } = useNotesPage(notes, hasMore, fetchMoreNotes)
-
 const labelId = computed(() => route.params.id as string)
-const currentLabel = computed(() => labels.value.find((l) => l.id === labelId.value))
-
-await fetchNotes({ labelId: labelId.value })
-
-watch(labelId, () => fetchNotes({ labelId: labelId.value }))
 </script>
diff --git a/app/pages/trash.vue b/app/pages/trash.vue
index e687fc0..58d5023 100644
--- a/app/pages/trash.vue
+++ b/app/pages/trash.vue
@@ -1,81 +1,7 @@
 <template>
-  <div>
-    <div class="flex items-center justify-between mb-4">
-      <span class="text-xs font-medium text-nord-slate dark:text-nord-frost uppercase tracking-wider">
-        <span v-if="searchResults !== null">
-          {{ searchResults.length ? `${searchResults.length} result${searchResults.length !== 1 ? 's' : ''}` : 'No results found' }}
-        </span>
-        <span v-else>Trash</span>
-      </span>
-      <button
-        v-if="notes.length > 0 && searchResults === null"
-        class="text-sm text-nord-ember hover:text-nord-ember/80 font-medium"
-        @click="confirmEmpty = true"
-      >
-        Delete All
-      </button>
-    </div>
-
-    <NoteGrid
-      :notes="displayedNotes"
-      :is-trashed="true"
-      empty-message="No notes in Trash."
-      @open="editingNote = $event"
-      @restore="(n) => restoreTrashedNote(n.id)"
-      @delete="(n) => deleteNote(n.id)"
-      @label="() => {}"
-    />
-
-    <div v-if="searchResults === null" ref="sentinel" class="h-4" />
-    <div v-if="loading && notes.length > 0" class="flex justify-center py-4">
-      <div class="w-5 h-5 border-2 border-nord-aurora border-t-transparent rounded-full animate-spin" />
-    </div>
-
-    <NoteModal
-      v-if="editingNote"
-      :note="editingNote"
-      :readonly="true"
-      :is-trashed="true"
-      @close="editingNote = null"
-      @delete-forever="(n) => { deleteNote(n.id); editingNote = null }"
-      @restore="(n) => { restoreTrashedNote(n.id); editingNote = null }"
-    />
-
-    <!-- Confirm empty trash dialog -->
-    <div
-      v-if="confirmEmpty"
-      class="fixed left-0 top-0 modal-viewport bg-black/40 z-50 flex items-center justify-center px-4"
-      @mousedown.self="confirmEmpty = false"
-    >
-      <div class="bg-nord-mist dark:bg-nord-obsidian rounded-2xl p-6 w-full max-w-sm shadow-2xl">
-        <h3 class="text-base font-semibold text-nord-storm dark:text-nord-snow mb-2">WARNING</h3>
-        <p class="text-sm text-nord-slate dark:text-nord-frost mb-6">This action cannot be undone. All notes, including images and attachments in Trash will be permanently deleted and cannot be recovered.</p>
-        <div class="flex gap-3 justify-end">
-          <button class="px-4 py-2 text-sm text-nord-slate dark:text-nord-ice hover:bg-nord-ice dark:hover:bg-nord-graphite rounded-lg" @click="confirmEmpty = false">Cancel</button>
-          <button class="px-4 py-2 text-sm bg-nord-ember text-white rounded-lg hover:bg-nord-ember/80" @click="doEmpty">Confirm Delete All</button>
-        </div>
-      </div>
-    </div>
-  </div>
+  <NoteListView mode="trash" />
 </template>
 
 <script setup lang="ts">
 definePageMeta({ middleware: 'auth' })
-
-const { notes, loading, hasMore, fetchNotes, fetchMoreNotes, restoreNote, deleteNote, emptyTrash } = useNotes({ realtime: true })
-const { searchResults, editingNote, displayedNotes, sentinel } = useNotesPage(notes, hasMore, fetchMoreNotes)
-const confirmEmpty = ref(false)
-
-const restoreTrashedNote = (id: string) => restoreNote(id)
-
-useBodyScrollLock(confirmEmpty)
-
-await fetchNotes({ trashed: true })
-
-const doEmpty = async () => {
-  await emptyTrash()
-  confirmEmpty.value = false
-}
-
-useEscapeKey(() => { confirmEmpty.value = false })
 </script>

From 759aa0cd4b5b042b90ed5921bfdc4a2404cd6794 Mon Sep 17 00:00:00 2001
From: Irfan Fadilah <hello@irfanfadilah.com>
Date: Thu, 15 Oct 2026 10:59:29 +0700
Subject: [PATCH 4/9] Split Note Card

---
 app/components/note/Card.vue             | 226 ++++++-----------------
 app/components/note/ChecklistPreview.vue |  41 ++++
 app/components/note/Grid.vue             |  32 ++--
 app/components/note/StatusActions.vue    |  51 +++++
 4 files changed, 160 insertions(+), 190 deletions(-)
 create mode 100644 app/components/note/ChecklistPreview.vue
 create mode 100644 app/components/note/StatusActions.vue

diff --git a/app/components/note/Card.vue b/app/components/note/Card.vue
index 9571c4b..d6456e2 100644
--- a/app/components/note/Card.vue
+++ b/app/components/note/Card.vue
@@ -1,7 +1,11 @@
 <template>
   <div
-    class="note-card group relative rounded-xl border border-nord-ice dark:border-nord-graphite bg-white dark:bg-nord-obsidian cursor-pointer select-none transition-all duration-150 hover:shadow-lg hover:brightness-95 dark:hover:brightness-110"
+    class="note-card group relative rounded-xl border border-nord-ice dark:border-nord-graphite bg-white dark:bg-nord-obsidian cursor-pointer select-none transition-all duration-150 hover:shadow-lg hover:brightness-95 dark:hover:brightness-110 focus-visible:outline-2 focus-visible:outline-nord-aurora"
+    tabindex="0"
+    :aria-label="`Open note: ${note.title}`"
     @click="$emit('open', note)"
+    @keydown.enter.self="$emit('open', note)"
+    @keydown.space.self.prevent="$emit('open', note)"
     @contextmenu.prevent="onContextMenu"
   >
     <!-- Image attachments preview — bleeds past card border for immersive look -->
@@ -14,53 +18,26 @@
       @click.stop
     />
 
-    <div class="flex-1 p-3 min-w-0 flex flex-col gap-2" :class="(isArchived || isTrashed) ? 'pb-12' : ''">
-      <!-- Title -->
-      <div v-if="note.title" class="font-medium text-lg text-nord-storm dark:text-nord-snow tracking-wide">
+    <div class="flex-1 p-3 min-w-0 flex flex-col gap-2" :class="status ? 'pb-12' : ''">
+      <h3 v-if="note.title" class="font-medium text-lg text-nord-storm dark:text-nord-snow tracking-wide">
         {{ note.title }}
-      </div>
+      </h3>
 
-      <!-- Content preview -->
       <div v-if="note.type === 'text' && note.content" class="text-sm text-nord-obsidian dark:text-nord-ice line-clamp-10 whitespace-pre-wrap">
         {{ note.content }}
       </div>
 
-      <!-- Checklist preview -->
-      <div v-if="note.type === 'checklist'" class="space-y-1">
-        <div
-          v-for="item in visibleChecklistItems"
-          :key="item.id"
-          class="flex items-center gap-2 text-sm"
-        >
-          <div
-            class="w-4 h-4 rounded border flex-shrink-0 flex items-center justify-center"
-            :class="item.isChecked ? 'bg-nord-frost border-nord-frost' : 'border-nord-ice dark:border-nord-slate'"
-          >
-            <svg v-if="item.isChecked" class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.5 12.75l6 6 9-13.5"/>
-            </svg>
-          </div>
-          <span :class="item.isChecked ? 'line-through text-nord-slate dark:text-nord-frost' : 'text-nord-obsidian dark:text-nord-ice'">
-            {{ item.text }}
-          </span>
-        </div>
-        <div v-if="note.checklistItems.length > 5" class="text-xs text-nord-slate dark:text-nord-frost mt-1">
-          +{{ note.checklistItems.length - 5 }} more
-        </div>
-      </div>
+      <NoteChecklistPreview v-if="note.type === 'checklist'" :items="note.checklistItems" :limit="CHECKLIST_PREVIEW_LIMIT" />
 
       <!-- File attachments + Labels group -->
       <div v-if="fileAttachments.length > 0 || note.labels.length > 0 || uploading" class="flex flex-col gap-3 mt-1">
-        <!-- File attachments -->
         <div v-if="fileAttachments.length > 0" class="flex flex-col gap-1.5">
           <div
             v-for="att in visibleFileAttachments"
             :key="att.id"
             class="flex items-center gap-1.5 text-xs text-nord-slate dark:text-nord-ice min-w-0"
           >
-            <svg class="w-3 h-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 002.112 2.13"/>
-            </svg>
+            <UiIcon name="paperclip" class="w-3 h-3 flex-shrink-0" />
             <span class="truncate">{{ att.filename }}</span>
           </div>
           <div v-if="hiddenFileCount > 0" class="text-xs text-nord-slate dark:text-nord-frost mt-0.5 pl-0.5">
@@ -68,22 +45,20 @@
           </div>
         </div>
 
-        <!-- Upload indicator -->
-        <div v-if="uploading" class="flex items-center gap-2 text-xs text-nord-frost">
+        <div v-if="uploading" class="flex items-center gap-2 text-xs text-nord-frost" role="status">
           <div class="w-3 h-3 border border-nord-frost border-t-transparent rounded-full animate-spin flex-shrink-0" />
           Uploading...
         </div>
 
-        <!-- Labels -->
         <div v-if="note.labels.length > 0" class="flex flex-wrap gap-1">
           <LabelChip v-for="label in note.labels" :key="label.id" :label="label" />
         </div>
       </div>
 
-      <!-- Toolbar (hover) — absolutely positioned so it never changes card height -->
+      <!-- Toolbar (hover/focus) — absolutely positioned so it never changes card height -->
       <div
-        v-if="!isTrashed && !isArchived"
-        class="absolute bottom-0 left-0 right-0 px-2 pb-1.5 pt-6 rounded-b-xl opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity pointer-events-none group-hover:pointer-events-auto group-focus-within:pointer-events-auto"
+        v-if="!status"
+        class="absolute bottom-0 left-0 right-0 px-2 pb-1.5 pt-6 rounded-b-xl opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity pointer-events-none group-hover:pointer-events-auto group-focus-within:pointer-events-auto"
       >
         <NoteToolbar
           :note="note"
@@ -91,106 +66,39 @@
           @click.stop
           @archive="$emit('archive', note)"
           @trash="$emit('trash', note)"
-          @label="$emit('label', note)"
         />
       </div>
     </div>
 
-    <!-- Archive actions (bottom-left) -->
-    <div v-if="isArchived" class="absolute bottom-2 left-2 flex items-center gap-1">
-      <button
-        class="toolbar-btn"
-        title="Restore"
-        @click.stop="$emit('unarchive', note)"
-      >
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.85l3.181 3.182m0-4.991v4.99"/>
-        </svg>
-      </button>
-      <button
-        class="toolbar-btn"
-        title="Trash"
-        @click.stop="$emit('trash', note)"
-      >
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/>
-        </svg>
-      </button>
-    </div>
-
-    <!-- Trash actions (bottom-left) -->
-    <div v-if="isTrashed" class="absolute bottom-2 left-2 flex items-center gap-1">
-      <button
-        class="toolbar-btn"
-        title="Restore"
-        @click.stop="$emit('restore', note)"
-      >
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.85l3.181 3.182m0-4.991v4.99"/>
-        </svg>
-      </button>
-      <button
-        class="toolbar-btn text-nord-ember"
-        title="Delete Permanently"
-        @click.stop="confirmDelete = true"
-      >
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/>
-        </svg>
-      </button>
-    </div>
-
-    <!-- Context menu -->
-    <NoteContextMenu
-      v-if="!isTrashed && !isArchived"
-      ref="contextMenu"
-      :note="note"
-      @add-file="fileInputRef?.click()"
-      @label="showLabelPicker = true"
-      @archive="$emit('archive', note)"
+    <NoteStatusActions
+      v-if="status"
+      :status="status"
+      class="absolute bottom-2 left-2"
+      @restore="status === 'archived' ? $emit('unarchive', note) : $emit('restore', note)"
       @trash="$emit('trash', note)"
+      @delete="$emit('delete', note)"
     />
 
-    <!-- Hidden file input for context menu uploads -->
-    <input ref="fileInputRef" type="file" multiple class="hidden" @change="onFilesSelected" @click.stop >
-
-    <!-- Label picker (triggered from context menu) -->
-    <LabelPicker
-      v-if="showLabelPicker"
-      :selected-ids="note.labels.map(l => l.id)"
-      @update="onLabelUpdate"
-      @close="showLabelPicker = false"
-    />
-
-    <Teleport to="body">
-      <!-- Confirm permanent delete -->
-      <div
-        v-if="confirmDelete"
-        class="fixed left-0 top-0 modal-viewport bg-black/40 z-50 flex items-center justify-center px-4"
-        @mousedown.self="confirmDelete = false"
-      >
-        <div class="bg-nord-mist dark:bg-nord-obsidian rounded-2xl p-6 w-full max-w-sm shadow-2xl">
-          <h3 class="text-base font-semibold text-nord-storm dark:text-nord-snow mb-2">WARNING</h3>
-          <p class="text-sm text-nord-slate dark:text-nord-frost mb-6">
-            This action cannot be undone. This note, including images and attachments will be permanently deleted and cannot be recovered.
-          </p>
-          <div class="flex gap-3 justify-end">
-            <button
-              class="px-4 py-2 text-sm text-nord-slate dark:text-nord-ice hover:bg-nord-ice dark:hover:bg-nord-graphite rounded-lg"
-              @click="confirmDelete = false"
-            >
-              Cancel
-            </button>
-            <button
-              class="px-4 py-2 text-sm bg-nord-ember text-white rounded-lg hover:bg-nord-ember/80"
-              @click="$emit('delete', note); confirmDelete = false"
-            >
-              Confirm Delete
-            </button>
-          </div>
-        </div>
-      </div>
-    </Teleport>
+    <template v-if="!status">
+      <NoteContextMenu
+        ref="contextMenu"
+        :note="note"
+        @add-file="fileInputRef?.click()"
+        @label="showLabelPicker = true"
+        @archive="$emit('archive', note)"
+        @trash="$emit('trash', note)"
+      />
+
+      <!-- Hidden file input for context menu uploads -->
+      <input ref="fileInputRef" type="file" multiple class="hidden" tabindex="-1" aria-hidden="true" @change="onFilesSelected" @click.stop>
+
+      <LabelPicker
+        v-if="showLabelPicker"
+        :selected-ids="note.labels.map(l => l.id)"
+        @update="onLabelUpdate"
+        @close="showLabelPicker = false"
+      />
+    </template>
   </div>
 </template>
 
@@ -199,8 +107,8 @@ import type { Note } from '#shared/types/notes'
 
 const props = defineProps<{
   note: Note
-  isTrashed?: boolean
-  isArchived?: boolean
+  /** Archived and trashed notes show restore/delete actions instead of the toolbar */
+  status?: 'archived' | 'trashed'
 }>()
 
 defineEmits<{
@@ -210,60 +118,40 @@ defineEmits<{
   trash: [note: Note]
   restore: [note: Note]
   delete: [note: Note]
-  label: [note: Note]
 }>()
 
-const { deleteAttachment, uploadAttachment, updateNote } = useNotes()
+const CHECKLIST_PREVIEW_LIMIT = 5
+const FILE_PREVIEW_LIMIT = 5
+
+const { deleteAttachment, uploadAttachment } = useNoteAttachments()
+const { updateNote } = useNoteMutations()
 const { validate: validateFiles } = useFileValidation()
+const { isUploading } = useNoteUploadState()
 const deleteAtt = (attId: string) => deleteAttachment(props.note.id, attId)
 
 const { images: imageAttachments, files: fileAttachments } = splitAttachments(() => props.note.attachments)
-const visibleChecklistItems = computed(() => props.note.checklistItems.slice(0, 5))
-
-const FILE_LIMIT = 5
-const visibleFileAttachments = computed(() => fileAttachments.value.slice(0, FILE_LIMIT))
-const hiddenFileCount = computed(() => Math.max(0, fileAttachments.value.length - FILE_LIMIT))
+const visibleFileAttachments = computed(() => fileAttachments.value.slice(0, FILE_PREVIEW_LIMIT))
+const hiddenFileCount = computed(() => Math.max(0, fileAttachments.value.length - FILE_PREVIEW_LIMIT))
+const uploading = computed(() => isUploading(props.note.id))
 
-const contextMenu = ref()
+const contextMenu = ref<{ open: (event: MouseEvent) => void }>()
 const fileInputRef = ref<HTMLInputElement>()
 const showLabelPicker = ref(false)
-const confirmDelete = ref(false)
-
-const { startUpload, endUpload, isUploading } = useNoteUploadState()
-const uploading = computed(() => isUploading(props.note.id))
-
-useEscapeKey(() => {
-  if (confirmDelete.value) confirmDelete.value = false
-})
 
 const onContextMenu = (e: MouseEvent) => {
-  if (props.isTrashed || props.isArchived) return
-  contextMenu.value?.open(e)
+  if (!props.status) contextMenu.value?.open(e)
 }
 
 const onFilesSelected = async (e: Event) => {
   const input = e.target as HTMLInputElement
   const files = validateFiles(Array.from(input.files || []))
   input.value = ''
-  if (!files.length) return
-  startUpload(props.note.id)
-  try {
-    await uploadAttachment(props.note.id, files)
-  } finally {
-    endUpload(props.note.id)
-  }
+  if (files.length) await uploadAttachment(props.note.id, files)
 }
 
 const onLabelUpdate = async (ids: string[]) => {
-  await updateNote(props.note.id, { labelIds: ids })
+  await updateNote(props.note.id, { labelIds: ids }).catch((e) => {
+    useSnackbar().show(getErrorMessage(e, 'Failed to Update Labels'), 'error')
+  })
 }
 </script>
-
-<style scoped>
-:deep(mark) {
-  background-color: #EBCB8B;
-  color: #2E3440;
-  border-radius: 2px;
-  padding: 0 1px;
-}
-</style>
diff --git a/app/components/note/ChecklistPreview.vue b/app/components/note/ChecklistPreview.vue
new file mode 100644
index 0000000..e86e8b9
--- /dev/null
+++ b/app/components/note/ChecklistPreview.vue
@@ -0,0 +1,41 @@
+<template>
+  <ul class="space-y-1" :aria-label="`Checklist, ${checkedCount} of ${items.length} done`">
+    <li
+      v-for="item in visibleItems"
+      :key="item.id"
+      class="flex items-center gap-2 text-sm"
+    >
+      <span
+        class="rounded flex-shrink-0 flex items-center justify-center"
+        :class="[
+          size === 'md' ? 'w-5 h-5 border-2' : 'w-4 h-4 border',
+          item.isChecked ? 'bg-nord-frost border-nord-frost' : 'border-nord-ice dark:border-nord-slate',
+        ]"
+      >
+        <UiIcon v-if="item.isChecked" name="check" class="w-3 h-3 text-white" />
+      </span>
+      <span :class="item.isChecked ? 'line-through text-nord-slate dark:text-nord-frost' : 'text-nord-obsidian dark:text-nord-ice'">
+        <span v-if="item.isChecked" class="sr-only">Done: </span>{{ item.text }}
+      </span>
+    </li>
+    <li v-if="hiddenCount > 0" class="text-xs text-nord-slate dark:text-nord-frost mt-1">
+      +{{ hiddenCount }} more
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import type { ChecklistItem } from '#shared/types/notes'
+
+// Read-only checklist used on note cards and in the read-only note view.
+const props = withDefaults(defineProps<{
+  items: ChecklistItem[]
+  /** Show at most this many items, followed by "+N more" */
+  limit?: number
+  size?: 'sm' | 'md'
+}>(), { limit: undefined, size: 'sm' })
+
+const visibleItems = computed(() => (props.limit ? props.items.slice(0, props.limit) : props.items))
+const hiddenCount = computed(() => props.items.length - visibleItems.value.length)
+const checkedCount = computed(() => props.items.filter((i) => i.isChecked).length)
+</script>
diff --git a/app/components/note/Grid.vue b/app/components/note/Grid.vue
index 24311d2..ea32081 100644
--- a/app/components/note/Grid.vue
+++ b/app/components/note/Grid.vue
@@ -9,12 +9,12 @@
         <NoteCard
           v-for="note in col"
           :key="note.id"
-          v-bind="cardProps(note)"
+          :note="note"
+          :status="status"
           @open="$emit('open', $event)"
           @archive="$emit('archive', $event)"
           @unarchive="$emit('unarchive', $event)"
           @trash="$emit('trash', $event)"
-          @label="$emit('label', $event)"
           @restore="$emit('restore', $event)"
           @delete="$emit('delete', $event)"
         />
@@ -31,7 +31,7 @@
     </template>
   </ClientOnly>
 
-  <div v-if="notes.length === 0" class="text-center py-20 text-nord-slate dark:text-nord-frost">
+  <div v-if="notes.length === 0" role="status" class="text-center py-20 text-nord-slate dark:text-nord-frost">
     <p class="text-lg">{{ emptyMessage }}</p>
   </div>
 </template>
@@ -41,8 +41,7 @@ import type { Note } from '#shared/types/notes'
 
 const props = defineProps<{
   notes: Note[]
-  isTrashed?: boolean
-  isArchived?: boolean
+  status?: 'archived' | 'trashed'
   emptyMessage?: string
 }>()
 
@@ -53,26 +52,18 @@ defineEmits<{
   trash: [note: Note]
   restore: [note: Note]
   delete: [note: Note]
-  label: [note: Note]
 }>()
 
-const cardProps = (note: Note) => ({
-  note,
-  isTrashed: props.isTrashed,
-  isArchived: props.isArchived,
-})
-
 const gridRef = ref<HTMLElement | null>(null)
 const colCount = ref(1)
 let ro: ResizeObserver | null = null
 
-const getColCount = (width: number) => {
-  if (width < 480) return 1
-  if (width < 768) return 2
-  if (width < 1024) return 3
-  if (width < 1280) return 4
-  return 5
-}
+// Grid width thresholds (px) for 2, 3, 4 and 5 columns
+const COLUMN_BREAKPOINTS = [480, 768, 1024, 1280]
+// The sidebar animates its width over 300ms; measure again once it settles
+const SIDEBAR_TRANSITION_MS = 320
+
+const getColCount = (width: number) => 1 + COLUMN_BREAKPOINTS.filter((min) => width >= min).length
 
 const bindObserver = (el: HTMLElement | null) => {
   if (!el) return
@@ -96,12 +87,11 @@ onUnmounted(() => {
   if (ro) ro.disconnect()
 })
 
-// Recalculate after sidebar transition (300ms) since padding change resizes the grid
 const { sidebarOpen } = useSidebar()
 watch(sidebarOpen, () => {
   setTimeout(() => {
     if (gridRef.value) colCount.value = getColCount(gridRef.value.offsetWidth)
-  }, 320)
+  }, SIDEBAR_TRANSITION_MS)
 })
 
 const columns = computed(() => {
diff --git a/app/components/note/StatusActions.vue b/app/components/note/StatusActions.vue
new file mode 100644
index 0000000..4f57d38
--- /dev/null
+++ b/app/components/note/StatusActions.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="flex items-center gap-1">
+    <button
+      type="button"
+      class="toolbar-btn"
+      title="Restore"
+      aria-label="Restore"
+      @click.stop="emit('restore')"
+    >
+      <UiIcon name="restore" class="w-5 h-5" />
+    </button>
+    <button
+      v-if="status === 'archived'"
+      type="button"
+      class="toolbar-btn"
+      title="Trash"
+      aria-label="Move to Trash"
+      @click.stop="emit('trash')"
+    >
+      <UiIcon name="trash" class="w-5 h-5" />
+    </button>
+    <button
+      v-else
+      type="button"
+      class="toolbar-btn text-nord-ember"
+      title="Delete Permanently"
+      aria-label="Delete Permanently"
+      @click.stop="confirmingDelete = true"
+    >
+      <UiIcon name="trash" class="w-5 h-5" />
+    </button>
+
+    <UiConfirmDialog
+      v-if="confirmingDelete"
+      title="Delete Note Forever?"
+      confirm-label="Delete Forever"
+      @cancel="confirmingDelete = false"
+      @confirm="confirmingDelete = false; emit('delete')"
+    >
+      This note, including its images and attachments, will be permanently deleted and cannot be recovered.
+    </UiConfirmDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+// Restore/trash/delete buttons for archived and trashed notes (on cards and in the read-only view).
+defineProps<{ status: 'archived' | 'trashed' }>()
+const emit = defineEmits<{ restore: []; trash: []; delete: [] }>()
+
+const confirmingDelete = ref(false)
+</script>

From 372f0b04d798fc21c5e76542c5e9a6b465ccac44 Mon Sep 17 00:00:00 2001
From: Irfan Fadilah <hello@irfanfadilah.com>
Date: Thu, 15 Oct 2026 10:59:29 +0700
Subject: [PATCH 5/9] Share Note Editor Draft

---
 app/components/note/Checklist.vue           | 125 +++++----
 app/components/note/CreateBar.vue           |  75 ++----
 app/components/note/EditorContent.vue       | 197 ++++++--------
 app/components/note/EditorPendingImages.vue |  66 ++---
 app/components/note/NoteModal.vue           | 277 +++++---------------
 app/components/note/ReadonlyView.vue        |  77 ++++++
 app/components/note/Toolbar.vue             | 116 ++++----
 app/composables/useEditorFileUpload.ts      |  85 ++----
 app/composables/useNoteDraft.ts             |  56 ++++
 app/types/editor.ts                         |  21 --
 10 files changed, 462 insertions(+), 633 deletions(-)
 create mode 100644 app/components/note/ReadonlyView.vue
 create mode 100644 app/composables/useNoteDraft.ts
 delete mode 100644 app/types/editor.ts

diff --git a/app/components/note/Checklist.vue b/app/components/note/Checklist.vue
index 02b5eee..2599d15 100644
--- a/app/components/note/Checklist.vue
+++ b/app/components/note/Checklist.vue
@@ -1,73 +1,74 @@
 <template>
   <div class="space-y-1">
-    <div
-      v-for="(item, idx) in props.modelValue"
-      :key="item.id ?? idx"
-      class="flex items-center gap-1 group rounded transition-colors"
-      :class="dragOverIdx === idx ? 'bg-nord-aurora/10' : ''"
-      :data-drag-idx="idx"
-      draggable="true"
-      @dragstart="onDragStart(idx)"
-      @dragover.prevent="onDragOver(idx)"
-      @drop.prevent="onDrop(idx)"
-      @dragend="onDragEnd"
-    >
-      <!-- Drag handle -->
-      <svg
-        class="w-4 h-4 flex-shrink-0 text-white opacity-40 cursor-grab active:cursor-grabbing touch-none select-none"
-        fill="currentColor" viewBox="0 0 24 24"
-        @touchstart.prevent="startTouchDrag(idx)"
+    <ul class="space-y-1" aria-label="Checklist">
+      <li
+        v-for="(item, idx) in props.modelValue"
+        :key="item.id ?? idx"
+        class="flex items-center gap-1 group rounded transition-colors"
+        :class="dragOverIdx === idx ? 'bg-nord-aurora/10' : ''"
+        :data-drag-idx="idx"
+        draggable="true"
+        @dragstart="onDragStart(idx)"
+        @dragover.prevent="onDragOver(idx)"
+        @drop.prevent="onDrop(idx)"
+        @dragend="onDragEnd"
       >
-        <path d="M9 4a1 1 0 100 2 1 1 0 000-2zm6 0a1 1 0 100 2 1 1 0 000-2zM9 10a1 1 0 100 2 1 1 0 000-2zm6 0a1 1 0 100 2 1 1 0 000-2zM9 16a1 1 0 100 2 1 1 0 000-2zm6 0a1 1 0 100 2 1 1 0 000-2z"/>
-      </svg>
+        <UiIcon
+          name="drag-handle"
+          class="w-4 h-4 flex-shrink-0 text-white opacity-40 cursor-grab active:cursor-grabbing touch-none select-none"
+          @touchstart.prevent="startTouchDrag(idx)"
+        />
 
-      <!-- Checkbox -->
-      <button
-        class="w-5 h-5 rounded border-2 flex-shrink-0 flex items-center justify-center transition-colors"
-        :class="item.isChecked
-          ? 'border-nord-frost bg-nord-frost'
-          : 'border-nord-ice dark:border-nord-slate hover:border-nord-frost dark:hover:border-nord-aurora'"
-        @click="toggle(idx)"
-      >
-        <svg v-if="item.isChecked" class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.5 12.75l6 6 9-13.5"/>
-        </svg>
-      </button>
+        <button
+          type="button"
+          role="checkbox"
+          :aria-checked="item.isChecked"
+          :aria-label="item.text ? `Done: ${item.text}` : 'Done'"
+          class="w-5 h-5 rounded border-2 flex-shrink-0 flex items-center justify-center transition-colors"
+          :class="item.isChecked
+            ? 'border-nord-frost bg-nord-frost'
+            : 'border-nord-ice dark:border-nord-slate hover:border-nord-frost dark:hover:border-nord-aurora'"
+          @click="toggle(idx)"
+        >
+          <UiIcon v-if="item.isChecked" name="check" class="w-3 h-3 text-white" />
+        </button>
 
-      <!-- Text input -->
-      <input
-        :ref="(el) => setInputRef(el, idx)"
-        :value="item.text"
-        type="text"
-        placeholder="List item"
-        :maxlength="CONSTRAINTS.CHECKLIST_ITEM_MAX_LENGTH"
-        class="flex-1 ml-1 bg-transparent text-sm outline-none transition-colors"
-        :class="item.isChecked
-          ? 'text-nord-slate dark:text-nord-frost line-through placeholder-nord-slate'
-          : 'text-nord-obsidian dark:text-nord-ice placeholder-nord-slate dark:placeholder-nord-frost'"
-        @keydown.enter.prevent="addAfter(idx)"
-        @keydown.backspace="onBackspace(idx, item, $event)"
-        @input="setText(idx, ($event.target as HTMLInputElement).value)"
-      >
+        <!-- Text input -->
+        <input
+          :ref="(el) => setInputRef(el, idx)"
+          :value="item.text"
+          type="text"
+          placeholder="List Item"
+          aria-label="List Item"
+          :maxlength="CONSTRAINTS.CHECKLIST_ITEM_MAX_LENGTH"
+          class="flex-1 ml-1 bg-transparent text-sm outline-none transition-colors"
+          :class="item.isChecked
+            ? 'text-nord-slate dark:text-nord-frost line-through placeholder-nord-slate'
+            : 'text-nord-obsidian dark:text-nord-ice placeholder-nord-slate dark:placeholder-nord-frost'"
+          @keydown.enter.prevent="addAfter(idx)"
+          @keydown.backspace="onBackspace(idx, item, $event)"
+          @input="setText(idx, ($event.target as HTMLInputElement).value)"
+        >
 
-      <!-- Remove button -->
-      <button
-        class="opacity-0 group-hover:opacity-100 w-6 h-6 flex items-center justify-center text-nord-slate dark:text-nord-frost hover:text-nord-storm dark:hover:text-nord-snow"
-        @click="removeItem(idx)"
-      >
-        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18 18 6M6 6l12 12"/>
-        </svg>
-      </button>
-    </div>
+        <button
+          type="button"
+          class="opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 w-6 h-6 flex items-center justify-center text-nord-slate dark:text-nord-frost hover:text-nord-storm dark:hover:text-nord-snow"
+          :aria-label="item.text ? `Remove ${item.text}` : 'Remove Item'"
+          @click="removeItem(idx)"
+        >
+          <UiIcon name="x-mark" class="w-4 h-4" />
+        </button>
+      </li>
+    </ul>
 
     <!-- Add item -->
     <button
+      type="button"
       class="flex items-center gap-2 text-sm text-nord-slate dark:text-nord-frost hover:text-nord-storm dark:hover:text-nord-ice w-full text-left py-0.5 pl-5"
       @click="addItem"
     >
-      <span class="w-5 h-5 flex items-center justify-center">+</span>
-      List item
+      <span class="w-5 h-5 flex items-center justify-center" aria-hidden="true">+</span>
+      List Item
     </button>
   </div>
 </template>
@@ -78,7 +79,7 @@ import type { ChecklistItem } from '#shared/types/notes'
 import { nanoid } from 'nanoid'
 
 const props = defineProps<{ modelValue: ChecklistItem[] }>()
-const emit = defineEmits<{ 'update:modelValue': [items: ChecklistItem[]]; update: [] }>()
+const emit = defineEmits<{ 'update:modelValue': [items: ChecklistItem[]] }>()
 
 const inputRefs = ref<(HTMLInputElement | null)[]>([])
 const setInputRef = (el: Element | ComponentPublicInstance | null, idx: number) => {
@@ -88,7 +89,6 @@ const setInputRef = (el: Element | ComponentPublicInstance | null, idx: number)
 const addItem = async () => {
   const items = [...props.modelValue, { id: nanoid(), text: '', isChecked: false, position: props.modelValue.length }]
   emit('update:modelValue', items)
-  emit('update')
   await nextTick()
   inputRefs.value[items.length - 1]?.focus()
 }
@@ -97,26 +97,22 @@ const addAfter = async (idx: number) => {
   const items = [...props.modelValue]
   items.splice(idx + 1, 0, { id: nanoid(), text: '', isChecked: false, position: idx + 1 })
   emit('update:modelValue', items.map((i, p) => ({ ...i, position: p })))
-  emit('update')
   await nextTick()
   inputRefs.value[idx + 1]?.focus()
 }
 
 const removeItem = (idx: number) => {
   emit('update:modelValue', props.modelValue.filter((_, i) => i !== idx))
-  emit('update')
 }
 
 const setText = (idx: number, text: string) => {
   emit('update:modelValue', props.modelValue.map((item, i) => (i === idx ? { ...item, text } : item)))
-  emit('update')
 }
 
 const toggle = (idx: number) => {
   emit('update:modelValue', props.modelValue.map((item, i) =>
     i === idx ? { ...item, isChecked: !item.isChecked } : item
   ))
-  emit('update')
 }
 
 const onBackspace = (idx: number, item: ChecklistItem, e: KeyboardEvent) => {
@@ -131,7 +127,6 @@ const { dragOverIdx, onDragStart, onDragOver, onDrop, onDragEnd, startTouchDrag
   getItems: () => props.modelValue,
   onReorder: (items) => {
     emit('update:modelValue', items.map((i, p) => ({ ...i, position: p })))
-    emit('update')
   },
 })
 </script>
diff --git a/app/components/note/CreateBar.vue b/app/components/note/CreateBar.vue
index e36ecbf..a121a53 100644
--- a/app/components/note/CreateBar.vue
+++ b/app/components/note/CreateBar.vue
@@ -1,75 +1,44 @@
 <template>
   <div class="w-full mx-auto mb-6 max-w-[600px]">
     <!-- "Take a note..." collapsed bar (always visible) -->
-    <div
-      class="flex items-center gap-3 bg-white dark:bg-nord-obsidian border border-nord-ice dark:border-nord-graphite rounded-xl px-4 py-3 shadow-sm cursor-text"
-      @click="openModal('text')"
-    >
-      <span class="flex-1 text-nord-slate dark:text-nord-frost text-sm">Take a note...</span>
-      <button class="w-9 h-9 flex items-center justify-center rounded-full hover:bg-nord-ice dark:hover:bg-nord-graphite text-nord-slate dark:text-nord-frost transition-colors" title="New Checklist" @click.stop="openModal('checklist')">
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0118 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3l1.5 1.5 3-3.75"/>
-        </svg>
+    <div class="flex items-center gap-3 bg-white dark:bg-nord-obsidian border border-nord-ice dark:border-nord-graphite rounded-xl shadow-sm focus-within:ring-2 focus-within:ring-nord-aurora">
+      <button
+        type="button"
+        class="flex-1 text-left px-4 py-3 text-nord-slate dark:text-nord-frost text-sm cursor-text outline-none"
+        @click="openModal('text')"
+      >
+        Take a note...
+      </button>
+      <button
+        type="button"
+        class="w-9 h-9 mr-2 flex items-center justify-center rounded-full hover:bg-nord-ice dark:hover:bg-nord-graphite text-nord-slate dark:text-nord-frost transition-colors"
+        title="New Checklist"
+        aria-label="New Checklist"
+        @click="openModal('checklist')"
+      >
+        <UiIcon name="checklist" class="w-5 h-5" />
       </button>
     </div>
 
-    <!-- Create modal -->
     <NoteModal
       v-if="showModal"
       :initial-type="initType"
-      :default-label-ids="props.defaultLabelIds"
-      @save="onSave"
-      @close="onClose"
+      :default-label-ids="defaultLabelIds"
+      @close="showModal = false"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import type { NewNotePayload } from '~/types/editor'
-import type { Note } from '#shared/types/notes'
+import type { NoteType } from '#shared/types/notes'
 
-const emit = defineEmits<{ created: [note: Note] }>()
-const props = defineProps<{ defaultLabelIds?: string[] }>()
+defineProps<{ defaultLabelIds?: string[] }>()
 
 const showModal = ref(false)
-const initType = ref<'text' | 'checklist'>('text')
-const { createNote, uploadAttachment } = useNotes()
-const { startUpload, endUpload } = useNoteUploadState()
-const { show: showSnackbar } = useSnackbar()
+const initType = ref<NoteType>('text')
 
-const openModal = (type: 'text' | 'checklist' = 'text') => {
+const openModal = (type: NoteType) => {
   initType.value = type
   showModal.value = true
 }
-
-const onSave = async (payload: NewNotePayload) => {
-  showModal.value = false
-  const labelIds = [...new Set([...(props.defaultLabelIds ?? []), ...payload.labelIds])]
-  let note: Note
-  try {
-    note = await createNote({
-      type: payload.type,
-      title: payload.title,
-      content: payload.content,
-      labelIds,
-      checklistItems: payload.checklistItems,
-    })
-  } catch (e) {
-    showSnackbar(getErrorMessage(e, 'Failed to Create Note'), 'error')
-    return
-  }
-  emit('created', note)
-  if (payload.pendingFiles.length) {
-    startUpload(note.id)
-    try {
-      await uploadAttachment(note.id, payload.pendingFiles)
-    } finally {
-      endUpload(note.id)
-    }
-  }
-}
-
-const onClose = () => {
-  showModal.value = false
-}
 </script>
diff --git a/app/components/note/EditorContent.vue b/app/components/note/EditorContent.vue
index 589b08b..14b2f0e 100644
--- a/app/components/note/EditorContent.vue
+++ b/app/components/note/EditorContent.vue
@@ -13,46 +13,42 @@
     <!-- Pending image previews -->
     <NoteEditorPendingImages
       :files="pendingImageFiles"
-      :confirming-idx="confirmingPendingIdx"
       :class="imageAttachments.length === 0 ? '-mx-px -mt-px' : ''"
-      @confirm="confirmingPendingIdx = $event"
-      @cancel-confirm="confirmingPendingIdx = null"
-      @remove="(i) => { removePendingImage(i); emitUpdate() }"
+      @remove="removePendingFile"
     />
 
     <div class="p-4">
-      <!-- Title -->
+      <label :for="titleInputId" class="sr-only">Title</label>
       <input
+        :id="titleInputId"
         ref="titleInputRef"
-        v-model="localTitle"
+        v-model="draft.title"
         type="text"
         placeholder="Title"
         :maxlength="CONSTRAINTS.TITLE_MAX_LENGTH"
+        :aria-invalid="draft.titleError || undefined"
         class="w-full bg-transparent text-lg font-medium placeholder-nord-frost outline-none mb-2 transition-colors"
-        :class="titleError
+        :class="draft.titleError
           ? 'text-nord-ember placeholder-nord-ember/60 border-b border-nord-ember'
           : 'text-nord-snow'"
         @input="onTitleInput"
       >
 
-      <!-- Text content -->
-      <textarea
-        v-if="localType === 'text'"
-        ref="contentRef"
-        v-model="localContent"
-        placeholder="Take a note..."
-        rows="3"
-        :maxlength="CONSTRAINTS.CONTENT_MAX_LENGTH"
-        class="w-full bg-transparent text-sm text-nord-ice placeholder-nord-frost outline-none resize-none min-h-[80px] max-h-[60vh] overflow-y-auto"
-        @input="onContentInput"
-      />
-
-      <!-- Checklist -->
-      <NoteChecklist
-        v-if="localType === 'checklist'"
-        v-model="localChecklistItems"
-        @update="emitUpdate"
-      />
+      <template v-if="draft.type === 'text'">
+        <label :for="contentInputId" class="sr-only">Note</label>
+        <textarea
+          :id="contentInputId"
+          ref="contentRef"
+          v-model="draft.content"
+          placeholder="Take a note..."
+          rows="3"
+          :maxlength="CONSTRAINTS.CONTENT_MAX_LENGTH"
+          class="w-full bg-transparent text-sm text-nord-ice placeholder-nord-frost outline-none resize-none min-h-[80px] max-h-[60vh] overflow-y-auto"
+          @input="autoResize"
+        />
+      </template>
+
+      <NoteChecklist v-else v-model="draft.checklistItems" />
 
       <!-- File attachments list (existing note, non-image) -->
       <AttachmentFileList
@@ -60,36 +56,38 @@
         :attachments="fileAttachments"
         :uploading-files="uploadingOtherFiles"
         :deletable="true"
-        :note-id="props.note?.id"
+        :note-id="note?.id"
         @delete="deleteAtt"
       />
 
-      <!-- Upload indicator -->
-      <div v-if="showUploading && fileAttachments.length === 0 && uploadingOtherFiles.length === 0" class="flex items-center gap-2 px-2 py-1.5 text-sm text-nord-frost">
+      <div
+        v-if="showUploading && fileAttachments.length === 0 && uploadingOtherFiles.length === 0"
+        class="flex items-center gap-2 px-2 py-1.5 text-sm text-nord-frost"
+        role="status"
+      >
         <div class="w-3 h-3 border border-nord-frost border-t-transparent rounded-full animate-spin flex-shrink-0" />
         Uploading...
       </div>
 
       <!-- Pending non-image file chips -->
-      <div v-if="pendingOtherFiles.length > 0" class="mt-2 flex flex-wrap gap-2">
-        <div
-          v-for="(f, i) in pendingOtherFiles"
-          :key="i"
+      <ul v-if="pendingOtherFiles.length > 0" class="mt-2 flex flex-wrap gap-2">
+        <li
+          v-for="file in pendingOtherFiles"
+          :key="`${file.name}-${file.lastModified}`"
           class="flex items-center gap-1 px-2 py-1 bg-nord-graphite/50 rounded text-xs text-nord-ice"
         >
-          <span>{{ f.name }}</span>
+          <span>{{ file.name }}</span>
           <button
+            type="button"
             class="ml-1 text-nord-frost hover:text-nord-ember transition-colors"
-            @click.stop="removePendingOtherFile(i); emitUpdate()"
+            :aria-label="`Remove ${file.name}`"
+            @click.stop="removePendingFile(file)"
           >
-            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18 18 6M6 6l12 12"/>
-            </svg>
+            <UiIcon name="x-mark" class="w-3 h-3" />
           </button>
-        </div>
-      </div>
+        </li>
+      </ul>
 
-      <!-- Active labels display -->
       <div v-if="activeLabels.length > 0" class="flex flex-wrap gap-1 mt-3">
         <LabelChip v-for="label in activeLabels" :key="label.id" :label="label" />
       </div>
@@ -98,94 +96,75 @@
     <!-- Bottom bar: toolbar + close button -->
     <div class="flex items-center justify-between px-3 pb-3">
       <NoteToolbar
-        :note="props.note"
-        :selected-label-ids="localLabelIds"
-        :copy-type="localType"
-        :copy-content="localContent"
-        :copy-checklist-items="localChecklistItems"
-        :show-archive="!!props.note"
-        :show-trash="!!props.note"
-        @label="onLabel"
+        :note="note"
+        :selected-label-ids="draft.labelIds"
+        :copy-source="draft"
+        :show-archive="!!note"
+        :show-trash="!!note"
+        @label="(ids) => (draft.labelIds = ids)"
         @add-file="triggerFileUpload"
-        @type-toggle="toggleType"
+        @type-toggle="draft.type = draft.type === 'text' ? 'checklist' : 'text'"
         @archive="$emit('archive')"
         @trash="$emit('trash')"
       />
-      <div class="flex items-center gap-2 flex-shrink-0">
-        <button
-          class="px-4 py-1.5 text-sm font-medium text-nord-ice hover:bg-nord-graphite rounded-lg transition-colors"
-          @click="$emit('close')"
-        >
-          Close
-        </button>
-      </div>
+      <button
+        type="button"
+        class="px-4 py-1.5 text-sm font-medium text-nord-ice hover:bg-nord-graphite rounded-lg transition-colors flex-shrink-0"
+        @click="$emit('close')"
+      >
+        Close
+      </button>
     </div>
 
-    <input ref="fileInputRef" type="file" multiple class="hidden" @change="onFilesSelected($event, emitUpdate)" >
+    <input
+      ref="fileInputRef"
+      type="file"
+      multiple
+      class="hidden"
+      tabindex="-1"
+      aria-hidden="true"
+      @change="onFilesSelected"
+    >
   </div>
 </template>
 
 <script setup lang="ts">
-import type { NoteEditorState } from '~/types/editor'
-import type { Note, ChecklistItem } from '#shared/types/notes'
-
-const props = defineProps<{
-  type: 'text' | 'checklist'
-  title: string
-  content: string
-  selectedLabelIds: string[]
-  checklistItems: ChecklistItem[]
-  note?: Note
-  initialFiles?: File[]
-  titleError?: boolean
-}>()
+import type { Note } from '#shared/types/notes'
+
+// Editable fields of a note. Reads and writes the draft owned by the surrounding NoteModal.
+const props = defineProps<{ note?: Note }>()
 
-const emit = defineEmits<{
-  update: [state: NoteEditorState]
+defineEmits<{
   close: []
   archive: []
   trash: []
 }>()
 
-const { deleteAttachment } = useNotes()
+const draft = useNoteDraft()
+const { deleteAttachment } = useNoteAttachments()
 const { labels } = useLabels()
+const { isUploading } = useNoteUploadState()
 
-const localType = ref(props.type)
-const localTitle = ref(props.title)
-const localContent = ref(props.content)
-const localLabelIds = ref<string[]>([...props.selectedLabelIds])
-const localChecklistItems = ref<ChecklistItem[]>([...props.checklistItems])
-const titleError = ref(props.titleError ?? false)
+const titleInputId = useId()
+const contentInputId = useId()
 const titleInputRef = ref<HTMLInputElement>()
 const contentRef = ref<HTMLTextAreaElement>()
 
-watch(() => props.titleError, (v) => { if (v !== undefined) titleError.value = v })
-
 const {
   pendingImageFiles,
   pendingOtherFiles,
   uploadingOtherFiles,
-  uploading,
-  confirmingPendingIdx,
   fileInputRef,
   triggerFileUpload,
   onFilesSelected,
-  removePendingImage,
-  removePendingOtherFile,
-} = useEditorFileUpload(toRef(props, 'note'), props.initialFiles)
+  removePendingFile,
+} = useEditorFileUpload(toRef(props, 'note'), draft)
 
-const { isUploading: isGlobalUploading } = useNoteUploadState()
-const showUploading = computed(() =>
-  uploading.value || (props.note?.id ? isGlobalUploading(props.note.id) : false)
-)
+const showUploading = computed(() => (props.note ? isUploading(props.note.id) : false))
 
-const { images: imageAttachments, files: fileAttachments } = splitAttachments(
-  () => props.note?.attachments ?? []
-)
+const { images: imageAttachments, files: fileAttachments } = splitAttachments(() => props.note?.attachments ?? [])
 
-const activeLabels = computed(() =>
-  labels.value.filter((l) => localLabelIds.value.includes(l.id))
-)
+const activeLabels = computed(() => labels.value.filter((l) => draft.labelIds.includes(l.id)))
 
 const autoResize = () => {
   const el = contentRef.value
@@ -199,29 +178,9 @@ onMounted(() => {
   nextTick(autoResize)
 })
 
-const emitUpdate = () => {
-  emit('update', {
-    type: localType.value,
-    title: localTitle.value,
-    content: localContent.value,
-    selectedLabelIds: localLabelIds.value,
-    checklistItems: localChecklistItems.value,
-    pendingFiles: [...(pendingImageFiles.value), ...(pendingOtherFiles.value)],
-  })
-}
-
 const onTitleInput = () => {
-  if (localTitle.value.trim()) titleError.value = false
-  emitUpdate()
-}
-
-const onContentInput = () => { autoResize(); emitUpdate() }
-const toggleType = () => { localType.value = localType.value === 'text' ? 'checklist' : 'text'; emitUpdate() }
-const onLabel = (ids: string[]) => { localLabelIds.value = ids; emitUpdate() }
-
-const deleteAtt = async (attId: string) => {
-  if (props.note) return deleteAttachment(props.note.id, attId)
+  if (draft.title.trim()) draft.titleError = false
 }
 
-defineExpose({ showTitleError: () => { titleError.value = true } })
+const deleteAtt = (attId: string) => (props.note ? deleteAttachment(props.note.id, attId) : Promise.resolve(false))
 </script>
diff --git a/app/components/note/EditorPendingImages.vue b/app/components/note/EditorPendingImages.vue
index db1d3d2..9b808f5 100644
--- a/app/components/note/EditorPendingImages.vue
+++ b/app/components/note/EditorPendingImages.vue
@@ -1,12 +1,12 @@
 <template>
-  <div
+  <ul
     v-if="files.length > 0"
     class="grid gap-1 rounded-t-xl overflow-hidden"
     :class="files.length === 1 ? 'grid-cols-1' : 'grid-cols-2'"
   >
-    <div
-      v-for="(file, i) in files"
-      :key="i"
+    <li
+      v-for="file in files"
+      :key="`${file.name}-${file.lastModified}`"
       class="relative group"
     >
       <img
@@ -16,52 +16,34 @@
         :class="files.length === 1 ? 'max-h-56' : 'h-32'"
       >
 
-      <!-- Delete button (hover) -->
       <button
-        v-if="confirmingIdx !== i"
-        class="absolute top-1 right-1 w-7 h-7 bg-black/60 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity hover:bg-nord-ember/80"
-        title="Remove image"
-        @click.stop="$emit('confirm', i)"
+        v-if="confirming !== file"
+        type="button"
+        class="absolute top-1 right-1 w-7 h-7 bg-black/60 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity hover:bg-nord-ember/80"
+        title="Remove Image"
+        :aria-label="`Remove ${file.name}`"
+        @click.stop="confirming = file"
       >
-        <svg class="w-3.5 h-3.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/>
-        </svg>
+        <UiIcon name="trash" class="w-3.5 h-3.5 text-white" />
       </button>
 
-      <!-- Inline confirm overlay -->
-      <div
-        v-if="confirmingIdx === i"
-        class="absolute inset-0 bg-black/70 flex flex-col items-center justify-center gap-2 rounded"
-        @click.stop
-      >
-        <p class="text-white text-xs font-medium">Remove image?</p>
-        <div class="flex gap-2">
-          <button
-            class="px-3 py-1 text-xs bg-nord-ember text-white rounded-full hover:bg-nord-ember/80 transition-colors"
-            @click.stop="$emit('remove', i)"
-          >Remove</button>
-          <button
-            class="px-3 py-1 text-xs bg-nord-slate text-nord-snow rounded-full hover:bg-nord-graphite transition-colors"
-            @click.stop="$emit('cancel-confirm')"
-          >Cancel</button>
-        </div>
-      </div>
-    </div>
-  </div>
+      <UiInlineConfirm
+        v-else
+        message="Remove Image?"
+        confirm-label="Remove"
+        @confirm="confirming = null; emit('remove', file)"
+        @cancel="confirming = null"
+      />
+    </li>
+  </ul>
 </template>
 
 <script setup lang="ts">
-const props = defineProps<{
-  files: File[]
-  confirmingIdx: number | null
-}>()
-
-defineEmits<{
-  remove: [index: number]
-  confirm: [index: number]
-  'cancel-confirm': []
-}>()
+// Previews of images picked for a note that hasn't been created yet.
+const props = defineProps<{ files: File[] }>()
+const emit = defineEmits<{ remove: [file: File] }>()
 
+const confirming = ref<File | null>(null)
 const urlCache = new Map<File, string>()
 
 const getUrl = (file: File): string => {
diff --git a/app/components/note/NoteModal.vue b/app/components/note/NoteModal.vue
index c982878..f549d7f 100644
--- a/app/components/note/NoteModal.vue
+++ b/app/components/note/NoteModal.vue
@@ -1,140 +1,45 @@
 <template>
-  <Teleport to="body">
-    <div
-      class="fixed left-0 top-0 modal-viewport bg-black/60 z-50 flex items-center justify-center px-4 py-8 overflow-y-auto"
-      @mousedown.self="handleClose"
-    >
-      <div
-        class="w-full max-w-xl rounded-xl shadow-2xl border border-nord-graphite bg-nord-obsidian my-auto"
-        @click.stop
-      >
-        <!-- READ-ONLY mode (archived / trashed notes) -->
-        <template v-if="readonly && note">
-          <AttachmentImageGrid
-            v-if="imageAttachments.length > 0"
-            :attachments="imageAttachments"
-            class="-mx-px -mt-px rounded-t-xl overflow-hidden"
-          />
-
-          <div class="p-4">
-            <div v-if="note.title" class="text-lg font-medium text-nord-snow mb-2 tracking-wide">
-              {{ note.title }}
-            </div>
-
-            <div
-              v-if="note.type === 'text' && note.content"
-              class="text-sm text-nord-ice whitespace-pre-wrap"
-            >
-              {{ note.content }}
-            </div>
-
-            <div v-if="note.type === 'checklist'" class="space-y-1">
-              <div
-                v-for="item in note.checklistItems"
-                :key="item.id"
-                class="flex items-center gap-2 text-sm"
-              >
-                <div
-                  class="w-5 h-5 rounded border-2 flex-shrink-0 flex items-center justify-center"
-                  :class="item.isChecked ? 'bg-nord-frost border-nord-frost' : 'border-nord-slate'"
-                >
-                  <svg v-if="item.isChecked" class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.5 12.75l6 6 9-13.5"/>
-                  </svg>
-                </div>
-                <span :class="item.isChecked ? 'line-through text-nord-frost' : 'text-nord-ice'">{{ item.text }}</span>
-              </div>
-            </div>
-
-            <AttachmentFileList
-              v-if="fileAttachments.length > 0"
-              :attachments="fileAttachments"
-              class="mt-2"
-            />
-
-            <div v-if="note.labels.length > 0" class="flex flex-wrap gap-1 mt-3">
-              <LabelChip v-for="label in note.labels" :key="label.id" :label="label" />
-            </div>
-          </div>
-
-          <div class="flex items-center justify-between px-3 pb-3">
-            <div class="flex items-center gap-1">
-              <button
-                v-if="canCopyNote(note)"
-                class="toolbar-btn"
-                title="Copy to Clipboard"
-                @click.stop="copyNoteContent(note)"
-              >
-                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184" />
-                </svg>
-              </button>
-              <template v-if="isArchived">
-                <button class="toolbar-btn" title="Restore" @click="$emit('unarchive', note); $emit('close')">
-                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.85l3.181 3.182m0-4.991v4.99"/>
-                  </svg>
-                </button>
-                <button class="toolbar-btn" title="Trash" @click="$emit('trash', note); $emit('close')">
-                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/>
-                  </svg>
-                </button>
-              </template>
-              <template v-else-if="isTrashed">
-                <button class="toolbar-btn" title="Restore" @click="$emit('restore', note); $emit('close')">
-                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.85l3.181 3.182m0-4.991v4.99"/>
-                  </svg>
-                </button>
-                <button class="toolbar-btn text-nord-ember" title="Delete Permanently" @click="$emit('delete-forever', note); $emit('close')">
-                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/>
-                  </svg>
-                </button>
-              </template>
-            </div>
-            <button
-              class="px-4 py-1.5 text-sm font-medium text-nord-ice hover:bg-nord-graphite rounded-lg transition-colors"
-              @click="$emit('close')"
-            >Close</button>
-          </div>
-        </template>
-
-        <!-- EDIT mode (create / edit notes) -->
-        <template v-else>
-          <NoteEditorContent
-            v-bind="editorProps"
-            :title-error="titleError"
-            @update="onUpdate"
-            @close="handleClose"
-            @archive="onArchive"
-            @trash="onTrash"
-          />
-        </template>
-      </div>
-    </div>
-  </Teleport>
+  <UiModal
+    :labelledby="readonly && note ? titleId : undefined"
+    :label="readonly && note ? undefined : (note ? 'Edit Note' : 'New Note')"
+    backdrop-class="bg-black/60 py-8 overflow-y-auto"
+    panel-class="w-full max-w-xl rounded-xl shadow-2xl border border-nord-graphite bg-nord-obsidian my-auto"
+    @close="handleClose"
+  >
+    <NoteReadonlyView
+      v-if="readonly && note"
+      :note="note"
+      :status="note.isTrashed ? 'trashed' : 'archived'"
+      :title-id="titleId"
+      @close="emit('close')"
+      @unarchive="emitAndClose('unarchive')"
+      @restore="emitAndClose('restore')"
+      @trash="emitAndClose('trash')"
+      @delete-forever="emitAndClose('delete-forever')"
+    />
+
+    <NoteEditorContent
+      v-else
+      :note="note"
+      @close="handleClose"
+      @archive="onArchive"
+      @trash="onTrash"
+    />
+  </UiModal>
 </template>
 
 <script setup lang="ts">
-import type { NewNotePayload, NoteEditorState } from '~/types/editor'
-import type { Note, ChecklistItem } from '#shared/types/notes'
-
-useBodyScrollLock(true)
+import type { Note, NoteType } from '#shared/types/notes'
 
 const props = defineProps<{
   note?: Note
   readonly?: boolean
-  isArchived?: boolean
-  isTrashed?: boolean
-  initialType?: 'text' | 'checklist'
+  initialType?: NoteType
   initialFiles?: File[]
   defaultLabelIds?: string[]
 }>()
 
 const emit = defineEmits<{
-  save: [payload: NewNotePayload]
   close: []
   unarchive: [note: Note]
   trash: [note: Note]
@@ -142,114 +47,66 @@ const emit = defineEmits<{
   'delete-forever': [note: Note]
 }>()
 
-// READ-ONLY attachment split
-const { images: imageAttachments, files: fileAttachments } = splitAttachments(
-  () => props.note?.attachments ?? []
-)
-
-// EDIT mode state
-const { updateNote, archiveNote, unarchiveNote, trashNote } = useNotes()
+const titleId = useId()
+const draft = createNoteDraft(props)
+const { createNote, updateNote, archiveNote, unarchiveNote, trashNote } = useNoteMutations()
 const { show: showSnackbar } = useSnackbar()
-const { canCopyNote, copyNoteContent } = useClipboard()
 const { isUploading } = useNoteUploadState()
-const isCurrentlyUploading = computed(() => props.note?.id ? isUploading(props.note.id) : false)
-
-const type = ref<'text' | 'checklist'>(props.note?.type ?? props.initialType ?? 'text')
-const title = ref(props.note?.title ?? '')
-const content = ref(props.note?.content ?? '')
-const selectedLabelIds = ref<string[]>(
-  props.note?.labels.map((l) => l.id) ?? props.defaultLabelIds ?? []
-)
-const checklistItems = ref<ChecklistItem[]>(
-  props.note?.checklistItems?.map((i) => ({ ...i })) ?? []
-)
-const pendingFiles = ref<File[]>(props.initialFiles ?? [])
-const titleError = ref(false)
-
-const editorProps = computed(() => ({
-  type: type.value,
-  title: title.value,
-  content: content.value,
-  selectedLabelIds: selectedLabelIds.value,
-  checklistItems: checklistItems.value,
-  note: props.note,
-  initialFiles: props.initialFiles,
-}))
-
-const hasContent = computed(() =>
-  title.value.trim() !== '' ||
-  content.value.trim() !== '' ||
-  checklistItems.value.some((i) => i.text.trim() !== '') ||
-  pendingFiles.value.length > 0
-)
 
-const onUpdate = (payload: NoteEditorState) => {
-  type.value = payload.type
-  title.value = payload.title
-  content.value = payload.content
-  selectedLabelIds.value = payload.selectedLabelIds
-  checklistItems.value = payload.checklistItems
-  if (payload.pendingFiles !== undefined) pendingFiles.value = payload.pendingFiles
-  if (title.value.trim()) titleError.value = false
+const emitAndClose = (event: 'unarchive' | 'restore' | 'trash' | 'delete-forever') => {
+  if (!props.note) return
+  // Vue's typed emit can't take a union of event names, so dispatch explicitly
+  if (event === 'unarchive') emit('unarchive', props.note)
+  else if (event === 'restore') emit('restore', props.note)
+  else if (event === 'trash') emit('trash', props.note)
+  else emit('delete-forever', props.note)
+  emit('close')
 }
 
-// After a failed save the next close discards the edits instead of trapping the user in the modal
+// After a failed save the next close discards the changes, so the user is never trapped in the modal
 const saveFailed = ref(false)
 
+const save = async () => {
+  if (props.note) {
+    await updateNote(props.note.id, draftToPayload(draft))
+    return
+  }
+  const payload = draftToPayload(draft)
+  // Notes created from a label page always keep that label
+  payload.labelIds = [...new Set([...(props.defaultLabelIds ?? []), ...payload.labelIds])]
+  await createNote(payload, draft.pendingFiles)
+}
+
 const handleClose = async () => {
-  if (isCurrentlyUploading.value) return
   if (props.readonly) {
     emit('close')
     return
   }
-  if (!props.note) {
-    if (hasContent.value && !title.value.trim()) {
-      titleError.value = true
+  if (props.note && isUploading(props.note.id)) return
+
+  const isNewAndEmpty = !props.note && !draftHasContent(draft)
+  if (!isNewAndEmpty && !saveFailed.value) {
+    if (!draft.title.trim()) {
+      draft.titleError = true
       showSnackbar('Title is Required', 'error')
       return
     }
-    if (hasContent.value) {
-      emit('save', {
-        type: type.value,
-        title: title.value,
-        content: content.value,
-        labelIds: selectedLabelIds.value,
-        checklistItems: checklistItems.value.filter((i) => i.text.trim() !== ''),
-        pendingFiles: pendingFiles.value,
-      })
-    }
-  } else {
-    if (!title.value.trim()) {
-      titleError.value = true
-      showSnackbar('Title is Required', 'error')
+    try {
+      await save()
+    } catch (e) {
+      saveFailed.value = true
+      const fallback = props.note ? 'Failed to Save Note' : 'Failed to Create Note'
+      showSnackbar(`${getErrorMessage(e, fallback)}. Close Again to Discard Changes`, 'error')
       return
     }
-    if (!saveFailed.value) {
-      try {
-        await updateNote(props.note.id, {
-          type: type.value,
-          title: title.value,
-          content: content.value,
-          labelIds: selectedLabelIds.value,
-          checklistItems: checklistItems.value.filter((i) => i.text.trim() !== ''),
-        })
-      } catch (e) {
-        saveFailed.value = true
-        showSnackbar(`${getErrorMessage(e, 'Failed to Save Note')}. Close Again to Discard Changes`, 'error')
-        return
-      }
-    }
   }
   emit('close')
 }
 
 const onArchive = async () => {
   if (!props.note) return
-  if (props.note.isArchived) {
-    await unarchiveNote(props.note.id)
-  } else {
-    await archiveNote(props.note.id)
-  }
+  if (props.note.isArchived) await unarchiveNote(props.note.id)
+  else await archiveNote(props.note.id)
   emit('close')
 }
 
@@ -258,6 +115,4 @@ const onTrash = async () => {
   await trashNote(props.note.id)
   emit('close')
 }
-
-useEscapeKey(handleClose)
 </script>
diff --git a/app/components/note/ReadonlyView.vue b/app/components/note/ReadonlyView.vue
new file mode 100644
index 0000000..7298726
--- /dev/null
+++ b/app/components/note/ReadonlyView.vue
@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <AttachmentImageGrid
+      v-if="imageAttachments.length > 0"
+      :attachments="imageAttachments"
+      class="-mx-px -mt-px rounded-t-xl overflow-hidden"
+    />
+
+    <div class="p-4">
+      <h2 :id="titleId" class="text-lg font-medium text-nord-snow mb-2 tracking-wide">
+        {{ note.title }}
+      </h2>
+
+      <div v-if="note.type === 'text' && note.content" class="text-sm text-nord-ice whitespace-pre-wrap">
+        {{ note.content }}
+      </div>
+
+      <NoteChecklistPreview v-if="note.type === 'checklist'" :items="note.checklistItems" size="md" />
+
+      <AttachmentFileList v-if="fileAttachments.length > 0" :attachments="fileAttachments" class="mt-2" />
+
+      <div v-if="note.labels.length > 0" class="flex flex-wrap gap-1 mt-3">
+        <LabelChip v-for="label in note.labels" :key="label.id" :label="label" />
+      </div>
+    </div>
+
+    <div class="flex items-center justify-between px-3 pb-3">
+      <div class="flex items-center gap-1">
+        <button
+          v-if="canCopyNote(note)"
+          type="button"
+          class="toolbar-btn"
+          title="Copy to Clipboard"
+          aria-label="Copy to Clipboard"
+          @click.stop="copyNoteContent(note)"
+        >
+          <UiIcon name="clipboard" class="w-5 h-5" />
+        </button>
+        <NoteStatusActions
+          :status="status"
+          @restore="status === 'archived' ? emit('unarchive') : emit('restore')"
+          @trash="emit('trash')"
+          @delete="emit('delete-forever')"
+        />
+      </div>
+      <button
+        type="button"
+        class="px-4 py-1.5 text-sm font-medium text-nord-ice hover:bg-nord-graphite rounded-lg transition-colors"
+        @click="emit('close')"
+      >
+        Close
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Note } from '#shared/types/notes'
+
+// Read-only view of an archived or trashed note inside NoteModal.
+const props = defineProps<{
+  note: Note
+  status: 'archived' | 'trashed'
+  titleId: string
+}>()
+
+const emit = defineEmits<{
+  close: []
+  unarchive: []
+  restore: []
+  trash: []
+  'delete-forever': []
+}>()
+
+const { images: imageAttachments, files: fileAttachments } = splitAttachments(() => props.note.attachments)
+const { canCopyNote, copyNoteContent } = useClipboard()
+</script>
diff --git a/app/components/note/Toolbar.vue b/app/components/note/Toolbar.vue
index d3de0a3..57f5b32 100644
--- a/app/components/note/Toolbar.vue
+++ b/app/components/note/Toolbar.vue
@@ -1,94 +1,103 @@
 <template>
-  <div class="flex items-center gap-1 flex-wrap">
-    <!-- Copy content -->
+  <div class="flex items-center gap-1 flex-wrap" role="toolbar" aria-label="Note actions">
     <button
-      v-if="!compact && canCopyCurrentNote"
+      v-if="!compact && canCopyNote(copySource ?? note)"
+      type="button"
       class="toolbar-btn"
       title="Copy to Clipboard"
-      @click.stop="copyNoteContent(copySource)"
+      aria-label="Copy to Clipboard"
+      @click.stop="copyNoteContent(copySource ?? note)"
     >
-      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184" />
-      </svg>
+      <UiIcon name="clipboard" class="w-5 h-5" />
     </button>
 
-    <!-- Add image/file (not in compact/hover mode) -->
-    <button v-if="!compact" class="toolbar-btn" title="Add Images/Files" @click.stop="$emit('add-file')">
-      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 002.112 2.13"/>
-      </svg>
+    <button
+      v-if="!compact"
+      type="button"
+      class="toolbar-btn"
+      title="Add Images/Files"
+      aria-label="Add Images/Files"
+      @click.stop="$emit('add-file')"
+    >
+      <UiIcon name="paperclip" class="w-5 h-5" />
     </button>
 
-    <!-- Label picker (not in compact/hover mode) -->
     <div v-if="!compact" class="relative">
-      <button class="toolbar-btn" title="Set Labels" @click.stop="showLabelPicker = !showLabelPicker">
-        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z"/>
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 6h.008v.008H6V6z"/>
-        </svg>
+      <button
+        type="button"
+        class="toolbar-btn"
+        title="Set Labels"
+        aria-label="Set Labels"
+        aria-haspopup="dialog"
+        :aria-expanded="showLabelPicker"
+        @click.stop="showLabelPicker = !showLabelPicker"
+      >
+        <UiIcon name="tag" class="w-5 h-5" />
       </button>
       <LabelPicker
         v-if="showLabelPicker"
-        :selected-ids="localSelectedLabelIds"
-        @update="onLabel"
+        :selected-ids="selectedLabelIds ?? note?.labels.map((l) => l.id) ?? []"
+        @update="(ids) => $emit('label', ids)"
         @close="showLabelPicker = false"
       />
     </div>
 
-    <!-- Type toggle (checklist) -->
     <button
-      v-if="showTypeToggle"
+      v-if="!compact"
+      type="button"
       class="toolbar-btn"
-      title="Convert to checklist / text"
+      title="Convert to Checklist / Text"
+      aria-label="Convert to Checklist / Text"
       @click.stop="$emit('type-toggle')"
     >
-      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0118 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3l1.5 1.5 3-3.75"/>
-      </svg>
+      <UiIcon name="checklist" class="w-5 h-5" />
     </button>
 
-    <!-- Archive -->
     <button
       v-if="showArchive"
+      type="button"
       class="toolbar-btn"
       :title="note?.isArchived ? 'Unarchive' : 'Archive'"
+      :aria-label="note?.isArchived ? 'Unarchive' : 'Archive'"
       @click.stop="$emit('archive')"
     >
-      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"/>
-      </svg>
+      <UiIcon name="archive" class="w-5 h-5" />
     </button>
 
-    <!-- Trash -->
     <button
       v-if="showTrash"
+      type="button"
       class="toolbar-btn"
       title="Trash"
+      aria-label="Move to Trash"
       @click.stop="$emit('trash')"
     >
-      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/>
-      </svg>
+      <UiIcon name="trash" class="w-5 h-5" />
     </button>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { ChecklistItem, Note } from '#shared/types/notes'
+import type { ChecklistItem, Note, NoteType } from '#shared/types/notes'
 
-const props = defineProps<{
+withDefaults(defineProps<{
   note?: Note
   selectedLabelIds?: string[]
+  /** Compact mode (card hover) shows only archive and trash */
   compact?: boolean
   showArchive?: boolean
   showTrash?: boolean
-  showTypeToggle?: boolean
-  copyType?: 'text' | 'checklist'
-  copyContent?: string
-  copyChecklistItems?: ChecklistItem[]
-}>()
+  /** Unsaved editor content to copy instead of the saved note */
+  copySource?: { type: NoteType; content: string; checklistItems: ChecklistItem[] }
+}>(), {
+  note: undefined,
+  selectedLabelIds: undefined,
+  copySource: undefined,
+  showArchive: true,
+  showTrash: true,
+})
 
-const emit = defineEmits<{
+defineEmits<{
   'add-file': []
   'label': [ids: string[]]
   'archive': []
@@ -97,28 +106,5 @@ const emit = defineEmits<{
 }>()
 
 const showLabelPicker = ref(false)
-const localSelectedLabelIds = ref(props.selectedLabelIds ?? props.note?.labels.map((l) => l.id) ?? [])
-
-watch(() => props.selectedLabelIds, (v) => { if (v !== undefined) localSelectedLabelIds.value = v })
-
-const showArchive = computed(() => props.showArchive !== false)
-const showTrash = computed(() => props.showTrash !== false)
-const showTypeToggle = computed(() => props.showTypeToggle !== false && !props.compact)
-
 const { canCopyNote, copyNoteContent } = useClipboard()
-const copySource = computed(() => {
-  const type = props.copyType ?? props.note?.type
-  if (!type) return undefined
-  return {
-    type,
-    content: props.copyContent ?? props.note?.content ?? '',
-    checklistItems: props.copyChecklistItems ?? props.note?.checklistItems ?? [],
-  }
-})
-const canCopyCurrentNote = computed(() => canCopyNote(copySource.value))
-
-const onLabel = (ids: string[]) => {
-  localSelectedLabelIds.value = ids
-  emit('label', ids)
-}
 </script>
diff --git a/app/composables/useEditorFileUpload.ts b/app/composables/useEditorFileUpload.ts
index 2fcbdaf..b3ed120 100644
--- a/app/composables/useEditorFileUpload.ts
+++ b/app/composables/useEditorFileUpload.ts
@@ -1,83 +1,54 @@
 import type { Note } from '#shared/types/notes'
-
-export function useEditorFileUpload(
-  noteRef: Readonly<Ref<Note | undefined>>,
-  initialFiles?: File[]
-) {
-  const { uploadAttachment } = useNotes()
+import type { NoteDraft } from './useNoteDraft'
+
+/**
+ * File picking for the note editor. Existing notes upload immediately; new notes keep the
+ * files in the draft until the note is created.
+ */
+export function useEditorFileUpload(noteRef: Readonly<Ref<Note | undefined>>, draft: NoteDraft) {
+  const { uploadAttachment } = useNoteAttachments()
   const { validate: validateFiles } = useFileValidation()
-  const { startUpload, endUpload } = useNoteUploadState()
 
-  const pendingFiles = ref<File[]>([...(initialFiles ?? [])])
   const uploadingOtherFiles = ref<File[]>([])
-  const uploading = ref(false)
-  const confirmingPendingIdx = ref<number | null>(null)
 
-  const pendingImageFiles = computed(() =>
-    pendingFiles.value.filter((f) => f.type.startsWith('image/'))
-  )
-  const pendingOtherFiles = computed(() =>
-    pendingFiles.value.filter((f) => !f.type.startsWith('image/'))
-  )
+  // Same rule as the attachment list, so a pending file shows where it will appear once uploaded
+  const isImageFile = (f: File) => isDisplayableImage(f.type, f.name)
+  const pendingImageFiles = computed(() => draft.pendingFiles.filter(isImageFile))
+  const pendingOtherFiles = computed(() => draft.pendingFiles.filter((f) => !isImageFile(f)))
 
   const fileInputRef = ref<HTMLInputElement>()
-
   const triggerFileUpload = () => fileInputRef.value?.click()
 
-  const onFilesSelected = async (e: Event, onPendingAdded?: () => void) => {
+  const onFilesSelected = async (e: Event) => {
     const input = e.target as HTMLInputElement
     const files = validateFiles(Array.from(input.files || []))
-    if (!files.length) { input.value = ''; return }
-
-    if (noteRef.value) {
-      const otherFiles = files.filter((f) => !f.type.startsWith('image/'))
-      if (otherFiles.length > 0) {
-        uploadingOtherFiles.value = [...uploadingOtherFiles.value, ...otherFiles]
-      }
-      uploading.value = true
-      startUpload(noteRef.value.id)
-      try {
-        await uploadAttachment(noteRef.value.id, files)
-      } finally {
-        if (otherFiles.length > 0) {
-          uploadingOtherFiles.value = uploadingOtherFiles.value.filter((f) => !otherFiles.includes(f))
-        }
-        uploading.value = false
-        endUpload(noteRef.value.id)
-      }
-    } else {
-      pendingFiles.value.push(...files)
-      onPendingAdded?.()
-    }
     input.value = ''
-  }
+    if (!files.length) return
 
-  const removePendingImage = (imageIdx: number) => {
-    const file = pendingImageFiles.value[imageIdx]
-    if (file) {
-      pendingFiles.value = pendingFiles.value.filter((f) => f !== file)
-      confirmingPendingIdx.value = null
+    if (!noteRef.value) {
+      draft.pendingFiles = [...draft.pendingFiles, ...files]
+      return
+    }
+    const otherFiles = files.filter((f) => !isImageFile(f))
+    uploadingOtherFiles.value = [...uploadingOtherFiles.value, ...otherFiles]
+    try {
+      await uploadAttachment(noteRef.value.id, files)
+    } finally {
+      uploadingOtherFiles.value = uploadingOtherFiles.value.filter((f) => !otherFiles.includes(f))
     }
   }
 
-  const removePendingOtherFile = (otherIdx: number) => {
-    const file = pendingOtherFiles.value[otherIdx]
-    if (file) {
-      pendingFiles.value = pendingFiles.value.filter((f) => f !== file)
-    }
+  const removePendingFile = (file: File) => {
+    draft.pendingFiles = draft.pendingFiles.filter((f) => f !== file)
   }
 
   return {
-    pendingFiles,
-    uploadingOtherFiles,
-    uploading,
-    confirmingPendingIdx,
     pendingImageFiles,
     pendingOtherFiles,
+    uploadingOtherFiles,
     fileInputRef,
     triggerFileUpload,
     onFilesSelected,
-    removePendingImage,
-    removePendingOtherFile,
+    removePendingFile,
   }
 }
diff --git a/app/composables/useNoteDraft.ts b/app/composables/useNoteDraft.ts
new file mode 100644
index 0000000..984208d
--- /dev/null
+++ b/app/composables/useNoteDraft.ts
@@ -0,0 +1,56 @@
+import type { InjectionKey } from 'vue'
+import type { ChecklistItem, Note, NoteType } from '#shared/types/notes'
+
+/** The note being edited, shared by NoteModal and the editor fields inside it. */
+export interface NoteDraft {
+  type: NoteType
+  title: string
+  content: string
+  labelIds: string[]
+  checklistItems: ChecklistItem[]
+  /** Files picked for a note that doesn't exist yet; uploaded after it is created */
+  pendingFiles: File[]
+  titleError: boolean
+}
+
+const NOTE_DRAFT_KEY: InjectionKey<NoteDraft> = Symbol('note-draft')
+
+export function createNoteDraft(source: {
+  note?: Note
+  initialType?: NoteType
+  initialFiles?: File[]
+  defaultLabelIds?: string[]
+}): NoteDraft {
+  const draft = reactive<NoteDraft>({
+    type: source.note?.type ?? source.initialType ?? 'text',
+    title: source.note?.title ?? '',
+    content: source.note?.content ?? '',
+    labelIds: source.note?.labels.map((l) => l.id) ?? [...(source.defaultLabelIds ?? [])],
+    checklistItems: source.note?.checklistItems.map((i) => ({ ...i })) ?? [],
+    pendingFiles: [...(source.initialFiles ?? [])],
+    titleError: false,
+  })
+  provide(NOTE_DRAFT_KEY, draft)
+  return draft
+}
+
+export function useNoteDraft(): NoteDraft {
+  const draft = inject(NOTE_DRAFT_KEY)
+  if (!draft) throw new Error('useNoteDraft() must be used inside a component that called createNoteDraft()')
+  return draft
+}
+
+export const draftHasContent = (draft: NoteDraft) =>
+  draft.title.trim() !== '' ||
+  draft.content.trim() !== '' ||
+  draft.checklistItems.some((i) => i.text.trim() !== '') ||
+  draft.pendingFiles.length > 0
+
+/** The fields sent to the API when saving (empty checklist rows are dropped). */
+export const draftToPayload = (draft: NoteDraft) => ({
+  type: draft.type,
+  title: draft.title,
+  content: draft.content,
+  labelIds: draft.labelIds,
+  checklistItems: draft.checklistItems.filter((i) => i.text.trim() !== ''),
+})
diff --git a/app/types/editor.ts b/app/types/editor.ts
deleted file mode 100644
index 7e32bee..0000000
--- a/app/types/editor.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { ChecklistItem, NoteType } from '#shared/types/notes'
-
-/** Live editor state emitted by NoteEditorContent on every change. */
-export interface NoteEditorState {
-  type: NoteType
-  title: string
-  content: string
-  selectedLabelIds: string[]
-  checklistItems: ChecklistItem[]
-  pendingFiles?: File[]
-}
-
-/** Payload emitted by NoteModal when a new note is saved. */
-export interface NewNotePayload {
-  type: NoteType
-  title: string
-  content: string
-  labelIds: string[]
-  checklistItems: ChecklistItem[]
-  pendingFiles: File[]
-}

From f1984264ec917d7d2078e423ed3837611e8e235c Mon Sep 17 00:00:00 2001
From: Irfan Fadilah <hello@irfanfadilah.com>
Date: Thu, 15 Oct 2026 10:59:29 +0700
Subject: [PATCH 6/9] Simplify Lightbox API

---
 app/components/app/Lightbox.vue               | 151 ++++++++----------
 app/components/attachment/FileList.vue        |  67 +++-----
 app/components/attachment/ImageGrid.vue       | 121 ++++++--------
 app/composables/useLightbox.ts                |  92 +++++------
 ...htboxTouch.ts => useLightboxNavigation.ts} |  25 ++-
 5 files changed, 190 insertions(+), 266 deletions(-)
 rename app/composables/{useLightboxTouch.ts => useLightboxNavigation.ts} (62%)

diff --git a/app/components/app/Lightbox.vue b/app/components/app/Lightbox.vue
index 1c148ea..f938adb 100644
--- a/app/components/app/Lightbox.vue
+++ b/app/components/app/Lightbox.vue
@@ -2,152 +2,137 @@
   <Teleport to="body">
     <Transition name="lightbox">
       <div
-        v-if="lightboxOpen"
+        v-if="isOpen && current"
+        ref="root"
+        role="dialog"
+        aria-modal="true"
+        :aria-label="`Image ${index + 1} of ${items.length}: ${current.name}`"
         class="fixed left-0 top-0 modal-viewport z-[200] bg-black/90 flex items-center justify-center"
         @click.self="close"
       >
         <!-- Top bar: filename left, actions right -->
         <div class="absolute top-0 left-0 right-0 flex items-center justify-between px-4 py-3 z-10 bg-gradient-to-b from-black/60 to-transparent">
-          <!-- Filename -->
           <span class="text-sm font-medium text-nord-snow truncate max-w-[50vw] select-none block" dir="rtl">
-            {{ lightboxNames[lightboxIndex] || '' }}
+            {{ current.name }}
           </span>
-          <!-- Actions: download, delete, close -->
           <div class="flex items-center gap-2">
             <a
-              :href="lightboxImages[lightboxIndex]"
+              :href="current.url"
               download
-              class="w-10 h-10 flex items-center justify-center rounded-full bg-nord-obsidian/80 hover:bg-nord-graphite text-nord-snow transition-colors"
+              class="lightbox-btn hover:bg-nord-graphite"
               title="Download"
-              @click.stop="onDownload"
+              aria-label="Download"
+              @click.stop="showSnackbar('Download Starting...')"
             >
-              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/>
-              </svg>
+              <UiIcon name="download" class="w-5 h-5" />
             </a>
             <button
-              v-if="lightboxAttachmentIds[lightboxIndex]"
-              class="w-10 h-10 flex items-center justify-center rounded-full bg-nord-obsidian/80 hover:bg-nord-ember/80 text-nord-snow transition-colors"
+              v-if="canDelete"
+              type="button"
+              class="lightbox-btn hover:bg-nord-ember/80"
               title="Delete"
+              aria-label="Delete Image"
               @click.stop="confirmingDelete = true"
             >
-              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/>
-              </svg>
+              <UiIcon name="trash" class="w-5 h-5" />
             </button>
-            <button
-              class="w-10 h-10 flex items-center justify-center rounded-full bg-nord-obsidian/80 hover:bg-nord-graphite text-nord-snow transition-colors"
-              @click="close"
-            >
-              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18 18 6M6 6l12 12"/>
-              </svg>
+            <button ref="closeButton" type="button" class="lightbox-btn hover:bg-nord-graphite" title="Close" aria-label="Close" @click="close">
+              <UiIcon name="x-mark" class="w-5 h-5" />
             </button>
           </div>
         </div>
 
-        <!-- Prev button -->
         <button
-          v-if="lightboxImages.length > 1 && lightboxIndex > 0"
-          class="absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-nord-obsidian/80 hover:bg-nord-graphite text-nord-snow transition-colors z-10"
+          v-if="index > 0"
+          type="button"
+          class="lightbox-btn hover:bg-nord-graphite absolute left-4 top-1/2 -translate-y-1/2 z-10"
+          aria-label="Previous Image"
           @click="prev"
         >
-          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.75 19.5 8.25 12l7.5-7.5"/>
-          </svg>
+          <UiIcon name="chevron-left" class="w-5 h-5" />
         </button>
 
-        <!-- Image -->
         <img
-          :src="lightboxImages[lightboxIndex]"
+          :src="current.url"
+          :alt="current.name"
           class="max-w-[90vw] max-h-[90vh] object-contain select-none rounded-lg shadow-2xl"
           @click.stop
         >
 
-        <!-- Next button -->
         <button
-          v-if="lightboxImages.length > 1 && lightboxIndex < lightboxImages.length - 1"
-          class="absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-nord-obsidian/80 hover:bg-nord-graphite text-nord-snow transition-colors z-10"
+          v-if="index < items.length - 1"
+          type="button"
+          class="lightbox-btn hover:bg-nord-graphite absolute right-4 top-1/2 -translate-y-1/2 z-10"
+          aria-label="Next Image"
           @click="next"
         >
-          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.25 4.5l7.5 7.5-7.5 7.5"/>
-          </svg>
+          <UiIcon name="chevron-right" class="w-5 h-5" />
         </button>
 
-        <!-- Counter -->
         <div
-          v-if="lightboxImages.length > 1"
+          v-if="items.length > 1"
           class="absolute bottom-4 left-1/2 -translate-x-1/2 text-xs text-nord-frost bg-nord-obsidian/70 px-3 py-1 rounded-full"
+          aria-hidden="true"
         >
-          {{ lightboxIndex + 1 }} / {{ lightboxImages.length }}
+          {{ index + 1 }} / {{ items.length }}
         </div>
-
-        <!-- Delete confirmation overlay -->
-        <Transition name="fade">
-          <div
-            v-if="confirmingDelete"
-            class="absolute inset-0 bg-black/60 flex items-center justify-center z-20"
-            @click.self="confirmingDelete = false"
-          >
-            <div class="bg-nord-obsidian rounded-2xl p-6 w-full max-w-xs mx-4 shadow-2xl">
-              <p class="text-nord-snow font-medium mb-1">Are You Sure?</p>
-              <p class="text-nord-frost text-sm mb-5">The image will be permanently deleted from this note and disk.</p>
-              <div class="flex gap-3 justify-end">
-                <button
-                  class="px-4 py-2 text-sm text-nord-ice hover:bg-nord-graphite rounded-lg transition-colors"
-                  @click="confirmingDelete = false"
-                >Cancel</button>
-                <button
-                  class="px-4 py-2 text-sm bg-nord-ember text-white rounded-lg hover:bg-nord-ember/80 transition-colors"
-                  :disabled="deleting"
-                  @click="onDeleteConfirmed"
-                >{{ deleting ? 'Deleting…' : 'Delete' }}</button>
-              </div>
-            </div>
-          </div>
-        </Transition>
       </div>
     </Transition>
+
+    <UiConfirmDialog
+      v-if="confirmingDelete"
+      title="Delete Image?"
+      confirm-label="Delete"
+      :busy="deleting"
+      @cancel="confirmingDelete = false"
+      @confirm="onDeleteConfirmed"
+    >
+      The image will be permanently deleted from this note and disk.
+    </UiConfirmDialog>
   </Teleport>
 </template>
 
 <script setup lang="ts">
-const { lightboxOpen, lightboxImages, lightboxIndex, lightboxAttachmentIds, lightboxNames, close, prev, next, deleteCurrentImage } = useLightbox()
+const { isOpen, items, index, current, canDelete, close, prev, next, deleteCurrent } = useLightbox()
 const { show: showSnackbar } = useSnackbar()
 
-useBodyScrollLock(lightboxOpen)
-
+const root = ref<HTMLElement>()
+const closeButton = ref<HTMLButtonElement>()
 const confirmingDelete = ref(false)
 const deleting = ref(false)
+let returnFocusTo: HTMLElement | null = null
+
+useBodyScrollLock(isOpen)
+useEscapeKey(close, isOpen)
+useLightboxNavigation(() => isOpen.value && !confirmingDelete.value, prev, next)
+
+// Move focus into the lightbox while it's open and give it back afterwards
+watch(isOpen, (open) => {
+  if (open) {
+    returnFocusTo = document.activeElement as HTMLElement | null
+    nextTick(() => closeButton.value?.focus())
+  } else {
+    restoreFocus(returnFocusTo, root.value)
+  }
+})
 
 const onDeleteConfirmed = async () => {
   deleting.value = true
   try {
-    await deleteCurrentImage()
+    await deleteCurrent()
     confirmingDelete.value = false
   } finally {
     deleting.value = false
   }
 }
-
-const onDownload = () => {
-  showSnackbar('Download Starting...')
-}
-
-useLightboxTouch(
-  lightboxOpen,
-  prev,
-  next,
-  close,
-  confirmingDelete,
-  () => { confirmingDelete.value = false }
-)
 </script>
 
 <style scoped>
+@reference "../../assets/css/main.css";
+
+.lightbox-btn {
+  @apply w-10 h-10 flex items-center justify-center rounded-full bg-nord-obsidian/80 text-nord-snow transition-colors;
+}
 .lightbox-enter-active, .lightbox-leave-active { transition: opacity 0.2s; }
 .lightbox-enter-from, .lightbox-leave-to { opacity: 0; }
-.fade-enter-active, .fade-leave-active { transition: opacity 0.15s; }
-.fade-enter-from, .fade-leave-to { opacity: 0; }
 </style>
diff --git a/app/components/attachment/FileList.vue b/app/components/attachment/FileList.vue
index f2ab011..ee53d52 100644
--- a/app/components/attachment/FileList.vue
+++ b/app/components/attachment/FileList.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="mt-2 space-y-1">
-    <div
+  <ul class="mt-2 space-y-1" aria-label="Attachments">
+    <li
       v-for="(att, idx) in displayAttachments"
       :key="att.id"
       class="flex items-center gap-2 group h-6 rounded-lg"
@@ -12,22 +12,19 @@
       @drop.prevent="onDrop(idx)"
       @dragend="onDragEnd"
     >
-      <svg
+      <UiIcon
         v-if="isSortable"
+        name="drag-handle"
         class="w-4 h-4 flex-shrink-0 text-white opacity-40 cursor-grab active:cursor-grabbing touch-none select-none"
-        fill="currentColor" viewBox="0 0 24 24"
         @touchstart.prevent="startTouchDrag(idx)"
-      >
-        <path d="M9 4a1 1 0 100 2 1 1 0 000-2zm6 0a1 1 0 100 2 1 1 0 000-2zM9 10a1 1 0 100 2 1 1 0 000-2zm6 0a1 1 0 100 2 1 1 0 000-2zM9 16a1 1 0 100 2 1 1 0 000-2zm6 0a1 1 0 100 2 1 1 0 000-2z"/>
-      </svg>
-      <svg class="w-4 h-4 text-nord-slate dark:text-nord-frost flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 002.112 2.13"/>
-      </svg>
+      />
+      <UiIcon name="paperclip" class="w-4 h-4 text-nord-slate dark:text-nord-frost flex-shrink-0" />
       <template v-if="renamingId === att.id">
         <input
           :ref="(el) => setRenameRef(att.id, el)"
           v-model="renameValue"
           type="text"
+          aria-label="Filename"
           class="flex-1 text-sm bg-nord-obsidian text-nord-snow rounded-md px-2 py-1 border border-nord-graphite outline-none"
           @keydown.enter.prevent="saveRename(att)"
           @keydown.escape.prevent="cancelRename"
@@ -46,50 +43,51 @@
 
       <!-- Inline confirmation -->
       <template v-if="confirmingId === att.id">
-        <button class="text-sm text-nord-slate dark:text-nord-frost hover:underline" @click.stop="confirmingId = null">Cancel</button>
-        <button class="text-sm text-nord-ember font-medium hover:underline" @click.stop="$emit('delete', att.id); confirmingId = null">Delete</button>
+        <button type="button" class="text-sm text-nord-slate dark:text-nord-frost hover:underline" @click.stop="confirmingId = null">Cancel</button>
+        <button type="button" class="text-sm text-nord-ember font-medium hover:underline" :aria-label="`Confirm Delete ${att.filename}`" @click.stop="$emit('delete', att.id); confirmingId = null">Delete</button>
       </template>
       <template v-else-if="renamingId === att.id">
-        <button class="text-sm text-nord-slate dark:text-nord-frost hover:underline" @click.stop="cancelRename">Cancel</button>
-        <button class="text-sm text-nord-aurora font-medium hover:underline" @click.stop="saveRename(att)">Save</button>
+        <button type="button" class="text-sm text-nord-slate dark:text-nord-frost hover:underline" @click.stop="cancelRename">Cancel</button>
+        <button type="button" class="text-sm text-nord-aurora font-medium hover:underline" @click.stop="saveRename(att)">Save</button>
       </template>
       <template v-else>
         <span class="text-sm text-nord-slate dark:text-nord-frost">{{ formatSize(att.size) }}</span>
         <button
           v-if="deletable && noteId"
+          type="button"
           class="-mr-1 w-6 h-6 flex items-center justify-center rounded-full text-nord-frost hover:bg-nord-graphite/40 transition-all flex-shrink-0"
           title="Rename"
+          :aria-label="`Rename ${att.filename}`"
           @click.stop="startRename(att)"
         >
-          <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.862 4.487a2.25 2.25 0 013.182 3.182L7.5 20.213l-4.5 1.125 1.125-4.5L16.862 4.487z"/>
-          </svg>
+          <UiIcon name="pencil" class="w-3.5 h-3.5" />
         </button>
         <button
           v-if="deletable"
+          type="button"
           class="-ml-1 w-6 h-6 flex items-center justify-center rounded-full text-nord-ember hover:bg-nord-ember/10 transition-all flex-shrink-0"
           title="Delete"
+          :aria-label="`Delete ${att.filename}`"
           @click.stop="confirmingId = att.id"
         >
-          <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/>
-          </svg>
+          <UiIcon name="trash" class="w-3.5 h-3.5" />
         </button>
       </template>
-    </div>
+    </li>
 
-    <div
+    <li
       v-for="(file, idx) in displayUploads"
       :key="`upload-${idx}-${file.name}-${file.lastModified}`"
       class="flex items-center gap-2 h-6 rounded-lg"
+      role="status"
     >
       <div v-if="isSortable" class="w-4 h-4 flex-shrink-0" />
       <div class="w-4 h-4 border border-nord-frost border-t-transparent rounded-full animate-spin flex-shrink-0" />
       <span class="flex-1 text-sm text-nord-slate dark:text-nord-ice truncate">
-        {{ file.name }}
+        <span class="sr-only">Uploading </span>{{ file.name }}
       </span>
-    </div>
-  </div>
+    </li>
+  </ul>
 </template>
 
 <script setup lang="ts">
@@ -108,7 +106,7 @@ const renamingId = ref<string | null>(null)
 const renameValue = ref('')
 const renameInputRefs = ref<Record<string, HTMLInputElement | null>>({})
 const { show: showSnackbar } = useSnackbar()
-const { renameAttachment, reorderAttachments } = useNotes()
+const { renameAttachment, reorderAttachments } = useNoteAttachments()
 const localAttachments = ref<Attachment[]>([])
 const isSortable = computed(() => Boolean(props.deletable && props.noteId))
 const displayAttachments = computed(() => localAttachments.value)
@@ -118,10 +116,6 @@ watch(
   (next) => { localAttachments.value = [...next] },
   { immediate: true }
 )
-const isStandalone = computed(() => {
-  if (import.meta.server) return false
-  return window.matchMedia('(display-mode: standalone)').matches || (window.navigator as Navigator & { standalone?: boolean }).standalone === true
-})
 
 const { dragOverIdx, onDragStart, onDragOver, onDrop, onDragEnd, startTouchDrag } = useDragSort({
   getItems: () => localAttachments.value,
@@ -136,18 +130,7 @@ const { dragOverIdx, onDragStart, onDragOver, onDrop, onDragEnd, startTouchDrag
 
 const openAttachment = (att: Attachment) => {
   showSnackbar('Download Starting...')
-  const url = `/api/files/${att.id}?download=1`
-  if (isStandalone.value) {
-    const link = document.createElement('a')
-    link.href = url
-    link.download = att.filename
-    link.rel = 'noopener'
-    document.body.appendChild(link)
-    link.click()
-    link.remove()
-    return
-  }
-  window.open(url, '_blank', 'noopener')
+  downloadFile(`/api/files/${att.id}?download=1`, att.filename)
 }
 
 const startRename = async (att: Attachment) => {
diff --git a/app/components/attachment/ImageGrid.vue b/app/components/attachment/ImageGrid.vue
index b3aed65..a562254 100644
--- a/app/components/attachment/ImageGrid.vue
+++ b/app/components/attachment/ImageGrid.vue
@@ -1,78 +1,58 @@
 <template>
-  <div class="grid" :class="visibleAttachments.length === 1 ? 'grid-cols-1' : 'grid-cols-2'">
-    <div
+  <ul class="grid" :class="visibleAttachments.length === 1 ? 'grid-cols-1' : 'grid-cols-2'">
+    <li
       v-for="(att, idx) in visibleAttachments"
       :key="att.id"
       class="relative group"
     >
-      <img
-        :src="`/api/files/${att.id}?thumb=true`"
-        :alt="att.filename"
-        class="w-full object-cover cursor-zoom-in"
-        :class="visibleAttachments.length === 1 ? 'max-h-56' : 'h-32'"
-        loading="lazy"
-        @error="(e) => fallbackToOriginal(e, att.id)"
-        @click.stop="openLightbox(idx)"
-      >
-
-      <!-- +n more overlay on the last visible slot -->
-      <div
-        v-if="hiddenCount > 0 && idx === visibleAttachments.length - 1"
-        class="absolute inset-0 bg-black/60 flex items-center justify-center cursor-zoom-in"
+      <button
+        type="button"
+        class="block w-full cursor-zoom-in focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-nord-aurora"
+        :aria-label="isOverflowTile(idx) ? `View all ${attachments.length} images` : `View ${att.filename}`"
         @click.stop="openLightbox(idx)"
       >
-        <span class="text-white text-lg font-semibold">+{{ hiddenCount }} more</span>
-      </div>
+        <img
+          :src="`/api/files/${att.id}?thumb=true`"
+          :alt="att.filename"
+          class="w-full object-cover"
+          :class="visibleAttachments.length === 1 ? 'max-h-56' : 'h-32'"
+          loading="lazy"
+          @error="(e) => fallbackToOriginal(e, att.id)"
+        >
+        <!-- +n more overlay on the last visible slot -->
+        <span
+          v-if="isOverflowTile(idx)"
+          class="absolute inset-0 bg-black/60 flex items-center justify-center text-white text-lg font-semibold"
+        >
+          +{{ hiddenCount }} more
+        </span>
+      </button>
 
-      <!-- Trash button (hover) -->
       <button
-        v-if="deletable && confirmingId !== att.id && !(hiddenCount > 0 && idx === visibleAttachments.length - 1)"
-        class="absolute top-1 right-1 w-7 h-7 bg-black/60 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity hover:bg-nord-ember/80"
+        v-if="deletable && confirmingId !== att.id && !isOverflowTile(idx)"
+        type="button"
+        class="absolute top-1 right-1 w-7 h-7 bg-black/60 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity hover:bg-nord-ember/80"
         title="Delete"
+        :aria-label="`Delete ${att.filename}`"
         @click.stop="confirmingId = att.id"
       >
-        <svg class="w-3.5 h-3.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/>
-        </svg>
+        <UiIcon name="trash" class="w-3.5 h-3.5 text-white" />
       </button>
 
-      <!-- Inline confirmation overlay -->
-      <div
+      <UiInlineConfirm
         v-if="deletable && confirmingId === att.id"
-        class="absolute inset-0 bg-black/70 flex flex-col items-center justify-center gap-2 rounded"
-        @click.stop
-      >
-        <p class="text-white text-xs font-medium">Are You Sure?</p>
-        <div class="flex gap-2">
-          <button
-            class="px-3 py-1 text-xs bg-nord-slate text-nord-snow rounded-full hover:bg-nord-graphite transition-colors"
-            @click.stop="confirmingId = null"
-          >
-            Cancel
-          </button>
-          <button
-            class="px-3 py-1 text-xs bg-nord-ember text-white rounded-full hover:bg-nord-ember/80 transition-colors"
-            @click.stop="onConfirmDelete(att.id)"
-          >
-            Delete
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
+        message="Delete Image?"
+        confirm-label="Delete"
+        @confirm="onConfirmDelete(att.id)"
+        @cancel="confirmingId = null"
+      />
+    </li>
+  </ul>
 </template>
 
 <script setup lang="ts">
 import type { Attachment } from '#shared/types/notes'
 
-// Fall back from the thumbnail to the original once; retrying a missing original would loop forever
-const fallbackToOriginal = (e: Event, attId: string) => {
-  const img = e.target as HTMLImageElement
-  if (img.dataset.fallback) return
-  img.dataset.fallback = '1'
-  img.src = `/api/files/${attId}`
-}
-
 const props = defineProps<{
   attachments: Attachment[]
   deletable?: boolean
@@ -84,23 +64,26 @@ const emit = defineEmits<{ delete: [id: string] }>()
 const { open } = useLightbox()
 const confirmingId = ref<string | null>(null)
 
-const visibleAttachments = computed(() => {
-  if (!props.maxVisible || props.attachments.length <= props.maxVisible) {
-    return props.attachments
-  }
-  return props.attachments.slice(0, props.maxVisible)
-})
+const visibleAttachments = computed(() =>
+  props.maxVisible ? props.attachments.slice(0, props.maxVisible) : props.attachments
+)
+const hiddenCount = computed(() => props.attachments.length - visibleAttachments.value.length)
+const isOverflowTile = (idx: number) => hiddenCount.value > 0 && idx === visibleAttachments.value.length - 1
 
-const hiddenCount = computed(() => {
-  if (!props.maxVisible) return 0
-  return Math.max(0, props.attachments.length - props.maxVisible)
-})
+// Fall back from the thumbnail to the original once; retrying a missing original would loop forever
+const fallbackToOriginal = (e: Event, attId: string) => {
+  const img = e.target as HTMLImageElement
+  if (img.dataset.fallback) return
+  img.dataset.fallback = '1'
+  img.src = `/api/files/${attId}`
+}
 
 const openLightbox = (startIndex: number) => {
-  const urls = props.attachments.map((a) => `/api/files/${a.id}`)
-  const ids = props.attachments.map((a) => a.id)
-  const names = props.attachments.map((a) => a.filename)
-  open(urls, startIndex, ids, props.onDelete, names)
+  open({
+    items: props.attachments.map((a) => ({ id: a.id, url: `/api/files/${a.id}`, name: a.filename })),
+    startIndex,
+    onDelete: props.onDelete,
+  })
 }
 
 const onConfirmDelete = (id: string) => {
diff --git a/app/composables/useLightbox.ts b/app/composables/useLightbox.ts
index cfe66aa..94c764f 100644
--- a/app/composables/useLightbox.ts
+++ b/app/composables/useLightbox.ts
@@ -1,73 +1,53 @@
-// Stored outside useState so it survives across composable calls without needing Nuxt context
-// Resolving to false means the delete failed and the image stays in the lightbox
+export interface LightboxItem {
+  url: string
+  name: string
+  /** Attachment id; items with an id can be deleted from the lightbox */
+  id?: string
+}
+
+/** Resolves to false when the delete failed, so the image stays in the lightbox. */
 type DeleteCallback = (id: string) => Promise<boolean | undefined>
-let _onDeleteCallback: DeleteCallback | null = null
 
-export function useLightbox() {
-  const lightboxImages = useState<string[]>('lightbox-images', () => [])
-  const lightboxIndex = useState<number>('lightbox-index', () => 0)
-  const lightboxOpen = useState<boolean>('lightbox-open', () => false)
-  const lightboxAttachmentIds = useState<string[]>('lightbox-att-ids', () => [])
-  const lightboxNames = useState<string[]>('lightbox-names', () => [])
+// Functions can't live in useState (it must be serializable), so the callback is module-level
+let onDeleteCallback: DeleteCallback | null = null
 
-  const open = (
-    images: string[],
-    startIndex = 0,
-    attachmentIds: string[] = [],
-    onDelete?: DeleteCallback,
-    names: string[] = [],
-  ) => {
-    lightboxImages.value = images
-    lightboxIndex.value = startIndex
-    lightboxOpen.value = true
-    lightboxAttachmentIds.value = attachmentIds
-    lightboxNames.value = names
-    _onDeleteCallback = onDelete ?? null
-  }
+export function useLightbox() {
+  const items = useState<LightboxItem[]>('lightbox-items', () => [])
+  const index = useState<number>('lightbox-index', () => 0)
+  const isOpen = useState<boolean>('lightbox-open', () => false)
 
-  const close = () => {
-    lightboxOpen.value = false
-  }
+  const current = computed(() => items.value[index.value])
 
-  const prev = () => {
-    if (lightboxIndex.value > 0) lightboxIndex.value--
+  const open = (options: { items: LightboxItem[]; startIndex?: number; onDelete?: DeleteCallback }) => {
+    items.value = options.items
+    index.value = options.startIndex ?? 0
+    onDeleteCallback = options.onDelete ?? null
+    isOpen.value = true
   }
 
-  const next = () => {
-    if (lightboxIndex.value < lightboxImages.value.length - 1) lightboxIndex.value++
-  }
+  const close = () => { isOpen.value = false }
+  const prev = () => { if (index.value > 0) index.value-- }
+  const next = () => { if (index.value < items.value.length - 1) index.value++ }
 
-  const deleteCurrentImage = async () => {
-    const id = lightboxAttachmentIds.value[lightboxIndex.value]
-    if (!id || !_onDeleteCallback) return
-    if ((await _onDeleteCallback(id)) === false) return
-    // Remove deleted image from lightbox arrays
-    const imgs = [...lightboxImages.value]
-    const ids = [...lightboxAttachmentIds.value]
-    const names = [...lightboxNames.value]
-    imgs.splice(lightboxIndex.value, 1)
-    ids.splice(lightboxIndex.value, 1)
-    names.splice(lightboxIndex.value, 1)
-    if (imgs.length === 0) {
-      close()
-    } else {
-      lightboxImages.value = imgs
-      lightboxAttachmentIds.value = ids
-      lightboxNames.value = names
-      if (lightboxIndex.value >= imgs.length) lightboxIndex.value = imgs.length - 1
-    }
+  const deleteCurrent = async () => {
+    const id = current.value?.id
+    if (!id || !onDeleteCallback) return
+    if ((await onDeleteCallback(id)) === false) return
+    items.value = items.value.filter((_, i) => i !== index.value)
+    if (items.value.length === 0) close()
+    else if (index.value >= items.value.length) index.value = items.value.length - 1
   }
 
   return {
-    lightboxOpen: readonly(lightboxOpen),
-    lightboxImages: readonly(lightboxImages),
-    lightboxIndex: readonly(lightboxIndex),
-    lightboxAttachmentIds: readonly(lightboxAttachmentIds),
-    lightboxNames: readonly(lightboxNames),
+    isOpen: readonly(isOpen),
+    items: readonly(items),
+    index: readonly(index),
+    current,
+    canDelete: computed(() => !!current.value?.id && !!onDeleteCallback),
     open,
     close,
     prev,
     next,
-    deleteCurrentImage,
+    deleteCurrent,
   }
 }
diff --git a/app/composables/useLightboxTouch.ts b/app/composables/useLightboxNavigation.ts
similarity index 62%
rename from app/composables/useLightboxTouch.ts
rename to app/composables/useLightboxNavigation.ts
index f77924f..2b8130b 100644
--- a/app/composables/useLightboxTouch.ts
+++ b/app/composables/useLightboxNavigation.ts
@@ -1,23 +1,16 @@
+const SWIPE_THRESHOLD_PX = 50
+
 /**
- * Handles keyboard and touch/swipe navigation for the lightbox.
+ * Keyboard (arrow keys) and swipe navigation for the lightbox while it is open and
+ * `enabled` (e.g. not while a confirm dialog is showing).
  */
-export function useLightboxTouch(
-  isOpen: Readonly<Ref<boolean>>,
+export function useLightboxNavigation(
+  enabled: MaybeRefOrGetter<boolean>,
   onPrev: () => void,
   onNext: () => void,
-  onClose: () => void,
-  isConfirming: Readonly<Ref<boolean>>,
-  cancelConfirm: () => void
 ) {
-  const SWIPE_THRESHOLD = 50
-
   const onKey = (e: KeyboardEvent) => {
-    if (!isOpen.value) return
-    if (e.key === 'Escape') {
-      if (isConfirming.value) cancelConfirm()
-      else onClose()
-    }
-    if (isConfirming.value) return
+    if (!toValue(enabled)) return
     if (e.key === 'ArrowLeft') onPrev()
     if (e.key === 'ArrowRight') onNext()
   }
@@ -25,9 +18,9 @@ export function useLightboxTouch(
   let touchStartX = 0
   const onTouchStart = (e: TouchEvent) => { touchStartX = e.touches[0]?.clientX ?? 0 }
   const onTouchEnd = (e: TouchEvent) => {
-    if (!isOpen.value || isConfirming.value) return
+    if (!toValue(enabled)) return
     const dx = (e.changedTouches[0]?.clientX ?? 0) - touchStartX
-    if (Math.abs(dx) < SWIPE_THRESHOLD) return
+    if (Math.abs(dx) < SWIPE_THRESHOLD_PX) return
     if (dx < 0) onNext()
     else onPrev()
   }

From 352acc7b4b6a176086fe0d1ee99c47ba2f8f636c Mon Sep 17 00:00:00 2001
From: Irfan Fadilah <hello@irfanfadilah.com>
Date: Thu, 15 Oct 2026 10:59:29 +0700
Subject: [PATCH 7/9] Improve Accessibility

---
 app/assets/css/main.css             |   3 +
 app/components/app/BackToTop.vue    |   6 +-
 app/components/app/Header.vue       |  12 +-
 app/components/app/SearchBar.vue    |  21 ++-
 app/components/app/Sidebar.vue      |  39 ++---
 app/components/app/Snackbar.vue     |  13 +-
 app/components/auth/PinInput.vue    |   5 +-
 app/components/auth/PinLogin.vue    |  26 +--
 app/components/auth/PinPad.vue      |  32 +---
 app/components/label/Manager.vue    | 254 +++++++++++++---------------
 app/components/label/Picker.vue     | 128 +++++++-------
 app/components/note/ContextMenu.vue |  83 ++++-----
 app/components/ui/AlertBanner.vue   |   5 +-
 app/layouts/default.vue             |  17 +-
 14 files changed, 305 insertions(+), 339 deletions(-)

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index faf738c..2b1659d 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -162,3 +162,6 @@
   40%, 80% { transform: translateX(6px); }
 }
 .animate-shake { animation: shake 0.5s ease-in-out; }
+
+/* type="search" inputs use our own clear button */
+input[type="search"]::-webkit-search-cancel-button { display: none; }
diff --git a/app/components/app/BackToTop.vue b/app/components/app/BackToTop.vue
index e31be0e..3d5dca4 100644
--- a/app/components/app/BackToTop.vue
+++ b/app/components/app/BackToTop.vue
@@ -9,18 +9,18 @@
   >
     <button
       v-if="showButton"
+      type="button"
       class="fixed bottom-6 right-6 z-40 w-11 h-11 rounded-full bg-nord-blue hover:bg-nord-frost text-white shadow-lg flex items-center justify-center transition-colors duration-150"
       aria-label="Back to top"
       @click="scrollToTop"
     >
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18" />
-      </svg>
+      <UiIcon name="arrow-up" class="w-5 h-5" />
     </button>
   </Transition>
 </template>
 
 <script setup lang="ts">
+// Show the button once the user has scrolled this far down (px)
 const THRESHOLD = 1000
 
 const showButton = ref(false)
diff --git a/app/components/app/Header.vue b/app/components/app/Header.vue
index 679d489..6c248df 100644
--- a/app/components/app/Header.vue
+++ b/app/components/app/Header.vue
@@ -3,15 +3,13 @@
     <!-- Left: hamburger, always w-16 -->
     <div class="w-16 flex-shrink-0 flex items-center justify-center">
       <button
+        type="button"
         class="w-10 h-10 rounded-full flex items-center justify-center hover:bg-nord-graphite transition-colors"
+        aria-label="Toggle Menu"
+        aria-controls="app-sidebar"
         @click="$emit('toggle-sidebar')"
       >
-        <svg
-          class="w-6 h-6 text-nord-ice"
-          fill="none" stroke="currentColor" viewBox="0 0 24 24"
-        >
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/>
-        </svg>
+        <UiIcon name="menu" class="w-6 h-6 text-nord-ice" />
       </button>
     </div>
 
@@ -19,8 +17,6 @@
     <div class="flex-1 min-w-0 px-4">
       <AppSearchBar class="w-full max-w-[600px] mx-auto" />
     </div>
-
-    <!-- Right: intentionally removed — search bar takes full remaining width -->
   </header>
 </template>
 
diff --git a/app/components/app/SearchBar.vue b/app/components/app/SearchBar.vue
index 2ad1cbe..de981b8 100644
--- a/app/components/app/SearchBar.vue
+++ b/app/components/app/SearchBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <form class="relative flex-1 w-full" @submit.prevent="submit">
+  <form class="relative flex-1 w-full" role="search" @submit.prevent="submit">
     <div
       class="flex items-center bg-nord-graphite rounded-xl overflow-hidden transition-all"
       :class="focused ? 'ring-2 ring-nord-aurora' : ''"
@@ -9,11 +9,10 @@
         type="submit"
         class="w-10 h-10 flex items-center justify-center flex-shrink-0 hover:bg-nord-slate transition-colors"
         :title="searching ? 'Searching…' : 'Search'"
+        :aria-label="searching ? 'Searching…' : 'Search'"
       >
-        <svg v-if="!searching" class="w-5 h-5 text-nord-frost" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/>
-        </svg>
-        <svg v-else class="w-4 h-4 text-nord-aurora animate-spin" fill="none" viewBox="0 0 24 24">
+        <UiIcon v-if="!searching" name="search" class="w-5 h-5 text-nord-frost" />
+        <svg v-else class="w-4 h-4 text-nord-aurora animate-spin" fill="none" viewBox="0 0 24 24" aria-hidden="true">
           <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
           <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"/>
         </svg>
@@ -22,12 +21,13 @@
       <input
         ref="inputEl"
         v-model="localQuery"
-        type="text"
+        type="search"
         placeholder="Search"
+        aria-label="Search Notes"
         class="flex-1 bg-transparent px-2 py-3 text-sm text-nord-snow outline-none placeholder-nord-frost min-w-0"
         @focus="focused = true"
         @blur="focused = false"
-        @keydown.escape="clear"
+        @keydown.escape.prevent="clear"
       >
 
       <!-- Clear button -->
@@ -35,12 +35,11 @@
         v-if="localQuery || searchResults"
         type="button"
         class="w-10 h-10 flex items-center justify-center hover:bg-nord-slate transition-colors flex-shrink-0"
-        title="Clear search"
+        title="Clear Search"
+        aria-label="Clear Search"
         @click="clear"
       >
-        <svg class="w-4 h-4 text-nord-frost" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18 18 6M6 6l12 12"/>
-        </svg>
+        <UiIcon name="x-mark" class="w-4 h-4 text-nord-frost" />
       </button>
     </div>
   </form>
diff --git a/app/components/app/Sidebar.vue b/app/components/app/Sidebar.vue
index ac20035..aa3bf18 100644
--- a/app/components/app/Sidebar.vue
+++ b/app/components/app/Sidebar.vue
@@ -5,23 +5,23 @@
       <div
         v-if="open === true"
         class="fixed inset-0 bg-black/30 z-20 md:hidden"
+        aria-hidden="true"
         @click="$emit('close')"
       />
     </Transition>
 
     <!-- Sidebar — always visible, width toggles -->
     <aside
+      id="app-sidebar"
       class="fixed top-0 left-0 bottom-0 z-30 bg-nord-mist dark:bg-nord-obsidian flex flex-col overflow-hidden pt-16"
       :class="[asideWidthCls, animated ? 'transition-[width] duration-300 ease-in-out' : '']"
     >
       <!-- Fixed nav items (never scroll) -->
-      <nav class="flex-shrink-0 pt-2">
+      <nav class="flex-shrink-0 pt-2" aria-label="Main">
         <!-- All Notes -->
         <NuxtLink to="/" class="flex items-center h-12 cursor-pointer">
           <div :class="innerCls($route.path === '/')">
-            <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/>
-            </svg>
+            <UiIcon name="document" class="nav-icon" />
             <span :class="labelCls">All Notes</span>
           </div>
         </NuxtLink>
@@ -29,9 +29,7 @@
         <!-- Archive -->
         <NuxtLink to="/archive" class="flex items-center h-12 cursor-pointer">
           <div :class="innerCls($route.path === '/archive')">
-            <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"/>
-            </svg>
+            <UiIcon name="archive" class="nav-icon" />
             <span :class="labelCls">Archive</span>
           </div>
         </NuxtLink>
@@ -39,9 +37,7 @@
         <!-- Trash -->
         <NuxtLink to="/trash" class="flex items-center h-12 cursor-pointer">
           <div :class="innerCls($route.path === '/trash')">
-            <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/>
-            </svg>
+            <UiIcon name="trash" class="nav-icon" />
             <span :class="labelCls">Trash</span>
           </div>
         </NuxtLink>
@@ -50,18 +46,16 @@
         <div class="border-t border-nord-ice dark:border-nord-graphite my-2 mx-3" />
 
         <!-- Manage Labels -->
-        <button class="flex items-center h-12 w-full cursor-pointer" @click="showLabelManager = true">
+        <button type="button" class="flex items-center h-12 w-full cursor-pointer" @click="showLabelManager = true">
           <div :class="innerCls(false)">
-            <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/>
-            </svg>
+            <UiIcon name="pencil-square" class="nav-icon" />
             <span :class="labelCls">Manage Labels</span>
           </div>
         </button>
       </nav>
 
       <!-- Scrollable labels list -->
-      <div class="flex-1 overflow-y-auto overflow-x-hidden">
+      <nav class="flex-1 overflow-y-auto overflow-x-hidden" aria-label="Labels">
         <NuxtLink
           v-for="label in labels"
           :key="label.id"
@@ -69,15 +63,11 @@
           class="flex items-center h-12 cursor-pointer"
         >
           <div :class="innerCls($route.params.id === label.id)">
-            <svg class="nav-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z"/>
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 6h.008v.008H6V6z"/>
-            </svg>
+            <UiIcon name="tag" class="nav-icon" />
             <span :class="[labelCls, 'truncate']">{{ label.name }}</span>
           </div>
         </NuxtLink>
-      </div>
-
+      </nav>
     </aside>
 
     <LabelManager v-if="showLabelManager" @close="showLabelManager = false" />
@@ -94,8 +84,7 @@ const showLabelManager = ref(false)
 // Lock body scroll on mobile only when sidebar is open
 const isMobile = ref(false)
 const updateIsMobile = () => {
-  if (typeof window === 'undefined') return
-  isMobile.value = window.innerWidth < 768
+  isMobile.value = isMobileViewport()
 }
 onMounted(() => {
   updateIsMobile()
@@ -108,7 +97,7 @@ const isMobileSidebarOpen = computed(() => props.open === true && isMobile.value
 useBodyScrollLock(isMobileSidebarOpen)
 
 // Close mobile sidebar on Escape
-useEscapeKey(() => { if (props.open === true) emit('close') })
+useEscapeKey(() => emit('close'), isMobileSidebarOpen)
 
 const asideWidthCls = computed(() => {
   if (props.open === null) return 'w-16 md:w-64'
@@ -129,8 +118,6 @@ const labelCls = computed(() => [
     : props.open ? 'max-w-[180px] opacity-100 ml-3' : 'max-w-0 opacity-0',
 ])
 
-// pl-[20px]: centers the 8px dot in the 48px-wide pill (mx-2 on w-16 sidebar)
-// pl-3: standard left padding when expanded and text is visible
 </script>
 
 <style scoped>
diff --git a/app/components/app/Snackbar.vue b/app/components/app/Snackbar.vue
index ddbbb48..cc22185 100644
--- a/app/components/app/Snackbar.vue
+++ b/app/components/app/Snackbar.vue
@@ -1,5 +1,8 @@
 <template>
   <Teleport to="body">
+    <!-- Always-present live region so screen readers announce each message -->
+    <div class="sr-only" role="status" aria-live="polite">{{ queue[0]?.type === 'error' ? '' : queue[0]?.message }}</div>
+    <div class="sr-only" role="alert">{{ queue[0]?.type === 'error' ? queue[0]?.message : '' }}</div>
     <Transition name="snackbar">
       <div
         v-if="queue.length > 0"
@@ -8,11 +11,15 @@
           ? 'bg-nord-ember text-white'
           : 'bg-nord-blue text-white'"
       >
-        <span class="flex-1">{{ queue[0]?.message }}</span>
+        <span class="flex-1" aria-hidden="true">{{ queue[0]?.message }}</span>
         <button
-          class="hover:opacity-80 transition-opacity ml-2 text-lg leading-none text-white/70"
+          type="button"
+          class="hover:opacity-80 transition-opacity ml-2 text-white/70"
+          aria-label="Dismiss"
           @click="dismiss"
-        >✕</button>
+        >
+          <UiIcon name="x-mark" class="w-4 h-4" />
+        </button>
       </div>
     </Transition>
   </Teleport>
diff --git a/app/components/auth/PinInput.vue b/app/components/auth/PinInput.vue
index add9fb9..41fd5ad 100644
--- a/app/components/auth/PinInput.vue
+++ b/app/components/auth/PinInput.vue
@@ -5,7 +5,8 @@
     type="tel"
     inputmode="numeric"
     pattern="[0-9]*"
-    maxlength="6"
+    :maxlength="CONSTRAINTS.OTP_LENGTH"
+    aria-label="One-Time Code"
     :autocomplete="autocomplete"
     class="pin-input w-full max-w-[240px] mx-auto block text-center text-3xl tracking-[0.6em] indent-[0.6em] font-bold border-2 rounded-xl px-4 py-4 bg-nord-obsidian outline-none transition-colors placeholder-nord-slate"
     :class="inputClass"
@@ -20,8 +21,6 @@
 defineProps<{
   autocomplete?: string
   disabled?: boolean
-  shake?: boolean
-  cooldown?: boolean
   inputClass?: string | Record<string, boolean>
 }>()
 
diff --git a/app/components/auth/PinLogin.vue b/app/components/auth/PinLogin.vue
index 693ecf2..52b283c 100644
--- a/app/components/auth/PinLogin.vue
+++ b/app/components/auth/PinLogin.vue
@@ -2,7 +2,7 @@
   <div class="w-full max-w-sm mx-auto text-center flex flex-col items-stretch">
     <div class="mb-8">
       <div class="w-16 h-16 mx-auto mb-4">
-        <img src="/icon.svg" alt="OneArctic" class="w-16 h-16" >
+        <img src="/icon.svg" alt="" class="w-16 h-16">
       </div>
       <h1 class="text-2xl font-semibold text-nord-snow">OneArctic</h1>
       <p class="text-nord-frost mt-2 text-sm">Enter OTP to Continue</p>
@@ -27,13 +27,15 @@
     <div class="md:hidden">
       <div
         class="w-full max-w-[240px] mx-auto mb-8 flex items-center justify-center gap-3"
+        role="img"
+        :aria-label="`${code.length} of ${OTP_LENGTH} digits entered`"
         :class="{
           'animate-shake': shake,
           'opacity-60': cooldown > 0 && !shake,
         }"
       >
         <span
-          v-for="idx in 6"
+          v-for="idx in OTP_LENGTH"
           :key="idx"
           class="w-[1rem] h-[1rem] rounded-full border-2"
           :class="idx <= code.length ? 'bg-nord-snow border-nord-snow' : 'border-nord-graphite'"
@@ -48,11 +50,11 @@
       </div>
     </div>
 
-    <!-- Cooldown / error (reserve space to avoid layout shift) -->
-    <div class="mt-8 min-h-[44px]">
+    <!-- Cooldown / error (reserve space to avoid layout shift); announced to screen readers -->
+    <div class="mt-8 min-h-[44px]" role="alert">
       <div v-if="cooldown > 0" class="flex flex-col items-center gap-1">
-        <p class="text-nord-orange text-sm font-medium">Too many wrong attempts</p>
-        <p class="text-nord-frost text-sm">Try again in <span class="font-bold text-nord-yellow">{{ cooldown }}s</span></p>
+        <p class="text-nord-orange text-sm font-medium">Too Many Wrong Attempts</p>
+        <p class="text-nord-frost text-sm">Try Again in <span class="font-bold text-nord-yellow">{{ cooldown }}s</span></p>
       </div>
       <div v-else-if="error">
         <p class="text-nord-ember text-sm">{{ error }}</p>
@@ -66,6 +68,8 @@
 
 <script setup lang="ts">
 const { login } = useAuth()
+const OTP_LENGTH = CONSTRAINTS.OTP_LENGTH
+const SHAKE_DURATION_MS = 600
 
 const code = ref('')
 const error = ref('')
@@ -96,14 +100,14 @@ const startCooldown = (seconds: number) => {
 
 const onInput = async () => {
   if (cooldown.value > 0) return
-  code.value = code.value.replace(/\D/g, '').slice(0, 6)
+  code.value = code.value.replace(/\D/g, '').slice(0, OTP_LENGTH)
   error.value = ''
 
   await submitIfComplete()
 }
 
 const submitIfComplete = async () => {
-  if (code.value.length !== 6) return
+  if (code.value.length !== OTP_LENGTH) return
   loading.value = true
   try {
     await login(code.value)
@@ -118,14 +122,14 @@ const submitIfComplete = async () => {
     } else if (status === 404) {
       error.value = 'OTP Not Configured'
     } else {
-      error.value = 'Wrong OTP. Try again.'
+      error.value = 'Wrong OTP. Try Again.'
       attemptsLeft.value = data.attemptsLeft ?? null
       shake.value = true
       setTimeout(() => {
         shake.value = false
         code.value = ''
         pinInputRef.value?.focus()
-      }, 600)
+      }, SHAKE_DURATION_MS)
     }
   } finally {
     loading.value = false
@@ -140,7 +144,7 @@ const onPadPress = async (key: string) => {
     return
   }
   if (!/^\d$/.test(key)) return
-  if (code.value.length >= 6) return
+  if (code.value.length >= OTP_LENGTH) return
   code.value += key
   await submitIfComplete()
 }
diff --git a/app/components/auth/PinPad.vue b/app/components/auth/PinPad.vue
index 16f62b7..158cba5 100644
--- a/app/components/auth/PinPad.vue
+++ b/app/components/auth/PinPad.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="grid grid-cols-3 gap-6 w-full max-w-[260px] mx-auto">
+  <div class="grid grid-cols-3 gap-6 w-full max-w-[260px] mx-auto" role="group" aria-label="Number Pad">
     <button
       v-for="key in keys"
       :key="key"
@@ -9,23 +9,12 @@
         'col-start-2': key === '0',
         'col-start-3': key === 'backspace',
       }"
-      :disabled="disabled || key === ''"
+      :disabled="disabled"
+      :aria-label="key === 'backspace' ? 'Delete Digit' : key"
       @click="onKeyPress(key)"
     >
       <span v-if="key !== 'backspace'">{{ key }}</span>
-      <svg
-        v-else
-        class="w-5 h-5 -translate-x-0.5"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="1.8"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        aria-hidden="true"
-      >
-        <path d="M12 9l3 3-3 3m3-3H9m-6 0l6.75-7.5A1.5 1.5 0 0110.86 4.5h9.64a1.5 1.5 0 011.5 1.5v12a1.5 1.5 0 01-1.5 1.5h-9.64a1.5 1.5 0 01-1.11-.5L3 12z" />
-      </svg>
+      <UiIcon v-else name="backspace" class="w-5 h-5 -translate-x-0.5" />
     </button>
   </div>
 </template>
@@ -40,7 +29,7 @@ const emit = defineEmits<{ press: [key: string] }>()
 const keys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', 'backspace']
 
 const onKeyPress = (key: string) => {
-  if (!key || props.disabled) return
+  if (props.disabled) return
   if (typeof navigator !== 'undefined' && 'vibrate' in navigator) {
     navigator.vibrate(12)
   }
@@ -49,14 +38,3 @@ const onKeyPress = (key: string) => {
 
 </script>
 
-<style scoped>
-.pad-press {
-  animation: pad-press 120ms ease-out;
-}
-
-@keyframes pad-press {
-  0% { transform: scale(1); }
-  50% { transform: scale(0.96); }
-  100% { transform: scale(1); }
-}
-</style>
diff --git a/app/components/label/Manager.vue b/app/components/label/Manager.vue
index 04a67a6..ddd7496 100644
--- a/app/components/label/Manager.vue
+++ b/app/components/label/Manager.vue
@@ -1,177 +1,155 @@
 <template>
-  <Teleport to="body">
-    <div class="fixed left-0 top-0 modal-viewport bg-black/40 z-50 flex items-center justify-center px-4" @mousedown.self="$emit('close')">
-      <div class="bg-nord-mist dark:bg-nord-obsidian rounded-2xl shadow-2xl w-full max-w-sm p-4">
-        <!-- New label input -->
-        <form class="flex flex-col gap-1 mb-4" @submit.prevent="addLabel">
-          <div class="flex gap-2">
-            <input
-              ref="newLabelInput"
-              v-model="newName"
-              type="text"
-              :maxlength="MAX_LABEL_LENGTH"
-              placeholder="New Label"
-              class="flex-1 bg-nord-ice dark:bg-nord-graphite rounded-lg px-3 py-2 text-sm outline-none text-nord-storm dark:text-nord-snow placeholder-nord-slate dark:placeholder-nord-frost"
-            >
-            <button
-              type="submit"
-              :disabled="!newName.trim() || newName.length > MAX_LABEL_LENGTH"
-              class="px-3 py-2 bg-nord-blue text-white rounded-lg text-sm font-medium disabled:opacity-50 hover:bg-nord-frost transition-colors"
-            >
-              Add
-            </button>
-          </div>
-          <p v-if="newName.length > MAX_LABEL_LENGTH" class="text-xs text-nord-ember px-1">Max {{ MAX_LABEL_LENGTH }} characters</p>
-        </form>
-
-        <!-- Labels list (draggable) -->
-        <div class="space-y-1 max-h-72 overflow-y-auto">
-          <div
-            v-for="(label, index) in localLabels"
-            :key="label.id"
-            :data-drag-idx="index"
-            class="flex items-center gap-2 rounded-lg px-2 py-1 transition-colors"
-            :class="dragOverIndex === index ? 'bg-nord-aurora/20' : 'hover:bg-nord-ice dark:hover:bg-nord-graphite'"
-            draggable="true"
-            @dragstart="onDragStart(index)"
-            @dragover.prevent="onDragOver(index)"
-            @drop="onDrop(index)"
-            @dragend="onDragEnd"
-          >
-            <!-- Drag handle — hidden while editing -->
-            <svg
-              v-show="editingId !== label.id"
-              class="w-4 h-4 text-white opacity-50 flex-shrink-0 cursor-grab active:cursor-grabbing touch-none select-none"
-              fill="currentColor" viewBox="0 0 24 24"
-              @touchstart.prevent="startTouchDrag(index)"
-            >
-              <path d="M9 4a1 1 0 100 2 1 1 0 000-2zm6 0a1 1 0 100 2 1 1 0 000-2zM9 10a1 1 0 100 2 1 1 0 000-2zm6 0a1 1 0 100 2 1 1 0 000-2zM9 16a1 1 0 100 2 1 1 0 000-2zm6 0a1 1 0 100 2 1 1 0 000-2z"/>
-            </svg>
-
-            <template v-if="editingId === label.id">
-              <input
-                v-model="editName"
-                :maxlength="MAX_LABEL_LENGTH"
-                class="flex-1 min-w-0 bg-nord-ice dark:bg-nord-graphite rounded-lg px-3 py-1 text-sm outline-none text-nord-storm dark:text-nord-snow"
-                @keydown.enter="saveEdit(label.id)"
-                @keydown.escape="saveEdit(label.id)"
-              >
-              <button class="flex-shrink-0 text-nord-aurora hover:text-nord-frost text-sm font-medium px-2" @click="saveEdit(label.id)">Save</button>
-            </template>
-            <template v-else>
-              <span class="flex-1 text-sm text-nord-obsidian dark:text-nord-ice truncate">{{ label.name }}</span>
-              <button class="w-7 h-7 rounded-full hover:bg-nord-ice dark:hover:bg-nord-graphite flex items-center justify-center" @click="startEdit(label)">
-                <svg class="w-4 h-4 text-nord-slate dark:text-nord-frost" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/>
-                </svg>
-              </button>
-              <button class="w-7 h-7 rounded-full hover:bg-nord-ice dark:hover:bg-nord-graphite flex items-center justify-center" @click="confirmDelete(label)">
-                <svg class="w-4 h-4 text-nord-ember" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/>
-                </svg>
-              </button>
-            </template>
-          </div>
-
-          <div v-if="localLabels.length === 0" class="text-sm text-nord-slate dark:text-nord-frost text-center py-4">No labels yet</div>
-        </div>
-
+  <UiModal
+    label="Manage Labels"
+    panel-class="bg-nord-mist dark:bg-nord-obsidian rounded-2xl shadow-2xl w-full max-w-sm p-4"
+    @close="onEscape"
+  >
+    <form class="flex flex-col gap-1 mb-4" @submit.prevent="addLabel">
+      <div class="flex gap-2">
+        <label :for="newLabelId" class="sr-only">New Label</label>
+        <input
+          :id="newLabelId"
+          v-model="newName"
+          type="text"
+          :maxlength="MAX_LABEL_LENGTH"
+          placeholder="New Label"
+          class="flex-1 min-w-0 bg-nord-ice dark:bg-nord-graphite rounded-lg px-3 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-nord-aurora text-nord-storm dark:text-nord-snow placeholder-nord-slate dark:placeholder-nord-frost"
+          data-autofocus
+        >
         <button
-          class="mt-4 w-full py-2 text-sm text-nord-slate dark:text-nord-ice hover:bg-nord-ice dark:hover:bg-nord-graphite rounded-lg transition-colors"
-          @click="$emit('close')"
+          type="submit"
+          :disabled="!newName.trim()"
+          class="px-3 py-2 bg-nord-blue text-white rounded-lg text-sm font-medium disabled:opacity-50 hover:bg-nord-frost transition-colors"
         >
-          Done
+          Add
         </button>
       </div>
-    </div>
-
-    <!-- Delete confirmation dialog -->
-    <Teleport to="body">
-      <Transition name="fade">
-        <div
-          v-if="deletingLabel"
-          class="fixed left-0 top-0 modal-viewport bg-black/50 z-[60] flex items-center justify-center px-4"
-          @mousedown.self="deletingLabel = null"
-        >
-          <div class="bg-nord-mist dark:bg-nord-obsidian rounded-2xl shadow-2xl w-full max-w-xs p-6">
-            <h3 class="text-base font-semibold text-nord-storm dark:text-nord-snow mb-2">Delete label?</h3>
-            <p class="text-sm text-nord-slate dark:text-nord-frost mb-5">
-              "<span class="font-medium text-nord-obsidian dark:text-nord-ice">{{ deletingLabel.name }}</span>" will be removed from all notes. This cannot be undone.
-            </p>
-            <div class="flex gap-3">
-              <button
-                class="flex-1 py-2 text-sm text-nord-slate dark:text-nord-ice hover:bg-nord-ice dark:hover:bg-nord-graphite rounded-lg transition-colors"
-                @click="deletingLabel = null"
-              >Cancel</button>
-              <button
-                class="flex-1 py-2 text-sm font-medium bg-nord-ember hover:bg-nord-ember/80 text-white rounded-lg transition-colors"
-                @click="doDelete"
-              >Delete</button>
-            </div>
-          </div>
-        </div>
-      </Transition>
-    </Teleport>
-  </Teleport>
+    </form>
+
+    <!-- Labels list (draggable) -->
+    <ul class="space-y-1 max-h-72 overflow-y-auto" aria-label="Labels">
+      <li
+        v-for="(label, index) in localLabels"
+        :key="label.id"
+        :data-drag-idx="index"
+        class="flex items-center gap-2 rounded-lg px-2 py-1 transition-colors"
+        :class="dragOverIndex === index ? 'bg-nord-aurora/20' : 'hover:bg-nord-ice dark:hover:bg-nord-graphite'"
+        draggable="true"
+        @dragstart="onDragStart(index)"
+        @dragover.prevent="onDragOver(index)"
+        @drop="onDrop(index)"
+        @dragend="onDragEnd"
+      >
+        <!-- Drag handle — hidden while editing -->
+        <UiIcon
+          v-show="editingId !== label.id"
+          name="drag-handle"
+          class="w-4 h-4 text-white opacity-50 flex-shrink-0 cursor-grab active:cursor-grabbing touch-none select-none"
+          @touchstart.prevent="startTouchDrag(index)"
+        />
+
+        <template v-if="editingId === label.id">
+          <label :for="`${newLabelId}-edit`" class="sr-only">Label Name</label>
+          <input
+            :id="`${newLabelId}-edit`"
+            ref="editInput"
+            v-model="editName"
+            :maxlength="MAX_LABEL_LENGTH"
+            class="flex-1 min-w-0 bg-nord-ice dark:bg-nord-graphite rounded-lg px-3 py-1 text-sm outline-none text-nord-storm dark:text-nord-snow"
+            @keydown.enter="saveEdit(label.id)"
+            @keydown.escape.prevent="editingId = null"
+          >
+          <button type="button" class="flex-shrink-0 text-nord-aurora hover:text-nord-frost text-sm font-medium px-2" @click="saveEdit(label.id)">Save</button>
+        </template>
+        <template v-else>
+          <span class="flex-1 text-sm text-nord-obsidian dark:text-nord-ice truncate">{{ label.name }}</span>
+          <button
+            type="button"
+            class="w-7 h-7 rounded-full hover:bg-nord-ice dark:hover:bg-nord-graphite flex items-center justify-center"
+            :aria-label="`Rename ${label.name}`"
+            @click="startEdit(label)"
+          >
+            <UiIcon name="pencil-square" class="w-4 h-4 text-nord-slate dark:text-nord-frost" />
+          </button>
+          <button
+            type="button"
+            class="w-7 h-7 rounded-full hover:bg-nord-ice dark:hover:bg-nord-graphite flex items-center justify-center"
+            :aria-label="`Delete ${label.name}`"
+            @click="confirmDelete(label)"
+          >
+            <UiIcon name="trash" class="w-4 h-4 text-nord-ember" />
+          </button>
+        </template>
+      </li>
+
+      <li v-if="localLabels.length === 0" class="text-sm text-nord-slate dark:text-nord-frost text-center py-4">No Labels Yet</li>
+    </ul>
+
+    <button
+      type="button"
+      class="mt-4 w-full py-2 text-sm text-nord-slate dark:text-nord-ice hover:bg-nord-ice dark:hover:bg-nord-graphite rounded-lg transition-colors"
+      @click="$emit('close')"
+    >
+      Done
+    </button>
+
+    <UiConfirmDialog
+      v-if="deletingLabel"
+      title="Delete Label?"
+      confirm-label="Delete"
+      @cancel="deletingLabel = null"
+      @confirm="doDelete"
+    >
+      "<span class="font-medium text-nord-obsidian dark:text-nord-ice">{{ deletingLabel.name }}</span>" will be removed from all notes. This cannot be undone.
+    </UiConfirmDialog>
+  </UiModal>
 </template>
 
 <script setup lang="ts">
 import type { Label } from '#shared/types/notes'
 
-useBodyScrollLock(true)
-
 const emit = defineEmits<{ close: [] }>()
 
 const { labels, createLabel, renameLabel, deleteLabel, reorderLabels } = useLabels()
 
-const { LABEL_MAX_LENGTH: MAX_LABEL_LENGTH } = CONSTRAINTS
+const MAX_LABEL_LENGTH = CONSTRAINTS.LABEL_MAX_LENGTH
+const newLabelId = useId()
 
 // Local mutable copy for drag reordering
-const newLabelInput = ref<HTMLInputElement | null>(null)
 const localLabels = ref<Label[]>([...labels.value])
 watch(labels, (v) => { localLabels.value = [...v] }, { deep: true })
 
 const newName = ref('')
 const editingId = ref<string | null>(null)
 const editName = ref('')
+const editInput = ref<HTMLInputElement[]>()
+const deletingLabel = ref<Label | null>(null)
 
 const addLabel = async () => {
   const name = newName.value.trim()
-  if (!name || name.length > MAX_LABEL_LENGTH) return
+  if (!name) return
   if (await createLabel(name)) newName.value = ''
 }
 
-const startEdit = (label: Label) => {
+const startEdit = async (label: Label) => {
   editingId.value = label.id
   editName.value = label.name
+  await nextTick()
+  editInput.value?.[0]?.focus()
 }
 
 const saveEdit = async (id: string) => {
   const name = editName.value.trim()
-  if (!name || name.length > MAX_LABEL_LENGTH) {
-    editingId.value = null
-    return
-  }
-  await renameLabel(id, name)
+  if (name) await renameLabel(id, name)
   editingId.value = null
 }
 
-const removeLabel = async (id: string) => {
-  await deleteLabel(id)
+// Escape first cancels an in-progress rename, then closes the manager
+const onEscape = () => {
+  if (editingId.value) editingId.value = null
+  else emit('close')
 }
 
-// Delete confirmation
-const deletingLabel = ref<Label | null>(null)
-
-onMounted(() => nextTick(() => newLabelInput.value?.focus()))
-
-// Close modal on Escape; if delete confirmation is open, dismiss it first
-useEscapeKey(() => {
-  if (deletingLabel.value) { deletingLabel.value = null; return }
-  if (editingId.value) { editingId.value = null; return }
-  emit('close')
-})
-
 const confirmDelete = (label: Label) => {
   editingId.value = null
   deletingLabel.value = label
@@ -179,14 +157,12 @@ const confirmDelete = (label: Label) => {
 
 const doDelete = async () => {
   if (!deletingLabel.value) return
-  await removeLabel(deletingLabel.value.id)
+  await deleteLabel(deletingLabel.value.id)
   deletingLabel.value = null
 }
 
-const { dragOverIdx: dragOverIndex, onDragStart, onDragOver, onDrop: onDropSort, onDragEnd, startTouchDrag } = useDragSort({
+const { dragOverIdx: dragOverIndex, onDragStart, onDragOver, onDrop, onDragEnd, startTouchDrag } = useDragSort({
   getItems: () => localLabels.value,
   onReorder: (items) => reorderLabels(items),
 })
-
-const onDrop = (targetIndex: number) => onDropSort(targetIndex)
 </script>
diff --git a/app/components/label/Picker.vue b/app/components/label/Picker.vue
index 8a37962..41a2989 100644
--- a/app/components/label/Picker.vue
+++ b/app/components/label/Picker.vue
@@ -1,67 +1,76 @@
 <template>
-  <Teleport to="body">
-    <div class="fixed left-0 top-0 modal-viewport bg-black/40 z-50 flex items-center justify-center px-4" @mousedown.self="$emit('close')">
-      <div class="bg-nord-mist dark:bg-nord-obsidian rounded-xl shadow-xl border border-nord-ice dark:border-nord-graphite p-4 w-80 max-h-[90vh] overflow-y-auto">
-        <input
-          v-model="search"
-          type="text"
-          placeholder="Search Labels"
-          class="w-full bg-nord-ice dark:bg-nord-graphite rounded-lg px-3 py-2 text-sm outline-none text-nord-storm dark:text-nord-snow placeholder-nord-slate dark:placeholder-nord-frost mb-2"
-        >
+  <UiModal
+    label="Set Labels"
+    panel-class="bg-nord-mist dark:bg-nord-obsidian rounded-xl shadow-xl border border-nord-ice dark:border-nord-graphite p-4 w-80 max-h-[90vh] overflow-y-auto"
+    @close="$emit('close')"
+  >
+    <label :for="searchId" class="sr-only">Search Labels</label>
+    <input
+      :id="searchId"
+      v-model="search"
+      type="text"
+      placeholder="Search Labels"
+      class="w-full bg-nord-ice dark:bg-nord-graphite rounded-lg px-3 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-nord-aurora text-nord-storm dark:text-nord-snow placeholder-nord-slate dark:placeholder-nord-frost mb-2"
+      data-autofocus
+    >
 
-        <!-- Create new label -->
-        <form class="flex gap-1.5 mb-2" @submit.prevent="addLabel">
-          <input
-            v-model="newName"
-            type="text"
-            placeholder="New Label"
-            class="flex-1 bg-nord-ice dark:bg-nord-graphite rounded-lg px-3 py-2 text-sm outline-none text-nord-storm dark:text-nord-snow placeholder-nord-slate dark:placeholder-nord-frost"
-          >
-          <button
-            type="submit"
-            :disabled="!newName.trim()"
-            class="px-3 py-2 bg-nord-blue text-white rounded-lg text-sm font-medium disabled:opacity-40 hover:bg-nord-frost transition-colors"
-          >
-            Add
-          </button>
-        </form>
+    <!-- Create new label -->
+    <form class="flex gap-1.5 mb-2" @submit.prevent="addLabel">
+      <label :for="newLabelId" class="sr-only">New Label</label>
+      <input
+        :id="newLabelId"
+        v-model="newName"
+        type="text"
+        placeholder="New Label"
+        :maxlength="CONSTRAINTS.LABEL_MAX_LENGTH"
+        class="flex-1 min-w-0 bg-nord-ice dark:bg-nord-graphite rounded-lg px-3 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-nord-aurora text-nord-storm dark:text-nord-snow placeholder-nord-slate dark:placeholder-nord-frost"
+      >
+      <button
+        type="submit"
+        :disabled="!newName.trim()"
+        class="px-3 py-2 bg-nord-blue text-white rounded-lg text-sm font-medium disabled:opacity-40 hover:bg-nord-frost transition-colors"
+      >
+        Add
+      </button>
+    </form>
 
-        <div class="space-y-1 max-h-56 overflow-y-auto">
-          <button
-            v-for="label in filteredLabels"
-            :key="label.id"
-            class="flex items-center gap-2 w-full px-2 py-1.5 rounded-lg hover:bg-nord-ice dark:hover:bg-nord-graphite text-left"
-            @click="toggle(label.id)"
-          >
-            <div
-class="w-4 h-4 rounded border-2 flex items-center justify-center flex-shrink-0"
-              :class="localSelected.includes(label.id) ? 'bg-nord-aurora border-nord-aurora' : 'border-nord-ice dark:border-nord-slate'">
-              <svg v-if="localSelected.includes(label.id)" class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.5 12.75l6 6 9-13.5"/>
-              </svg>
-            </div>
-            <span class="text-sm text-nord-obsidian dark:text-nord-ice truncate">{{ label.name }}</span>
-          </button>
-          <div v-if="filteredLabels.length === 0" class="text-xs text-nord-slate dark:text-nord-frost text-center py-2">No labels found</div>
-        </div>
-        <button
-          class="mt-2 w-full py-2 text-sm text-nord-slate dark:text-nord-ice hover:bg-nord-ice dark:hover:bg-nord-graphite rounded-lg transition-colors"
-          @click="$emit('close')"
-        >Done</button>
-      </div>
+    <div class="space-y-1 max-h-56 overflow-y-auto">
+      <button
+        v-for="label in filteredLabels"
+        :key="label.id"
+        type="button"
+        role="checkbox"
+        :aria-checked="localSelected.includes(label.id)"
+        class="flex items-center gap-2 w-full px-2 py-1.5 rounded-lg hover:bg-nord-ice dark:hover:bg-nord-graphite text-left"
+        @click="toggle(label.id)"
+      >
+        <span
+          class="w-4 h-4 rounded border-2 flex items-center justify-center flex-shrink-0"
+          :class="localSelected.includes(label.id) ? 'bg-nord-aurora border-nord-aurora' : 'border-nord-ice dark:border-nord-slate'"
+        >
+          <UiIcon v-if="localSelected.includes(label.id)" name="check" class="w-3 h-3 text-white" />
+        </span>
+        <span class="text-sm text-nord-obsidian dark:text-nord-ice truncate">{{ label.name }}</span>
+      </button>
+      <div v-if="filteredLabels.length === 0" class="text-xs text-nord-slate dark:text-nord-frost text-center py-2" role="status">No Labels Found</div>
     </div>
-  </Teleport>
+    <button
+      type="button"
+      class="mt-2 w-full py-2 text-sm text-nord-slate dark:text-nord-ice hover:bg-nord-ice dark:hover:bg-nord-graphite rounded-lg transition-colors"
+      @click="$emit('close')"
+    >
+      Done
+    </button>
+  </UiModal>
 </template>
 
 <script setup lang="ts">
 const props = defineProps<{ selectedIds: string[] }>()
 const emit = defineEmits<{ update: [ids: string[]]; close: [] }>()
 
-useBodyScrollLock(true)
-
-useEscapeKey(() => emit('close'))
-
 const { labels, createLabel } = useLabels()
+const searchId = useId()
+const newLabelId = useId()
 const search = ref('')
 const newName = ref('')
 const localSelected = ref([...props.selectedIds])
@@ -71,17 +80,16 @@ const filteredLabels = computed(() =>
 )
 
 const toggle = (id: string) => {
-  if (localSelected.value.includes(id)) {
-    localSelected.value = localSelected.value.filter((i) => i !== id)
-  } else {
-    localSelected.value = [...localSelected.value, id]
-  }
+  localSelected.value = localSelected.value.includes(id)
+    ? localSelected.value.filter((i) => i !== id)
+    : [...localSelected.value, id]
   emit('update', localSelected.value)
 }
 
 const addLabel = async () => {
-  if (!newName.value.trim()) return
-  const created = await createLabel(newName.value.trim())
+  const name = newName.value.trim()
+  if (!name) return
+  const created = await createLabel(name)
   if (!created) return
   newName.value = ''
   // Auto-select the newly created label
diff --git a/app/components/note/ContextMenu.vue b/app/components/note/ContextMenu.vue
index 6f51b10..dabfce5 100644
--- a/app/components/note/ContextMenu.vue
+++ b/app/components/note/ContextMenu.vue
@@ -3,7 +3,6 @@
     <template v-if="visible">
       <!-- Backdrop (no transform wrapper — fixed must not have transformed ancestor) -->
       <div class="fixed inset-0 z-40" @mousedown="close" @contextmenu.prevent="close" />
-      <!-- Menu with its own transition -->
       <Transition
         appear
         enter-active-class="transition-all duration-100 ease-out"
@@ -16,44 +15,32 @@
         <div
           v-if="visible"
           ref="menuEl"
+          role="menu"
+          aria-label="Note actions"
           class="fixed z-50 min-w-[180px] bg-white dark:bg-nord-obsidian border border-nord-ice dark:border-nord-graphite rounded-xl shadow-xl py-1 origin-top-left"
           :style="{ top: `${y}px`, left: `${x}px` }"
           @click.stop
+          @keydown="onMenuKeydown"
         >
-          <button
-            v-if="canCopyNote(note)"
-            class="ctx-item"
-            @click="copyNoteContent(note); close()"
-          >
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="ctx-icon">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184" />
-            </svg>
+          <button v-if="canCopyNote(note)" type="button" role="menuitem" class="ctx-item" @click="select(() => copyNoteContent(note))">
+            <UiIcon name="clipboard" class="ctx-icon" />
             Copy to Clipboard
           </button>
-          <button class="ctx-item" @click="emit('add-file'); close()">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="ctx-icon">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 0 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" />
-            </svg>
+          <button type="button" role="menuitem" class="ctx-item" @click="select(() => emit('add-file'))">
+            <UiIcon name="paperclip" class="ctx-icon" />
             Add Images/Files
           </button>
-          <button class="ctx-item" @click="emit('label'); close()">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="ctx-icon">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" />
-              <path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6Z" />
-            </svg>
+          <button type="button" role="menuitem" class="ctx-item" @click="select(() => emit('label'))">
+            <UiIcon name="tag" class="ctx-icon" />
             Set Labels
           </button>
-          <div class="my-1 border-t border-nord-ice dark:border-nord-graphite" />
-          <button class="ctx-item" @click="emit('archive'); close()">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="ctx-icon">
-              <path stroke-linecap="round" stroke-linejoin="round" d="m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z" />
-            </svg>
+          <div class="my-1 border-t border-nord-ice dark:border-nord-graphite" role="separator" />
+          <button type="button" role="menuitem" class="ctx-item" @click="select(() => emit('archive'))">
+            <UiIcon name="archive" class="ctx-icon" />
             Archive
           </button>
-          <button class="ctx-item text-nord-ember dark:text-nord-ember" @click="emit('trash'); close()">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="ctx-icon">
-              <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
-            </svg>
+          <button type="button" role="menuitem" class="ctx-item text-nord-ember dark:text-nord-ember" @click="select(() => emit('trash'))">
+            <UiIcon name="trash" class="ctx-icon" />
             Trash
           </button>
         </div>
@@ -82,10 +69,23 @@ const visible = ref(false)
 const x = ref(0)
 const y = ref(0)
 const menuEl = ref<HTMLElement>()
+let returnFocusTo: HTMLElement | null = null
 
-const close = () => { visible.value = false }
+const menuItems = () => Array.from(menuEl.value?.querySelectorAll<HTMLElement>('[role="menuitem"]') ?? [])
+
+const close = () => {
+  if (!visible.value) return
+  restoreFocus(returnFocusTo, menuEl.value)
+  visible.value = false
+}
+
+const select = (action: () => void) => {
+  action()
+  close()
+}
 
 const open = (event: MouseEvent) => {
+  returnFocusTo = document.activeElement as HTMLElement | null
   x.value = event.clientX
   y.value = event.clientY
   visible.value = true
@@ -94,21 +94,25 @@ const open = (event: MouseEvent) => {
     const menuH = menuEl.value?.offsetHeight ?? 200
     x.value = event.clientX + menuW > window.innerWidth ? event.clientX - menuW : event.clientX
     y.value = event.clientY + menuH > window.innerHeight ? event.clientY - menuH : event.clientY
+    menuItems()[0]?.focus()
   })
 }
 
-const onEscape = (e: KeyboardEvent) => { if (e.key === 'Escape') close() }
-
-watchEffect(() => {
-  if (!import.meta.client) return
-  if (visible.value) {
-    document.addEventListener('keydown', onEscape)
-  } else {
-    document.removeEventListener('keydown', onEscape)
+// Arrow keys move between items; Tab closes the menu like a native one
+const onMenuKeydown = (e: KeyboardEvent) => {
+  const items = menuItems()
+  const index = items.indexOf(document.activeElement as HTMLElement)
+  if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+    e.preventDefault()
+    const step = e.key === 'ArrowDown' ? 1 : -1
+    items[(index + step + items.length) % items.length]?.focus()
+  } else if (e.key === 'Tab') {
+    close()
   }
-})
+}
 
-onUnmounted(close)
+useEscapeKey(close, visible)
+onUnmounted(() => { visible.value = false })
 
 defineExpose({ open })
 </script>
@@ -118,7 +122,8 @@ defineExpose({ open })
 
 .ctx-item {
   @apply w-full flex items-center gap-3 px-4 py-2 text-sm text-nord-storm dark:text-nord-ice
-    hover:bg-nord-snow dark:hover:bg-nord-graphite transition-colors cursor-pointer text-left;
+    hover:bg-nord-snow dark:hover:bg-nord-graphite focus-visible:bg-nord-snow dark:focus-visible:bg-nord-graphite
+    outline-none transition-colors cursor-pointer text-left;
 }
 .ctx-icon {
   @apply w-4 h-4 flex-shrink-0 text-nord-slate dark:text-nord-frost;
diff --git a/app/components/ui/AlertBanner.vue b/app/components/ui/AlertBanner.vue
index 834d21e..a97c233 100644
--- a/app/components/ui/AlertBanner.vue
+++ b/app/components/ui/AlertBanner.vue
@@ -1,12 +1,11 @@
 <template>
   <div
+    :role="variant === 'info' ? 'status' : 'alert'"
     class="w-full mx-auto mb-6 max-w-[600px] flex items-center gap-3 rounded-xl px-4 py-3"
     :class="variantClasses"
   >
     <slot name="icon">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 flex-shrink-0">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
-      </svg>
+      <UiIcon name="warning" class="w-5 h-5 flex-shrink-0" />
     </slot>
     <span class="text-sm font-medium"><slot /></span>
   </div>
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 3a007c8..73ef6f3 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="min-h-screen flex flex-col bg-nord-snow dark:bg-nord-storm">
+    <a href="#main-content" class="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-[400] focus:px-4 focus:py-2 focus:rounded-lg focus:bg-nord-blue focus:text-white">Skip to Content</a>
     <AppHeader @toggle-sidebar="toggleSidebar" />
     <div class="flex flex-1 pt-16">
       <AppSidebar :open="sidebarOpen" :animated="sidebarAnimated" @close="sidebarOpen = false" />
-      <main class="flex-1 min-w-0">
+      <main id="main-content" class="flex-1 min-w-0">
         <div
           class="max-w-[1400px] mx-auto px-4 py-6"
           :class="[
@@ -25,8 +26,8 @@
 const { sidebarOpen } = useSidebar()
 const sidebarAnimated = ref(false)
 const route = useRoute()
-const { fetchLabels } = useLabels()
-const { start: startEventSource } = useEventSource()
+const { fetchLabels } = useLabels({ realtime: true })
+const { start: startEventSource, stop: stopEventSource } = useEventSource()
 const { searchFocusTrigger } = useAppShortcuts()
 
 onMounted(() => {
@@ -39,7 +40,11 @@ onMounted(() => {
     }
   }
   document.addEventListener('keydown', handler)
-  onUnmounted(() => document.removeEventListener('keydown', handler))
+  onUnmounted(() => {
+    document.removeEventListener('keydown', handler)
+    // Leaving the signed-in layout (e.g. session expired): stop reconnecting to the event stream
+    stopEventSource()
+  })
 })
 
 await callOnce('init-labels', fetchLabels)
@@ -47,7 +52,7 @@ await callOnce('init-labels', fetchLabels)
 const toggleSidebar = () => {
   if (!sidebarAnimated.value) sidebarAnimated.value = true
   if (sidebarOpen.value === null) {
-    sidebarOpen.value = window.innerWidth < 768
+    sidebarOpen.value = isMobileViewport()
   } else {
     sidebarOpen.value = !sidebarOpen.value
   }
@@ -55,6 +60,6 @@ const toggleSidebar = () => {
 
 // Close sidebar on navigation (mobile only, and only if explicitly opened)
 watch(() => route.path, () => {
-  if (sidebarOpen.value === true && window.innerWidth < 768) sidebarOpen.value = false
+  if (sidebarOpen.value === true && isMobileViewport()) sidebarOpen.value = false
 })
 </script>

From c6397d61bc9e27168b9254b9bf3712bbe07c60b8 Mon Sep 17 00:00:00 2001
From: Irfan Fadilah <hello@irfanfadilah.com>
Date: Thu, 15 Oct 2026 10:59:29 +0700
Subject: [PATCH 8/9] Clean Up Constants and Listeners

---
 app/app.vue                    |  2 +-
 app/composables/useOffline.ts  | 16 +++++++---------
 app/composables/useSnackbar.ts |  2 +-
 shared/schemas/auth.ts         |  3 ++-
 shared/utils/constants.ts      |  2 ++
 5 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index 2269a54..a519209 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <NuxtLoadingIndicator color="#88C0D0" />
+    <NuxtLoadingIndicator color="var(--nord-aurora)" />
     <ClientOnly>
       <NuxtRouteAnnouncer />
     </ClientOnly>
diff --git a/app/composables/useOffline.ts b/app/composables/useOffline.ts
index d72308c..807de4d 100644
--- a/app/composables/useOffline.ts
+++ b/app/composables/useOffline.ts
@@ -1,16 +1,14 @@
+let listening = false
+
+/** Whether the browser is offline. One set of window listeners is shared by every caller. */
 export const useOffline = () => {
   const isOffline = useState<boolean>('is-offline', () => false)
 
-  if (import.meta.client) {
+  if (import.meta.client && !listening) {
+    listening = true
     isOffline.value = !navigator.onLine
-    const onOnline = () => { isOffline.value = false }
-    const onOffline = () => { isOffline.value = true }
-    window.addEventListener('online', onOnline)
-    window.addEventListener('offline', onOffline)
-    onUnmounted(() => {
-      window.removeEventListener('online', onOnline)
-      window.removeEventListener('offline', onOffline)
-    })
+    window.addEventListener('online', () => { isOffline.value = false })
+    window.addEventListener('offline', () => { isOffline.value = true })
   }
 
   return { isOffline: readonly(isOffline) }
diff --git a/app/composables/useSnackbar.ts b/app/composables/useSnackbar.ts
index 45d083f..e6fe84a 100644
--- a/app/composables/useSnackbar.ts
+++ b/app/composables/useSnackbar.ts
@@ -17,7 +17,7 @@ export const useSnackbar = () => {
     if (timer) clearTimeout(timer)
     timer = setTimeout(() => {
       queue.value = queue.value.filter((i) => i.id !== id)
-    }, 3500)
+    }, SNACKBAR_DURATION_MS)
   }
 
   const dismiss = () => {
diff --git a/shared/schemas/auth.ts b/shared/schemas/auth.ts
index 0765b4a..a0bacc5 100644
--- a/shared/schemas/auth.ts
+++ b/shared/schemas/auth.ts
@@ -1,5 +1,6 @@
 import { z } from 'zod'
+import { CONSTRAINTS } from '../utils/constants'
 
 export const loginSchema = z.object({
-  code: z.string({ error: 'Invalid OTP Format' }).regex(/^\d{6}$/, 'Invalid OTP Format'),
+  code: z.string({ error: 'Invalid OTP Format' }).regex(new RegExp(`^\\d{${CONSTRAINTS.OTP_LENGTH}}$`), 'Invalid OTP Format'),
 })
diff --git a/shared/utils/constants.ts b/shared/utils/constants.ts
index d616ced..d9d125e 100644
--- a/shared/utils/constants.ts
+++ b/shared/utils/constants.ts
@@ -13,6 +13,8 @@ export const CONSTRAINTS = {
   FILENAME_MAX_LENGTH: 100,
   /** Maximum file upload size in bytes (100 MB) */
   FILE_MAX_SIZE: 100 * 1024 * 1024,
+  /** Number of digits in a login code */
+  OTP_LENGTH: 6,
   /** Number of notes per page */
   PAGINATION_LIMIT: 20,
 } as const

From 86c283d755f13b5050908fae059f2e3e4413462a Mon Sep 17 00:00:00 2001
From: Irfan Fadilah <hello@irfanfadilah.com>
Date: Thu, 15 Oct 2026 10:59:29 +0700
Subject: [PATCH 9/9] Document Frontend Conventions

---
 CONTRIBUTING.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index aec4c44..7b39b74 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -53,6 +53,14 @@ Fix Upload Size Check
 - Put types, constants and validation schemas used by both the client and the server in `shared/`.
 - Add or update tests for behavior changes (`test/unit/` for pure logic, `test/e2e/` for API behavior).
 
+## Frontend Conventions
+
+- Dialogs use `<UiModal>` (focus trap, scroll lock, Escape) and destructive confirmations use `<UiConfirmDialog>`.
+- Close-on-Escape goes through `useEscapeKey(handler, isOpen)`, so only the top-most open layer reacts.
+- Icons come from `<UiIcon name="…">`; add new ones to `app/utils/icons.ts` instead of inlining SVGs.
+- Icon-only buttons need an `aria-label`, and inputs need a label (use `sr-only` if it shouldn't be visible).
+- Note data lives in `useNotesList` (loading), `useNoteMutations` and `useNoteAttachments` (changes).
+
 ## License
 
 By contributing, you agree that your contributions will be licensed under the [AGPL-3.0](./LICENSE) license.