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

@@ -3,6 +3,5 @@ export function App() {
         <>
             <h1>REVOLT</h1>
         </>
-	)
+    );
 }
-	

src/components/ui/Button.tsx

@@ -33,7 +33,9 @@ export default styled.button<Props>`
         background: var(--secondary-background);
     }
 
-    ${props => props.contrast && css`
+    ${(props) =>
+        props.contrast &&
+        css`
             padding: 4px 8px;
             background: var(--secondary-header);
 
@@ -50,12 +52,14 @@ export default styled.button<Props>`
             }
         `}
 
-    ${props => props.error && css`
+    ${(props) =>
+        props.error &&
+        css`
             color: white;
             background: var(--error);
 
             &:hover {
-            filter: brightness(1.2)
+                filter: brightness(1.2);
             }
 
             &:disabled {

src/components/ui/Checkbox.tsx

@@ -1,6 +1,6 @@
-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;
@@ -14,7 +14,7 @@ const CheckboxBase = styled.label`
     font-size: 18px;
     user-select: none;
 
-    transition: .2s ease all;
+    transition: 0.2s ease all;
 
     p {
         margin: 0;
@@ -53,7 +53,9 @@ const Checkmark = styled.div<{ checked: boolean }>`
         stroke-width: 2;
     }
 
-    ${ props => props.checked && css`
+    ${(props) =>
+        props.checked &&
+        css`
             background: var(--accent);
         `}
 `;
@@ -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,32 +43,35 @@ 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) =>
+        props.type === "small"
+            ? css`
                   width: 30px;
                   height: 30px;
 
                   svg {
                       stroke-width: 2;
                   }
-    ` : css`
+              `
+            : css`
                   width: 68px;
                   height: 68px;
               `}
@@ -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) => (
-                            <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/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,7 +22,9 @@ export default styled.input<Props>`
         border: 2px solid var(--accent);
     }
 
-    ${ props => props.contrast && css`
+    ${(props) =>
+        props.contrast &&
+        css`
             color: var(--secondary-foreground);
             background: var(--secondary-background);
 

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,18 +18,26 @@ const OverlineBase = styled.div<Omit<Props, 'children' | 'error'>>`
     color: var(--foreground);
     text-transform: uppercase;
 
-    ${ props => props.type === 'subtle' && css`
+    ${(props) =>
+        props.type === "subtle" &&
+        css`
             font-size: 12px;
             color: var(--secondary-foreground);
         `}
 
-    ${ props => props.type === 'error' && css`
+    ${(props) =>
+        props.type === "error" &&
+        css`
             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) {
@@ -37,11 +45,7 @@ export default function Overline(props: Props) {
         <OverlineBase {...props}>
             {props.children}
             {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,5 +1,5 @@
 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 {
@@ -12,7 +12,7 @@ interface Props {
 }
 
 interface BaseProps {
-    selected: boolean
+    selected: boolean;
 }
 
 const RadioBase = styled.label<BaseProps>`
@@ -27,7 +27,7 @@ const RadioBase = styled.label<BaseProps>`
     font-weight: 600;
     user-select: none;
     border-radius: 4px;
-    transition: .2s ease all;
+    transition: 0.2s ease all;
 
     &:hover {
         background: var(--hover);
@@ -52,7 +52,9 @@ const RadioBase = styled.label<BaseProps>`
         }
     }
 
-    ${ props => props.selected && css`
+    ${(props) =>
+        props.selected &&
+        css`
             color: white;
             cursor: default;
             background: var(--accent);
@@ -76,7 +78,9 @@ const RadioDescription = styled.span<BaseProps>`
     font-weight: 400;
     color: var(--secondary-foreground);
 
-    ${ props => props.selected && css`
+    ${(props) =>
+        props.selected &&
+        css`
             color: white;
         `}
 `;
@@ -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 && (

src/components/ui/Tip.tsx

@@ -32,5 +32,5 @@ export default function Tip(props: { children: Children }) {
             <Info size={20} strokeWidth={2} />
             <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)
-			.map(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"