feat: handle nsfw flag & added monospace font (#258)

package.json

@@ -65,6 +65,7 @@
         "@fontsource/space-mono": "^4.4.5",
         "@fontsource/ubuntu": "^4.4.5",
         "@fontsource/ubuntu-mono": "^4.4.5",
+        "@fontsource/jetbrains-mono": "^4.4.5",
         "@hcaptcha/react-hcaptcha": "^0.3.6",
         "@preact/preset-vite": "^2.0.0",
         "@rollup/plugin-replace": "^2.4.2",

src/context/Theme.tsx

@@ -62,7 +62,8 @@ export type MonospaceFonts =
     | "Roboto Mono"
     | "Source Code Pro"
     | "Space Mono"
-    | "Ubuntu Mono";
+    | "Ubuntu Mono"
+    | "JetBrains Mono";
 
 export type Theme = {
     [variable in Variables]: string;
@@ -211,6 +212,10 @@ export const MONOSPACE_FONTS: Record<
         name: "Ubuntu Mono",
         load: () => import("@fontsource/ubuntu-mono/400.css"),
     },
+    "JetBrains Mono": {
+        name: "JetBrains Mono",
+        load: () => import("@fontsource/jetbrains-mono/400.css"),
+    },
 };
 
 export const FONT_KEYS = Object.keys(FONTS).sort();

src/pages/channels/Channel.tsx

@@ -103,7 +103,7 @@ const TextChannel = observer(({ channel }: { channel: ChannelI }) => {
                 !!(
                     (channel.channel_type === "TextChannel" ||
                         channel.channel_type === "Group") &&
-                    channel.name?.includes("nsfw")
+                    channel.nsfw
                 )
             }>
             <ChannelHeader

src/pages/settings/channel/Overview.tsx

@@ -11,6 +11,7 @@ import { FileUploader } from "../../../context/revoltjs/FileUploads";
 
 import Button from "../../../components/ui/Button";
 import InputBox from "../../../components/ui/InputBox";
+import Checkbox from "../../../components/ui/Checkbox";
 
 interface Props {
     channel: Channel;
@@ -32,19 +33,26 @@ const Row = styled.div`
 export default observer(({ channel }: Props) => {
     const [name, setName] = useState(channel.name ?? undefined);
     const [description, setDescription] = useState(channel.description ?? "");
+    const [nsfw, setNSFW] = useState(channel.nsfw ?? false);
 
     useEffect(() => setName(channel.name ?? undefined), [channel.name]);
     useEffect(
         () => setDescription(channel.description ?? ""),
         [channel.description],
     );
+    useEffect(
+        () => setNSFW(channel.nsfw ?? false),
+        [channel.nsfw],
+    );
 
     const [changed, setChanged] = useState(false);
     function save() {
-        const changes: Record<string, string | undefined> = {};
+        const changes: Record<string, string | boolean | undefined> = {};
         if (name !== channel.name) changes.name = name;
         if (description !== channel.description)
             changes.description = description;
+        if (nsfw !== channel.nsfw)
+            changes.nsfw = nsfw;
 
         channel.edit(changes);
         setChanged(false);
@@ -110,6 +118,19 @@ export default observer(({ channel }: Props) => {
                     if (!changed) setChanged(true);
                 }}
             />
+            {channel.channel_type === "VoiceChannel" ? '' : (
+                <Checkbox
+                    checked={nsfw ?? false}
+                    onChange={
+                        (nsfwchange) => { 
+                            setNSFW(nsfwchange);
+                            if (!changed) setChanged(true);
+                        }
+                    }
+                    description="Set this channel to NSFW.">
+                    NSFW
+                </Checkbox>
+            )}
             <p>
                 <Button onClick={save} contrast disabled={!changed}>
                     <Text id="app.special.modals.actions.save" />