From 5a192f31009d821993b47ca56c2ca92f9b2835b2 Mon Sep 17 00:00:00 2001
From: cproudlock <cproudlock@localhost>
Date: Sun, 12 Jul 2026 06:12:58 -0400
Subject: [PATCH] Sync System Settings tabs with the URL query

activeTab read ?tab= only once at mount, so settings-rail links that
change just the query (Branding, Floor Map) updated the URL without
switching the panel. The query param is now the source of truth: a
watcher applies rail/back/forward navigation and tab clicks write the
query via router.replace.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 CHANGELOG.md                                  |  3 +++
 .../src/views/settings/SystemSettings.vue     | 21 +++++++++++++++++--
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b769a27..9fc3b03 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -76,6 +76,9 @@ ADR-007 and ADR-002.
 
 ### Fixed
 
+- System Settings tabs follow the URL: clicking a settings-rail link that
+  only changes the ?tab= query (Branding, Floor Map) now switches the right
+  panel, tab clicks update the URL, and browser back/forward restore tabs.
 - Following a relationship link between two assets of the same type now loads
   the destination page instead of stale content (router-view keyed on path;
   query-only URL changes still avoid a remount).
diff --git a/frontend/src/views/settings/SystemSettings.vue b/frontend/src/views/settings/SystemSettings.vue
index 095c8fd..ec52a5f 100644
--- a/frontend/src/views/settings/SystemSettings.vue
+++ b/frontend/src/views/settings/SystemSettings.vue
@@ -15,7 +15,7 @@
         :key="tab.key"
         class="settings-tab"
         :class="{ active: activeTab === tab.key }"
-        @click="activeTab = tab.key"
+        @click="selectTab(tab.key)"
       >{{ tab.label }}</button>
       <p v-if="!visibleTabs.length" class="settings-tab-empty">No matching settings</p>
     </nav>
@@ -923,7 +923,7 @@
 
 <script setup>
 import { ref, reactive, onMounted, computed, watch } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { settingsApi, computersApi } from '../../api'
 import { setIdentifierFlag } from '../../composables/identifierSettings'
 import { apiError } from '../../utils/apiError'
@@ -944,6 +944,7 @@ const SETTINGS_TABS = [
 ]
 const settingsSearch = ref('')
 const route = useRoute()
+const router = useRouter()
 // Allow deep-linking to a tab, e.g. /settings/system?tab=map (Floor Map)
 const activeTab = ref(
   route.query.tab && SETTINGS_TABS.some(t => t.key === route.query.tab)
@@ -951,6 +952,22 @@ const activeTab = ref(
     : 'integrations'
 )
 
+// The query param is the source of truth so the settings rail (which links
+// to /settings/system?tab=...) switches the pane without a remount, and
+// back/forward + deep links behave.
+watch(() => route.query.tab, (tab) => {
+  if (tab && SETTINGS_TABS.some(t => t.key === tab) && tab !== activeTab.value) {
+    activeTab.value = String(tab)
+  }
+})
+
+function selectTab(key) {
+  activeTab.value = key
+  if (route.query.tab !== key) {
+    router.replace({ query: { ...route.query, tab: key } })
+  }
+}
+
 const visibleTabs = computed(() => {
   const term = settingsSearch.value.trim().toLowerCase()
   if (!term) return SETTINGS_TABS