From 042d2e9cc8c2bfb5fbb3308afee543b97043b977 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Mon, 24 Jun 2024 23:05:51 +0600
Subject: [PATCH] web: settings ui & const for settings type options

---
 .../buttons/SettingsCheckbox.svelte           | 31 ++++++++-
 web/src/components/buttons/Switcher.svelte    | 11 ++-
 .../settings/SettingsCategory.svelte          | 60 ++++------------
 .../components/settings/SettingsTab.svelte    | 55 +++++++++++++++
 web/src/lib/types/settings.ts                 | 21 ++++--
 web/src/routes/+layout.svelte                 | 18 ++++-
 web/src/routes/settings/+layout.svelte        | 69 ++++++++++---------
 .../general/accessibility/+page.svelte        |  1 -
 .../settings/general/appearance/+page.svelte  | 34 ++++++++-
 .../routes/settings/save/audio/+page.svelte   | 43 +++++++++++-
 .../settings/save/metadata/+page.svelte       | 41 ++++++++++-
 .../routes/settings/save/video/+page.svelte   | 59 +++++++++++++++-
 12 files changed, 346 insertions(+), 97 deletions(-)
 create mode 100644 web/src/components/settings/SettingsTab.svelte
 delete mode 100644 web/src/routes/settings/general/accessibility/+page.svelte

diff --git a/web/src/components/buttons/SettingsCheckbox.svelte b/web/src/components/buttons/SettingsCheckbox.svelte
index 81c8c00a..eee4f9e9 100644
--- a/web/src/components/buttons/SettingsCheckbox.svelte
+++ b/web/src/components/buttons/SettingsCheckbox.svelte
@@ -11,11 +11,14 @@
     export let settingContext: Context;
     export let settingId: Id;
 
+    export let title: string;
+    export let description: string = "";
+
     $: setting = $settings[settingContext][settingId];
     $: isChecked = !!setting;
 </script>
 
-<div>
+<div class="checkbox-container">
     <input
         type="checkbox"
         id="setting-button-{settingContext}-{String(settingId)}"
@@ -27,5 +30,29 @@
                 },
             })}
     />
-    <slot></slot>
+    <div class="checkbox-text">
+        <h4 class="checkbox-title">{title}</h4>
+
+        {#if description.length > 0}
+            <div class="subtext checkbox-description">{description}</div>
+        {/if}
+    </div>
 </div>
+
+<style>
+    .checkbox-container {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 10px;
+    }
+
+    .checkbox-text {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .checkbox-description {
+        font-size: 12px;
+    }
+</style>
\ No newline at end of file
diff --git a/web/src/components/buttons/Switcher.svelte b/web/src/components/buttons/Switcher.svelte
index afcfeba3..0a6749c3 100644
--- a/web/src/components/buttons/Switcher.svelte
+++ b/web/src/components/buttons/Switcher.svelte
@@ -1,4 +1,8 @@
-<div id="switcher-container" class="switcher">
+<script lang="ts">
+    export let big: boolean = false;
+</script>
+
+<div id="switcher-container" class="switcher" class:big={big}>
     <slot></slot>
 </div>
 
@@ -23,6 +27,11 @@
         border-bottom-left-radius: 0;
     }
 
+    .switcher.big :global(.button) {
+        width: 100%;
+        height: 40px;
+    }
+
     .switcher > :global(:not(.button:first-child):not(.button:last-child)) {
         border-radius: 0;
     }
diff --git a/web/src/components/settings/SettingsCategory.svelte b/web/src/components/settings/SettingsCategory.svelte
index 3ce80a54..9707f920 100644
--- a/web/src/components/settings/SettingsCategory.svelte
+++ b/web/src/components/settings/SettingsCategory.svelte
@@ -1,55 +1,21 @@
 <script lang="ts">
-    import { page } from "$app/stores";
-
-    export let categoryName: string;
-    export let categoryLink: string;
-    export let iconColor: "gray" | "blue" | "green" = "gray";
-
-    $: isActive = $page.url.pathname === `/settings/${categoryLink}`;
+    export let title: string;
+    export let description: string = "";
 </script>
 
-<a
-    id="settings-category"
-    href="/settings/{categoryLink}"
-    class:active={isActive}
->
-    <div id="category-icon" style="background: var(--{iconColor})">
-        <slot></slot>
-    </div>
-    <span>{categoryName}</span>
-</a>
+<div class="settings-content">
+    <h3 class="settings-content-title">{title}</h3>
+    <slot></slot>
+
+    {#if description.length > 0}
+        <div class="settings-content-description subtext">{description}</div>
+    {/if}
+</div>
 
 <style>
-    #settings-category {
+    .settings-content {
         display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: 10px;
-        padding: 8px;
-        font-weight: 500;
-        background: var(--primary);
-        color: var(--button-text);
-        border-radius: var(--border-radius);
-    }
-
-    #settings-category:hover {
-        background: var(--button-hover-transparent);
-    }
-
-    #settings-category span {
-        font-size: 14.5px;
-    }
-
-    #category-icon {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding: 5px;
-        border-radius: 5px;
-    }
-
-    #settings-category.active {
-        background: var(--secondary);
-        color: var(--primary);
+        flex-direction: column;
+        gap: 16px;
     }
 </style>
diff --git a/web/src/components/settings/SettingsTab.svelte b/web/src/components/settings/SettingsTab.svelte
new file mode 100644
index 00000000..3ce80a54
--- /dev/null
+++ b/web/src/components/settings/SettingsTab.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+    import { page } from "$app/stores";
+
+    export let categoryName: string;
+    export let categoryLink: string;
+    export let iconColor: "gray" | "blue" | "green" = "gray";
+
+    $: isActive = $page.url.pathname === `/settings/${categoryLink}`;
+</script>
+
+<a
+    id="settings-category"
+    href="/settings/{categoryLink}"
+    class:active={isActive}
+>
+    <div id="category-icon" style="background: var(--{iconColor})">
+        <slot></slot>
+    </div>
+    <span>{categoryName}</span>
+</a>
+
+<style>
+    #settings-category {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 10px;
+        padding: 8px;
+        font-weight: 500;
+        background: var(--primary);
+        color: var(--button-text);
+        border-radius: var(--border-radius);
+    }
+
+    #settings-category:hover {
+        background: var(--button-hover-transparent);
+    }
+
+    #settings-category span {
+        font-size: 14.5px;
+    }
+
+    #category-icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 5px;
+        border-radius: 5px;
+    }
+
+    #settings-category.active {
+        background: var(--secondary);
+        color: var(--primary);
+    }
+</style>
diff --git a/web/src/lib/types/settings.ts b/web/src/lib/types/settings.ts
index c17e65a1..bb3f8da3 100644
--- a/web/src/lib/types/settings.ts
+++ b/web/src/lib/types/settings.ts
@@ -1,10 +1,17 @@
-type CobaltSettingsAccessibility = {
+export type CobaltSettingsAccessibility = {
     reduceAnimations: boolean,
     reduceTransparency: boolean,
 };
 
+export const themeOptions = ["auto", "light", "dark"] as const;
+export const audioFormatOptions = ["best", "mp3", "ogg", "wav", "opus"] as const;
+export const downloadModeOptions = ["auto", "audio", "mute"] as const;
+export const filenameStyleOptions = ["classic", "basic", "pretty", "nerdy"] as const;
+export const videoQualityOptions = ["max", "2160", "1440", "1080", "720", "480", "360", "240", "144"] as const;
+export const youtubeVideoCodecOptions = ["h264", "av1", "vp9"] as const;
+
 type CobaltSettingsAppearance = {
-    theme: "auto" | "light" | "dark",
+    theme: typeof themeOptions[number],
 };
 
 type CobaltSettingsGeneral = {
@@ -14,16 +21,16 @@ type CobaltSettingsGeneral = {
 };
 
 type CobaltSettingsSave = {
-    audioFormat: "best" | "mp3" | "ogg" | "wav" | "opus",
+    audioFormat: typeof audioFormatOptions[number],
     disableMetadata: boolean,
-    downloadMode: "auto" | "audio" | "mute",
+    downloadMode: typeof downloadModeOptions[number],
     downloadPopup: boolean,
-    filenameStyle: "classic" | "basic" | "pretty" | "nerdy",
+    filenameStyle: typeof filenameStyleOptions[number],
     tiktokH265: boolean,
     tiktokFullAudio: boolean,
     twitterGif: boolean,
-    videoQuality: "max" | "2160" | "1440" | "1080" | "720" | "480" | "360" | "240" | "144",
-    youtubeVideoCodec: "h264" | "av1" | "vp9",
+    videoQuality: typeof videoQualityOptions[number],
+    youtubeVideoCodec: typeof youtubeVideoCodecOptions[number],
     youtubeDubBrowserLang: boolean,
 };
 
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 58fed3e6..931c283f 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -16,6 +16,7 @@
         --primary: #ffffff;
         --secondary: #000000;
 
+        --white: #ffffff;
         --gray: #8d8d95;
         --blue: #2f8af9;
         --green: #51cf5e;
@@ -55,11 +56,14 @@
         :global(:root) {
             --primary: #000000;
             --secondary: #e1e1e1;
+
             --gray: #6e6e6e;
+            --blue: #2a7ce1;
+            --green: #37aa42;
 
             --button: #191919;
             --button-hover: #2a2a2a;
-            --button-hover-transparent: rgba(225, 225, 225, 0.04);
+            --button-hover-transparent: rgba(225, 225, 225, 0.1);
             --button-stroke: rgba(255, 255, 255, 0.08);
             --button-text: #e1e1e1;
 
@@ -154,7 +158,7 @@
         justify-content: center;
     }
 
-    :global(button, .subtext) {
+    :global(button) {
         font-weight: 500;
     }
 
@@ -177,10 +181,18 @@
         font-size: 16px;
     }
 
-    :global(h4, h5, h6) {
+    :global(h4) {
+        font-size: 14.5px;
+    }
+
+    :global(h5) {
         font-size: 12px;
     }
 
+    :global(h6) {
+        font-size: 11px;
+    }
+
     :global(.subtext) {
         font-size: 13px;
         color: var(--gray);
diff --git a/web/src/routes/settings/+layout.svelte b/web/src/routes/settings/+layout.svelte
index 7b0b4ee8..1d949672 100644
--- a/web/src/routes/settings/+layout.svelte
+++ b/web/src/routes/settings/+layout.svelte
@@ -1,9 +1,8 @@
 <script>
-    import SettingsCategory from "$components/settings/SettingsCategory.svelte";
+    import SettingsTab from "$components/settings/SettingsTab.svelte";
     import SettingsSection from "$components/settings/SettingsSection.svelte";
 
     import IconSunHigh from "@tabler/icons-svelte/IconSunHigh.svelte";
-    import IconAccessible from "@tabler/icons-svelte/IconAccessible.svelte";
 
     import IconMovie from "@tabler/icons-svelte/IconMovie.svelte";
     import IconMusic from "@tabler/icons-svelte/IconMusic.svelte";
@@ -11,60 +10,74 @@
 
     const iconSize = 18;
     const iconStroke = 1.5;
+    const iconColor = "var(--white)";
 </script>
 
 <div id="settings-page">
     <div id="settings-sidebar">
-        <h1 id="settings-page-title">settings</h1>
+        <h2 id="settings-page-title">settings</h2>
         <nav id="settings-navigation">
             <SettingsSection sectionTitle="general">
-                <SettingsCategory
+                <SettingsTab
                     categoryName="appearance"
                     categoryLink="general/appearance"
                     iconColor="blue"
                 >
-                    <IconSunHigh size={iconSize} stroke={iconStroke} color="var(--primary)" />
-                </SettingsCategory>
-                <SettingsCategory
-                    categoryName="accessibility"
-                    categoryLink="general/accessibility"
-                    iconColor="blue"
-                >
-                    <IconAccessible size={iconSize} stroke={iconStroke} color="var(--primary)"/>
-                </SettingsCategory>
+                    <IconSunHigh size={iconSize} stroke={iconStroke} color={iconColor} />
+                </SettingsTab>
             </SettingsSection>
             <SettingsSection sectionTitle="save">
-                <SettingsCategory
+                <SettingsTab
                     categoryName="video"
                     categoryLink="save/video"
                     iconColor="green"
                 >
-                    <IconMovie size={iconSize} stroke={iconStroke} color="var(--primary)" />
-                </SettingsCategory>
-                <SettingsCategory
+                    <IconMovie size={iconSize} stroke={iconStroke} color={iconColor} />
+                </SettingsTab>
+                <SettingsTab
                     categoryName="audio"
                     categoryLink="save/audio"
                     iconColor="green"
                 >
-                    <IconMusic size={iconSize} stroke={iconStroke} color="var(--primary)"/>
-                </SettingsCategory>
-                <SettingsCategory
+                    <IconMusic size={iconSize} stroke={iconStroke} color={iconColor}/>
+                </SettingsTab>
+                <SettingsTab
                     categoryName="metadata"
                     categoryLink="save/metadata"
                     iconColor="green"
                 >
-                    <IconFileSettings size={iconSize} stroke={iconStroke} color="var(--primary)"/>
-                </SettingsCategory>
+                    <IconFileSettings size={iconSize} stroke={iconStroke} color={iconColor}/>
+                </SettingsTab>
             </SettingsSection>
         </nav>
     </div>
 
-    <main>
+    <main id="settings-page-content">
         <slot></slot>
     </main>
 </div>
 
 <style>
+    #settings-page {
+        --settings-nav-width: 250px;
+        --settings-padding: 30px;
+        display: grid;
+        width: 100%;
+        grid-template-columns: var(--settings-nav-width) 1fr;
+        overflow: hidden;
+        padding-left: calc(var(--settings-padding) - var(--padding));
+        padding-top: calc(var(--settings-padding) - var(--padding));
+    }
+
+    #settings-page-content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--settings-padding);
+        max-width: 600px;
+        padding: 0 var(--settings-padding);
+        overflow-y: scroll;
+    }
+
     #settings-sidebar,
     #settings-navigation {
         display: flex;
@@ -72,15 +85,7 @@
     }
 
     #settings-sidebar {
-        width: 250px;
-    }
-
-    #settings-page {
-        display: grid;
-        grid-template-columns: 300px 1fr;
-        overflow: hidden;
-        padding-left: calc(60px - var(--padding));
-        padding-top: calc(60px - var(--padding));
+        width: var(--settings-nav-width);
     }
 
     #settings-sidebar {
diff --git a/web/src/routes/settings/general/accessibility/+page.svelte b/web/src/routes/settings/general/accessibility/+page.svelte
deleted file mode 100644
index c986ac99..00000000
--- a/web/src/routes/settings/general/accessibility/+page.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<div>accessibility settings</div>
\ No newline at end of file
diff --git a/web/src/routes/settings/general/appearance/+page.svelte b/web/src/routes/settings/general/appearance/+page.svelte
index e64c76f5..68022510 100644
--- a/web/src/routes/settings/general/appearance/+page.svelte
+++ b/web/src/routes/settings/general/appearance/+page.svelte
@@ -1 +1,33 @@
-<div>appearance settings</div>
\ No newline at end of file
+<script lang="ts">
+    import SettingsCategory from "$components/settings/SettingsCategory.svelte";
+    import Switcher from "$components/buttons/Switcher.svelte";
+    import SettingsButton from "$components/buttons/SettingsButton.svelte";
+    import SettingsCheckbox from "$components/buttons/SettingsCheckbox.svelte";
+
+    import { themeOptions } from "$lib/types/settings";
+</script>
+
+<SettingsCategory title="theme">
+    <Switcher big={true}>
+        {#each themeOptions as value}
+            <SettingsButton settingContext="appearance" settingId="theme" settingValue={value}>
+                {value}
+            </SettingsButton>
+        {/each}
+    </Switcher>
+</SettingsCategory>
+
+<SettingsCategory title="accessibility">
+    <SettingsCheckbox
+        settingContext="accessibility"
+        settingId="reduceTransparency"
+        title="reduce visual transparency"
+        description="disables blur effects and reduces transparency of surfaces."
+    />
+    <SettingsCheckbox
+        settingContext="accessibility"
+        settingId="reduceAnimations"
+        title="reduce animations"
+        description="replaces rapid animations with smooth transitions."
+    />
+</SettingsCategory>
diff --git a/web/src/routes/settings/save/audio/+page.svelte b/web/src/routes/settings/save/audio/+page.svelte
index b6908102..7dff7085 100644
--- a/web/src/routes/settings/save/audio/+page.svelte
+++ b/web/src/routes/settings/save/audio/+page.svelte
@@ -1 +1,42 @@
-<div>audio settings</div>
\ No newline at end of file
+<script lang="ts">
+    import SettingsCategory from "$components/settings/SettingsCategory.svelte";
+    import Switcher from "$components/buttons/Switcher.svelte";
+    import SettingsButton from "$components/buttons/SettingsButton.svelte";
+    import SettingsCheckbox from "$components/buttons/SettingsCheckbox.svelte";
+
+    import { audioFormatOptions } from "$lib/types/settings";
+
+    const audioDescription = `cobalt converts every format but "best", therefore all formats but "best" will be lossy.`;
+</script>
+
+<SettingsCategory
+    title="preferred audio format"
+    description="{audioDescription}"
+>
+    <Switcher big={true}>
+        {#each audioFormatOptions as value}
+            <SettingsButton settingContext="save" settingId="audioFormat" settingValue={value}>
+                {value}
+            </SettingsButton>
+        {/each}
+    </Switcher>
+
+</SettingsCategory>
+
+<SettingsCategory title="youtube">
+    <SettingsCheckbox
+        settingContext="save"
+        settingId="youtubeDubBrowserLang"
+        title="use browser language for dubbed videos"
+        description="works even if cobalt ui isn't translated to your language."
+    />
+</SettingsCategory>
+
+<SettingsCategory title="tiktok">
+    <SettingsCheckbox
+        settingContext="save"
+        settingId="tiktokFullAudio"
+        title="use original sound"
+        description="downloads original sound used in the post without any additional changes by the post's author."
+    />
+</SettingsCategory>
diff --git a/web/src/routes/settings/save/metadata/+page.svelte b/web/src/routes/settings/save/metadata/+page.svelte
index 392beb55..38fb46fc 100644
--- a/web/src/routes/settings/save/metadata/+page.svelte
+++ b/web/src/routes/settings/save/metadata/+page.svelte
@@ -1 +1,40 @@
-<div>metadata settings</div>
\ No newline at end of file
+<script lang="ts">
+    import SettingsCategory from "$components/settings/SettingsCategory.svelte";
+    import Switcher from "$components/buttons/Switcher.svelte";
+    import SettingsButton from "$components/buttons/SettingsButton.svelte";
+    import SettingsCheckbox from "$components/buttons/SettingsCheckbox.svelte";
+
+    import { filenameStyleOptions } from "$lib/types/settings";
+</script>
+
+<SettingsCategory
+    title="filename style"
+    description="very cool description for every style. bla bla bla."
+>
+    <Switcher big={true}>
+        {#each filenameStyleOptions as value}
+            <SettingsButton settingContext="save" settingId="filenameStyle" settingValue={value}>
+                {value}
+            </SettingsButton>
+        {/each}
+    </Switcher>
+
+</SettingsCategory>
+
+<SettingsCategory title="file metadata">
+    <SettingsCheckbox
+        settingContext="save"
+        settingId="disableMetadata"
+        title="disable file metadata"
+        description="cobalt won't add title, artist, and other info to the file."
+    />
+</SettingsCategory>
+
+<SettingsCategory title="saving method">
+    <SettingsCheckbox
+        settingContext="save"
+        settingId="downloadPopup"
+        title="ask how to save"
+        description="cobalt will offer you several ways to save the file instead of opening it in a new tab."
+    />
+</SettingsCategory>
diff --git a/web/src/routes/settings/save/video/+page.svelte b/web/src/routes/settings/save/video/+page.svelte
index 8df73592..48bddc25 100644
--- a/web/src/routes/settings/save/video/+page.svelte
+++ b/web/src/routes/settings/save/video/+page.svelte
@@ -1 +1,58 @@
-<div>video settings</div>
\ No newline at end of file
+<script lang="ts">
+    import SettingsCategory from "$components/settings/SettingsCategory.svelte";
+    import Switcher from "$components/buttons/Switcher.svelte";
+    import SettingsButton from "$components/buttons/SettingsButton.svelte";
+    import SettingsCheckbox from "$components/buttons/SettingsCheckbox.svelte";
+
+    import { videoQualityOptions } from "$lib/types/settings";
+    import { youtubeVideoCodecOptions } from "$lib/types/settings";
+
+    const videoDescription = `if preferred quality isn’t available, closest one is picked instead.`;
+    const codecDescription = `if preferred codec isn’t available, next best is picked instead.`;
+</script>
+
+<SettingsCategory
+    title="preferred video quality"
+    description="{videoDescription}"
+>
+    <Switcher big={true}>
+        {#each videoQualityOptions as value}
+            <SettingsButton settingContext="save" settingId="videoQuality" settingValue={value}>
+                {value}
+            </SettingsButton>
+        {/each}
+    </Switcher>
+
+</SettingsCategory>
+
+<SettingsCategory
+    title="preferred youtube codec"
+    description="{codecDescription}"
+>
+    <Switcher big={true}>
+        {#each youtubeVideoCodecOptions as value}
+            <SettingsButton settingContext="save" settingId="youtubeVideoCodec" settingValue={value}>
+                {value}
+            </SettingsButton>
+        {/each}
+    </Switcher>
+
+</SettingsCategory>
+
+<SettingsCategory title="twitter">
+    <SettingsCheckbox
+        settingContext="save"
+        settingId="twitterGif"
+        title="convert looping videos to GIF"
+        description="GIF conversion is very lossy, end result may be low quality."
+    />
+</SettingsCategory>
+
+<SettingsCategory title="tiktok">
+    <SettingsCheckbox
+        settingContext="save"
+        settingId="tiktokH265"
+        title="prefer HEVC/H265 format"
+        description="allows 1080p video downloading at cost of compatibility."
+    />
+</SettingsCategory>