feat(browse): sticky tabs + per-tab search bar (server-side, scope-aware)

The Browse tab nav scrolled away (operator didn't know it existed) and
Posts had no search. Roll the tab strip + a shared search field into one
sticky block pinned under the 64px TopNav.

- Posts gains server-side text search: PostFeedService.scroll()/around()
  + /api/posts accept q (ILIKE over post_title OR description), applied
  INSIDE the artist/platform WHERE so search stays scoped to the active
  filter. Scope shown as clearable chips next to the search field.
- Artists/Tags search consolidates into the sticky bar: their inner
  search boxes are removed; they react to route.query.q (q is deep-
  linkable, e.g. /browse?tab=posts&q=foo). Platform/kind filters stay.
- Posts empty state now distinguishes 'no matches' from 'no posts yet'.

Tests: posts q-search matches title|description and stays artist-scoped
(service); q passthrough (api).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/stores/posts.js

@@ -11,7 +11,7 @@ export const usePostsStore = defineStore('posts', () => {
   const cursor = ref(null)
   const { loading, error, run } = useAsyncAction()
   const done = ref(false)
-  const filters = ref({ artist_id: null, platform: null })
+  const filters = ref({ artist_id: null, platform: null, q: null })
 
   // In-context (anchored) view: bidirectional cursors so the feed can load
   // newer posts on scroll-up and older posts on scroll-down around a post.
@@ -32,6 +32,7 @@ export const usePostsStore = defineStore('posts', () => {
     if (cursor.value) q.cursor = cursor.value
     if (filters.value.artist_id != null) q.artist_id = filters.value.artist_id
     if (filters.value.platform) q.platform = filters.value.platform
+    if (filters.value.q) q.q = filters.value.q
     return q
   }
 
@@ -47,6 +48,7 @@ export const usePostsStore = defineStore('posts', () => {
     filters.value = {
       artist_id: newFilters?.artist_id ?? null,
       platform: newFilters?.platform ?? null,
+      q: newFilters?.q ?? null,
     }
     _reset()
     await loadMore()
@@ -78,6 +80,7 @@ export const usePostsStore = defineStore('posts', () => {
     const p = { ...extra }
     if (filters.value.artist_id != null) p.artist_id = filters.value.artist_id
     if (filters.value.platform) p.platform = filters.value.platform
+    if (filters.value.q) p.q = filters.value.q
     return p
   }
 
@@ -93,6 +96,7 @@ export const usePostsStore = defineStore('posts', () => {
     filters.value = {
       artist_id: newFilters?.artist_id ?? null,
       platform: newFilters?.platform ?? null,
+      q: newFilters?.q ?? null,
     }
     loading.value = true
     error.value = null

frontend/src/views/ArtistsView.vue

@@ -1,12 +1,9 @@
 <template>
   <v-container fluid class="pt-2 pb-6">
 
+    <!-- Search lives in BrowseView's sticky bar (shared across tabs); this view
+         reacts to route.query.q. The platform filter stays here. -->
     <div class="fc-artists__controls">
-      <v-text-field
-        v-model="search" density="compact" variant="outlined"
-        prepend-inner-icon="mdi-magnify" hide-details
-        placeholder="Search artists" clearable style="max-width: 320px;"
-      />
       <v-select
         v-model="platformModel"
         :items="platformItems"
@@ -34,26 +31,25 @@
 </template>
 
 <script setup>
-import { ref, watch, onMounted } from 'vue'
+import { computed, ref, watch, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
 import { useArtistDirectoryStore } from '../stores/artistDirectory.js'
 import { usePlatformsStore } from '../stores/platforms.js'
 import { useInfiniteScroll } from '../composables/useInfiniteScroll.js'
 import ArtistCard from '../components/discovery/ArtistCard.vue'
 
+const route = useRoute()
 const store = useArtistDirectoryStore()
 const platformsStore = usePlatformsStore()
 
-const search = ref('')
 const platformModel = ref(null)
 const sentinelEl = ref(null)
 
 const platformItems = ref([])
 
-let debounce = null
-watch(search, (v) => {
-  if (debounce) clearTimeout(debounce)
-  debounce = setTimeout(() => store.setQuery(v || ''), 300)
-})
+// Search term comes from BrowseView's shared sticky bar via route.query.q.
+const searchTerm = computed(() => (typeof route.query.q === 'string' ? route.query.q : ''))
+watch(searchTerm, (v) => store.setQuery(v || ''))
 watch(platformModel, (v) => store.setPlatform(v || null))
 
 useInfiniteScroll(sentinelEl, () => {
@@ -65,7 +61,8 @@ onMounted(async () => {
   platformItems.value = (platformsStore.platforms || []).map(p => ({
     title: p.key, value: p.key,
   }))
-  store.reset()
+  // Apply any deep-linked q (and load). setQuery resets + fetches.
+  store.setQuery(searchTerm.value || '')
 })
 </script>
 

frontend/src/views/BrowseView.vue

@@ -1,17 +1,54 @@
 <template>
   <div class="fc-browse">
-    <v-container fluid class="pt-2 pb-0">
-      <v-tabs v-model="tab" density="compact">
-        <v-tab value="posts">Posts</v-tab>
-        <v-tab value="artists">Artists</v-tab>
-        <v-tab value="tags">Tags</v-tab>
-      </v-tabs>
-    </v-container>
+    <!-- Sticky browse chrome: the tab strip + a per-tab search bar, both pinned
+         directly under the 64px TopNav (AppShell). Operator-asked 2026-06-11:
+         the tab nav scrolled away (they didn't know it existed), and there was
+         no search on Posts. Tabs + search live in ONE sticky block so the axis
+         switcher and the search stay reachable no matter how far you scroll.
+         Background uses the theme surface token so content scrolls cleanly
+         under it (matches SettingsView's sticky tabs). -->
+    <div class="fc-browse__head">
+      <v-container fluid class="py-0">
+        <v-tabs v-model="tab" density="compact" color="accent">
+          <v-tab value="posts">Posts</v-tab>
+          <v-tab value="artists">Artists</v-tab>
+          <v-tab value="tags">Tags</v-tab>
+        </v-tabs>
+
+        <div class="fc-browse__search">
+          <v-text-field
+            v-model="searchInput"
+            density="compact" variant="outlined" hide-details clearable
+            prepend-inner-icon="mdi-magnify"
+            :placeholder="searchPlaceholder"
+            :aria-label="searchPlaceholder"
+            class="fc-browse__search-field"
+          />
+          <!-- Posts search stays scoped to the active artist/platform filter
+               (operator-asked: 'if an artist is currently filtered in view').
+               The chips surface that scope next to the search even after the
+               PostsFilterBar scrolls off, and clear it to broaden. -->
+          <template v-if="tab === 'posts'">
+            <v-chip
+              v-if="artistId != null" closable size="small"
+              variant="tonal" color="accent" prepend-icon="mdi-account"
+              @click:close="clearFilter('artist_id')"
+            >{{ artistChipLabel }}</v-chip>
+            <v-chip
+              v-if="platform" closable size="small"
+              variant="tonal" color="accent" prepend-icon="mdi-web"
+              @click:close="clearFilter('platform')"
+            >{{ platform }}</v-chip>
+          </template>
+        </div>
+      </v-container>
+    </div>
 
     <!-- Each tab's view is self-contained (its own container + state). Only the
          active one is mounted; switching tabs swaps it. The Posts tab still
          reads its deep-link (post_id/artist_id/platform) from route.query, so
          /browse?tab=posts&post_id=N works exactly like the old /posts deep link.
+         All three tabs read the shared `q` search term from route.query.
          (FC nav consolidation, operator-asked 2026-06-09: Posts/Artists/Tags are
          the three "browse the library by an axis" surfaces.) -->
     <component :is="activeComponent" :key="tab" />
@@ -19,17 +56,24 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
+import { usePostsStore } from '../stores/posts.js'
 import ArtistsView from './ArtistsView.vue'
 import PostsView from './PostsView.vue'
 import TagsView from './TagsView.vue'
 
 const TABS = { posts: PostsView, artists: ArtistsView, tags: TagsView }
+const PLACEHOLDERS = {
+  posts: 'Search posts (title, description)',
+  artists: 'Search artists',
+  tags: 'Search tags',
+}
 
 const route = useRoute()
 const router = useRouter()
+const postsStore = usePostsStore()
 
 const tab = computed({
   get() {
@@ -38,10 +82,83 @@ const tab = computed({
   },
   set(value) {
     // Switching tabs starts a clean tab — a posts deep link (post_id, etc.)
-    // belongs only to the Posts tab and shouldn't bleed into Artists/Tags.
+    // and the search term belong only to the tab they were typed in and
+    // shouldn't bleed into Artists/Tags.
     router.replace({ name: 'browse', query: { tab: value } })
   },
 })
 
 const activeComponent = computed(() => TABS[tab.value])
+const searchPlaceholder = computed(() => PLACEHOLDERS[tab.value])
+
+// --- search term <-> route.query.q (debounced; deep-linkable) ---------------
+// One sticky field drives every tab. The term lives in the URL (q=) so it's
+// shareable and survives reload; each tab view watches route.query.q and
+// re-queries the server (so the search surfaces content not yet scrolled into
+// view, not just a client-side filter of loaded rows).
+const searchInput = ref(typeof route.query.q === 'string' ? route.query.q : '')
+let debounceTimer = null
+let syncingFromRoute = false
+
+watch(searchInput, (v) => {
+  if (syncingFromRoute) return
+  if (debounceTimer) clearTimeout(debounceTimer)
+  debounceTimer = setTimeout(() => {
+    const next = (v || '').trim()
+    const query = { ...route.query }
+    if (next) query.q = next
+    else delete query.q
+    router.replace({ name: 'browse', query })
+  }, 300)
+})
+
+// Keep the field in sync when q changes from elsewhere (tab switch clears it,
+// browser back/forward, a deep link). Guarded so it doesn't re-trigger a route
+// write.
+watch(() => route.query.q, (q) => {
+  const val = typeof q === 'string' ? q : ''
+  if (val === searchInput.value) return
+  syncingFromRoute = true
+  searchInput.value = val
+  nextTick(() => { syncingFromRoute = false })
+})
+
+// --- active-scope chips (Posts) ---------------------------------------------
+const artistId = computed(() => {
+  const raw = route.query.artist_id
+  return raw == null ? null : Number(raw)
+})
+const platform = computed(() => route.query.platform || null)
+// Resolve the artist's name from whatever the posts feed has loaded for this
+// scope; fall back to a generic label when the search returns nothing.
+const artistChipLabel = computed(() => {
+  const hit = postsStore.items.find((p) => p.artist?.id === artistId.value)
+  return hit?.artist?.name || 'Artist'
+})
+
+function clearFilter(key) {
+  const query = { ...route.query }
+  delete query[key]
+  router.replace({ name: 'browse', query })
+}
 </script>
+
+<style scoped>
+.fc-browse__head {
+  position: sticky;
+  top: 64px; /* directly under AppShell's 64px sticky TopNav */
+  z-index: 4;
+  background: rgb(var(--v-theme-surface));
+}
+.fc-browse__search {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding: 10px 0 12px;
+}
+.fc-browse__search-field {
+  max-width: 360px;
+  flex: 1 1 240px;
+}
+</style>

frontend/src/views/PostsView.vue

@@ -59,7 +59,8 @@
       </div>
 
       <div v-else-if="store.items.length === 0 && store.done" class="fc-posts__empty">
-        <p>No posts yet. Subscribe to a source on the
+        <p v-if="hasActiveFilter">No posts match your search or filters.</p>
+        <p v-else>No posts yet. Subscribe to a source on the
           <RouterLink to="/subscriptions">Subscriptions</RouterLink>
           tab to start capturing posts.
         </p>
@@ -93,10 +94,14 @@ const artistFilter = computed(() => {
   return raw == null ? null : Number(raw)
 })
 const platformFilter = computed(() => route.query.platform || null)
+const searchFilter = computed(() => route.query.q || null)
 const postIdFilter = computed(() => {
   const raw = route.query.post_id
   return raw == null ? null : Number(raw)
 })
+const hasActiveFilter = computed(() =>
+  artistFilter.value != null || platformFilter.value != null || searchFilter.value != null
+)
 
 // --- normal feed (downward infinite scroll) ---
 const sentinel = ref(null)
@@ -106,6 +111,7 @@ async function reload() {
   await store.loadInitial({
     artist_id: artistFilter.value,
     platform: platformFilter.value,
+    q: searchFilter.value,
   })
 }
 function onFilters({ artist_id, platform }) {
@@ -169,6 +175,7 @@ async function loadAroundAndAnchor() {
   await store.loadAround(postIdFilter.value, {
     artist_id: artistFilter.value,
     platform: platformFilter.value,
+    q: searchFilter.value,
   })
   await nextTick()
   const el = document.getElementById(`fc-post-${store.anchorId}`)
@@ -188,7 +195,7 @@ async function activate() {
 }
 
 watch(postIdFilter, activate)
-watch(() => [artistFilter.value, platformFilter.value], async () => {
+watch(() => [artistFilter.value, platformFilter.value, searchFilter.value], async () => {
   if (postIdFilter.value != null) return
   await reload()
   await nextTick()

frontend/src/views/TagsView.vue

@@ -1,12 +1,9 @@
 <template>
   <v-container fluid class="pt-2 pb-6">
 
+    <!-- Search lives in BrowseView's sticky bar (shared across tabs); this view
+         reacts to route.query.q. The kind filter stays here. -->
     <div class="fc-tags__controls">
-      <v-text-field
-        v-model="search" density="compact" variant="outlined"
-        prepend-inner-icon="mdi-magnify" hide-details
-        placeholder="Search tags" clearable style="max-width: 320px;"
-      />
       <v-chip-group
         v-model="kind" selected-class="text-accent" :mandatory="false"
       >
@@ -103,8 +100,8 @@
 </template>
 
 <script setup>
-import { ref, watch, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
+import { computed, ref, watch, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { useTagDirectoryStore } from '../stores/tagDirectory.js'
 import { useAdminStore } from '../stores/admin.js'
 import { useApi } from '../composables/useApi.js'
@@ -122,9 +119,9 @@ import FandomSetDialog from '../components/modal/FandomSetDialog.vue'
 // a tag. 'meta' + 'rating' retired by operator 2026-05-26 (alembic 0023).
 const KINDS = ['character', 'fandom', 'general', 'series']
 const store = useTagDirectoryStore()
+const route = useRoute()
 const router = useRouter()
 
-const search = ref('')
 const kind = ref(null)
 const sentinelEl = ref(null)
 const pendingMerge = ref(null)
@@ -140,17 +137,16 @@ async function confirmMerge() {
   if (c) await store.merge(c.sourceId, c.target.id)
 }
 
-let debounce = null
-watch(search, (v) => {
-  if (debounce) clearTimeout(debounce)
-  debounce = setTimeout(() => store.setQuery(v || ''), 300)
-})
+// Search term comes from BrowseView's shared sticky bar via route.query.q.
+const searchTerm = computed(() => (typeof route.query.q === 'string' ? route.query.q : ''))
+watch(searchTerm, (v) => store.setQuery(v || ''))
 watch(kind, (v) => store.setKind(v || null))
 
 useInfiniteScroll(sentinelEl, () => {
   if (store.hasMore && !store.loading) store.loadMore()
 })
-onMounted(() => store.reset())
+// Apply any deep-linked q (and load). setQuery resets + fetches.
+onMounted(() => store.setQuery(searchTerm.value || ''))
 
 function openTag(tagId) {
   router.push({ name: 'gallery', query: { tag_id: tagId } })