web/settings: add an option to hide the remux tab on mobile

web/i18n/en/settings.json

@@ -144,5 +144,9 @@
 
     "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."
+    "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.",
+
+    "tabs": "navigation",
+    "tabs.hide_remux": "hide the remux tab",
+    "tabs.hide_remux.description": "if you don't use the remux tool, you can hide it from the navigation bar."
 }

web/src/components/sidebar/Sidebar.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import settings from "$lib/state/settings";
+
     import { t } from "$lib/i18n/translations";
     import { defaultNavPage } from "$lib/subnav";
 
@@ -30,7 +32,9 @@
     <div id="sidebar-tabs" role="tablist">
         <div id="sidebar-actions" class="sidebar-inner-container">
             <SidebarTab name="save" path="/" icon={IconDownload} />
-            <SidebarTab name="remux" path="/remux" icon={IconRepeat} beta />
+            {#if !$settings.appearance.hideRemuxTab}
+                <SidebarTab name="remux" path="/remux" icon={IconRepeat} beta />
+            {/if}
         </div>
         <div id="sidebar-info" class="sidebar-inner-container">
             <SidebarTab name="settings" path={settingsLink} icon={IconSettings} />

web/src/lib/settings/defaults.ts

@@ -12,6 +12,7 @@ const defaultSettings: CobaltSettings = {
         theme: "auto",
         language: defaultLocale,
         autoLanguage: true,
+        hideRemuxTab: false,
     },
     accessibility: {
         reduceMotion: false,

web/src/lib/types/settings/v5.ts

@@ -2,7 +2,9 @@ import { type CobaltSettingsV4 } from "$lib/types/settings/v4";
 
 export type CobaltSettingsV5 = Omit<CobaltSettingsV4, 'schemaVersion' | 'advanced' | 'save' | 'privacy' | 'appearance'> & {
     schemaVersion: 5,
-    appearance: Omit<CobaltSettingsV4['appearance'], 'reduceMotion' | 'reduceTransparency'>,
+    appearance: Omit<CobaltSettingsV4['appearance'], 'reduceMotion' | 'reduceTransparency'> & {
+        hideRemuxTab: boolean,
+    },
     accessibility: {
         reduceMotion: boolean;
         reduceTransparency: boolean;

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

@@ -1,5 +1,7 @@
 <script lang="ts">
     import settings from "$lib/state/settings";
+
+    import { device } from "$lib/device";
     import { themeOptions } from "$lib/types/settings";
     import { t, locales } from "$lib/i18n/translations";
 
@@ -52,3 +54,14 @@
         disabled={$settings.appearance.autoLanguage}
     />
 </SettingsCategory>
+
+{#if device.is.mobile}
+    <SettingsCategory sectionId="tabs" title={$t("settings.tabs")}>
+        <SettingsToggle
+            settingContext="appearance"
+            settingId="hideRemuxTab"
+            title={$t("settings.tabs.hide_remux")}
+            description={$t("settings.tabs.hide_remux.description")}
+        />
+    </SettingsCategory>
+{/if}