web/settings: add a local processing page

web/i18n/en/settings.json

@@ -7,6 +7,7 @@
     "page.advanced": "advanced",
     "page.debug": "info for nerds",
     "page.instances": "instances",
+    "page.local": "local processing",
 
     "section.general": "general",
     "section.save": "save",
@@ -111,10 +112,6 @@
     "advanced.debug.title": "enable features for nerds",
     "advanced.debug.description": "gives you easy access to app info that can be useful for debugging. enabling this does not affect functionality of cobalt in any way.",
 
-    "advanced.local-processing": "local processing",
-    "advanced.local-processing.title": "mux and convert media on device",
-    "advanced.local-processing.description": "when downloading media, cobalt will use on-device processing to mux or convert it. exclusive local features such as remux or convert are not affected, they always run locally.",
-
     "processing.community": "community instances",
     "processing.enable_custom.title": "use a custom processing server",
     "processing.enable_custom.description": "cobalt will use a custom processing instance if you choose to. even though cobalt has some security measures in place, we are not responsible for any damages done via a community instance, as we have no control over them.\n\nplease be mindful of what instances you use and make sure they're hosted by people you trust.",
@@ -127,5 +124,13 @@
     "processing.access_key.input.alt_text": "u-u-i-d access key",
 
     "advanced.settings_data": "settings data",
-    "advanced.local_storage": "local storage"
+    "advanced.local_storage": "local storage",
+
+    "local.saving": "saving",
+    "local.saving.title": "mux and convert media on device",
+    "local.saving.description": "when downloading media, cobalt will do needed processing on-device instead of using cloud compute. files will download faster and more reliably.\n\nexclusive local features are not affected by this toggle, they always run locally.",
+
+    "local.webcodecs": "webcodecs",
+    "local.webcodecs.title": "use webcodecs for on-device processing",
+    "local.webcodecs.description": "when decoding or encoding files, cobalt will try to use webcodecs. this feature allows for GPU-accelerated processing of media files, meaning that all decoding & encoding will be way faster.\n\navailability and stability of this feature depends on your device's and browser's capabilities. stuff might break or not work properly."
 }

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

@@ -16,8 +16,10 @@
     import IconMusic from "@tabler/icons-svelte/IconMusic.svelte";
     import IconFileDownload from "@tabler/icons-svelte/IconFileDownload.svelte";
 
-    import IconBug from "@tabler/icons-svelte/IconBug.svelte";
+    import IconCpu from "@tabler/icons-svelte/IconCpu.svelte";
     import IconWorld from "@tabler/icons-svelte/IconWorld.svelte";
+
+    import IconBug from "@tabler/icons-svelte/IconBug.svelte";
     import IconAdjustmentsStar from "@tabler/icons-svelte/IconAdjustmentsStar.svelte";
 
     $: versionText = $version
@@ -69,12 +71,21 @@
         </PageNavSection>
 
         <PageNavSection>
+            <PageNavTab
+                path="/settings/local"
+                title={$t("settings.page.local")}
+                icon={IconCpu}
+                iconColor="gray"
+            />
             <PageNavTab
                 path="/settings/instances"
                 title={$t("settings.page.instances")}
                 icon={IconWorld}
                 iconColor="gray"
             />
+        </PageNavSection>
+
+        <PageNavSection>
             <PageNavTab
                 path="/settings/advanced"
                 title={$t("settings.page.advanced")}

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

@@ -1,6 +1,5 @@
 <script lang="ts">
     import { t } from "$lib/i18n/translations";
-    import { getStorageQuota } from "$lib/storage";
 
     import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
     import ManageSettings from "$components/settings/ManageSettings.svelte";

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

@@ -56,15 +56,6 @@
     />
 </SettingsCategory>
 
-<SettingsCategory sectionId="local-processing" title={$t("settings.advanced.local-processing")} beta>
-    <SettingsToggle
-        settingContext="advanced"
-        settingId="localProcessing"
-        title={$t("settings.advanced.local-processing.title")}
-        description={$t("settings.advanced.local-processing.description")}
-    />
-</SettingsCategory>
-
 <style>
     .category-inside-group {
         display: flex;

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

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import { t } from "$lib/i18n/translations";
+
+    import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
+    import SettingsCategory from "$components/settings/SettingsCategory.svelte";
+</script>
+
+<SettingsCategory sectionId="mux-convert" title={$t("settings.local.saving")} beta>
+    <SettingsToggle
+        settingContext="save"
+        settingId="localProcessing"
+        title={$t("settings.local.saving.title")}
+        description={$t("settings.local.saving.description")}
+    />
+</SettingsCategory>
+
+<SettingsCategory sectionId="webcodecs" title={$t("settings.local.webcodecs")} beta>
+    <SettingsToggle
+        settingContext="advanced"
+        settingId="useWebCodecs"
+        title={$t("settings.local.webcodecs.title")}
+        description={$t("settings.local.webcodecs.description")}
+    />
+</SettingsCategory>

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

@@ -9,7 +9,7 @@
 
 <SettingsCategory sectionId="tunnel" title={$t("settings.privacy.tunnel")}>
     <SettingsToggle
-        settingContext="privacy"
+        settingContext="save"
         settingId="alwaysProxy"
         title={$t("settings.privacy.tunnel.title")}
         description={$t("settings.privacy.tunnel.description")}