Add prettier.

.prettierrc

@@ -0,0 +1 @@
+tabWidth: 4

package.json

@@ -4,7 +4,8 @@
     "dev": "vite",
     "build": "rimraf build && tsc && vite build",
     "serve": "vite preview",
-    "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'"
+    "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
+    "fmt": "prettier --write 'src/**/*.{js,jsx,ts,tsx}'"
   },
   "eslintConfig": {
     "parser": "@typescript-eslint/parser",
@@ -35,6 +36,7 @@
     "eslint": "^7.28.0",
     "eslint-config-preact": "^1.1.4",
     "preact-i18n": "^2.4.0-preactx",
+    "prettier": "^2.3.1",
     "react-overlapping-panels": "1.1.2-patch.0",
     "rimraf": "^3.0.2",
     "sass": "^1.35.1",

src/app.tsx

@@ -1,8 +1,7 @@
 export function App() {
-	return (
+    return (
-		<>
+        <>
-			<h1>REVOLT</h1>
+            <h1>REVOLT</h1>
-		</>
+        </>
-	)
+    );
 }
-	

src/components/ui/Banner.tsx

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 
 export default styled.div`
-	padding: 8px;
+    padding: 8px;
     font-size: 14px;
     text-align: center;
 

src/components/ui/Button.tsx

@@ -6,24 +6,24 @@ interface Props {
 }
 
 export default styled.button<Props>`
-	z-index: 1;
+    z-index: 1;
-	padding: 8px;
+    padding: 8px;
-	font-size: 16px;
+    font-size: 16px;
-	text-align: center;
+    text-align: center;
 
-	transition: 0.2s ease opacity;
+    transition: 0.2s ease opacity;
-	transition: 0.2s ease background-color;
+    transition: 0.2s ease background-color;
 
-	background: var(--primary-background);
+    background: var(--primary-background);
     color: var(--foreground);
 
-	border-radius: 6px;
+    border-radius: 6px;
-	cursor: pointer;
+    cursor: pointer;
     border: none;
 
-	&:hover {
+    &:hover {
-		background: var(--secondary-header);
+        background: var(--secondary-header);
-	}
+    }
 
     &:disabled {
         background: var(--primary-background);
@@ -33,33 +33,37 @@ export default styled.button<Props>`
         background: var(--secondary-background);
     }
 
-    ${props => props.contrast && css`
+    ${(props) =>
-        padding: 4px 8px;
+        props.contrast &&
-        background: var(--secondary-header);
+        css`
-
+            padding: 4px 8px;
-        &:hover {
-            background: var(--primary-header);
-        }
-
-        &:disabled {
             background: var(--secondary-header);
-        }
 
-        &:active {
+            &:hover {
-            background: var(--secondary-background);
+                background: var(--primary-header);
-        }
+            }
-    `}
 
-    ${props => props.error && css`
+            &:disabled {
-        color: white;
+                background: var(--secondary-header);
-        background: var(--error);
+            }
 
-        &:hover {
+            &:active {
-            filter: brightness(1.2)
+                background: var(--secondary-background);
-        }
+            }
+        `}
 
-        &:disabled {
+    ${(props) =>
+        props.error &&
+        css`
+            color: white;
             background: var(--error);
-        }
+
-    `}
+            &:hover {
+                filter: brightness(1.2);
+            }
+
+            &:disabled {
+                background: var(--error);
+            }
+        `}
 `;

src/components/ui/Checkbox.tsx

@@ -1,9 +1,9 @@
-import { Check } from '@styled-icons/feather';
+import { Check } from "@styled-icons/feather";
 import { Children } from "../../types/Preact";
-import styled, { css } from 'styled-components';
+import styled, { css } from "styled-components";
 
 const CheckboxBase = styled.label`
-	gap: 4px;
+    gap: 4px;
     z-index: 1;
     padding: 4px;
     display: flex;
@@ -13,8 +13,8 @@ const CheckboxBase = styled.label`
     cursor: pointer;
     font-size: 18px;
     user-select: none;
-    
+
-    transition: .2s ease all;
+    transition: 0.2s ease all;
 
     p {
         margin: 0;
@@ -53,9 +53,11 @@ const Checkmark = styled.div<{ checked: boolean }>`
         stroke-width: 2;
     }
 
-    ${ props => props.checked && css`
+    ${(props) =>
-        background: var(--accent);
+        props.checked &&
-    ` }
+        css`
+            background: var(--accent);
+        `}
 `;
 
 interface Props {
@@ -71,7 +73,7 @@ export default function Checkbox(props: Props) {
     return (
         <CheckboxBase disabled={props.disabled}>
             <CheckboxContent>
-                <span>{ props.children }</span>
+                <span>{props.children}</span>
                 {props.description && (
                     <CheckboxDescription>
                         {props.description}
@@ -89,5 +91,5 @@ export default function Checkbox(props: Props) {
                 <Check size={20} />
             </Checkmark>
         </CheckboxBase>
-    )
+    );
 }

src/components/ui/ColourSwatches.tsx

@@ -1,7 +1,7 @@
-import { useRef } from 'preact/hooks';
+import { useRef } from "preact/hooks";
-import { Check } from '@styled-icons/feather';
+import { Check } from "@styled-icons/feather";
-import styled, { css } from 'styled-components';
+import styled, { css } from "styled-components";
-import { Pencil } from '@styled-icons/bootstrap';
+import { Pencil } from "@styled-icons/bootstrap";
 
 interface Props {
     value: string;
@@ -17,7 +17,7 @@ const presets = [
         "#FF7F50",
         "#FD6671",
         "#E91E63",
-        "#D468EE"
+        "#D468EE",
     ],
     [
         "#594CAD",
@@ -27,8 +27,8 @@ const presets = [
         "#CD5B45",
         "#FF424F",
         "#AD1457",
-        "#954AA8"
+        "#954AA8",
-    ]
+    ],
 ];
 
 const SwatchesBase = styled.div`
@@ -43,35 +43,38 @@ const SwatchesBase = styled.div`
     }
 `;
 
-const Swatch = styled.div<{ type: 'small' | 'large', colour: string }>`
+const Swatch = styled.div<{ type: "small" | "large"; colour: string }>`
     flex-shrink: 0;
     cursor: pointer;
     border-radius: 4px;
-    background-color: ${ props => props.colour };
+    background-color: ${(props) => props.colour};
 
     display: grid;
     place-items: center;
 
     &:hover {
         border: 3px solid var(--foreground);
-        transition: border ease-in-out .07s;
+        transition: border ease-in-out 0.07s;
     }
 
     svg {
         color: white;
     }
 
-    ${ props => props.type === 'small' ? css`
+    ${(props) =>
-        width: 30px;
+        props.type === "small"
-        height: 30px;
+            ? css`
+                  width: 30px;
+                  height: 30px;
 
-        svg {
+                  svg {
-            stroke-width: 2;
+                      stroke-width: 2;
-        }
+                  }
-    ` : css`
+              `
-        width: 68px;
+            : css`
-        height: 68px;
+                  width: 68px;
-    ` }
+                  height: 68px;
+              `}
 `;
 
 const Rows = styled.div`
@@ -91,28 +94,37 @@ export default function ColourSwatches({ value, onChange }: Props) {
 
     return (
         <SwatchesBase>
-            <Swatch colour={value} type='large'
+            <Swatch
-                onClick={() => ref.current.click()}>
+                colour={value}
+                type="large"
+                onClick={() => ref.current.click()}
+            >
                 <Pencil size={32} />
             </Swatch>
             <input
                 type="color"
                 value={value}
                 ref={ref}
-                onChange={ev => onChange(ev.currentTarget.value)}
+                onChange={(ev) => onChange(ev.currentTarget.value)}
             />
             <Rows>
                 {presets.map((row, i) => (
                     <div key={i}>
-                        { row.map((swatch, i) => (
+                        {row.map((swatch, i) => (
-                            <Swatch colour={swatch} type='small' key={i}
+                            <Swatch
-                                onClick={() => onChange(swatch)}>
+                                colour={swatch}
-                                {swatch === value && <Check size={18} strokeWidth={2} />}
+                                type="small"
+                                key={i}
+                                onClick={() => onChange(swatch)}
+                            >
+                                {swatch === value && (
+                                    <Check size={18} strokeWidth={2} />
+                                )}
                             </Swatch>
-                        )) }
+                        ))}
                     </div>
                 ))}
             </Rows>
         </SwatchesBase>
-    )
+    );
 }

src/components/ui/ComboBox.tsx

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 
 export default styled.select`
-	padding: 8px;
+    padding: 8px;
     border-radius: 2px;
     color: var(--secondary-foreground);
     background: var(--secondary-background);

src/components/ui/InputBox.tsx

@@ -12,7 +12,7 @@ export default styled.input<Props>`
     border: 2px solid transparent;
     background: var(--primary-background);
     transition: 0.2s ease background-color;
-    transition: border-color .2s ease-in-out;
+    transition: border-color 0.2s ease-in-out;
 
     &:hover {
         background: var(--secondary-background);
@@ -22,12 +22,14 @@ export default styled.input<Props>`
         border: 2px solid var(--accent);
     }
 
-    ${ props => props.contrast && css`
+    ${(props) =>
-        color: var(--secondary-foreground);
+        props.contrast &&
-        background: var(--secondary-background);
+        css`
+            color: var(--secondary-foreground);
+            background: var(--secondary-background);
 
-        &:hover {
+            &:hover {
-            background: var(--hover);
+                background: var(--hover);
-        }
+            }
-    ` }
+        `}
 `;

src/components/ui/LineDivider.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from "styled-components";
 
 export default styled.div`
     height: 0px;

src/components/ui/Overline.tsx

@@ -1,5 +1,5 @@
-import styled, { css } from 'styled-components';
+import styled, { css } from "styled-components";
-import { Children } from '../../types/Preact';
+import { Children } from "../../types/Preact";
 
 interface Props {
     block?: boolean;
@@ -8,7 +8,7 @@ interface Props {
     type?: "default" | "subtle" | "error";
 }
 
-const OverlineBase = styled.div<Omit<Props, 'children' | 'error'>>`
+const OverlineBase = styled.div<Omit<Props, "children" | "error">>`
     display: inline;
     margin: 0.4em 0;
     margin-top: 0.8em;
@@ -18,30 +18,34 @@ const OverlineBase = styled.div<Omit<Props, 'children' | 'error'>>`
     color: var(--foreground);
     text-transform: uppercase;
 
-    ${ props => props.type === 'subtle' && css`
+    ${(props) =>
-        font-size: 12px;
+        props.type === "subtle" &&
-        color: var(--secondary-foreground);
+        css`
-    ` }
+            font-size: 12px;
+            color: var(--secondary-foreground);
+        `}
 
-    ${ props => props.type === 'error' && css`
+    ${(props) =>
-        font-size: 12px;
+        props.type === "error" &&
-        font-weight: 400;
+        css`
-        color: var(--error);
+            font-size: 12px;
-    ` }
+            font-weight: 400;
+            color: var(--error);
+        `}
 
-    ${ props => props.block && css`display: block;` }
+    ${(props) =>
+        props.block &&
+        css`
+            display: block;
+        `}
 `;
 
 export default function Overline(props: Props) {
     return (
         <OverlineBase {...props}>
-            { props.children }
+            {props.children}
-            { props.children && props.error && <> &middot; </> }
+            {props.children && props.error && <> &middot; </>}
-            { props.error && (
+            {props.error && <Overline type="error">{props.error}</Overline>}
-                <Overline type="error">
-                    { props.error }
-                </Overline>
-            ) }
         </OverlineBase>
-    )
+    );
 }

src/components/ui/Preloader.tsx

@@ -1,3 +1,3 @@
 export default function Preloader() {
-    return <span>LOADING</span>
+    return <span>LOADING</span>;
 }

src/components/ui/Radio.tsx

@@ -1,18 +1,18 @@
 import { Children } from "../../types/Preact";
-import styled, { css } from 'styled-components';
+import styled, { css } from "styled-components";
 import { CircleFill } from "@styled-icons/bootstrap";
 
 interface Props {
     children: Children;
     description?: Children;
-    
+
     checked: boolean;
     disabled?: boolean;
     onSelect: () => void;
 }
 
 interface BaseProps {
-    selected: boolean
+    selected: boolean;
 }
 
 const RadioBase = styled.label<BaseProps>`
@@ -22,12 +22,12 @@ const RadioBase = styled.label<BaseProps>`
     display: flex;
     cursor: pointer;
     align-items: center;
-    
+
     font-size: 1rem;
     font-weight: 600;
     user-select: none;
     border-radius: 4px;
-    transition: .2s ease all;
+    transition: 0.2s ease all;
 
     &:hover {
         background: var(--hover);
@@ -52,23 +52,25 @@ const RadioBase = styled.label<BaseProps>`
         }
     }
 
-    ${ props => props.selected && css`
+    ${(props) =>
-        color: white;
+        props.selected &&
-        cursor: default;
+        css`
-        background: var(--accent);
+            color: white;
-
+            cursor: default;
-        > div {
-            background: white;
-        }
-
-        > div svg {
-            color: var(--accent);
-        }
-
-        &:hover {
             background: var(--accent);
-        }
+
-    ` }
+            > div {
+                background: white;
+            }
+
+            > div svg {
+                color: var(--accent);
+            }
+
+            &:hover {
+                background: var(--accent);
+            }
+        `}
 `;
 
 const RadioDescription = styled.span<BaseProps>`
@@ -76,9 +78,11 @@ const RadioDescription = styled.span<BaseProps>`
     font-weight: 400;
     color: var(--secondary-foreground);
 
-    ${ props => props.selected && css`
+    ${(props) =>
-        color: white;
+        props.selected &&
-    ` }
+        css`
+            color: white;
+        `}
 `;
 
 export default function Radio(props: Props) {
@@ -86,15 +90,14 @@ export default function Radio(props: Props) {
         <RadioBase
             selected={props.checked}
             disabled={props.disabled}
-            onClick={() => !props.disabled && props.onSelect && props.onSelect()}
+            onClick={() =>
+                !props.disabled && props.onSelect && props.onSelect()
+            }
         >
             <div>
                 <CircleFill size={12} />
             </div>
-            <input
+            <input type="radio" checked={props.checked} />
-                type="radio"
-                checked={props.checked}
-            />
             <span>
                 <span>{props.children}</span>
                 {props.description && (
@@ -105,4 +108,4 @@ export default function Radio(props: Props) {
             </span>
         </RadioBase>
     );
-}
+}

src/components/ui/Tip.tsx

@@ -3,7 +3,7 @@ import { Info } from "@styled-icons/feather";
 import { Children } from "../../types/Preact";
 
 export const TipBase = styled.div`
-	display: flex;
+    display: flex;
     padding: 12px;
     overflow: hidden;
     align-items: center;
@@ -19,7 +19,7 @@ export const TipBase = styled.div`
             text-decoration: underline;
         }
     }
-    
+
     svg {
         flex-shrink: 0;
         margin-right: 10px;
@@ -30,7 +30,7 @@ export default function Tip(props: { children: Children }) {
     return (
         <TipBase>
             <Info size={20} strokeWidth={2} />
-            <span>{ props.children }</span>
+            <span>{props.children}</span>
         </TipBase>
-    )
+    );
 }

src/context/Locale.tsx

@@ -2,13 +2,9 @@ import { IntlProvider } from "preact-i18n";
 import definition from "../../external/lang/en.json";
 
 interface Props {
-    children: JSX.Element | JSX.Element[]
+    children: JSX.Element | JSX.Element[];
 }
 
 export default function Locale({ children }: Props) {
-    return (
+    return <IntlProvider definition={definition}>{children}</IntlProvider>;
-        <IntlProvider definition={definition}>
-            { children }
-        </IntlProvider>
-    )
 }

src/context/Theme.tsx

@@ -1,17 +1,41 @@
 import { createGlobalStyle } from "styled-components";
 
 // ! TEMP START
-const a = {light:false,accent:"#FD6671",background:"#191919",foreground:"#F6F6F6",block:"#2D2D2D","message-box":"#363636",mention:"rgba(251, 255, 0, 0.06)",success:"#65E572",warning:"#FAA352",error:"#F06464",hover:"rgba(0, 0, 0, 0.1)","sidebar-active":"#FD6671","scrollbar-thumb":"#CA525A","scrollbar-track":"transparent","primary-background":"#242424","primary-header":"#363636","secondary-background":"#1E1E1E","secondary-foreground":"#C8C8C8","secondary-header":"#2D2D2D","tertiary-background":"#4D4D4D","tertiary-foreground":"#848484","status-online":"#3ABF7E","status-away":"#F39F00","status-busy":"#F84848","status-streaming":"#977EFF","status-invisible":"#A5A5A5"};
+const a = {
+    light: false,
+    accent: "#FD6671",
+    background: "#191919",
+    foreground: "#F6F6F6",
+    block: "#2D2D2D",
+    "message-box": "#363636",
+    mention: "rgba(251, 255, 0, 0.06)",
+    success: "#65E572",
+    warning: "#FAA352",
+    error: "#F06464",
+    hover: "rgba(0, 0, 0, 0.1)",
+    "sidebar-active": "#FD6671",
+    "scrollbar-thumb": "#CA525A",
+    "scrollbar-track": "transparent",
+    "primary-background": "#242424",
+    "primary-header": "#363636",
+    "secondary-background": "#1E1E1E",
+    "secondary-foreground": "#C8C8C8",
+    "secondary-header": "#2D2D2D",
+    "tertiary-background": "#4D4D4D",
+    "tertiary-foreground": "#848484",
+    "status-online": "#3ABF7E",
+    "status-away": "#F39F00",
+    "status-busy": "#F84848",
+    "status-streaming": "#977EFF",
+    "status-invisible": "#A5A5A5",
+};
 
 export const GlobalTheme = createGlobalStyle`
 :root {
-	${
+	${Object.keys(a).map((key) => {
-		Object.keys(a)
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-			.map(key => {
+        return `--${key}: ${(a as any)[key]};`;
-				// eslint-disable-next-line @typescript-eslint/no-explicit-any
+    })}
-				return `--${key}: ${(a as any)[key]};`;
-			})
-	}
 }
 `;
 // ! TEMP END

src/main.tsx

@@ -1,6 +1,6 @@
-import { render } from 'preact'
+import { render } from "preact";
-import '../styles/index.scss'
+import "../styles/index.scss";
-import { App } from './app'
+import { App } from "./app";
 
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-render(<App />, document.getElementById('app')!)
+render(<App />, document.getElementById("app")!);

src/preact.d.ts

@@ -1,2 +1,2 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import JSX = preact.JSX
+import JSX = preact.JSX;

src/types/Preact.ts

@@ -1,3 +1,3 @@
-import { VNode } from 'preact';
+import { VNode } from "preact";
 
 export type Children = VNode | (VNode | string)[] | string;

yarn.lock

@@ -1751,6 +1751,11 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
+prettier@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.1.tgz#76903c3f8c4449bc9ac597acefa24dc5ad4cbea6"
+  integrity sha512-p+vNbgpLjif/+D+DwAZAbndtRrR0md0MwfmOVN9N+2RgyACMT+7tfaRnT+WDPkqnuVwleyuBIG2XBxKDme3hPA==
+
 progress@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"