From ce24132c33a4583cb948831d86c359d105739db9 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Mon, 10 Mar 2025 23:36:04 -0400
Subject: [PATCH] Enable mobile theme editing

---
 changelog.d/mobile-theme-editing.fix                     | 1 +
 .../settings_modal/settings_modal_user_content.vue       | 4 ++--
 src/components/settings_modal/tabs/appearance_tab.vue    | 9 +++++++++
 .../settings_modal/tabs/style_tab/style_tab.scss         | 2 ++
 .../settings_modal/tabs/theme_tab/theme_tab.scss         | 2 ++
 src/i18n/en.json                                         | 1 +
 src/modules/config.js                                    | 1 +
 src/modules/default_config_state.js                      | 1 +
 src/modules/instance.js                                  | 1 +
 src/services/style_setter/style_setter.js                | 2 ++
 10 files changed, 22 insertions(+), 2 deletions(-)
 create mode 100644 changelog.d/mobile-theme-editing.fix

diff --git a/changelog.d/mobile-theme-editing.fix b/changelog.d/mobile-theme-editing.fix
new file mode 100644
index 000000000..43ee05ec8
--- /dev/null
+++ b/changelog.d/mobile-theme-editing.fix
@@ -0,0 +1 @@
+Enable mobile theme editing
diff --git a/src/components/settings_modal/settings_modal_user_content.vue b/src/components/settings_modal/settings_modal_user_content.vue
index fea9a20fe..f9a1e99bc 100644
--- a/src/components/settings_modal/settings_modal_user_content.vue
+++ b/src/components/settings_modal/settings_modal_user_content.vue
@@ -22,7 +22,7 @@
       <AppearanceTab />
     </div>
     <div
-      v-if="expertLevel > 0 && !isMobileLayout"
+      v-if="expertLevel > 0"
       :label="$t('settings.style.themes3.editor.title')"
       icon="palette"
       data-tab-name="style"
@@ -31,7 +31,7 @@
       <StyleTab />
     </div>
     <div
-      v-if="expertLevel > 0 && !isMobileLayout"
+      v-if="expertLevel > 0"
       :label="$t('settings.theme_old')"
       icon="paint-brush"
       data-tab-name="theme"
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index 8ab0f1cb7..d49a28651 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -336,6 +336,15 @@
             {{ $t('settings.show_scrollbars') }}
           </BooleanSetting>
         </li>
+        <li>
+          <UnitSetting
+            path="themeEditorMinWidth"
+            :units="['px', 'rem']"
+            expert="1"
+          >
+            {{ $t('settings.theme_editor_min_width') }}
+          </UnitSetting>
+        </li>
       </ul>
     </div>
     <div class="setting-item">
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.scss b/src/components/settings_modal/tabs/style_tab/style_tab.scss
index a9c35c085..6a86a3e08 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.scss
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.scss
@@ -1,4 +1,6 @@
 .StyleTab {
+  min-width: var(--themeEditorMinWidth, fit-content);
+
   .style-control {
     display: flex;
     flex-wrap: wrap;
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
index c2e33e75e..d83beffa0 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
@@ -1,4 +1,6 @@
 .theme-tab {
+  min-width: var(--themeEditorMinWidth, fit-content);
+
   .deprecation-warning {
     padding: 0.5em;
     margin: 2em;
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 9d3400d10..545cdb1e1 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -709,6 +709,7 @@
     "column_sizes_sidebar": "Sidebar",
     "column_sizes_content": "Content",
     "column_sizes_notifs": "Notifications",
+    "theme_editor_min_width": "Minimum width of theme editor (0 for \"fit-content\")",
     "tree_advanced": "Allow more flexible navigation in tree view",
     "tree_fade_ancestors": "Display ancestors of the current status in faint text",
     "conversation_display_linear": "Linear-style",
diff --git a/src/modules/config.js b/src/modules/config.js
index 1d81f67f6..e515b9fe4 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -13,6 +13,7 @@ const APPEARANCE_SETTINGS_KEYS = new Set([
   'sidebarColumnWidth',
   'contentColumnWidth',
   'notifsColumnWidth',
+  'themeEditorMinWidth',
   'textSize',
   'navbarSize',
   'panelHeaderSize',
diff --git a/src/modules/default_config_state.js b/src/modules/default_config_state.js
index 2baa752a6..eb12d2df1 100644
--- a/src/modules/default_config_state.js
+++ b/src/modules/default_config_state.js
@@ -121,6 +121,7 @@ export const defaultState = {
   sidebarColumnWidth: '25rem',
   contentColumnWidth: '45rem',
   notifsColumnWidth: '25rem',
+  themeEditorMinWidth: undefined, // instance default
   emojiReactionsScale: undefined,
   textSize: undefined, // instance default
   emojiSize: undefined, // instance default
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 7987f7e63..83671a881 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -112,6 +112,7 @@ const defaultState = {
   emojiSize: '2.2rem',
   navbarSize: '3.5rem',
   panelHeaderSize: '3.2rem',
+  themeEditorMinWidth: '0rem',
   forcedRoundness: -1,
   fontsOverride: {},
   virtualScrolling: true,
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 50be54443..13606cdd9 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -187,6 +187,7 @@ const extractStyleConfig = ({
   sidebarColumnWidth,
   contentColumnWidth,
   notifsColumnWidth,
+  themeEditorMinWidth,
   emojiReactionsScale,
   emojiSize,
   navbarSize,
@@ -198,6 +199,7 @@ const extractStyleConfig = ({
     sidebarColumnWidth,
     contentColumnWidth,
     notifsColumnWidth,
+    themeEditorMinWidth: parseInt(themeEditorMinWidth) === 0 ? 'fit-content' : themeEditorMinWidth,
     emojiReactionsScale,
     emojiSize,
     navbarSize,