web/settings: add a local processing page

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")}