From 1833a95027f0d780dc7213a24adf3d22f98fbb2b Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 20 Nov 2024 14:15:34 +0600
Subject: [PATCH] web/PageNavTab: use icon prop instead of slot

---
 web/src/components/subnav/PageNavTab.svelte | 13 ++--
 web/src/routes/about/+layout.svelte         | 45 ++++++------
 web/src/routes/settings/+layout.svelte      | 76 ++++++++++-----------
 3 files changed, 62 insertions(+), 72 deletions(-)

diff --git a/web/src/components/subnav/PageNavTab.svelte b/web/src/components/subnav/PageNavTab.svelte
index 898174fd..b828edb6 100644
--- a/web/src/components/subnav/PageNavTab.svelte
+++ b/web/src/components/subnav/PageNavTab.svelte
@@ -3,25 +3,26 @@
 
     import IconChevronRight from "@tabler/icons-svelte/IconChevronRight.svelte";
 
-    export let tabPath: string;
-    export let tabTitle: string;
+    export let path: string;
+    export let title: string;
+    export let icon: ConstructorOfATypedSvelteComponent;
     export let iconColor: "gray" | "blue" | "green" = "gray";
 
-    $: isActive = $page.url.pathname === tabPath;
+    $: isActive = $page.url.pathname === path;
 </script>
 
 <a
     class="subnav-tab"
-    href={tabPath}
+    href={path}
     class:active={isActive}
     role="button"
 >
     <div class="subnav-tab-left">
         <div class="tab-icon" style="background: var(--{iconColor})">
-            <slot></slot>
+            <svelte:component this={icon} />
         </div>
         <div class="subnav-tab-text">
-            {tabTitle}
+            {title}
         </div>
     </div>
     <div class="subnav-tab-chevron">
diff --git a/web/src/routes/about/+layout.svelte b/web/src/routes/about/+layout.svelte
index ddfb1c6f..e28df42b 100644
--- a/web/src/routes/about/+layout.svelte
+++ b/web/src/routes/about/+layout.svelte
@@ -23,43 +23,38 @@
     <svelte:fragment slot="navigation">
         <PageNavSection>
             <PageNavTab
-                tabPath="/about/general"
-                tabTitle={$t("about.page.general")}
+                path="/about/general"
+                title={$t("about.page.general")}
+                icon={IconComet}
                 iconColor="blue"
-            >
-                <IconComet />
-            </PageNavTab>
+            />
             <PageNavTab
-                tabPath="/about/community"
-                tabTitle={$t("about.page.community")}
+                path="/about/community"
+                title={$t("about.page.community")}
+                icon={IconUsersGroup}
                 iconColor="green"
-            >
-                <IconUsersGroup />
-            </PageNavTab>
+            />
         </PageNavSection>
 
         <PageNavSection>
             <PageNavTab
-                tabPath="/about/terms"
-                tabTitle={$t("about.page.terms")}
+                path="/about/terms"
+                title={$t("about.page.terms")}
+                icon={IconChecklist}
                 iconColor="gray"
-            >
-                <IconChecklist />
-            </PageNavTab>
+            />
             <PageNavTab
-                tabPath="/about/privacy"
-                tabTitle={$t("about.page.privacy")}
+                path="/about/privacy"
+                title={$t("about.page.privacy")}
+                icon={IconLock}
                 iconColor="gray"
-            >
-                <IconLock />
-            </PageNavTab>
+            />
             <PageNavTab
-                tabPath="/about/credits"
-                tabTitle={$t("about.page.credits")}
+                path="/about/credits"
+                title={$t("about.page.credits")}
+                icon={IconLicense}
                 iconColor="gray"
-            >
-                <IconLicense />
-            </PageNavTab>
+            />
         </PageNavSection>
     </svelte:fragment>
 
diff --git a/web/src/routes/settings/+layout.svelte b/web/src/routes/settings/+layout.svelte
index cbcd5282..79bd7b93 100644
--- a/web/src/routes/settings/+layout.svelte
+++ b/web/src/routes/settings/+layout.svelte
@@ -20,7 +20,9 @@
     import IconWorld from "@tabler/icons-svelte/IconWorld.svelte";
     import IconSettingsBolt from "@tabler/icons-svelte/IconSettingsBolt.svelte";
 
-    $: versionText = $version ? `v${$version.version}-${$version.commit.slice(0, 8)}` : '\xa0';
+    $: versionText = $version
+        ? `v${$version.version}-${$version.commit.slice(0, 8)}`
+        : "\xa0";
 </script>
 
 <PageNav
@@ -32,68 +34,60 @@
     <svelte:fragment slot="navigation">
         <PageNavSection>
             <PageNavTab
-                tabPath="/settings/appearance"
-                tabTitle={$t("settings.page.appearance")}
+                path="/settings/appearance"
+                title={$t("settings.page.appearance")}
+                icon={IconSunHigh}
                 iconColor="blue"
-            >
-                <IconSunHigh />
-            </PageNavTab>
+            />
             <PageNavTab
-                tabPath="/settings/privacy"
-                tabTitle={$t("settings.page.privacy")}
+                path="/settings/privacy"
+                title={$t("settings.page.privacy")}
+                icon={IconLock}
                 iconColor="blue"
-            >
-                <IconLock />
-            </PageNavTab>
+            />
         </PageNavSection>
 
         <PageNavSection>
             <PageNavTab
-                tabPath="/settings/video"
-                tabTitle={$t("settings.page.video")}
+                path="/settings/video"
+                title={$t("settings.page.video")}
+                icon={IconMovie}
                 iconColor="green"
-            >
-                <IconMovie />
-            </PageNavTab>
+            />
             <PageNavTab
-                tabPath="/settings/audio"
-                tabTitle={$t("settings.page.audio")}
+                path="/settings/audio"
+                title={$t("settings.page.audio")}
+                icon={IconMusic}
                 iconColor="green"
-            >
-                <IconMusic />
-            </PageNavTab>
+            />
             <PageNavTab
-                tabPath="/settings/download"
-                tabTitle={$t("settings.page.download")}
+                path="/settings/download"
+                title={$t("settings.page.download")}
+                icon={IconFileDownload}
                 iconColor="green"
-            >
-                <IconFileDownload />
-            </PageNavTab>
+            />
         </PageNavSection>
 
         <PageNavSection>
             <PageNavTab
-                tabPath="/settings/instances"
-                tabTitle={$t("settings.page.instances")}
+                path="/settings/instances"
+                title={$t("settings.page.instances")}
+                icon={IconWorld}
                 iconColor="gray"
-            >
-                <IconWorld />
-            </PageNavTab>
+            />
             <PageNavTab
-                tabPath="/settings/advanced"
-                tabTitle={$t("settings.page.advanced")}
+                path="/settings/advanced"
+                title={$t("settings.page.advanced")}
+                icon={IconSettingsBolt}
                 iconColor="gray"
-            >
-                <IconSettingsBolt />
-            </PageNavTab>
+            />
             {#if $settings.advanced.debug}
                 <PageNavTab
-                    tabPath="/settings/debug"
-                    tabTitle={$t("settings.page.debug")}
+                    path="/settings/debug"
+                    title={$t("settings.page.debug")}
+                    icon={IconBug}
                     iconColor="gray"
-                >
-                    <IconBug />
-                </PageNavTab>
+                />
             {/if}
         </PageNavSection>
     </svelte:fragment>