Run prettier on all files.

src/pages/friends/Friend.tsx

@@ -1,107 +1,136 @@
-import { Text } from "preact-i18n";
-import classNames from "classnames";
-import styles from "./Friend.module.scss";
-import { useContext } from "preact/hooks";
-import { Children } from "../../types/Preact";
-import IconButton from "../../components/ui/IconButton";
-import { attachContextMenu } from "preact-context-menu";
 import { X, Plus } from "@styled-icons/boxicons-regular";
-import { User, Users } from "revolt.js/dist/api/objects";
-import { stopPropagation } from "../../lib/stopPropagation";
-import { VoiceOperationsContext } from "../../context/Voice";
-import UserIcon from "../../components/common/user/UserIcon";
-import UserStatus from '../../components/common/user/UserStatus';
 import { PhoneCall, Envelope } from "@styled-icons/boxicons-solid";
+import { User, Users } from "revolt.js/dist/api/objects";
+
+import styles from "./Friend.module.scss";
+import classNames from "classnames";
+import { attachContextMenu } from "preact-context-menu";
+import { Text } from "preact-i18n";
+import { useContext } from "preact/hooks";
+
+import { stopPropagation } from "../../lib/stopPropagation";
+
+import { VoiceOperationsContext } from "../../context/Voice";
 import { useIntermediate } from "../../context/intermediate/Intermediate";
-import { AppContext, OperationsContext } from "../../context/revoltjs/RevoltClient";
+import {
+	AppContext,
+	OperationsContext,
+} from "../../context/revoltjs/RevoltClient";
+
+import UserIcon from "../../components/common/user/UserIcon";
+import UserStatus from "../../components/common/user/UserStatus";
+import IconButton from "../../components/ui/IconButton";
+
+import { Children } from "../../types/Preact";
 
 interface Props {
-    user: User;
+	user: User;
 }
 
 export function Friend({ user }: Props) {
-    const client = useContext(AppContext);
-    const { openScreen } = useIntermediate();
-    const { openDM } = useContext(OperationsContext);
-    const { connect } = useContext(VoiceOperationsContext);
+	const client = useContext(AppContext);
+	const { openScreen } = useIntermediate();
+	const { openDM } = useContext(OperationsContext);
+	const { connect } = useContext(VoiceOperationsContext);
 
-    const actions: Children[] = [];
-    let subtext: Children = null;
+	const actions: Children[] = [];
+	let subtext: Children = null;
 
-    if (user.relationship === Users.Relationship.Friend) {
-        subtext = <UserStatus user={user} />
-        actions.push(
-            <>
-                <IconButton type="circle"
-                    className={classNames(styles.button, styles.call, styles.success)}
-                    onClick={ev => stopPropagation(ev, openDM(user._id).then(connect))}>
-                    <PhoneCall size={20} />
-                </IconButton>
-                <IconButton type="circle"
-                    className={styles.button}
-                    onClick={ev => stopPropagation(ev, openDM(user._id))}>
-                    <Envelope size={20} />
-                </IconButton>
-            </>
-        );
-    }
+	if (user.relationship === Users.Relationship.Friend) {
+		subtext = <UserStatus user={user} />;
+		actions.push(
+			<>
+				<IconButton
+					type="circle"
+					className={classNames(
+						styles.button,
+						styles.call,
+						styles.success,
+					)}
+					onClick={(ev) =>
+						stopPropagation(ev, openDM(user._id).then(connect))
+					}>
+					<PhoneCall size={20} />
+				</IconButton>
+				<IconButton
+					type="circle"
+					className={styles.button}
+					onClick={(ev) => stopPropagation(ev, openDM(user._id))}>
+					<Envelope size={20} />
+				</IconButton>
+			</>,
+		);
+	}
 
-    if (user.relationship === Users.Relationship.Incoming) {
-        actions.push(
-            <IconButton type="circle"
-                className={styles.button}
-                onClick={ev => stopPropagation(ev, client.users.addFriend(user.username))}>
-                <Plus size={24} />
-            </IconButton>
-        );
+	if (user.relationship === Users.Relationship.Incoming) {
+		actions.push(
+			<IconButton
+				type="circle"
+				className={styles.button}
+				onClick={(ev) =>
+					stopPropagation(ev, client.users.addFriend(user.username))
+				}>
+				<Plus size={24} />
+			</IconButton>,
+		);
 
-        subtext = <Text id="app.special.friends.incoming" />;
-    }
+		subtext = <Text id="app.special.friends.incoming" />;
+	}
 
-    if (user.relationship === Users.Relationship.Outgoing) {
-        subtext = <Text id="app.special.friends.outgoing" />;
-    }
+	if (user.relationship === Users.Relationship.Outgoing) {
+		subtext = <Text id="app.special.friends.outgoing" />;
+	}
 
-    if (
-        user.relationship === Users.Relationship.Friend ||
-        user.relationship === Users.Relationship.Outgoing ||
-        user.relationship === Users.Relationship.Incoming
-    ) {
-        actions.push(
-            <IconButton type="circle"
-                className={classNames(styles.button, styles.error)}
-                onClick={ev => stopPropagation(ev,
-                    user.relationship === Users.Relationship.Friend ?
-                        openScreen({ id: 'special_prompt', type: 'unfriend_user', target: user })
-                        : client.users.removeFriend(user._id)
-                )}>
-                <X size={24} />
-            </IconButton>
-        );
-    }
+	if (
+		user.relationship === Users.Relationship.Friend ||
+		user.relationship === Users.Relationship.Outgoing ||
+		user.relationship === Users.Relationship.Incoming
+	) {
+		actions.push(
+			<IconButton
+				type="circle"
+				className={classNames(styles.button, styles.error)}
+				onClick={(ev) =>
+					stopPropagation(
+						ev,
+						user.relationship === Users.Relationship.Friend
+							? openScreen({
+									id: "special_prompt",
+									type: "unfriend_user",
+									target: user,
+							  })
+							: client.users.removeFriend(user._id),
+					)
+				}>
+				<X size={24} />
+			</IconButton>,
+		);
+	}
 
-    if (user.relationship === Users.Relationship.Blocked) {
-        actions.push(
-            <IconButton type="circle"
-                className={classNames(styles.button, styles.error)}
-                onClick={ev => stopPropagation(ev, client.users.unblockUser(user._id))}>
-                <X size={24} />
-            </IconButton>
-        );
-    }
+	if (user.relationship === Users.Relationship.Blocked) {
+		actions.push(
+			<IconButton
+				type="circle"
+				className={classNames(styles.button, styles.error)}
+				onClick={(ev) =>
+					stopPropagation(ev, client.users.unblockUser(user._id))
+				}>
+				<X size={24} />
+			</IconButton>,
+		);
+	}
 
-    return (
-        <div className={styles.friend}
-            onClick={() => openScreen({ id: 'profile', user_id: user._id })}
-            onContextMenu={attachContextMenu('Menu', { user: user._id })}>
-            <UserIcon target={user} size={36} status />
-            <div className={styles.name}>
-                <span>@{user.username}</span>
-                {subtext && (
-                    <span className={styles.subtext}>{subtext}</span>
-                )}
-            </div>
-            <div className={styles.actions}>{actions}</div>
-        </div>
-    );
+	return (
+		<div
+			className={styles.friend}
+			onClick={() => openScreen({ id: "profile", user_id: user._id })}
+			onContextMenu={attachContextMenu("Menu", { user: user._id })}>
+			<UserIcon target={user} size={36} status />
+			<div className={styles.name}>
+				<span>@{user.username}</span>
+				{subtext && <span className={styles.subtext}>{subtext}</span>}
+			</div>
+			<div className={styles.actions}>{actions}</div>
+		</div>
+	);
 }

src/pages/friends/Friends.tsx

@@ -1,78 +1,117 @@
-import { Friend } from "./Friend";
-import { Text } from "preact-i18n";
-import styles from "./Friend.module.scss";
-import Header from "../../components/ui/Header";
-import Overline from "../../components/ui/Overline";
-import Tooltip from "../../components/common/Tooltip";
-import IconButton from "../../components/ui/IconButton";
-import { useUsers } from "../../context/revoltjs/hooks";
-import { User, Users } from "revolt.js/dist/api/objects";
-import UserIcon from "../../components/common/user/UserIcon";
-import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
-import { useIntermediate } from "../../context/intermediate/Intermediate";
-import { ChevronDown, ChevronRight, ListPlus } from "@styled-icons/boxicons-regular";
+import {
+	ChevronDown,
+	ChevronRight,
+	ListPlus,
+} from "@styled-icons/boxicons-regular";
 import { UserDetail, MessageAdd, UserPlus } from "@styled-icons/boxicons-solid";
+import { User, Users } from "revolt.js/dist/api/objects";
+
+import styles from "./Friend.module.scss";
+import { Text } from "preact-i18n";
+
 import { TextReact } from "../../lib/i18n";
-import { Children } from "../../types/Preact";
-import Details from "../../components/ui/Details";
+import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
+
+import { useIntermediate } from "../../context/intermediate/Intermediate";
+import { useUsers } from "../../context/revoltjs/hooks";
+
 import CollapsibleSection from "../../components/common/CollapsibleSection";
+import Tooltip from "../../components/common/Tooltip";
+import UserIcon from "../../components/common/user/UserIcon";
+import Details from "../../components/ui/Details";
+import Header from "../../components/ui/Header";
+import IconButton from "../../components/ui/IconButton";
+import Overline from "../../components/ui/Overline";
+
+import { Children } from "../../types/Preact";
+import { Friend } from "./Friend";
 
 export default function Friends() {
-    const { openScreen } = useIntermediate();
+	const { openScreen } = useIntermediate();
 
-    const users = useUsers() as User[];
-    users.sort((a, b) => a.username.localeCompare(b.username));
+	const users = useUsers() as User[];
+	users.sort((a, b) => a.username.localeCompare(b.username));
 
-    const friends = users.filter(x => x.relationship === Users.Relationship.Friend);
+	const friends = users.filter(
+		(x) => x.relationship === Users.Relationship.Friend,
+	);
 
-    const lists = [
-        [ '', users.filter(x =>
-            x.relationship === Users.Relationship.Incoming
-        ) ],
-        [ 'app.special.friends.sent', users.filter(x =>
-            x.relationship === Users.Relationship.Outgoing
-        ), 'outgoing' ],
-        [ 'app.status.online', friends.filter(x =>
-            x.online && x.status?.presence !== Users.Presence.Invisible
-        ), 'online' ],
-        [ 'app.status.offline', friends.filter(x =>
-            !x.online || x.status?.presence === Users.Presence.Invisible
-        ), 'offline' ],
-        [ 'app.special.friends.blocked', users.filter(x =>
-            x.relationship === Users.Relationship.Blocked
-        ), 'blocked' ]
-    ] as [ string, User[], string ][];
+	const lists = [
+		[
+			"",
+			users.filter((x) => x.relationship === Users.Relationship.Incoming),
+		],
+		[
+			"app.special.friends.sent",
+			users.filter((x) => x.relationship === Users.Relationship.Outgoing),
+			"outgoing",
+		],
+		[
+			"app.status.online",
+			friends.filter(
+				(x) =>
+					x.online && x.status?.presence !== Users.Presence.Invisible,
+			),
+			"online",
+		],
+		[
+			"app.status.offline",
+			friends.filter(
+				(x) =>
+					!x.online ||
+					x.status?.presence === Users.Presence.Invisible,
+			),
+			"offline",
+		],
+		[
+			"app.special.friends.blocked",
+			users.filter((x) => x.relationship === Users.Relationship.Blocked),
+			"blocked",
+		],
+	] as [string, User[], string][];
 
-    const incoming = lists[0][1];
-    const userlist: Children[] = incoming.map(x => <b>{ x.username }</b>);
-    for (let i=incoming.length-1;i>0;i--) userlist.splice(i, 0, ', ');
+	const incoming = lists[0][1];
+	const userlist: Children[] = incoming.map((x) => <b>{x.username}</b>);
+	for (let i = incoming.length - 1; i > 0; i--) userlist.splice(i, 0, ", ");
 
-    const isEmpty = lists.reduce((p: number, n) => p + n.length, 0) === 0;
-    return (
-        <>
-            <Header placement="primary">
-                { !isTouchscreenDevice && <UserDetail size={24} /> }
-                <div className={styles.title}>
-                    <Text id="app.navigation.tabs.friends" />
-                </div>
-                <div className={styles.actions}>
-                    {/*<Tooltip content={"Create Category"} placement="bottom">
+	const isEmpty = lists.reduce((p: number, n) => p + n.length, 0) === 0;
+	return (
+		<>
+			<Header placement="primary">
+				{!isTouchscreenDevice && <UserDetail size={24} />}
+				<div className={styles.title}>
+					<Text id="app.navigation.tabs.friends" />
+				</div>
+				<div className={styles.actions}>
+					{/*<Tooltip content={"Create Category"} placement="bottom">
                         <IconButton onClick={() => openScreen({ id: 'special_input', type: 'create_group' })}>
                             <ListPlus size={28} />
                         </IconButton>
                     </Tooltip>
                     <div className={styles.divider} />*/}
-                    <Tooltip content={"Create Group"} placement="bottom">
-                        <IconButton onClick={() => openScreen({ id: 'special_input', type: 'create_group' })}>
-                            <MessageAdd size={24} />
-                        </IconButton>
-                    </Tooltip>
-                    <Tooltip content={"Add Friend"} placement="bottom">
-                        <IconButton onClick={() => openScreen({ id: 'special_input', type: 'add_friend' })}>
-                            <UserPlus size={27} />
-                        </IconButton>
-                    </Tooltip>
-                    {/* 
+					<Tooltip content={"Create Group"} placement="bottom">
+						<IconButton
+							onClick={() =>
+								openScreen({
+									id: "special_input",
+									type: "create_group",
+								})
+							}>
+							<MessageAdd size={24} />
+						</IconButton>
+					</Tooltip>
+					<Tooltip content={"Add Friend"} placement="bottom">
+						<IconButton
+							onClick={() =>
+								openScreen({
+									id: "special_input",
+									type: "add_friend",
+								})
+							}>
+							<UserPlus size={27} />
+						</IconButton>
+					</Tooltip>
+					{/* 
                     <div className={styles.divider} />
                     <Tooltip content={"Friend Activity"} placement="bottom">
                         <IconButton>
@@ -80,51 +119,98 @@ export default function Friends() {
                         </IconButton>            
                     </Tooltip>
                     */}
-                </div>
-            </Header>
-            <div className={styles.list} data-empty={isEmpty}>
-                {isEmpty && (
-                    <>
-                        <img src="https://img.insrt.uk/xexu7/XOPoBUTI47.png/raw" />
-                        <Text id="app.special.friends.nobody" />
-                    </>
-                )}
+				</div>
+			</Header>
+			<div className={styles.list} data-empty={isEmpty}>
+				{isEmpty && (
+					<>
+						<img src="https://img.insrt.uk/xexu7/XOPoBUTI47.png/raw" />
+						<Text id="app.special.friends.nobody" />
+					</>
+				)}
 
-                { incoming.length > 0 && <div className={styles.pending}
-                    onClick={() => openScreen({ id: 'pending_requests', users: incoming.map(x => x._id) })}>
-                    <div className={styles.avatars}>
-                        { incoming.map((x, i) => i < 3 && <UserIcon target={x} size={64} mask={ i < Math.min(incoming.length - 1, 2) ? "url(#overlap)" : undefined } />) }
-                    </div>
-                    <div className={styles.details}>
-                        <div><Text id="app.special.friends.pending" /> <span>{ incoming.length }</span></div>
-                        <span>
-                            {
-                                  incoming.length > 3 ? <TextReact id="app.special.friends.from.several" fields={{ userlist: userlist.slice(0, 6), count: incoming.length - 3 }} />
-                                : incoming.length > 1 ? <TextReact id="app.special.friends.from.multiple" fields={{ user: userlist.shift()!, userlist: userlist.slice(1) }} />
-                                : <TextReact id="app.special.friends.from.single" fields={{ user: userlist[0] }} />
-                            }
-                        </span>
-                    </div>
-                    <ChevronRight size={28} />
-                </div> }
+				{incoming.length > 0 && (
+					<div
+						className={styles.pending}
+						onClick={() =>
+							openScreen({
+								id: "pending_requests",
+								users: incoming.map((x) => x._id),
+							})
+						}>
+						<div className={styles.avatars}>
+							{incoming.map(
+								(x, i) =>
+									i < 3 && (
+										<UserIcon
+											target={x}
+											size={64}
+											mask={
+												i <
+												Math.min(incoming.length - 1, 2)
+													? "url(#overlap)"
+													: undefined
+											}
+										/>
+									),
+							)}
+						</div>
+						<div className={styles.details}>
+							<div>
+								<Text id="app.special.friends.pending" />{" "}
+								<span>{incoming.length}</span>
+							</div>
+							<span>
+								{incoming.length > 3 ? (
+									<TextReact
+										id="app.special.friends.from.several"
+										fields={{
+											userlist: userlist.slice(0, 6),
+											count: incoming.length - 3,
+										}}
+									/>
+								) : incoming.length > 1 ? (
+									<TextReact
+										id="app.special.friends.from.multiple"
+										fields={{
+											user: userlist.shift()!,
+											userlist: userlist.slice(1),
+										}}
+									/>
+								) : (
+									<TextReact
+										id="app.special.friends.from.single"
+										fields={{ user: userlist[0] }}
+									/>
+								)}
+							</span>
+						</div>
+						<ChevronRight size={28} />
+					</div>
+				)}
 
-                {
-                    lists.map(([i18n, list, section_id], index) => {
-                        if (index === 0) return;
-                        if (list.length === 0) return;
+				{lists.map(([i18n, list, section_id], index) => {
+					if (index === 0) return;
+					if (list.length === 0) return;
 
-                        return (
-                            <CollapsibleSection
-                                id={`friends_${section_id}`}
-                                defaultValue={true}
-                                sticky large
-                                summary={<div class="title"><Text id={i18n} /> — { list.length }</div>}>
-                                { list.map(x => <Friend key={x._id} user={x} />) }
-                            </CollapsibleSection>
-                        )
-                    })
-                }
-            </div>
-        </>
-    );
+					return (
+						<CollapsibleSection
+							id={`friends_${section_id}`}
+							defaultValue={true}
+							sticky
+							large
+							summary={
+								<div class="title">
+									<Text id={i18n} /> — {list.length}
+								</div>
+							}>
+							{list.map((x) => (
+								<Friend key={x._id} user={x} />
+							))}
+						</CollapsibleSection>
+					);
+				})}
+			</div>
+		</>
+	);
 }