fix(notes): enable back navigation from dashboard (#758)

Author: antonreshetov

src/renderer/components/notes/NotesSidebar.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { useNotesApp } from '@/composables'
+import { useNavigationHistory, useNotesApp } from '@/composables'
 import { i18n } from '@/electron'
 import { router, RouterName } from '@/router'
 import { scrollToElement } from '@/utils'
 import { LayoutGrid } from 'lucide-vue-next'
 
 const { notesState } = useNotesApp()
+const { isNavigatingHistory, recordNavigation } = useNavigationHistory()
 
 function scrollToCurrentFolder() {
   if (!notesState.folderId) {
@@ -20,7 +21,18 @@ nextTick(() => {
 })
 
 async function openDashboard() {
-  await router.push({ name: RouterName.notesDashboard })
+  if (router.currentRoute.value.name === RouterName.notesDashboard) {
+    return
+  }
+
+  if (isNavigatingHistory.value) {
+    await router.push({ name: RouterName.notesDashboard })
+    return
+  }
+
+  await recordNavigation(async () => {
+    await router.push({ name: RouterName.notesDashboard })
+  })
 }
 </script>
 

src/renderer/components/notes/dashboard/Header.vue

@@ -1,8 +1,23 @@
 <script setup lang="ts">
 import { Button } from '@/components/ui/shadcn/button'
 import * as Popover from '@/components/ui/shadcn/popover'
+import * as Tooltip from '@/components/ui/shadcn/tooltip'
+import { useNavigationHistory } from '@/composables'
 import { i18n } from '@/electron'
-import { Settings2 } from 'lucide-vue-next'
+import { navigateBack, navigateForward } from '@/ipc/listeners/deepLinks'
+import { ChevronLeft, ChevronRight, Settings2 } from 'lucide-vue-next'
+
+const { canGoBack, canGoForward } = useNavigationHistory()
+
+const isHistoryVisible = computed(() => canGoBack.value || canGoForward.value)
+
+function onBackClick() {
+  void navigateBack()
+}
+
+function onForwardClick() {
+  void navigateForward()
+}
 </script>
 
 <template>
@@ -11,6 +26,41 @@ import { Settings2 } from 'lucide-vue-next'
     :description="i18n.t('notes.dashboard.description')"
   >
     <template #actions>
+      <div
+        v-if="isHistoryVisible"
+        class="flex items-center gap-1"
+      >
+        <Tooltip.Tooltip>
+          <Tooltip.TooltipTrigger as-child>
+            <Button
+              size="icon"
+              variant="outline"
+              :disabled="!canGoBack"
+              @click="onBackClick"
+            >
+              <ChevronLeft />
+            </Button>
+          </Tooltip.TooltipTrigger>
+          <Tooltip.TooltipContent>
+            {{ i18n.t("menu:history.back") }}
+          </Tooltip.TooltipContent>
+        </Tooltip.Tooltip>
+        <Tooltip.Tooltip>
+          <Tooltip.TooltipTrigger as-child>
+            <Button
+              size="icon"
+              variant="outline"
+              :disabled="!canGoForward"
+              @click="onForwardClick"
+            >
+              <ChevronRight />
+            </Button>
+          </Tooltip.TooltipTrigger>
+          <Tooltip.TooltipContent>
+            {{ i18n.t("menu:history.forward") }}
+          </Tooltip.TooltipContent>
+        </Tooltip.Tooltip>
+      </div>
       <Popover.Popover>
         <Popover.PopoverTrigger as-child>
           <Button