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 className="fn">{file.name}</span>
-                <span class="size">{determineFileSize(file.size)}</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" />
+                <img
-                <div class="overlay">
+                    className="icon"
+                    src={url}
+                    alt={file.name}
+                    loading="eager"
+                />
+                <div className="overlay">
                     <XCircle size={36} />
                 </div>
             </PreviewBox>
-            <span class="fn">{file.name}</span>
+            <span className="fn">{file.name}</span>
-            <span class="size">{determineFileSize(file.size)}</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 className="content">
-                                <div class="username">
+                                <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;

src/context/index.tsx

@@ -13,7 +13,6 @@ import {
 
 import { hydrateState } from "../mobx/State";
 
-import { Children } from "../types/Preact";
 import Locale from "./Locale";
 import Theme from "./Theme";
 import Intermediate from "./intermediate/Intermediate";

src/context/intermediate/Intermediate.tsx

@@ -12,7 +12,6 @@ import { determineLink } from "../../lib/links";
 
 import { useApplicationState } from "../../mobx/State";
 
-import { Children } from "../../types/Preact";
 import Modals from "./Modals";
 
 export type Screen =

src/context/intermediate/modals/Input.tsx

@@ -6,7 +6,6 @@ import { useContext, useState } from "preact/hooks";
 
 import { Category, InputBox, Modal } from "@revoltchat/ui";
 
-import { Children } from "../../../types/Preact";
 import { I18nError } from "../../Locale";
 import { AppContext } from "../../revoltjs/RevoltClient";
 import { takeError } from "../../revoltjs/util";

src/context/intermediate/modals/Prompt.tsx

@@ -14,7 +14,6 @@ import { TextReact } from "../../../lib/i18n";
 
 import Message from "../../../components/common/messaging/Message";
 import UserIcon from "../../../components/common/user/UserIcon";
-import { Children } from "../../../types/Preact";
 import { I18nError } from "../../Locale";
 import { AppContext } from "../../revoltjs/RevoltClient";
 import { takeError } from "../../revoltjs/util";

src/context/revoltjs/CheckAuth.tsx

@@ -2,7 +2,6 @@ import { Redirect } from "react-router-dom";
 
 import { useApplicationState } from "../../mobx/State";
 
-import { Children } from "../../types/Preact";
 import { useClient } from "./RevoltClient";
 
 interface Props {

src/context/revoltjs/RequiresOnline.tsx

@@ -6,7 +6,6 @@ import { useContext } from "preact/hooks";
 
 import { Preloader } from "@revoltchat/ui";
 
-import { Children } from "../../types/Preact";
 import { ClientStatus, StatusContext } from "./RevoltClient";
 
 interface Props {

src/context/revoltjs/RevoltClient.tsx

@@ -9,7 +9,6 @@ import { Preloader } from "@revoltchat/ui";
 
 import { useApplicationState } from "../../mobx/State";
 
-import { Children } from "../../types/Preact";
 import { useIntermediate } from "../intermediate/Intermediate";
 import { registerEvents } from "./events";
 import { takeError } from "./util";

src/context/revoltjs/util.tsx

@@ -2,8 +2,6 @@ import { Channel } from "revolt.js";
 
 import { Text } from "preact-i18n";
 
-import { Children } from "../../types/Preact";
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function takeError(error: any): string {
     if (error.response) {

src/lib/ContextMenus.tsx

@@ -30,7 +30,6 @@ import CMNotifications from "./contextmenu/CMNotifications";
 
 import Tooltip from "../components/common/Tooltip";
 import UserStatus from "../components/common/user/UserStatus";
-import { Children } from "../types/Preact";
 import { internalEmit } from "./eventEmitter";
 import { getRenderer } from "./renderer/Singleton";
 

src/lib/ErrorBoundary.tsx

@@ -6,7 +6,6 @@ import styled from "styled-components/macro";
 import { useEffect, useErrorBoundary, useState } from "preact/hooks";
 
 import { GIT_REVISION } from "../revision";
-import { Children } from "../types/Preact";
 
 const CrashContainer = styled.div`
     height: 100%;

src/lib/FakeClient.tsx

@@ -6,8 +6,6 @@ import { useApplicationState } from "../mobx/State";
 
 import { AppContext } from "../context/revoltjs/RevoltClient";
 
-import { Children } from "../types/Preact";
-
 export default observer(({ children }: { children: Children }) => {
     const config = useApplicationState().config;
     const client = useMemo(() => config.createClient(), [config.get()]);

src/lib/contextmenu/CMNotifications.tsx

@@ -20,8 +20,6 @@ import { LineDivider } from "@revoltchat/ui";
 import { useApplicationState } from "../../mobx/State";
 import { NotificationState } from "../../mobx/stores/NotificationOptions";
 
-import { Children } from "../../types/Preact";
-
 interface Action {
     key: string;
     type: "channel" | "server";

src/lib/i18n.tsx

@@ -3,8 +3,6 @@ import { useContext } from "preact/hooks";
 
 import { Dictionary } from "../context/Locale";
 
-import { Children } from "../types/Preact";
-
 interface Fields {
     [key: string]: Children;
 }

src/pages/RevoltApp.tsx

@@ -119,7 +119,7 @@ export default function App() {
             {statusBar && (
                 <StatusBar>
                     <div className="title">Partial outage: CDN</div>
-                    <div class="actions">
+                    <div className="actions">
                         <Link to="/invite/Testers">
                             <a>
                                 <div className="button">Updates</div>

src/pages/channels/messaging/MessageRenderer.tsx

@@ -24,7 +24,6 @@ import { useClient } from "../../../context/revoltjs/RevoltClient";
 
 import Message from "../../../components/common/messaging/Message";
 import { SystemMessage } from "../../../components/common/messaging/SystemMessage";
-import { Children } from "../../../types/Preact";
 import ConversationStart from "./ConversationStart";
 import MessageEditor from "./MessageEditor";
 

src/pages/friends/Friend.tsx

@@ -18,7 +18,6 @@ import { useIntermediate } from "../../context/intermediate/Intermediate";
 
 import UserIcon from "../../components/common/user/UserIcon";
 import UserStatus from "../../components/common/user/UserStatus";
-import { Children } from "../../types/Preact";
 
 interface Props {
     user: User;

src/pages/friends/Friends.tsx

@@ -19,7 +19,6 @@ import CollapsibleSection from "../../components/common/CollapsibleSection";
 import Tooltip from "../../components/common/Tooltip";
 import UserIcon from "../../components/common/user/UserIcon";
 import { PageHeader } from "../../components/ui/Header";
-import { Children } from "../../types/Preact";
 import { Friend } from "./Friend";
 
 export default observer(() => {
@@ -201,7 +200,7 @@ export default observer(() => {
                                 sticky
                                 large
                                 summary={
-                                    <div class="title">
+                                    <div className="title">
                                         <Text id={i18n} /> — {list.length}
                                     </div>
                                 }>

src/pages/home/Home.tsx

@@ -77,9 +77,9 @@ export default observer(() => {
         <div className={styles.home}>
             <Overlay>
                 {seasonalTheme && (
-                    <div class="snowfall">
+                    <div className="snowfall">
                         {snowflakes.map((emoji, index) => (
-                            <div key={index} class="snowflake">
+                            <div key={index} className="snowflake">
                                 {emoji}
                             </div>
                         ))}

src/pages/settings/GenericSettings.tsx

@@ -14,7 +14,6 @@ import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 import { useApplicationState } from "../../mobx/State";
 
 import ButtonItem from "../../components/navigation/items/ButtonItem";
-import { Children } from "../../types/Preact";
 
 interface Props {
     pages: {

src/pages/settings/panes/Audio.tsx

@@ -93,7 +93,7 @@ export function Audio() {
 
     return (
         <>
-            <div class={styles.audio}>
+            <div className={styles.audio}>
                 {!permission && (
                     <Tip palette="error">
                         <Text id="app.settings.pages.audio.tip_grant_permission" />
@@ -115,7 +115,7 @@ export function Audio() {
                         <h3>
                             <Text id="app.settings.pages.audio.input_device" />
                         </h3>
-                        <div class={styles.audioBox}>
+                        <div className={styles.audioBox}>
                             <ComboBox
                                 value={
                                     window.localStorage.getItem(

src/pages/settings/panes/Sessions.tsx

@@ -171,7 +171,7 @@ export function Sessions() {
                                         type="text"
                                         className={styles.name}
                                         value={session.name}
-                                        autocomplete="off"
+                                        autoComplete="off"
                                         style={{ pointerEvents: "none" }}
                                     />
                                     <span className={styles.time}>

src/pages/settings/server/Bans.tsx

@@ -38,8 +38,7 @@ const Inner = observer(({ ban, users, server, removeSelf }: InnerProps) => {
                 onClick={() => {
                     setDelete(true);
                     server.unbanUser(ban._id.user).then(removeSelf);
-                }}
+                }}>
-                disabled={deleting}>
                 <XCircle size={24} />
             </IconButton>
         </div>
@@ -100,7 +99,7 @@ export const Bans = observer(({ server }: Props) => {
                 <span>
                     <Text id="app.settings.server_pages.bans.user" />
                 </span>
-                <span class={styles.reason}>
+                <span className={styles.reason}>
                     <Text id="app.settings.server_pages.bans.reason" />
                 </span>
                 <span>

src/pages/settings/server/Categories.tsx

@@ -292,7 +292,7 @@ export const Categories = observer(({ server }: Props) => {
                                         />
                                     ))}
                                     <KanbanList last>
-                                        <div class="inner">
+                                        <div className="inner">
                                             <KanbanListHeader
                                                 onClick={() =>
                                                     setCategories([
@@ -369,7 +369,7 @@ function ListElement({
             {(provided) => (
                 <div {...provided.draggableProps} ref={provided.innerRef}>
                     <KanbanList last={false} key={category.id}>
-                        <div class="inner">
+                        <div className="inner">
                             <Row>
                                 <KanbanListHeader {...provided.dragHandleProps}>
                                     {editing ? (
@@ -422,7 +422,7 @@ function ListElement({
                                                                 provided.innerRef
                                                             }>
                                                             <KanbanEntry>
-                                                                <div class="inner">
+                                                                <div className="inner">
                                                                     <ChannelIcon
                                                                         target={
                                                                             channel

src/pages/settings/server/Invites.tsx

@@ -38,8 +38,7 @@ const Inner = observer(({ invite, server, removeSelf }: InnerProps) => {
                 onClick={() => {
                     setDelete(true);
                     server.client.deleteInvite(invite._id).then(removeSelf);
-                }}
+                }}>
-                disabled={deleting}>
                 <XCircle size={24} />
             </IconButton>
         </div>

src/pages/settings/server/Members.tsx

@@ -61,7 +61,7 @@ const Inner = observer(({ member }: InnerProps) => {
                                 title={
                                     <span
                                         style={{
-                                            color: role.colour,
+                                            color: role.colour!,
                                         }}>
                                         {role.name}
                                     </span>

src/pages/settings/server/Overview.tsx

@@ -138,7 +138,7 @@ export const Overview = observer(({ server }: Props) => {
                         gap: "8px",
                         alignItems: "center",
                     }}>
-                    <span style={{ flexShrink: "0", flex: `25%` }}>{i18n}</span>
+                    <span style={{ flexShrink: 0, flex: `25%` }}>{i18n}</span>
                     <ComboBox
                         value={
                             systemMessages?.[

src/preact.d.ts

@@ -1,2 +0,0 @@
-/* eslint-disable */
-import JSX = preact.JSX;

src/types/Preact.ts

@@ -1,4 +0,0 @@
-import { VNode } from "preact";
-
-export type Child = VNode | string | number | boolean | undefined | null;
-export type Children = Child | Child[] | Children[];

src/types/preact.d.ts

@@ -0,0 +1,13 @@
+/* eslint-disable */
+import JSX = preact.JSX;
+
+declare type Child =
+    | JSX.Element
+    | preact.VNode
+    | string
+    | number
+    | boolean
+    | undefined
+    | null;
+
+declare type Children = Child | Child[] | Children[];