web: fix auto navigation on scale change for about & settings pages

web/src/components/sidebar/Sidebar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { t } from "$lib/i18n/translations";
-    import { defaultSettingsPage } from "$lib/subnav";
+    import { defaultNavPage } from "$lib/subnav";
 
     import CobaltLogo from "$components/sidebar/CobaltLogo.svelte";
     import SidebarTab from "$components/sidebar/SidebarTab.svelte";
@@ -15,9 +15,9 @@
     import IconInfoCircle from "@tabler/icons-svelte/IconInfoCircle.svelte";
 
     let screenWidth: number;
-    let settingsLink = defaultSettingsPage();
+    let settingsLink = defaultNavPage("settings");
 
-    $: screenWidth, settingsLink = defaultSettingsPage();
+    $: screenWidth, settingsLink = defaultNavPage("settings");
 </script>
 
 <svelte:window bind:innerWidth={screenWidth} />

web/src/components/subnav/PageNav.svelte

@@ -2,14 +2,14 @@
     import { page } from "$app/stores";
     import { goto } from "$app/navigation";
     import { browser } from "$app/environment";
+    import { defaultNavPage } from "$lib/subnav";
 
     import { t } from "$lib/i18n/translations";
 
     import IconArrowLeft from "@tabler/icons-svelte/IconArrowLeft.svelte";
 
-    export let pageName: string;
+    export let pageName: "settings" | "about";
     export let homeNavPath: string;
-    export let homeDesktopPath: string;
     export let homeTitle: string;
     export let pageSubtitle = "";
     export let contentPadding = false;
@@ -27,7 +27,7 @@
     $: isHome = $page.url.pathname === homeNavPath;
     $: {
         if (browser && !isMobile && isHome) {
-            goto(homeDesktopPath, { replaceState: true });
+            goto(defaultNavPage(pageName), { replaceState: true });
         }
     }
 </script>

web/src/lib/subnav.ts

@@ -1,26 +1,16 @@
 import { browser } from "$app/environment";
 
-const defaultSettingsPage = () => {
-    if (browser) {
-        if (window.innerWidth <= 750) {
-            return "/settings";
-        }
+const defaultNavPage = (page: "settings" | "about") => {
+    if (browser && window.innerWidth <= 750) {
+        return `/${page}`;
     }
 
-    return "/settings/appearance";
-}
-
-const defaultAboutPage = () => {
-    if (browser) {
-        if (window.innerWidth <= 750) {
-            return "/about";
-        }
+    switch (page) {
+        case "settings":
+            return "/settings/appearance";
+        case "about":
+            return "/about/general";
     }
-
-    return "/about/general";
 }
 
-export {
-    defaultSettingsPage,
-    defaultAboutPage
-}
+export { defaultNavPage };

web/src/routes/+error.svelte

@@ -2,12 +2,12 @@
     import { onMount } from "svelte";
     import { page } from "$app/stores";
     import { goto } from "$app/navigation";
-    import { defaultSettingsPage } from "$lib/subnav";
+    import { defaultNavPage } from "$lib/subnav";
 
     onMount(() => {
         if ($page.error?.message === "Not Found") {
             if ($page.url.pathname.startsWith("/settings")) {
-                goto(defaultSettingsPage(), { replaceState: true });
+                goto(defaultNavPage("settings"), { replaceState: true });
             } else {
                 goto("/", { replaceState: true });
             }

web/src/routes/about/+layout.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
     import { t } from "$lib/i18n/translations";
-    import { defaultAboutPage } from "$lib/subnav";
 
     import PageNav from "$components/subnav/PageNav.svelte";
 
@@ -20,7 +19,6 @@
 
 <PageNav
     pageName="about"
-    homeDesktopPath={defaultAboutPage()}
     homeNavPath="/about"
     homeTitle={$t("tabs.about")}
     contentPadding

web/src/routes/settings/+layout.svelte

@@ -3,7 +3,6 @@
 
     import { version } from "$lib/version";
     import { t } from "$lib/i18n/translations";
-    import { defaultSettingsPage } from "$lib/subnav";
 
     import PageNav from "$components/subnav/PageNav.svelte";
 
@@ -27,7 +26,6 @@
 <PageNav
     pageName="settings"
     pageSubtitle={versionText}
-    homeDesktopPath={defaultSettingsPage()}
     homeNavPath="/settings"
     homeTitle={$t("tabs.settings")}
 >

web/src/routes/settings/debug/+page.svelte

@@ -4,12 +4,12 @@
 
     import { version } from "$lib/version";
     import { device, app } from "$lib/device";
-    import { defaultSettingsPage } from "$lib/subnav";
+    import { defaultNavPage } from "$lib/subnav";
     import settings, { storedSettings } from "$lib/state/settings";
 
     onMount(() => {
         if (!$settings.advanced.debug) {
-            goto(defaultSettingsPage(), { replaceState: true });
+            goto(defaultNavPage("settings"), { replaceState: true });
         }
     });
 </script>