From 2f3a97855056046685726cb75dc267bb5d19ed85 Mon Sep 17 00:00:00 2001
From: "Mr. Robot" <gomexxxx71@gmail.com>
Date: Sat, 7 Feb 2026 23:45:38 +0600
Subject: [PATCH 1/2] chore(ux): consistent back navigation

---
 app/composables/useCanGoBack.ts | 10 ++++++++++
 app/pages/about.vue             |  3 ++-
 app/pages/compare.vue           |  3 ++-
 app/pages/privacy.vue           |  3 ++-
 app/pages/settings.vue          |  3 ++-
 5 files changed, 18 insertions(+), 4 deletions(-)
 create mode 100644 app/composables/useCanGoBack.ts

diff --git a/app/composables/useCanGoBack.ts b/app/composables/useCanGoBack.ts
new file mode 100644
index 000000000..0e4503d0d
--- /dev/null
+++ b/app/composables/useCanGoBack.ts
@@ -0,0 +1,10 @@
+export function useCanGoBack() {
+  const canGoBack = ref(false)
+
+  if (import.meta.client) {
+    const router = useRouter()
+    canGoBack.value = router.options.history.state.back !== null
+  }
+
+  return canGoBack
+}
diff --git a/app/pages/about.vue b/app/pages/about.vue
index 76fa5d4ad..abaf6b9ad 100644
--- a/app/pages/about.vue
+++ b/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>
diff --git a/app/pages/compare.vue b/app/pages/compare.vue
index b24a9ff61..206e14f1c 100644
--- a/app/pages/compare.vue
+++ b/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>
diff --git a/app/pages/privacy.vue b/app/pages/privacy.vue
index 43ddb8dae..5eab6ca80 100644
--- a/app/pages/privacy.vue
+++ b/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>
diff --git a/app/pages/settings.vue b/app/pages/settings.vue
index 33e76be99..b072f8baf 100644
--- a/app/pages/settings.vue
+++ b/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>

From ff6a9fdd1fa76a8735792f0b80482c6df3c9d3c6 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Sat, 7 Feb 2026 23:19:53 +0000
Subject: [PATCH 2/2] chore: use onMounted

---
 app/composables/useCanGoBack.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/composables/useCanGoBack.ts b/app/composables/useCanGoBack.ts
index 0e4503d0d..66435ae70 100644
--- a/app/composables/useCanGoBack.ts
+++ b/app/composables/useCanGoBack.ts
@@ -1,10 +1,11 @@
 export function useCanGoBack() {
   const canGoBack = ref(false)
 
-  if (import.meta.client) {
-    const router = useRouter()
+  const router = useRouter()
+
+  onMounted(() => {
     canGoBack.value = router.options.history.state.back !== null
-  }
+  })
 
   return canGoBack
 }