chore(ui): consistent back navigation (#1164)

Co-authored-by: Daniel Roe <daniel@roe.dev>

Author: iiio2

app/composables/useCanGoBack.ts

@@ -0,0 +1,11 @@
+export function useCanGoBack() {
+  const canGoBack = ref(false)
+
+  const router = useRouter()
+
+  onMounted(() => {
+    canGoBack.value = router.options.history.state.back !== null
+  })
+
+  return canGoBack
+}

app/pages/about.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 const router = useRouter()
+const canGoBack = useCanGoBack()
 
 interface GitHubContributor {
   login: string
@@ -53,7 +54,7 @@ const { data: contributors, status: contributorsStatus } = useFetch<GitHubContri
             type="button"
             class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
             @click="router.back()"
-            v-show="router.options.history.state.back !== null"
+            v-if="canGoBack"
           >
             <span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
             <span class="hidden sm:inline">{{ $t('nav.back') }}</span>

app/pages/compare.vue

@@ -7,6 +7,7 @@ definePageMeta({
 })
 
 const router = useRouter()
+const canGoBack = useCanGoBack()
 
 // Sync packages with URL query param (stable ref - doesn't change on other query changes)
 const packagesParam = useRouteQuery<string>('packages', '', { mode: 'replace' })
@@ -118,7 +119,7 @@ useSeoMeta({
             type="button"
             class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
             @click="router.back()"
-            v-show="router.options.history.state.back !== null"
+            v-if="canGoBack"
           >
             <span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
             <span class="hidden sm:inline">{{ $t('nav.back') }}</span>

app/pages/privacy.vue

@@ -14,6 +14,7 @@ defineOgImageComponent('Default', {
 })
 
 const router = useRouter()
+const canGoBack = useCanGoBack()
 const buildInfo = useAppConfig().buildInfo
 const { locale } = useI18n()
 </script>
@@ -30,7 +31,7 @@ const { locale } = useI18n()
             type="button"
             class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
             @click="router.back()"
-            v-show="router.options.history.state.back !== null"
+            v-if="canGoBack"
           >
             <span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
             <span class="sr-only sm:not-sr-only">{{ $t('nav.back') }}</span>

app/pages/settings.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 const router = useRouter()
+const canGoBack = useCanGoBack()
 const { settings } = useSettings()
 const { locale, locales, setLocale: setNuxti18nLocale } = useI18n()
 const colorMode = useColorMode()
@@ -52,7 +53,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
             type="button"
             class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0 p-1.5 -mx-1.5"
             @click="router.back()"
-            v-show="router.options.history.state.back !== null"
+            v-if="canGoBack"
           >
             <span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
             <span class="sr-only sm:not-sr-only">{{ $t('nav.back') }}</span>