From 0225a7c46c4fad8c5e952079c1157c47ff6efb61 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Tue, 23 Jul 2024 11:00:27 +0600
Subject: [PATCH] web/settings: simplify sidebar, add version info, flatten
 page navigation

---
 web/i18n/en/settings.json                     |  2 +-
 web/src/lib/settings/defaults.ts              |  2 +-
 web/src/routes/settings/+layout.svelte        | 46 ++++++++++++++-----
 .../{general => }/appearance/+page.svelte     |  0
 .../settings/{save => }/audio/+page.svelte    |  0
 .../{advanced => }/debug/+page.svelte         |  0
 .../{save/metadata => download}/+page.svelte  |  0
 .../{general => }/privacy/+page.svelte        |  0
 .../settings/{save => }/video/+page.svelte    |  0
 9 files changed, 36 insertions(+), 14 deletions(-)
 rename web/src/routes/settings/{general => }/appearance/+page.svelte (100%)
 rename web/src/routes/settings/{save => }/audio/+page.svelte (100%)
 rename web/src/routes/settings/{advanced => }/debug/+page.svelte (100%)
 rename web/src/routes/settings/{save/metadata => download}/+page.svelte (100%)
 rename web/src/routes/settings/{general => }/privacy/+page.svelte (100%)
 rename web/src/routes/settings/{save => }/video/+page.svelte (100%)

diff --git a/web/i18n/en/settings.json b/web/i18n/en/settings.json
index 7273ea1e..82bfb282 100644
--- a/web/i18n/en/settings.json
+++ b/web/i18n/en/settings.json
@@ -3,7 +3,7 @@
     "page.privacy": "privacy",
     "page.video": "video",
     "page.audio": "audio",
-    "page.metadata": "metadata",
+    "page.download": "downloading",
     "page.advanced": "advanced",
     "page.debug": "debug information",
 
diff --git a/web/src/lib/settings/defaults.ts b/web/src/lib/settings/defaults.ts
index c8bdb8a6..38725766 100644
--- a/web/src/lib/settings/defaults.ts
+++ b/web/src/lib/settings/defaults.ts
@@ -39,7 +39,7 @@ const defaultSettingsPage = () => {
         }
     }
 
-    return "/settings/general/appearance";
+    return "/settings/appearance";
 }
 
 export default defaultSettings;
diff --git a/web/src/routes/settings/+layout.svelte b/web/src/routes/settings/+layout.svelte
index b76b3f8d..747ff401 100644
--- a/web/src/routes/settings/+layout.svelte
+++ b/web/src/routes/settings/+layout.svelte
@@ -2,6 +2,7 @@
     import { page } from "$app/stores";
 
     import settings from "$lib/state/settings";
+    import { version } from "$lib/version";
 
     import { t } from "$lib/i18n/translations";
 
@@ -12,7 +13,7 @@
 
     import IconMovie from "@tabler/icons-svelte/IconMovie.svelte";
     import IconMusic from "@tabler/icons-svelte/IconMusic.svelte";
-    import IconFileSettings from "@tabler/icons-svelte/IconFileSettings.svelte";
+    import IconFileDownload from "@tabler/icons-svelte/IconFileDownload.svelte";
     import IconSettingsBolt from "@tabler/icons-svelte/IconSettingsBolt.svelte";
     import IconBug from "@tabler/icons-svelte/IconBug.svelte";
     import IconLock from "@tabler/icons-svelte/IconLock.svelte";
@@ -24,6 +25,8 @@
 
     let screenWidth: number;
 
+    $: versionText = `v.${$version.version}-${$version.commit.slice(0, 7)}`;
+
     $: currentPageTitle = $page.url.pathname.split("/").at(-1);
     $: stringPageTitle =
         currentPageTitle !== "settings" ? ` / ${$t(`settings.page.${currentPageTitle}`)}` : "";
@@ -68,51 +71,56 @@
                     {/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 sectionTitle="general">
+            <SettingsNavSection>
                 <SettingsNavTab
                     tabName="appearance"
-                    tabLink="general/appearance"
+                    tabLink="appearance"
                     iconColor="blue"
                 >
                     <IconSunHigh />
                 </SettingsNavTab>
                 <SettingsNavTab
                     tabName="privacy"
-                    tabLink="general/privacy"
+                    tabLink="privacy"
                     iconColor="blue"
                 >
                     <IconLock />
                 </SettingsNavTab>
             </SettingsNavSection>
-            <SettingsNavSection sectionTitle="save">
+
+            <SettingsNavSection>
                 <SettingsNavTab
                     tabName="video"
-                    tabLink="save/video"
+                    tabLink="video"
                     iconColor="green"
                 >
                     <IconMovie />
                 </SettingsNavTab>
                 <SettingsNavTab
                     tabName="audio"
-                    tabLink="save/audio"
+                    tabLink="audio"
                     iconColor="green"
                 >
                     <IconMusic />
                 </SettingsNavTab>
                 <SettingsNavTab
-                    tabName="metadata"
-                    tabLink="save/metadata"
+                    tabName="download"
+                    tabLink="download"
                     iconColor="green"
                 >
-                    <IconFileSettings />
+                    <IconFileDownload />
                 </SettingsNavTab>
             </SettingsNavSection>
+
             <SettingsNavSection>
                 <SettingsNavTab
                     tabName="advanced"
@@ -124,13 +132,19 @@
                 {#if $settings.advanced.debug}
                     <SettingsNavTab
                         tabName="debug"
-                        tabLink="advanced/debug"
+                        tabLink="debug"
                         iconColor="gray"
                     >
                         <IconBug />
                     </SettingsNavTab>
                 {/if}
             </SettingsNavSection>
+
+        {#if isMobile && isHome}
+            <div class="subtext settings-version center">
+                {versionText}
+            </div>
+        {/if}
         </nav>
     </div>
 
@@ -180,7 +194,7 @@
     }
 
     #settings-sidebar {
-        gap: 24px;
+        gap: var(--padding);
     }
 
     #settings-navigation {
@@ -192,6 +206,14 @@
         --back-padding: calc(var(--padding) / 2);
     }
 
+    .settings-version {
+        padding: 0;
+    }
+
+    .settings-version.center {
+        text-align: center;
+    }
+
     .back-button {
         display: flex;
         align-items: center;
diff --git a/web/src/routes/settings/general/appearance/+page.svelte b/web/src/routes/settings/appearance/+page.svelte
similarity index 100%
rename from web/src/routes/settings/general/appearance/+page.svelte
rename to web/src/routes/settings/appearance/+page.svelte
diff --git a/web/src/routes/settings/save/audio/+page.svelte b/web/src/routes/settings/audio/+page.svelte
similarity index 100%
rename from web/src/routes/settings/save/audio/+page.svelte
rename to web/src/routes/settings/audio/+page.svelte
diff --git a/web/src/routes/settings/advanced/debug/+page.svelte b/web/src/routes/settings/debug/+page.svelte
similarity index 100%
rename from web/src/routes/settings/advanced/debug/+page.svelte
rename to web/src/routes/settings/debug/+page.svelte
diff --git a/web/src/routes/settings/save/metadata/+page.svelte b/web/src/routes/settings/download/+page.svelte
similarity index 100%
rename from web/src/routes/settings/save/metadata/+page.svelte
rename to web/src/routes/settings/download/+page.svelte
diff --git a/web/src/routes/settings/general/privacy/+page.svelte b/web/src/routes/settings/privacy/+page.svelte
similarity index 100%
rename from web/src/routes/settings/general/privacy/+page.svelte
rename to web/src/routes/settings/privacy/+page.svelte
diff --git a/web/src/routes/settings/save/video/+page.svelte b/web/src/routes/settings/video/+page.svelte
similarity index 100%
rename from web/src/routes/settings/save/video/+page.svelte
rename to web/src/routes/settings/video/+page.svelte