From fb2a8d9ac306abf9d12e1da2a9f8a733cdae8b6d Mon Sep 17 00:00:00 2001
From: Aylong <69762909+AyIong@users.noreply.github.com>
Date: Mon, 15 Apr 2024 02:33:54 +0300
Subject: [PATCH] Makes TGchat General settings better (#82652)

## About The Pull Request
Removes dropdowns from General settings tab into TGchat
Replace it with map() and Collapsible

| Before | After |
| - | - |
|
![image](https://github.com/tgstation/tgstation/assets/69762909/b9956aef-3c99-4ec0-b7bd-d23db75a9c71)
|
![image](https://github.com/tgstation/tgstation/assets/69762909/35504396-99a7-402c-97b6-3496013d9b2b)
|

## Why It's Good For The Game
Dropdowns sucks. At least in TGchat settings, it's not the first time
they've been broken, but now it's trivially extremely inconvenient.
Now, it's faster to change the theme/font, plus a font preview has been
added, as it was before with GoonChat

<details>
<summary>Video</summary>


https://github.com/tgstation/tgstation/assets/69762909/b440db53-e78e-4440-ba33-b8e7ecade00a
</details>



## Changelog

:cl:
qol: General settings tab into TGchat, looks better now, and is more
convenient to use. Also, each button has a font written on it.
/:cl:
---
 .../tgui-panel/settings/SettingsPanel.jsx     | 107 +++++++++++-------
 1 file changed, 66 insertions(+), 41 deletions(-)

diff --git a/tgui/packages/tgui-panel/settings/SettingsPanel.jsx b/tgui/packages/tgui-panel/settings/SettingsPanel.jsx
index 130f59d8053..e5691037bba 100644
--- a/tgui/packages/tgui-panel/settings/SettingsPanel.jsx
+++ b/tgui/packages/tgui-panel/settings/SettingsPanel.jsx
@@ -5,14 +5,15 @@
  */
 
 import { toFixed } from 'common/math';
+import { capitalize } from 'common/string';
 import { useLocalState } from 'tgui/backend';
 import { useDispatch, useSelector } from 'tgui/backend';
 import {
   Box,
   Button,
+  Collapsible,
   ColorBox,
   Divider,
-  Dropdown,
   Input,
   LabeledList,
   NumberInput,
@@ -84,37 +85,62 @@ export const SettingsGeneral = (props) => {
     <Section>
       <LabeledList>
         <LabeledList.Item label="Theme">
-          <Dropdown
-            selected={theme}
-            options={THEMES}
-            onSelected={(value) =>
-              dispatch(
-                updateSettings({
-                  theme: value,
-                }),
-              )
-            }
-          />
+          {THEMES.map((THEME) => (
+            <Button
+              key={THEME}
+              content={capitalize(THEME)}
+              selected={theme === THEME}
+              color="transparent"
+              onClick={() =>
+                dispatch(
+                  updateSettings({
+                    theme: THEME,
+                  }),
+                )
+              }
+            />
+          ))}
         </LabeledList.Item>
         <LabeledList.Item label="Font style">
-          <Stack inline align="baseline">
-            <Stack.Item>
-              {(!freeFont && (
-                <Dropdown
-                  selected={fontFamily}
-                  options={FONTS}
-                  onSelected={(value) =>
-                    dispatch(
-                      updateSettings({
-                        fontFamily: value,
-                      }),
-                    )
-                  }
-                />
-              )) || (
+          <Stack.Item>
+            {(!freeFont && (
+              <Collapsible
+                title={fontFamily}
+                width={'100%'}
+                buttons={
+                  <Button
+                    content="Custom font"
+                    icon={freeFont ? 'lock-open' : 'lock'}
+                    color={freeFont ? 'good' : 'bad'}
+                    onClick={() => {
+                      setFreeFont(!freeFont);
+                    }}
+                  />
+                }
+              >
+                {FONTS.map((FONT) => (
+                  <Button
+                    key={FONT}
+                    content={FONT}
+                    fontFamily={FONT}
+                    selected={fontFamily === FONT}
+                    color="transparent"
+                    onClick={() =>
+                      dispatch(
+                        updateSettings({
+                          fontFamily: FONT,
+                        }),
+                      )
+                    }
+                  />
+                ))}
+              </Collapsible>
+            )) || (
+              <Stack>
                 <Input
+                  width={'100%'}
                   value={fontFamily}
-                  onChange={(e, value) =>
+                  onChange={(value) =>
                     dispatch(
                       updateSettings({
                         fontFamily: value,
@@ -122,19 +148,18 @@ export const SettingsGeneral = (props) => {
                     )
                   }
                 />
-              )}
-            </Stack.Item>
-            <Stack.Item>
-              <Button
-                content="Custom font"
-                icon={freeFont ? 'lock-open' : 'lock'}
-                color={freeFont ? 'good' : 'bad'}
-                onClick={() => {
-                  setFreeFont(!freeFont);
-                }}
-              />
-            </Stack.Item>
-          </Stack>
+                <Button
+                  ml={0.5}
+                  content="Custom font"
+                  icon={freeFont ? 'lock-open' : 'lock'}
+                  color={freeFont ? 'good' : 'bad'}
+                  onClick={() => {
+                    setFreeFont(!freeFont);
+                  }}
+                />
+              </Stack>
+            )}
+          </Stack.Item>
         </LabeledList.Item>
         <LabeledList.Item label="Font size">
           <NumberInput