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

src/components/common/AgeGate.tsx

@@ -11,8 +11,6 @@ import { Button, Checkbox } from "@revoltchat/ui";
 import { useApplicationState } from "../../mobx/State";
 import { SECTION_NSFW } from "../../mobx/stores/Layout";
 
-import { Children } from "../../types/Preact";
-
 const Base = styled.div`
     display: flex;
     flex-grow: 1;

src/components/common/CollapsibleSection.tsx

@@ -4,8 +4,6 @@ import { Details } from "@revoltchat/ui";
 
 import { useApplicationState } from "../../mobx/State";
 
-import { Children } from "../../types/Preact";
-
 interface Props {
     id: string;
     defaultValue: boolean;
@@ -34,7 +32,7 @@ export default function CollapsibleSection({
             }
             {...detailsProps}>
             <summary>
-                <div class="padding">
+                <div className="padding">
                     <ChevronDown size={20} />
                     {summary}
                 </div>

src/components/common/Emoji.tsx

@@ -73,7 +73,7 @@ export default function Emoji({
 }
 
 export function generateEmoji(emoji: string) {
-    return `<img loading="lazy" class="emoji" draggable="false" alt="${emoji}" src="${parseEmoji(
+    return `<img loading="lazy" className="emoji" draggable="false" alt="${emoji}" src="${parseEmoji(
         emoji,
     )}" />`;
 }

src/components/common/Tooltip.tsx

@@ -3,8 +3,6 @@ import styled from "styled-components/macro";
 
 import { Text } from "preact-i18n";
 
-import { Children } from "../../types/Preact";
-
 type Props = Omit<TippyProps, "children"> & {
     children: Children;
     content: Children;

src/components/common/UpdateIndicator.tsx

@@ -31,7 +31,7 @@ export default function UpdateIndicator({ style }: Props) {
 
     if (style === "titlebar") {
         return (
-            <div class="actions">
+            <div className="actions">
                 <Tooltip
                     content="A new update is available!"
                     placement="bottom">

src/components/common/messaging/Message.tsx

@@ -16,7 +16,6 @@ import { I18nError } from "../../../context/Locale";
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { useClient } from "../../../context/revoltjs/RevoltClient";
 
-import { Children } from "../../../types/Preact";
 import Markdown from "../../markdown/Markdown";
 import UserIcon from "../user/UserIcon";
 import { Username } from "../user/UserShort";

src/components/common/messaging/attachments/Grid.tsx

@@ -2,8 +2,6 @@ import styled from "styled-components/macro";
 
 import { Ref } from "preact";
 
-import { Children } from "../../../../types/Preact";
-
 const Grid = styled.div<{ width: number; height: number }>`
     --width: ${(props) => props.width}px;
     --height: ${(props) => props.height}px;

src/components/common/messaging/bars/FilePreview.tsx

@@ -149,12 +149,12 @@ function FileEntry({
                     <EmptyEntry className="icon">
                         <File size={36} />
                     </EmptyEntry>
-                    <div class="overlay">
+                    <div className="overlay">
                         <XCircle size={36} />
                     </div>
                 </PreviewBox>
-                <span class="fn">{file.name}</span>
-                <span class="size">{determineFileSize(file.size)}</span>
+                <span className="fn">{file.name}</span>
+                <span className="size">{determineFileSize(file.size)}</span>
             </Entry>
         );
 
@@ -169,13 +169,18 @@ function FileEntry({
     return (
         <Entry className={index >= CAN_UPLOAD_AT_ONCE ? "fade" : ""}>
             <PreviewBox onClick={remove}>
-                <img class="icon" src={url} alt={file.name} loading="eager" />
-                <div class="overlay">
+                <img
+                    className="icon"
+                    src={url}
+                    alt={file.name}
+                    loading="eager"
+                />
+                <div className="overlay">
                     <XCircle size={36} />
                 </div>
             </PreviewBox>
-            <span class="fn">{file.name}</span>
-            <span class="size">{determineFileSize(file.size)}</span>
+            <span className="fn">{file.name}</span>
+            <span className="size">{determineFileSize(file.size)}</span>
         </Entry>
     );
 }

src/components/common/messaging/bars/ReplyBar.tsx

@@ -152,11 +152,11 @@ export default observer(({ channel, replies, setReplies }: Props) => {
                 return (
                     <Base key={reply.id}>
                         <ReplyBase preview>
-                            <div class="replyto">
+                            <div className="replyto">
                                 <Text id="app.main.channel.reply.replying" />
                             </div>
-                            <div class="content">
-                                <div class="username">
+                            <div className="content">
+                                <div className="username">
                                     <UserShort
                                         size={16}
                                         showServerIdentity
@@ -164,7 +164,7 @@ export default observer(({ channel, replies, setReplies }: Props) => {
                                         masquerade={message.masquerade!}
                                     />
                                 </div>
-                                <div class="message">
+                                <div className="message">
                                     {message.attachments && (
                                         <>
                                             <File size={16} />
@@ -196,7 +196,7 @@ export default observer(({ channel, replies, setReplies }: Props) => {
                                 </div>
                             </div>
                         </ReplyBase>
-                        <span class="actions">
+                        <span className="actions">
                             {message.author_id !== client.user!._id && (
                                 <IconButton
                                     onClick={() => {
@@ -225,7 +225,7 @@ export default observer(({ channel, replies, setReplies }: Props) => {
                                         content={
                                             <Text id="app.main.channel.reply.toggle" />
                                         }>
-                                        <span class="toggle">
+                                        <span className="toggle">
                                             <At size={15} />
                                             <Text
                                                 id={

src/components/common/messaging/embed/EmbedMediaActions.tsx

@@ -20,7 +20,7 @@ export default function EmbedMediaActions({ embed }: Props) {
             </span>
             <a
                 href={embed.url}
-                class={styles.openIcon}
+                className={styles.openIcon}
                 target="_blank"
                 rel="noreferrer">
                 <IconButton>

src/components/common/user/UserHover.tsx

@@ -1,7 +1,6 @@
 import { User } from "revolt.js";
 import styled from "styled-components/macro";
 
-import { Children } from "../../../types/Preact";
 import Tooltip from "../Tooltip";
 import { Username } from "./UserShort";
 import UserStatus from "./UserStatus";

src/components/common/user/UserIcon.tsx

@@ -114,7 +114,7 @@ export default observer(
                     y="0"
                     width="32"
                     height="32"
-                    class="icon"
+                    className="icon"
                     mask={mask ?? (status ? "url(#user)" : undefined)}>
                     {<img src={url} draggable={false} loading="lazy" />}
                 </foreignObject>

src/components/markdown/Renderer.tsx

@@ -17,9 +17,8 @@ import { dayjs } from "../../context/Locale";
 import { useIntermediate } from "../../context/intermediate/Intermediate";
 import { AppContext } from "../../context/revoltjs/RevoltClient";
 
-import { generateEmoji } from "../common/Emoji";
-
 import { emojiDictionary } from "../../assets/emojis";
+import { generateEmoji } from "../common/Emoji";
 import { MarkdownProps } from "./Markdown";
 import Prism from "./prism";
 
@@ -49,10 +48,10 @@ export const md: MarkdownIt = MarkdownIt({
         const v = Prism.languages[lang];
         if (v) {
             const out = Prism.highlight(str, v, lang);
-            return `<pre class="code"><div class="lang"><div onclick="copycode(this)">${lang}</div></div><code class="language-${lang}">${out}</code></pre>`;
+            return `<pre className="code"><div className="lang"><div onclick="copycode(this)">${lang}</div></div><code className="language-${lang}">${out}</code></pre>`;
         }
 
-        return `<pre class="code"><code>${md.utils.escapeHtml(
+        return `<pre className="code"><code>${md.utils.escapeHtml(
             str,
         )}</code></pre>`;
     },

src/components/native/Titlebar.tsx

@@ -98,7 +98,7 @@ const TitlebarBase = styled.div<Props>`
 export function Titlebar(props: Props) {
     return (
         <TitlebarBase {...props}>
-            <div class="title">
+            <div className="title">
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 193.733 37.438">
@@ -114,7 +114,7 @@ export function Titlebar(props: Props) {
                     <Wrench size="12.5" />
                 )}
             </div>
-            {/*<div class="actions quick">
+            {/*<div className="actions quick">
                 <Tooltip
                     content="Mute"
                     placement="bottom">
@@ -130,9 +130,9 @@ export function Titlebar(props: Props) {
                     </div>
                 </Tooltip>
             </div>*/}
-            <div class="drag" />
+            <div className="drag" />
             <UpdateIndicator style="titlebar" />
-            <div class="actions">
+            <div className="actions">
                 <div onClick={window.native.min}>
                     <svg
                         aria-hidden="false"
@@ -164,7 +164,7 @@ export function Titlebar(props: Props) {
                         />
                     </svg>
                 </div>
-                <div onClick={window.native.close} class="error">
+                <div onClick={window.native.close} className="error">
                     <svg
                         aria-hidden="false"
                         width="12"

src/components/navigation/items/ButtonItem.tsx

@@ -15,7 +15,6 @@ import { stopPropagation } from "../../../lib/stopPropagation";
 
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 
-import { Children } from "../../../types/Preact";
 import ChannelIcon from "../../common/ChannelIcon";
 import Tooltip from "../../common/Tooltip";
 import UserIcon from "../../common/user/UserIcon";

src/components/navigation/right/Search.tsx

@@ -112,7 +112,7 @@ export function SearchSidebar({ close }: Props) {
                         onKeyDown={(e) => e.key === "Enter" && search()}
                         onChange={(e) => setQuery(e.currentTarget.value)}
                     />
-                    <div class="sort">
+                    <div className="sort">
                         {["Latest", "Oldest", "Relevance"].map((key) => (
                             <Button
                                 key={key}
@@ -127,7 +127,7 @@ export function SearchSidebar({ close }: Props) {
                     </div>
                     {state.type === "loading" && <Preloader type="ring" />}
                     {state.type === "results" && (
-                        <div class="list">
+                        <div className="list">
                             {state.results.map((message) => {
                                 let href = "";
                                 if (channel?.channel_type === "TextChannel") {
@@ -138,7 +138,7 @@ export function SearchSidebar({ close }: Props) {
 
                                 return (
                                     <Link to={href} key={message._id}>
-                                        <div class="message">
+                                        <div className="message">
                                             <Message
                                                 message={message}
                                                 head

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>

src/components/ui/Header.tsx

@@ -14,8 +14,6 @@ import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 import { useApplicationState } from "../../mobx/State";
 import { SIDEBAR_CHANNELS } from "../../mobx/stores/Layout";
 
-import { Children } from "../../types/Preact";
-
 interface Props {
     topBorder?: boolean;
     bottomBorder?: boolean;