From 90686e6deb2276768c3b1e00d01d8ef632b7d4e2 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Thu, 14 May 2026 12:36:25 -0400
Subject: [PATCH] =?UTF-8?q?chore(fc2a):=20polish=20pass=20=E2=80=94=20toas?=
 =?UTF-8?q?ts,=20loading=20skeletons,=20focus=20guards,=20mobile=20breakpo?=
 =?UTF-8?q?ints?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

AppSnackbar mounts once at the app root and exposes a window.__fcToast
function the stores call from error paths. This avoids prop-drilling a
toast emitter through every component while keeping the snackbar
component itself testable in isolation.

GalleryGrid renders shimmer-skeleton placeholders on initial load so the
first paint isn't empty. Skeleton uses the same auto-fill grid columns
as the real items so layout doesn't shift when content arrives.

Modal arrow nav now ignores text-entry elements so typing in the tag
autocomplete doesn't navigate prev/next. Small-screen breakpoint
(<600px) tightens gallery thumbnails to 120px min.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/src/App.vue                          | 10 ++++++
 frontend/src/components/AppSnackbar.vue       | 26 +++++++++++++++
 .../src/components/gallery/GalleryGrid.vue    | 32 +++++++++++++++++++
 frontend/src/components/modal/ImageViewer.vue | 20 ++++++++++--
 frontend/src/stores/import.js                 |  2 ++
 frontend/src/stores/modal.js                  |  1 +
 6 files changed, 89 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/AppSnackbar.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 4c51eaf..a4b0086 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -3,9 +3,19 @@
     <AppShell>
       <RouterView />
     </AppShell>
+    <AppSnackbar ref="snackbar" />
   </v-app>
 </template>
 
 <script setup>
+import { onMounted, ref } from 'vue'
 import AppShell from './components/AppShell.vue'
+import AppSnackbar from './components/AppSnackbar.vue'
+
+const snackbar = ref(null)
+
+onMounted(() => {
+  // Expose snackbar via a simple global so stores can call it without props.
+  window.__fcToast = (opts) => snackbar.value?.open(opts)
+})
 </script>
diff --git a/frontend/src/components/AppSnackbar.vue b/frontend/src/components/AppSnackbar.vue
new file mode 100644
index 0000000..cf45f16
--- /dev/null
+++ b/frontend/src/components/AppSnackbar.vue
@@ -0,0 +1,26 @@
+<template>
+  <v-snackbar
+    v-model="show" :color="color" location="bottom right" timeout="4000"
+    multi-line elevation="4"
+  >
+    {{ message }}
+    <template #actions>
+      <v-btn variant="text" @click="show = false">Dismiss</v-btn>
+    </template>
+  </v-snackbar>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const show = ref(false)
+const message = ref('')
+const color = ref('error')
+
+function open({ text, type = 'error' }) {
+  message.value = text
+  color.value = type === 'error' ? 'error' : type === 'success' ? 'success' : 'info'
+  show.value = true
+}
+
+defineExpose({ open })
+</script>
diff --git a/frontend/src/components/gallery/GalleryGrid.vue b/frontend/src/components/gallery/GalleryGrid.vue
index ea9c1f3..111cf61 100644
--- a/frontend/src/components/gallery/GalleryGrid.vue
+++ b/frontend/src/components/gallery/GalleryGrid.vue
@@ -1,5 +1,8 @@
 <template>
   <div class="fc-gallery-grid">
+    <div v-if="store.loading && store.images.length === 0" class="fc-gallery-grid__skeleton">
+      <div v-for="i in 12" :key="i" class="fc-gallery-grid__skeleton-item" />
+    </div>
     <template v-for="group in store.dateGroups" :key="`${group.year}-${group.month}`">
       <h2 class="fc-gallery-grid__date-header" :id="dateHeaderId(group)">
         {{ monthLabel(group.year, group.month) }}
@@ -96,4 +99,33 @@ function imagesForGroup(group) {
   padding: 32px 0;
   color: rgb(var(--v-theme-on-surface-variant, var(--v-theme-on-surface)));
 }
+.fc-gallery-grid__skeleton {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 8px;
+}
+.fc-gallery-grid__skeleton-item {
+  aspect-ratio: 1;
+  background: linear-gradient(
+    90deg,
+    rgb(var(--v-theme-surface)) 0%,
+    rgb(var(--v-theme-surface-light)) 50%,
+    rgb(var(--v-theme-surface)) 100%
+  );
+  background-size: 200% 100%;
+  animation: fc-shimmer 1.4s infinite;
+  border-radius: 4px;
+}
+@keyframes fc-shimmer {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+@media (max-width: 600px) {
+  .fc-gallery-grid__items,
+  .fc-gallery-grid__skeleton {
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    gap: 4px;
+  }
+}
 </style>
diff --git a/frontend/src/components/modal/ImageViewer.vue b/frontend/src/components/modal/ImageViewer.vue
index b2178b5..ef0874a 100644
--- a/frontend/src/components/modal/ImageViewer.vue
+++ b/frontend/src/components/modal/ImageViewer.vue
@@ -3,8 +3,8 @@
     <div
       class="fc-viewer" role="dialog" aria-modal="true"
       @keydown.esc="$emit('close')"
-      @keydown.left.prevent="modal.goPrev()"
-      @keydown.right.prevent="modal.goNext()"
+      @keydown.left="onArrowLeft"
+      @keydown.right="onArrowRight"
       tabindex="-1" ref="rootEl"
     >
       <button class="fc-viewer__close" @click="$emit('close')" aria-label="Close">
@@ -83,6 +83,22 @@ watch(() => modal.currentImageId, async () => {
 function nextFrame() {
   return new Promise(resolve => requestAnimationFrame(resolve))
 }
+
+function onArrowLeft(ev) {
+  if (isTextEntry(ev.target)) return
+  ev.preventDefault()
+  modal.goPrev()
+}
+function onArrowRight(ev) {
+  if (isTextEntry(ev.target)) return
+  ev.preventDefault()
+  modal.goNext()
+}
+function isTextEntry(el) {
+  if (!el) return false
+  const tag = el.tagName
+  return tag === 'INPUT' || tag === 'TEXTAREA' || el.isContentEditable
+}
 </script>
 
 <style scoped>
diff --git a/frontend/src/stores/import.js b/frontend/src/stores/import.js
index 1cd7ccc..861db25 100644
--- a/frontend/src/stores/import.js
+++ b/frontend/src/stores/import.js
@@ -37,6 +37,7 @@ export const useImportStore = defineStore('import', () => {
       settings.value = await api.patch('/api/settings/import', { body: patch })
     } catch (e) {
       settingsError.value = e.message
+      window.__fcToast?.({ text: `Settings save failed: ${e.message}`, type: 'error' })
       throw e
     }
   }
@@ -58,6 +59,7 @@ export const useImportStore = defineStore('import', () => {
       await refreshStatus()
     } catch (e) {
       triggerError.value = e.message
+      window.__fcToast?.({ text: `Scan failed: ${e.message}`, type: 'error' })
       throw e
     }
   }
diff --git a/frontend/src/stores/modal.js b/frontend/src/stores/modal.js
index 509c23c..b2678fe 100644
--- a/frontend/src/stores/modal.js
+++ b/frontend/src/stores/modal.js
@@ -56,6 +56,7 @@ export const useModalStore = defineStore('modal', () => {
       await api.delete(`/api/images/${currentImageId.value}/tags/${tagId}`)
     } catch (e) {
       current.value.tags = prev
+      window.__fcToast?.({ text: `Failed to remove tag: ${e.message}`, type: 'error' })
       throw e
     }
   }