From d495605c128b08f9d2be6bab4abc0a32a6c175df Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Thu, 4 Jun 2026 00:40:32 -0400
Subject: [PATCH] style(gallery): hazey filter bar attached to the TopNav
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Filter bar gets the same obsidian translucent + backdrop-blur as the
  TopNav so the two read as one piece of chrome.
- margin-top:-8px cancels the v-container's pt-2 so the bar sits flush at
  64px even at scroll 0 — fixes the gap/separation when scrolled to top.
- Inputs/toggles get a more-opaque backing so they stay legible on the haze.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../components/gallery/GalleryFilterBar.vue   | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/gallery/GalleryFilterBar.vue b/frontend/src/components/gallery/GalleryFilterBar.vue
index 9db956a..bc4f885 100644
--- a/frontend/src/components/gallery/GalleryFilterBar.vue
+++ b/frontend/src/components/gallery/GalleryFilterBar.vue
@@ -181,20 +181,32 @@ function pushFilter(mutate) {
 </script>
 
 <style scoped>
-/* Pinned under the 64px TopNav, matching the app's sticky v-tabs chrome
-   (SettingsView / ArtistHeader / SubscriptionsView). */
+/* Pinned directly under the 64px TopNav and visually continuous with it. */
 .fc-filterbar {
   position: sticky;
   top: 64px;
-  z-index: 4;
+  z-index: 5;
+  /* Attach to the TopNav: cancel the v-container's top padding (pt-2 = 8px)
+     so the bar sits flush at 64px even at scroll 0 — without this it detaches
+     and a gap shows through when scrolled to the top. */
+  margin-top: -8px;
   display: flex;
   align-items: center;
   gap: 10px;
   flex-wrap: wrap;
-  padding: 8px 4px;
+  padding: 10px 12px;
   margin-bottom: 12px;
-  background: rgb(var(--v-theme-surface));
-  border-bottom: 1px solid rgb(var(--v-theme-surface-light));
+  /* Same hazey obsidian (#14171A = 20,23,26) + blur as the TopNav so the two
+     read as one piece of chrome; content scrolls under both. */
+  background: rgba(20, 23, 26, 0.55);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+}
+/* The inputs/toggles float on the haze: still translucent, but a touch more
+   opaque than the bar/nav so the controls stay legible. */
+.fc-filterbar :deep(.v-field),
+.fc-filterbar :deep(.v-btn-group) {
+  background-color: rgba(20, 23, 26, 0.72);
 }
 .fc-filterbar__search { max-width: 320px; min-width: 200px; }
 .fc-filterbar__chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }