Format code.

src/pages/channels/messaging/MessageArea.tsx

@@ -95,10 +95,11 @@ export function MessageArea({ id }: Props) {
                 animateScroll.scrollTo(
                     Math.max(
                         101,
-                        ref.current ? (ref.current.scrollTop +
-                            (ref.current.scrollHeight -
-                                scrollState.current.previousHeight))
-                            : 101
+                        ref.current
+                            ? ref.current.scrollTop +
+                                  (ref.current.scrollHeight -
+                                      scrollState.current.previousHeight)
+                            : 101,
                     ),
                     {
                         container: ref.current,
@@ -128,7 +129,8 @@ export function MessageArea({ id }: Props) {
               ref.current?.clientHeight
             : true;
 
-    const atTop = (offset = 0) => ref.current ? ref.current.scrollTop <= offset : false;
+    const atTop = (offset = 0) =>
+        ref.current ? ref.current.scrollTop <= offset : false;
 
     // ? Handle events from renderer.
     useEffect(() => {

src/pages/friends/Friends.tsx

@@ -121,7 +121,10 @@ export default function Friends() {
                     */}
                 </div>
             </Header>
-            <div className={styles.list} data-empty={isEmpty} data-mobile={isTouchscreenDevice}>
+            <div
+                className={styles.list}
+                data-empty={isEmpty}
+                data-mobile={isTouchscreenDevice}>
                 {isEmpty && (
                     <>
                         <img src="https://img.insrt.uk/xexu7/XOPoBUTI47.png/raw" />

src/pages/settings/GenericSettings.tsx

@@ -85,7 +85,10 @@ export function GenericSettings({
                         <>
                             {showExitButton && (
                                 <IconButton onClick={exitSettings}>
-                                    <X size={27} style={{marginInlineEnd: "8px"}} />
+                                    <X
+                                        size={27}
+                                        style={{ marginInlineEnd: "8px" }}
+                                    />
                                 </IconButton>
                             )}
                             <Text id="app.settings.title" />
@@ -93,7 +96,10 @@ export function GenericSettings({
                     ) : (
                         <>
                             <IconButton onClick={() => switchPage()}>
-                                <ArrowBack size={24} style={{marginInlineEnd: "10px"}} />
+                                <ArrowBack
+                                    size={24}
+                                    style={{ marginInlineEnd: "10px" }}
+                                />
                             </IconButton>
                             <Text
                                 id={`app.settings.${category}.${page}.title`}
@@ -148,9 +154,9 @@ export function GenericSettings({
             )}
             {!isTouchscreenDevice && (
                 <div className={styles.action}>
-                        <div onClick={exitSettings} className={styles.closeButton}>
-                            <X size={28} />
-                        </div>
+                    <div onClick={exitSettings} className={styles.closeButton}>
+                        <X size={28} />
+                    </div>
                 </div>
             )}
         </div>

src/pages/settings/panes/Account.tsx

@@ -14,10 +14,10 @@ import {
 } from "../../../context/revoltjs/RevoltClient";
 import { useForceUpdate, useSelf } from "../../../context/revoltjs/hooks";
 
+import Tooltip from "../../../components/common/Tooltip";
 import UserIcon from "../../../components/common/user/UserIcon";
 import Button from "../../../components/ui/Button";
 import Overline from "../../../components/ui/Overline";
-import Tooltip from "../../../components/common/Tooltip";
 import Tip from "../../../components/ui/Tip";
 
 export function Account() {
@@ -65,7 +65,10 @@ export function Account() {
                 <div className={styles.userDetail}>
                     <div className={styles.username}>@{user.username}</div>
                     <div className={styles.userid}>
-                        <Tooltip content={<Text id="app.settings.pages.account.unique_id" />}>
+                        <Tooltip
+                            content={
+                                <Text id="app.settings.pages.account.unique_id" />
+                            }>
                             <HelpCircle size={16} />
                         </Tooltip>
                         <Tooltip content={<Text id="app.special.copy" />}>
@@ -90,13 +93,25 @@ export function Account() {
                             <div className={styles.subtext}>
                                 <Text id={`login.${field}`} />
                             </div>
-                            <p>{
-                                field === 'email' ?
-                                    (revealEmail ? value :
-                                        <>***********@{value.split('@').pop()} <a onClick={() => setRevealEmail(true)}>
-                                        <Text id="app.special.modals.actions.reveal" /></a></>)
-                                    : value
-                            }</p>
+                            <p>
+                                {field === "email" ? (
+                                    revealEmail ? (
+                                        value
+                                    ) : (
+                                        <>
+                                            ***********@{value.split("@").pop()}{" "}
+                                            <a
+                                                onClick={() =>
+                                                    setRevealEmail(true)
+                                                }>
+                                                <Text id="app.special.modals.actions.reveal" />
+                                            </a>
+                                        </>
+                                    )
+                                ) : (
+                                    value
+                                )}
+                            </p>
                         </div>
                         <div>
                             <Button
@@ -113,18 +128,36 @@ export function Account() {
                     </div>
                 ))}
             </div>
-            <h3><Text id="app.settings.pages.account.account_management.title" /></h3>
-            <h5><Text id="app.settings.pages.account.account_management.description" /></h5>
+            <h3>
+                <Text id="app.settings.pages.account.account_management.title" />
+            </h3>
+            <h5>
+                <Text id="app.settings.pages.account.account_management.description" />
+            </h5>
 
-            <h3><Text id="app.settings.pages.account.2fa.title" /></h3>
-            <h5>Currently work in progress, see <a href="https://gitlab.insrt.uk/insert/rauth/-/issues/2" target="_blank">tracking issue here</a>.</h5>
+            <h3>
+                <Text id="app.settings.pages.account.2fa.title" />
+            </h3>
+            <h5>
+                Currently work in progress, see{" "}
+                <a
+                    href="https://gitlab.insrt.uk/insert/rauth/-/issues/2"
+                    target="_blank">
+                    tracking issue here
+                </a>
+                .
+            </h5>
             {/*<h5><Text id="app.settings.pages.account.two_factor_auth.description" /></h5>
             <Button accent compact>
                 <Text id="app.settings.pages.account.two_factor_auth.add_auth" />
             </Button>*/}
 
-            <h3><Text id="app.settings.pages.account.manage.title" /></h3>
-            <h5><Text id="app.settings.pages.account.manage.description" /></h5>
+            <h3>
+                <Text id="app.settings.pages.account.manage.title" />
+            </h3>
+            <h5>
+                <Text id="app.settings.pages.account.manage.description" />
+            </h5>
             <div className={styles.buttons}>
                 {/* <Button contrast>
                     <Text id="app.settings.pages.account.manage.disable" />

src/pages/settings/panes/Sessions.tsx

@@ -10,7 +10,6 @@ import {
     Safari,
     Windows,
 } from "@styled-icons/simple-icons";
-
 import relativeTime from "dayjs/plugin/relativeTime";
 import { useHistory } from "react-router-dom";
 import { decodeTime } from "ulid";
@@ -19,12 +18,12 @@ import styles from "./Panes.module.scss";
 import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";
 
+import { dayjs } from "../../../context/Locale";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 
 import Button from "../../../components/ui/Button";
 import Preloader from "../../../components/ui/Preloader";
 import Tip from "../../../components/ui/Tip";
-import { dayjs } from "../../../context/Locale";
 
 dayjs.extend(relativeTime);
 
@@ -134,7 +133,12 @@ export function Sessions() {
                             <div>{getSystemIcon(session)}</div>
                         </div>
                         <div className={styles.info}>
-                            <input type="text" className={styles.name} value={session.friendly_name} autocomplete="off" />
+                            <input
+                                type="text"
+                                className={styles.name}
+                                value={session.friendly_name}
+                                autocomplete="off"
+                            />
                             <span className={styles.time}>
                                 <Text
                                     id="app.settings.pages.sessions.created"