web: settings ui & const for settings type options

2024-12-28 18:46:09 +00:00 · 2024-06-24 23:05:51 +06:00 · 2024-06-24 23:05:51 +06:00 · 042d2e9cc8
parent 0064bda4ed
commit 042d2e9cc8
12 changed files with 346 additions and 97 deletions
--- 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>
--- 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;
    }
--- 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>
--- a/web/src/components/settings/SettingsTab.svelte
+++ 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>
--- 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,
 };

--- 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);
--- 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 {
--- a/web/src/routes/settings/general/accessibility/+page.svelte
+++ b/web/src/routes/settings/general/accessibility/+page.svelte
@ -1 +0,0 @@
-<div>accessibility settings</div>
--- 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>
+<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>
--- 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>
+<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>
--- 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>
+<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>
--- 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>
+<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>