From 9628a3357e815be20bce1dff5844516ccecef75d Mon Sep 17 00:00:00 2001
From: Hera Zhao <hera@euphon.net>
Date: Mon, 6 Apr 2026 21:44:27 +0000
Subject: [PATCH] Fix: sync UI section from route path on direct URL access

Navigating directly to /bugs, /oils etc. now correctly activates
the matching tab and shows the right page content.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/App.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index a6948ab..77df55b 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -68,8 +68,8 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
+import { ref, onMounted, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
 import { useAuthStore } from './stores/auth'
 import { useOilsStore } from './stores/oils'
 import { useRecipesStore } from './stores/recipes'
@@ -83,8 +83,16 @@ const oils = useOilsStore()
 const recipeStore = useRecipesStore()
 const ui = useUiStore()
 const router = useRouter()
+const route = useRoute()
 const showUserMenu = ref(false)
 
+// Sync ui.currentSection from route on load and navigation
+const routeToSection = { '/': 'search', '/manage': 'manage', '/inventory': 'inventory', '/oils': 'oils', '/projects': 'projects', '/mydiary': 'mydiary', '/audit': 'audit', '/bugs': 'bugs', '/users': 'users' }
+watch(() => route.path, (path) => {
+  const section = routeToSection[path] || 'search'
+  ui.showSection(section)
+}, { immediate: true })
+
 // Preview environment detection: pr-{id}.oil.oci.euphon.net
 const hostname = window.location.hostname
 const prMatch = hostname.match(/^pr-(\d+)\./)