Format code.

src/components/common/messaging/MessageBase.tsx

@@ -3,11 +3,12 @@ import { decodeTime } from "ulid";
 
 import { Text } from "preact-i18n";
 
+import { useDictionary } from "../../../lib/i18n";
+
+import { dayjs } from "../../../context/Locale";
 import { MessageObject } from "../../../context/revoltjs/util";
 
 import Tooltip from "../Tooltip";
-import { useDictionary } from "../../../lib/i18n";
-import { dayjs } from "../../../context/Locale";
 
 export interface BaseMessageProps {
     head?: boolean;
@@ -179,7 +180,9 @@ export function MessageDetail({
                 <>
                     <time className="copyTime">
                         <i className="copyBracket">[</i>
-                        {dayjs(decodeTime(message._id)).format(dict.dayjs.timeFormat)}
+                        {dayjs(decodeTime(message._id)).format(
+                            dict.dayjs.timeFormat,
+                        )}
                         <i className="copyBracket">]</i>
                     </time>
                     <span className="edited">
@@ -194,7 +197,9 @@ export function MessageDetail({
                 <>
                     <time>
                         <i className="copyBracket">[</i>
-                        {dayjs(decodeTime(message._id)).format(dict.dayjs.timeFormat)}
+                        {dayjs(decodeTime(message._id)).format(
+                            dict.dayjs.timeFormat,
+                        )}
                         <i className="copyBracket">]</i>
                     </time>
                 </>

src/components/common/messaging/MessageBox.tsx

@@ -1,4 +1,5 @@
 import { Send, HappyAlt, ShieldX } from "@styled-icons/boxicons-solid";
+import { Styleshare } from "@styled-icons/simple-icons";
 import Axios, { CancelTokenSource } from "axios";
 import { Channel } from "revolt.js";
 import { ChannelPermission } from "revolt.js/dist/api/permissions";
@@ -39,7 +40,6 @@ import AutoComplete, { useAutoComplete } from "../AutoComplete";
 import { PermissionTooltip } from "../Tooltip";
 import FilePreview from "./bars/FilePreview";
 import ReplyBar from "./bars/ReplyBar";
-import { Styleshare } from "@styled-icons/simple-icons";
 
 type Props = {
     channel: Channel;
@@ -111,7 +111,7 @@ const Action = styled.div`
 export const CAN_UPLOAD_AT_ONCE = 4;
 
 export default function MessageBox({ channel }: Props) {
-    const [draft, setDraft] = useState(getState().drafts[channel._id] ?? '');
+    const [draft, setDraft] = useState(getState().drafts[channel._id] ?? "");
 
     const [uploadState, setUploadState] = useState<UploadState>({
         type: "none",
@@ -144,8 +144,8 @@ export default function MessageBox({ channel }: Props) {
     }
 
     function setMessage(content?: string) {
-        setDraft(content ?? '');
+        setDraft(content ?? "");
-        
+
         if (content) {
             dispatch({
                 type: "SET_DRAFT",
@@ -475,15 +475,15 @@ export default function MessageBox({ channel }: Props) {
                     placeholder={
                         channel.channel_type === "DirectMessage"
                             ? translate("app.main.channel.message_who", {
-                                person: client.users.get(
+                                  person: client.users.get(
-                                    client.channels.getRecipient(channel._id),
+                                      client.channels.getRecipient(channel._id),
-                                )?.username,
+                                  )?.username,
-                            })
+                              })
                             : channel.channel_type === "SavedMessages"
                             ? translate("app.main.channel.message_saved")
                             : translate("app.main.channel.message_where", {
-                                channel_name: channel.name,
+                                  channel_name: channel.name,
-                            })
+                              })
                     }
                     disabled={
                         uploadState.type === "uploading" ||

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

@@ -100,14 +100,16 @@ export default function AttachmentActions({ attachment }: Props) {
                     <File size={24} className={styles.iconType} />
                     <span className={styles.filename}>{filename}</span>
                     <span className={styles.filesize}>{filesize}</span>
-                    { metadata.type === 'Text' && <a
+                    {metadata.type === "Text" && (
-                        href={open_url}
+                        <a
-                        target="_blank"
+                            href={open_url}
-                        className={styles.externalType}>
+                            target="_blank"
-                        <IconButton>
+                            className={styles.externalType}>
-                            <LinkExternal size={24} />
+                            <IconButton>
-                        </IconButton>
+                                <LinkExternal size={24} />
-                    </a> }
+                            </IconButton>
+                        </a>
+                    )}
                     <a
                         href={download_url}
                         className={styles.downloadIcon}

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

@@ -1,4 +1,5 @@
 import { Reply, File } from "@styled-icons/boxicons-regular";
+import { SYSTEM_USER_ID } from "revolt.js";
 import styled, { css } from "styled-components";
 
 import { Text } from "preact-i18n";
@@ -9,7 +10,6 @@ import { useUser } from "../../../../context/revoltjs/hooks";
 
 import Markdown from "../../../markdown/Markdown";
 import UserShort from "../../user/UserShort";
-import { SYSTEM_USER_ID } from "revolt.js";
 import { SystemMessage } from "../SystemMessage";
 
 interface Props {
@@ -86,13 +86,14 @@ export function MessageReply({ index, channel, id }: Props) {
             {message.attachments && message.attachments.length > 0 && (
                 <File size={16} />
             )}
-            { message.author === SYSTEM_USER_ID ?
+            {message.author === SYSTEM_USER_ID ? (
-                <SystemMessage message={message} /> :
+                <SystemMessage message={message} />
+            ) : (
                 <Markdown
                     disallowBigEmoji
                     content={(message.content as string).replace(/\n/g, " ")}
                 />
-            }
+            )}
         </ReplyBase>
     );
 }

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

@@ -31,7 +31,9 @@ export default function TextFile({ attachment }: Props) {
         if (loading) return;
 
         if (attachment.size > 20_000) {
-            setContent('This file is > 20 KB, for your sake I did not load it.\nSee tracking issue here for previews: https://gitlab.insrt.uk/revolt/revite/-/issues/2');
+            setContent(
+                "This file is > 20 KB, for your sake I did not load it.\nSee tracking issue here for previews: https://gitlab.insrt.uk/revolt/revite/-/issues/2",
+            );
             return;
         }
 

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

@@ -4,6 +4,7 @@ import {
     File,
     XCircle,
 } from "@styled-icons/boxicons-regular";
+import { SYSTEM_USER_ID } from "revolt.js";
 import styled from "styled-components";
 
 import { Text } from "preact-i18n";
@@ -20,9 +21,8 @@ import IconButton from "../../../ui/IconButton";
 
 import Markdown from "../../../markdown/Markdown";
 import UserShort from "../../user/UserShort";
-import { ReplyBase } from "../attachments/MessageReply";
 import { SystemMessage } from "../SystemMessage";
-import { SYSTEM_USER_ID } from "revolt.js";
+import { ReplyBase } from "../attachments/MessageReply";
 
 interface Props {
     channel: string;
@@ -102,13 +102,16 @@ export default function ReplyBar({ channel, replies, setReplies }: Props) {
                                 message.attachments.length > 0 && (
                                     <File size={16} />
                                 )}
-                            { message.author === SYSTEM_USER_ID ?
+                            {message.author === SYSTEM_USER_ID ? (
-                                <SystemMessage message={message} /> :
+                                <SystemMessage message={message} />
+                            ) : (
                                 <Markdown
                                     disallowBigEmoji
-                                    content={(message.content as string).replace(/\n/g, " ")}
+                                    content={(
+                                        message.content as string
+                                    ).replace(/\n/g, " ")}
                                 />
-                            }
+                            )}
                         </ReplyBase>
                         <span class="actions">
                             <IconButton

src/components/navigation/right/MemberSidebar.tsx

@@ -233,18 +233,18 @@ export function ServerMemberSidebar({
         <GenericSidebarBase>
             <GenericSidebarList>
                 <ChannelDebugInfo id={channel._id} />
-                <div>
+                <div>{!members && <Preloader type="ring" />}</div>
-                    {!members && <Preloader type="ring" />}
+                {members && (
-                </div>
+                    <Category
-                { members && <Category
+                        variant="uniform"
-                    variant="uniform"
+                        text={
-                    text={
+                            <span>
-                        <span>
+                                <Text id="app.main.categories.members" /> —{" "}
-                            <Text id="app.main.categories.members" /> —{" "}
+                                {users.length}
-                            {users.length}
+                            </span>
-                        </span>
+                        }
-                    }
+                    />
-                /> }
+                )}
                 {members && users.length === 0 && <img src={placeholderSVG} />}
                 {users.map(
                     (user) =>

src/components/ui/Button.tsx

@@ -8,7 +8,8 @@ interface Props {
     readonly error?: boolean;
 }
 
-export type ButtonProps = Props & Omit<JSX.HTMLAttributes<HTMLButtonElement>, 'as'>;
+export type ButtonProps = Props &
+    Omit<JSX.HTMLAttributes<HTMLButtonElement>, "as">;
 
 export default styled.button<Props>`
     z-index: 1;
@@ -18,7 +19,7 @@ export default styled.button<Props>`
     align-items: center;
     justify-content: center;
     padding: 2px 16px;
-    font-size: .875rem;
+    font-size: 0.875rem;
     font-family: inherit;
     font-weight: 500;
 
@@ -69,7 +70,7 @@ export default styled.button<Props>`
 
             &:disabled {
                 cursor: not-allowed;
-                opacity: .5;
+                opacity: 0.5;
             }
 
             &:active {

src/components/ui/ColourSwatches.tsx

@@ -2,8 +2,8 @@ import { Check } from "@styled-icons/boxicons-regular";
 import { Palette } from "@styled-icons/boxicons-solid";
 import styled, { css } from "styled-components";
 
-import { useRef } from "preact/hooks";
 import { RefObject } from "preact";
+import { useRef } from "preact/hooks";
 
 interface Props {
     value: string;

src/components/ui/ComboBox.tsx

@@ -10,7 +10,7 @@ export default styled.select`
     border: none;
     outline: 2px solid transparent;
     transition: outline-color 0.2s ease-in-out;
-    transition: box-shadow .2s ease-in-out;
+    transition: box-shadow 0.2s ease-in-out;
     cursor: pointer;
     width: 100%;
 

src/components/ui/DateDivider.tsx

@@ -1,5 +1,5 @@
-
 import styled, { css } from "styled-components";
+
 import { dayjs } from "../../context/Locale";
 
 const Base = styled.div<{ unread?: boolean }>`

src/components/ui/IconButton.tsx

@@ -49,9 +49,11 @@ export default styled.div<Props>`
             }
         `}
 
-    ${(props) => props.rotate && css`
+    ${(props) =>
-        svg {
+        props.rotate &&
-            transform: rotateZ(${props.rotate});
+        css`
-        }
+            svg {
-    ` }
+                transform: rotateZ(${props.rotate});
+            }
+        `}
 `;

src/components/ui/InputBox.tsx

@@ -18,7 +18,7 @@ export default styled.input<Props>`
     border: none;
     outline: 2px solid transparent;
     transition: outline-color 0.2s ease-in-out;
-    transition: box-shadow .2s ease-in-out;
+    transition: box-shadow 0.2s ease-in-out;
 
     &:hover {
         background: var(--secondary-background);

src/components/ui/Modal.tsx

@@ -99,10 +99,10 @@ const ModalActions = styled.div`
     background: var(--secondary-background);
 `;
 
-export type Action = Omit<ButtonProps, 'onClick'> & {
+export type Action = Omit<ButtonProps, "onClick"> & {
     confirmation?: boolean;
     onClick: () => void;
-}
+};
 
 interface Props {
     children?: Children;
@@ -177,9 +177,9 @@ export default function Modal(props: Props) {
                 {content}
                 {props.actions && (
                     <ModalActions>
-                        {props.actions.map((x) =>
+                        {props.actions.map((x) => (
                             <Button {...x} disabled={props.disabled} />
-                        )}
+                        ))}
                     </ModalActions>
                 )}
             </ModalContainer>

src/components/ui/TextArea.tsx

@@ -17,8 +17,9 @@ export default styled.textarea<TextAreaProps>`
     display: block;
     color: var(--foreground);
     background: var(--secondary-background);
-    padding: ${(props) => (props.padding) ?? 'var(--textarea-padding)'};
+    padding: ${(props) => props.padding ?? "var(--textarea-padding)"};
-    line-height: ${(props) => (props.lineHeight) ?? 'var(--textarea-line-height)'};
+    line-height: ${(props) =>
+        props.lineHeight ?? "var(--textarea-line-height)"};
 
     ${(props) =>
         props.hideBorder &&

src/context/Locale.tsx

@@ -1,6 +1,4 @@
 import dayJS from "dayjs";
-export const dayjs = dayJS;
-
 import calendar from "dayjs/plugin/calendar";
 import format from "dayjs/plugin/localizedFormat";
 import update from "dayjs/plugin/updateLocale";
@@ -13,6 +11,8 @@ import { connectState } from "../redux/connector";
 
 import definition from "../../external/lang/en.json";
 
+export const dayjs = dayJS;
+
 dayjs.extend(calendar);
 dayjs.extend(format);
 dayjs.extend(update);
@@ -163,7 +163,7 @@ function Locale({ children, locale }: Props) {
         dayjs["timeFormat"] = twelvehour ? "hh:mm A" : "HH:mm";
 
         Object.keys(dayjs)
-            .filter((k) => typeof dayjs[k] === 'string')
+            .filter((k) => typeof dayjs[k] === "string")
             .forEach(
                 (k) =>
                     (dayjs[k] = dayjs[k].replace(
@@ -175,7 +175,9 @@ function Locale({ children, locale }: Props) {
         return obj;
     }
 
-    dayjs.updateLocale("en", { calendar: { ...definition.dayjs, sameDay: 'sussy baka' } });
+    dayjs.updateLocale("en", {
+        calendar: { ...definition.dayjs, sameDay: "sussy baka" },
+    });
     useEffect(() => {
         if (locale === "en") {
             const defn = transformLanguage(definition);

src/context/intermediate/modals/Input.tsx

@@ -155,7 +155,7 @@ export function SpecialInputModal(props: SpecialProps) {
                             status: {
                                 ...client.user?.status,
                                 text: text.trim().length > 0 ? text : undefined,
-                            }
+                            },
                         })
                     }
                 />

src/context/intermediate/modals/Prompt.tsx

@@ -256,7 +256,9 @@ export function SpecialPromptModal(props: SpecialProps) {
                     question={<Text id={`app.context_menu.create_invite`} />}
                     actions={[
                         {
-                            children: <Text id="app.special.modals.actions.ok" />,
+                            children: (
+                                <Text id="app.special.modals.actions.ok" />
+                            ),
                             confirmation: true,
                             onClick: onClose,
                         },
@@ -292,7 +294,9 @@ export function SpecialPromptModal(props: SpecialProps) {
                     question={<Text id={`app.context_menu.kick_member`} />}
                     actions={[
                         {
-                            children: <Text id="app.special.modals.actions.kick" />,
+                            children: (
+                                <Text id="app.special.modals.actions.kick" />
+                            ),
                             contrast: true,
                             error: true,
                             confirmation: true,
@@ -342,7 +346,9 @@ export function SpecialPromptModal(props: SpecialProps) {
                     question={<Text id={`app.context_menu.ban_member`} />}
                     actions={[
                         {
-                            children: <Text id="app.special.modals.actions.ban" />,
+                            children: (
+                                <Text id="app.special.modals.actions.ban" />
+                            ),
                             contrast: true,
                             error: true,
                             confirmation: true,

src/context/intermediate/popovers/UserProfile.tsx

@@ -1,10 +1,5 @@
-import {
-    Envelope,
-    Edit,
-    UserPlus,
-    Shield
-} from "@styled-icons/boxicons-solid";
 import { Money } from "@styled-icons/boxicons-regular";
+import { Envelope, Edit, UserPlus, Shield } from "@styled-icons/boxicons-solid";
 import { Link, useHistory } from "react-router-dom";
 import { Users } from "revolt.js/dist/api/objects";
 import { UserPermission } from "revolt.js/dist/api/permissions";

src/context/revoltjs/FileUploads.tsx

@@ -277,7 +277,7 @@ export function FileUploader(props: Props) {
                     if (attached) return remove();
                     onClick();
                 }}
-                rotate={uploading || attached ? '45deg' : undefined}>
+                rotate={uploading || attached ? "45deg" : undefined}>
                 <Plus size={size} />
             </IconButton>
         );

src/lib/TextAreaAutoSize.tsx

@@ -1,12 +1,12 @@
 import styled from "styled-components";
 
+import { RefObject } from "preact";
 import { useEffect, useLayoutEffect, useRef } from "preact/hooks";
 
 import TextArea, { TextAreaProps } from "../components/ui/TextArea";
 
 import { internalSubscribe } from "./eventEmitter";
 import { isTouchscreenDevice } from "./isTouchscreenDevice";
-import { RefObject } from "preact";
 
 type TextAreaAutoSizeProps = Omit<
     JSX.HTMLAttributes<HTMLTextAreaElement>,
@@ -30,7 +30,7 @@ const Container = styled.div`
     flex-direction: column;
 `;
 
-const Ghost = styled.div<{ lineHeight: string, maxRows: number }>`
+const Ghost = styled.div<{ lineHeight: string; maxRows: number }>`
     flex: 0;
     width: 100%;
     overflow: hidden;
@@ -41,13 +41,15 @@ const Ghost = styled.div<{ lineHeight: string, maxRows: number }>`
         width: 100%;
         white-space: pre-wrap;
         word-break: break-all;
-        
+
         top: 0;
         position: absolute;
         font-size: var(--text-size);
         line-height: ${(props) => props.lineHeight};
 
-        max-height: calc(calc( ${(props) => props.lineHeight} * ${ (props) => props.maxRows } ));
+        max-height: calc(
+            calc(${(props) => props.lineHeight} * ${(props) => props.maxRows})
+        );
     }
 `;
 
@@ -72,7 +74,7 @@ export default function TextAreaAutoSize(props: TextAreaAutoSizeProps) {
 
     useLayoutEffect(() => {
         if (ref.current && ghost.current) {
-            ref.current.style.height = ghost.current.clientHeight + 'px';
+            ref.current.style.height = ghost.current.clientHeight + "px";
         }
     }, [ghost, props.value]);
 
@@ -139,7 +141,9 @@ export default function TextAreaAutoSize(props: TextAreaAutoSizeProps) {
                 }}
                 {...textAreaProps}
             />
-            <Ghost lineHeight={lineHeight ?? 'var(--textarea-line-height)'} maxRows={maxRows ?? 5}>
+            <Ghost
+                lineHeight={lineHeight ?? "var(--textarea-line-height)"}
+                maxRows={maxRows ?? 5}>
                 <div ref={ghost} style={{ padding }}>
                     {props.value
                         ? props.value

src/lib/i18n.tsx

@@ -15,11 +15,11 @@ interface Props {
 export interface Dictionary {
     dayjs: {
         defaults: {
-            twelvehour: 'yes' | 'no';
+            twelvehour: "yes" | "no";
             separator: string;
             date: "traditional" | "simplified" | "ISO8601";
-        },
+        };
-        timeFormat: string
+        timeFormat: string;
     };
     [key: string]: Object | string;
 }

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
-                            (ref.current.scrollHeight -
+                            ? ref.current.scrollTop +
-                                scrollState.current.previousHeight))
+                                  (ref.current.scrollHeight -
-                            : 101
+                                      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}>
+                    <div onClick={exitSettings} className={styles.closeButton}>
-                            <X size={28} />
+                        <X size={28} />
-                        </div>
+                    </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>{
+                            <p>
-                                field === 'email' ?
+                                {field === "email" ? (
-                                    (revealEmail ? value :
+                                    revealEmail ? (
-                                        <>***********@{value.split('@').pop()} <a onClick={() => setRevealEmail(true)}>
+                                        value
-                                        <Text id="app.special.modals.actions.reveal" /></a></>)
+                                    ) : (
-                                    : value
+                                        <>
-                            }</p>
+                                            ***********@{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>
+            <h3>
-            <h5><Text id="app.settings.pages.account.account_management.description" /></h5>
+                <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>
+            <h3>
-            <h5>Currently work in progress, see <a href="https://gitlab.insrt.uk/insert/rauth/-/issues/2" target="_blank">tracking issue here</a>.</h5>
+                <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>
+            <h3>
-            <h5><Text id="app.settings.pages.account.manage.description" /></h5>
+                <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"