From 55d42d86cf947c038f798671403a6779a576dbfe Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 12 Jun 2026 13:23:15 +0200
Subject: [PATCH 01/23] refactor: solid account settings (@fehmer)

---
 frontend/src/index.html                       |  3 +-
 frontend/src/ts/components/mount.tsx          |  3 +-
 .../account-settings/AccountSettingsPage.tsx  | 55 +++++++++++++++++++
 frontend/src/ts/states/account-settings.ts    | 14 +++++
 4 files changed, 73 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/ts/components/pages/account-settings/AccountSettingsPage.tsx

diff --git a/frontend/src/index.html b/frontend/src/index.html
index da677825157e..9fbf5ba6ab05 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -33,7 +33,8 @@
         </div>
         <load src="html/pages/loading.html" />
 
-        <div class="page pageAbout hidden full-width" id="pageAbout">
+        <!-- TODO revert-->
+        <div class="page pageAbout hidden" id="pageAbout">
           <mount data-component="aboutpage"></mount>
         </div>
 
diff --git a/frontend/src/ts/components/mount.tsx b/frontend/src/ts/components/mount.tsx
index be7e5ed6e58b..c48fa86b8a10 100644
--- a/frontend/src/ts/components/mount.tsx
+++ b/frontend/src/ts/components/mount.tsx
@@ -12,6 +12,7 @@ import { Header } from "./layout/header/Header";
 import { Overlays } from "./layout/overlays/Overlays";
 import { Modals } from "./modals/Modals";
 import { AboutPage } from "./pages/AboutPage";
+import { AccountSettingsPage } from "./pages/account-settings/AccountSettingsPage";
 import { AccountPage } from "./pages/account/AccountPage";
 import { MyProfile } from "./pages/account/MyProfile";
 import { LeaderboardPage } from "./pages/leaderboard/LeaderboardPage";
@@ -25,7 +26,7 @@ import { TestModesNotice } from "./test/modes-notice/TestModesNotice";
 
 const components: Record<string, () => JSXElement> = {
   footer: () => <Footer />,
-  aboutpage: () => <AboutPage />,
+  aboutpage: () => <AccountSettingsPage />,
   settingspage: () => <SettingsPage />,
   accountpage: () => <AccountPage />,
   loginpage: () => <LoginPage />,
diff --git a/frontend/src/ts/components/pages/account-settings/AccountSettingsPage.tsx b/frontend/src/ts/components/pages/account-settings/AccountSettingsPage.tsx
new file mode 100644
index 000000000000..5a58e09573b0
--- /dev/null
+++ b/frontend/src/ts/components/pages/account-settings/AccountSettingsPage.tsx
@@ -0,0 +1,55 @@
+import { For, JSX } from "solid-js";
+
+import {
+  AccountSettingsTab,
+  accountSettingsTabs,
+  getCurrentTab,
+  setCurrentTab,
+} from "../../../states/account-settings";
+import { Button } from "../../common/Button";
+
+const tabContent: Record<AccountSettingsTab, JSX.Element> = {
+  account: <Account />,
+  authentication: <div>t.b.d</div>,
+  blockedUsers: <div>t.b.d</div>,
+  apeKeys: <div>t.b.d</div>,
+  dangerZone: <div>t.b.d</div>,
+};
+
+export function AccountSettingsPage() {
+  return (
+    <div>
+      <div class="content-grid flex flex-col gap-8 md:flex-row">
+        <div class="w-full shrink-0 md:w-60 2xl:w-75 bg-sub-alt">
+          <Sidebar />
+        </div>
+        <div class="flex w-full flex-1 flex-col gap-8">
+          {tabContent[getCurrentTab()]}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Sidebar() {
+  return (
+    <div class="flex flex-col md:items-start gap-4 p-4">
+      <For each={Object.entries(accountSettingsTabs)}>
+        {([key, tab]) => (
+          <Button
+            text={tab.text}
+            variant="text"
+            fa={{ icon: tab.icon }}
+            active={getCurrentTab() === key}
+            class="[--themable-button-active:var(--themable-button-text)]"
+            onClick={() => setCurrentTab(key as AccountSettingsTab)}
+          />
+        )}
+      </For>
+    </div>
+  );
+}
+
+function Account() {
+  return <div>account</div>;
+}
diff --git a/frontend/src/ts/states/account-settings.ts b/frontend/src/ts/states/account-settings.ts
index ad24dbe7eac0..67603929ee73 100644
--- a/frontend/src/ts/states/account-settings.ts
+++ b/frontend/src/ts/states/account-settings.ts
@@ -1,5 +1,19 @@
 import { createSignal } from "solid-js";
+import { FaIcon } from "../types/font-awesome";
 
 export const [getLastGeneratedApeKey, setLastGeneratedApeKey] = createSignal<
   string | undefined
 >(undefined);
+
+export const accountSettingsTabs = {
+  account: { text: "account", icon: "fa-user" },
+  authentication: { text: "authentication", icon: "fa-key" },
+  blockedUsers: { text: "blocked users", icon: "fa-user-shield" },
+  apeKeys: { text: "ape keys", icon: "fa-code" },
+  dangerZone: { text: "danger zone", icon: "fa-exclamation-triangle" },
+} as const satisfies Record<string, { icon: FaIcon; text: string }>;
+
+export type AccountSettingsTab = keyof typeof accountSettingsTabs;
+
+export const [getCurrentTab, setCurrentTab] =
+  createSignal<AccountSettingsTab>("account");

From abcbbcf1fc69045dee1ca96c1fb5c3efe6d69987 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 12 Jun 2026 14:52:42 +0200
Subject: [PATCH 02/23] account tab

---
 .../account-settings/AccountSettingsPage.tsx  |  11 +-
 .../pages/account-settings/AccountTab.tsx     | 155 ++++++++++++++++++
 .../pages/account-settings/utils.tsx          |  44 +++++
 3 files changed, 203 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/ts/components/pages/account-settings/AccountTab.tsx
 create mode 100644 frontend/src/ts/components/pages/account-settings/utils.tsx

diff --git a/frontend/src/ts/components/pages/account-settings/AccountSettingsPage.tsx b/frontend/src/ts/components/pages/account-settings/AccountSettingsPage.tsx
index 5a58e09573b0..3e8ab3528a3d 100644
--- a/frontend/src/ts/components/pages/account-settings/AccountSettingsPage.tsx
+++ b/frontend/src/ts/components/pages/account-settings/AccountSettingsPage.tsx
@@ -7,9 +7,10 @@ import {
   setCurrentTab,
 } from "../../../states/account-settings";
 import { Button } from "../../common/Button";
+import { AccountTab } from "./AccountTab";
 
 const tabContent: Record<AccountSettingsTab, JSX.Element> = {
-  account: <Account />,
+  account: <AccountTab />,
   authentication: <div>t.b.d</div>,
   blockedUsers: <div>t.b.d</div>,
   apeKeys: <div>t.b.d</div>,
@@ -20,7 +21,7 @@ export function AccountSettingsPage() {
   return (
     <div>
       <div class="content-grid flex flex-col gap-8 md:flex-row">
-        <div class="w-full shrink-0 md:w-60 2xl:w-75 bg-sub-alt">
+        <div class="w-full shrink-0 md:w-60 2xl:w-75">
           <Sidebar />
         </div>
         <div class="flex w-full flex-1 flex-col gap-8">
@@ -33,7 +34,7 @@ export function AccountSettingsPage() {
 
 function Sidebar() {
   return (
-    <div class="flex flex-col md:items-start gap-4 p-4">
+    <div class="flex flex-col md:items-start gap-4 p-4 bg-sub-alt rounded-double">
       <For each={Object.entries(accountSettingsTabs)}>
         {([key, tab]) => (
           <Button
@@ -49,7 +50,3 @@ function Sidebar() {
     </div>
   );
 }
-
-function Account() {
-  return <div>account</div>;
-}
diff --git a/frontend/src/ts/components/pages/account-settings/AccountTab.tsx b/frontend/src/ts/components/pages/account-settings/AccountTab.tsx
new file mode 100644
index 000000000000..0fe20a7ab563
--- /dev/null
+++ b/frontend/src/ts/components/pages/account-settings/AccountTab.tsx
@@ -0,0 +1,155 @@
+import { Show } from "solid-js";
+
+import Ape from "../../../ape";
+import * as StreakHourOffsetModal from "../../../modals/streak-hour-offset";
+import { showLoaderBar } from "../../../states/loader-bar";
+import { showErrorNotification } from "../../../states/notifications";
+import { getSnapshot } from "../../../states/snapshot";
+import { Fa } from "../../common/Fa";
+import {
+  showOptOutOfLeaderboardsModal,
+  showResetPersonalBestsModal,
+} from "../../modals/account-settings/ReauthConfirmModals";
+import { showUpdateNameModal } from "../../modals/account-settings/UpdateNameModal";
+import { Section } from "./utils";
+
+export function AccountTab() {
+  return (
+    <>
+      <Show
+        when={getSnapshot()?.discordId !== undefined}
+        fallback={<DiscordNotConnected />}
+      >
+        <DiscordConnected />
+      </Show>
+
+      <UpdateAccountName />
+      <UpdateStreakOffset />
+      <OptOutLeaderboard />
+      <ResetPersonalBests />
+    </>
+  );
+}
+
+function DiscordNotConnected() {
+  return (
+    <Section
+      title="discord integration"
+      fa={{ variant: "brand", icon: "fa-discord" }}
+      text=<>
+        When you connect your monkeytype account to your Discord account, you
+        will be automatically assigned a new role every time you achieve a new
+        personal best in a 60 second test. If you link your accounts before
+        joining the Discord server, the bot <i>will not</i> give you a role.
+      </>
+      button={{
+        text: "link",
+        onClick: () => {
+          showLoaderBar();
+          void Ape.users.getDiscordOAuth().then((response) => {
+            if (response.status === 200) {
+              window.open(response.body.data.url, "_self");
+            } else {
+              showErrorNotification(
+                `Failed to get OAuth from discord: ${response.body.message}`,
+              );
+            }
+          });
+        },
+      }}
+    />
+  );
+}
+
+function DiscordConnected() {
+  //TODO
+  return (
+    <Section
+      title="discord integration"
+      fa={{ variant: "brand", icon: "fa-discord" }}
+    />
+  );
+}
+
+function UpdateAccountName() {
+  return (
+    <Section
+      title="update account name"
+      fa={{ icon: "fa-user" }}
+      text=<>
+        Change the name of your account.{" "}
+        <span class="text-error">You can only do this once every 30 days.</span>
+      </>
+      button={{
+        text: "update name",
+        onClick: () => showUpdateNameModal(),
+      }}
+    />
+  );
+}
+
+function UpdateStreakOffset() {
+  return (
+    <Section
+      title="set streak hour offset"
+      fa={{ icon: "fa-clock" }}
+      text=<>
+        Streaks reset at midnight UTC by default. If this is not convenient for
+        you (for example if it means that streaks reset in the middle of the
+        day), you can change the hour offset here.{" "}
+        <span class="text-error">You can only do this once!</span>
+      </>
+      button={{
+        text: "update hour offset",
+        onClick: () => StreakHourOffsetModal.show(),
+      }}
+      disabled={getSnapshot()?.streakHourOffset !== undefined}
+      disabledText=<>
+        <Fa icon="fa-exclamation-triangle" /> You have already set your streak
+        hour offset to{" "}
+        {`${(getSnapshot()?.streakHourOffset ?? 0) > 0 ? "+" : ""} ${getSnapshot()?.streakHourOffset}`}
+        .
+      </>
+    />
+  );
+}
+
+function OptOutLeaderboard() {
+  return (
+    <Section
+      title="opt out of leaderboards"
+      fa={{ icon: "fa-crown" }}
+      text=<>
+        Use this if you frequently trigger the anticheat (for example if using
+        stenography) to opt out of leaderboards.{" "}
+        <span class="text-error">You can&apos;t undo this action!</span>
+      </>
+      button={{
+        text: "opt out",
+        onClick: () => showOptOutOfLeaderboardsModal(),
+      }}
+      disabled={getSnapshot()?.lbOptOut === true}
+      disabledText=<>
+        <Fa icon="fa-exclamation-triangle" />
+        You have opted out of leaderboards.
+      </>
+    />
+  );
+}
+
+function ResetPersonalBests() {
+  return (
+    <Section
+      title="reset personal bests"
+      fa={{ icon: "fa-crown" }}
+      text=<>
+        Resets all your personal bests (but doesn&apos;t delete any tests from
+        your history). <span class="text-error">You can&apos;t undo this!</span>
+      </>
+      button={{
+        text: "reset personal bests",
+        onClick: () => showResetPersonalBestsModal(),
+      }}
+    />
+  );
+}
diff --git a/frontend/src/ts/components/pages/account-settings/utils.tsx b/frontend/src/ts/components/pages/account-settings/utils.tsx
new file mode 100644
index 000000000000..1c99cb9b7317
--- /dev/null
+++ b/frontend/src/ts/components/pages/account-settings/utils.tsx
@@ -0,0 +1,44 @@
+import { JSX, ParentProps, Show } from "solid-js";
+
+import { cn } from "../../../utils/cn";
+import { Button, ButtonProps } from "../../common/Button";
+import { FaProps } from "../../common/Fa";
+import { H3 } from "../../common/Headers";
+
+export function Section(
+  props: {
+    title: string;
+    fa: FaProps;
+    text?: JSX.Element;
+    button?: ButtonProps;
+  } & ParentProps &
+    (
+      | {
+          disabled: boolean;
+          disabledText: JSX.Element;
+        }
+      | {
+          disabled?: never;
+          disabledText?: never;
+        }
+    ),
+) {
+  return (
+    <div>
+      <H3 text={props.title} fa={props.fa} />
+
+      <Show
+        when={props.disabled === undefined || !props.disabled}
+        fallback={props.disabledText}
+      >
+        <Show when={props.text !== undefined}>
+          <p class="mb-4">{props.text}</p>
+        </Show>
+        <Show when={props.children}>{props.children}</Show>
+        <Show when={props.button}>
+          <Button {...props.button} class={cn("w-full", props.button?.class)} />
+        </Show>
+      </Show>
+    </div>
+  );
+}

From e2cf93f3be806f6e3fd18f75d14ba72fc6121195 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 12 Jun 2026 15:14:01 +0200
Subject: [PATCH 03/23] blocked users

---
 frontend/src/ts/components/mount.tsx              |  2 --
 .../account-settings/AccountSettingsPage.tsx      |  5 +++--
 .../{BlockedUsers.tsx => BlockedUsersTab.tsx}     | 15 ++++++++-------
 .../components/pages/account-settings/utils.tsx   |  2 +-
 4 files changed, 12 insertions(+), 12 deletions(-)
 rename frontend/src/ts/components/pages/account-settings/{BlockedUsers.tsx => BlockedUsersTab.tsx} (91%)

diff --git a/frontend/src/ts/components/mount.tsx b/frontend/src/ts/components/mount.tsx
index 05021ec64241..d0b63010fde3 100644
--- a/frontend/src/ts/components/mount.tsx
+++ b/frontend/src/ts/components/mount.tsx
@@ -12,7 +12,6 @@ import { Header } from "./layout/header/Header";
 import { Overlays } from "./layout/overlays/Overlays";
 import { Modals } from "./modals/Modals";
 import { AccountSettingsPage } from "./pages/account-settings/AccountSettingsPage";
-import { BlockedUsers } from "./pages/account-settings/BlockedUsers";
 import { AccountPage } from "./pages/account/AccountPage";
 import { MyProfile } from "./pages/account/MyProfile";
 import { FriendsPage } from "./pages/connections/FriendsPage";
@@ -46,7 +45,6 @@ const components: Record<string, () => JSXElement> = {
   commandlinehotkey: () => <CommandlineHotkey />,
   testmodesnotice: () => <TestModesNotice />,
   friendspage: () => <FriendsPage />,
-  blockedusers: () => <BlockedUsers />,
 };
 
 function mountToMountpoint(name: string, component: () => JSXElement): void {
diff --git a/frontend/src/ts/components/pages/account-settings/AccountSettingsPage.tsx b/frontend/src/ts/components/pages/account-settings/AccountSettingsPage.tsx
index 3e8ab3528a3d..6984d6573398 100644
--- a/frontend/src/ts/components/pages/account-settings/AccountSettingsPage.tsx
+++ b/frontend/src/ts/components/pages/account-settings/AccountSettingsPage.tsx
@@ -8,11 +8,12 @@ import {
 } from "../../../states/account-settings";
 import { Button } from "../../common/Button";
 import { AccountTab } from "./AccountTab";
+import { BlockedUsersTab } from "./BlockedUsersTab";
 
 const tabContent: Record<AccountSettingsTab, JSX.Element> = {
   account: <AccountTab />,
   authentication: <div>t.b.d</div>,
-  blockedUsers: <div>t.b.d</div>,
+  blockedUsers: <BlockedUsersTab />,
   apeKeys: <div>t.b.d</div>,
   dangerZone: <div>t.b.d</div>,
 };
@@ -34,7 +35,7 @@ export function AccountSettingsPage() {
 
 function Sidebar() {
   return (
-    <div class="flex flex-col md:items-start gap-4 p-4 bg-sub-alt rounded-double">
+    <div class="flex flex-col gap-4 rounded-double bg-sub-alt p-4 md:items-start">
       <For each={Object.entries(accountSettingsTabs)}>
         {([key, tab]) => (
           <Button
diff --git a/frontend/src/ts/components/pages/account-settings/BlockedUsers.tsx b/frontend/src/ts/components/pages/account-settings/BlockedUsersTab.tsx
similarity index 91%
rename from frontend/src/ts/components/pages/account-settings/BlockedUsers.tsx
rename to frontend/src/ts/components/pages/account-settings/BlockedUsersTab.tsx
index 8d56f3eff67d..dfec9ae74182 100644
--- a/frontend/src/ts/components/pages/account-settings/BlockedUsers.tsx
+++ b/frontend/src/ts/components/pages/account-settings/BlockedUsersTab.tsx
@@ -10,19 +10,20 @@ import {
 import { showSimpleModal } from "../../../states/simple-modal";
 import AsyncContent from "../../common/AsyncContent";
 import { Button } from "../../common/Button";
-import { H3 } from "../../common/Headers";
 import { User } from "../../common/User";
 import { DataTable, DataTableColumnDef } from "../../ui/table/DataTable";
+import { Section } from "./utils";
 
-export function BlockedUsers() {
+export function BlockedUsersTab() {
   const query = useBlockedConnectionsQuery();
   const columns = createMemo(getColumns);
 
   return (
-    <div>
-      <H3 text="blocked users" fa={{ icon: "fa-user-shield" }} />
-      <p>Blocked users cannot send you friend requests.</p>
-
+    <Section
+      title="blocked users"
+      fa={{ icon: "fa-user-shield" }}
+      text=<>Blocked users cannot send you friend requests.</>
+    >
       <AsyncContent collections={{ query }}>
         {({ queryData }) => (
           <Show
@@ -37,7 +38,7 @@ export function BlockedUsers() {
           </Show>
         )}
       </AsyncContent>
-    </div>
+    </Section>
   );
 }
 
diff --git a/frontend/src/ts/components/pages/account-settings/utils.tsx b/frontend/src/ts/components/pages/account-settings/utils.tsx
index 1c99cb9b7317..4b779328d62b 100644
--- a/frontend/src/ts/components/pages/account-settings/utils.tsx
+++ b/frontend/src/ts/components/pages/account-settings/utils.tsx
@@ -25,7 +25,7 @@ export function Section(
 ) {
   return (
     <div>
-      <H3 text={props.title} fa={props.fa} />
+      <H3 text={props.title} fa={{ ...{ fixedWidth: true }, ...props.fa }} />
 
       <Show
         when={props.disabled === undefined || !props.disabled}

From e07d49c5e145ed2d2356a9d1f15fad3b19d2b1a1 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 12 Jun 2026 18:14:07 +0200
Subject: [PATCH 04/23] authentication

---
 frontend/src/ts/auth.tsx                      |  62 ++++++++++-
 .../account-settings/AddPasswordAuthModal.tsx |   6 +-
 .../account-settings/ReauthConfirmModals.tsx  |   3 +-
 .../RemoveAuthMethodModal.tsx                 |   8 +-
 .../account-settings/UpdateNameModal.tsx      |   4 +-
 .../account-settings/AccountSettingsPage.tsx  |   3 +-
 .../account-settings/AuthenticationTab.tsx    | 101 ++++++++++++++++++
 .../pages/account-settings/utils.tsx          |  27 +++--
 frontend/src/ts/states/account-settings.ts    |   2 +-
 9 files changed, 191 insertions(+), 25 deletions(-)
 create mode 100644 frontend/src/ts/components/pages/account-settings/AuthenticationTab.tsx

diff --git a/frontend/src/ts/auth.tsx b/frontend/src/ts/auth.tsx
index 52b7231bd230..caf7fd68c3c1 100644
--- a/frontend/src/ts/auth.tsx
+++ b/frontend/src/ts/auth.tsx
@@ -14,6 +14,7 @@ import {
   User,
   User as UserType,
 } from "firebase/auth";
+import { createMemo } from "solid-js";
 import { z, ZodString } from "zod";
 
 import Ape from "./ape";
@@ -31,14 +32,17 @@ import {
   signInWithEmailAndPassword,
   signInWithPopup,
 } from "./firebase";
+import { createSignalWithSetters } from "./hooks/createSignalWithSetters";
+import { createEffectOn } from "./hooks/effects";
 import * as Sentry from "./sentry";
-import { isAuthenticated, setUserId } from "./states/core";
+import { getUserId, isAuthenticated, setUserId } from "./states/core";
 import { hideLoaderBar, showLoaderBar } from "./states/loader-bar";
 import {
   showErrorNotification,
   showNoticeNotification,
   showSuccessNotification,
 } from "./states/notifications";
+import { FaObject } from "./types/font-awesome";
 import { isDevEnvironment } from "./utils/env";
 import { createErrorMessage } from "./utils/error";
 import { typedKeys } from "./utils/misc";
@@ -47,6 +51,7 @@ import { OneOf } from "./utils/types";
 
 type AuthMethodInfo = {
   display: string;
+  fa: FaObject;
 } & OneOf<{
   provider: AuthProvider;
   providerId: string;
@@ -60,14 +65,17 @@ const authMethods = {
   password: {
     display: "Password",
     providerId: "password",
+    fa: { icon: "fa-lock" },
   },
   github: {
     display: "GitHub",
     provider: new GithubAuthProvider(),
+    fa: { variant: "brand", icon: "fa-github" },
   },
   google: {
     display: "Google",
     provider: new GoogleAuthProvider(),
+    fa: { variant: "brand", icon: "fa-google" },
   },
 } as const satisfies Record<string, AuthMethodInfo>;
 
@@ -98,6 +106,41 @@ type ReauthenticateOptions = {
   password?: string;
 };
 
+const [getAuthenticatedUserReactive, { updateAuthenticatedUser }] =
+  createSignalWithSetters<User | null>(null)({
+    updateAuthenticatedUser: (set) => {
+      const user = getAuthenticatedUser();
+      if (user === null) {
+        set(null);
+      } else {
+        set({ ...user });
+      }
+    },
+  });
+export { getAuthenticatedUser };
+
+createEffectOn(getUserId, () => {
+  updateAuthenticatedUser();
+});
+
+const authenticationMemos = Object.fromEntries(
+  typedKeys(authMethods).map((it) => {
+    const memo = createMemo(() => {
+      const providerId = getProviderId(it);
+
+      const user = getAuthenticatedUserReactive();
+      if (user === null) return undefined;
+      const result = {
+        isInUse: user.providerData.some((p) => p.providerId === providerId),
+        hasAdditionalAuthMethods: hasAdditionalAuthMethods(it),
+      };
+      console.log("### memo for ", providerId, "updated", result);
+      return result;
+    });
+    return [it, memo];
+  }),
+);
+
 export async function sendVerificationEmail(): Promise<void> {
   if (!isAuthAvailable()) {
     showErrorNotification("Authentication uninitialized", { durationMs: 3000 });
@@ -261,6 +304,7 @@ export async function addAuthProvider(authMethod: AuthMethod): Promise<void> {
     hideLoaderBar();
     showSuccessNotification(`${providerName} authentication added`);
     authEvent.dispatch({ type: "authConfigUpdated" });
+    updateAuthenticatedUser();
   } catch (error) {
     hideLoaderBar();
     showErrorNotification(`Failed to add ${providerName} authentication`, {
@@ -285,6 +329,7 @@ export async function removeAuthProvider(
   }
   try {
     await unlink(reauth.user, getProviderId(authMethod));
+    updateAuthenticatedUser();
   } catch (e) {
     const message = createErrorMessage(
       e,
@@ -392,6 +437,7 @@ export async function reauthenticate(
   }
 
   const authMethod = getPreferredAuthenticationMethod(options.excludeMethod);
+  console.log("### reauth with provider");
 
   try {
     if (authMethod === undefined) {
@@ -464,7 +510,7 @@ function getPreferredAuthenticationMethod(
   return undefined;
 }
 
-function isUsingAuthentication(authMethod: AuthMethod): boolean {
+export function isUsingAuthentication(authMethod: AuthMethod): boolean {
   const providerId = getProviderId(authMethod);
   return (
     getAuthenticatedUser()?.providerData.some(
@@ -473,6 +519,10 @@ function isUsingAuthentication(authMethod: AuthMethod): boolean {
   );
 }
 
+export function isUsingAuthenticationReactive(authMethod: AuthMethod): boolean {
+  return authenticationMemos[authMethod]?.()?.isInUse ?? false;
+}
+
 export function getPasswordSchema(): ZodString {
   return isDevEnvironment() ? z.string().min(6) : PasswordSchema;
 }
@@ -487,10 +537,18 @@ export function hasAdditionalAuthMethods(authMethod: AuthMethod) {
   );
 }
 
+export function hasAdditionalAuthMethodsReactive(authMethod: AuthMethod) {
+  return authenticationMemos[authMethod]?.()?.hasAdditionalAuthMethods ?? false;
+}
+
 export function getAuthMethodDisplay(authMethod: AuthMethod): string {
   return authMethods[authMethod].display;
 }
 
+export function getAuthMethodIcon(authMethod: AuthMethod): FaObject {
+  return authMethods[authMethod].fa;
+}
+
 function getProviderId(authMethod: AuthMethod): string {
   const info = authMethods[authMethod];
 
diff --git a/frontend/src/ts/components/modals/account-settings/AddPasswordAuthModal.tsx b/frontend/src/ts/components/modals/account-settings/AddPasswordAuthModal.tsx
index a9f4593392b5..fac58db1e911 100644
--- a/frontend/src/ts/components/modals/account-settings/AddPasswordAuthModal.tsx
+++ b/frontend/src/ts/components/modals/account-settings/AddPasswordAuthModal.tsx
@@ -7,8 +7,8 @@ import { getPasswordSchema, reauthenticate } from "../../../auth";
 import { showSimpleModal } from "../../../states/simple-modal";
 import { createErrorMessage } from "../../../utils/error";
 
-export function showAddPasswordAuthModal(options: {
-  callback: () => void;
+export function showAddPasswordAuthModal(options?: {
+  callback?: () => void;
 }): void {
   showSimpleModal({
     title: "Add password authentication",
@@ -90,7 +90,7 @@ export function showAddPasswordAuthModal(options: {
         };
       }
 
-      options.callback();
+      options?.callback?.();
 
       return {
         status: "success",
diff --git a/frontend/src/ts/components/modals/account-settings/ReauthConfirmModals.tsx b/frontend/src/ts/components/modals/account-settings/ReauthConfirmModals.tsx
index d3a5f7068058..287c0c6dd3c9 100644
--- a/frontend/src/ts/components/modals/account-settings/ReauthConfirmModals.tsx
+++ b/frontend/src/ts/components/modals/account-settings/ReauthConfirmModals.tsx
@@ -56,7 +56,8 @@ export function showOptOutOfLeaderboardsModal(): void {
         };
       }
 
-      reloadAfter(3);
+      //TODO needed?
+      //reloadAfter(3);
 
       return {
         status: "success",
diff --git a/frontend/src/ts/components/modals/account-settings/RemoveAuthMethodModal.tsx b/frontend/src/ts/components/modals/account-settings/RemoveAuthMethodModal.tsx
index 0485f003052f..8154314bdb30 100644
--- a/frontend/src/ts/components/modals/account-settings/RemoveAuthMethodModal.tsx
+++ b/frontend/src/ts/components/modals/account-settings/RemoveAuthMethodModal.tsx
@@ -11,11 +11,10 @@ import {
 import { isAuthenticated } from "../../../states/core";
 import { showNoticeNotification } from "../../../states/notifications";
 import { showSimpleModal } from "../../../states/simple-modal";
-import { reloadAfter } from "../../../utils/misc";
 
 export function showRemoveAuthMethodModal(options: {
   authMethod: AuthMethod;
-  callback: () => void;
+  callback?: () => void;
 }): void {
   if (!isAuthenticated()) return;
 
@@ -58,9 +57,10 @@ export function showRemoveAuthMethodModal(options: {
         return result;
       }
 
-      options.callback();
+      options.callback?.();
 
-      reloadAfter(3);
+      //TODO needed?
+      // reloadAfter(3);
       return result;
     },
   });
diff --git a/frontend/src/ts/components/modals/account-settings/UpdateNameModal.tsx b/frontend/src/ts/components/modals/account-settings/UpdateNameModal.tsx
index 9e503fb12473..919e272b3d0d 100644
--- a/frontend/src/ts/components/modals/account-settings/UpdateNameModal.tsx
+++ b/frontend/src/ts/components/modals/account-settings/UpdateNameModal.tsx
@@ -10,7 +10,6 @@ import {
 import * as DB from "../../../db";
 import { isAuthenticated } from "../../../states/core";
 import { showSimpleModal } from "../../../states/simple-modal";
-import { reloadAfter } from "../../../utils/misc";
 import { remoteValidation } from "../../../utils/remote-validation";
 
 export function showUpdateNameModal(): void {
@@ -72,7 +71,8 @@ export function showUpdateNameModal(): void {
       snapshot.name = newName;
       DB.setSnapshot(snapshot);
       if (snapshot.needsToChangeName) {
-        reloadAfter(2);
+        //TODO needed?
+        //reloadAfter(2);
       }
 
       return {
diff --git a/frontend/src/ts/components/pages/account-settings/AccountSettingsPage.tsx b/frontend/src/ts/components/pages/account-settings/AccountSettingsPage.tsx
index 6984d6573398..f2835aa905c9 100644
--- a/frontend/src/ts/components/pages/account-settings/AccountSettingsPage.tsx
+++ b/frontend/src/ts/components/pages/account-settings/AccountSettingsPage.tsx
@@ -8,11 +8,12 @@ import {
 } from "../../../states/account-settings";
 import { Button } from "../../common/Button";
 import { AccountTab } from "./AccountTab";
+import { AuthenticationTab } from "./AuthenticationTab";
 import { BlockedUsersTab } from "./BlockedUsersTab";
 
 const tabContent: Record<AccountSettingsTab, JSX.Element> = {
   account: <AccountTab />,
-  authentication: <div>t.b.d</div>,
+  authentication: <AuthenticationTab />,
   blockedUsers: <BlockedUsersTab />,
   apeKeys: <div>t.b.d</div>,
   dangerZone: <div>t.b.d</div>,
diff --git a/frontend/src/ts/components/pages/account-settings/AuthenticationTab.tsx b/frontend/src/ts/components/pages/account-settings/AuthenticationTab.tsx
new file mode 100644
index 000000000000..c2fd1c72edf1
--- /dev/null
+++ b/frontend/src/ts/components/pages/account-settings/AuthenticationTab.tsx
@@ -0,0 +1,101 @@
+import { Show } from "solid-js";
+
+import {
+  addAuthProvider,
+  AuthMethod,
+  getAuthMethodDisplay,
+  getAuthMethodIcon,
+  hasAdditionalAuthMethodsReactive,
+  isUsingAuthenticationReactive,
+} from "../../../auth";
+import { Button } from "../../common/Button";
+import { showAddPasswordAuthModal } from "../../modals/account-settings/AddPasswordAuthModal";
+import { showRemoveAuthMethodModal } from "../../modals/account-settings/RemoveAuthMethodModal";
+import { showUpdateEmailModal } from "../../modals/account-settings/UpdateEmailModal";
+import { showUpdatePasswordModal } from "../../modals/account-settings/UpdatePasswordModal";
+import { Section } from "./utils";
+
+export function AuthenticationTab() {
+  return (
+    <>
+      <PasswordAuthentication />
+      <ProviderAuthentication authMethod="google" />
+      <ProviderAuthentication authMethod="github" />
+    </>
+  );
+}
+
+function PasswordAuthentication() {
+  return (
+    <Section
+      title="password authentication settings"
+      fa={getAuthMethodIcon("password")}
+      text=<>Add password authentication, update your password or email.</>
+    >
+      <Show
+        when={isUsingAuthenticationReactive("password")}
+        fallback=<Button
+          text="add password authentication"
+          class="w-full"
+          onClick={() => showAddPasswordAuthModal()}
+        />
+      >
+        <UpdatePasswordAuthentication />
+      </Show>
+    </Section>
+  );
+}
+
+function UpdatePasswordAuthentication() {
+  return (
+    <div class="flex flex-col gap-2">
+      <Button
+        class="w-full"
+        text="update email"
+        onClick={() => showUpdateEmailModal()}
+      />
+      <Button
+        class="w-full"
+        text="update password"
+        onClick={() => showUpdatePasswordModal()}
+      />{" "}
+      <Show when={() => hasAdditionalAuthMethodsReactive("password")}>
+        <Button
+          class="w-full"
+          text="remove password authentication"
+          onClick={() => showRemoveAuthMethodModal({ authMethod: "password" })}
+        />
+      </Show>
+    </div>
+  );
+}
+
+function ProviderAuthentication(props: { authMethod: AuthMethod }) {
+  return (
+    <Section
+      title={`${getAuthMethodDisplay(props.authMethod)}`}
+      fa={getAuthMethodIcon(props.authMethod)}
+      text=<>
+        Add or remove {getAuthMethodDisplay(props.authMethod)} authentication.
+      </>
+    >
+      <Show
+        when={isUsingAuthenticationReactive(props.authMethod)}
+        fallback=<Button
+          class="w-full"
+          text={`add ${getAuthMethodDisplay(props.authMethod)} authentication`}
+          onClick={() => void addAuthProvider(props.authMethod)}
+        />
+      >
+        <Button
+          class="w-full"
+          text={`remove ${getAuthMethodDisplay(props.authMethod)} authentication`}
+          disabled={!hasAdditionalAuthMethodsReactive(props.authMethod)}
+          onClick={() =>
+            showRemoveAuthMethodModal({ authMethod: props.authMethod })
+          }
+        />
+      </Show>
+    </Section>
+  );
+}
diff --git a/frontend/src/ts/components/pages/account-settings/utils.tsx b/frontend/src/ts/components/pages/account-settings/utils.tsx
index 4b779328d62b..d055e44a538b 100644
--- a/frontend/src/ts/components/pages/account-settings/utils.tsx
+++ b/frontend/src/ts/components/pages/account-settings/utils.tsx
@@ -27,18 +27,23 @@ export function Section(
     <div>
       <H3 text={props.title} fa={{ ...{ fixedWidth: true }, ...props.fa }} />
 
-      <Show
-        when={props.disabled === undefined || !props.disabled}
-        fallback={props.disabledText}
-      >
-        <Show when={props.text !== undefined}>
-          <p class="mb-4">{props.text}</p>
+      <div class="lg:grid lg:grid-cols-2 lg:items-center">
+        <Show
+          when={props.disabled === undefined || !props.disabled}
+          fallback={props.disabledText}
+        >
+          <Show when={props.text !== undefined}>
+            <p class="mb-4">{props.text}</p>
+          </Show>
+          <Show when={props.children}>{props.children}</Show>
+          <Show when={props.button}>
+            <Button
+              {...props.button}
+              class={cn("w-full", props.button?.class)}
+            />
+          </Show>
         </Show>
-        <Show when={props.children}>{props.children}</Show>
-        <Show when={props.button}>
-          <Button {...props.button} class={cn("w-full", props.button?.class)} />
-        </Show>
-      </Show>
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/ts/states/account-settings.ts b/frontend/src/ts/states/account-settings.ts
index 67603929ee73..7d5f001d1ad5 100644
--- a/frontend/src/ts/states/account-settings.ts
+++ b/frontend/src/ts/states/account-settings.ts
@@ -16,4 +16,4 @@ export const accountSettingsTabs = {
 export type AccountSettingsTab = keyof typeof accountSettingsTabs;
 
 export const [getCurrentTab, setCurrentTab] =
-  createSignal<AccountSettingsTab>("account");
+  createSignal<AccountSettingsTab>("authentication");

From 9e719868546ab4e67f92c99d81dc4d21e4b2c2fa Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 12 Jun 2026 20:34:29 +0200
Subject: [PATCH 05/23] move add password provider to auth.tsx

---
 frontend/src/ts/auth.tsx                      | 79 ++++++++++++++++---
 .../account-settings/AddPasswordAuthModal.tsx | 44 +----------
 .../account-settings/AuthenticationTab.tsx    | 75 +++++++++++-------
 frontend/src/ts/pages/account-settings.ts     |  4 +-
 4 files changed, 120 insertions(+), 82 deletions(-)

diff --git a/frontend/src/ts/auth.tsx b/frontend/src/ts/auth.tsx
index caf7fd68c3c1..e27670b5505a 100644
--- a/frontend/src/ts/auth.tsx
+++ b/frontend/src/ts/auth.tsx
@@ -6,10 +6,12 @@ import {
   EmailAuthProvider,
   GithubAuthProvider,
   GoogleAuthProvider,
+  linkWithCredential,
   linkWithPopup,
   reauthenticateWithCredential,
   reauthenticateWithPopup,
   unlink,
+  updateEmail,
   updateProfile,
   User,
   User as UserType,
@@ -80,6 +82,7 @@ const authMethods = {
 } as const satisfies Record<string, AuthMethodInfo>;
 
 export type AuthMethod = keyof typeof authMethods;
+export type ProviderAuthMethod = Exclude<AuthMethod, "password">;
 
 export type AuthResult =
   | {
@@ -284,35 +287,89 @@ export async function signInWithProvider(
   return { success: true };
 }
 
-export async function addAuthProvider(authMethod: AuthMethod): Promise<void> {
+export async function addAuthProvider(
+  options:
+    | { authMethod: ProviderAuthMethod }
+    | {
+        authMethod: "password";
+        email: string;
+        password: string;
+      },
+): Promise<void> {
   if (!isAuthAvailable()) {
     showErrorNotification("Authentication uninitialized", { durationMs: 3000 });
     return;
   }
-  const provider = getAuthProvider(authMethod);
-  if (provider === undefined) {
-    showErrorNotification(`Authentication ${authMethod} is missing a provider`);
-    return;
-  }
-  const providerName = getAuthMethodDisplay(authMethod);
+  const authMethod = options.authMethod;
 
   showLoaderBar();
   const user = getAuthenticatedUser();
+  const providerName = getAuthMethodDisplay(authMethod);
+
   if (!user) return;
   try {
-    await linkWithPopup(user, provider);
-    hideLoaderBar();
+    if (authMethod === "password") {
+      await addPasswordProvider(user, options);
+    } else {
+      await addPopupProvider(user, options);
+    }
+
     showSuccessNotification(`${providerName} authentication added`);
-    authEvent.dispatch({ type: "authConfigUpdated" });
     updateAuthenticatedUser();
   } catch (error) {
-    hideLoaderBar();
     showErrorNotification(`Failed to add ${providerName} authentication`, {
       error,
     });
+  } finally {
+    hideLoaderBar();
+  }
+}
+
+async function addPasswordProvider(
+  user: User,
+  options: {
+    email: string;
+    password: string;
+  },
+) {
+  const reauth = await reauthenticate({ password: options.password });
+  if (reauth.status !== "success") {
+    throw new Error(reauth.message);
+  }
+  const credential = EmailAuthProvider.credential(
+    options.email,
+    options.password,
+  );
+  await linkWithCredential(reauth.user, credential);
+  await updateEmail(user, options.email);
+  const response = await Ape.users.updateEmail({
+    body: {
+      newEmail: options.email,
+      previousEmail: reauth.user.email as string,
+    },
+  });
+  if (response.status !== 200) {
+    throw new Error(
+      "Password authentication added but updating the database email failed. This shouldn't happen, please contact support. Error",
+    );
   }
 }
 
+async function addPopupProvider(
+  user: User,
+  options: { authMethod: ProviderAuthMethod },
+) {
+  const authMethod = options.authMethod;
+  const provider = getAuthProvider(authMethod);
+  if (provider === undefined) {
+    showErrorNotification(`Authentication ${authMethod} is missing a provider`);
+    return;
+  }
+
+  await linkWithPopup(user, provider);
+  authEvent.dispatch({ type: "authConfigUpdated" });
+}
+
 export async function removeAuthProvider(
   authMethod: AuthMethod,
   options?: { password?: string },
diff --git a/frontend/src/ts/components/modals/account-settings/AddPasswordAuthModal.tsx b/frontend/src/ts/components/modals/account-settings/AddPasswordAuthModal.tsx
index fac58db1e911..8856cd0beb00 100644
--- a/frontend/src/ts/components/modals/account-settings/AddPasswordAuthModal.tsx
+++ b/frontend/src/ts/components/modals/account-settings/AddPasswordAuthModal.tsx
@@ -1,11 +1,8 @@
 import { UserEmailSchema } from "@monkeytype/schemas/users";
-import { EmailAuthProvider, linkWithCredential } from "firebase/auth";
 import { z } from "zod";
 
-import Ape from "../../../ape";
-import { getPasswordSchema, reauthenticate } from "../../../auth";
+import { addAuthProvider, getPasswordSchema } from "../../../auth";
 import { showSimpleModal } from "../../../states/simple-modal";
-import { createErrorMessage } from "../../../utils/error";
 
 export function showAddPasswordAuthModal(options?: {
   callback?: () => void;
@@ -53,48 +50,13 @@ export function showAddPasswordAuthModal(options?: {
         };
       }
 
-      const reauth = await reauthenticate({ password });
-      if (reauth.status !== "success") {
-        return {
-          status: reauth.status,
-          message: reauth.message,
-        };
-      }
-
-      try {
-        const credential = EmailAuthProvider.credential(email, password);
-        await linkWithCredential(reauth.user, credential);
-      } catch (e) {
-        const message = createErrorMessage(
-          e,
-          "Failed to add password authentication",
-        );
-        return {
-          status: "error",
-          message,
-        };
-      }
-
-      const response = await Ape.users.updateEmail({
-        body: {
-          newEmail: email,
-          previousEmail: reauth.user.email as string,
-        },
-      });
-      if (response.status !== 200) {
-        return {
-          status: "error",
-          message:
-            "Password authentication added but updating the database email failed. This shouldn't happen, please contact support. Error",
-          notificationOptions: { response },
-        };
-      }
+      await addAuthProvider({ authMethod: "password", email, password });
 
       options?.callback?.();
 
       return {
         status: "success",
-        message: "Password authentication added",
+        showNotification: false,
       };
     },
   });
diff --git a/frontend/src/ts/components/pages/account-settings/AuthenticationTab.tsx b/frontend/src/ts/components/pages/account-settings/AuthenticationTab.tsx
index c2fd1c72edf1..6d6c1e0613ba 100644
--- a/frontend/src/ts/components/pages/account-settings/AuthenticationTab.tsx
+++ b/frontend/src/ts/components/pages/account-settings/AuthenticationTab.tsx
@@ -2,14 +2,15 @@ import { Show } from "solid-js";
 
 import {
   addAuthProvider,
-  AuthMethod,
   getAuthMethodDisplay,
   getAuthMethodIcon,
   hasAdditionalAuthMethodsReactive,
   isUsingAuthenticationReactive,
+  ProviderAuthMethod,
 } from "../../../auth";
 import { Button } from "../../common/Button";
 import { showAddPasswordAuthModal } from "../../modals/account-settings/AddPasswordAuthModal";
+import { showRevokeAllTokensModal } from "../../modals/account-settings/ReauthConfirmModals";
 import { showRemoveAuthMethodModal } from "../../modals/account-settings/RemoveAuthMethodModal";
 import { showUpdateEmailModal } from "../../modals/account-settings/UpdateEmailModal";
 import { showUpdatePasswordModal } from "../../modals/account-settings/UpdatePasswordModal";
@@ -21,6 +22,7 @@ export function AuthenticationTab() {
       <PasswordAuthentication />
       <ProviderAuthentication authMethod="google" />
       <ProviderAuthentication authMethod="github" />
+      <RevokeAllTokens />
     </>
   );
 }
@@ -40,37 +42,33 @@ function PasswordAuthentication() {
           onClick={() => showAddPasswordAuthModal()}
         />
       >
-        <UpdatePasswordAuthentication />
+        <div class="flex flex-col gap-2">
+          <Button
+            class="w-full"
+            text="update email"
+            onClick={() => showUpdateEmailModal()}
+          />
+          <Button
+            class="w-full"
+            text="update password"
+            onClick={() => showUpdatePasswordModal()}
+          />{" "}
+          <Show when={() => hasAdditionalAuthMethodsReactive("password")}>
+            <Button
+              class="w-full"
+              text="remove password authentication"
+              onClick={() =>
+                showRemoveAuthMethodModal({ authMethod: "password" })
+              }
+            />
+          </Show>
+        </div>
       </Show>
     </Section>
   );
 }
 
-function UpdatePasswordAuthentication() {
-  return (
-    <div class="flex flex-col gap-2">
-      <Button
-        class="w-full"
-        text="update email"
-        onClick={() => showUpdateEmailModal()}
-      />
-      <Button
-        class="w-full"
-        text="update password"
-        onClick={() => showUpdatePasswordModal()}
-      />{" "}
-      <Show when={() => hasAdditionalAuthMethodsReactive("password")}>
-        <Button
-          class="w-full"
-          text="remove password authentication"
-          onClick={() => showRemoveAuthMethodModal({ authMethod: "password" })}
-        />
-      </Show>
-    </div>
-  );
-}
-
-function ProviderAuthentication(props: { authMethod: AuthMethod }) {
+function ProviderAuthentication(props: { authMethod: ProviderAuthMethod }) {
   return (
     <Section
       title={`${getAuthMethodDisplay(props.authMethod)}`}
@@ -84,7 +82,7 @@ function ProviderAuthentication(props: { authMethod: AuthMethod }) {
         fallback=<Button
           class="w-full"
           text={`add ${getAuthMethodDisplay(props.authMethod)} authentication`}
-          onClick={() => void addAuthProvider(props.authMethod)}
+          onClick={() => void addAuthProvider({ authMethod: props.authMethod })}
         />
       >
         <Button
@@ -99,3 +97,24 @@ function ProviderAuthentication(props: { authMethod: AuthMethod }) {
     </Section>
   );
 }
+
+function RevokeAllTokens() {
+  return (
+    <Section
+      title="revoke all tokens"
+      fa={{ icon: "fa-user-slash" }}
+      text=<>
+        Revokes all tokens connected to your account. Do this if you think
+        someone else has access to your account.
+        <br />
+        <span class="text-error">This will log you out of all devices.</span>
+      </>
+      button={{
+        text: "revoke all tokens",
+        class:
+          "[--themable-button-bg:var(--error-color)] [--themable-button-text:var(--bg-color)]",
+        onClick: () => showRevokeAllTokensModal(),
+      }}
+    />
+  );
+}
diff --git a/frontend/src/ts/pages/account-settings.ts b/frontend/src/ts/pages/account-settings.ts
index 6452541bc1f4..693a76059953 100644
--- a/frontend/src/ts/pages/account-settings.ts
+++ b/frontend/src/ts/pages/account-settings.ts
@@ -257,11 +257,11 @@ qs(".pageAccountSettings")?.onChild(
 );
 
 qs(".pageAccountSettings")?.onChild("click", "#addGoogleAuth", () => {
-  void addAuthProvider("google");
+  void addAuthProvider({ authMethod: "google" });
 });
 
 qs(".pageAccountSettings")?.onChild("click", "#addGithubAuth", () => {
-  void addAuthProvider("github");
+  void addAuthProvider({ authMethod: "github" });
 });
 
 authEvent.subscribe((event) => {

From 7be4d7ed1386b54835c6641e2e045de0c9776c88 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 12 Jun 2026 21:17:25 +0200
Subject: [PATCH 06/23] ape keys, danger zone

---
 .../account-settings/AccountSettingsPage.tsx  |  6 +-
 .../pages/account-settings/ApeKeysTab.tsx     | 70 +++++++++++++++++++
 .../account-settings/BlockedUsersTab.tsx      |  1 +
 .../pages/account-settings/DangerZoneTab.tsx  | 54 ++++++++++++++
 .../pages/account-settings/utils.tsx          |  8 ++-
 frontend/src/ts/states/account-settings.ts    |  2 +-
 6 files changed, 137 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx
 create mode 100644 frontend/src/ts/components/pages/account-settings/DangerZoneTab.tsx

diff --git a/frontend/src/ts/components/pages/account-settings/AccountSettingsPage.tsx b/frontend/src/ts/components/pages/account-settings/AccountSettingsPage.tsx
index f2835aa905c9..91807d157f3f 100644
--- a/frontend/src/ts/components/pages/account-settings/AccountSettingsPage.tsx
+++ b/frontend/src/ts/components/pages/account-settings/AccountSettingsPage.tsx
@@ -8,15 +8,17 @@ import {
 } from "../../../states/account-settings";
 import { Button } from "../../common/Button";
 import { AccountTab } from "./AccountTab";
+import { ApeKeysTab } from "./ApeKeysTab";
 import { AuthenticationTab } from "./AuthenticationTab";
 import { BlockedUsersTab } from "./BlockedUsersTab";
+import { DangerZoneTab } from "./DangerZoneTab";
 
 const tabContent: Record<AccountSettingsTab, JSX.Element> = {
   account: <AccountTab />,
   authentication: <AuthenticationTab />,
   blockedUsers: <BlockedUsersTab />,
-  apeKeys: <div>t.b.d</div>,
-  dangerZone: <div>t.b.d</div>,
+  apeKeys: <ApeKeysTab />,
+  dangerZone: <DangerZoneTab />,
 };
 
 export function AccountSettingsPage() {
diff --git a/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx b/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx
new file mode 100644
index 000000000000..d25ff722e7d8
--- /dev/null
+++ b/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx
@@ -0,0 +1,70 @@
+import { ApeKeyNameSchema } from "@monkeytype/schemas/ape-keys";
+import { z } from "zod";
+
+import Ape from "../../../ape";
+import { setLastGeneratedApeKey } from "../../../states/account-settings";
+import { showModal } from "../../../states/modals";
+import { showSimpleModal } from "../../../states/simple-modal";
+import { Button } from "../../common/Button";
+import { Section } from "./utils";
+
+export function ApeKeysTab() {
+  return (
+    <>
+      <Section
+        title="ape keys"
+        fa={{ icon: "fa-key" }}
+        text=<>
+          Generate Ape Keys to access certain API endpoints (
+          <Button
+            text="documentation"
+            href="https://api.monkeytype.com/docs"
+            variant="text"
+          />
+          ).
+        </>
+        button={{
+          text: "generate new key",
+          onClick: () => {
+            showSimpleModal({
+              title: "Generate new Ape key",
+              buttonText: "generate",
+              schema: z.object({ name: ApeKeyNameSchema }),
+              inputs: {
+                name: {
+                  type: "text",
+                  placeholder: "Name",
+                },
+              },
+
+              execFn: async ({ name }) => {
+                const response = await Ape.apeKeys.add({
+                  body: { name, enabled: false },
+                });
+                if (response.status !== 200) {
+                  return {
+                    status: "error",
+                    message: "Failed to generate key",
+                    notificationOptions: { response },
+                  };
+                }
+
+                const data = response.body.data;
+
+                return {
+                  status: "success",
+                  message: "Key generated",
+                  afterHide: (): void => {
+                    setLastGeneratedApeKey(data.apeKey);
+                    showModal("ViewApeKey");
+                  },
+                };
+              },
+            });
+          },
+        }}
+      />
+      ... table...
+    </>
+  );
+}
diff --git a/frontend/src/ts/components/pages/account-settings/BlockedUsersTab.tsx b/frontend/src/ts/components/pages/account-settings/BlockedUsersTab.tsx
index dfec9ae74182..09ff81b309d6 100644
--- a/frontend/src/ts/components/pages/account-settings/BlockedUsersTab.tsx
+++ b/frontend/src/ts/components/pages/account-settings/BlockedUsersTab.tsx
@@ -22,6 +22,7 @@ export function BlockedUsersTab() {
     <Section
       title="blocked users"
       fa={{ icon: "fa-user-shield" }}
+      fullWidth
       text=<>Blocked users cannot send you friend requests.</>
     >
       <AsyncContent collections={{ query }}>
diff --git a/frontend/src/ts/components/pages/account-settings/DangerZoneTab.tsx b/frontend/src/ts/components/pages/account-settings/DangerZoneTab.tsx
new file mode 100644
index 000000000000..f610be6b3311
--- /dev/null
+++ b/frontend/src/ts/components/pages/account-settings/DangerZoneTab.tsx
@@ -0,0 +1,54 @@
+import {
+  showDeleteAccountModal,
+  showResetAccountModal,
+} from "../../modals/account-settings/ReauthConfirmModals";
+import { Section } from "./utils";
+
+export function DangerZoneTab() {
+  return (
+    <>
+      <ResetAccount />
+      <DeleteAccount />
+    </>
+  );
+}
+
+function ResetAccount() {
+  return (
+    <Section
+      title="reset account"
+      fa={{ icon: "fa-redo-alt" }}
+      text=<>
+        Completely resets your account to a blank state.
+        <br />
+        <span class="text-error">You can&apos;t undo this action!</span>
+      </>
+      button={{
+        text: "reset account",
+        class:
+          "[--themable-button-bg:var(--error-color)] [--themable-button-text:var(--bg-color)]",
+        onClick: () => showResetAccountModal(),
+      }}
+    />
+  );
+}
+
+function DeleteAccount() {
+  return (
+    <Section
+      title="delete account"
+      fa={{ icon: "fa-trash" }}
+      text=<>
+        Deletes your account and all data connected to it.
+        <br />
+        <span class="text-error">You can&apos;t undo this action!</span>
+      </>
+      button={{
+        text: "delete account",
+        class:
+          "[--themable-button-bg:var(--error-color)] [--themable-button-text:var(--bg-color)]",
+        onClick: () => showDeleteAccountModal(),
+      }}
+    />
+  );
+}
diff --git a/frontend/src/ts/components/pages/account-settings/utils.tsx b/frontend/src/ts/components/pages/account-settings/utils.tsx
index d055e44a538b..0028650f2876 100644
--- a/frontend/src/ts/components/pages/account-settings/utils.tsx
+++ b/frontend/src/ts/components/pages/account-settings/utils.tsx
@@ -11,6 +11,7 @@ export function Section(
     fa: FaProps;
     text?: JSX.Element;
     button?: ButtonProps;
+    fullWidth?: boolean;
   } & ParentProps &
     (
       | {
@@ -27,7 +28,12 @@ export function Section(
     <div>
       <H3 text={props.title} fa={{ ...{ fixedWidth: true }, ...props.fa }} />
 
-      <div class="lg:grid lg:grid-cols-2 lg:items-center">
+      <div
+        classList={{
+          "lg:grid lg:grid-cols-2 lg:items-center gap-2":
+            props.fullWidth !== true,
+        }}
+      >
         <Show
           when={props.disabled === undefined || !props.disabled}
           fallback={props.disabledText}
diff --git a/frontend/src/ts/states/account-settings.ts b/frontend/src/ts/states/account-settings.ts
index 7d5f001d1ad5..d69e3611b668 100644
--- a/frontend/src/ts/states/account-settings.ts
+++ b/frontend/src/ts/states/account-settings.ts
@@ -16,4 +16,4 @@ export const accountSettingsTabs = {
 export type AccountSettingsTab = keyof typeof accountSettingsTabs;
 
 export const [getCurrentTab, setCurrentTab] =
-  createSignal<AccountSettingsTab>("authentication");
+  createSignal<AccountSettingsTab>("apeKeys");

From f60c5c7682e1a0a5236bc434b586011b40c684d0 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sat, 13 Jun 2026 12:20:53 +0200
Subject: [PATCH 07/23] ape keys wip

---
 frontend/src/ts/collections/ape-keys.ts       | 150 +++++++++++++
 .../account-settings/AccountSettingsPage.tsx  |   2 +-
 .../pages/account-settings/ApeKeysTab.tsx     | 204 ++++++++++++++----
 .../pages/account-settings/utils.tsx          |   2 +-
 frontend/src/ts/states/account-settings.ts    |  12 ++
 5 files changed, 330 insertions(+), 40 deletions(-)
 create mode 100644 frontend/src/ts/collections/ape-keys.ts

diff --git a/frontend/src/ts/collections/ape-keys.ts b/frontend/src/ts/collections/ape-keys.ts
new file mode 100644
index 000000000000..1eba70c85734
--- /dev/null
+++ b/frontend/src/ts/collections/ape-keys.ts
@@ -0,0 +1,150 @@
+import { queryCollectionOptions } from "@tanstack/query-db-collection";
+import {
+  createCollection,
+  createOptimisticAction,
+  useLiveQuery,
+} from "@tanstack/solid-db";
+import Ape from "../ape";
+import { queryClient } from "../queries";
+import { baseKey } from "../queries/utils/keys";
+import { isAuthenticated } from "../states/core";
+import { setApeKeysDenied } from "../states/account-settings";
+import { applyIdWorkaround } from "./utils/misc";
+import { typedEntries } from "../utils/misc";
+import { ApeKey } from "@monkeytype/schemas/ape-keys";
+import { showSuccessNotification } from "../states/notifications";
+import { replaceUnderscoresWithSpaces } from "../utils/strings";
+
+export type ApeKeyEntry = ApeKey & { _id: string };
+const queryKeys = {
+  root: () => [...baseKey("apeKeys", { isUserSpecific: true })],
+};
+
+// oxlint-disable-next-line typescript/explicit-function-return-type
+export function useApeKeyLiveQuery() {
+  return useLiveQuery((q) =>
+    q
+      .from({ keys: apeKeysCollection })
+      .orderBy(({ keys }) => keys.createdOn, "asc"),
+  );
+}
+
+const apeKeysCollection = createCollection(
+  queryCollectionOptions({
+    staleTime: Infinity,
+    queryKey: queryKeys.root(),
+    queryClient,
+    enabled: isAuthenticated,
+    getKey: (it) => it._id,
+    queryFn: async () => {
+      const response = await Ape.apeKeys.get();
+
+      if (response.status !== 200) {
+        if (
+          response.body.message ===
+          "You have lost access to ape keys, please contact support"
+        ) {
+          setApeKeysDenied(true);
+        }
+
+        throw new Error(`Error fetching ape keys:${response.body.message}`);
+      }
+
+      const dataArray = typedEntries(response.body.data)
+        .map(
+          ([_id, data]) =>
+            ({
+              ...data,
+              _id,
+              name: replaceUnderscoresWithSpaces(data.name),
+            }) satisfies ApeKeyEntry,
+        )
+        .map(applyIdWorkaround);
+
+      return dataArray;
+    },
+  }),
+);
+
+type ActionType = {
+  setEnabled: { apeKeyId: string; enabled: boolean };
+  rename: { apeKeyId: string; name: string };
+  remove: { apeKeyId: string };
+};
+
+const actions = {
+  setEnabled: createOptimisticAction<ActionType["setEnabled"]>({
+    onMutate: ({ apeKeyId, enabled }) => {
+      apeKeysCollection.update(apeKeyId, (key) => {
+        key.enabled = enabled;
+      });
+    },
+    mutationFn: async ({ apeKeyId, enabled }) => {
+      const response = await Ape.apeKeys.save({
+        params: { apeKeyId },
+        body: { enabled },
+      });
+
+      if (response.status !== 200) {
+        throw new Error(`Failed to update key: ${response.body.message}`);
+      }
+
+      apeKeysCollection.utils.writeUpdate({ _id: apeKeyId, enabled });
+
+      showSuccessNotification(`Key ${enabled ? "active" : "inactive"}`);
+    },
+  }),
+  rename: createOptimisticAction<ActionType["rename"]>({
+    onMutate: ({ apeKeyId, name }) => {
+      apeKeysCollection.update(apeKeyId, (key) => {
+        key.name = name;
+      });
+    },
+    mutationFn: async ({ apeKeyId, name }) => {
+      const response = await Ape.apeKeys.save({
+        params: { apeKeyId },
+        body: { name },
+      });
+
+      if (response.status !== 200) {
+        throw new Error(`Failed to update key: ${response.body.message}`);
+      }
+
+      apeKeysCollection.utils.writeUpdate({ _id: apeKeyId, name });
+    },
+  }),
+  remove: createOptimisticAction<ActionType["remove"]>({
+    onMutate: ({ apeKeyId }) => {
+      apeKeysCollection.delete(apeKeyId);
+    },
+    mutationFn: async ({ apeKeyId }) => {
+      const response = await Ape.apeKeys.delete({ params: { apeKeyId } });
+      if (response.status !== 200) {
+        throw new Error(`Failed to delete key: ${response.body.message}`);
+      }
+
+      apeKeysCollection.utils.writeDelete(apeKeyId);
+    },
+  }),
+};
+
+export async function updateApeKeyEnabled(
+  params: ActionType["setEnabled"],
+): Promise<void> {
+  const transaction = actions.setEnabled(params);
+  await transaction.isPersisted.promise;
+}
+
+export async function renameApeKey(
+  params: ActionType["rename"],
+): Promise<void> {
+  const transaction = actions.rename(params);
+  await transaction.isPersisted.promise;
+}
+
+export async function removeApeKey(
+  params: ActionType["remove"],
+): Promise<void> {
+  const transaction = actions.remove(params);
+  await transaction.isPersisted.promise;
+}
diff --git a/frontend/src/ts/components/pages/account-settings/AccountSettingsPage.tsx b/frontend/src/ts/components/pages/account-settings/AccountSettingsPage.tsx
index 91807d157f3f..11bf44e32119 100644
--- a/frontend/src/ts/components/pages/account-settings/AccountSettingsPage.tsx
+++ b/frontend/src/ts/components/pages/account-settings/AccountSettingsPage.tsx
@@ -25,7 +25,7 @@ export function AccountSettingsPage() {
   return (
     <div>
       <div class="content-grid flex flex-col gap-8 md:flex-row">
-        <div class="w-full shrink-0 md:w-60 2xl:w-75">
+        <div class="w-full shrink-0 md:w-60">
           <Sidebar />
         </div>
         <div class="flex w-full flex-1 flex-col gap-8">
diff --git a/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx b/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx
index d25ff722e7d8..b8c0a633101b 100644
--- a/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx
+++ b/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx
@@ -1,14 +1,27 @@
 import { ApeKeyNameSchema } from "@monkeytype/schemas/ape-keys";
+import { createColumnHelper } from "@tanstack/solid-table";
+import { format as dateFormat } from "date-fns";
 import { z } from "zod";
 
 import Ape from "../../../ape";
+import {
+  ApeKeyEntry,
+  removeApeKey,
+  renameApeKey,
+  updateApeKeyEnabled,
+  useApeKeyLiveQuery,
+} from "../../../collections/ape-keys";
 import { setLastGeneratedApeKey } from "../../../states/account-settings";
 import { showModal } from "../../../states/modals";
 import { showSimpleModal } from "../../../states/simple-modal";
+import { replaceSpacesWithUnderscores } from "../../../utils/strings";
+import AsyncContent from "../../common/AsyncContent";
 import { Button } from "../../common/Button";
+import { DataTable, DataTableColumnDef } from "../../ui/table/DataTable";
 import { Section } from "./utils";
 
 export function ApeKeysTab() {
+  const query = useApeKeyLiveQuery();
   return (
     <>
       <Section
@@ -25,46 +38,161 @@ export function ApeKeysTab() {
         </>
         button={{
           text: "generate new key",
-          onClick: () => {
-            showSimpleModal({
-              title: "Generate new Ape key",
-              buttonText: "generate",
-              schema: z.object({ name: ApeKeyNameSchema }),
-              inputs: {
-                name: {
-                  type: "text",
-                  placeholder: "Name",
-                },
-              },
-
-              execFn: async ({ name }) => {
-                const response = await Ape.apeKeys.add({
-                  body: { name, enabled: false },
-                });
-                if (response.status !== 200) {
-                  return {
-                    status: "error",
-                    message: "Failed to generate key",
-                    notificationOptions: { response },
-                  };
-                }
-
-                const data = response.body.data;
-
-                return {
-                  status: "success",
-                  message: "Key generated",
-                  afterHide: (): void => {
-                    setLastGeneratedApeKey(data.apeKey);
-                    showModal("ViewApeKey");
-                  },
-                };
-              },
-            });
-          },
+          onClick: addNewKey,
         }}
       />
-      ... table...
+      <AsyncContent collections={{ query }}>
+        {({ queryData }) => (
+          <>
+            <h1>test {queryData().length}</h1>
+
+            <DataTable
+              id="apeKeys"
+              columns={getColumns()}
+              data={queryData()}
+              fallback={
+                <div class="text-center text-sub">
+                  You don&lsquo;t have any ape keys yet.
+                </div>
+              }
+            />
+          </>
+        )}
+      </AsyncContent>
     </>
   );
 }
+
+function getColumns(): DataTableColumnDef<ApeKeyEntry>[] {
+  const defineColumn = createColumnHelper<ApeKeyEntry>().accessor;
+
+  const columns = [
+    defineColumn("_id", {
+      header: "active",
+      cell: (info) => (
+        <Button
+          variant="text"
+          fa={
+            info.row.original.enabled
+              ? { fixedWidth: true, icon: "fa-check-square" }
+              : { variant: "regular", fixedWidth: true, icon: "fa-square" }
+          }
+          onClick={() =>
+            void updateApeKeyEnabled({
+              apeKeyId: info.getValue(),
+              enabled: !info.row.original.enabled,
+            })
+          }
+        />
+      ),
+    }),
+    defineColumn("name", { header: "name" }),
+    defineColumn("createdOn", {
+      header: "created on",
+      cell: (info) => dateFormat(info.getValue(), "dd MMM yyyy HH:mm"),
+    }),
+    defineColumn("modifiedOn", {
+      header: "modified on",
+      cell: (info) => dateFormat(info.getValue(), "dd MMM yyyy HH:mm"),
+    }),
+    defineColumn("lastUsedOn", {
+      header: "last used on",
+      cell: (info) =>
+        info.getValue() === -1
+          ? "-"
+          : dateFormat(info.getValue(), "dd MMM yyyy HH:mm"),
+    }),
+    defineColumn("_id", {
+      header: "",
+      cell: (info) => (
+        <div class="flex justify-end gap-2">
+          <Button
+            fa={{ fixedWidth: true, icon: "fa-pen" }}
+            balloon={{ text: "rename" }}
+            onClick={() => showRenameModal(info.getValue())}
+          />
+          <Button
+            fa={{ fixedWidth: true, icon: "fa-trash-alt" }}
+            balloon={{ text: "delete" }}
+            onClick={() => {
+              showSimpleModal({
+                title: "Delete Ape key",
+                text: "Are you sure?",
+                buttonText: "delete",
+                execFn: async () => {
+                  await removeApeKey({ apeKeyId: info.getValue() });
+                  return { status: "success", message: "Key deleted" };
+                },
+              });
+            }}
+          />
+        </div>
+      ),
+    }),
+  ];
+
+  //mark each column non sortable
+  return columns.map((it) => ({ ...it, enableSorting: false }));
+}
+
+function addNewKey(): void {
+  showSimpleModal({
+    title: "Generate new Ape key",
+    buttonText: "generate",
+    schema: z.object({ name: ApeKeyNameSchema }),
+    inputs: {
+      name: {
+        type: "text",
+        placeholder: "Name",
+        preprocess: replaceSpacesWithUnderscores,
+      },
+    },
+
+    execFn: async ({ name }) => {
+      const response = await Ape.apeKeys.add({
+        body: { name, enabled: false },
+      });
+      if (response.status !== 200) {
+        return {
+          status: "error",
+          message: "Failed to generate key",
+          notificationOptions: { response },
+        };
+      }
+
+      const data = response.body.data;
+
+      return {
+        status: "success",
+        message: "Key generated",
+        afterHide: (): void => {
+          setLastGeneratedApeKey(data.apeKey);
+          showModal("ViewApeKey");
+        },
+      };
+    },
+  });
+}
+
+function showRenameModal(apeKeyId: string): void {
+  showSimpleModal({
+    title: "Edit Ape key",
+    buttonText: "edit",
+    schema: z.object({ name: ApeKeyNameSchema }),
+    inputs: {
+      name: {
+        type: "text",
+        placeholder: "name",
+        preprocess: replaceSpacesWithUnderscores,
+      },
+    },
+
+    execFn: async ({ name }) => {
+      await renameApeKey({ apeKeyId, name });
+      return {
+        status: "success",
+        message: "Key updated",
+      };
+    },
+  });
+}
diff --git a/frontend/src/ts/components/pages/account-settings/utils.tsx b/frontend/src/ts/components/pages/account-settings/utils.tsx
index 0028650f2876..468a379ee2b4 100644
--- a/frontend/src/ts/components/pages/account-settings/utils.tsx
+++ b/frontend/src/ts/components/pages/account-settings/utils.tsx
@@ -30,7 +30,7 @@ export function Section(
 
       <div
         classList={{
-          "lg:grid lg:grid-cols-2 lg:items-center gap-2":
+          "lg:grid lg:grid-cols-2 xl:grid-cols-[2fr_1fr] lg:items-center gap-2":
             props.fullWidth !== true,
         }}
       >
diff --git a/frontend/src/ts/states/account-settings.ts b/frontend/src/ts/states/account-settings.ts
index d69e3611b668..cd48c73f95da 100644
--- a/frontend/src/ts/states/account-settings.ts
+++ b/frontend/src/ts/states/account-settings.ts
@@ -1,5 +1,7 @@
 import { createSignal } from "solid-js";
+import { createEffectOn } from "../hooks/effects";
 import { FaIcon } from "../types/font-awesome";
+import { isAuthenticated } from "./core";
 
 export const [getLastGeneratedApeKey, setLastGeneratedApeKey] = createSignal<
   string | undefined
@@ -17,3 +19,13 @@ export type AccountSettingsTab = keyof typeof accountSettingsTabs;
 
 export const [getCurrentTab, setCurrentTab] =
   createSignal<AccountSettingsTab>("apeKeys");
+
+export const [isApeKeysDenied, setApeKeysDenied] = createSignal<
+  boolean | undefined
+>(undefined);
+
+createEffectOn(isAuthenticated, (hasUser) => {
+  if (!hasUser) {
+    setApeKeysDenied(undefined);
+  }
+});

From 81f79a390fcb1d6b5c04bfe6f4bdb2c1f6edadd5 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sat, 13 Jun 2026 12:52:26 +0200
Subject: [PATCH 08/23] wip

---
 frontend/src/ts/auth.tsx                      |  1 -
 frontend/src/ts/collections/ape-keys.ts       | 66 ++++++++++++++++---
 .../pages/account-settings/ApeKeysTab.tsx     | 54 ++++++---------
 3 files changed, 78 insertions(+), 43 deletions(-)

diff --git a/frontend/src/ts/auth.tsx b/frontend/src/ts/auth.tsx
index e27670b5505a..6af1f3284e7c 100644
--- a/frontend/src/ts/auth.tsx
+++ b/frontend/src/ts/auth.tsx
@@ -137,7 +137,6 @@ const authenticationMemos = Object.fromEntries(
         isInUse: user.providerData.some((p) => p.providerId === providerId),
         hasAdditionalAuthMethods: hasAdditionalAuthMethods(it),
       };
-      console.log("### memo for ", providerId, "updated", result);
       return result;
     });
     return [it, memo];
diff --git a/frontend/src/ts/collections/ape-keys.ts b/frontend/src/ts/collections/ape-keys.ts
index 1eba70c85734..eab8534788db 100644
--- a/frontend/src/ts/collections/ape-keys.ts
+++ b/frontend/src/ts/collections/ape-keys.ts
@@ -8,12 +8,18 @@ import Ape from "../ape";
 import { queryClient } from "../queries";
 import { baseKey } from "../queries/utils/keys";
 import { isAuthenticated } from "../states/core";
-import { setApeKeysDenied } from "../states/account-settings";
-import { applyIdWorkaround } from "./utils/misc";
+import {
+  setApeKeysDenied,
+  setLastGeneratedApeKey,
+} from "../states/account-settings";
+import { applyIdWorkaround, tempId } from "./utils/misc";
 import { typedEntries } from "../utils/misc";
 import { ApeKey } from "@monkeytype/schemas/ape-keys";
 import { showSuccessNotification } from "../states/notifications";
-import { replaceUnderscoresWithSpaces } from "../utils/strings";
+import {
+  replaceSpacesWithUnderscores,
+  replaceUnderscoresWithSpaces,
+} from "../utils/strings";
 
 export type ApeKeyEntry = ApeKey & { _id: string };
 const queryKeys = {
@@ -23,9 +29,11 @@ const queryKeys = {
 // oxlint-disable-next-line typescript/explicit-function-return-type
 export function useApeKeyLiveQuery() {
   return useLiveQuery((q) =>
-    q
-      .from({ keys: apeKeysCollection })
-      .orderBy(({ keys }) => keys.createdOn, "asc"),
+    isAuthenticated()
+      ? q
+          .from({ keys: apeKeysCollection })
+          .orderBy(({ keys }) => keys.createdOn, "asc")
+      : undefined,
   );
 }
 
@@ -67,12 +75,44 @@ const apeKeysCollection = createCollection(
 );
 
 type ActionType = {
+  insertKey: { name: string };
   setEnabled: { apeKeyId: string; enabled: boolean };
   rename: { apeKeyId: string; name: string };
   remove: { apeKeyId: string };
 };
 
 const actions = {
+  insertKey: createOptimisticAction<ActionType["insertKey"]>({
+    onMutate: ({ name }) => {
+      apeKeysCollection.insert({
+        _id: tempId(),
+        name: replaceSpacesWithUnderscores(name),
+        enabled: false,
+        lastUsedOn: -1,
+        createdOn: Date.now(),
+        modifiedOn: Date.now(),
+      });
+    },
+    mutationFn: async ({ name }) => {
+      const response = await Ape.apeKeys.add({
+        body: { name, enabled: false },
+      });
+
+      if (response.status !== 200) {
+        throw new Error(`Failed to add key: ${response.body.message}`);
+      }
+
+      const newKey = {
+        ...response.body.data.apeKeyDetails,
+        _id: response.body.data.apeKeyId,
+        name: replaceUnderscoresWithSpaces(name),
+      };
+
+      apeKeysCollection.utils.writeInsert(newKey);
+
+      setLastGeneratedApeKey(response.body.data.apeKey);
+    },
+  }),
   setEnabled: createOptimisticAction<ActionType["setEnabled"]>({
     onMutate: ({ apeKeyId, enabled }) => {
       apeKeysCollection.update(apeKeyId, (key) => {
@@ -97,7 +137,7 @@ const actions = {
   rename: createOptimisticAction<ActionType["rename"]>({
     onMutate: ({ apeKeyId, name }) => {
       apeKeysCollection.update(apeKeyId, (key) => {
-        key.name = name;
+        key.name = replaceUnderscoresWithSpaces(name);
       });
     },
     mutationFn: async ({ apeKeyId, name }) => {
@@ -110,7 +150,10 @@ const actions = {
         throw new Error(`Failed to update key: ${response.body.message}`);
       }
 
-      apeKeysCollection.utils.writeUpdate({ _id: apeKeyId, name });
+      apeKeysCollection.utils.writeUpdate({
+        _id: apeKeyId,
+        name: replaceUnderscoresWithSpaces(name),
+      });
     },
   }),
   remove: createOptimisticAction<ActionType["remove"]>({
@@ -128,6 +171,13 @@ const actions = {
   }),
 };
 
+export async function insertApeKey(
+  params: ActionType["insertKey"],
+): Promise<void> {
+  const transaction = actions.insertKey(params);
+  await transaction.isPersisted.promise;
+}
+
 export async function updateApeKeyEnabled(
   params: ActionType["setEnabled"],
 ): Promise<void> {
diff --git a/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx b/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx
index b8c0a633101b..a9f2dd85ac6f 100644
--- a/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx
+++ b/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx
@@ -1,17 +1,17 @@
 import { ApeKeyNameSchema } from "@monkeytype/schemas/ape-keys";
 import { createColumnHelper } from "@tanstack/solid-table";
 import { format as dateFormat } from "date-fns";
+import { createMemo } from "solid-js";
 import { z } from "zod";
 
-import Ape from "../../../ape";
 import {
   ApeKeyEntry,
+  insertApeKey,
   removeApeKey,
   renameApeKey,
   updateApeKeyEnabled,
   useApeKeyLiveQuery,
 } from "../../../collections/ape-keys";
-import { setLastGeneratedApeKey } from "../../../states/account-settings";
 import { showModal } from "../../../states/modals";
 import { showSimpleModal } from "../../../states/simple-modal";
 import { replaceSpacesWithUnderscores } from "../../../utils/strings";
@@ -21,7 +21,8 @@ import { DataTable, DataTableColumnDef } from "../../ui/table/DataTable";
 import { Section } from "./utils";
 
 export function ApeKeysTab() {
-  const query = useApeKeyLiveQuery();
+  const columns = createMemo(() => getColumns());
+  const apeKeyQuery = useApeKeyLiveQuery();
   return (
     <>
       <Section
@@ -41,22 +42,18 @@ export function ApeKeysTab() {
           onClick: addNewKey,
         }}
       />
-      <AsyncContent collections={{ query }}>
-        {({ queryData }) => (
-          <>
-            <h1>test {queryData().length}</h1>
-
-            <DataTable
-              id="apeKeys"
-              columns={getColumns()}
-              data={queryData()}
-              fallback={
-                <div class="text-center text-sub">
-                  You don&lsquo;t have any ape keys yet.
-                </div>
-              }
-            />
-          </>
+      <AsyncContent collections={{ apeKeyQuery }}>
+        {({ apeKeyQueryData }) => (
+          <DataTable
+            id="apeKeys"
+            columns={columns()}
+            data={[...apeKeyQueryData()]}
+            fallback={
+              <div class="text-center text-sub">
+                You don&lsquo;t have any ape keys yet.
+              </div>
+            }
+          />
         )}
       </AsyncContent>
     </>
@@ -86,7 +83,9 @@ function getColumns(): DataTableColumnDef<ApeKeyEntry>[] {
         />
       ),
     }),
-    defineColumn("name", { header: "name" }),
+    defineColumn("name", {
+      header: "name",
+    }),
     defineColumn("createdOn", {
       header: "created on",
       cell: (info) => dateFormat(info.getValue(), "dd MMM yyyy HH:mm"),
@@ -149,24 +148,11 @@ function addNewKey(): void {
     },
 
     execFn: async ({ name }) => {
-      const response = await Ape.apeKeys.add({
-        body: { name, enabled: false },
-      });
-      if (response.status !== 200) {
-        return {
-          status: "error",
-          message: "Failed to generate key",
-          notificationOptions: { response },
-        };
-      }
-
-      const data = response.body.data;
-
+      await insertApeKey({ name });
       return {
         status: "success",
         message: "Key generated",
         afterHide: (): void => {
-          setLastGeneratedApeKey(data.apeKey);
           showModal("ViewApeKey");
         },
       };

From a8a61a9851cb3bcabb4470e7dda7881bd1b70489 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sat, 13 Jun 2026 13:08:54 +0200
Subject: [PATCH 09/23] debug

---
 .../pages/account-settings/ApeKeysTab.tsx     | 25 +++++++++++--------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx b/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx
index a9f2dd85ac6f..ddd1e4527f50 100644
--- a/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx
+++ b/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx
@@ -1,7 +1,7 @@
 import { ApeKeyNameSchema } from "@monkeytype/schemas/ape-keys";
 import { createColumnHelper } from "@tanstack/solid-table";
 import { format as dateFormat } from "date-fns";
-import { createMemo } from "solid-js";
+import { createMemo, For } from "solid-js";
 import { z } from "zod";
 
 import {
@@ -44,16 +44,19 @@ export function ApeKeysTab() {
       />
       <AsyncContent collections={{ apeKeyQuery }}>
         {({ apeKeyQueryData }) => (
-          <DataTable
-            id="apeKeys"
-            columns={columns()}
-            data={[...apeKeyQueryData()]}
-            fallback={
-              <div class="text-center text-sub">
-                You don&lsquo;t have any ape keys yet.
-              </div>
-            }
-          />
+          <>
+            <DataTable
+              id="apeKeys"
+              columns={columns()}
+              data={apeKeyQueryData()}
+              fallback={
+                <div class="text-center text-sub">
+                  You don&lsquo;t have any ape keys yet.
+                </div>
+              }
+            />
+            <For each={apeKeyQueryData()}>{(it) => <p>test {it.name}</p>}</For>
+          </>
         )}
       </AsyncContent>
     </>

From f748a2a57bc2edf7c9eff9f7cedbe50eedb0f5c5 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sat, 13 Jun 2026 20:58:38 +0200
Subject: [PATCH 10/23] wip

---
 .../src/ts/components/pages/account-settings/ApeKeysTab.tsx | 2 +-
 frontend/src/ts/components/ui/table/DataTable.tsx           | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx b/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx
index ddd1e4527f50..7a6d0b61c7e9 100644
--- a/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx
+++ b/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx
@@ -48,7 +48,7 @@ export function ApeKeysTab() {
             <DataTable
               id="apeKeys"
               columns={columns()}
-              data={apeKeyQueryData()}
+              data={[...apeKeyQueryData()]}
               fallback={
                 <div class="text-center text-sub">
                   You don&lsquo;t have any ape keys yet.
diff --git a/frontend/src/ts/components/ui/table/DataTable.tsx b/frontend/src/ts/components/ui/table/DataTable.tsx
index 06aa1d07a757..611fbfe5d354 100644
--- a/frontend/src/ts/components/ui/table/DataTable.tsx
+++ b/frontend/src/ts/components/ui/table/DataTable.tsx
@@ -70,7 +70,7 @@ export type DataTableProps<TData, TValue> = {
 };
 
 // oxlint-disable-next-line typescript/no-explicit-any
-export function DataTable<TData, TValue = any>(
+export function DataTable<TData extends Object, TValue = any>(
   props: DataTableProps<TData, TValue>,
 ): JSXElement {
   const [sorting, setSorting] = useLocalStorage<SortingState>({
@@ -124,7 +124,9 @@ export function DataTable<TData, TValue = any>(
     getRowId: (row, index) =>
       props.rowSelection !== undefined
         ? props.rowSelection.getRowId(row)
-        : index.toString(),
+        : "_id" in row
+          ? (row["_id"] as string)
+          : index.toString(),
     onRowSelectionChange: setRowSelection,
 
     state: {

From 48e12d021facce3e70197782986234fb68ba6502 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sat, 13 Jun 2026 21:30:11 +0200
Subject: [PATCH 11/23] fix datatable

---
 .../pages/account-settings/ApeKeysTab.tsx     |  25 ++-
 .../pages/connections/PendingRequests.tsx     |   2 +-
 .../src/ts/components/ui/table/DataTable.tsx  | 153 +++++++++---------
 3 files changed, 92 insertions(+), 88 deletions(-)

diff --git a/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx b/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx
index 7a6d0b61c7e9..a5bc35cf80b4 100644
--- a/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx
+++ b/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx
@@ -1,7 +1,7 @@
 import { ApeKeyNameSchema } from "@monkeytype/schemas/ape-keys";
 import { createColumnHelper } from "@tanstack/solid-table";
 import { format as dateFormat } from "date-fns";
-import { createMemo, For } from "solid-js";
+import { createMemo } from "solid-js";
 import { z } from "zod";
 
 import {
@@ -44,19 +44,16 @@ export function ApeKeysTab() {
       />
       <AsyncContent collections={{ apeKeyQuery }}>
         {({ apeKeyQueryData }) => (
-          <>
-            <DataTable
-              id="apeKeys"
-              columns={columns()}
-              data={[...apeKeyQueryData()]}
-              fallback={
-                <div class="text-center text-sub">
-                  You don&lsquo;t have any ape keys yet.
-                </div>
-              }
-            />
-            <For each={apeKeyQueryData()}>{(it) => <p>test {it.name}</p>}</For>
-          </>
+          <DataTable
+            id="apeKeys"
+            columns={columns()}
+            data={apeKeyQueryData()}
+            fallback={
+              <div class="text-center text-sub">
+                You don&lsquo;t have any ape keys yet.
+              </div>
+            }
+          />
         )}
       </AsyncContent>
     </>
diff --git a/frontend/src/ts/components/pages/connections/PendingRequests.tsx b/frontend/src/ts/components/pages/connections/PendingRequests.tsx
index 24f3fcf713f7..9b1ae72e0c34 100644
--- a/frontend/src/ts/components/pages/connections/PendingRequests.tsx
+++ b/frontend/src/ts/components/pages/connections/PendingRequests.tsx
@@ -31,7 +31,7 @@ export function PendingRequests() {
             <DataTable
               id="pendingConnections"
               columns={columns()}
-              data={[...pendingQueryData()]}
+              data={pendingQueryData()}
             />
           </Show>
         )}
diff --git a/frontend/src/ts/components/ui/table/DataTable.tsx b/frontend/src/ts/components/ui/table/DataTable.tsx
index 611fbfe5d354..1f0c15557b40 100644
--- a/frontend/src/ts/components/ui/table/DataTable.tsx
+++ b/frontend/src/ts/components/ui/table/DataTable.tsx
@@ -103,94 +103,100 @@ export function DataTable<TData extends Object, TValue = any>(
     }
   });
 
-  const table = createSolidTable<TData>({
-    get data() {
-      return props.data;
-    },
-    get columns() {
-      return props.columns;
-    },
-    getCoreRowModel: getCoreRowModel(),
-    onSortingChange: (it) => {
-      setSorting(it);
-      props.onSortingChange?.(sorting());
-    },
+  // Ensure reactivity: always produce a fresh array reference
+  const data = createMemo(() => props.data.map((it) => ({ ...it })));
 
-    //oxlint-disable-next-line solid/reactivity
-    ...(props.onSortingChange
-      ? { manualSorting: true }
-      : { getSortedRowModel: getSortedRowModel() }),
-    enableRowSelection: () => props.rowSelection !== undefined,
-    getRowId: (row, index) =>
-      props.rowSelection !== undefined
-        ? props.rowSelection.getRowId(row)
-        : "_id" in row
-          ? (row["_id"] as string)
-          : index.toString(),
-    onRowSelectionChange: setRowSelection,
-
-    state: {
-      get sorting() {
-        return sorting();
+  // Recreate the table instance whenever data or columns change
+  const table = createMemo(() =>
+    createSolidTable<TData>({
+      data: data(),
+      get columns() {
+        return props.columns;
       },
-      get rowSelection() {
-        return rowSelection();
+      getCoreRowModel: getCoreRowModel(),
+      onSortingChange: (it) => {
+        setSorting(it);
+        props.onSortingChange?.(sorting());
       },
-    },
-  });
+
+      //oxlint-disable-next-line solid/reactivity
+      ...(props.onSortingChange
+        ? { manualSorting: true }
+        : { getSortedRowModel: getSortedRowModel() }),
+      enableRowSelection: () => props.rowSelection !== undefined,
+      getRowId: (row, index) =>
+        props.rowSelection !== undefined
+          ? props.rowSelection.getRowId(row)
+          : "_id" in row
+            ? (row["_id"] as string)
+            : index.toString(),
+      onRowSelectionChange: setRowSelection,
+
+      state: {
+        get sorting() {
+          return sorting();
+        },
+        get rowSelection() {
+          return rowSelection();
+        },
+      },
+    }),
+  );
 
   //create column visibility classes once, make them accessible via the column.id
   const columnVisibility = createMemo(() => {
     return Object.fromEntries(
-      table.getAllColumns().map((it) => {
-        const breakpoint =
-          it.columnDef.meta?.breakpoint === "xxl"
-            ? "2xl"
-            : it.columnDef.meta?.breakpoint;
-        const maxBreakpoint =
-          it.columnDef.meta?.maxBreakpoint === "xxl"
-            ? "2xl"
-            : it.columnDef.meta?.maxBreakpoint;
+      table()
+        .getAllColumns()
+        .map((it) => {
+          const breakpoint =
+            it.columnDef.meta?.breakpoint === "xxl"
+              ? "2xl"
+              : it.columnDef.meta?.breakpoint;
+          const maxBreakpoint =
+            it.columnDef.meta?.maxBreakpoint === "xxl"
+              ? "2xl"
+              : it.columnDef.meta?.maxBreakpoint;
 
-        // 🚨 Tailwind does not generate CSS for dynamically constructed class names.
-        const classes = {
-          hidden: false,
-          "xxs:table-cell": false,
-          "xs:table-cell": false,
-          "sm:table-cell": false,
-          "md:table-cell": false,
-          "lg:table-cell": false,
-          "xl:table-cell": false,
-          "2xl:table-cell": false,
-          "xxs:hidden": false,
-          "xs:hidden": false,
-          "sm:hidden": false,
-          "md:hidden": false,
-          "lg:hidden": false,
-          "xl:hidden": false,
-          "2xl:hidden": false,
-        };
-        if (breakpoint !== undefined) {
-          classes.hidden = true;
-          classes[`${breakpoint}:table-cell`] = true;
-        }
-        if (maxBreakpoint !== undefined) {
-          classes[`${maxBreakpoint}:hidden`] = true;
-        }
-        return [it.id, classes];
-      }),
+          // 🚨 Tailwind does not generate CSS for dynamically constructed class names.
+          const classes = {
+            hidden: false,
+            "xxs:table-cell": false,
+            "xs:table-cell": false,
+            "sm:table-cell": false,
+            "md:table-cell": false,
+            "lg:table-cell": false,
+            "xl:table-cell": false,
+            "2xl:table-cell": false,
+            "xxs:hidden": false,
+            "xs:hidden": false,
+            "sm:hidden": false,
+            "md:hidden": false,
+            "lg:hidden": false,
+            "xl:hidden": false,
+            "2xl:hidden": false,
+          };
+          if (breakpoint !== undefined) {
+            classes.hidden = true;
+            classes[`${breakpoint}:table-cell`] = true;
+          }
+          if (maxBreakpoint !== undefined) {
+            classes[`${maxBreakpoint}:hidden`] = true;
+          }
+          return [it.id, classes];
+        }),
     );
   });
 
   return (
     <Show
-      when={table.getRowModel().rows?.length || props.noDataRow !== undefined}
+      when={table().getRowModel().rows?.length || props.noDataRow !== undefined}
       fallback={props.fallback}
     >
       <Table id={props.id} class={props.class}>
         <Show when={!props.hideHeader}>
           <TableHeader>
-            <For each={table.getHeaderGroups()}>
+            <For each={table().getHeaderGroups()}>
               {(headerGroup) => (
                 <TableRow>
                   <For each={headerGroup.headers}>
@@ -304,7 +310,7 @@ export function DataTable<TData extends Object, TValue = any>(
           </TableHeader>
         </Show>
         <TableBody>
-          <For each={table.getRowModel().rows}>
+          <For each={table().getRowModel().rows}>
             {(row) => (
               <TableRow
                 {...{
@@ -359,12 +365,13 @@ export function DataTable<TData extends Object, TValue = any>(
           </For>
           <Show
             when={
-              !table.getRowModel().rows?.length && props.noDataRow !== undefined
+              !table().getRowModel().rows?.length &&
+              props.noDataRow !== undefined
             }
           >
             <TableRow>
               <TableCell
-                colSpan={table.getAllColumns().length}
+                colSpan={table().getAllColumns().length}
                 class="text-center text-sub"
               >
                 {props.noDataRow !== undefined &&

From 4386da33a9fded31e69b9a45acbdcff81eabfcc7 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sat, 13 Jun 2026 21:55:37 +0200
Subject: [PATCH 12/23] lost access to ape keys

---
 .../pages/account-settings/ApeKeysTab.tsx     | 39 ++++++++++++-------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx b/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx
index a5bc35cf80b4..749fdcbf1973 100644
--- a/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx
+++ b/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx
@@ -1,7 +1,7 @@
 import { ApeKeyNameSchema } from "@monkeytype/schemas/ape-keys";
 import { createColumnHelper } from "@tanstack/solid-table";
 import { format as dateFormat } from "date-fns";
-import { createMemo } from "solid-js";
+import { createMemo, Show } from "solid-js";
 import { z } from "zod";
 
 import {
@@ -12,11 +12,13 @@ import {
   updateApeKeyEnabled,
   useApeKeyLiveQuery,
 } from "../../../collections/ape-keys";
+import { isApeKeysDenied } from "../../../states/account-settings";
 import { showModal } from "../../../states/modals";
 import { showSimpleModal } from "../../../states/simple-modal";
 import { replaceSpacesWithUnderscores } from "../../../utils/strings";
 import AsyncContent from "../../common/AsyncContent";
 import { Button } from "../../common/Button";
+import { Fa } from "../../common/Fa";
 import { DataTable, DataTableColumnDef } from "../../ui/table/DataTable";
 import { Section } from "./utils";
 
@@ -41,21 +43,28 @@ export function ApeKeysTab() {
           text: "generate new key",
           onClick: addNewKey,
         }}
+        disabled={isApeKeysDenied() === true}
+        disabledText=<>
+          <Fa icon="fa-times" /> You have lost access to Ape Keys. Please
+          contact support if you believe this is a mistake.
+        </>
       />
-      <AsyncContent collections={{ apeKeyQuery }}>
-        {({ apeKeyQueryData }) => (
-          <DataTable
-            id="apeKeys"
-            columns={columns()}
-            data={apeKeyQueryData()}
-            fallback={
-              <div class="text-center text-sub">
-                You don&lsquo;t have any ape keys yet.
-              </div>
-            }
-          />
-        )}
-      </AsyncContent>
+      <Show when={isApeKeysDenied() !== true}>
+        <AsyncContent collections={{ apeKeyQuery }}>
+          {({ apeKeyQueryData }) => (
+            <DataTable
+              id="apeKeys"
+              columns={columns()}
+              data={apeKeyQueryData()}
+              fallback={
+                <div class="text-center text-sub">
+                  You don&lsquo;t have any ape keys yet.
+                </div>
+              }
+            />
+          )}
+        </AsyncContent>
+      </Show>
     </>
   );
 }

From 32f715f441ca762f2640441457c329bbb8433036 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sat, 13 Jun 2026 22:57:28 +0200
Subject: [PATCH 13/23] style closer to settings page

---
 frontend/src/ts/components/pages/account-settings/utils.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/ts/components/pages/account-settings/utils.tsx b/frontend/src/ts/components/pages/account-settings/utils.tsx
index 468a379ee2b4..55bc6f283d20 100644
--- a/frontend/src/ts/components/pages/account-settings/utils.tsx
+++ b/frontend/src/ts/components/pages/account-settings/utils.tsx
@@ -30,7 +30,7 @@ export function Section(
 
       <div
         classList={{
-          "lg:grid lg:grid-cols-2 xl:grid-cols-[2fr_1fr] lg:items-center gap-2":
+          "lg:grid lg:grid-cols-2 xl:grid-cols-[2fr_1fr] gap-2 lg:gap-x-8":
             props.fullWidth !== true,
         }}
       >

From 7c6d8c997f12f4735a013148ab4eb5148dc3de2a Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 14 Jun 2026 12:12:12 +0200
Subject: [PATCH 14/23] re-use settings component

---
 .../account-settings/AuthenticationTab.tsx    |  34 ++---
 .../pages/account-settings/utils.tsx          |  54 ++++---
 .../ts/components/pages/settings/Setting.tsx  | 132 ++++++++++++------
 frontend/src/ts/states/account-settings.ts    |   2 +-
 4 files changed, 129 insertions(+), 93 deletions(-)

diff --git a/frontend/src/ts/components/pages/account-settings/AuthenticationTab.tsx b/frontend/src/ts/components/pages/account-settings/AuthenticationTab.tsx
index 6d6c1e0613ba..0878a73ecd98 100644
--- a/frontend/src/ts/components/pages/account-settings/AuthenticationTab.tsx
+++ b/frontend/src/ts/components/pages/account-settings/AuthenticationTab.tsx
@@ -76,25 +76,21 @@ function ProviderAuthentication(props: { authMethod: ProviderAuthMethod }) {
       text=<>
         Add or remove {getAuthMethodDisplay(props.authMethod)} authentication.
       </>
-    >
-      <Show
-        when={isUsingAuthenticationReactive(props.authMethod)}
-        fallback=<Button
-          class="w-full"
-          text={`add ${getAuthMethodDisplay(props.authMethod)} authentication`}
-          onClick={() => void addAuthProvider({ authMethod: props.authMethod })}
-        />
-      >
-        <Button
-          class="w-full"
-          text={`remove ${getAuthMethodDisplay(props.authMethod)} authentication`}
-          disabled={!hasAdditionalAuthMethodsReactive(props.authMethod)}
-          onClick={() =>
-            showRemoveAuthMethodModal({ authMethod: props.authMethod })
-          }
-        />
-      </Show>
-    </Section>
+      button={
+        isUsingAuthenticationReactive(props.authMethod)
+          ? {
+              text: `remove ${getAuthMethodDisplay(props.authMethod)} authentication`,
+              disabled: !hasAdditionalAuthMethodsReactive(props.authMethod),
+              onClick: () =>
+                showRemoveAuthMethodModal({ authMethod: props.authMethod }),
+            }
+          : {
+              text: `add ${getAuthMethodDisplay(props.authMethod)} authentication`,
+              onClick: () =>
+                void addAuthProvider({ authMethod: props.authMethod }),
+            }
+      }
+    />
   );
 }
 
diff --git a/frontend/src/ts/components/pages/account-settings/utils.tsx b/frontend/src/ts/components/pages/account-settings/utils.tsx
index 55bc6f283d20..cf3e7e3b2215 100644
--- a/frontend/src/ts/components/pages/account-settings/utils.tsx
+++ b/frontend/src/ts/components/pages/account-settings/utils.tsx
@@ -1,22 +1,22 @@
-import { JSX, ParentProps, Show } from "solid-js";
+import { JSXElement, ParentProps } from "solid-js";
 
 import { cn } from "../../../utils/cn";
 import { Button, ButtonProps } from "../../common/Button";
 import { FaProps } from "../../common/Fa";
-import { H3 } from "../../common/Headers";
+import { Setting } from "../settings/Setting";
 
 export function Section(
   props: {
     title: string;
     fa: FaProps;
-    text?: JSX.Element;
+    text?: JSXElement;
     button?: ButtonProps;
     fullWidth?: boolean;
   } & ParentProps &
     (
       | {
           disabled: boolean;
-          disabledText: JSX.Element;
+          disabledText: JSXElement;
         }
       | {
           disabled?: never;
@@ -25,31 +25,25 @@ export function Section(
     ),
 ) {
   return (
-    <div>
-      <H3 text={props.title} fa={{ ...{ fixedWidth: true }, ...props.fa }} />
-
-      <div
-        classList={{
-          "lg:grid lg:grid-cols-2 xl:grid-cols-[2fr_1fr] gap-2 lg:gap-x-8":
-            props.fullWidth !== true,
-        }}
-      >
-        <Show
-          when={props.disabled === undefined || !props.disabled}
-          fallback={props.disabledText}
-        >
-          <Show when={props.text !== undefined}>
-            <p class="mb-4">{props.text}</p>
-          </Show>
-          <Show when={props.children}>{props.children}</Show>
-          <Show when={props.button}>
-            <Button
-              {...props.button}
-              class={cn("w-full", props.button?.class)}
-            />
-          </Show>
-        </Show>
-      </div>
-    </div>
+    <Setting
+      title={props.title}
+      fa={props.fa}
+      description={props.text}
+      showDeepLink={false}
+      {...(props.disabled !== undefined
+        ? {
+            disabled: props.disabled,
+            disabledText: props.disabledText,
+          }
+        : {})}
+      breakpoints={props.fullWidth ? "none" : "narrow"}
+      inputs={
+        props.button !== undefined ? (
+          <Button {...props.button} class={cn("w-full", props.button?.class)} />
+        ) : undefined
+      }
+    >
+      {props.children}
+    </Setting>
   );
 }
diff --git a/frontend/src/ts/components/pages/settings/Setting.tsx b/frontend/src/ts/components/pages/settings/Setting.tsx
index 4de64430c3d5..9d2c77ac1f4a 100644
--- a/frontend/src/ts/components/pages/settings/Setting.tsx
+++ b/frontend/src/ts/components/pages/settings/Setting.tsx
@@ -1,4 +1,4 @@
-import { JSXElement, Show } from "solid-js";
+import { JSXElement, ParentProps, Show } from "solid-js";
 import { z } from "zod";
 import { serialize } from "zod-urlsearchparams";
 
@@ -12,15 +12,39 @@ import { FaProps } from "../../common/Fa";
 import { H3 } from "../../common/Headers";
 
 type Props = {
-  key: string;
   title: string;
   fa: FaProps;
   description: string | JSXElement;
   inputs?: JSXElement;
   fullWidthInputs?: JSXElement;
-};
+  breakpoints?: "none" | "normal" | "narrow";
+} & ParentProps &
+  (
+    | {
+        /**
+         * data-settings-key
+         */
+        key: string;
+        showDeepLink?: true;
+      }
+    | {
+        key?: never;
+        showDeepLink: false;
+      }
+  ) &
+  (
+    | {
+        disabled: boolean;
+        disabledText: JSXElement;
+      }
+    | {
+        disabled?: never;
+        disabledText?: never;
+      }
+  );
 
 export function Setting(props: Props): JSXElement {
+  const breakpoints = () => props.breakpoints ?? "normal";
   return (
     <div
       class={cn(
@@ -28,57 +52,79 @@ export function Setting(props: Props): JSXElement {
         "-m-4 rounded-double p-4",
         // "animate-[ring-flash_4s_ease-in_forwards]",
       )}
-      data-setting-key={props.key}
+      {...("key" in props ? { "data-setting-key": props.key } : {})}
     >
       <div class="flex gap-2">
         <H3 text={props.title} fa={props.fa} class="pb-0" />
-        <Button
-          class="-m-2 p-2 opacity-0 group-hover:opacity-100"
-          variant="text"
-          fa={{ icon: "fa-link" }}
-          onClick={() => {
-            const urlParams = serialize({
-              schema: z.object({
-                highlight: z.string(),
-              }),
-              data: {
-                highlight: props.key,
-              },
-            });
-            const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
-            window.history.replaceState({}, "", newUrl);
-
-            navigator.clipboard
-              .writeText(window.location.toString())
-              .then(() => {
-                showSuccessNotification("Link copied to clipboard");
-              })
-              .catch((e: unknown) => {
-                showErrorNotification("Failed to copy to clipboard", {
-                  error: e,
-                });
-              });
-          }}
-        />
+        <Show when={props.showDeepLink}>
+          <DeepLinkButton key={(props as { key: string }).key} />
+        </Show>
       </div>
-      <Show when={props.inputs !== undefined}>
+
+      <Show
+        when={props.disabled === undefined || !props.disabled}
+        fallback={props.disabledText}
+      >
         <div
-          class={cn(
-            "grid grid-cols-1 gap-2",
-            "md:grid-cols-[1fr_1fr] md:gap-x-8",
-            "lg:grid-cols-[1.5fr_1fr]",
-            "xl:grid-cols-[2fr_1fr]",
-            props.inputs === undefined &&
-              "grid-cols-1 md:grid-cols-1 lg:grid-cols-1 xl:grid-cols-1",
-          )}
+          classList={{
+            "grid grid-cols-1 gap-2 md:grid-cols-[1fr_1fr] md:gap-x-8 lg:grid-cols-[1.5fr_1fr] xl:grid-cols-[2fr_1fr]":
+              breakpoints() === "normal",
+
+            "lg:grid lg:grid-cols-2 xl:grid-cols-[2fr_1fr] md:gap-x-8":
+              breakpoints() === "narrow",
+
+            "grid-cols-1 md:grid-cols-1 lg:grid-cols-1 xl:grid-cols-1":
+              props.inputs === undefined && breakpoints() === "normal",
+
+            "flex flex-col gap-2": breakpoints() === "none",
+          }}
         >
           <Show when={props.description !== ""}>
             <div class="">{props.description}</div>
           </Show>
-          <div>{props.inputs}</div>
+          <Show when={props.inputs !== undefined}>
+            <div>{props.inputs}</div>
+          </Show>
+          <Show when={props.children}>
+            <div>{props.children}</div>
+          </Show>
         </div>
+
+        <Show when={props.fullWidthInputs}>{props.fullWidthInputs}</Show>
       </Show>
-      <Show when={props.fullWidthInputs}>{props.fullWidthInputs}</Show>
     </div>
   );
 }
+
+function DeepLinkButton(props: { key: string }) {
+  return (
+    <Button
+      class="-m-2 p-2 opacity-0 group-hover:opacity-100"
+      variant="text"
+      fa={{ icon: "fa-link" }}
+      onClick={() => {
+        const urlParams = serialize({
+          schema: z.object({
+            highlight: z.string(),
+          }),
+          data: {
+            highlight: props.key,
+          },
+        });
+        const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
+        window.history.replaceState({}, "", newUrl);
+
+        navigator.clipboard
+          .writeText(window.location.toString())
+          .then(() => {
+            showSuccessNotification("Link copied to clipboard");
+          })
+          .catch((e: unknown) => {
+            showErrorNotification("Failed to copy to clipboard", {
+              error: e,
+            });
+          });
+      }}
+    />
+  );
+}
diff --git a/frontend/src/ts/states/account-settings.ts b/frontend/src/ts/states/account-settings.ts
index cd48c73f95da..24009ad4dcab 100644
--- a/frontend/src/ts/states/account-settings.ts
+++ b/frontend/src/ts/states/account-settings.ts
@@ -18,7 +18,7 @@ export const accountSettingsTabs = {
 export type AccountSettingsTab = keyof typeof accountSettingsTabs;
 
 export const [getCurrentTab, setCurrentTab] =
-  createSignal<AccountSettingsTab>("apeKeys");
+  createSignal<AccountSettingsTab>("account");
 
 export const [isApeKeysDenied, setApeKeysDenied] = createSignal<
   boolean | undefined

From 09839f04603654270d1cb8b29c67c69c70e58710 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 14 Jun 2026 12:45:01 +0200
Subject: [PATCH 15/23] cleanup

---
 .../pages/account-settings/AccountTab.tsx     | 11 +++---
 .../pages/account-settings/ApeKeysTab.tsx     |  2 +-
 .../account-settings/AuthenticationTab.tsx    |  8 ++--
 .../account-settings/BlockedUsersTab.tsx      |  2 +-
 .../pages/account-settings/DangerZoneTab.tsx  |  4 +-
 .../pages/account-settings/utils.tsx          | 39 ++++---------------
 .../ts/components/pages/settings/Setting.tsx  | 24 ++++++------
 7 files changed, 35 insertions(+), 55 deletions(-)

diff --git a/frontend/src/ts/components/pages/account-settings/AccountTab.tsx b/frontend/src/ts/components/pages/account-settings/AccountTab.tsx
index 0fe20a7ab563..6439ad67ac00 100644
--- a/frontend/src/ts/components/pages/account-settings/AccountTab.tsx
+++ b/frontend/src/ts/components/pages/account-settings/AccountTab.tsx
@@ -36,7 +36,7 @@ function DiscordNotConnected() {
     <Section
       title="discord integration"
       fa={{ variant: "brand", icon: "fa-discord" }}
-      text=<>
+      description=<>
         When you connect your monkeytype account to your Discord account, you
         will be automatically assigned a new role every time you achieve a new
         personal best in a 60 second test. If you link your accounts before
@@ -67,6 +67,7 @@ function DiscordConnected() {
     <Section
       title="discord integration"
       fa={{ variant: "brand", icon: "fa-discord" }}
+      description=<>t.b.d</>
     />
   );
 }
@@ -76,7 +77,7 @@ function UpdateAccountName() {
     <Section
       title="update account name"
       fa={{ icon: "fa-user" }}
-      text=<>
+      description=<>
         Change the name of your account.{" "}
         <span class="text-error">You can only do this once every 30 days.</span>
       </>
@@ -93,7 +94,7 @@ function UpdateStreakOffset() {
     <Section
       title="set streak hour offset"
       fa={{ icon: "fa-clock" }}
-      text=<>
+      description=<>
         Streaks reset at midnight UTC by default. If this is not convenient for
         you (for example if it means that streaks reset in the middle of the
         day), you can change the hour offset here.{" "}
@@ -119,7 +120,7 @@ function OptOutLeaderboard() {
     <Section
       title="opt out of leaderboards"
       fa={{ icon: "fa-crown" }}
-      text=<>
+      description=<>
         Use this if you frequently trigger the anticheat (for example if using
         stenography) to opt out of leaderboards.{" "}
         <span class="text-error">You can&apos;t undo this action!</span>
@@ -142,7 +143,7 @@ function ResetPersonalBests() {
     <Section
       title="reset personal bests"
       fa={{ icon: "fa-crown" }}
-      text=<>
+      description=<>
         Resets all your personal bests (but doesn&apos;t delete any tests from
         your history). <span class="text-error">You can&apos;t undo this!</span>
       </>
diff --git a/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx b/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx
index 749fdcbf1973..9ea386e19107 100644
--- a/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx
+++ b/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx
@@ -30,7 +30,7 @@ export function ApeKeysTab() {
       <Section
         title="ape keys"
         fa={{ icon: "fa-key" }}
-        text=<>
+        description=<>
           Generate Ape Keys to access certain API endpoints (
           <Button
             text="documentation"
diff --git a/frontend/src/ts/components/pages/account-settings/AuthenticationTab.tsx b/frontend/src/ts/components/pages/account-settings/AuthenticationTab.tsx
index 0878a73ecd98..eec61f231aff 100644
--- a/frontend/src/ts/components/pages/account-settings/AuthenticationTab.tsx
+++ b/frontend/src/ts/components/pages/account-settings/AuthenticationTab.tsx
@@ -32,7 +32,9 @@ function PasswordAuthentication() {
     <Section
       title="password authentication settings"
       fa={getAuthMethodIcon("password")}
-      text=<>Add password authentication, update your password or email.</>
+      description=<>
+        Add password authentication, update your password or email.
+      </>
     >
       <Show
         when={isUsingAuthenticationReactive("password")}
@@ -73,7 +75,7 @@ function ProviderAuthentication(props: { authMethod: ProviderAuthMethod }) {
     <Section
       title={`${getAuthMethodDisplay(props.authMethod)}`}
       fa={getAuthMethodIcon(props.authMethod)}
-      text=<>
+      description=<>
         Add or remove {getAuthMethodDisplay(props.authMethod)} authentication.
       </>
       button={
@@ -99,7 +101,7 @@ function RevokeAllTokens() {
     <Section
       title="revoke all tokens"
       fa={{ icon: "fa-user-slash" }}
-      text=<>
+      description=<>
         Revokes all tokens connected to your account. Do this if you think
         someone else has access to your account.
         <br />
diff --git a/frontend/src/ts/components/pages/account-settings/BlockedUsersTab.tsx b/frontend/src/ts/components/pages/account-settings/BlockedUsersTab.tsx
index 09ff81b309d6..6e8cdd5cb639 100644
--- a/frontend/src/ts/components/pages/account-settings/BlockedUsersTab.tsx
+++ b/frontend/src/ts/components/pages/account-settings/BlockedUsersTab.tsx
@@ -23,7 +23,7 @@ export function BlockedUsersTab() {
       title="blocked users"
       fa={{ icon: "fa-user-shield" }}
       fullWidth
-      text=<>Blocked users cannot send you friend requests.</>
+      description=<>Blocked users cannot send you friend requests.</>
     >
       <AsyncContent collections={{ query }}>
         {({ queryData }) => (
diff --git a/frontend/src/ts/components/pages/account-settings/DangerZoneTab.tsx b/frontend/src/ts/components/pages/account-settings/DangerZoneTab.tsx
index f610be6b3311..11fff1ec0c1c 100644
--- a/frontend/src/ts/components/pages/account-settings/DangerZoneTab.tsx
+++ b/frontend/src/ts/components/pages/account-settings/DangerZoneTab.tsx
@@ -18,7 +18,7 @@ function ResetAccount() {
     <Section
       title="reset account"
       fa={{ icon: "fa-redo-alt" }}
-      text=<>
+      description=<>
         Completely resets your account to a blank state.
         <br />
         <span class="text-error">You can&apos;t undo this action!</span>
@@ -38,7 +38,7 @@ function DeleteAccount() {
     <Section
       title="delete account"
       fa={{ icon: "fa-trash" }}
-      text=<>
+      description=<>
         Deletes your account and all data connected to it.
         <br />
         <span class="text-error">You can&apos;t undo this action!</span>
diff --git a/frontend/src/ts/components/pages/account-settings/utils.tsx b/frontend/src/ts/components/pages/account-settings/utils.tsx
index cf3e7e3b2215..525035e55201 100644
--- a/frontend/src/ts/components/pages/account-settings/utils.tsx
+++ b/frontend/src/ts/components/pages/account-settings/utils.tsx
@@ -1,49 +1,26 @@
-import { JSXElement, ParentProps } from "solid-js";
-
 import { cn } from "../../../utils/cn";
 import { Button, ButtonProps } from "../../common/Button";
-import { FaProps } from "../../common/Fa";
-import { Setting } from "../settings/Setting";
+import { Setting, SettingProps } from "../settings/Setting";
 
 export function Section(
-  props: {
-    title: string;
-    fa: FaProps;
-    text?: JSXElement;
+  props: Omit<
+    SettingProps,
+    "breakpoints" | "inputs" | "key" | "showDeepLink" | "fullWidthInputs"
+  > & {
     button?: ButtonProps;
     fullWidth?: boolean;
-  } & ParentProps &
-    (
-      | {
-          disabled: boolean;
-          disabledText: JSXElement;
-        }
-      | {
-          disabled?: never;
-          disabledText?: never;
-        }
-    ),
+  },
 ) {
   return (
     <Setting
-      title={props.title}
-      fa={props.fa}
-      description={props.text}
+      {...(props as SettingProps)}
       showDeepLink={false}
-      {...(props.disabled !== undefined
-        ? {
-            disabled: props.disabled,
-            disabledText: props.disabledText,
-          }
-        : {})}
       breakpoints={props.fullWidth ? "none" : "narrow"}
       inputs={
         props.button !== undefined ? (
           <Button {...props.button} class={cn("w-full", props.button?.class)} />
         ) : undefined
       }
-    >
-      {props.children}
-    </Setting>
+    />
   );
 }
diff --git a/frontend/src/ts/components/pages/settings/Setting.tsx b/frontend/src/ts/components/pages/settings/Setting.tsx
index 9d2c77ac1f4a..5ff3bbfd94f9 100644
--- a/frontend/src/ts/components/pages/settings/Setting.tsx
+++ b/frontend/src/ts/components/pages/settings/Setting.tsx
@@ -11,7 +11,7 @@ import { Button } from "../../common/Button";
 import { FaProps } from "../../common/Fa";
 import { H3 } from "../../common/Headers";
 
-type Props = {
+export type SettingProps = {
   title: string;
   fa: FaProps;
   description: string | JSXElement;
@@ -43,7 +43,7 @@ type Props = {
       }
   );
 
-export function Setting(props: Props): JSXElement {
+export function Setting(props: SettingProps): JSXElement {
   const breakpoints = () => props.breakpoints ?? "normal";
   return (
     <div
@@ -66,18 +66,18 @@ export function Setting(props: Props): JSXElement {
         fallback={props.disabledText}
       >
         <div
-          classList={{
-            "grid grid-cols-1 gap-2 md:grid-cols-[1fr_1fr] md:gap-x-8 lg:grid-cols-[1.5fr_1fr] xl:grid-cols-[2fr_1fr]":
-              breakpoints() === "normal",
+          class={cn(
+            "grid grid-cols-1 gap-2",
+            breakpoints() === "normal" &&
+              "md:grid-cols-[1fr_1fr] md:gap-x-8 lg:grid-cols-[1.5fr_1fr] xl:grid-cols-[2fr_1fr]",
 
-            "lg:grid lg:grid-cols-2 xl:grid-cols-[2fr_1fr] md:gap-x-8":
-              breakpoints() === "narrow",
+            breakpoints() === "narrow" &&
+              "lg:grid lg:grid-cols-2 xl:grid-cols-[2fr_1fr] md:gap-x-8",
 
-            "grid-cols-1 md:grid-cols-1 lg:grid-cols-1 xl:grid-cols-1":
-              props.inputs === undefined && breakpoints() === "normal",
-
-            "flex flex-col gap-2": breakpoints() === "none",
-          }}
+            props.inputs === undefined &&
+              breakpoints() === "normal" &&
+              "grid-cols-1 md:grid-cols-1 lg:grid-cols-1 xl:grid-cols-1",
+          )}
         >
           <Show when={props.description !== ""}>
             <div class="">{props.description}</div>

From 1e70c272b025958ce23b0f96836696f4e28b7562 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 14 Jun 2026 12:47:49 +0200
Subject: [PATCH 16/23] =?UTF-8?q?=F0=9F=A6=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/ts/components/pages/account-settings/utils.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/ts/components/pages/account-settings/utils.tsx b/frontend/src/ts/components/pages/account-settings/utils.tsx
index 525035e55201..f486147d8be4 100644
--- a/frontend/src/ts/components/pages/account-settings/utils.tsx
+++ b/frontend/src/ts/components/pages/account-settings/utils.tsx
@@ -15,6 +15,7 @@ export function Section(
     <Setting
       {...(props as SettingProps)}
       showDeepLink={false}
+      key={undefined}
       breakpoints={props.fullWidth ? "none" : "narrow"}
       inputs={
         props.button !== undefined ? (

From ba55223efd49e6b233ba327f7821a53cd821e3be Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 14 Jun 2026 13:12:01 +0200
Subject: [PATCH 17/23] move Settings to components/common

---
 .../{pages/settings => common}/Setting.tsx           | 12 ++++++------
 .../ts/components/pages/account-settings/utils.tsx   |  2 +-
 .../ts/components/pages/settings/SettingsPage.tsx    |  2 +-
 .../settings/custom-setting/AnimationFpsLimit.tsx    |  2 +-
 .../settings/custom-setting/AutoSwitchTheme.tsx      |  2 +-
 .../settings/custom-setting/CustomBackground.tsx     |  2 +-
 .../custom-setting/CustomBackgroundFilters.tsx       |  2 +-
 .../settings/custom-setting/CustomLayoutfluid.tsx    |  2 +-
 .../pages/settings/custom-setting/CustomPolyglot.tsx |  2 +-
 .../pages/settings/custom-setting/FontFamily.tsx     |  2 +-
 .../pages/settings/custom-setting/Funbox.tsx         |  2 +-
 .../pages/settings/custom-setting/ImportExport.tsx   |  2 +-
 .../pages/settings/custom-setting/KeymapLayout.tsx   |  2 +-
 .../pages/settings/custom-setting/KeymapSize.tsx     |  2 +-
 .../pages/settings/custom-setting/Language.tsx       |  2 +-
 .../pages/settings/custom-setting/Layout.tsx         |  2 +-
 .../pages/settings/custom-setting/MaxLineWidth.tsx   |  2 +-
 .../pages/settings/custom-setting/MinAcc.tsx         |  2 +-
 .../pages/settings/custom-setting/MinBurst.tsx       |  2 +-
 .../pages/settings/custom-setting/MinSpeed.tsx       |  2 +-
 .../pages/settings/custom-setting/PaceCaret.tsx      |  2 +-
 .../pages/settings/custom-setting/Presets.tsx        |  2 +-
 .../pages/settings/custom-setting/SoundVolume.tsx    |  2 +-
 .../pages/settings/custom-setting/Tags.tsx           |  2 +-
 .../pages/settings/custom-setting/Theme.tsx          |  2 +-
 25 files changed, 30 insertions(+), 30 deletions(-)
 rename frontend/src/ts/components/{pages/settings => common}/Setting.tsx (91%)

diff --git a/frontend/src/ts/components/pages/settings/Setting.tsx b/frontend/src/ts/components/common/Setting.tsx
similarity index 91%
rename from frontend/src/ts/components/pages/settings/Setting.tsx
rename to frontend/src/ts/components/common/Setting.tsx
index 5ff3bbfd94f9..fb61d0a2e0f3 100644
--- a/frontend/src/ts/components/pages/settings/Setting.tsx
+++ b/frontend/src/ts/components/common/Setting.tsx
@@ -5,11 +5,11 @@ import { serialize } from "zod-urlsearchparams";
 import {
   showErrorNotification,
   showSuccessNotification,
-} from "../../../states/notifications";
-import { cn } from "../../../utils/cn";
-import { Button } from "../../common/Button";
-import { FaProps } from "../../common/Fa";
-import { H3 } from "../../common/Headers";
+} from "../../states/notifications";
+import { cn } from "../../utils/cn";
+import { Button } from "./Button";
+import { FaProps } from "./Fa";
+import { H3 } from "./Headers";
 
 export type SettingProps = {
   title: string;
@@ -72,7 +72,7 @@ export function Setting(props: SettingProps): JSXElement {
               "md:grid-cols-[1fr_1fr] md:gap-x-8 lg:grid-cols-[1.5fr_1fr] xl:grid-cols-[2fr_1fr]",
 
             breakpoints() === "narrow" &&
-              "lg:grid lg:grid-cols-2 xl:grid-cols-[2fr_1fr] md:gap-x-8",
+              "md:gap-x-8 lg:grid lg:grid-cols-2 xl:grid-cols-[2fr_1fr]",
 
             props.inputs === undefined &&
               breakpoints() === "normal" &&
diff --git a/frontend/src/ts/components/pages/account-settings/utils.tsx b/frontend/src/ts/components/pages/account-settings/utils.tsx
index f486147d8be4..bb41bf8cf30c 100644
--- a/frontend/src/ts/components/pages/account-settings/utils.tsx
+++ b/frontend/src/ts/components/pages/account-settings/utils.tsx
@@ -1,6 +1,6 @@
 import { cn } from "../../../utils/cn";
 import { Button, ButtonProps } from "../../common/Button";
-import { Setting, SettingProps } from "../settings/Setting";
+import { Setting, SettingProps } from "../../common/Setting";
 
 export function Section(
   props: Omit<
diff --git a/frontend/src/ts/components/pages/settings/SettingsPage.tsx b/frontend/src/ts/components/pages/settings/SettingsPage.tsx
index 16da1cc15277..df344727ae74 100644
--- a/frontend/src/ts/components/pages/settings/SettingsPage.tsx
+++ b/frontend/src/ts/components/pages/settings/SettingsPage.tsx
@@ -25,6 +25,7 @@ import { Anime, AnimeShow } from "../../common/anime";
 import { Button } from "../../common/Button";
 import { Fa } from "../../common/Fa";
 import { Page } from "../../common/Page";
+import { Setting } from "../../common/Setting";
 import { CommandlineHotkey } from "../../hotkeys/CommandlineHotkey";
 import { InputField } from "../../ui/form/InputField";
 import { fromSchema } from "../../ui/form/utils";
@@ -51,7 +52,6 @@ import { SoundVolume } from "./custom-setting/SoundVolume";
 import { Tags } from "./custom-setting/Tags";
 import { Theme } from "./custom-setting/Theme";
 import { QuickNav } from "./QuickNav";
-import { Setting } from "./Setting";
 
 export function SettingsPage(): JSXElement {
   const [hasLocalBg] = createResource(
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/AnimationFpsLimit.tsx b/frontend/src/ts/components/pages/settings/custom-setting/AnimationFpsLimit.tsx
index c7ad5b19eba3..0f17bc74865f 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/AnimationFpsLimit.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/AnimationFpsLimit.tsx
@@ -5,9 +5,9 @@ import { fpsLimitSchema, getfpsLimit, setfpsLimit } from "../../../../anim";
 import { useSavedIndicator } from "../../../../hooks/useSavedIndicator";
 import { Button } from "../../../common/Button";
 import { Separator } from "../../../common/Separator";
+import { Setting } from "../../../common/Setting";
 import { InputField } from "../../../ui/form/InputField";
 import { fromSchema } from "../../../ui/form/utils";
-import { Setting } from "../Setting";
 
 export function AnimationFpsLimit(): JSXElement {
   const savedIndicator = useSavedIndicator();
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/AutoSwitchTheme.tsx b/frontend/src/ts/components/pages/settings/custom-setting/AutoSwitchTheme.tsx
index cd46bf20c74b..9e53a2e09d5f 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/AutoSwitchTheme.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/AutoSwitchTheme.tsx
@@ -7,8 +7,8 @@ import { getConfig } from "../../../../config/store";
 import { ThemesList } from "../../../../constants/themes";
 import { cn } from "../../../../utils/cn";
 import { Button } from "../../../common/Button";
+import { Setting } from "../../../common/Setting";
 import SlimSelect from "../../../ui/SlimSelect";
-import { Setting } from "../Setting";
 
 export function AutoSwitchTheme(): JSXElement {
   return (
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/CustomBackground.tsx b/frontend/src/ts/components/pages/settings/custom-setting/CustomBackground.tsx
index 9f2b526696ea..0e79cc766360 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/CustomBackground.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/CustomBackground.tsx
@@ -16,9 +16,9 @@ import { getOptions } from "../../../../utils/zod";
 import { Button } from "../../../common/Button";
 import { Fa } from "../../../common/Fa";
 import { Separator } from "../../../common/Separator";
+import { Setting } from "../../../common/Setting";
 import { InputField } from "../../../ui/form/InputField";
 import { fromSchema } from "../../../ui/form/utils";
-import { Setting } from "../Setting";
 
 export function CustomBackground(): JSXElement {
   const savedIndicator = useSavedIndicator();
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/CustomBackgroundFilters.tsx b/frontend/src/ts/components/pages/settings/custom-setting/CustomBackgroundFilters.tsx
index b4d43e4598c4..5a01de0fabaa 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/CustomBackgroundFilters.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/CustomBackgroundFilters.tsx
@@ -4,8 +4,8 @@ import { configMetadata } from "../../../../config/metadata";
 import { setConfig } from "../../../../config/setters";
 import { getConfig } from "../../../../config/store";
 import { applyCustomBackgroundFilters } from "../../../../controllers/theme-controller";
+import { Setting } from "../../../common/Setting";
 import { Slider } from "../../../common/Slider";
-import { Setting } from "../Setting";
 
 export function CustomBackgroundFilters(): JSXElement {
   let refBlur: HTMLInputElement | undefined = undefined;
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/CustomLayoutfluid.tsx b/frontend/src/ts/components/pages/settings/custom-setting/CustomLayoutfluid.tsx
index 51afb4bceb9e..ff8315d15530 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/CustomLayoutfluid.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/CustomLayoutfluid.tsx
@@ -6,8 +6,8 @@ import { setConfig } from "../../../../config/setters";
 import { getConfig } from "../../../../config/store";
 import { LayoutsList } from "../../../../constants/layouts";
 import { areUnsortedArraysEqual } from "../../../../utils/arrays";
+import { Setting } from "../../../common/Setting";
 import SlimSelect from "../../../ui/SlimSelect";
-import { Setting } from "../Setting";
 
 export function CustomLayoutfluid(): JSXElement {
   return (
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/CustomPolyglot.tsx b/frontend/src/ts/components/pages/settings/custom-setting/CustomPolyglot.tsx
index 5de756d72e51..3b65c893504d 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/CustomPolyglot.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/CustomPolyglot.tsx
@@ -11,8 +11,8 @@ import {
 } from "../../../../constants/languages";
 import { areUnsortedArraysEqual } from "../../../../utils/arrays";
 import { getLanguageDisplayString } from "../../../../utils/strings";
+import { Setting } from "../../../common/Setting";
 import SlimSelect from "../../../ui/SlimSelect";
-import { Setting } from "../Setting";
 
 export function CustomPolyglot(): JSXElement {
   return (
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/FontFamily.tsx b/frontend/src/ts/components/pages/settings/custom-setting/FontFamily.tsx
index 19ace4b8a7c4..f3d789623ee2 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/FontFamily.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/FontFamily.tsx
@@ -13,7 +13,7 @@ import { normalizeName } from "../../../../utils/strings";
 import { getOptions } from "../../../../utils/zod";
 import { Button } from "../../../common/Button";
 import { Separator } from "../../../common/Separator";
-import { Setting } from "../Setting";
+import { Setting } from "../../../common/Setting";
 
 export function FontFamily(): JSXElement {
   const [hasLocalFont, { refetch }] = createResource(async () =>
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/Funbox.tsx b/frontend/src/ts/components/pages/settings/custom-setting/Funbox.tsx
index 340654f92456..a13ec89540f9 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/Funbox.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/Funbox.tsx
@@ -7,7 +7,7 @@ import { toggleFunbox } from "../../../../config/setters";
 import { getConfig } from "../../../../config/store";
 import { getActiveFunboxNames } from "../../../../test/funbox/list";
 import { Button } from "../../../common/Button";
-import { Setting } from "../Setting";
+import { Setting } from "../../../common/Setting";
 
 export function Funbox(): JSXElement {
   return (
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/ImportExport.tsx b/frontend/src/ts/components/pages/settings/custom-setting/ImportExport.tsx
index 14d5d0ea8cc7..83581b4ac7e6 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/ImportExport.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/ImportExport.tsx
@@ -9,7 +9,7 @@ import {
 } from "../../../../states/notifications";
 import { showSimpleModal } from "../../../../states/simple-modal";
 import { Button } from "../../../common/Button";
-import { Setting } from "../Setting";
+import { Setting } from "../../../common/Setting";
 
 export function ImportExport(): JSXElement {
   return (
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/KeymapLayout.tsx b/frontend/src/ts/components/pages/settings/custom-setting/KeymapLayout.tsx
index bc62e730bf21..fb7bb99b2366 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/KeymapLayout.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/KeymapLayout.tsx
@@ -5,8 +5,8 @@ import { configMetadata } from "../../../../config/metadata";
 import { setConfig } from "../../../../config/setters";
 import { getConfig } from "../../../../config/store";
 import { LayoutsList } from "../../../../constants/layouts";
+import { Setting } from "../../../common/Setting";
 import SlimSelect from "../../../ui/SlimSelect";
-import { Setting } from "../Setting";
 
 export function KeymapLayout(): JSXElement {
   return (
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/KeymapSize.tsx b/frontend/src/ts/components/pages/settings/custom-setting/KeymapSize.tsx
index b1620895b688..3da2f86f1145 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/KeymapSize.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/KeymapSize.tsx
@@ -3,8 +3,8 @@ import { JSXElement } from "solid-js";
 import { configMetadata } from "../../../../config/metadata";
 import { setConfig } from "../../../../config/setters";
 import { getConfig } from "../../../../config/store";
+import { Setting } from "../../../common/Setting";
 import { Slider } from "../../../common/Slider";
-import { Setting } from "../Setting";
 
 export function KeymapSize(): JSXElement {
   return (
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/Language.tsx b/frontend/src/ts/components/pages/settings/custom-setting/Language.tsx
index f3acf14a7cf9..05da846d38b8 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/Language.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/Language.tsx
@@ -10,8 +10,8 @@ import {
   LanguageGroups,
 } from "../../../../constants/languages";
 import { getLanguageDisplayString } from "../../../../utils/strings";
+import { Setting } from "../../../common/Setting";
 import SlimSelect from "../../../ui/SlimSelect";
-import { Setting } from "../Setting";
 
 export function Language(): JSXElement {
   return (
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/Layout.tsx b/frontend/src/ts/components/pages/settings/custom-setting/Layout.tsx
index 1f6271834d80..03b715be812c 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/Layout.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/Layout.tsx
@@ -5,8 +5,8 @@ import { configMetadata } from "../../../../config/metadata";
 import { setConfig } from "../../../../config/setters";
 import { getConfig } from "../../../../config/store";
 import { LayoutsList } from "../../../../constants/layouts";
+import { Setting } from "../../../common/Setting";
 import SlimSelect from "../../../ui/SlimSelect";
-import { Setting } from "../Setting";
 
 export function Layout(): JSXElement {
   return (
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/MaxLineWidth.tsx b/frontend/src/ts/components/pages/settings/custom-setting/MaxLineWidth.tsx
index 822523b1cb95..59e9d59cdd04 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/MaxLineWidth.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/MaxLineWidth.tsx
@@ -6,10 +6,10 @@ import { configMetadata } from "../../../../config/metadata";
 import { setConfig } from "../../../../config/setters";
 import { getConfig } from "../../../../config/store";
 import { useSavedIndicator } from "../../../../hooks/useSavedIndicator";
+import { Setting } from "../../../common/Setting";
 // import { showSuccessNotification } from "../../../../states/notifications";
 import { InputField } from "../../../ui/form/InputField";
 import { fromSchema } from "../../../ui/form/utils";
-import { Setting } from "../Setting";
 
 export function MaxLineWidth(): JSXElement {
   const { component: SavedIndicator, flash } = useSavedIndicator();
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/MinAcc.tsx b/frontend/src/ts/components/pages/settings/custom-setting/MinAcc.tsx
index 2abd3ced0477..7db767a927a7 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/MinAcc.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/MinAcc.tsx
@@ -8,9 +8,9 @@ import { getConfig } from "../../../../config/store";
 import { useSavedIndicator } from "../../../../hooks/useSavedIndicator";
 // import { showSuccessNotification } from "../../../../states/notifications";
 import { Button } from "../../../common/Button";
+import { Setting } from "../../../common/Setting";
 import { InputField } from "../../../ui/form/InputField";
 import { fromSchema } from "../../../ui/form/utils";
-import { Setting } from "../Setting";
 
 export function MinAcc(): JSXElement {
   const savedIndicator = useSavedIndicator();
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/MinBurst.tsx b/frontend/src/ts/components/pages/settings/custom-setting/MinBurst.tsx
index adec7f6979d5..8600b2a825ca 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/MinBurst.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/MinBurst.tsx
@@ -8,9 +8,9 @@ import { getConfig } from "../../../../config/store";
 import { useSavedIndicator } from "../../../../hooks/useSavedIndicator";
 // import { showSuccessNotification } from "../../../../states/notifications";
 import { Button } from "../../../common/Button";
+import { Setting } from "../../../common/Setting";
 import { InputField } from "../../../ui/form/InputField";
 import { fromSchema } from "../../../ui/form/utils";
-import { Setting } from "../Setting";
 
 export function MinBurst(): JSXElement {
   const savedIndicator = useSavedIndicator();
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/MinSpeed.tsx b/frontend/src/ts/components/pages/settings/custom-setting/MinSpeed.tsx
index b9ae408602a4..34a21200f0af 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/MinSpeed.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/MinSpeed.tsx
@@ -8,9 +8,9 @@ import { getConfig } from "../../../../config/store";
 import { useSavedIndicator } from "../../../../hooks/useSavedIndicator";
 // import { showSuccessNotification } from "../../../../states/notifications";
 import { Button } from "../../../common/Button";
+import { Setting } from "../../../common/Setting";
 import { InputField } from "../../../ui/form/InputField";
 import { fromSchema } from "../../../ui/form/utils";
-import { Setting } from "../Setting";
 
 export function MinSpeed(): JSXElement {
   const savedIndicator = useSavedIndicator();
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/PaceCaret.tsx b/frontend/src/ts/components/pages/settings/custom-setting/PaceCaret.tsx
index 89226f20319e..ea019e169907 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/PaceCaret.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/PaceCaret.tsx
@@ -11,9 +11,9 @@ import { getConfig } from "../../../../config/store";
 import { useSavedIndicator } from "../../../../hooks/useSavedIndicator";
 import { getOptions } from "../../../../utils/zod";
 import { Button } from "../../../common/Button";
+import { Setting } from "../../../common/Setting";
 import { InputField } from "../../../ui/form/InputField";
 import { fromSchema } from "../../../ui/form/utils";
-import { Setting } from "../Setting";
 
 export function PaceCaret(): JSXElement {
   const savedIndicator = useSavedIndicator();
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/Presets.tsx b/frontend/src/ts/components/pages/settings/custom-setting/Presets.tsx
index 1bcfc893806f..334cbe43029a 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/Presets.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/Presets.tsx
@@ -9,7 +9,7 @@ import { showEditPresetModal } from "../../../../states/edit-preset-modal";
 import { showModal } from "../../../../states/modals";
 import { showSimpleModal } from "../../../../states/simple-modal";
 import { Button } from "../../../common/Button";
-import { Setting } from "../Setting";
+import { Setting } from "../../../common/Setting";
 
 export function Presets(): JSXElement {
   const presets = usePresetsLiveQuery();
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/SoundVolume.tsx b/frontend/src/ts/components/pages/settings/custom-setting/SoundVolume.tsx
index 4f5dc93cadc0..043cce5fa24e 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/SoundVolume.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/SoundVolume.tsx
@@ -7,8 +7,8 @@ import {
   playClick,
   previewClick,
 } from "../../../../controllers/sound-controller";
+import { Setting } from "../../../common/Setting";
 import { Slider } from "../../../common/Slider";
-import { Setting } from "../Setting";
 
 export function SoundVolume(): JSXElement {
   return (
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/Tags.tsx b/frontend/src/ts/components/pages/settings/custom-setting/Tags.tsx
index dfc3301f225f..969e7f2655fa 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/Tags.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/Tags.tsx
@@ -13,8 +13,8 @@ import {
 import { showSimpleModal } from "../../../../states/simple-modal";
 import { normalizeName } from "../../../../utils/strings";
 import { Button } from "../../../common/Button";
+import { Setting } from "../../../common/Setting";
 import { showAddTagModal } from "../../../modals/AddTagModal";
-import { Setting } from "../Setting";
 
 export function Tags(): JSXElement {
   const tags = useTagsLiveQuery();
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/Theme.tsx b/frontend/src/ts/components/pages/settings/custom-setting/Theme.tsx
index 9b30d31eaa64..cc9fcddbe2ba 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/Theme.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/Theme.tsx
@@ -41,7 +41,7 @@ import { AnimeMatch } from "../../../common/anime/AnimeMatch";
 import { Button } from "../../../common/Button";
 import { Fa } from "../../../common/Fa";
 import { Separator } from "../../../common/Separator";
-import { Setting } from "../Setting";
+import { Setting } from "../../../common/Setting";
 
 export const sortedThemes: ThemeWithName[] = [...ThemesList].sort((a, b) => {
   const b1 = hexToHSL(a.bg);

From b7134ae61cf026b19b4416f9ffac8400c7857361 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 14 Jun 2026 13:48:14 +0200
Subject: [PATCH 18/23] add url parameters, nuke old code

---
 frontend/src/html/pages/account-settings.html | 285 -----------------
 frontend/src/index.html                       |   7 +-
 frontend/src/styles/account-settings.scss     | 195 ------------
 frontend/src/styles/index.scss                |   2 +-
 .../account-settings/AddPasswordAuthModal.tsx |   6 +-
 .../RemoveAuthMethodModal.tsx                 |   3 -
 frontend/src/ts/components/mount.tsx          |   5 +-
 .../account-settings/AccountSettingsPage.tsx  |   5 +-
 .../src/ts/controllers/page-controller.ts     |  16 +-
 frontend/src/ts/pages/account-settings.ts     | 294 ------------------
 frontend/src/ts/states/account-settings.ts    |  48 ++-
 .../src/ts/states/leaderboard-selection.ts    |   2 +-
 12 files changed, 69 insertions(+), 799 deletions(-)
 delete mode 100644 frontend/src/html/pages/account-settings.html
 delete mode 100644 frontend/src/styles/account-settings.scss
 delete mode 100644 frontend/src/ts/pages/account-settings.ts

diff --git a/frontend/src/html/pages/account-settings.html b/frontend/src/html/pages/account-settings.html
deleted file mode 100644
index f809e0eac9cd..000000000000
--- a/frontend/src/html/pages/account-settings.html
+++ /dev/null
@@ -1,285 +0,0 @@
-<div class="page pageAccountSettings hidden" id="pageAccountSettings">
-  <div class="content">
-    <!-- <div class="title">
-      <i class="fas fa-cog"></i>
-      account settings
-    </div> -->
-    <div class="main">
-      <div class="tabs">
-        <button class="text" data-tab="account">
-          <i class="fas fa-user"></i>
-          account
-        </button>
-        <button class="text" data-tab="authentication">
-          <i class="fas fa-key"></i>
-          authentication
-        </button>
-        <button class="text" data-tab="blockedUsers">
-          <i class="fas fa-user-shield"></i>
-          blocked users
-        </button>
-        <button class="text" data-tab="apeKeys">
-          <i class="fas fa-code"></i>
-          ape keys
-        </button>
-        <button class="text" data-tab="dangerZone">
-          <i class="fas fa-exclamation-triangle"></i>
-          danger zone
-        </button>
-      </div>
-      <div class="right">
-        <div class="tab hidden" data-tab="account">
-          <div class="section discordIntegration">
-            <div class="title">
-              <i class="fab fa-discord"></i>
-              <span>discord integration</span>
-            </div>
-            <div class="text">
-              When you connect your monkeytype account to your Discord account,
-              you will be automatically assigned a new role every time you
-              achieve a new personal best in a 60 second test. If you link your
-              accounts before joining the Discord server, the bot
-              <i>will not</i>
-              give you a role.
-            </div>
-            <div class="buttons">
-              <button class="getLinkAndGoToOauth">link</button>
-            </div>
-            <div class="info hidden">
-              <div>
-                <i class="fas fa-check"></i>
-                Your accounts are linked!
-              </div>
-              <div id="discordButtonGroup">
-                <button
-                  id="updateDiscordAvatarButton"
-                  class="textButton getLinkAndGoToOauth"
-                >
-                  <i class="fas fa-sync-alt" aria-hidden="true"></i>
-                  Update avatar
-                </button>
-                <button id="unlinkDiscordButton" class="textButton">
-                  <i class="fas fa-unlink" aria-hidden="true"></i>
-                  Unlink
-                </button>
-              </div>
-            </div>
-          </div>
-          <div class="section updateAccountName">
-            <div class="title">
-              <i class="fas fa-user"></i>
-              <span>update account name</span>
-            </div>
-            <div class="text">
-              Change the name of your account.
-              <span class="red">You can only do this once every 30 days.</span>
-            </div>
-            <div class="buttons">
-              <button id="updateAccountName">update name</button>
-            </div>
-          </div>
-          <div class="section setStreakHourOffset">
-            <div class="title">
-              <i class="fas fa-clock"></i>
-              <span>set streak hour offset</span>
-            </div>
-            <div class="text">
-              Streaks reset at midnight UTC by default. If this is not
-              convenient for you (for example if it means that streaks reset in
-              the middle of the day), you can change the hour offset here.
-              <span class="red">You can only do this once!</span>
-            </div>
-            <div class="buttons">
-              <button id="setStreakHourOffset">update hour offset</button>
-            </div>
-            <div class="info">
-              <i class="fas fa-exclamation-triangle"></i>
-              You have already set your streak hour offset to
-              <span>0</span>
-              .
-            </div>
-          </div>
-          <div class="section optOutOfLeaderboards">
-            <div class="title">
-              <i class="fas fa-crown"></i>
-              <span>opt out of leaderboards</span>
-            </div>
-            <div class="text">
-              Use this if you frequently trigger the anticheat (for example if
-              using stenography) to opt out of leaderboards.
-              <span class="red">You can't undo this action!</span>
-            </div>
-            <div class="optedOut">
-              <i class="fas fa-exclamation-triangle"></i>
-              You have opted out of leaderboards.
-            </div>
-            <div class="buttons">
-              <button id="optOutOfLeaderboardsButton">opt out</button>
-            </div>
-          </div>
-          <div class="section resetPersonalBests">
-            <div class="title">
-              <i class="fas fa-crown"></i>
-              <span>reset personal bests</span>
-            </div>
-            <div class="text">
-              Resets all your personal bests (but doesn't delete any tests from
-              your history).
-              <span class="red">You can't undo this!</span>
-            </div>
-            <div class="buttons">
-              <button id="resetPersonalBestsButton">
-                reset personal bests
-              </button>
-            </div>
-          </div>
-          <!--  -->
-        </div>
-        <div class="tab hidden" data-tab="apeKeys">
-          <div class="section apeKeys">
-            <div class="title">
-              <i class="fas fa-key"></i>
-              <span>ape keys</span>
-            </div>
-            <div class="text">
-              Generate Ape Keys to access certain API endpoints
-              <span style="display: inline-flex">
-                (
-                <a
-                  href="https://api.monkeytype.com/docs"
-                  target="_blank"
-                  rel="noopener"
-                >
-                  documentation
-                </a>
-                ).&nbsp;
-              </span>
-              More endpoints will be added in the future.
-            </div>
-            <div class="lostAccess hidden">
-              <i class="fas fa-times"></i>
-              You have lost access to Ape Keys. Please contact support if you
-              believe this is a mistake.
-            </div>
-            <div class="buttons">
-              <button id="generateNewApeKey">generate new key</button>
-            </div>
-          </div>
-          <table>
-            <thead>
-              <tr>
-                <td width="1px">active</td>
-                <td>name</td>
-                <td>created on</td>
-                <td>modified on</td>
-                <td>last used on</td>
-                <td width="1px"></td>
-              </tr>
-            </thead>
-            <tbody></tbody>
-          </table>
-        </div>
-        <div class="tab hidden" data-tab="authentication">
-          <!-- <div class="title">
-            <i class="fas fa-key"></i>
-            authentication
-          </div> -->
-          <div class="section passwordAuthSettings">
-            <div class="title">
-              <i class="fas fa-lock"></i>
-              <span>password authentication settings</span>
-            </div>
-            <div class="text">
-              Add password authentication, update your password or email.
-            </div>
-            <div class="buttons vertical">
-              <button id="addPasswordAuth">add password authentication</button>
-              <button id="emailPasswordAuth">update email</button>
-              <button id="passPasswordAuth">update password</button>
-              <button id="removePasswordAuth">
-                remove password authentication
-              </button>
-            </div>
-          </div>
-          <div class="section googleAuthSettings">
-            <div class="title">
-              <i class="fab fa-google"></i>
-              <span>google authentication settings</span>
-            </div>
-            <div class="text">Add or remove Google authentication.</div>
-            <div class="buttons vertical">
-              <button id="addGoogleAuth">add google authentication</button>
-              <button id="removeGoogleAuth">
-                remove google authentication
-              </button>
-            </div>
-          </div>
-          <div class="section githubAuthSettings">
-            <div class="title">
-              <i class="fab fa-github"></i>
-              <span>github authentication settings</span>
-            </div>
-            <div class="text">Add or remove GitHub authentication.</div>
-            <div class="buttons vertical">
-              <button id="addGithubAuth">add github authentication</button>
-              <button id="removeGithubAuth">
-                remove github authentication
-              </button>
-            </div>
-          </div>
-          <div class="section revokeAllTokens">
-            <div class="title">
-              <i class="fas fa-user-slash"></i>
-              <span>revoke all tokens</span>
-            </div>
-            <div class="text">
-              Revokes all tokens connected to your account. Do this if you think
-              someone else has access to your account.
-              <br />
-              <span class="red">This will log you out of all devices.</span>
-            </div>
-            <div class="buttons">
-              <button class="danger" id="revokeAllTokens">
-                revoke all tokens
-              </button>
-            </div>
-          </div>
-        </div>
-        <div class="tab hidden" data-tab="blockedUsers">
-          <mount data-component="blockedusers" />
-        </div>
-        <div class="tab hidden" data-tab="dangerZone">
-          <div class="section resetAccount">
-            <div class="title">
-              <i class="fas fa-redo-alt"></i>
-              <span>reset account</span>
-            </div>
-            <div class="text">
-              Completely resets your account to a blank state.
-              <br />
-              <span class="red">You can't undo this action!</span>
-            </div>
-            <div class="buttons">
-              <button class="danger" id="resetAccount">reset account</button>
-            </div>
-          </div>
-          <div class="section deleteAccount">
-            <div class="title">
-              <i class="fas fa-trash"></i>
-              <span>delete account</span>
-            </div>
-            <div class="text">
-              Deletes your account and all data connected to it.
-              <br />
-              <span class="red">You can't undo this action!</span>
-            </div>
-            <div class="buttons">
-              <button class="danger" id="deleteAccount">delete account</button>
-            </div>
-          </div>
-        </div>
-        <!-- end of tabs -->
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/frontend/src/index.html b/frontend/src/index.html
index 17deb81ec402..e462f01e88d2 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -33,8 +33,7 @@
         </div>
         <load src="html/pages/loading.html" />
 
-        <!-- TODO revert-->
-        <div class="page pageAbout hidden" id="pageAbout">
+        <div class="page pageAbout hidden full-width" id="pageAbout">
           <mount data-component="aboutpage"></mount>
         </div>
 
@@ -62,7 +61,9 @@
           <mount data-component="notfoundpage"></mount>
         </div>
 
-        <load src="html/pages/account-settings.html" />
+        <div class="page pageAccountSettings hidden" id="pageAccountSettings">
+          <mount data-component="accountsettingspage"></mount>
+        </div>
 
         <div class="page pageFriends hidden" id="pageFriends">
           <mount data-component="friendspage"></mount>
diff --git a/frontend/src/styles/account-settings.scss b/frontend/src/styles/account-settings.scss
deleted file mode 100644
index ca4816e592e3..000000000000
--- a/frontend/src/styles/account-settings.scss
+++ /dev/null
@@ -1,195 +0,0 @@
-.pageAccountSettings {
-  & > .content > .title {
-    font-size: 2rem;
-    color: var(--sub-color);
-    display: inline-flex;
-    align-items: baseline;
-    margin-bottom: 1em;
-    i {
-      margin-right: 0.5em;
-    }
-  }
-  .main {
-    display: grid;
-    grid-template-columns: 15rem 1fr;
-    gap: 4rem;
-    .tabs {
-      background: var(--sub-alt-color);
-      border-radius: calc(var(--roundness) * 2);
-      padding: 1rem 0;
-      display: flex;
-      flex-direction: column;
-      height: max-content;
-      button {
-        padding: 1em 2em;
-        width: 100%;
-        justify-content: flex-start;
-        &.active {
-          color: var(--text-color);
-        }
-      }
-    }
-    .right {
-      padding-top: 1rem;
-      .tab {
-        display: grid;
-        gap: 2rem;
-
-        & > .title {
-          color: var(--sub-color);
-          font-size: 2rem;
-          margin-bottom: 2rem;
-        }
-
-        .section {
-          display: grid;
-          grid-template-areas: "title buttons" "text buttons";
-          grid-template-columns: 2fr 1fr;
-          grid-template-rows: auto 1fr;
-          column-gap: 2rem;
-          row-gap: 0.5rem;
-          align-items: center;
-          .title {
-            color: var(--sub-color);
-            grid-area: title;
-          }
-          .text {
-            grid-area: text;
-            align-self: normal;
-            .red {
-              color: var(--error-color);
-            }
-          }
-          .buttons {
-            grid-area: buttons;
-            display: grid;
-            &.vertical {
-              grid-auto-flow: row;
-              gap: 0.5rem;
-            }
-          }
-          &.discordIntegration {
-            .info {
-              grid-area: buttons;
-              text-align: center;
-              color: var(--main-color);
-            }
-
-            #discordButtonGroup {
-              display: grid;
-              grid-auto-flow: column;
-              justify-content: center;
-              gap: 0.5rem;
-            }
-
-            #unlinkDiscordButton,
-            #updateDiscordAvatarButton {
-              margin: 0.5rem auto 0 auto;
-              font-size: 0.75rem;
-              line-height: 0.7rem;
-            }
-
-            .howto {
-              margin-top: 1rem;
-              color: var(--text-color);
-            }
-          }
-          &.optOutOfLeaderboards {
-            .optedOut {
-              grid-area: buttons;
-              text-align: center;
-              color: var(--sub-color);
-            }
-          }
-          &.setStreakHourOffset {
-            .info {
-              grid-area: buttons;
-              text-align: center;
-              color: var(--sub-color);
-            }
-          }
-          &.apeKeys {
-            .lostAccess {
-              grid-area: buttons;
-              text-align: center;
-              color: var(--error-color);
-            }
-          }
-        }
-        &[data-tab="apeKeys"] {
-          table {
-            width: 100%;
-            border-spacing: 0;
-            border-collapse: collapse;
-
-            tr.me {
-              td {
-                color: var(--main-color);
-                // font-weight: 900;
-              }
-            }
-
-            td {
-              padding: 0.5rem 0.5rem;
-            }
-
-            thead {
-              color: var(--sub-color);
-              font-size: 0.75rem;
-
-              td {
-                padding: 0.5rem;
-                background: var(--bg-color);
-                position: sticky;
-                top: 0;
-                z-index: 99;
-              }
-            }
-
-            tbody {
-              color: var(--text-color);
-
-              tr:nth-child(odd) td {
-                background: var(--sub-alt-color);
-              }
-            }
-
-            tfoot {
-              td {
-                padding: 1rem 0.5rem;
-                position: sticky;
-                bottom: -5px;
-                background: var(--bg-color);
-                color: var(--main-color);
-                z-index: 4;
-              }
-            }
-
-            tr {
-              td:first-child {
-                padding-left: 1rem;
-              }
-              td:last-child {
-                padding-right: 1rem;
-              }
-            }
-            .keyButtons {
-              display: flex;
-              gap: 0.5rem;
-            }
-          }
-        }
-
-        &[data-tab="apeKeys"] {
-          tr td:first-child {
-            text-align: center;
-          }
-        }
-      }
-    }
-    // .right {
-    //   background: var(--sub-alt-color);
-    //   border-radius: calc(var(--roundness) * 2);
-    // }
-  }
-}
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index 1b1dc6632a16..5b53a661e173 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -18,7 +18,7 @@
 @layer custom-styles {
   @import "buttons", "ads", "test-activity", "animations", "caret",
     "commandline", "core", "fonts", "inputs", "keymap", "monkey", "popups",
-    "scroll", "account-settings", "test", "loading", "media-queries";
+    "scroll", "test", "loading", "media-queries";
 
   .chartCanvas {
     width: 100% !important;
diff --git a/frontend/src/ts/components/modals/account-settings/AddPasswordAuthModal.tsx b/frontend/src/ts/components/modals/account-settings/AddPasswordAuthModal.tsx
index 8856cd0beb00..f30813912285 100644
--- a/frontend/src/ts/components/modals/account-settings/AddPasswordAuthModal.tsx
+++ b/frontend/src/ts/components/modals/account-settings/AddPasswordAuthModal.tsx
@@ -4,9 +4,7 @@ import { z } from "zod";
 import { addAuthProvider, getPasswordSchema } from "../../../auth";
 import { showSimpleModal } from "../../../states/simple-modal";
 
-export function showAddPasswordAuthModal(options?: {
-  callback?: () => void;
-}): void {
+export function showAddPasswordAuthModal(): void {
   showSimpleModal({
     title: "Add password authentication",
     buttonText: "reauthenticate to add",
@@ -52,8 +50,6 @@ export function showAddPasswordAuthModal(options?: {
 
       await addAuthProvider({ authMethod: "password", email, password });
 
-      options?.callback?.();
-
       return {
         status: "success",
         showNotification: false,
diff --git a/frontend/src/ts/components/modals/account-settings/RemoveAuthMethodModal.tsx b/frontend/src/ts/components/modals/account-settings/RemoveAuthMethodModal.tsx
index 8154314bdb30..cd4ffabd3047 100644
--- a/frontend/src/ts/components/modals/account-settings/RemoveAuthMethodModal.tsx
+++ b/frontend/src/ts/components/modals/account-settings/RemoveAuthMethodModal.tsx
@@ -14,7 +14,6 @@ import { showSimpleModal } from "../../../states/simple-modal";
 
 export function showRemoveAuthMethodModal(options: {
   authMethod: AuthMethod;
-  callback?: () => void;
 }): void {
   if (!isAuthenticated()) return;
 
@@ -57,8 +56,6 @@ export function showRemoveAuthMethodModal(options: {
         return result;
       }
 
-      options.callback?.();
-
       //TODO needed?
       // reloadAfter(3);
       return result;
diff --git a/frontend/src/ts/components/mount.tsx b/frontend/src/ts/components/mount.tsx
index 94a3391bd271..3df870899913 100644
--- a/frontend/src/ts/components/mount.tsx
+++ b/frontend/src/ts/components/mount.tsx
@@ -12,6 +12,7 @@ import { Header } from "./layout/header/Header";
 import { Overlays } from "./layout/overlays/Overlays";
 import { Modals } from "./modals/Modals";
 import { NotFoundPage } from "./pages/404Page";
+import { AboutPage } from "./pages/AboutPage";
 import { AccountSettingsPage } from "./pages/account-settings/AccountSettingsPage";
 import { AccountPage } from "./pages/account/AccountPage";
 import { MyProfile } from "./pages/account/MyProfile";
@@ -27,8 +28,7 @@ import { TestModesNotice } from "./test/modes-notice/TestModesNotice";
 
 const components: Record<string, () => JSXElement> = {
   footer: () => <Footer />,
-  //TODO revert
-  aboutpage: () => <AccountSettingsPage />,
+  aboutpage: () => <AboutPage />,
   settingspage: () => <SettingsPage />,
   accountpage: () => <AccountPage />,
   loginpage: () => <LoginPage />,
@@ -47,6 +47,7 @@ const components: Record<string, () => JSXElement> = {
   testmodesnotice: () => <TestModesNotice />,
   friendspage: () => <FriendsPage />,
   notfoundpage: () => <NotFoundPage />,
+  accountsettingspage: () => <AccountSettingsPage />,
 };
 
 function mountToMountpoint(name: string, component: () => JSXElement): void {
diff --git a/frontend/src/ts/components/pages/account-settings/AccountSettingsPage.tsx b/frontend/src/ts/components/pages/account-settings/AccountSettingsPage.tsx
index 11bf44e32119..278860c135ec 100644
--- a/frontend/src/ts/components/pages/account-settings/AccountSettingsPage.tsx
+++ b/frontend/src/ts/components/pages/account-settings/AccountSettingsPage.tsx
@@ -7,6 +7,7 @@ import {
   setCurrentTab,
 } from "../../../states/account-settings";
 import { Button } from "../../common/Button";
+import { Page } from "../../common/Page";
 import { AccountTab } from "./AccountTab";
 import { ApeKeysTab } from "./ApeKeysTab";
 import { AuthenticationTab } from "./AuthenticationTab";
@@ -23,7 +24,7 @@ const tabContent: Record<AccountSettingsTab, JSX.Element> = {
 
 export function AccountSettingsPage() {
   return (
-    <div>
+    <Page id="accountSettings">
       <div class="content-grid flex flex-col gap-8 md:flex-row">
         <div class="w-full shrink-0 md:w-60">
           <Sidebar />
@@ -32,7 +33,7 @@ export function AccountSettingsPage() {
           {tabContent[getCurrentTab()]}
         </div>
       </div>
-    </div>
+    </Page>
   );
 }
 
diff --git a/frontend/src/ts/controllers/page-controller.ts b/frontend/src/ts/controllers/page-controller.ts
index c61925a533e8..5550c12cbe8b 100644
--- a/frontend/src/ts/controllers/page-controller.ts
+++ b/frontend/src/ts/controllers/page-controller.ts
@@ -7,7 +7,6 @@ import {
 } from "../states/core";
 import * as PageTest from "../pages/test";
 import * as PageLoading from "../pages/loading";
-import * as PageAccountSettings from "../pages/account-settings";
 import * as PageTransition from "../legacy-states/page-transition";
 import * as AdController from "../controllers/ad-controller";
 import * as Focus from "../test/focus";
@@ -23,7 +22,7 @@ import { onDOMReady, qsa, qsr } from "../utils/dom";
 import * as Skeleton from "../utils/skeleton";
 import {
   LeaderboardUrlParamsSchema,
-  readGetParameters,
+  readLeaderboardGetParameters,
 } from "../states/leaderboard-selection";
 import { configurationPromise as serverConfigurationPromise } from "../ape/server-configuration";
 import { getSnapshot } from "../db";
@@ -34,6 +33,10 @@ import {
   isConnectionsReady,
   waitForConnectionsReady,
 } from "../collections/connections";
+import {
+  AccountSettingsUrlParamsSchema,
+  readAccountSettingsGetParameters,
+} from "../states/account-settings";
 
 type ChangeOptions = {
   force?: boolean;
@@ -131,7 +134,12 @@ const pages = {
       ],
     },
   }),
-  accountSettings: PageAccountSettings.page,
+  accountSettings: solidPage("accountSettings", {
+    urlParamsSchema: AccountSettingsUrlParamsSchema,
+    beforeShow: async (options) => {
+      readAccountSettingsGetParameters(options.urlParams);
+    },
+  }),
   leaderboards: solidPage("leaderboards", {
     urlParamsSchema: LeaderboardUrlParamsSchema,
     loadingOptions: {
@@ -142,7 +150,7 @@ const pages = {
       },
     },
     beforeShow: async (options) => {
-      readGetParameters(options.urlParams);
+      readLeaderboardGetParameters(options.urlParams);
     },
   }),
 };
diff --git a/frontend/src/ts/pages/account-settings.ts b/frontend/src/ts/pages/account-settings.ts
deleted file mode 100644
index 693a76059953..000000000000
--- a/frontend/src/ts/pages/account-settings.ts
+++ /dev/null
@@ -1,294 +0,0 @@
-import { PageWithUrlParams } from "./page";
-import * as Skeleton from "../utils/skeleton";
-import { getAuthenticatedUser } from "../firebase";
-import { getActivePage, isAuthenticated } from "../states/core";
-import { swapElements } from "../utils/misc";
-import { getSnapshot } from "../db";
-import Ape from "../ape";
-import * as StreakHourOffsetModal from "../modals/streak-hour-offset";
-import { showLoaderBar } from "../states/loader-bar";
-import * as ApeKeyTable from "../elements/account-settings/ape-key-table";
-import { showErrorNotification } from "../states/notifications";
-import { z } from "zod";
-import { authEvent } from "../events/auth";
-import { qs, qsa, qsr, onDOMReady } from "../utils/dom";
-import { addAuthProvider } from "../auth";
-import { showUpdateEmailModal } from "../components/modals/account-settings/UpdateEmailModal";
-import { showUpdateNameModal } from "../components/modals/account-settings/UpdateNameModal";
-import { showUpdatePasswordModal } from "../components/modals/account-settings/UpdatePasswordModal";
-import { showRemoveAuthMethodModal } from "../components/modals/account-settings/RemoveAuthMethodModal";
-import { showAddPasswordAuthModal } from "../components/modals/account-settings/AddPasswordAuthModal";
-import {
-  showDeleteAccountModal,
-  showOptOutOfLeaderboardsModal,
-  showResetAccountModal,
-  showResetPersonalBestsModal,
-  showRevokeAllTokensModal,
-} from "../components/modals/account-settings/ReauthConfirmModals";
-import { showUnlinkDiscordModal } from "../components/modals/account-settings/UnlinkDiscordModal";
-
-const pageElement = qsr(".page.pageAccountSettings");
-
-const StateSchema = z.object({
-  tab: z.enum([
-    "authentication",
-    "account",
-    "apeKeys",
-    "dangerZone",
-    "blockedUsers",
-  ]),
-});
-type State = z.infer<typeof StateSchema>;
-
-const UrlParameterSchema = StateSchema.partial();
-
-const state: State = {
-  tab: "account",
-};
-
-function updateAuthenticationSections(): void {
-  pageElement.qsa(".section.passwordAuthSettings button")?.hide();
-  pageElement.qsa(".section.googleAuthSettings button")?.hide();
-  pageElement.qsa(".section.githubAuthSettings button")?.hide();
-
-  const user = getAuthenticatedUser();
-  if (user === null) return;
-
-  const passwordProvider = user.providerData.some(
-    (provider) => provider.providerId === "password",
-  );
-  const googleProvider = user.providerData.some(
-    (provider) => provider.providerId === "google.com",
-  );
-  const githubProvider = user.providerData.some(
-    (provider) => provider.providerId === "github.com",
-  );
-
-  if (passwordProvider) {
-    pageElement.qs(".section.passwordAuthSettings #emailPasswordAuth")?.show();
-    pageElement.qs(".section.passwordAuthSettings #passPasswordAuth")?.show();
-    if (googleProvider || githubProvider) {
-      pageElement
-        .qs(".section.passwordAuthSettings #removePasswordAuth")
-        ?.show();
-    }
-  } else {
-    pageElement.qs(".section.passwordAuthSettings #addPasswordAuth")?.show();
-  }
-
-  if (googleProvider) {
-    pageElement.qs(".section.googleAuthSettings #removeGoogleAuth")?.show();
-    if (passwordProvider || githubProvider) {
-      pageElement.qs(".section.googleAuthSettings #removeGoogleAuth")?.enable();
-    } else {
-      pageElement
-        .qs(".section.googleAuthSettings #removeGoogleAuth")
-        ?.disable();
-    }
-  } else {
-    pageElement.qs(".section.googleAuthSettings #addGoogleAuth")?.show();
-  }
-  if (githubProvider) {
-    pageElement.qs(".section.githubAuthSettings #removeGithubAuth")?.show();
-    if (passwordProvider || googleProvider) {
-      pageElement.qs(".section.githubAuthSettings #removeGithubAuth")?.enable();
-    } else {
-      pageElement
-        .qs(".section.githubAuthSettings #removeGithubAuth")
-        ?.disable();
-    }
-  } else {
-    pageElement.qs(".section.githubAuthSettings #addGithubAuth")?.show();
-  }
-}
-
-function updateIntegrationSections(): void {
-  //no code and no discord
-  if (!isAuthenticated()) {
-    pageElement.qs(".section.discordIntegration")?.hide();
-  } else {
-    if (!getSnapshot()) return;
-    pageElement.qs(".section.discordIntegration")?.show();
-
-    if (getSnapshot()?.discordId === undefined) {
-      //show button
-      pageElement.qs(".section.discordIntegration .buttons")?.show();
-      pageElement.qs(".section.discordIntegration .info")?.hide();
-    } else {
-      pageElement.qs(".section.discordIntegration .buttons")?.hide();
-      pageElement.qs(".section.discordIntegration .info")?.show();
-    }
-  }
-}
-
-function updateTabs(): void {
-  void swapElements(
-    pageElement.qs(".tab.active"),
-    pageElement.qs(`.tab[data-tab="${state.tab}"]`),
-    250,
-    async () => {
-      //
-    },
-    async () => {
-      pageElement.qsa(".tab")?.removeClass("active");
-      pageElement.qs(`.tab[data-tab="${state.tab}"]`)?.addClass("active");
-      if (state.tab === "apeKeys") void ApeKeyTable.update(updateUI);
-    },
-  );
-  pageElement.qsa("button")?.removeClass("active");
-  pageElement.qs(`button[data-tab="${state.tab}"]`)?.addClass("active");
-}
-
-function updateAccountSections(): void {
-  pageElement.qs(".section.optOutOfLeaderboards .optedOut")?.hide();
-  pageElement.qs(".section.optOutOfLeaderboards .buttons")?.show();
-  pageElement.qs(".section.setStreakHourOffset .info")?.hide();
-  pageElement.qs(".section.setStreakHourOffset .buttons")?.show();
-
-  const snapshot = getSnapshot();
-  if (snapshot?.lbOptOut === true) {
-    pageElement.qs(".section.optOutOfLeaderboards .optedOut")?.show();
-    pageElement.qs(".section.optOutOfLeaderboards .buttons")?.hide();
-  }
-  if (snapshot?.streakHourOffset !== undefined) {
-    pageElement.qs(".section.setStreakHourOffset .info")?.show();
-    const sign = snapshot?.streakHourOffset > 0 ? "+" : "";
-    pageElement
-      .qs(".section.setStreakHourOffset .info span")
-      ?.setText(sign + snapshot?.streakHourOffset);
-    pageElement.qs(".section.setStreakHourOffset .buttons")?.hide();
-  }
-}
-
-export function updateUI(): void {
-  if (getActivePage() !== "accountSettings") return;
-  updateAuthenticationSections();
-  updateIntegrationSections();
-  updateAccountSections();
-  updateTabs();
-  page.setUrlParams(state);
-}
-
-qs(".page.pageAccountSettings")?.onChild("click", ".tabs button", (event) => {
-  state.tab = (event.target as HTMLElement).getAttribute(
-    "data-tab",
-  ) as State["tab"];
-  updateTabs();
-  page.setUrlParams(state);
-});
-
-qsa(
-  ".page.pageAccountSettings .section.discordIntegration .getLinkAndGoToOauth",
-)?.on("click", () => {
-  showLoaderBar();
-  void Ape.users.getDiscordOAuth().then((response) => {
-    if (response.status === 200) {
-      window.open(response.body.data.url, "_self");
-    } else {
-      showErrorNotification(
-        `Failed to get OAuth from discord: ${response.body.message}`,
-      );
-    }
-  });
-});
-
-qs(".page.pageAccountSettings #setStreakHourOffset")?.on("click", () => {
-  StreakHourOffsetModal.show();
-});
-
-qs(".pageAccountSettings")?.onChild("click", "#unlinkDiscordButton", () => {
-  showUnlinkDiscordModal({ callback: updateUI });
-});
-
-qs(".pageAccountSettings")?.onChild("click", "#removeGoogleAuth", () => {
-  showRemoveAuthMethodModal({ authMethod: "google", callback: updateUI });
-});
-
-qs(".pageAccountSettings")?.onChild("click", "#removeGithubAuth", () => {
-  showRemoveAuthMethodModal({ authMethod: "github", callback: updateUI });
-});
-
-qs(".pageAccountSettings")?.onChild("click", "#removePasswordAuth", () => {
-  showRemoveAuthMethodModal({ authMethod: "password", callback: updateUI });
-});
-
-qs(".pageAccountSettings")?.onChild("click", "#addPasswordAuth", () => {
-  showAddPasswordAuthModal({ callback: updateUI });
-});
-
-qs(".pageAccountSettings")?.onChild("click", "#updateAccountName", () => {
-  showUpdateNameModal();
-});
-
-qs(".pageAccountSettings")?.onChild("click", "#emailPasswordAuth", () => {
-  showUpdateEmailModal();
-});
-
-qs(".pageAccountSettings")?.onChild("click", "#passPasswordAuth", () => {
-  showUpdatePasswordModal();
-});
-
-qs(".pageAccountSettings")?.onChild("click", "#deleteAccount", () => {
-  showDeleteAccountModal();
-});
-
-qs(".pageAccountSettings")?.onChild("click", "#resetAccount", () => {
-  showResetAccountModal();
-});
-
-qs(".pageAccountSettings")?.onChild(
-  "click",
-  "#optOutOfLeaderboardsButton",
-  () => {
-    showOptOutOfLeaderboardsModal();
-  },
-);
-
-qs(".pageAccountSettings")?.onChild("click", "#revokeAllTokens", () => {
-  showRevokeAllTokensModal();
-});
-
-qs(".pageAccountSettings")?.onChild(
-  "click",
-  "#resetPersonalBestsButton",
-  () => {
-    showResetPersonalBestsModal();
-  },
-);
-
-qs(".pageAccountSettings")?.onChild("click", "#addGoogleAuth", () => {
-  void addAuthProvider({ authMethod: "google" });
-});
-
-qs(".pageAccountSettings")?.onChild("click", "#addGithubAuth", () => {
-  void addAuthProvider({ authMethod: "github" });
-});
-
-authEvent.subscribe((event) => {
-  if (event.type === "authConfigUpdated") {
-    updateUI();
-  }
-});
-
-export const page = new PageWithUrlParams({
-  id: "accountSettings",
-  display: "Account Settings",
-  element: pageElement,
-  path: "/account-settings",
-  urlParamsSchema: UrlParameterSchema,
-  afterHide: async (): Promise<void> => {
-    Skeleton.remove("pageAccountSettings");
-  },
-  beforeShow: async (options): Promise<void> => {
-    if (options.urlParams?.tab !== undefined) {
-      state.tab = options.urlParams.tab;
-    }
-    Skeleton.append("pageAccountSettings", "main");
-    pageElement.qs(`.tab[data-tab="${state.tab}"]`)?.addClass("active");
-    updateUI();
-  },
-});
-
-onDOMReady(() => {
-  Skeleton.save("pageAccountSettings");
-});
diff --git a/frontend/src/ts/states/account-settings.ts b/frontend/src/ts/states/account-settings.ts
index 24009ad4dcab..a4bc68063ac2 100644
--- a/frontend/src/ts/states/account-settings.ts
+++ b/frontend/src/ts/states/account-settings.ts
@@ -1,21 +1,42 @@
 import { createSignal } from "solid-js";
+import { z } from "zod";
 import { createEffectOn } from "../hooks/effects";
-import { FaIcon } from "../types/font-awesome";
+import { FaSolidIcon } from "../types/font-awesome";
 import { isAuthenticated } from "./core";
+import { serialize as serializeUrlSearchParams } from "zod-urlsearchparams";
 
 export const [getLastGeneratedApeKey, setLastGeneratedApeKey] = createSignal<
   string | undefined
 >(undefined);
 
-export const accountSettingsTabs = {
+export const AccountSettingsTabSchema = z.enum([
+  "account",
+  "authentication",
+  "blockedUsers",
+  "apeKeys",
+  "dangerZone",
+]);
+export type AccountSettingsTab = z.infer<typeof AccountSettingsTabSchema>;
+
+export const accountSettingsTabs: Record<
+  AccountSettingsTab,
+  { icon: FaSolidIcon; text: string }
+> = {
   account: { text: "account", icon: "fa-user" },
   authentication: { text: "authentication", icon: "fa-key" },
   blockedUsers: { text: "blocked users", icon: "fa-user-shield" },
   apeKeys: { text: "ape keys", icon: "fa-code" },
   dangerZone: { text: "danger zone", icon: "fa-exclamation-triangle" },
-} as const satisfies Record<string, { icon: FaIcon; text: string }>;
+};
 
-export type AccountSettingsTab = keyof typeof accountSettingsTabs;
+export const AccountSettingsUrlParamsSchema = z
+  .object({
+    tab: AccountSettingsTabSchema,
+  })
+  .partial();
+export type AccountSettingsUrlParams = z.infer<
+  typeof AccountSettingsUrlParamsSchema
+>;
 
 export const [getCurrentTab, setCurrentTab] =
   createSignal<AccountSettingsTab>("account");
@@ -29,3 +50,22 @@ createEffectOn(isAuthenticated, (hasUser) => {
     setApeKeysDenied(undefined);
   }
 });
+
+export function readAccountSettingsGetParameters(
+  params: AccountSettingsUrlParams | undefined,
+): void {
+  if (params === undefined || params.tab === undefined) return;
+
+  setCurrentTab(params.tab);
+}
+
+createEffectOn(getCurrentTab, (tab) => {
+  const data: AccountSettingsUrlParams = { tab };
+
+  const urlParams = serializeUrlSearchParams({
+    schema: AccountSettingsUrlParamsSchema,
+    data,
+  });
+  const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
+  window.history.replaceState({}, "", newUrl);
+});
diff --git a/frontend/src/ts/states/leaderboard-selection.ts b/frontend/src/ts/states/leaderboard-selection.ts
index d4771c26dfe5..81dcf8755bc5 100644
--- a/frontend/src/ts/states/leaderboard-selection.ts
+++ b/frontend/src/ts/states/leaderboard-selection.ts
@@ -67,7 +67,7 @@ export const getSelection = (): Selection => {
 
 export { setSelection };
 
-export function readGetParameters(
+export function readLeaderboardGetParameters(
   params: LeaderboardUrlParams | undefined,
 ): void {
   if (params === undefined || params.type === undefined) return;

From 92e400c81e2691bb18ba1f7a2d7b316966fcfad7 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 14 Jun 2026 14:05:06 +0200
Subject: [PATCH 19/23] clarified reloadAfter usages

---
 .../modals/account-settings/ReauthConfirmModals.tsx       | 3 +--
 .../modals/account-settings/RemoveAuthMethodModal.tsx     | 2 --
 .../modals/account-settings/UpdateNameModal.tsx           | 8 +++-----
 3 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/frontend/src/ts/components/modals/account-settings/ReauthConfirmModals.tsx b/frontend/src/ts/components/modals/account-settings/ReauthConfirmModals.tsx
index 287c0c6dd3c9..d3a5f7068058 100644
--- a/frontend/src/ts/components/modals/account-settings/ReauthConfirmModals.tsx
+++ b/frontend/src/ts/components/modals/account-settings/ReauthConfirmModals.tsx
@@ -56,8 +56,7 @@ export function showOptOutOfLeaderboardsModal(): void {
         };
       }
 
-      //TODO needed?
-      //reloadAfter(3);
+      reloadAfter(3);
 
       return {
         status: "success",
diff --git a/frontend/src/ts/components/modals/account-settings/RemoveAuthMethodModal.tsx b/frontend/src/ts/components/modals/account-settings/RemoveAuthMethodModal.tsx
index cd4ffabd3047..e6782cc44b81 100644
--- a/frontend/src/ts/components/modals/account-settings/RemoveAuthMethodModal.tsx
+++ b/frontend/src/ts/components/modals/account-settings/RemoveAuthMethodModal.tsx
@@ -56,8 +56,6 @@ export function showRemoveAuthMethodModal(options: {
         return result;
       }
 
-      //TODO needed?
-      // reloadAfter(3);
       return result;
     },
   });
diff --git a/frontend/src/ts/components/modals/account-settings/UpdateNameModal.tsx b/frontend/src/ts/components/modals/account-settings/UpdateNameModal.tsx
index 919e272b3d0d..ebfd99c95ed3 100644
--- a/frontend/src/ts/components/modals/account-settings/UpdateNameModal.tsx
+++ b/frontend/src/ts/components/modals/account-settings/UpdateNameModal.tsx
@@ -10,6 +10,7 @@ import {
 import * as DB from "../../../db";
 import { isAuthenticated } from "../../../states/core";
 import { showSimpleModal } from "../../../states/simple-modal";
+import { getSnapshot } from "../../../states/snapshot";
 import { remoteValidation } from "../../../utils/remote-validation";
 
 export function showUpdateNameModal(): void {
@@ -21,7 +22,7 @@ export function showUpdateNameModal(): void {
     buttonText: isUsingPasswordAuthentication()
       ? "update"
       : "reauthenticate to update",
-    text: DB.getSnapshot()?.needsToChangeName
+    text: getSnapshot()?.needsToChangeName
       ? "You need to change your account name. This might be because you have a duplicate name, no account name or your name is not allowed (contains whitespace or invalid characters). Sorry for the inconvenience."
       : undefined,
     schema: z.object({
@@ -69,11 +70,8 @@ export function showUpdateNameModal(): void {
       }
 
       snapshot.name = newName;
+
       DB.setSnapshot(snapshot);
-      if (snapshot.needsToChangeName) {
-        //TODO needed?
-        //reloadAfter(2);
-      }
 
       return {
         status: "success",

From b5a2a2ee967f93f8c764dc8ec001eb315a9d1264 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 14 Jun 2026 16:45:39 +0200
Subject: [PATCH 20/23] rename disabledText > disabledDescription

---
 frontend/src/ts/components/common/Setting.tsx               | 6 +++---
 .../src/ts/components/pages/account-settings/AccountTab.tsx | 4 ++--
 .../src/ts/components/pages/account-settings/ApeKeysTab.tsx | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/ts/components/common/Setting.tsx b/frontend/src/ts/components/common/Setting.tsx
index fb61d0a2e0f3..fc385c8a0cdf 100644
--- a/frontend/src/ts/components/common/Setting.tsx
+++ b/frontend/src/ts/components/common/Setting.tsx
@@ -35,11 +35,11 @@ export type SettingProps = {
   (
     | {
         disabled: boolean;
-        disabledText: JSXElement;
+        disabledDescription: JSXElement;
       }
     | {
         disabled?: never;
-        disabledText?: never;
+        disabledDescription?: never;
       }
   );
 
@@ -63,7 +63,7 @@ export function Setting(props: SettingProps): JSXElement {
 
       <Show
         when={props.disabled === undefined || !props.disabled}
-        fallback={props.disabledText}
+        fallback={props.disabledDescription}
       >
         <div
           class={cn(
diff --git a/frontend/src/ts/components/pages/account-settings/AccountTab.tsx b/frontend/src/ts/components/pages/account-settings/AccountTab.tsx
index 6439ad67ac00..a920592b258e 100644
--- a/frontend/src/ts/components/pages/account-settings/AccountTab.tsx
+++ b/frontend/src/ts/components/pages/account-settings/AccountTab.tsx
@@ -105,7 +105,7 @@ function UpdateStreakOffset() {
         onClick: () => StreakHourOffsetModal.show(),
       }}
       disabled={getSnapshot()?.streakHourOffset !== undefined}
-      disabledText=<>
+      disabledDescription=<>
         <Fa icon="fa-exclamation-triangle" /> You have already set your streak
         hour offset to{" "}
         {`${(getSnapshot()?.streakHourOffset ?? 0) > 0 ? "+" : ""} ${getSnapshot()?.streakHourOffset}`}
@@ -130,7 +130,7 @@ function OptOutLeaderboard() {
         onClick: () => showOptOutOfLeaderboardsModal(),
       }}
       disabled={getSnapshot()?.lbOptOut === true}
-      disabledText=<>
+      disabledDescription=<>
         <Fa icon="fa-exclamation-triangle" />
         You have opted out of leaderboards.
       </>
diff --git a/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx b/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx
index 9ea386e19107..ad981bb7bb8b 100644
--- a/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx
+++ b/frontend/src/ts/components/pages/account-settings/ApeKeysTab.tsx
@@ -44,7 +44,7 @@ export function ApeKeysTab() {
           onClick: addNewKey,
         }}
         disabled={isApeKeysDenied() === true}
-        disabledText=<>
+        disabledDescription=<>
           <Fa icon="fa-times" /> You have lost access to Ape Keys. Please
           contact support if you believe this is a mistake.
         </>

From a429eb95fee5e4fc1910b92339fc35f7dad69052 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 14 Jun 2026 19:23:10 +0200
Subject: [PATCH 21/23] discord integration

---
 .../account-settings/UnlinkDiscordModal.tsx   |  6 +-
 .../pages/account-settings/AccountTab.tsx     | 90 ++++++++++++-------
 frontend/src/ts/states/account-settings.ts    |  4 +-
 3 files changed, 61 insertions(+), 39 deletions(-)

diff --git a/frontend/src/ts/components/modals/account-settings/UnlinkDiscordModal.tsx b/frontend/src/ts/components/modals/account-settings/UnlinkDiscordModal.tsx
index 6e8604cec8a5..879087b1bc9a 100644
--- a/frontend/src/ts/components/modals/account-settings/UnlinkDiscordModal.tsx
+++ b/frontend/src/ts/components/modals/account-settings/UnlinkDiscordModal.tsx
@@ -2,9 +2,7 @@ import Ape from "../../../ape";
 import { getSnapshot, setSnapshot } from "../../../db";
 import { showSimpleModal } from "../../../states/simple-modal";
 
-export function showUnlinkDiscordModal(options: {
-  callback: () => void;
-}): void {
+export function showUnlinkDiscordModal(): void {
   showSimpleModal({
     title: "Unlink Discord",
     text: "Are you sure you want to unlink your Discord account?",
@@ -31,8 +29,6 @@ export function showUnlinkDiscordModal(options: {
       snap.discordId = undefined;
       setSnapshot(snap);
 
-      options.callback();
-
       return {
         status: "success",
         message: "Discord unlinked",
diff --git a/frontend/src/ts/components/pages/account-settings/AccountTab.tsx b/frontend/src/ts/components/pages/account-settings/AccountTab.tsx
index a920592b258e..1e42b86209f9 100644
--- a/frontend/src/ts/components/pages/account-settings/AccountTab.tsx
+++ b/frontend/src/ts/components/pages/account-settings/AccountTab.tsx
@@ -5,23 +5,20 @@ import * as StreakHourOffsetModal from "../../../modals/streak-hour-offset";
 import { showLoaderBar } from "../../../states/loader-bar";
 import { showErrorNotification } from "../../../states/notifications";
 import { getSnapshot } from "../../../states/snapshot";
+import { Button } from "../../common/Button";
 import { Fa } from "../../common/Fa";
 import {
   showOptOutOfLeaderboardsModal,
   showResetPersonalBestsModal,
 } from "../../modals/account-settings/ReauthConfirmModals";
+import { showUnlinkDiscordModal } from "../../modals/account-settings/UnlinkDiscordModal";
 import { showUpdateNameModal } from "../../modals/account-settings/UpdateNameModal";
 import { Section } from "./utils";
 
 export function AccountTab() {
   return (
     <>
-      <Show
-        when={getSnapshot()?.discordId !== undefined}
-        fallback={<DiscordNotConnected />}
-      >
-        <DiscordConnected />
-      </Show>
+      <Discord />
 
       <UpdateAccountName />
       <UpdateStreakOffset />
@@ -31,7 +28,8 @@ export function AccountTab() {
   );
 }
 
-function DiscordNotConnected() {
+function Discord() {
+  const isLinked = () => getSnapshot()?.discordId !== undefined;
   return (
     <Section
       title="discord integration"
@@ -42,33 +40,59 @@ function DiscordNotConnected() {
         personal best in a 60 second test. If you link your accounts before
         joining the Discord server, the bot <i>will not</i> give you a role.
       </>
-      button={{
-        text: "link",
-        onClick: () => {
-          showLoaderBar();
-          void Ape.users.getDiscordOAuth().then((response) => {
-            if (response.status === 200) {
-              window.open(response.body.data.url, "_self");
-            } else {
-              showErrorNotification(
-                `Failed to get OAuth from discord: ${response.body.message}`,
-              );
+      button={
+        isLinked()
+          ? undefined
+          : {
+              text: "link",
+              onClick: () => {
+                showLoaderBar();
+                void Ape.users.getDiscordOAuth().then((response) => {
+                  if (response.status === 200) {
+                    window.open(response.body.data.url, "_self");
+                  } else {
+                    showErrorNotification(
+                      `Failed to get OAuth from discord: ${response.body.message}`,
+                    );
+                  }
+                });
+              },
             }
-          });
-        },
-      }}
-    />
-  );
-}
-
-function DiscordConnected() {
-  //TODO
-  return (
-    <Section
-      title="discord integration"
-      fa={{ variant: "brand", icon: "fa-discord" }}
-      description=<>t.b.d</>
-    />
+      }
+    >
+      <Show when={isLinked()}>
+        <div class="m-4 flex h-full flex-col items-center justify-center gap-2">
+          <div class="text-main">
+            <Fa icon="fa-check" /> Your accounts are linked!
+          </div>
+          <div class="text-sm">
+            <Button
+              variant="text"
+              text="Update avatar"
+              fa={{ icon: "fa-sync-alt" }}
+              onClick={() => {
+                showLoaderBar();
+                void Ape.users.getDiscordOAuth().then((response) => {
+                  if (response.status === 200) {
+                    window.open(response.body.data.url, "_self");
+                  } else {
+                    showErrorNotification(
+                      `Failed to get OAuth from discord: ${response.body.message}`,
+                    );
+                  }
+                });
+              }}
+            />
+            <Button
+              variant="text"
+              text="Unlink"
+              fa={{ icon: "fa-unlink" }}
+              onClick={() => showUnlinkDiscordModal()}
+            />
+          </div>
+        </div>
+      </Show>
+    </Section>
   );
 }
 
diff --git a/frontend/src/ts/states/account-settings.ts b/frontend/src/ts/states/account-settings.ts
index a4bc68063ac2..c6e396685c64 100644
--- a/frontend/src/ts/states/account-settings.ts
+++ b/frontend/src/ts/states/account-settings.ts
@@ -2,7 +2,7 @@ import { createSignal } from "solid-js";
 import { z } from "zod";
 import { createEffectOn } from "../hooks/effects";
 import { FaSolidIcon } from "../types/font-awesome";
-import { isAuthenticated } from "./core";
+import { getActivePage, isAuthenticated } from "./core";
 import { serialize as serializeUrlSearchParams } from "zod-urlsearchparams";
 
 export const [getLastGeneratedApeKey, setLastGeneratedApeKey] = createSignal<
@@ -60,6 +60,8 @@ export function readAccountSettingsGetParameters(
 }
 
 createEffectOn(getCurrentTab, (tab) => {
+  //make sure we only replace the url if we are on the accountSettings page. If this is missing the url-handler will not work correctly
+  if (getActivePage() !== "accountSettings") return;
   const data: AccountSettingsUrlParams = { tab };
 
   const urlParams = serializeUrlSearchParams({

From 7d5c8f67d2d68edbd1a8186e84b15dae6fefb98a Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 14 Jun 2026 19:57:20 +0200
Subject: [PATCH 22/23] review comments

---
 frontend/src/ts/auth.tsx                      | 20 +++++++++----------
 frontend/src/ts/collections/ape-keys.ts       |  2 +-
 frontend/src/ts/components/common/Setting.tsx |  6 ++++--
 .../account-settings/UpdateNameModal.tsx      |  8 ++++----
 .../account-settings/AccountSettingsPage.tsx  | 16 +++++++--------
 .../account-settings/AuthenticationTab.tsx    |  2 +-
 .../pages/account-settings/utils.tsx          | 11 ++++++----
 .../src/ts/components/ui/table/DataTable.tsx  |  4 ++--
 8 files changed, 37 insertions(+), 32 deletions(-)

diff --git a/frontend/src/ts/auth.tsx b/frontend/src/ts/auth.tsx
index 6af1f3284e7c..66c1540df6ac 100644
--- a/frontend/src/ts/auth.tsx
+++ b/frontend/src/ts/auth.tsx
@@ -110,13 +110,13 @@ type ReauthenticateOptions = {
 };
 
 const [getAuthenticatedUserReactive, { updateAuthenticatedUser }] =
-  createSignalWithSetters<User | null>(null)({
+  createSignalWithSetters<Pick<User, "providerData"> | null>(null)({
     updateAuthenticatedUser: (set) => {
       const user = getAuthenticatedUser();
       if (user === null) {
         set(null);
       } else {
-        set({ ...user });
+        set({ providerData: user.providerData });
       }
     },
   });
@@ -127,19 +127,21 @@ createEffectOn(getUserId, () => {
 });
 
 const authenticationMemos = Object.fromEntries(
-  typedKeys(authMethods).map((it) => {
+  typedKeys(authMethods).map((authMethod) => {
     const memo = createMemo(() => {
-      const providerId = getProviderId(it);
+      const providerId = getProviderId(authMethod);
 
       const user = getAuthenticatedUserReactive();
       if (user === null) return undefined;
       const result = {
         isInUse: user.providerData.some((p) => p.providerId === providerId),
-        hasAdditionalAuthMethods: hasAdditionalAuthMethods(it),
+        hasAdditionalAuthMethods: hasAdditionalAuthMethods(authMethod),
       };
+
+      console.log("### updated auth memo", authMethod, result);
       return result;
     });
-    return [it, memo];
+    return [authMethod, memo];
   }),
 );
 
@@ -301,11 +303,11 @@ export async function addAuthProvider(
   }
   const authMethod = options.authMethod;
 
-  showLoaderBar();
   const user = getAuthenticatedUser();
   const providerName = getAuthMethodDisplay(authMethod);
 
   if (!user) return;
+  showLoaderBar();
   try {
     if (authMethod === "password") {
       await addPasswordProvider(user, options);
@@ -361,8 +363,7 @@ async function addPopupProvider(
   const authMethod = options.authMethod;
   const provider = getAuthProvider(authMethod);
   if (provider === undefined) {
-    showErrorNotification(`Authentication ${authMethod} is missing a provider`);
-    return;
+    throw new Error(`Authentication ${authMethod} is missing a provider`);
   }
 
   await linkWithPopup(user, provider);
@@ -493,7 +494,6 @@ export async function reauthenticate(
   }
 
   const authMethod = getPreferredAuthenticationMethod(options.excludeMethod);
-  console.log("### reauth with provider");
 
   try {
     if (authMethod === undefined) {
diff --git a/frontend/src/ts/collections/ape-keys.ts b/frontend/src/ts/collections/ape-keys.ts
index eab8534788db..262cf1809eb6 100644
--- a/frontend/src/ts/collections/ape-keys.ts
+++ b/frontend/src/ts/collections/ape-keys.ts
@@ -55,7 +55,7 @@ const apeKeysCollection = createCollection(
           setApeKeysDenied(true);
         }
 
-        throw new Error(`Error fetching ape keys:${response.body.message}`);
+        throw new Error(`Error fetching ape keys: ${response.body.message}`);
       }
 
       const dataArray = typedEntries(response.body.data)
diff --git a/frontend/src/ts/components/common/Setting.tsx b/frontend/src/ts/components/common/Setting.tsx
index fc385c8a0cdf..c01dbb25f508 100644
--- a/frontend/src/ts/components/common/Setting.tsx
+++ b/frontend/src/ts/components/common/Setting.tsx
@@ -52,11 +52,13 @@ export function Setting(props: SettingProps): JSXElement {
         "-m-4 rounded-double p-4",
         // "animate-[ring-flash_4s_ease-in_forwards]",
       )}
-      {...("key" in props ? { "data-setting-key": props.key } : {})}
+      {...("key" in props && props.key !== undefined
+        ? { "data-setting-key": props.key }
+        : {})}
     >
       <div class="flex gap-2">
         <H3 text={props.title} fa={props.fa} class="pb-0" />
-        <Show when={props.showDeepLink}>
+        <Show when={props.showDeepLink !== false}>
           <DeepLinkButton key={(props as { key: string }).key} />
         </Show>
       </div>
diff --git a/frontend/src/ts/components/modals/account-settings/UpdateNameModal.tsx b/frontend/src/ts/components/modals/account-settings/UpdateNameModal.tsx
index ebfd99c95ed3..48c664ad22ae 100644
--- a/frontend/src/ts/components/modals/account-settings/UpdateNameModal.tsx
+++ b/frontend/src/ts/components/modals/account-settings/UpdateNameModal.tsx
@@ -7,14 +7,14 @@ import {
   isUsingPasswordAuthentication,
   reauthenticate,
 } from "../../../auth";
-import * as DB from "../../../db";
+import { setSnapshot } from "../../../db";
 import { isAuthenticated } from "../../../states/core";
 import { showSimpleModal } from "../../../states/simple-modal";
 import { getSnapshot } from "../../../states/snapshot";
 import { remoteValidation } from "../../../utils/remote-validation";
 
 export function showUpdateNameModal(): void {
-  const snapshot = DB.getSnapshot();
+  const snapshot = getSnapshot();
   if (!isAuthenticated() || !snapshot) return;
 
   showSimpleModal({
@@ -22,7 +22,7 @@ export function showUpdateNameModal(): void {
     buttonText: isUsingPasswordAuthentication()
       ? "update"
       : "reauthenticate to update",
-    text: getSnapshot()?.needsToChangeName
+    text: snapshot.needsToChangeName
       ? "You need to change your account name. This might be because you have a duplicate name, no account name or your name is not allowed (contains whitespace or invalid characters). Sorry for the inconvenience."
       : undefined,
     schema: z.object({
@@ -71,7 +71,7 @@ export function showUpdateNameModal(): void {
 
       snapshot.name = newName;
 
-      DB.setSnapshot(snapshot);
+      setSnapshot(snapshot);
 
       return {
         status: "success",
diff --git a/frontend/src/ts/components/pages/account-settings/AccountSettingsPage.tsx b/frontend/src/ts/components/pages/account-settings/AccountSettingsPage.tsx
index 278860c135ec..4ffb60f5d863 100644
--- a/frontend/src/ts/components/pages/account-settings/AccountSettingsPage.tsx
+++ b/frontend/src/ts/components/pages/account-settings/AccountSettingsPage.tsx
@@ -1,4 +1,4 @@
-import { For, JSX } from "solid-js";
+import { For, JSXElement } from "solid-js";
 
 import {
   AccountSettingsTab,
@@ -14,12 +14,12 @@ import { AuthenticationTab } from "./AuthenticationTab";
 import { BlockedUsersTab } from "./BlockedUsersTab";
 import { DangerZoneTab } from "./DangerZoneTab";
 
-const tabContent: Record<AccountSettingsTab, JSX.Element> = {
-  account: <AccountTab />,
-  authentication: <AuthenticationTab />,
-  blockedUsers: <BlockedUsersTab />,
-  apeKeys: <ApeKeysTab />,
-  dangerZone: <DangerZoneTab />,
+const tabContent: Record<AccountSettingsTab, () => JSXElement> = {
+  account: () => <AccountTab />,
+  authentication: () => <AuthenticationTab />,
+  blockedUsers: () => <BlockedUsersTab />,
+  apeKeys: () => <ApeKeysTab />,
+  dangerZone: () => <DangerZoneTab />,
 };
 
 export function AccountSettingsPage() {
@@ -30,7 +30,7 @@ export function AccountSettingsPage() {
           <Sidebar />
         </div>
         <div class="flex w-full flex-1 flex-col gap-8">
-          {tabContent[getCurrentTab()]}
+          {tabContent[getCurrentTab()]()}
         </div>
       </div>
     </Page>
diff --git a/frontend/src/ts/components/pages/account-settings/AuthenticationTab.tsx b/frontend/src/ts/components/pages/account-settings/AuthenticationTab.tsx
index eec61f231aff..104c0fc0e1f9 100644
--- a/frontend/src/ts/components/pages/account-settings/AuthenticationTab.tsx
+++ b/frontend/src/ts/components/pages/account-settings/AuthenticationTab.tsx
@@ -55,7 +55,7 @@ function PasswordAuthentication() {
             text="update password"
             onClick={() => showUpdatePasswordModal()}
           />{" "}
-          <Show when={() => hasAdditionalAuthMethodsReactive("password")}>
+          <Show when={hasAdditionalAuthMethodsReactive("password")}>
             <Button
               class="w-full"
               text="remove password authentication"
diff --git a/frontend/src/ts/components/pages/account-settings/utils.tsx b/frontend/src/ts/components/pages/account-settings/utils.tsx
index bb41bf8cf30c..6bdcd77a253c 100644
--- a/frontend/src/ts/components/pages/account-settings/utils.tsx
+++ b/frontend/src/ts/components/pages/account-settings/utils.tsx
@@ -1,3 +1,5 @@
+import { splitProps } from "solid-js";
+
 import { cn } from "../../../utils/cn";
 import { Button, ButtonProps } from "../../common/Button";
 import { Setting, SettingProps } from "../../common/Setting";
@@ -11,15 +13,16 @@ export function Section(
     fullWidth?: boolean;
   },
 ) {
+  const [local, settingsProps] = splitProps(props, ["button", "fullWidth"]);
   return (
     <Setting
-      {...(props as SettingProps)}
+      {...(settingsProps as SettingProps)}
       showDeepLink={false}
       key={undefined}
-      breakpoints={props.fullWidth ? "none" : "narrow"}
+      breakpoints={local.fullWidth ? "none" : "narrow"}
       inputs={
-        props.button !== undefined ? (
-          <Button {...props.button} class={cn("w-full", props.button?.class)} />
+        local.button !== undefined ? (
+          <Button {...local.button} class={cn("w-full", local.button?.class)} />
         ) : undefined
       }
     />
diff --git a/frontend/src/ts/components/ui/table/DataTable.tsx b/frontend/src/ts/components/ui/table/DataTable.tsx
index 1f0c15557b40..afff4a24521f 100644
--- a/frontend/src/ts/components/ui/table/DataTable.tsx
+++ b/frontend/src/ts/components/ui/table/DataTable.tsx
@@ -127,8 +127,8 @@ export function DataTable<TData extends Object, TValue = any>(
       getRowId: (row, index) =>
         props.rowSelection !== undefined
           ? props.rowSelection.getRowId(row)
-          : "_id" in row
-            ? (row["_id"] as string)
+          : typeof (row as Record<string, unknown>)["_id"] === "string"
+            ? ((row as Record<string, unknown>)["_id"] as string)
             : index.toString(),
       onRowSelectionChange: setRowSelection,
 

From cb615cd3a280795dcda7252001e2ae4466eeb3ac Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 14 Jun 2026 19:59:37 +0200
Subject: [PATCH 23/23] derp

---
 frontend/src/ts/auth.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/ts/auth.tsx b/frontend/src/ts/auth.tsx
index 66c1540df6ac..5647b94bec9a 100644
--- a/frontend/src/ts/auth.tsx
+++ b/frontend/src/ts/auth.tsx
@@ -138,7 +138,6 @@ const authenticationMemos = Object.fromEntries(
         hasAdditionalAuthMethods: hasAdditionalAuthMethods(authMethod),
       };
 
-      console.log("### updated auth memo", authMethod, result);
       return result;
     });
     return [authMethod, memo];