From 1322056b220393b03c5a0d06dc571546ff4858bc Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Thu, 28 May 2026 15:20:30 -0400
Subject: [PATCH] refactor(dry-F5): useTabQuery composable for ?tab=
 query-param routing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ArtistView and SubscriptionsView both two-way-bound a tab ref with the
?tab= query param via identical tab->URL and URL->tab watchers. Extracted
useTabQuery(validTabs, defaultTab) — defaultTab accepts a string or a
function (ArtistView's default is postCount-dependent), and resolve() is
exposed so ArtistView can re-apply it after the artist loads. Both views
drop their now-orphaned ref/useRouter imports.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/src/composables/useTabQuery.js  | 30 ++++++++++++++++++++
 frontend/src/views/ArtistView.vue        | 35 ++++++------------------
 frontend/src/views/SubscriptionsView.vue | 22 ++-------------
 3 files changed, 40 insertions(+), 47 deletions(-)
 create mode 100644 frontend/src/composables/useTabQuery.js

diff --git a/frontend/src/composables/useTabQuery.js b/frontend/src/composables/useTabQuery.js
new file mode 100644
index 0000000..57b39ae
--- /dev/null
+++ b/frontend/src/composables/useTabQuery.js
@@ -0,0 +1,30 @@
+import { ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+// Two-way bind a tab ref with the ?tab= query param: the initial value comes
+// from the URL (when it names a valid tab) else `defaultTab` — a string, or a
+// function for a state-dependent default. Tab changes push to the URL via
+// router.replace (no history spam); URL changes (back/forward) flow back into
+// the ref. Returns { tab, resolve } where resolve() re-applies the URL-or-
+// default rule (callers re-run it when their default inputs change).
+export function useTabQuery(validTabs, defaultTab) {
+  const route = useRoute()
+  const router = useRouter()
+
+  const resolveDefault = () =>
+    (typeof defaultTab === 'function' ? defaultTab() : defaultTab)
+  const resolve = () =>
+    (validTabs.includes(route.query.tab) ? route.query.tab : resolveDefault())
+
+  const tab = ref(resolve())
+
+  watch(tab, (t) => {
+    if (route.query.tab === t) return
+    router.replace({ query: { ...route.query, tab: t } })
+  })
+  watch(() => route.query.tab, (q) => {
+    if (q && validTabs.includes(q) && tab.value !== q) tab.value = q
+  })
+
+  return { tab, resolve }
+}
diff --git a/frontend/src/views/ArtistView.vue b/frontend/src/views/ArtistView.vue
index 876b9d8..0dcf90f 100644
--- a/frontend/src/views/ArtistView.vue
+++ b/frontend/src/views/ArtistView.vue
@@ -39,30 +39,26 @@
 </template>
 
 <script setup>
-import { computed, ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { computed, watch } from 'vue'
+import { useRoute } from 'vue-router'
 
 import { useArtistStore } from '../stores/artist.js'
 import ArtistHeader from '../components/artist/ArtistHeader.vue'
 import ArtistPostsTab from '../components/artist/ArtistPostsTab.vue'
 import ArtistGalleryTab from '../components/artist/ArtistGalleryTab.vue'
 import ArtistManagementTab from '../components/artist/ArtistManagementTab.vue'
+import { useTabQuery } from '../composables/useTabQuery.js'
 
 const VALID_TABS = ['posts', 'gallery', 'management']
 
 const route = useRoute()
-const router = useRouter()
 const store = useArtistStore()
 
 const slug = computed(() => route.params.slug)
-const tab = ref('posts')
-
-function resolveDefaultTab () {
-  const fromUrl = route.query.tab
-  if (VALID_TABS.includes(fromUrl)) return fromUrl
-  if ((store.postCount ?? 0) > 0) return 'posts'
-  return 'gallery'
-}
+const { tab, resolve } = useTabQuery(
+  VALID_TABS,
+  () => ((store.postCount ?? 0) > 0 ? 'posts' : 'gallery'),
+)
 
 watch(slug, async (s) => {
   if (!s) return
@@ -70,23 +66,8 @@ watch(slug, async (s) => {
   document.title = store.overview
     ? `${store.overview.name} — FabledCurator`
     : 'FabledCurator'
-  tab.value = resolveDefaultTab()
+  tab.value = resolve()
 }, { immediate: true })
-
-// Reflect tab changes back into the URL so refresh/back/forward work.
-watch(tab, (newTab) => {
-  if (route.query.tab === newTab) return
-  router.replace({
-    query: { ...route.query, tab: newTab },
-  })
-})
-
-// React to URL-tab changes (e.g., back/forward).
-watch(() => route.query.tab, (q) => {
-  if (q && VALID_TABS.includes(q) && tab.value !== q) {
-    tab.value = q
-  }
-})
 </script>
 
 <style scoped>
diff --git a/frontend/src/views/SubscriptionsView.vue b/frontend/src/views/SubscriptionsView.vue
index 7b1105c..0f2098b 100644
--- a/frontend/src/views/SubscriptionsView.vue
+++ b/frontend/src/views/SubscriptionsView.vue
@@ -36,32 +36,14 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-
 import SubscriptionsTab from '../components/subscriptions/SubscriptionsTab.vue'
 import DownloadsTab from '../components/subscriptions/DownloadsTab.vue'
 import SettingsTab from '../components/subscriptions/SettingsTab.vue'
+import { useTabQuery } from '../composables/useTabQuery.js'
 
 const VALID_TABS = ['subscriptions', 'downloads', 'settings']
 
-const route = useRoute()
-const router = useRouter()
-
-const tab = ref(
-  VALID_TABS.includes(route.query.tab) ? route.query.tab : 'subscriptions',
-)
-
-watch(tab, (t) => {
-  if (route.query.tab === t) return
-  router.replace({ query: { ...route.query, tab: t } })
-})
-
-watch(() => route.query.tab, (q) => {
-  if (q && VALID_TABS.includes(q) && tab.value !== q) {
-    tab.value = q
-  }
-})
+const { tab } = useTabQuery(VALID_TABS, 'subscriptions')
 </script>
 
 <style scoped>