From cebd170b6896ef5e4fcb58bd549a2e3493e10f31 Mon Sep 17 00:00:00 2001
From: Ruben <sneexy@disroot.org>
Date: Wed, 2 Jul 2025 13:18:32 -0500
Subject: [PATCH] cherrypick gts's theme selector

---
 .../flavours/glitch/actions/settings.js       |  5 ++-
 .../flavours/glitch/containers/mastodon.jsx   | 20 ++++++-----
 .../glitch/containers/theme_component.jsx     | 36 +++++++++++++++++++
 .../features/local_settings/page/index.jsx    | 13 +++++++
 public/500.html                               |  1 -
 public/sw.js                                  |  1 -
 public/sw.js.map                              |  1 -
 public/verify-state.js                        | 14 +++++---
 8 files changed, 73 insertions(+), 18 deletions(-)
 create mode 100644 app/javascript/flavours/glitch/containers/theme_component.jsx
 delete mode 120000 public/500.html
 delete mode 120000 public/sw.js
 delete mode 120000 public/sw.js.map

diff --git a/app/javascript/flavours/glitch/actions/settings.js b/app/javascript/flavours/glitch/actions/settings.js
index fbd89f9d4b..ffc5aa94d4 100644
--- a/app/javascript/flavours/glitch/actions/settings.js
+++ b/app/javascript/flavours/glitch/actions/settings.js
@@ -26,9 +26,8 @@ const debouncedSave = debounce((dispatch, getState) => {
 
   const data = getState().get('settings').filter((_, path) => path !== 'saved').toJS();
 
-  api().put('/api/web/settings', { data })
-    .then(() => dispatch({ type: SETTING_SAVE }))
-    .catch(error => dispatch(showAlertForError(error)));
+  localStorage.setItem('web_settings', JSON.stringify(data));
+  dispatch({ type: SETTING_SAVE });
 }, 5000, { trailing: true });
 
 export function saveSettings() {
diff --git a/app/javascript/flavours/glitch/containers/mastodon.jsx b/app/javascript/flavours/glitch/containers/mastodon.jsx
index c0f63b95b4..b0c973fdb2 100644
--- a/app/javascript/flavours/glitch/containers/mastodon.jsx
+++ b/app/javascript/flavours/glitch/containers/mastodon.jsx
@@ -20,6 +20,8 @@ import { IntlProvider } from 'flavours/glitch/locales';
 import { store } from 'flavours/glitch/store';
 import { isProduction } from 'flavours/glitch/utils/environment';
 
+import { ThemeComponent } from './theme_component';
+
 const title = isProduction() ? siteTitle : `${siteTitle} (Dev)`;
 
 const hydrateAction = hydrateStore(initialState);
@@ -58,15 +60,17 @@ export default class Mastodon extends PureComponent {
       <IdentityContext.Provider value={this.identity}>
         <IntlProvider>
           <ReduxProvider store={store}>
-            <ErrorBoundary>
-              <Router>
-                <ScrollContext shouldUpdateScroll={this.shouldUpdateScroll}>
-                  <Route path='/' component={UI} />
-                </ScrollContext>
-              </Router>
+            <ThemeComponent>
+              <ErrorBoundary>
+                <Router>
+                  <ScrollContext shouldUpdateScroll={this.shouldUpdateScroll}>
+                    <Route path='/' component={UI} />
+                  </ScrollContext>
+                </Router>
 
-              <Helmet defaultTitle={title} titleTemplate={`%s - ${title}`} />
-            </ErrorBoundary>
+                <Helmet defaultTitle={title} titleTemplate={`%s - ${title}`} />
+              </ErrorBoundary>
+            </ThemeComponent>
           </ReduxProvider>
         </IntlProvider>
       </IdentityContext.Provider>
diff --git a/app/javascript/flavours/glitch/containers/theme_component.jsx b/app/javascript/flavours/glitch/containers/theme_component.jsx
new file mode 100644
index 0000000000..a9a2190806
--- /dev/null
+++ b/app/javascript/flavours/glitch/containers/theme_component.jsx
@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import { useAppSelector } from 'flavours/glitch/store';
+
+const ThemeComponent = ({ children }) => {
+  const theme = useAppSelector(
+    (state) => state.getIn(['local_settings', 'theme']) ?? 'mastodon-light',
+  );
+
+  let href;
+  switch (true) {
+  case theme === 'mastodon':
+    href = '';
+    break;
+  case theme === 'mastodon-light':
+    href = '/packs/css/skins/glitch/mastodon-light/common.css';
+    break;
+  case theme === 'contrast':
+    href = '/packs/css/skins/glitch/contrast/common.css';
+    break;
+  }
+
+  return (
+    <>
+      {href !== '' ? <link rel='stylesheet' media='all' href={href} /> : null}
+      {children}
+    </>
+  );
+};
+
+ThemeComponent.propTypes = {
+  children: PropTypes.node,
+};
+
+export { ThemeComponent };
\ No newline at end of file
diff --git a/app/javascript/flavours/glitch/features/local_settings/page/index.jsx b/app/javascript/flavours/glitch/features/local_settings/page/index.jsx
index 0ba3e46c64..735528d2d0 100644
--- a/app/javascript/flavours/glitch/features/local_settings/page/index.jsx
+++ b/app/javascript/flavours/glitch/features/local_settings/page/index.jsx
@@ -46,6 +46,19 @@ class LocalSettingsPage extends PureComponent {
     ({ intl, onChange, settings }) => (
       <div className='glitch local-settings__page general'>
         <h1><FormattedMessage id='settings.general' defaultMessage='General' /></h1>
+        <LocalSettingsPageItem
+          settings={settings}
+          item={['theme']}
+          id='mastodon-settings--theme'
+          options={[
+            { value: 'mastodon-light', message: 'Light' },
+            { value: 'mastodon', message: 'Dark' },
+            { value: 'contrast', message: 'High contrast' },
+          ]}
+          onChange={onChange}
+        >
+          <FormattedMessage id='settings.theme' defaultMessage='Theme' />
+        </LocalSettingsPageItem>
         <LocalSettingsPageItem
           settings={settings}
           item={['show_reply_count']}
diff --git a/public/500.html b/public/500.html
deleted file mode 120000
index 45a9078080..0000000000
--- a/public/500.html
+++ /dev/null
@@ -1 +0,0 @@
-assets/500.html
\ No newline at end of file
diff --git a/public/sw.js b/public/sw.js
deleted file mode 120000
index debb9af9dc..0000000000
--- a/public/sw.js
+++ /dev/null
@@ -1 +0,0 @@
-packs/sw.js
\ No newline at end of file
diff --git a/public/sw.js.map b/public/sw.js.map
deleted file mode 120000
index 0734c81993..0000000000
--- a/public/sw.js.map
+++ /dev/null
@@ -1 +0,0 @@
-packs/sw.js.map
\ No newline at end of file
diff --git a/public/verify-state.js b/public/verify-state.js
index 71c46441bc..38805bd976 100644
--- a/public/verify-state.js
+++ b/public/verify-state.js
@@ -4,18 +4,20 @@ async function loadState() {
   const domain = localStorage.getItem('domain');
   const access_token = localStorage.getItem('access_token');
   const storedState = localStorage.getItem('initial_state');
+  const webSettings = localStorage.getItem('web_settings');
 
   if (!domain || !access_token) {
     window.location.href = '/login.html';
     return;
   }
 
+  /* We try to load the initial state now to prevent a race between us and mastodon */
   if (storedState && window.location.pathname !== '/prepare.html') {
-    const isEl = document.getElementById('initial-state')
-    if (isEl) {
-      isEl.textContent = storedState;
-      return;
+    const state = JSON.parse(storedState);
+    if (webSettings) {
+      state.settings = JSON.parse(webSettings);
     }
+    document.getElementById('initial-state').textContent = JSON.stringify(state);
   }
 
   const apiUrl = `https://${domain}/api`;
@@ -1114,6 +1116,10 @@ async function loadState() {
     ],
   };
 
+  if (webSettings) {
+    state.settings = JSON.parse(webSettings);
+  }
+
   const json = JSON.stringify(state);
   if (window.location.pathname !== '/prepare.html') document.getElementById('initial-state').textContent = json;
   localStorage.setItem("initial_state", json);