src/components/common/LocaleSelector.tsx

@@ -6,33 +6,33 @@ import { Language, Languages } from "../../context/Locale";
 import ComboBox from "../ui/ComboBox";
 
 type Props = {
-	locale: string;
+    locale: string;
 };
 
 export function LocaleSelector(props: Props) {
-	return (
-		<ComboBox
-			value={props.locale}
-			onChange={(e) =>
-				dispatch({
-					type: "SET_LOCALE",
-					locale: e.currentTarget.value as Language,
-				})
-			}>
-			{Object.keys(Languages).map((x) => {
-				const l = Languages[x as keyof typeof Languages];
-				return (
-					<option value={x}>
-						{l.emoji} {l.display}
-					</option>
-				);
-			})}
-		</ComboBox>
-	);
+    return (
+        <ComboBox
+            value={props.locale}
+            onChange={(e) =>
+                dispatch({
+                    type: "SET_LOCALE",
+                    locale: e.currentTarget.value as Language,
+                })
+            }>
+            {Object.keys(Languages).map((x) => {
+                const l = Languages[x as keyof typeof Languages];
+                return (
+                    <option value={x} key={x}>
+                        {l.emoji} {l.display}
+                    </option>
+                );
+            })}
+        </ComboBox>
+    );
 }
 
 export default connectState(LocaleSelector, (state) => {
-	return {
-		locale: state.locale,
-	};
+    return {
+        locale: state.locale,
+    };
 });

src/components/common/ServerHeader.tsx

 import { Cog } from "@styled-icons/boxicons-solid";
+import { observer } from "mobx-react-lite";
 import { Link } from "react-router-dom";
-import { Server } from "revolt.js/dist/api/objects";
 import { ServerPermission } from "revolt.js/dist/api/permissions";
+import { Server } from "revolt.js/dist/maps/Servers";
 import styled from "styled-components";
 
-import { HookContext, useServerPermission } from "../../context/revoltjs/hooks";
-
 import Header from "../ui/Header";
 import IconButton from "../ui/IconButton";
 
 interface Props {
-	server: Server;
-	ctx: HookContext;
+    server: Server;
 }
 
 const ServerName = styled.div`
-	flex-grow: 1;
+    flex-grow: 1;
 `;
 
-export default function ServerHeader({ server, ctx }: Props) {
-	const permissions = useServerPermission(server._id, ctx);
-	const bannerURL = ctx.client.servers.getBannerURL(
-		server._id,
-		{ width: 480 },
-		true,
-	);
+export default observer(({ server }: Props) => {
+    const bannerURL = server.generateBannerURL({ width: 480 });
 
-	return (
-		<Header
-			borders
-			placement="secondary"
-			background={typeof bannerURL !== "undefined"}
-			style={{
-				background: bannerURL ? `url('${bannerURL}')` : undefined,
-			}}>
-			<ServerName>{server.name}</ServerName>
-			{(permissions & ServerPermission.ManageServer) > 0 && (
-				<div className="actions">
-					<Link to={`/server/${server._id}/settings`}>
-						<IconButton>
-							<Cog size={24} />
-						</IconButton>
-					</Link>
-				</div>
-			)}
-		</Header>
-	);
-}
+    return (
+        <Header
+            borders
+            placement="secondary"
+            background={typeof bannerURL !== "undefined"}
+            style={{
+                background: bannerURL ? `url('${bannerURL}')` : undefined,
+            }}>
+            <ServerName>{server.name}</ServerName>
+            {(server.permission & ServerPermission.ManageServer) > 0 && (
+                <div className="actions">
+                    <Link to={`/server/${server._id}/settings`}>
+                        <IconButton>
+                            <Cog size={24} />
+                        </IconButton>
+                    </Link>
+                </div>
+            )}
+        </Header>
+    );
+});

src/components/common/ServerIcon.tsx

-import { Server } from "revolt.js/dist/api/objects";
+import { observer } from "mobx-react-lite";
+import { Server } from "revolt.js/dist/maps/Servers";
 import styled from "styled-components";
 
 import { useContext } from "preact/hooks";
@@ -8,61 +9,60 @@ import { AppContext } from "../../context/revoltjs/RevoltClient";
 import { IconBaseProps, ImageIconBase } from "./IconBase";
 
 interface Props extends IconBaseProps<Server> {
-	server_name?: string;
+    server_name?: string;
 }
 
 const ServerText = styled.div`
-	display: grid;
-	padding: 0.2em;
-	overflow: hidden;
-	border-radius: 50%;
-	place-items: center;
-	color: var(--foreground);
-	background: var(--primary-background);
+    display: grid;
+    padding: 0.2em;
+    overflow: hidden;
+    border-radius: 50%;
+    place-items: center;
+    color: var(--foreground);
+    background: var(--primary-background);
 `;
 
-const fallback = "/assets/group.png";
-export default function ServerIcon(
-	props: Props & Omit<JSX.HTMLAttributes<HTMLImageElement>, keyof Props>,
-) {
-	const client = useContext(AppContext);
+// const fallback = "/assets/group.png";
+export default observer(
+    (
+        props: Props &
+            Omit<
+                JSX.HTMLAttributes<HTMLImageElement>,
+                keyof Props | "children" | "as"
+            >,
+    ) => {
+        const client = useContext(AppContext);
 
-	const {
-		target,
-		attachment,
-		size,
-		animate,
-		server_name,
-		children,
-		as,
-		...imgProps
-	} = props;
-	const iconURL = client.generateFileURL(
-		target?.icon ?? attachment,
-		{ max_side: 256 },
-		animate,
-	);
+        const { target, attachment, size, animate, server_name, ...imgProps } =
+            props;
+        const iconURL = client.generateFileURL(
+            target?.icon ?? attachment,
+            { max_side: 256 },
+            animate,
+        );
 
-	if (typeof iconURL === "undefined") {
-		const name = target?.name ?? server_name ?? "";
+        if (typeof iconURL === "undefined") {
+            const name = target?.name ?? server_name ?? "";
 
-		return (
-			<ServerText style={{ width: size, height: size }}>
-				{name
-					.split(" ")
-					.map((x) => x[0])
-					.filter((x) => typeof x !== "undefined")}
-			</ServerText>
-		);
-	}
+            return (
+                <ServerText style={{ width: size, height: size }}>
+                    {name
+                        .split(" ")
+                        .map((x) => x[0])
+                        .filter((x) => typeof x !== "undefined")}
+                </ServerText>
+            );
+        }
 
-	return (
-		<ImageIconBase
-			{...imgProps}
-			width={size}
-			height={size}
-			aria-hidden="true"
-			src={iconURL}
-		/>
-	);
-}
+        return (
+            <ImageIconBase
+                {...imgProps}
+                width={size}
+                height={size}
+                src={iconURL}
+                loading="lazy"
+                aria-hidden="true"
+            />
+        );
+    },
+);

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

+import styled from "styled-components";
+
+import { Text } from "preact-i18n";
+
+const Base = styled.div`
+    display: grid;
+    place-items: center;
+
+    z-index: 1;
+    grid-area: 1 / 1;
+
+    cursor: pointer;
+    user-select: none;
+    text-transform: uppercase;
+
+    span {
+        padding: 8px;
+        color: var(--foreground);
+        background: var(--primary-background);
+        border-radius: calc(var(--border-radius) * 4);
+    }
+`;
+
+interface Props {
+    set: (v: boolean) => void;
+}
+
+export default function Spoiler({ set }: Props) {
+    return (
+        <Base onClick={() => set(false)}>
+            <span>
+                <Text id="app.main.channel.misc.spoiler_attachment" />
+            </span>
+        </Base>
+    );
+}