Merge pull request 'fix(extension): Add-to-FC button on subscribed Patreon creators + v1.0.8 (#1485)' (#230) from dev into main

Symptom (operator-flagged): the extension injected the Add-as-source button on
a Patreon creator you had NOT subscribed to, but it disappeared once you were
subscribed — the opposite of when it's useful.

Root cause (extension logic, not Patreon security): Patreon serves a creator
under three URL shapes — bare patreon.com/Atole, patreon.com/c/Atole, and
patreon.com/cw/Atole (the 'creator workspace' URL you land on once subscribed;
documented in patreon_resolver._VANITY_RE). The button's artist-page gate
(PLATFORM_ARTIST_PATTERNS.patreon in platforms.js) and its byte-mirror probe
pattern (_PLATFORM_PATTERNS in extension_service._derive) only matched the bare
single-segment form and explicitly excluded c/. So the subscribed-view URL
failed the gate → no button. The ingestion resolver already handled all three;
only these two gates were too narrow.

Fix: both regexes now accept optional cw/ and c/ prefixes and drop the strict
single-segment end-anchor, so a creator's inner page (/cw/Atole/posts,
/Atole/membership) also matches — robust to whatever exact shape the subscribed
view uses. Nav-page exclusions (home/search/messages/notifications/library/
settings/posts + post permalinks) preserved. New unit test covers all three
prefixes, sub-paths, and nav-page rejection (both regexes validated identically).

Bump extension 1.0.7→1.0.8 so a fresh signed XPI ships the fix (also exercises
batch-5 web-ext-10's AMO sign path end-to-end on the main build).

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

backend/app/services/extension_service.py

@@ -35,9 +35,14 @@ class InvalidUrlError(Exception):
 # reviewers catch drift.
 _PLATFORM_PATTERNS: list[tuple[str, re.Pattern[str]]] = [
     ("patreon", re.compile(
+        # Three creator URL shapes — bare (patreon.com/Atole), `c/`, and `cw/`
+        # (the "creator workspace" URL served once subscribed, see
+        # patreon_resolver._VANITY_RE). A trailing sub-path is allowed so a
+        # creator's inner page still derives the slug. Nav pages stay excluded.
         r"^https?://(?:www\.)?patreon\.com/"
-        r"(?!home$|search\b|messages\b|notifications\b|library\b|settings\b|posts\b|c/)"
-        r"(?P<slug>[^/?#]+)/?$",
+        r"(?:cw/|c/)?"
+        r"(?!(?:home|search|messages|notifications|library|settings|posts)(?:[/?#]|$))"
+        r"(?P<slug>[^/?#]+)",
         re.IGNORECASE,
     )),
     ("subscribestar", re.compile(

extension/lib/platforms.js

@@ -86,7 +86,16 @@ const PLATFORMS = {
  * script to decide whether to show the floating "Add as source" button.
  */
 const PLATFORM_ARTIST_PATTERNS = {
-  patreon:       /^https?:\/\/(www\.)?patreon\.com\/(?!home$|search\b|messages\b|notifications\b|library\b|settings\b|posts\b|c\/)[^/?#]+\/?$/i,
+  // Patreon serves the same creator under three URL shapes (see backend
+  // patreon_resolver._VANITY_RE): bare `patreon.com/Atole`, `c/` prefix, and
+  // `cw/` "creator workspace" — the last is the URL you land on once you're
+  // SUBSCRIBED, which is exactly when the button matters. Match all three, and
+  // drop the single-segment end-anchor so a creator's inner page
+  // (…/cw/Atole/posts, …/Atole/membership) also injects the button. Nav pages
+  // (home/search/…/posts permalink) stay excluded. Mirrors extension_service
+  // ._PLATFORM_PATTERNS — keep in sync (operator-flagged 2026-07-13: button
+  // vanished once subscribed because the old pattern only matched the bare root).
+  patreon:       /^https?:\/\/(www\.)?patreon\.com\/(?:cw\/|c\/)?(?!(?:home|search|messages|notifications|library|settings|posts)(?:[\/?#]|$))[^/?#]+/i,
   subscribestar: /^https?:\/\/(www\.)?subscribestar\.(com|adult)\/(?!feed$|messages$|library$)[^/?#]+\/?$/i,
   hentaifoundry: /^https?:\/\/(www\.)?hentai-foundry\.com\/user\/[^/?#]+/i,
   deviantart:    /^https?:\/\/(www\.)?deviantart\.com\/(?!home$|watch\b|tag\b|browse\b)[^/?#]+\/?$/i,

extension/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "FabledCurator",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Export cookies from supported platforms to FabledCurator and add creators as sources in one click.",
 
   "browser_specific_settings": {

extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fabledcurator-extension",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "private": true,
   "description": "Firefox extension for FabledCurator",
   "scripts": {
@@ -10,6 +10,6 @@
     "sign":  "web-ext sign --source-dir=. --no-config-discovery --ignore-files package.json package-lock.json web-ext-artifacts node_modules README.md .gitignore --channel=unlisted --api-key=$WEB_EXT_API_KEY --api-secret=$WEB_EXT_API_SECRET"
   },
   "devDependencies": {
-    "web-ext": "^8.0.0"
+    "web-ext": "^10.0.0"
   }
 }

frontend/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "engines": {
-    "node": ">=22"
+    "node": ">=24"
   },
   "scripts": {
     "dev": "vite",
@@ -13,16 +13,16 @@
     "test:unit": "vitest run"
   },
   "dependencies": {
-    "vue": "^3.4.0",
-    "vue-router": "^4.3.0",
-    "pinia": "^2.1.0",
-    "vuetify": "^3.5.0",
+    "vue": "^3.5.0",
+    "vue-router": "^5.0.0",
+    "pinia": "^3.0.0",
+    "vuetify": "^4.0.0",
     "@mdi/font": "^7.4.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.0",
     "vite": "^8.0.0",
-    "vite-plugin-vuetify": "^2.0.0",
+    "vite-plugin-vuetify": "^2.1.0",
     "sass": "^1.71.0",
     "vitest": "^4.0.0",
     "@vue/test-utils": "^2.4.0",

frontend/src/components/AppShell.vue

@@ -18,11 +18,11 @@ const route = useRoute()
 <style scoped>
 .fc-content {
   min-height: 100vh;
-  /* Push initial viewport content below the sticky TopNav. Without
-     this, some views' first rows / form fields / table headers can
-     end up obscured by the navbar (depending on parent overflow
-     context interacting with position: sticky). Scrolled-down content
-     still slides under the nav — the gradient-fade design is intact. */
-  padding-top: 64px;
+  /* NO padding-top: the TopNav is position:sticky, so it already reserves its
+     own space in the v-app flex column — content flows directly below it. The
+     old 64px padding-top was a leftover from a FIXED navbar and double-counted
+     that space, leaving a large empty band at the top of EVERY view (and pushing
+     the full-height calc(100vh - 64px) views down so they overflowed). Removed
+     2026-07-13. Scrolled content still slides under the sticky nav as before. */
 }
 </style>

frontend/src/components/AppSnackbar.vue

@@ -1,7 +1,7 @@
 <template>
   <v-snackbar
     v-model="show" :color="color" location="bottom right" timeout="4000"
-    multi-line elevation="4"
+    min-height="68" elevation="4"
   >
     {{ message }}
     <template #actions>

frontend/src/components/TopNav.vue

@@ -1,5 +1,5 @@
 <template>
-  <header class="fc-topnav">
+  <header ref="navEl" class="fc-topnav" :class="{ 'fc-topnav--chrome': hasStickyChrome }">
     <div class="fc-nav-left">
       <RouterLink :to="FRONT_DOOR" class="fc-brand" aria-label="FabledCurator home">
         <img src="/favicon.svg" alt="" class="fc-brand__glyph" width="22" height="22" />
@@ -64,13 +64,39 @@
 </template>
 
 <script setup>
-import { computed, onMounted } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
 import router, { FRONT_DOOR } from '../router.js'
 import { useSystemStore } from '../stores/system.js'
 import PipelineStatusChip from './PipelineStatusChip.vue'
 
 const system = useSystemStore()
-onMounted(() => system.refreshHealth())
+
+// Publish the nav's REAL height as --fc-nav-h so full-height workspaces
+// (Explore/Subscriptions) and sticky sub-headers pin to it exactly instead of a
+// hardcoded 64px that Vuetify 4's MD3 sizing broke — the Explore breadcrumb was
+// tucking under a taller nav (#1481). ResizeObserver keeps it live as the nav
+// reflows (per-view teleported actions, mobile breakpoint, chip state changes).
+const navEl = ref(null)
+let navRO = null
+onMounted(() => {
+  system.refreshHealth()
+  if (navEl.value && 'ResizeObserver' in window) {
+    navRO = new ResizeObserver(() => {
+      const h = navEl.value?.offsetHeight
+      if (h) document.documentElement.style.setProperty('--fc-nav-h', `${h}px`)
+    })
+    navRO.observe(navEl.value)
+  }
+})
+onBeforeUnmount(() => { navRO?.disconnect() })
+
+// Views that pin a sticky sub-header (filter bar / tabs) directly under the nav
+// declare `meta.stickyChrome`. On those, the nav doesn't fade to transparent at
+// its bottom — it hands off at the shared seam alpha so the sub-header can
+// continue the SAME fade (see .fc-chrome-continues in app.css). One gradient.
+const route = useRoute()
+const hasStickyChrome = computed(() => !!route.meta?.stickyChrome)
 
 // Every route with a meta.title is a nav entry. Order by meta.navOrder —
 // router.getRoutes() does NOT guarantee declaration order, so explicit numbers
@@ -119,16 +145,35 @@ const health = computed(() => {
   align-items: center;
   gap: 1rem;
   padding: 0.75rem 1rem;
-  /* Obsidian (#14171A = 20,23,26) gradient fade — content scrolls under it. */
+  /* Obsidian (#14171A) fade — content scrolls under it. Holds high (0.92 →
+     0.84) through the top half, then eases to transparent over the bottom
+     quarter so it tails off softly instead of a straight line to a hard edge
+     (operator 2026-07-13). Shared --fc-chrome-rgb keeps it in sync with the
+     sub-header continuation. */
   background: linear-gradient(
     to bottom,
-    rgba(20, 23, 26, 0.92) 0%,
-    rgba(20, 23, 26, 0.65) 60%,
-    rgba(20, 23, 26, 0) 100%
+    rgba(var(--fc-chrome-rgb), 0.92) 0%,
+    rgba(var(--fc-chrome-rgb), 0.84) 50%,
+    rgba(var(--fc-chrome-rgb), 0.55) 75%,
+    rgba(var(--fc-chrome-rgb), 0) 100%
   );
   backdrop-filter: blur(2px);
   -webkit-backdrop-filter: blur(2px);
 }
+/* On a view with a sticky sub-header pinned beneath (meta.stickyChrome), the nav
+   stops fading at the shared seam alpha instead of going fully transparent — the
+   sub-header (.fc-chrome-continues) picks the fade up from there, so the two read
+   as one continuous gradient. Compound selector out-specifies .fc-topnav so it
+   wins regardless of Vite's production CSS ordering. --fc-chrome-* come from the
+   global :root in app.css (custom props inherit into scoped styles). */
+.fc-topnav.fc-topnav--chrome {
+  background: linear-gradient(
+    to bottom,
+    rgba(var(--fc-chrome-rgb), 0.92) 0%,
+    rgba(var(--fc-chrome-rgb), 0.84) 60%,
+    rgba(var(--fc-chrome-rgb), var(--fc-chrome-seam)) 100%
+  );
+}
 
 .fc-brand {
   display: flex;

frontend/src/components/cleanup/MinDimensionCard.vue

@@ -10,7 +10,7 @@
       filter, applied retroactively to the existing library.
     </p>
 
-    <v-row dense>
+    <v-row density="compact">
       <v-col cols="6">
         <v-text-field
           v-model.number="minW" label="Min width (px)" type="number"

frontend/src/components/cleanup/SingleColorAuditCard.vue

@@ -13,7 +13,7 @@
       cadence as the transparency audit.
     </p>
 
-    <v-row dense>
+    <v-row density="compact">
       <v-col cols="6">
         <v-text-field
           v-model.number="threshold" label="Threshold (0–1)"

frontend/src/components/common/TagPicker.vue

@@ -14,10 +14,10 @@
     @update:search="onSearch"
     @update:model-value="onPick"
   >
-    <template #item="{ props: itemProps, item }">
-      <v-list-item v-bind="itemProps" :title="item.raw.name">
+    <template #item="{ props: itemProps, internalItem }">
+      <v-list-item v-bind="itemProps" :title="internalItem.raw.name">
         <template #subtitle>
-          {{ item.raw.fandom_name ? `character · ${item.raw.fandom_name}` : item.raw.kind }}
+          {{ internalItem.raw.fandom_name ? `character · ${internalItem.raw.fandom_name}` : internalItem.raw.kind }}
         </template>
       </v-list-item>
     </template>

frontend/src/components/gallery/GalleryFilterBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="fc-filterbar-wrap">
+  <div class="fc-filterbar-wrap fc-chrome-continues">
    <div class="fc-filterbar">
     <v-autocomplete
       v-model="selected"
@@ -13,14 +13,14 @@
       @update:search="onSearch"
       @update:model-value="onPick"
     >
-      <template #item="{ props: itemProps, item }">
-        <v-list-item v-bind="itemProps" :title="item.raw.name">
+      <template #item="{ props: itemProps, internalItem }">
+        <v-list-item v-bind="itemProps" :title="internalItem.raw.name">
           <template #prepend>
-            <v-icon size="small">{{ iconFor(item.raw) }}</v-icon>
+            <v-icon size="small">{{ iconFor(internalItem.raw) }}</v-icon>
           </template>
           <template #subtitle>
-            {{ item.raw.kind === 'artist' ? 'artist'
-              : (item.raw.fandom_name ? `character · ${item.raw.fandom_name}` : item.raw.kind) }}
+            {{ internalItem.raw.kind === 'artist' ? 'artist'
+              : (internalItem.raw.fandom_name ? `character · ${internalItem.raw.fandom_name}` : internalItem.raw.kind) }}
           </template>
         </v-list-item>
       </template>
@@ -306,27 +306,17 @@ function pushFilter(mutate) {
    frosted block pinned directly under the 64px TopNav and continuous with it. */
 .fc-filterbar-wrap {
   position: sticky;
-  top: 64px;
+  top: var(--fc-nav-h, 64px); /* pins at the nav's real measured bottom (#1481) */
   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;
   margin-bottom: 12px;
-  /* EXACT same gradiated obsidian (#14171A = 20,23,26) frost as the TopNav so
-     the two read as one continuous piece of chrome — images scroll visibly
-     under both. The nav's gradient fades to transparent at ITS bottom; this
-     bar re-darkens at its top, so a faint seam (the page/image showing through
-     the nav's transparent edge) separates them when scrolled to the very top,
-     while under-scroll they frost as one. */
-  background: linear-gradient(
-    to bottom,
-    rgba(20, 23, 26, 0.92) 0%,
-    rgba(20, 23, 26, 0.65) 60%,
-    rgba(20, 23, 26, 0) 100%
-  );
-  backdrop-filter: blur(2px);
-  -webkit-backdrop-filter: blur(2px);
+  /* The frost itself (obsidian fade + blur) is the shared .fc-chrome-continues
+     primitive: it CONTINUES the TopNav's fade from the seam alpha to transparent
+     rather than re-darkening, so the nav + bar read as one gradient (operator
+     2026-07-13). This block only owns the sticky positioning now. */
 }
 .fc-filterbar {
   display: flex;
@@ -341,6 +331,20 @@ function pushFilter(mutate) {
 .fc-filterbar-wrap :deep(.v-btn-group) {
   background-color: rgba(20, 23, 26, 0.72);
 }
+/* Media toggle (All / Images / Videos) as ONE cohesive segmented control.
+   FC's global VBtn { rounded: 'pill' } default made Vuetify 4 pill-round each
+   SEGMENT individually, so the rounded ends collided at the joins — the shapes
+   landed awkwardly on the button edges (operator 2026-07-13). Square the inner
+   segments (over the pill utility's !important) and clip the group to a single
+   8px outline (matches the chips/tiles rounding elsewhere in the app). Radius
+   only — no height change, so the bar height and nav offset are untouched. */
+.fc-filterbar-wrap :deep(.v-btn-toggle) {
+  border-radius: 8px;
+  overflow: hidden;
+}
+.fc-filterbar-wrap :deep(.v-btn-toggle .v-btn) {
+  border-radius: 0 !important;
+}
 .fc-filterbar__search { max-width: 320px; min-width: 200px; }
 .fc-filterbar__chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
 /* The tag chips' bodies toggle include/exclude — signal they're clickable. */

frontend/src/components/settings/ImportFiltersForm.vue

@@ -15,7 +15,7 @@
           being dropped as duplicates;</strong> raise it to collapse more
           look-alikes. Applies to new imports.
         </div>
-        <v-row align="center" no-gutters>
+        <v-row no-gutters class="align-center">
           <v-col cols="12" sm="9">
             <v-slider
               v-model="local.phash_threshold"

frontend/src/components/settings/SystemStatsCards.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-row dense>
+  <v-row density="compact">
     <v-col v-for="card in cards" :key="card.label" cols="12" sm="6" md="4" lg="3" xl="2">
       <v-card class="fc-stat">
         <v-card-text>

frontend/src/router.js

@@ -20,7 +20,7 @@ const routes = [
 
   // FC-2: image backbone
   { path: '/showcase', name: 'showcase', component: ShowcaseView, meta: { title: 'Showcase', navOrder: 10 } },
-  { path: '/gallery',  name: 'gallery',  component: GalleryView,  meta: { title: 'Gallery', navOrder: 20  } },
+  { path: '/gallery',  name: 'gallery',  component: GalleryView,  meta: { title: 'Gallery', navOrder: 20, stickyChrome: true } },
   // Explore: a 3-pane tagging workspace — walk an image's visual neighbours
   // (left) while tagging the focused image (center viewer + modal-parity tag
   // rail). Optional anchor param — the bare /explore nav entry SEEDS a random
@@ -29,11 +29,11 @@ const routes = [
   // Browse hub (operator-asked 2026-06-09): Posts / Artists / Tags as tabs —
   // the three "browse the library by an axis" surfaces. One nav entry; the old
   // standalone paths redirect into the matching tab (below).
-  { path: '/browse', name: 'browse', component: BrowseView, meta: { title: 'Browse', navOrder: 30 } },
+  { path: '/browse', name: 'browse', component: BrowseView, meta: { title: 'Browse', navOrder: 30, stickyChrome: true } },
   // Artist detail — no meta.title (reached by clicking an artist, not nav).
   { path: '/artist/:slug', name: 'artist', component: ArtistView },
   // Series browse — a nav entry (meta.title).
-  { path: '/series', name: 'series', component: SeriesView, meta: { title: 'Series', navOrder: 40 } },
+  { path: '/series', name: 'series', component: SeriesView, meta: { title: 'Series', navOrder: 40, stickyChrome: true } },
   // Series management — no meta.title (reached from a series card/tag).
   { path: '/series/:tagId', name: 'series-manage', component: SeriesManageView },
   // Series reader — immersive (no top nav, no meta.title).
@@ -41,10 +41,10 @@ const routes = [
 
   // FC-3: subscription backbone — purely management (sources/downloads),
   // distinct from the Browse hub.
-  { path: '/subscriptions', name: 'subscriptions', component: SubscriptionsView, meta: { title: 'Subscriptions', navOrder: 50 } },
+  { path: '/subscriptions', name: 'subscriptions', component: SubscriptionsView, meta: { title: 'Subscriptions', navOrder: 50, stickyChrome: true } },
 
   // Settings — config, pinned to the right of the nav (TopNav special-cases it).
-  { path: '/settings', name: 'settings', component: SettingsView, meta: { title: 'Settings' } },
+  { path: '/settings', name: 'settings', component: SettingsView, meta: { title: 'Settings', stickyChrome: true } },
 
   // The old standalone paths now redirect into the Browse hub, preserving any
   // deep-link query (e.g. /posts?post_id=N → /browse?tab=posts&post_id=N). The

frontend/src/styles/app.css

@@ -39,3 +39,77 @@
    deliberately not used here. `.fc-muted` is a custom class Vuetify never
    emits, so no specificity/reorder fight — no !important needed. */
 .fc-muted { color: rgb(var(--v-theme-on-surface-variant)); }
+
+/* Vuetify 4 dropped its global CSS reset (normalisation moved into each
+   component). FC's layouts assumed the reset zeroed margins on text elements, so
+   restore just that — the "minimal reset" from the v4 upgrade guide — inside
+   Vuetify's own reset layer, which is low precedence so component + app styles
+   still win over it. Batch-4 Vuetify 3→4 (#1449). */
+@layer vuetify-core.reset {
+  ul, ol, figure, details, summary { padding: 0; margin: 0; }
+  h1, h2, h3, h4, h5, h6, p { margin: 0; }
+}
+
+/* Active-tab indicator (operator-flagged 2026-07-13 in the Vuetify-4 review): v4's
+   MD3 v-tab "slider" underline renders wider than the tab and floats below it. The
+   active tab's TEXT is already accent-coloured (color="accent"), so drop the slider
+   and mark the active tab with a subtle accent fill + rounded top — a clean,
+   unambiguous highlight app-wide (Subscriptions / Browse / Settings / Series). */
+.v-tab__slider { display: none !important; }
+.v-tab[aria-selected="true"],
+.v-tab.v-tab--selected {
+  background: rgb(var(--v-theme-accent) / 0.12);
+  border-radius: 8px 8px 0 0;
+}
+
+/* --- Continuous chrome fade (operator-asked 2026-07-13: "group the sub-nav as
+   part of the nav and use a single gradient in them"). ------------------------
+   The TopNav and any sticky sub-header pinned directly beneath it (Gallery's
+   filter bar, the Browse/Series/Settings/Subscriptions tabs bars) used to each
+   paint their OWN dark-to-transparent gradient (or a solid band), so the fade
+   read as happening TWICE — dark, fade out, then dark again. Instead the two
+   share ONE obsidian fade: the nav paints the TOP half (opaque → the seam
+   alpha) and the sub-header paints the CONTINUATION (seam alpha → transparent)
+   over its own height. Both reference --fc-chrome-seam, so the alphas meet
+   exactly at the 64px boundary — no re-darkening, no doubling, one gradient.
+
+   --fc-chrome-seam is the single knob: raise it for a heavier sub-header (more
+   legible tabs/controls over scrolling content), lower it for a lighter fade. */
+:root {
+  --fc-chrome-rgb: 20, 23, 26;   /* obsidian #14171A — matches the TopNav */
+  /* Alpha where the nav hands off to the sub-header — also the "hold" level of
+     the fade. The chrome stays fairly opaque (0.92 → this) through the bulk of
+     its height, then drops to transparent in a small eased section at the very
+     bottom (see the multi-stop gradients), so it reads as a slow falloff that
+     tails off softly rather than a straight line to a hard edge (operator
+     2026-07-13). Raise for heavier/​more-legible chrome, lower for a lighter fade. */
+  --fc-chrome-seam: 0.68;
+  /* Actual TopNav height, measured live (ResizeObserver in TopNav.vue) and used
+     by full-height workspaces (Explore/Subscriptions: calc(100vh - var)) and by
+     every sticky sub-header pinned beneath the nav (top: var). This was a
+     hardcoded 64px in ~6 places; Vuetify 4's MD3 sizing made the real nav a
+     different height, so the Explore workspace overflowed and its breadcrumb
+     tucked under the nav (#1481). This fallback is only used pre-measure. */
+  --fc-nav-h: 64px;
+}
+/* Applied to a sticky sub-header so it continues the nav's fade instead of
+   restarting it. Percentage stops so the fade always spans the element's height
+   (survives the filter bar's expanding refine panel). The blur keeps tabs and
+   controls legible as the fill thins toward transparent — the solid-surface
+   bars it replaces had none, so it must live here. */
+.fc-chrome-continues {
+  /* Continues the nav's fade: HOLDS near the seam alpha through the first ~55%
+     (subtle), then eases down to transparent over the last ~45% with an
+     intermediate stop so the tail is soft — no hard line at the bottom edge
+     (operator 2026-07-13). Percentage stops keep the shape spanning the
+     element's height (survives the filter bar's expanding refine panel). */
+  background: linear-gradient(
+    to bottom,
+    rgba(var(--fc-chrome-rgb), var(--fc-chrome-seam)) 0%,
+    rgba(var(--fc-chrome-rgb), 0.60) 55%,
+    rgba(var(--fc-chrome-rgb), 0.28) 82%,
+    rgba(var(--fc-chrome-rgb), 0) 100%
+  );
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+}

frontend/src/views/BrowseView.vue

@@ -7,7 +7,7 @@
          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">
+    <div class="fc-browse__head fc-chrome-continues">
       <v-container fluid class="py-0">
         <!-- Tabs and search share one row: the axis switcher on the left, the
              search field + active-scope chips on the right (operator-asked
@@ -154,9 +154,10 @@ function clearFilter(key) {
 <style scoped>
 .fc-browse__head {
   position: sticky;
-  top: 64px; /* directly under AppShell's 64px sticky TopNav */
+  top: var(--fc-nav-h, 64px); /* pins at the nav's real measured bottom (#1481) */
   z-index: 4;
-  background: rgb(var(--v-theme-surface));
+  /* Background is the shared .fc-chrome-continues fade — it continues the nav's
+     gradient instead of a solid surface band (operator 2026-07-13). */
 }
 .fc-browse__bar {
   display: flex;

frontend/src/views/ExploreView.vue

@@ -286,10 +286,13 @@ onUnmounted(() => {
 <style scoped>
 .fc-muted { color: rgb(var(--v-theme-on-surface-variant)); }
 
-/* Full-height workspace under the sticky top nav. */
+/* Full-height workspace under the sticky top nav. --fc-nav-h is the nav's REAL
+   measured height (set by TopNav) — a hardcoded 64px here overflowed the
+   viewport under Vuetify 4's taller nav and tucked the breadcrumb under it
+   (#1481). Panes scroll internally, so an exact fit keeps everything on screen. */
 .fc-ex {
   display: flex; flex-direction: column;
-  height: calc(100vh - 64px);
+  height: calc(100vh - var(--fc-nav-h, 64px));
   min-height: 0;
 }
 

frontend/src/views/SeriesView.vue

@@ -4,7 +4,7 @@
          the 64px TopNav (operator-asked 2026-06-12), so the axis switcher and
          search/sort stay reachable on a long grid. The controls can't sit
          inside v-window (it clips sticky children), so they're hoisted here. -->
-    <div class="fc-series__head">
+    <div class="fc-series__head fc-chrome-continues">
       <v-tabs v-model="tab" density="compact">
         <v-tab value="browse">Browse</v-tab>
         <v-tab value="suggestions">
@@ -294,12 +294,13 @@ onMounted(() => {
 
 <style scoped>
 /* Sticky header (tabs + active-tab controls) pinned under the 64px TopNav, so
-   content scrolls cleanly beneath it. Surface bg matches SettingsView. */
+   content scrolls cleanly beneath it. Background is the shared
+   .fc-chrome-continues fade — continues the nav's gradient rather than a solid
+   band (operator 2026-07-13). */
 .fc-series__head {
   position: sticky;
-  top: 64px;
+  top: var(--fc-nav-h, 64px); /* pins at the nav's real measured bottom (#1481) */
   z-index: 4;
-  background: rgb(var(--v-theme-surface));
   padding-bottom: 12px;
 }
 .fc-series-browse__controls {

frontend/src/views/SettingsView.vue

@@ -7,13 +7,11 @@
     <!-- Sticky tabs: operator-flagged 2026-05-25 — long Import / Maintenance
          panels pushed the tab strip out of the viewport, forcing a scroll-
          to-top just to change tab. AppShell's TopNav is 64px sticky, so the
-         tab strip lives directly under it. Background uses the theme surface
-         token so it visually merges with the page rather than the
-         translucent v-tabs default. -->
+         tab strip lives directly under it. The .fc-chrome-continues fade
+         continues the nav's gradient across the strip (operator 2026-07-13). -->
     <v-tabs
-      v-model="tab" color="accent" class="mb-4"
-      style="position: sticky; top: 64px; z-index: 4;
-             background: rgb(var(--v-theme-surface));"
+      v-model="tab" color="accent" class="mb-4 fc-chrome-continues"
+      style="position: sticky; top: var(--fc-nav-h, 64px); z-index: 4;"
     >
       <v-tab value="overview">Overview</v-tab>
       <v-tab value="activity">Activity</v-tab>

frontend/src/views/SubscriptionsView.vue

@@ -5,7 +5,7 @@
       align-tabs="start"
       color="accent"
       density="compact"
-      class="fc-subs-tabs"
+      class="fc-subs-tabs fc-chrome-continues"
     >
       <v-tab value="subscriptions">
         <v-icon start>mdi-account-multiple-check</v-icon>
@@ -55,15 +55,18 @@ const { tab } = useTabQuery(VALID_TABS, 'subscriptions')
   /* Fixed-height hub: the tabs (and each tab's sticky control bar) stay
      put while ONLY the tab content scrolls — previously the whole view
      scrolled instead of just the subscription list (operator-flagged
-     2026-05-28). 64px = the TopNav height (AppShell .fc-content pad-top). */
-  height: calc(100vh - 64px);
+     2026-05-28). --fc-nav-h = the TopNav's real measured height (#1481). */
+  height: calc(100vh - var(--fc-nav-h, 64px));
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }
 .fc-subs-tabs {
   flex: 0 0 auto;
-  border-bottom: 1px solid rgb(var(--v-theme-on-surface-variant) / 0.18);
+  /* Cancel the shell's pt-2 so the tabs sit flush under the 64px nav, letting
+     the .fc-chrome-continues fade read as one gradient with it (operator
+     2026-07-13). The fade replaces the old border-bottom separator. */
+  margin-top: -8px;
 }
 .fc-subs-window {
   flex: 1 1 auto;

tests/test_extension_url_derive.py

@@ -0,0 +1,65 @@
+"""Unit tests for ExtensionService._derive — the URL → (platform, slug)
+parser that gates the browser extension's "Add as source" button and pulls
+the creator slug on probe/add.
+
+Regression cover for #1485: Patreon serves the same creator under three URL
+shapes — bare `patreon.com/Atole`, `c/`, and `cw/` (the "creator workspace"
+URL you land on once SUBSCRIBED). The button used to vanish while subscribed
+because the pattern only matched the bare root and excluded `c/`.
+
+_derive is pure URL parsing (no DB / no async), so a session-less instance is
+fine to exercise directly.
+"""
+
+import pytest
+
+from backend.app.services.extension_service import (
+    ExtensionService,
+    InvalidUrlError,
+    UnknownPlatformError,
+)
+
+_svc = ExtensionService(None)
+
+
+@pytest.mark.parametrize(
+    "url, slug",
+    [
+        # All three Patreon creator prefixes resolve to the same vanity slug.
+        ("https://www.patreon.com/Atole", "Atole"),
+        ("https://www.patreon.com/c/Atole", "Atole"),
+        ("https://www.patreon.com/cw/Atole", "Atole"),  # subscribed-view URL
+        # A creator's inner page still derives the slug (trailing sub-path).
+        ("https://www.patreon.com/cw/Atole/posts", "Atole"),
+        ("https://www.patreon.com/Atole/membership", "Atole"),
+        ("https://patreon.com/c/Atole", "Atole"),  # bare host, no www
+    ],
+)
+def test_derive_patreon_creator_urls(url, slug):
+    platform, got = _svc._derive(url)
+    assert platform == "patreon"
+    assert got == slug
+
+
+@pytest.mark.parametrize(
+    "url",
+    [
+        # Patreon's own nav pages must never read as a creator slug.
+        "https://www.patreon.com/home",
+        "https://www.patreon.com/settings",
+        "https://www.patreon.com/search",
+        "https://www.patreon.com/messages",
+        "https://www.patreon.com/library",
+        "https://www.patreon.com/notifications",
+        "https://www.patreon.com/posts/12345",       # post permalink
+        "https://www.patreon.com/settings/billing",  # nav sub-page
+    ],
+)
+def test_derive_patreon_nav_pages_rejected(url):
+    with pytest.raises(UnknownPlatformError):
+        _svc._derive(url)
+
+
+def test_derive_rejects_missing_scheme():
+    with pytest.raises(InvalidUrlError):
+        _svc._derive("patreon.com/Atole")