feat: persist preferences and devtools menu selection in session (#724)

* feat: persist preferences and devtools menu selection in session

Use sessionStorage to remember the last active menu item in preferences
and devtools views, so navigation state survives within a session but
resets on app restart.

* feat(devtools): scroll sidebar to selected item on mount

* fix(devtools): add bottom padding to sidebar menu

Author: antonreshetov

src/renderer/components/space-rail/SpaceRail.vue

@@ -97,7 +97,7 @@ watch(
       <RouterLink
         v-slot="{ navigate }"
         custom
-        :to="{ name: RouterName.preferencesStorage }"
+        :to="{ name: RouterName.preferences }"
       >
         <UiActionButton
           :tooltip="i18n.t('preferences:label')"

src/renderer/ipc/listeners/__tests__/main-menu.test.ts

@@ -68,8 +68,8 @@ async function setup() {
 
   vi.doMock('@/router', () => ({
     RouterName: {
-      preferencesStorage: 'preferences/storage',
-      devtoolsCaseConverter: 'devtools/case-converter',
+      preferences: 'preferences',
+      devtools: 'devtools',
       notesSpace: 'notes-space',
       mathNotebook: 'math-notebook',
     },

src/renderer/ipc/listeners/main-menu.ts

@@ -47,11 +47,11 @@ export function registerMainMenuListeners() {
   registerMainMenuContextSync()
 
   ipc.on('main-menu:goto-preferences', () => {
-    router.push({ name: RouterName.preferencesStorage })
+    router.push({ name: RouterName.preferences })
   })
 
   ipc.on('main-menu:goto-devtools', () => {
-    router.push({ name: RouterName.devtoolsCaseConverter })
+    router.push({ name: RouterName.devtools })
   })
 
   ipc.on('main-menu:navigate-back', () => {

src/renderer/router/index.ts

@@ -44,6 +44,10 @@ const routes = [
     path: '/preferences',
     name: RouterName.preferences,
     component: () => import('@/views/Preferences.vue'),
+    redirect: () => {
+      const saved = sessionStorage.getItem('preferences:lastRoute')
+      return { name: saved || RouterName.preferencesStorage }
+    },
     children: [
       {
         path: 'storage',
@@ -86,6 +90,10 @@ const routes = [
     path: '/devtools',
     name: RouterName.devtools,
     component: () => import('@/views/Devtools.vue'),
+    redirect: () => {
+      const saved = sessionStorage.getItem('devtools:lastRoute')
+      return { name: saved || RouterName.devtoolsCaseConverter }
+    },
     children: [
       {
         path: 'text/case-converter',

src/renderer/spaceDefinitions.ts

@@ -57,7 +57,7 @@ export function getSpaceDefinitions(): SpaceDefinition[] {
       label: i18n.t('spaces.tools.label'),
       tooltip: i18n.t('spaces.tools.tooltip'),
       icon: Blocks,
-      to: { name: RouterName.devtoolsCaseConverter },
+      to: { name: RouterName.devtools },
       isActive: routeName =>
         isRouteNameInSpace(routeName, RouterName.devtools),
     },

src/renderer/views/Devtools.vue

@@ -4,6 +4,14 @@ import { RouterName } from '@/router'
 import { useRoute } from 'vue-router'
 
 const route = useRoute()
+const sidebarRef = useTemplateRef<HTMLElement>('sidebarRef')
+
+onMounted(() => {
+  nextTick(() => {
+    const el = sidebarRef.value?.querySelector('[data-selected="true"]')
+    el?.scrollIntoView({ block: 'center' })
+  })
+})
 
 const isActiveRoute = computed(() => {
   return (name: string) => route.name === name
@@ -89,6 +97,16 @@ const generatorsNav = [
   },
 ]
 
+watch(
+  () => route.name,
+  (name) => {
+    if (name && typeof name === 'string' && name.startsWith('devtools/')) {
+      sessionStorage.setItem('devtools:lastRoute', name)
+    }
+  },
+  { immediate: true },
+)
+
 const compareNav = [
   {
     label: i18n.t('devtools:compare.jsonDiff.label'),
@@ -111,7 +129,10 @@ const compareNav = [
       </div>
     </template>
     <template #left>
-      <div class="scrollbar h-full min-h-0 overflow-y-auto px-2">
+      <div
+        ref="sidebarRef"
+        class="scrollbar h-full min-h-0 overflow-y-auto px-2 pb-2"
+      >
         <RouterLink
           v-for="item in convertersNav"
           :key="item.name"

src/renderer/views/Preferences.vue

@@ -62,6 +62,16 @@ const nav: { label: string, name: string, icon: Component }[] = [
   },
 ]
 
+watch(
+  () => route.name,
+  (name) => {
+    if (name && typeof name === 'string' && name.startsWith('preferences/')) {
+      sessionStorage.setItem('preferences:lastRoute', name)
+    }
+  },
+  { immediate: true },
+)
+
 provide(preferencesKeys, {
   scrollRef,
 })