From dcf3af88bdcbae8651b1df10e2a7f19976aaf523 Mon Sep 17 00:00:00 2001 From: Bryan Van Deusen Date: Thu, 14 May 2026 12:34:49 -0400 Subject: [PATCH] =?UTF-8?q?feat(fc2a):=20assemble=20ImageViewer=20modal=20?= =?UTF-8?q?=E2=80=94=20Teleported,=20focused,=20keyboard-navigable?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Teleport mounts the modal under so it can break out of the gallery container's stacking context. Body overflow is locked while open so background scroll doesn't compete with pan/zoom. Keyboard: left/right arrows navigate prev/next (preventDefault so they don't also scroll the body), Esc closes, Tab is trapped within the modal by browser default since the modal is focused on mount. TagPanel renders kind-colored chips with the close (×) affordance for removal, and hosts TagAutocomplete + FandomPicker for additions. Below 900px the panel drops below the media area instead of beside it. Co-Authored-By: Claude Opus 4.7 (1M context) --- frontend/src/components/modal/ImageViewer.vue | 135 +++++++++++++++++- frontend/src/components/modal/TagPanel.vue | 80 +++++++++++ 2 files changed, 208 insertions(+), 7 deletions(-) create mode 100644 frontend/src/components/modal/TagPanel.vue diff --git a/frontend/src/components/modal/ImageViewer.vue b/frontend/src/components/modal/ImageViewer.vue index 370b462..b2178b5 100644 --- a/frontend/src/components/modal/ImageViewer.vue +++ b/frontend/src/components/modal/ImageViewer.vue @@ -1,9 +1,130 @@ - + + + + diff --git a/frontend/src/components/modal/TagPanel.vue b/frontend/src/components/modal/TagPanel.vue new file mode 100644 index 0000000..7ca5e08 --- /dev/null +++ b/frontend/src/components/modal/TagPanel.vue @@ -0,0 +1,80 @@ + + + + +