From a22e4c3cf95aa2bedb703f201f1c81d6e5e369ea Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Thu, 1 May 2025 00:25:03 +0600
Subject: [PATCH] web/settings: add an option to hide the remux tab on mobile

---
 web/i18n/en/settings.json                       |  6 +++++-
 web/src/components/sidebar/Sidebar.svelte       |  6 +++++-
 web/src/lib/settings/defaults.ts                |  1 +
 web/src/lib/types/settings/v5.ts                |  4 +++-
 web/src/routes/settings/appearance/+page.svelte | 13 +++++++++++++
 5 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/web/i18n/en/settings.json b/web/i18n/en/settings.json
index 3e1d11cf..849bf3da 100644
--- a/web/i18n/en/settings.json
+++ b/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."
 }
diff --git a/web/src/components/sidebar/Sidebar.svelte b/web/src/components/sidebar/Sidebar.svelte
index e799b015..0c692731 100644
--- a/web/src/components/sidebar/Sidebar.svelte
+++ b/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} />
diff --git a/web/src/lib/settings/defaults.ts b/web/src/lib/settings/defaults.ts
index 0e7430cb..54a96994 100644
--- a/web/src/lib/settings/defaults.ts
+++ b/web/src/lib/settings/defaults.ts
@@ -12,6 +12,7 @@ const defaultSettings: CobaltSettings = {
         theme: "auto",
         language: defaultLocale,
         autoLanguage: true,
+        hideRemuxTab: false,
     },
     accessibility: {
         reduceMotion: false,
diff --git a/web/src/lib/types/settings/v5.ts b/web/src/lib/types/settings/v5.ts
index 270e53c0..dee2e8ee 100644
--- a/web/src/lib/types/settings/v5.ts
+++ b/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;
diff --git a/web/src/routes/settings/appearance/+page.svelte b/web/src/routes/settings/appearance/+page.svelte
index 2791dfa1..4cdb8fe9 100644
--- a/web/src/routes/settings/appearance/+page.svelte
+++ b/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}