fix(stage-ui): settings fallback route, and guard navigate back to home in tamagotchi (#1413)

packages/stage-layouts/src/layouts/settings.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { isStageTamagotchi } from '@proj-airi/stage-shared'
 import { PageHeader } from '@proj-airi/stage-ui/components'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { useTheme } from '@proj-airi/ui'
@@ -92,7 +93,7 @@ onMounted(() => updateThemeColor())
       <PageHeader
         :title="routeHeaderMetadata?.title || ''"
         :subtitle="routeHeaderMetadata?.subtitle"
-        :disable-back-button="route.path === '/settings'"
+        :disable-back-button="isStageTamagotchi() && route.path === '/settings'"
       />
       <div id="settings-scroll-container" relative min-h-0 flex-1 overflow-y-auto scrollbar-none>
         <RouterView />

packages/stage-ui/src/components/layouts/page-header.vue

@@ -8,9 +8,11 @@ const props = withDefaults(defineProps<{
   subtitle?: string
   showBackButton?: boolean
   disableBackButton?: boolean
+  fallbackRoute?: string
 }>(), {
   showBackButton: true,
   disableBackButton: false,
+  fallbackRoute: '/settings',
 })
 
 const router = useRouter()
@@ -27,6 +29,20 @@ const { apply } = useMotion(pageHeaderRef, {
   leave: { opacity: 0, x: -5, transition: { duration: 25 } },
 })
 
+function handleBack() {
+  // If there's history to go back to, use router.back().
+  // The check for `window` handles non-browser environments (e.g., SSR).
+  if (typeof window !== 'undefined' && window.history.length > 1) {
+    router.back()
+  }
+  else {
+    // Otherwise, navigate to the fallback route. This covers cases where:
+    // - The page was opened directly (no history).
+    // - The code is running in a non-browser environment.
+    router.push(props.fallbackRoute)
+  }
+}
+
 onMounted(async () => {
   await apply('initial')
   await apply('enter')
@@ -63,7 +79,7 @@ watch([() => props.title, () => props.subtitle, route], async () => {
     flex="~ row items-center gap-2"
     bg="$bg-color"
   >
-    <button @click="router.back()">
+    <button @click="handleBack">
       <div
         v-if="!finalizedDisableBackButton"
         i-solar:alt-arrow-left-line-duotone text-2xl