chore(refactor): move and re-organise types folder

src/components/settings/appearance/EmojiSelector.tsx

@@ -2,12 +2,13 @@ import styled from "styled-components/macro";
 
 import { Text } from "preact-i18n";
 
-import { EmojiPack } from "../../common/Emoji";
 import mutantSVG from "./mutant_emoji.svg";
 import notoSVG from "./noto_emoji.svg";
 import openmojiSVG from "./openmoji_emoji.svg";
 import twemojiSVG from "./twemoji_emoji.svg";
 
+import { EmojiPack } from "../../common/Emoji";
+
 const Container = styled.div`
     gap: 12px;
     display: flex;
@@ -87,10 +88,10 @@ export function EmojiSelector({ value, setValue }: Props) {
                 <Text id="app.settings.pages.appearance.emoji_pack" />
             </h3>
             <Container>
-                <div class="row">
+                <div className="row">
                     <div>
                         <div
-                            class="button"
+                            className="button"
                             onClick={() => setValue("mutant")}
                             data-active={!value || value === "mutant"}>
                             <img
@@ -112,7 +113,7 @@ export function EmojiSelector({ value, setValue }: Props) {
                     </div>
                     <div>
                         <div
-                            class="button"
+                            className="button"
                             onClick={() => setValue("twemoji")}
                             data-active={value === "twemoji"}>
                             <img
@@ -125,10 +126,10 @@ export function EmojiSelector({ value, setValue }: Props) {
                         <h4>Twemoji</h4>
                     </div>
                 </div>
-                <div class="row">
+                <div className="row">
                     <div>
                         <div
-                            class="button"
+                            className="button"
                             onClick={() => setValue("openmoji")}
                             data-active={value === "openmoji"}>
                             <img
@@ -142,7 +143,7 @@ export function EmojiSelector({ value, setValue }: Props) {
                     </div>
                     <div>
                         <div
-                            class="button"
+                            className="button"
                             onClick={() => setValue("noto")}
                             data-active={value === "noto"}>
                             <img

src/components/settings/appearance/ThemeOverrides.tsx

@@ -117,10 +117,10 @@ export default observer(() => {
                 ] as const
             ).map((key) => (
                 <div
-                    class="entry"
+                    className="entry"
                     key={key}
                     style={{ backgroundColor: theme.getVariable(key) }}>
-                    <div class="input">
+                    <div className="input">
                         <input
                             type="color"
                             value={theme.getVariable(key)}
@@ -141,9 +141,9 @@ export default observer(() => {
                         }}>
                         {key}
                     </span>
-                    <div class="override">
+                    <div className="override">
                         <div
-                            class="picker"
+                            className="picker"
                             onClick={(e) =>
                                 e.currentTarget.parentElement?.parentElement
                                     ?.querySelector("input")
@@ -153,7 +153,7 @@ export default observer(() => {
                         </div>
                         <InputBox
                             type="text"
-                            class="text"
+                            className="text"
                             value={theme.getVariable(key)}
                             onChange={(el) =>
                                 setVariable({

src/components/settings/appearance/ThemeTools.tsx

@@ -55,7 +55,7 @@ export default function ThemeTools() {
                 </Button>
             </Tooltip>
             <div
-                class="code"
+                className="code"
                 onClick={() => writeClipboard(JSON.stringify(theme))}>
                 <Tooltip content={<Text id="app.special.copy" />}>
                     {" "}

src/components/settings/roles/PermissionSelect.tsx

@@ -117,12 +117,12 @@ export function PermissionSelect({
 
     return (
         <PermissionEntry disabled={disabled}>
-            <span class="title">
+            <span className="title">
                 <span>
                     <Text id={`permissions.${id}.t`}>{id}</Text>
                     {disabled && <Lock className="lock" size={14} />}
                 </span>
-                <span class="description">
+                <span className="description">
                     <Text id={`permissions.${id}.d`} />
                 </span>
             </span>