davidwindham.com / npmx.dev
forked from npmx.dev/npmx.dev
[READ-ONLY] a fast, modern browser for the npm registry
fork atom

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

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

authored by

abeer0
Daniel Roe and committed by
GitHub 5f9ef8f6 4fa72f1a

+19 -4
+11
app/composables/useCanGoBack.ts
··· 1 + export function useCanGoBack() { 2 + const canGoBack = ref(false) 3 + 4 + const router = useRouter() 5 + 6 + onMounted(() => { 7 + canGoBack.value = router.options.history.state.back !== null 8 + }) 9 + 10 + return canGoBack 11 + }
+2 -1
app/pages/about.vue
··· 1 1 <script setup lang="ts"> 2 2 const router = useRouter() 3 + const canGoBack = useCanGoBack() 3 4 4 5 interface GitHubContributor { 5 6 login: string ··· 53 54 type="button" 54 55 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" 55 56 @click="router.back()" 56 - v-show="router.options.history.state.back !== null" 57 + v-if="canGoBack" 57 58 > 58 59 <span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" /> 59 60 <span class="hidden sm:inline">{{ $t('nav.back') }}</span>
+2 -1
app/pages/compare.vue
··· 7 7 }) 8 8 9 9 const router = useRouter() 10 + const canGoBack = useCanGoBack() 10 11 11 12 // Sync packages with URL query param (stable ref - doesn't change on other query changes) 12 13 const packagesParam = useRouteQuery<string>('packages', '', { mode: 'replace' }) ··· 118 119 type="button" 119 120 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" 120 121 @click="router.back()" 121 - v-show="router.options.history.state.back !== null" 122 + v-if="canGoBack" 122 123 > 123 124 <span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" /> 124 125 <span class="hidden sm:inline">{{ $t('nav.back') }}</span>
+2 -1
app/pages/privacy.vue
··· 14 14 }) 15 15 16 16 const router = useRouter() 17 + const canGoBack = useCanGoBack() 17 18 const buildInfo = useAppConfig().buildInfo 18 19 const { locale } = useI18n() 19 20 </script> ··· 30 31 type="button" 31 32 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" 32 33 @click="router.back()" 33 - v-show="router.options.history.state.back !== null" 34 + v-if="canGoBack" 34 35 > 35 36 <span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" /> 36 37 <span class="sr-only sm:not-sr-only">{{ $t('nav.back') }}</span>
+2 -1
app/pages/settings.vue
··· 1 1 <script setup lang="ts"> 2 2 const router = useRouter() 3 + const canGoBack = useCanGoBack() 3 4 const { settings } = useSettings() 4 5 const { locale, locales, setLocale: setNuxti18nLocale } = useI18n() 5 6 const colorMode = useColorMode() ··· 52 53 type="button" 53 54 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" 54 55 @click="router.back()" 55 - v-show="router.options.history.state.back !== null" 56 + v-if="canGoBack" 56 57 > 57 58 <span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" /> 58 59 <span class="sr-only sm:not-sr-only">{{ $t('nav.back') }}</span>