From 3b1d8972b0d4dde08f27ae544647a6e42657e144 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 25 Oct 2022 16:56:25 -0500
Subject: [PATCH] Scaffold theme editor

---
 .../components/color-with-picker.tsx          |  9 +--
 app/soapbox/features/soapbox_config/index.tsx |  4 +-
 .../theme-editor/components/palette.tsx       | 41 ++++++++++
 app/soapbox/features/theme-editor/index.tsx   | 74 +++++++++++++++++++
 app/soapbox/features/ui/index.tsx             |  2 +
 .../features/ui/util/async-components.ts      |  4 +
 6 files changed, 127 insertions(+), 7 deletions(-)
 create mode 100644 app/soapbox/features/theme-editor/components/palette.tsx
 create mode 100644 app/soapbox/features/theme-editor/index.tsx

diff --git a/app/soapbox/features/soapbox_config/components/color-with-picker.tsx b/app/soapbox/features/soapbox_config/components/color-with-picker.tsx
index c82e1bf11..70ccb624b 100644
--- a/app/soapbox/features/soapbox_config/components/color-with-picker.tsx
+++ b/app/soapbox/features/soapbox_config/components/color-with-picker.tsx
@@ -9,12 +9,12 @@ import ColorPicker from './color-picker';
 import type { ColorChangeHandler } from 'react-color';
 
 interface IColorWithPicker {
-  buttonId: string,
   value: string,
   onChange: ColorChangeHandler,
+  className?: string,
 }
 
-const ColorWithPicker: React.FC<IColorWithPicker> = ({ buttonId, value, onChange }) => {
+const ColorWithPicker: React.FC<IColorWithPicker> = ({ value, onChange, className }) => {
   const node = useRef<HTMLDivElement>(null);
   const [active, setActive] = useState(false);
   const [placement, setPlacement] = useState<string | null>(null);
@@ -39,11 +39,10 @@ const ColorWithPicker: React.FC<IColorWithPicker> = ({ buttonId, value, onChange
   };
 
   return (
-    <div>
+    <div className={className}>
       <div
         ref={node}
-        id={buttonId}
-        className='w-8 h-8 rounded-md'
+        className='w-full h-full'
         role='presentation'
         style={{ background: value }}
         title={value}
diff --git a/app/soapbox/features/soapbox_config/index.tsx b/app/soapbox/features/soapbox_config/index.tsx
index 222c44434..ef36b0381 100644
--- a/app/soapbox/features/soapbox_config/index.tsx
+++ b/app/soapbox/features/soapbox_config/index.tsx
@@ -221,7 +221,7 @@ const SoapboxConfig: React.FC = () => {
 
             <ListItem label={<FormattedMessage id='soapbox_config.fields.brand_color_label' defaultMessage='Brand color' />}>
               <ColorWithPicker
-                buttonId='brandColor'
+                className='w-8 h-8 rounded-md overflow-hidden'
                 value={soapbox.brandColor}
                 onChange={handleColorChange(['brandColor'], (color) => color.hex)}
               />
@@ -229,7 +229,7 @@ const SoapboxConfig: React.FC = () => {
 
             <ListItem label={<FormattedMessage id='soapbox_config.fields.accent_color_label' defaultMessage='Accent color' />}>
               <ColorWithPicker
-                buttonId='accentColor'
+                className='w-8 h-8 rounded-md overflow-hidden'
                 value={soapbox.accentColor}
                 onChange={handleColorChange(['accentColor'], (color) => color.hex)}
               />
diff --git a/app/soapbox/features/theme-editor/components/palette.tsx b/app/soapbox/features/theme-editor/components/palette.tsx
new file mode 100644
index 000000000..4f89fa3ae
--- /dev/null
+++ b/app/soapbox/features/theme-editor/components/palette.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+
+import compareId from 'soapbox/compare_id';
+import { HStack } from 'soapbox/components/ui';
+import ColorWithPicker from 'soapbox/features/soapbox_config/components/color-with-picker';
+
+interface ColorGroup {
+  [tint: string]: string,
+}
+
+interface IPalette {
+  palette: ColorGroup,
+}
+
+/** Editable color palette. */
+const Palette: React.FC<IPalette> = ({ palette }) => {
+  const tints = Object.keys(palette).sort(compareId);
+
+  const result = tints.map(tint => {
+    const hex = palette[tint];
+
+    return (
+      <ColorWithPicker
+        className='w-full h-full'
+        value={hex}
+        onChange={() => {}}
+      />
+    );
+  });
+
+  return (
+    <HStack className='w-full h-8 rounded-md overflow-hidden'>
+      {result}
+    </HStack>
+  );
+};
+
+export {
+  Palette as default,
+  ColorGroup,
+};
\ No newline at end of file
diff --git a/app/soapbox/features/theme-editor/index.tsx b/app/soapbox/features/theme-editor/index.tsx
new file mode 100644
index 000000000..06a0a6496
--- /dev/null
+++ b/app/soapbox/features/theme-editor/index.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import List, { ListItem } from 'soapbox/components/list';
+import { Column } from 'soapbox/components/ui';
+import { useSoapboxConfig } from 'soapbox/hooks';
+
+import Palette, { ColorGroup } from './components/palette';
+
+const messages = defineMessages({
+  title: { id: 'admin.theme.title', defaultMessage: 'Theme' },
+});
+
+interface IThemeEditor {
+}
+
+/** UI for editing Tailwind theme colors. */
+const ThemeEditor: React.FC<IThemeEditor> = () => {
+  const intl = useIntl();
+  const soapbox = useSoapboxConfig();
+  const colors = soapbox.colors.toJS();
+
+  return (
+    <Column label={intl.formatMessage(messages.title)}>
+      <List>
+        <PaletteListItem
+          label='Primary'
+          palette={colors.primary as any}
+        />
+
+        <PaletteListItem
+          label='Secondary'
+          palette={colors.secondary as any}
+        />
+
+        <PaletteListItem
+          label='Accent'
+          palette={colors.accent as any}
+        />
+
+        <PaletteListItem
+          label='Gray'
+          palette={colors.gray as any}
+        />
+
+        <PaletteListItem
+          label='Success'
+          palette={colors.success as any}
+        />
+
+        <PaletteListItem
+          label='Danger'
+          palette={colors.danger as any}
+        />
+      </List>
+    </Column>
+  );
+};
+
+interface IPaletteListItem {
+  label: React.ReactNode,
+  palette: ColorGroup,
+}
+
+/** Palette editor inside a ListItem. */
+const PaletteListItem: React.FC<IPaletteListItem> = ({ label, palette }) => {
+  return (
+    <ListItem label={<div className='w-20'>{label}</div>}>
+      <Palette palette={palette} />
+    </ListItem>
+  );
+};
+
+export default ThemeEditor;
\ No newline at end of file
diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx
index 08d96e920..c5a9bb422 100644
--- a/app/soapbox/features/ui/index.tsx
+++ b/app/soapbox/features/ui/index.tsx
@@ -112,6 +112,7 @@ import {
   TestTimeline,
   LogoutPage,
   AuthTokenList,
+  ThemeEditor,
 } from './util/async-components';
 import { WrappedRoute } from './util/react_router_helpers';
 
@@ -306,6 +307,7 @@ const SwitchingColumnsArea: React.FC = ({ children }) => {
       <WrappedRoute path='/soapbox/admin/reports' staffOnly page={AdminPage} component={Dashboard} content={children} exact />
       <WrappedRoute path='/soapbox/admin/log' staffOnly page={AdminPage} component={ModerationLog} content={children} exact />
       <WrappedRoute path='/soapbox/admin/users' staffOnly page={AdminPage} component={UserIndex} content={children} exact />
+      <WrappedRoute path='/soapbox/admin/theme' staffOnly page={AdminPage} component={ThemeEditor} content={children} exact />
       <WrappedRoute path='/info' page={EmptyPage} component={ServerInfo} content={children} />
 
       <WrappedRoute path='/developers/apps/create' developerOnly page={DefaultPage} component={CreateApp} content={children} />
diff --git a/app/soapbox/features/ui/util/async-components.ts b/app/soapbox/features/ui/util/async-components.ts
index f416c859a..84053f24a 100644
--- a/app/soapbox/features/ui/util/async-components.ts
+++ b/app/soapbox/features/ui/util/async-components.ts
@@ -310,6 +310,10 @@ export function ModerationLog() {
   return import(/* webpackChunkName: "features/admin/moderation_log" */'../../admin/moderation_log');
 }
 
+export function ThemeEditor() {
+  return import(/* webpackChunkName: "features/theme-editor" */'../../theme-editor');
+}
+
 export function UserPanel() {
   return import(/* webpackChunkName: "features/ui" */'../components/user_panel');
 }