From 4ef64cbebcf92d25f2f65f1905272291316e0720 Mon Sep 17 00:00:00 2001
From: Ethan Roseman <ethteck@gmail.com>
Date: Wed, 11 Dec 2024 01:03:56 +0900
Subject: [PATCH] Run Biome formatter (#1392)

* Run formatter

* Part 2
---
 frontend/biome.json                           |   5 -
 frontend/next.config.js                       | 289 ++++---
 frontend/postcss.config.js                    |   8 +-
 frontend/src/app/(navfooter)/SiteStats.tsx    |  46 +-
 frontend/src/app/(navfooter)/WelcomeInfo.tsx  |  97 ++-
 .../(navfooter)/credits/ContributorsList.tsx  |  99 ++-
 .../src/app/(navfooter)/credits/LinkList.tsx  |  26 +-
 frontend/src/app/(navfooter)/credits/page.tsx | 143 ++--
 frontend/src/app/(navfooter)/error.tsx        |   6 +-
 frontend/src/app/(navfooter)/faq/page.tsx     | 305 ++++---
 frontend/src/app/(navfooter)/layout.tsx       |  28 +-
 frontend/src/app/(navfooter)/login/page.tsx   | 145 ++--
 .../app/(navfooter)/new/NewScratchForm.tsx    | 489 ++++++-----
 .../src/app/(navfooter)/new/description.ts    |   5 +-
 frontend/src/app/(navfooter)/new/layout.tsx   |  10 +-
 frontend/src/app/(navfooter)/new/page.tsx     |  24 +-
 frontend/src/app/(navfooter)/page.tsx         |  48 +-
 .../app/(navfooter)/platform/[id]/page.tsx    |  81 +-
 .../src/app/(navfooter)/preset/[id]/page.tsx  |  87 +-
 frontend/src/app/(navfooter)/preset/page.tsx  |  10 +-
 .../src/app/(navfooter)/preset/presets.tsx    |  39 +-
 frontend/src/app/(navfooter)/privacy/page.tsx | 245 +++---
 .../src/app/(navfooter)/settings/Checkbox.tsx |  60 +-
 .../src/app/(navfooter)/settings/NavItem.tsx  |  46 +-
 .../app/(navfooter)/settings/RadioList.tsx    | 106 ++-
 .../src/app/(navfooter)/settings/Section.tsx  |  22 +-
 .../app/(navfooter)/settings/SliderField.tsx  | 120 +--
 .../app/(navfooter)/settings/TextField.tsx    |  78 +-
 .../settings/account/ProfileSection.tsx       |  47 +-
 .../settings/account/SignOutButton.tsx        |  32 +-
 .../settings/account/UserState.tsx            |  55 +-
 .../app/(navfooter)/settings/account/page.tsx |  22 +-
 .../appearance/AppearanceSettings.tsx         | 128 +--
 .../settings/appearance/ExampleCodeMirror.tsx |  28 +-
 .../(navfooter)/settings/appearance/page.tsx  |  12 +-
 .../settings/editor/EditorSettings.tsx        | 236 +++---
 .../app/(navfooter)/settings/editor/page.tsx  |  12 +-
 .../src/app/(navfooter)/settings/layout.tsx   |  48 +-
 .../src/app/(navfooter)/u/[username]/page.tsx |  38 +-
 frontend/src/app/ThemeProvider.tsx            |  56 +-
 frontend/src/app/error.tsx                    | 136 +--
 frontend/src/app/layout.tsx                   |  70 +-
 frontend/src/app/not-found.tsx                |  45 +-
 frontend/src/app/opengraph-image.tsx          | 112 ++-
 .../src/app/scratch/[slug]/ScratchEditor.tsx  | 144 ++--
 .../src/app/scratch/[slug]/claim/page.tsx     |  49 +-
 .../app/scratch/[slug]/getScratchDetails.ts   |  24 +-
 frontend/src/app/scratch/[slug]/loading.tsx   | 148 ++--
 .../app/scratch/[slug]/opengraph-image.tsx    | 149 ++--
 frontend/src/app/scratch/[slug]/page.tsx      |  36 +-
 frontend/src/components/AsyncButton.tsx       | 131 +--
 frontend/src/components/Breadcrumbs.tsx       |  43 +-
 frontend/src/components/Button.tsx            | 106 +--
 frontend/src/components/ColorSchemeEditor.tsx | 116 +--
 frontend/src/components/ColorSchemePicker.tsx |  75 +-
 frontend/src/components/CustomLayout.tsx      | 119 +--
 .../src/components/Diff/CompilationPanel.tsx  | 235 +++---
 frontend/src/components/Diff/Diff.tsx         | 409 +++++----
 .../src/components/Diff/DiffRowAsmDiffer.tsx  | 217 +++--
 .../src/components/Diff/DiffRowObjdiff.tsx    | 407 +++++----
 frontend/src/components/Diff/DragBar.tsx      |  68 +-
 frontend/src/components/Diff/Highlighter.tsx  |  48 +-
 frontend/src/components/DismissableBanner.tsx |  36 +-
 frontend/src/components/Editor/CodeMirror.tsx | 202 +++--
 frontend/src/components/ErrorBoundary.tsx     |  32 +-
 frontend/src/components/Footer.tsx            | 118 +--
 frontend/src/components/GhostButton.tsx       |  50 +-
 frontend/src/components/GitHubLoginButton.tsx |  40 +-
 frontend/src/components/Logotype.tsx          |  17 +-
 frontend/src/components/Nav/LoginState.tsx    |  79 +-
 frontend/src/components/Nav/Nav.tsx           |  88 +-
 frontend/src/components/Nav/Search.tsx        | 340 ++++----
 frontend/src/components/Nav/UserMenuItems.tsx |  68 +-
 frontend/src/components/Nav/index.tsx         |   4 +-
 frontend/src/components/NumberInput.tsx       | 103 ++-
 frontend/src/components/PlatformLink.tsx      |  30 +-
 .../PlatformSelect/PlatformIcon.tsx           |  92 +-
 .../PlatformSelect/PlatformName.tsx           |  25 +-
 .../PlatformSelect/PlatformSelect.tsx         |  68 +-
 .../PlatformSelect/ScrollingPlatformIcons.tsx |  30 +-
 .../src/components/PlatformSelect/index.ts    |   8 +-
 frontend/src/components/PresetList.tsx        | 126 ++-
 frontend/src/components/ScoreBadge.tsx        |  89 +-
 frontend/src/components/Scratch/Scratch.tsx   | 563 ++++++++-----
 .../components/Scratch/ScratchMatchBanner.tsx |  50 +-
 .../components/Scratch/ScratchProgressBar.tsx |  25 +-
 .../src/components/Scratch/ScratchToolbar.tsx | 464 +++++-----
 .../components/Scratch/SortableFamilyList.tsx | 150 ++--
 .../Scratch/hooks/useFuzzySaveCallback.ts     |  30 +-
 .../Scratch/hooks/useLanguageServer.ts        | 149 ++--
 .../hooks/useWarnBeforeScratchUnload.ts       |  10 +-
 frontend/src/components/Scratch/index.ts      |   6 +-
 .../components/Scratch/panels/AboutPanel.tsx  | 131 +--
 .../Scratch/panels/DecompilePanel.tsx         |  98 +--
 .../components/Scratch/panels/FamilyPanel.tsx |  33 +-
 frontend/src/components/ScratchList.tsx       | 288 ++++---
 frontend/src/components/ScrollContext.tsx     |   4 +-
 frontend/src/components/Select.tsx            |  39 +-
 frontend/src/components/Select2.tsx           |  54 +-
 frontend/src/components/SetPageTitle.tsx      |   8 +-
 frontend/src/components/Shortcut.tsx          | 173 ++--
 frontend/src/components/Sort.tsx              |  65 +-
 frontend/src/components/Tabs.tsx              | 358 ++++----
 frontend/src/components/ThemePicker.tsx       |  68 +-
 frontend/src/components/TimeAgo.tsx           |  21 +-
 frontend/src/components/VerticalMenu.tsx      | 210 +++--
 frontend/src/components/YourScratchList.tsx   |  29 +-
 .../src/components/compiler/CompilerOpts.tsx  | 791 +++++++++++-------
 .../src/components/compiler/PresetSelect.tsx  |  84 +-
 frontend/src/components/compiler/compilers.ts |  19 +-
 .../src/components/user/AnonymousFrog.tsx     |  41 +-
 frontend/src/components/user/Profile.tsx      |  91 +-
 frontend/src/components/user/UserAvatar.tsx   |  54 +-
 frontend/src/components/user/UserLink.tsx     |  38 +-
 frontend/src/components/user/UserMention.tsx  |  62 +-
 .../src/components/user/tabs/ScratchesTab.tsx |   8 +-
 frontend/src/lib/api.ts                       | 492 ++++++-----
 frontend/src/lib/api/request.ts               | 102 +--
 frontend/src/lib/api/types.ts                 | 232 ++---
 frontend/src/lib/api/urls.ts                  |  21 +-
 frontend/src/lib/codemirror/basic-setup.ts    |  37 +-
 frontend/src/lib/codemirror/color-scheme.ts   |  48 +-
 frontend/src/lib/codemirror/cpp.ts            |  31 +-
 .../lib/codemirror/default-keymap/indent.ts   |  18 +-
 .../lib/codemirror/default-keymap/index.ts    |  38 +-
 .../codemirror/default-keymap/multiCursor.ts  |  52 +-
 frontend/src/lib/codemirror/default-theme.ts  |  76 +-
 frontend/src/lib/codemirror/languageServer.ts | 650 +++++++-------
 .../src/lib/codemirror/useCompareExtension.ts | 163 ++--
 .../codemirror/useCompareExtension.worker.ts  |  21 +-
 frontend/src/lib/device.ts                    |  10 +-
 frontend/src/lib/hooks.ts                     | 111 +--
 frontend/src/lib/i18n/translate.ts            |  26 +-
 frontend/src/lib/interdiff.ts                 |  94 ++-
 frontend/src/lib/oauth.ts                     |  31 +-
 frontend/src/lib/objdiff.ts                   |  22 +-
 frontend/src/lib/settings.ts                  |  80 +-
 frontend/src/lib/title.ts                     |   5 +-
 frontend/src/misc_types.d.ts                  |  16 +-
 frontend/tailwind.config.js                   |  49 +-
 140 files changed, 8309 insertions(+), 6243 deletions(-)

diff --git a/frontend/biome.json b/frontend/biome.json
index d7f2f35b1..87f234e4e 100644
--- a/frontend/biome.json
+++ b/frontend/biome.json
@@ -48,10 +48,5 @@
                 "useSortedClasses": "error"
             }
         }
-    },
-    "javascript": {
-        "formatter": {
-            "enabled": false
-        }
     }
 }
diff --git a/frontend/next.config.js b/frontend/next.config.js
index fb8c8b2ec..aa864aa46 100644
--- a/frontend/next.config.js
+++ b/frontend/next.config.js
@@ -1,168 +1,185 @@
-const { Compilation } = require("webpack")
-const { execSync } = require("node:child_process")
-const { config } = require("dotenv")
+const { Compilation } = require("webpack");
+const { execSync } = require("node:child_process");
+const { config } = require("dotenv");
 
 for (const envFile of [".env.local", ".env"]) {
-    config({ path: `../${envFile}` })
+    config({ path: `../${envFile}` });
 }
 
 const getEnvBool = (key, fallback = false) => {
-    const value = process.env[key]
+    const value = process.env[key];
     if (value === "false" || value === "0" || value === "off") {
-        return false
+        return false;
     }
     if (value === "true" || value === "1" || value === "on") {
-        return true
+        return true;
     }
-    return fallback
-}
+    return fallback;
+};
 
-let git_hash
+let git_hash;
 try {
-    git_hash = execSync("git rev-parse HEAD", { stdio: "pipe" }).toString().trim()
+    git_hash = execSync("git rev-parse HEAD", { stdio: "pipe" })
+        .toString()
+        .trim();
 } catch (error) {
-    console.log("Unable to get git hash, assume running inside Docker")
-    git_hash = "abc123"
+    console.log("Unable to get git hash, assume running inside Docker");
+    git_hash = "abc123";
 }
 
-const { withPlausibleProxy } = require("next-plausible")
+const { withPlausibleProxy } = require("next-plausible");
 
 const removeImports = require("next-remove-imports")({
     //test: /node_modules([\s\S]*?)\.(tsx|ts|js|mjs|jsx)$/,
     //matchImports: "\\.(less|css|scss|sass|styl)$"
-})
+});
 
-const mediaUrl = new URL(process.env.MEDIA_URL ?? "http://localhost")
+const mediaUrl = new URL(process.env.MEDIA_URL ?? "http://localhost");
 
 let app = withPlausibleProxy({
     customDomain: "https://stats.decomp.me",
-})(removeImports({
-    async redirects() {
-        return [
-            {
-                source: "/scratch",
-                destination: "/",
-                permanent: true,
-            },
-            {
-                source: "/scratch/new",
-                destination: "/new",
-                permanent: true,
-            },
-            {
-                source: "/settings",
-                destination: "/settings/account",
-                permanent: false,
-            },
-        ]
-    },
-    async rewrites() {
-        return []
-    },
-    async headers() {
-        return [
-            {
-                source: "/(.*)", // all routes
-                headers: [
-                    {
-                        key: "X-DNS-Prefetch-Control",
-                        value: "on",
-                    },
-                    {
-                        key: "Cross-Origin-Opener-Policy",
-                        value: "same-origin",
-                    },
-                    {
-                        key: "Cross-Origin-Embedder-Policy",
-                        value: "require-corp",
-                    },
-                ],
-            },
-        ]
-    },
-    webpack(config) {
-        config.module.rules.push({
-            test: /\.svg$/,
-            use: ["@svgr/webpack"],
-        })
+})(
+    removeImports({
+        async redirects() {
+            return [
+                {
+                    source: "/scratch",
+                    destination: "/",
+                    permanent: true,
+                },
+                {
+                    source: "/scratch/new",
+                    destination: "/new",
+                    permanent: true,
+                },
+                {
+                    source: "/settings",
+                    destination: "/settings/account",
+                    permanent: false,
+                },
+            ];
+        },
+        async rewrites() {
+            return [];
+        },
+        async headers() {
+            return [
+                {
+                    source: "/(.*)", // all routes
+                    headers: [
+                        {
+                            key: "X-DNS-Prefetch-Control",
+                            value: "on",
+                        },
+                        {
+                            key: "Cross-Origin-Opener-Policy",
+                            value: "same-origin",
+                        },
+                        {
+                            key: "Cross-Origin-Embedder-Policy",
+                            value: "require-corp",
+                        },
+                    ],
+                },
+            ];
+        },
+        webpack(config) {
+            config.module.rules.push({
+                test: /\.svg$/,
+                use: ["@svgr/webpack"],
+            });
 
-        // @open-rpc/client-js brings in some dependencies which, in turn, have optional dependencies.
-        // This confuses the heck out of webpack, so tell it should just sub in a CommonJS-style "require" statement
-        // instead (which will fail and trigger the fallback at runtime)
-        // https://stackoverflow.com/questions/58697934/webpack-how-do-you-require-an-optional-dependency-in-bundle-saslprep
-        config.externals.push({
-            "encoding": "commonjs encoding",
-            "bufferutil": "commonjs bufferutil",
-            "utf-8-validate": "commonjs utf-8-validate",
-        })
+            // @open-rpc/client-js brings in some dependencies which, in turn, have optional dependencies.
+            // This confuses the heck out of webpack, so tell it should just sub in a CommonJS-style "require" statement
+            // instead (which will fail and trigger the fallback at runtime)
+            // https://stackoverflow.com/questions/58697934/webpack-how-do-you-require-an-optional-dependency-in-bundle-saslprep
+            config.externals.push({
+                encoding: "commonjs encoding",
+                bufferutil: "commonjs bufferutil",
+                "utf-8-validate": "commonjs utf-8-validate",
+            });
 
-        // All of the vscode-* packages (jsonrpc, languageserver-protocol, etc.) are distributed as UMD modules.
-        // This also leaves webpack with no idea how to handle require statements.
-        // umd-compat-loader strips away the hedaer UMD adds to allow browsers to parse ES modules
-        // and just treats the importee as an ES module.
-        config.module.rules.push({
-            "test": /node_modules[\\|/](vscode-.*)/,
-            "use": {
-                "loader": "umd-compat-loader",
-            },
-        })
+            // All of the vscode-* packages (jsonrpc, languageserver-protocol, etc.) are distributed as UMD modules.
+            // This also leaves webpack with no idea how to handle require statements.
+            // umd-compat-loader strips away the hedaer UMD adds to allow browsers to parse ES modules
+            // and just treats the importee as an ES module.
+            config.module.rules.push({
+                test: /node_modules[\\|/](vscode-.*)/,
+                use: {
+                    loader: "umd-compat-loader",
+                },
+            });
 
-        // XXX: Terser/SWC currently breaks while minifying objdiff's ESM worker in the static directory because
-        // it uses `import.meta.url`. next.js provides no way to control this behavior, of course, so we'll
-        // hook into the optimization stage and mark assets in `static/media/` as already minified.
-        // https://github.com/vercel/next.js/issues/33914
-        // https://github.com/vercel/next.js/discussions/61549
-        config.optimization.minimizer.unshift({
-            apply(compiler) {
-                const pluginName = "SkipWorkerMinify"
-                compiler.hooks.thisCompilation.tap(pluginName, compilation=>{
-                    compilation.hooks.processAssets.tap({
-                        name: pluginName,
-                        stage: Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE,
-                    }, assets=>{
-                        for (const assetName in assets) {
-                            if (/^static\/media\//.test(assetName)) {
-                                compilation.updateAsset(assetName, assets[assetName], {
-                                    minimized: true,
-                                })
-                            }
-                        }
-                    })
-                })
-            },
-        })
+            // XXX: Terser/SWC currently breaks while minifying objdiff's ESM worker in the static directory because
+            // it uses `import.meta.url`. next.js provides no way to control this behavior, of course, so we'll
+            // hook into the optimization stage and mark assets in `static/media/` as already minified.
+            // https://github.com/vercel/next.js/issues/33914
+            // https://github.com/vercel/next.js/discussions/61549
+            config.optimization.minimizer.unshift({
+                apply(compiler) {
+                    const pluginName = "SkipWorkerMinify";
+                    compiler.hooks.thisCompilation.tap(
+                        pluginName,
+                        (compilation) => {
+                            compilation.hooks.processAssets.tap(
+                                {
+                                    name: pluginName,
+                                    stage: Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE,
+                                },
+                                (assets) => {
+                                    for (const assetName in assets) {
+                                        if (
+                                            /^static\/media\//.test(assetName)
+                                        ) {
+                                            compilation.updateAsset(
+                                                assetName,
+                                                assets[assetName],
+                                                {
+                                                    minimized: true,
+                                                },
+                                            );
+                                        }
+                                    }
+                                },
+                            );
+                        },
+                    );
+                },
+            });
 
-        return config
-    },
-    images: {
-        remotePatterns: [{
-            //  Expected 'http' | 'https', received 'http:' at "images.remotePatterns[0].protocol"
-            protocol: mediaUrl.protocol.replace(":", ""),
-            hostname: mediaUrl.hostname,
-            port: mediaUrl.port,
-            pathname: "/**",
+            return config;
+        },
+        images: {
+            remotePatterns: [
+                {
+                    //  Expected 'http' | 'https', received 'http:' at "images.remotePatterns[0].protocol"
+                    protocol: mediaUrl.protocol.replace(":", ""),
+                    hostname: mediaUrl.hostname,
+                    port: mediaUrl.port,
+                    pathname: "/**",
+                },
+                {
+                    protocol: "https",
+                    hostname: "avatars.githubusercontent.com",
+                    port: "",
+                    pathname: "/**",
+                },
+            ],
+            unoptimized: !getEnvBool("FRONTEND_USE_IMAGE_PROXY"),
         },
-        {
-            protocol: "https",
-            hostname: "avatars.githubusercontent.com",
-            port: "",
-            pathname: "/**",
+        swcMinify: true,
+        env: {
+            // XXX: don't need 'NEXT_PUBLIC_' prefix here; we could just use 'API_BASE' and 'GITHUB_CLIENT_ID'
+            // See note at top of https://nextjs.org/docs/api-reference/next.config.js/environment-variables for more information
+            NEXT_PUBLIC_API_BASE: process.env.API_BASE,
+            NEXT_PUBLIC_GITHUB_CLIENT_ID: process.env.GITHUB_CLIENT_ID,
+            NEXT_PUBLIC_COMMIT_HASH: git_hash,
         },
-        ],
-        unoptimized: !getEnvBool("FRONTEND_USE_IMAGE_PROXY"),
-    },
-    swcMinify: true,
-    env: {
-        // XXX: don't need 'NEXT_PUBLIC_' prefix here; we could just use 'API_BASE' and 'GITHUB_CLIENT_ID'
-        // See note at top of https://nextjs.org/docs/api-reference/next.config.js/environment-variables for more information
-        NEXT_PUBLIC_API_BASE: process.env.API_BASE,
-        NEXT_PUBLIC_GITHUB_CLIENT_ID: process.env.GITHUB_CLIENT_ID,
-        NEXT_PUBLIC_COMMIT_HASH: git_hash,
-    },
-}))
+    }),
+);
 
 if (process.env.ANALYZE === "true") {
-    app = require("@next/bundle-analyzer")(app)
+    app = require("@next/bundle-analyzer")(app);
 }
 
-module.exports = app
+module.exports = app;
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
index dd943edf5..2c5fea0c5 100644
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@@ -1,7 +1,3 @@
 module.exports = {
-    plugins: [
-        "tailwindcss",
-        "autoprefixer",
-        "cssnano",
-    ],
-}
+    plugins: ["tailwindcss", "autoprefixer", "cssnano"],
+};
diff --git a/frontend/src/app/(navfooter)/SiteStats.tsx b/frontend/src/app/(navfooter)/SiteStats.tsx
index 62efadb4d..dd8800478 100644
--- a/frontend/src/app/(navfooter)/SiteStats.tsx
+++ b/frontend/src/app/(navfooter)/SiteStats.tsx
@@ -1,34 +1,42 @@
-"use client"
+"use client";
 
-import type { ReactNode } from "react"
+import type { ReactNode } from "react";
 
-import Link from "next/link"
+import Link from "next/link";
 
-import { useStats } from "@/lib/api"
+import { useStats } from "@/lib/api";
 
-function Stat({ children, href }: { children: ReactNode, href?: string }) {
+function Stat({ children, href }: { children: ReactNode; href?: string }) {
     if (href) {
-        return <Link href={href} className="hover:underline active:translate-y-px">
-            {children}
-        </Link>
+        return (
+            <Link href={href} className="hover:underline active:translate-y-px">
+                {children}
+            </Link>
+        );
     }
 
-    return <span>
-        {children}
-    </span>
+    return <span>{children}</span>;
 }
 
 export default function SiteStats() {
-    const stats = useStats()
+    const stats = useStats();
 
     if (!stats) {
-        return null
+        return null;
     }
 
-    return <p className="inline-flex gap-8 text-gray-11 text-xs md:gap-16">
-        <Stat>{stats.scratch_count.toLocaleString()} scratches created</Stat>
-        <Stat href="https://stats.decomp.me/decomp.me">{stats.profile_count.toLocaleString()} unique visitors</Stat>
-        <Stat>{stats.github_user_count.toLocaleString()} users signed up</Stat>
-        <Stat>{stats.asm_count.toLocaleString()} asm globs submitted</Stat>
-    </p>
+    return (
+        <p className="inline-flex gap-8 text-gray-11 text-xs md:gap-16">
+            <Stat>
+                {stats.scratch_count.toLocaleString()} scratches created
+            </Stat>
+            <Stat href="https://stats.decomp.me/decomp.me">
+                {stats.profile_count.toLocaleString()} unique visitors
+            </Stat>
+            <Stat>
+                {stats.github_user_count.toLocaleString()} users signed up
+            </Stat>
+            <Stat>{stats.asm_count.toLocaleString()} asm globs submitted</Stat>
+        </p>
+    );
 }
diff --git a/frontend/src/app/(navfooter)/WelcomeInfo.tsx b/frontend/src/app/(navfooter)/WelcomeInfo.tsx
index c03ba033d..58e9b5636 100644
--- a/frontend/src/app/(navfooter)/WelcomeInfo.tsx
+++ b/frontend/src/app/(navfooter)/WelcomeInfo.tsx
@@ -1,55 +1,62 @@
-import { headers } from "next/headers"
-import Link from "next/link"
+import { headers } from "next/headers";
+import Link from "next/link";
 
-import { ArrowRightIcon } from "@primer/octicons-react"
+import { ArrowRightIcon } from "@primer/octicons-react";
 
-import Button from "@/components/Button"
-import GitHubLoginButton from "@/components/GitHubLoginButton"
-import ScrollingPlatformIcons from "@/components/PlatformSelect/ScrollingPlatformIcons"
+import Button from "@/components/Button";
+import GitHubLoginButton from "@/components/GitHubLoginButton";
+import ScrollingPlatformIcons from "@/components/PlatformSelect/ScrollingPlatformIcons";
 
-import SiteStats from "./SiteStats"
+import SiteStats from "./SiteStats";
 
-export const SITE_DESCRIPTION = "A collaborative reverse-engineering platform for working on decompilation projects with others to learn about how your favorite games work."
+export const SITE_DESCRIPTION =
+    "A collaborative reverse-engineering platform for working on decompilation projects with others to learn about how your favorite games work.";
 
 export default function WelcomeInfo() {
-    const saveDataEnabled = headers().get("Save-Data") === "on"
+    const saveDataEnabled = headers().get("Save-Data") === "on";
 
-    return <div className="relative overflow-x-hidden p-2">
-        {!saveDataEnabled && <div className="-z-10 absolute top-14 hidden w-full opacity-80 sm:block">
-            <ScrollingPlatformIcons />
-            <div
-                className="absolute top-0 size-full"
-                style={{
-                    // Gradient to only show icons in the middle
-                    background: "linear-gradient(to right, transparent, hsl(var(--color-mauve1)) 40%, hsl(var(--color-mauve1)) 60%, transparent)",
-                }}
-            />
-        </div>}
-        <div className="text-center text-lg">
-            <h1
-                className="mx-auto w-full max-w-lg font-extrabold text-4xl text-gray-12 !md:leading-[0.8] md:max-w-3xl md:text-6xl"
-                style={{
-                    // Shadow to make text more readable on the background
-                    textShadow: "0 1px 0.3rem hsl(var(--color-mauve10) / 0.4)",
-                }}
-            >
-                Collaboratively decompile code in your browser.
-            </h1>
-            <p className="mx-auto my-6 w-full max-w-screen-sm text-gray-11 leading-tight">
-                {SITE_DESCRIPTION}
-            </p>
-            <div className="flex flex-col items-center justify-center gap-2 md:flex-row">
-                <Link href="/new">
-                    <Button primary>
-                        Start decomping
-                        <ArrowRightIcon />
-                    </Button>
-                </Link>
-                <GitHubLoginButton />
-            </div>
-            <div className="my-6 hidden sm:block">
-                <SiteStats />
+    return (
+        <div className="relative overflow-x-hidden p-2">
+            {!saveDataEnabled && (
+                <div className="-z-10 absolute top-14 hidden w-full opacity-80 sm:block">
+                    <ScrollingPlatformIcons />
+                    <div
+                        className="absolute top-0 size-full"
+                        style={{
+                            // Gradient to only show icons in the middle
+                            background:
+                                "linear-gradient(to right, transparent, hsl(var(--color-mauve1)) 40%, hsl(var(--color-mauve1)) 60%, transparent)",
+                        }}
+                    />
+                </div>
+            )}
+            <div className="text-center text-lg">
+                <h1
+                    className="mx-auto w-full max-w-lg font-extrabold text-4xl text-gray-12 !md:leading-[0.8] md:max-w-3xl md:text-6xl"
+                    style={{
+                        // Shadow to make text more readable on the background
+                        textShadow:
+                            "0 1px 0.3rem hsl(var(--color-mauve10) / 0.4)",
+                    }}
+                >
+                    Collaboratively decompile code in your browser.
+                </h1>
+                <p className="mx-auto my-6 w-full max-w-screen-sm text-gray-11 leading-tight">
+                    {SITE_DESCRIPTION}
+                </p>
+                <div className="flex flex-col items-center justify-center gap-2 md:flex-row">
+                    <Link href="/new">
+                        <Button primary>
+                            Start decomping
+                            <ArrowRightIcon />
+                        </Button>
+                    </Link>
+                    <GitHubLoginButton />
+                </div>
+                <div className="my-6 hidden sm:block">
+                    <SiteStats />
+                </div>
             </div>
         </div>
-    </div>
+    );
 }
diff --git a/frontend/src/app/(navfooter)/credits/ContributorsList.tsx b/frontend/src/app/(navfooter)/credits/ContributorsList.tsx
index 72ff557b4..20a6bc86b 100644
--- a/frontend/src/app/(navfooter)/credits/ContributorsList.tsx
+++ b/frontend/src/app/(navfooter)/credits/ContributorsList.tsx
@@ -1,68 +1,89 @@
-import { LinkExternalIcon } from "@primer/octicons-react"
+import { LinkExternalIcon } from "@primer/octicons-react";
 
-import GhostButton from "@/components/GhostButton"
-import UserAvatar from "@/components/user/UserAvatar"
-import UserMention, { type GithubUser, getUserName } from "@/components/user/UserMention"
-import { get } from "@/lib/api/request"
-import type { User } from "@/lib/api/types"
+import GhostButton from "@/components/GhostButton";
+import UserAvatar from "@/components/user/UserAvatar";
+import UserMention, {
+    type GithubUser,
+    getUserName,
+} from "@/components/user/UserMention";
+import { get } from "@/lib/api/request";
+import type { User } from "@/lib/api/types";
 
 interface GitHubContributor {
-    login: string
-    contributions: number
+    login: string;
+    contributions: number;
 }
 
-export type Contributor = User | GithubUser
+export type Contributor = User | GithubUser;
 
 /** Gets the list of contributor usernames for the repo from GitHub. */
 export async function getContributorUsernames(): Promise<string[]> {
-    const req = await fetch("https://api.github.com/repos/decompme/decomp.me/contributors?page_size=100", {
-        cache: "force-cache",
-    })
+    const req = await fetch(
+        "https://api.github.com/repos/decompme/decomp.me/contributors?page_size=100",
+        {
+            cache: "force-cache",
+        },
+    );
 
     if (!req.ok) {
-        console.warn("failed to fetch contributors:", await req.text())
-        return ["ethteck", "nanaian"]
+        console.warn("failed to fetch contributors:", await req.text());
+        return ["ethteck", "nanaian"];
     }
 
-    const contributors = await req.json() as GitHubContributor[]
-    contributors.sort((a, b) => b.contributions - a.contributions)
-    return contributors.map((contributor) => contributor.login)
+    const contributors = (await req.json()) as GitHubContributor[];
+    contributors.sort((a, b) => b.contributions - a.contributions);
+    return contributors.map((contributor) => contributor.login);
 }
 
-export async function usernameToContributor(username: string): Promise<Contributor> {
+export async function usernameToContributor(
+    username: string,
+): Promise<Contributor> {
     try {
         // Try and get decomp.me information if they have an account
-        const user: User = await get(`/users/${username}`)
-        return user
+        const user: User = await get(`/users/${username}`);
+        return user;
     } catch (error) {
         // Fall back to GitHub information
-        return { login: username }
+        return { login: username };
     }
 }
 
 export function ContributorItem({ contributor }: { contributor: Contributor }) {
-    return <li className="flex items-center p-2 md:w-1/3">
-        {!("login" in contributor) && <UserAvatar user={contributor} className="mr-1.5 size-6" />}
-        <UserMention user={contributor} />
-    </li>
+    return (
+        <li className="flex items-center p-2 md:w-1/3">
+            {!("login" in contributor) && (
+                <UserAvatar user={contributor} className="mr-1.5 size-6" />
+            )}
+            <UserMention user={contributor} />
+        </li>
+    );
 }
 
-export default function ContributorsList({ contributors }: { contributors: Contributor[] }) {
+export default function ContributorsList({
+    contributors,
+}: { contributors: Contributor[] }) {
     if (!contributors.length) {
-        return null
+        return null;
     }
 
-    return <div className="py-4">
-        <div className="mb-2 flex items-center justify-between">
-            <h3 className="font-medium text-gray-12 text-lg tracking-tight md:text-2xl">
-                Contributors
-            </h3>
-            <GhostButton href="https://github.com/decompme/decomp.me/graphs/contributors">
-                View on GitHub <LinkExternalIcon />
-            </GhostButton>
+    return (
+        <div className="py-4">
+            <div className="mb-2 flex items-center justify-between">
+                <h3 className="font-medium text-gray-12 text-lg tracking-tight md:text-2xl">
+                    Contributors
+                </h3>
+                <GhostButton href="https://github.com/decompme/decomp.me/graphs/contributors">
+                    View on GitHub <LinkExternalIcon />
+                </GhostButton>
+            </div>
+            <ul className="flex flex-wrap">
+                {contributors.map((contributor) => (
+                    <ContributorItem
+                        key={getUserName(contributor)}
+                        contributor={contributor}
+                    />
+                ))}
+            </ul>
         </div>
-        <ul className="flex flex-wrap">
-            {contributors.map(contributor => <ContributorItem key={getUserName(contributor)} contributor={contributor} />)}
-        </ul>
-    </div>
+    );
 }
diff --git a/frontend/src/app/(navfooter)/credits/LinkList.tsx b/frontend/src/app/(navfooter)/credits/LinkList.tsx
index 1f5261ff7..e40135946 100644
--- a/frontend/src/app/(navfooter)/credits/LinkList.tsx
+++ b/frontend/src/app/(navfooter)/credits/LinkList.tsx
@@ -1,17 +1,19 @@
-import GhostButton from "@/components/GhostButton"
+import GhostButton from "@/components/GhostButton";
 
 export type Props = {
-    links: { [key: string]: string }
-}
+    links: { [key: string]: string };
+};
 
 export default function LinkList({ links }: Props) {
-    return <ul className="flex flex-wrap">
-        {Object.entries(links).map(([name, url]) => {
-            return <li key={name} className="p-2">
-                <GhostButton href={url}>
-                    {name}
-                </GhostButton>
-            </li>
-        })}
-    </ul>
+    return (
+        <ul className="flex flex-wrap">
+            {Object.entries(links).map(([name, url]) => {
+                return (
+                    <li key={name} className="p-2">
+                        <GhostButton href={url}>{name}</GhostButton>
+                    </li>
+                );
+            })}
+        </ul>
+    );
 }
diff --git a/frontend/src/app/(navfooter)/credits/page.tsx b/frontend/src/app/(navfooter)/credits/page.tsx
index 3f27e335f..676b65814 100644
--- a/frontend/src/app/(navfooter)/credits/page.tsx
+++ b/frontend/src/app/(navfooter)/credits/page.tsx
@@ -1,99 +1,122 @@
-import UserMention from "@/components/user/UserMention"
-import { get } from "@/lib/api/request"
-import type { User } from "@/lib/api/types"
+import UserMention from "@/components/user/UserMention";
+import { get } from "@/lib/api/request";
+import type { User } from "@/lib/api/types";
 
-import ContributorsList, { getContributorUsernames, usernameToContributor } from "./ContributorsList"
-import LinkList from "./LinkList"
+import ContributorsList, {
+    getContributorUsernames,
+    usernameToContributor,
+} from "./ContributorsList";
+import LinkList from "./LinkList";
 
-const MAINTAINER_USERNAMES = ["ethteck", "bates64"]
+const MAINTAINER_USERNAMES = ["ethteck", "bates64"];
 const OTHER_PROJECTS = {
     "asm-differ": "https://github.com/simonlindholm/asm-differ",
-    "m2c": "https://github.com/matt-kempster/m2c",
-    "psyq-obj-parser": "https://github.com/grumpycoders/pcsx-redux/tree/main/tools/psyq-obj-parser",
-    "Django": "https://www.djangoproject.com/",
+    m2c: "https://github.com/matt-kempster/m2c",
+    "psyq-obj-parser":
+        "https://github.com/grumpycoders/pcsx-redux/tree/main/tools/psyq-obj-parser",
+    Django: "https://www.djangoproject.com/",
     "Django REST Framework": "https://www.django-rest-framework.org/",
     "Next.js": "https://nextjs.org/",
-    "React": "https://reactjs.org/",
+    React: "https://reactjs.org/",
     "Tailwind CSS": "https://tailwindcss.com/",
-    "SWR": "https://swr.vercel.app/",
-}
+    SWR: "https://swr.vercel.app/",
+};
 const ICON_SOURCES = {
-    "Octicons": "https://primer.style/octicons/",
+    Octicons: "https://primer.style/octicons/",
     "file-icons/icons": "https://github.com/file-icons/icons",
     "coreui/coreui-icons": "https://github.com/coreui/coreui-icons",
-    "New Fontendo 23DSi Lite XL": "https://www.deviantart.com/maxigamer/art/FONT-New-Fontendo-23DSi-Lite-XL-DOWNLOAD-ZIP-552834059",
-    "GBA SVG by Andrew Vester from NounProject.com": "https://thenounproject.com/icon/gameboy-advanced-752507/",
-    "Happy Mac by NiloGlock": "https://commons.wikimedia.org/wiki/File:Happy_Mac.svg",
-    "Tiger-like-x by Althepal": "https://commons.wikimedia.org/wiki/File:Tiger-like-x.svg",
-    "Saturn by JustDanPatrick": "https://upload.wikimedia.org/wikipedia/commons/archive/7/78/20220518145749%21Sega_Saturn_Black_Logo.svg",
-    "Dreamcast by Sega": "https://en.wikipedia.org/wiki/File:Dreamcast_logo.svg",
-    "MS-DOS by Microsoft": "https://commons.wikimedia.org/wiki/File:Msdos-icon.svg",
-    "Windows 9x by Microsoft": "https://commons.wikimedia.org/wiki/File:Windows_Logo_(1992-2001).svg",
+    "New Fontendo 23DSi Lite XL":
+        "https://www.deviantart.com/maxigamer/art/FONT-New-Fontendo-23DSi-Lite-XL-DOWNLOAD-ZIP-552834059",
+    "GBA SVG by Andrew Vester from NounProject.com":
+        "https://thenounproject.com/icon/gameboy-advanced-752507/",
+    "Happy Mac by NiloGlock":
+        "https://commons.wikimedia.org/wiki/File:Happy_Mac.svg",
+    "Tiger-like-x by Althepal":
+        "https://commons.wikimedia.org/wiki/File:Tiger-like-x.svg",
+    "Saturn by JustDanPatrick":
+        "https://upload.wikimedia.org/wikipedia/commons/archive/7/78/20220518145749%21Sega_Saturn_Black_Logo.svg",
+    "Dreamcast by Sega":
+        "https://en.wikipedia.org/wiki/File:Dreamcast_logo.svg",
+    "MS-DOS by Microsoft":
+        "https://commons.wikimedia.org/wiki/File:Msdos-icon.svg",
+    "Windows 9x by Microsoft":
+        "https://commons.wikimedia.org/wiki/File:Windows_Logo_(1992-2001).svg",
     "PerSPire Font by Sean Liew": "https://www.fontspace.com/sean-liew",
-}
+};
 
-type Contributor = {
-    type: "decompme"
-    user: User
-} | {
-    type: "github"
-    user: { login: string }
-}
+type Contributor =
+    | {
+          type: "decompme";
+          user: User;
+      }
+    | {
+          type: "github";
+          user: { login: string };
+      };
 
 async function getContributor(username: string): Promise<Contributor> {
     try {
         // Try and get decomp.me information if they have an account
-        const user: User = await get(`/users/${username}`)
+        const user: User = await get(`/users/${username}`);
         return {
             type: "decompme",
             user,
-        }
+        };
     } catch (error) {
         // Fall back to GitHub information
         // No need to ask their API for data since we just need the username
         return {
             type: "github",
             user: { login: username },
-        }
+        };
     }
 }
 
 function Contributor({ contributor }: { contributor: Contributor }) {
-    return <UserMention user={contributor.user} />
+    return <UserMention user={contributor.user} />;
 }
 
 export const metadata = {
     title: "Credits",
-}
+};
 
 export default async function Page() {
-    const maintainers = await Promise.all(MAINTAINER_USERNAMES.map(getContributor))
-    const contributors = await getContributorUsernames().then(usernames => Promise.all(usernames.map(usernameToContributor)))
+    const maintainers = await Promise.all(
+        MAINTAINER_USERNAMES.map(getContributor),
+    );
+    const contributors = await getContributorUsernames().then((usernames) =>
+        Promise.all(usernames.map(usernameToContributor)),
+    );
 
-    return <main>
-        <div className="mx-auto max-w-prose p-4 pb-2 text-justify text-base leading-normal">
-            <h1 className="font-semibold text-2xl text-gray-12 tracking-tight md:text-3xl">
-                Credits
-            </h1>
-            <p className="py-4">
-                decomp.me is maintained by <Contributor contributor={maintainers[0]} /> and <Contributor contributor={maintainers[1]} />.
-            </p>
-            <div className="my-4 border-gray-6 border-y">
-                <ContributorsList contributors={contributors} />
-            </div>
-            <div className="py-4">
-                <h3 className="font-medium text-gray-12 text-lg tracking-tight md:text-2xl">
-                    Acknowledgements
-                </h3>
-                <p className="my-2">
-                    decomp.me is built on top of many other open source projects, including:
-                </p>
-                <LinkList links={OTHER_PROJECTS} />
-                <p className="my-2">
-                    We also use icons from the following sources:
+    return (
+        <main>
+            <div className="mx-auto max-w-prose p-4 pb-2 text-justify text-base leading-normal">
+                <h1 className="font-semibold text-2xl text-gray-12 tracking-tight md:text-3xl">
+                    Credits
+                </h1>
+                <p className="py-4">
+                    decomp.me is maintained by{" "}
+                    <Contributor contributor={maintainers[0]} /> and{" "}
+                    <Contributor contributor={maintainers[1]} />.
                 </p>
-                <LinkList links={ICON_SOURCES} />
+                <div className="my-4 border-gray-6 border-y">
+                    <ContributorsList contributors={contributors} />
+                </div>
+                <div className="py-4">
+                    <h3 className="font-medium text-gray-12 text-lg tracking-tight md:text-2xl">
+                        Acknowledgements
+                    </h3>
+                    <p className="my-2">
+                        decomp.me is built on top of many other open source
+                        projects, including:
+                    </p>
+                    <LinkList links={OTHER_PROJECTS} />
+                    <p className="my-2">
+                        We also use icons from the following sources:
+                    </p>
+                    <LinkList links={ICON_SOURCES} />
+                </div>
             </div>
-        </div>
-    </main>
+        </main>
+    );
 }
diff --git a/frontend/src/app/(navfooter)/error.tsx b/frontend/src/app/(navfooter)/error.tsx
index 2cfae610a..d3be84292 100644
--- a/frontend/src/app/(navfooter)/error.tsx
+++ b/frontend/src/app/(navfooter)/error.tsx
@@ -1,7 +1,7 @@
 // Rexport app error page to include the layout
 
-"use client"
+"use client";
 
-import ErrorPage from "../error"
+import ErrorPage from "../error";
 
-export default ErrorPage
+export default ErrorPage;
diff --git a/frontend/src/app/(navfooter)/faq/page.tsx b/frontend/src/app/(navfooter)/faq/page.tsx
index 65661c48e..e0f86eea7 100644
--- a/frontend/src/app/(navfooter)/faq/page.tsx
+++ b/frontend/src/app/(navfooter)/faq/page.tsx
@@ -1,128 +1,205 @@
-import type { ReactNode } from "react"
+import type { ReactNode } from "react";
 
-import Link from "next/link"
+import Link from "next/link";
 
-import Frog from "@/components/Nav/frog.svg"
+import Frog from "@/components/Nav/frog.svg";
 
-const subtitle = "mt-8 text-xl font-semibold tracking-tight text-gray-11"
+const subtitle = "mt-8 text-xl font-semibold tracking-tight text-gray-11";
 
-function FaqLink({ children, href }: { children: ReactNode, href?: string }) {
-    return <Link href={href} className="text-blue-11 hover:underline active:translate-y-px">
-        {children}
-    </Link>
+function FaqLink({ children, href }: { children: ReactNode; href?: string }) {
+    return (
+        <Link
+            href={href}
+            className="text-blue-11 hover:underline active:translate-y-px"
+        >
+            {children}
+        </Link>
+    );
 }
 
 function DiscordLink() {
-    return <FaqLink href="https://discord.gg/sutqNShRRs">Discord Server</FaqLink>
+    return (
+        <FaqLink href="https://discord.gg/sutqNShRRs">Discord Server</FaqLink>
+    );
 }
 
 export const metadata = {
     title: "Frequently Asked Questions",
-}
+};
 
 export default function Page() {
-    return <main className="mx-auto max-w-prose p-4 pb-2 text-justify text-base leading-normal">
-        <h1 className="font-semibold text-2xl text-gray-12 tracking-tight md:text-3xl">
-            Frequently Asked Questions
-        </h1>
-
-        <h2 className={subtitle}>What is decomp.me?</h2>
-        <p className="my-4">
-            decomp.me is an interactive web-based platform where users can collaboratively decompile assembly code snippets by writing matching code.
-        </p>
-        <p className="my-4">
-            It is an <FaqLink href="https://www.github.com/decomp.me">open-source project</FaqLink> run by volunteers in their free time.
-        </p>
-
-        <h2 className={subtitle}>What do you mean by "matching"?</h2>
-        <p className="my-4">
-            decomp.me is designed for users who are working on matching decompilation projects, where the goal is to produce high-level code like C or C++ that perfectly replicates the original assembly upon compilation.
-        </p>
-        <p className="my-4">
-            This is a time- and labor-intensive process. To produce matching assembly, one usually needs the original compiler, assembler, and flags that were used to produce the original binary.
-            Most importantly, the code has to be written in such a way that the compiler will generate assembly that is identical to what is being compared against.
-            Writing matching code is a skill that takes time to learn, but it can be very rewarding and addictive.
-        </p>
-
-        <h2 className={subtitle}>What's a scratch?</h2>
-        <p className="my-4">
-            A scratch is a workspace for exploring a compiler's codegen, similar to <FaqLink href="https://godbolt.org/">Compiler Explorer</FaqLink>.
-            A scratch consists of the target assembly, input source code, and input context code, as well as additional settings and metadata.
-            Most scratches contain a single function - i.e. the function that you are trying to match.
-            Each scratch has a unique link that can be shared with others. Scratches have a "family" of forks, which are copies of the original scratch.
-        </p>
-
-        <h2 className={subtitle}>What's the context for?</h2>
-        <p className="my-4">
-            The context is a separate section of code that usually contains definitions and declarations, such as structs, externs, function declarations, and things of that nature.
-            The context is passed to the compiler along with the code, so it's a good way to organize a scratch's functional code from its definitions and macros.
-        </p>
-
-        <p className="my-4">
-            Context is also given to the decompiler to assist with typing information and more accurate decompilation.
-        </p>
-
-        <h2 className={subtitle}>How does decomp.me work?</h2>
-        <p className="my-4">
-            The code from your scratch is submitted to the decomp.me server where it is compiled, run through objdump, and then compared against the target assembly.
-            As you modify your code in the editor, the changes will be sent to the backend and compiled, so you'll see the results of your change in near real-time.
-            The similarity between the compiled code's assembly and the target assembly is represented by a score, which is displayed in the editor.
-        </p>
-
-        <p className="my-4">
-            The score is calculated by comparing the assembly instructions in the compiled code to the target assembly, and a penalty of different size is applied based on the kind of difference present among assembly instructions.
-            The lower the score, the better!
-        </p>
-
-        <h2 className={subtitle}>Where do I start?</h2>
-        <p className="my-4">
-            Currently, this website is meant to be used as a supplementary tool along with an existing decompilation project.
-            Eventually, we hope to make the website a little more friendly to complete newcomers who aren't involved with any specific project.
-            In the meantime, feel free to explore recent scratches and get a feel for how matching decomp works!
-        </p>
-
-        <h2 className={subtitle}>Someone sent me a scratch. What do I do?</h2>
-        <p className="my-4">
-            Any scratch on the site can be played with. If you save a scratch that you don't own, your scratch will become a "fork" of the original.
-            If you match the scratch, the original scratch will display a banner to notify visitors that the code is matched.
-        </p>
-        <p className="my-4">
-            If you want to start your own scratch, you will need the assembly code for the function you are targeting in GNU assembly format.
-        </p>
-
-        <h2 className={subtitle}>Can you help me match a scratch?</h2>
-        <p className="my-4">
-            You are welcome to ask for help in the #general-decompilation channel of our <DiscordLink/>.
-        </p>
-
-        <h2 className={subtitle}>Can you add a preset for a game I'm working on?</h2>
-        <p className="my-4">
-            Absolutely we can, either raise a <FaqLink href="https://github.com/decompme/decomp.me/issues">GitHub Issue</FaqLink> or drop us a message in our <DiscordLink/>.
-        </p>
-
-        <h2 className={subtitle}>Can you add a compiler for a game I'm working on?</h2>
-        <p className="my-4">
-            This is something that you are able to do yourself.
-            The compilers used by decomp.me can be found in our <FaqLink href="https://github.com/decompme/compilers">compilers repository</FaqLink>.
-            Once the compiler has been added to that repo, it is very simple to add it to decomp.me, see <FaqLink href="https://github.com/decompme/decomp.me/pull/910">this PR</FaqLink> for an example.
-        </p>
-
-        <h2 className={subtitle}>Can you add "X" platform, e.g. PlayStation 3?</h2>
-        <p className="my-4">
-            The platforms that decomp.me supports are driven by the support for those platforms in the underlying tools that make up decomp.me.
-            If these tools support the architecture for the new platform, and you have the compiler available, it is a straightforward process to add it to decomp.me.
-        </p>
-
-        <h2 className={subtitle}>How do I report a bug?</h2>
-        <p className="my-4">
-            If you come across a bug, please reach out to us on our <DiscordLink/> and/or raise a <FaqLink href="https://github.com/decompme/decomp.me/issues">GitHub Issue</FaqLink> containing the steps necessary to replicate the bug.
-            We will gladly accept bug-squashing PRs if you are able to fix the issue yourself!
-        </p>
-
-        <h2 className={subtitle}>Why frog?</h2>
-        <p className="my-4">
-            <Frog className="size-7" aria-label="Purple frog" />
-        </p>
-
-    </main>
+    return (
+        <main className="mx-auto max-w-prose p-4 pb-2 text-justify text-base leading-normal">
+            <h1 className="font-semibold text-2xl text-gray-12 tracking-tight md:text-3xl">
+                Frequently Asked Questions
+            </h1>
+
+            <h2 className={subtitle}>What is decomp.me?</h2>
+            <p className="my-4">
+                decomp.me is an interactive web-based platform where users can
+                collaboratively decompile assembly code snippets by writing
+                matching code.
+            </p>
+            <p className="my-4">
+                It is an{" "}
+                <FaqLink href="https://www.github.com/decomp.me">
+                    open-source project
+                </FaqLink>{" "}
+                run by volunteers in their free time.
+            </p>
+
+            <h2 className={subtitle}>What do you mean by "matching"?</h2>
+            <p className="my-4">
+                decomp.me is designed for users who are working on matching
+                decompilation projects, where the goal is to produce high-level
+                code like C or C++ that perfectly replicates the original
+                assembly upon compilation.
+            </p>
+            <p className="my-4">
+                This is a time- and labor-intensive process. To produce matching
+                assembly, one usually needs the original compiler, assembler,
+                and flags that were used to produce the original binary. Most
+                importantly, the code has to be written in such a way that the
+                compiler will generate assembly that is identical to what is
+                being compared against. Writing matching code is a skill that
+                takes time to learn, but it can be very rewarding and addictive.
+            </p>
+
+            <h2 className={subtitle}>What's a scratch?</h2>
+            <p className="my-4">
+                A scratch is a workspace for exploring a compiler's codegen,
+                similar to{" "}
+                <FaqLink href="https://godbolt.org/">Compiler Explorer</FaqLink>
+                . A scratch consists of the target assembly, input source code,
+                and input context code, as well as additional settings and
+                metadata. Most scratches contain a single function - i.e. the
+                function that you are trying to match. Each scratch has a unique
+                link that can be shared with others. Scratches have a "family"
+                of forks, which are copies of the original scratch.
+            </p>
+
+            <h2 className={subtitle}>What's the context for?</h2>
+            <p className="my-4">
+                The context is a separate section of code that usually contains
+                definitions and declarations, such as structs, externs, function
+                declarations, and things of that nature. The context is passed
+                to the compiler along with the code, so it's a good way to
+                organize a scratch's functional code from its definitions and
+                macros.
+            </p>
+
+            <p className="my-4">
+                Context is also given to the decompiler to assist with typing
+                information and more accurate decompilation.
+            </p>
+
+            <h2 className={subtitle}>How does decomp.me work?</h2>
+            <p className="my-4">
+                The code from your scratch is submitted to the decomp.me server
+                where it is compiled, run through objdump, and then compared
+                against the target assembly. As you modify your code in the
+                editor, the changes will be sent to the backend and compiled, so
+                you'll see the results of your change in near real-time. The
+                similarity between the compiled code's assembly and the target
+                assembly is represented by a score, which is displayed in the
+                editor.
+            </p>
+
+            <p className="my-4">
+                The score is calculated by comparing the assembly instructions
+                in the compiled code to the target assembly, and a penalty of
+                different size is applied based on the kind of difference
+                present among assembly instructions. The lower the score, the
+                better!
+            </p>
+
+            <h2 className={subtitle}>Where do I start?</h2>
+            <p className="my-4">
+                Currently, this website is meant to be used as a supplementary
+                tool along with an existing decompilation project. Eventually,
+                we hope to make the website a little more friendly to complete
+                newcomers who aren't involved with any specific project. In the
+                meantime, feel free to explore recent scratches and get a feel
+                for how matching decomp works!
+            </p>
+
+            <h2 className={subtitle}>
+                Someone sent me a scratch. What do I do?
+            </h2>
+            <p className="my-4">
+                Any scratch on the site can be played with. If you save a
+                scratch that you don't own, your scratch will become a "fork" of
+                the original. If you match the scratch, the original scratch
+                will display a banner to notify visitors that the code is
+                matched.
+            </p>
+            <p className="my-4">
+                If you want to start your own scratch, you will need the
+                assembly code for the function you are targeting in GNU assembly
+                format.
+            </p>
+
+            <h2 className={subtitle}>Can you help me match a scratch?</h2>
+            <p className="my-4">
+                You are welcome to ask for help in the #general-decompilation
+                channel of our <DiscordLink />.
+            </p>
+
+            <h2 className={subtitle}>
+                Can you add a preset for a game I'm working on?
+            </h2>
+            <p className="my-4">
+                Absolutely we can, either raise a{" "}
+                <FaqLink href="https://github.com/decompme/decomp.me/issues">
+                    GitHub Issue
+                </FaqLink>{" "}
+                or drop us a message in our <DiscordLink />.
+            </p>
+
+            <h2 className={subtitle}>
+                Can you add a compiler for a game I'm working on?
+            </h2>
+            <p className="my-4">
+                This is something that you are able to do yourself. The
+                compilers used by decomp.me can be found in our{" "}
+                <FaqLink href="https://github.com/decompme/compilers">
+                    compilers repository
+                </FaqLink>
+                . Once the compiler has been added to that repo, it is very
+                simple to add it to decomp.me, see{" "}
+                <FaqLink href="https://github.com/decompme/decomp.me/pull/910">
+                    this PR
+                </FaqLink>{" "}
+                for an example.
+            </p>
+
+            <h2 className={subtitle}>
+                Can you add "X" platform, e.g. PlayStation 3?
+            </h2>
+            <p className="my-4">
+                The platforms that decomp.me supports are driven by the support
+                for those platforms in the underlying tools that make up
+                decomp.me. If these tools support the architecture for the new
+                platform, and you have the compiler available, it is a
+                straightforward process to add it to decomp.me.
+            </p>
+
+            <h2 className={subtitle}>How do I report a bug?</h2>
+            <p className="my-4">
+                If you come across a bug, please reach out to us on our{" "}
+                <DiscordLink /> and/or raise a{" "}
+                <FaqLink href="https://github.com/decompme/decomp.me/issues">
+                    GitHub Issue
+                </FaqLink>{" "}
+                containing the steps necessary to replicate the bug. We will
+                gladly accept bug-squashing PRs if you are able to fix the issue
+                yourself!
+            </p>
+
+            <h2 className={subtitle}>Why frog?</h2>
+            <p className="my-4">
+                <Frog className="size-7" aria-label="Purple frog" />
+            </p>
+        </main>
+    );
 }
diff --git a/frontend/src/app/(navfooter)/layout.tsx b/frontend/src/app/(navfooter)/layout.tsx
index 5a20a3bf4..d3ec2d5ae 100644
--- a/frontend/src/app/(navfooter)/layout.tsx
+++ b/frontend/src/app/(navfooter)/layout.tsx
@@ -1,19 +1,21 @@
-import ErrorBoundary from "@/components/ErrorBoundary"
-import Footer from "@/components/Footer"
-import Nav from "@/components/Nav"
+import ErrorBoundary from "@/components/ErrorBoundary";
+import Footer from "@/components/Footer";
+import Nav from "@/components/Nav";
 
 export default function RootLayout({
     children,
 }: {
-  children: React.ReactNode
+    children: React.ReactNode;
 }) {
-    return <>
-        <ErrorBoundary>
-            <Nav />
-        </ErrorBoundary>
-        {children}
-        <ErrorBoundary>
-            <Footer />
-        </ErrorBoundary>
-    </>
+    return (
+        <>
+            <ErrorBoundary>
+                <Nav />
+            </ErrorBoundary>
+            {children}
+            <ErrorBoundary>
+                <Footer />
+            </ErrorBoundary>
+        </>
+    );
 }
diff --git a/frontend/src/app/(navfooter)/login/page.tsx b/frontend/src/app/(navfooter)/login/page.tsx
index b8c158bfb..bda0b2fb1 100644
--- a/frontend/src/app/(navfooter)/login/page.tsx
+++ b/frontend/src/app/(navfooter)/login/page.tsx
@@ -1,82 +1,105 @@
-"use client"
+"use client";
 
-import { useState, useEffect, Suspense } from "react"
+import { useState, useEffect, Suspense } from "react";
 
-import { useRouter, useSearchParams } from "next/navigation"
+import { useRouter, useSearchParams } from "next/navigation";
 
-import { useSWRConfig } from "swr"
+import { useSWRConfig } from "swr";
 
-import GitHubLoginButton from "@/components/GitHubLoginButton"
-import LoadingSpinner from "@/components/loading.svg"
-import * as api from "@/lib/api"
-import { requestMissingScopes } from "@/lib/oauth"
+import GitHubLoginButton from "@/components/GitHubLoginButton";
+import LoadingSpinner from "@/components/loading.svg";
+import * as api from "@/lib/api";
+import { requestMissingScopes } from "@/lib/oauth";
 
 function Login() {
-    const router = useRouter()
-    const searchParams = useSearchParams()
-    const [error, setError] = useState(null)
-    const { mutate } = useSWRConfig()
-    const code = searchParams.get("code")
-    const next = searchParams.get("next")
-    const githubError = searchParams.get("error")
+    const router = useRouter();
+    const searchParams = useSearchParams();
+    const [error, setError] = useState(null);
+    const { mutate } = useSWRConfig();
+    const code = searchParams.get("code");
+    const next = searchParams.get("next");
+    const githubError = searchParams.get("error");
 
     useEffect(() => {
         if (code && !error) {
-            requestMissingScopes(() => api.post("/user", { code })).then((user: api.User) => {
-                if (user.is_anonymous) {
-                    return Promise.reject(new Error("Still not logged-in."))
-                }
+            requestMissingScopes(() => api.post("/user", { code }))
+                .then((user: api.User) => {
+                    if (user.is_anonymous) {
+                        return Promise.reject(
+                            new Error("Still not logged-in."),
+                        );
+                    }
 
-                mutate("/user", user)
+                    mutate("/user", user);
 
-                if (next) {
-                    router.replace(next)
-                } else if (window.opener) {
-                    window.postMessage({
-                        source: "decomp_me_login",
-                        user,
-                    }, window.opener)
-                    window.close()
-                } else {
-                    window.location.href = "/"
-                }
-            }).catch(error => {
-                console.error(error)
-                setError(error)
-            })
+                    if (next) {
+                        router.replace(next);
+                    } else if (window.opener) {
+                        window.postMessage(
+                            {
+                                source: "decomp_me_login",
+                                user,
+                            },
+                            window.opener,
+                        );
+                        window.close();
+                    } else {
+                        window.location.href = "/";
+                    }
+                })
+                .catch((error) => {
+                    console.error(error);
+                    setError(error);
+                });
         }
 
         if (githubError === "access_denied") {
-            setError(new Error("Please grant access to your GitHub account to sign in!"))
+            setError(
+                new Error(
+                    "Please grant access to your GitHub account to sign in!",
+                ),
+            );
         }
-    }, [code, router, mutate, next, error, githubError])
+    }, [code, router, mutate, next, error, githubError]);
 
-    return <main className="mx-auto flex max-w-prose items-center justify-center px-4 py-6 text-base leading-normal">
-        {error ? <div>
-            <h1 className="font-semibold text-3xl">Error signing in</h1>
-            <p className="py-4">
-                The following error prevented you from signing in:
-            </p>
-            <div className="rounded bg-gray-9 p-4 text-gray-2">
-                <code className="font-mono text-sm">{error.toString()}</code>
-            </div>
-            <p className="py-4">
-                You can try again by clicking the button below.
-            </p>
-            <GitHubLoginButton />
-        </div> : code ? <div className="flex items-center justify-center gap-4 py-8 font-medium text-2xl text-gray-12">
-            <LoadingSpinner width={32} className="animate-spin" />
-            Signing in...
-        </div> : <div>
-            <p>
-                Sign in to decomp.me
-            </p>
-            <GitHubLoginButton />
-        </div>}
-    </main>
+    return (
+        <main className="mx-auto flex max-w-prose items-center justify-center px-4 py-6 text-base leading-normal">
+            {error ? (
+                <div>
+                    <h1 className="font-semibold text-3xl">Error signing in</h1>
+                    <p className="py-4">
+                        The following error prevented you from signing in:
+                    </p>
+                    <div className="rounded bg-gray-9 p-4 text-gray-2">
+                        <code className="font-mono text-sm">
+                            {error.toString()}
+                        </code>
+                    </div>
+                    <p className="py-4">
+                        You can try again by clicking the button below.
+                    </p>
+                    <GitHubLoginButton />
+                </div>
+            ) : code ? (
+                <div className="flex items-center justify-center gap-4 py-8 font-medium text-2xl text-gray-12">
+                    <LoadingSpinner width={32} className="animate-spin" />
+                    Signing in...
+                </div>
+            ) : (
+                <div>
+                    <p>Sign in to decomp.me</p>
+                    <GitHubLoginButton />
+                </div>
+            )}
+        </main>
+    );
 }
 
 // Handles GitHub OAuth callback
 export default function Page() {
-    return <Suspense><Login /></Suspense>
+    return (
+        <Suspense>
+            <Login />
+        </Suspense>
+    );
 }
diff --git a/frontend/src/app/(navfooter)/new/NewScratchForm.tsx b/frontend/src/app/(navfooter)/new/NewScratchForm.tsx
index df6f12054..f2015bb2c 100644
--- a/frontend/src/app/(navfooter)/new/NewScratchForm.tsx
+++ b/frontend/src/app/(navfooter)/new/NewScratchForm.tsx
@@ -1,201 +1,235 @@
-"use client"
+"use client";
 
-import { useEffect, useState, useMemo, useReducer } from "react"
+import { useEffect, useState, useMemo, useReducer } from "react";
 
-import Link from "next/link"
-import { useRouter } from "next/navigation"
+import Link from "next/link";
+import { useRouter } from "next/navigation";
 
-import AsyncButton from "@/components/AsyncButton"
-import { useCompilersForPlatform } from "@/components/compiler/compilers"
-import PresetSelect from "@/components/compiler/PresetSelect"
-import CodeMirror from "@/components/Editor/CodeMirror"
-import PlatformSelect from "@/components/PlatformSelect"
-import Select from "@/components/Select2"
-import * as api from "@/lib/api"
-import type { Library } from "@/lib/api/types"
-import { scratchUrl } from "@/lib/api/urls"
-import basicSetup from "@/lib/codemirror/basic-setup"
-import { cpp } from "@/lib/codemirror/cpp"
-import getTranslation from "@/lib/i18n/translate"
+import AsyncButton from "@/components/AsyncButton";
+import { useCompilersForPlatform } from "@/components/compiler/compilers";
+import PresetSelect from "@/components/compiler/PresetSelect";
+import CodeMirror from "@/components/Editor/CodeMirror";
+import PlatformSelect from "@/components/PlatformSelect";
+import Select from "@/components/Select2";
+import * as api from "@/lib/api";
+import type { Library } from "@/lib/api/types";
+import { scratchUrl } from "@/lib/api/urls";
+import basicSetup from "@/lib/codemirror/basic-setup";
+import { cpp } from "@/lib/codemirror/cpp";
+import getTranslation from "@/lib/i18n/translate";
 
-import styles from "./new.module.scss"
+import styles from "./new.module.scss";
 
 function getLabels(asm: string): string[] {
-    const lines = asm.split("\n")
-    let labels = []
+    const lines = asm.split("\n");
+    let labels = [];
 
-    const jtbl_label_regex = /(^L[0-9a-fA-F]{8}$)|(^jtbl_)/
+    const jtbl_label_regex = /(^L[0-9a-fA-F]{8}$)|(^jtbl_)/;
 
     for (const line of lines) {
-        let match = line.match(/^\s*glabel\s+([A-z0-9_]+)\s*/)
+        let match = line.match(/^\s*glabel\s+([A-z0-9_]+)\s*/);
         if (match) {
-            labels.push(match[1])
-            continue
+            labels.push(match[1]);
+            continue;
         }
-        match = line.match(/^\s*\.global\s+([A-z0-9_]+)\s*/)
+        match = line.match(/^\s*\.global\s+([A-z0-9_]+)\s*/);
         if (match) {
-            labels.push(match[1])
-            continue
+            labels.push(match[1]);
+            continue;
         }
-        match = line.match(/^[A-z_]+_func_start\s+([A-z0-9_]+)/)
+        match = line.match(/^[A-z_]+_func_start\s+([A-z0-9_]+)/);
         if (match) {
-            labels.push(match[1])
+            labels.push(match[1]);
         }
     }
 
-    labels = labels.filter(label => !jtbl_label_regex.test(label))
+    labels = labels.filter((label) => !jtbl_label_regex.test(label));
 
-    return labels
+    return labels;
 }
 
-export default function NewScratchForm({ serverCompilers }: {
+export default function NewScratchForm({
+    serverCompilers,
+}: {
     serverCompilers: {
         platforms: {
-            [id: string]: api.Platform
-        }
+            [id: string]: api.Platform;
+        };
         compilers: {
-            [id: string]: api.Compiler
-        }
-    }
+            [id: string]: api.Compiler;
+        };
+    };
 }) {
-    const [asm, setAsm] = useState("")
-    const [context, setContext] = useState("")
-    const [platform, setPlatform] = useState("")
-    const [compilerId, setCompilerId] = useState<string>()
-    const [compilerFlags, setCompilerFlags] = useState<string>("")
-    const [diffFlags, setDiffFlags] = useState<string[]>([])
-    const [libraries, setLibraries] = useState<Library[]>([])
-    const [presetId, setPresetId] = useState<number | undefined>()
+    const [asm, setAsm] = useState("");
+    const [context, setContext] = useState("");
+    const [platform, setPlatform] = useState("");
+    const [compilerId, setCompilerId] = useState<string>();
+    const [compilerFlags, setCompilerFlags] = useState<string>("");
+    const [diffFlags, setDiffFlags] = useState<string[]>([]);
+    const [libraries, setLibraries] = useState<Library[]>([]);
+    const [presetId, setPresetId] = useState<number | undefined>();
 
-    const [ready, setReady] = useState(false)
+    const [ready, setReady] = useState(false);
 
-    const [valueVersion, incrementValueVersion] = useReducer(x => x + 1, 0)
+    const [valueVersion, incrementValueVersion] = useReducer((x) => x + 1, 0);
 
-    const router = useRouter()
+    const router = useRouter();
 
     const defaultLabel = useMemo(() => {
-        const labels = getLabels(asm)
-        return labels.length > 0 ? labels[0] : null
-    }, [asm])
-    const [label, setLabel] = useState<string>("")
+        const labels = getLabels(asm);
+        return labels.length > 0 ? labels[0] : null;
+    }, [asm]);
+    const [label, setLabel] = useState<string>("");
 
     const setPreset = (preset: api.Preset) => {
         if (preset) {
-            setPresetId(preset.id)
-            setPlatform(preset.platform)
-            setCompilerId(preset.compiler)
-            setCompilerFlags(preset.compiler_flags)
-            setDiffFlags(preset.diff_flags)
-            setLibraries(preset.libraries)
+            setPresetId(preset.id);
+            setPlatform(preset.platform);
+            setCompilerId(preset.compiler);
+            setCompilerFlags(preset.compiler_flags);
+            setDiffFlags(preset.diff_flags);
+            setLibraries(preset.libraries);
         } else {
             // User selected "Custom", don't change platform or compiler
-            setPresetId(undefined)
-            setCompilerFlags("")
-            setDiffFlags([])
-            setLibraries([])
+            setPresetId(undefined);
+            setCompilerFlags("");
+            setDiffFlags([]);
+            setLibraries([]);
         }
-    }
+    };
     const setCompiler = (compiler?: string) => {
-        setCompilerId(compiler)
-        setCompilerFlags("")
-        setDiffFlags([])
-        setLibraries([])
-        setPresetId(undefined)
-    }
+        setCompilerId(compiler);
+        setCompilerFlags("");
+        setDiffFlags([]);
+        setLibraries([]);
+        setPresetId(undefined);
+    };
 
     const presets = useMemo(() => {
-        const dict: Record<string, any> = {}
+        const dict: Record<string, any> = {};
         for (const v of Object.values(serverCompilers.platforms)) {
             for (const p of v.presets) {
-                dict[p.id] = p
+                dict[p.id] = p;
             }
         }
-        return dict
-    }, [serverCompilers])
+        return dict;
+    }, [serverCompilers]);
 
     // Load fields from localStorage
     useEffect(() => {
         try {
-            setLabel(localStorage.new_scratch_label ?? "")
-            setAsm(localStorage.new_scratch_asm ?? "")
-            setContext(localStorage.new_scratch_context ?? "")
-            const pid = Number.parseInt(localStorage.new_scratch_presetId)
+            setLabel(localStorage.new_scratch_label ?? "");
+            setAsm(localStorage.new_scratch_asm ?? "");
+            setContext(localStorage.new_scratch_context ?? "");
+            const pid = Number.parseInt(localStorage.new_scratch_presetId);
             if (!Number.isNaN(pid)) {
-                const preset = presets[pid]
+                const preset = presets[pid];
                 if (preset) {
-                    setPreset(preset)
+                    setPreset(preset);
                 }
             } else {
-                setPlatform(localStorage.new_scratch_platform ?? "")
-                setCompilerId(localStorage.new_scratch_compilerId ?? undefined)
-                setCompilerFlags(localStorage.new_scratch_compilerFlags ?? "")
-                setDiffFlags(JSON.parse(localStorage.new_scratch_diffFlags ?? "[]"))
-                setLibraries(JSON.parse(localStorage.new_scratch_libraries ?? "[]"))
+                setPlatform(localStorage.new_scratch_platform ?? "");
+                setCompilerId(localStorage.new_scratch_compilerId ?? undefined);
+                setCompilerFlags(localStorage.new_scratch_compilerFlags ?? "");
+                setDiffFlags(
+                    JSON.parse(localStorage.new_scratch_diffFlags ?? "[]"),
+                );
+                setLibraries(
+                    JSON.parse(localStorage.new_scratch_libraries ?? "[]"),
+                );
             }
-            incrementValueVersion()
+            incrementValueVersion();
         } catch (error) {
-            console.warn("bad localStorage", error)
+            console.warn("bad localStorage", error);
         }
-        setReady(true)
-    }, [presets])
+        setReady(true);
+    }, [presets]);
 
     // Update localStorage
     useEffect(() => {
-        if (!ready)
-            return
-
-        localStorage.new_scratch_label = label
-        localStorage.new_scratch_asm = asm
-        localStorage.new_scratch_context = context
-        localStorage.new_scratch_platform = platform
-        localStorage.new_scratch_compilerId = compilerId
-        localStorage.new_scratch_compilerFlags = compilerFlags
-        localStorage.new_scratch_diffFlags = JSON.stringify(diffFlags)
-        localStorage.new_scratch_libraries = JSON.stringify(libraries)
+        if (!ready) return;
+
+        localStorage.new_scratch_label = label;
+        localStorage.new_scratch_asm = asm;
+        localStorage.new_scratch_context = context;
+        localStorage.new_scratch_platform = platform;
+        localStorage.new_scratch_compilerId = compilerId;
+        localStorage.new_scratch_compilerFlags = compilerFlags;
+        localStorage.new_scratch_diffFlags = JSON.stringify(diffFlags);
+        localStorage.new_scratch_libraries = JSON.stringify(libraries);
         if (presetId === undefined) {
-            localStorage.removeItem("new_scratch_presetId")
+            localStorage.removeItem("new_scratch_presetId");
         } else {
-            localStorage.new_scratch_presetId = presetId
+            localStorage.new_scratch_presetId = presetId;
         }
-    }, [ready, label, asm, context, platform, compilerId, compilerFlags, diffFlags, libraries, presetId])
+    }, [
+        ready,
+        label,
+        asm,
+        context,
+        platform,
+        compilerId,
+        compilerFlags,
+        diffFlags,
+        libraries,
+        presetId,
+    ]);
 
     // Use first available platform if no platform was selected or is unavailable
-    if (!platform || Object.keys(serverCompilers.platforms).indexOf(platform) === -1) {
-        setPlatform(Object.keys(serverCompilers.platforms)[0])
+    if (
+        !platform ||
+        Object.keys(serverCompilers.platforms).indexOf(platform) === -1
+    ) {
+        setPlatform(Object.keys(serverCompilers.platforms)[0]);
     }
 
-    const platformCompilers = useCompilersForPlatform(platform, serverCompilers.compilers)
+    const platformCompilers = useCompilersForPlatform(
+        platform,
+        serverCompilers.compilers,
+    );
     useEffect(() => {
-        if (!ready)
-            return
+        if (!ready) return;
 
         if (presetId !== undefined || compilerId !== undefined) {
             // User has specified a preset or compiler, don't override it
-            return
+            return;
         }
 
         if (Object.keys(platformCompilers).length === 0) {
-            console.warn("This platform has no supported compilers", platform)
+            console.warn("This platform has no supported compilers", platform);
         } else {
             // Fall back to the first supported compiler and no flags...
-            setCompiler(Object.keys(platformCompilers)[0])
+            setCompiler(Object.keys(platformCompilers)[0]);
             // However, if there is a preset for this platform, use it
             for (const v of Object.values(serverCompilers.compilers)) {
-                if (v.platform === platform && serverCompilers.platforms[platform].presets.length > 0) {
-                    setPreset(serverCompilers.platforms[platform].presets[0])
-                    break
+                if (
+                    v.platform === platform &&
+                    serverCompilers.platforms[platform].presets.length > 0
+                ) {
+                    setPreset(serverCompilers.platforms[platform].presets[0]);
+                    break;
                 }
             }
         }
-    }, [ready, presetId, compilerId, platformCompilers, serverCompilers, platform])
-
-    const compilersTranslation = getTranslation("compilers")
+    }, [
+        ready,
+        presetId,
+        compilerId,
+        platformCompilers,
+        serverCompilers,
+        platform,
+    ]);
+
+    const compilersTranslation = getTranslation("compilers");
     const compilerChoiceOptions = useMemo(() => {
-        return Object.keys(platformCompilers).reduce((sum, id) => {
-            sum[id] = compilersTranslation.t(id)
-            return sum
-        }, {} as Record<string, string>)
-    }, [platformCompilers, compilersTranslation])
+        return Object.keys(platformCompilers).reduce(
+            (sum, id) => {
+                sum[id] = compilersTranslation.t(id);
+                return sum;
+            },
+            {} as Record<string, string>,
+        );
+    }, [platformCompilers, compilersTranslation]);
 
     const submit = async () => {
         try {
@@ -209,116 +243,133 @@ export default function NewScratchForm({ serverCompilers }: {
                 libraries: libraries,
                 preset: presetId,
                 diff_label: label || defaultLabel || "",
-            })
+            });
 
-            localStorage.new_scratch_label = ""
-            localStorage.new_scratch_asm = ""
+            localStorage.new_scratch_label = "";
+            localStorage.new_scratch_asm = "";
 
-            await api.claimScratch(scratch)
+            await api.claimScratch(scratch);
 
-            router.push(scratchUrl(scratch))
+            router.push(scratchUrl(scratch));
         } catch (error) {
-            console.error(error)
-            throw error
+            console.error(error);
+            throw error;
         }
-    }
+    };
 
-    return <div>
+    return (
         <div>
-            <p className={styles.label}>
-                Platform
-            </p>
-            <PlatformSelect
-                platforms={serverCompilers.platforms}
-                value={platform}
-                onChange={p => {
-                    setPlatform(p)
-                    setCompiler()
-                }}
-            />
-        </div>
+            <div>
+                <p className={styles.label}>Platform</p>
+                <PlatformSelect
+                    platforms={serverCompilers.platforms}
+                    value={platform}
+                    onChange={(p) => {
+                        setPlatform(p);
+                        setCompiler();
+                    }}
+                />
+            </div>
 
-        <div>
-            <p className={styles.label}>
-                Compiler
-            </p>
-            <div className={styles.compilerContainer}>
-                <div>
-                    <span className={styles.compilerChoiceHeading}>Select a compiler</span>
-                    <Select
-                        className={styles.compilerChoiceSelect}
-                        options={compilerChoiceOptions}
-                        value={compilerId}
-                        onChange={setCompiler}
-                    />
-                </div>
-                <div className={styles.compilerChoiceOr}>or</div>
-                <div>
-                    <span className={styles.compilerChoiceHeading}>Select a preset</span>
-                    <PresetSelect
-                        className={styles.compilerChoiceSelect}
-                        platform={platform}
-                        presetId={presetId}
-                        setPreset={setPreset}
-                        serverPresets={platform && serverCompilers.platforms[platform].presets}
-                    />
+            <div>
+                <p className={styles.label}>Compiler</p>
+                <div className={styles.compilerContainer}>
+                    <div>
+                        <span className={styles.compilerChoiceHeading}>
+                            Select a compiler
+                        </span>
+                        <Select
+                            className={styles.compilerChoiceSelect}
+                            options={compilerChoiceOptions}
+                            value={compilerId}
+                            onChange={setCompiler}
+                        />
+                    </div>
+                    <div className={styles.compilerChoiceOr}>or</div>
+                    <div>
+                        <span className={styles.compilerChoiceHeading}>
+                            Select a preset
+                        </span>
+                        <PresetSelect
+                            className={styles.compilerChoiceSelect}
+                            platform={platform}
+                            presetId={presetId}
+                            setPreset={setPreset}
+                            serverPresets={
+                                platform &&
+                                serverCompilers.platforms[platform].presets
+                            }
+                        />
+                    </div>
                 </div>
             </div>
-        </div>
 
-        <div>
-            <label className={styles.label} htmlFor="label">
-                Diff label <small>(asm label from which the diff will begin)</small>
-            </label>
-            <input
-                name="label"
-                type="text"
-                value={label}
-                placeholder={defaultLabel}
-                onChange={e => setLabel((e.target as HTMLInputElement).value)}
-                className={styles.textInput}
-                autoCorrect="off"
-                autoCapitalize="off"
-                spellCheck={false}
-            />
-        </div>
-        <div className={styles.editorContainer}>
-            <p className={styles.label}>Target assembly <small>(required)</small></p>
-            <CodeMirror
-                className={styles.editor}
-                value={asm}
-                valueVersion={valueVersion}
-                onChange={setAsm}
-                extensions={basicSetup}
-            />
-        </div>
-        <div className={styles.editorContainer}>
-            <p className={styles.label}>
-                Context <small>(any typedefs, structs, and declarations you would like to include go here; typically generated with m2ctx.py)</small>
-            </p>
-            <CodeMirror
-                className={styles.editor}
-                value={context}
-                valueVersion={valueVersion}
-                onChange={setContext}
-                extensions={[basicSetup, cpp()]}
-            />
-        </div>
+            <div>
+                <label className={styles.label} htmlFor="label">
+                    Diff label{" "}
+                    <small>(asm label from which the diff will begin)</small>
+                </label>
+                <input
+                    name="label"
+                    type="text"
+                    value={label}
+                    placeholder={defaultLabel}
+                    onChange={(e) =>
+                        setLabel((e.target as HTMLInputElement).value)
+                    }
+                    className={styles.textInput}
+                    autoCorrect="off"
+                    autoCapitalize="off"
+                    spellCheck={false}
+                />
+            </div>
+            <div className={styles.editorContainer}>
+                <p className={styles.label}>
+                    Target assembly <small>(required)</small>
+                </p>
+                <CodeMirror
+                    className={styles.editor}
+                    value={asm}
+                    valueVersion={valueVersion}
+                    onChange={setAsm}
+                    extensions={basicSetup}
+                />
+            </div>
+            <div className={styles.editorContainer}>
+                <p className={styles.label}>
+                    Context{" "}
+                    <small>
+                        (any typedefs, structs, and declarations you would like
+                        to include go here; typically generated with m2ctx.py)
+                    </small>
+                </p>
+                <CodeMirror
+                    className={styles.editor}
+                    value={context}
+                    valueVersion={valueVersion}
+                    onChange={setContext}
+                    extensions={[basicSetup, cpp()]}
+                />
+            </div>
 
-        <div>
-            <AsyncButton
-                primary
-                disabled={asm.length === 0}
-                onClick={submit}
-                errorPlacement="right-center"
-                className="mt-2"
-            >
-                Create scratch
-            </AsyncButton>
-            <p className={styles.privacyNotice}>
-                decomp.me will store any data you submit and link it to your session.<br />
-                For more information, see our <Link href="/privacy">privacy policy</Link>.
-            </p>
+            <div>
+                <AsyncButton
+                    primary
+                    disabled={asm.length === 0}
+                    onClick={submit}
+                    errorPlacement="right-center"
+                    className="mt-2"
+                >
+                    Create scratch
+                </AsyncButton>
+                <p className={styles.privacyNotice}>
+                    decomp.me will store any data you submit and link it to your
+                    session.
+                    <br />
+                    For more information, see our{" "}
+                    <Link href="/privacy">privacy policy</Link>.
+                </p>
+            </div>
         </div>
-    </div>
+    );
 }
diff --git a/frontend/src/app/(navfooter)/new/description.ts b/frontend/src/app/(navfooter)/new/description.ts
index 86f2f20b6..1038c0744 100644
--- a/frontend/src/app/(navfooter)/new/description.ts
+++ b/frontend/src/app/(navfooter)/new/description.ts
@@ -1,3 +1,4 @@
-const DESCRIPTION = "A scratch is a playground where you can work on matching a given target function using any compiler options you like."
+const DESCRIPTION =
+    "A scratch is a playground where you can work on matching a given target function using any compiler options you like.";
 
-export default DESCRIPTION
+export default DESCRIPTION;
diff --git a/frontend/src/app/(navfooter)/new/layout.tsx b/frontend/src/app/(navfooter)/new/layout.tsx
index 4eba031e4..7bf201ea0 100644
--- a/frontend/src/app/(navfooter)/new/layout.tsx
+++ b/frontend/src/app/(navfooter)/new/layout.tsx
@@ -1,7 +1,9 @@
-import type { ReactNode } from "react"
+import type { ReactNode } from "react";
 
 export default function Layout({ children }: { children: ReactNode }) {
-    return <div className="mx-auto max-w-[46.5rem] p-4 pb-2 text-justify text-base leading-normal">
-        {children}
-    </div>
+    return (
+        <div className="mx-auto max-w-[46.5rem] p-4 pb-2 text-justify text-base leading-normal">
+            {children}
+        </div>
+    );
 }
diff --git a/frontend/src/app/(navfooter)/new/page.tsx b/frontend/src/app/(navfooter)/new/page.tsx
index 09df93979..8c1c4d7af 100644
--- a/frontend/src/app/(navfooter)/new/page.tsx
+++ b/frontend/src/app/(navfooter)/new/page.tsx
@@ -1,18 +1,22 @@
-import { get } from "@/lib/api/request"
+import { get } from "@/lib/api/request";
 
-import DESCRIPTION from "./description"
-import NewScratchForm from "./NewScratchForm"
+import DESCRIPTION from "./description";
+import NewScratchForm from "./NewScratchForm";
 
 export const metadata = {
     title: "New scratch",
-}
+};
 
 export default async function NewScratchPage() {
-    const compilers = await get("/compiler")
+    const compilers = await get("/compiler");
 
-    return <main>
-        <h1 className="font-semibold text-2xl text-gray-12 tracking-tight md:text-3xl">Start a new scratch</h1>
-        <p className="max-w-prose py-3 leading-snug">{DESCRIPTION}</p>
-        <NewScratchForm serverCompilers={compilers} />
-    </main>
+    return (
+        <main>
+            <h1 className="font-semibold text-2xl text-gray-12 tracking-tight md:text-3xl">
+                Start a new scratch
+            </h1>
+            <p className="max-w-prose py-3 leading-snug">{DESCRIPTION}</p>
+            <NewScratchForm serverCompilers={compilers} />
+        </main>
+    );
 }
diff --git a/frontend/src/app/(navfooter)/page.tsx b/frontend/src/app/(navfooter)/page.tsx
index 136ff7fb0..fab4e4e37 100644
--- a/frontend/src/app/(navfooter)/page.tsx
+++ b/frontend/src/app/(navfooter)/page.tsx
@@ -1,14 +1,14 @@
-import type { Metadata } from "next"
+import type { Metadata } from "next";
 
-import ScratchList, { SingleLineScratchItem } from "@/components/ScratchList"
-import YourScratchList from "@/components/YourScratchList"
+import ScratchList, { SingleLineScratchItem } from "@/components/ScratchList";
+import YourScratchList from "@/components/YourScratchList";
 
-import WelcomeInfo from "./WelcomeInfo"
+import WelcomeInfo from "./WelcomeInfo";
 
 export async function generateMetadata(): Promise<Metadata> {
-    const title = "decomp.me"
+    const title = "decomp.me";
 
-    const description = "A collaborative decompilation platform."
+    const description = "A collaborative decompilation platform.";
 
     return {
         openGraph: {
@@ -24,25 +24,25 @@ export async function generateMetadata(): Promise<Metadata> {
                 },
             ],
         },
-    }
+    };
 }
 
 export default function Page() {
-    return <main>
-        <header className="w-full py-16">
-            <WelcomeInfo />
-        </header>
-        <div className="mx-auto flex w-full max-w-screen-xl flex-col gap-16 p-8 md:flex-row">
-            <section className="md:w-1/2 lg:w-1/4">
-                <h2 className="mb-2 text-lg">Your scratches</h2>
-                <YourScratchList
-                    item={SingleLineScratchItem}
-                />
-            </section>
-            <section className="md:w-1/2 lg:w-3/4">
-                <h2 className="mb-2 text-lg">Recent activity</h2>
-                <ScratchList url="/scratch?page_size=20" />
-            </section>
-        </div>
-    </main>
+    return (
+        <main>
+            <header className="w-full py-16">
+                <WelcomeInfo />
+            </header>
+            <div className="mx-auto flex w-full max-w-screen-xl flex-col gap-16 p-8 md:flex-row">
+                <section className="md:w-1/2 lg:w-1/4">
+                    <h2 className="mb-2 text-lg">Your scratches</h2>
+                    <YourScratchList item={SingleLineScratchItem} />
+                </section>
+                <section className="md:w-1/2 lg:w-3/4">
+                    <h2 className="mb-2 text-lg">Recent activity</h2>
+                    <ScratchList url="/scratch?page_size=20" />
+                </section>
+            </div>
+        </main>
+    );
 }
diff --git a/frontend/src/app/(navfooter)/platform/[id]/page.tsx b/frontend/src/app/(navfooter)/platform/[id]/page.tsx
index 7efb05748..7f8945057 100644
--- a/frontend/src/app/(navfooter)/platform/[id]/page.tsx
+++ b/frontend/src/app/(navfooter)/platform/[id]/page.tsx
@@ -1,30 +1,35 @@
-import type { Metadata } from "next"
+import type { Metadata } from "next";
 
-import { notFound } from "next/navigation"
+import { notFound } from "next/navigation";
 
-import { PlatformIcon } from "@/components/PlatformSelect/PlatformIcon"
-import ScratchList, { ScratchItemPlatformList } from "@/components/ScratchList"
-import { get } from "@/lib/api/request"
-import type { PlatformMetadata } from "@/lib/api/types"
+import { PlatformIcon } from "@/components/PlatformSelect/PlatformIcon";
+import ScratchList, { ScratchItemPlatformList } from "@/components/ScratchList";
+import { get } from "@/lib/api/request";
+import type { PlatformMetadata } from "@/lib/api/types";
 
-export async function generateMetadata({ params }: { params: { id: number } }):Promise<Metadata> {
-    let platform: PlatformMetadata
+export async function generateMetadata({
+    params,
+}: { params: { id: number } }): Promise<Metadata> {
+    let platform: PlatformMetadata;
 
     try {
-        platform = await get(`/platform/${params.id}`)
+        platform = await get(`/platform/${params.id}`);
     } catch (error) {
-        console.error(error)
+        console.error(error);
     }
 
     if (!platform) {
-        return notFound()
+        return notFound();
     }
 
-    let description = "There "
-    description += platform.num_scratches === 1 ? "is " : "are "
-    description += platform.num_scratches === 0 ? "currently no " : `${platform.num_scratches.toLocaleString("en-US")} `
-    description += platform.num_scratches === 1 ? "scratch " : "scratches "
-    description += "for this platform."
+    let description = "There ";
+    description += platform.num_scratches === 1 ? "is " : "are ";
+    description +=
+        platform.num_scratches === 0
+            ? "currently no "
+            : `${platform.num_scratches.toLocaleString("en-US")} `;
+    description += platform.num_scratches === 1 ? "scratch " : "scratches ";
+    description += "for this platform.";
 
     return {
         title: platform.name,
@@ -32,37 +37,37 @@ export async function generateMetadata({ params }: { params: { id: number } }):P
             title: platform.name,
             description: description,
         },
-    }
+    };
 }
 
 export default async function Page({ params }: { params: { id: number } }) {
-    let platform: PlatformMetadata
+    let platform: PlatformMetadata;
     try {
-        platform = await get(`/platform/${params.id}`)
+        platform = await get(`/platform/${params.id}`);
     } catch (error) {
-        console.error(error)
+        console.error(error);
     }
 
     if (!platform) {
-        return notFound()
+        return notFound();
     }
 
-    return <main className="mx-auto w-full max-w-3xl p-4">
-        <div className="flex items-center gap-2 font-medium text-2xl">
-            <PlatformIcon platform={platform.id} size={32} />
-            <h1>
-                {platform.name}
-            </h1>
-        </div>
-        <p className="py-3 text-gray-11">{platform.description}</p>
+    return (
+        <main className="mx-auto w-full max-w-3xl p-4">
+            <div className="flex items-center gap-2 font-medium text-2xl">
+                <PlatformIcon platform={platform.id} size={32} />
+                <h1>{platform.name}</h1>
+            </div>
+            <p className="py-3 text-gray-11">{platform.description}</p>
 
-        <section>
-            <ScratchList
-                url={`/scratch?platform=${platform.id}&page_size=20`}
-                item={ScratchItemPlatformList}
-                isSortable={true}
-                title={`Scratches (${platform.num_scratches})`}
-            />
-        </section>
-    </main>
+            <section>
+                <ScratchList
+                    url={`/scratch?platform=${platform.id}&page_size=20`}
+                    item={ScratchItemPlatformList}
+                    isSortable={true}
+                    title={`Scratches (${platform.num_scratches})`}
+                />
+            </section>
+        </main>
+    );
 }
diff --git a/frontend/src/app/(navfooter)/preset/[id]/page.tsx b/frontend/src/app/(navfooter)/preset/[id]/page.tsx
index de7ff7519..10f968a59 100644
--- a/frontend/src/app/(navfooter)/preset/[id]/page.tsx
+++ b/frontend/src/app/(navfooter)/preset/[id]/page.tsx
@@ -1,31 +1,36 @@
-import type { Metadata } from "next"
+import type { Metadata } from "next";
 
-import { notFound } from "next/navigation"
+import { notFound } from "next/navigation";
 
-import { PlatformIcon } from "@/components/PlatformSelect/PlatformIcon"
-import ScratchList, { ScratchItemPresetList } from "@/components/ScratchList"
-import { get } from "@/lib/api/request"
-import type { Preset } from "@/lib/api/types"
-import getTranslation from "@/lib/i18n/translate"
+import { PlatformIcon } from "@/components/PlatformSelect/PlatformIcon";
+import ScratchList, { ScratchItemPresetList } from "@/components/ScratchList";
+import { get } from "@/lib/api/request";
+import type { Preset } from "@/lib/api/types";
+import getTranslation from "@/lib/i18n/translate";
 
-export async function generateMetadata({ params }: { params: { id: number } }): Promise<Metadata> {
-    let preset: Preset
+export async function generateMetadata({
+    params,
+}: { params: { id: number } }): Promise<Metadata> {
+    let preset: Preset;
 
     try {
-        preset = await get(`/preset/${params.id}`)
+        preset = await get(`/preset/${params.id}`);
     } catch (error) {
-        console.error(error)
+        console.error(error);
     }
 
     if (!preset) {
-        return notFound()
+        return notFound();
     }
 
-    let description = "There "
-    description += preset.num_scratches === 1 ? "is " : "are "
-    description += preset.num_scratches === 0 ? "currently no " : `${preset.num_scratches.toLocaleString("en-US")} `
-    description += preset.num_scratches === 1 ? "scratch " : "scratches "
-    description += "that use this preset."
+    let description = "There ";
+    description += preset.num_scratches === 1 ? "is " : "are ";
+    description +=
+        preset.num_scratches === 0
+            ? "currently no "
+            : `${preset.num_scratches.toLocaleString("en-US")} `;
+    description += preset.num_scratches === 1 ? "scratch " : "scratches ";
+    description += "that use this preset.";
 
     return {
         title: preset.name,
@@ -33,41 +38,41 @@ export async function generateMetadata({ params }: { params: { id: number } }):
             title: preset.name,
             description: description,
         },
-    }
+    };
 }
 
 export default async function Page({ params }: { params: { id: number } }) {
-    const compilersTranslation = getTranslation("compilers")
+    const compilersTranslation = getTranslation("compilers");
 
-    let preset: Preset
+    let preset: Preset;
     try {
-        preset = await get(`/preset/${params.id}`)
+        preset = await get(`/preset/${params.id}`);
     } catch (error) {
-        console.error(error)
+        console.error(error);
     }
 
     if (!preset) {
-        return notFound()
+        return notFound();
     }
 
-    const compilerName = compilersTranslation.t(preset.compiler)
+    const compilerName = compilersTranslation.t(preset.compiler);
 
-    return <main className="mx-auto w-full max-w-3xl p-4">
-        <div className="flex items-center gap-2 font-medium text-2xl">
-            <PlatformIcon platform={preset.platform} size={32} />
-            <h1>
-                {preset.name}
-            </h1>
-        </div>
-        <p className="py-3 text-gray-11">{compilerName}</p>
+    return (
+        <main className="mx-auto w-full max-w-3xl p-4">
+            <div className="flex items-center gap-2 font-medium text-2xl">
+                <PlatformIcon platform={preset.platform} size={32} />
+                <h1>{preset.name}</h1>
+            </div>
+            <p className="py-3 text-gray-11">{compilerName}</p>
 
-        <section>
-            <ScratchList
-                url={`/scratch?preset=${preset.id}&page_size=20`}
-                item={ScratchItemPresetList}
-                isSortable={true}
-                title={`Scratches (${preset.num_scratches})`}
-            />
-        </section>
-    </main>
+            <section>
+                <ScratchList
+                    url={`/scratch?preset=${preset.id}&page_size=20`}
+                    item={ScratchItemPresetList}
+                    isSortable={true}
+                    title={`Scratches (${preset.num_scratches})`}
+                />
+            </section>
+        </main>
+    );
 }
diff --git a/frontend/src/app/(navfooter)/preset/page.tsx b/frontend/src/app/(navfooter)/preset/page.tsx
index f6dab82e7..3a1df05fd 100644
--- a/frontend/src/app/(navfooter)/preset/page.tsx
+++ b/frontend/src/app/(navfooter)/preset/page.tsx
@@ -1,12 +1,12 @@
-import { Presets } from "@/app/(navfooter)/preset/presets"
-import { get } from "@/lib/api/request"
+import { Presets } from "@/app/(navfooter)/preset/presets";
+import { get } from "@/lib/api/request";
 
 export default async function Page() {
-    const compilers = await get("/compiler")
+    const compilers = await get("/compiler");
 
     return (
         <main className="mx-auto w-full max-w-3xl p-4">
-            <Presets serverCompilers={compilers}/>
+            <Presets serverCompilers={compilers} />
         </main>
-    )
+    );
 }
diff --git a/frontend/src/app/(navfooter)/preset/presets.tsx b/frontend/src/app/(navfooter)/preset/presets.tsx
index d93d5e096..4c518cc09 100644
--- a/frontend/src/app/(navfooter)/preset/presets.tsx
+++ b/frontend/src/app/(navfooter)/preset/presets.tsx
@@ -1,36 +1,41 @@
-"use client"
+"use client";
 
-import { useState } from "react"
+import { useState } from "react";
 
-import PlatformSelect from "@/components/PlatformSelect"
-import { PresetList } from "@/components/PresetList"
-import type * as api from "@/lib/api"
+import PlatformSelect from "@/components/PlatformSelect";
+import { PresetList } from "@/components/PresetList";
+import type * as api from "@/lib/api";
 
-export function Presets({ serverCompilers }: {
+export function Presets({
+    serverCompilers,
+}: {
     serverCompilers: {
         platforms: {
-            [id: string]: api.Platform
-        }
+            [id: string]: api.Platform;
+        };
         compilers: {
-            [id: string]: api.Compiler
-        }
-    }
+            [id: string]: api.Compiler;
+        };
+    };
 }) {
+    const platforms = Object.keys(serverCompilers.platforms);
 
-    const platforms = Object.keys(serverCompilers.platforms)
-
-    const [platform, setPlatform] = useState<string>(platforms.length > 0 ? platforms[0] : "")
+    const [platform, setPlatform] = useState<string>(
+        platforms.length > 0 ? platforms[0] : "",
+    );
 
     return (
         <section>
-            <h2 className="pb-2 font-medium text-lg tracking-tight">Platforms</h2>
+            <h2 className="pb-2 font-medium text-lg tracking-tight">
+                Platforms
+            </h2>
             <PlatformSelect
                 platforms={serverCompilers.platforms}
                 value={platform}
                 onChange={setPlatform}
             />
             <h2 className="py-2 font-medium text-lg tracking-tight">Presets</h2>
-            <PresetList url={`/preset?platform=${platform}`}/>
+            <PresetList url={`/preset?platform=${platform}`} />
         </section>
-    )
+    );
 }
diff --git a/frontend/src/app/(navfooter)/privacy/page.tsx b/frontend/src/app/(navfooter)/privacy/page.tsx
index c5eb51897..bc31ae628 100644
--- a/frontend/src/app/(navfooter)/privacy/page.tsx
+++ b/frontend/src/app/(navfooter)/privacy/page.tsx
@@ -1,112 +1,159 @@
-import Link from "next/link"
+import Link from "next/link";
 
-const subtitle = "mt-8 text-xl font-semibold tracking-tight text-gray-11"
-const link = "text-blue-11 hover:underline active:translate-y-px"
+const subtitle = "mt-8 text-xl font-semibold tracking-tight text-gray-11";
+const link = "text-blue-11 hover:underline active:translate-y-px";
 
 export const metadata = {
     title: "Privacy policy",
-}
+};
 
 export default function Page() {
-    return <main className="mx-auto max-w-prose p-4 pb-2 text-justify text-base leading-normal">
-        <h1 className="font-semibold text-2xl text-gray-12 tracking-tight md:text-3xl">
-            Privacy policy
-        </h1>
+    return (
+        <main className="mx-auto max-w-prose p-4 pb-2 text-justify text-base leading-normal">
+            <h1 className="font-semibold text-2xl text-gray-12 tracking-tight md:text-3xl">
+                Privacy policy
+            </h1>
 
-        <p className="mt-2 mb-6 text-gray-11 text-sm">
-            Last updated January 13th 2022
-        </p>
+            <p className="mt-2 mb-6 text-gray-11 text-sm">
+                Last updated January 13th 2022
+            </p>
 
-        <p className="my-4">
-            For the purposes of this document, "We", "our", and "decomp.me" refers to this
-            website, its API, and its administrators.
-            "You" and "user" refers to any person or robot visiting this website.
-        </p>
+            <p className="my-4">
+                For the purposes of this document, "We", "our", and "decomp.me"
+                refers to this website, its API, and its administrators. "You"
+                and "user" refers to any person or robot visiting this website.
+            </p>
 
-        <h2 className={subtitle}>Your privacy</h2>
-        <p className="my-4">
-            We care and respect your right to privacy, and only store data we believe we have
-            legitimate uses for. We have made every effort to ensure that we are compliant with
-            privacy regulations such as GDPR, CCPA, and PECR.
-        </p>
+            <h2 className={subtitle}>Your privacy</h2>
+            <p className="my-4">
+                We care and respect your right to privacy, and only store data
+                we believe we have legitimate uses for. We have made every
+                effort to ensure that we are compliant with privacy regulations
+                such as GDPR, CCPA, and PECR.
+            </p>
 
-        <h2 className={subtitle}>Types of data we collect</h2>
-        <p className="my-4">
-            <b>Logging:</b> decomp.me stores logs when users make requests to
-            decomp.me and its associated API. Data logs are restricted to IP address,
-            request path, and time/date. All logs older than 7 days are automatically
-            deleted in the interests of data minimization.
-            We will only use logs data in exceptional circumstances which we believe to
-            be reasonable, such as to defend against attacks against our servers.
-            Logging IP addresses for the legitimate purpose of security is a widespread practice
-            and does not conflict with privacy regulations.
-        </p>
-        <p className="my-4">
-            <b>Analytics:</b> we use the open source Plausible Analytics software routed through our stats
-            subdomain to count website visits etc.
-            All analytics data collected is publicly available on <Link href="https://stats.decomp.me/decomp.me" className={link}>stats.decomp.me</Link>.
-            All site measurement is carried out absolutely anonymously and in aggregate only.
-            Analytics data collected is limited to:
-        </p>
-        <ul className="mt-2 mb-6 px-4 text-gray-11 text-sm">
-            <li className="my-1">Page URL</li>
-            <li className="my-1">HTTP Referer</li>
-            <li className="my-1">Browser and operating system (using User-Agent HTTP header, which is discarded)</li>
-            <li className="my-1">Device type (using screen width, which is discarded)</li>
-            <li className="my-1">Country, region, city (using IP address, which is then discarded)</li>
-            <li className="my-1">Actions taken on the site, such as compiling or saving a scratch</li>
-        </ul>
-        <p className="my-4">
-            For more information about analytics data, see the <Link href="https://plausible.io/data-policy" className={link}>Plausible Data Policy</Link>.
-            Please note that decomp.me servers, not Plausible, store and process our analytics data.
-        </p>
-        <p className="my-4">
-            <b>Voluntarily-submitted information:</b> decomp.me collects and retains information
-            voluntarily submitted to us. For logged-in users, this includes basic GitHub profile
-            information such as name, email, and avatar. For all users, data submitted on the
-            new scratch page and saved in the scratch editor will be stored and linked to your
-            session.
-        </p>
-        <p className="my-4">
-            <b>Cookies:</b> decomp.me uses a single persistent authentication cookie used to link
-            voluntarily-submitted information to your session on our site. If you are logged in,
-            this cookie will link your session to your account on decomp.me. We do not show any
-            'cookie banners' or 'privacy popups' on decomp.me because we do not use any third-party
-            or analytics cookies.
-        </p>
+            <h2 className={subtitle}>Types of data we collect</h2>
+            <p className="my-4">
+                <b>Logging:</b> decomp.me stores logs when users make requests
+                to decomp.me and its associated API. Data logs are restricted to
+                IP address, request path, and time/date. All logs older than 7
+                days are automatically deleted in the interests of data
+                minimization. We will only use logs data in exceptional
+                circumstances which we believe to be reasonable, such as to
+                defend against attacks against our servers. Logging IP addresses
+                for the legitimate purpose of security is a widespread practice
+                and does not conflict with privacy regulations.
+            </p>
+            <p className="my-4">
+                <b>Analytics:</b> we use the open source Plausible Analytics
+                software routed through our stats subdomain to count website
+                visits etc. All analytics data collected is publicly available
+                on{" "}
+                <Link href="https://stats.decomp.me/decomp.me" className={link}>
+                    stats.decomp.me
+                </Link>
+                . All site measurement is carried out absolutely anonymously and
+                in aggregate only. Analytics data collected is limited to:
+            </p>
+            <ul className="mt-2 mb-6 px-4 text-gray-11 text-sm">
+                <li className="my-1">Page URL</li>
+                <li className="my-1">HTTP Referer</li>
+                <li className="my-1">
+                    Browser and operating system (using User-Agent HTTP header,
+                    which is discarded)
+                </li>
+                <li className="my-1">
+                    Device type (using screen width, which is discarded)
+                </li>
+                <li className="my-1">
+                    Country, region, city (using IP address, which is then
+                    discarded)
+                </li>
+                <li className="my-1">
+                    Actions taken on the site, such as compiling or saving a
+                    scratch
+                </li>
+            </ul>
+            <p className="my-4">
+                For more information about analytics data, see the{" "}
+                <Link href="https://plausible.io/data-policy" className={link}>
+                    Plausible Data Policy
+                </Link>
+                . Please note that decomp.me servers, not Plausible, store and
+                process our analytics data.
+            </p>
+            <p className="my-4">
+                <b>Voluntarily-submitted information:</b> decomp.me collects and
+                retains information voluntarily submitted to us. For logged-in
+                users, this includes basic GitHub profile information such as
+                name, email, and avatar. For all users, data submitted on the
+                new scratch page and saved in the scratch editor will be stored
+                and linked to your session.
+            </p>
+            <p className="my-4">
+                <b>Cookies:</b> decomp.me uses a single persistent
+                authentication cookie used to link voluntarily-submitted
+                information to your session on our site. If you are logged in,
+                this cookie will link your session to your account on decomp.me.
+                We do not show any 'cookie banners' or 'privacy popups' on
+                decomp.me because we do not use any third-party or analytics
+                cookies.
+            </p>
 
-        <h2 className={subtitle}>How data is stored and used</h2>
-        <p className="my-4">
-            decomp.me does not sell, rent, or mine user information under any circumstances.
-            decomp.me's servers are located in Finland. which means that we will
-            transfer, process, and store your information there. In very extreme cases, such as if
-            required by police or other government agencies, data may be disclosed.
-        </p>
-        <p className="my-4">
-            Analytics data is used to prioritise what site features and fixes should be worked
-            on and to let us determine features which are popular or unpopular.
-        </p>
-        <p className="my-4">
-            Voluntarily-submitted information is used to provide vital site features such
-            as user profile pages and the scratch editor. We also reserve the right to use
-            any and all voluntarily-submited information for improving existing decompilation
-            tools and developing new ones. This will not involve sharing information with third parties.
-        </p>
-        <p className="my-4">
-            We make every effort to keep your data secure. In the case of a breach, we will
-            notify you and take appropriate action, such as revoking GitHub OAuth tokens.
-            Please note that our servers never receive or store user passwords.
-        </p>
+            <h2 className={subtitle}>How data is stored and used</h2>
+            <p className="my-4">
+                decomp.me does not sell, rent, or mine user information under
+                any circumstances. decomp.me's servers are located in Finland.
+                which means that we will transfer, process, and store your
+                information there. In very extreme cases, such as if required by
+                police or other government agencies, data may be disclosed.
+            </p>
+            <p className="my-4">
+                Analytics data is used to prioritise what site features and
+                fixes should be worked on and to let us determine features which
+                are popular or unpopular.
+            </p>
+            <p className="my-4">
+                Voluntarily-submitted information is used to provide vital site
+                features such as user profile pages and the scratch editor. We
+                also reserve the right to use any and all voluntarily-submited
+                information for improving existing decompilation tools and
+                developing new ones. This will not involve sharing information
+                with third parties.
+            </p>
+            <p className="my-4">
+                We make every effort to keep your data secure. In the case of a
+                breach, we will notify you and take appropriate action, such as
+                revoking GitHub OAuth tokens. Please note that our servers never
+                receive or store user passwords.
+            </p>
 
-        <h2 className={subtitle}>How to request your data or delete it</h2>
-        <p className="my-4">
-            If you want us to delete some or all data linked to you, please contact us via <Link href="https://discord.gg/sutqNShRRs" className={link}>our Discord server</Link> or <Link href="https://github.com/decompme/decomp.me/issues">GitHub Issues</Link>.
-            You may also want to <Link href="https://github.com/settings/applications" className={link}>disassociate your GitHub account with decomp.me</Link>.
-        </p>
-        <p className="my-4">
-            You may contact us through the same channels linked above if you would like to request
-            a copy of all data linked to you. Similarly, please contact us if you have any questions
-            or concerns regarding this document.
-        </p>
-    </main>
+            <h2 className={subtitle}>How to request your data or delete it</h2>
+            <p className="my-4">
+                If you want us to delete some or all data linked to you, please
+                contact us via{" "}
+                <Link href="https://discord.gg/sutqNShRRs" className={link}>
+                    our Discord server
+                </Link>{" "}
+                or{" "}
+                <Link href="https://github.com/decompme/decomp.me/issues">
+                    GitHub Issues
+                </Link>
+                . You may also want to{" "}
+                <Link
+                    href="https://github.com/settings/applications"
+                    className={link}
+                >
+                    disassociate your GitHub account with decomp.me
+                </Link>
+                .
+            </p>
+            <p className="my-4">
+                You may contact us through the same channels linked above if you
+                would like to request a copy of all data linked to you.
+                Similarly, please contact us if you have any questions or
+                concerns regarding this document.
+            </p>
+        </main>
+    );
 }
diff --git a/frontend/src/app/(navfooter)/settings/Checkbox.tsx b/frontend/src/app/(navfooter)/settings/Checkbox.tsx
index 324599990..adc28a7d3 100644
--- a/frontend/src/app/(navfooter)/settings/Checkbox.tsx
+++ b/frontend/src/app/(navfooter)/settings/Checkbox.tsx
@@ -1,32 +1,42 @@
-import { type ReactNode, useId } from "react"
+import { type ReactNode, useId } from "react";
 
 export type Props = {
-    checked: boolean
-    onChange: (checked: boolean) => void
+    checked: boolean;
+    onChange: (checked: boolean) => void;
 
-    label: ReactNode
-    description?: ReactNode
-    children?: ReactNode
-}
+    label: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+};
 
-export default function Checkbox({ checked, onChange, label, description, children }: Props) {
-    const id = useId()
+export default function Checkbox({
+    checked,
+    onChange,
+    label,
+    description,
+    children,
+}: Props) {
+    const id = useId();
 
-    return <div className="flex gap-2">
-        <div>
-            <input
-                id={id}
-                type="checkbox"
-                checked={checked}
-                onChange={evt => onChange(evt.target.checked)}
-            />
-        </div>
-        <div className="grow">
-            <label htmlFor={id} className="select-none font-semibold">{label}</label>
-            {description && <div className="text-gray-11 text-sm">{description}</div>}
-            {children && <div className="pt-3">
-                {children}
-            </div>}
+    return (
+        <div className="flex gap-2">
+            <div>
+                <input
+                    id={id}
+                    type="checkbox"
+                    checked={checked}
+                    onChange={(evt) => onChange(evt.target.checked)}
+                />
+            </div>
+            <div className="grow">
+                <label htmlFor={id} className="select-none font-semibold">
+                    {label}
+                </label>
+                {description && (
+                    <div className="text-gray-11 text-sm">{description}</div>
+                )}
+                {children && <div className="pt-3">{children}</div>}
+            </div>
         </div>
-    </div>
+    );
 }
diff --git a/frontend/src/app/(navfooter)/settings/NavItem.tsx b/frontend/src/app/(navfooter)/settings/NavItem.tsx
index 1eb5d62cd..d1fb49a00 100644
--- a/frontend/src/app/(navfooter)/settings/NavItem.tsx
+++ b/frontend/src/app/(navfooter)/settings/NavItem.tsx
@@ -1,32 +1,34 @@
-"use client"
+"use client";
 
-import type { ReactNode } from "react"
+import type { ReactNode } from "react";
 
-import { useSelectedLayoutSegment } from "next/navigation"
+import { useSelectedLayoutSegment } from "next/navigation";
 
-import classNames from "classnames"
+import classNames from "classnames";
 
-import GhostButton from "@/components/GhostButton"
+import GhostButton from "@/components/GhostButton";
 
 export type Props = {
-    segment: string
-    icon: ReactNode
-    label: ReactNode
-}
+    segment: string;
+    icon: ReactNode;
+    label: ReactNode;
+};
 
 export default function NavItem({ segment, label, icon }: Props) {
-    const isSelected = useSelectedLayoutSegment() === segment
+    const isSelected = useSelectedLayoutSegment() === segment;
 
-    return <li className="grow text-center lg:text-left">
-        <GhostButton
-            href={`/settings/${segment}`}
-            className={classNames({
-                "!px-3 block rounded-md py-2": true,
-                "pointer-events-none bg-gray-5 font-medium": isSelected,
-            })}
-        >
-            <span className="mr-2 opacity-50">{icon}</span>
-            {label}
-        </GhostButton>
-    </li>
+    return (
+        <li className="grow text-center lg:text-left">
+            <GhostButton
+                href={`/settings/${segment}`}
+                className={classNames({
+                    "!px-3 block rounded-md py-2": true,
+                    "pointer-events-none bg-gray-5 font-medium": isSelected,
+                })}
+            >
+                <span className="mr-2 opacity-50">{icon}</span>
+                {label}
+            </GhostButton>
+        </li>
+    );
 }
diff --git a/frontend/src/app/(navfooter)/settings/RadioList.tsx b/frontend/src/app/(navfooter)/settings/RadioList.tsx
index 92dfb6142..f75795532 100644
--- a/frontend/src/app/(navfooter)/settings/RadioList.tsx
+++ b/frontend/src/app/(navfooter)/settings/RadioList.tsx
@@ -1,54 +1,76 @@
-import { type ReactNode, useId } from "react"
+import { type ReactNode, useId } from "react";
 
-function RadioButton({ name, value, checked, onChange, option }: { name: string, value: string, checked: boolean, onChange: (value: string) => void, option: Option }) {
-    const id = useId()
+function RadioButton({
+    name,
+    value,
+    checked,
+    onChange,
+    option,
+}: {
+    name: string;
+    value: string;
+    checked: boolean;
+    onChange: (value: string) => void;
+    option: Option;
+}) {
+    const id = useId();
 
-    return <div className="flex gap-2">
-        <div>
-            <input
-                id={id}
-                name={name}
-                value={value}
-                type="radio"
-                checked={checked}
-                onChange={evt => onChange(evt.target.value)}
-            />
+    return (
+        <div className="flex gap-2">
+            <div>
+                <input
+                    id={id}
+                    name={name}
+                    value={value}
+                    type="radio"
+                    checked={checked}
+                    onChange={(evt) => onChange(evt.target.value)}
+                />
+            </div>
+            <div className="grow">
+                <label htmlFor={id} className="select-none font-semibold">
+                    {option.label}
+                </label>
+                {option.description && (
+                    <div className="text-gray-11 text-sm">
+                        {option.description}
+                    </div>
+                )}
+                {option.children && (
+                    <div className="pt-3">{option.children}</div>
+                )}
+            </div>
         </div>
-        <div className="grow">
-            <label htmlFor={id} className="select-none font-semibold">{option.label}</label>
-            {option.description && <div className="text-gray-11 text-sm">{option.description}</div>}
-            {option.children && <div className="pt-3">
-                {option.children}
-            </div>}
-        </div>
-    </div>
+    );
 }
 
 export type Option = {
-    label: ReactNode
-    description?: ReactNode
-    children?: ReactNode
-}
+    label: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+};
 
 export type Props = {
-    value: string
-    onChange: (value: string) => void
-    options: { [key: string]: Option }
-}
+    value: string;
+    onChange: (value: string) => void;
+    options: { [key: string]: Option };
+};
 
 export default function RadioList({ value, onChange, options }: Props) {
-    const name = useId()
+    const name = useId();
 
-    return <div className="p-1">
-        {Object.keys(options).map(key =>
-            <RadioButton
-                name={name}
-                key={key}
-                value={key}
-                checked={key === value}
-                option={options[key]}
-                onChange={onChange}
-            />
-        )}
-    </div>
+    return (
+        <div className="p-1">
+            {Object.keys(options).map((key) => (
+                <RadioButton
+                    name={name}
+                    key={key}
+                    value={key}
+                    checked={key === value}
+                    option={options[key]}
+                    onChange={onChange}
+                />
+            ))}
+        </div>
+    );
 }
diff --git a/frontend/src/app/(navfooter)/settings/Section.tsx b/frontend/src/app/(navfooter)/settings/Section.tsx
index 98c5f7dfa..682488d16 100644
--- a/frontend/src/app/(navfooter)/settings/Section.tsx
+++ b/frontend/src/app/(navfooter)/settings/Section.tsx
@@ -1,15 +1,17 @@
-import type { ReactNode } from "react"
+import type { ReactNode } from "react";
 
 export type Props = {
-    title: string
-    children: ReactNode
-}
+    title: string;
+    children: ReactNode;
+};
 
 export default function Section({ title, children }: Props) {
-    return <section className="mb-8">
-        <h2 className="border-gray-6 border-b py-1 font-semibold text-2xl">{title}</h2>
-        <div className="pt-4">
-            {children}
-        </div>
-    </section>
+    return (
+        <section className="mb-8">
+            <h2 className="border-gray-6 border-b py-1 font-semibold text-2xl">
+                {title}
+            </h2>
+            <div className="pt-4">{children}</div>
+        </section>
+    );
 }
diff --git a/frontend/src/app/(navfooter)/settings/SliderField.tsx b/frontend/src/app/(navfooter)/settings/SliderField.tsx
index 9a2fd1994..cfd5db1b8 100644
--- a/frontend/src/app/(navfooter)/settings/SliderField.tsx
+++ b/frontend/src/app/(navfooter)/settings/SliderField.tsx
@@ -1,66 +1,86 @@
-import { useId, type ReactNode } from "react"
+import { useId, type ReactNode } from "react";
 
-import classNames from "classnames"
+import classNames from "classnames";
 
-import NumberInput from "@/components/NumberInput"
+import NumberInput from "@/components/NumberInput";
 
 function clamp(value: number, min: number, max: number) {
-    return Math.min(Math.max(value, min), max)
+    return Math.min(Math.max(value, min), max);
 }
 
 export type Props = {
-  value: number
-  onChange: (value: number) => void
-  disabled?: boolean
+    value: number;
+    onChange: (value: number) => void;
+    disabled?: boolean;
 
-  label: ReactNode
-  description?: ReactNode
-  unit?: ReactNode
+    label: ReactNode;
+    description?: ReactNode;
+    unit?: ReactNode;
 
-  min: number
-  max: number
-  step: number
-}
+    min: number;
+    max: number;
+    step: number;
+};
 
-export default function SliderField({ value, onChange, disabled, label, description, unit, min, max, step }: Props) {
-    const id = useId()
+export default function SliderField({
+    value,
+    onChange,
+    disabled,
+    label,
+    description,
+    unit,
+    min,
+    max,
+    step,
+}: Props) {
+    const id = useId();
 
-    return <div
-        className={classNames({
-            "cursor-not-allowed opacity-50": disabled,
-        })}
-    >
-        <label htmlFor={id} className="select-none font-semibold">
-            {label}
-        </label>
+    return (
+        <div
+            className={classNames({
+                "cursor-not-allowed opacity-50": disabled,
+            })}
+        >
+            <label htmlFor={id} className="select-none font-semibold">
+                {label}
+            </label>
 
-        <div className="mt-1 select-none text-gray-11">
-            <div className="inline-block w-1/6 font-medium">
-                <NumberInput
-                    value={value}
-                    onChange={newValue => onChange(clamp(newValue, min, max))}
-                    disabled={disabled}
-                />
-                {unit}
-            </div>
+            <div className="mt-1 select-none text-gray-11">
+                <div className="inline-block w-1/6 font-medium">
+                    <NumberInput
+                        value={value}
+                        onChange={(newValue) =>
+                            onChange(clamp(newValue, min, max))
+                        }
+                        disabled={disabled}
+                    />
+                    {unit}
+                </div>
 
-            <div className="inline-flex w-5/6 items-center gap-2 text-gray-10 text-xs">
-                {min}{unit}
-                <input
-                    id={id}
-                    type="range"
-                    min={min}
-                    max={max}
-                    step={step}
-                    value={value}
-                    onChange={evt => onChange(clamp(+evt.target.value, min, max))}
-                    disabled={disabled}
-                    className="w-full focus:ring"
-                />
-                {max}{unit}
+                <div className="inline-flex w-5/6 items-center gap-2 text-gray-10 text-xs">
+                    {min}
+                    {unit}
+                    <input
+                        id={id}
+                        type="range"
+                        min={min}
+                        max={max}
+                        step={step}
+                        value={value}
+                        onChange={(evt) =>
+                            onChange(clamp(+evt.target.value, min, max))
+                        }
+                        disabled={disabled}
+                        className="w-full focus:ring"
+                    />
+                    {max}
+                    {unit}
+                </div>
             </div>
-        </div>
 
-        {description && <div className="mt-1 text-gray-11 text-sm">{description}</div>}
-    </div>
+            {description && (
+                <div className="mt-1 text-gray-11 text-sm">{description}</div>
+            )}
+        </div>
+    );
 }
diff --git a/frontend/src/app/(navfooter)/settings/TextField.tsx b/frontend/src/app/(navfooter)/settings/TextField.tsx
index 84459ba30..452defb5b 100644
--- a/frontend/src/app/(navfooter)/settings/TextField.tsx
+++ b/frontend/src/app/(navfooter)/settings/TextField.tsx
@@ -1,42 +1,54 @@
-import { useId, type ReactNode, type CSSProperties } from "react"
+import { useId, type ReactNode, type CSSProperties } from "react";
 
-import classNames from "classnames"
+import classNames from "classnames";
 
 export type Props = {
-  value: string
-  onChange: (value: string) => void
-  disabled?: boolean
+    value: string;
+    onChange: (value: string) => void;
+    disabled?: boolean;
 
-  label: ReactNode
-  description?: ReactNode
+    label: ReactNode;
+    description?: ReactNode;
 
-  placeholder?: string
+    placeholder?: string;
 
-  inputStyle?: CSSProperties
-}
+    inputStyle?: CSSProperties;
+};
 
-export default function TextField({ value, onChange, disabled, label, description, placeholder, inputStyle }: Props) {
-    const id = useId()
+export default function TextField({
+    value,
+    onChange,
+    disabled,
+    label,
+    description,
+    placeholder,
+    inputStyle,
+}: Props) {
+    const id = useId();
 
-    return <div
-        className={classNames({
-            "cursor-not-allowed opacity-50": disabled,
-        })}
-    >
-        <label htmlFor={id} className="select-none font-semibold">
-            {label}
-        </label>
-        {description && <div className="mt-1 text-gray-11 text-sm">{description}</div>}
-        <input
-            id={id}
-            type="text"
-            value={value}
-            onChange={evt => onChange(evt.target.value)}
-            disabled={disabled}
-            placeholder={placeholder}
-            spellCheck={false}
-            className="mt-1 block w-full rounded border border-gray-6 bg-transparent px-2.5 py-1.5 text-gray-11 text-sm outline-none focus:text-gray-12 focus:placeholder:text-gray-10"
-            style={inputStyle}
-        />
-    </div>
+    return (
+        <div
+            className={classNames({
+                "cursor-not-allowed opacity-50": disabled,
+            })}
+        >
+            <label htmlFor={id} className="select-none font-semibold">
+                {label}
+            </label>
+            {description && (
+                <div className="mt-1 text-gray-11 text-sm">{description}</div>
+            )}
+            <input
+                id={id}
+                type="text"
+                value={value}
+                onChange={(evt) => onChange(evt.target.value)}
+                disabled={disabled}
+                placeholder={placeholder}
+                spellCheck={false}
+                className="mt-1 block w-full rounded border border-gray-6 bg-transparent px-2.5 py-1.5 text-gray-11 text-sm outline-none focus:text-gray-12 focus:placeholder:text-gray-10"
+                style={inputStyle}
+            />
+        </div>
+    );
 }
diff --git a/frontend/src/app/(navfooter)/settings/account/ProfileSection.tsx b/frontend/src/app/(navfooter)/settings/account/ProfileSection.tsx
index fcb414078..22f39fbd5 100644
--- a/frontend/src/app/(navfooter)/settings/account/ProfileSection.tsx
+++ b/frontend/src/app/(navfooter)/settings/account/ProfileSection.tsx
@@ -1,32 +1,37 @@
-"use client"
+"use client";
 
-import { LinkExternalIcon } from "@primer/octicons-react"
+import { LinkExternalIcon } from "@primer/octicons-react";
 
-import Button from "@/components/Button"
-import GhostButton from "@/components/GhostButton"
-import { useThisUser, isAnonUser } from "@/lib/api"
-import { userHtmlUrl } from "@/lib/api/urls"
+import Button from "@/components/Button";
+import GhostButton from "@/components/GhostButton";
+import { useThisUser, isAnonUser } from "@/lib/api";
+import { userHtmlUrl } from "@/lib/api/urls";
 
-import Section from "../Section"
+import Section from "../Section";
 
 export default function ProfileSection() {
-    const user = useThisUser()
+    const user = useThisUser();
 
     // No profile section for anonymous users
     if (!user || isAnonUser(user)) {
-        return null
+        return null;
     }
 
-    return <Section title="Profile">
-        <p>
-            Your name and profile picture are controlled by your GitHub account.
-        </p>
-        <div className="flex items-center gap-2 py-4">
-            <Button href="https://github.com/settings/profile">
-                Edit on GitHub
-                <LinkExternalIcon />
-            </Button>
-            <GhostButton href={userHtmlUrl(user)}>View decomp.me profile</GhostButton>
-        </div>
-    </Section>
+    return (
+        <Section title="Profile">
+            <p>
+                Your name and profile picture are controlled by your GitHub
+                account.
+            </p>
+            <div className="flex items-center gap-2 py-4">
+                <Button href="https://github.com/settings/profile">
+                    Edit on GitHub
+                    <LinkExternalIcon />
+                </Button>
+                <GhostButton href={userHtmlUrl(user)}>
+                    View decomp.me profile
+                </GhostButton>
+            </div>
+        </Section>
+    );
 }
diff --git a/frontend/src/app/(navfooter)/settings/account/SignOutButton.tsx b/frontend/src/app/(navfooter)/settings/account/SignOutButton.tsx
index 8d4148a2a..426b63ced 100644
--- a/frontend/src/app/(navfooter)/settings/account/SignOutButton.tsx
+++ b/frontend/src/app/(navfooter)/settings/account/SignOutButton.tsx
@@ -1,21 +1,23 @@
-"use client"
+"use client";
 
-import { mutate } from "swr"
+import { mutate } from "swr";
 
-import AsyncButton from "@/components/AsyncButton"
-import { useThisUser, isAnonUser } from "@/lib/api"
-import { post } from "@/lib/api/request"
+import AsyncButton from "@/components/AsyncButton";
+import { useThisUser, isAnonUser } from "@/lib/api";
+import { post } from "@/lib/api/request";
 
 export default function SignOutButton() {
-    const user = useThisUser()
-    const isAnon = user && isAnonUser(user)
+    const user = useThisUser();
+    const isAnon = user && isAnonUser(user);
 
-    return <AsyncButton
-        onClick={async () => {
-            const user = await post("/user", {})
-            await mutate("/user", user)
-        }}
-    >
-        {isAnon ? "Reset anonymous appearance" : "Sign out"}
-    </AsyncButton>
+    return (
+        <AsyncButton
+            onClick={async () => {
+                const user = await post("/user", {});
+                await mutate("/user", user);
+            }}
+        >
+            {isAnon ? "Reset anonymous appearance" : "Sign out"}
+        </AsyncButton>
+    );
 }
diff --git a/frontend/src/app/(navfooter)/settings/account/UserState.tsx b/frontend/src/app/(navfooter)/settings/account/UserState.tsx
index f89adf727..75488f577 100644
--- a/frontend/src/app/(navfooter)/settings/account/UserState.tsx
+++ b/frontend/src/app/(navfooter)/settings/account/UserState.tsx
@@ -1,31 +1,38 @@
-"use client"
+"use client";
 
-import GitHubLoginButton from "@/components/GitHubLoginButton"
-import LoadingSpinner from "@/components/loading.svg"
-import UserAvatar from "@/components/user/UserAvatar"
-import UserMention from "@/components/user/UserMention"
-import { isAnonUser, useThisUser } from "@/lib/api"
+import GitHubLoginButton from "@/components/GitHubLoginButton";
+import LoadingSpinner from "@/components/loading.svg";
+import UserAvatar from "@/components/user/UserAvatar";
+import UserMention from "@/components/user/UserMention";
+import { isAnonUser, useThisUser } from "@/lib/api";
 
-import SignOutButton from "./SignOutButton"
+import SignOutButton from "./SignOutButton";
 
 export default function UserState() {
-    const user = useThisUser()
+    const user = useThisUser();
 
-    return <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
-        <div>
-            <UserAvatar user={user} className="size-16" />
-        </div>
-        {user ? <div>
-            <p>
-                {isAnonUser(user) ? "You appear as" : "Signed in as"} <UserMention user={user} />
-            </p>
-            <div className="flex flex-wrap items-center gap-2 pt-2">
-                {isAnonUser(user) && <GitHubLoginButton />}
-                <SignOutButton />
+    return (
+        <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
+            <div>
+                <UserAvatar user={user} className="size-16" />
             </div>
-        </div> : <div className="flex animate-pulse items-center gap-2">
-            <LoadingSpinner className="size-6" />
-            <span>Loading...</span>
-        </div>}
-    </div>
+            {user ? (
+                <div>
+                    <p>
+                        {isAnonUser(user) ? "You appear as" : "Signed in as"}{" "}
+                        <UserMention user={user} />
+                    </p>
+                    <div className="flex flex-wrap items-center gap-2 pt-2">
+                        {isAnonUser(user) && <GitHubLoginButton />}
+                        <SignOutButton />
+                    </div>
+                </div>
+            ) : (
+                <div className="flex animate-pulse items-center gap-2">
+                    <LoadingSpinner className="size-6" />
+                    <span>Loading...</span>
+                </div>
+            )}
+        </div>
+    );
 }
diff --git a/frontend/src/app/(navfooter)/settings/account/page.tsx b/frontend/src/app/(navfooter)/settings/account/page.tsx
index ab2d15f92..6e093f0b4 100644
--- a/frontend/src/app/(navfooter)/settings/account/page.tsx
+++ b/frontend/src/app/(navfooter)/settings/account/page.tsx
@@ -1,17 +1,19 @@
-import Section from "../Section"
+import Section from "../Section";
 
-import ProfileSection from "./ProfileSection"
-import UserState from "./UserState"
+import ProfileSection from "./ProfileSection";
+import UserState from "./UserState";
 
 export const metadata = {
     title: "Account settings",
-}
+};
 
 export default function Page() {
-    return <>
-        <Section title="Account">
-            <UserState />
-        </Section>
-        <ProfileSection />
-    </>
+    return (
+        <>
+            <Section title="Account">
+                <UserState />
+            </Section>
+            <ProfileSection />
+        </>
+    );
 }
diff --git a/frontend/src/app/(navfooter)/settings/appearance/AppearanceSettings.tsx b/frontend/src/app/(navfooter)/settings/appearance/AppearanceSettings.tsx
index d71765105..24b6f1b81 100644
--- a/frontend/src/app/(navfooter)/settings/appearance/AppearanceSettings.tsx
+++ b/frontend/src/app/(navfooter)/settings/appearance/AppearanceSettings.tsx
@@ -1,61 +1,89 @@
-"use client"
+"use client";
 
-import dynamic from "next/dynamic"
+import dynamic from "next/dynamic";
 
-import ColorSchemePicker from "@/components/ColorSchemePicker"
-import LoadingSpinner from "@/components/loading.svg"
-import ThemePicker from "@/components/ThemePicker"
-import * as settings from "@/lib/settings"
+import ColorSchemePicker from "@/components/ColorSchemePicker";
+import LoadingSpinner from "@/components/loading.svg";
+import ThemePicker from "@/components/ThemePicker";
+import * as settings from "@/lib/settings";
 
-import Section from "../Section"
-import SliderField from "../SliderField"
-import TextField from "../TextField"
+import Section from "../Section";
+import SliderField from "../SliderField";
+import TextField from "../TextField";
 
 const DynamicExampleCodeMirror = dynamic(() => import("./ExampleCodeMirror"), {
-    loading: () => <div className="flex animate-pulse items-center justify-center" style={{ height: "200px" }}>
-        <LoadingSpinner className="size-16 opacity-50" />
-    </div>,
-})
+    loading: () => (
+        <div
+            className="flex animate-pulse items-center justify-center"
+            style={{ height: "200px" }}
+        >
+            <LoadingSpinner className="size-16 opacity-50" />
+        </div>
+    ),
+});
 
 export default function AppearanceSettings() {
-    const [theme, setTheme] = settings.useTheme()
-    const [fontSize, setFontSize] = settings.useCodeFontSize()
-    const [monospaceFont, setMonospaceFont] = settings.useMonospaceFont()
-    const [codeLineHeight, setCodeLineHeight] = settings.useCodeLineHeight()
-    const [codeColorScheme, setCodeColorScheme] = settings.useCodeColorScheme()
-
-    return <>
-        <Section title="Theme">
-            <ThemePicker theme={theme} onChange={setTheme} />
-        </Section>
-        <Section title="Code">
-            <div className="mb-6 flex-row gap-6 md:flex">
-                <div className="mb-6 md:mb-0 md:w-1/2">
-                    <SliderField label="Font size" min={8} max={24} step={1} unit="px" value={fontSize} onChange={setFontSize} />
+    const [theme, setTheme] = settings.useTheme();
+    const [fontSize, setFontSize] = settings.useCodeFontSize();
+    const [monospaceFont, setMonospaceFont] = settings.useMonospaceFont();
+    const [codeLineHeight, setCodeLineHeight] = settings.useCodeLineHeight();
+    const [codeColorScheme, setCodeColorScheme] = settings.useCodeColorScheme();
+
+    return (
+        <>
+            <Section title="Theme">
+                <ThemePicker theme={theme} onChange={setTheme} />
+            </Section>
+            <Section title="Code">
+                <div className="mb-6 flex-row gap-6 md:flex">
+                    <div className="mb-6 md:mb-0 md:w-1/2">
+                        <SliderField
+                            label="Font size"
+                            min={8}
+                            max={24}
+                            step={1}
+                            unit="px"
+                            value={fontSize}
+                            onChange={setFontSize}
+                        />
+                    </div>
+                    <div className="md:w-1/2">
+                        <SliderField
+                            label="Line height"
+                            min={0.5}
+                            max={2}
+                            step={0.05}
+                            unit="x"
+                            value={codeLineHeight}
+                            onChange={setCodeLineHeight}
+                        />
+                    </div>
                 </div>
-                <div className="md:w-1/2">
-                    <SliderField label="Line height" min={0.5} max={2} step={0.05} unit="x" value={codeLineHeight} onChange={setCodeLineHeight} />
+
+                <div className="mb-6 max-w-xl">
+                    <TextField
+                        label="Font family"
+                        description="The font family to use for code. The first valid comma-separated value will be used."
+                        value={monospaceFont ?? ""}
+                        onChange={setMonospaceFont}
+                        placeholder="ui-monospace"
+                        inputStyle={{
+                            fontFamily: `${monospaceFont ?? "ui-monospace"}, monospace`,
+                        }}
+                    />
                 </div>
-            </div>
-
-            <div className="mb-6 max-w-xl">
-                <TextField
-                    label="Font family"
-                    description="The font family to use for code. The first valid comma-separated value will be used."
-                    value={monospaceFont ?? ""}
-                    onChange={setMonospaceFont}
-                    placeholder="ui-monospace"
-                    inputStyle={{ fontFamily: `${monospaceFont ?? "ui-monospace"}, monospace` }}
-                />
-            </div>
-
-            <div className="mb-6">
-                <div className="font-semibold">Color scheme</div>
-                <div className="my-2 overflow-hidden rounded border border-gray-6">
-                    <DynamicExampleCodeMirror />
+
+                <div className="mb-6">
+                    <div className="font-semibold">Color scheme</div>
+                    <div className="my-2 overflow-hidden rounded border border-gray-6">
+                        <DynamicExampleCodeMirror />
+                    </div>
+                    <ColorSchemePicker
+                        scheme={codeColorScheme}
+                        onChange={setCodeColorScheme}
+                    />
                 </div>
-                <ColorSchemePicker scheme={codeColorScheme} onChange={setCodeColorScheme} />
-            </div>
-        </Section>
-    </>
+            </Section>
+        </>
+    );
 }
diff --git a/frontend/src/app/(navfooter)/settings/appearance/ExampleCodeMirror.tsx b/frontend/src/app/(navfooter)/settings/appearance/ExampleCodeMirror.tsx
index 327c4db3b..d0c7818d9 100644
--- a/frontend/src/app/(navfooter)/settings/appearance/ExampleCodeMirror.tsx
+++ b/frontend/src/app/(navfooter)/settings/appearance/ExampleCodeMirror.tsx
@@ -1,10 +1,10 @@
-"use client"
+"use client";
 
-import CodeMirror from "@/components/Editor/CodeMirror"
-import basicSetup from "@/lib/codemirror/basic-setup"
-import { cpp } from "@/lib/codemirror/cpp"
+import CodeMirror from "@/components/Editor/CodeMirror";
+import basicSetup from "@/lib/codemirror/basic-setup";
+import { cpp } from "@/lib/codemirror/cpp";
 
-import styles from "./ExampleCodeMirror.module.scss"
+import styles from "./ExampleCodeMirror.module.scss";
 
 const EXAMPLE_C_CODE = `#include "common.h"
 
@@ -110,14 +110,16 @@ void step_game_loop(void) {
 
     rand_int(1);
 }
-`
+`;
 
 export default function ExampleCodeMirror() {
-    return <div className={styles.container}>
-        <CodeMirror
-            value={EXAMPLE_C_CODE}
-            valueVersion={0}
-            extensions={[basicSetup, cpp()]}
-        />
-    </div>
+    return (
+        <div className={styles.container}>
+            <CodeMirror
+                value={EXAMPLE_C_CODE}
+                valueVersion={0}
+                extensions={[basicSetup, cpp()]}
+            />
+        </div>
+    );
 }
diff --git a/frontend/src/app/(navfooter)/settings/appearance/page.tsx b/frontend/src/app/(navfooter)/settings/appearance/page.tsx
index c01bf16d8..15602e7bd 100644
--- a/frontend/src/app/(navfooter)/settings/appearance/page.tsx
+++ b/frontend/src/app/(navfooter)/settings/appearance/page.tsx
@@ -1,11 +1,13 @@
-import AppearanceSettings from "./AppearanceSettings"
+import AppearanceSettings from "./AppearanceSettings";
 
 export const metadata = {
     title: "Appearance settings",
-}
+};
 
 export default function Page() {
-    return <>
-        <AppearanceSettings />
-    </>
+    return (
+        <>
+            <AppearanceSettings />
+        </>
+    );
 }
diff --git a/frontend/src/app/(navfooter)/settings/editor/EditorSettings.tsx b/frontend/src/app/(navfooter)/settings/editor/EditorSettings.tsx
index 4148b167b..266786f37 100644
--- a/frontend/src/app/(navfooter)/settings/editor/EditorSettings.tsx
+++ b/frontend/src/app/(navfooter)/settings/editor/EditorSettings.tsx
@@ -1,122 +1,156 @@
-"use client"
-import { useEffect, useRef, useState } from "react"
+"use client";
+import { useEffect, useRef, useState } from "react";
 
-import LoadingSpinner from "@/components/loading.svg"
+import LoadingSpinner from "@/components/loading.svg";
 import {
-    ThreeWayDiffBase, useAutoRecompileSetting, useAutoRecompileDelaySetting, useMatchProgressBarEnabled,
-    useLanguageServerEnabled, useVimModeEnabled, useThreeWayDiffBase, useObjdiffClientEnabled,
-} from "@/lib/settings"
+    ThreeWayDiffBase,
+    useAutoRecompileSetting,
+    useAutoRecompileDelaySetting,
+    useMatchProgressBarEnabled,
+    useLanguageServerEnabled,
+    useVimModeEnabled,
+    useThreeWayDiffBase,
+    useObjdiffClientEnabled,
+} from "@/lib/settings";
 
-import Checkbox from "../Checkbox"
-import RadioList from "../RadioList"
-import Section from "../Section"
-import SliderField from "../SliderField"
+import Checkbox from "../Checkbox";
+import RadioList from "../RadioList";
+import Section from "../Section";
+import SliderField from "../SliderField";
 
 export default function EditorSettings() {
-    const [autoRecompile, setAutoRecompile] = useAutoRecompileSetting()
-    const [autoRecompileDelay, setAutoRecompileDelay] = useAutoRecompileDelaySetting()
-    const [matchProgressBarEnabled, setMatchProgressBarEnabled] = useMatchProgressBarEnabled()
-    const [languageServerEnabled, setLanguageServerEnabled] = useLanguageServerEnabled()
-    const [vimModeEnabled, setVimModeEnabled] = useVimModeEnabled()
-    const [threeWayDiffBase, setThreeWayDiffBase] = useThreeWayDiffBase()
-    const [objdiffClientEnabled, setObjdiffClientEnabled] = useObjdiffClientEnabled()
+    const [autoRecompile, setAutoRecompile] = useAutoRecompileSetting();
+    const [autoRecompileDelay, setAutoRecompileDelay] =
+        useAutoRecompileDelaySetting();
+    const [matchProgressBarEnabled, setMatchProgressBarEnabled] =
+        useMatchProgressBarEnabled();
+    const [languageServerEnabled, setLanguageServerEnabled] =
+        useLanguageServerEnabled();
+    const [vimModeEnabled, setVimModeEnabled] = useVimModeEnabled();
+    const [threeWayDiffBase, setThreeWayDiffBase] = useThreeWayDiffBase();
+    const [objdiffClientEnabled, setObjdiffClientEnabled] =
+        useObjdiffClientEnabled();
 
-    const [downloadingLanguageServer, setDownloadingLanguageServer] = useState(false)
+    const [downloadingLanguageServer, setDownloadingLanguageServer] =
+        useState(false);
 
-    const isInitialMount = useRef(true)
+    const isInitialMount = useRef(true);
 
     useEffect(() => {
         // Prevent the language server binary from being downloaded if the user has it enabled, then enters settings
         if (isInitialMount.current) {
-            isInitialMount.current = false
-            return
+            isInitialMount.current = false;
+            return;
         }
 
         if (languageServerEnabled) {
-            setDownloadingLanguageServer(true)
+            setDownloadingLanguageServer(true);
 
-            import("@clangd-wasm/clangd-wasm").then(({ ClangdStdioTransport }) => {
-                // We don't need to do anything with the result of this fetch - all this
-                // is is a way to make sure the wasm file ends up in the browser's cache.
-                fetch(ClangdStdioTransport.getDefaultWasmURL(false))
-                    .then(res => res.blob())
-                    .then(() => setDownloadingLanguageServer(false))
-            })
+            import("@clangd-wasm/clangd-wasm").then(
+                ({ ClangdStdioTransport }) => {
+                    // We don't need to do anything with the result of this fetch - all this
+                    // is is a way to make sure the wasm file ends up in the browser's cache.
+                    fetch(ClangdStdioTransport.getDefaultWasmURL(false))
+                        .then((res) => res.blob())
+                        .then(() => setDownloadingLanguageServer(false));
+                },
+            );
         }
-    }, [languageServerEnabled])
+    }, [languageServerEnabled]);
 
     const threeWayDiffOptions = {
-        [ThreeWayDiffBase.SAVED]: { label: <div>Latest save ( <span className="font-mono text-gray-11">diff.py -b</span> )</div> },
-        [ThreeWayDiffBase.PREV]: { label: <div>Previous result ( <span className="font-mono text-gray-11">diff.py -3</span> )</div> },
-    }
-
-    return <>
-        <Section title="Automatic compilation">
-            <Checkbox
-                checked={autoRecompile}
-                onChange={setAutoRecompile}
-                label="Automatically compile after changes to scratch"
-                description="Automatically recompile your code a short period of time after you stop typing."
-            >
-                <div className="max-w-prose text-sm">
-                    <SliderField
-                        value={autoRecompileDelay}
-                        onChange={setAutoRecompileDelay}
-                        disabled={!autoRecompile}
-                        label="Delay before recompile is triggered"
-                        unit="ms"
-                        min={100}
-                        max={2000}
-                        step={50}
-                    />
+        [ThreeWayDiffBase.SAVED]: {
+            label: (
+                <div>
+                    Latest save ({" "}
+                    <span className="font-mono text-gray-11">diff.py -b</span> )
+                </div>
+            ),
+        },
+        [ThreeWayDiffBase.PREV]: {
+            label: (
+                <div>
+                    Previous result ({" "}
+                    <span className="font-mono text-gray-11">diff.py -3</span> )
                 </div>
-            </Checkbox>
-        </Section>
-        <Section title="Three-way diffing target">
-            <div className="text-gray-11">
-                When enabling three-way diffing for a scratch, let the third column show a diff against:
-            </div>
-            <RadioList
-                value={threeWayDiffBase}
-                onChange={(value: string) => {
-                    setThreeWayDiffBase(value as ThreeWayDiffBase)
-                }}
-                options={threeWayDiffOptions}
-            />
-        </Section>
-        <Section title="Match progress bar">
-            <Checkbox
-                checked={matchProgressBarEnabled}
-                onChange={setMatchProgressBarEnabled}
-                label="Show progress bar on scratch editor"
-                description="Show a progress bar at the top of the editor to visually display the match percent of a scratch."
-            />
-        </Section>
-        <Section title="Language server">
-            <Checkbox
-                checked={languageServerEnabled}
-                onChange={setLanguageServerEnabled}
-                label="Enable language server"
-                description="Enable editor features such as code completion, error checking, and formatting via clangd and WebAssembly magic. WARNING: enabling will incur a one time ~13MB download, and bump up resource usage during editing.">
+            ),
+        },
+    };
 
-                {downloadingLanguageServer && <div className="flex gap-2 p-4"><LoadingSpinner width="24px" /> Downloading...</div>}
-            </Checkbox>
-        </Section>
-        <Section title="Vim Mode">
-            <Checkbox
-                checked={vimModeEnabled}
-                onChange={setVimModeEnabled}
-                label="Enable vim bindings"
-                description="Enable vim bindings in the scratch editor">
-            </Checkbox>
-        </Section>
-        <Section title="Experiments">
-            <Checkbox
-                checked={objdiffClientEnabled}
-                onChange={setObjdiffClientEnabled}
-                label="Enable objdiff in WebAssembly"
-                description="WARNING: For development use only. Runs objdiff locally for diffing. Platform support is limited, and certain features will be broken. Download size: ~3.5MB">
-            </Checkbox>
-        </Section>
-    </>
+    return (
+        <>
+            <Section title="Automatic compilation">
+                <Checkbox
+                    checked={autoRecompile}
+                    onChange={setAutoRecompile}
+                    label="Automatically compile after changes to scratch"
+                    description="Automatically recompile your code a short period of time after you stop typing."
+                >
+                    <div className="max-w-prose text-sm">
+                        <SliderField
+                            value={autoRecompileDelay}
+                            onChange={setAutoRecompileDelay}
+                            disabled={!autoRecompile}
+                            label="Delay before recompile is triggered"
+                            unit="ms"
+                            min={100}
+                            max={2000}
+                            step={50}
+                        />
+                    </div>
+                </Checkbox>
+            </Section>
+            <Section title="Three-way diffing target">
+                <div className="text-gray-11">
+                    When enabling three-way diffing for a scratch, let the third
+                    column show a diff against:
+                </div>
+                <RadioList
+                    value={threeWayDiffBase}
+                    onChange={(value: string) => {
+                        setThreeWayDiffBase(value as ThreeWayDiffBase);
+                    }}
+                    options={threeWayDiffOptions}
+                />
+            </Section>
+            <Section title="Match progress bar">
+                <Checkbox
+                    checked={matchProgressBarEnabled}
+                    onChange={setMatchProgressBarEnabled}
+                    label="Show progress bar on scratch editor"
+                    description="Show a progress bar at the top of the editor to visually display the match percent of a scratch."
+                />
+            </Section>
+            <Section title="Language server">
+                <Checkbox
+                    checked={languageServerEnabled}
+                    onChange={setLanguageServerEnabled}
+                    label="Enable language server"
+                    description="Enable editor features such as code completion, error checking, and formatting via clangd and WebAssembly magic. WARNING: enabling will incur a one time ~13MB download, and bump up resource usage during editing."
+                >
+                    {downloadingLanguageServer && (
+                        <div className="flex gap-2 p-4">
+                            <LoadingSpinner width="24px" /> Downloading...
+                        </div>
+                    )}
+                </Checkbox>
+            </Section>
+            <Section title="Vim Mode">
+                <Checkbox
+                    checked={vimModeEnabled}
+                    onChange={setVimModeEnabled}
+                    label="Enable vim bindings"
+                    description="Enable vim bindings in the scratch editor"
+                />
+            </Section>
+            <Section title="Experiments">
+                <Checkbox
+                    checked={objdiffClientEnabled}
+                    onChange={setObjdiffClientEnabled}
+                    label="Enable objdiff in WebAssembly"
+                    description="WARNING: For development use only. Runs objdiff locally for diffing. Platform support is limited, and certain features will be broken. Download size: ~3.5MB"
+                />
+            </Section>
+        </>
+    );
 }
diff --git a/frontend/src/app/(navfooter)/settings/editor/page.tsx b/frontend/src/app/(navfooter)/settings/editor/page.tsx
index 2356906f3..0dfd709ce 100644
--- a/frontend/src/app/(navfooter)/settings/editor/page.tsx
+++ b/frontend/src/app/(navfooter)/settings/editor/page.tsx
@@ -1,11 +1,13 @@
-import EditorSettings from "./EditorSettings"
+import EditorSettings from "./EditorSettings";
 
 export const metadata = {
     title: "Editor settings",
-}
+};
 
 export default function Page() {
-    return <>
-        <EditorSettings />
-    </>
+    return (
+        <>
+            <EditorSettings />
+        </>
+    );
 }
diff --git a/frontend/src/app/(navfooter)/settings/layout.tsx b/frontend/src/app/(navfooter)/settings/layout.tsx
index 188297b4f..2c9c33226 100644
--- a/frontend/src/app/(navfooter)/settings/layout.tsx
+++ b/frontend/src/app/(navfooter)/settings/layout.tsx
@@ -1,24 +1,38 @@
-import { FileIcon, PaintbrushIcon, GearIcon } from "@primer/octicons-react"
+import { FileIcon, PaintbrushIcon, GearIcon } from "@primer/octicons-react";
 
-import NavItem from "./NavItem"
+import NavItem from "./NavItem";
 
 export default function Layout({
     children,
 }: {
-  children: React.ReactNode
+    children: React.ReactNode;
 }) {
-    return <div className="mx-auto flex w-full max-w-screen-lg flex-col lg:flex-row">
-        <aside className="mx-auto w-full max-w-screen-md border-gray-6 border-b p-1 lg:w-1/4 lg:border-b-0 lg:p-6">
-            <nav aria-label="Settings">
-                <ul className="flex flex-wrap gap-1 lg:flex-col">
-                    <NavItem segment="account" label="Account" icon={<GearIcon />} />
-                    <NavItem segment="appearance" label="Appearance" icon={<PaintbrushIcon />} />
-                    <NavItem segment="editor" label="Editor" icon={<FileIcon />} />
-                </ul>
-            </nav>
-        </aside>
-        <main className="mx-auto w-full max-w-screen-md p-6 lg:w-3/4">
-            {children}
-        </main>
-    </div>
+    return (
+        <div className="mx-auto flex w-full max-w-screen-lg flex-col lg:flex-row">
+            <aside className="mx-auto w-full max-w-screen-md border-gray-6 border-b p-1 lg:w-1/4 lg:border-b-0 lg:p-6">
+                <nav aria-label="Settings">
+                    <ul className="flex flex-wrap gap-1 lg:flex-col">
+                        <NavItem
+                            segment="account"
+                            label="Account"
+                            icon={<GearIcon />}
+                        />
+                        <NavItem
+                            segment="appearance"
+                            label="Appearance"
+                            icon={<PaintbrushIcon />}
+                        />
+                        <NavItem
+                            segment="editor"
+                            label="Editor"
+                            icon={<FileIcon />}
+                        />
+                    </ul>
+                </nav>
+            </aside>
+            <main className="mx-auto w-full max-w-screen-md p-6 lg:w-3/4">
+                {children}
+            </main>
+        </div>
+    );
 }
diff --git a/frontend/src/app/(navfooter)/u/[username]/page.tsx b/frontend/src/app/(navfooter)/u/[username]/page.tsx
index 94fe55375..eea483aa7 100644
--- a/frontend/src/app/(navfooter)/u/[username]/page.tsx
+++ b/frontend/src/app/(navfooter)/u/[username]/page.tsx
@@ -1,22 +1,24 @@
-import type { Metadata } from "next"
+import type { Metadata } from "next";
 
-import { notFound } from "next/navigation"
+import { notFound } from "next/navigation";
 
-import Profile from "@/components/user/Profile"
-import { get } from "@/lib/api/request"
-import type { User } from "@/lib/api/types"
+import Profile from "@/components/user/Profile";
+import { get } from "@/lib/api/request";
+import type { User } from "@/lib/api/types";
 
-export async function generateMetadata({ params }: { params: { username: string } }): Promise<Metadata> {
-    let user: User
+export async function generateMetadata({
+    params,
+}: { params: { username: string } }): Promise<Metadata> {
+    let user: User;
 
     try {
-        user = await get(`/users/${params.username}`)
+        user = await get(`/users/${params.username}`);
     } catch (error) {
-        console.error(error)
+        console.error(error);
     }
 
     if (!user) {
-        return notFound()
+        return notFound();
     }
 
     return {
@@ -24,20 +26,22 @@ export async function generateMetadata({ params }: { params: { username: string
         openGraph: {
             title: user.username,
         },
-    }
+    };
 }
 
-export default async function Page({ params }: { params: { username: string } }) {
-    let user: User
+export default async function Page({
+    params,
+}: { params: { username: string } }) {
+    let user: User;
     try {
-        user = await get(`/users/${params.username}`)
+        user = await get(`/users/${params.username}`);
     } catch (error) {
-        console.error(error)
+        console.error(error);
     }
 
     if (!user) {
-        return notFound()
+        return notFound();
     }
 
-    return <Profile user={user} />
+    return <Profile user={user} />;
 }
diff --git a/frontend/src/app/ThemeProvider.tsx b/frontend/src/app/ThemeProvider.tsx
index 3271ad2db..0e37d8f06 100644
--- a/frontend/src/app/ThemeProvider.tsx
+++ b/frontend/src/app/ThemeProvider.tsx
@@ -1,48 +1,54 @@
-"use client"
+"use client";
 
-import { useEffect } from "react"
+import { useEffect } from "react";
 
-import { applyColorScheme } from "@/lib/codemirror/color-scheme"
-import * as settings from "@/lib/settings"
+import { applyColorScheme } from "@/lib/codemirror/color-scheme";
+import * as settings from "@/lib/settings";
 
 export default function ThemeProvider() {
-    const [codeColorScheme, setCodeColorScheme] = settings.useCodeColorScheme()
+    const [codeColorScheme, setCodeColorScheme] = settings.useCodeColorScheme();
     useEffect(() => {
-        applyColorScheme(codeColorScheme)
-    }, [codeColorScheme])
+        applyColorScheme(codeColorScheme);
+    }, [codeColorScheme]);
 
-    const isSiteThemeDark = settings.useIsSiteThemeDark()
+    const isSiteThemeDark = settings.useIsSiteThemeDark();
     useEffect(() => {
         // Apply theme
         if (isSiteThemeDark) {
-            document.documentElement.classList.add("dark")
+            document.documentElement.classList.add("dark");
         } else {
-            document.documentElement.classList.remove("dark")
+            document.documentElement.classList.remove("dark");
         }
 
         // If using the default code color scheme (Frog), pick the variant that matches the site theme
-        setCodeColorScheme(current => {
+        setCodeColorScheme((current) => {
             if (current === "Frog Dark" || current === "Frog Light") {
-                return isSiteThemeDark ? "Frog Dark" : "Frog Light"
+                return isSiteThemeDark ? "Frog Dark" : "Frog Light";
             } else {
-                return current
+                return current;
             }
-        })
-    }, [isSiteThemeDark, setCodeColorScheme])
+        });
+    }, [isSiteThemeDark, setCodeColorScheme]);
 
-    const [monospaceFont] = settings.useMonospaceFont()
+    const [monospaceFont] = settings.useMonospaceFont();
     useEffect(() => {
-        document.body.style.removeProperty("--monospace")
+        document.body.style.removeProperty("--monospace");
         if (monospaceFont) {
-            document.body.style.setProperty("--monospace", `${monospaceFont}, monospace`)
+            document.body.style.setProperty(
+                "--monospace",
+                `${monospaceFont}, monospace`,
+            );
         }
-    }, [monospaceFont])
+    }, [monospaceFont]);
 
-    const [codeLineHeight] = settings.useCodeLineHeight()
+    const [codeLineHeight] = settings.useCodeLineHeight();
     useEffect(() => {
-        document.body.style.removeProperty("--code-line-height")
-        document.body.style.setProperty("--code-line-height", `${codeLineHeight}`)
-    }, [codeLineHeight])
-
-    return <></>
+        document.body.style.removeProperty("--code-line-height");
+        document.body.style.setProperty(
+            "--code-line-height",
+            `${codeLineHeight}`,
+        );
+    }, [codeLineHeight]);
+
+    return <></>;
 }
diff --git a/frontend/src/app/error.tsx b/frontend/src/app/error.tsx
index 84414fc3b..27ff571f3 100644
--- a/frontend/src/app/error.tsx
+++ b/frontend/src/app/error.tsx
@@ -1,74 +1,104 @@
-"use client"
+"use client";
 
-import { useEffect } from "react"
+import { useEffect } from "react";
 
-import { SyncIcon } from "@primer/octicons-react"
+import { SyncIcon } from "@primer/octicons-react";
 
-import Button from "@/components/Button"
-import ErrorBoundary from "@/components/ErrorBoundary"
-import SetPageTitle from "@/components/SetPageTitle"
-import { RequestFailedError } from "@/lib/api"
+import Button from "@/components/Button";
+import ErrorBoundary from "@/components/ErrorBoundary";
+import SetPageTitle from "@/components/SetPageTitle";
+import { RequestFailedError } from "@/lib/api";
 
-type ErrorPageProps = {error: Error, reset: () => void };
+type ErrorPageProps = { error: Error; reset: () => void };
 
 function NetworkErrorPage({ error }: ErrorPageProps) {
-    return <>
-        <SetPageTitle title="Error" />
-        <div className="grow" />
-        <main className="max-w-prose p-4 md:mx-auto">
-            <h1 className="py-4 font-semibold text-3xl">We're having some trouble reaching the backend</h1>
+    return (
+        <>
+            <SetPageTitle title="Error" />
+            <div className="grow" />
+            <main className="max-w-prose p-4 md:mx-auto">
+                <h1 className="py-4 font-semibold text-3xl">
+                    We're having some trouble reaching the backend
+                </h1>
 
-            <div className="rounded bg-gray-2 p-4 text-gray-11">
-                <code className="font-mono text-sm">{error.toString()}</code>
-            </div>
+                <div className="rounded bg-gray-2 p-4 text-gray-11">
+                    <code className="font-mono text-sm">
+                        {error.toString()}
+                    </code>
+                </div>
 
-            <p className="py-4">
-                If your internet connection is okay, we're probably down for maintenance, and will be back shortly. If this issue persists - <a href="https://discord.gg/sutqNShRRs" className="text-blue-11 hover:underline active:translate-y-px">let us know</a>.
-            </p>
+                <p className="py-4">
+                    If your internet connection is okay, we're probably down for
+                    maintenance, and will be back shortly. If this issue
+                    persists -{" "}
+                    <a
+                        href="https://discord.gg/sutqNShRRs"
+                        className="text-blue-11 hover:underline active:translate-y-px"
+                    >
+                        let us know
+                    </a>
+                    .
+                </p>
 
-            <ErrorBoundary>
-                <Button onClick={() => window.location.reload()}>
-                    <SyncIcon /> Try again
-                </Button>
-            </ErrorBoundary>
-        </main>
-        <div className="grow" />
-    </>
+                <ErrorBoundary>
+                    <Button onClick={() => window.location.reload()}>
+                        <SyncIcon /> Try again
+                    </Button>
+                </ErrorBoundary>
+            </main>
+            <div className="grow" />
+        </>
+    );
 }
 
 function UnexpectedErrorPage({ error, reset }: ErrorPageProps) {
-    return <>
-        <SetPageTitle title="Error" />
-        <div className="grow" />
-        <main className="max-w-prose p-4 md:mx-auto">
-            <h1 className="font-semibold text-3xl">Something went wrong</h1>
-            <p className="py-4">
-                An unexpected error occurred rendering this page.
-            </p>
-            <div className="rounded bg-gray-2 p-4 text-gray-11">
-                <code className="font-mono text-sm">{error.toString()}</code>
-            </div>
-            <p className="py-4">
-                If this keeps happening, <a href="https://discord.gg/sutqNShRRs" className="text-blue-11 hover:underline active:translate-y-px">let us know</a>.
-            </p>
-            <ErrorBoundary>
-                <Button onClick={reset}>
-                    <SyncIcon /> Try again
-                </Button>
-            </ErrorBoundary>
-        </main>
-        <div className="grow" />
-    </>
+    return (
+        <>
+            <SetPageTitle title="Error" />
+            <div className="grow" />
+            <main className="max-w-prose p-4 md:mx-auto">
+                <h1 className="font-semibold text-3xl">Something went wrong</h1>
+                <p className="py-4">
+                    An unexpected error occurred rendering this page.
+                </p>
+                <div className="rounded bg-gray-2 p-4 text-gray-11">
+                    <code className="font-mono text-sm">
+                        {error.toString()}
+                    </code>
+                </div>
+                <p className="py-4">
+                    If this keeps happening,{" "}
+                    <a
+                        href="https://discord.gg/sutqNShRRs"
+                        className="text-blue-11 hover:underline active:translate-y-px"
+                    >
+                        let us know
+                    </a>
+                    .
+                </p>
+                <ErrorBoundary>
+                    <Button onClick={reset}>
+                        <SyncIcon /> Try again
+                    </Button>
+                </ErrorBoundary>
+            </main>
+            <div className="grow" />
+        </>
+    );
 }
 
 export default function ErrorPage({ error, reset }: ErrorPageProps) {
     useEffect(() => {
-        console.error(error)
-    }, [error])
+        console.error(error);
+    }, [error]);
 
-    return error instanceof RequestFailedError ? <NetworkErrorPage error={error} reset={reset} /> : <UnexpectedErrorPage error={error} reset={reset} />
+    return error instanceof RequestFailedError ? (
+        <NetworkErrorPage error={error} reset={reset} />
+    ) : (
+        <UnexpectedErrorPage error={error} reset={reset} />
+    );
 }
 
 export const metadata = {
     title: "Error",
-}
+};
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index f849fd123..d71fdb1a8 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -1,9 +1,9 @@
-import PlausibleProvider from "next-plausible"
+import PlausibleProvider from "next-plausible";
 
-import ThemeProvider from "./ThemeProvider"
+import ThemeProvider from "./ThemeProvider";
 
-import "allotment/dist/style.css"
-import "./globals.scss"
+import "allotment/dist/style.css";
+import "./globals.scss";
 
 export const metadata = {
     title: {
@@ -22,37 +22,43 @@ export const metadata = {
         ],
     },
     // set this to avoid "metadata.metadataBase is not set..." warning
-    metadataBase: new URL(process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : `http://localhost:${process.env.PORT || 3000}`),
-}
+    metadataBase: new URL(
+        process.env.VERCEL_URL
+            ? `https://${process.env.VERCEL_URL}`
+            : `http://localhost:${process.env.PORT || 3000}`,
+    ),
+};
 
 export default function RootLayout({
     children,
 }: {
-  children: React.ReactNode
+    children: React.ReactNode;
 }) {
-    return <html lang="en" className="dark">
-        <head>
-            <meta charSet="utf-8" />
-
-            <meta name="theme-color" content="#282e31" />
-            <meta name="viewport" content="width=device-width" />
-            <meta name="darkreader-lock" />
-
-            <link rel="manifest" href="/manifest.json" />
-
-            <link rel="shortcut icon" href="/purplefrog.svg" />
-            <link rel="apple-touch-icon" href="/purplefrog-bg-180.png" />
-
-            <PlausibleProvider
-                domain="decomp.me"
-                customDomain="https://stats.decomp.me"
-                selfHosted={true}
-                trackOutboundLinks={true}
-            />
-            <ThemeProvider />
-        </head>
-        <body className="flex flex-col bg-gray-1 font-sans text-gray-12 subpixel-antialiased">
-            {children}
-        </body>
-    </html>
+    return (
+        <html lang="en" className="dark">
+            <head>
+                <meta charSet="utf-8" />
+
+                <meta name="theme-color" content="#282e31" />
+                <meta name="viewport" content="width=device-width" />
+                <meta name="darkreader-lock" />
+
+                <link rel="manifest" href="/manifest.json" />
+
+                <link rel="shortcut icon" href="/purplefrog.svg" />
+                <link rel="apple-touch-icon" href="/purplefrog-bg-180.png" />
+
+                <PlausibleProvider
+                    domain="decomp.me"
+                    customDomain="https://stats.decomp.me"
+                    selfHosted={true}
+                    trackOutboundLinks={true}
+                />
+                <ThemeProvider />
+            </head>
+            <body className="flex flex-col bg-gray-1 font-sans text-gray-12 subpixel-antialiased">
+                {children}
+            </body>
+        </html>
+    );
 }
diff --git a/frontend/src/app/not-found.tsx b/frontend/src/app/not-found.tsx
index 3ae63a835..af8c49e75 100644
--- a/frontend/src/app/not-found.tsx
+++ b/frontend/src/app/not-found.tsx
@@ -1,28 +1,31 @@
-import { ChevronRightIcon } from "@primer/octicons-react"
+import { ChevronRightIcon } from "@primer/octicons-react";
 
-import GhostButton from "@/components/GhostButton"
-import Frog from "@/components/Nav/frog.svg"
+import GhostButton from "@/components/GhostButton";
+import Frog from "@/components/Nav/frog.svg";
 
 export default function NotFound() {
-    return <main className="mx-auto my-16 flex max-w-prose items-center justify-center gap-4 px-4 py-6 text-base leading-normal">
-        <div>
-            <div className="flex items-center justify-center gap-8">
-                <Frog className="size-16 saturate-0" />
-                <h1 className="font-medium text-xl lg:text-3xl">
-                    <span className="pr-8 font-normal">404</span>
-                    <span className="text-gray-12">frog not found</span>
-                </h1>
-            </div>
+    return (
+        <main className="mx-auto my-16 flex max-w-prose items-center justify-center gap-4 px-4 py-6 text-base leading-normal">
+            <div>
+                <div className="flex items-center justify-center gap-8">
+                    <Frog className="size-16 saturate-0" />
+                    <h1 className="font-medium text-xl lg:text-3xl">
+                        <span className="pr-8 font-normal">404</span>
+                        <span className="text-gray-12">frog not found</span>
+                    </h1>
+                </div>
 
-            <p className="py-4 text-gray-11">
-                The page you are looking for is not here. Consider checking the URL.
-            </p>
+                <p className="py-4 text-gray-11">
+                    The page you are looking for is not here. Consider checking
+                    the URL.
+                </p>
 
-            <div className="flex items-center justify-center gap-2">
-                <GhostButton href="/">
-                    Back to dashboard <ChevronRightIcon />
-                </GhostButton>
+                <div className="flex items-center justify-center gap-2">
+                    <GhostButton href="/">
+                        Back to dashboard <ChevronRightIcon />
+                    </GhostButton>
+                </div>
             </div>
-        </div>
-    </main>
+        </main>
+    );
 }
diff --git a/frontend/src/app/opengraph-image.tsx b/frontend/src/app/opengraph-image.tsx
index f30bacdc1..58c2c8cd6 100644
--- a/frontend/src/app/opengraph-image.tsx
+++ b/frontend/src/app/opengraph-image.tsx
@@ -1,61 +1,86 @@
-import { ImageResponse } from "next/og"
+import { ImageResponse } from "next/og";
 
-import { platformIcon, PLATFORMS } from "@/components/PlatformSelect/PlatformIcon"
+import {
+    platformIcon,
+    PLATFORMS,
+} from "@/components/PlatformSelect/PlatformIcon";
 
-const IMAGE_WIDTH_PX = 1200
+const IMAGE_WIDTH_PX = 1200;
 
-const IMAGE_HEIGHT_PX = 400
+const IMAGE_HEIGHT_PX = 400;
 
-export const runtime = "edge"
+export const runtime = "edge";
 
 export default async function HomeOG() {
-    const OpenSansExtraBold = fetch(new URL("/public/fonts/OpenSans-ExtraBold.ttf", import.meta.url)).then(res =>
-        res.arrayBuffer()
-    )
+    const OpenSansExtraBold = fetch(
+        new URL("/public/fonts/OpenSans-ExtraBold.ttf", import.meta.url),
+    ).then((res) => res.arrayBuffer());
 
-    const OpenSansSemiBold = fetch(new URL("/public/fonts/OpenSans-SemiBold.ttf", import.meta.url)).then(res =>
-        res.arrayBuffer()
-    )
+    const OpenSansSemiBold = fetch(
+        new URL("/public/fonts/OpenSans-SemiBold.ttf", import.meta.url),
+    ).then((res) => res.arrayBuffer());
 
-    const OpenSansBold = fetch(new URL("/public/fonts/OpenSans-Bold.ttf", import.meta.url)).then(res =>
-        res.arrayBuffer()
-    )
+    const OpenSansBold = fetch(
+        new URL("/public/fonts/OpenSans-Bold.ttf", import.meta.url),
+    ).then((res) => res.arrayBuffer());
 
-    const statsRes = await fetch("http://decomp.me/api/stats")
-    const stats = await statsRes.json()
-    const iconSize = 160
-    const iconCount = 5
-    const textScale = 4.15
+    const statsRes = await fetch("http://decomp.me/api/stats");
+    const stats = await statsRes.json();
+    const iconSize = 160;
+    const iconCount = 5;
+    const textScale = 4.15;
     const textSize = {
         title: textScale,
         description: 0.6 * textScale,
         stats: 0.45 * textScale,
-    }
+    };
     return new ImageResponse(
-        (
+        <div tw="flex flex-col w-full h-full bg-zinc-900 text-slate-50 items-center justify-center">
+            <div tw="absolute flex flex-row items-center h-full opacity-25">
+                {PLATFORMS.map((platform) => ({
+                    platform,
+                    sort: Math.random(),
+                }))
+                    .sort((a, b) => a.sort - b.sort)
+                    .slice(0, iconCount)
+                    .map(({ platform }) => {
+                        const Icon = platformIcon(platform);
+                        return (
+                            <Icon
+                                key={platform}
+                                width={iconSize}
+                                height={iconSize}
+                                tw="m-10"
+                            />
+                        );
+                    })}
+            </div>
+            <div tw="w-full h-1/10" />
+            <div
+                tw={`flex w-full justify-center text-[${textSize.title}rem]`}
+                style={{ fontFamily: "OpenSans-ExtraBold" }}
+            >
+                decomp.me
+            </div>
+            <span
+                tw={`flex flex-wrap justify-center text-[${textSize.description}rem] text-center w-3/4`}
+                style={{ fontFamily: "OpenSans-Bold" }}
+            >
+                Collaboratively decompile code in your browser
+            </span>
+            <div tw="w-full h-1/8" />
             <div
-                tw="flex flex-col w-full h-full bg-zinc-900 text-slate-50 items-center justify-center">
-                <div tw="absolute flex flex-row items-center h-full opacity-25">
-                    {PLATFORMS.map(platform => ({ platform, sort: Math.random() }))
-                        .sort((a, b) => a.sort - b.sort)
-                        .slice(0, iconCount)
-                        .map(({ platform }) => {
-                            const Icon = platformIcon(platform)
-                            return (<Icon key={platform} width={iconSize} height={iconSize} tw="m-10" />)
-                        })}
-                </div>
-                <div tw="w-full h-1/10" />
-                <div tw={`flex w-full justify-center text-[${textSize.title}rem]`} style={{ fontFamily: "OpenSans-ExtraBold" }}>decomp.me</div>
-                <span tw={`flex flex-wrap justify-center text-[${textSize.description}rem] text-center w-3/4`} style={{ fontFamily: "OpenSans-Bold" }}>Collaboratively decompile code in your browser</span>
-                <div tw="w-full h-1/8" />
-                <div tw={`flex justify-between w-full text-[${textSize.stats}rem]`} style={{ fontFamily: "OpenSans-SemiBold" }}>
-                    <a tw="ml-10">{stats.scratch_count.toLocaleString()} scratches</a>
-                    <a>{stats.profile_count.toLocaleString()} visitors</a>
-                    <a>{stats.github_user_count.toLocaleString()} users</a>
-                    <a tw="mr-10">{stats.asm_count.toLocaleString()} asm globs</a>
-                </div>
+                tw={`flex justify-between w-full text-[${textSize.stats}rem]`}
+                style={{ fontFamily: "OpenSans-SemiBold" }}
+            >
+                <a tw="ml-10">
+                    {stats.scratch_count.toLocaleString()} scratches
+                </a>
+                <a>{stats.profile_count.toLocaleString()} visitors</a>
+                <a>{stats.github_user_count.toLocaleString()} users</a>
+                <a tw="mr-10">{stats.asm_count.toLocaleString()} asm globs</a>
             </div>
-        ),
+        </div>,
         {
             width: IMAGE_WIDTH_PX,
             height: IMAGE_HEIGHT_PX,
@@ -63,7 +88,6 @@ export default async function HomeOG() {
                 {
                     name: "OpenSans-ExtraBold",
                     data: await OpenSansExtraBold,
-
                 },
                 {
                     name: "OpenSans-SemiBold",
@@ -75,5 +99,5 @@ export default async function HomeOG() {
                 },
             ],
         },
-    )
+    );
 }
diff --git a/frontend/src/app/scratch/[slug]/ScratchEditor.tsx b/frontend/src/app/scratch/[slug]/ScratchEditor.tsx
index ac30249f1..4a2d81bba 100644
--- a/frontend/src/app/scratch/[slug]/ScratchEditor.tsx
+++ b/frontend/src/app/scratch/[slug]/ScratchEditor.tsx
@@ -1,32 +1,37 @@
-"use client"
+"use client";
 
-import { useEffect, useState } from "react"
+import { useEffect, useState } from "react";
 
-import useSWR, { type Middleware, SWRConfig } from "swr"
+import useSWR, { type Middleware, SWRConfig } from "swr";
 
-import Scratch from "@/components/Scratch"
-import useWarnBeforeScratchUnload from "@/components/Scratch/hooks/useWarnBeforeScratchUnload"
-import SetPageTitle from "@/components/SetPageTitle"
-import * as api from "@/lib/api"
-import { scratchUrl } from "@/lib/api/urls"
+import Scratch from "@/components/Scratch";
+import useWarnBeforeScratchUnload from "@/components/Scratch/hooks/useWarnBeforeScratchUnload";
+import SetPageTitle from "@/components/SetPageTitle";
+import * as api from "@/lib/api";
+import { scratchUrl } from "@/lib/api/urls";
 
 function ScratchPageTitle({ scratch }: { scratch: api.Scratch }) {
-    const isSaved = api.useIsScratchSaved(scratch)
+    const isSaved = api.useIsScratchSaved(scratch);
 
-    let title = isSaved ? "" : "(unsaved) "
-    title += scratch.name || scratch.slug
+    let title = isSaved ? "" : "(unsaved) ";
+    title += scratch.name || scratch.slug;
 
-    return <SetPageTitle title={title} />
+    return <SetPageTitle title={title} />;
 }
 
-function ScratchEditorInner({ initialScratch, parentScratch, initialCompilation, offline }: Props) {
-    const [scratch, setScratch] = useState(initialScratch)
+function ScratchEditorInner({
+    initialScratch,
+    parentScratch,
+    initialCompilation,
+    offline,
+}: Props) {
+    const [scratch, setScratch] = useState(initialScratch);
 
-    useWarnBeforeScratchUnload(scratch)
+    useWarnBeforeScratchUnload(scratch);
 
     // If the static props scratch changes (i.e. router push / page redirect), reset `scratch`.
     if (scratchUrl(scratch) !== scratchUrl(initialScratch))
-        setScratch(initialScratch)
+        setScratch(initialScratch);
 
     // If the server scratch owner changes (i.e. scratch was claimed), update local scratch owner.
     // You can trigger this by:
@@ -34,11 +39,18 @@ function ScratchEditorInner({ initialScratch, parentScratch, initialCompilation,
     // 2. Creating a new scratch
     // 3. Logging in
     // 4. Notice the scratch owner (in the About panel) has changed to your newly-logged-in user
-    const ownerMayChange = !scratch.owner || scratch.owner.is_anonymous
-    const cached = useSWR<api.Scratch>(ownerMayChange && scratchUrl(scratch), api.get)?.data
-    if (ownerMayChange && cached?.owner && !api.isUserEq(scratch.owner, cached?.owner)) {
-        console.info("Scratch owner updated", cached.owner)
-        setScratch(scratch => ({ ...scratch, owner: cached.owner }))
+    const ownerMayChange = !scratch.owner || scratch.owner.is_anonymous;
+    const cached = useSWR<api.Scratch>(
+        ownerMayChange && scratchUrl(scratch),
+        api.get,
+    )?.data;
+    if (
+        ownerMayChange &&
+        cached?.owner &&
+        !api.isUserEq(scratch.owner, cached?.owner)
+    ) {
+        console.info("Scratch owner updated", cached.owner);
+        setScratch((scratch) => ({ ...scratch, owner: cached.owner }));
     }
 
     // On initial page load, request the latest scratch from the server, and
@@ -48,64 +60,68 @@ function ScratchEditorInner({ initialScratch, parentScratch, initialCompilation,
     // https://github.com/decompme/decomp.me/issues/711
     useEffect(() => {
         api.get(scratchUrl(scratch)).then((updatedScratch: api.Scratch) => {
-            const updateTime = new Date(updatedScratch.last_updated)
-            const scratchTime = new Date(scratch.last_updated)
+            const updateTime = new Date(updatedScratch.last_updated);
+            const scratchTime = new Date(scratch.last_updated);
 
             if (scratchTime < updateTime) {
-                console.info("Client got updated scratch", updatedScratch)
-                setScratch(updatedScratch)
+                console.info("Client got updated scratch", updatedScratch);
+                setScratch(updatedScratch);
             }
-        })
-    }, []) // eslint-disable-line react-hooks/exhaustive-deps
-
-    return <>
-        <ScratchPageTitle scratch={scratch} />
-        <main className="grow">
-            <Scratch
-                scratch={scratch}
-                parentScratch={parentScratch}
-                initialCompilation={initialCompilation}
-                onChange={partial => {
-                    setScratch(scratch => {
-                        return { ...scratch, ...partial }
-                    })
-                }}
-                offline={offline}
-            />
-        </main>
-    </>
+        });
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    return (
+        <>
+            <ScratchPageTitle scratch={scratch} />
+            <main className="grow">
+                <Scratch
+                    scratch={scratch}
+                    parentScratch={parentScratch}
+                    initialCompilation={initialCompilation}
+                    onChange={(partial) => {
+                        setScratch((scratch) => {
+                            return { ...scratch, ...partial };
+                        });
+                    }}
+                    offline={offline}
+                />
+            </main>
+        </>
+    );
 }
 
 export interface Props {
-    initialScratch: api.Scratch
-    parentScratch?: api.Scratch
-    initialCompilation?: api.Compilation
-    offline?: boolean
+    initialScratch: api.Scratch;
+    parentScratch?: api.Scratch;
+    initialCompilation?: api.Compilation;
+    offline?: boolean;
 }
 
 export default function ScratchEditor(props: Props) {
-    const [offline, setOffline] = useState(false)
+    const [offline, setOffline] = useState(false);
 
-    const offlineMiddleware: Middleware = _useSWRNext => {
+    const offlineMiddleware: Middleware = (_useSWRNext) => {
         return (key, fetcher, config) => {
-            let swr = _useSWRNext(key, fetcher, config)
+            let swr = _useSWRNext(key, fetcher, config);
 
             if (swr.error instanceof api.RequestFailedError) {
-                setOffline(true)
-                swr = Object.assign({}, swr, { error: null })
+                setOffline(true);
+                swr = Object.assign({}, swr, { error: null });
             }
 
-            return swr
-        }
-    }
+            return swr;
+        };
+    };
 
     const onSuccess = () => {
-        setOffline(false)
-    }
-
-    return <>
-        <SWRConfig value={{ use: [offlineMiddleware], onSuccess }}>
-            <ScratchEditorInner {...props} offline={offline} />
-        </SWRConfig>
-    </>
+        setOffline(false);
+    };
+
+    return (
+        <>
+            <SWRConfig value={{ use: [offlineMiddleware], onSuccess }}>
+                <ScratchEditorInner {...props} offline={offline} />
+            </SWRConfig>
+        </>
+    );
 }
diff --git a/frontend/src/app/scratch/[slug]/claim/page.tsx b/frontend/src/app/scratch/[slug]/claim/page.tsx
index 10eb7b3fc..105eead3e 100644
--- a/frontend/src/app/scratch/[slug]/claim/page.tsx
+++ b/frontend/src/app/scratch/[slug]/claim/page.tsx
@@ -1,46 +1,49 @@
-"use client"
+"use client";
 
-import { useEffect, useRef, useState } from "react"
+import { useEffect, useRef, useState } from "react";
 
-import { useRouter } from "next/navigation"
+import { useRouter } from "next/navigation";
 
-import LoadingSkeleton from "@/app/scratch/[slug]/loading"
-import { post } from "@/lib/api/request"
+import LoadingSkeleton from "@/app/scratch/[slug]/loading";
+import { post } from "@/lib/api/request";
 
-export default function Page({ params, searchParams }: {
-    params: { slug: string }
-    searchParams: { token: string }
+export default function Page({
+    params,
+    searchParams,
+}: {
+    params: { slug: string };
+    searchParams: { token: string };
 }) {
-    const router = useRouter()
+    const router = useRouter();
 
     // The POST request must happen on the client so
     // that the Django session cookie is present.
-    const effectRan = useRef(false)
-    const [error, setError] = useState<Error>(null)
+    const effectRan = useRef(false);
+    const [error, setError] = useState<Error>(null);
     useEffect(() => {
         if (!effectRan.current) {
             post(`/scratch/${params.slug}/claim`, { token: searchParams.token })
-                .then(data => {
+                .then((data) => {
                     if (data.success) {
-                        router.replace(`/scratch/${params.slug}`)
+                        router.replace(`/scratch/${params.slug}`);
                     } else {
-                        throw new Error("Unable to claim scratch")
+                        throw new Error("Unable to claim scratch");
                     }
                 })
-                .catch(err => {
-                    console.error("Failed to claim scratch", err)
-                    setError(err)
-                })
+                .catch((err) => {
+                    console.error("Failed to claim scratch", err);
+                    setError(err);
+                });
         }
 
         return () => {
-            effectRan.current = true
-        }
-    }, [params.slug, router, searchParams.token])
+            effectRan.current = true;
+        };
+    }, [params.slug, router, searchParams.token]);
 
     if (error) {
         // Rely on error boundary to catch and display error
-        throw error
+        throw error;
     }
-    return <LoadingSkeleton/>
+    return <LoadingSkeleton />;
 }
diff --git a/frontend/src/app/scratch/[slug]/getScratchDetails.ts b/frontend/src/app/scratch/[slug]/getScratchDetails.ts
index 68c30e539..15f598e30 100644
--- a/frontend/src/app/scratch/[slug]/getScratchDetails.ts
+++ b/frontend/src/app/scratch/[slug]/getScratchDetails.ts
@@ -1,26 +1,30 @@
-import { get, bubbleNotFound, ResponseError } from "@/lib/api/request"
-import type { Scratch, Compilation } from "@/lib/api/types"
-import { scratchParentUrl, scratchUrl } from "@/lib/api/urls"
+import { get, bubbleNotFound, ResponseError } from "@/lib/api/request";
+import type { Scratch, Compilation } from "@/lib/api/types";
+import { scratchParentUrl, scratchUrl } from "@/lib/api/urls";
 
 export default async function getScratchDetails(slug: string) {
-    const scratch: Scratch = await get(`/scratch/${slug}`).catch(bubbleNotFound)
+    const scratch: Scratch = await get(`/scratch/${slug}`).catch(
+        bubbleNotFound,
+    );
 
-    let compilation: Compilation | null = null
+    let compilation: Compilation | null = null;
     try {
-        compilation = await get(`${scratchUrl(scratch)}/compile`)
+        compilation = await get(`${scratchUrl(scratch)}/compile`);
     } catch (error) {
         if (error instanceof ResponseError && error.status !== 400) {
-            compilation = null
+            compilation = null;
         } else {
-            throw error
+            throw error;
         }
     }
 
-    const parentScratch: Scratch | null = scratch.parent ? await get(scratchParentUrl(scratch)) : null
+    const parentScratch: Scratch | null = scratch.parent
+        ? await get(scratchParentUrl(scratch))
+        : null;
 
     return {
         scratch,
         parentScratch,
         compilation,
-    }
+    };
 }
diff --git a/frontend/src/app/scratch/[slug]/loading.tsx b/frontend/src/app/scratch/[slug]/loading.tsx
index e0689adeb..72e707ca1 100644
--- a/frontend/src/app/scratch/[slug]/loading.tsx
+++ b/frontend/src/app/scratch/[slug]/loading.tsx
@@ -1,6 +1,6 @@
-import { useMemo } from "react"
+import { useMemo } from "react";
 
-import Nav from "@/components/Nav"
+import Nav from "@/components/Nav";
 
 const CODE = `#include "common.h"
 
@@ -27,7 +27,7 @@ void step_game_loop(void) {
             return;
         }
     }
-}`
+}`;
 
 const DIFF = ` 0:    stwu    r1,-0x20(r1)
  4:    mflr    r0
@@ -61,90 +61,100 @@ const DIFF = ` 0:    stwu    r1,-0x20(r1)
 74: ~> lwz     r0,0x24(r1)
 78:    mtlr    r0
 7c:    addi    r1,r1,0x20
-80:    blr`
+80:    blr`;
 
 function TextSkeleton({ text }: { text: string }) {
-    const lines = useMemo(() => (
-        text
-            .split("\n")
-            .map(line => {
+    const lines = useMemo(
+        () =>
+            text.split("\n").map((line) => {
                 // Convert line into a sequence of [word len, space len] pairs.
                 // e.g. "xxxx  xx xxx x" -> [[4, 2], [2, 1], [3, 1], [1, 0]]
-                const pairs = []
+                const pairs = [];
 
-                let state: "word" | "space" = "word"
-                let wordLen = 0
-                let spaceLen = 0
+                let state: "word" | "space" = "word";
+                let wordLen = 0;
+                let spaceLen = 0;
                 for (const char of line) {
                     if (char === " ") {
                         if (state === "word") {
-                            pairs.push([wordLen, spaceLen])
-                            wordLen = 0
-                            spaceLen = 0
+                            pairs.push([wordLen, spaceLen]);
+                            wordLen = 0;
+                            spaceLen = 0;
                         }
 
-                        state = "space"
-                        spaceLen++
-                    } else { // non-space
+                        state = "space";
+                        spaceLen++;
+                    } else {
+                        // non-space
                         if (state === "space") {
-                            pairs.push([wordLen, spaceLen])
-                            wordLen = 0
-                            spaceLen = 0
+                            pairs.push([wordLen, spaceLen]);
+                            wordLen = 0;
+                            spaceLen = 0;
                         }
 
-                        state = "word"
-                        wordLen++
+                        state = "word";
+                        wordLen++;
                     }
                 }
-                pairs.push([wordLen, spaceLen])
-
-                return pairs.filter(([wordLen, spaceLen]) => wordLen > 0 || spaceLen > 0)
-            })
-    ), [text])
-
-    return <div className="flex flex-col gap-1">
-        {lines.map((pairs, i) =>
-            <div key={i} className="flex h-5">
-                {pairs.map(([wordLen, spaceLen], j) =>
-                    <div
-                        key={j}
-                        className="h-full bg-gray-6"
-                        style={{
-                            width: `${wordLen}ch`,
-                            marginRight: `${spaceLen}ch`,
-                        }}
-                    />
-                )}
-            </div>
-        )}
-    </div>
+                pairs.push([wordLen, spaceLen]);
+
+                return pairs.filter(
+                    ([wordLen, spaceLen]) => wordLen > 0 || spaceLen > 0,
+                );
+            }),
+        [text],
+    );
+
+    return (
+        <div className="flex flex-col gap-1">
+            {lines.map((pairs, i) => (
+                <div key={i} className="flex h-5">
+                    {pairs.map(([wordLen, spaceLen], j) => (
+                        <div
+                            key={j}
+                            className="h-full bg-gray-6"
+                            style={{
+                                width: `${wordLen}ch`,
+                                marginRight: `${spaceLen}ch`,
+                            }}
+                        />
+                    ))}
+                </div>
+            ))}
+        </div>
+    );
 }
 
 export default function LoadingSkeleton() {
-    return <div className="relative flex size-full animate-pulse flex-col overflow-hidden">
-        <Nav>
-            <div className="ml-1 flex w-full items-center gap-1.5">
-                <div className="size-5 rounded-full bg-gray-6" />
-                <div className="h-5 w-16 bg-gray-6" />
-                <div className="h-5 w-48 bg-gray-6" />
-            </div>
-        </Nav>
-        <div className="flex grow border-gray-6 border-t">
-            <div className="w-1/2 gap-1 overflow-hidden border-gray-6 border-r p-8">
-                <TextSkeleton text={CODE} />
-            </div>
-            <div className="w-1/2 gap-1 overflow-hidden border-gray-6 border-r p-8">
-                <TextSkeleton text={DIFF} />
+    return (
+        <div className="relative flex size-full animate-pulse flex-col overflow-hidden">
+            <Nav>
+                <div className="ml-1 flex w-full items-center gap-1.5">
+                    <div className="size-5 rounded-full bg-gray-6" />
+                    <div className="h-5 w-16 bg-gray-6" />
+                    <div className="h-5 w-48 bg-gray-6" />
+                </div>
+            </Nav>
+            <div className="flex grow border-gray-6 border-t">
+                <div className="w-1/2 gap-1 overflow-hidden border-gray-6 border-r p-8">
+                    <TextSkeleton text={CODE} />
+                </div>
+                <div className="w-1/2 gap-1 overflow-hidden border-gray-6 border-r p-8">
+                    <TextSkeleton text={DIFF} />
+                </div>
             </div>
-        </div>
 
-        <noscript>
-            <div role="status" className="-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 font-medium">
-                JavaScript is required to edit scratches
-            </div>
-        </noscript>
-        <span role="status" className="sr-only">
-            Loading editor...
-        </span>
-    </div>
+            <noscript>
+                <div
+                    role="status"
+                    className="-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 font-medium"
+                >
+                    JavaScript is required to edit scratches
+                </div>
+            </noscript>
+            <span role="status" className="sr-only">
+                Loading editor...
+            </span>
+        </div>
+    );
 }
diff --git a/frontend/src/app/scratch/[slug]/opengraph-image.tsx b/frontend/src/app/scratch/[slug]/opengraph-image.tsx
index 9f2f9e055..407ef2f52 100644
--- a/frontend/src/app/scratch/[slug]/opengraph-image.tsx
+++ b/frontend/src/app/scratch/[slug]/opengraph-image.tsx
@@ -1,48 +1,68 @@
-import { ImageResponse } from "next/og"
+import { ImageResponse } from "next/og";
 
-import { PlatformIcon } from "@/components/PlatformSelect/PlatformIcon"
-import { percentToString, calculateScorePercent } from "@/components/ScoreBadge"
-import { get } from "@/lib/api/request"
-import type { Preset } from "@/lib/api/types"
+import { PlatformIcon } from "@/components/PlatformSelect/PlatformIcon";
+import {
+    percentToString,
+    calculateScorePercent,
+} from "@/components/ScoreBadge";
+import { get } from "@/lib/api/request";
+import type { Preset } from "@/lib/api/types";
 
-import CheckCircleFillIcon from "./assets/check-circle-fill.svg"
-import PurpleFrog from "./assets/purplefrog.svg"
-import RepoForkedIcon from "./assets/repo-forked.svg"
-import TrophyIcon from "./assets/trophy.svg"
-import XCircleFillIcon from "./assets/x-circle-fill.svg"
-import getScratchDetails from "./getScratchDetails"
+import CheckCircleFillIcon from "./assets/check-circle-fill.svg";
+import PurpleFrog from "./assets/purplefrog.svg";
+import RepoForkedIcon from "./assets/repo-forked.svg";
+import TrophyIcon from "./assets/trophy.svg";
+import XCircleFillIcon from "./assets/x-circle-fill.svg";
+import getScratchDetails from "./getScratchDetails";
 
-const truncateText = (text: string, length: number) => `${text.slice(0, length)}...${text.slice(-length, text.length)}`
+const truncateText = (text: string, length: number) =>
+    `${text.slice(0, length)}...${text.slice(-length, text.length)}`;
 
-const IMAGE_WIDTH_PX = 1200
-const IMAGE_HEIGHT_PX = 400
+const IMAGE_WIDTH_PX = 1200;
+const IMAGE_HEIGHT_PX = 400;
 
-export const runtime = "edge"
+export const runtime = "edge";
 
-export default async function ScratchOG({ params }: { params: { slug: string }}) {
+export default async function ScratchOG({
+    params,
+}: { params: { slug: string } }) {
+    const { scratch, parentScratch, compilation } = await getScratchDetails(
+        params.slug,
+    );
 
-    const { scratch, parentScratch, compilation } = await getScratchDetails(params.slug)
-
-    const preset: Preset | null = scratch.preset !== null ? await get(`/preset/${scratch.preset}`) : null
-    const scratchName = scratch.name.length > 40 ? truncateText(scratch.name, 18) : scratch.name
+    const preset: Preset | null =
+        scratch.preset !== null ? await get(`/preset/${scratch.preset}`) : null;
+    const scratchName =
+        scratch.name.length > 40
+            ? truncateText(scratch.name, 18)
+            : scratch.name;
     const scratchNameSize =
-        scratchName.length > 32 ? "4xl" :
-            scratchName.length > 24 ? "5xl" : "6xl"
+        scratchName.length > 32
+            ? "4xl"
+            : scratchName.length > 24
+              ? "5xl"
+              : "6xl";
 
-    const score = compilation?.diff_output?.current_score ?? -1
-    const maxScore = compilation?.diff_output?.max_score ?? -1
+    const score = compilation?.diff_output?.current_score ?? -1;
+    const maxScore = compilation?.diff_output?.max_score ?? -1;
 
-    const percent = scratch.match_override ? 100 : calculateScorePercent(score, maxScore)
-    const doneWidth = Math.floor(percent * IMAGE_WIDTH_PX / 100)
-    const todoWidth = IMAGE_WIDTH_PX - doneWidth
+    const percent = scratch.match_override
+        ? 100
+        : calculateScorePercent(score, maxScore);
+    const doneWidth = Math.floor((percent * IMAGE_WIDTH_PX) / 100);
+    const todoWidth = IMAGE_WIDTH_PX - doneWidth;
 
     return new ImageResponse(
         <div tw="flex flex-col justify-between w-full h-full bg-zinc-800 text-slate-50 text-5xl">
             <div tw="flex flex-col">
                 <div tw="flex flex-row justify-between ml-15 mr-15 mt-5">
                     <div tw="flex flex-col justify-center">
-                        <div tw="flex text-slate-300">{scratch.owner?.username ?? "No Owner"}</div>
-                        <div tw={`flex text-${scratchNameSize}`}>{scratchName}</div>
+                        <div tw="flex text-slate-300">
+                            {scratch.owner?.username ?? "No Owner"}
+                        </div>
+                        <div tw={`flex text-${scratchNameSize}`}>
+                            {scratchName}
+                        </div>
                     </div>
                     <div tw="flex bg-zinc-700 rounded-2xl">
                         <div tw="flex m-3">
@@ -53,13 +73,14 @@ export default async function ScratchOG({ params }: { params: { slug: string }})
                         </div>
                     </div>
                 </div>
-                <div tw="flex mt-3 ml-15 mr-15 text-slate-300">{preset?.name || "Custom Preset"}</div>
+                <div tw="flex mt-3 ml-15 mr-15 text-slate-300">
+                    {preset?.name || "Custom Preset"}
+                </div>
             </div>
 
             <div tw="flex justify-between mt-5 ml-15 mr-15">
                 <div tw="flex">
-                    {score === -1
-                        ?
+                    {score === -1 ? (
                         <div tw="flex">
                             <div tw="flex flex-col justify-around">
                                 <XCircleFillIcon width={48} height={48} />
@@ -68,42 +89,44 @@ export default async function ScratchOG({ params }: { params: { slug: string }})
                                 <div tw="flex">No Score</div>
                             </div>
                         </div>
-                        : score === 0 || scratch.match_override
-                            ?
-                            <div tw="flex">
-                                <div tw="flex flex-col justify-around">
-                                    <CheckCircleFillIcon width={48} height={48} />
-                                </div>
-                                <div tw="flex flex-col items-center ml-5">
-                                    <div tw="flex">Matched</div>
-                                    {scratch.match_override &&
-                                        <div tw="flex text-4xl text-slate-300">(Override)</div>
-                                    }
-                                </div>
+                    ) : score === 0 || scratch.match_override ? (
+                        <div tw="flex">
+                            <div tw="flex flex-col justify-around">
+                                <CheckCircleFillIcon width={48} height={48} />
                             </div>
-                            :
-                            <div tw="flex">
-                                <div tw="flex flex-col justify-around">
-                                    <TrophyIcon width={48} height={48} />
-                                </div>
-                                <div tw="flex flex-col justify-around ml-5">
-                                    <div tw="flex">
-                                        {score} ({percentToString(percent)})
+                            <div tw="flex flex-col items-center ml-5">
+                                <div tw="flex">Matched</div>
+                                {scratch.match_override && (
+                                    <div tw="flex text-4xl text-slate-300">
+                                        (Override)
                                     </div>
+                                )}
+                            </div>
+                        </div>
+                    ) : (
+                        <div tw="flex">
+                            <div tw="flex flex-col justify-around">
+                                <TrophyIcon width={48} height={48} />
+                            </div>
+                            <div tw="flex flex-col justify-around ml-5">
+                                <div tw="flex">
+                                    {score} ({percentToString(percent)})
                                 </div>
                             </div>
-                    }
-
-                    {parentScratch &&
-                    <div tw="flex ml-10">
-                        <div tw="flex flex-col justify-around">
-                            <RepoForkedIcon width={48} height={48} />
                         </div>
-                        <div tw="flex flex-col justify-around ml-5">
-                            {parentScratch.owner?.username ?? "Anonymous User"}
+                    )}
+
+                    {parentScratch && (
+                        <div tw="flex ml-10">
+                            <div tw="flex flex-col justify-around">
+                                <RepoForkedIcon width={48} height={48} />
+                            </div>
+                            <div tw="flex flex-col justify-around ml-5">
+                                {parentScratch.owner?.username ??
+                                    "Anonymous User"}
+                            </div>
                         </div>
-                    </div>
-                    }
+                    )}
                 </div>
 
                 <div tw="flex flex-col justify-around ml-15">
@@ -120,5 +143,5 @@ export default async function ScratchOG({ params }: { params: { slug: string }})
             width: IMAGE_WIDTH_PX,
             height: IMAGE_HEIGHT_PX,
         },
-    )
+    );
 }
diff --git a/frontend/src/app/scratch/[slug]/page.tsx b/frontend/src/app/scratch/[slug]/page.tsx
index 3e214087e..46104e23b 100644
--- a/frontend/src/app/scratch/[slug]/page.tsx
+++ b/frontend/src/app/scratch/[slug]/page.tsx
@@ -1,11 +1,14 @@
-import type { Metadata, ResolvingMetadata } from "next"
+import type { Metadata, ResolvingMetadata } from "next";
 
-import getScratchDetails from "./getScratchDetails"
-import ScratchEditor from "./ScratchEditor"
+import getScratchDetails from "./getScratchDetails";
+import ScratchEditor from "./ScratchEditor";
 
-export async function generateMetadata({ params }: { params: { slug: string }}, parent: ResolvingMetadata):Promise<Metadata> {
-    const { scratch } = await getScratchDetails(params.slug)
-    const parentData = await parent
+export async function generateMetadata(
+    { params }: { params: { slug: string } },
+    parent: ResolvingMetadata,
+): Promise<Metadata> {
+    const { scratch } = await getScratchDetails(params.slug);
+    const parentData = await parent;
 
     return {
         title: scratch.name,
@@ -19,17 +22,20 @@ export async function generateMetadata({ params }: { params: { slug: string }},
                     height: 400,
                 },
             ],
-
         },
-    }
+    };
 }
 
-export default async function Page({ params }: { params: { slug: string }}) {
-    const { scratch, parentScratch, compilation } = await getScratchDetails(params.slug)
+export default async function Page({ params }: { params: { slug: string } }) {
+    const { scratch, parentScratch, compilation } = await getScratchDetails(
+        params.slug,
+    );
 
-    return <ScratchEditor
-        initialScratch={scratch}
-        parentScratch={parentScratch}
-        initialCompilation={compilation}
-    />
+    return (
+        <ScratchEditor
+            initialScratch={scratch}
+            parentScratch={parentScratch}
+            initialCompilation={compilation}
+        />
+    );
 }
diff --git a/frontend/src/components/AsyncButton.tsx b/frontend/src/components/AsyncButton.tsx
index 0b39020a6..6ea167ecd 100644
--- a/frontend/src/components/AsyncButton.tsx
+++ b/frontend/src/components/AsyncButton.tsx
@@ -1,85 +1,98 @@
-"use client"
+"use client";
 
-import { type ReactNode, useState, useCallback } from "react"
+import { type ReactNode, useState, useCallback } from "react";
 
-import classNames from "classnames"
-import { motion, AnimatePresence } from "framer-motion"
-import { useLayer, Arrow } from "react-laag"
+import classNames from "classnames";
+import { motion, AnimatePresence } from "framer-motion";
+import { useLayer, Arrow } from "react-laag";
 
-import styles from "./AsyncButton.module.scss"
-import Button, { type Props as ButtonProps } from "./Button"
-import LoadingSpinner from "./loading.svg"
+import styles from "./AsyncButton.module.scss";
+import Button, { type Props as ButtonProps } from "./Button";
+import LoadingSpinner from "./loading.svg";
 
 export interface Props extends ButtonProps {
-    onClick: () => Promise<unknown>
-    forceLoading?: boolean
-    errorPlacement?: import("react-laag/dist/PlacementType").PlacementType
-    children: ReactNode
+    onClick: () => Promise<unknown>;
+    forceLoading?: boolean;
+    errorPlacement?: import("react-laag/dist/PlacementType").PlacementType;
+    children: ReactNode;
 }
 
 export default function AsyncButton(props: Props) {
-    const [isAwaitingPromise, setIsAwaitingPromise] = useState(false)
-    const isLoading = isAwaitingPromise || props.forceLoading
-    const [errorMessage, setErrorMessage] = useState("")
-    const clickHandler = props.onClick
+    const [isAwaitingPromise, setIsAwaitingPromise] = useState(false);
+    const isLoading = isAwaitingPromise || props.forceLoading;
+    const [errorMessage, setErrorMessage] = useState("");
+    const clickHandler = props.onClick;
     const onClick = useCallback(() => {
         if (!isLoading) {
-            setIsAwaitingPromise(true)
-            setErrorMessage("")
+            setIsAwaitingPromise(true);
+            setErrorMessage("");
 
-            const promise = clickHandler()
+            const promise = clickHandler();
 
             if (promise instanceof Promise) {
-                promise.catch(error => {
-                    console.error("AsyncButton caught error", error)
-                    setErrorMessage(error.message || error.toString())
-                }).finally(() => {
-                    setIsAwaitingPromise(false)
-                })
+                promise
+                    .catch((error) => {
+                        console.error("AsyncButton caught error", error);
+                        setErrorMessage(error.message || error.toString());
+                    })
+                    .finally(() => {
+                        setIsAwaitingPromise(false);
+                    });
             } else {
-                console.error("AsyncButton onClick() must return a promise, but instead it returned", promise)
-                setIsAwaitingPromise(false)
+                console.error(
+                    "AsyncButton onClick() must return a promise, but instead it returned",
+                    promise,
+                );
+                setIsAwaitingPromise(false);
             }
         }
-    }, [isLoading, clickHandler])
+    }, [isLoading, clickHandler]);
     const { triggerProps, layerProps, arrowProps, renderLayer } = useLayer({
         isOpen: errorMessage !== "",
         onOutsideClick: () => setErrorMessage(""),
         placement: props.errorPlacement ?? "top-center",
         auto: true,
         triggerOffset: 8,
-    })
+    });
 
-    return <Button
-        {...props}
-        className={classNames(styles.asyncBtn, props.className, {
-            [styles.isLoading]: isLoading,
-        })}
-        onClick={onClick}
-        {...triggerProps}
-    >
-        <div className={styles.label}>
-            {props.children}
-        </div>
+    return (
+        <Button
+            {...props}
+            className={classNames(styles.asyncBtn, props.className, {
+                [styles.isLoading]: isLoading,
+            })}
+            onClick={onClick}
+            {...triggerProps}
+        >
+            <div className={styles.label}>{props.children}</div>
 
-        <div className={styles.loading}>
-            <LoadingSpinner width="24px" />
-        </div>
+            <div className={styles.loading}>
+                <LoadingSpinner width="24px" />
+            </div>
 
-        {renderLayer(
-            <AnimatePresence>
-                {errorMessage && <motion.div
-                    className={styles.errorPopup}
-                    initial={{ scaleX: 0.7, scaleY: 0, opacity: 0 }}
-                    animate={{ scaleX: 1, scaleY: 1, opacity: 1 }}
-                    exit={{ scaleX: 0.7, scaleY: 0, opacity: 0 }}
-                    transition={{ type: "spring", duration: 0.1 }}
-                    {...layerProps}
-                >
-                    <pre>{errorMessage}</pre>
-                    <Arrow onPointerEnterCapture={undefined} onPointerLeaveCapture={undefined} size={12} backgroundColor="#bb4444" {...arrowProps} />
-                </motion.div>}
-            </AnimatePresence>
-        )}
-    </Button>
+            {renderLayer(
+                <AnimatePresence>
+                    {errorMessage && (
+                        <motion.div
+                            className={styles.errorPopup}
+                            initial={{ scaleX: 0.7, scaleY: 0, opacity: 0 }}
+                            animate={{ scaleX: 1, scaleY: 1, opacity: 1 }}
+                            exit={{ scaleX: 0.7, scaleY: 0, opacity: 0 }}
+                            transition={{ type: "spring", duration: 0.1 }}
+                            {...layerProps}
+                        >
+                            <pre>{errorMessage}</pre>
+                            <Arrow
+                                onPointerEnterCapture={undefined}
+                                onPointerLeaveCapture={undefined}
+                                size={12}
+                                backgroundColor="#bb4444"
+                                {...arrowProps}
+                            />
+                        </motion.div>
+                    )}
+                </AnimatePresence>,
+            )}
+        </Button>
+    );
 }
diff --git a/frontend/src/components/Breadcrumbs.tsx b/frontend/src/components/Breadcrumbs.tsx
index e4cb66c79..26a2b4153 100644
--- a/frontend/src/components/Breadcrumbs.tsx
+++ b/frontend/src/components/Breadcrumbs.tsx
@@ -1,38 +1,49 @@
-import type { ReactNode } from "react"
+import type { ReactNode } from "react";
 
-import Link from "next/link"
+import Link from "next/link";
 
-import classNames from "classnames"
+import classNames from "classnames";
 
-import styles from "./Breadcrumbs.module.scss"
+import styles from "./Breadcrumbs.module.scss";
 
 export interface Props {
     pages: {
-        label: ReactNode
-        href?: string
-    }[]
-    className?: string
+        label: ReactNode;
+        href?: string;
+    }[];
+    className?: string;
 }
 
 export default function Breadcrumbs({ pages, className }: Props) {
     // https://www.w3.org/TR/wai-aria-practices/examples/breadcrumb/index.html
     return (
-        <nav aria-label="Breadcrumb" className={classNames(styles.breadcrumbs, className)}>
+        <nav
+            aria-label="Breadcrumb"
+            className={classNames(styles.breadcrumbs, className)}
+        >
             <ol>
                 {pages.map((page, index) => {
-                    const isLast = index === pages.length - 1
+                    const isLast = index === pages.length - 1;
 
-                    const a = <a aria-current={isLast ? "page" : undefined}>
-                        {page.label}
-                    </a>
+                    const a = (
+                        <a aria-current={isLast ? "page" : undefined}>
+                            {page.label}
+                        </a>
+                    );
 
                     return (
                         <li key={page.href || index}>
-                            {page.href ? <Link href={page.href} legacyBehavior>{a}</Link> : page.label}
+                            {page.href ? (
+                                <Link href={page.href} legacyBehavior>
+                                    {a}
+                                </Link>
+                            ) : (
+                                page.label
+                            )}
                         </li>
-                    )
+                    );
                 })}
             </ol>
         </nav>
-    )
+    );
 }
diff --git a/frontend/src/components/Button.tsx b/frontend/src/components/Button.tsx
index bef6b2c17..175c00502 100644
--- a/frontend/src/components/Button.tsx
+++ b/frontend/src/components/Button.tsx
@@ -1,62 +1,70 @@
-"use client"
+"use client";
 
-import { type ForwardedRef, forwardRef } from "react"
+import { type ForwardedRef, forwardRef } from "react";
 
-import Link from "next/link"
+import Link from "next/link";
 
-import classNames from "classnames"
+import classNames from "classnames";
 
-import styles from "./Button.module.scss"
+import styles from "./Button.module.scss";
 
-const Button = forwardRef(function Button({
-    children,
-    onClick,
-    href,
-    className,
-    disabled,
-    primary,
-    danger,
-    title,
-}: Props, ref: ForwardedRef<HTMLButtonElement>) {
-    const cn = classNames(className, styles.btn, "px-2.5 py-1.5 rounded text-sm active:translate-y-px", {
-        [styles.primary]: primary,
-        [styles.danger]: danger,
-    })
+const Button = forwardRef(function Button(
+    {
+        children,
+        onClick,
+        href,
+        className,
+        disabled,
+        primary,
+        danger,
+        title,
+    }: Props,
+    ref: ForwardedRef<HTMLButtonElement>,
+) {
+    const cn = classNames(
+        className,
+        styles.btn,
+        "px-2.5 py-1.5 rounded text-sm active:translate-y-px",
+        {
+            [styles.primary]: primary,
+            [styles.danger]: danger,
+        },
+    );
 
     if (href) {
-        return <Link
+        return (
+            <Link className={cn} title={title} href={href}>
+                {children}
+            </Link>
+        );
+    }
+
+    return (
+        <button
+            ref={ref}
             className={cn}
+            onClick={(event) => {
+                if (!disabled && onClick) {
+                    onClick(event);
+                }
+            }}
+            disabled={disabled}
             title={title}
-            href={href}
         >
             {children}
-        </Link>
-    }
-
-    return <button
-        ref={ref}
-        className={cn}
-        onClick={event => {
-            if (!disabled && onClick) {
-                onClick(event)
-            }
-        }}
-        disabled={disabled}
-        title={title}
-    >
-        {children}
-    </button>
-})
+        </button>
+    );
+});
 
 export type Props = {
-    children?: React.ReactNode
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void
-    href?: string
-    className?: string
-    disabled?: boolean
-    primary?: boolean
-    danger?: boolean
-    title?: string
-}
-
-export default Button
+    children?: React.ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    href?: string;
+    className?: string;
+    disabled?: boolean;
+    primary?: boolean;
+    danger?: boolean;
+    title?: string;
+};
+
+export default Button;
diff --git a/frontend/src/components/ColorSchemeEditor.tsx b/frontend/src/components/ColorSchemeEditor.tsx
index 8ba1ee65d..77816b350 100644
--- a/frontend/src/components/ColorSchemeEditor.tsx
+++ b/frontend/src/components/ColorSchemeEditor.tsx
@@ -1,73 +1,87 @@
-import { useEffect, useState } from "react"
+import { useEffect, useState } from "react";
 
-import isDarkColor from "is-dark-color"
-import { HexColorPicker, HexColorInput } from "react-colorful"
+import isDarkColor from "is-dark-color";
+import { HexColorPicker, HexColorInput } from "react-colorful";
 
-import { COLOR_NAMES, type ColorScheme, getColors } from "@/lib/codemirror/color-scheme"
+import {
+    COLOR_NAMES,
+    type ColorScheme,
+    getColors,
+} from "@/lib/codemirror/color-scheme";
 
-import styles from "./ColorSchemeEditor.module.scss"
-import ErrorBoundary from "./ErrorBoundary"
+import styles from "./ColorSchemeEditor.module.scss";
+import ErrorBoundary from "./ErrorBoundary";
 
-function Color({ color, name, onChange }: { color: string, name: string, onChange: (color: string) => void }) {
-    const [isEditing, setIsEditing] = useState(false)
-    const [isDark, setIsDark] = useState(false)
+function Color({
+    color,
+    name,
+    onChange,
+}: { color: string; name: string; onChange: (color: string) => void }) {
+    const [isEditing, setIsEditing] = useState(false);
+    const [isDark, setIsDark] = useState(false);
 
     useEffect(() => {
         try {
-            setIsDark(isDarkColor(color))
+            setIsDark(isDarkColor(color));
         } catch (error) {
             // Ignore
         }
-    }, [color])
+    }, [color]);
 
-    return <li
-        aria-label={name}
-        className={styles.color}
-        tabIndex={0}
-        onFocus={() => setIsEditing(true)}
-        onClick={() => setIsEditing(true)}
-        onBlur={() => setIsEditing(false)}
-        data-active={isEditing}
-        style={{
-            color: isDark ? "white" : "black",
-            backgroundColor: color,
-        }}
-    >
-        {!isEditing && <label>{name}</label>}
-        {isEditing && <>
-            <HexColorPicker color={color} onChange={onChange} />
-            <HexColorInput
-                autoFocus={true}
-                onFocus={evt => evt.target.select()}
-                color={color}
-                onChange={onChange}
-                prefixed
-            />
-        </>}
-    </li>
+    return (
+        <li
+            aria-label={name}
+            className={styles.color}
+            tabIndex={0}
+            onFocus={() => setIsEditing(true)}
+            onClick={() => setIsEditing(true)}
+            onBlur={() => setIsEditing(false)}
+            data-active={isEditing}
+            style={{
+                color: isDark ? "white" : "black",
+                backgroundColor: color,
+            }}
+        >
+            {!isEditing && <label>{name}</label>}
+            {isEditing && (
+                <>
+                    <HexColorPicker color={color} onChange={onChange} />
+                    <HexColorInput
+                        autoFocus={true}
+                        onFocus={(evt) => evt.target.select()}
+                        color={color}
+                        onChange={onChange}
+                        prefixed
+                    />
+                </>
+            )}
+        </li>
+    );
 }
 
 export interface Props {
-    scheme: ColorScheme
-    onChange: (scheme: ColorScheme) => void
+    scheme: ColorScheme;
+    onChange: (scheme: ColorScheme) => void;
 }
 
 export default function ColorSchemeEditor({ scheme, onChange }: Props) {
-    const colors = getColors(scheme)
+    const colors = getColors(scheme);
 
-    const els = []
+    const els = [];
     for (const [key, name] of Object.entries(COLOR_NAMES)) {
-        els.push(<Color
-            key={key}
-            color={colors[key as keyof typeof colors]}
-            name={name}
-            onChange={color => onChange({ ...colors, [key]: color })}
-        />)
+        els.push(
+            <Color
+                key={key}
+                color={colors[key as keyof typeof colors]}
+                name={name}
+                onChange={(color) => onChange({ ...colors, [key]: color })}
+            />,
+        );
     }
 
-    return <ErrorBoundary onError={() => onChange("Frog Dark")}>
-        <ul className={styles.container}>
-            {els}
-        </ul>
-    </ErrorBoundary>
+    return (
+        <ErrorBoundary onError={() => onChange("Frog Dark")}>
+            <ul className={styles.container}>{els}</ul>
+        </ErrorBoundary>
+    );
 }
diff --git a/frontend/src/components/ColorSchemePicker.tsx b/frontend/src/components/ColorSchemePicker.tsx
index 145f52796..bc73b1de2 100644
--- a/frontend/src/components/ColorSchemePicker.tsx
+++ b/frontend/src/components/ColorSchemePicker.tsx
@@ -1,40 +1,53 @@
-import { type ColorScheme, DARK_THEMES, getColors, LIGHT_THEMES } from "@/lib/codemirror/color-scheme"
-import { useIsSiteThemeDark } from "@/lib/settings"
+import {
+    type ColorScheme,
+    DARK_THEMES,
+    getColors,
+    LIGHT_THEMES,
+} from "@/lib/codemirror/color-scheme";
+import { useIsSiteThemeDark } from "@/lib/settings";
 
-import ColorSchemeEditor from "./ColorSchemeEditor"
-import styles from "./ColorSchemePicker.module.scss"
+import ColorSchemeEditor from "./ColorSchemeEditor";
+import styles from "./ColorSchemePicker.module.scss";
 
 export interface Props {
-    scheme: ColorScheme
-    onChange: (scheme: ColorScheme) => void
+    scheme: ColorScheme;
+    onChange: (scheme: ColorScheme) => void;
 }
 
 export default function ColorSchemePicker({ scheme, onChange }: Props) {
-    const themes = useIsSiteThemeDark() ? DARK_THEMES : LIGHT_THEMES
+    const themes = useIsSiteThemeDark() ? DARK_THEMES : LIGHT_THEMES;
 
-    return <div className={styles.container}>
-        <ul className={styles.presets}>
-            {themes.map(theme => {
-                return <li key={theme}>
-                    <button
-                        className={styles.box}
-                        onClick={() => onChange(theme)}
-                        data-active={scheme === theme}
-                    >
-                        {theme}
-                        <div className={styles.colors}>
-                            {Object.entries(getColors(theme)).map(([key, color]) => (
-                                <div
-                                    key={key}
-                                    style={{ backgroundColor: color }}
-                                />)
-                            )}
-                        </div>
-                    </button>
-                </li>
-            })}
-        </ul>
+    return (
+        <div className={styles.container}>
+            <ul className={styles.presets}>
+                {themes.map((theme) => {
+                    return (
+                        <li key={theme}>
+                            <button
+                                className={styles.box}
+                                onClick={() => onChange(theme)}
+                                data-active={scheme === theme}
+                            >
+                                {theme}
+                                <div className={styles.colors}>
+                                    {Object.entries(getColors(theme)).map(
+                                        ([key, color]) => (
+                                            <div
+                                                key={key}
+                                                style={{
+                                                    backgroundColor: color,
+                                                }}
+                                            />
+                                        ),
+                                    )}
+                                </div>
+                            </button>
+                        </li>
+                    );
+                })}
+            </ul>
 
-        <ColorSchemeEditor scheme={scheme} onChange={onChange} />
-    </div>
+            <ColorSchemeEditor scheme={scheme} onChange={onChange} />
+        </div>
+    );
 }
diff --git a/frontend/src/components/CustomLayout.tsx b/frontend/src/components/CustomLayout.tsx
index 6b63c7d64..424a1ed10 100644
--- a/frontend/src/components/CustomLayout.tsx
+++ b/frontend/src/components/CustomLayout.tsx
@@ -1,102 +1,107 @@
-import type { ReactElement } from "react"
+import type { ReactElement } from "react";
 
-import { Allotment } from "allotment"
+import { Allotment } from "allotment";
 
-import Tabs, { type Tab } from "./Tabs"
+import Tabs, { type Tab } from "./Tabs";
 
 export interface HorizontalSplit {
-    key: number
-    kind: "horizontal"
-    size: number
-    children: Layout[]
+    key: number;
+    kind: "horizontal";
+    size: number;
+    children: Layout[];
 }
 
 export interface VerticalSplit {
-    key: number
-    kind: "vertical"
-    size: number
-    children: Layout[]
+    key: number;
+    kind: "vertical";
+    size: number;
+    children: Layout[];
 }
 
 export interface Pane {
-    key: number
-    kind: "pane"
-    size: number
-    activeTab: string
-    tabs: string[]
+    key: number;
+    kind: "pane";
+    size: number;
+    activeTab: string;
+    tabs: string[];
 }
 
-export type Layout = HorizontalSplit | VerticalSplit | Pane
+export type Layout = HorizontalSplit | VerticalSplit | Pane;
 
 export function visitLayout(layout: Layout, visitor: (layout: Layout) => void) {
-    visitor(layout)
+    visitor(layout);
 
     if (layout.kind === "horizontal" || layout.kind === "vertical") {
         for (const child of layout.children) {
-            visitLayout(child, visitor)
+            visitLayout(child, visitor);
         }
     }
 }
 
 export function activateTabInLayout(layout: Layout, tab: string) {
-    visitLayout(layout, node => {
+    visitLayout(layout, (node) => {
         if (node.kind === "pane") {
             if (node.tabs.includes(tab)) {
-                node.activeTab = tab
+                node.activeTab = tab;
             }
         }
-    })
+    });
 }
 
 export interface Props {
-    layout: Layout
-    onChange: (layout: Layout) => void
-    renderTab: (id: string) => ReactElement<typeof Tab>
+    layout: Layout;
+    onChange: (layout: Layout) => void;
+    renderTab: (id: string) => ReactElement<typeof Tab>;
 }
 
 export default function CustomLayout({ renderTab, layout, onChange }: Props) {
     if (layout.kind === "pane") {
-        const els = []
+        const els = [];
 
         for (const id of layout.tabs) {
-            els.push(renderTab(id))
+            els.push(renderTab(id));
         }
 
-        return <Tabs
-            activeTab={layout.activeTab}
-            onChange={activeTab => onChange({ ...layout, activeTab })}
-        >
-            {els}
-        </Tabs>
+        return (
+            <Tabs
+                activeTab={layout.activeTab}
+                onChange={(activeTab) => onChange({ ...layout, activeTab })}
+            >
+                {els}
+            </Tabs>
+        );
     } else {
-        const els = []
-        const minCollapsedHeight = 37
+        const els = [];
+        const minCollapsedHeight = 37;
         for (let index = 0; index < layout.children.length; index++) {
-            const child = layout.children[index]
+            const child = layout.children[index];
 
             const setChild = (newChild: Layout) => {
-                const clone = JSON.parse(JSON.stringify(layout)) as HorizontalSplit | VerticalSplit
-                clone.children[index] = newChild
-                onChange(clone)
-            }
-
-            els.push(<Allotment.Pane
-                key={child.key}
-                minSize={minCollapsedHeight}
-            >
-                <CustomLayout
-                    renderTab={renderTab}
-                    layout={child}
-                    onChange={setChild}
-                />
-            </Allotment.Pane>)
+                const clone = JSON.parse(JSON.stringify(layout)) as
+                    | HorizontalSplit
+                    | VerticalSplit;
+                clone.children[index] = newChild;
+                onChange(clone);
+            };
+
+            els.push(
+                <Allotment.Pane key={child.key} minSize={minCollapsedHeight}>
+                    <CustomLayout
+                        renderTab={renderTab}
+                        layout={child}
+                        onChange={setChild}
+                    />
+                </Allotment.Pane>,
+            );
         }
 
-        return <Allotment
-            key={layout.kind} // Force remount when layout.kind changes
-            vertical={layout.kind === "vertical"}
-        >
-            {els}
-        </Allotment>
+        return (
+            <Allotment
+                key={layout.kind} // Force remount when layout.kind changes
+                vertical={layout.kind === "vertical"}
+            >
+                {els}
+            </Allotment>
+        );
     }
 }
diff --git a/frontend/src/components/Diff/CompilationPanel.tsx b/frontend/src/components/Diff/CompilationPanel.tsx
index 415ff90ad..55d44e841 100644
--- a/frontend/src/components/Diff/CompilationPanel.tsx
+++ b/frontend/src/components/Diff/CompilationPanel.tsx
@@ -1,24 +1,24 @@
-import { useMemo, useRef, useState } from "react"
+import { useMemo, useRef, useState } from "react";
 
-import { ChevronDownIcon, ChevronUpIcon } from "@primer/octicons-react"
-import { Allotment, type AllotmentHandle } from "allotment"
-import Ansi from "ansi-to-react"
+import { ChevronDownIcon, ChevronUpIcon } from "@primer/octicons-react";
+import { Allotment, type AllotmentHandle } from "allotment";
+import Ansi from "ansi-to-react";
 
-import type * as api from "@/lib/api"
-import { interdiff } from "@/lib/interdiff"
-import { ThreeWayDiffBase, useThreeWayDiffBase } from "@/lib/settings"
+import type * as api from "@/lib/api";
+import { interdiff } from "@/lib/interdiff";
+import { ThreeWayDiffBase, useThreeWayDiffBase } from "@/lib/settings";
 
-import GhostButton from "../GhostButton"
+import GhostButton from "../GhostButton";
 
-import Diff from "./Diff"
+import Diff from "./Diff";
 
 function getProblemState(compilation: api.Compilation): ProblemState {
     if (!compilation.success) {
-        return ProblemState.ERRORS
+        return ProblemState.ERRORS;
     } else if (compilation.compiler_output) {
-        return ProblemState.WARNINGS
+        return ProblemState.WARNINGS;
     } else {
-        return ProblemState.NO_PROBLEMS
+        return ProblemState.NO_PROBLEMS;
     }
 }
 
@@ -29,121 +29,144 @@ export enum ProblemState {
 }
 
 export type PerSaveObj = {
-    diff?: api.DiffOutput
-}
+    diff?: api.DiffOutput;
+};
 
 export type Props = {
-    scratch: api.Scratch
-    compilation: api.Compilation
-    isCompiling?: boolean
-    isCompilationOld?: boolean
-    selectedSourceLine: number | null
-    perSaveObj: PerSaveObj
-}
-
-export default function CompilationPanel({ scratch, compilation, isCompiling, isCompilationOld, selectedSourceLine, perSaveObj }: Props) {
-    const usedCompilationRef = useRef<api.Compilation | null>(null)
-    const problemState = getProblemState(compilation)
-    const [threeWayDiffBase] = useThreeWayDiffBase()
-    const [threeWayDiffEnabled, setThreeWayDiffEnabled] = useState(false)
-    const prevCompilation = usedCompilationRef.current
+    scratch: api.Scratch;
+    compilation: api.Compilation;
+    isCompiling?: boolean;
+    isCompilationOld?: boolean;
+    selectedSourceLine: number | null;
+    perSaveObj: PerSaveObj;
+};
+
+export default function CompilationPanel({
+    scratch,
+    compilation,
+    isCompiling,
+    isCompilationOld,
+    selectedSourceLine,
+    perSaveObj,
+}: Props) {
+    const usedCompilationRef = useRef<api.Compilation | null>(null);
+    const problemState = getProblemState(compilation);
+    const [threeWayDiffBase] = useThreeWayDiffBase();
+    const [threeWayDiffEnabled, setThreeWayDiffEnabled] = useState(false);
+    const prevCompilation = usedCompilationRef.current;
 
     // Only update the diff if it's never been set or if the compilation succeeded
     if (!usedCompilationRef.current || compilation.success) {
-        usedCompilationRef.current = compilation
+        usedCompilationRef.current = compilation;
     }
 
-    const usedDiff = usedCompilationRef.current?.diff_output ?? null
-    const objdiffResult = usedCompilationRef.current?.objdiff_output ?? null
+    const usedDiff = usedCompilationRef.current?.diff_output ?? null;
+    const objdiffResult = usedCompilationRef.current?.objdiff_output ?? null;
 
     // If this is the first time we re-render after a save, store the diff
     // as a possible three-way diff base.
     if (!perSaveObj.diff && usedCompilationRef.current?.success && usedDiff) {
-        perSaveObj.diff = usedDiff
+        perSaveObj.diff = usedDiff;
     }
 
-    const prevDiffRef = useRef<api.DiffOutput | null>(null)
+    const prevDiffRef = useRef<api.DiffOutput | null>(null);
 
     let usedBase: api.DiffOutput;
     if (threeWayDiffBase === ThreeWayDiffBase.SAVED) {
-        usedBase = perSaveObj.diff ?? null
-        prevDiffRef.current = null
+        usedBase = perSaveObj.diff ?? null;
+        prevDiffRef.current = null;
     } else {
         if (compilation.success && compilation !== prevCompilation) {
-            prevDiffRef.current = prevCompilation?.diff_output ?? null
+            prevDiffRef.current = prevCompilation?.diff_output ?? null;
         }
-        usedBase = prevDiffRef.current ?? null
+        usedBase = prevDiffRef.current ?? null;
     }
 
-    const diff = useMemo(
-        () => {
-            if (threeWayDiffEnabled)
-                return interdiff(usedDiff, usedBase)
-            else
-                return usedDiff
-        },
-        [threeWayDiffEnabled, usedDiff, usedBase]
-    )
-
-    const container = useRef<HTMLDivElement>(null)
-    const allotment = useRef<AllotmentHandle>(null)
-
-    const problemsCollapsedHeight = 37
-    const problemsDefaultHeight = 320
-    const [isProblemsCollapsed, setIsProblemsCollapsed] = useState(problemState === ProblemState.NO_PROBLEMS)
-
-    return <div ref={container} className="size-full">
-        <Allotment
-            ref={allotment}
-            vertical
-            onChange={([_top, bottom]) => {
-                if (_top === undefined || bottom === undefined) {
-                    return
-                }
-                setIsProblemsCollapsed(bottom <= problemsCollapsedHeight)
-            }}
-        >
-            <Allotment.Pane>
-                <Diff
-                    diff={diff || objdiffResult}
-                    diffLabel={scratch.diff_label}
-                    isCompiling={isCompiling}
-                    isCurrentOutdated={isCompilationOld || problemState === ProblemState.ERRORS}
-                    threeWayDiffEnabled={threeWayDiffEnabled}
-                    setThreeWayDiffEnabled={setThreeWayDiffEnabled}
-                    threeWayDiffBase={threeWayDiffBase}
-                    selectedSourceLine={selectedSourceLine}
-                />
-            </Allotment.Pane>
-            <Allotment.Pane
-                minSize={problemsCollapsedHeight}
-                preferredSize={isProblemsCollapsed ? problemsCollapsedHeight : problemsDefaultHeight}
+    const diff = useMemo(() => {
+        if (threeWayDiffEnabled) return interdiff(usedDiff, usedBase);
+        else return usedDiff;
+    }, [threeWayDiffEnabled, usedDiff, usedBase]);
+
+    const container = useRef<HTMLDivElement>(null);
+    const allotment = useRef<AllotmentHandle>(null);
+
+    const problemsCollapsedHeight = 37;
+    const problemsDefaultHeight = 320;
+    const [isProblemsCollapsed, setIsProblemsCollapsed] = useState(
+        problemState === ProblemState.NO_PROBLEMS,
+    );
+
+    return (
+        <div ref={container} className="size-full">
+            <Allotment
+                ref={allotment}
+                vertical
+                onChange={([_top, bottom]) => {
+                    if (_top === undefined || bottom === undefined) {
+                        return;
+                    }
+                    setIsProblemsCollapsed(bottom <= problemsCollapsedHeight);
+                }}
             >
-                <div className="flex size-full flex-col">
-                    <h2 className="flex items-center border-b border-b-gray-5 p-1 pl-3">
-                        <GhostButton
-                            className="flex w-max grow justify-between text-gray-11"
-                            onClick={() => {
-                                const containerHeight = container.current?.clientHeight ?? 0
-                                const newProblemsHeight = isProblemsCollapsed ? problemsDefaultHeight : problemsCollapsedHeight
-                                allotment.current?.resize([
-                                    containerHeight - newProblemsHeight,
-                                    newProblemsHeight,
-                                ])
-                            }}
-                        >
-                            <span className="font-medium text-sm">
-                                {(problemState === ProblemState.NO_PROBLEMS) ? "No problems" : "Problems"}
-                            </span>
-                            {isProblemsCollapsed ? <ChevronUpIcon /> : <ChevronDownIcon />}
-                        </GhostButton>
-                    </h2>
-
-                    <div className="h-full grow overflow-auto whitespace-pre px-3 py-2 font-mono text-xs leading-snug">
-                        <Ansi>{compilation.compiler_output}</Ansi>
+                <Allotment.Pane>
+                    <Diff
+                        diff={diff || objdiffResult}
+                        diffLabel={scratch.diff_label}
+                        isCompiling={isCompiling}
+                        isCurrentOutdated={
+                            isCompilationOld ||
+                            problemState === ProblemState.ERRORS
+                        }
+                        threeWayDiffEnabled={threeWayDiffEnabled}
+                        setThreeWayDiffEnabled={setThreeWayDiffEnabled}
+                        threeWayDiffBase={threeWayDiffBase}
+                        selectedSourceLine={selectedSourceLine}
+                    />
+                </Allotment.Pane>
+                <Allotment.Pane
+                    minSize={problemsCollapsedHeight}
+                    preferredSize={
+                        isProblemsCollapsed
+                            ? problemsCollapsedHeight
+                            : problemsDefaultHeight
+                    }
+                >
+                    <div className="flex size-full flex-col">
+                        <h2 className="flex items-center border-b border-b-gray-5 p-1 pl-3">
+                            <GhostButton
+                                className="flex w-max grow justify-between text-gray-11"
+                                onClick={() => {
+                                    const containerHeight =
+                                        container.current?.clientHeight ?? 0;
+                                    const newProblemsHeight =
+                                        isProblemsCollapsed
+                                            ? problemsDefaultHeight
+                                            : problemsCollapsedHeight;
+                                    allotment.current?.resize([
+                                        containerHeight - newProblemsHeight,
+                                        newProblemsHeight,
+                                    ]);
+                                }}
+                            >
+                                <span className="font-medium text-sm">
+                                    {problemState === ProblemState.NO_PROBLEMS
+                                        ? "No problems"
+                                        : "Problems"}
+                                </span>
+                                {isProblemsCollapsed ? (
+                                    <ChevronUpIcon />
+                                ) : (
+                                    <ChevronDownIcon />
+                                )}
+                            </GhostButton>
+                        </h2>
+
+                        <div className="h-full grow overflow-auto whitespace-pre px-3 py-2 font-mono text-xs leading-snug">
+                            <Ansi>{compilation.compiler_output}</Ansi>
+                        </div>
                     </div>
-                </div>
-            </Allotment.Pane>
-        </Allotment>
-    </div>
+                </Allotment.Pane>
+            </Allotment>
+        </div>
+    );
 }
diff --git a/frontend/src/components/Diff/Diff.tsx b/frontend/src/components/Diff/Diff.tsx
index 5c6a2acc5..433890e0b 100644
--- a/frontend/src/components/Diff/Diff.tsx
+++ b/frontend/src/components/Diff/Diff.tsx
@@ -1,44 +1,52 @@
 /* eslint css-modules/no-unused-class: off */
 
-import { createContext, type CSSProperties, forwardRef, type HTMLAttributes, type MutableRefObject, useRef, useState } from "react"
+import {
+    createContext,
+    type CSSProperties,
+    forwardRef,
+    type HTMLAttributes,
+    type MutableRefObject,
+    useRef,
+    useState,
+} from "react";
 
-import { VersionsIcon, CopyIcon } from "@primer/octicons-react"
-import type { EditorView } from "codemirror"
-import type { DiffResult } from "objdiff-wasm"
-import AutoSizer from "react-virtualized-auto-sizer"
-import { FixedSizeList } from "react-window"
+import { VersionsIcon, CopyIcon } from "@primer/octicons-react";
+import type { EditorView } from "codemirror";
+import type { DiffResult } from "objdiff-wasm";
+import AutoSizer from "react-virtualized-auto-sizer";
+import { FixedSizeList } from "react-window";
 
-import type * as api from "@/lib/api"
-import { useSize } from "@/lib/hooks"
-import { ThreeWayDiffBase, useCodeFontSize } from "@/lib/settings"
+import type * as api from "@/lib/api";
+import { useSize } from "@/lib/hooks";
+import { ThreeWayDiffBase, useCodeFontSize } from "@/lib/settings";
 
-import Loading from "../loading.svg"
+import Loading from "../loading.svg";
 
-import styles from "./Diff.module.scss"
-import * as AsmDiffer from "./DiffRowAsmDiffer"
-import * as Objdiff from "./DiffRowObjdiff"
-import DragBar from "./DragBar"
-import { useHighlighers } from "./Highlighter"
+import styles from "./Diff.module.scss";
+import * as AsmDiffer from "./DiffRowAsmDiffer";
+import * as Objdiff from "./DiffRowObjdiff";
+import DragBar from "./DragBar";
+import { useHighlighers } from "./Highlighter";
 
 const copyDiffContentsToClipboard = (diff: api.DiffOutput, kind: string) => {
     // kind is either "base", "current", or "previous"
-    const contents = diff.rows.map(row => {
-        let text = ""
+    const contents = diff.rows.map((row) => {
+        let text = "";
         if (kind === "base" && row.base) {
-            text = row.base.text.map(t => t.text).join("")
+            text = row.base.text.map((t) => t.text).join("");
         } else if (kind === "current" && row.current) {
-            text = row.current.text.map(t => t.text).join("")
+            text = row.current.text.map((t) => t.text).join("");
         } else if (kind === "previous" && row.previous) {
-            text = row.previous.text.map(t => t.text).join("")
+            text = row.previous.text.map((t) => t.text).join("");
         }
-        return text
-    })
+        return text;
+    });
 
-    navigator.clipboard.writeText(contents.join("\n"))
-}
+    navigator.clipboard.writeText(contents.join("\n"));
+};
 
 // Small component for the copy button
-function CopyButton({ diff, kind }: { diff: api.DiffOutput, kind: string }) {
+function CopyButton({ diff, kind }: { diff: api.DiffOutput; kind: string }) {
     return (
         <button
             className={styles.copyButton} // Add a new style for the button
@@ -47,181 +55,260 @@ function CopyButton({ diff, kind }: { diff: api.DiffOutput, kind: string }) {
         >
             <CopyIcon size={16} />
         </button>
-    )
+    );
 }
 
 // https://github.com/bvaughn/react-window#can-i-add-padding-to-the-top-and-bottom-of-a-list
-const innerElementType = forwardRef<HTMLUListElement, HTMLAttributes<HTMLUListElement>>(({ style, ...rest }, ref) => {
-    return <ul
-        ref={ref}
-        style={{
-            ...style,
-            height: `${Number.parseFloat(style.height.toString()) + PADDING_TOP + PADDING_BOTTOM}px`,
-        }}
-        {...rest}
-    />
-})
-innerElementType.displayName = "innerElementType"
-
-const isAsmDifferOutput = (diff: api.DiffOutput | DiffResult): diff is api.DiffOutput => {
-    return Object.prototype.hasOwnProperty.call(diff, "arch_str")
-}
+const innerElementType = forwardRef<
+    HTMLUListElement,
+    HTMLAttributes<HTMLUListElement>
+>(({ style, ...rest }, ref) => {
+    return (
+        <ul
+            ref={ref}
+            style={{
+                ...style,
+                height: `${Number.parseFloat(style.height.toString()) + PADDING_TOP + PADDING_BOTTOM}px`,
+            }}
+            {...rest}
+        />
+    );
+});
+innerElementType.displayName = "innerElementType";
+
+const isAsmDifferOutput = (
+    diff: api.DiffOutput | DiffResult,
+): diff is api.DiffOutput => {
+    return Object.prototype.hasOwnProperty.call(diff, "arch_str");
+};
 
-function DiffBody({ diff, diffLabel, fontSize }: { diff: api.DiffOutput | DiffResult | null, diffLabel: string | null, fontSize: number | undefined }) {
-    const { highlighters, setHighlightAll } = useHighlighers(3)
+function DiffBody({
+    diff,
+    diffLabel,
+    fontSize,
+}: {
+    diff: api.DiffOutput | DiffResult | null;
+    diffLabel: string | null;
+    fontSize: number | undefined;
+}) {
+    const { highlighters, setHighlightAll } = useHighlighers(3);
 
     if (!diff) {
-        return <div className={styles.bodyContainer} />
+        return <div className={styles.bodyContainer} />;
     }
 
-    let itemData: AsmDiffer.DiffListData | Objdiff.DiffListData
-    let DiffRow: typeof AsmDiffer.DiffRow | typeof Objdiff.DiffRow
+    let itemData: AsmDiffer.DiffListData | Objdiff.DiffListData;
+    let DiffRow: typeof AsmDiffer.DiffRow | typeof Objdiff.DiffRow;
     if (isAsmDifferOutput(diff)) {
-        itemData = AsmDiffer.createDiffListData(diff, diffLabel, highlighters)
-        DiffRow = AsmDiffer.DiffRow
+        itemData = AsmDiffer.createDiffListData(diff, diffLabel, highlighters);
+        DiffRow = AsmDiffer.DiffRow;
     } else {
-        itemData = Objdiff.createDiffListData(diff, diffLabel, highlighters)
-        DiffRow = Objdiff.DiffRow
+        itemData = Objdiff.createDiffListData(diff, diffLabel, highlighters);
+        DiffRow = Objdiff.DiffRow;
     }
 
-    return <div
-        className={styles.bodyContainer}
-        onClick={() => {
-            // If clicks propagate to the container, clear all
-            setHighlightAll(null)
-        }}
-    >
-        <AutoSizer>
-            {({ height, width }: {height: number|undefined, width:number|undefined}) => (
-                <FixedSizeList
-                    className={styles.body}
-                    itemCount={itemData.itemCount}
-                    itemData={itemData}
-                    itemSize={(fontSize ?? 12) * 1.33}
-                    overscanCount={40}
-                    width={width}
-                    height={height}
-                    innerElementType={innerElementType}
-                >
-                    {DiffRow as any}
-                </FixedSizeList>
-            )}
-        </AutoSizer>
-    </div>
+    return (
+        <div
+            className={styles.bodyContainer}
+            onClick={() => {
+                // If clicks propagate to the container, clear all
+                setHighlightAll(null);
+            }}
+        >
+            <AutoSizer>
+                {({
+                    height,
+                    width,
+                }: {
+                    height: number | undefined;
+                    width: number | undefined;
+                }) => (
+                    <FixedSizeList
+                        className={styles.body}
+                        itemCount={itemData.itemCount}
+                        itemData={itemData}
+                        itemSize={(fontSize ?? 12) * 1.33}
+                        overscanCount={40}
+                        width={width}
+                        height={height}
+                        innerElementType={innerElementType}
+                    >
+                        {DiffRow as any}
+                    </FixedSizeList>
+                )}
+            </AutoSizer>
+        </div>
+    );
 }
 
-function ThreeWayToggleButton({ enabled, setEnabled }: { enabled: boolean, setEnabled: (enabled: boolean) => void }) {
-    return <button
-        className={styles.threeWayToggle}
-        onClick={() => {
-            setEnabled(!enabled)
-        }}
-        title={enabled ? "Disable three-way diffing" : "Enable three-way diffing"}
-    >
-        <VersionsIcon size={24} />
-        <div className={styles.threeWayToggleNumber}>
-            {enabled ? "3" : "2"}
-        </div>
-    </button>
+function ThreeWayToggleButton({
+    enabled,
+    setEnabled,
+}: { enabled: boolean; setEnabled: (enabled: boolean) => void }) {
+    return (
+        <button
+            className={styles.threeWayToggle}
+            onClick={() => {
+                setEnabled(!enabled);
+            }}
+            title={
+                enabled
+                    ? "Disable three-way diffing"
+                    : "Enable three-way diffing"
+            }
+        >
+            <VersionsIcon size={24} />
+            <div className={styles.threeWayToggleNumber}>
+                {enabled ? "3" : "2"}
+            </div>
+        </button>
+    );
 }
 
-export function scrollToLineNumber(editorView: MutableRefObject<EditorView>, lineNumber: number) {
+export function scrollToLineNumber(
+    editorView: MutableRefObject<EditorView>,
+    lineNumber: number,
+) {
     if (!editorView) {
-        return
+        return;
     }
     if (lineNumber <= editorView.current.state.doc.lines) {
         // check if the source line <= number of lines
         // which can be false if pragmas are used to force line numbers
-        const line = editorView.current.state.doc.line(lineNumber)
+        const line = editorView.current.state.doc.line(lineNumber);
         if (line) {
-            const { top } = editorView.current.lineBlockAt(line.to)
-            editorView.current.scrollDOM.scrollTo({ top, behavior: "smooth" })
+            const { top } = editorView.current.lineBlockAt(line.to);
+            editorView.current.scrollDOM.scrollTo({ top, behavior: "smooth" });
         }
     }
 }
 
-export const PADDING_TOP = 8
-export const PADDING_BOTTOM = 8
+export const PADDING_TOP = 8;
+export const PADDING_BOTTOM = 8;
 
-export const SelectedSourceLineContext = createContext<number | null>(null)
+export const SelectedSourceLineContext = createContext<number | null>(null);
 
 export type Props = {
-    diff: api.DiffOutput | DiffResult | null
-    diffLabel: string | null
-    isCompiling: boolean
-    isCurrentOutdated: boolean
-    threeWayDiffEnabled: boolean
-    setThreeWayDiffEnabled: (value: boolean) => void
-    threeWayDiffBase: ThreeWayDiffBase
-    selectedSourceLine: number | null
-}
+    diff: api.DiffOutput | DiffResult | null;
+    diffLabel: string | null;
+    isCompiling: boolean;
+    isCurrentOutdated: boolean;
+    threeWayDiffEnabled: boolean;
+    setThreeWayDiffEnabled: (value: boolean) => void;
+    threeWayDiffBase: ThreeWayDiffBase;
+    selectedSourceLine: number | null;
+};
 
-export default function Diff({ diff, diffLabel, isCompiling, isCurrentOutdated, threeWayDiffEnabled, setThreeWayDiffEnabled, threeWayDiffBase, selectedSourceLine }: Props) {
-    const [fontSize] = useCodeFontSize()
+export default function Diff({
+    diff,
+    diffLabel,
+    isCompiling,
+    isCurrentOutdated,
+    threeWayDiffEnabled,
+    setThreeWayDiffEnabled,
+    threeWayDiffBase,
+    selectedSourceLine,
+}: Props) {
+    const [fontSize] = useCodeFontSize();
 
-    const container = useSize<HTMLDivElement>()
+    const container = useSize<HTMLDivElement>();
 
-    const [bar1Pos, setBar1Pos] = useState(Number.NaN)
-    const [bar2Pos, setBar2Pos] = useState(Number.NaN)
+    const [bar1Pos, setBar1Pos] = useState(Number.NaN);
+    const [bar2Pos, setBar2Pos] = useState(Number.NaN);
 
-    const columnMinWidth = 100
-    const clampedBar1Pos = Math.max(columnMinWidth, Math.min(container.width - columnMinWidth - (threeWayDiffEnabled ? columnMinWidth : 0), bar1Pos))
-    const clampedBar2Pos = threeWayDiffEnabled ? Math.max(clampedBar1Pos + columnMinWidth, Math.min(container.width - columnMinWidth, bar2Pos)) : container.width
+    const columnMinWidth = 100;
+    const clampedBar1Pos = Math.max(
+        columnMinWidth,
+        Math.min(
+            container.width -
+                columnMinWidth -
+                (threeWayDiffEnabled ? columnMinWidth : 0),
+            bar1Pos,
+        ),
+    );
+    const clampedBar2Pos = threeWayDiffEnabled
+        ? Math.max(
+              clampedBar1Pos + columnMinWidth,
+              Math.min(container.width - columnMinWidth, bar2Pos),
+          )
+        : container.width;
 
     // Distribute the bar positions across the container when its width changes
     const updateBarPositions = (threeWayDiffEnabled: boolean) => {
-        const numSections = threeWayDiffEnabled ? 3 : 2
-        setBar1Pos(container.width / numSections)
-        setBar2Pos(container.width / numSections * 2)
-    }
-    const lastContainerWidthRef = useRef(Number.NaN)
+        const numSections = threeWayDiffEnabled ? 3 : 2;
+        setBar1Pos(container.width / numSections);
+        setBar2Pos((container.width / numSections) * 2);
+    };
+    const lastContainerWidthRef = useRef(Number.NaN);
     if (lastContainerWidthRef.current !== container.width && container.width) {
-        lastContainerWidthRef.current = container.width
-        updateBarPositions(threeWayDiffEnabled)
+        lastContainerWidthRef.current = container.width;
+        updateBarPositions(threeWayDiffEnabled);
     }
 
-    const threeWayButton = <>
-        <div className={styles.spacer} />
-        <ThreeWayToggleButton
-            enabled={threeWayDiffEnabled}
-            setEnabled={(enabled: boolean) => {
-                updateBarPositions(enabled)
-                setThreeWayDiffEnabled(enabled)
-            }}
-        />
-    </>
-
-    return <div
-        ref={container.ref}
-        className={styles.diff}
-        style={{
-            "--diff-font-size": typeof fontSize === "number" ? `${fontSize}px` : "",
-            "--diff-left-width": `${clampedBar1Pos}px`,
-            "--diff-right-width": `${container.width - clampedBar2Pos}px`,
-            "--diff-current-filter": isCurrentOutdated ? "grayscale(25%) brightness(70%)" : "",
-        } as CSSProperties}
-    >
-        <DragBar pos={clampedBar1Pos} onChange={setBar1Pos} />
-        {threeWayDiffEnabled && <DragBar pos={clampedBar2Pos} onChange={setBar2Pos} />}
-        <div className={styles.headers}>
-            <div className={styles.header}>
-                Target
-                <CopyButton diff={diff as api.DiffOutput} kind="base" />
-            </div>
-            <div className={styles.header}>
-                Current
-                <CopyButton diff={diff as api.DiffOutput} kind="current" />
-                {isCompiling && <Loading width={20} height={20} />}
-                {!threeWayDiffEnabled && threeWayButton}
+    const threeWayButton = (
+        <>
+            <div className={styles.spacer} />
+            <ThreeWayToggleButton
+                enabled={threeWayDiffEnabled}
+                setEnabled={(enabled: boolean) => {
+                    updateBarPositions(enabled);
+                    setThreeWayDiffEnabled(enabled);
+                }}
+            />
+        </>
+    );
+
+    return (
+        <div
+            ref={container.ref}
+            className={styles.diff}
+            style={
+                {
+                    "--diff-font-size":
+                        typeof fontSize === "number" ? `${fontSize}px` : "",
+                    "--diff-left-width": `${clampedBar1Pos}px`,
+                    "--diff-right-width": `${container.width - clampedBar2Pos}px`,
+                    "--diff-current-filter": isCurrentOutdated
+                        ? "grayscale(25%) brightness(70%)"
+                        : "",
+                } as CSSProperties
+            }
+        >
+            <DragBar pos={clampedBar1Pos} onChange={setBar1Pos} />
+            {threeWayDiffEnabled && (
+                <DragBar pos={clampedBar2Pos} onChange={setBar2Pos} />
+            )}
+            <div className={styles.headers}>
+                <div className={styles.header}>
+                    Target
+                    <CopyButton diff={diff as api.DiffOutput} kind="base" />
+                </div>
+                <div className={styles.header}>
+                    Current
+                    <CopyButton diff={diff as api.DiffOutput} kind="current" />
+                    {isCompiling && <Loading width={20} height={20} />}
+                    {!threeWayDiffEnabled && threeWayButton}
+                </div>
+                {threeWayDiffEnabled && (
+                    <div className={styles.header}>
+                        {threeWayDiffBase === ThreeWayDiffBase.SAVED
+                            ? "Saved"
+                            : "Previous"}
+                        <CopyButton
+                            diff={diff as api.DiffOutput}
+                            kind="previous"
+                        />
+                        {threeWayButton}
+                    </div>
+                )}
             </div>
-            {threeWayDiffEnabled && <div className={styles.header}>
-                {threeWayDiffBase === ThreeWayDiffBase.SAVED ? "Saved" : "Previous"}
-                <CopyButton diff={diff as api.DiffOutput} kind="previous" />
-                {threeWayButton}
-            </div>}
+            <SelectedSourceLineContext.Provider value={selectedSourceLine}>
+                <DiffBody
+                    diff={diff}
+                    diffLabel={diffLabel}
+                    fontSize={fontSize}
+                />
+            </SelectedSourceLineContext.Provider>
         </div>
-        <SelectedSourceLineContext.Provider value={selectedSourceLine}>
-            <DiffBody diff={diff} diffLabel={diffLabel} fontSize={fontSize} />
-        </SelectedSourceLineContext.Provider>
-    </div>
+    );
 }
diff --git a/frontend/src/components/Diff/DiffRowAsmDiffer.tsx b/frontend/src/components/Diff/DiffRowAsmDiffer.tsx
index d6046e1f3..238eb1cf1 100644
--- a/frontend/src/components/Diff/DiffRowAsmDiffer.tsx
+++ b/frontend/src/components/Diff/DiffRowAsmDiffer.tsx
@@ -1,111 +1,154 @@
 /* eslint css-modules/no-unused-class: off */
 
-import { type CSSProperties, type MutableRefObject, memo, useContext } from "react"
+import {
+    type CSSProperties,
+    type MutableRefObject,
+    memo,
+    useContext,
+} from "react";
 
-import classNames from "classnames"
-import type { EditorView } from "codemirror"
-import memoize from "memoize-one"
-import { areEqual } from "react-window"
+import classNames from "classnames";
+import type { EditorView } from "codemirror";
+import memoize from "memoize-one";
+import { areEqual } from "react-window";
 
-import type * as api from "@/lib/api"
+import type * as api from "@/lib/api";
 
-import { ScrollContext } from "../ScrollContext"
+import { ScrollContext } from "../ScrollContext";
 
-import { PADDING_TOP, SelectedSourceLineContext, scrollToLineNumber } from "./Diff"
-import styles from "./Diff.module.scss"
-import type { Highlighter } from "./Highlighter"
+import {
+    PADDING_TOP,
+    SelectedSourceLineContext,
+    scrollToLineNumber,
+} from "./Diff";
+import styles from "./Diff.module.scss";
+import type { Highlighter } from "./Highlighter";
 
 // Regex for tokenizing lines for click-to-highlight purposes.
 // Strings matched by the first regex group (spaces, punctuation)
 // are treated as non-highlightable.
-const RE_TOKEN = /([ \t,()[\]:]+|~>)|%(?:lo|hi)\([^)]+\)|[^ \t,()[\]:]+/g
+const RE_TOKEN = /([ \t,()[\]:]+|~>)|%(?:lo|hi)\([^)]+\)|[^ \t,()[\]:]+/g;
 
-function FormatDiffText({ texts, highlighter }: {
-    texts: api.DiffText[]
-    highlighter: Highlighter
+function FormatDiffText({
+    texts,
+    highlighter,
+}: {
+    texts: api.DiffText[];
+    highlighter: Highlighter;
 }) {
-    return <> {
-        texts.map((t, index1) =>
-            Array.from(t.text.matchAll(RE_TOKEN)).map((match, index2) => {
-                const text = match[0]
-                const isToken = !match[1]
-                const key = `${index1},${index2}`
+    return (
+        <>
+            {" "}
+            {texts.map((t, index1) =>
+                Array.from(t.text.matchAll(RE_TOKEN)).map((match, index2) => {
+                    const text = match[0];
+                    const isToken = !match[1];
+                    const key = `${index1},${index2}`;
 
-                let className: string
-                if (t.format === "rotation") {
-                    className = styles[`rotation${t.index % 9}`]
-                } else if (t.format) {
-                    className = styles[t.format]
-                }
+                    let className: string;
+                    if (t.format === "rotation") {
+                        className = styles[`rotation${t.index % 9}`];
+                    } else if (t.format) {
+                        className = styles[t.format];
+                    }
 
-                return <span
-                    key={key}
-                    className={classNames(className, {
-                        [styles.highlightable]: isToken,
-                        [styles.highlighted]: (highlighter.value === text),
-                    })}
-                    onClick={e => {
-                        if (isToken) {
-                            highlighter.select(text)
-                            e.stopPropagation()
-                        }
-                    }}
-                >
-                    {text}
-                </span>
-            })
-        )
-    }</>
+                    return (
+                        <span
+                            key={key}
+                            className={classNames(className, {
+                                [styles.highlightable]: isToken,
+                                [styles.highlighted]:
+                                    highlighter.value === text,
+                            })}
+                            onClick={(e) => {
+                                if (isToken) {
+                                    highlighter.select(text);
+                                    e.stopPropagation();
+                                }
+                            }}
+                        >
+                            {text}
+                        </span>
+                    );
+                }),
+            )}
+        </>
+    );
 }
 
-function DiffCell({ cell, className, highlighter }: {
-    cell: api.DiffCell | undefined
-    className?: string
-    highlighter: Highlighter
+function DiffCell({
+    cell,
+    className,
+    highlighter,
+}: {
+    cell: api.DiffCell | undefined;
+    className?: string;
+    highlighter: Highlighter;
 }) {
-    const selectedSourceLine = useContext(SelectedSourceLineContext)
-    const sourceEditor = useContext<MutableRefObject<EditorView>>(ScrollContext)
-    const hasLineNo = typeof cell?.src_line !== "undefined"
+    const selectedSourceLine = useContext(SelectedSourceLineContext);
+    const sourceEditor =
+        useContext<MutableRefObject<EditorView>>(ScrollContext);
+    const hasLineNo = typeof cell?.src_line !== "undefined";
 
-    if (!cell)
-        return <div className={classNames(styles.cell, className)} />
+    if (!cell) return <div className={classNames(styles.cell, className)} />;
 
-    return <div
-        className={classNames(styles.cell, className, {
-            [styles.highlight]: hasLineNo && cell.src_line === selectedSourceLine,
-        })}
-    >
-        {hasLineNo && <span className={styles.lineNumber}><button onClick={() => scrollToLineNumber(sourceEditor, cell.src_line)}>{cell.src_line}</button></span>}
-        <FormatDiffText texts={cell.text} highlighter={highlighter} />
-    </div>
+    return (
+        <div
+            className={classNames(styles.cell, className, {
+                [styles.highlight]:
+                    hasLineNo && cell.src_line === selectedSourceLine,
+            })}
+        >
+            {hasLineNo && (
+                <span className={styles.lineNumber}>
+                    <button
+                        onClick={() =>
+                            scrollToLineNumber(sourceEditor, cell.src_line)
+                        }
+                    >
+                        {cell.src_line}
+                    </button>
+                </span>
+            )}
+            <FormatDiffText texts={cell.text} highlighter={highlighter} />
+        </div>
+    );
 }
 
 export type DiffListData = {
-    diff: api.DiffOutput | null
-    itemCount: number
-    highlighters: Highlighter[]
-}
+    diff: api.DiffOutput | null;
+    itemCount: number;
+    highlighters: Highlighter[];
+};
 
-export const createDiffListData = memoize((
-    diff: api.DiffOutput | null,
-    _diffLabel: string,
-    highlighters: Highlighter[]
-): DiffListData => {
-    return { diff, highlighters, itemCount: diff?.rows?.length ?? 0 }
-})
+export const createDiffListData = memoize(
+    (
+        diff: api.DiffOutput | null,
+        _diffLabel: string,
+        highlighters: Highlighter[],
+    ): DiffListData => {
+        return { diff, highlighters, itemCount: diff?.rows?.length ?? 0 };
+    },
+);
 
-export const DiffRow = memo(function DiffRow({ data, index, style }: { data: DiffListData, index: number, style: CSSProperties }) {
-    const row = data.diff?.rows?.[index]
-    return <li
-        className={styles.row}
-        style={{
-            ...style,
-            top: `${Number.parseFloat(style.top.toString()) + PADDING_TOP}px`,
-            lineHeight: `${style.height.toString()}px`,
-        }}
-    >
-        <DiffCell cell={row.base} highlighter={data.highlighters[0]} />
-        <DiffCell cell={row.current} highlighter={data.highlighters[1]} />
-        <DiffCell cell={row.previous} highlighter={data.highlighters[2]} />
-    </li>
-}, areEqual)
+export const DiffRow = memo(function DiffRow({
+    data,
+    index,
+    style,
+}: { data: DiffListData; index: number; style: CSSProperties }) {
+    const row = data.diff?.rows?.[index];
+    return (
+        <li
+            className={styles.row}
+            style={{
+                ...style,
+                top: `${Number.parseFloat(style.top.toString()) + PADDING_TOP}px`,
+                lineHeight: `${style.height.toString()}px`,
+            }}
+        >
+            <DiffCell cell={row.base} highlighter={data.highlighters[0]} />
+            <DiffCell cell={row.current} highlighter={data.highlighters[1]} />
+            <DiffCell cell={row.previous} highlighter={data.highlighters[2]} />
+        </li>
+    );
+}, areEqual);
diff --git a/frontend/src/components/Diff/DiffRowObjdiff.tsx b/frontend/src/components/Diff/DiffRowObjdiff.tsx
index 318a29163..ebc9639c1 100644
--- a/frontend/src/components/Diff/DiffRowObjdiff.tsx
+++ b/frontend/src/components/Diff/DiffRowObjdiff.tsx
@@ -1,209 +1,282 @@
 /* eslint css-modules/no-unused-class: off */
 
-import { type CSSProperties, type MutableRefObject, memo, useContext } from "react"
+import {
+    type CSSProperties,
+    type MutableRefObject,
+    memo,
+    useContext,
+} from "react";
 
-import classNames from "classnames"
-import type { EditorView } from "codemirror"
-import memoize from "memoize-one"
-import { DiffKind, type DiffResult, type FunctionDiff, type InstructionDiff, type ObjectDiff, displayDiff, oneof } from "objdiff-wasm"
-import { areEqual } from "react-window"
+import classNames from "classnames";
+import type { EditorView } from "codemirror";
+import memoize from "memoize-one";
+import {
+    DiffKind,
+    type DiffResult,
+    type FunctionDiff,
+    type InstructionDiff,
+    type ObjectDiff,
+    displayDiff,
+    oneof,
+} from "objdiff-wasm";
+import { areEqual } from "react-window";
 
-import { ScrollContext } from "../ScrollContext"
+import { ScrollContext } from "../ScrollContext";
 
-import { PADDING_TOP, SelectedSourceLineContext, scrollToLineNumber } from "./Diff"
-import styles from "./Diff.module.scss"
-import type { Highlighter } from "./Highlighter"
+import {
+    PADDING_TOP,
+    SelectedSourceLineContext,
+    scrollToLineNumber,
+} from "./Diff";
+import styles from "./Diff.module.scss";
+import type { Highlighter } from "./Highlighter";
 
-function FormatDiffText({ insDiff, baseAddress, highlighter }: {
-    insDiff: InstructionDiff
-    baseAddress?: bigint
-    highlighter?: Highlighter
+function FormatDiffText({
+    insDiff,
+    baseAddress,
+    highlighter,
+}: {
+    insDiff: InstructionDiff;
+    baseAddress?: bigint;
+    highlighter?: Highlighter;
 }) {
-    const out: JSX.Element[] = []
-    let index = 0
-    displayDiff(insDiff, baseAddress || BigInt(0), t => {
-        let className: string | null = null
+    const out: JSX.Element[] = [];
+    let index = 0;
+    displayDiff(insDiff, baseAddress || BigInt(0), (t) => {
+        let className: string | null = null;
         if (t.diff_index != null) {
-            className = styles[`rotation${t.diff_index % 9}`]
+            className = styles[`rotation${t.diff_index % 9}`];
         }
-        let text = ""
-        let postText = "" // unhighlightable text after the token
-        let padTo = 0
-        let isToken = false
+        let text = "";
+        let postText = ""; // unhighlightable text after the token
+        let padTo = 0;
+        let isToken = false;
         switch (t.type) {
-        case "basic":
-            text = t.text
-            break
-        case "basic_color":
-            text = t.text
-            className = styles[`rotation${t.index % 9}`]
-            break
-        case "line":
-            text = (t.line_number || 0).toString(16)
-            padTo = 5
-            break
-        case "address":
-            text = (t.address || 0).toString(16)
-            postText = ":"
-            padTo = 5
-            isToken = true
-            break
-        case "opcode":
-            text = t.mnemonic
-            padTo = 8
-            isToken = true
-            if (insDiff.diff_kind === DiffKind.DIFF_OP_MISMATCH) {
-                className = styles.diff_change
-            }
-            break
-        case "argument": {
-            const value = oneof(t.value.value)
-            switch (value.oneofKind) {
-            case "signed":
-                if (value.signed < 0) {
-                    text = `-0x${(-value.signed).toString(16)}`
-                } else {
-                    text = `0x${value.signed.toString(16)}`
+            case "basic":
+                text = t.text;
+                break;
+            case "basic_color":
+                text = t.text;
+                className = styles[`rotation${t.index % 9}`];
+                break;
+            case "line":
+                text = (t.line_number || 0).toString(16);
+                padTo = 5;
+                break;
+            case "address":
+                text = (t.address || 0).toString(16);
+                postText = ":";
+                padTo = 5;
+                isToken = true;
+                break;
+            case "opcode":
+                text = t.mnemonic;
+                padTo = 8;
+                isToken = true;
+                if (insDiff.diff_kind === DiffKind.DIFF_OP_MISMATCH) {
+                    className = styles.diff_change;
+                }
+                break;
+            case "argument": {
+                const value = oneof(t.value.value);
+                switch (value.oneofKind) {
+                    case "signed":
+                        if (value.signed < 0) {
+                            text = `-0x${(-value.signed).toString(16)}`;
+                        } else {
+                            text = `0x${value.signed.toString(16)}`;
+                        }
+                        break;
+                    case "unsigned":
+                        text = `0x${value.unsigned.toString(16)}`;
+                        break;
+                    case "opaque":
+                        text = value.opaque;
+                        break;
                 }
-                break
-            case "unsigned":
-                text = `0x${value.unsigned.toString(16)}`
-                break
-            case "opaque":
-                text = value.opaque
-                break
+                isToken = true;
+                break;
             }
-            isToken = true
-            break
-        }
-        case "branch_dest":
-            text = (t.address || 0).toString(16)
-            isToken = true
-            break
-        case "symbol":
-            text = t.target.symbol.demangled_name || t.target.symbol.name
-            className = styles.symbol
-            isToken = true
-            break
-        case "spacing":
-            text = " ".repeat(t.count)
-            break
-        default:
-            console.warn("Unknown text type", t)
-            return null
+            case "branch_dest":
+                text = (t.address || 0).toString(16);
+                isToken = true;
+                break;
+            case "symbol":
+                text = t.target.symbol.demangled_name || t.target.symbol.name;
+                className = styles.symbol;
+                isToken = true;
+                break;
+            case "spacing":
+                text = " ".repeat(t.count);
+                break;
+            default:
+                console.warn("Unknown text type", t);
+                return null;
         }
-        out.push(<span
-            key={index}
-            className={classNames(className, {
-                [styles.highlightable]: isToken,
-                [styles.highlighted]: (highlighter?.value === text),
-            })}
-            onClick={e => {
-                if (isToken) {
-                    highlighter?.select(text)
-                    e.stopPropagation()
-                }
-            }}
-        >{text}</span>)
-        index++
+        out.push(
+            <span
+                key={index}
+                className={classNames(className, {
+                    [styles.highlightable]: isToken,
+                    [styles.highlighted]: highlighter?.value === text,
+                })}
+                onClick={(e) => {
+                    if (isToken) {
+                        highlighter?.select(text);
+                        e.stopPropagation();
+                    }
+                }}
+            >
+                {text}
+            </span>,
+        );
+        index++;
         if (postText) {
-            out.push(<span key={index}>{postText}</span>)
-            index++
+            out.push(<span key={index}>{postText}</span>);
+            index++;
         }
         if (padTo > text.length + postText.length) {
-            const spacing = " ".repeat(padTo - text.length - postText.length)
-            out.push(<span key={index}>{spacing}</span>)
-            index++
+            const spacing = " ".repeat(padTo - text.length - postText.length);
+            out.push(<span key={index}>{spacing}</span>);
+            index++;
         }
-    })
-    return out
+    });
+    return out;
 }
 
-function DiffCell({ cell, baseAddress, className, highlighter }: {
-    cell: InstructionDiff | undefined
-    baseAddress: bigint | undefined
-    className?: string
-    highlighter?: Highlighter
+function DiffCell({
+    cell,
+    baseAddress,
+    className,
+    highlighter,
+}: {
+    cell: InstructionDiff | undefined;
+    baseAddress: bigint | undefined;
+    className?: string;
+    highlighter?: Highlighter;
 }) {
-    const selectedSourceLine = useContext(SelectedSourceLineContext)
-    const sourceEditor = useContext<MutableRefObject<EditorView>>(ScrollContext)
-    const hasLineNo = typeof cell?.instruction?.line_number !== "undefined"
+    const selectedSourceLine = useContext(SelectedSourceLineContext);
+    const sourceEditor =
+        useContext<MutableRefObject<EditorView>>(ScrollContext);
+    const hasLineNo = typeof cell?.instruction?.line_number !== "undefined";
 
-    if (!cell)
-        return <div className={classNames(styles.cell, className)} />
+    if (!cell) return <div className={classNames(styles.cell, className)} />;
 
-    const classes = []
+    const classes = [];
     if (cell?.diff_kind) {
-        classes.push(styles.diff_any)
+        classes.push(styles.diff_any);
     }
     switch (cell?.diff_kind) {
-    case DiffKind.DIFF_DELETE:
-        classes.push(styles.diff_remove)
-        break
-    case DiffKind.DIFF_INSERT:
-        classes.push(styles.diff_add)
-        break
-    case DiffKind.DIFF_REPLACE:
-        classes.push(styles.diff_change)
-        break
+        case DiffKind.DIFF_DELETE:
+            classes.push(styles.diff_remove);
+            break;
+        case DiffKind.DIFF_INSERT:
+            classes.push(styles.diff_add);
+            break;
+        case DiffKind.DIFF_REPLACE:
+            classes.push(styles.diff_change);
+            break;
     }
 
-    return <div
-        className={classNames(styles.cell, classes, {
-            [styles.highlight]: hasLineNo && cell.instruction.line_number === selectedSourceLine,
-        })}
-    >
-        {hasLineNo && <span className={styles.lineNumber}><button onClick={() => scrollToLineNumber(sourceEditor, cell.instruction.line_number)}>{cell.instruction.line_number}</button></span>}
-        <FormatDiffText insDiff={cell} baseAddress={baseAddress} highlighter={highlighter} />
-    </div>
+    return (
+        <div
+            className={classNames(styles.cell, classes, {
+                [styles.highlight]:
+                    hasLineNo &&
+                    cell.instruction.line_number === selectedSourceLine,
+            })}
+        >
+            {hasLineNo && (
+                <span className={styles.lineNumber}>
+                    <button
+                        onClick={() =>
+                            scrollToLineNumber(
+                                sourceEditor,
+                                cell.instruction.line_number,
+                            )
+                        }
+                    >
+                        {cell.instruction.line_number}
+                    </button>
+                </span>
+            )}
+            <FormatDiffText
+                insDiff={cell}
+                baseAddress={baseAddress}
+                highlighter={highlighter}
+            />
+        </div>
+    );
 }
 
-function findSymbol(object: ObjectDiff | null, symbol_name: string): FunctionDiff | null {
+function findSymbol(
+    object: ObjectDiff | null,
+    symbol_name: string,
+): FunctionDiff | null {
     if (!object) {
-        return null
+        return null;
     }
     for (const section of object.sections) {
         for (const symbol_diff of section.functions) {
             if (symbol_diff.symbol.name === symbol_name) {
-                return symbol_diff
+                return symbol_diff;
             }
         }
     }
-    return null
+    return null;
 }
 
-export const DiffRow = memo(function DiffRow({ data, index, style }: { data: DiffListData, index: number, style: CSSProperties }) {
-    const leftIns = data.left?.instructions?.[index]
-    const leftSymbol = data.left?.symbol
-    const rightIns = data.right?.instructions?.[index]
-    const rightSymbol = data.right?.symbol
-    return <li
-        className={styles.row}
-        style={{
-            ...style,
-            top: `${Number.parseFloat(style.top.toString()) + PADDING_TOP}px`,
-            lineHeight: `${style.height.toString()}px`,
-        }}
-    >
-        <DiffCell cell={leftIns} baseAddress={leftSymbol?.address} highlighter={data.highlighters[0]} />
-        <DiffCell cell={rightIns} baseAddress={rightSymbol?.address} highlighter={data.highlighters[1]} />
-    </li>
-}, areEqual)
+export const DiffRow = memo(function DiffRow({
+    data,
+    index,
+    style,
+}: { data: DiffListData; index: number; style: CSSProperties }) {
+    const leftIns = data.left?.instructions?.[index];
+    const leftSymbol = data.left?.symbol;
+    const rightIns = data.right?.instructions?.[index];
+    const rightSymbol = data.right?.symbol;
+    return (
+        <li
+            className={styles.row}
+            style={{
+                ...style,
+                top: `${Number.parseFloat(style.top.toString()) + PADDING_TOP}px`,
+                lineHeight: `${style.height.toString()}px`,
+            }}
+        >
+            <DiffCell
+                cell={leftIns}
+                baseAddress={leftSymbol?.address}
+                highlighter={data.highlighters[0]}
+            />
+            <DiffCell
+                cell={rightIns}
+                baseAddress={rightSymbol?.address}
+                highlighter={data.highlighters[1]}
+            />
+        </li>
+    );
+}, areEqual);
 
 export type DiffListData = {
-    left: FunctionDiff | undefined
-    right: FunctionDiff | undefined
-    itemCount: number
-    highlighters: Highlighter[]
-}
+    left: FunctionDiff | undefined;
+    right: FunctionDiff | undefined;
+    itemCount: number;
+    highlighters: Highlighter[];
+};
 
-export const createDiffListData = memoize((
-    diff: DiffResult | null,
-    diffLabel: string,
-    highlighters: Highlighter[]
-): DiffListData => {
-    const left = findSymbol(diff?.left, diffLabel)
-    const right = findSymbol(diff?.right, diffLabel)
-    const itemCount = Math.min(left?.instructions.length ?? 0, right?.instructions.length ?? 0)
-    return { left, right, itemCount, highlighters }
-})
+export const createDiffListData = memoize(
+    (
+        diff: DiffResult | null,
+        diffLabel: string,
+        highlighters: Highlighter[],
+    ): DiffListData => {
+        const left = findSymbol(diff?.left, diffLabel);
+        const right = findSymbol(diff?.right, diffLabel);
+        const itemCount = Math.min(
+            left?.instructions.length ?? 0,
+            right?.instructions.length ?? 0,
+        );
+        return { left, right, itemCount, highlighters };
+    },
+);
diff --git a/frontend/src/components/Diff/DragBar.tsx b/frontend/src/components/Diff/DragBar.tsx
index 6877538a6..f0dc4e604 100644
--- a/frontend/src/components/Diff/DragBar.tsx
+++ b/frontend/src/components/Diff/DragBar.tsx
@@ -1,57 +1,59 @@
-import { useEffect, useRef, useState } from "react"
+import { useEffect, useRef, useState } from "react";
 
-import styles from "./DragBar.module.scss"
+import styles from "./DragBar.module.scss";
 
 export interface Props {
-    pos: number
-    onChange: (pos: number) => void
+    pos: number;
+    onChange: (pos: number) => void;
 }
 
 export default function DragBar({ pos, onChange }: Props) {
-    const [isActive, setIsActive] = useState(false)
-    const ref = useRef<HTMLDivElement>()
+    const [isActive, setIsActive] = useState(false);
+    const ref = useRef<HTMLDivElement>();
 
     useEffect(() => {
         const onMouseMove = (evt: MouseEvent) => {
             if (isActive) {
-                const parent = ref.current.parentElement
+                const parent = ref.current.parentElement;
                 if (parent)
-                    onChange(evt.clientX - parent.getBoundingClientRect().x)
+                    onChange(evt.clientX - parent.getBoundingClientRect().x);
             }
-        }
+        };
 
         const onTouchMove = (evt: TouchEvent) => {
             if (isActive) {
-                const parent = ref.current.parentElement
+                const parent = ref.current.parentElement;
                 if (parent) {
-                    const touch = evt.touches[0]
-                    onChange(touch.clientX - parent.getBoundingClientRect().x)
+                    const touch = evt.touches[0];
+                    onChange(touch.clientX - parent.getBoundingClientRect().x);
                 }
             }
-        }
+        };
 
         const onMouseUp = () => {
-            setIsActive(false)
-        }
+            setIsActive(false);
+        };
 
-        document.addEventListener("mousemove", onMouseMove)
-        document.addEventListener("mouseup", onMouseUp)
-        document.addEventListener("touchmove", onTouchMove)
-        document.addEventListener("touchend", onMouseUp)
+        document.addEventListener("mousemove", onMouseMove);
+        document.addEventListener("mouseup", onMouseUp);
+        document.addEventListener("touchmove", onTouchMove);
+        document.addEventListener("touchend", onMouseUp);
 
         return () => {
-            document.removeEventListener("mousemove", onMouseMove)
-            document.removeEventListener("mouseup", onMouseUp)
-            document.removeEventListener("touchmove", onTouchMove)
-            document.removeEventListener("touchend", onMouseUp)
-        }
-    })
-
-    return <div
-        ref={ref}
-        className={`${styles.vertical} ${isActive && styles.active}`}
-        style={{ left: `${pos}px` }}
-        onMouseDown={() => setIsActive(true)}
-        onTouchMove={() => setIsActive(true)}
-    />
+            document.removeEventListener("mousemove", onMouseMove);
+            document.removeEventListener("mouseup", onMouseUp);
+            document.removeEventListener("touchmove", onTouchMove);
+            document.removeEventListener("touchend", onMouseUp);
+        };
+    });
+
+    return (
+        <div
+            ref={ref}
+            className={`${styles.vertical} ${isActive && styles.active}`}
+            style={{ left: `${pos}px` }}
+            onMouseDown={() => setIsActive(true)}
+            onTouchMove={() => setIsActive(true)}
+        />
+    );
 }
diff --git a/frontend/src/components/Diff/Highlighter.tsx b/frontend/src/components/Diff/Highlighter.tsx
index 47ae5c14e..eaba7c3e0 100644
--- a/frontend/src/components/Diff/Highlighter.tsx
+++ b/frontend/src/components/Diff/Highlighter.tsx
@@ -1,34 +1,34 @@
-import { useState, useMemo } from "react"
+import { useState, useMemo } from "react";
 
 export type Highlighter = {
-    value: string | null
-    setValue: (value: string | null) => void
-    select: (value: string) => void
-}
+    value: string | null;
+    setValue: (value: string | null) => void;
+    select: (value: string) => void;
+};
 
 export type HighlighterContextData = {
-    highlighters: Highlighter[]
-    setHighlightAll: Highlighter["setValue"]
-}
+    highlighters: Highlighter[];
+    setHighlightAll: Highlighter["setValue"];
+};
 
 export function useHighlighers(count: number): HighlighterContextData {
-    const [values, setValues] = useState<string[]>(Array(count).fill(null))
+    const [values, setValues] = useState<string[]>(Array(count).fill(null));
     if (values.length !== count) {
-        throw new Error("Count changed")
+        throw new Error("Count changed");
     }
     return useMemo(() => {
-        const highlighters: Highlighter[] = []
+        const highlighters: Highlighter[] = [];
         const setHighlightAll = (value: string | null) => {
-            setValues(Array(count).fill(value))
-        }
+            setValues(Array(count).fill(value));
+        };
         for (let i = 0; i < count; i++) {
             const setValue = (newValue: string | null) => {
-                setValues(values => {
-                    const newValues = [...values]
-                    newValues[i] = newValue
-                    return newValues
-                })
-            }
+                setValues((values) => {
+                    const newValues = [...values];
+                    newValues[i] = newValue;
+                    return newValues;
+                });
+            };
             highlighters.push({
                 value: values[i],
                 setValue: setValue,
@@ -36,13 +36,13 @@ export function useHighlighers(count: number): HighlighterContextData {
                     // When selecting the same value twice (double-clicking), select it
                     // in all diff columns
                     if (values[i] === newValue) {
-                        setHighlightAll(newValue)
+                        setHighlightAll(newValue);
                     } else {
-                        setValue(newValue)
+                        setValue(newValue);
                     }
                 },
-            })
+            });
         }
-        return { highlighters, setHighlightAll }
-    }, [count, values])
+        return { highlighters, setHighlightAll };
+    }, [count, values]);
 }
diff --git a/frontend/src/components/DismissableBanner.tsx b/frontend/src/components/DismissableBanner.tsx
index a9205f871..fadfc0d40 100644
--- a/frontend/src/components/DismissableBanner.tsx
+++ b/frontend/src/components/DismissableBanner.tsx
@@ -1,22 +1,28 @@
-import { type ReactNode, useState } from "react"
+import { type ReactNode, useState } from "react";
 
-import { XIcon } from "@primer/octicons-react"
-import classNames from "classnames"
+import { XIcon } from "@primer/octicons-react";
+import classNames from "classnames";
 
-import styles from "./DismissableBanner.module.scss"
+import styles from "./DismissableBanner.module.scss";
 
-export default function DismissableBanner({ className, children }: { className?: string, children?: ReactNode }) {
-    const [isOpen, setIsOpen] = useState(true)
+export default function DismissableBanner({
+    className,
+    children,
+}: { className?: string; children?: ReactNode }) {
+    const [isOpen, setIsOpen] = useState(true);
 
-    if (!isOpen)
-        return null
+    if (!isOpen) return null;
 
-    return <div className={classNames(styles.container, className)}>
-        <div className={styles.content}>
-            {children}
+    return (
+        <div className={classNames(styles.container, className)}>
+            <div className={styles.content}>{children}</div>
+            <button
+                title="Dismiss"
+                className={styles.dismiss}
+                onClick={() => setIsOpen(false)}
+            >
+                <XIcon />
+            </button>
         </div>
-        <button title="Dismiss" className={styles.dismiss} onClick={() => setIsOpen(false)}>
-            <XIcon />
-        </button>
-    </div>
+    );
 }
diff --git a/frontend/src/components/Editor/CodeMirror.tsx b/frontend/src/components/Editor/CodeMirror.tsx
index 61936acac..74392a687 100644
--- a/frontend/src/components/Editor/CodeMirror.tsx
+++ b/frontend/src/components/Editor/CodeMirror.tsx
@@ -1,45 +1,54 @@
-import { type CSSProperties, type MutableRefObject, useCallback, useEffect, useRef } from "react"
+import {
+    type CSSProperties,
+    type MutableRefObject,
+    useCallback,
+    useEffect,
+    useRef,
+} from "react";
 
-import { type Extension, EditorState } from "@codemirror/state"
-import { EditorView } from "@codemirror/view"
-import classNames from "classnames"
-import { useDebouncedCallback } from "use-debounce"
+import { type Extension, EditorState } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import classNames from "classnames";
+import { useDebouncedCallback } from "use-debounce";
 
-import { useSize } from "@/lib/hooks"
-import { useCodeFontSize } from "@/lib/settings"
+import { useSize } from "@/lib/hooks";
+import { useCodeFontSize } from "@/lib/settings";
 
-import styles from "./CodeMirror.module.scss"
+import styles from "./CodeMirror.module.scss";
 
 // useDebouncedCallback is a bit dodgy when both leading and trailing are true, so here's a reimplementation
-function useLeadingTrailingDebounceCallback(callback: () => void, delay: number) {
-    const timeout = useRef<any>()
+function useLeadingTrailingDebounceCallback(
+    callback: () => void,
+    delay: number,
+) {
+    const timeout = useRef<any>();
 
     return useCallback(() => {
         if (timeout.current) {
-            clearTimeout(timeout.current)
+            clearTimeout(timeout.current);
         } else {
             // Leading
-            callback()
+            callback();
         }
 
         timeout.current = setTimeout(() => {
-            timeout.current = undefined
+            timeout.current = undefined;
 
             // Trailing
-            callback()
-        }, delay)
-    }, []) // eslint-disable-line react-hooks/exhaustive-deps
+            callback();
+        }, delay);
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
 }
 
 export interface Props {
-    value: string
-    valueVersion: number
-    onChange?: (value: string) => void
-    onHoveredLineChange?: (value: number | null) => void
-    onSelectedLineChange?: (value: number) => void
-    className?: string
-    viewRef?: MutableRefObject<EditorView | null>
-    extensions: Extension // const
+    value: string;
+    valueVersion: number;
+    onChange?: (value: string) => void;
+    onHoveredLineChange?: (value: number | null) => void;
+    onSelectedLineChange?: (value: number) => void;
+    className?: string;
+    viewRef?: MutableRefObject<EditorView | null>;
+    extensions: Extension; // const
 }
 
 export default function CodeMirror({
@@ -52,34 +61,34 @@ export default function CodeMirror({
     viewRef: viewRefProp,
     extensions,
 }: Props) {
-    const { ref: el, width } = useSize<HTMLDivElement>()
+    const { ref: el, width } = useSize<HTMLDivElement>();
 
-    const valueRef = useRef(value)
-    valueRef.current = value
+    const valueRef = useRef(value);
+    valueRef.current = value;
 
-    const onChangeRef = useRef(onChange)
-    onChangeRef.current = onChange
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
 
-    const viewRef = useRef<EditorView>()
+    const viewRef = useRef<EditorView>();
 
-    const extensionsRef = useRef(extensions)
-    extensionsRef.current = extensions
+    const extensionsRef = useRef(extensions);
+    extensionsRef.current = extensions;
 
-    const selectedLineRef = useRef<number>()
-    const hoveredLineRef = useRef<number>()
+    const selectedLineRef = useRef<number>();
+    const hoveredLineRef = useRef<number>();
 
-    const onHoveredLineChangeRef = useRef(onHoveredLineChange)
-    onHoveredLineChangeRef.current = onHoveredLineChange
+    const onHoveredLineChangeRef = useRef(onHoveredLineChange);
+    onHoveredLineChangeRef.current = onHoveredLineChange;
 
-    const onSelectedLineChangeRef = useRef(onSelectedLineChange)
-    onSelectedLineChangeRef.current = onSelectedLineChange
+    const onSelectedLineChangeRef = useRef(onSelectedLineChange);
+    onSelectedLineChangeRef.current = onSelectedLineChange;
 
-    const [fontSize] = useCodeFontSize()
+    const [fontSize] = useCodeFontSize();
 
     // Defer calls to onChange to avoid excessive re-renders
     const propagateValue = useLeadingTrailingDebounceCallback(() => {
-        onChangeRef.current?.(viewRef.current.state.doc.toString())
-    }, 100)
+        onChangeRef.current?.(viewRef.current.state.doc.toString());
+    }, 100);
 
     // Initial view creation
     useEffect(() => {
@@ -87,47 +96,49 @@ export default function CodeMirror({
             state: EditorState.create({
                 doc: valueRef.current,
                 extensions: [
-                    EditorState.transactionExtender.of(({ docChanged, newDoc, newSelection }) => {
-                        // value / onChange
-                        if (docChanged) {
-                            valueRef.current = newDoc.toString()
-                            propagateValue()
-                        }
-
-                        // selectedSourceLine
-                        const line = newDoc.lineAt(newSelection.main.from).number
-                        if (hoveredLineRef.current !== line) {
-                            hoveredLineRef.current = line
-                            requestAnimationFrame(() => {
-                                onSelectedLineChangeRef.current?.(line)
-                            })
-                        }
-
-                        return null
-                    }),
+                    EditorState.transactionExtender.of(
+                        ({ docChanged, newDoc, newSelection }) => {
+                            // value / onChange
+                            if (docChanged) {
+                                valueRef.current = newDoc.toString();
+                                propagateValue();
+                            }
+
+                            // selectedSourceLine
+                            const line = newDoc.lineAt(
+                                newSelection.main.from,
+                            ).number;
+                            if (hoveredLineRef.current !== line) {
+                                hoveredLineRef.current = line;
+                                requestAnimationFrame(() => {
+                                    onSelectedLineChangeRef.current?.(line);
+                                });
+                            }
+
+                            return null;
+                        },
+                    ),
 
                     extensionsRef.current,
                 ],
             }),
             parent: el.current,
-        })
+        });
 
-        if (viewRefProp)
-            viewRefProp.current = viewRef.current
+        if (viewRefProp) viewRefProp.current = viewRef.current;
 
         return () => {
-            viewRef.current.destroy()
-            viewRef.current = null
-            if (viewRefProp)
-                viewRefProp.current = null
-        }
-    }, [el, propagateValue, viewRefProp])
+            viewRef.current.destroy();
+            viewRef.current = null;
+            if (viewRefProp) viewRefProp.current = null;
+        };
+    }, [el, propagateValue, viewRefProp]);
 
     // Replace doc when `valueVersion` prop changes
     useEffect(() => {
-        const view = viewRef.current
+        const view = viewRef.current;
         if (view) {
-            const prevValue = view.state.doc.toString()
+            const prevValue = view.state.doc.toString();
 
             if (prevValue !== value) {
                 view.dispatch(
@@ -137,42 +148,47 @@ export default function CodeMirror({
                             to: prevValue.length,
                             insert: value,
                         },
-                    })
-                )
+                    }),
+                );
             }
         }
-    }, [valueVersion]) // eslint-disable-line react-hooks/exhaustive-deps
+    }, [valueVersion]); // eslint-disable-line react-hooks/exhaustive-deps
 
     const debouncedOnMouseMove = useDebouncedCallback(
-        event => {
-            if (!onHoveredLineChangeRef.current)
-                return
+        (event) => {
+            if (!onHoveredLineChangeRef.current) return;
 
-            const view = viewRef.current
-            let newLine: number | null = null
+            const view = viewRef.current;
+            let newLine: number | null = null;
             if (view) {
-                const line = view.state.doc.lineAt(view.posAtCoords({ x: event.clientX, y: event.clientY })).number
+                const line = view.state.doc.lineAt(
+                    view.posAtCoords({ x: event.clientX, y: event.clientY }),
+                ).number;
                 if (line) {
-                    newLine = line
+                    newLine = line;
                 }
             }
 
             if (selectedLineRef.current !== newLine) {
-                selectedLineRef.current = newLine
-                onHoveredLineChangeRef.current?.(newLine)
+                selectedLineRef.current = newLine;
+                onHoveredLineChangeRef.current?.(newLine);
             }
         },
         100,
         { leading: true, trailing: true },
-    )
-
-    return <div
-        ref={el}
-        onMouseMove={debouncedOnMouseMove}
-        className={classNames(styles.container, className)}
-        style={{
-            "--cm-font-size": `${fontSize}px`,
-            "--cm-container-width": `${width}px`,
-        } as CSSProperties}
-    />
+    );
+
+    return (
+        <div
+            ref={el}
+            onMouseMove={debouncedOnMouseMove}
+            className={classNames(styles.container, className)}
+            style={
+                {
+                    "--cm-font-size": `${fontSize}px`,
+                    "--cm-container-width": `${width}px`,
+                } as CSSProperties
+            }
+        />
+    );
 }
diff --git a/frontend/src/components/ErrorBoundary.tsx b/frontend/src/components/ErrorBoundary.tsx
index 4901e346f..587d3fdbb 100644
--- a/frontend/src/components/ErrorBoundary.tsx
+++ b/frontend/src/components/ErrorBoundary.tsx
@@ -1,40 +1,42 @@
-"use client"
+"use client";
 
-import { Component, type ReactNode } from "react"
+import { Component, type ReactNode } from "react";
 
 interface State {
-    error?: unknown
+    error?: unknown;
 }
 
 export interface Props {
-    children?: ReactNode
-    forceError?: boolean
-    fallback?: (state: State) => ReactNode
-    onError?: (error: unknown, errorInfo: any) => void
+    children?: ReactNode;
+    forceError?: boolean;
+    fallback?: (state: State) => ReactNode;
+    onError?: (error: unknown, errorInfo: any) => void;
 }
 
 export default class ErrorBoundary extends Component<Props, State> {
     constructor(props: Props) {
-        super(props)
-        this.state = { error: undefined }
+        super(props);
+        this.state = { error: undefined };
     }
 
     static getDerivedStateFromError(error: unknown) {
         // Update state so the next render will show the fallback UI.
-        return { error }
+        return { error };
     }
 
     componentDidCatch(error: unknown, errorInfo: unknown) {
-        console.error("Error boundary caught an error:", error, errorInfo)
-        this.props.onError?.(error, errorInfo)
+        console.error("Error boundary caught an error:", error, errorInfo);
+        this.props.onError?.(error, errorInfo);
     }
 
     render() {
         if (this.state.error || this.props.forceError) {
-            const fallback = this.props.fallback ? this.props.fallback(this.state) : null
-            return fallback
+            const fallback = this.props.fallback
+                ? this.props.fallback(this.state)
+                : null;
+            return fallback;
         }
 
-        return this.props.children || null
+        return this.props.children || null;
     }
 }
diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
index cda20c9cd..89661dbb1 100644
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -1,68 +1,72 @@
-import Link from "next/link"
+import Link from "next/link";
 
-import { MarkGithubIcon } from "@primer/octicons-react"
+import { MarkGithubIcon } from "@primer/octicons-react";
 
-import DiscordIcon from "./discord.svg"
-import GhostButton from "./GhostButton"
-import Logotype from "./Logotype"
+import DiscordIcon from "./discord.svg";
+import GhostButton from "./GhostButton";
+import Logotype from "./Logotype";
 
 function Separator() {
-    return <div className="hidden h-4 w-px bg-gray-6 sm:inline-block" />
+    return <div className="hidden h-4 w-px bg-gray-6 sm:inline-block" />;
 }
 
-const commitHash = process.env.NEXT_PUBLIC_COMMIT_HASH
+const commitHash = process.env.NEXT_PUBLIC_COMMIT_HASH;
 
 export default function Footer() {
-    return <>
-        <div className="grow" />
-        <footer className="mx-auto mt-16 w-full px-4 sm:px-6 lg:px-8">
-            <div className="border-gray-6 border-t py-10">
-                <div className="flex items-center justify-center">
-                    <Link href="/" >
-                        <Logotype />
-                    </Link>
-                </div>
-                <div className="mt-4 flex flex-col items-center justify-center gap-1 sm:flex-row sm:gap-2">
-                    <GhostButton href="/privacy">
-                        Privacy policy
-                    </GhostButton>
-                    <Separator />
-                    <GhostButton href="/credits">
-                        Credits
-                    </GhostButton>
-                    <Separator />
-                    <GhostButton href="/faq">
-                        FAQ
-                    </GhostButton>
-                    <Separator />
-                    <GhostButton href="https://github.com/decompme/decomp.me" className="flex items-center gap-1.5">
-                        <MarkGithubIcon className="size-4" />
-                        Source code
-                    </GhostButton>
-                    <Separator />
-                    <GhostButton href="https://discord.gg/sutqNShRRs" className="flex items-center gap-1.5">
-                        <DiscordIcon className="size-4" />
-                        Chat
-                    </GhostButton>
-                    <Separator />
-                    <GhostButton href="https://status.decomp.me">
-                        Status
-                    </GhostButton>
-                    <Separator />
-                    <GhostButton href="https://stats.decomp.me/decomp.me">
-                        Stats
-                    </GhostButton>
-                </div>
-
-                <div className="mt-2 flex items-center justify-center text-[#808080] text-xs">
-                    <Link
-                        href={`https://github.com/decompme/decomp.me/commit/${commitHash}`}
-                        title="Commit hash">
+    return (
+        <>
+            <div className="grow" />
+            <footer className="mx-auto mt-16 w-full px-4 sm:px-6 lg:px-8">
+                <div className="border-gray-6 border-t py-10">
+                    <div className="flex items-center justify-center">
+                        <Link href="/">
+                            <Logotype />
+                        </Link>
+                    </div>
+                    <div className="mt-4 flex flex-col items-center justify-center gap-1 sm:flex-row sm:gap-2">
+                        <GhostButton href="/privacy">
+                            Privacy policy
+                        </GhostButton>
+                        <Separator />
+                        <GhostButton href="/credits">Credits</GhostButton>
+                        <Separator />
+                        <GhostButton href="/faq">FAQ</GhostButton>
+                        <Separator />
+                        <GhostButton
+                            href="https://github.com/decompme/decomp.me"
+                            className="flex items-center gap-1.5"
+                        >
+                            <MarkGithubIcon className="size-4" />
+                            Source code
+                        </GhostButton>
+                        <Separator />
+                        <GhostButton
+                            href="https://discord.gg/sutqNShRRs"
+                            className="flex items-center gap-1.5"
+                        >
+                            <DiscordIcon className="size-4" />
+                            Chat
+                        </GhostButton>
+                        <Separator />
+                        <GhostButton href="https://status.decomp.me">
+                            Status
+                        </GhostButton>
+                        <Separator />
+                        <GhostButton href="https://stats.decomp.me/decomp.me">
+                            Stats
+                        </GhostButton>
+                    </div>
 
-                        {(commitHash?.slice(0, 7)) || "unknown"}
-                    </Link>
+                    <div className="mt-2 flex items-center justify-center text-[#808080] text-xs">
+                        <Link
+                            href={`https://github.com/decompme/decomp.me/commit/${commitHash}`}
+                            title="Commit hash"
+                        >
+                            {commitHash?.slice(0, 7) || "unknown"}
+                        </Link>
+                    </div>
                 </div>
-            </div>
-        </footer>
-    </>
+            </footer>
+        </>
+    );
 }
diff --git a/frontend/src/components/GhostButton.tsx b/frontend/src/components/GhostButton.tsx
index 7350d413e..b1c9fcd06 100644
--- a/frontend/src/components/GhostButton.tsx
+++ b/frontend/src/components/GhostButton.tsx
@@ -1,36 +1,44 @@
-import type { ReactNode } from "react"
+import type { ReactNode } from "react";
 
-import Link from "next/link"
+import Link from "next/link";
 
-import classNames from "classnames"
+import classNames from "classnames";
 
 export type Props = {
-    href?: string
-    onClick?: () => void
-    children: ReactNode
-    className?: string
-}
+    href?: string;
+    onClick?: () => void;
+    children: ReactNode;
+    className?: string;
+};
 
-export default function GhostButton({ children, href, onClick, className }: Props) {
-    const isClickable = !!(href || onClick)
+export default function GhostButton({
+    children,
+    href,
+    onClick,
+    className,
+}: Props) {
+    const isClickable = !!(href || onClick);
     const cn = classNames(className, {
         "rounded bg-transparent px-2 py-1 text-sm whitespace-nowrap inline-block": true,
-        "transition-colors hover:bg-gray-3 cursor-pointer active:translate-y-px hover:text-gray-12": isClickable,
-    })
+        "transition-colors hover:bg-gray-3 cursor-pointer active:translate-y-px hover:text-gray-12":
+            isClickable,
+    });
 
     if (href) {
-        return <Link href={href} className={cn} onClick={onClick}>
-            {children}
-        </Link>
+        return (
+            <Link href={href} className={cn} onClick={onClick}>
+                {children}
+            </Link>
+        );
     }
 
     if (onClick) {
-        return <button className={cn} onClick={onClick}>
-            {children}
-        </button>
+        return (
+            <button className={cn} onClick={onClick}>
+                {children}
+            </button>
+        );
     }
 
-    return <div className={cn}>
-        {children}
-    </div>
+    return <div className={cn}>{children}</div>;
 }
diff --git a/frontend/src/components/GitHubLoginButton.tsx b/frontend/src/components/GitHubLoginButton.tsx
index bfcb63501..8b0c83a4b 100644
--- a/frontend/src/components/GitHubLoginButton.tsx
+++ b/frontend/src/components/GitHubLoginButton.tsx
@@ -1,30 +1,40 @@
-"use client"
+"use client";
 
-import { MarkGithubIcon } from "@primer/octicons-react"
+import { MarkGithubIcon } from "@primer/octicons-react";
 
-import { isAnonUser, useThisUser } from "@/lib/api"
-import { isGitHubLoginSupported, showGitHubLoginWindow } from "@/lib/oauth"
+import { isAnonUser, useThisUser } from "@/lib/api";
+import { isGitHubLoginSupported, showGitHubLoginWindow } from "@/lib/oauth";
 
-import Button from "./Button"
+import Button from "./Button";
 
-const DEFAULT_SCOPE_STR = ""
+const DEFAULT_SCOPE_STR = "";
 
-export default function GitHubLoginButton({ label, className }: { label?: string, className?: string }) {
-    const user = useThisUser()
+export default function GitHubLoginButton({
+    label,
+    className,
+}: { label?: string; className?: string }) {
+    const user = useThisUser();
 
     if (user && !isAnonUser(user)) {
         // We're already logged in
-        return null
+        return null;
     }
 
     if (isGitHubLoginSupported()) {
-        return <Button className={className} onClick={() => showGitHubLoginWindow(DEFAULT_SCOPE_STR)}>
-            <MarkGithubIcon size={16} /> {label ?? "Sign in with GitHub"}
-        </Button>
+        return (
+            <Button
+                className={className}
+                onClick={() => showGitHubLoginWindow(DEFAULT_SCOPE_STR)}
+            >
+                <MarkGithubIcon size={16} /> {label ?? "Sign in with GitHub"}
+            </Button>
+        );
     } else {
         // The backend is not configured to support GitHub login
-        return <Button className={className} onClick={() => {}} disabled>
-            <MarkGithubIcon size={16} /> Unavailable
-        </Button>
+        return (
+            <Button className={className} onClick={() => {}} disabled>
+                <MarkGithubIcon size={16} /> Unavailable
+            </Button>
+        );
     }
 }
diff --git a/frontend/src/components/Logotype.tsx b/frontend/src/components/Logotype.tsx
index b5a3325c6..33053da68 100644
--- a/frontend/src/components/Logotype.tsx
+++ b/frontend/src/components/Logotype.tsx
@@ -1,8 +1,15 @@
-import Frog from "./Nav/frog.svg"
+import Frog from "./Nav/frog.svg";
 
 export default function Logotype() {
-    return <div className="inline-flex items-center space-x-2" aria-label="decomp.me logo">
-        <Frog className="size-7" aria-label="Purple frog" />
-        <span className="font-semibold text-xl leading-6 tracking-tight">decomp.me</span>
-    </div>
+    return (
+        <div
+            className="inline-flex items-center space-x-2"
+            aria-label="decomp.me logo"
+        >
+            <Frog className="size-7" aria-label="Purple frog" />
+            <span className="font-semibold text-xl leading-6 tracking-tight">
+                decomp.me
+            </span>
+        </div>
+    );
 }
diff --git a/frontend/src/components/Nav/LoginState.tsx b/frontend/src/components/Nav/LoginState.tsx
index 59a434ed0..8cd798d2f 100644
--- a/frontend/src/components/Nav/LoginState.tsx
+++ b/frontend/src/components/Nav/LoginState.tsx
@@ -1,22 +1,22 @@
-import { useState } from "react"
+import { useState } from "react";
 
-import Image from "next/image"
+import Image from "next/image";
 
-import classNames from "classnames"
-import { useLayer } from "react-laag"
+import classNames from "classnames";
+import { useLayer } from "react-laag";
 
-import * as api from "@/lib/api"
-import { userAvatarUrl } from "@/lib/api/urls"
+import * as api from "@/lib/api";
+import { userAvatarUrl } from "@/lib/api/urls";
 
-import GitHubLoginButton from "../GitHubLoginButton"
-import VerticalMenu from "../VerticalMenu"
+import GitHubLoginButton from "../GitHubLoginButton";
+import VerticalMenu from "../VerticalMenu";
 
-import styles from "./LoginState.module.scss"
-import UserMenu from "./UserMenuItems"
+import styles from "./LoginState.module.scss";
+import UserMenu from "./UserMenuItems";
 
 export default function LoginState({ className }: { className?: string }) {
-    const user = api.useThisUser()
-    const [isUserMenuOpen, setUserMenuOpen] = useState(false)
+    const user = api.useThisUser();
+    const [isUserMenuOpen, setUserMenuOpen] = useState(false);
 
     const { renderLayer, triggerProps, layerProps } = useLayer({
         isOpen: isUserMenuOpen,
@@ -25,35 +25,44 @@ export default function LoginState({ className }: { className?: string }) {
         auto: false,
         placement: "bottom-end",
         triggerOffset: 4,
-    })
+    });
 
     if (!user) {
         // Loading...
-        return <div />
+        return <div />;
     }
 
     if (api.isAnonUser(user)) {
-        return <GitHubLoginButton label="Sign in" />
+        return <GitHubLoginButton label="Sign in" />;
     }
 
-    return <button
-        className={classNames(styles.user, className)}
-        onClick={() => setUserMenuOpen(!isUserMenuOpen)}
-        {...triggerProps}
-    >
-        <Image
-            className={styles.avatar}
-            src={userAvatarUrl(user)}
-            alt="Account menu"
-            width={28}
-            height={28}
-            sizes="28px"
-            priority
-        />
-        {renderLayer(<div {...layerProps}>
-            {isUserMenuOpen && <VerticalMenu open={isUserMenuOpen} setOpen={setUserMenuOpen}>
-                <UserMenu />
-            </VerticalMenu>}
-        </div>)}
-    </button>
+    return (
+        <button
+            className={classNames(styles.user, className)}
+            onClick={() => setUserMenuOpen(!isUserMenuOpen)}
+            {...triggerProps}
+        >
+            <Image
+                className={styles.avatar}
+                src={userAvatarUrl(user)}
+                alt="Account menu"
+                width={28}
+                height={28}
+                sizes="28px"
+                priority
+            />
+            {renderLayer(
+                <div {...layerProps}>
+                    {isUserMenuOpen && (
+                        <VerticalMenu
+                            open={isUserMenuOpen}
+                            setOpen={setUserMenuOpen}
+                        >
+                            <UserMenu />
+                        </VerticalMenu>
+                    )}
+                </div>,
+            )}
+        </button>
+    );
 }
diff --git a/frontend/src/components/Nav/Nav.tsx b/frontend/src/components/Nav/Nav.tsx
index 73986ad59..f7092747b 100644
--- a/frontend/src/components/Nav/Nav.tsx
+++ b/frontend/src/components/Nav/Nav.tsx
@@ -1,45 +1,45 @@
-"use client"
+"use client";
 
-import { useEffect, useReducer, type ReactNode } from "react"
+import { useEffect, useReducer, type ReactNode } from "react";
 
-import Link from "next/link"
-import { useRouter } from "next/navigation"
+import Link from "next/link";
+import { useRouter } from "next/navigation";
 
-import { ThreeBarsIcon, XIcon } from "@primer/octicons-react"
-import classNames from "classnames"
+import { ThreeBarsIcon, XIcon } from "@primer/octicons-react";
+import classNames from "classnames";
 
-import GhostButton from "../GhostButton"
-import Logotype from "../Logotype"
+import GhostButton from "../GhostButton";
+import Logotype from "../Logotype";
 
-import LoginState from "./LoginState"
-import styles from "./Nav.module.scss"
-import Search from "./Search"
+import LoginState from "./LoginState";
+import styles from "./Nav.module.scss";
+import Search from "./Search";
 
 export interface Props {
-    children?: ReactNode
+    children?: ReactNode;
 }
 
 export default function Nav({ children }: Props) {
-    const [isOpen, toggleOpen] = useReducer(isOpen => !isOpen, false)
-    const toggleLabel = `${isOpen ? "Close" : "Open"} Global Navigation Menu`
-    const router = useRouter()
+    const [isOpen, toggleOpen] = useReducer((isOpen) => !isOpen, false);
+    const toggleLabel = `${isOpen ? "Close" : "Open"} Global Navigation Menu`;
+    const router = useRouter();
 
     useEffect(() => {
         if (isOpen) {
             const onkeydown = (evt: KeyboardEvent) => {
                 if (evt.key === "Escape") {
-                    toggleOpen()
-                    document.getElementById("navtoggle").focus()
-                    evt.preventDefault()
+                    toggleOpen();
+                    document.getElementById("navtoggle").focus();
+                    evt.preventDefault();
                 }
-            }
+            };
 
-            document.body.addEventListener("keydown", onkeydown)
+            document.body.addEventListener("keydown", onkeydown);
             return () => {
-                document.body.removeEventListener("keydown", onkeydown)
-            }
+                document.body.removeEventListener("keydown", onkeydown);
+            };
         }
-    }, [isOpen, router])
+    }, [isOpen, router]);
 
     return (
         <nav
@@ -59,35 +59,47 @@ export default function Nav({ children }: Props) {
                         aria-label={toggleLabel}
                         aria-expanded={isOpen}
                     >
-                        {isOpen ? <XIcon size={24} /> : <ThreeBarsIcon size={18} />}
+                        {isOpen ? (
+                            <XIcon size={24} />
+                        ) : (
+                            <ThreeBarsIcon size={18} />
+                        )}
                     </button>
                 </li>
                 <li className={styles.headerItemSiteLogo}>
-                    <Link href="/" className="transition-colors hover:text-gray-12 active:translate-y-px">
+                    <Link
+                        href="/"
+                        className="transition-colors hover:text-gray-12 active:translate-y-px"
+                    >
                         <Logotype />
                     </Link>
                 </li>
                 <li className={styles.headerItemLoginState}>
                     <LoginState />
                 </li>
-                {children
-                    ? <li className={styles.customchildren}>{children}</li>
-                    : <li className={styles.desktopLinks}>
+                {children ? (
+                    <li className={styles.customchildren}>{children}</li>
+                ) : (
+                    <li className={styles.desktopLinks}>
                         <ul className="flex w-full gap-2 text-sm">
                             <li className="ml-4">
                                 <Search />
                             </li>
                             <div className="grow" />
                             <li>
-                                <GhostButton href="/new">New scratch</GhostButton>
+                                <GhostButton href="/new">
+                                    New scratch
+                                </GhostButton>
                             </li>
                             <div className="h-4 w-px bg-gray-6" />
                             <li>
-                                <GhostButton href="/settings">Settings</GhostButton>
+                                <GhostButton href="/settings">
+                                    Settings
+                                </GhostButton>
                             </li>
                         </ul>
                     </li>
-                }
+                )}
             </ul>
             <div className={classNames(styles.menu, "bg-gray-1")}>
                 <div className={styles.searchContainer}>
@@ -100,16 +112,22 @@ export default function Nav({ children }: Props) {
                         </Link>
                     </li>
                     <li>
-                        <Link onClick={toggleOpen} href="/">Dashboard</Link>
+                        <Link onClick={toggleOpen} href="/">
+                            Dashboard
+                        </Link>
                     </li>
                     <li>
-                        <Link onClick={toggleOpen} href="/new">New scratch</Link>
+                        <Link onClick={toggleOpen} href="/new">
+                            New scratch
+                        </Link>
                     </li>
                     <li>
-                        <Link onClick={toggleOpen} href="/settings">Settings</Link>
+                        <Link onClick={toggleOpen} href="/settings">
+                            Settings
+                        </Link>
                     </li>
                 </ul>
             </div>
         </nav>
-    )
+    );
 }
diff --git a/frontend/src/components/Nav/Search.tsx b/frontend/src/components/Nav/Search.tsx
index 1e4de772d..8090e8c4f 100644
--- a/frontend/src/components/Nav/Search.tsx
+++ b/frontend/src/components/Nav/Search.tsx
@@ -1,77 +1,79 @@
-import { useEffect, useRef, useState } from "react"
+import { useEffect, useRef, useState } from "react";
 
-import Image from "next/image"
-import { useRouter } from "next/navigation"
+import Image from "next/image";
+import { useRouter } from "next/navigation";
 
-import { SearchIcon } from "@primer/octicons-react"
-import classNames from "classnames"
-import { useCombobox } from "downshift"
-import { useLayer } from "react-laag"
+import { SearchIcon } from "@primer/octicons-react";
+import classNames from "classnames";
+import { useCombobox } from "downshift";
+import { useLayer } from "react-laag";
 
-import * as api from "@/lib/api"
-import { scratchUrl, userAvatarUrl } from "@/lib/api/urls"
+import * as api from "@/lib/api";
+import { scratchUrl, userAvatarUrl } from "@/lib/api/urls";
 
-import LoadingSpinner from "../loading.svg"
-import PlatformLink from "../PlatformLink"
-import AnonymousFrogAvatar from "../user/AnonymousFrog"
-import verticalMenuStyles from "../VerticalMenu.module.scss" // eslint-disable-line css-modules/no-unused-class
+import LoadingSpinner from "../loading.svg";
+import PlatformLink from "../PlatformLink";
+import AnonymousFrogAvatar from "../user/AnonymousFrog";
+import verticalMenuStyles from "../VerticalMenu.module.scss"; // eslint-disable-line css-modules/no-unused-class
 
-import styles from "./Search.module.scss"
+import styles from "./Search.module.scss";
 
 function MountedSearch({ className }: { className?: string }) {
-    const [query, setQuery] = useState("")
-    const [isFocused, setIsFocused] = useState(false)
-    const [isLoading, setIsLoading] = useState(false)
-    const [debouncedTimeout, setDebouncedTimeout] = useState<any>()
-    const [searchItems, setSearchItems] = useState<api.TerseScratch[]>([])
+    const [query, setQuery] = useState("");
+    const [isFocused, setIsFocused] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [debouncedTimeout, setDebouncedTimeout] = useState<any>();
+    const [searchItems, setSearchItems] = useState<api.TerseScratch[]>([]);
 
-    const items = query.length > 0 ? searchItems : []
+    const items = query.length > 0 ? searchItems : [];
 
     const close = () => {
-        console.info("<Search> close")
-        setInputValue("")
-        setQuery("")
-        setIsFocused(false)
-    }
+        console.info("<Search> close");
+        setInputValue("");
+        setQuery("");
+        setIsFocused(false);
+    };
+
+    const { isOpen, getMenuProps, getInputProps, getItemProps, setInputValue } =
+        useCombobox({
+            items,
+            isOpen:
+                (isFocused || !!query) &&
+                query.length > 0 &&
+                !(isLoading && items.length === 0),
+            itemToString(item) {
+                return item.name;
+            },
+            onInputValueChange({ inputValue }) {
+                clearTimeout(debouncedTimeout);
+                setQuery(inputValue);
+
+                if (inputValue.length === 0) {
+                    setSearchItems([]);
+                    setIsLoading(false);
+                    return;
+                }
 
-    const {
-        isOpen,
-        getMenuProps,
-        getInputProps,
-        getItemProps,
-        setInputValue,
-    } = useCombobox({
-        items,
-        isOpen: (isFocused || !!query) && query.length > 0 && !(isLoading && items.length === 0),
-        itemToString(item) {
-            return item.name
-        },
-        onInputValueChange({ inputValue }) {
-            clearTimeout(debouncedTimeout)
-            setQuery(inputValue)
-
-            if (inputValue.length === 0) {
-                setSearchItems([])
-                setIsLoading(false)
-                return
-            }
-
-            // Use a timeout to avoid spamming the API with requests
-            setIsLoading(true)
-            setDebouncedTimeout(setTimeout(async () => {
-                const resp = await api.get(`/scratch?search=${inputValue}&page_size=5`)
-                setSearchItems(resp.results)
-                setIsLoading(false)
-            }, 200))
-        },
-        onSelectedItemChange({ selectedItem }) {
-            if (selectedItem) {
-                console.info("<Search> onSelectedItemChange")
-                close()
-                router.push(scratchUrl(selectedItem))
-            }
-        },
-    })
+                // Use a timeout to avoid spamming the API with requests
+                setIsLoading(true);
+                setDebouncedTimeout(
+                    setTimeout(async () => {
+                        const resp = await api.get(
+                            `/scratch?search=${inputValue}&page_size=5`,
+                        );
+                        setSearchItems(resp.results);
+                        setIsLoading(false);
+                    }, 200),
+                );
+            },
+            onSelectedItemChange({ selectedItem }) {
+                if (selectedItem) {
+                    console.info("<Search> onSelectedItemChange");
+                    close();
+                    router.push(scratchUrl(selectedItem));
+                }
+            },
+        });
 
     const { renderLayer, triggerProps, layerProps, triggerBounds } = useLayer({
         isOpen,
@@ -83,112 +85,140 @@ function MountedSearch({ className }: { className?: string }) {
         triggerOffset: 0,
         containerOffset: 16,
         onOutsideClick() {
-            console.info("<Search> onOutsideClick")
-            close()
+            console.info("<Search> onOutsideClick");
+            close();
         },
-    })
+    });
 
-    const router = useRouter()
+    const router = useRouter();
 
-    const lastWidthRef = useRef(0)
+    const lastWidthRef = useRef(0);
     if (triggerBounds) {
-        lastWidthRef.current = triggerBounds.width
+        lastWidthRef.current = triggerBounds.width;
     }
 
-    return <div
-        className={classNames(styles.container, className)}
-        onKeyDown={evt => {
-            if (evt.key === "Enter") {
-                evt.stopPropagation()
-                evt.preventDefault()
-
-                if (searchItems.length > 0) {
-                    console.info("<Search> Enter pressed")
-                    close()
-                    router.push(scratchUrl(searchItems[0]))
+    return (
+        <div
+            className={classNames(styles.container, className)}
+            onKeyDown={(evt) => {
+                if (evt.key === "Enter") {
+                    evt.stopPropagation();
+                    evt.preventDefault();
+
+                    if (searchItems.length > 0) {
+                        console.info("<Search> Enter pressed");
+                        close();
+                        router.push(scratchUrl(searchItems[0]));
+                    }
                 }
-            }
-        }}
-    >
-        <SearchIcon className={styles.icon} />
-        <input
-            {...getInputProps(triggerProps)}
-            className={classNames(styles.input, {
-                [styles.isOpen]: isOpen,
-                "rounded-md bg-transparent text-sm placeholder-current transition-colors hover:bg-gray-4 focus:bg-gray-5 focus:placeholder-gray-11": true,
-            })}
-            type="text"
-            placeholder="Search scratches"
-            spellCheck={false}
-            onFocus={() => setIsFocused(true)}
-            onClick={() => setIsFocused(true)}
-        />
-        {isLoading && isFocused && <LoadingSpinner className={styles.loadingIcon} />}
-        {renderLayer(
-            <ul
-                {...getMenuProps(layerProps)}
-                className={classNames(verticalMenuStyles.menu, styles.results, {
+            }}
+        >
+            <SearchIcon className={styles.icon} />
+            <input
+                {...getInputProps(triggerProps)}
+                className={classNames(styles.input, {
                     [styles.isOpen]: isOpen,
+                    "rounded-md bg-transparent text-sm placeholder-current transition-colors hover:bg-gray-4 focus:bg-gray-5 focus:placeholder-gray-11": true,
                 })}
-                style={{
-                    width: lastWidthRef.current,
-                    ...layerProps.style,
-                }}
-            >
-                {items.map((scratch, index) => {
-                    const props = getItemProps({ item: scratch, index })
-                    const oldOnClick = props.onClick
-                    props.onClick = evt => {
-                        evt.preventDefault() // Don't visit the link
-                        return oldOnClick(evt)
-                    }
-
-                    return <li
-                        key={scratchUrl(scratch)}
-                        {...props}
-                    >
-                        <a
-                            href={scratchUrl(scratch)}
-                            className={classNames(verticalMenuStyles.item, styles.item)}
-                        >
-                            <PlatformLink scratch={scratch} size={16} />
-                            <span className={styles.itemName}>
-                                {scratch.name}
-                            </span>
-                            {scratch.owner && (!api.isAnonUser(scratch.owner) ?
-                                userAvatarUrl(scratch.owner) && <Image
-                                    src={userAvatarUrl(scratch.owner)}
-                                    alt={scratch.owner.username}
-                                    width={16}
-                                    height={16}
-                                    className={styles.scratchOwnerAvatar}
-                                /> :
-                                <AnonymousFrogAvatar
-                                    user={scratch.owner}
-                                    width={16}
-                                    height={16}
-                                    className={styles.scratchOwnerAvatar}
-                                />)}
-                        </a>
-                    </li>
-                })}
-                {items.length === 0 && <li>
-                    <div className={classNames(verticalMenuStyles.item, styles.noResults)}>
-                        No search results
-                    </div>
-                </li>}
-            </ul>
-        )}
-    </div>
+                type="text"
+                placeholder="Search scratches"
+                spellCheck={false}
+                onFocus={() => setIsFocused(true)}
+                onClick={() => setIsFocused(true)}
+            />
+            {isLoading && isFocused && (
+                <LoadingSpinner className={styles.loadingIcon} />
+            )}
+            {renderLayer(
+                <ul
+                    {...getMenuProps(layerProps)}
+                    className={classNames(
+                        verticalMenuStyles.menu,
+                        styles.results,
+                        {
+                            [styles.isOpen]: isOpen,
+                        },
+                    )}
+                    style={{
+                        width: lastWidthRef.current,
+                        ...layerProps.style,
+                    }}
+                >
+                    {items.map((scratch, index) => {
+                        const props = getItemProps({ item: scratch, index });
+                        const oldOnClick = props.onClick;
+                        props.onClick = (evt) => {
+                            evt.preventDefault(); // Don't visit the link
+                            return oldOnClick(evt);
+                        };
+
+                        return (
+                            <li key={scratchUrl(scratch)} {...props}>
+                                <a
+                                    href={scratchUrl(scratch)}
+                                    className={classNames(
+                                        verticalMenuStyles.item,
+                                        styles.item,
+                                    )}
+                                >
+                                    <PlatformLink scratch={scratch} size={16} />
+                                    <span className={styles.itemName}>
+                                        {scratch.name}
+                                    </span>
+                                    {scratch.owner &&
+                                        (!api.isAnonUser(scratch.owner) ? (
+                                            userAvatarUrl(scratch.owner) && (
+                                                <Image
+                                                    src={userAvatarUrl(
+                                                        scratch.owner,
+                                                    )}
+                                                    alt={scratch.owner.username}
+                                                    width={16}
+                                                    height={16}
+                                                    className={
+                                                        styles.scratchOwnerAvatar
+                                                    }
+                                                />
+                                            )
+                                        ) : (
+                                            <AnonymousFrogAvatar
+                                                user={scratch.owner}
+                                                width={16}
+                                                height={16}
+                                                className={
+                                                    styles.scratchOwnerAvatar
+                                                }
+                                            />
+                                        ))}
+                                </a>
+                            </li>
+                        );
+                    })}
+                    {items.length === 0 && (
+                        <li>
+                            <div
+                                className={classNames(
+                                    verticalMenuStyles.item,
+                                    styles.noResults,
+                                )}
+                            >
+                                No search results
+                            </div>
+                        </li>
+                    )}
+                </ul>,
+            )}
+        </div>
+    );
 }
 
 export default function Search({ className }: { className?: string }) {
-    const [isMounted, setIsMounted] = useState(false)
-    useEffect(() => setIsMounted(true), [])
+    const [isMounted, setIsMounted] = useState(false);
+    useEffect(() => setIsMounted(true), []);
 
     if (!isMounted) {
-        return null
+        return null;
     }
 
-    return <MountedSearch className={className} />
+    return <MountedSearch className={className} />;
 }
diff --git a/frontend/src/components/Nav/UserMenuItems.tsx b/frontend/src/components/Nav/UserMenuItems.tsx
index 76a978d97..377fb11a9 100644
--- a/frontend/src/components/Nav/UserMenuItems.tsx
+++ b/frontend/src/components/Nav/UserMenuItems.tsx
@@ -1,46 +1,48 @@
-import { mutate } from "swr"
+import { mutate } from "swr";
 
-import * as api from "@/lib/api"
+import * as api from "@/lib/api";
 
-import GitHubLoginButton from "../GitHubLoginButton"
-import { MenuItem, ButtonItem, LinkItem } from "../VerticalMenu"
+import GitHubLoginButton from "../GitHubLoginButton";
+import { MenuItem, ButtonItem, LinkItem } from "../VerticalMenu";
 
-import styles from "./UserMenuItems.module.scss"
+import styles from "./UserMenuItems.module.scss";
 
 export default function UserMenuItems() {
-    const user = api.useThisUser()
+    const user = api.useThisUser();
 
     if (api.isAnonUser(user)) {
-        return <>
+        return (
+            <>
+                <MenuItem>
+                    <div className={styles.status}>
+                        Sign in now to keep track of your scratches.
+                    </div>
+                </MenuItem>
+                <MenuItem>
+                    <GitHubLoginButton />
+                </MenuItem>
+            </>
+        );
+    }
+
+    return (
+        <>
             <MenuItem>
                 <div className={styles.status}>
-                    Sign in now to keep track of your scratches.
+                    Signed in as <b>{user.username}</b>
                 </div>
             </MenuItem>
-            <MenuItem>
-                <GitHubLoginButton />
-            </MenuItem>
+            <LinkItem href={`/u/${user.username}`}>Your profile</LinkItem>
+            <hr />
+            {user.is_admin && <LinkItem href={"/admin"}>Admin</LinkItem>}
+            <ButtonItem
+                onTrigger={async () => {
+                    const user = await api.post("/user", {});
+                    await mutate("/user", user);
+                }}
+            >
+                Sign out
+            </ButtonItem>
         </>
-    }
-
-    return <>
-        <MenuItem>
-            <div className={styles.status}>
-                Signed in as <b>{user.username}</b>
-            </div>
-        </MenuItem>
-        <LinkItem href={`/u/${user.username}`}>
-            Your profile
-        </LinkItem>
-        <hr />
-        {user.is_admin && <LinkItem href={"/admin"}>Admin</LinkItem>}
-        <ButtonItem
-            onTrigger={async () => {
-                const user = await api.post("/user", {})
-                await mutate("/user", user)
-            }}
-        >
-            Sign out
-        </ButtonItem>
-    </>
+    );
 }
diff --git a/frontend/src/components/Nav/index.tsx b/frontend/src/components/Nav/index.tsx
index bc5224b6c..36b628548 100644
--- a/frontend/src/components/Nav/index.tsx
+++ b/frontend/src/components/Nav/index.tsx
@@ -1,3 +1,3 @@
-import Nav from "./Nav"
+import Nav from "./Nav";
 
-export default Nav
+export default Nav;
diff --git a/frontend/src/components/NumberInput.tsx b/frontend/src/components/NumberInput.tsx
index 3bb414930..2378b4a1e 100644
--- a/frontend/src/components/NumberInput.tsx
+++ b/frontend/src/components/NumberInput.tsx
@@ -1,57 +1,68 @@
-import { useEffect, useRef, useState } from "react"
+import { useEffect, useRef, useState } from "react";
 
-import classNames from "classnames"
+import classNames from "classnames";
 
-import styles from "./NumberInput.module.scss"
+import styles from "./NumberInput.module.scss";
 
 export type Props = {
-    value?: number
-    onChange?: (value: number) => void
-    stringValue?: string
-    disabled?: boolean
-}
+    value?: number;
+    onChange?: (value: number) => void;
+    stringValue?: string;
+    disabled?: boolean;
+};
 
-export default function NumberInput({ value, onChange, stringValue, disabled }: Props) {
-    const [isEditing, setIsEditing] = useState(false)
-    const editableRef = useRef<HTMLSpanElement>()
+export default function NumberInput({
+    value,
+    onChange,
+    stringValue,
+    disabled,
+}: Props) {
+    const [isEditing, setIsEditing] = useState(false);
+    const editableRef = useRef<HTMLSpanElement>();
 
     useEffect(() => {
-        const el = editableRef.current
+        const el = editableRef.current;
 
         if (el) {
-            const range = document.createRange()
-            range.selectNodeContents(el)
-            const sel = window.getSelection()
-            sel.removeAllRanges()
-            sel.addRange(range)
+            const range = document.createRange();
+            range.selectNodeContents(el);
+            const sel = window.getSelection();
+            sel.removeAllRanges();
+            sel.addRange(range);
         }
-    }, [isEditing])
-
-    return <span
-        ref={editableRef}
-        className={classNames(styles.numberInput, { [styles.disabled]: disabled })}
-        tabIndex={0}
-        contentEditable={isEditing && !disabled}
-        suppressContentEditableWarning={true}
-        onClick={() => setIsEditing(true)}
-        onBlur={evt => {
-            if (Number.isNaN(+evt.currentTarget.textContent)) {
-                evt.currentTarget.textContent = `${value}` // this should never happen, as the user is not allowed to type non-digits
-            }
-            onChange(+evt.currentTarget.textContent)
-            setIsEditing(false)
-        }}
-        onKeyPress={evt => {
-            const isValidKey = evt.key === "." || !Number.isNaN(+evt.key)
-            if (!isValidKey || disabled) {
-                evt.preventDefault()
-            }
-
-            if (evt.key === "Enter") {
-                evt.currentTarget.blur() // submit
-            }
-        }}
-    >
-        {isEditing ? editableRef.current.textContent : (stringValue ?? value)}
-    </span>
+    }, [isEditing]);
+
+    return (
+        <span
+            ref={editableRef}
+            className={classNames(styles.numberInput, {
+                [styles.disabled]: disabled,
+            })}
+            tabIndex={0}
+            contentEditable={isEditing && !disabled}
+            suppressContentEditableWarning={true}
+            onClick={() => setIsEditing(true)}
+            onBlur={(evt) => {
+                if (Number.isNaN(+evt.currentTarget.textContent)) {
+                    evt.currentTarget.textContent = `${value}`; // this should never happen, as the user is not allowed to type non-digits
+                }
+                onChange(+evt.currentTarget.textContent);
+                setIsEditing(false);
+            }}
+            onKeyPress={(evt) => {
+                const isValidKey = evt.key === "." || !Number.isNaN(+evt.key);
+                if (!isValidKey || disabled) {
+                    evt.preventDefault();
+                }
+
+                if (evt.key === "Enter") {
+                    evt.currentTarget.blur(); // submit
+                }
+            }}
+        >
+            {isEditing
+                ? editableRef.current.textContent
+                : (stringValue ?? value)}
+        </span>
+    );
 }
diff --git a/frontend/src/components/PlatformLink.tsx b/frontend/src/components/PlatformLink.tsx
index 04d452c36..5a5f94bf5 100644
--- a/frontend/src/components/PlatformLink.tsx
+++ b/frontend/src/components/PlatformLink.tsx
@@ -1,20 +1,26 @@
-import Link from "next/link"
+import Link from "next/link";
 
-import type * as api from "@/lib/api"
-import { platformUrl } from "@/lib/api/urls"
+import type * as api from "@/lib/api";
+import { platformUrl } from "@/lib/api/urls";
 
-import { platformIcon } from "./PlatformSelect/PlatformIcon"
+import { platformIcon } from "./PlatformSelect/PlatformIcon";
 
 export type Props = {
-    scratch: api.TerseScratch
-    size: number
-    className?: string
-}
+    scratch: api.TerseScratch;
+    size: number;
+    className?: string;
+};
 
 export default function PlatformLink(props: Props) {
-    const Icon = platformIcon(props.scratch.platform)
+    const Icon = platformIcon(props.scratch.platform);
 
-    return <Link href={platformUrl(props.scratch.platform)}>
-        <Icon width={props.size} height={props.size} className={props.className} />
-    </Link>
+    return (
+        <Link href={platformUrl(props.scratch.platform)}>
+            <Icon
+                width={props.size}
+                height={props.size}
+                className={props.className}
+            />
+        </Link>
+    );
 }
diff --git a/frontend/src/components/PlatformSelect/PlatformIcon.tsx b/frontend/src/components/PlatformSelect/PlatformIcon.tsx
index b25f18f1c..442b1221a 100644
--- a/frontend/src/components/PlatformSelect/PlatformIcon.tsx
+++ b/frontend/src/components/PlatformSelect/PlatformIcon.tsx
@@ -1,69 +1,67 @@
-import Link from "next/link"
+import Link from "next/link";
 
-import { platformUrl } from "@/lib/api/urls"
+import { platformUrl } from "@/lib/api/urls";
 
-import LogoDreamcast from "./dreamcast.svg"
-import LogoGBA from "./gba.svg"
-import LogoGCWii from "./gc_wii.svg"
-import LogoIRIX from "./irix.svg"
-import LogoMacOSX from "./macosx.svg"
-import LogoMSDOS from "./msdos.svg"
-import LogoN3DS from "./n3ds.svg"
-import LogoN64 from "./n64.svg"
-import LogoNDS from "./nds.svg"
-import LogoPS1 from "./ps1.svg"
-import LogoPS2 from "./ps2.svg"
-import LogoPSP from "./psp.svg"
-import LogoSaturn from "./saturn.svg"
-import LogoSwitch from "./switch.svg"
-import UnknownIcon from "./unknown.svg"
-import LogoWin32 from "./win32.svg"
+import LogoDreamcast from "./dreamcast.svg";
+import LogoGBA from "./gba.svg";
+import LogoGCWii from "./gc_wii.svg";
+import LogoIRIX from "./irix.svg";
+import LogoMacOSX from "./macosx.svg";
+import LogoMSDOS from "./msdos.svg";
+import LogoN3DS from "./n3ds.svg";
+import LogoN64 from "./n64.svg";
+import LogoNDS from "./nds.svg";
+import LogoPS1 from "./ps1.svg";
+import LogoPS2 from "./ps2.svg";
+import LogoPSP from "./psp.svg";
+import LogoSaturn from "./saturn.svg";
+import LogoSwitch from "./switch.svg";
+import UnknownIcon from "./unknown.svg";
+import LogoWin32 from "./win32.svg";
 
 /** In release-date order */
 const ICONS = {
-    "msdos": LogoMSDOS,
-    "irix": LogoIRIX,
-    "win32": LogoWin32,
-    "macosx": LogoMacOSX,
-    "n64": LogoN64,
-    "gba": LogoGBA,
-    "gc_wii": LogoGCWii,
-    "nds_arm9": LogoNDS,
-    "ps1": LogoPS1,
-    "ps2": LogoPS2,
-    "psp": LogoPSP,
-    "n3ds": LogoN3DS,
-    "switch": LogoSwitch,
-    "saturn": LogoSaturn,
-    "dreamcast": LogoDreamcast,
-}
+    msdos: LogoMSDOS,
+    irix: LogoIRIX,
+    win32: LogoWin32,
+    macosx: LogoMacOSX,
+    n64: LogoN64,
+    gba: LogoGBA,
+    gc_wii: LogoGCWii,
+    nds_arm9: LogoNDS,
+    ps1: LogoPS1,
+    ps2: LogoPS2,
+    psp: LogoPSP,
+    n3ds: LogoN3DS,
+    switch: LogoSwitch,
+    saturn: LogoSaturn,
+    dreamcast: LogoDreamcast,
+};
 
-export const PLATFORMS = Object.keys(ICONS)
+export const PLATFORMS = Object.keys(ICONS);
 
 export type Props = {
-    platform: string
-    className?: string
-    clickable?: boolean
-    size?: string | number
-}
+    platform: string;
+    className?: string;
+    clickable?: boolean;
+    size?: string | number;
+};
 
 export function platformIcon(platform: string) {
-    return ICONS[platform as keyof typeof ICONS] || UnknownIcon
+    return ICONS[platform as keyof typeof ICONS] || UnknownIcon;
 }
 
 export function PlatformIcon({ platform, className, clickable, size }: Props) {
-    const Icon = platformIcon(platform)
-    const url = platformUrl(platform)
+    const Icon = platformIcon(platform);
+    const url = platformUrl(platform);
 
     if (clickable) {
         return (
             <Link href={url}>
                 <Icon width={size} height={size} className={className} />
             </Link>
-        )
+        );
     } else {
-        return (
-            <Icon width={size} height={size} className={className} />
-        )
+        return <Icon width={size} height={size} className={className} />;
     }
 }
diff --git a/frontend/src/components/PlatformSelect/PlatformName.tsx b/frontend/src/components/PlatformSelect/PlatformName.tsx
index de3fbe137..1069bd772 100644
--- a/frontend/src/components/PlatformSelect/PlatformName.tsx
+++ b/frontend/src/components/PlatformSelect/PlatformName.tsx
@@ -1,19 +1,22 @@
-import Link from "next/link"
+import Link from "next/link";
 
-import useSWRImmutable from "swr/immutable"
+import useSWRImmutable from "swr/immutable";
 
-import * as api from "@/lib/api"
+import * as api from "@/lib/api";
 
 export type Props = {
-    platform: string
-}
+    platform: string;
+};
 
 export default function PlatformName({ platform }: Props) {
-    const { data } = useSWRImmutable<api.PlatformBase>(`/platform/${platform}`, api.get)
+    const { data } = useSWRImmutable<api.PlatformBase>(
+        `/platform/${platform}`,
+        api.get,
+    );
 
-    return <>
-        <Link href={`/platform/${platform}`}>
-            {data?.name ?? platform}
-        </Link>
-    </>
+    return (
+        <>
+            <Link href={`/platform/${platform}`}>{data?.name ?? platform}</Link>
+        </>
+    );
 }
diff --git a/frontend/src/components/PlatformSelect/PlatformSelect.tsx b/frontend/src/components/PlatformSelect/PlatformSelect.tsx
index 1babdf177..18b497e50 100644
--- a/frontend/src/components/PlatformSelect/PlatformSelect.tsx
+++ b/frontend/src/components/PlatformSelect/PlatformSelect.tsx
@@ -1,35 +1,49 @@
-import classNames from "classnames"
+import classNames from "classnames";
 
-import { PlatformIcon } from "./PlatformIcon"
-import styles from "./PlatformSelect.module.scss"
+import { PlatformIcon } from "./PlatformIcon";
+import styles from "./PlatformSelect.module.scss";
 
 export type Props = {
     platforms: {
         [key: string]: {
-            name: string
-            description: string
-        }
-    }
-    value: string
-    className?: string
-    onChange: (value: string) => void
-}
+            name: string;
+            description: string;
+        };
+    };
+    value: string;
+    className?: string;
+    onChange: (value: string) => void;
+};
 
-export default function PlatformSelect({ platforms, value, onChange, className }: Props) {
-    if (!value)
-        onChange("n64")
+export default function PlatformSelect({
+    platforms,
+    value,
+    onChange,
+    className,
+}: Props) {
+    if (!value) onChange("n64");
 
-    return <ul className={classNames(styles.container, className)}>
-        {Object.entries(platforms).map(([key, platform]) => <li
-            key={key}
-            className={classNames(styles.platform, { [styles.selected]: value === key })}
-            onClick={() => onChange(key)}
-        >
-            <PlatformIcon clickable={false} platform={key} />
-            <div className={styles.labelContainer}>
-                <div className={styles.consoleName}>{platform.name}</div>
-                <div className={styles.platformName}>{platform.description}</div>
-            </div>
-        </li>)}
-    </ul>
+    return (
+        <ul className={classNames(styles.container, className)}>
+            {Object.entries(platforms).map(([key, platform]) => (
+                <li
+                    key={key}
+                    className={classNames(styles.platform, {
+                        [styles.selected]: value === key,
+                    })}
+                    onClick={() => onChange(key)}
+                >
+                    <PlatformIcon clickable={false} platform={key} />
+                    <div className={styles.labelContainer}>
+                        <div className={styles.consoleName}>
+                            {platform.name}
+                        </div>
+                        <div className={styles.platformName}>
+                            {platform.description}
+                        </div>
+                    </div>
+                </li>
+            ))}
+        </ul>
+    );
 }
diff --git a/frontend/src/components/PlatformSelect/ScrollingPlatformIcons.tsx b/frontend/src/components/PlatformSelect/ScrollingPlatformIcons.tsx
index 2c6dea262..fb4add9c8 100644
--- a/frontend/src/components/PlatformSelect/ScrollingPlatformIcons.tsx
+++ b/frontend/src/components/PlatformSelect/ScrollingPlatformIcons.tsx
@@ -1,17 +1,27 @@
-import classNames from "classnames"
+import classNames from "classnames";
 
-import { PlatformIcon, PLATFORMS } from "./PlatformIcon"
-import styles from "./ScrollingPlatformIcons.module.scss"
+import { PlatformIcon, PLATFORMS } from "./PlatformIcon";
+import styles from "./ScrollingPlatformIcons.module.scss";
 
 function SingleSet() {
-    return <div className={classNames("flex gap-2", styles.scrolling)}>
-        {PLATFORMS.map(platform => <PlatformIcon key={platform} platform={platform} className="ml-16 size-24 md:size-32" />)}
-    </div>
+    return (
+        <div className={classNames("flex gap-2", styles.scrolling)}>
+            {PLATFORMS.map((platform) => (
+                <PlatformIcon
+                    key={platform}
+                    platform={platform}
+                    className="ml-16 size-24 md:size-32"
+                />
+            ))}
+        </div>
+    );
 }
 
 export default function ScrollingPlatformIcons() {
-    return <div className="pointer-events-none flex" aria-hidden>
-        <SingleSet />
-        <SingleSet />
-    </div>
+    return (
+        <div className="pointer-events-none flex" aria-hidden>
+            <SingleSet />
+            <SingleSet />
+        </div>
+    );
 }
diff --git a/frontend/src/components/PlatformSelect/index.ts b/frontend/src/components/PlatformSelect/index.ts
index 941f84ad2..11d5d4fdf 100644
--- a/frontend/src/components/PlatformSelect/index.ts
+++ b/frontend/src/components/PlatformSelect/index.ts
@@ -1,4 +1,6 @@
-import PlatformSelect, { type Props as PlatformSelectProps } from "./PlatformSelect"
+import PlatformSelect, {
+    type Props as PlatformSelectProps,
+} from "./PlatformSelect";
 
-export type Props = PlatformSelectProps
-export default PlatformSelect
+export type Props = PlatformSelectProps;
+export default PlatformSelect;
diff --git a/frontend/src/components/PresetList.tsx b/frontend/src/components/PresetList.tsx
index 40402bc3d..4c6466866 100644
--- a/frontend/src/components/PresetList.tsx
+++ b/frontend/src/components/PresetList.tsx
@@ -1,73 +1,109 @@
-"use client"
+"use client";
 
-import type { ReactNode, JSX } from "react"
+import type { ReactNode, JSX } from "react";
 
-import Link from "next/link"
+import Link from "next/link";
 
-import classNames from "classnames"
+import classNames from "classnames";
 
-import AsyncButton from "@/components/AsyncButton"
-import Button from "@/components/Button"
-import LoadingSpinner from "@/components/loading.svg"
-import { PlatformIcon } from "@/components/PlatformSelect/PlatformIcon"
-import { type Preset, usePaginated } from "@/lib/api"
-import { presetUrl } from "@/lib/api/urls"
-import getTranslation from "@/lib/i18n/translate"
+import AsyncButton from "@/components/AsyncButton";
+import Button from "@/components/Button";
+import LoadingSpinner from "@/components/loading.svg";
+import { PlatformIcon } from "@/components/PlatformSelect/PlatformIcon";
+import { type Preset, usePaginated } from "@/lib/api";
+import { presetUrl } from "@/lib/api/urls";
+import getTranslation from "@/lib/i18n/translate";
 
 export interface Props {
-    url?: string
-    className?: string
-    item?: ({ preset }: { preset: Preset }) => JSX.Element
-    emptyButtonLabel?: ReactNode
+    url?: string;
+    className?: string;
+    item?: ({ preset }: { preset: Preset }) => JSX.Element;
+    emptyButtonLabel?: ReactNode;
 }
 
-export function PresetList({ url, className, item, emptyButtonLabel }: Props): JSX.Element {
-    const { results, isLoading, hasNext, loadNext } = usePaginated<Preset>(url || "/preset")
+export function PresetList({
+    url,
+    className,
+    item,
+    emptyButtonLabel,
+}: Props): JSX.Element {
+    const { results, isLoading, hasNext, loadNext } = usePaginated<Preset>(
+        url || "/preset",
+    );
     if (results.length === 0 && isLoading) {
-        return <div className={classNames("flex items-center justify-center gap-[0.5em] p-[1em] opacity-50", className)}>
-            <LoadingSpinner width="1.5em" height="1.5em" />
-            Just a moment...
-        </div>
+        return (
+            <div
+                className={classNames(
+                    "flex items-center justify-center gap-[0.5em] p-[1em] opacity-50",
+                    className,
+                )}
+            >
+                <LoadingSpinner width="1.5em" height="1.5em" />
+                Just a moment...
+            </div>
+        );
     }
 
-    const Item = item ?? PresetItem
+    const Item = item ?? PresetItem;
 
     return (
-        <ul className={classNames("flex flex-col justify-center gap-[0.5em] overflow-hidden rounded-md border-gray-6 text-sm", className)}>
-            {results.map(preset => (
+        <ul
+            className={classNames(
+                "flex flex-col justify-center gap-[0.5em] overflow-hidden rounded-md border-gray-6 text-sm",
+                className,
+            )}
+        >
+            {results.map((preset) => (
                 <Item hideIcon key={preset.id} preset={preset} />
             ))}
-            {results.length === 0 && emptyButtonLabel && <li className={"col-[span_var(--num-columns,_1)] mt-[0.5em] flex items-center justify-center opacity-70"}>
-                <Link href="/new">
-
-                    <Button>
-                        {emptyButtonLabel}
-                    </Button>
-
-                </Link>
-            </li>}
-            {hasNext && <li className={"col-[span_var(--num-columns,_1)] mt-[0.5em] flex items-center justify-center opacity-70"}>
-                <AsyncButton onClick={loadNext}>
-                    Show more
-                </AsyncButton>
-            </li>}
+            {results.length === 0 && emptyButtonLabel && (
+                <li
+                    className={
+                        "col-[span_var(--num-columns,_1)] mt-[0.5em] flex items-center justify-center opacity-70"
+                    }
+                >
+                    <Link href="/new">
+                        <Button>{emptyButtonLabel}</Button>
+                    </Link>
+                </li>
+            )}
+            {hasNext && (
+                <li
+                    className={
+                        "col-[span_var(--num-columns,_1)] mt-[0.5em] flex items-center justify-center opacity-70"
+                    }
+                >
+                    <AsyncButton onClick={loadNext}>Show more</AsyncButton>
+                </li>
+            )}
         </ul>
-    )
+    );
 }
 
-export function PresetItem({ preset, hideIcon }: { preset: Preset, hideIcon?: boolean }): JSX.Element {
-    const compilersTranslation = getTranslation("compilers")
-    const compilerName = compilersTranslation.t(preset.compiler)
+export function PresetItem({
+    preset,
+    hideIcon,
+}: { preset: Preset; hideIcon?: boolean }): JSX.Element {
+    const compilersTranslation = getTranslation("compilers");
+    const compilerName = compilersTranslation.t(preset.compiler);
 
     return (
         <div className="rounded-md border border-gray-6 p-[1em] text-sm">
             <div className="flex items-center gap-2">
-                {hideIcon && <PlatformIcon platform={preset.platform} className="w-[1.2em]"/>}
-                <a className="font-semibold hover:text-[var(--link)]" href={presetUrl(preset)}>
+                {hideIcon && (
+                    <PlatformIcon
+                        platform={preset.platform}
+                        className="w-[1.2em]"
+                    />
+                )}
+                <a
+                    className="font-semibold hover:text-[var(--link)]"
+                    href={presetUrl(preset)}
+                >
                     {preset.name}
                 </a>
             </div>
             <p className="text-gray-11">{compilerName}</p>
         </div>
-    )
+    );
 }
diff --git a/frontend/src/components/ScoreBadge.tsx b/frontend/src/components/ScoreBadge.tsx
index d72353fe6..4688774c2 100644
--- a/frontend/src/components/ScoreBadge.tsx
+++ b/frontend/src/components/ScoreBadge.tsx
@@ -1,76 +1,97 @@
-import { AlertIcon, CheckIcon } from "@primer/octicons-react"
-import classNames from "classnames"
+import { AlertIcon, CheckIcon } from "@primer/octicons-react";
+import classNames from "classnames";
 
-import styles from "./ScoreBadge.module.scss"
+import styles from "./ScoreBadge.module.scss";
 
 export function calculateScorePercent(score: number, maxScore: number): number {
     if (score > maxScore) {
-        return 0
+        return 0;
     }
 
     if (maxScore === 0) {
-        return 0
+        return 0;
     }
 
-    return ((1 - (score / maxScore)) * 100)
+    return (1 - score / maxScore) * 100;
 }
 
 export function percentToString(percent: number): string {
     // If the percent is an integer, don't show the decimal
     if (Math.floor(percent * 100) / 100 === Math.floor(percent)) {
-        return `${Math.floor(percent)}%`
+        return `${Math.floor(percent)}%`;
     }
     // If percent is between 99.99 and 100 exclusive, always round down
     if (99.99 < percent && percent < 100) {
-        return "99.99%"
+        return "99.99%";
     }
-    return `${percent.toFixed(2)}%`
+    return `${percent.toFixed(2)}%`;
 }
 
-export function getScoreText(score: number, maxScore: number, matchOverride: boolean): string {
+export function getScoreText(
+    score: number,
+    maxScore: number,
+    matchOverride: boolean,
+): string {
     if (score === -1) {
-        return "No score available"
+        return "No score available";
     } else if (score === 0) {
-        return "0 (100%) 🎊"
+        return "0 (100%) 🎊";
     } else if (matchOverride) {
-        return `${score} (100%) 🎊 (override)`
+        return `${score} (100%) 🎊 (override)`;
     } else {
-        const percent = calculateScorePercent(score, maxScore)
+        const percent = calculateScorePercent(score, maxScore);
 
-        return `${score} (${percentToString(percent)})`
+        return `${score} (${percentToString(percent)})`;
     }
 }
 
 export function getScoreAsFraction(score: number, maxScore: number): string {
     if (score === -1) {
-        return `???/${maxScore}`
+        return `???/${maxScore}`;
     } else {
-        return `${maxScore - score}/${maxScore}`
+        return `${maxScore - score}/${maxScore}`;
     }
 }
 
 export type Props = {
-    score: number
-    maxScore: number
-    matchOverride: boolean
-    compiledSuccessfully: boolean
-}
+    score: number;
+    maxScore: number;
+    matchOverride: boolean;
+    compiledSuccessfully: boolean;
+};
 
-export default function ScoreBadge({ score, maxScore, matchOverride, compiledSuccessfully }: Props) {
+export default function ScoreBadge({
+    score,
+    maxScore,
+    matchOverride,
+    compiledSuccessfully,
+}: Props) {
     if (!compiledSuccessfully || score === -1) {
-        return <div className={classNames(styles.badge, { [styles.error]: true })} title="Does not compile">
-            <AlertIcon className={styles.icon} />
-        </div>
+        return (
+            <div
+                className={classNames(styles.badge, { [styles.error]: true })}
+                title="Does not compile"
+            >
+                <AlertIcon className={styles.icon} />
+            </div>
+        );
     } else if (score === 0) {
-        return <div className={classNames(styles.badge, { [styles.match]: true })} title="Match">
-            <CheckIcon className={styles.icon} />
-        </div>
+        return (
+            <div
+                className={classNames(styles.badge, { [styles.match]: true })}
+                title="Match"
+            >
+                <CheckIcon className={styles.icon} />
+            </div>
+        );
     } else {
-        const text = getScoreText(score, maxScore, matchOverride)
-        const title = getScoreAsFraction(score, maxScore)
+        const text = getScoreText(score, maxScore, matchOverride);
+        const title = getScoreAsFraction(score, maxScore);
 
-        return <div className={styles.badge} aria-label="Score" title={title}>
-            {text}
-        </div>
+        return (
+            <div className={styles.badge} aria-label="Score" title={title}>
+                {text}
+            </div>
+        );
     }
 }
diff --git a/frontend/src/components/Scratch/Scratch.tsx b/frontend/src/components/Scratch/Scratch.tsx
index d2b50d511..ec3490474 100644
--- a/frontend/src/components/Scratch/Scratch.tsx
+++ b/frontend/src/components/Scratch/Scratch.tsx
@@ -1,32 +1,41 @@
-import { useEffect, useReducer, useRef, useState } from "react"
+import { useEffect, useReducer, useRef, useState } from "react";
 
-import type { EditorView } from "@codemirror/view"
-import { vim } from "@replit/codemirror-vim"
+import type { EditorView } from "@codemirror/view";
+import { vim } from "@replit/codemirror-vim";
 
-import * as api from "@/lib/api"
-import basicSetup from "@/lib/codemirror/basic-setup"
-import { cpp } from "@/lib/codemirror/cpp"
-import useCompareExtension from "@/lib/codemirror/useCompareExtension"
-import { useSize } from "@/lib/hooks"
-import { useAutoRecompileSetting, useAutoRecompileDelaySetting, useLanguageServerEnabled, useVimModeEnabled, useMatchProgressBarEnabled } from "@/lib/settings"
+import * as api from "@/lib/api";
+import basicSetup from "@/lib/codemirror/basic-setup";
+import { cpp } from "@/lib/codemirror/cpp";
+import useCompareExtension from "@/lib/codemirror/useCompareExtension";
+import { useSize } from "@/lib/hooks";
+import {
+    useAutoRecompileSetting,
+    useAutoRecompileDelaySetting,
+    useLanguageServerEnabled,
+    useVimModeEnabled,
+    useMatchProgressBarEnabled,
+} from "@/lib/settings";
 
-import CompilerOpts from "../compiler/CompilerOpts"
-import CustomLayout, { activateTabInLayout, type Layout } from "../CustomLayout"
-import CompilationPanel from "../Diff/CompilationPanel"
-import CodeMirror from "../Editor/CodeMirror"
-import ErrorBoundary from "../ErrorBoundary"
-import ScoreBadge, { calculateScorePercent } from "../ScoreBadge"
-import { ScrollContext } from "../ScrollContext"
-import { Tab, TabCloseButton } from "../Tabs"
+import CompilerOpts from "../compiler/CompilerOpts";
+import CustomLayout, {
+    activateTabInLayout,
+    type Layout,
+} from "../CustomLayout";
+import CompilationPanel from "../Diff/CompilationPanel";
+import CodeMirror from "../Editor/CodeMirror";
+import ErrorBoundary from "../ErrorBoundary";
+import ScoreBadge, { calculateScorePercent } from "../ScoreBadge";
+import { ScrollContext } from "../ScrollContext";
+import { Tab, TabCloseButton } from "../Tabs";
 
-import useLanguageServer from "./hooks/useLanguageServer"
-import AboutPanel from "./panels/AboutPanel"
-import DecompilationPanel from "./panels/DecompilePanel"
-import FamilyPanel from "./panels/FamilyPanel"
-import styles from "./Scratch.module.scss"
-import ScratchMatchBanner from "./ScratchMatchBanner"
-import ScratchProgressBar from "./ScratchProgressBar"
-import ScratchToolbar from "./ScratchToolbar"
+import useLanguageServer from "./hooks/useLanguageServer";
+import AboutPanel from "./panels/AboutPanel";
+import DecompilationPanel from "./panels/DecompilePanel";
+import FamilyPanel from "./panels/FamilyPanel";
+import styles from "./Scratch.module.scss";
+import ScratchMatchBanner from "./ScratchMatchBanner";
+import ScratchProgressBar from "./ScratchProgressBar";
+import ScratchToolbar from "./ScratchToolbar";
 
 enum TabId {
     ABOUT = "scratch_about",
@@ -62,10 +71,7 @@ const DEFAULT_LAYOUTS: Record<"desktop_2col" | "mobile_2row", Layout> = {
                 kind: "pane",
                 size: 50,
                 activeTab: TabId.DIFF,
-                tabs: [
-                    TabId.DIFF,
-                    TabId.DECOMPILATION,
-                ],
+                tabs: [TabId.DIFF, TabId.DECOMPILATION],
             },
         ],
     },
@@ -91,35 +97,31 @@ const DEFAULT_LAYOUTS: Record<"desktop_2col" | "mobile_2row", Layout> = {
                 kind: "pane",
                 size: 50,
                 activeTab: TabId.SOURCE_CODE,
-                tabs: [
-                    TabId.SOURCE_CODE,
-                    TabId.CONTEXT,
-                    TabId.OPTIONS,
-                ],
+                tabs: [TabId.SOURCE_CODE, TabId.CONTEXT, TabId.OPTIONS],
             },
         ],
     },
-}
+};
 
-const CODEMIRROR_EXTENSIONS = [
-    basicSetup,
-    cpp(),
-]
-function getDefaultLayout(width: number, _height: number): keyof typeof DEFAULT_LAYOUTS {
+const CODEMIRROR_EXTENSIONS = [basicSetup, cpp()];
+function getDefaultLayout(
+    width: number,
+    _height: number,
+): keyof typeof DEFAULT_LAYOUTS {
     if (width > 700) {
-        return "desktop_2col"
+        return "desktop_2col";
     }
 
-    return "mobile_2row"
+    return "mobile_2row";
 }
 
 export type Props = {
-    scratch: Readonly<api.Scratch>
-    onChange: (scratch: Partial<api.Scratch>) => void
-    parentScratch?: api.Scratch
-    initialCompilation?: Readonly<api.Compilation>
-    offline: boolean
-}
+    scratch: Readonly<api.Scratch>;
+    onChange: (scratch: Partial<api.Scratch>) => void;
+    parentScratch?: api.Scratch;
+    initialCompilation?: Readonly<api.Compilation>;
+    offline: boolean;
+};
 
 export default function Scratch({
     scratch,
@@ -128,225 +130,322 @@ export default function Scratch({
     initialCompilation,
     offline,
 }: Props) {
-    const container = useSize<HTMLDivElement>()
-    const [layout, setLayout] = useState<Layout>(undefined)
-    const [layoutName, setLayoutName] = useState<keyof typeof DEFAULT_LAYOUTS>(undefined)
+    const container = useSize<HTMLDivElement>();
+    const [layout, setLayout] = useState<Layout>(undefined);
+    const [layoutName, setLayoutName] =
+        useState<keyof typeof DEFAULT_LAYOUTS>(undefined);
 
-    const [autoRecompileSetting] = useAutoRecompileSetting()
-    const [autoRecompileDelaySetting] = useAutoRecompileDelaySetting()
-    const [languageServerEnabledSetting] = useLanguageServerEnabled()
-    const [matchProgressBarEnabledSetting] = useMatchProgressBarEnabled()
-    const { compilation, isCompiling, isCompilationOld, compile } = api.useCompilation(scratch, autoRecompileSetting, autoRecompileDelaySetting, initialCompilation)
-    const userIsYou = api.useUserIsYou()
-    const [selectedSourceLine, setSelectedSourceLine] = useState<number | null>()
-    const sourceEditor = useRef<EditorView>()
-    const contextEditor = useRef<EditorView>()
-    const [valueVersion, incrementValueVersion] = useReducer(x => x + 1, 0)
+    const [autoRecompileSetting] = useAutoRecompileSetting();
+    const [autoRecompileDelaySetting] = useAutoRecompileDelaySetting();
+    const [languageServerEnabledSetting] = useLanguageServerEnabled();
+    const [matchProgressBarEnabledSetting] = useMatchProgressBarEnabled();
+    const { compilation, isCompiling, isCompilationOld, compile } =
+        api.useCompilation(
+            scratch,
+            autoRecompileSetting,
+            autoRecompileDelaySetting,
+            initialCompilation,
+        );
+    const userIsYou = api.useUserIsYou();
+    const [selectedSourceLine, setSelectedSourceLine] = useState<
+        number | null
+    >();
+    const sourceEditor = useRef<EditorView>();
+    const contextEditor = useRef<EditorView>();
+    const [valueVersion, incrementValueVersion] = useReducer((x) => x + 1, 0);
 
-    const [isModified, setIsModified] = useState(false)
+    const [isModified, setIsModified] = useState(false);
     const setScratch = (scratch: Partial<api.Scratch>) => {
-        onChange(scratch)
-        setIsModified(true)
-    }
-    const [perSaveObj, setPerSaveObj] = useState({})
+        onChange(scratch);
+        setIsModified(true);
+    };
+    const [perSaveObj, setPerSaveObj] = useState({});
     const saveCallback = () => {
-        setPerSaveObj({})
-    }
+        setPerSaveObj({});
+    };
 
-    const shouldCompare = !isModified
-    const sourceCompareExtension = useCompareExtension(sourceEditor, shouldCompare ? parentScratch?.source_code : undefined)
-    const contextCompareExtension = useCompareExtension(contextEditor, shouldCompare ? parentScratch?.context : undefined)
+    const shouldCompare = !isModified;
+    const sourceCompareExtension = useCompareExtension(
+        sourceEditor,
+        shouldCompare ? parentScratch?.source_code : undefined,
+    );
+    const contextCompareExtension = useCompareExtension(
+        contextEditor,
+        shouldCompare ? parentScratch?.context : undefined,
+    );
 
-    const [saveSource, saveContext] = useLanguageServer(languageServerEnabledSetting, scratch, sourceEditor, contextEditor)
+    const [saveSource, saveContext] = useLanguageServer(
+        languageServerEnabledSetting,
+        scratch,
+        sourceEditor,
+        contextEditor,
+    );
 
-    const lastGoodScore = useRef<number>(scratch.score)
-    const lastGoodMaxScore = useRef<number>(scratch.max_score)
+    const lastGoodScore = useRef<number>(scratch.score);
+    const lastGoodMaxScore = useRef<number>(scratch.max_score);
     if (compilation?.success) {
-        lastGoodScore.current = compilation?.diff_output?.current_score
-        lastGoodMaxScore.current = compilation?.diff_output?.max_score
+        lastGoodScore.current = compilation?.diff_output?.current_score;
+        lastGoodMaxScore.current = compilation?.diff_output?.max_score;
     }
 
     // TODO: CustomLayout should handle adding/removing tabs
-    const [decompilationTabEnabled, setDecompilationTabEnabled] = useState(false)
+    const [decompilationTabEnabled, setDecompilationTabEnabled] =
+        useState(false);
     useEffect(() => {
         if (decompilationTabEnabled) {
-            setLayout(layout => {
-                const clone = { ...layout }
-                activateTabInLayout(clone, TabId.DECOMPILATION)
-                return clone
-            })
+            setLayout((layout) => {
+                const clone = { ...layout };
+                activateTabInLayout(clone, TabId.DECOMPILATION);
+                return clone;
+            });
         }
-    }, [decompilationTabEnabled])
+    }, [decompilationTabEnabled]);
 
     // If the version of the scratch changes, refresh code editors
     useEffect(() => {
-        incrementValueVersion()
-    }, [scratch.slug, scratch.last_updated])
+        incrementValueVersion();
+    }, [scratch.slug, scratch.last_updated]);
 
-    const [useVim] = useVimModeEnabled()
-    const cmExtensionsSource = [...CODEMIRROR_EXTENSIONS, sourceCompareExtension]
-    const cmExtensionsContext = [...CODEMIRROR_EXTENSIONS, contextCompareExtension]
+    const [useVim] = useVimModeEnabled();
+    const cmExtensionsSource = [
+        ...CODEMIRROR_EXTENSIONS,
+        sourceCompareExtension,
+    ];
+    const cmExtensionsContext = [
+        ...CODEMIRROR_EXTENSIONS,
+        contextCompareExtension,
+    ];
     if (useVim) {
-        cmExtensionsSource.push(vim())
-        cmExtensionsContext.push(vim())
+        cmExtensionsSource.push(vim());
+        cmExtensionsContext.push(vim());
     }
 
     const renderTab = (id: string) => {
         switch (id as TabId) {
-        case TabId.ABOUT:
-            return <Tab key={id} tabKey={id} label="About" className={styles.about}>
-                <AboutPanel
-                    scratch={scratch}
-                    setScratch={userIsYou(scratch.owner) ? setScratch : null}
-                />
-            </Tab>
-        case TabId.SOURCE_CODE:
-            return <Tab
-                key={id}
-                tabKey={id}
-                label="Source code"
-                onSelect={() => {
-                    sourceEditor.current?.focus?.()
-                    saveContext()
-                }}
-            >
-                <CodeMirror
-                    viewRef={sourceEditor}
-                    className={styles.editor}
-                    value={scratch.source_code}
-                    valueVersion={valueVersion}
-                    onChange={value => {
-                        setScratch({ source_code: value })
-                    }}
-                    onSelectedLineChange={setSelectedSourceLine}
-                    extensions={cmExtensionsSource}
-                />
-            </Tab>
-        case TabId.CONTEXT:
-            return <Tab
-                key={id}
-                tabKey={id}
-                label="Context"
-                className={styles.context}
-                onSelect={() => {
-                    contextEditor.current?.focus?.()
-                    saveSource()
-                }}
-            >
-                <CodeMirror
-                    viewRef={contextEditor}
-                    className={styles.editor}
-                    value={scratch.context}
-                    valueVersion={valueVersion}
-                    onChange={value => {
-                        setScratch({ context: value })
-                    }}
-                    extensions={cmExtensionsContext}
-                />
-            </Tab>
-        case TabId.OPTIONS:
-            return <Tab key={id} tabKey={id} label="Options" className={styles.compilerOptsTab}>
-                <div className={styles.compilerOptsContainer}>
-                    <CompilerOpts
-                        platform={scratch.platform}
-                        value={scratch}
-                        onChange={setScratch}
-
-                        diffLabel={scratch.diff_label}
-                        onDiffLabelChange={d => setScratch({ diff_label: d })}
-
-                        matchOverride={scratch.match_override}
-                        onMatchOverrideChange={m => setScratch({ match_override: m })}
-                    />
-                </div>
-            </Tab>
-        case TabId.DIFF:
-            return <Tab
-                key={id}
-                tabKey={id}
-                label={<>
-                    Compilation
-                    {compilation && <ScoreBadge
-                        score={compilation?.diff_output?.current_score ?? -1}
-                        maxScore={compilation?.diff_output?.max_score ?? -1}
-                        matchOverride={scratch.match_override}
-                        compiledSuccessfully={compilation?.success ?? false} />}
-                </>}
-                className={styles.diffTab}
-            >
-                {compilation && <CompilationPanel
-                    scratch={scratch}
-                    compilation={compilation}
-                    isCompiling={isCompiling}
-                    isCompilationOld={isCompilationOld}
-                    selectedSourceLine={selectedSourceLine}
-                    perSaveObj={perSaveObj}
-                />}
-            </Tab>
-        case TabId.DECOMPILATION:
-            return decompilationTabEnabled && <Tab
-                key={id}
-                tabKey={id}
-                label={<>
-                    Decompilation
-                    <TabCloseButton onClick={() => setDecompilationTabEnabled(false)} />
-                </>}
-            >
-                {() => <DecompilationPanel scratch={scratch} />}
-            </Tab>
-        case TabId.FAMILY:
-            return <Tab key={id} tabKey={id} label="Family">
-                {() => <FamilyPanel scratch={scratch} />}
-            </Tab>
-        default:
-            return <Tab key={id} tabKey={id} label={id} disabled />
+            case TabId.ABOUT:
+                return (
+                    <Tab
+                        key={id}
+                        tabKey={id}
+                        label="About"
+                        className={styles.about}
+                    >
+                        <AboutPanel
+                            scratch={scratch}
+                            setScratch={
+                                userIsYou(scratch.owner) ? setScratch : null
+                            }
+                        />
+                    </Tab>
+                );
+            case TabId.SOURCE_CODE:
+                return (
+                    <Tab
+                        key={id}
+                        tabKey={id}
+                        label="Source code"
+                        onSelect={() => {
+                            sourceEditor.current?.focus?.();
+                            saveContext();
+                        }}
+                    >
+                        <CodeMirror
+                            viewRef={sourceEditor}
+                            className={styles.editor}
+                            value={scratch.source_code}
+                            valueVersion={valueVersion}
+                            onChange={(value) => {
+                                setScratch({ source_code: value });
+                            }}
+                            onSelectedLineChange={setSelectedSourceLine}
+                            extensions={cmExtensionsSource}
+                        />
+                    </Tab>
+                );
+            case TabId.CONTEXT:
+                return (
+                    <Tab
+                        key={id}
+                        tabKey={id}
+                        label="Context"
+                        className={styles.context}
+                        onSelect={() => {
+                            contextEditor.current?.focus?.();
+                            saveSource();
+                        }}
+                    >
+                        <CodeMirror
+                            viewRef={contextEditor}
+                            className={styles.editor}
+                            value={scratch.context}
+                            valueVersion={valueVersion}
+                            onChange={(value) => {
+                                setScratch({ context: value });
+                            }}
+                            extensions={cmExtensionsContext}
+                        />
+                    </Tab>
+                );
+            case TabId.OPTIONS:
+                return (
+                    <Tab
+                        key={id}
+                        tabKey={id}
+                        label="Options"
+                        className={styles.compilerOptsTab}
+                    >
+                        <div className={styles.compilerOptsContainer}>
+                            <CompilerOpts
+                                platform={scratch.platform}
+                                value={scratch}
+                                onChange={setScratch}
+                                diffLabel={scratch.diff_label}
+                                onDiffLabelChange={(d) =>
+                                    setScratch({ diff_label: d })
+                                }
+                                matchOverride={scratch.match_override}
+                                onMatchOverrideChange={(m) =>
+                                    setScratch({ match_override: m })
+                                }
+                            />
+                        </div>
+                    </Tab>
+                );
+            case TabId.DIFF:
+                return (
+                    <Tab
+                        key={id}
+                        tabKey={id}
+                        label={
+                            <>
+                                Compilation
+                                {compilation && (
+                                    <ScoreBadge
+                                        score={
+                                            compilation?.diff_output
+                                                ?.current_score ?? -1
+                                        }
+                                        maxScore={
+                                            compilation?.diff_output
+                                                ?.max_score ?? -1
+                                        }
+                                        matchOverride={scratch.match_override}
+                                        compiledSuccessfully={
+                                            compilation?.success ?? false
+                                        }
+                                    />
+                                )}
+                            </>
+                        }
+                        className={styles.diffTab}
+                    >
+                        {compilation && (
+                            <CompilationPanel
+                                scratch={scratch}
+                                compilation={compilation}
+                                isCompiling={isCompiling}
+                                isCompilationOld={isCompilationOld}
+                                selectedSourceLine={selectedSourceLine}
+                                perSaveObj={perSaveObj}
+                            />
+                        )}
+                    </Tab>
+                );
+            case TabId.DECOMPILATION:
+                return (
+                    decompilationTabEnabled && (
+                        <Tab
+                            key={id}
+                            tabKey={id}
+                            label={
+                                <>
+                                    Decompilation
+                                    <TabCloseButton
+                                        onClick={() =>
+                                            setDecompilationTabEnabled(false)
+                                        }
+                                    />
+                                </>
+                            }
+                        >
+                            {() => <DecompilationPanel scratch={scratch} />}
+                        </Tab>
+                    )
+                );
+            case TabId.FAMILY:
+                return (
+                    <Tab key={id} tabKey={id} label="Family">
+                        {() => <FamilyPanel scratch={scratch} />}
+                    </Tab>
+                );
+            default:
+                return <Tab key={id} tabKey={id} label={id} disabled />;
         }
-    }
+    };
 
     if (container.width) {
-        const preferredLayout = getDefaultLayout(container.width, container.height)
+        const preferredLayout = getDefaultLayout(
+            container.width,
+            container.height,
+        );
 
         if (layoutName !== preferredLayout) {
-            setLayoutName(preferredLayout)
-            setLayout(DEFAULT_LAYOUTS[preferredLayout])
+            setLayoutName(preferredLayout);
+            setLayout(DEFAULT_LAYOUTS[preferredLayout]);
         }
     }
 
-    const offlineOverlay = (
-        offline ? <>
+    const offlineOverlay = offline ? (
+        <>
             <div className="fixed top-10 self-center rounded bg-red-8 px-3 py-2">
-                <p className="text-sm">The scratch editor is in offline mode. We're attempting to reconnect to the backend – as long as this tab is open, your work is safe.</p>
+                <p className="text-sm">
+                    The scratch editor is in offline mode. We're attempting to
+                    reconnect to the backend – as long as this tab is open, your
+                    work is safe.
+                </p>
             </div>
         </>
-            : <></>
-    )
+    ) : (
+        <></>
+    );
 
-    const matchPercent = calculateScorePercent(lastGoodScore.current, lastGoodMaxScore.current)
+    const matchPercent = calculateScorePercent(
+        lastGoodScore.current,
+        lastGoodMaxScore.current,
+    );
 
-    return <div ref={container.ref} className={styles.container}>
-        <ErrorBoundary>
-            <ScratchMatchBanner scratch={scratch} />
-        </ErrorBoundary>
-        <ErrorBoundary>
-            <ScratchToolbar
-                compile={compile}
-                isCompiling={isCompiling}
-                scratch={scratch}
-                setScratch={setScratch}
-                saveCallback={saveCallback}
-                setDecompilationTabEnabled={setDecompilationTabEnabled}
-            />
-            {matchProgressBarEnabledSetting && <div className={styles.progressbar}><ScratchProgressBar matchPercent={matchPercent} /></div>}
-        </ErrorBoundary>
-        <ErrorBoundary>
-            {layout && <ScrollContext.Provider value={sourceEditor}>
-                <CustomLayout
-                    layout={layout}
-                    onChange={setLayout}
-                    renderTab={renderTab}
+    return (
+        <div ref={container.ref} className={styles.container}>
+            <ErrorBoundary>
+                <ScratchMatchBanner scratch={scratch} />
+            </ErrorBoundary>
+            <ErrorBoundary>
+                <ScratchToolbar
+                    compile={compile}
+                    isCompiling={isCompiling}
+                    scratch={scratch}
+                    setScratch={setScratch}
+                    saveCallback={saveCallback}
+                    setDecompilationTabEnabled={setDecompilationTabEnabled}
                 />
-            </ScrollContext.Provider>}
-        </ErrorBoundary>
-        {offlineOverlay}
-    </div>
+                {matchProgressBarEnabledSetting && (
+                    <div className={styles.progressbar}>
+                        <ScratchProgressBar matchPercent={matchPercent} />
+                    </div>
+                )}
+            </ErrorBoundary>
+            <ErrorBoundary>
+                {layout && (
+                    <ScrollContext.Provider value={sourceEditor}>
+                        <CustomLayout
+                            layout={layout}
+                            onChange={setLayout}
+                            renderTab={renderTab}
+                        />
+                    </ScrollContext.Provider>
+                )}
+            </ErrorBoundary>
+            {offlineOverlay}
+        </div>
+    );
 }
diff --git a/frontend/src/components/Scratch/ScratchMatchBanner.tsx b/frontend/src/components/Scratch/ScratchMatchBanner.tsx
index 4bfba5e38..8075be566 100644
--- a/frontend/src/components/Scratch/ScratchMatchBanner.tsx
+++ b/frontend/src/components/Scratch/ScratchMatchBanner.tsx
@@ -1,34 +1,38 @@
-import Link from "next/link"
+import Link from "next/link";
 
-import useSWR from "swr"
+import useSWR from "swr";
 
-import * as api from "@/lib/api"
-import { scratchUrl } from "@/lib/api/urls"
+import * as api from "@/lib/api";
+import { scratchUrl } from "@/lib/api/urls";
 
-import DismissableBanner from "../DismissableBanner"
+import DismissableBanner from "../DismissableBanner";
 
-export default function ScratchMatchBanner({ scratch }: { scratch: api.TerseScratch }) {
-    const userIsYou = api.useUserIsYou()
-    const { data, error } = useSWR<api.TerseScratch[]>(`${scratchUrl(scratch)}/family`, api.get, {
-        refreshInterval: 60 * 1000, // 1 minute
-    })
+export default function ScratchMatchBanner({
+    scratch,
+}: { scratch: api.TerseScratch }) {
+    const userIsYou = api.useUserIsYou();
+    const { data, error } = useSWR<api.TerseScratch[]>(
+        `${scratchUrl(scratch)}/family`,
+        api.get,
+        {
+            refreshInterval: 60 * 1000, // 1 minute
+        },
+    );
 
     // Consciously not including match_override here, since it's not really banner-worthy
-    const match = data?.find(s => s.score === 0 && s.slug !== scratch.slug)
+    const match = data?.find((s) => s.score === 0 && s.slug !== scratch.slug);
 
-    if (error)
-        throw error
+    if (error) throw error;
 
-    if (scratch.score === 0 || !match)
-        return null
+    if (scratch.score === 0 || !match) return null;
 
-    let message = "This function has been matched"
-    if (userIsYou(match.owner))
-        message += " by you, elsewhere"
-    else if (match.owner)
-        message += ` by ${match.owner.username}`
+    let message = "This function has been matched";
+    if (userIsYou(match.owner)) message += " by you, elsewhere";
+    else if (match.owner) message += ` by ${match.owner.username}`;
 
-    return <DismissableBanner>
-        {message}. <Link href={scratchUrl(match)}>View match</Link>
-    </DismissableBanner>
+    return (
+        <DismissableBanner>
+            {message}. <Link href={scratchUrl(match)}>View match</Link>
+        </DismissableBanner>
+    );
 }
diff --git a/frontend/src/components/Scratch/ScratchProgressBar.tsx b/frontend/src/components/Scratch/ScratchProgressBar.tsx
index e2c978dbd..3a48e61f1 100644
--- a/frontend/src/components/Scratch/ScratchProgressBar.tsx
+++ b/frontend/src/components/Scratch/ScratchProgressBar.tsx
@@ -1,12 +1,19 @@
-import * as Progress from "@radix-ui/react-progress"
+import * as Progress from "@radix-ui/react-progress";
 
-import styles from "./ScratchProgressbar.module.scss"
+import styles from "./ScratchProgressbar.module.scss";
 
-export default function ScratchProgressBar({ matchPercent }: {matchPercent: number}) {
-    return <Progress.Root className={styles.ProgressRoot} value={matchPercent}>
-        <Progress.Indicator
-            className={styles.ProgressIndicator}
-            style={{ transform: `translateX(-${100 - matchPercent}%)`, backgroundColor: `hsl(271, ${matchPercent * 0.91}%, ${30 + (matchPercent * 0.35)}%)` }}
-        />
-    </Progress.Root>
+export default function ScratchProgressBar({
+    matchPercent,
+}: { matchPercent: number }) {
+    return (
+        <Progress.Root className={styles.ProgressRoot} value={matchPercent}>
+            <Progress.Indicator
+                className={styles.ProgressIndicator}
+                style={{
+                    transform: `translateX(-${100 - matchPercent}%)`,
+                    backgroundColor: `hsl(271, ${matchPercent * 0.91}%, ${30 + matchPercent * 0.35}%)`,
+                }}
+            />
+        </Progress.Root>
+    );
 }
diff --git a/frontend/src/components/Scratch/ScratchToolbar.tsx b/frontend/src/components/Scratch/ScratchToolbar.tsx
index 59537b540..d8d537958 100644
--- a/frontend/src/components/Scratch/ScratchToolbar.tsx
+++ b/frontend/src/components/Scratch/ScratchToolbar.tsx
@@ -1,169 +1,199 @@
-import { useEffect, useRef, useState, type FC } from "react"
-
-import Link from "next/link"
-
-import { DownloadIcon, FileIcon, IterationsIcon, RepoForkedIcon, SyncIcon, TrashIcon, UploadIcon } from "@primer/octicons-react"
-import classNames from "classnames"
-import ContentEditable from "react-contenteditable"
-
-import TimeAgo from "@/components/TimeAgo"
-import * as api from "@/lib/api"
-import { scratchUrl } from "@/lib/api/urls"
-import { useSize } from "@/lib/hooks"
-
-import Breadcrumbs from "../Breadcrumbs"
-import Nav from "../Nav"
-import PlatformLink from "../PlatformLink"
-import { SpecialKey, useShortcut } from "../Shortcut"
-import UserAvatar from "../user/UserAvatar"
-
-import useFuzzySaveCallback, { FuzzySaveAction } from "./hooks/useFuzzySaveCallback"
-import styles from "./ScratchToolbar.module.scss"
-
-const ACTIVE_MS = 1000 * 60
+import { useEffect, useRef, useState, type FC } from "react";
+
+import Link from "next/link";
+
+import {
+    DownloadIcon,
+    FileIcon,
+    IterationsIcon,
+    RepoForkedIcon,
+    SyncIcon,
+    TrashIcon,
+    UploadIcon,
+} from "@primer/octicons-react";
+import classNames from "classnames";
+import ContentEditable from "react-contenteditable";
+
+import TimeAgo from "@/components/TimeAgo";
+import * as api from "@/lib/api";
+import { scratchUrl } from "@/lib/api/urls";
+import { useSize } from "@/lib/hooks";
+
+import Breadcrumbs from "../Breadcrumbs";
+import Nav from "../Nav";
+import PlatformLink from "../PlatformLink";
+import { SpecialKey, useShortcut } from "../Shortcut";
+import UserAvatar from "../user/UserAvatar";
+
+import useFuzzySaveCallback, {
+    FuzzySaveAction,
+} from "./hooks/useFuzzySaveCallback";
+import styles from "./ScratchToolbar.module.scss";
+
+const ACTIVE_MS = 1000 * 60;
 
 // Prevents XSS
 function htmlTextOnly(html: string): string {
-    return html.replace(/</g, "&lt;").replace(/>/g, "&gt;")
+    return html.replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 
 function exportScratchZip(scratch: api.Scratch) {
-    const url = api.normalizeUrl(`${scratchUrl(scratch)}/export`)
-    const a = document.createElement("a")
-    a.href = url
-    a.download = `${scratch.name}.zip`
-    a.click()
+    const url = api.normalizeUrl(`${scratchUrl(scratch)}/export`);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${scratch.name}.zip`;
+    a.click();
 }
 
 async function deleteScratch(scratch: api.Scratch) {
-    await api.delete_(scratchUrl(scratch), {})
+    await api.delete_(scratchUrl(scratch), {});
 
-    window.location.href = scratch.project ? `/${scratch.project}` : "/"
+    window.location.href = scratch.project ? `/${scratch.project}` : "/";
 }
 
 function EditTimeAgo({ date }: { date: string }) {
-    const isActive = (Date.now() - (new Date(date)).getTime()) < ACTIVE_MS
+    const isActive = Date.now() - new Date(date).getTime() < ACTIVE_MS;
 
     // Rerender after ACTIVE_MS has elapsed if isActive=true
-    const [, forceUpdate] = useState({})
+    const [, forceUpdate] = useState({});
     useEffect(() => {
         if (isActive) {
-            const interval = setTimeout(() => forceUpdate({}), ACTIVE_MS)
-            return () => clearInterval(interval)
+            const interval = setTimeout(() => forceUpdate({}), ACTIVE_MS);
+            return () => clearInterval(interval);
         }
-    }, [isActive])
-
-    return <span className={styles.lastEditTime}>
-        {isActive ? <>
-            Active now
-        </> : <>
-            <TimeAgo date={date} />
-        </>}
-    </span>
+    }, [isActive]);
+
+    return (
+        <span className={styles.lastEditTime}>
+            {isActive ? (
+                <>Active now</>
+            ) : (
+                <>
+                    <TimeAgo date={date} />
+                </>
+            )}
+        </span>
+    );
 }
 
-function ScratchName({ name, onChange }: { name: string, onChange?: (name: string) => void }) {
-    const [isEditing, setEditing] = useState(false)
-    const editableRef = useRef<HTMLDivElement>()
+function ScratchName({
+    name,
+    onChange,
+}: { name: string; onChange?: (name: string) => void }) {
+    const [isEditing, setEditing] = useState(false);
+    const editableRef = useRef<HTMLDivElement>();
 
     useEffect(() => {
-        const el = editableRef.current
+        const el = editableRef.current;
 
         if (el) {
-            const range = document.createRange()
-            range.selectNodeContents(el)
-            const sel = window.getSelection()
-            sel.removeAllRanges()
-            sel.addRange(range)
+            const range = document.createRange();
+            range.selectNodeContents(el);
+            const sel = window.getSelection();
+            sel.removeAllRanges();
+            sel.addRange(range);
         }
-    }, [isEditing])
+    }, [isEditing]);
 
     if (isEditing) {
-        return <ContentEditable
-            innerRef={editableRef}
-            tagName="div"
-            html={htmlTextOnly(name)}
-            spellCheck={false}
-            className={styles.name}
-
-            onChange={evt => {
-                const name = evt.currentTarget.innerText as string
-                if (name.length !== 0)
-                    onChange(name)
-            }}
-
-            onPaste={evt => {
-                // Only allow pasting text, rather than any HTML. This is redundant due
-                // to htmlTextOnly but it's nice not to show "<img>" when you paste an image.
-
-                evt.preventDefault()
-                const text = evt.clipboardData.getData("text")
-
-                // note: we're using document.execCommand, which is deprecated,
-                // but its no big deal if it doesn't work.
-                document.execCommand("insertText", false, text)
-            }}
-
-            onBlur={() => setEditing(false)}
-
-            onKeyDown={evt => {
-                if (evt.key === "Enter") {
-                    evt.preventDefault()
-                    setEditing(false)
-                }
-            }}
-        />
+        return (
+            <ContentEditable
+                innerRef={editableRef}
+                tagName="div"
+                html={htmlTextOnly(name)}
+                spellCheck={false}
+                className={styles.name}
+                onChange={(evt) => {
+                    const name = evt.currentTarget.innerText as string;
+                    if (name.length !== 0) onChange(name);
+                }}
+                onPaste={(evt) => {
+                    // Only allow pasting text, rather than any HTML. This is redundant due
+                    // to htmlTextOnly but it's nice not to show "<img>" when you paste an image.
+
+                    evt.preventDefault();
+                    const text = evt.clipboardData.getData("text");
+
+                    // note: we're using document.execCommand, which is deprecated,
+                    // but its no big deal if it doesn't work.
+                    document.execCommand("insertText", false, text);
+                }}
+                onBlur={() => setEditing(false)}
+                onKeyDown={(evt) => {
+                    if (evt.key === "Enter") {
+                        evt.preventDefault();
+                        setEditing(false);
+                    }
+                }}
+            />
+        );
     } else {
-        return <div
-            className={classNames(styles.name, { [styles.editable]: !!onChange })}
-            onClick={() => {
-                if (onChange)
-                    setEditing(true)
-            }}
-        >
-            {name}
-        </div>
+        return (
+            <div
+                className={classNames(styles.name, {
+                    [styles.editable]: !!onChange,
+                })}
+                onClick={() => {
+                    if (onChange) setEditing(true);
+                }}
+            >
+                {name}
+            </div>
+        );
     }
 }
 
-function Actions({ isCompiling, compile, scratch, setScratch, saveCallback, setDecompilationTabEnabled }: Props) {
-    const userIsYou = api.useUserIsYou()
-    const forkScratch = api.useForkScratchAndGo(scratch)
-    const [fuzzySaveAction, fuzzySaveScratch] = useFuzzySaveCallback(scratch, setScratch)
-    const [isSaving, setIsSaving] = useState(false)
-    const [isForking, setIsForking] = useState(false)
-    const canSave = scratch.owner && userIsYou(scratch.owner)
-
-    const platform = api.usePlatform(scratch.platform)
-
-    const fuzzyShortcut = useShortcut([SpecialKey.CTRL_COMMAND, "S"], async () => {
-        setIsSaving(true)
-        await fuzzySaveScratch()
-        setIsSaving(false)
-        saveCallback()
-    })
+function Actions({
+    isCompiling,
+    compile,
+    scratch,
+    setScratch,
+    saveCallback,
+    setDecompilationTabEnabled,
+}: Props) {
+    const userIsYou = api.useUserIsYou();
+    const forkScratch = api.useForkScratchAndGo(scratch);
+    const [fuzzySaveAction, fuzzySaveScratch] = useFuzzySaveCallback(
+        scratch,
+        setScratch,
+    );
+    const [isSaving, setIsSaving] = useState(false);
+    const [isForking, setIsForking] = useState(false);
+    const canSave = scratch.owner && userIsYou(scratch.owner);
+
+    const platform = api.usePlatform(scratch.platform);
+
+    const fuzzyShortcut = useShortcut(
+        [SpecialKey.CTRL_COMMAND, "S"],
+        async () => {
+            setIsSaving(true);
+            await fuzzySaveScratch();
+            setIsSaving(false);
+            saveCallback();
+        },
+    );
 
     const compileShortcut = useShortcut([SpecialKey.CTRL_COMMAND, "J"], () => {
-        compile()
-    })
+        compile();
+    });
 
-    const isAdmin = api.useThisUserIsAdmin()
+    const isAdmin = api.useThisUserIsAdmin();
 
     return (
         <ul className={styles.actions} aria-label="Scratch actions">
             <li>
                 <Link href="/new">
-
-                    <FileIcon />New
+                    <FileIcon />
+                    New
                 </Link>
             </li>
             <li>
                 <button
                     onClick={async () => {
-                        setIsSaving(true)
-                        await fuzzySaveScratch()
-                        setIsSaving(false)
-                        saveCallback()
+                        setIsSaving(true);
+                        await fuzzySaveScratch();
+                        setIsSaving(false);
+                        saveCallback();
                     }}
                     disabled={!canSave || isSaving}
                     title={fuzzyShortcut}
@@ -175,32 +205,45 @@ function Actions({ isCompiling, compile, scratch, setScratch, saveCallback, setD
             <li>
                 <button
                     onClick={async () => {
-                        setIsForking(true)
-                        await forkScratch()
-                        setIsForking(false)
-                        saveCallback()
+                        setIsForking(true);
+                        await forkScratch();
+                        setIsForking(false);
+                        saveCallback();
                     }}
                     disabled={isForking}
-                    title={fuzzySaveAction === FuzzySaveAction.FORK ? fuzzyShortcut : undefined}
+                    title={
+                        fuzzySaveAction === FuzzySaveAction.FORK
+                            ? fuzzyShortcut
+                            : undefined
+                    }
                 >
                     <RepoForkedIcon />
                     Fork
                 </button>
             </li>
-            {((scratch.owner && userIsYou(scratch.owner)) || isAdmin) && <li>
-                <button onClick={event => {
-                    if (event.shiftKey || confirm("Are you sure you want to delete this scratch? This action cannot be undone.")) {
-                        deleteScratch(scratch)
-                    }
-                }}>
-                    <TrashIcon />
+            {((scratch.owner && userIsYou(scratch.owner)) || isAdmin) && (
+                <li>
+                    <button
+                        onClick={(event) => {
+                            if (
+                                event.shiftKey ||
+                                confirm(
+                                    "Are you sure you want to delete this scratch? This action cannot be undone.",
+                                )
+                            ) {
+                                deleteScratch(scratch);
+                            }
+                        }}
+                    >
+                        <TrashIcon />
                         Delete
-                </button>
-            </li>}
+                    </button>
+                </li>
+            )}
             <li>
                 <button onClick={() => exportScratchZip(scratch)}>
                     <DownloadIcon />
-                        Export
+                    Export
                 </button>
             </li>
             <li>
@@ -213,16 +256,16 @@ function Actions({ isCompiling, compile, scratch, setScratch, saveCallback, setD
                     Compile
                 </button>
             </li>
-            {platform?.has_decompiler &&
+            {platform?.has_decompiler && (
                 <li>
                     <button onClick={() => setDecompilationTabEnabled(true)}>
                         <IterationsIcon />
                         Decompile
                     </button>
                 </li>
-            }
+            )}
         </ul>
-    )
+    );
 }
 
 enum ActionsLocation {
@@ -231,73 +274,104 @@ enum ActionsLocation {
 }
 
 function useActionsLocation(): [ActionsLocation, FC<Props>] {
-    const inNavActions = useSize<HTMLDivElement>()
+    const inNavActions = useSize<HTMLDivElement>();
 
-    let location = ActionsLocation.BELOW_NAV
+    let location = ActionsLocation.BELOW_NAV;
 
-    const el = inNavActions.ref.current
+    const el = inNavActions.ref.current;
     if (el) {
         if (el.clientWidth === el.scrollWidth) {
-            location = ActionsLocation.IN_NAV
+            location = ActionsLocation.IN_NAV;
         }
     }
 
     return [
         location,
-        (props: Props) => <div
-            ref={inNavActions.ref}
-            aria-hidden={location !== ActionsLocation.IN_NAV}
-            className={styles.inNavActionsContainer}
-        >
-            <Actions {...props} />
-        </div>,
-    ]
+        (props: Props) => (
+            <div
+                ref={inNavActions.ref}
+                aria-hidden={location !== ActionsLocation.IN_NAV}
+                className={styles.inNavActionsContainer}
+            >
+                <Actions {...props} />
+            </div>
+        ),
+    ];
 }
 
 export type Props = {
-    isCompiling: boolean
-    compile: () => Promise<void>
-    scratch: Readonly<api.Scratch>
-    setScratch: (scratch: Partial<api.Scratch>) => void
-    saveCallback: () => void
-    setDecompilationTabEnabled: (enabled: boolean) => void
-}
+    isCompiling: boolean;
+    compile: () => Promise<void>;
+    scratch: Readonly<api.Scratch>;
+    setScratch: (scratch: Partial<api.Scratch>) => void;
+    saveCallback: () => void;
+    setDecompilationTabEnabled: (enabled: boolean) => void;
+};
 
 export default function ScratchToolbar(props: Props) {
-    const { scratch, setScratch } = props
-    const userIsYou = api.useUserIsYou()
-
-    const [actionsLocation, InNavActions] = useActionsLocation()
-
-    return <>
-        <Nav>
-            <div className={styles.container}>
-                <Breadcrumbs className={styles.breadcrumbs} pages={[
-                    scratch.owner && {
-                        label: <div className={styles.owner}>
-                            <UserAvatar user={scratch.owner} className={styles.ownerAvatar} />
-                            <span className={styles.ownerName}>
-                                {scratch.owner.username}
-                            </span>
-                        </div>,
-                        href: !scratch.owner.is_anonymous && `/u/${scratch.owner.username}`,
-                    },
-                    {
-                        label: <div className={styles.iconNamePair}>
-                            <PlatformLink scratch={scratch} size={20} />
-                            <ScratchName
-                                name={scratch.name}
-                                onChange={userIsYou(scratch.owner) && (name => setScratch({ name }))}
-                            />
-                            <EditTimeAgo date={scratch.last_updated} />
-                        </div>,
-                    },
-                ].filter(Boolean)} />
-                <InNavActions {...props} />
-            </div>
-        </Nav>
-        {actionsLocation === ActionsLocation.BELOW_NAV && <div className={classNames(styles.belowNavActionsContainer, "border-gray-6 border-b")}>
-            <Actions {...props} />
-        </div>}
-    </>
+    const { scratch, setScratch } = props;
+    const userIsYou = api.useUserIsYou();
+
+    const [actionsLocation, InNavActions] = useActionsLocation();
+
+    return (
+        <>
+            <Nav>
+                <div className={styles.container}>
+                    <Breadcrumbs
+                        className={styles.breadcrumbs}
+                        pages={[
+                            scratch.owner && {
+                                label: (
+                                    <div className={styles.owner}>
+                                        <UserAvatar
+                                            user={scratch.owner}
+                                            className={styles.ownerAvatar}
+                                        />
+                                        <span className={styles.ownerName}>
+                                            {scratch.owner.username}
+                                        </span>
+                                    </div>
+                                ),
+                                href:
+                                    !scratch.owner.is_anonymous &&
+                                    `/u/${scratch.owner.username}`,
+                            },
+                            {
+                                label: (
+                                    <div className={styles.iconNamePair}>
+                                        <PlatformLink
+                                            scratch={scratch}
+                                            size={20}
+                                        />
+                                        <ScratchName
+                                            name={scratch.name}
+                                            onChange={
+                                                userIsYou(scratch.owner) &&
+                                                ((name) => setScratch({ name }))
+                                            }
+                                        />
+                                        <EditTimeAgo
+                                            date={scratch.last_updated}
+                                        />
+                                    </div>
+                                ),
+                            },
+                        ].filter(Boolean)}
+                    />
+                    <InNavActions {...props} />
+                </div>
+            </Nav>
+            {actionsLocation === ActionsLocation.BELOW_NAV && (
+                <div
+                    className={classNames(
+                        styles.belowNavActionsContainer,
+                        "border-gray-6 border-b",
+                    )}
+                >
+                    <Actions {...props} />
+                </div>
+            )}
+        </>
+    );
 }
diff --git a/frontend/src/components/Scratch/SortableFamilyList.tsx b/frontend/src/components/Scratch/SortableFamilyList.tsx
index 2c3dc0767..25c4334a0 100644
--- a/frontend/src/components/Scratch/SortableFamilyList.tsx
+++ b/frontend/src/components/Scratch/SortableFamilyList.tsx
@@ -1,27 +1,38 @@
-import { useMemo, useState } from "react"
+import { useMemo, useState } from "react";
 
-import Link from "next/link"
+import Link from "next/link";
 
-import classNames from "classnames"
-import useSWR from "swr"
+import classNames from "classnames";
+import useSWR from "swr";
 
-import { get } from "@/lib/api/request"
-import type { TerseScratch } from "@/lib/api/types"
-import { scratchUrl } from "@/lib/api/urls"
+import { get } from "@/lib/api/request";
+import type { TerseScratch } from "@/lib/api/types";
+import { scratchUrl } from "@/lib/api/urls";
 
-import { getScoreAsFraction, getScoreText } from "../ScoreBadge"
-import Sort, { SortMode, compareScratchScores, produceSortFunction } from "../Sort"
-import UserLink from "../user/UserLink"
+import { getScoreAsFraction, getScoreText } from "../ScoreBadge";
+import Sort, {
+    SortMode,
+    compareScratchScores,
+    produceSortFunction,
+} from "../Sort";
+import UserLink from "../user/UserLink";
 
 function useFamily(scratch: TerseScratch) {
-    const { data: family } = useSWR<TerseScratch[]>(`${scratchUrl(scratch)}/family`, get, {
-        suspense: true,
-    })
+    const { data: family } = useSWR<TerseScratch[]>(
+        `${scratchUrl(scratch)}/family`,
+        get,
+        {
+            suspense: true,
+        },
+    );
 
-    const [sortMode, setSortMode] = useState(SortMode.NEWEST_FIRST)
-    const sorted = useMemo(() => [...family].sort(produceSortFunction(sortMode)), [family, sortMode])
+    const [sortMode, setSortMode] = useState(SortMode.NEWEST_FIRST);
+    const sorted = useMemo(
+        () => [...family].sort(produceSortFunction(sortMode)),
+        [family, sortMode],
+    );
 
-    return { sorted, sortMode, setSortMode }
+    return { sorted, sortMode, setSortMode };
 }
 
 function FamilyMember({
@@ -29,61 +40,78 @@ function FamilyMember({
     isCurrent,
     isBetter,
 }: {
-    scratch: TerseScratch
-    isCurrent: boolean
-    isBetter: boolean
+    scratch: TerseScratch;
+    isCurrent: boolean;
+    isBetter: boolean;
 }) {
-    return <div className="flex">
-        <UserLink user={scratch.owner} />
-        <span className="mx-2 text-gray-8">/</span>
-        {isCurrent ? <span className="font-medium text-gray-11">
-            This scratch
-        </span> : <Link href={scratchUrl(scratch)} className="font-medium">
-            {scratch.name}
-        </Link>}
-        <div className="grow" />
-        <div
-            title={getScoreAsFraction(scratch.score, scratch.max_score)}
-            className={classNames({ "text-gray-11": !isBetter })}
-        >
-            {getScoreText(scratch.score, scratch.max_score, scratch.match_override)}
+    return (
+        <div className="flex">
+            <UserLink user={scratch.owner} />
+            <span className="mx-2 text-gray-8">/</span>
+            {isCurrent ? (
+                <span className="font-medium text-gray-11">This scratch</span>
+            ) : (
+                <Link href={scratchUrl(scratch)} className="font-medium">
+                    {scratch.name}
+                </Link>
+            )}
+            <div className="grow" />
+            <div
+                title={getScoreAsFraction(scratch.score, scratch.max_score)}
+                className={classNames({ "text-gray-11": !isBetter })}
+            >
+                {getScoreText(
+                    scratch.score,
+                    scratch.max_score,
+                    scratch.match_override,
+                )}
+            </div>
         </div>
-    </div>
+    );
 }
 
-export default function SortableFamilyList({ scratch }: { scratch: TerseScratch }) {
-    const family = useFamily(scratch)
+export default function SortableFamilyList({
+    scratch,
+}: { scratch: TerseScratch }) {
+    const family = useFamily(scratch);
 
     if (family.sorted.length <= 1) {
-        return <div className="flex h-full items-center justify-center">
-            <div className="max-w-prose text-center">
-                <div className="mb-2 text-xl">
-                    No parents or forks
+        return (
+            <div className="flex h-full items-center justify-center">
+                <div className="max-w-prose text-center">
+                    <div className="mb-2 text-xl">No parents or forks</div>
+                    <p className="text-gray-11">
+                        This scratch has no family members. It's the only
+                        attempt at this function.
+                    </p>
                 </div>
-                <p className="text-gray-11">
-                    This scratch has no family members.
-                    It's the only attempt at this function.
-                </p>
             </div>
-        </div>
+        );
     }
 
-    return <div>
-        <div className="mb-4 flex items-center">
-            <div>
-                {family.sorted.length} family members
+    return (
+        <div>
+            <div className="mb-4 flex items-center">
+                <div>{family.sorted.length} family members</div>
+                <div className="grow" />
+                <Sort
+                    sortMode={family.sortMode}
+                    setSortMode={family.setSortMode}
+                />
             </div>
-            <div className="grow" />
-            <Sort sortMode={family.sortMode} setSortMode={family.setSortMode} />
+            <ol>
+                {family.sorted.map((member) => (
+                    <li key={scratchUrl(member)} className="mb-2">
+                        <FamilyMember
+                            scratch={member}
+                            isCurrent={
+                                scratchUrl(member) === scratchUrl(scratch)
+                            }
+                            isBetter={compareScratchScores(member, scratch) < 0}
+                        />
+                    </li>
+                ))}
+            </ol>
         </div>
-        <ol>
-            {family.sorted.map(member => <li key={scratchUrl(member)} className="mb-2">
-                <FamilyMember
-                    scratch={member}
-                    isCurrent={scratchUrl(member) === scratchUrl(scratch)}
-                    isBetter={compareScratchScores(member, scratch) < 0}
-                />
-            </li>)}
-        </ol>
-    </div>
+    );
 }
diff --git a/frontend/src/components/Scratch/hooks/useFuzzySaveCallback.ts b/frontend/src/components/Scratch/hooks/useFuzzySaveCallback.ts
index 3c7a9122f..26ba1de22 100644
--- a/frontend/src/components/Scratch/hooks/useFuzzySaveCallback.ts
+++ b/frontend/src/components/Scratch/hooks/useFuzzySaveCallback.ts
@@ -1,6 +1,6 @@
-import { useCallback } from "react"
+import { useCallback } from "react";
 
-import * as api from "@/lib/api"
+import * as api from "@/lib/api";
 
 export enum FuzzySaveAction {
     SAVE = 0,
@@ -12,28 +12,28 @@ export default function useFuzzySaveCallback(
     scratch: api.Scratch,
     setScratch: (partial: Partial<api.Scratch>) => void,
 ): [FuzzySaveAction, () => Promise<void>] {
-    const saveScratch = api.useSaveScratch(scratch)
-    const forkScratch = api.useForkScratchAndGo(scratch)
-    const userIsYou = api.useUserIsYou()
+    const saveScratch = api.useSaveScratch(scratch);
+    const forkScratch = api.useForkScratchAndGo(scratch);
+    const userIsYou = api.useUserIsYou();
 
-    let action = FuzzySaveAction.NONE
+    let action = FuzzySaveAction.NONE;
     if (userIsYou(scratch.owner)) {
-        action = FuzzySaveAction.SAVE
+        action = FuzzySaveAction.SAVE;
     } else {
-        action = FuzzySaveAction.FORK
+        action = FuzzySaveAction.FORK;
     }
 
     return [
         action,
         useCallback(async () => {
             switch (action) {
-            case FuzzySaveAction.SAVE:
-                setScratch(await saveScratch())
-                break
-            case FuzzySaveAction.FORK:
-                await forkScratch()
-                break
+                case FuzzySaveAction.SAVE:
+                    setScratch(await saveScratch());
+                    break;
+                case FuzzySaveAction.FORK:
+                    await forkScratch();
+                    break;
             }
         }, [action, forkScratch, saveScratch, setScratch]),
-    ]
+    ];
 }
diff --git a/frontend/src/components/Scratch/hooks/useLanguageServer.ts b/frontend/src/components/Scratch/hooks/useLanguageServer.ts
index 02a67d779..76c050215 100644
--- a/frontend/src/components/Scratch/hooks/useLanguageServer.ts
+++ b/frontend/src/components/Scratch/hooks/useLanguageServer.ts
@@ -1,75 +1,99 @@
-import { type MutableRefObject, useEffect, useState } from "react"
-
-import type { ClangdStdioTransport, CompileCommands } from "@clangd-wasm/clangd-wasm"
-import { StateEffect } from "@codemirror/state"
-import type { EditorView } from "codemirror"
-
-import type * as api from "@/lib/api"
-import { LanguageServerClient, languageServerWithTransport } from "@/lib/codemirror/languageServer"
-
-export default function useLanguageServer(enabled: boolean, scratch: api.Scratch, sourceEditor: MutableRefObject<EditorView>, contextEditor: MutableRefObject<EditorView>) {
-    const [initialScratchState, setInitialScratchState] = useState<api.Scratch>(undefined)
-    const [defaultClangFormat, setDefaultClangFormat] = useState<string>(undefined)
-
-    const [ClangdStdioTransportModule, setClangdStdioTransportModule] = useState<typeof ClangdStdioTransport>(undefined)
-
-    const [saveSource, setSaveSource] = useState<(source: string) => Promise<void>>(undefined)
-    const [saveContext, setSaveContext] = useState<(context: string) => Promise<void>>(undefined)
+import { type MutableRefObject, useEffect, useState } from "react";
+
+import type {
+    ClangdStdioTransport,
+    CompileCommands,
+} from "@clangd-wasm/clangd-wasm";
+import { StateEffect } from "@codemirror/state";
+import type { EditorView } from "codemirror";
+
+import type * as api from "@/lib/api";
+import {
+    LanguageServerClient,
+    languageServerWithTransport,
+} from "@/lib/codemirror/languageServer";
+
+export default function useLanguageServer(
+    enabled: boolean,
+    scratch: api.Scratch,
+    sourceEditor: MutableRefObject<EditorView>,
+    contextEditor: MutableRefObject<EditorView>,
+) {
+    const [initialScratchState, setInitialScratchState] =
+        useState<api.Scratch>(undefined);
+    const [defaultClangFormat, setDefaultClangFormat] =
+        useState<string>(undefined);
+
+    const [ClangdStdioTransportModule, setClangdStdioTransportModule] =
+        useState<typeof ClangdStdioTransport>(undefined);
+
+    const [saveSource, setSaveSource] =
+        useState<(source: string) => Promise<void>>(undefined);
+    const [saveContext, setSaveContext] =
+        useState<(context: string) => Promise<void>>(undefined);
 
     useEffect(() => {
         const loadClangdModule = async () => {
-            if (!enabled) return
-            if (!(scratch.language === "C" || scratch.language === "C++")) return
+            if (!enabled) return;
+            if (!(scratch.language === "C" || scratch.language === "C++"))
+                return;
 
-            const { ClangdStdioTransport } = await import("@clangd-wasm/clangd-wasm")
-            setClangdStdioTransportModule(() => ClangdStdioTransport)
-        }
+            const { ClangdStdioTransport } = await import(
+                "@clangd-wasm/clangd-wasm"
+            );
+            setClangdStdioTransportModule(() => ClangdStdioTransport);
+        };
 
-        loadClangdModule()
-    }, [scratch.language, enabled])
+        loadClangdModule();
+    }, [scratch.language, enabled]);
 
     useEffect(() => {
         if (!initialScratchState) {
-            setInitialScratchState(scratch)
+            setInitialScratchState(scratch);
         }
-    }, [scratch, initialScratchState])
+    }, [scratch, initialScratchState]);
 
     useEffect(() => {
         fetch(new URL("./default-clang-format.yaml", import.meta.url))
-            .then(res => res.text())
-            .then(setDefaultClangFormat)
-    }, [])
+            .then((res) => res.text())
+            .then(setDefaultClangFormat);
+    }, []);
 
     // We break this out into a seperate effect from the module loading
     // because if we had _lsClient defined inside an async function, we wouldn't be
     // able to reference it inside of the destructor.
     useEffect(() => {
-        if (!ClangdStdioTransportModule) return
-        if (!initialScratchState) return
-        if (!defaultClangFormat) return
+        if (!ClangdStdioTransportModule) return;
+        if (!initialScratchState) return;
+        if (!defaultClangFormat) return;
 
         const languageId = {
-            "C": "c",
+            C: "c",
             "C++": "cpp",
-        }[initialScratchState.language]
+        }[initialScratchState.language];
 
-        const sourceFilename = `source.${languageId}`
-        const contextFilename = `context.${languageId}`
+        const sourceFilename = `source.${languageId}`;
+        const contextFilename = `context.${languageId}`;
 
         const compileCommands: CompileCommands = [
             {
                 directory: "/",
                 file: sourceFilename,
-                arguments: ["clang", sourceFilename, "-include", contextFilename],
+                arguments: [
+                    "clang",
+                    sourceFilename,
+                    "-include",
+                    contextFilename,
+                ],
             },
-        ]
+        ];
 
         const initialFileState: Record<string, string> = {
             ".clang-format": defaultClangFormat,
-        }
+        };
 
-        initialFileState[sourceFilename] = initialScratchState.source_code
-        initialFileState[contextFilename] = initialScratchState.context
+        initialFileState[sourceFilename] = initialScratchState.source_code;
+        initialFileState[contextFilename] = initialScratchState.context;
 
         const _lsClient = new LanguageServerClient({
             transport: new ClangdStdioTransportModule({
@@ -82,7 +106,7 @@ export default function useLanguageServer(enabled: boolean, scratch: api.Scratch
             workspaceFolders: null,
             documentUri: null,
             languageId,
-        })
+        });
 
         const [sourceLsExtension, _saveSource] = languageServerWithTransport({
             client: _lsClient,
@@ -91,7 +115,7 @@ export default function useLanguageServer(enabled: boolean, scratch: api.Scratch
             workspaceFolders: null,
             documentUri: `file:///${sourceFilename}`,
             languageId,
-        })
+        });
 
         const [contextLsExtension, _saveContext] = languageServerWithTransport({
             client: _lsClient,
@@ -100,32 +124,39 @@ export default function useLanguageServer(enabled: boolean, scratch: api.Scratch
             workspaceFolders: null,
             documentUri: `file:///${contextFilename}`,
             languageId,
-        })
+        });
 
         // TODO: return the codemirror extensions instead of hotpatching them in?
         // Given the async nature of the extension being ready, it'd require updating the Codemirror
         // component to support inserting extensions when the extension prop changes
-        sourceEditor.current?.dispatch({ effects: StateEffect.appendConfig.of(sourceLsExtension) })
-        contextEditor.current?.dispatch({ effects: StateEffect.appendConfig.of(contextLsExtension) })
+        sourceEditor.current?.dispatch({
+            effects: StateEffect.appendConfig.of(sourceLsExtension),
+        });
+        contextEditor.current?.dispatch({
+            effects: StateEffect.appendConfig.of(contextLsExtension),
+        });
 
-        setSaveSource(() => _saveSource)
-        setSaveContext(() => _saveContext)
+        setSaveSource(() => _saveSource);
+        setSaveContext(() => _saveContext);
 
         return () => {
-            _lsClient.exit()
-        }
-
-    }, [ClangdStdioTransportModule, initialScratchState, defaultClangFormat, sourceEditor, contextEditor])
+            _lsClient.exit();
+        };
+    }, [
+        ClangdStdioTransportModule,
+        initialScratchState,
+        defaultClangFormat,
+        sourceEditor,
+        contextEditor,
+    ]);
 
     const saveSourceRet = () => {
-        if (saveSource)
-            saveSource(scratch.source_code)
-    }
+        if (saveSource) saveSource(scratch.source_code);
+    };
 
     const saveContextRet = () => {
-        if (saveContext)
-            saveContext(scratch.context)
-    }
+        if (saveContext) saveContext(scratch.context);
+    };
 
-    return [saveSourceRet, saveContextRet]
+    return [saveSourceRet, saveContextRet];
 }
diff --git a/frontend/src/components/Scratch/hooks/useWarnBeforeScratchUnload.ts b/frontend/src/components/Scratch/hooks/useWarnBeforeScratchUnload.ts
index 37ba8995f..243596403 100644
--- a/frontend/src/components/Scratch/hooks/useWarnBeforeScratchUnload.ts
+++ b/frontend/src/components/Scratch/hooks/useWarnBeforeScratchUnload.ts
@@ -1,14 +1,14 @@
-import * as api from "@/lib/api"
-import { useWarnBeforeUnload } from "@/lib/hooks"
+import * as api from "@/lib/api";
+import { useWarnBeforeUnload } from "@/lib/hooks";
 
 export default function useWarnBeforeScratchUnload(scratch: api.Scratch) {
-    const userIsYou = api.useUserIsYou()
-    const isSaved = api.useIsScratchSaved(scratch)
+    const userIsYou = api.useUserIsYou();
+    const isSaved = api.useIsScratchSaved(scratch);
 
     useWarnBeforeUnload(
         !isSaved,
         userIsYou(scratch.owner)
             ? "You have not saved your changes to this scratch. Discard changes?"
             : "You have edited this scratch but not saved it in a fork. Discard changes?",
-    )
+    );
 }
diff --git a/frontend/src/components/Scratch/index.ts b/frontend/src/components/Scratch/index.ts
index 494561cff..2ffa942b8 100644
--- a/frontend/src/components/Scratch/index.ts
+++ b/frontend/src/components/Scratch/index.ts
@@ -1,4 +1,4 @@
-import Scratch, { type Props as ScratchProps } from "./Scratch"
+import Scratch, { type Props as ScratchProps } from "./Scratch";
 
-export type Props = ScratchProps
-export default Scratch
+export type Props = ScratchProps;
+export default Scratch;
diff --git a/frontend/src/components/Scratch/panels/AboutPanel.tsx b/frontend/src/components/Scratch/panels/AboutPanel.tsx
index 7d78d3657..dd62a695f 100644
--- a/frontend/src/components/Scratch/panels/AboutPanel.tsx
+++ b/frontend/src/components/Scratch/panels/AboutPanel.tsx
@@ -1,80 +1,95 @@
-import Link from "next/link"
+import Link from "next/link";
 
-import useSWR from "swr"
+import useSWR from "swr";
 
-import LoadingSpinner from "@/components/loading.svg"
-import { PlatformIcon } from "@/components/PlatformSelect/PlatformIcon"
-import PlatformName from "@/components/PlatformSelect/PlatformName"
-import { getScoreText } from "@/components/ScoreBadge"
-import TimeAgo from "@/components/TimeAgo"
-import UserLink from "@/components/user/UserLink"
-import { type Scratch, type Preset, get, usePreset } from "@/lib/api"
-import { presetUrl, scratchUrl, scratchParentUrl } from "@/lib/api/urls"
+import LoadingSpinner from "@/components/loading.svg";
+import { PlatformIcon } from "@/components/PlatformSelect/PlatformIcon";
+import PlatformName from "@/components/PlatformSelect/PlatformName";
+import { getScoreText } from "@/components/ScoreBadge";
+import TimeAgo from "@/components/TimeAgo";
+import UserLink from "@/components/user/UserLink";
+import { type Scratch, type Preset, get, usePreset } from "@/lib/api";
+import { presetUrl, scratchUrl, scratchParentUrl } from "@/lib/api/urls";
 
-import styles from "./AboutPanel.module.scss"
+import styles from "./AboutPanel.module.scss";
 
 function ScratchLink({ url }: { url: string }) {
-    const { data: scratch, error } = useSWR<Scratch>(url, get)
+    const { data: scratch, error } = useSWR<Scratch>(url, get);
 
     if (error) {
-        throw error
+        throw error;
     }
 
     if (!scratch) {
-        return <span className={styles.scratchLinkContainer}>
-            <LoadingSpinner height={18} />
-        </span>
+        return (
+            <span className={styles.scratchLinkContainer}>
+                <LoadingSpinner height={18} />
+            </span>
+        );
     }
 
     return (
         <span className={styles.scratchLinkContainer}>
             <Link href={scratchUrl(scratch)} className={styles.scratchLink}>
-
                 {scratch.name || "Untitled scratch"}
-
             </Link>
-            {scratch.owner && <>
-                <span className={styles.scratchLinkByText}>by</span>
-                <UserLink user={scratch.owner} />
-            </>}
+            {scratch.owner && (
+                <>
+                    <span className={styles.scratchLinkByText}>by</span>
+                    <UserLink user={scratch.owner} />
+                </>
+            )}
         </span>
-    )
+    );
 }
 
 export type Props = {
-    scratch: Scratch
-    setScratch?: (scratch: Partial<Scratch>) => void
-}
+    scratch: Scratch;
+    setScratch?: (scratch: Partial<Scratch>) => void;
+};
 
 export default function AboutPanel({ scratch, setScratch }: Props) {
-    const preset: Preset = usePreset(scratch.preset)
+    const preset: Preset = usePreset(scratch.preset);
 
     return (
         <div className={styles.container}>
             <div>
                 <div className={styles.horizontalField}>
                     <p className={styles.label}>Score</p>
-                    <span>{getScoreText(scratch.score, scratch.max_score, scratch.match_override)}</span>
+                    <span>
+                        {getScoreText(
+                            scratch.score,
+                            scratch.max_score,
+                            scratch.match_override,
+                        )}
+                    </span>
                 </div>
-                {<div className={styles.horizontalField}>
-                    <p className={styles.label}>Owner</p>
-                    {scratch.owner && <UserLink user={scratch.owner} />}
-                </div>}
-                {scratch.parent &&<div className={styles.horizontalField}>
-                    <p className={styles.label}>Fork of</p>
-                    <ScratchLink url={scratchParentUrl(scratch)} />
-                </div>}
+                {
+                    <div className={styles.horizontalField}>
+                        <p className={styles.label}>Owner</p>
+                        {scratch.owner && <UserLink user={scratch.owner} />}
+                    </div>
+                }
+                {scratch.parent && (
+                    <div className={styles.horizontalField}>
+                        <p className={styles.label}>Fork of</p>
+                        <ScratchLink url={scratchParentUrl(scratch)} />
+                    </div>
+                )}
                 <div className={styles.horizontalField}>
                     <p className={styles.label}>Platform</p>
-                    <PlatformIcon platform={scratch.platform} className={styles.platformIcon} />
+                    <PlatformIcon
+                        platform={scratch.platform}
+                        className={styles.platformIcon}
+                    />
                     <PlatformName platform={scratch.platform} />
                 </div>
-                {preset && <div className={styles.horizontalField}>
-                    <p className={styles.label}>Preset</p>
-                    <Link href={presetUrl(preset)}>
-                        {preset.name}
-                    </Link>
-                </div>}
+                {preset && (
+                    <div className={styles.horizontalField}>
+                        <p className={styles.label}>Preset</p>
+                        <Link href={presetUrl(preset)}>{preset.name}</Link>
+                    </div>
+                )}
                 <div className={styles.horizontalField}>
                     <p className={styles.label}>Created</p>
                     <TimeAgo date={scratch.creation_time} />
@@ -87,17 +102,23 @@ export default function AboutPanel({ scratch, setScratch }: Props) {
 
             <hr className={styles.rule} />
 
-            {setScratch || scratch.description ? <div className={styles.grow}>
-                <p className={styles.label}>Description</p>
-                <textarea
-                    className={styles.textArea}
-                    value={scratch.description}
-                    disabled={!setScratch}
-                    onChange={event => setScratch?.({ description: event.target.value })}
-                    maxLength={5000}
-                    placeholder="Add any notes about the scratch here"
-                />
-            </div> : <div />}
+            {setScratch || scratch.description ? (
+                <div className={styles.grow}>
+                    <p className={styles.label}>Description</p>
+                    <textarea
+                        className={styles.textArea}
+                        value={scratch.description}
+                        disabled={!setScratch}
+                        onChange={(event) =>
+                            setScratch?.({ description: event.target.value })
+                        }
+                        maxLength={5000}
+                        placeholder="Add any notes about the scratch here"
+                    />
+                </div>
+            ) : (
+                <div />
+            )}
         </div>
-    )
+    );
 }
diff --git a/frontend/src/components/Scratch/panels/DecompilePanel.tsx b/frontend/src/components/Scratch/panels/DecompilePanel.tsx
index 83cc84ea3..3f15a3315 100644
--- a/frontend/src/components/Scratch/panels/DecompilePanel.tsx
+++ b/frontend/src/components/Scratch/panels/DecompilePanel.tsx
@@ -1,61 +1,65 @@
-import { useEffect, useRef, useState } from "react"
+import { useEffect, useRef, useState } from "react";
 
-import type { EditorView } from "@codemirror/view"
-import { useDebounce } from "use-debounce"
+import type { EditorView } from "@codemirror/view";
+import { useDebounce } from "use-debounce";
 
-import CodeMirror from "@/components/Editor/CodeMirror"
-import Loading from "@/components/loading.svg"
-import * as api from "@/lib/api"
-import { scratchUrl } from "@/lib/api/urls"
-import { decompileSetup } from "@/lib/codemirror/basic-setup"
-import { cpp } from "@/lib/codemirror/cpp"
-import useCompareExtension from "@/lib/codemirror/useCompareExtension"
+import CodeMirror from "@/components/Editor/CodeMirror";
+import Loading from "@/components/loading.svg";
+import * as api from "@/lib/api";
+import { scratchUrl } from "@/lib/api/urls";
+import { decompileSetup } from "@/lib/codemirror/basic-setup";
+import { cpp } from "@/lib/codemirror/cpp";
+import useCompareExtension from "@/lib/codemirror/useCompareExtension";
 
-import styles from "./DecompilePanel.module.scss"
+import styles from "./DecompilePanel.module.scss";
 
 export type Props = {
-    scratch: api.Scratch
-}
+    scratch: api.Scratch;
+};
 
 export default function DecompilePanel({ scratch }: Props) {
-    const [decompiledCode, setDecompiledCode] = useState<string | null>(null)
-    const viewRef = useRef<EditorView>()
-    const compareExtension = useCompareExtension(viewRef, scratch.source_code)
-    const [debouncedContext] = useDebounce(scratch.context, 1000, { leading: false, trailing: true })
-    const [valueVersion, setValueVersion] = useState(0)
-    const url = scratchUrl(scratch)
+    const [decompiledCode, setDecompiledCode] = useState<string | null>(null);
+    const viewRef = useRef<EditorView>();
+    const compareExtension = useCompareExtension(viewRef, scratch.source_code);
+    const [debouncedContext] = useDebounce(scratch.context, 1000, {
+        leading: false,
+        trailing: true,
+    });
+    const [valueVersion, setValueVersion] = useState(0);
+    const url = scratchUrl(scratch);
 
     useEffect(() => {
         api.post(`${url}/decompile`, {
             context: debouncedContext,
             compiler: scratch.compiler,
         }).then(({ decompilation }: { decompilation: string }) => {
-            setDecompiledCode(decompilation)
-            setValueVersion(v => v + 1)
-        })
-    }, [scratch.compiler, debouncedContext, url])
-
-    const isLoading = decompiledCode === null || scratch.context !== debouncedContext
-
-    return <div className={styles.container}>
-        <section className={styles.main}>
-            <p>
-                Modify the context or compiler to see how the decompilation
-                of the assembly changes.
-            </p>
-
-            {typeof decompiledCode === "string" && <CodeMirror
-                    className={styles.editor}
-                    value={decompiledCode}
-                    valueVersion={valueVersion}
-                    viewRef={viewRef}
-                    extensions={[
-                        decompileSetup,
-                        cpp(),
-                        compareExtension,
-                    ]}
-                />}
-            {isLoading && <Loading className={styles.loading} />}
-        </section>
-    </div>
+            setDecompiledCode(decompilation);
+            setValueVersion((v) => v + 1);
+        });
+    }, [scratch.compiler, debouncedContext, url]);
+
+    const isLoading =
+        decompiledCode === null || scratch.context !== debouncedContext;
+
+    return (
+        <div className={styles.container}>
+            <section className={styles.main}>
+                <p>
+                    Modify the context or compiler to see how the decompilation
+                    of the assembly changes.
+                </p>
+
+                {typeof decompiledCode === "string" && (
+                    <CodeMirror
+                        className={styles.editor}
+                        value={decompiledCode}
+                        valueVersion={valueVersion}
+                        viewRef={viewRef}
+                        extensions={[decompileSetup, cpp(), compareExtension]}
+                    />
+                )}
+                {isLoading && <Loading className={styles.loading} />}
+            </section>
+        </div>
+    );
 }
diff --git a/frontend/src/components/Scratch/panels/FamilyPanel.tsx b/frontend/src/components/Scratch/panels/FamilyPanel.tsx
index 7b9b0c7dc..a80a410d4 100644
--- a/frontend/src/components/Scratch/panels/FamilyPanel.tsx
+++ b/frontend/src/components/Scratch/panels/FamilyPanel.tsx
@@ -1,20 +1,27 @@
-import dynamic from "next/dynamic"
+import dynamic from "next/dynamic";
 
-import Loading from "@/components/loading.svg"
-import type { TerseScratch } from "@/lib/api/types"
+import Loading from "@/components/loading.svg";
+import type { TerseScratch } from "@/lib/api/types";
 
-const SortableFamilyList = dynamic(() => import("@/components/Scratch/SortableFamilyList"), {
-    loading: () => <div className="flex size-full items-center justify-center">
-        <Loading className="size-8 animate-pulse" />
-    </div>,
-})
+const SortableFamilyList = dynamic(
+    () => import("@/components/Scratch/SortableFamilyList"),
+    {
+        loading: () => (
+            <div className="flex size-full items-center justify-center">
+                <Loading className="size-8 animate-pulse" />
+            </div>
+        ),
+    },
+);
 
 type Props = {
-    scratch: TerseScratch
-}
+    scratch: TerseScratch;
+};
 
 export default function FamilyPanel({ scratch }: Props) {
-    return <div className="h-full overflow-auto p-4">
-        <SortableFamilyList scratch={scratch} />
-    </div>
+    return (
+        <div className="h-full overflow-auto p-4">
+            <SortableFamilyList scratch={scratch} />
+        </div>
+    );
 }
diff --git a/frontend/src/components/ScratchList.tsx b/frontend/src/components/ScratchList.tsx
index 8e0e6c1de..2f1f82aa6 100644
--- a/frontend/src/components/ScratchList.tsx
+++ b/frontend/src/components/ScratchList.tsx
@@ -1,240 +1,298 @@
-"use client"
+"use client";
 
-import { type ReactNode, useState } from "react"
+import { type ReactNode, useState } from "react";
 
-import Link from "next/link"
+import Link from "next/link";
 
-import classNames from "classnames"
+import classNames from "classnames";
 
-import TimeAgo from "@/components/TimeAgo"
-import * as api from "@/lib/api"
-import { presetUrl, scratchUrl } from "@/lib/api/urls"
-import getTranslation from "@/lib/i18n/translate"
+import TimeAgo from "@/components/TimeAgo";
+import * as api from "@/lib/api";
+import { presetUrl, scratchUrl } from "@/lib/api/urls";
+import getTranslation from "@/lib/i18n/translate";
 
-import AsyncButton from "./AsyncButton"
-import Button from "./Button"
-import LoadingSpinner from "./loading.svg"
-import PlatformLink from "./PlatformLink"
-import { calculateScorePercent, percentToString } from "./ScoreBadge"
-import styles from "./ScratchList.module.scss"
-import Sort, { SortMode } from "./Sort"
-import UserLink from "./user/UserLink"
+import AsyncButton from "./AsyncButton";
+import Button from "./Button";
+import LoadingSpinner from "./loading.svg";
+import PlatformLink from "./PlatformLink";
+import { calculateScorePercent, percentToString } from "./ScoreBadge";
+import styles from "./ScratchList.module.scss";
+import Sort, { SortMode } from "./Sort";
+import UserLink from "./user/UserLink";
 
 export interface Props {
-    title?: string
-    url?: string
-    className?: string
-    item?: ({ scratch }: { scratch: api.TerseScratch }) => JSX.Element
-    emptyButtonLabel?: ReactNode
-    isSortable?: boolean
+    title?: string;
+    url?: string;
+    className?: string;
+    item?: ({ scratch }: { scratch: api.TerseScratch }) => JSX.Element;
+    emptyButtonLabel?: ReactNode;
+    isSortable?: boolean;
 }
 
-export default function ScratchList({ title, url, className, item, emptyButtonLabel, isSortable }: Props) {
-    const [sortMode, setSortBy] = useState(SortMode.NEWEST_FIRST)
-    const { results, isLoading, hasNext, loadNext } = api.usePaginated<api.TerseScratch>(`${url || "/scratch"}&ordering=${sortMode.toString()}`)
+export default function ScratchList({
+    title,
+    url,
+    className,
+    item,
+    emptyButtonLabel,
+    isSortable,
+}: Props) {
+    const [sortMode, setSortBy] = useState(SortMode.NEWEST_FIRST);
+    const { results, isLoading, hasNext, loadNext } =
+        api.usePaginated<api.TerseScratch>(
+            `${url || "/scratch"}&ordering=${sortMode.toString()}`,
+        );
 
     if (results.length === 0 && isLoading) {
-        return <div className={classNames(styles.loading, className)}>
-            <LoadingSpinner width="1.5em" height="1.5em" />
-            Just a moment...
-        </div>
+        return (
+            <div className={classNames(styles.loading, className)}>
+                <LoadingSpinner width="1.5em" height="1.5em" />
+                Just a moment...
+            </div>
+        );
     }
 
-    const Item = item || ScratchItem
+    const Item = item || ScratchItem;
 
     return (
         <>
             <div className="flex justify-between pb-2">
                 <h2 className="font-medium text-lg tracking-tight">{title}</h2>
-                {isSortable && <Sort sortMode={sortMode} setSortMode={setSortBy} />}
+                {isSortable && (
+                    <Sort sortMode={sortMode} setSortMode={setSortBy} />
+                )}
             </div>
-            <ul className={classNames(styles.list, "rounded-md border-gray-6 text-sm", className)}>
-                {results.map(scratch => (
+            <ul
+                className={classNames(
+                    styles.list,
+                    "rounded-md border-gray-6 text-sm",
+                    className,
+                )}
+            >
+                {results.map((scratch) => (
                     <Item key={scratchUrl(scratch)} scratch={scratch} />
                 ))}
-                {results.length === 0 && emptyButtonLabel && <li className={styles.button}>
-                    <Link href="/new">
-
-                        <Button>
-                            {emptyButtonLabel}
-                        </Button>
-
-                    </Link>
-                </li>}
-                {hasNext && <li className={styles.button}>
-                    <AsyncButton onClick={loadNext}>
-                        Show more
-                    </AsyncButton>
-                </li>}
+                {results.length === 0 && emptyButtonLabel && (
+                    <li className={styles.button}>
+                        <Link href="/new">
+                            <Button>{emptyButtonLabel}</Button>
+                        </Link>
+                    </li>
+                )}
+                {hasNext && (
+                    <li className={styles.button}>
+                        <AsyncButton onClick={loadNext}>Show more</AsyncButton>
+                    </li>
+                )}
             </ul>
         </>
-    )
+    );
 }
 
 export function getMatchPercentString(scratch: api.TerseScratch) {
     if (scratch.match_override) {
-        return "100%"
+        return "100%";
     }
-    const matchPercent = calculateScorePercent(scratch.score, scratch.max_score)
-    const matchPercentString = percentToString(matchPercent)
+    const matchPercent = calculateScorePercent(
+        scratch.score,
+        scratch.max_score,
+    );
+    const matchPercentString = percentToString(matchPercent);
 
-    return matchPercentString
+    return matchPercentString;
 }
 
-export function ScratchItem({ scratch, children }: { scratch: api.TerseScratch, children?: ReactNode }) {
-    const compilersTranslation = getTranslation("compilers")
-    const compilerName = compilersTranslation.t(scratch.compiler)
-    const matchPercentString = getMatchPercentString(scratch)
-    const preset = api.usePreset(scratch.preset)
-    const presetName = preset?.name
+export function ScratchItem({
+    scratch,
+    children,
+}: { scratch: api.TerseScratch; children?: ReactNode }) {
+    const compilersTranslation = getTranslation("compilers");
+    const compilerName = compilersTranslation.t(scratch.compiler);
+    const matchPercentString = getMatchPercentString(scratch);
+    const preset = api.usePreset(scratch.preset);
+    const presetName = preset?.name;
 
-    const presetOrCompiler = presetName ?
+    const presetOrCompiler = presetName ? (
         <Link href={presetUrl(preset)} className={styles.link}>
             {presetName}
-        </Link> : <span>{compilerName}</span>
+        </Link>
+    ) : (
+        <span>{compilerName}</span>
+    );
 
     return (
         <li className={styles.item}>
             <div className={styles.scratch}>
                 <div className={styles.header}>
-                    <PlatformLink size={16} scratch={scratch} className={styles.icon} />
-                    <Link href={scratchUrl(scratch)} className={classNames(styles.link, styles.name)}>
+                    <PlatformLink
+                        size={16}
+                        scratch={scratch}
+                        className={styles.icon}
+                    />
+                    <Link
+                        href={scratchUrl(scratch)}
+                        className={classNames(styles.link, styles.name)}
+                    >
                         {scratch.name}
                     </Link>
                     <div className={styles.owner}>
-                        {scratch.owner ?
+                        {scratch.owner ? (
                             <UserLink user={scratch.owner} />
-                            :
+                        ) : (
                             <div>No Owner</div>
-                        }
+                        )}
                     </div>
                 </div>
                 <div className={styles.metadata}>
                     <span>
-                        {presetOrCompiler} • {matchPercentString} matched • <TimeAgo date={scratch.last_updated} />
+                        {presetOrCompiler} • {matchPercentString} matched •{" "}
+                        <TimeAgo date={scratch.last_updated} />
                     </span>
-                    <div className={styles.actions}>
-                        {children}
-                    </div>
+                    <div className={styles.actions}>{children}</div>
                 </div>
             </div>
         </li>
-    )
+    );
 }
 
 export function ScratchItemNoOwner({ scratch }: { scratch: api.TerseScratch }) {
-    const compilersTranslation = getTranslation("compilers")
-    const compilerName = compilersTranslation.t(scratch.compiler)
-    const matchPercentString = getMatchPercentString(scratch)
-    const preset = api.usePreset(scratch.preset)
-    const presetName = preset?.name
+    const compilersTranslation = getTranslation("compilers");
+    const compilerName = compilersTranslation.t(scratch.compiler);
+    const matchPercentString = getMatchPercentString(scratch);
+    const preset = api.usePreset(scratch.preset);
+    const presetName = preset?.name;
 
-    const presetOrCompiler = presetName ?
+    const presetOrCompiler = presetName ? (
         <Link href={presetUrl(preset)} className={styles.link}>
             {presetName}
-        </Link> : <span>{compilerName}</span>
+        </Link>
+    ) : (
+        <span>{compilerName}</span>
+    );
 
     return (
         <li className={styles.item}>
             <div className={styles.scratch}>
                 <div className={styles.header}>
-                    <PlatformLink size={16} scratch={scratch} className={styles.icon} />
-                    <Link href={scratchUrl(scratch)} className={classNames(styles.link, styles.name)}>
+                    <PlatformLink
+                        size={16}
+                        scratch={scratch}
+                        className={styles.icon}
+                    />
+                    <Link
+                        href={scratchUrl(scratch)}
+                        className={classNames(styles.link, styles.name)}
+                    >
                         {scratch.name}
                     </Link>
-                    <div>
-                        {/* empty div for alignment */}
-                    </div>
+                    <div>{/* empty div for alignment */}</div>
                 </div>
                 <div className={styles.metadata}>
                     <span>
-                        {presetOrCompiler} • {matchPercentString} matched • <TimeAgo date={scratch.last_updated} />
+                        {presetOrCompiler} • {matchPercentString} matched •{" "}
+                        <TimeAgo date={scratch.last_updated} />
                     </span>
                 </div>
             </div>
         </li>
-    )
+    );
 }
 
-export function ScratchItemPlatformList({ scratch }: { scratch: api.TerseScratch }) {
-    const compilersTranslation = getTranslation("compilers")
-    const compilerName = compilersTranslation.t(scratch.compiler)
-    const matchPercentString = getMatchPercentString(scratch)
-    const preset = api.usePreset(scratch.preset)
-    const presetName = preset?.name
+export function ScratchItemPlatformList({
+    scratch,
+}: { scratch: api.TerseScratch }) {
+    const compilersTranslation = getTranslation("compilers");
+    const compilerName = compilersTranslation.t(scratch.compiler);
+    const matchPercentString = getMatchPercentString(scratch);
+    const preset = api.usePreset(scratch.preset);
+    const presetName = preset?.name;
 
-    const presetOrCompiler = presetName ?
+    const presetOrCompiler = presetName ? (
         <Link href={presetUrl(preset)} className={styles.link}>
             {presetName}
-        </Link> : <span>{compilerName}</span>
+        </Link>
+    ) : (
+        <span>{compilerName}</span>
+    );
 
     return (
         <li className={styles.item}>
             <div className={styles.scratch}>
                 <div className={styles.header}>
-                    <Link href={scratchUrl(scratch)} className={classNames(styles.link, styles.name)}>
+                    <Link
+                        href={scratchUrl(scratch)}
+                        className={classNames(styles.link, styles.name)}
+                    >
                         {scratch.name}
                     </Link>
                     <div className={styles.owner}>
-                        {scratch.owner ?
+                        {scratch.owner ? (
                             <UserLink user={scratch.owner} />
-                            :
+                        ) : (
                             <div>No Owner</div>
-                        }
+                        )}
                     </div>
-
                 </div>
                 <div className={styles.metadata}>
                     <span>
-                        {presetOrCompiler} • {matchPercentString} matched • <TimeAgo date={scratch.last_updated} />
+                        {presetOrCompiler} • {matchPercentString} matched •{" "}
+                        <TimeAgo date={scratch.last_updated} />
                     </span>
                 </div>
             </div>
         </li>
-    )
+    );
 }
 
-export function ScratchItemPresetList({ scratch }: { scratch: api.TerseScratch }) {
-    const matchPercentString = getMatchPercentString(scratch)
+export function ScratchItemPresetList({
+    scratch,
+}: { scratch: api.TerseScratch }) {
+    const matchPercentString = getMatchPercentString(scratch);
 
     return (
         <li className={styles.item}>
             <div className={styles.scratch}>
                 <div className={styles.header}>
-                    <Link href={scratchUrl(scratch)} className={classNames(styles.link, styles.name)}>
+                    <Link
+                        href={scratchUrl(scratch)}
+                        className={classNames(styles.link, styles.name)}
+                    >
                         {scratch.name}
                     </Link>
                     <div className={styles.metadata}>
                         <span>
-                            {matchPercentString} matched • <TimeAgo date={scratch.last_updated} />
+                            {matchPercentString} matched •{" "}
+                            <TimeAgo date={scratch.last_updated} />
                         </span>
                     </div>
                     <div className={styles.owner}>
-                        {scratch.owner ?
+                        {scratch.owner ? (
                             <UserLink user={scratch.owner} />
-                            :
+                        ) : (
                             <div>No Owner</div>
-                        }
+                        )}
                     </div>
                 </div>
-
             </div>
         </li>
-    )
+    );
 }
 
-export function SingleLineScratchItem({ scratch }: { scratch: api.TerseScratch }) {
-    const matchPercentString = getMatchPercentString(scratch)
+export function SingleLineScratchItem({
+    scratch,
+}: { scratch: api.TerseScratch }) {
+    const matchPercentString = getMatchPercentString(scratch);
 
     return (
         <li className={styles.singleLine}>
             <PlatformLink size={16} scratch={scratch} className={styles.icon} />
-            <Link href={scratchUrl(scratch)} className={classNames(styles.link, styles.name)}>
+            <Link
+                href={scratchUrl(scratch)}
+                className={classNames(styles.link, styles.name)}
+            >
                 {scratch.name}
             </Link>
-            <div className={styles.metadata}>
-                {matchPercentString}
-            </div>
+            <div className={styles.metadata}>{matchPercentString}</div>
         </li>
-    )
+    );
 }
diff --git a/frontend/src/components/ScrollContext.tsx b/frontend/src/components/ScrollContext.tsx
index 4ffbc65f2..7e07e7eb7 100644
--- a/frontend/src/components/ScrollContext.tsx
+++ b/frontend/src/components/ScrollContext.tsx
@@ -1,3 +1,3 @@
-import { createContext } from "react"
+import { createContext } from "react";
 
-export const ScrollContext = createContext(null)
+export const ScrollContext = createContext(null);
diff --git a/frontend/src/components/Select.tsx b/frontend/src/components/Select.tsx
index 1e7ffe0a9..3f83056c2 100644
--- a/frontend/src/components/Select.tsx
+++ b/frontend/src/components/Select.tsx
@@ -1,24 +1,31 @@
-import type { ReactNode, ChangeEventHandler } from "react"
+import type { ReactNode, ChangeEventHandler } from "react";
 
-import { ChevronDownIcon } from "@primer/octicons-react"
+import { ChevronDownIcon } from "@primer/octicons-react";
 
-import styles from "./Select.module.scss"
+import styles from "./Select.module.scss";
 
 export type Props = {
-    className?: string
-    onChange: ChangeEventHandler<HTMLSelectElement>
-    children: ReactNode
-    value?: string
-}
+    className?: string;
+    onChange: ChangeEventHandler<HTMLSelectElement>;
+    children: ReactNode;
+    value?: string;
+};
 
-export default function Select({ onChange, children, className, value }: Props) {
-    return <div className={`${styles.group} ${className}`}>
-        <select onChange={onChange} value={value}>
-            {children}
-        </select>
+export default function Select({
+    onChange,
+    children,
+    className,
+    value,
+}: Props) {
+    return (
+        <div className={`${styles.group} ${className}`}>
+            <select onChange={onChange} value={value}>
+                {children}
+            </select>
 
-        <div className={styles.icon}>
-            <ChevronDownIcon size={16} />
+            <div className={styles.icon}>
+                <ChevronDownIcon size={16} />
+            </div>
         </div>
-    </div>
+    );
 }
diff --git a/frontend/src/components/Select2.tsx b/frontend/src/components/Select2.tsx
index 815dad09f..4e75a18fa 100644
--- a/frontend/src/components/Select2.tsx
+++ b/frontend/src/components/Select2.tsx
@@ -1,37 +1,39 @@
-import { useEffect } from "react"
+import { useEffect } from "react";
 
-import { ChevronDownIcon } from "@primer/octicons-react"
+import { ChevronDownIcon } from "@primer/octicons-react";
 
-import styles from "./Select.module.scss"
+import styles from "./Select.module.scss";
 
 export type Props = {
-    options: { [key: string]: string }
-    value: string
-    className?: string
-    onChange: (value: string) => void
-}
+    options: { [key: string]: string };
+    value: string;
+    className?: string;
+    onChange: (value: string) => void;
+};
 
 export default function Select({ options, value, onChange, className }: Props) {
-
     useEffect(() => {
-        if (!value)
-            onChange(Object.keys(options)[0])
-    }, [value, options, onChange])
+        if (!value) onChange(Object.keys(options)[0]);
+    }, [value, options, onChange]);
 
-    return <div className={`${styles.group} ${className}`}>
-        <select
-            value={value}
-            onChange={event => {
-                onChange(event.target.value)
-            }}
-        >
-            {Object.entries(options).map(([key, name]) =>
-                <option key={key} value={key}>{name}</option>
-            )}
-        </select>
+    return (
+        <div className={`${styles.group} ${className}`}>
+            <select
+                value={value}
+                onChange={(event) => {
+                    onChange(event.target.value);
+                }}
+            >
+                {Object.entries(options).map(([key, name]) => (
+                    <option key={key} value={key}>
+                        {name}
+                    </option>
+                ))}
+            </select>
 
-        <div className={styles.icon}>
-            <ChevronDownIcon size={16} />
+            <div className={styles.icon}>
+                <ChevronDownIcon size={16} />
+            </div>
         </div>
-    </div>
+    );
 }
diff --git a/frontend/src/components/SetPageTitle.tsx b/frontend/src/components/SetPageTitle.tsx
index 42cb46177..12372aa97 100644
--- a/frontend/src/components/SetPageTitle.tsx
+++ b/frontend/src/components/SetPageTitle.tsx
@@ -1,13 +1,13 @@
-"use client"
+"use client";
 
 // Next.js currently doesn't support head.js files accessing search params:
 //  https://github.com/vercel/next.js/pull/43305
 // So we'll update it on the client instead, with this component.
 // In future - once this is supported - we can use dynamic <AppHead> instead.
 
-import { usePageTitle } from "@/lib/hooks"
+import { usePageTitle } from "@/lib/hooks";
 
 export default function SetPageTitle({ title }: { title: string }) {
-    usePageTitle(title)
-    return <></>
+    usePageTitle(title);
+    return <></>;
 }
diff --git a/frontend/src/components/Shortcut.tsx b/frontend/src/components/Shortcut.tsx
index 1a29fdf07..66713f6f2 100644
--- a/frontend/src/components/Shortcut.tsx
+++ b/frontend/src/components/Shortcut.tsx
@@ -1,18 +1,20 @@
-"use client"
+"use client";
 
-import { useEffect, useState } from "react"
+import { useEffect, useState } from "react";
 
-import { isMacOS as deviceIsMacOS } from "@/lib/device"
+import { isMacOS as deviceIsMacOS } from "@/lib/device";
 
 function useIsMacOS() {
-    const [isMacOS, setIsMacOS] = useState(false)
-    useEffect(() => setIsMacOS(deviceIsMacOS()), [])
-    return isMacOS
+    const [isMacOS, setIsMacOS] = useState(false);
+    useEffect(() => setIsMacOS(deviceIsMacOS()), []);
+    return isMacOS;
 }
 
-export type Key = string | SpecialKey
+export type Key = string | SpecialKey;
 
-export type ShortcutCallback = (event: KeyboardEvent | MouseEvent) => void | Promise<unknown>
+export type ShortcutCallback = (
+    event: KeyboardEvent | MouseEvent,
+) => void | Promise<unknown>;
 
 // In sort order (besides Shift on MacOS)
 export enum SpecialKey {
@@ -24,159 +26,160 @@ export enum SpecialKey {
 export class KeyMap extends Map<Key, boolean> {
     private normalizeKey(key: Key) {
         if (typeof key === "string") {
-            return key.toLowerCase()
+            return key.toLowerCase();
         } else {
-            return key
+            return key;
         }
     }
 
     get(key: Key): boolean {
-        return !!super.get(this.normalizeKey(key))
+        return !!super.get(this.normalizeKey(key));
     }
 
     set(key: Key, value: boolean): this {
-        return super.set(this.normalizeKey(key), value)
+        return super.set(this.normalizeKey(key), value);
     }
 }
 
 export function useTranslateKey(key: Key): string {
-    const isMacOS = useIsMacOS()
+    const isMacOS = useIsMacOS();
 
     switch (key) {
-    case SpecialKey.CTRL_COMMAND:
-        return isMacOS ? "⌘" : "Ctrl"
-    case SpecialKey.ALT_OPTION:
-        return isMacOS ? "⌥" : "Alt"
-    case SpecialKey.SHIFT:
-        return isMacOS ? "⇧" : "Shift"
-    default:
-        return key.toLocaleUpperCase()
+        case SpecialKey.CTRL_COMMAND:
+            return isMacOS ? "⌘" : "Ctrl";
+        case SpecialKey.ALT_OPTION:
+            return isMacOS ? "⌥" : "Alt";
+        case SpecialKey.SHIFT:
+            return isMacOS ? "⇧" : "Shift";
+        default:
+            return key.toLocaleUpperCase();
     }
 }
 
 export function useGetSeparator(): string {
-    const THIN_SPACE = " "
+    const THIN_SPACE = " ";
 
-    return useIsMacOS() ? THIN_SPACE : "+"
+    return useIsMacOS() ? THIN_SPACE : "+";
 }
 
 export function useTranslateKeys(keys: Key[]): string {
-    const isMacOS = useIsMacOS()
-    const separator = useGetSeparator()
+    const isMacOS = useIsMacOS();
+    const separator = useGetSeparator();
 
     if (!keys || keys.length === 0) {
-        return ""
+        return "";
     }
 
     return keys
         .sort((a, b) => {
             if (isMacOS && (a === SpecialKey.SHIFT || b === SpecialKey.SHIFT)) {
-                return a === SpecialKey.SHIFT ? -1 : 1 // Shift comes first on MacOS
+                return a === SpecialKey.SHIFT ? -1 : 1; // Shift comes first on MacOS
             } else if (typeof a === "string" && typeof b === "string") {
-                return a.localeCompare(b) // Sort alphabetically
+                return a.localeCompare(b); // Sort alphabetically
             } else if (typeof a === "number" && typeof b !== "number") {
-                return -1 // Regular keys after special keys
+                return -1; // Regular keys after special keys
             } else if (typeof a !== "number" && typeof b === "number") {
-                return 1 // Special keys before regular keys
+                return 1; // Special keys before regular keys
             } else {
-                return a < b ? -1 : 1 // Sort in order of the enum
+                return a < b ? -1 : 1; // Sort in order of the enum
             }
         })
         .map(useTranslateKey)
-        .join(separator)
+        .join(separator);
 }
 
-export function useShortcut(keys: Key[], callback: ShortcutCallback, element?: HTMLElement): string | undefined {
-    const isMacOS = useIsMacOS()
+export function useShortcut(
+    keys: Key[],
+    callback: ShortcutCallback,
+    element?: HTMLElement,
+): string | undefined {
+    const isMacOS = useIsMacOS();
 
     useEffect(() => {
-        const el = element || document.body
-        const keysDown = new KeyMap()
+        const el = element || document.body;
+        const keysDown = new KeyMap();
 
         if (!el || !keys || !callback) {
-            return
+            return;
         }
 
         const handleKeyDown = (event: KeyboardEvent) => {
             if (event.defaultPrevented) {
-                return
+                return;
             }
 
-            const { key, metaKey, ctrlKey, altKey, shiftKey } = event
+            const { key, metaKey, ctrlKey, altKey, shiftKey } = event;
 
-            keysDown.set(key, true)
+            keysDown.set(key, true);
 
             for (const key of keys) {
-                if (keysDown.get(key))
-                    continue
+                if (keysDown.get(key)) continue;
 
                 switch (key) {
-                case SpecialKey.CTRL_COMMAND:
-                    if (isMacOS ? metaKey : ctrlKey)
-                        continue
-                    break
-                case SpecialKey.ALT_OPTION:
-                    if (altKey)
-                        continue
-                    break
-                case SpecialKey.SHIFT:
-                    if (shiftKey)
-                        continue
-                    break
+                    case SpecialKey.CTRL_COMMAND:
+                        if (isMacOS ? metaKey : ctrlKey) continue;
+                        break;
+                    case SpecialKey.ALT_OPTION:
+                        if (altKey) continue;
+                        break;
+                    case SpecialKey.SHIFT:
+                        if (shiftKey) continue;
+                        break;
                 }
 
-                return
+                return;
             }
 
-            event.preventDefault()
-            event.stopImmediatePropagation()
+            event.preventDefault();
+            event.stopImmediatePropagation();
 
-            keysDown.clear()
-            callback(event)
-        }
+            keysDown.clear();
+            callback(event);
+        };
 
         const handleKeyUp = (event: KeyboardEvent) => {
-            const { key } = event
+            const { key } = event;
 
-            keysDown.set(key, false)
-        }
+            keysDown.set(key, false);
+        };
 
         const handleBlur = () => {
-            keysDown.clear()
-        }
+            keysDown.clear();
+        };
 
         //console.log("Shortcut " + translateKeys(keys) + " mounting")
-        el.addEventListener("keydown", handleKeyDown)
-        el.addEventListener("keyup", handleKeyUp)
-        el.addEventListener("blur", handleBlur)
+        el.addEventListener("keydown", handleKeyDown);
+        el.addEventListener("keyup", handleKeyUp);
+        el.addEventListener("blur", handleBlur);
 
         return () => {
             //console.log("Shortcut " + translateKeys(keys) + " unmounting")
-            el.removeEventListener("keydown", handleKeyDown)
-            el.removeEventListener("keyup", handleKeyUp)
-            el.removeEventListener("blur", handleBlur)
-        }
-    }, [callback, element, isMacOS, keys])
+            el.removeEventListener("keydown", handleKeyDown);
+            el.removeEventListener("keyup", handleKeyUp);
+            el.removeEventListener("blur", handleBlur);
+        };
+    }, [callback, element, isMacOS, keys]);
 
-    const keysString = useTranslateKeys(keys)
+    const keysString = useTranslateKeys(keys);
 
     if (!keys || keys.length === 0) {
-        return undefined
+        return undefined;
     } else {
-        return keysString
+        return keysString;
     }
 }
 
-export default function Shortcut({ keys, className }: { keys: Key[], className?: string }) {
-    const [mounted, setMounted] = useState(false)
-    const keysString = useTranslateKeys(keys)
+export default function Shortcut({
+    keys,
+    className,
+}: { keys: Key[]; className?: string }) {
+    const [mounted, setMounted] = useState(false);
+    const keysString = useTranslateKeys(keys);
 
     useEffect(() => {
-        setMounted(true)
-        return () => setMounted(false)
-    }, [])
+        setMounted(true);
+        return () => setMounted(false);
+    }, []);
 
-    return <span className={className}>
-        {mounted && keysString}
-    </span>
+    return <span className={className}>{mounted && keysString}</span>;
 }
diff --git a/frontend/src/components/Sort.tsx b/frontend/src/components/Sort.tsx
index b662ed964..c2c2abe70 100644
--- a/frontend/src/components/Sort.tsx
+++ b/frontend/src/components/Sort.tsx
@@ -1,5 +1,5 @@
-import Select from "@/components/Select2"
-import type { TerseScratch } from "@/lib/api"
+import Select from "@/components/Select2";
+import type { TerseScratch } from "@/lib/api";
 
 export enum SortMode {
     NEWEST_FIRST = "-creation_time",
@@ -9,49 +9,58 @@ export enum SortMode {
     MOST_MATCHED = "-match_percent",
 }
 
-export function produceSortFunction(sortMode: SortMode): (a: TerseScratch, b: TerseScratch) => number {
+export function produceSortFunction(
+    sortMode: SortMode,
+): (a: TerseScratch, b: TerseScratch) => number {
     switch (sortMode) {
-    case SortMode.NEWEST_FIRST:
-        return (a, b) => new Date(b.creation_time).getTime() - new Date(a.creation_time).getTime()
-    case SortMode.OLDEST_FIRST:
-        return (a, b) => new Date(a.creation_time).getTime() - new Date(b.creation_time).getTime()
-    case SortMode.LAST_UPDATED: // most recent first
-        return (a, b) => new Date(b.last_updated).getTime() - new Date(a.last_updated).getTime()
-    case SortMode.LEAST_MATCHED:
-        return (a, b) => compareScratchScores(b, a)
-    case SortMode.MOST_MATCHED:
-        return compareScratchScores
+        case SortMode.NEWEST_FIRST:
+            return (a, b) =>
+                new Date(b.creation_time).getTime() -
+                new Date(a.creation_time).getTime();
+        case SortMode.OLDEST_FIRST:
+            return (a, b) =>
+                new Date(a.creation_time).getTime() -
+                new Date(b.creation_time).getTime();
+        case SortMode.LAST_UPDATED: // most recent first
+            return (a, b) =>
+                new Date(b.last_updated).getTime() -
+                new Date(a.last_updated).getTime();
+        case SortMode.LEAST_MATCHED:
+            return (a, b) => compareScratchScores(b, a);
+        case SortMode.MOST_MATCHED:
+            return compareScratchScores;
     }
 }
 
 export function compareScratchScores(a: TerseScratch, b: TerseScratch) {
     // If not compiling, give it a score of Infinity so it's sorted to the end
-    const aScore = a.score < 0 ? Number.POSITIVE_INFINITY : a.score
-    const bScore = b.score < 0 ? Number.POSITIVE_INFINITY : b.score
+    const aScore = a.score < 0 ? Number.POSITIVE_INFINITY : a.score;
+    const bScore = b.score < 0 ? Number.POSITIVE_INFINITY : b.score;
 
     // Sort scratches with the same score with most recently updated first
     if (aScore === bScore) {
-        return new Date(b.last_updated).getTime() - new Date(a.last_updated).getTime()
+        return (
+            new Date(b.last_updated).getTime() -
+            new Date(a.last_updated).getTime()
+        );
     }
-    return aScore - bScore
+    return aScore - bScore;
 }
 
 export type Props = {
-    className?: string
-    sortMode: SortMode
-    setSortMode: (m: SortMode) => void
-}
+    className?: string;
+    sortMode: SortMode;
+    setSortMode: (m: SortMode) => void;
+};
 
 export default function SortBy({ sortMode, setSortMode }: Props) {
     return (
         <div>
-            <span className="mr-2 text-gray-11 text-xs">
-                Sort by
-            </span>
+            <span className="mr-2 text-gray-11 text-xs">Sort by</span>
             <Select
                 value={sortMode}
-                onChange={m => {
-                    setSortMode(m as SortMode)
+                onChange={(m) => {
+                    setSortMode(m as SortMode);
                 }}
                 options={{
                     [SortMode.NEWEST_FIRST]: "Newest first",
@@ -61,6 +70,6 @@ export default function SortBy({ sortMode, setSortMode }: Props) {
                     [SortMode.MOST_MATCHED]: "Most matched",
                 }}
             />
-        </div >
-    )
+        </div>
+    );
 }
diff --git a/frontend/src/components/Tabs.tsx b/frontend/src/components/Tabs.tsx
index 3535e9276..9dbd34050 100644
--- a/frontend/src/components/Tabs.tsx
+++ b/frontend/src/components/Tabs.tsx
@@ -1,118 +1,145 @@
-import { type ReactElement, type ReactNode, createContext, Component, useState, createRef, type RefObject, useLayoutEffect, useRef } from "react"
+import {
+    type ReactElement,
+    type ReactNode,
+    createContext,
+    Component,
+    useState,
+    createRef,
+    type RefObject,
+    useLayoutEffect,
+    useRef,
+} from "react";
 
-import { XIcon } from "@primer/octicons-react"
-import classNames from "classnames"
+import { XIcon } from "@primer/octicons-react";
+import classNames from "classnames";
 
-import ErrorBoundary from "./ErrorBoundary"
-import styles from "./Tabs.module.scss"
+import ErrorBoundary from "./ErrorBoundary";
+import styles from "./Tabs.module.scss";
 
 type Context = {
-    activeTab: string | undefined
-    setActive: (tab: string | undefined) => void
-    hover: string | undefined
-    setHover: (tab: string | undefined) => void
-    setTabRef: (tab: string, ref: RefObject<HTMLButtonElement>) => void
-}
+    activeTab: string | undefined;
+    setActive: (tab: string | undefined) => void;
+    hover: string | undefined;
+    setHover: (tab: string | undefined) => void;
+    setTabRef: (tab: string, ref: RefObject<HTMLButtonElement>) => void;
+};
 
-const TABS_CTX = createContext<Context>(null)
+const TABS_CTX = createContext<Context>(null);
 
 export function TabCloseButton({ onClick }: { onClick: () => void }) {
-    return <button
-        aria-label="Close"
-        className={styles.closeButton}
-        onClick={evt => {
-            evt.stopPropagation() // Don't activate the tab
-            onClick()
-        }}
-    >
-        <XIcon />
-    </button>
+    return (
+        <button
+            aria-label="Close"
+            className={styles.closeButton}
+            onClick={(evt) => {
+                evt.stopPropagation(); // Don't activate the tab
+                onClick();
+            }}
+        >
+            <XIcon />
+        </button>
+    );
 }
 
 // Pass a ReactNode, or pass a function so the tab content can be rendered lazily.
-export type TabContent = ReactNode | (() => ReactNode)
+export type TabContent = ReactNode | (() => ReactNode);
 
 export type TabProps = {
-    children?: TabContent
-    className?: string
-    tabKey: string
-    label?: ReactNode
-    disabled?: boolean
-    onSelect?: () => void
-}
+    children?: TabContent;
+    className?: string;
+    tabKey: string;
+    label?: ReactNode;
+    disabled?: boolean;
+    onSelect?: () => void;
+};
 
 export class Tab extends Component<TabProps> {
-    ref = createRef<HTMLButtonElement>()
+    ref = createRef<HTMLButtonElement>();
 
     render() {
-        const key = this.props.tabKey
+        const key = this.props.tabKey;
 
-        return <TABS_CTX.Consumer>
-            {ctx => {
-                if (!ctx) {
-                    console.error("Misplaced Tab (not in Tabs?)")
-                    return <div>Misplaced Tab (not in Tabs?)</div>
-                }
+        return (
+            <TABS_CTX.Consumer>
+                {(ctx) => {
+                    if (!ctx) {
+                        console.error("Misplaced Tab (not in Tabs?)");
+                        return <div>Misplaced Tab (not in Tabs?)</div>;
+                    }
 
-                if (typeof key !== "string") {
-                    console.error("Misplaced Tab (no tabKey)")
-                    return <div>Misplaced Tab (no tabKey?)</div>
-                }
+                    if (typeof key !== "string") {
+                        console.error("Misplaced Tab (no tabKey)");
+                        return <div>Misplaced Tab (no tabKey?)</div>;
+                    }
 
-                ctx.setTabRef(key, this.ref)
-
-                return <button
-                    role="tab"
-                    aria-selected={ctx.activeTab === key}
-                    className={styles.tabButton}
-                    disabled={this.props.disabled}
-                    onClick={() => {
-                        ctx.setActive(key)
-
-                        if (this.props.onSelect) {
-                            // run after layout
-                            setTimeout(() => {
-                                this.props.onSelect()
-                            }, 0)
-                        }
-                    }}
-                    onMouseMove={event => {
-                        ctx.setHover(key)
-                        event.stopPropagation()
-                    }}
-                    onFocus={() => {
-                        ctx.setHover(key)
-                    }}
-                    ref={this.ref}
-                >
-                    {this.props.label ?? key}
-                </button>
-            }}
-        </TABS_CTX.Consumer>
+                    ctx.setTabRef(key, this.ref);
+
+                    return (
+                        <button
+                            role="tab"
+                            aria-selected={ctx.activeTab === key}
+                            className={styles.tabButton}
+                            disabled={this.props.disabled}
+                            onClick={() => {
+                                ctx.setActive(key);
+
+                                if (this.props.onSelect) {
+                                    // run after layout
+                                    setTimeout(() => {
+                                        this.props.onSelect();
+                                    }, 0);
+                                }
+                            }}
+                            onMouseMove={(event) => {
+                                ctx.setHover(key);
+                                event.stopPropagation();
+                            }}
+                            onFocus={() => {
+                                ctx.setHover(key);
+                            }}
+                            ref={this.ref}
+                        >
+                            {this.props.label ?? key}
+                        </button>
+                    );
+                }}
+            </TABS_CTX.Consumer>
+        );
     }
 }
 
 export type Props = {
-    className?: string
-    children: ReactElement<typeof Tab> | ReactElement<typeof Tab>[] | ReactElement<typeof Tab>[][]
-    activeTab: string | undefined
-    onChange: (tab: string) => void
-    vertical?: boolean
-    border?: boolean
-    background?: string
-}
+    className?: string;
+    children:
+        | ReactElement<typeof Tab>
+        | ReactElement<typeof Tab>[]
+        | ReactElement<typeof Tab>[][];
+    activeTab: string | undefined;
+    onChange: (tab: string) => void;
+    vertical?: boolean;
+    border?: boolean;
+    background?: string;
+};
 
-export default function Tabs({ children, activeTab, onChange, className, vertical, border, background }: Props) {
-    const [hover, _setHover] = useState<string>()
-    const bgRef = useRef<HTMLDivElement>()
-    const isMovingBetweenButtons = useRef(false)
+export default function Tabs({
+    children,
+    activeTab,
+    onChange,
+    className,
+    vertical,
+    border,
+    background,
+}: Props) {
+    const [hover, _setHover] = useState<string>();
+    const bgRef = useRef<HTMLDivElement>();
+    const isMovingBetweenButtons = useRef(false);
 
     const tabs: {
         [key: string]: {
-            el: ReactElement<typeof Tab>
-            ref?: RefObject<HTMLButtonElement>
-        }
-    } = {}
+            el: ReactElement<typeof Tab>;
+            ref?: RefObject<HTMLButtonElement>;
+        };
+    } = {};
 
     if (Array.isArray(children)) {
         for (const child of children) {
@@ -120,113 +147,124 @@ export default function Tabs({ children, activeTab, onChange, className, vertica
             } else if (Array.isArray(child)) {
                 for (const grandchild of child) {
                     if (grandchild) {
-                        tabs[(grandchild.props as unknown as TabProps).tabKey] = { el: grandchild }
+                        tabs[(grandchild.props as unknown as TabProps).tabKey] =
+                            { el: grandchild };
                     }
                 }
             } else {
-                tabs[(child.props as unknown as TabProps).tabKey] = { el: child }
+                tabs[(child.props as unknown as TabProps).tabKey] = {
+                    el: child,
+                };
             }
         }
     } else {
-        tabs[(children.props as unknown as TabProps).tabKey] = { el: children }
+        tabs[(children.props as unknown as TabProps).tabKey] = { el: children };
     }
 
-    const hoverChild = tabs[hover]
+    const hoverChild = tabs[hover];
 
     const setHover = (tab: string | undefined) => {
-        isMovingBetweenButtons.current = hover !== undefined && !!tab
-        _setHover(tab)
-    }
+        isMovingBetweenButtons.current = hover !== undefined && !!tab;
+        _setHover(tab);
+    };
 
     useLayoutEffect(() => {
-        const button = hoverChild?.ref?.current
+        const button = hoverChild?.ref?.current;
 
         if (button) {
             Object.assign(bgRef.current.style, {
                 opacity: 1,
-                transform: `translate(${button.offsetLeft}px, ${vertical ? (button.offsetTop - 8) : button.offsetTop}px)`,
+                transform: `translate(${button.offsetLeft}px, ${vertical ? button.offsetTop - 8 : button.offsetTop}px)`,
                 width: vertical ? "" : `${button.offsetWidth}px`,
                 height: vertical ? `${button.offsetHeight}px` : "",
-            })
+            });
         } else {
             Object.assign(bgRef.current.style, {
                 opacity: 0,
-            })
+            });
         }
 
         Object.assign(bgRef.current.style, {
             transitionDuration: isMovingBetweenButtons.current ? ".15s" : "0s",
-        })
-    })
+        });
+    });
 
     // Switch to first tab if active tab is not found
-    const activeChild = tabs[activeTab]
-    const firstTab = Object.keys(tabs)[0]
+    const activeChild = tabs[activeTab];
+    const firstTab = Object.keys(tabs)[0];
     if (!activeChild && firstTab) {
-        onChange(firstTab)
+        onChange(firstTab);
     }
 
-    return <TABS_CTX.Provider
-        value={{
-            activeTab,
-            setActive: onChange,
-            hover,
-            setHover,
-            setTabRef: (key, ref) => {
-                if (!tabs[key])
-                    throw new Error(`No tab with key: '${key}'`)
-                tabs[key].ref = ref
-            },
-        }}
-    >
-        <div
-            className={classNames(
-                styles.container,
-                {
-                    [styles.border]: typeof border === "undefined" ? true : border,
-                    [styles.vertical]: vertical,
+    return (
+        <TABS_CTX.Provider
+            value={{
+                activeTab,
+                setActive: onChange,
+                hover,
+                setHover,
+                setTabRef: (key, ref) => {
+                    if (!tabs[key])
+                        throw new Error(`No tab with key: '${key}'`);
+                    tabs[key].ref = ref;
                 },
-                className,
-            )}
+            }}
         >
             <div
-                role="tablist"
-                className={styles.tabButtons}
-                style={{ background }}
-                onMouseMove={() => {
-                    // If the event propagated here, no non-disabled tab is hovered over
-                    setHover(undefined)
-                }}
-                onMouseLeave={() => setHover(undefined)}
-                onBlur={() => setHover(undefined)}
+                className={classNames(
+                    styles.container,
+                    {
+                        [styles.border]:
+                            typeof border === "undefined" ? true : border,
+                        [styles.vertical]: vertical,
+                    },
+                    className,
+                )}
             >
-                {children}
                 <div
-                    ref={bgRef}
-                    className={styles.tabButtonsBackground}
-                />
-            </div>
-            {Object.entries(tabs).map(([key, { el }]) => {
-                const props = el.props as unknown as TabProps
-                const isActive = key === activeTab
-                const children = typeof props.children === "function"
-                    ? (isActive ? props.children() : null) // Render only when active
-                    : props.children
-
-                return <div
-                    role="tabpanel"
-                    className={classNames(styles.tabPanel, {
-                        [styles.active]: isActive,
-                    })}
-                    key={key}
+                    role="tablist"
+                    className={styles.tabButtons}
+                    style={{ background }}
+                    onMouseMove={() => {
+                        // If the event propagated here, no non-disabled tab is hovered over
+                        setHover(undefined);
+                    }}
+                    onMouseLeave={() => setHover(undefined)}
+                    onBlur={() => setHover(undefined)}
                 >
-                    <div className={classNames(styles.tabPanelContent, props.className)}>
-                        <ErrorBoundary>
-                            {children}
-                        </ErrorBoundary>
-                    </div>
+                    {children}
+                    <div ref={bgRef} className={styles.tabButtonsBackground} />
                 </div>
-            })}
-        </div>
-    </TABS_CTX.Provider>
+                {Object.entries(tabs).map(([key, { el }]) => {
+                    const props = el.props as unknown as TabProps;
+                    const isActive = key === activeTab;
+                    const children =
+                        typeof props.children === "function"
+                            ? isActive
+                                ? props.children()
+                                : null // Render only when active
+                            : props.children;
+
+                    return (
+                        <div
+                            role="tabpanel"
+                            className={classNames(styles.tabPanel, {
+                                [styles.active]: isActive,
+                            })}
+                            key={key}
+                        >
+                            <div
+                                className={classNames(
+                                    styles.tabPanelContent,
+                                    props.className,
+                                )}
+                            >
+                                <ErrorBoundary>{children}</ErrorBoundary>
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
+        </TABS_CTX.Provider>
+    );
 }
diff --git a/frontend/src/components/ThemePicker.tsx b/frontend/src/components/ThemePicker.tsx
index d8128a602..82f293632 100644
--- a/frontend/src/components/ThemePicker.tsx
+++ b/frontend/src/components/ThemePicker.tsx
@@ -1,37 +1,51 @@
-import { LightBulbIcon, MoonIcon, SunIcon } from "@primer/octicons-react"
+import { LightBulbIcon, MoonIcon, SunIcon } from "@primer/octicons-react";
 
-import { isPrefersColorSchemeDark } from "@/lib/settings"
+import { isPrefersColorSchemeDark } from "@/lib/settings";
 
-import styles from "./ThemePicker.module.scss"
+import styles from "./ThemePicker.module.scss";
 
-export type Theme = "auto" | "light" | "dark"
+export type Theme = "auto" | "light" | "dark";
 
 export interface Props {
-    theme: Theme
-    onChange: (theme: Theme) => void
+    theme: Theme;
+    onChange: (theme: Theme) => void;
 }
 
 export default function ThemePicker({ theme, onChange }: Props) {
-    const autoTheme = isPrefersColorSchemeDark() ? "dark" : "light"
+    const autoTheme = isPrefersColorSchemeDark() ? "dark" : "light";
 
-    return <div className={styles.container}>
-        <button className={styles.box} onClick={() => onChange("auto")} data-active={theme === "auto"}>
-            <div className={styles.boxHeader}>
-                <LightBulbIcon />
-                System ({autoTheme})
-            </div>
-        </button>
-        <button className={styles.box} onClick={() => onChange("light")} data-active={theme === "light"}>
-            <div className={styles.boxHeader}>
-                <SunIcon />
-                Light theme
-            </div>
-        </button>
-        <button className={styles.box} onClick={() => onChange("dark")} data-active={theme === "dark"}>
-            <div className={styles.boxHeader}>
-                <MoonIcon />
-                Dark theme
-            </div>
-        </button>
-    </div>
+    return (
+        <div className={styles.container}>
+            <button
+                className={styles.box}
+                onClick={() => onChange("auto")}
+                data-active={theme === "auto"}
+            >
+                <div className={styles.boxHeader}>
+                    <LightBulbIcon />
+                    System ({autoTheme})
+                </div>
+            </button>
+            <button
+                className={styles.box}
+                onClick={() => onChange("light")}
+                data-active={theme === "light"}
+            >
+                <div className={styles.boxHeader}>
+                    <SunIcon />
+                    Light theme
+                </div>
+            </button>
+            <button
+                className={styles.box}
+                onClick={() => onChange("dark")}
+                data-active={theme === "dark"}
+            >
+                <div className={styles.boxHeader}>
+                    <MoonIcon />
+                    Dark theme
+                </div>
+            </button>
+        </div>
+    );
 }
diff --git a/frontend/src/components/TimeAgo.tsx b/frontend/src/components/TimeAgo.tsx
index 2e2cb27ef..5c0498ec7 100644
--- a/frontend/src/components/TimeAgo.tsx
+++ b/frontend/src/components/TimeAgo.tsx
@@ -1,21 +1,18 @@
-import DateObject from "react-date-object"
-import ReactTimeAgo from "react-timeago"
+import DateObject from "react-date-object";
+import ReactTimeAgo from "react-timeago";
 
-function formatDateString(x: string, format="YYYY-MM-DD HH:mm:ss") {
-    const date = Date.parse(x)
-    const dateObject = new DateObject(date)
-    return dateObject.format(format)
+function formatDateString(x: string, format = "YYYY-MM-DD HH:mm:ss") {
+    const date = Date.parse(x);
+    const dateObject = new DateObject(date);
+    return dateObject.format(format);
 }
 
 export default function TimeAgo({
     date,
 }: {
-    date: string
+    date: string;
 }) {
-    const title = formatDateString(date)
+    const title = formatDateString(date);
 
-    return <ReactTimeAgo
-        date={date}
-        title={title}
-    />
+    return <ReactTimeAgo date={date} title={title} />;
 }
diff --git a/frontend/src/components/VerticalMenu.tsx b/frontend/src/components/VerticalMenu.tsx
index 251efc496..d945c7812 100644
--- a/frontend/src/components/VerticalMenu.tsx
+++ b/frontend/src/components/VerticalMenu.tsx
@@ -1,102 +1,140 @@
-import { createContext, type ReactNode, useCallback, useContext, useState } from "react"
-
-import Link from "next/link"
-import { useRouter } from "next/navigation"
-
-import classNames from "classnames"
-
-import ErrorBoundary from "./ErrorBoundary"
-import LoadingSpinner from "./loading.svg"
-import Shortcut, { type Key, type ShortcutCallback, useShortcut } from "./Shortcut"
-import styles from "./VerticalMenu.module.scss"
+import {
+    createContext,
+    type ReactNode,
+    useCallback,
+    useContext,
+    useState,
+} from "react";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+
+import classNames from "classnames";
+
+import ErrorBoundary from "./ErrorBoundary";
+import LoadingSpinner from "./loading.svg";
+import Shortcut, {
+    type Key,
+    type ShortcutCallback,
+    useShortcut,
+} from "./Shortcut";
+import styles from "./VerticalMenu.module.scss";
 
 const MenuContext = createContext({
     open: true,
     setOpen: (_open: boolean) => {},
     setPointerEvents: (_pointerEvents: boolean) => {},
-})
+});
 
 export interface Props {
-    children: ReactNode
-    open: boolean
-    setOpen: (open: boolean) => void
+    children: ReactNode;
+    open: boolean;
+    setOpen: (open: boolean) => void;
 }
 
 export default function VerticalMenu({ children, open, setOpen }: Props) {
-    const [pointerEvents, setPointerEvents] = useState(true)
-
-    return <MenuContext.Provider value={{ open, setOpen, setPointerEvents }}>
-        <ul
-            className={styles.menu}
-            onClick={evt => {
-                // Prevent reopening the menu
-                evt.stopPropagation()
-            }}
-            style={{
-                display: open ? "block" : "none",
-                pointerEvents: pointerEvents ? "auto" : "none",
-            }}
-        >
-            <ErrorBoundary>
-                {children}
-            </ErrorBoundary>
-        </ul>
-    </MenuContext.Provider>
+    const [pointerEvents, setPointerEvents] = useState(true);
+
+    return (
+        <MenuContext.Provider value={{ open, setOpen, setPointerEvents }}>
+            <ul
+                className={styles.menu}
+                onClick={(evt) => {
+                    // Prevent reopening the menu
+                    evt.stopPropagation();
+                }}
+                style={{
+                    display: open ? "block" : "none",
+                    pointerEvents: pointerEvents ? "auto" : "none",
+                }}
+            >
+                <ErrorBoundary>{children}</ErrorBoundary>
+            </ul>
+        </MenuContext.Provider>
+    );
 }
 
-export function MenuItem({ className, children }: { className?: string, children: ReactNode }) {
-    return <li className={classNames(styles.item, className)}>
-        {children}
-    </li>
+export function MenuItem({
+    className,
+    children,
+}: { className?: string; children: ReactNode }) {
+    return <li className={classNames(styles.item, className)}>{children}</li>;
 }
 
-export function ButtonItem({ children, disabled, onTrigger, shortcutKeys }: {
-    children: ReactNode
-    disabled?: boolean
-    onTrigger: ShortcutCallback
-    shortcutKeys?: Key[]
+export function ButtonItem({
+    children,
+    disabled,
+    onTrigger,
+    shortcutKeys,
+}: {
+    children: ReactNode;
+    disabled?: boolean;
+    onTrigger: ShortcutCallback;
+    shortcutKeys?: Key[];
 }) {
-    const { setOpen, setPointerEvents } = useContext(MenuContext)
-    const [isLoading, setIsLoading] = useState(false)
+    const { setOpen, setPointerEvents } = useContext(MenuContext);
+    const [isLoading, setIsLoading] = useState(false);
 
     const trigger = async (event: any) => {
         if (!disabled) {
-            setIsLoading(true)
-            setPointerEvents(false)
-            await onTrigger(event)
-            setIsLoading(false)
-            setPointerEvents(true)
-            setOpen(false)
+            setIsLoading(true);
+            setPointerEvents(false);
+            await onTrigger(event);
+            setIsLoading(false);
+            setPointerEvents(true);
+            setOpen(false);
         }
-    }
-
-    useShortcut(shortcutKeys, trigger)
-
-    return <a
-        className={classNames(styles.item, {
-            [styles.disabled]: disabled,
-        })}
-        onClick={trigger}
-    >
-        <div className={styles.itemChildren}>{children}</div>
-
-        {shortcutKeys && <div className={styles.right} style={isLoading ? { display: "none" } : {}}>
-            <Shortcut keys={shortcutKeys} className={styles.shortcut}/>
-        </div>}
-        <div className={styles.right} style={isLoading ? {} : { display: "none" }}>
-            <LoadingSpinner width={16} height={16} />
-        </div>
-    </a>
+    };
+
+    useShortcut(shortcutKeys, trigger);
+
+    return (
+        <a
+            className={classNames(styles.item, {
+                [styles.disabled]: disabled,
+            })}
+            onClick={trigger}
+        >
+            <div className={styles.itemChildren}>{children}</div>
+
+            {shortcutKeys && (
+                <div
+                    className={styles.right}
+                    style={isLoading ? { display: "none" } : {}}
+                >
+                    <Shortcut keys={shortcutKeys} className={styles.shortcut} />
+                </div>
+            )}
+            <div
+                className={styles.right}
+                style={isLoading ? {} : { display: "none" }}
+            >
+                <LoadingSpinner width={16} height={16} />
+            </div>
+        </a>
+    );
 }
 
-export function LinkItem({ children, href, disabled, shortcutKeys }: { children: ReactNode, href: string, disabled?: boolean, shortcutKeys?: Key[] }) {
-    const { setOpen } = useContext(MenuContext)
-    const router = useRouter()
+export function LinkItem({
+    children,
+    href,
+    disabled,
+    shortcutKeys,
+}: {
+    children: ReactNode;
+    href: string;
+    disabled?: boolean;
+    shortcutKeys?: Key[];
+}) {
+    const { setOpen } = useContext(MenuContext);
+    const router = useRouter();
 
-    useShortcut(shortcutKeys, useCallback(() => {
-        if (!disabled)
-            router.push(href)
-    }, [disabled, router, href]))
+    useShortcut(
+        shortcutKeys,
+        useCallback(() => {
+            if (!disabled) router.push(href);
+        }, [disabled, router, href]),
+    );
 
     return (
         <Link
@@ -105,15 +143,15 @@ export function LinkItem({ children, href, disabled, shortcutKeys }: { children:
                 [styles.disabled]: disabled,
             })}
             onClick={() => {
-                if (!disabled)
-                    setOpen(false)
-            }}>
-
+                if (!disabled) setOpen(false);
+            }}
+        >
             <div className={styles.itemChildren}>{children}</div>
-            {shortcutKeys && <div>
-                <Shortcut keys={shortcutKeys} className={styles.shortcut}/>
-            </div>}
-
+            {shortcutKeys && (
+                <div>
+                    <Shortcut keys={shortcutKeys} className={styles.shortcut} />
+                </div>
+            )}
         </Link>
-    )
+    );
 }
diff --git a/frontend/src/components/YourScratchList.tsx b/frontend/src/components/YourScratchList.tsx
index a41cc91bb..5836c4331 100644
--- a/frontend/src/components/YourScratchList.tsx
+++ b/frontend/src/components/YourScratchList.tsx
@@ -1,20 +1,23 @@
-"use client"
+"use client";
 
-import { useThisUser, isAnonUser } from "@/lib/api"
+import { useThisUser, isAnonUser } from "@/lib/api";
 
-import ScratchList, { type Props as ScratchListProps } from "./ScratchList"
+import ScratchList, { type Props as ScratchListProps } from "./ScratchList";
 
-export type Props = Omit<ScratchListProps, "url">
+export type Props = Omit<ScratchListProps, "url">;
 
 export default function YourScratchList(props: Props) {
-    const user = useThisUser()
-    const url = (!user || isAnonUser(user))
-        ? "/user/scratches?page_size=20" // Using this url all the time results in stale data if you log out
-        : `/users/${user.username}/scratches?page_size=20`
+    const user = useThisUser();
+    const url =
+        !user || isAnonUser(user)
+            ? "/user/scratches?page_size=20" // Using this url all the time results in stale data if you log out
+            : `/users/${user.username}/scratches?page_size=20`;
 
-    return <ScratchList
-        url={url}
-        emptyButtonLabel="Create your first scratch"
-        {...props}
-    />
+    return (
+        <ScratchList
+            url={url}
+            emptyButtonLabel="Create your first scratch"
+            {...props}
+        />
+    );
 }
diff --git a/frontend/src/components/compiler/CompilerOpts.tsx b/frontend/src/components/compiler/CompilerOpts.tsx
index 574d3a903..c6bc0c2dd 100644
--- a/frontend/src/components/compiler/CompilerOpts.tsx
+++ b/frontend/src/components/compiler/CompilerOpts.tsx
@@ -1,210 +1,299 @@
-import { createContext, useContext, useState, Fragment, type ReactElement } from "react"
+import {
+    createContext,
+    useContext,
+    useState,
+    Fragment,
+    type ReactElement,
+} from "react";
 
-import { TrashIcon } from "@primer/octicons-react"
+import { TrashIcon } from "@primer/octicons-react";
 
-import Checkbox from "@/app/(navfooter)/settings/Checkbox"
-import Button from "@/components/Button"
-import Select2 from "@/components/Select2"
-import * as api from "@/lib/api"
-import type { Library } from "@/lib/api/types"
-import getTranslation from "@/lib/i18n/translate"
+import Checkbox from "@/app/(navfooter)/settings/Checkbox";
+import Button from "@/components/Button";
+import Select2 from "@/components/Select2";
+import * as api from "@/lib/api";
+import type { Library } from "@/lib/api/types";
+import getTranslation from "@/lib/i18n/translate";
 
-import { PlatformIcon } from "../PlatformSelect/PlatformIcon"
-import Select from "../Select" // TODO: use Select2
+import { PlatformIcon } from "../PlatformSelect/PlatformIcon";
+import Select from "../Select"; // TODO: use Select2
 
-import styles from "./CompilerOpts.module.css"
-import { useCompilersForPlatform } from "./compilers"
-import PresetSelect from "./PresetSelect"
+import styles from "./CompilerOpts.module.css";
+import { useCompilersForPlatform } from "./compilers";
+import PresetSelect from "./PresetSelect";
 
-const NO_TRANSLATION = "NO_TRANSLATION"
+const NO_TRANSLATION = "NO_TRANSLATION";
 
 interface IOptsContext {
-    checkFlag(flag: string): boolean
-    setFlag(flag: string, value: boolean): void
-    setFlags(edits: { flag: string, value: boolean }[]): void
+    checkFlag(flag: string): boolean;
+    setFlag(flag: string, value: boolean): void;
+    setFlags(edits: { flag: string; value: boolean }[]): void;
 }
 
-const OptsContext = createContext<IOptsContext>(undefined)
+const OptsContext = createContext<IOptsContext>(undefined);
 
-type CheckboxProps = { flag: string, description: string }
+type CheckboxProps = { flag: string; description: string };
 
 function FlagCheckbox({ flag, description }: CheckboxProps) {
-    const { checkFlag, setFlag } = useContext(OptsContext)
+    const { checkFlag, setFlag } = useContext(OptsContext);
 
-    const isChecked = checkFlag(flag)
+    const isChecked = checkFlag(flag);
 
-    return <div className={styles.flag} onClick={() => setFlag(flag, !isChecked)}>
-        <input type="checkbox" checked={isChecked} onChange={() => setFlag(flag, !isChecked)} />
-        <label>{flag}</label>
-        <span className={styles.flagDescription}>{description}</span>
-    </div>
+    return (
+        <div className={styles.flag} onClick={() => setFlag(flag, !isChecked)}>
+            <input
+                type="checkbox"
+                checked={isChecked}
+                onChange={() => setFlag(flag, !isChecked)}
+            />
+            <label>{flag}</label>
+            <span className={styles.flagDescription}>{description}</span>
+        </div>
+    );
 }
 
 function DiffCheckbox({ flag, description }: CheckboxProps) {
-    const { checkFlag, setFlag } = useContext(OptsContext)
+    const { checkFlag, setFlag } = useContext(OptsContext);
 
-    const isChecked = checkFlag(flag)
+    const isChecked = checkFlag(flag);
 
-    return <div className={styles.flag} onClick={() => setFlag(flag, !isChecked)}>
-        <input type="checkbox" checked={isChecked} onChange={() => setFlag(flag, !isChecked)} />
-        <label>{description}</label>
-    </div>
+    return (
+        <div className={styles.flag} onClick={() => setFlag(flag, !isChecked)}>
+            <input
+                type="checkbox"
+                checked={isChecked}
+                onChange={() => setFlag(flag, !isChecked)}
+            />
+            <label>{description}</label>
+        </div>
+    );
 }
 
-type FlagSetProps = { name: string, children: ReactElement<FlagOptionProps>[], value: string };
+type FlagSetProps = {
+    name: string;
+    children: ReactElement<FlagOptionProps>[];
+    value: string;
+};
 
 function FlagSet({ name, children, value }: FlagSetProps) {
-    const { setFlag } = useContext(OptsContext)
-
-    return <div className={styles.flagSet}>
-        <div className={styles.flagSetName}>{name}</div>
-        <Select
-            onChange={event => {
-                for (const child of children) {
-                    setFlag(child.props.flag, false)
-                }
+    const { setFlag } = useContext(OptsContext);
 
-                setFlag((event.target as HTMLSelectElement).value, true)
-            }}
-            value={value}
-        >
-            {children}
-        </Select>
-    </div>
+    return (
+        <div className={styles.flagSet}>
+            <div className={styles.flagSetName}>{name}</div>
+            <Select
+                onChange={(event) => {
+                    for (const child of children) {
+                        setFlag(child.props.flag, false);
+                    }
+
+                    setFlag((event.target as HTMLSelectElement).value, true);
+                }}
+                value={value}
+            >
+                {children}
+            </Select>
+        </div>
+    );
 }
 
 function DiffFlagSet({ name, children, value }: FlagSetProps) {
-    const { setFlags } = useContext(OptsContext)
-
-    return <div className={styles.flagSet}>
-        <div className={styles.flagSetName}>{name}</div>
-        <Select
-            onChange={event => {
-                const trueFlag = (event.target as HTMLSelectElement).value
-
-                const edits = children.map(child => {
-                    return { flag: child.props.flag, value: child.props.flag === trueFlag }
-                })
-
-                setFlags(edits)
-            }}
-            value={value}
-        >
-            {children}
-        </Select>
-    </div>
+    const { setFlags } = useContext(OptsContext);
+
+    return (
+        <div className={styles.flagSet}>
+            <div className={styles.flagSetName}>{name}</div>
+            <Select
+                onChange={(event) => {
+                    const trueFlag = (event.target as HTMLSelectElement).value;
+
+                    const edits = children.map((child) => {
+                        return {
+                            flag: child.props.flag,
+                            value: child.props.flag === trueFlag,
+                        };
+                    });
+
+                    setFlags(edits);
+                }}
+                value={value}
+            >
+                {children}
+            </Select>
+        </div>
+    );
 }
 
-type FlagOptionProps = { flag: string, description?: string };
+type FlagOptionProps = { flag: string; description?: string };
 
 function FlagOption({ flag, description }: FlagOptionProps) {
-    return <option value={flag}>
-        {flag} {description && description !== NO_TRANSLATION && `(${description})`}
-    </option>
+    return (
+        <option value={flag}>
+            {flag}{" "}
+            {description &&
+                description !== NO_TRANSLATION &&
+                `(${description})`}
+        </option>
+    );
 }
 
 function DiffFlagOption({ flag, description }: FlagOptionProps) {
-    return <option value={flag}>
-        {description || flag}
-    </option>
+    return <option value={flag}>{description || flag}</option>;
 }
 
 interface FlagsProps {
-    schema: api.Flag[]
+    schema: api.Flag[];
 }
 
 function Flags({ schema }: FlagsProps) {
-    const compilersTranslation = getTranslation("compilers")
-    const { checkFlag } = useContext(OptsContext)
-
-    return <>
-        {schema.map(flag => {
-            if (flag.type === "checkbox") {
-                return <FlagCheckbox key={flag.id} flag={flag.flag} description={compilersTranslation.t(flag.id)} />
-            } else if (flag.type === "flagset") {
-                const selectedFlag = flag.flags.filter(checkFlag)[0] || "---"
-                const flagOptions = flag.flags.map(f => <FlagOption key={f} flag={f} description={
-                    compilersTranslation.tWithDefault(`${flag.id}.${f}`, NO_TRANSLATION)
-                } />)
-
-                return <FlagSet key={flag.id} name={compilersTranslation.t(flag.id)} value={selectedFlag}>
-                    {[<option value="" key={"__NULL__"}>{"---"}</option>, ...flagOptions]}
-                </FlagSet>
-            }
-        })}
-    </>
+    const compilersTranslation = getTranslation("compilers");
+    const { checkFlag } = useContext(OptsContext);
+
+    return (
+        <>
+            {schema.map((flag) => {
+                if (flag.type === "checkbox") {
+                    return (
+                        <FlagCheckbox
+                            key={flag.id}
+                            flag={flag.flag}
+                            description={compilersTranslation.t(flag.id)}
+                        />
+                    );
+                } else if (flag.type === "flagset") {
+                    const selectedFlag =
+                        flag.flags.filter(checkFlag)[0] || "---";
+                    const flagOptions = flag.flags.map((f) => (
+                        <FlagOption
+                            key={f}
+                            flag={f}
+                            description={compilersTranslation.tWithDefault(
+                                `${flag.id}.${f}`,
+                                NO_TRANSLATION,
+                            )}
+                        />
+                    ));
+
+                    return (
+                        <FlagSet
+                            key={flag.id}
+                            name={compilersTranslation.t(flag.id)}
+                            value={selectedFlag}
+                        >
+                            {[
+                                <option value="" key={"__NULL__"}>
+                                    {"---"}
+                                </option>,
+                                ...flagOptions,
+                            ]}
+                        </FlagSet>
+                    );
+                }
+            })}
+        </>
+    );
 }
 
 function DiffFlags({ schema }: FlagsProps) {
-    const compilersTranslation = getTranslation("compilers")
-    const { checkFlag } = useContext(OptsContext)
-
-    return <>
-        {schema.map(flag => {
-            if (flag.type === "checkbox") {
-                return <DiffCheckbox key={flag.id} flag={flag.flag} description={compilersTranslation.t(flag.id)} />
-            } else if (flag.type === "flagset") {
-                const selectedFlag = flag.flags.filter(checkFlag)[0] || flag.flags[0]
-                const flagOptions = flag.flags.map(f => <DiffFlagOption key={f} flag={f} description={
-                    compilersTranslation.tWithDefault(`${flag.id}.${f}`, NO_TRANSLATION)
-                } />)
-
-                return <DiffFlagSet key={flag.id} name={compilersTranslation.t(flag.id)} value={selectedFlag}>
-                    {flagOptions}
-                </DiffFlagSet>
-            }
-        })}
-    </>
+    const compilersTranslation = getTranslation("compilers");
+    const { checkFlag } = useContext(OptsContext);
+
+    return (
+        <>
+            {schema.map((flag) => {
+                if (flag.type === "checkbox") {
+                    return (
+                        <DiffCheckbox
+                            key={flag.id}
+                            flag={flag.flag}
+                            description={compilersTranslation.t(flag.id)}
+                        />
+                    );
+                } else if (flag.type === "flagset") {
+                    const selectedFlag =
+                        flag.flags.filter(checkFlag)[0] || flag.flags[0];
+                    const flagOptions = flag.flags.map((f) => (
+                        <DiffFlagOption
+                            key={f}
+                            flag={f}
+                            description={compilersTranslation.tWithDefault(
+                                `${flag.id}.${f}`,
+                                NO_TRANSLATION,
+                            )}
+                        />
+                    ));
+
+                    return (
+                        <DiffFlagSet
+                            key={flag.id}
+                            name={compilersTranslation.t(flag.id)}
+                            value={selectedFlag}
+                        >
+                            {flagOptions}
+                        </DiffFlagSet>
+                    );
+                }
+            })}
+        </>
+    );
 }
 
 export type CompilerOptsT = {
-    compiler?: string
-    compiler_flags?: string
-    diff_flags?: string[]
-    preset?: number
-    libraries?: Library[]
-}
+    compiler?: string;
+    compiler_flags?: string;
+    diff_flags?: string[];
+    preset?: number;
+    libraries?: Library[];
+};
 
 export type Props = {
-    platform?: string
-    value: CompilerOptsT
-    onChange: (value: CompilerOptsT) => void
-
-    diffLabel: string
-    onDiffLabelChange: (diffLabel: string) => void
-
-    matchOverride: boolean
-    onMatchOverrideChange: (matchOverride: boolean) => void
-}
-
-export default function CompilerOpts({ platform, value, onChange, diffLabel, onDiffLabelChange, matchOverride, onMatchOverrideChange }: Props) {
-    const compiler = value.compiler
-    let opts = value.compiler_flags
-    const diff_opts = value.diff_flags || []
+    platform?: string;
+    value: CompilerOptsT;
+    onChange: (value: CompilerOptsT) => void;
+
+    diffLabel: string;
+    onDiffLabelChange: (diffLabel: string) => void;
+
+    matchOverride: boolean;
+    onMatchOverrideChange: (matchOverride: boolean) => void;
+};
+
+export default function CompilerOpts({
+    platform,
+    value,
+    onChange,
+    diffLabel,
+    onDiffLabelChange,
+    matchOverride,
+    onMatchOverrideChange,
+}: Props) {
+    const compiler = value.compiler;
+    let opts = value.compiler_flags;
+    const diff_opts = value.diff_flags || [];
 
     const setCompiler = (compiler: string) => {
         onChange({
             compiler,
             compiler_flags: opts,
             diff_flags: diff_opts,
-        })
-    }
+        });
+    };
 
     const setOpts = (opts: string) => {
         onChange({
             compiler,
             compiler_flags: opts,
             diff_flags: diff_opts,
-        })
-    }
+        });
+    };
 
     const setDiffOpts = (diff_opts: string[]) => {
         onChange({
             compiler,
             compiler_flags: opts,
             diff_flags: diff_opts,
-        })
-    }
+        });
+    };
 
     const setPreset = (preset: api.Preset) => {
         if (preset) {
@@ -214,254 +303,342 @@ export default function CompilerOpts({ platform, value, onChange, diffLabel, onD
                 diff_flags: preset.diff_flags,
                 libraries: preset.libraries,
                 preset: preset.id,
-            })
+            });
         } else {
             // "Custom" preset selected
             onChange({
                 preset: null,
-            })
+            });
         }
-    }
+    };
 
     const setLibraries = (libraries: Library[]) => {
         onChange({
             libraries,
-        })
-    }
+        });
+    };
 
     const optsEditorProvider = {
         checkFlag(flag: string) {
-            return (` ${opts} `).includes(` ${flag} `)
+            return ` ${opts} `.includes(` ${flag} `);
         },
 
         setFlag(flag: string, enable: boolean) {
             if (enable) {
-                opts = `${opts} ${flag}`
+                opts = `${opts} ${flag}`;
             } else {
-                opts = (` ${opts} `).replace(` ${flag} `, " ")
+                opts = ` ${opts} `.replace(` ${flag} `, " ");
             }
-            opts = opts.trim()
-            setOpts(opts)
+            opts = opts.trim();
+            setOpts(opts);
         },
 
-        setFlags(edits: { flag: string, value: boolean }[]) {
+        setFlags(edits: { flag: string; value: boolean }[]) {
             for (const { flag, value } of edits) {
-                optsEditorProvider.setFlag(flag, value)
+                optsEditorProvider.setFlag(flag, value);
             }
         },
-
-    }
+    };
 
     const diffOptsEditorProvider = {
         checkFlag(flag: string) {
-            return diff_opts.includes(flag)
+            return diff_opts.includes(flag);
         },
 
         setFlag(flag: string, enable: boolean) {
-            diffOptsEditorProvider.setFlags([{ flag, value: enable }])
+            diffOptsEditorProvider.setFlags([{ flag, value: enable }]);
         },
 
-        setFlags(edits: { flag: string, value: boolean }[]) {
-            const positiveEdits = edits.filter(o => o.value).map(o => o.flag)
-            const negativeEdits = edits.filter(o => !o.value).map(o => o.flag)
+        setFlags(edits: { flag: string; value: boolean }[]) {
+            const positiveEdits = edits
+                .filter((o) => o.value)
+                .map((o) => o.flag);
+            const negativeEdits = edits
+                .filter((o) => !o.value)
+                .map((o) => o.flag);
 
-            const negativeState = diff_opts.filter(o => !negativeEdits.includes(o))
+            const negativeState = diff_opts.filter(
+                (o) => !negativeEdits.includes(o),
+            );
 
-            setDiffOpts([...negativeState, ...positiveEdits])
+            setDiffOpts([...negativeState, ...positiveEdits]);
         },
-    }
-
-    return <div>
-        <section className={styles.header}>
-            <PlatformIcon platform={platform} size={32} />
-            <div className={styles.preset}>
-                Preset
-                <PresetSelect platform={platform} presetId={value.preset} setPreset={setPreset} />
-            </div>
-        </section>
-        <OptsContext.Provider value={optsEditorProvider}>
-            <section className={styles.section}>
-                <h3 className={styles.heading}>Compiler options</h3>
-                <OptsEditor platform={platform} compiler={compiler} setCompiler={setCompiler} opts={opts} setOpts={setOpts} />
+    };
+
+    return (
+        <div>
+            <section className={styles.header}>
+                <PlatformIcon platform={platform} size={32} />
+                <div className={styles.preset}>
+                    Preset
+                    <PresetSelect
+                        platform={platform}
+                        presetId={value.preset}
+                        setPreset={setPreset}
+                    />
+                </div>
             </section>
-        </OptsContext.Provider>
+            <OptsContext.Provider value={optsEditorProvider}>
+                <section className={styles.section}>
+                    <h3 className={styles.heading}>Compiler options</h3>
+                    <OptsEditor
+                        platform={platform}
+                        compiler={compiler}
+                        setCompiler={setCompiler}
+                        opts={opts}
+                        setOpts={setOpts}
+                    />
+                </section>
+            </OptsContext.Provider>
+
+            {value.libraries.length !== 0 && (
+                <section className={styles.section}>
+                    <LibrariesEditor
+                        libraries={value.libraries}
+                        setLibraries={setLibraries}
+                        platform={platform}
+                    />
+                </section>
+            )}
+
+            <OptsContext.Provider value={diffOptsEditorProvider}>
+                <section className={styles.section}>
+                    <h3 className={styles.heading}>Diff options</h3>
+                    <DiffOptsEditor
+                        platform={platform}
+                        compiler={compiler}
+                        diffLabel={diffLabel}
+                        onDiffLabelChange={onDiffLabelChange}
+                    />
+                </section>
+            </OptsContext.Provider>
 
-        {value.libraries.length !== 0 && <section className={styles.section}>
-            <LibrariesEditor libraries={value.libraries} setLibraries={setLibraries} platform={platform} />
-        </section> }
-
-        <OptsContext.Provider value={diffOptsEditorProvider}>
             <section className={styles.section}>
-                <h3 className={styles.heading}>Diff options</h3>
-                <DiffOptsEditor platform={platform} compiler={compiler} diffLabel={diffLabel} onDiffLabelChange={onDiffLabelChange} />
+                <h3 className={styles.heading}>Other options</h3>
+                <Checkbox
+                    checked={matchOverride}
+                    onChange={onMatchOverrideChange}
+                    label="Match override"
+                    description="If checked, this scratch will be considered matching (100%)"
+                />
             </section>
-        </OptsContext.Provider>
-
-        <section className={styles.section}>
-            <h3 className={styles.heading}>Other options</h3>
-            <Checkbox
-                checked={matchOverride}
-                onChange={onMatchOverrideChange}
-                label="Match override"
-                description="If checked, this scratch will be considered matching (100%)"
-            />
-        </section>
-    </div>
+        </div>
+    );
 }
 
-export function OptsEditor({ platform, compiler: compilerId, setCompiler, opts, setOpts }: {
-    platform?: string
-    compiler: string
-    setCompiler: (compiler: string) => void
-    opts: string
-    setOpts: (opts: string) => void
+export function OptsEditor({
+    platform,
+    compiler: compilerId,
+    setCompiler,
+    opts,
+    setOpts,
+}: {
+    platform?: string;
+    compiler: string;
+    setCompiler: (compiler: string) => void;
+    opts: string;
+    setOpts: (opts: string) => void;
 }) {
-    const compilersTranslation = getTranslation("compilers")
+    const compilersTranslation = getTranslation("compilers");
 
-    const compilers = useCompilersForPlatform(platform)
-    const compiler = compilers[compilerId]
+    const compilers = useCompilersForPlatform(platform);
+    const compiler = compilers[compilerId];
 
     if (!compiler) {
         // TODO: this is a bug -- we should just render like an empty state
-        console.warn("compiler not supported for platform", compilerId, platform)
-        setCompiler(Object.keys(compilers)[0]) // pick first compiler (ew)
+        console.warn(
+            "compiler not supported for platform",
+            compilerId,
+            platform,
+        );
+        setCompiler(Object.keys(compilers)[0]); // pick first compiler (ew)
     }
 
-    return <div>
-        <div className={styles.row}>
-            <Select
-                className={styles.compilerSelect}
-                onChange={e => setCompiler((e.target as HTMLSelectElement).value)}
-                value={compilerId}
-            >
-                {Object.keys(compilers).map(id => <option
-                    key={id}
-                    value={id}
+    return (
+        <div>
+            <div className={styles.row}>
+                <Select
+                    className={styles.compilerSelect}
+                    onChange={(e) =>
+                        setCompiler((e.target as HTMLSelectElement).value)
+                    }
+                    value={compilerId}
                 >
-                    {compilersTranslation.t(id)}
-                </option>)}
-            </Select>
-
-            <input
-                type="text"
-                className={styles.textbox}
-                value={opts}
-                placeholder="No arguments"
-                spellCheck={false}
-                onChange={e => setOpts((e.target as HTMLInputElement).value)}
-            />
-        </div>
+                    {Object.keys(compilers).map((id) => (
+                        <option key={id} value={id}>
+                            {compilersTranslation.t(id)}
+                        </option>
+                    ))}
+                </Select>
+
+                <input
+                    type="text"
+                    className={styles.textbox}
+                    value={opts}
+                    placeholder="No arguments"
+                    spellCheck={false}
+                    onChange={(e) =>
+                        setOpts((e.target as HTMLInputElement).value)
+                    }
+                />
+            </div>
 
-        <div className={styles.flags}>
-            {(compilerId && compiler) ? <Flags schema={compiler.flags} /> : <div />}
+            <div className={styles.flags}>
+                {compilerId && compiler ? (
+                    <Flags schema={compiler.flags} />
+                ) : (
+                    <div />
+                )}
+            </div>
         </div>
-    </div>
+    );
 }
 
-export function DiffOptsEditor({ platform, compiler: compilerId, diffLabel, onDiffLabelChange }: {
-    platform?: string
-    compiler: string
-    diffLabel: string
-    onDiffLabelChange: (diffLabel: string) => void
+export function DiffOptsEditor({
+    platform,
+    compiler: compilerId,
+    diffLabel,
+    onDiffLabelChange,
+}: {
+    platform?: string;
+    compiler: string;
+    diffLabel: string;
+    onDiffLabelChange: (diffLabel: string) => void;
 }) {
-    const compilers = useCompilersForPlatform(platform)
-    const compiler = compilers[compilerId]
-
-    return <div>
-        <div className={styles.diffLabel}>
-            <label>Diff label</label>
-            <input
-                type="text"
-                className={styles.textbox}
-                value={diffLabel}
-                placeholder="Top of file"
-                spellCheck={false}
-                onChange={e => onDiffLabelChange(e.target.value)}
-            />
-        </div>
-        <div className={styles.diffFlags}>
-            {(compilerId && compiler) ? <DiffFlags schema={compiler.diff_flags} /> : <div />}
+    const compilers = useCompilersForPlatform(platform);
+    const compiler = compilers[compilerId];
+
+    return (
+        <div>
+            <div className={styles.diffLabel}>
+                <label>Diff label</label>
+                <input
+                    type="text"
+                    className={styles.textbox}
+                    value={diffLabel}
+                    placeholder="Top of file"
+                    spellCheck={false}
+                    onChange={(e) => onDiffLabelChange(e.target.value)}
+                />
+            </div>
+            <div className={styles.diffFlags}>
+                {compilerId && compiler ? (
+                    <DiffFlags schema={compiler.diff_flags} />
+                ) : (
+                    <div />
+                )}
+            </div>
         </div>
-    </div>
+    );
 }
 
-export function LibrariesEditor({ libraries, setLibraries, platform }: {
-    libraries: Library[]
-    setLibraries: (libraries: Library[]) => void
-    platform: string
+export function LibrariesEditor({
+    libraries,
+    setLibraries,
+    platform,
+}: {
+    libraries: Library[];
+    setLibraries: (libraries: Library[]) => void;
+    platform: string;
 }) {
-    const supportedLibraries = api.useLibraries(platform)
-    const librariesTranslations = getTranslation("libraries")
+    const supportedLibraries = api.useLibraries(platform);
+    const librariesTranslations = getTranslation("libraries");
 
     const libraryVersions = (scratchlib: api.Library) => {
-        const lib = supportedLibraries.find(lib => lib.name === scratchlib.name)
+        const lib = supportedLibraries.find(
+            (lib) => lib.name === scratchlib.name,
+        );
         if (lib != null) {
-            return Object.fromEntries(lib.supported_versions.map(v => [v, v]))
+            return Object.fromEntries(
+                lib.supported_versions.map((v) => [v, v]),
+            );
         } else {
-            return { [scratchlib.version]: scratchlib.version }
+            return { [scratchlib.version]: scratchlib.version };
         }
-    }
+    };
 
     const addLibrary = (libName: string) => {
-        const lib = supportedLibraries.find(lib => lib.name === libName)
+        const lib = supportedLibraries.find((lib) => lib.name === libName);
         if (lib != null) {
-            return setLibraryVersion(libName, lib.supported_versions[0])
+            return setLibraryVersion(libName, lib.supported_versions[0]);
         }
-    }
+    };
     const setLibraryVersion = (libName: string, ver: string) => {
         // clone the libraries
-        const libs: api.Library[] = JSON.parse(JSON.stringify(libraries))
+        const libs: api.Library[] = JSON.parse(JSON.stringify(libraries));
         // Check if the library is already enabled, if so return it
-        const scratchlib = libs.find(scratchlib => scratchlib.name === libName)
+        const scratchlib = libs.find(
+            (scratchlib) => scratchlib.name === libName,
+        );
         if (scratchlib != null) {
             // If it is, set the version
-            scratchlib.version = ver
+            scratchlib.version = ver;
         } else {
             // If it isn't, add the library to the list
-            libs.push({ name: libName, version: ver })
+            libs.push({ name: libName, version: ver });
         }
-        setLibraries(libs)
-    }
+        setLibraries(libs);
+    };
     const removeLibrary = (libName: string) => {
         // clone the libraries
-        let libs: api.Library[] = JSON.parse(JSON.stringify(libraries))
+        let libs: api.Library[] = JSON.parse(JSON.stringify(libraries));
         // Only keep the libs whose name are not libName
-        libs = libs.filter(lib => lib.name !== libName)
-        setLibraries(libs)
-    }
+        libs = libs.filter((lib) => lib.name !== libName);
+        setLibraries(libs);
+    };
 
     const librariesSelectOptions = supportedLibraries
         // Filter out libraries that are already in the scratch
-        .filter(lib => !libraries.some(scratchlib => scratchlib.name === lib.name))
+        .filter(
+            (lib) =>
+                !libraries.some((scratchlib) => scratchlib.name === lib.name),
+        )
         // Turn them into something the Select component accepts.
-        .map(lib => [lib.name, librariesTranslations.t(lib.name)])
+        .map((lib) => [lib.name, librariesTranslations.t(lib.name)]);
 
     // Prepend a null value to the selector.
-    const selectOptions = Object.fromEntries([["__NULL__", "---"], ...librariesSelectOptions])
-
-    const scratchLibraryElements = libraries.map(lib => <Fragment key={lib.name}>
-        <label className={styles.libraryName}>{librariesTranslations.t(lib.name)}</label>
-        <Select2
-            value={lib.version}
-            onChange={value => setLibraryVersion(lib.name, value)}
-            options={libraryVersions(lib)} />
-        <button className={styles.deleteButton} onClick={() => removeLibrary(lib.name)}><TrashIcon />Remove library</button>
-    </Fragment>)
-
-    const [selectedLib, setSelectedLib] = useState("__NULL__")
-
-    return <>
-        <h3 className={styles.heading}>Libraries</h3>
-        <div className={styles.addLibraryRow}>
+    const selectOptions = Object.fromEntries([
+        ["__NULL__", "---"],
+        ...librariesSelectOptions,
+    ]);
+
+    const scratchLibraryElements = libraries.map((lib) => (
+        <Fragment key={lib.name}>
+            <label className={styles.libraryName}>
+                {librariesTranslations.t(lib.name)}
+            </label>
             <Select2
-                value={selectedLib}
-                onChange={setSelectedLib}
-                options={selectOptions}
-                className={styles.librarySelect} />
-            <Button primary onClick={() => addLibrary(selectedLib)}>Add library</Button>
-        </div>
-        <div className={styles.librariesGrid}>
-            {scratchLibraryElements}
-        </div>
-    </>
+                value={lib.version}
+                onChange={(value) => setLibraryVersion(lib.name, value)}
+                options={libraryVersions(lib)}
+            />
+            <button
+                className={styles.deleteButton}
+                onClick={() => removeLibrary(lib.name)}
+            >
+                <TrashIcon />
+                Remove library
+            </button>
+        </Fragment>
+    ));
+
+    const [selectedLib, setSelectedLib] = useState("__NULL__");
+
+    return (
+        <>
+            <h3 className={styles.heading}>Libraries</h3>
+            <div className={styles.addLibraryRow}>
+                <Select2
+                    value={selectedLib}
+                    onChange={setSelectedLib}
+                    options={selectOptions}
+                    className={styles.librarySelect}
+                />
+                <Button primary onClick={() => addLibrary(selectedLib)}>
+                    Add library
+                </Button>
+            </div>
+            <div className={styles.librariesGrid}>{scratchLibraryElements}</div>
+        </>
+    );
 }
diff --git a/frontend/src/components/compiler/PresetSelect.tsx b/frontend/src/components/compiler/PresetSelect.tsx
index 11d56da18..52a10b2f3 100644
--- a/frontend/src/components/compiler/PresetSelect.tsx
+++ b/frontend/src/components/compiler/PresetSelect.tsx
@@ -1,49 +1,73 @@
-import * as api from "@/lib/api"
+import * as api from "@/lib/api";
 
-import Select from "../Select2"
+import Select from "../Select2";
 
 function presetsToOptions(presets: api.Preset[]) {
-    const options: Record<string, string> = {}
+    const options: Record<string, string> = {};
 
-    options.Custom = "Custom"
+    options.Custom = "Custom";
 
     for (const preset of presets) {
-        options[preset.name] = preset.name
+        options[preset.name] = preset.name;
     }
 
-    return options
+    return options;
 }
 
-export default function PresetSelect({ className, platform, presetId, setPreset, serverPresets }: {
-    className?: string
-    platform: string
-    presetId?: number
-    setPreset: (preset: api.Preset) => void
-    serverPresets?: api.Preset[]
+export default function PresetSelect({
+    className,
+    platform,
+    presetId,
+    setPreset,
+    serverPresets,
+}: {
+    className?: string;
+    platform: string;
+    presetId?: number;
+    setPreset: (preset: api.Preset) => void;
+    serverPresets?: api.Preset[];
 }) {
     if (typeof serverPresets === "undefined")
-        serverPresets = api.usePresets(platform)
+        serverPresets = api.usePresets(platform);
 
     if (typeof serverPresets === "undefined") {
-        return <Select
-            className={className}
-            options={{ "Loading": "Loading..." }}
-            value={"Loading"}
-            onChange={null}
-        />
+        return (
+            <Select
+                className={className}
+                options={{ Loading: "Loading..." }}
+                value={"Loading"}
+                onChange={null}
+            />
+        );
     }
 
-    const selectedPreset = serverPresets.find((p: api.Preset) => p.id === presetId)
+    const selectedPreset = serverPresets.find(
+        (p: api.Preset) => p.id === presetId,
+    );
 
-    if (serverPresets.length > 0 && typeof presetId === "number" && !selectedPreset)
-        console.warn(`Scratch.preset == '${presetId}' but no preset with that id was found.`)
+    if (
+        serverPresets.length > 0 &&
+        typeof presetId === "number" &&
+        !selectedPreset
+    )
+        console.warn(
+            `Scratch.preset == '${presetId}' but no preset with that id was found.`,
+        );
 
-    return <Select
-        className={className}
-        options={presetsToOptions(serverPresets)}
-        value={selectedPreset?.name || "Custom"}
-        onChange={name => {
-            setPreset(name === "Custom" ? null : serverPresets.find((p: api.Preset) => p.name === name))
-        }}
-    />
+    return (
+        <Select
+            className={className}
+            options={presetsToOptions(serverPresets)}
+            value={selectedPreset?.name || "Custom"}
+            onChange={(name) => {
+                setPreset(
+                    name === "Custom"
+                        ? null
+                        : serverPresets.find(
+                              (p: api.Preset) => p.name === name,
+                          ),
+                );
+            }}
+        />
+    );
 }
diff --git a/frontend/src/components/compiler/compilers.ts b/frontend/src/components/compiler/compilers.ts
index 652a17a07..39ef775e3 100644
--- a/frontend/src/components/compiler/compilers.ts
+++ b/frontend/src/components/compiler/compilers.ts
@@ -1,19 +1,20 @@
-import * as api from "@/lib/api"
+import * as api from "@/lib/api";
 
-export function useCompilersForPlatform(platform?: string, compilers?: Record<string, api.Compiler>): Record<string, api.Compiler> {
-    if (!compilers)
-        compilers = api.useCompilers()
+export function useCompilersForPlatform(
+    platform?: string,
+    compilers?: Record<string, api.Compiler>,
+): Record<string, api.Compiler> {
+    if (!compilers) compilers = api.useCompilers();
 
     if (platform) {
-        const c: Record<string, api.Compiler> = {}
+        const c: Record<string, api.Compiler> = {};
 
         for (const [k, v] of Object.entries(compilers)) {
-            if (v.platform === platform)
-                c[k] = v
+            if (v.platform === platform) c[k] = v;
         }
 
-        return c
+        return c;
     } else {
-        return compilers
+        return compilers;
     }
 }
diff --git a/frontend/src/components/user/AnonymousFrog.tsx b/frontend/src/components/user/AnonymousFrog.tsx
index 93591b40a..5600f9d68 100644
--- a/frontend/src/components/user/AnonymousFrog.tsx
+++ b/frontend/src/components/user/AnonymousFrog.tsx
@@ -1,26 +1,41 @@
-import type { SVGProps } from "react"
+import type { SVGProps } from "react";
 
-import classNames from "classnames"
+import classNames from "classnames";
 
-import type * as api from "@/lib/api"
+import type * as api from "@/lib/api";
 
-import Frog from "../Nav/frog.svg"
+import Frog from "../Nav/frog.svg";
 
-import styles from "./AnonymousFrog.module.scss"
+import styles from "./AnonymousFrog.module.scss";
 
 export type Props = SVGProps<SVGElement> & {
-    user: api.AnonymousUser
-    className?: string
-}
+    user: api.AnonymousUser;
+    className?: string;
+};
 
-export default function AnonymousFrogAvatar({ user, className, ...props }: Props) {
+export default function AnonymousFrogAvatar({
+    user,
+    className,
+    ...props
+}: Props) {
     const accentStyle = {
         "--accent-hue": user.frog_color[0],
         "--accent-saturation": user.frog_color[1],
         "--accent-lightness": user.frog_color[2],
-    }
+    };
 
-    return <div className={classNames(className, "flex aspect-square items-center justify-center rounded-full bg-gray-3")}>
-        <Frog style={accentStyle} className={classNames(styles.anonymousFrog, "h-4/6 w-4/6")} {...props}/>
-    </div>
+    return (
+        <div
+            className={classNames(
+                className,
+                "flex aspect-square items-center justify-center rounded-full bg-gray-3",
+            )}
+        >
+            <Frog
+                style={accentStyle}
+                className={classNames(styles.anonymousFrog, "h-4/6 w-4/6")}
+                {...props}
+            />
+        </div>
+    );
 }
diff --git a/frontend/src/components/user/Profile.tsx b/frontend/src/components/user/Profile.tsx
index 878eddfda..18283a2f2 100644
--- a/frontend/src/components/user/Profile.tsx
+++ b/frontend/src/components/user/Profile.tsx
@@ -1,67 +1,69 @@
-"use client"
+"use client";
 
-import { useState, type ReactElement } from "react"
+import { useState, type ReactElement } from "react";
 
-import { MarkGithubIcon } from "@primer/octicons-react"
+import { MarkGithubIcon } from "@primer/octicons-react";
 
-import GhostButton from "@/components/GhostButton"
-import Tabs, { Tab } from "@/components/Tabs"
-import type { User } from "@/lib/api/types"
-import { userGithubHtmlUrl } from "@/lib/api/urls"
+import GhostButton from "@/components/GhostButton";
+import Tabs, { Tab } from "@/components/Tabs";
+import type { User } from "@/lib/api/types";
+import { userGithubHtmlUrl } from "@/lib/api/urls";
 
-import ScratchesTab from "./tabs/ScratchesTab"
-import UserAvatar from "./UserAvatar"
+import ScratchesTab from "./tabs/ScratchesTab";
+import UserAvatar from "./UserAvatar";
 
 enum TabId {
     SCRATCHES = "user_scratches",
 }
 
 interface TabLayout {
-    activeTab: string
-    tabs: string[]
+    activeTab: string;
+    tabs: string[];
 }
 
 const tabLayout: TabLayout = {
     activeTab: TabId.SCRATCHES,
-    tabs: [
-        TabId.SCRATCHES,
-    ],
-}
+    tabs: [TabId.SCRATCHES],
+};
 
 interface Props {
-    layout: TabLayout
-    renderTab: (id: string) => ReactElement<typeof Tab>
-    onChange: (layout: TabLayout) => void
+    layout: TabLayout;
+    renderTab: (id: string) => ReactElement<typeof Tab>;
+    onChange: (layout: TabLayout) => void;
 }
 
 function CustomLayout({ renderTab, layout, onChange }: Props) {
-    const els = []
+    const els = [];
 
     for (const id of layout.tabs) {
-        els.push(renderTab(id))
+        els.push(renderTab(id));
     }
 
-    return <Tabs
-        activeTab={layout.activeTab}
-        onChange={activeTab => onChange({ ...layout, activeTab })}
-    >
-        {els}
-    </Tabs>
+    return (
+        <Tabs
+            activeTab={layout.activeTab}
+            onChange={(activeTab) => onChange({ ...layout, activeTab })}
+        >
+            {els}
+        </Tabs>
+    );
 }
 
 export default function Profile({ user }: { user: User }) {
-    const [layout, setLayout] = useState<TabLayout>(tabLayout)
+    const [layout, setLayout] = useState<TabLayout>(tabLayout);
 
     const renderTab = (id: string) => {
         switch (id as TabId) {
-        case TabId.SCRATCHES:
-            return <Tab key={id} tabKey={id} label="Scratches">
-                {() => <ScratchesTab user={user} />}
-            </Tab>
-        default:
-            return <Tab key={id} tabKey={id} label={id} disabled />
+            case TabId.SCRATCHES:
+                return (
+                    <Tab key={id} tabKey={id} label="Scratches">
+                        {() => <ScratchesTab user={user} />}
+                    </Tab>
+                );
+            default:
+                return <Tab key={id} tabKey={id} label={id} disabled />;
         }
-    }
+    };
 
     return (
         <div className="mx-auto w-full max-w-3xl p-4">
@@ -75,7 +77,12 @@ export default function Profile({ user }: { user: User }) {
                     <div className="flex flex-wrap items-center justify-center gap-2 pt-1 text-gray-11 text-sm md:justify-start">
                         <GhostButton href={userGithubHtmlUrl(user)}>
                             <div className="flex items-center gap-1">
-                                {userGithubHtmlUrl(user) && <MarkGithubIcon size={16} aria-label="GitHub username" />}
+                                {userGithubHtmlUrl(user) && (
+                                    <MarkGithubIcon
+                                        size={16}
+                                        aria-label="GitHub username"
+                                    />
+                                )}
                                 <span>{user.username}</span>
                             </div>
                         </GhostButton>
@@ -83,11 +90,13 @@ export default function Profile({ user }: { user: User }) {
                 </div>
             </header>
 
-            {layout && <CustomLayout
-                layout={layout}
-                onChange={setLayout}
-                renderTab={renderTab}
-            />}
+            {layout && (
+                <CustomLayout
+                    layout={layout}
+                    onChange={setLayout}
+                    renderTab={renderTab}
+                />
+            )}
         </div>
-    )
+    );
 }
diff --git a/frontend/src/components/user/UserAvatar.tsx b/frontend/src/components/user/UserAvatar.tsx
index 8e9f0f752..678ce836e 100644
--- a/frontend/src/components/user/UserAvatar.tsx
+++ b/frontend/src/components/user/UserAvatar.tsx
@@ -1,38 +1,50 @@
-"use client"
+"use client";
 
-import { useEffect, useState } from "react"
+import { useEffect, useState } from "react";
 
-import Image from "next/image"
+import Image from "next/image";
 
-import classNames from "classnames"
+import classNames from "classnames";
 
-import * as api from "@/lib/api"
-import { userAvatarUrl } from "@/lib/api/urls"
+import * as api from "@/lib/api";
+import { userAvatarUrl } from "@/lib/api/urls";
 
-import AnonymousFrogAvatar from "./AnonymousFrog"
-import styles from "./UserAvatar.module.scss"
+import AnonymousFrogAvatar from "./AnonymousFrog";
+import styles from "./UserAvatar.module.scss";
 
 export type Props = {
-    user: api.User | api.AnonymousUser | undefined
-    className?: string
-}
+    user: api.User | api.AnonymousUser | undefined;
+    className?: string;
+};
 
 export default function UserAvatar({ user, className }: Props) {
-    const userIsYou = api.useUserIsYou()
+    const userIsYou = api.useUserIsYou();
 
     // Avoid hydration mismatch
-    const [isMounted, setIsMounted] = useState(false)
-    useEffect(() => setIsMounted(true), [])
+    const [isMounted, setIsMounted] = useState(false);
+    useEffect(() => setIsMounted(true), []);
 
     if (!user) {
         // Skeleton loading state
-        return <span className={classNames(styles.avatar, className)}>
-            <div className="size-full animate-pulse rounded-full bg-gray-6" />
-        </span>
+        return (
+            <span className={classNames(styles.avatar, className)}>
+                <div className="size-full animate-pulse rounded-full bg-gray-6" />
+            </span>
+        );
     }
 
-    return <span className={classNames(styles.avatar, className)}>
-        {api.isAnonUser(user) ? <AnonymousFrogAvatar user={user}/> : userAvatarUrl(user) && <Image src={userAvatarUrl(user)} alt="" fill sizes="64px" />}
-        {isMounted && !userIsYou(user) && user.is_online && <div className={styles.online} title="Online" />}
-    </span>
+    return (
+        <span className={classNames(styles.avatar, className)}>
+            {api.isAnonUser(user) ? (
+                <AnonymousFrogAvatar user={user} />
+            ) : (
+                userAvatarUrl(user) && (
+                    <Image src={userAvatarUrl(user)} alt="" fill sizes="64px" />
+                )
+            )}
+            {isMounted && !userIsYou(user) && user.is_online && (
+                <div className={styles.online} title="Online" />
+            )}
+        </span>
+    );
 }
diff --git a/frontend/src/components/user/UserLink.tsx b/frontend/src/components/user/UserLink.tsx
index ecdf35fb2..6657ef096 100644
--- a/frontend/src/components/user/UserLink.tsx
+++ b/frontend/src/components/user/UserLink.tsx
@@ -1,33 +1,35 @@
-import Link from "next/link"
+import Link from "next/link";
 
-import { isAnonUser, type User, type AnonymousUser } from "@/lib/api/types"
+import { isAnonUser, type User, type AnonymousUser } from "@/lib/api/types";
 
-import UserAvatar from "./UserAvatar"
+import UserAvatar from "./UserAvatar";
 
 export type Props = {
-    user: User | AnonymousUser
-    showUsername?: boolean // default = true
-}
+    user: User | AnonymousUser;
+    showUsername?: boolean; // default = true
+};
 
 export default function UserLink({ user, showUsername }: Props) {
     if (!user) {
-        return <span>?</span>
+        return <span>?</span>;
     }
 
-    const url: string | null = isAnonUser(user) ? null : `/u/${user.username}`
+    const url: string | null = isAnonUser(user) ? null : `/u/${user.username}`;
 
-    const inner = <>
-        <UserAvatar user={user} className="mr-1 size-4 align-middle" />
-        {showUsername !== false && <span>
-            {user.username}
-        </span>}
-    </>
+    const inner = (
+        <>
+            <UserAvatar user={user} className="mr-1 size-4 align-middle" />
+            {showUsername !== false && <span>{user.username}</span>}
+        </>
+    );
 
     if (!url) {
-        return <span>{inner}</span>
+        return <span>{inner}</span>;
     }
 
-    return <Link href={url} className="hover:underline active:translate-y-px">
-        {inner}
-    </Link>
+    return (
+        <Link href={url} className="hover:underline active:translate-y-px">
+            {inner}
+        </Link>
+    );
 }
diff --git a/frontend/src/components/user/UserMention.tsx b/frontend/src/components/user/UserMention.tsx
index 9f20556a8..0b279a0dd 100644
--- a/frontend/src/components/user/UserMention.tsx
+++ b/frontend/src/components/user/UserMention.tsx
@@ -1,60 +1,68 @@
-import Link from "next/link"
+import Link from "next/link";
 
-import { type User, type AnonymousUser, isAnonUser } from "@/lib/api/types"
+import { type User, type AnonymousUser, isAnonUser } from "@/lib/api/types";
 
 export type GithubUser = {
-    login: string
-}
+    login: string;
+};
 
 export type Props = {
-    user: User | AnonymousUser | GithubUser
-}
+    user: User | AnonymousUser | GithubUser;
+};
 
 export function getUserName(user: User | AnonymousUser | GithubUser): string {
     if ("login" in user) {
-        return user.login
+        return user.login;
     }
 
-    return user.username
+    return user.username;
 }
 
-export function getUserHtmlUrl(user: User | AnonymousUser | GithubUser): string | null {
+export function getUserHtmlUrl(
+    user: User | AnonymousUser | GithubUser,
+): string | null {
     if ("login" in user) {
-        return `https://github.com/${user.login}`
+        return `https://github.com/${user.login}`;
     }
 
     if (isAnonUser(user)) {
-        return null
+        return null;
     }
 
-    return `/u/${user.username}`
+    return `/u/${user.username}`;
 }
 
-export function isMentionable(user: User | AnonymousUser | GithubUser): boolean {
+export function isMentionable(
+    user: User | AnonymousUser | GithubUser,
+): boolean {
     if ("login" in user) {
-        return false
+        return false;
     }
 
-    return !isAnonUser(user)
+    return !isAnonUser(user);
 }
 
 /** A mention of a user, like @username, that can be clicked on. */
 export default function UserMention({ user }: Props) {
-    const url = getUserHtmlUrl(user)
+    const url = getUserHtmlUrl(user);
 
-    const children = <>
-        {isMentionable(user) && <span className="text-gray-9">@</span>}
-        <span className="font-medium">{getUserName(user)}</span>
-    </>
+    const children = (
+        <>
+            {isMentionable(user) && <span className="text-gray-9">@</span>}
+            <span className="font-medium">{getUserName(user)}</span>
+        </>
+    );
 
     if (url) {
-        return <Link
-            href={getUserHtmlUrl(user)}
-            className="text-gray-11 hover:text-gray-12"
-        >
-            {children}
-        </Link>
+        return (
+            <Link
+                href={getUserHtmlUrl(user)}
+                className="text-gray-11 hover:text-gray-12"
+            >
+                {children}
+            </Link>
+        );
     } else {
-        return <span className="text-gray-11">{children}</span>
+        return <span className="text-gray-11">{children}</span>;
     }
 }
diff --git a/frontend/src/components/user/tabs/ScratchesTab.tsx b/frontend/src/components/user/tabs/ScratchesTab.tsx
index f7c08189f..57dfbd60a 100644
--- a/frontend/src/components/user/tabs/ScratchesTab.tsx
+++ b/frontend/src/components/user/tabs/ScratchesTab.tsx
@@ -1,6 +1,6 @@
-import ScratchList, { ScratchItemNoOwner } from "@/components/ScratchList"
-import type { User } from "@/lib/api"
-import { userUrl } from "@/lib/api/urls"
+import ScratchList, { ScratchItemNoOwner } from "@/components/ScratchList";
+import type { User } from "@/lib/api";
+import { userUrl } from "@/lib/api/urls";
 
 export default function ScratchesTab({ user }: { user: User }) {
     return (
@@ -11,5 +11,5 @@ export default function ScratchesTab({ user }: { user: User }) {
                 isSortable={true}
             />
         </section>
-    )
+    );
 }
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index 4f3e3a86a..487b8129a 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -1,180 +1,256 @@
-import { useState, useCallback, useEffect } from "react"
-
-import { useRouter } from "next/navigation"
-
-import useSWR, { type Revalidator, type RevalidatorOptions, mutate } from "swr"
-import { useDebouncedCallback } from "use-debounce"
-
-import { ResponseError, get, post, patch } from "./api/request"
-import type { AnonymousUser, User, Scratch, TerseScratch, Compilation, Page, Compiler, LibraryVersions, Platform, Preset, ClaimableScratch } from "./api/types"
-import { scratchUrl } from "./api/urls"
-import { ignoreNextWarnBeforeUnload } from "./hooks"
-import { runObjdiff } from "./objdiff"
-import { useObjdiffClientEnabled } from "./settings"
-
-function onErrorRetry<C>(error: ResponseError, key: string, config: C, revalidate: Revalidator, { retryCount }: RevalidatorOptions) {
-    if (error.status === 404) return
-    if (retryCount >= 10) return
+import { useState, useCallback, useEffect } from "react";
+
+import { useRouter } from "next/navigation";
+
+import useSWR, { type Revalidator, type RevalidatorOptions, mutate } from "swr";
+import { useDebouncedCallback } from "use-debounce";
+
+import { ResponseError, get, post, patch } from "./api/request";
+import type {
+    AnonymousUser,
+    User,
+    Scratch,
+    TerseScratch,
+    Compilation,
+    Page,
+    Compiler,
+    LibraryVersions,
+    Platform,
+    Preset,
+    ClaimableScratch,
+} from "./api/types";
+import { scratchUrl } from "./api/urls";
+import { ignoreNextWarnBeforeUnload } from "./hooks";
+import { runObjdiff } from "./objdiff";
+import { useObjdiffClientEnabled } from "./settings";
+
+function onErrorRetry<C>(
+    error: ResponseError,
+    key: string,
+    config: C,
+    revalidate: Revalidator,
+    { retryCount }: RevalidatorOptions,
+) {
+    if (error.status === 404) return;
+    if (retryCount >= 10) return;
 
     // Retry after 5 seconds
-    setTimeout(() => revalidate({ retryCount }), 5000)
+    setTimeout(() => revalidate({ retryCount }), 5000);
 }
 
-function undefinedIfUnchanged<O, K extends keyof O>(saved: O, local: O, key: K): O[K] | undefined {
+function undefinedIfUnchanged<O, K extends keyof O>(
+    saved: O,
+    local: O,
+    key: K,
+): O[K] | undefined {
     if (saved[key] !== local[key]) {
-        return local[key] !== undefined ? local[key] : null
+        return local[key] !== undefined ? local[key] : null;
     }
 }
 
-export * from "./api/request"
-export * from "./api/types"
+export * from "./api/request";
+export * from "./api/types";
 
 export function useThisUser(): User | AnonymousUser | undefined {
-    const { data: user, error } = useSWR<AnonymousUser | User>("/user", get)
+    const { data: user, error } = useSWR<AnonymousUser | User>("/user", get);
 
     if (error) {
-        throw error
+        throw error;
     }
 
-    return user
+    return user;
 }
 
 export function useThisUserIsAdmin(): boolean {
-    const user = useThisUser()
+    const user = useThisUser();
 
-    return user?.is_admin
+    return user?.is_admin;
 }
 
-export function isUserEq(a: User | AnonymousUser | undefined, b: User | AnonymousUser | undefined): boolean {
-    return a && b && a.id === b.id && a.is_anonymous === b.is_anonymous
+export function isUserEq(
+    a: User | AnonymousUser | undefined,
+    b: User | AnonymousUser | undefined,
+): boolean {
+    return a && b && a.id === b.id && a.is_anonymous === b.is_anonymous;
 }
 
-export function useUserIsYou(): (user: User | AnonymousUser | undefined) => boolean {
-    const you = useThisUser()
-
-    return useCallback(user => {
-        return isUserEq(you, user)
-    }, [you?.id, you?.is_anonymous]) // eslint-disable-line react-hooks/exhaustive-deps
+export function useUserIsYou(): (
+    user: User | AnonymousUser | undefined,
+) => boolean {
+    const you = useThisUser();
+
+    return useCallback(
+        (user) => {
+            return isUserEq(you, user);
+        },
+        [you?.id, you?.is_anonymous],
+    ); // eslint-disable-line react-hooks/exhaustive-deps
 }
 
 export function useSavedScratch(scratch: Scratch): Scratch {
     const { data: savedScratch, error } = useSWR(scratchUrl(scratch), get, {
         fallbackData: scratch, // No loading state, just use the local scratch
-    })
+    });
 
-    if (error)
-        throw error
+    if (error) throw error;
 
-    return savedScratch
+    return savedScratch;
 }
 
 export function useSaveScratch(localScratch: Scratch): () => Promise<Scratch> {
-    const savedScratch = useSavedScratch(localScratch)
-    const userIsYou = useUserIsYou()
+    const savedScratch = useSavedScratch(localScratch);
+    const userIsYou = useUserIsYou();
 
     const saveScratch = useCallback(async () => {
         if (!localScratch) {
-            throw new Error("Cannot save scratch before it is loaded")
+            throw new Error("Cannot save scratch before it is loaded");
         }
         if (!userIsYou(localScratch.owner)) {
-            throw new Error("Cannot save scratch which you do not own")
+            throw new Error("Cannot save scratch which you do not own");
         }
 
         const updatedScratch = await patch(scratchUrl(localScratch), {
-            source_code: undefinedIfUnchanged(savedScratch, localScratch, "source_code"),
-            context: undefinedIfUnchanged(savedScratch, localScratch, "context"),
-            compiler: undefinedIfUnchanged(savedScratch, localScratch, "compiler"),
-            compiler_flags: undefinedIfUnchanged(savedScratch, localScratch, "compiler_flags"),
-            diff_flags: undefinedIfUnchanged(savedScratch, localScratch, "diff_flags"),
-            diff_label: undefinedIfUnchanged(savedScratch, localScratch, "diff_label"),
+            source_code: undefinedIfUnchanged(
+                savedScratch,
+                localScratch,
+                "source_code",
+            ),
+            context: undefinedIfUnchanged(
+                savedScratch,
+                localScratch,
+                "context",
+            ),
+            compiler: undefinedIfUnchanged(
+                savedScratch,
+                localScratch,
+                "compiler",
+            ),
+            compiler_flags: undefinedIfUnchanged(
+                savedScratch,
+                localScratch,
+                "compiler_flags",
+            ),
+            diff_flags: undefinedIfUnchanged(
+                savedScratch,
+                localScratch,
+                "diff_flags",
+            ),
+            diff_label: undefinedIfUnchanged(
+                savedScratch,
+                localScratch,
+                "diff_label",
+            ),
             preset: undefinedIfUnchanged(savedScratch, localScratch, "preset"),
             name: undefinedIfUnchanged(savedScratch, localScratch, "name"),
-            description: undefinedIfUnchanged(savedScratch, localScratch, "description"),
-            match_override: undefinedIfUnchanged(savedScratch, localScratch, "match_override"),
-            libraries: undefinedIfUnchanged(savedScratch, localScratch, "libraries"),
-        })
-
-        await mutate(scratchUrl(localScratch), updatedScratch, { revalidate: false })
-
-        return updatedScratch
-    }, [localScratch, savedScratch, userIsYou])
-
-    return saveScratch
+            description: undefinedIfUnchanged(
+                savedScratch,
+                localScratch,
+                "description",
+            ),
+            match_override: undefinedIfUnchanged(
+                savedScratch,
+                localScratch,
+                "match_override",
+            ),
+            libraries: undefinedIfUnchanged(
+                savedScratch,
+                localScratch,
+                "libraries",
+            ),
+        });
+
+        await mutate(scratchUrl(localScratch), updatedScratch, {
+            revalidate: false,
+        });
+
+        return updatedScratch;
+    }, [localScratch, savedScratch, userIsYou]);
+
+    return saveScratch;
 }
 
 export async function claimScratch(scratch: ClaimableScratch): Promise<void> {
     const { success } = await post(`${scratchUrl(scratch)}/claim`, {
         token: scratch.claim_token,
-    })
-    const user = await get("/user")
+    });
+    const user = await get("/user");
 
-    if (!success)
-        throw new Error("Scratch cannot be claimed")
+    if (!success) throw new Error("Scratch cannot be claimed");
 
-    delete scratch.claim_token
+    delete scratch.claim_token;
     await mutate(scratchUrl(scratch), {
         ...scratch,
         owner: user,
-    })
+    });
 }
 
 export async function forkScratch(parent: TerseScratch): Promise<Scratch> {
-    const scratch = await post(`${scratchUrl(parent)}/fork`, parent)
-    await claimScratch(scratch)
-    return scratch
+    const scratch = await post(`${scratchUrl(parent)}/fork`, parent);
+    await claimScratch(scratch);
+    return scratch;
 }
 
 export function useForkScratchAndGo(parent: TerseScratch): () => Promise<void> {
-    const router = useRouter()
+    const router = useRouter();
 
     return useCallback(async () => {
-        const fork = await forkScratch(parent)
+        const fork = await forkScratch(parent);
 
-        ignoreNextWarnBeforeUnload()
-        await router.push(scratchUrl(fork))
-    }, [parent, router])
+        ignoreNextWarnBeforeUnload();
+        await router.push(scratchUrl(fork));
+    }, [parent, router]);
 }
 
 export function useIsScratchSaved(scratch: Scratch): boolean {
-    const saved = useSavedScratch(scratch)
+    const saved = useSavedScratch(scratch);
 
     return (
         scratch.name === saved.name &&
         scratch.description === saved.description &&
         scratch.compiler === saved.compiler &&
         scratch.compiler_flags === saved.compiler_flags &&
-        JSON.stringify(scratch.diff_flags) === JSON.stringify(saved.diff_flags) &&
+        JSON.stringify(scratch.diff_flags) ===
+            JSON.stringify(saved.diff_flags) &&
         scratch.diff_label === saved.diff_label &&
         scratch.source_code === saved.source_code &&
         scratch.context === saved.context &&
         scratch.match_override === saved.match_override &&
         JSON.stringify(scratch.libraries) === JSON.stringify(saved.libraries)
-    )
+    );
 }
 
-export function useCompilation(scratch: Scratch | null, autoRecompile: boolean, autoRecompileDelay: number, initial: Compilation | null = null): {
-    compilation: Readonly<Compilation> | null
-    compile: () => Promise<void> // no debounce
-    debouncedCompile: () => Promise<void> // with debounce
-    isCompiling: boolean
-    isCompilationOld: boolean
+export function useCompilation(
+    scratch: Scratch | null,
+    autoRecompile: boolean,
+    autoRecompileDelay: number,
+    initial: Compilation | null = null,
+): {
+    compilation: Readonly<Compilation> | null;
+    compile: () => Promise<void>; // no debounce
+    debouncedCompile: () => Promise<void>; // with debounce
+    isCompiling: boolean;
+    isCompilationOld: boolean;
 } {
-    const savedScratch = useSavedScratch(scratch)
-    const [compileRequestPromise, setCompileRequestPromise] = useState<Promise<void>>(null)
-    const [compilation, setCompilation] = useState<Compilation>(initial)
-    const [isCompilationOld, setIsCompilationOld] = useState(false)
-    const [objdiffClientEnabled] = useObjdiffClientEnabled()
-    const sUrl = scratchUrl(scratch)
+    const savedScratch = useSavedScratch(scratch);
+    const [compileRequestPromise, setCompileRequestPromise] =
+        useState<Promise<void>>(null);
+    const [compilation, setCompilation] = useState<Compilation>(initial);
+    const [isCompilationOld, setIsCompilationOld] = useState(false);
+    const [objdiffClientEnabled] = useObjdiffClientEnabled();
+    const sUrl = scratchUrl(scratch);
 
     const compile = useCallback(() => {
-        if (compileRequestPromise)
-            return compileRequestPromise
+        if (compileRequestPromise) return compileRequestPromise;
 
         if (!scratch)
-            return Promise.reject(new Error("Cannot compile without a scratch"))
+            return Promise.reject(
+                new Error("Cannot compile without a scratch"),
+            );
 
         if (!scratch.compiler)
-            return Promise.reject(new Error("Cannot compile before a compiler is set"))
+            return Promise.reject(
+                new Error("Cannot compile before a compiler is set"),
+            );
 
         const promise = post(`${scratchUrl(scratch)}/compile`, {
             // TODO: api should take { scratch } and support undefinedIfUnchanged on all fields
@@ -184,73 +260,86 @@ export function useCompilation(scratch: Scratch | null, autoRecompile: boolean,
             diff_label: scratch.diff_label,
             libraries: scratch.libraries,
             source_code: scratch.source_code,
-            context: savedScratch ? undefinedIfUnchanged(savedScratch, scratch, "context") : scratch.context,
+            context: savedScratch
+                ? undefinedIfUnchanged(savedScratch, scratch, "context")
+                : scratch.context,
             omit_diff: objdiffClientEnabled,
-        }).then((compilation: Compilation) => {
-            if (objdiffClientEnabled && compilation.success) {
-                return runObjdiff(compilation)
-            }
-            return compilation
-        }).then((compilation: Compilation) => {
-            setCompilation(compilation)
-        }).finally(() => {
-            setCompileRequestPromise(null)
-            setIsCompilationOld(false)
-        }).catch(error => {
-            if (error instanceof ResponseError) {
-                setCompilation({
-                    "compiler_output": error.json?.detail,
-                    "diff_output": null,
-                    "objdiff_output": null,
-                    "success": false,
-                    "left_object": null,
-                    "right_object": null,
-                })
-            } else {
-                return Promise.reject(error)
-            }
         })
+            .then((compilation: Compilation) => {
+                if (objdiffClientEnabled && compilation.success) {
+                    return runObjdiff(compilation);
+                }
+                return compilation;
+            })
+            .then((compilation: Compilation) => {
+                setCompilation(compilation);
+            })
+            .finally(() => {
+                setCompileRequestPromise(null);
+                setIsCompilationOld(false);
+            })
+            .catch((error) => {
+                if (error instanceof ResponseError) {
+                    setCompilation({
+                        compiler_output: error.json?.detail,
+                        diff_output: null,
+                        objdiff_output: null,
+                        success: false,
+                        left_object: null,
+                        right_object: null,
+                    });
+                } else {
+                    return Promise.reject(error);
+                }
+            });
 
-        setCompileRequestPromise(promise)
+        setCompileRequestPromise(promise);
 
-        return promise
-    }, [compileRequestPromise, savedScratch, scratch, objdiffClientEnabled])
+        return promise;
+    }, [compileRequestPromise, savedScratch, scratch, objdiffClientEnabled]);
 
     // If the scratch we're looking at changes, we need to recompile
-    const [url, setUrl] = useState(sUrl)
+    const [url, setUrl] = useState(sUrl);
     useEffect(() => {
         if (url !== sUrl) {
-            setUrl(sUrl)
-            compile()
+            setUrl(sUrl);
+            compile();
         }
-    }, [compile, sUrl, url])
+    }, [compile, sUrl, url]);
 
-    const debouncedCompile = useDebouncedCallback(compile, autoRecompileDelay, { leading: false, trailing: true })
+    const debouncedCompile = useDebouncedCallback(compile, autoRecompileDelay, {
+        leading: false,
+        trailing: true,
+    });
 
     useEffect(() => {
         if (!compilation) {
-            compile()
+            compile();
         } else {
-            setIsCompilationOld(true)
+            setIsCompilationOld(true);
 
             if (autoRecompile) {
                 if (scratch && scratch.compiler !== "") {
-                    debouncedCompile()
+                    debouncedCompile();
                 } else {
-                    setCompilation(null)
+                    setCompilation(null);
                 }
             }
         }
-    }, [ // eslint-disable-line react-hooks/exhaustive-deps
+    }, [
+        // eslint-disable-line react-hooks/exhaustive-deps
         debouncedCompile,
         autoRecompile,
 
         // fields passed to compilations
         scratch.compiler,
-        scratch.compiler_flags, scratch.diff_flags, scratch.diff_label,
-        scratch.source_code, scratch.context,
+        scratch.compiler_flags,
+        scratch.diff_flags,
+        scratch.diff_label,
+        scratch.source_code,
+        scratch.context,
         scratch.libraries,
-    ])
+    ]);
 
     return {
         compilation,
@@ -258,16 +347,16 @@ export function useCompilation(scratch: Scratch | null, autoRecompile: boolean,
         debouncedCompile,
         isCompiling: !!compileRequestPromise,
         isCompilationOld,
-    }
+    };
 }
 
 export function usePlatform(id: string | undefined): Platform | undefined {
-    const url = typeof id === "string" ? `/platform/${id}` : null
+    const url = typeof id === "string" ? `/platform/${id}` : null;
     const { data } = useSWR(url, get, {
         refreshInterval: 0,
         onErrorRetry,
-    })
-    return data
+    });
+    return data;
 }
 
 export function useCompilers(): Record<string, Compiler> {
@@ -275,100 +364,107 @@ export function useCompilers(): Record<string, Compiler> {
         refreshInterval: 0,
         suspense: true, // TODO: remove
         onErrorRetry,
-    })
+    });
 
-    return data.compilers
+    return data.compilers;
 }
 
 export function useLibraries(platform: string): LibraryVersions[] {
     const getByPlatform = ([url, platform]: [string | null, string]) => {
-        return get(url && platform && `${url}?platform=${platform}`)
-    }
+        return get(url && platform && `${url}?platform=${platform}`);
+    };
 
-    const url = typeof platform === "string" ? "/library" : null
+    const url = typeof platform === "string" ? "/library" : null;
     const { data } = useSWR([url, platform], getByPlatform, {
         refreshInterval: 0,
         onErrorRetry,
-    })
+    });
 
-    return data?.libraries || []
+    return data?.libraries || [];
 }
 
 export function usePresets(platform: string): Preset[] {
     const getByPlatform = ([url, platform]: [string | null, string]) => {
-        return get(url && platform && `${url}?platform=${platform}&ordering=name&page_size=100`)
-    }
-
-    const url = typeof platform === "string" ? "/preset" : null
+        return get(
+            url &&
+                platform &&
+                `${url}?platform=${platform}&ordering=name&page_size=100`,
+        );
+    };
+
+    const url = typeof platform === "string" ? "/preset" : null;
     const { data } = useSWR([url, platform], getByPlatform, {
         refreshInterval: 0,
         onErrorRetry,
-    })
+    });
 
-    return data?.results
+    return data?.results;
 }
 
 export function usePreset(id: number | undefined): Preset | undefined {
-    const url = typeof id === "number" ? `/preset/${id}` : null
+    const url = typeof id === "number" ? `/preset/${id}` : null;
     const { data } = useSWR(url, get, {
         refreshInterval: 0,
         onErrorRetry,
-    })
-    return data
+    });
+    return data;
 }
 
-export function usePaginated<T>(url: string, firstPage?: Page<T>): {
-    results: T[]
-    hasNext: boolean
-    hasPrevious: boolean
-    isLoading: boolean
-    loadNext: () => Promise<void>
-    loadPrevious: () => Promise<void>
+export function usePaginated<T>(
+    url: string,
+    firstPage?: Page<T>,
+): {
+    results: T[];
+    hasNext: boolean;
+    hasPrevious: boolean;
+    isLoading: boolean;
+    loadNext: () => Promise<void>;
+    loadPrevious: () => Promise<void>;
 } {
-    const [results, setResults] = useState<T[]>(firstPage?.results ?? [])
-    const [next, setNext] = useState<string | null>(firstPage?.next)
-    const [previous, setPrevious] = useState<string | null>(firstPage?.previous)
-    const [isLoading, setIsLoading] = useState(false)
+    const [results, setResults] = useState<T[]>(firstPage?.results ?? []);
+    const [next, setNext] = useState<string | null>(firstPage?.next);
+    const [previous, setPrevious] = useState<string | null>(
+        firstPage?.previous,
+    );
+    const [isLoading, setIsLoading] = useState(false);
 
     useEffect(() => {
         if (!firstPage) {
-            setResults([])
-            setNext(url)
-            setPrevious(null)
-            setIsLoading(true)
+            setResults([]);
+            setNext(url);
+            setPrevious(null);
+            setIsLoading(true);
 
             get(url).then((page: Page<T>) => {
-                setResults(page.results)
-                setNext(page.next)
-                setPrevious(page.previous)
-                setIsLoading(false)
-            })
+                setResults(page.results);
+                setNext(page.next);
+                setPrevious(page.previous);
+                setIsLoading(false);
+            });
         }
-    }, [url]) // eslint-disable-line react-hooks/exhaustive-deps
+    }, [url]); // eslint-disable-line react-hooks/exhaustive-deps
 
     const loadNext = useCallback(async () => {
-        if (!next)
-            throw new Error("No more")
+        if (!next) throw new Error("No more");
 
-        setIsLoading(true)
+        setIsLoading(true);
 
-        const data: Page<T> = await get(next)
-        setResults(results => [...results, ...data.results])
-        setNext(data.next)
-        setIsLoading(false)
-    }, [next])
+        const data: Page<T> = await get(next);
+        setResults((results) => [...results, ...data.results]);
+        setNext(data.next);
+        setIsLoading(false);
+    }, [next]);
 
     const loadPrevious = useCallback(async () => {
-        if (!previous)
-            throw new Error("No more")
+        if (!previous) throw new Error("No more");
 
-        setIsLoading(true)
+        setIsLoading(true);
 
-        const data: Page<T> = await get(previous)
-        setResults(results => [...data.results, ...results])
-        setPrevious(data.previous)
-        setIsLoading(false)
-    }, [previous])
+        const data: Page<T> = await get(previous);
+        setResults((results) => [...data.results, ...results]);
+        setPrevious(data.previous);
+        setIsLoading(false);
+    }, [previous]);
 
     return {
         results,
@@ -377,24 +473,24 @@ export function usePaginated<T>(url: string, firstPage?: Page<T>): {
         isLoading,
         loadNext,
         loadPrevious,
-    }
+    };
 }
 
 export interface Stats {
-    asm_count: number
-    scratch_count: number
-    github_user_count: number
-    profile_count: number
+    asm_count: number;
+    scratch_count: number;
+    github_user_count: number;
+    profile_count: number;
 }
 
 export function useStats(): Stats | undefined {
     const { data, error } = useSWR<Stats>("/stats", get, {
         refreshInterval: 5000,
-    })
+    });
 
     if (error) {
-        throw error
+        throw error;
     }
 
-    return data
+    return data;
 }
diff --git a/frontend/src/lib/api/request.ts b/frontend/src/lib/api/request.ts
index 312cafdf1..bdf031369 100644
--- a/frontend/src/lib/api/request.ts
+++ b/frontend/src/lib/api/request.ts
@@ -1,140 +1,148 @@
-import { notFound } from "next/navigation"
+import { notFound } from "next/navigation";
 
-const API_BASE = process.env.INTERNAL_API_BASE ?? process.env.NEXT_PUBLIC_API_BASE
+const API_BASE =
+    process.env.INTERNAL_API_BASE ?? process.env.NEXT_PUBLIC_API_BASE;
 
 if (!API_BASE) {
-    console.log("process.env", process.env)
-    throw new Error("No API_BASE set")
+    console.log("process.env", process.env);
+    throw new Error("No API_BASE set");
 }
 
-type Json = any
+type Json = any;
 
 const commonOpts: RequestInit = {
     credentials: "include",
     cache: "reload",
     headers: {
-        "Accept": "application/json",
+        Accept: "application/json",
     },
-}
+};
 
 export class ResponseError extends Error {
-    status: number
-    json: Json
-    code: string
+    status: number;
+    json: Json;
+    code: string;
 
     constructor(response: Response, json: Json) {
-        super(`Server responded with HTTP status code ${response.status}`)
+        super(`Server responded with HTTP status code ${response.status}`);
 
-        this.status = response.status
-        this.json = json
-        this.code = json.code
-        this.message = json?.detail
-        this.name = "ResponseError"
+        this.status = response.status;
+        this.json = json;
+        this.code = json.code;
+        this.message = json?.detail;
+        this.name = "ResponseError";
     }
 }
 
 export class RequestFailedError extends Error {
     constructor(message: string, url: string) {
-        super(`${message} (occurred when fetching ${url})`)
-        this.name = "RequestFailedError"
+        super(`${message} (occurred when fetching ${url})`);
+        this.name = "RequestFailedError";
     }
 }
 
 export function normalizeUrl(url: string) {
     if (url.startsWith("/")) {
-        url = API_BASE + url
+        url = API_BASE + url;
     }
-    return url
+    return url;
 }
 
 export async function errorHandledFetchJson(url: string, init?: RequestInit) {
-    let response: Response
+    let response: Response;
 
-    url = normalizeUrl(url)
+    url = normalizeUrl(url);
 
     try {
-        response = await fetch(url, init)
+        response = await fetch(url, init);
     } catch (error) {
         if (error instanceof TypeError) {
-            throw new RequestFailedError(error.message, url)
+            throw new RequestFailedError(error.message, url);
         }
 
-        throw error
+        throw error;
     }
 
     try {
         if (response.status === 502) {
             // We've received a "Gateway Unavailable" message from nginx.
             // The backend's down.
-            throw new RequestFailedError("Backend gateway unavailable", url)
+            throw new RequestFailedError("Backend gateway unavailable", url);
         }
 
         if (!response.ok) {
-            throw new ResponseError(response, await response.json())
+            throw new ResponseError(response, await response.json());
         }
 
         if (response.status === 204) {
-            return null
+            return null;
         }
 
-        return await response.json()
+        return await response.json();
     } catch (error) {
         if (error instanceof SyntaxError) {
             throw new ResponseError(response, {
                 code: "invalid_json",
                 detail: "The server returned invalid JSON",
-            })
+            });
         }
 
-        throw error
+        throw error;
     }
 }
 
 export async function get(url: string) {
-    console.info("GET", normalizeUrl(url))
+    console.info("GET", normalizeUrl(url));
     return await errorHandledFetchJson(url, {
         ...commonOpts,
         cache: "no-cache",
-    })
+    });
 }
 
-export async function post(url: string, data: Json | FormData, method = "POST") {
-    console.info(method, normalizeUrl(url), data)
+export async function post(
+    url: string,
+    data: Json | FormData,
+    method = "POST",
+) {
+    console.info(method, normalizeUrl(url), data);
 
-    let body: string | FormData
+    let body: string | FormData;
     if (data instanceof FormData) {
-        body = data
+        body = data;
     } else {
-        body = JSON.stringify(data)
+        body = JSON.stringify(data);
     }
 
     return await errorHandledFetchJson(url, {
         ...commonOpts,
         method,
         body,
-        headers: body instanceof FormData ? {} : {
-            "Content-Type": "application/json",
-        },
-    })
+        headers:
+            body instanceof FormData
+                ? {}
+                : {
+                      "Content-Type": "application/json",
+                  },
+    });
 }
 
 export async function patch(url: string, data: Json | FormData) {
-    return await post(url, data, "PATCH")
+    return await post(url, data, "PATCH");
 }
 
 export async function delete_(url: string, json: Json) {
-    return await post(url, json, "DELETE")
+    return await post(url, json, "DELETE");
 }
 
 export async function put(url: string, json: Json) {
-    return await post(url, json, "PUT")
+    return await post(url, json, "PUT");
 }
 
 /** Pass to Promise.catch to bubble 404 errors to the router */
 export async function bubbleNotFound(error: any) {
     if (error instanceof ResponseError && error.status === 404) {
-        notFound()
+        notFound();
     }
 
-    return Promise.reject(error)
+    return Promise.reject(error);
 }
diff --git a/frontend/src/lib/api/types.ts b/frontend/src/lib/api/types.ts
index 06000d11b..0139eab73 100644
--- a/frontend/src/lib/api/types.ts
+++ b/frontend/src/lib/api/types.ts
@@ -1,167 +1,169 @@
-import type { DiffResult as ObjdiffOutput } from "objdiff-wasm"
+import type { DiffResult as ObjdiffOutput } from "objdiff-wasm";
 
 export interface Page<T> {
-    next: string | null
-    previous: string | null
-    results: T[]
+    next: string | null;
+    previous: string | null;
+    results: T[];
 }
 
 export interface AnonymousUser {
-    is_anonymous: true
-    id: number
-    is_online: boolean
-    is_admin: boolean
-    username: string
+    is_anonymous: true;
+    id: number;
+    is_online: boolean;
+    is_admin: boolean;
+    username: string;
 
-    frog_color: [number, number, number]
+    frog_color: [number, number, number];
 }
 
 export interface User {
-    is_anonymous: false
-    id: number
-    is_online: boolean
-    is_admin: boolean
-    username: string
+    is_anonymous: false;
+    id: number;
+    is_online: boolean;
+    is_admin: boolean;
+    username: string;
 
-    github_id: number | null
+    github_id: number | null;
 }
 
 export interface TerseScratch {
-    slug: string
-    owner: AnonymousUser | User | null // null = unclaimed
-    parent: string | null
-    name: string
-    creation_time: string
-    last_updated: string
-    compiler: string
-    preset: number
-    platform: string
-    language: string
-    score: number // -1 = doesn't compile
-    max_score: number
-    match_override: boolean
-    project: string
-    libraries: Library[]
+    slug: string;
+    owner: AnonymousUser | User | null; // null = unclaimed
+    parent: string | null;
+    name: string;
+    creation_time: string;
+    last_updated: string;
+    compiler: string;
+    preset: number;
+    platform: string;
+    language: string;
+    score: number; // -1 = doesn't compile
+    max_score: number;
+    match_override: boolean;
+    project: string;
+    libraries: Library[];
 }
 
 export interface Scratch extends TerseScratch {
-    description: string
-    compiler_flags: string
-    diff_flags: string[]
-    source_code: string
-    context: string
-    diff_label: string
+    description: string;
+    compiler_flags: string;
+    diff_flags: string[];
+    source_code: string;
+    context: string;
+    diff_label: string;
 }
 
 export interface ClaimableScratch extends Scratch {
-    claim_token: string
+    claim_token: string;
 }
 
 export type Compilation = {
-    compiler_output: string
-    diff_output: DiffOutput | null
-    objdiff_output: ObjdiffOutput | null
-    left_object: string | null // base64 encoded
-    right_object: string | null // base64 encoded
-    success: boolean
-}
+    compiler_output: string;
+    diff_output: DiffOutput | null;
+    objdiff_output: ObjdiffOutput | null;
+    left_object: string | null; // base64 encoded
+    right_object: string | null; // base64 encoded
+    success: boolean;
+};
 
 export type DiffOutput = {
-    arch_str: string
-    current_score: number
-    max_score: number
-    header: DiffHeader
-    rows: DiffRow[]
-}
+    arch_str: string;
+    current_score: number;
+    max_score: number;
+    header: DiffHeader;
+    rows: DiffRow[];
+};
 
 export type DiffHeader = {
-    base: DiffText[]
-    current: DiffText[]
-    previous?: DiffText[]
-}
+    base: DiffText[];
+    current: DiffText[];
+    previous?: DiffText[];
+};
 
 export type DiffRow = {
-    key: string
-    base?: DiffCell
-    current?: DiffCell
-    previous?: DiffCell
-}
+    key: string;
+    base?: DiffCell;
+    current?: DiffCell;
+    previous?: DiffCell;
+};
 
 export type DiffCell = {
-    text: DiffText[]
-    line?: number
-    branch?: number
-    src?: string
-    src_comment?: string
-    src_line?: number
-    src_path?: string
-}
+    text: DiffText[];
+    line?: number;
+    branch?: number;
+    src?: string;
+    src_comment?: string;
+    src_line?: number;
+    src_path?: string;
+};
 
 export type DiffText = {
-    text: string
-    format?: string
-    group?: string
-    index?: number
-    key?: string
-}
-
-export type Flag = {
-    type: "checkbox"
-    id: string
-    flag: string
-} | {
-    type: "flagset"
-    id: string
-    flags: string[]
-}
+    text: string;
+    format?: string;
+    group?: string;
+    index?: number;
+    key?: string;
+};
+
+export type Flag =
+    | {
+          type: "checkbox";
+          id: string;
+          flag: string;
+      }
+    | {
+          type: "flagset";
+          id: string;
+          flags: string[];
+      };
 
 export type Library = {
-    name: string
-    version: string
-}
+    name: string;
+    version: string;
+};
 
 export type LibraryVersions = {
-    name: string
-    supported_versions: string[]
-    platform: string
-}
+    name: string;
+    supported_versions: string[];
+    platform: string;
+};
 
 export type Preset = {
-    id: number
-    name: string
-    platform: string
-    compiler: string
-    assembler_flags: string
-    compiler_flags: string
-    diff_flags: string[]
-    decompiler_flags: string
-    libraries: Library[]
-    num_scratches: number
-    owner: User | null // null = default
-}
+    id: number;
+    name: string;
+    platform: string;
+    compiler: string;
+    assembler_flags: string;
+    compiler_flags: string;
+    diff_flags: string[];
+    decompiler_flags: string;
+    libraries: Library[];
+    num_scratches: number;
+    owner: User | null; // null = default
+};
 
 export type Compiler = {
-    platform: string
-    flags: Flag[]
-    diff_flags: Flag[]
-}
+    platform: string;
+    flags: Flag[];
+    diff_flags: Flag[];
+};
 
 export interface PlatformBase {
-    id: string
-    name: string
-    description: string
-    arch: string
-    has_decompiler: boolean
+    id: string;
+    name: string;
+    description: string;
+    arch: string;
+    has_decompiler: boolean;
 }
 
 export interface PlatformMetadata extends PlatformBase {
-    num_scratches: number
+    num_scratches: number;
 }
 
 export interface Platform extends PlatformBase {
-    presets: Preset[]
+    presets: Preset[];
 }
 
 export function isAnonUser(user: User | AnonymousUser): user is AnonymousUser {
-    return user.is_anonymous
+    return user.is_anonymous;
 }
diff --git a/frontend/src/lib/api/urls.ts b/frontend/src/lib/api/urls.ts
index 30dc61422..9d34cada6 100644
--- a/frontend/src/lib/api/urls.ts
+++ b/frontend/src/lib/api/urls.ts
@@ -1,34 +1,37 @@
-import type { Preset, TerseScratch, User } from "./types"
+import type { Preset, TerseScratch, User } from "./types";
 
 export function userHtmlUrl(user: User): string {
-    return `/u/${user.username}`
+    return `/u/${user.username}`;
 }
 
 export function userUrl(user: User): string {
-    return `/users/${user.username}`
+    return `/users/${user.username}`;
 }
 
 export function userAvatarUrl(user: User): string | null {
-    return user.github_id && `https://avatars.githubusercontent.com/u/${user.github_id}`
+    return (
+        user.github_id &&
+        `https://avatars.githubusercontent.com/u/${user.github_id}`
+    );
 }
 
 // Only returns a URL if the user has a GitHub ID
 export function userGithubHtmlUrl(user: User): string | null {
-    return user.github_id && `https://github.com/${user.username}`
+    return user.github_id && `https://github.com/${user.username}`;
 }
 
 export function presetUrl(preset: Preset): string {
-    return `/preset/${preset.id}`
+    return `/preset/${preset.id}`;
 }
 
 export function platformUrl(platform: string): string {
-    return `/platform/${platform}`
+    return `/platform/${platform}`;
 }
 
 export function scratchUrl(scratch: TerseScratch): string {
-    return `/scratch/${scratch.slug}`
+    return `/scratch/${scratch.slug}`;
 }
 
 export function scratchParentUrl(scratch: TerseScratch): string {
-    return `/scratch/${scratch.parent}`
+    return `/scratch/${scratch.parent}`;
 }
diff --git a/frontend/src/lib/codemirror/basic-setup.ts b/frontend/src/lib/codemirror/basic-setup.ts
index 5a042d844..176da3e55 100644
--- a/frontend/src/lib/codemirror/basic-setup.ts
+++ b/frontend/src/lib/codemirror/basic-setup.ts
@@ -1,14 +1,27 @@
-import { autocompletion, closeBrackets } from "@codemirror/autocomplete"
-import { history } from "@codemirror/commands"
-import { bracketMatching, foldGutter, indentOnInput, indentUnit } from "@codemirror/language"
+import { autocompletion, closeBrackets } from "@codemirror/autocomplete";
+import { history } from "@codemirror/commands";
+import {
+    bracketMatching,
+    foldGutter,
+    indentOnInput,
+    indentUnit,
+} from "@codemirror/language";
 //import { rectangularSelection, crosshairCursor } from "@codemirror/rectangular-selection"
-import { highlightSelectionMatches } from "@codemirror/search"
-import { type Extension, EditorState } from "@codemirror/state"
-import { lineNumbers, highlightActiveLineGutter, keymap, highlightSpecialChars, drawSelection, highlightActiveLine, dropCursor } from "@codemirror/view"
-import { indentationMarkers } from "@replit/codemirror-indentation-markers"
+import { highlightSelectionMatches } from "@codemirror/search";
+import { type Extension, EditorState } from "@codemirror/state";
+import {
+    lineNumbers,
+    highlightActiveLineGutter,
+    keymap,
+    highlightSpecialChars,
+    drawSelection,
+    highlightActiveLine,
+    dropCursor,
+} from "@codemirror/view";
+import { indentationMarkers } from "@replit/codemirror-indentation-markers";
 
-import defaultKeymap from "./default-keymap"
-import defaultTheme from "./default-theme"
+import defaultKeymap from "./default-keymap";
+import defaultTheme from "./default-theme";
 
 const basicSetup: Extension = [
     lineNumbers(),
@@ -31,7 +44,7 @@ const basicSetup: Extension = [
     keymap.of(defaultKeymap),
     indentUnit.of("    "),
     defaultTheme,
-]
+];
 
 export const decompileSetup: Extension = [
     EditorState.readOnly.of(true),
@@ -45,6 +58,6 @@ export const decompileSetup: Extension = [
     keymap.of(defaultKeymap),
     indentUnit.of("    "),
     defaultTheme,
-]
+];
 
-export default basicSetup
+export default basicSetup;
diff --git a/frontend/src/lib/codemirror/color-scheme.ts b/frontend/src/lib/codemirror/color-scheme.ts
index 78adc4bbd..a621c6ff6 100644
--- a/frontend/src/lib/codemirror/color-scheme.ts
+++ b/frontend/src/lib/codemirror/color-scheme.ts
@@ -1,4 +1,4 @@
-import isDarkColor from "is-dark-color"
+import isDarkColor from "is-dark-color";
 
 export const COLOR_NAMES = {
     background: "Background",
@@ -20,9 +20,9 @@ export const COLOR_NAMES = {
     string: "String",
     character: "Character",
     type: "Type name",
-}
+};
 
-export type Colors = Record<keyof typeof COLOR_NAMES, string>
+export type Colors = Record<keyof typeof COLOR_NAMES, string>;
 
 export const COLOR_SCHEME_PRESETS = {
     "Frog Dark": {
@@ -42,7 +42,7 @@ export const COLOR_SCHEME_PRESETS = {
         character: "#cefa0a",
         preprocessor: "#3bff6c",
     },
-    "Material": {
+    Material: {
         background: "#282c34",
         cursor: "#ffffff",
         foreground: "#abb2bf",
@@ -59,7 +59,7 @@ export const COLOR_SCHEME_PRESETS = {
         character: "#d479f2",
         preprocessor: "#d479f2",
     },
-    "Dracula": {
+    Dracula: {
         background: "#282A36",
         cursor: "#f8f8f2",
         foreground: "#f8f8f2",
@@ -93,45 +93,51 @@ export const COLOR_SCHEME_PRESETS = {
         character: "#9ec200",
         preprocessor: "#2fcd56",
     },
-}
+};
 
-export type ColorPresetName = keyof typeof COLOR_SCHEME_PRESETS
+export type ColorPresetName = keyof typeof COLOR_SCHEME_PRESETS;
 
-export type ColorScheme = ColorPresetName | Colors
+export type ColorScheme = ColorPresetName | Colors;
 
-export const DARK_THEMES: ColorPresetName[] = ["Frog Dark", "Material", "Dracula"]
+export const DARK_THEMES: ColorPresetName[] = [
+    "Frog Dark",
+    "Material",
+    "Dracula",
+];
 
-export const LIGHT_THEMES: ColorPresetName[] = ["Frog Light"]
+export const LIGHT_THEMES: ColorPresetName[] = ["Frog Light"];
 
 export function getColors(scheme: ColorScheme): Colors {
     if (typeof scheme === "string") {
-        return COLOR_SCHEME_PRESETS[scheme] ?? COLOR_SCHEME_PRESETS["Frog Dark"]
+        return (
+            COLOR_SCHEME_PRESETS[scheme] ?? COLOR_SCHEME_PRESETS["Frog Dark"]
+        );
     } else {
-        return scheme
+        return scheme;
     }
 }
 
 export function applyColorScheme(scheme: ColorScheme) {
-    const colors = getColors(scheme)
+    const colors = getColors(scheme);
 
     for (const [key, value] of Object.entries(colors)) {
-        document.body.style.setProperty(`--code-${key}`, value.toString())
+        document.body.style.setProperty(`--code-${key}`, value.toString());
     }
 
-    let isDark = true
+    let isDark = true;
     try {
-        isDark = isDarkColor(colors.background)
+        isDark = isDarkColor(colors.background);
     } catch (error) {
         // Ignore; color is being edited
     }
 
     if (isDark) {
-        document.body.style.setProperty("--code-selection", "#ffffff22")
-        document.body.style.setProperty("--code-highlight", "#ffffff05")
+        document.body.style.setProperty("--code-selection", "#ffffff22");
+        document.body.style.setProperty("--code-highlight", "#ffffff05");
     } else {
-        document.body.style.setProperty("--code-selection", "#00000022")
-        document.body.style.setProperty("--code-highlight", "#00000005")
+        document.body.style.setProperty("--code-selection", "#00000022");
+        document.body.style.setProperty("--code-highlight", "#00000005");
     }
 }
 
-export default COLOR_SCHEME_PRESETS
+export default COLOR_SCHEME_PRESETS;
diff --git a/frontend/src/lib/codemirror/cpp.ts b/frontend/src/lib/codemirror/cpp.ts
index 91a0824cb..9ac952c66 100644
--- a/frontend/src/lib/codemirror/cpp.ts
+++ b/frontend/src/lib/codemirror/cpp.ts
@@ -1,7 +1,16 @@
 /// Adapted from https://github.com/codemirror/lang-cpp/blob/main/src/cpp.ts
 /// MIT-licensed, Copyright (C) 2018-2021 by Marijn Haverbeke <marijn@haverbeke.berlin> and others
-import { flatIndent, continuedIndent, delimitedIndent, indentNodeProp, foldNodeProp, foldInside, LRLanguage, LanguageSupport } from "@codemirror/language"
-import { parser } from "@lezer/cpp"
+import {
+    flatIndent,
+    continuedIndent,
+    delimitedIndent,
+    indentNodeProp,
+    foldNodeProp,
+    foldInside,
+    LRLanguage,
+    LanguageSupport,
+} from "@codemirror/language";
+import { parser } from "@lezer/cpp";
 
 /// A language provider based on the [Lezer C++
 /// parser](https://github.com/lezer-parser/cpp), extended with
@@ -18,27 +27,31 @@ export const cppLanguage = LRLanguage.define({
                 DoStatement: continuedIndent({ except: /^\s*({|while\b)/ }),
                 SwitchStatement: continuedIndent({ except: /^\s*({)/ }),
                 LabeledStatement: flatIndent,
-                CaseStatement: context => context.baseIndent + context.unit,
+                CaseStatement: (context) => context.baseIndent + context.unit,
                 BlockComment: () => null,
                 CompoundStatement: delimitedIndent({ closing: "}" }),
                 Statement: continuedIndent({ except: /^{/ }),
             }),
             foldNodeProp.add({
-                "DeclarationList CompoundStatement EnumeratorList FieldDeclarationList InitializerList": foldInside,
+                "DeclarationList CompoundStatement EnumeratorList FieldDeclarationList InitializerList":
+                    foldInside,
                 BlockComment(tree) {
-                    return { from: tree.from + 2, to: tree.to - 2 }
+                    return { from: tree.from + 2, to: tree.to - 2 };
                 },
             }),
         ],
     }),
     languageData: {
         commentTokens: { line: "//", block: { open: "/*", close: "*/" } },
-        indentOnInput: /^\s*(?:case |default:|\{|\}|else |else\{|catch |catch\(|while |while\()$/,
-        closeBrackets: { stringPrefixes: ["L", "u", "U", "u8", "LR", "UR", "uR", "u8R", "R"] },
+        indentOnInput:
+            /^\s*(?:case |default:|\{|\}|else |else\{|catch |catch\(|while |while\()$/,
+        closeBrackets: {
+            stringPrefixes: ["L", "u", "U", "u8", "LR", "UR", "uR", "u8R", "R"],
+        },
     },
-})
+});
 
 /// Language support for C++.
 export function cpp() {
-    return new LanguageSupport(cppLanguage)
+    return new LanguageSupport(cppLanguage);
 }
diff --git a/frontend/src/lib/codemirror/default-keymap/indent.ts b/frontend/src/lib/codemirror/default-keymap/indent.ts
index fd50b39dd..8454befc3 100644
--- a/frontend/src/lib/codemirror/default-keymap/indent.ts
+++ b/frontend/src/lib/codemirror/default-keymap/indent.ts
@@ -1,8 +1,14 @@
-import { indentMore } from "@codemirror/commands"
-import type { StateCommand } from "@codemirror/state"
+import { indentMore } from "@codemirror/commands";
+import type { StateCommand } from "@codemirror/state";
 
 export const indent: StateCommand = ({ state, dispatch }) => {
-    if (state.selection.ranges.some(r => !r.empty)) return indentMore({ state, dispatch })
-    dispatch(state.update(state.replaceSelection("    "), { scrollIntoView: true, userEvent: "input" }))
-    return true
-}
+    if (state.selection.ranges.some((r) => !r.empty))
+        return indentMore({ state, dispatch });
+    dispatch(
+        state.update(state.replaceSelection("    "), {
+            scrollIntoView: true,
+            userEvent: "input",
+        }),
+    );
+    return true;
+};
diff --git a/frontend/src/lib/codemirror/default-keymap/index.ts b/frontend/src/lib/codemirror/default-keymap/index.ts
index c3dee1720..75524a75e 100644
--- a/frontend/src/lib/codemirror/default-keymap/index.ts
+++ b/frontend/src/lib/codemirror/default-keymap/index.ts
@@ -3,7 +3,8 @@ import {
     closeCompletion,
     moveCompletionSelection,
     startCompletion,
-    deleteBracketPair } from "@codemirror/autocomplete"
+    deleteBracketPair,
+} from "@codemirror/autocomplete";
 import {
     insertNewlineAndIndent,
     cursorCharLeft,
@@ -56,8 +57,11 @@ import {
     lineComment,
     lineUncomment,
     toggleBlockComment,
-    redo, undo, undoSelection } from "@codemirror/commands"
-import { foldCode, unfoldCode, foldAll, unfoldAll } from "@codemirror/language"
+    redo,
+    undo,
+    undoSelection,
+} from "@codemirror/commands";
+import { foldCode, unfoldCode, foldAll, unfoldAll } from "@codemirror/language";
 import {
     closeSearchPanel,
     gotoLine,
@@ -66,11 +70,15 @@ import {
     selectMatches,
     selectNextOccurrence,
     selectSelectionMatches,
-} from "@codemirror/search"
-import type { KeyBinding } from "@codemirror/view"
+} from "@codemirror/search";
+import type { KeyBinding } from "@codemirror/view";
 
-import { indent } from "./indent"
-import { addCursorAtEachSelectionLine, addCursorDown, addCursorUp } from "./multiCursor"
+import { indent } from "./indent";
+import {
+    addCursorAtEachSelectionLine,
+    addCursorDown,
+    addCursorUp,
+} from "./multiCursor";
 
 const keys: readonly KeyBinding[] = [
     { key: "Ctrl-Space", run: startCompletion },
@@ -91,7 +99,11 @@ const keys: readonly KeyBinding[] = [
     { key: "Shift-Mod-l", run: selectSelectionMatches },
     // Enter and shift enter handled within the search panel plugin
 
-    { key: "Enter", run: insertNewlineAndIndent, shift: insertNewlineAndIndent },
+    {
+        key: "Enter",
+        run: insertNewlineAndIndent,
+        shift: insertNewlineAndIndent,
+    },
     {
         key: "ArrowLeft",
         run: cursorCharLeft,
@@ -218,7 +230,11 @@ const keys: readonly KeyBinding[] = [
     { key: "Shift-Mod-k", run: deleteLine },
     { key: "Alt-ArrowDown", run: moveLineDown },
     { key: "Alt-ArrowUp", run: moveLineUp },
-    { win: "Shift-Alt-ArrowDown", mac: "Shift-Alt-ArrowDown", run: copyLineDown },
+    {
+        win: "Shift-Alt-ArrowDown",
+        mac: "Shift-Alt-ArrowDown",
+        run: copyLineDown,
+    },
     { win: "Shift-Alt-ArrowUp", mac: "Shift-Alt-ArrowUp", run: copyLineUp },
 
     { key: "Mod-l", run: selectLine, preventDefault: true },
@@ -245,6 +261,6 @@ const keys: readonly KeyBinding[] = [
 
     //{ key: "Mod-Shift-m", run: openLintPanel },
     //{ key: "F8", run: nextDiagnostic }, // Shift should go back, but previousDiagnostic is not implemented
-]
+];
 
-export default keys
+export default keys;
diff --git a/frontend/src/lib/codemirror/default-keymap/multiCursor.ts b/frontend/src/lib/codemirror/default-keymap/multiCursor.ts
index 2471dc736..973f38b47 100644
--- a/frontend/src/lib/codemirror/default-keymap/multiCursor.ts
+++ b/frontend/src/lib/codemirror/default-keymap/multiCursor.ts
@@ -1,52 +1,52 @@
-import { EditorSelection } from "@codemirror/state"
-import type { Command } from "@codemirror/view"
+import { EditorSelection } from "@codemirror/state";
+import type { Command } from "@codemirror/view";
 
 const createAddCursor =
-  (direction: "up" | "down"): Command =>
-      view => {
-          const forward = direction === "down"
+    (direction: "up" | "down"): Command =>
+    (view) => {
+        const forward = direction === "down";
 
-          const selection = view.state.selection
+        const selection = view.state.selection;
 
-          for (const r of selection.ranges) {
-              selection.addRange(view.moveVertically(r, forward))
-          }
+        for (const r of selection.ranges) {
+            selection.addRange(view.moveVertically(r, forward));
+        }
 
-          view.dispatch({ selection })
+        view.dispatch({ selection });
 
-          return true
-      }
+        return true;
+    };
 
-export const addCursorUp = createAddCursor("up")
-export const addCursorDown = createAddCursor("down")
+export const addCursorUp = createAddCursor("up");
+export const addCursorDown = createAddCursor("down");
 
-export const addCursorAtEachSelectionLine: Command = view => {
-    const selection: EditorSelection | null = null
+export const addCursorAtEachSelectionLine: Command = (view) => {
+    const selection: EditorSelection | null = null;
     for (const r of view.state.selection.ranges) {
         if (r.empty) {
-            continue
+            continue;
         }
 
         for (let pos = r.from; pos <= r.to; ) {
-            const line = view.state.doc.lineAt(pos)
+            const line = view.state.doc.lineAt(pos);
 
-            const anchor = Math.min(line.to, r.to)
+            const anchor = Math.min(line.to, r.to);
 
             if (selection) {
-                selection.addRange(EditorSelection.range(anchor, anchor))
+                selection.addRange(EditorSelection.range(anchor, anchor));
             } else {
-                EditorSelection.single(anchor)
+                EditorSelection.single(anchor);
             }
 
-            pos = line.to + 1
+            pos = line.to + 1;
         }
     }
 
     if (!selection) {
-        return false
+        return false;
     }
 
-    view.dispatch({ selection })
+    view.dispatch({ selection });
 
-    return true
-}
+    return true;
+};
diff --git a/frontend/src/lib/codemirror/default-theme.ts b/frontend/src/lib/codemirror/default-theme.ts
index 241168c5e..0a59dcf5c 100644
--- a/frontend/src/lib/codemirror/default-theme.ts
+++ b/frontend/src/lib/codemirror/default-theme.ts
@@ -1,14 +1,14 @@
-import { HighlightStyle, syntaxHighlighting } from "@codemirror/language"
-import type { Extension } from "@codemirror/state"
-import { EditorView } from "@codemirror/view"
-import { tags } from "@lezer/highlight"
-
-const ivory = "#abb2bf"
-const highlightBackground = "var(--code-highlight)"
-const background = "var(--code-background)"
-const tooltipBackground = "#353a42"
-const selection = "var(--code-selection)"
-const cursor = "var(--code-cursor)"
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import type { Extension } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { tags } from "@lezer/highlight";
+
+const ivory = "#abb2bf";
+const highlightBackground = "var(--code-highlight)";
+const background = "var(--code-background)";
+const tooltipBackground = "#353a42";
+const selection = "var(--code-selection)";
+const cursor = "var(--code-cursor)";
 
 export const theme = EditorView.theme(
     {
@@ -30,9 +30,10 @@ export const theme = EditorView.theme(
             backgroundColor: selection,
         },
 
-        "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
-            backgroundColor: selection,
-        },
+        "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground":
+            {
+                backgroundColor: selection,
+            },
 
         ".cm-panels": { backgroundColor: background, color: "#ffffff" },
         ".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
@@ -48,13 +49,17 @@ export const theme = EditorView.theme(
         },
 
         ".cm-activeLine": { backgroundColor: highlightBackground },
-        ".cm-selectionMatch": { backgroundColor: "#ffffff1a", borderRadius: "2px" },
-
-        "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
-            backgroundColor: "#bad0f847",
-            outline: "1px solid #515a6b",
+        ".cm-selectionMatch": {
+            backgroundColor: "#ffffff1a",
+            borderRadius: "2px",
         },
 
+        "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket":
+            {
+                backgroundColor: "#bad0f847",
+                outline: "1px solid #515a6b",
+            },
+
         ".cm-gutters": {
             background: background,
             border: "none",
@@ -90,8 +95,8 @@ export const theme = EditorView.theme(
             },
         },
     },
-    { dark: true }
-)
+    { dark: true },
+);
 
 // https://github.com/codemirror/highlight/blob/main/src/highlight.ts#L549
 // https://github.com/codemirror/lang-cpp/blob/main/src/cpp.ts#L24
@@ -111,13 +116,25 @@ export const highlightStyle = HighlightStyle.define([
     { tag: tags.string, class: "cmt-string" },
     { tag: tags.character, class: "cmt-character" },
     { tag: tags.number, class: "cmt-number" },
-    { tag: [tags.regexp, tags.escape, tags.special(tags.string)], class: "cmt-string2" },
+    {
+        tag: [tags.regexp, tags.escape, tags.special(tags.string)],
+        class: "cmt-string2",
+    },
     { tag: tags.variableName, class: "cmt-variableName" },
     { tag: tags.local(tags.variableName), class: "cmt-variableName cmt-local" },
-    { tag: tags.definition(tags.variableName), class: "cmt-variableName cmt-definition" },
+    {
+        tag: tags.definition(tags.variableName),
+        class: "cmt-variableName cmt-definition",
+    },
     { tag: tags.special(tags.variableName), class: "cmt-variableName2" },
-    { tag: tags.definition(tags.propertyName), class: "cmt-propertyName cmt-definition" },
-    { tag: tags.function(tags.variableName), class: "cmt-variableName cmt-function" },
+    {
+        tag: tags.definition(tags.propertyName),
+        class: "cmt-propertyName cmt-definition",
+    },
+    {
+        tag: tags.function(tags.variableName),
+        class: "cmt-variableName cmt-function",
+    },
     { tag: tags.name, class: "cmt-name" },
     { tag: tags.typeName, class: "cmt-typename" },
     { tag: tags.namespace, class: "cmt-namespace" },
@@ -129,11 +146,8 @@ export const highlightStyle = HighlightStyle.define([
     { tag: tags.meta, class: "cmt-meta" },
     { tag: tags.invalid, class: "cmt-invalid" },
     { tag: tags.punctuation, class: "cmt-punctuation" },
-])
+]);
 
-export const extension: Extension = [
-    theme,
-    syntaxHighlighting(highlightStyle),
-]
+export const extension: Extension = [theme, syntaxHighlighting(highlightStyle)];
 
-export default extension
+export default extension;
diff --git a/frontend/src/lib/codemirror/languageServer.ts b/frontend/src/lib/codemirror/languageServer.ts
index bf2236b1a..5af76a75f 100644
--- a/frontend/src/lib/codemirror/languageServer.ts
+++ b/frontend/src/lib/codemirror/languageServer.ts
@@ -1,301 +1,317 @@
 /* Originally adapted from https://github.com/FurqanSoftware/codemirror-languageserver */
 
-import type { ClangdStdioTransport } from "@clangd-wasm/clangd-wasm"
-import { autocompletion } from "@codemirror/autocomplete"
+import type { ClangdStdioTransport } from "@clangd-wasm/clangd-wasm";
+import { autocompletion } from "@codemirror/autocomplete";
 import type {
     Completion,
     CompletionContext,
     CompletionResult,
-} from "@codemirror/autocomplete"
-import { setDiagnostics } from "@codemirror/lint"
-import { type Extension, Facet } from "@codemirror/state"
-import type { Text } from "@codemirror/state"
-import { type EditorView, ViewPlugin, type Tooltip, hoverTooltip, keymap } from "@codemirror/view"
-import type { ViewUpdate, PluginValue } from "@codemirror/view"
+} from "@codemirror/autocomplete";
+import { setDiagnostics } from "@codemirror/lint";
+import { type Extension, Facet } from "@codemirror/state";
+import type { Text } from "@codemirror/state";
 import {
-    RequestManager,
-    Client,
-} from "@open-rpc/client-js"
-import type { Transport } from "@open-rpc/client-js/build/transports/Transport"
+    type EditorView,
+    ViewPlugin,
+    type Tooltip,
+    hoverTooltip,
+    keymap,
+} from "@codemirror/view";
+import type { ViewUpdate, PluginValue } from "@codemirror/view";
+import { RequestManager, Client } from "@open-rpc/client-js";
+import type { Transport } from "@open-rpc/client-js/build/transports/Transport";
 import {
     DiagnosticSeverity,
     CompletionItemKind,
     CompletionTriggerKind,
-} from "vscode-languageserver-protocol"
-import type * as LSP from "vscode-languageserver-protocol"
+} from "vscode-languageserver-protocol";
+import type * as LSP from "vscode-languageserver-protocol";
 
-const timeout = 10000
-const changesDelay = 500
+const timeout = 10000;
+const changesDelay = 500;
 
 const CompletionItemKindMap = Object.fromEntries(
-    Object.entries(CompletionItemKind).map(([key, value]) => [value, key])
-) as Record<CompletionItemKind, string>
+    Object.entries(CompletionItemKind).map(([key, value]) => [value, key]),
+) as Record<CompletionItemKind, string>;
 
-const useLast = <T>(values: readonly T[]) => values.reduce((_, v) => v, "" as T)
+const useLast = <T>(values: readonly T[]) =>
+    values.reduce((_, v) => v, "" as T);
 
-const client = Facet.define<LanguageServerClient, LanguageServerClient>({ combine: useLast })
-const documentUri = Facet.define<string, string>({ combine: useLast })
-const languageId = Facet.define<string, string>({ combine: useLast })
+const client = Facet.define<LanguageServerClient, LanguageServerClient>({
+    combine: useLast,
+});
+const documentUri = Facet.define<string, string>({ combine: useLast });
+const languageId = Facet.define<string, string>({ combine: useLast });
 
 // https://microsoft.github.io/language-server-protocol/specifications/specification-current/
 
 // Client to server then server to client
 interface LSPRequestMap {
-    initialize: [LSP.InitializeParams, LSP.InitializeResult]
-    "textDocument/hover": [LSP.HoverParams, LSP.Hover]
+    initialize: [LSP.InitializeParams, LSP.InitializeResult];
+    "textDocument/hover": [LSP.HoverParams, LSP.Hover];
     "textDocument/completion": [
         LSP.CompletionParams,
         LSP.CompletionItem[] | LSP.CompletionList | null,
-    ]
-    "textDocument/formatting": [LSP.DocumentFormattingParams, LSP.TextEdit[] | null]
-    "shutdown": [null, null]
+    ];
+    "textDocument/formatting": [
+        LSP.DocumentFormattingParams,
+        LSP.TextEdit[] | null,
+    ];
+    shutdown: [null, null];
 }
 
 // Client to server
 interface LSPNotifyMap {
-    initialized: LSP.InitializedParams
-    "textDocument/didChange": LSP.DidChangeTextDocumentParams
-    "textDocument/didOpen": LSP.DidOpenTextDocumentParams
-    "textDocument/didSave": LSP.DidSaveTextDocumentParams
-    "exit": null
+    initialized: LSP.InitializedParams;
+    "textDocument/didChange": LSP.DidChangeTextDocumentParams;
+    "textDocument/didOpen": LSP.DidOpenTextDocumentParams;
+    "textDocument/didSave": LSP.DidSaveTextDocumentParams;
+    exit: null;
 }
 
 // Server to client
 interface LSPEventMap {
-    "textDocument/publishDiagnostics": LSP.PublishDiagnosticsParams
+    "textDocument/publishDiagnostics": LSP.PublishDiagnosticsParams;
 }
 
 type Notification = {
     [key in keyof LSPEventMap]: {
-        jsonrpc: "2.0"
-        id?: null | undefined
-        method: key
-        params: LSPEventMap[key]
+        jsonrpc: "2.0";
+        id?: null | undefined;
+        method: key;
+        params: LSPEventMap[key];
     };
 }[keyof LSPEventMap];
 
 class LanguageServerClient {
-    private rootUri: string
-    private workspaceFolders: LSP.WorkspaceFolder[]
-    private autoClose?: boolean
+    private rootUri: string;
+    private workspaceFolders: LSP.WorkspaceFolder[];
+    private autoClose?: boolean;
 
-    private transport: Transport
-    private requestManager: RequestManager
-    private client: Client
+    private transport: Transport;
+    private requestManager: RequestManager;
+    private client: Client;
 
-    public ready: boolean
-    public capabilities: LSP.ServerCapabilities
+    public ready: boolean;
+    public capabilities: LSP.ServerCapabilities;
 
-    private plugins: LanguageServerPlugin[]
+    private plugins: LanguageServerPlugin[];
 
-    public initializePromise: Promise<void>
+    public initializePromise: Promise<void>;
 
     constructor(options: LanguageServerClientOptions) {
-        this.rootUri = options.rootUri
-        this.workspaceFolders = options.workspaceFolders
-        this.autoClose = options.autoClose
-        this.plugins = []
-        this.transport = options.transport
+        this.rootUri = options.rootUri;
+        this.workspaceFolders = options.workspaceFolders;
+        this.autoClose = options.autoClose;
+        this.plugins = [];
+        this.transport = options.transport;
 
-        this.requestManager = new RequestManager([this.transport])
-        this.client = new Client(this.requestManager)
+        this.requestManager = new RequestManager([this.transport]);
+        this.client = new Client(this.requestManager);
 
-        this.client.onNotification(data => {
-            this.processNotification(data as Notification)
-        })
+        this.client.onNotification((data) => {
+            this.processNotification(data as Notification);
+        });
 
-        this.initializePromise = this.initialize()
+        this.initializePromise = this.initialize();
     }
 
     async initialize() {
-        const { capabilities } = await this.request("initialize", {
-            capabilities: {
-                textDocument: {
-                    hover: {
-                        dynamicRegistration: true,
-                        contentFormat: ["plaintext", "markdown"],
-                    },
-                    moniker: {},
-                    synchronization: {
-                        dynamicRegistration: true,
-                        willSave: false,
-                        didSave: true,
-                        willSaveWaitUntil: false,
-                    },
-                    completion: {
-                        dynamicRegistration: true,
-                        completionItem: {
-                            snippetSupport: false,
-                            commitCharactersSupport: true,
-                            documentationFormat: ["plaintext", "markdown"],
-                            deprecatedSupport: false,
-                            preselectSupport: false,
+        const { capabilities } = await this.request(
+            "initialize",
+            {
+                capabilities: {
+                    textDocument: {
+                        hover: {
+                            dynamicRegistration: true,
+                            contentFormat: ["plaintext", "markdown"],
                         },
-                        contextSupport: false,
-                    },
-                    signatureHelp: {
-                        dynamicRegistration: true,
-                        signatureInformation: {
-                            documentationFormat: ["plaintext", "markdown"],
+                        moniker: {},
+                        synchronization: {
+                            dynamicRegistration: true,
+                            willSave: false,
+                            didSave: true,
+                            willSaveWaitUntil: false,
+                        },
+                        completion: {
+                            dynamicRegistration: true,
+                            completionItem: {
+                                snippetSupport: false,
+                                commitCharactersSupport: true,
+                                documentationFormat: ["plaintext", "markdown"],
+                                deprecatedSupport: false,
+                                preselectSupport: false,
+                            },
+                            contextSupport: false,
+                        },
+                        signatureHelp: {
+                            dynamicRegistration: true,
+                            signatureInformation: {
+                                documentationFormat: ["plaintext", "markdown"],
+                            },
+                        },
+                        declaration: {
+                            dynamicRegistration: true,
+                            linkSupport: true,
+                        },
+                        definition: {
+                            dynamicRegistration: true,
+                            linkSupport: true,
+                        },
+                        typeDefinition: {
+                            dynamicRegistration: true,
+                            linkSupport: true,
+                        },
+                        implementation: {
+                            dynamicRegistration: true,
+                            linkSupport: true,
+                        },
+                        formatting: {
+                            dynamicRegistration: true,
                         },
                     },
-                    declaration: {
-                        dynamicRegistration: true,
-                        linkSupport: true,
-                    },
-                    definition: {
-                        dynamicRegistration: true,
-                        linkSupport: true,
-                    },
-                    typeDefinition: {
-                        dynamicRegistration: true,
-                        linkSupport: true,
-                    },
-                    implementation: {
-                        dynamicRegistration: true,
-                        linkSupport: true,
-                    },
-                    formatting: {
-                        dynamicRegistration: true,
-                    },
-                },
-                workspace: {
-                    didChangeConfiguration: {
-                        dynamicRegistration: true,
+                    workspace: {
+                        didChangeConfiguration: {
+                            dynamicRegistration: true,
+                        },
                     },
                 },
+                initializationOptions: null,
+                processId: null,
+                rootUri: this.rootUri,
+                workspaceFolders: this.workspaceFolders,
             },
-            initializationOptions: null,
-            processId: null,
-            rootUri: this.rootUri,
-            workspaceFolders: this.workspaceFolders,
-        }, timeout * 3)
-        this.capabilities = capabilities
-        this.notify("initialized", {})
-        this.ready = true
+            timeout * 3,
+        );
+        this.capabilities = capabilities;
+        this.notify("initialized", {});
+        this.ready = true;
     }
 
     async exit() {
-        await this.request("shutdown", null, timeout)
-        return this.notify("exit", null)
+        await this.request("shutdown", null, timeout);
+        return this.notify("exit", null);
     }
 
     close() {
-        this.client.close()
+        this.client.close();
     }
 
     textDocumentDidOpen(params: LSP.DidOpenTextDocumentParams) {
-        return this.notify("textDocument/didOpen", params)
+        return this.notify("textDocument/didOpen", params);
     }
 
     textDocumentDidChange(params: LSP.DidChangeTextDocumentParams) {
-        return this.notify("textDocument/didChange", params)
+        return this.notify("textDocument/didChange", params);
     }
 
     async textDocumentHover(params: LSP.HoverParams) {
-        return await this.request("textDocument/hover", params, timeout)
+        return await this.request("textDocument/hover", params, timeout);
     }
 
     async textDocumentCompletion(params: LSP.CompletionParams) {
-        return await this.request("textDocument/completion", params, timeout)
+        return await this.request("textDocument/completion", params, timeout);
     }
 
     async textDocumentFormatting(params: LSP.DocumentFormattingParams) {
-        return await this.request("textDocument/formatting", params, timeout)
+        return await this.request("textDocument/formatting", params, timeout);
     }
 
     async textDocumentDidSave(params: LSP.DidSaveTextDocumentParams) {
-        return this.notify("textDocument/didSave", params)
+        return this.notify("textDocument/didSave", params);
     }
 
     transportWriteFile(filename: string, contents: string) {
-        const transport = <ClangdStdioTransport> this.transport
-        transport.module?.FS?.writeFile(filename, contents)
+        const transport = <ClangdStdioTransport>this.transport;
+        transport.module?.FS?.writeFile(filename, contents);
     }
 
     attachPlugin(plugin: LanguageServerPlugin) {
-        this.plugins.push(plugin)
+        this.plugins.push(plugin);
     }
 
     detachPlugin(plugin: LanguageServerPlugin) {
-        const i = this.plugins.indexOf(plugin)
-        if (i === -1) return
-        this.plugins.splice(i, 1)
-        if (this.autoClose) this.close()
+        const i = this.plugins.indexOf(plugin);
+        if (i === -1) return;
+        this.plugins.splice(i, 1);
+        if (this.autoClose) this.close();
     }
 
     private request<K extends keyof LSPRequestMap>(
         method: K,
         params: LSPRequestMap[K][0],
-        timeout: number
+        timeout: number,
     ): Promise<LSPRequestMap[K][1]> {
-        return this.client.request({ method, params }, timeout)
+        return this.client.request({ method, params }, timeout);
     }
 
     private notify<K extends keyof LSPNotifyMap>(
         method: K,
-        params: LSPNotifyMap[K]
+        params: LSPNotifyMap[K],
     ): Promise<LSPNotifyMap[K]> {
-        return this.client.notify({ method, params })
+        return this.client.notify({ method, params });
     }
 
     private processNotification(notification: Notification) {
         for (const plugin of this.plugins)
-            plugin.processNotification(notification)
+            plugin.processNotification(notification);
     }
 }
 
 class LanguageServerPlugin implements PluginValue {
-    public client: LanguageServerClient
+    public client: LanguageServerClient;
 
-    private documentUri: string
-    private languageId: string
-    private documentVersion: number
+    private documentUri: string;
+    private languageId: string;
+    private documentVersion: number;
 
-    private changesTimeout: number
+    private changesTimeout: number;
 
     constructor(private view: EditorView) {
-        this.client = this.view.state.facet(client)
-        this.documentUri = this.view.state.facet(documentUri)
-        this.languageId = this.view.state.facet(languageId)
-        this.documentVersion = 0
-        this.changesTimeout = 0
+        this.client = this.view.state.facet(client);
+        this.documentUri = this.view.state.facet(documentUri);
+        this.languageId = this.view.state.facet(languageId);
+        this.documentVersion = 0;
+        this.changesTimeout = 0;
 
-        this.client.attachPlugin(this)
+        this.client.attachPlugin(this);
 
         this.initialize({
             documentText: this.view.state.doc.toString(),
-        })
+        });
     }
 
     update({ docChanged }: ViewUpdate) {
-        if (!docChanged) return
-        if (this.changesTimeout) clearTimeout(this.changesTimeout)
+        if (!docChanged) return;
+        if (this.changesTimeout) clearTimeout(this.changesTimeout);
         this.changesTimeout = self.setTimeout(() => {
             this.sendChange({
                 documentText: this.view.state.doc.toString(),
-            })
-        }, changesDelay)
+            });
+        }, changesDelay);
     }
 
     async save(contents: string) {
-        this.client.transportWriteFile(this.documentUri.split("file://")[1], contents)
+        this.client.transportWriteFile(
+            this.documentUri.split("file://")[1],
+            contents,
+        );
 
         await this.client.textDocumentDidSave({
             textDocument: {
                 uri: this.documentUri,
             },
             text: contents,
-        })
+        });
     }
 
     destroy() {
-        this.client.detachPlugin(this)
+        this.client.detachPlugin(this);
     }
 
     async initialize({ documentText }: { documentText: string }) {
         if (this.client.initializePromise) {
-            await this.client.initializePromise
+            await this.client.initializePromise;
         }
         this.client.textDocumentDidOpen({
             textDocument: {
@@ -304,11 +320,11 @@ class LanguageServerPlugin implements PluginValue {
                 text: documentText,
                 version: this.documentVersion,
             },
-        })
+        });
     }
 
     async sendChange({ documentText }: { documentText: string }) {
-        if (!this.client.ready) return
+        if (!this.client.ready) return;
         try {
             await this.client.textDocumentDidChange({
                 textDocument: {
@@ -316,57 +332,59 @@ class LanguageServerPlugin implements PluginValue {
                     version: this.documentVersion++,
                 },
                 contentChanges: [{ text: documentText }],
-            })
+            });
         } catch (e) {
-            console.error(e)
+            console.error(e);
         }
     }
 
     requestDiagnostics(view: EditorView) {
-        this.sendChange({ documentText: view.state.doc.toString() })
+        this.sendChange({ documentText: view.state.doc.toString() });
     }
 
     async requestHoverTooltip(
         view: EditorView,
-        { line, character }: { line: number, character: number }
+        { line, character }: { line: number; character: number },
     ): Promise<Tooltip | null> {
-        if (!this.client.ready || !this.client.capabilities.hoverProvider) return null
+        if (!this.client.ready || !this.client.capabilities.hoverProvider)
+            return null;
 
-        this.sendChange({ documentText: view.state.doc.toString() })
+        this.sendChange({ documentText: view.state.doc.toString() });
         const result = await this.client.textDocumentHover({
             textDocument: { uri: this.documentUri },
             position: { line, character },
-        })
-        if (!result) return null
-        const { contents, range } = result
-        let pos = posToOffset(view.state.doc, { line, character })
-        let end: number
+        });
+        if (!result) return null;
+        const { contents, range } = result;
+        let pos = posToOffset(view.state.doc, { line, character });
+        let end: number;
         if (range) {
-            pos = posToOffset(view.state.doc, range.start)
-            end = posToOffset(view.state.doc, range.end)
+            pos = posToOffset(view.state.doc, range.start);
+            end = posToOffset(view.state.doc, range.end);
         }
-        if (pos === null) return null
-        const dom = document.createElement("div")
-        dom.classList.add("documentation")
-        dom.innerHTML = formatContents(contents).join("<br/>")
-        return { pos, end, create: _view => ({ dom }), above: true }
+        if (pos === null) return null;
+        const dom = document.createElement("div");
+        dom.classList.add("documentation");
+        dom.innerHTML = formatContents(contents).join("<br/>");
+        return { pos, end, create: (_view) => ({ dom }), above: true };
     }
 
     async requestCompletion(
         context: CompletionContext,
-        { line, character }: { line: number, character: number },
+        { line, character }: { line: number; character: number },
         {
             triggerKind,
             triggerCharacter,
         }: {
-            triggerKind: CompletionTriggerKind
-            triggerCharacter: string | undefined
-        }
+            triggerKind: CompletionTriggerKind;
+            triggerCharacter: string | undefined;
+        },
     ): Promise<CompletionResult | null> {
-        if (!this.client.ready || !this.client.capabilities.completionProvider) return null
+        if (!this.client.ready || !this.client.capabilities.completionProvider)
+            return null;
         this.sendChange({
             documentText: context.state.doc.toString(),
-        })
+        });
 
         const result = await this.client.textDocumentCompletion({
             textDocument: { uri: this.documentUri },
@@ -375,11 +393,11 @@ class LanguageServerPlugin implements PluginValue {
                 triggerKind,
                 triggerCharacter,
             },
-        })
+        });
 
-        if (!result) return null
+        if (!result) return null;
 
-        const items = "items" in result ? result.items : result
+        const items = "items" in result ? result.items : result;
 
         let options = items.map(
             ({
@@ -392,9 +410,9 @@ class LanguageServerPlugin implements PluginValue {
                 filterText,
             }) => {
                 const completion: Completion & {
-                    filterText: string
-                    sortText?: string
-                    apply: string
+                    filterText: string;
+                    sortText?: string;
+                    apply: string;
                 } = {
                     label,
                     detail,
@@ -402,43 +420,43 @@ class LanguageServerPlugin implements PluginValue {
                     type: kind && CompletionItemKindMap[kind].toLowerCase(),
                     sortText: sortText ?? label,
                     filterText: filterText ?? label,
-                }
+                };
                 if (documentation) {
-                    completion.info = formatContents(documentation).join("\n")
+                    completion.info = formatContents(documentation).join("\n");
                 }
-                return completion
-            }
-        )
+                return completion;
+            },
+        );
 
-        const [, match] = prefixMatch(options)
-        const token = context.matchBefore(match)
-        let { pos } = context
+        const [, match] = prefixMatch(options);
+        const token = context.matchBefore(match);
+        let { pos } = context;
 
         if (token) {
-            pos = token.from
-            const word = token.text.toLowerCase()
+            pos = token.from;
+            const word = token.text.toLowerCase();
             if (/^\w+$/.test(word)) {
                 options = options
                     .filter(({ filterText }) =>
-                        filterText.toLowerCase().startsWith(word)
+                        filterText.toLowerCase().startsWith(word),
                     )
                     .sort(({ apply: a }, { apply: b }) => {
                         switch (true) {
-                        case a.startsWith(token.text) &&
+                            case a.startsWith(token.text) &&
                                 !b.startsWith(token.text):
-                            return -1
-                        case !a.startsWith(token.text) &&
+                                return -1;
+                            case !a.startsWith(token.text) &&
                                 b.startsWith(token.text):
-                            return 1
+                                return 1;
                         }
-                        return 0
-                    })
+                        return 0;
+                    });
             }
         }
         return {
             from: pos,
             options,
-        }
+        };
     }
 
     async requestFormat() {
@@ -452,74 +470,87 @@ class LanguageServerPlugin implements PluginValue {
                 tabSize: 4,
                 insertSpaces: true,
             },
-        })
+        });
     }
 
     processNotification(notification: Notification) {
         try {
             switch (notification.method) {
-            case "textDocument/publishDiagnostics":
-                this.processDiagnostics(notification.params)
+                case "textDocument/publishDiagnostics":
+                    this.processDiagnostics(notification.params);
             }
         } catch (error) {
-            console.error(error)
+            console.error(error);
         }
     }
 
     processDiagnostics(params: LSP.PublishDiagnosticsParams) {
-        if (params.uri !== this.documentUri) return
+        if (params.uri !== this.documentUri) return;
 
         const diagnostics = params.diagnostics
             .map(({ range, message, severity }) => ({
                 from: posToOffset(this.view.state.doc, range.start),
                 to: posToOffset(this.view.state.doc, range.end),
-                severity: ({
-                    [DiagnosticSeverity.Error]: "error",
-                    [DiagnosticSeverity.Warning]: "warning",
-                    [DiagnosticSeverity.Information]: "info",
-                    [DiagnosticSeverity.Hint]: "info",
-                } as const)[severity],
+                severity: (
+                    {
+                        [DiagnosticSeverity.Error]: "error",
+                        [DiagnosticSeverity.Warning]: "warning",
+                        [DiagnosticSeverity.Information]: "info",
+                        [DiagnosticSeverity.Hint]: "info",
+                    } as const
+                )[severity],
                 message,
             }))
-            .filter(({ from, to }) => from !== null && to !== null && from !== undefined && to !== undefined)
+            .filter(
+                ({ from, to }) =>
+                    from !== null &&
+                    to !== null &&
+                    from !== undefined &&
+                    to !== undefined,
+            )
             .sort((a, b) => {
                 switch (true) {
-                case a.from < b.from:
-                    return -1
-                case a.from > b.from:
-                    return 1
+                    case a.from < b.from:
+                        return -1;
+                    case a.from > b.from:
+                        return 1;
                 }
-                return 0
-            })
+                return 0;
+            });
 
-        this.view.dispatch(setDiagnostics(this.view.state, diagnostics))
+        this.view.dispatch(setDiagnostics(this.view.state, diagnostics));
     }
 }
 
 interface LanguageServerBaseOptions {
-    rootUri: string | null
-    workspaceFolders: LSP.WorkspaceFolder[] | null
-    documentUri: string
-    languageId: string
+    rootUri: string | null;
+    workspaceFolders: LSP.WorkspaceFolder[] | null;
+    documentUri: string;
+    languageId: string;
 }
 
 interface LanguageServerClientOptions extends LanguageServerBaseOptions {
-    transport: Transport
-    autoClose?: boolean
+    transport: Transport;
+    autoClose?: boolean;
 }
 
 interface LanguageServerOptions extends LanguageServerClientOptions {
-    client?: LanguageServerClient
+    client?: LanguageServerClient;
 }
 
-function languageServerWithTransport(options: LanguageServerOptions): [Extension[], (contents: string) => Promise<void>]{
-    let plugin: LanguageServerPlugin | null = null
+function languageServerWithTransport(
+    options: LanguageServerOptions,
+): [Extension[], (contents: string) => Promise<void>] {
+    let plugin: LanguageServerPlugin | null = null;
 
     const extension = [
-        client.of(options.client || new LanguageServerClient({ ...options, autoClose: true })),
+        client.of(
+            options.client ||
+                new LanguageServerClient({ ...options, autoClose: true }),
+        ),
         documentUri.of(options.documentUri),
         languageId.of(options.languageId),
-        ViewPlugin.define(view => {
+        ViewPlugin.define((view) => {
             plugin = new LanguageServerPlugin(view);
             return plugin;
         }),
@@ -527,33 +558,33 @@ function languageServerWithTransport(options: LanguageServerOptions): [Extension
             (view, pos) =>
                 plugin?.requestHoverTooltip(
                     view,
-                    offsetToPos(view.state.doc, pos)
-                ) ?? null
+                    offsetToPos(view.state.doc, pos),
+                ) ?? null,
         ),
         autocompletion({
             override: [
-                async context => {
-                    if (plugin == null) return null
+                async (context) => {
+                    if (plugin == null) return null;
 
-                    const { state, pos, explicit } = context
-                    const line = state.doc.lineAt(pos)
+                    const { state, pos, explicit } = context;
+                    const line = state.doc.lineAt(pos);
                     let trigKind: CompletionTriggerKind =
-                        CompletionTriggerKind.Invoked
-                    let trigChar: string | undefined
+                        CompletionTriggerKind.Invoked;
+                    let trigChar: string | undefined;
                     if (
                         !explicit &&
                         plugin.client.capabilities?.completionProvider?.triggerCharacters?.includes(
-                            line.text[pos - line.from - 1]
+                            line.text[pos - line.from - 1],
                         )
                     ) {
-                        trigKind = CompletionTriggerKind.TriggerCharacter
-                        trigChar = line.text[pos - line.from - 1]
+                        trigKind = CompletionTriggerKind.TriggerCharacter;
+                        trigChar = line.text[pos - line.from - 1];
                     }
                     if (
                         trigKind === CompletionTriggerKind.Invoked &&
                         !context.matchBefore(/\w+$/)
                     ) {
-                        return null
+                        return null;
                     }
                     return await plugin.requestCompletion(
                         context,
@@ -561,102 +592,113 @@ function languageServerWithTransport(options: LanguageServerOptions): [Extension
                         {
                             triggerKind: trigKind,
                             triggerCharacter: trigChar,
-                        }
-                    )
+                        },
+                    );
                 },
             ],
         }),
         keymap.of([
-            { key: "Alt-Shift-f", run: target => {
-                (async () => {
-                    const formattingEdits = await plugin.requestFormat()
-                    if (!formattingEdits) return
-
-                    const changes = formattingEdits.map(change => {
-                        return {
-                            from: posToOffset(target.state.doc, change.range.start),
-                            to: posToOffset(target.state.doc, change.range.end),
-                            insert: change.newText,
-                        }
-                    })
-
-                    target.dispatch({ changes })
-                })()
-
-                return true
-            } },
+            {
+                key: "Alt-Shift-f",
+                run: (target) => {
+                    (async () => {
+                        const formattingEdits = await plugin.requestFormat();
+                        if (!formattingEdits) return;
+
+                        const changes = formattingEdits.map((change) => {
+                            return {
+                                from: posToOffset(
+                                    target.state.doc,
+                                    change.range.start,
+                                ),
+                                to: posToOffset(
+                                    target.state.doc,
+                                    change.range.end,
+                                ),
+                                insert: change.newText,
+                            };
+                        });
+
+                        target.dispatch({ changes });
+                    })();
+
+                    return true;
+                },
+            },
         ]),
-    ]
+    ];
 
     const saveDocument = async (contents: string) => {
-        if (!plugin) return
-        await plugin.save(contents)
-    }
+        if (!plugin) return;
+        await plugin.save(contents);
+    };
 
-    return [extension, saveDocument]
+    return [extension, saveDocument];
 }
 
-function posToOffset(doc: Text, pos: { line: number, character: number }) {
-    if (pos.line >= doc.lines) return
-    const offset = doc.line(pos.line + 1).from + pos.character
-    if (offset > doc.length) return
-    return offset
+function posToOffset(doc: Text, pos: { line: number; character: number }) {
+    if (pos.line >= doc.lines) return;
+    const offset = doc.line(pos.line + 1).from + pos.character;
+    if (offset > doc.length) return;
+    return offset;
 }
 
 function offsetToPos(doc: Text, offset: number) {
-    const line = doc.lineAt(offset)
+    const line = doc.lineAt(offset);
     return {
         line: line.number - 1,
         character: offset - line.from,
-    }
+    };
 }
 
 function formatContents(
-    contents: LSP.MarkupContent | LSP.MarkedString | LSP.MarkedString[]
+    contents: LSP.MarkupContent | LSP.MarkedString | LSP.MarkedString[],
 ): string[] {
     if (Array.isArray(contents)) {
-        return contents.flatMap(formatContentEntry)
+        return contents.flatMap(formatContentEntry);
     } else {
-        return formatContentEntry(contents)
+        return formatContentEntry(contents);
     }
 }
 
-function formatContentEntry(entry: LSP.MarkupContent | LSP.MarkedString): string[] {
+function formatContentEntry(
+    entry: LSP.MarkupContent | LSP.MarkedString,
+): string[] {
     if (typeof entry === "string") {
-        return entry.split("\n")
+        return entry.split("\n");
     } else {
-        return formatContentEntry(entry.value)
+        return formatContentEntry(entry.value);
     }
 }
 
 function toSet(chars: Set<string>) {
-    let preamble = ""
-    let flat = Array.from(chars).join("")
-    const words = /\w/.test(flat)
+    let preamble = "";
+    let flat = Array.from(chars).join("");
+    const words = /\w/.test(flat);
     if (words) {
-        preamble += "\\w"
-        flat = flat.replace(/\w/g, "")
+        preamble += "\\w";
+        flat = flat.replace(/\w/g, "");
     }
-    return `[${preamble}${flat.replace(/[^\w\s]/g, "\\$&")}]`
+    return `[${preamble}${flat.replace(/[^\w\s]/g, "\\$&")}]`;
 }
 
 function prefixMatch(options: Completion[]) {
-    const first = new Set<string>()
-    const rest = new Set<string>()
+    const first = new Set<string>();
+    const rest = new Set<string>();
 
     for (const { apply } of options) {
-        const applyString = apply as string
-        const initial = applyString.at(0)
-        const restStr = applyString.substring(1)
+        const applyString = apply as string;
+        const initial = applyString.at(0);
+        const restStr = applyString.substring(1);
 
-        first.add(initial)
+        first.add(initial);
         for (const char of restStr) {
-            rest.add(char)
+            rest.add(char);
         }
     }
 
-    const source = `${toSet(first) + toSet(rest)}*$`
-    return [new RegExp(`^${source}`), new RegExp(source)]
+    const source = `${toSet(first) + toSet(rest)}*$`;
+    return [new RegExp(`^${source}`), new RegExp(source)];
 }
 
-export { LanguageServerClient, languageServerWithTransport }
+export { LanguageServerClient, languageServerWithTransport };
diff --git a/frontend/src/lib/codemirror/useCompareExtension.ts b/frontend/src/lib/codemirror/useCompareExtension.ts
index 420b499fb..cc79a24d1 100644
--- a/frontend/src/lib/codemirror/useCompareExtension.ts
+++ b/frontend/src/lib/codemirror/useCompareExtension.ts
@@ -1,128 +1,157 @@
-import { type RefObject, useEffect, useState } from "react"
+import { type RefObject, useEffect, useState } from "react";
 
-import { Compartment, type Extension, Facet } from "@codemirror/state"
-import { type EditorView, gutter, GutterMarker, ViewPlugin, type ViewUpdate } from "@codemirror/view"
+import { Compartment, type Extension, Facet } from "@codemirror/state";
+import {
+    type EditorView,
+    gutter,
+    GutterMarker,
+    ViewPlugin,
+    type ViewUpdate,
+} from "@codemirror/view";
 
-import styles from "./useCompareExtension.module.scss"
-import type { DiffRequest } from "./useCompareExtension.worker"
+import styles from "./useCompareExtension.module.scss";
+import type { DiffRequest } from "./useCompareExtension.worker";
 
 // State for target text to diff doc against
 const targetString = Facet.define<string, string | null>({
-    combine: values => (values.length ? values[0] : null),
-})
+    combine: (values) => (values.length ? values[0] : null),
+});
 
 // Computed diff between doc and target
-type DiffLineMap = Record<number, GutterMarker>
+type DiffLineMap = Record<number, GutterMarker>;
 const diffLineMap = Facet.define<DiffLineMap, DiffLineMap>({
-    combine: values => (values.length ? values[0] : {}),
-})
+    combine: (values) => (values.length ? values[0] : {}),
+});
 
 const marker = new (class extends GutterMarker {
     toDOM() {
-        const span = document.createElement("span")
-        span.className = styles.marker
-        return span
+        const span = document.createElement("span");
+        span.className = styles.marker;
+        return span;
     }
-})
+})();
 
 const diffGutter = gutter({
-    lineMarker(view, block) { // Might be better to use markers field instead, but this works
+    lineMarker(view, block) {
+        // Might be better to use markers field instead, but this works
         try {
-            const map = view.state.facet(diffLineMap)
-            const line = view.state.doc.lineAt(block.from)
+            const map = view.state.facet(diffLineMap);
+            const line = view.state.doc.lineAt(block.from);
 
             if (view.state.doc.sliceString(line.from, line.to).trim() === "") {
                 // Don't show for empty/whitespace-only lines
             }
 
-            return map[line.number]
+            return map[line.number];
         } catch (error) {
             if (error instanceof RangeError) {
                 // Ignore
             } else {
-                throw error
+                throw error;
             }
         }
     },
     lineMarkerChange(update) {
-        return update.docChanged || (update.state.facet(diffLineMap) !== update.startState.facet(diffLineMap))
+        return (
+            update.docChanged ||
+            update.state.facet(diffLineMap) !==
+                update.startState.facet(diffLineMap)
+        );
     },
     initialSpacer: () => marker,
-})
+});
 
-const diffLineMapCompartment = new Compartment()
+const diffLineMapCompartment = new Compartment();
 
 type DiffResult = [number, number, number, number][];
 
-const diffLineCalcPlugin = ViewPlugin.fromClass(class {
-    private worker = new Worker(new URL("./useCompareExtension.worker.ts", import.meta.url))
+const diffLineCalcPlugin = ViewPlugin.fromClass(
+    class {
+        private worker = new Worker(
+            new URL("./useCompareExtension.worker.ts", import.meta.url),
+        );
 
-    constructor(private view: EditorView) {
-        this.updateDiff()
-    }
-
-    async update(update: ViewUpdate) {
-        if (update.docChanged) {
-            this.updateDiff()
+        constructor(private view: EditorView) {
+            this.updateDiff();
         }
-    }
-
-    async calculateDiff(targetString: string, currentString: string): Promise<DiffResult> {
-        return new Promise(resolve => {
-            const diffRequest: DiffRequest = { target: targetString, current: currentString }
-            this.worker.postMessage(diffRequest)
 
-            const listener = ({ data }: {data: DiffResult}) => {
-                this.worker.removeEventListener("message", listener)
-                resolve(data)
+        async update(update: ViewUpdate) {
+            if (update.docChanged) {
+                this.updateDiff();
             }
+        }
 
-            this.worker.addEventListener("message", listener)
-        })
-    }
+        async calculateDiff(
+            targetString: string,
+            currentString: string,
+        ): Promise<DiffResult> {
+            return new Promise((resolve) => {
+                const diffRequest: DiffRequest = {
+                    target: targetString,
+                    current: currentString,
+                };
+                this.worker.postMessage(diffRequest);
+
+                const listener = ({ data }: { data: DiffResult }) => {
+                    this.worker.removeEventListener("message", listener);
+                    resolve(data);
+                };
+
+                this.worker.addEventListener("message", listener);
+            });
+        }
 
-    async updateDiff() {
-        const diff = await this.calculateDiff(this.view.state.facet(targetString), this.view.state.doc.toString())
+        async updateDiff() {
+            const diff = await this.calculateDiff(
+                this.view.state.facet(targetString),
+                this.view.state.doc.toString(),
+            );
 
-        // Convert diff changes to a map of line numbers -> change type
-        let map: DiffLineMap = {}
+            // Convert diff changes to a map of line numbers -> change type
+            let map: DiffLineMap = {};
 
-        for (const [, , childStartLine, childEndLine] of diff) {
-            for (let i = childStartLine; i < childEndLine; i++) {
-                map[i + 1] = marker
+            for (const [, , childStartLine, childEndLine] of diff) {
+                for (let i = childStartLine; i < childEndLine; i++) {
+                    map[i + 1] = marker;
+                }
             }
-        }
 
-        // Has our targetString been updated to a blank,
-        // and thus we should be showing no diff right now, while
-        // the view's been updating?
-        if (typeof this.view.state.facet(targetString) !== "string") {
-            map = {}
-        }
+            // Has our targetString been updated to a blank,
+            // and thus we should be showing no diff right now, while
+            // the view's been updating?
+            if (typeof this.view.state.facet(targetString) !== "string") {
+                map = {};
+            }
 
-        this.view.dispatch({
-            effects: diffLineMapCompartment.reconfigure(diffLineMap.of(map)),
-        })
-    }
-})
+            this.view.dispatch({
+                effects: diffLineMapCompartment.reconfigure(
+                    diffLineMap.of(map),
+                ),
+            });
+        }
+    },
+);
 
 // Extension that highlights lines in the doc that differ from `compareTo`.
-export default function useCompareExtension(viewRef: RefObject<EditorView>, compareTo: string): Extension {
-    const [compartment] = useState(new Compartment())
+export default function useCompareExtension(
+    viewRef: RefObject<EditorView>,
+    compareTo: string,
+): Extension {
+    const [compartment] = useState(new Compartment());
 
     // Update targetString facet when compareTo changes
     useEffect(() => {
         if (viewRef.current) {
             viewRef.current.dispatch({
                 effects: compartment.reconfigure(targetString.of(compareTo)),
-            })
+            });
         }
-    }, [compartment, compareTo, viewRef])
+    }, [compartment, compareTo, viewRef]);
 
     return [
         diffGutter,
         compartment.of(targetString.of(compareTo)),
         diffLineMapCompartment.of(diffLineMap.of({})),
         diffLineCalcPlugin,
-    ]
+    ];
 }
diff --git a/frontend/src/lib/codemirror/useCompareExtension.worker.ts b/frontend/src/lib/codemirror/useCompareExtension.worker.ts
index eceb9124e..6d784b3e8 100644
--- a/frontend/src/lib/codemirror/useCompareExtension.worker.ts
+++ b/frontend/src/lib/codemirror/useCompareExtension.worker.ts
@@ -1,18 +1,21 @@
-import { diff } from "fast-myers-diff"
+import { diff } from "fast-myers-diff";
 
-const ctx: Worker = self as any
+const ctx: Worker = self as any;
 
 ctx.onmessage = ({ data }: { data: DiffRequest }) => {
     if (typeof data.target !== "string") {
-        return []
+        return [];
     }
 
     const tokenizeSource = (source: string) => {
-        return source.split("\n").map(i => i.trim())
-    }
+        return source.split("\n").map((i) => i.trim());
+    };
 
-    const diffsIterator = diff(tokenizeSource(data.target), tokenizeSource(data.current))
-    ctx.postMessage(Array.from(diffsIterator))
-}
+    const diffsIterator = diff(
+        tokenizeSource(data.target),
+        tokenizeSource(data.current),
+    );
+    ctx.postMessage(Array.from(diffsIterator));
+};
 
-export type DiffRequest = { target: string | undefined, current: string };
+export type DiffRequest = { target: string | undefined; current: string };
diff --git a/frontend/src/lib/device.ts b/frontend/src/lib/device.ts
index 13bcb5d50..829ada048 100644
--- a/frontend/src/lib/device.ts
+++ b/frontend/src/lib/device.ts
@@ -1,13 +1,13 @@
 export function isServer(): boolean {
-    return typeof window === "undefined"
+    return typeof window === "undefined";
 }
 
 export function getUserAgent(): string {
     if (isServer()) {
         // TODO - fix this
-        throw Error("getUserAgent() called on server")
+        throw Error("getUserAgent() called on server");
     } else {
-        return navigator.userAgent
+        return navigator.userAgent;
     }
 }
 
@@ -16,9 +16,9 @@ export function isMacOS(): boolean {
     // @ts-ignore
     if (!isServer() && navigator.userAgentData) {
         // @ts-ignore
-        return navigator.userAgentData.platform === "macOS"
+        return navigator.userAgentData.platform === "macOS";
     }
 
     // Fall back to user-agent sniffing
-    return getUserAgent().includes("Mac OS X")
+    return getUserAgent().includes("Mac OS X");
 }
diff --git a/frontend/src/lib/hooks.ts b/frontend/src/lib/hooks.ts
index 7bc86a5a0..504f857b2 100644
--- a/frontend/src/lib/hooks.ts
+++ b/frontend/src/lib/hooks.ts
@@ -1,94 +1,109 @@
-"use client"
+"use client";
 
-import { useState, useRef, useLayoutEffect, useEffect, type RefObject } from "react"
+import {
+    useState,
+    useRef,
+    useLayoutEffect,
+    useEffect,
+    type RefObject,
+} from "react";
 
-import Router from "next/router"
+import Router from "next/router";
 
-import useResizeObserver from "@react-hook/resize-observer"
+import useResizeObserver from "@react-hook/resize-observer";
 
-import { joinTitles } from "./title"
+import { joinTitles } from "./title";
 
-const shouldIgnoreNextWarnBeforeUnload = { current: false } // ref
+const shouldIgnoreNextWarnBeforeUnload = { current: false }; // ref
 
 export function useSize<T extends HTMLElement>(): {
-    width: number | undefined
-    height: number | undefined
-    ref: RefObject<T>
-    } {
-    const ref = useRef<T>()
-    const [size, setSize] = useState({ width: undefined, height: undefined })
+    width: number | undefined;
+    height: number | undefined;
+    ref: RefObject<T>;
+} {
+    const ref = useRef<T>();
+    const [size, setSize] = useState({ width: undefined, height: undefined });
 
     useLayoutEffect(() => {
-        if (ref.current)
-            setSize(ref.current.getBoundingClientRect())
-    }, [ref])
+        if (ref.current) setSize(ref.current.getBoundingClientRect());
+    }, [ref]);
 
-    useResizeObserver(ref, entry => setSize(entry.contentRect))
+    useResizeObserver(ref, (entry) => setSize(entry.contentRect));
 
-    return { width: size.width, height: size.height, ref }
+    return { width: size.width, height: size.height, ref };
 }
 
 export function ignoreNextWarnBeforeUnload() {
-    shouldIgnoreNextWarnBeforeUnload.current = true
+    shouldIgnoreNextWarnBeforeUnload.current = true;
 }
 
-export function useWarnBeforeUnload(enabled: boolean, message = "Are you sure you want to leave this page?") {
-    const enabledRef = useRef(enabled)
-    const messageRef = useRef(message)
+export function useWarnBeforeUnload(
+    enabled: boolean,
+    message = "Are you sure you want to leave this page?",
+) {
+    const enabledRef = useRef(enabled);
+    const messageRef = useRef(message);
 
-    enabledRef.current = enabled
-    messageRef.current = message
+    enabledRef.current = enabled;
+    messageRef.current = message;
 
     // Based on code from https://github.com/vercel/next.js/issues/2476#issuecomment-563190607
     useEffect(() => {
         const routeChangeStart = (url: string) => {
-            if (Router.asPath !== url && enabledRef.current && !shouldIgnoreNextWarnBeforeUnload.current && !confirm(messageRef.current)) {
-                shouldIgnoreNextWarnBeforeUnload.current = false
+            if (
+                Router.asPath !== url &&
+                enabledRef.current &&
+                !shouldIgnoreNextWarnBeforeUnload.current &&
+                !confirm(messageRef.current)
+            ) {
+                shouldIgnoreNextWarnBeforeUnload.current = false;
 
-                Router.events.emit("routeChangeError")
-                Router.replace(Router, Router.asPath)
+                Router.events.emit("routeChangeError");
+                Router.replace(Router, Router.asPath);
 
                 // This error shows onscreen in dev but we can't do anything about it
-                throw new Error("abort route change - ignore this error")
+                throw new Error("abort route change - ignore this error");
             }
-        }
+        };
 
         const onUnload = (event: BeforeUnloadEvent) => {
             if (enabledRef.current) {
-                event.preventDefault()
-                event.returnValue = messageRef.current
-                return event.returnValue
+                event.preventDefault();
+                event.returnValue = messageRef.current;
+                return event.returnValue;
             }
-        }
+        };
 
-        window.addEventListener("beforeunload", onUnload, { capture: true })
-        Router.events.on("routeChangeStart", routeChangeStart)
+        window.addEventListener("beforeunload", onUnload, { capture: true });
+        Router.events.on("routeChangeStart", routeChangeStart);
 
         return () => {
-            window.removeEventListener("beforeunload", onUnload, { capture: true })
-            Router.events.off("routeChangeStart", routeChangeStart)
-        }
-    }, [enabledRef, messageRef])
+            window.removeEventListener("beforeunload", onUnload, {
+                capture: true,
+            });
+            Router.events.off("routeChangeStart", routeChangeStart);
+        };
+    }, [enabledRef, messageRef]);
 }
 
 export function usePageTitle(...breadcrumbs: string[]) {
-    const title = joinTitles(...breadcrumbs)
+    const title = joinTitles(...breadcrumbs);
 
     useEffect(() => {
-        document.title = title
-    }, [title])
+        document.title = title;
+    }, [title]);
 }
 
 export function useIsMounted() {
-    const [isMounted, setMounted] = useState(false)
+    const [isMounted, setMounted] = useState(false);
 
     useEffect(() => {
-        setMounted(true)
+        setMounted(true);
 
         return () => {
-            setMounted(false)
-        }
-    }, [])
+            setMounted(false);
+        };
+    }, []);
 
-    return isMounted
+    return isMounted;
 }
diff --git a/frontend/src/lib/i18n/translate.ts b/frontend/src/lib/i18n/translate.ts
index 327e6abe7..9f29328b5 100644
--- a/frontend/src/lib/i18n/translate.ts
+++ b/frontend/src/lib/i18n/translate.ts
@@ -1,29 +1,31 @@
 // Implements a similar API to next-translate but works with app directory
 
-import compilersTranslations from "./locales/en/compilers.json"
-import librariesTranslations from "./locales/en/libraries.json"
+import compilersTranslations from "./locales/en/compilers.json";
+import librariesTranslations from "./locales/en/libraries.json";
 
 const translationsBySection = {
-    "compilers": compilersTranslations,
-    "libraries": librariesTranslations,
-}
+    compilers: compilersTranslations,
+    libraries: librariesTranslations,
+};
 
-export type Section = keyof typeof translationsBySection
+export type Section = keyof typeof translationsBySection;
 
 export default function getTranslation(section: Section) {
-    const translations = translationsBySection[section]
+    const translations = translationsBySection[section];
     return {
         t(key: string): string {
             if (key in translations) {
-                return translations[key as keyof typeof translations]
+                return translations[key as keyof typeof translations];
             }
 
-            console.warn(`Missing '${section}' translation for key: ${key}`)
-            return key
+            console.warn(`Missing '${section}' translation for key: ${key}`);
+            return key;
         },
 
         tWithDefault<T>(key: string, defaultValue: T): string | T {
-            return translations[key as keyof typeof translations] ?? defaultValue
+            return (
+                translations[key as keyof typeof translations] ?? defaultValue
+            );
         },
-    }
+    };
 }
diff --git a/frontend/src/lib/interdiff.ts b/frontend/src/lib/interdiff.ts
index beadc9bcd..f9d1e8762 100644
--- a/frontend/src/lib/interdiff.ts
+++ b/frontend/src/lib/interdiff.ts
@@ -1,102 +1,104 @@
-import { diff as myersDiff } from "fast-myers-diff"
+import { diff as myersDiff } from "fast-myers-diff";
 
-import type { DiffOutput, DiffRow } from "./api"
+import type { DiffOutput, DiffRow } from "./api";
 
 type Chunk = {
-    unaligned: DiffRow[]
-    aligned: DiffRow
-}
+    unaligned: DiffRow[];
+    aligned: DiffRow;
+};
 
-function chunkDiffLines(rows: DiffRow[]): { chunks: Chunk[], lastUnaligned: DiffRow[] } {
-    let unaligned = []
-    const chunks = []
+function chunkDiffLines(rows: DiffRow[]): {
+    chunks: Chunk[];
+    lastUnaligned: DiffRow[];
+} {
+    let unaligned = [];
+    const chunks = [];
     for (const row of rows) {
         if (row.base) {
-            chunks.push({ unaligned, aligned: row })
-            unaligned = []
+            chunks.push({ unaligned, aligned: row });
+            unaligned = [];
         } else {
-            unaligned.push(row)
+            unaligned.push(row);
         }
     }
-    return { chunks, lastUnaligned: unaligned }
+    return { chunks, lastUnaligned: unaligned };
 }
 
 /**
  * Combine two normal diffs into a three-way diff. This algorithm is derived from asm-differ:
  * https://github.com/simonlindholm/asm-differ/blob/3841240be5e59c63f735f3cffc5a4c8dd16f14b1/diff.py#L3413-L3447
  */
-export function interdiff(curr: DiffOutput | null, prev: DiffOutput | null): DiffOutput | null {
-    if (!curr || !prev)
-        return curr
+export function interdiff(
+    curr: DiffOutput | null,
+    prev: DiffOutput | null,
+): DiffOutput | null {
+    if (!curr || !prev) return curr;
 
-    const rows: DiffRow[] = []
+    const rows: DiffRow[] = [];
     const addMatching = (c: DiffRow, p: DiffRow) => {
         if (c.key === p.key) {
-            rows.push(c)
+            rows.push(c);
         } else {
             rows.push({
                 key: c.key,
                 base: c.base,
                 current: c.current,
                 previous: p.current,
-            })
+            });
         }
-    }
+    };
 
     const addUnaligned = (cs: DiffRow[], ps: DiffRow[]) => {
-        if (!cs.length && !ps.length)
-            return
-        const ckeys = cs.map(c => c.key)
-        const pkeys = ps.map(p => p.key)
-        let ci = 0
-        let pi = 0
+        if (!cs.length && !ps.length) return;
+        const ckeys = cs.map((c) => c.key);
+        const pkeys = ps.map((p) => p.key);
+        let ci = 0;
+        let pi = 0;
         // Array.from to silence an error about "Type 'IterableIterator<...>'
         // can only be iterated through when using the '--downlevelIteration'
         // flag or with a '--target' of 'es2015' or higher" -- changing
         // tsconfig compilerOptions.target does not seem to work for me.
         for (const [c0, c1, p0, p1] of Array.from(myersDiff(ckeys, pkeys))) {
             if (c0 - ci !== p0 - pi) {
-                throw new Error("bad myers-diff range")
+                throw new Error("bad myers-diff range");
             }
-            while (ci !== c0)
-                addMatching(cs[ci++], ps[pi++])
+            while (ci !== c0) addMatching(cs[ci++], ps[pi++]);
             while (ci !== c1) {
-                const c = cs[ci++]
+                const c = cs[ci++];
                 rows.push({
                     key: c.key,
                     current: c.current,
-                })
+                });
             }
             while (pi !== p1) {
-                const p = ps[pi++]
+                const p = ps[pi++];
                 rows.push({
                     key: p.key,
                     previous: p.current,
-                })
+                });
             }
         }
         if (cs.length - ci !== ps.length - pi) {
-            throw new Error("bad myers-diff range")
+            throw new Error("bad myers-diff range");
         }
-        while (ci !== cs.length)
-            addMatching(cs[ci++], ps[pi++])
-    }
+        while (ci !== cs.length) addMatching(cs[ci++], ps[pi++]);
+    };
 
-    const currChunks = chunkDiffLines(curr.rows)
-    const prevChunks = chunkDiffLines(prev.rows)
+    const currChunks = chunkDiffLines(curr.rows);
+    const prevChunks = chunkDiffLines(prev.rows);
     if (currChunks.chunks.length !== prevChunks.chunks.length) {
         // This should logically never happen, since the two diffs are based on
         // the same target.
-        console.warn("Diff base changed size between two diffs?", curr, prev)
-        return curr
+        console.warn("Diff base changed size between two diffs?", curr, prev);
+        return curr;
     }
     for (let i = 0; i < currChunks.chunks.length; i++) {
-        const c = currChunks.chunks[i]
-        const p = prevChunks.chunks[i]
-        addUnaligned(c.unaligned, p.unaligned)
-        addMatching(c.aligned, p.aligned)
+        const c = currChunks.chunks[i];
+        const p = prevChunks.chunks[i];
+        addUnaligned(c.unaligned, p.unaligned);
+        addMatching(c.aligned, p.aligned);
     }
-    addUnaligned(currChunks.lastUnaligned, prevChunks.lastUnaligned)
+    addUnaligned(currChunks.lastUnaligned, prevChunks.lastUnaligned);
 
     return {
         arch_str: curr.arch_str,
@@ -104,5 +106,5 @@ export function interdiff(curr: DiffOutput | null, prev: DiffOutput | null): Dif
         max_score: curr.max_score,
         header: curr.header,
         rows: rows,
-    }
+    };
 }
diff --git a/frontend/src/lib/oauth.ts b/frontend/src/lib/oauth.ts
index 8993dd3aa..f72892f92 100644
--- a/frontend/src/lib/oauth.ts
+++ b/frontend/src/lib/oauth.ts
@@ -1,30 +1,35 @@
-import { ResponseError } from "./api"
+import { ResponseError } from "./api";
 
-const GITHUB_CLIENT_ID = process.env.NEXT_PUBLIC_GITHUB_CLIENT_ID
+const GITHUB_CLIENT_ID = process.env.NEXT_PUBLIC_GITHUB_CLIENT_ID;
 
 export function isGitHubLoginSupported(): boolean {
-    return !!GITHUB_CLIENT_ID
+    return !!GITHUB_CLIENT_ID;
 }
 
 // https://docs.github.com/en/developers/apps/building-oauth-apps/scopes-for-oauth-apps
 export function showGitHubLoginWindow(scope: string) {
-    const url = `https://github.com/login/oauth/authorize?client_id=${GITHUB_CLIENT_ID}&scope=${encodeURIComponent(scope)}`
-    window.location.href = url
+    const url = `https://github.com/login/oauth/authorize?client_id=${GITHUB_CLIENT_ID}&scope=${encodeURIComponent(scope)}`;
+    window.location.href = url;
 }
 
-export async function requestMissingScopes<T>(makeRequest: () => Promise<T>): Promise<T> {
+export async function requestMissingScopes<T>(
+    makeRequest: () => Promise<T>,
+): Promise<T> {
     try {
-        return await makeRequest()
+        return await makeRequest();
     } catch (error) {
-        if (error instanceof ResponseError && error.json.kind === "MissingOAuthScopeException") {
-            const scope = error.json.detail
+        if (
+            error instanceof ResponseError &&
+            error.json.kind === "MissingOAuthScopeException"
+        ) {
+            const scope = error.json.detail;
 
-            console.warn("Missing scopes", scope)
-            showGitHubLoginWindow(scope)
+            console.warn("Missing scopes", scope);
+            showGitHubLoginWindow(scope);
 
-            throw new Error("Accept permissions and retry")
+            throw new Error("Accept permissions and retry");
         } else {
-            throw error
+            throw error;
         }
     }
 }
diff --git a/frontend/src/lib/objdiff.ts b/frontend/src/lib/objdiff.ts
index 5555ae25d..967da2de8 100644
--- a/frontend/src/lib/objdiff.ts
+++ b/frontend/src/lib/objdiff.ts
@@ -1,16 +1,18 @@
-import { runDiff } from "objdiff-wasm"
+import { runDiff } from "objdiff-wasm";
 
-import type { Compilation } from "./api/types"
+import type { Compilation } from "./api/types";
 
 function base64ToBytes(base64: string) {
-    const binString = atob(base64)
-    return Uint8Array.from(binString, m => m.codePointAt(0))
+    const binString = atob(base64);
+    return Uint8Array.from(binString, (m) => m.codePointAt(0));
 }
 
-export async function runObjdiff(compilation: Compilation): Promise<Compilation> {
-    const leftObject = base64ToBytes(compilation.left_object)
-    const rightObject = base64ToBytes(compilation.right_object)
-    const output = await runDiff(leftObject, rightObject)
-    compilation.objdiff_output = output
-    return compilation
+export async function runObjdiff(
+    compilation: Compilation,
+): Promise<Compilation> {
+    const leftObject = base64ToBytes(compilation.left_object);
+    const rightObject = base64ToBytes(compilation.right_object);
+    const output = await runDiff(leftObject, rightObject);
+    compilation.objdiff_output = output;
+    return compilation;
 }
diff --git a/frontend/src/lib/settings.ts b/frontend/src/lib/settings.ts
index 6657e9232..938bb0ef5 100644
--- a/frontend/src/lib/settings.ts
+++ b/frontend/src/lib/settings.ts
@@ -1,58 +1,66 @@
-import createPersistedState from "use-persisted-state"
+import createPersistedState from "use-persisted-state";
 
-import type { Theme } from "@/components/ThemePicker"
+import type { Theme } from "@/components/ThemePicker";
 
-import type { ColorScheme } from "./codemirror/color-scheme"
+import type { ColorScheme } from "./codemirror/color-scheme";
 
-const theme = createPersistedState<Theme>("theme")
-const autoRecompile = createPersistedState<boolean>("autoRecompile")
-const autoRecompileDelay = createPersistedState<number>("autoRecompileDelay")
-const codeFontSize = createPersistedState<number>("codeFontSize")
-const monospaceFont = createPersistedState<string | undefined>("monospaceFont")
-const codeLineHeight = createPersistedState<number>("codeLineHeight")
-const codeColorScheme = createPersistedState<ColorScheme>("codeColorScheme")
-const languageServerEnabled = createPersistedState<boolean>("languageServerEnabled")
-const matchProgressBarEnabled = createPersistedState<boolean>("matchProgressBarEnabled")
-const vimModeEnabled = createPersistedState<boolean>("vimModeEnabled")
-const threeWayDiffBase = createPersistedState<ThreeWayDiffBase>("threeWayDiffBase")
-const objdiffClientEnabled = createPersistedState<boolean>("objdiffClientEnabled")
+const theme = createPersistedState<Theme>("theme");
+const autoRecompile = createPersistedState<boolean>("autoRecompile");
+const autoRecompileDelay = createPersistedState<number>("autoRecompileDelay");
+const codeFontSize = createPersistedState<number>("codeFontSize");
+const monospaceFont = createPersistedState<string | undefined>("monospaceFont");
+const codeLineHeight = createPersistedState<number>("codeLineHeight");
+const codeColorScheme = createPersistedState<ColorScheme>("codeColorScheme");
+const languageServerEnabled = createPersistedState<boolean>(
+    "languageServerEnabled",
+);
+const matchProgressBarEnabled = createPersistedState<boolean>(
+    "matchProgressBarEnabled",
+);
+const vimModeEnabled = createPersistedState<boolean>("vimModeEnabled");
+const threeWayDiffBase =
+    createPersistedState<ThreeWayDiffBase>("threeWayDiffBase");
+const objdiffClientEnabled = createPersistedState<boolean>(
+    "objdiffClientEnabled",
+);
 
 export enum ThreeWayDiffBase {
     SAVED = "saved",
     PREV = "prev",
 }
 
-export const useTheme = () => theme("auto")
-export const useAutoRecompileSetting = () => autoRecompile(true)
-export const useAutoRecompileDelaySetting = () => autoRecompileDelay(500)
-export const useCodeFontSize = () => codeFontSize(11)
-export const useMonospaceFont = () => monospaceFont(undefined)
-export const useCodeLineHeight = () => codeLineHeight(1.5)
-export const useCodeColorScheme = () => codeColorScheme("Frog Dark")
-export const useLanguageServerEnabled = () => languageServerEnabled(false)
-export const useMatchProgressBarEnabled = () => matchProgressBarEnabled(true)
-export const useVimModeEnabled = () => vimModeEnabled(false)
-export const useThreeWayDiffBase = () => threeWayDiffBase(ThreeWayDiffBase.SAVED)
-export const useObjdiffClientEnabled = () => objdiffClientEnabled(false)
+export const useTheme = () => theme("auto");
+export const useAutoRecompileSetting = () => autoRecompile(true);
+export const useAutoRecompileDelaySetting = () => autoRecompileDelay(500);
+export const useCodeFontSize = () => codeFontSize(11);
+export const useMonospaceFont = () => monospaceFont(undefined);
+export const useCodeLineHeight = () => codeLineHeight(1.5);
+export const useCodeColorScheme = () => codeColorScheme("Frog Dark");
+export const useLanguageServerEnabled = () => languageServerEnabled(false);
+export const useMatchProgressBarEnabled = () => matchProgressBarEnabled(true);
+export const useVimModeEnabled = () => vimModeEnabled(false);
+export const useThreeWayDiffBase = () =>
+    threeWayDiffBase(ThreeWayDiffBase.SAVED);
+export const useObjdiffClientEnabled = () => objdiffClientEnabled(false);
 
 export function useIsSiteThemeDark() {
-    const [theme] = useTheme()
+    const [theme] = useTheme();
 
     switch (theme) {
-    case "dark":
-        return true
-    case "light":
-        return false
-    case "auto":
-        return isPrefersColorSchemeDark()
+        case "dark":
+            return true;
+        case "light":
+            return false;
+        case "auto":
+            return isPrefersColorSchemeDark();
     }
 }
 
 export function isPrefersColorSchemeDark() {
     // Default to dark theme on server
     if (typeof window === "undefined") {
-        return true
+        return true;
     }
 
-    return !window.matchMedia("(prefers-color-scheme: light)").matches
+    return !window.matchMedia("(prefers-color-scheme: light)").matches;
 }
diff --git a/frontend/src/lib/title.ts b/frontend/src/lib/title.ts
index 558cf1f8d..57e5e5e25 100644
--- a/frontend/src/lib/title.ts
+++ b/frontend/src/lib/title.ts
@@ -1,6 +1,3 @@
 export function joinTitles(...breadcrumbs: string[]) {
-    return [
-        ...breadcrumbs,
-        "decomp.me",
-    ].filter(Boolean).join(" | ")
+    return [...breadcrumbs, "decomp.me"].filter(Boolean).join(" | ");
 }
diff --git a/frontend/src/misc_types.d.ts b/frontend/src/misc_types.d.ts
index 80587d3a9..fbba7310b 100644
--- a/frontend/src/misc_types.d.ts
+++ b/frontend/src/misc_types.d.ts
@@ -1,27 +1,27 @@
 declare module "is-dark-color" {
     interface isDarkColorOptions {
-        override: { [hex: string]: boolean }
+        override: { [hex: string]: boolean };
     }
 
     export default function isDarkColor(
         hexColor: string,
-        options?: isDarkColorOptions
-    ): boolean
-  }
+        options?: isDarkColorOptions,
+    ): boolean;
+}
 
 declare module "use-persisted-state" {
     function createPersistedState<S>(
         key: string,
-        storage?: Storage
+        storage?: Storage,
     ): (
-        initialState: S | (() => S)
+        initialState: S | (() => S),
     ) => [S, React.Dispatch<React.SetStateAction<S>>];
 
     function createPersistedState<S = undefined>(
         key: string,
-        storage?: Storage
+        storage?: Storage,
     ): (
-        initialState: S | undefined
+        initialState: S | undefined,
     ) => [S | undefined, React.Dispatch<React.SetStateAction<S>>];
 
     export = createPersistedState;
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 30e5627d7..967927863 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,5 +1,5 @@
-const plugin = require("tailwindcss/plugin")
-const radixColors = require("@radix-ui/colors")
+const plugin = require("tailwindcss/plugin");
+const radixColors = require("@radix-ui/colors");
 
 // Colors to use from Radix UI
 const COLOR_NAME_MAP = {
@@ -7,52 +7,47 @@ const COLOR_NAME_MAP = {
     purple: "purple",
     red: "red",
     blue: "blue",
-}
+};
 
 // Convert color from `hsl(h, s, l)` to `h s l` for Tailwind
 function extractHslComponents(color) {
     if (!color.startsWith("hsl(")) {
-        console.warn(`color ${color} is not in hsl format`)
+        console.warn(`color ${color} is not in hsl format`);
     }
 
-    return color
-        .replace(/,/g, "")
-        .replace("hsl(", "")
-        .replace(")", "")
+    return color.replace(/,/g, "").replace("hsl(", "").replace(")", "");
 }
 
 function makeTailwindColor(colorName) {
-    const obj = {}
+    const obj = {};
 
     for (let i = 1; i <= 12; i++) {
-        const key = `${colorName}${i}`
-        obj[i] = `hsl(var(--color-${key}) / <alpha-value>)`
+        const key = `${colorName}${i}`;
+        obj[i] = `hsl(var(--color-${key}) / <alpha-value>)`;
     }
 
-    return obj
+    return obj;
 }
 
 function makeCssVariables(suffix = "") {
     return Object.keys(COLOR_NAME_MAP).reduce((acc, unmappedColorName) => {
-        const colorName = COLOR_NAME_MAP[unmappedColorName]
-        const colors = radixColors[colorName + suffix]
+        const colorName = COLOR_NAME_MAP[unmappedColorName];
+        const colors = radixColors[colorName + suffix];
 
         for (let i = 1; i <= 12; i++) {
-            const key = `${colorName}${i}`
-            const color = extractHslComponents(colors[key])
-            acc[`--color-${key}`] = color
+            const key = `${colorName}${i}`;
+            const color = extractHslComponents(colors[key]);
+            acc[`--color-${key}`] = color;
         }
 
-        return acc
-    }, {})
+        return acc;
+    }, {});
 }
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
     darkMode: "class",
-    content: [
-        "./src/**/*.{js,ts,jsx,tsx}",
-    ],
+    content: ["./src/**/*.{js,ts,jsx,tsx}"],
     theme: {
         extend: {
             fontFamily: {
@@ -66,9 +61,9 @@ module.exports = {
 
             // Make colors from Radix UI available
             ...Object.keys(COLOR_NAME_MAP).reduce((acc, unmappedColorName) => {
-                const radixColor = COLOR_NAME_MAP[unmappedColorName]
-                acc[unmappedColorName] = makeTailwindColor(radixColor)
-                return acc
+                const radixColor = COLOR_NAME_MAP[unmappedColorName];
+                acc[unmappedColorName] = makeTailwindColor(radixColor);
+                return acc;
             }, {}),
         },
     },
@@ -78,7 +73,7 @@ module.exports = {
             addBase({
                 ":root": makeCssVariables(),
                 ".dark": makeCssVariables("Dark"),
-            })
+            });
         }),
     ],
-}
+};