refactor: replace back button implementation with BackButton component across multiple pages

Author: epifaniofrancisco

app/pages/about.vue

@@ -3,9 +3,6 @@ import type { Role } from '#server/api/contributors.get'
 import { SPONSORS } from '~/assets/logos/sponsors'
 import { OSS_PARTNERS } from '~/assets/logos/oss-partners'
 
-const router = useRouter()
-const canGoBack = useCanGoBack()
-
 useSeoMeta({
   title: () => `${$t('about.title')} - npmx`,
   ogTitle: () => `${$t('about.title')} - npmx`,
@@ -57,15 +54,7 @@ const roleLabels = computed(
           <h1 class="font-mono text-3xl sm:text-4xl font-medium">
             {{ $t('about.heading') }}
           </h1>
-          <button
-            type="button"
-            class="cursor-pointer inline-flex items-center gap-2 p-1.5 -mx-1.5 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-if="canGoBack"
-          >
-            <span class="i-lucide:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
-            <span class="hidden sm:inline">{{ $t('nav.back') }}</span>
-          </button>
+          <BackButton />
         </div>
         <p class="text-fg-muted text-lg">
           {{ $t('tagline') }}

app/pages/accessibility.vue

@@ -12,9 +12,6 @@ defineOgImageComponent('Default', {
   title: () => $t('a11y.title'),
   description: () => $t('a11y.welcome', { app: 'npmx' }),
 })
-
-const router = useRouter()
-const canGoBack = useCanGoBack()
 </script>
 
 <template>
@@ -25,15 +22,7 @@ const canGoBack = useCanGoBack()
           <h1 class="font-mono text-3xl sm:text-4xl font-medium">
             {{ $t('a11y.title') }}
           </h1>
-          <button
-            type="button"
-            class="cursor-pointer inline-flex items-center gap-2 p-1.5 -mx-1.5 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded shrink-0"
-            @click="router.back()"
-            v-if="canGoBack"
-          >
-            <span class="i-lucide:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
-            <span class="sr-only sm:not-sr-only">{{ $t('nav.back') }}</span>
-          </button>
+          <BackButton />
         </div>
       </header>
 

app/pages/compare.vue

@@ -8,8 +8,6 @@ definePageMeta({
 })
 
 const { locale } = useI18n()
-const router = useRouter()
-const canGoBack = useCanGoBack()
 const { copied, copy } = useClipboard({ copiedDuring: 2000 })
 
 // Sync packages with URL query param (stable ref - doesn't change on other query changes)
@@ -171,15 +169,7 @@ useSeoMeta({
           <h1 class="font-mono text-3xl sm:text-4xl font-medium">
             {{ $t('compare.packages.title') }}
           </h1>
-          <button
-            type="button"
-            class="cursor-pointer inline-flex items-center gap-2 p-1.5 -mx-1.5 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-if="canGoBack"
-          >
-            <span class="i-lucide:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
-            <span class="hidden sm:inline">{{ $t('nav.back') }}</span>
-          </button>
+          <BackButton />
         </div>
         <p class="text-fg-muted text-lg">
           {{ $t('compare.packages.tagline') }}

app/pages/pds.vue

@@ -1,9 +1,6 @@
 <script setup lang="ts">
 import type { AtprotoProfile } from '#shared/types/atproto'
 
-const router = useRouter()
-const canGoBack = useCanGoBack()
-
 useSeoMeta({
   title: () => `${$t('pds.title')} - npmx`,
   ogTitle: () => `${$t('pds.title')} - npmx`,
@@ -51,15 +48,7 @@ const totalAccounts = computed(() => pdsUsers.value.length)
           <h1 class="font-mono text-3xl sm:text-4xl font-medium">
             {{ $t('pds.title') }}
           </h1>
-          <button
-            type="button"
-            class="cursor-pointer inline-flex items-center gap-2 p-1.5 -mx-1.5 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-if="canGoBack"
-          >
-            <span class="i-lucide:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
-            <span class="hidden sm:inline">{{ $t('nav.back') }}</span>
-          </button>
+          <BackButton />
         </div>
         <p class="text-fg-muted text-lg">
           {{ $t('pds.meta_description') }}

app/pages/privacy.vue

@@ -13,8 +13,6 @@ defineOgImageComponent('Default', {
   description: () => $t('privacy_policy.welcome', { app: 'npmx' }),
 })
 
-const router = useRouter()
-const canGoBack = useCanGoBack()
 const buildInfo = useAppConfig().buildInfo
 const { locale } = useI18n()
 </script>
@@ -27,15 +25,7 @@ const { locale } = useI18n()
           <h1 class="font-mono text-3xl sm:text-4xl font-medium">
             {{ $t('privacy_policy.title') }}
           </h1>
-          <button
-            type="button"
-            class="cursor-pointer inline-flex items-center gap-2 p-1.5 -mx-1.5 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-if="canGoBack"
-          >
-            <span class="i-lucide:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
-            <span class="sr-only sm:not-sr-only">{{ $t('nav.back') }}</span>
-          </button>
+          <BackButton />
         </div>
         <i18n-t
           keypath="privacy_policy.last_updated"

app/pages/recharging.vue

@@ -17,9 +17,6 @@ defineOgImageComponent('Default', {
   description: () => $t('vacations.meta_description'),
 })
 
-const router = useRouter()
-const canGoBack = useCanGoBack()
-
 const { data: stats } = useFetch('/api/repo-stats')
 
 /**
@@ -74,15 +71,7 @@ const icons = [
           <h1 class="font-mono text-3xl sm:text-4xl font-medium">
             {{ $t('vacations.heading') }}
           </h1>
-          <button
-            type="button"
-            class="cursor-pointer inline-flex items-center gap-2 p-1.5 -mx-1.5 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-if="canGoBack"
-          >
-            <span class="i-lucide:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
-            <span class="sr-only sm:not-sr-only">{{ $t('nav.back') }}</span>
-          </button>
+          <BackButton />
         </div>
         <i18n-t
           keypath="vacations.subtitle"

app/pages/settings.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 const router = useRouter()
-const canGoBack = useCanGoBack()
 const { settings } = useSettings()
 const { locale, locales, setLocale: setNuxti18nLocale } = useI18n()
 const colorMode = useColorMode()
@@ -51,15 +50,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
           <h1 class="font-mono text-3xl sm:text-4xl font-medium">
             {{ $t('settings.title') }}
           </h1>
-          <button
-            type="button"
-            class="cursor-pointer inline-flex items-center gap-2 p-1.5 -mx-1.5 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-if="canGoBack"
-          >
-            <span class="i-lucide:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
-            <span class="sr-only sm:not-sr-only">{{ $t('nav.back') }}</span>
-          </button>
+          <BackButton />
         </div>
         <p class="text-fg-muted text-lg">
           {{ $t('settings.tagline') }}