web/settings: add advanced & debug pages

web/i18n/en/settings.json

@@ -3,6 +3,8 @@
     "page.video": "video",
     "page.audio": "audio",
     "page.metadata": "metadata",
+    "page.advanced": "advanced",
+    "page.debug": "debug information",
 
     "section.general": "general",
     "section.save": "save",
@@ -80,5 +82,9 @@
     "language.auto.title": "use default browser language",
     "language.auto.description": "automatically picks the best language for you. if preferred browser language isn't available, english is used instead. disable this toggle to pick a language manually.",
     "language.preferred.title": "preferred language",
-    "language.preferred.description": "language used for interface and content."
+    "language.preferred.description": "language used for interface and content.",
+
+    "advanced.debug": "debug",
+    "advanced.debug.title": "enable debug features",
+    "advanced.debug.description": "gives you access to a page with app & device info useful for debugging."
 }

web/src/lib/settings/defaults.ts

@@ -8,6 +8,9 @@ const defaultSettings: CobaltSettings = {
         reduceAnimations: false,
         reduceTransparency: false,
     },
+    advanced: {
+        debug: false,
+    },
     appearance: {
         theme: "auto",
         language: defaultLocale,

web/src/lib/types/settings.ts

@@ -18,6 +18,10 @@ type CobaltSettingsAppearance = {
     autoLanguage: boolean,
 };
 
+type CobaltSettingsAdvanced = {
+    debug: boolean,
+};
+
 type CobaltSettingsGeneral = {
     customProcessingEndpoint: string,
     seenOnboarding: boolean,
@@ -45,6 +49,7 @@ type CobaltSettingsPrivacy = {
 export type CobaltSettings = {
     schemaVersion: number,
     accessibility: CobaltSettingsAccessibility,
+    advanced: CobaltSettingsAdvanced,
     appearance: CobaltSettingsAppearance,
     general: CobaltSettingsGeneral,
     save: CobaltSettingsSave,

web/src/lib/version.ts

@@ -0,0 +1,23 @@
+type VersionResponse = {
+    commit: string;
+    branch: string;
+    remote: string;
+    version: string;
+}
+
+const fetchVersion = async function () {
+    const response: VersionResponse | undefined = await fetch('/version.json')
+        .then(r => r.json())
+        .catch(() => {});
+
+    if (!response) return {
+        commit: "unknown",
+        branch: "unknown",
+        remote: "unknown",
+        version: "unknown"
+    }
+
+    return response;
+}
+
+export const version = await fetchVersion();

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

@@ -1,6 +1,8 @@
 <script lang="ts">
     import { page } from "$app/stores";
 
+    import settings from "$lib/settings";
+
     import { t } from "$lib/i18n/translations";
 
     import SettingsNavTab from "$components/settings/SettingsNavTab.svelte";
@@ -11,8 +13,11 @@
     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 IconSettingsBolt from "@tabler/icons-svelte/IconSettingsBolt.svelte";
+    import IconBug from "@tabler/icons-svelte/IconBug.svelte";
 
     import IconChevronLeft from "@tabler/icons-svelte/IconChevronLeft.svelte";
+
     import { goto } from "$app/navigation";
     import { defaultSettingsPage } from "$lib/settings/defaults";
 
@@ -100,6 +105,24 @@
                     <IconFileSettings />
                 </SettingsNavTab>
             </SettingsNavSection>
+            <SettingsNavSection>
+                <SettingsNavTab
+                    tabName="advanced"
+                    tabLink="advanced"
+                    iconColor="gray"
+                >
+                    <IconSettingsBolt />
+                </SettingsNavTab>
+                {#if $settings.advanced.debug}
+                    <SettingsNavTab
+                        tabName="debug"
+                        tabLink="advanced/debug"
+                        iconColor="gray"
+                    >
+                        <IconBug />
+                    </SettingsNavTab>
+                {/if}
+            </SettingsNavSection>
         </nav>
     </div>
 

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

@@ -0,0 +1,15 @@
+<script>
+    import { t } from "$lib/i18n/translations";
+
+    import SettingsCategory from "$components/settings/SettingsCategory.svelte";
+    import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
+</script>
+
+<SettingsCategory sectionId="debug" title={$t("settings.advanced.debug")}>
+    <SettingsToggle
+        settingContext="advanced"
+        settingId="debug"
+        title={$t("settings.advanced.debug.title")}
+        description={$t("settings.advanced.debug.description")}
+    />
+</SettingsCategory>

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

@@ -0,0 +1,47 @@
+<script lang="ts">
+    import { device, app } from "$lib/device";
+    import { version } from "$lib/version";
+</script>
+
+<div id="advanced-page">
+    device:
+    <div class="message-container subtext">
+        is.iPad: {device.is.iPad}
+        is.iPhone: {device.is.iPhone}
+        is.iOS: {device.is.iOS}
+        is.android: {device.is.android}
+        is.mobile: {device.is.mobile}
+        preferredLocale: {device.preferredLocale}
+    </div>
+
+    app:
+    <div class="message-container subtext">
+        is.installed: {app.is.installed}
+    </div>
+
+    version:
+    <div class="message-container subtext">
+        version: {version.version}
+        commit: {version.commit.slice(0, 7)}
+        branch: {version.branch}
+        remote: {version.remote}
+    </div>
+</div>
+
+<style>
+    #advanced-page {
+        display: flex;
+        flex-direction: column;
+        padding: var(--padding);
+        gap: var(--padding)
+    }
+
+    .message-container {
+        display: flex;
+        flex-direction: column;
+        line-break: anywhere;
+        border-radius: var(--border-radius);
+        background: var(--button);
+        padding: var(--padding);
+    }
+</style>