web/settings: move sub navigation into its own component

web/src/components/settings/SettingsCategory.svelte

@@ -38,7 +38,7 @@
         display: flex;
         flex-direction: column;
         gap: var(--padding);
-        padding: calc(var(--settings-padding) / 2);
+        padding: calc(var(--subnav-padding) / 2);
         border-radius: 18px;
         transition: opacity 0.2s;
     }

web/src/components/sidebar/Sidebar.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { t } from "$lib/i18n/translations";
+    import { defaultSettingsPage } from "$lib/subnav";
 
     import CobaltLogo from "$components/sidebar/CobaltLogo.svelte";
     import SidebarTab from "$components/sidebar/SidebarTab.svelte";
@@ -13,8 +14,6 @@
     import IconHeart from "@tabler/icons-svelte/IconHeart.svelte";
     import IconInfoCircle from "@tabler/icons-svelte/IconInfoCircle.svelte";
 
-    import { defaultSettingsPage } from "$lib/settings/defaults";
-
     let screenWidth: number;
     let settingsLink = defaultSettingsPage();
 

web/src/components/subnav/PageNav.svelte

@@ -0,0 +1,230 @@
+<script lang="ts">
+    import { page } from "$app/stores";
+    import { goto } from "$app/navigation";
+    import { browser } from "$app/environment";
+
+    import { t } from "$lib/i18n/translations";
+
+    import IconArrowLeft from "@tabler/icons-svelte/IconArrowLeft.svelte";
+
+    export let pageName: string;
+    export let homeNavPath: string;
+    export let homeDesktopPath: string;
+    export let homeTitle: string;
+    export let pageSubtitle = "";
+
+    let screenWidth: number;
+
+    $: currentPageTitle = $page.url.pathname.split("/").at(-1);
+    $: stringPageTitle =
+        currentPageTitle !== pageName
+            ? ` / ${$t(`${pageName}.page.${currentPageTitle}`)}`
+            : "";
+
+    $: isMobile = screenWidth <= 750;
+    $: isHome = $page.url.pathname === homeNavPath;
+    $: {
+        if (browser && !isMobile && isHome) {
+            goto(homeDesktopPath, { replaceState: true });
+        }
+    }
+</script>
+
+<svelte:head>
+    <title>
+        {homeTitle}{stringPageTitle} ~ {$t("general.cobalt")}
+    </title>
+</svelte:head>
+
+<svelte:window bind:innerWidth={screenWidth} />
+
+<div id="{pageName}-page" class="subnav-page">
+    <div class="subnav-sidebar" class:back-visible={!isHome && isMobile}>
+        <div class="subnav-header">
+            {#if isMobile}
+                {#if !isHome}
+                    <a
+                        class="back-button"
+                        href={homeNavPath}
+                        role="button"
+                        aria-label={$t("a11y.general.back")}
+                    >
+                        <IconArrowLeft />
+                    </a>
+                {/if}
+                <h3
+                    class="subnav-page-title"
+                    aria-level="1"
+                    tabindex="-1"
+                    data-first-focus
+                    data-focus-ring-hidden
+                >
+                    {#if !isHome}
+                        {$t(`${pageName}.page.${currentPageTitle}`)}
+                    {:else}
+                        {homeTitle}
+                    {/if}
+                </h3>
+            {:else}
+                {#if pageSubtitle}
+                    <div class="subtext subnav-subtitle">
+                        {pageSubtitle}
+                    </div>
+                {/if}
+                <h2 class="subnav-page-title" aria-level="1">
+                    {homeTitle}
+                </h2>
+            {/if}
+        </div>
+
+        <nav class="subnav-navigation" class:visible-mobile={isMobile && isHome}>
+            <slot name="navigation"></slot>
+            {#if isMobile && isHome && pageSubtitle}
+                <div class="subtext subnav-subtitle center">
+                    {pageSubtitle}
+                </div>
+            {/if}
+        </nav>
+    </div>
+
+    {#if !isMobile || !isHome}
+        <main
+            id="{pageName}-page-content"
+            class="subnav-page-content"
+            tabindex="-1"
+            data-first-focus
+            data-focus-ring-hidden
+        >
+            <slot name="content"></slot>
+        </main>
+    {/if}
+</div>
+
+<style>
+    .subnav-page {
+        --subnav-nav-width: 250px;
+        --subnav-padding: 30px;
+        --subnav-padding-small: calc(
+            var(--subnav-padding) - var(--padding)
+        );
+        display: grid;
+        width: 100%;
+        grid-template-columns: var(--subnav-nav-width) 1fr;
+        overflow: hidden;
+        padding-left: var(--subnav-padding);
+    }
+
+    .subnav-page-content {
+        display: flex;
+        flex-direction: column;
+        max-width: 600px;
+        padding: calc(var(--subnav-padding) / 2);
+        overflow-y: scroll;
+    }
+
+    .subnav-sidebar,
+    .subnav-navigation {
+        display: flex;
+        flex-direction: column;
+        overflow-y: scroll;
+    }
+
+    .subnav-sidebar {
+        width: var(--subnav-nav-width);
+        padding-top: var(--subnav-padding);
+    }
+
+    .subnav-sidebar.back-visible {
+        overflow: visible;
+    }
+
+    .subnav-sidebar {
+        gap: var(--padding);
+    }
+
+    .subnav-navigation {
+        gap: var(--padding);
+        padding-bottom: var(--padding);
+    }
+
+    .subnav-header {
+        --back-padding: calc(var(--padding) / 2);
+    }
+
+    .subnav-subtitle {
+        padding: 0;
+    }
+
+    .subnav-subtitle.center {
+        text-align: center;
+    }
+
+    .back-button {
+        display: flex;
+        align-items: center;
+        color: var(--secondary);
+        gap: var(--back-padding);
+        padding: var(--back-padding);
+
+        position: absolute;
+        left: var(--back-padding);
+    }
+
+    .back-button:active {
+        background: var(--button-hover-transparent);
+        border-radius: var(--border-radius);
+    }
+
+    .back-button :global(svg) {
+        stroke-width: 1.8px;
+        height: 22px;
+        width: 22px;
+        will-change: transform;
+    }
+
+    @media screen and (max-width: 750px) {
+        .subnav-page {
+            --subnav-nav-width: 100%;
+            display: flex;
+            flex-direction: column;
+            grid-template-columns: 1fr;
+            padding: 0;
+        }
+
+        .subnav-navigation {
+            padding: var(--padding);
+            padding-bottom: calc(var(--padding) * 2);
+            display: none;
+        }
+
+        .subnav-navigation.visible-mobile {
+            display: flex;
+        }
+
+        .subnav-page-content {
+            padding: var(--padding) 0;
+            padding-top: 0;
+            max-width: unset;
+        }
+
+        .subnav-header {
+            display: flex;
+            align-items: center;
+            position: sticky;
+            padding: var(--padding);
+            gap: 4px;
+            justify-content: center;
+        }
+
+        .subnav-sidebar {
+            gap: 0px;
+            padding: 0;
+        }
+
+        .subnav-page-title {
+            text-align: center;
+            letter-spacing: -0.3px;
+            font-size: 16.5px;
+        }
+    }
+</style>

web/src/components/subnav/PageNavSection.svelte

@@ -1,34 +1,32 @@
 <script lang="ts">
-    import { t } from "$lib/i18n/translations";
-
     export let sectionTitle: string = "";
 </script>
 
-<div id="settings-section">
+<div id="subnav-section">
     {#if sectionTitle}
-        <div id="settings-section-title">
-            {$t(`settings.section.${sectionTitle}`)}
+        <div id="subnav-section-title">
+            {sectionTitle}
         </div>
     {/if}
-    <div id="settings-section-categories">
+    <div id="subnav-section-categories">
         <slot></slot>
     </div>
 </div>
 
 <style>
-    #settings-section,
-    #settings-section-categories {
+    #subnav-section,
+    #subnav-section-categories {
         display: flex;
         flex-direction: column;
     }
 
-    #settings-section {
+    #subnav-section {
         gap: 6px;
         border-radius: var(--border-radius);
         overflow: hidden;
     }
 
-    #settings-section-title {
+    #subnav-section-title {
         font-size: 12.5px;
         font-weight: 500;
         color: var(--gray);
@@ -36,13 +34,13 @@
     }
 
     @media screen and (max-width: 750px) {
-        #settings-section-categories {
+        #subnav-section-categories {
             background: var(--button);
             border-radius: var(--border-radius);
             box-shadow: var(--button-box-shadow);
         }
 
-        #settings-section-title {
+        #subnav-section-title {
             padding-left: calc(7px * 1.5);
         }
     }

web/src/components/subnav/PageNavTab.svelte

@@ -1,38 +1,36 @@
 <script lang="ts">
     import { page } from "$app/stores";
 
-    import { t } from "$lib/i18n/translations";
-
     import IconChevronRight from "@tabler/icons-svelte/IconChevronRight.svelte";
 
-    export let tabName: string;
-    export let tabLink: string;
+    export let tabPath: string;
+    export let tabTitle: string;
     export let iconColor: "gray" | "blue" | "green" = "gray";
 
-    $: isActive = $page.url.pathname === `/settings/${tabLink}`;
+    $: isActive = $page.url.pathname === tabPath;
 </script>
 
 <a
-    class="settings-tab"
-    href="/settings/{tabLink}"
+    class="subnav-tab"
+    href={tabPath}
     class:active={isActive}
     role="button"
 >
-    <div class="settings-tab-left">
+    <div class="subnav-tab-left">
         <div class="tab-icon" style="background: var(--{iconColor})">
             <slot></slot>
         </div>
-        <div class="settings-tab-text">
-            {$t(`settings.page.${tabName}`)}
+        <div class="subnav-tab-text">
+            {tabTitle}
         </div>
     </div>
-    <div class="settings-tab-chevron">
+    <div class="subnav-tab-chevron">
         <IconChevronRight />
     </div>
 </a>
 
 <style>
-    .settings-tab {
+    .subnav-tab {
         --small-padding: 4px;
         --big-padding: 6px;
         display: flex;
@@ -51,7 +49,7 @@
         text-decoration-line: none;
     }
 
-    .settings-tab-left {
+    .subnav-tab-left {
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -67,14 +65,14 @@
         border-radius: 5px;
     }
 
-    .settings-tab .tab-icon :global(svg) {
+    .subnav-tab .tab-icon :global(svg) {
         stroke-width: 1.5px;
         stroke: var(--white);
         height: 20px;
         width: 20px;
     }
 
-    .settings-tab-chevron :global(svg) {
+    .subnav-tab-chevron :global(svg) {
         display: none;
         stroke-width: 2px;
         stroke: var(--gray);
@@ -83,48 +81,48 @@
     }
 
     @media (hover: hover) {
-        .settings-tab:hover {
+        .subnav-tab:hover {
             background: var(--button-hover-transparent);
         }
     }
 
-    .settings-tab:active {
+    .subnav-tab:active {
         background: var(--button-hover-transparent);
     }
 
-    .settings-tab.active {
+    .subnav-tab.active {
         background: var(--secondary);
         color: var(--primary);
     }
 
-    .settings-tab-text {
+    .subnav-tab-text {
         font-size: 14.5px;
         line-height: 1.35;
     }
 
     @media screen and (max-width: 750px) {
-        .settings-tab {
+        .subnav-tab {
             --big-padding: 7px;
             background: none;
             padding: var(--big-padding) 11px;
         }
 
-        .settings-tab:not(:last-child) {
+        .subnav-tab:not(:last-child) {
             border-bottom-left-radius: 0;
             border-bottom-right-radius: 0;
             box-shadow: 48px 3px 0px -1.8px var(--button-stroke);
         }
 
-        .settings-tab:not(:first-child) {
+        .subnav-tab:not(:first-child) {
             border-top-left-radius: 0;
             border-top-right-radius: 0;
         }
 
-        .settings-tab-left {
+        .subnav-tab-left {
             gap: 10px;
         }
 
-        .settings-tab-chevron :global(svg) {
+        .subnav-tab-chevron :global(svg) {
             display: block;
         }
     }

web/src/lib/settings/defaults.ts

@@ -1,4 +1,3 @@
-import { browser } from "$app/environment";
 import { defaultLocale } from "$lib/i18n/translations";
 import type { CobaltSettings } from "$lib/types/settings";
 
@@ -41,15 +40,4 @@ const defaultSettings: CobaltSettings = {
     }
 }
 
-const defaultSettingsPage = () => {
-    if (browser) {
-        if (window.innerWidth <= 750) {
-            return "/settings";
-        }
-    }
-
-    return "/settings/appearance";
-}
-
 export default defaultSettings;
-export { defaultSettingsPage };

web/src/lib/subnav.ts

@@ -0,0 +1,15 @@
+import { browser } from "$app/environment";
+
+const defaultSettingsPage = () => {
+    if (browser) {
+        if (window.innerWidth <= 750) {
+            return "/settings";
+        }
+    }
+
+    return "/settings/appearance";
+}
+
+export {
+    defaultSettingsPage,
+}

web/src/routes/+error.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-    import { goto } from "$app/navigation";
-    import { page } from "$app/stores";
-    import { defaultSettingsPage } from "$lib/settings/defaults";
     import { onMount } from "svelte";
+    import { page } from "$app/stores";
+    import { goto } from "$app/navigation";
+    import { defaultSettingsPage } from "$lib/subnav";
 
     onMount(() => {
         if ($page.error?.message === "Not Found") {

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

@@ -1,17 +1,17 @@
 <script lang="ts">
-    import { page } from "$app/stores";
-    import { browser } from "$app/environment";
-
     import settings from "$lib/state/settings";
+
     import { version } from "$lib/version";
-
     import { t } from "$lib/i18n/translations";
+    import { defaultSettingsPage } from "$lib/subnav";
 
-    import SettingsNavTab from "$components/settings/SettingsNavTab.svelte";
-    import SettingsNavSection from "$components/settings/SettingsNavSection.svelte";
+    import PageNav from "$components/subnav/PageNav.svelte";
+
+    import PageNavTab from "$components/subnav/PageNavTab.svelte";
+    import PageNavSection from "$components/subnav/PageNavSection.svelte";
 
-    import IconSunHigh from "@tabler/icons-svelte/IconSunHigh.svelte";
     import IconLock from "@tabler/icons-svelte/IconLock.svelte";
+    import IconSunHigh from "@tabler/icons-svelte/IconSunHigh.svelte";
 
     import IconMovie from "@tabler/icons-svelte/IconMovie.svelte";
     import IconMusic from "@tabler/icons-svelte/IconMusic.svelte";
@@ -21,293 +21,84 @@
     import IconWorld from "@tabler/icons-svelte/IconWorld.svelte";
     import IconSettingsBolt from "@tabler/icons-svelte/IconSettingsBolt.svelte";
 
-    import IconArrowLeft from "@tabler/icons-svelte/IconArrowLeft.svelte";
-
-    import { goto } from "$app/navigation";
-    import { defaultSettingsPage } from "$lib/settings/defaults";
-
-    let screenWidth: number;
-
     $: versionText = $version ? `v${$version.version}-${$version.commit.slice(0, 8)}` : '\xa0';
-
-    $: currentPageTitle = $page.url.pathname.split("/").at(-1);
-    $: stringPageTitle =
-        currentPageTitle !== "settings"
-            ? ` / ${$t(`settings.page.${currentPageTitle}`)}`
-            : "";
-
-    $: isMobile = screenWidth <= 750;
-    $: isHome = $page.url.pathname === "/settings";
-    $: {
-        if (browser && !isMobile && isHome) {
-            goto(defaultSettingsPage(), { replaceState: true });
-        }
-    }
 </script>
 
-<svelte:head>
-    <title>
-        {$t("tabs.settings")}{stringPageTitle} ~ {$t("general.cobalt")}
-    </title>
-</svelte:head>
+<PageNav
+    pageName="settings"
+    pageSubtitle={versionText}
+    homeDesktopPath={defaultSettingsPage()}
+    homeNavPath="/settings"
+    homeTitle={$t("tabs.settings")}
+>
+    <svelte:fragment slot="navigation">
+        <PageNavSection>
+            <PageNavTab
+                tabPath="/settings/appearance"
+                tabTitle={$t("settings.page.appearance")}
+                iconColor="blue"
+            >
+                <IconSunHigh />
+            </PageNavTab>
+            <PageNavTab
+                tabPath="/settings/privacy"
+                tabTitle={$t("settings.page.privacy")}
+                iconColor="blue"
+            >
+                <IconLock />
+            </PageNavTab>
+        </PageNavSection>
 
-<svelte:window bind:innerWidth={screenWidth} />
+        <PageNavSection>
+            <PageNavTab
+                tabPath="/settings/video"
+                tabTitle={$t("settings.page.video")}
+                iconColor="green"
+            >
+                <IconMovie />
+            </PageNavTab>
+            <PageNavTab
+                tabPath="/settings/audio"
+                tabTitle={$t("settings.page.audio")}
+                iconColor="green"
+            >
+                <IconMusic />
+            </PageNavTab>
+            <PageNavTab
+                tabPath="/settings/download"
+                tabTitle={$t("settings.page.download")}
+                iconColor="green"
+            >
+                <IconFileDownload />
+            </PageNavTab>
+        </PageNavSection>
 
-<div id="settings-page">
-    <div id="settings-sidebar" class:back-visible={!isHome && isMobile}>
-        <div id="settings-header">
-            {#if isMobile}
-                {#if !isHome}
-                    <a
-                        class="back-button"
-                        href="/settings"
-                        role="button"
-                        aria-label={$t("a11y.general.back")}
-                    >
-                        <IconArrowLeft />
-                    </a>
-                {/if}
-                <h3
-                    id="settings-page-title"
-                    aria-level="1"
-                    tabindex="-1"
-                    data-first-focus
-                    data-focus-ring-hidden
-                >
-                    {#if !isHome}
-                        {$t(`settings.page.${currentPageTitle}`)}
-                    {:else}
-                        {$t("tabs.settings")}
-                    {/if}
-                </h3>
-            {:else}
-                <div class="subtext settings-version">
-                    {versionText}
-                </div>
-                <h2 id="settings-page-title" aria-level="1">
-                    {$t("tabs.settings")}
-                </h2>
-            {/if}
-        </div>
-        <nav id="settings-navigation" class:visible-mobile={isMobile && isHome}>
-            <SettingsNavSection>
-                <SettingsNavTab
-                    tabName="appearance"
-                    tabLink="appearance"
-                    iconColor="blue"
-                >
-                    <IconSunHigh />
-                </SettingsNavTab>
-                <SettingsNavTab
-                    tabName="privacy"
-                    tabLink="privacy"
-                    iconColor="blue"
-                >
-                    <IconLock />
-                </SettingsNavTab>
-            </SettingsNavSection>
-
-            <SettingsNavSection>
-                <SettingsNavTab
-                    tabName="video"
-                    tabLink="video"
-                    iconColor="green"
-                >
-                    <IconMovie />
-                </SettingsNavTab>
-                <SettingsNavTab
-                    tabName="audio"
-                    tabLink="audio"
-                    iconColor="green"
-                >
-                    <IconMusic />
-                </SettingsNavTab>
-                <SettingsNavTab
-                    tabName="download"
-                    tabLink="download"
-                    iconColor="green"
-                >
-                    <IconFileDownload />
-                </SettingsNavTab>
-            </SettingsNavSection>
-
-            <SettingsNavSection>
-                <SettingsNavTab
-                    tabName="instances"
-                    tabLink="instances"
+        <PageNavSection>
+            <PageNavTab
+                tabPath="/settings/instances"
+                tabTitle={$t("settings.page.instances")}
+                iconColor="gray"
+            >
+                <IconWorld />
+            </PageNavTab>
+            <PageNavTab
+                tabPath="/settings/advanced"
+                tabTitle={$t("settings.page.advanced")}
+                iconColor="gray"
+            >
+                <IconSettingsBolt />
+            </PageNavTab>
+            {#if $settings.advanced.debug}
+                <PageNavTab
+                    tabPath="/settings/debug"
+                    tabTitle={$t("settings.page.debug")}
                     iconColor="gray"
                 >
-                    <IconWorld />
-                </SettingsNavTab>
-                <SettingsNavTab
-                    tabName="advanced"
-                    tabLink="advanced"
-                    iconColor="gray"
-                >
-                    <IconSettingsBolt />
-                </SettingsNavTab>
-                {#if $settings.advanced.debug}
-                    <SettingsNavTab
-                        tabName="debug"
-                        tabLink="debug"
-                        iconColor="gray"
-                    >
-                        <IconBug />
-                    </SettingsNavTab>
-                {/if}
-            </SettingsNavSection>
-
-            {#if isMobile && isHome}
-                <div class="subtext settings-version center">
-                    {versionText}
-                </div>
+                    <IconBug />
+                </PageNavTab>
             {/if}
-        </nav>
-    </div>
+        </PageNavSection>
+    </svelte:fragment>
 
-    {#if !isMobile || !isHome}
-        <main
-            id="settings-page-content"
-            tabindex="-1"
-            data-first-focus
-            data-focus-ring-hidden
-        >
-            <slot></slot>
-        </main>
-    {/if}
-</div>
-
-<style>
-    #settings-page {
-        --settings-nav-width: 250px;
-        --settings-padding: 30px;
-        --settings-padding-small: calc(
-            var(--settings-padding) - var(--padding)
-        );
-        display: grid;
-        width: 100%;
-        grid-template-columns: var(--settings-nav-width) 1fr;
-        overflow: hidden;
-        padding-left: var(--settings-padding);
-    }
-
-    #settings-page-content {
-        display: flex;
-        flex-direction: column;
-        max-width: 600px;
-        padding: calc(var(--settings-padding) / 2);
-        overflow-y: scroll;
-    }
-
-    #settings-sidebar,
-    #settings-navigation {
-        display: flex;
-        flex-direction: column;
-        overflow-y: scroll;
-    }
-
-    #settings-sidebar {
-        width: var(--settings-nav-width);
-        padding-top: var(--settings-padding);
-    }
-
-    #settings-sidebar.back-visible {
-        overflow: visible;
-    }
-
-    #settings-sidebar {
-        gap: var(--padding);
-    }
-
-    #settings-navigation {
-        gap: var(--padding);
-        padding-bottom: var(--padding);
-    }
-
-    #settings-header {
-        --back-padding: calc(var(--padding) / 2);
-    }
-
-    .settings-version {
-        padding: 0;
-    }
-
-    .settings-version.center {
-        text-align: center;
-    }
-
-    .back-button {
-        display: flex;
-        align-items: center;
-        color: var(--secondary);
-        gap: var(--back-padding);
-        padding: var(--back-padding);
-
-        position: absolute;
-        left: var(--back-padding);
-    }
-
-    .back-button:active {
-        background: var(--button-hover-transparent);
-        border-radius: var(--border-radius);
-    }
-
-    .back-button :global(svg) {
-        stroke-width: 1.8px;
-        height: 22px;
-        width: 22px;
-        will-change: transform;
-    }
-
-    @media screen and (max-width: 750px) {
-        #settings-page {
-            --settings-nav-width: 100%;
-            display: flex;
-            flex-direction: column;
-            grid-template-columns: 1fr;
-            padding: 0;
-        }
-
-        #settings-navigation {
-            padding: var(--padding);
-            padding-bottom: calc(var(--padding) * 2);
-        }
-
-        #settings-page-content {
-            padding: var(--padding) 0;
-            padding-top: 0;
-        }
-
-        #settings-page-content {
-            max-width: unset;
-        }
-
-        #settings-header {
-            display: flex;
-            align-items: center;
-            position: sticky;
-            padding: var(--padding);
-            gap: 4px;
-            justify-content: center;
-        }
-
-        #settings-sidebar {
-            gap: 0px;
-            padding: 0;
-        }
-
-        #settings-page-title {
-            text-align: center;
-            letter-spacing: -0.3px;
-            font-size: 16.5px;
-        }
-
-        #settings-navigation {
-            display: none;
-        }
-
-        #settings-navigation.visible-mobile {
-            display: flex;
-        }
-    }
-</style>
+    <slot slot="content"></slot>
+</PageNav>

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

@@ -2,10 +2,10 @@
     import { onMount } from "svelte";
     import { goto } from "$app/navigation";
 
-    import { device, app } from "$lib/device";
     import { version } from "$lib/version";
+    import { device, app } from "$lib/device";
+    import { defaultSettingsPage } from "$lib/subnav";
     import settings, { storedSettings } from "$lib/state/settings";
-    import { defaultSettingsPage } from "$lib/settings/defaults";
 
     onMount(() => {
         if (!$settings.advanced.debug) {