From dd136984225530c6bf58683332d1e79788014556 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 1 Feb 2026 00:58:41 +0100
Subject: [PATCH 01/26] refactor: solid leaderboards (@fehmer)

---
 frontend/src/ts/components/common/Button.tsx  |   6 +-
 frontend/src/ts/components/mount.tsx          |   4 +-
 .../pages/leaderboard/LeaderboardPage.tsx     |  28 ++++
 .../components/pages/leaderboard/Sidebar.tsx  | 142 ++++++++++++++++++
 4 files changed, 176 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
 create mode 100644 frontend/src/ts/components/pages/leaderboard/Sidebar.tsx

diff --git a/frontend/src/ts/components/common/Button.tsx b/frontend/src/ts/components/common/Button.tsx
index acd421c94a66..729436e3a375 100644
--- a/frontend/src/ts/components/common/Button.tsx
+++ b/frontend/src/ts/components/common/Button.tsx
@@ -1,4 +1,4 @@
-import { JSXElement, Show } from "solid-js";
+import { JSX, JSXElement, Show } from "solid-js";
 
 import { Conditional } from "./Conditional";
 import { Fa, FaProps } from "./Fa";
@@ -7,6 +7,7 @@ type BaseProps = {
   text?: string;
   fa?: FaProps;
   class?: string;
+  classList?: JSX.HTMLAttributes<HTMLButtonElement>["classList"];
   type?: "text" | "button";
   children?: JSXElement;
 };
@@ -36,10 +37,11 @@ export function Button(props: ButtonProps | AnchorProps): JSXElement {
     </>
   );
 
-  const getClassList = (): Record<string, boolean> => {
+  const getClassList = (): Record<string, boolean | undefined> => {
     return {
       [(props.type ?? "button") === "text" ? "textButton" : buttonClass]: true,
       [props.class ?? ""]: props.class !== undefined,
+      ...props.classList,
     };
   };
 
diff --git a/frontend/src/ts/components/mount.tsx b/frontend/src/ts/components/mount.tsx
index a4dae541c9c4..e0976c33ed03 100644
--- a/frontend/src/ts/components/mount.tsx
+++ b/frontend/src/ts/components/mount.tsx
@@ -10,11 +10,11 @@ import { Theme } from "./core/Theme";
 import { Footer } from "./layout/footer/Footer";
 import { Overlays } from "./layout/overlays/Overlays";
 import { Modals } from "./modals/Modals";
-import { AboutPage } from "./pages/AboutPage";
+import { LeaderboardPage } from "./pages/leaderboard/LeaderboardPage";
 
 const components: Record<string, () => JSXElement> = {
   footer: () => <Footer />,
-  aboutpage: () => <AboutPage />,
+  aboutpage: () => <LeaderboardPage />,
   modals: () => <Modals />,
   overlays: () => <Overlays />,
   theme: () => <Theme />,
diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
new file mode 100644
index 000000000000..cf80d75e42cf
--- /dev/null
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
@@ -0,0 +1,28 @@
+import { JSXElement, Show } from "solid-js";
+import { createStore } from "solid-js/store";
+
+import { getActivePage } from "../../../signals/core";
+
+import { Selection, Sidebar } from "./Sidebar";
+
+export function LeaderboardPage(): JSXElement {
+  const isOpen = (): boolean => getActivePage() === "leaderboards";
+  const [selection, setSelection] = createStore<Selection>({
+    type: "allTime",
+    time: "60",
+    friendsOnly: false,
+  });
+  return (
+    <Show when={isOpen}>
+      <div class="content-grid grid">
+        <div class="flex flex-col gap-8 lg:flex-row">
+          <div class="w-full lg:w-60">
+            <Sidebar onSelect={setSelection} />
+          </div>
+
+          <div class="w-full flex-1">{JSON.stringify(selection)}</div>
+        </div>
+      </div>
+    </Show>
+  );
+}
diff --git a/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx b/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx
new file mode 100644
index 000000000000..742dc66e397a
--- /dev/null
+++ b/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx
@@ -0,0 +1,142 @@
+import { Language } from "@monkeytype/schemas/languages";
+import {
+  Accessor,
+  createEffect,
+  createSignal,
+  For,
+  JSXElement,
+  Show,
+} from "solid-js";
+
+import { FaSolidIcon } from "../../../types/font-awesome";
+import { Button } from "../../common/Button";
+export type Selection = {
+  type: "allTime" | "daily" | "weekly";
+  friendsOnly: boolean;
+  time?: "15" | "60";
+  language?: Language;
+};
+
+export function Sidebar(props: {
+  onSelect: (selection: Selection) => void;
+}): JSXElement {
+  const [type, setType] = createSignal<Selection["type"]>("allTime");
+  const [friendsOnly, setFriendsOnly] =
+    createSignal<Selection["friendsOnly"]>(false);
+  const [time, setTime] = createSignal<Selection["time"]>("15");
+  const [language, setLanguage] =
+    createSignal<Selection["language"]>("english");
+
+  createEffect(() => {
+    props.onSelect({
+      type: type(),
+      friendsOnly: friendsOnly(),
+      time: type() !== "weekly" ? time() : undefined,
+      language: type() === "daily" ? language() : undefined,
+    });
+  });
+
+  return (
+    <>
+      <Group
+        selected={type}
+        onSelect={setType}
+        items={[
+          {
+            id: "allTime",
+            text: "all-time english",
+            icon: "fa-globe-americas",
+          },
+          {
+            id: "weekly",
+            text: "weekly xp",
+            icon: "fa-calendar-day",
+          },
+          {
+            id: "daily",
+            text: "daily",
+            icon: "fa-sun",
+          },
+        ]}
+      />
+      <Group
+        selected={friendsOnly}
+        onSelect={setFriendsOnly}
+        items={[
+          {
+            id: false,
+            text: "everyone",
+            icon: "fa-users",
+          },
+          {
+            id: true,
+            text: "friends only",
+            icon: "fa-user-friends",
+          },
+        ]}
+      />
+      <Show when={type() !== "weekly"}>
+        <Group
+          selected={time}
+          onSelect={setTime}
+          items={[
+            {
+              id: "15",
+              text: "time 15",
+              icon: "fa-clock",
+            },
+            {
+              id: "60",
+              text: "time 60",
+              icon: "fa-clock",
+            },
+          ]}
+        />
+      </Show>
+      <Show when={type() === "daily"}>
+        <Group
+          selected={language}
+          onSelect={setLanguage}
+          items={[
+            "english",
+            "french",
+            "german",
+            "indonesian",
+            "italian",
+            "portugese",
+            "spanish",
+          ].map((lang) => ({
+            id: lang as Language,
+            icon: "fa-globe",
+            text: lang,
+          }))}
+        />
+      </Show>
+    </>
+  );
+}
+
+function Group<T>(props: {
+  items: { id: T; text: string; icon: FaSolidIcon }[];
+  selected: Accessor<T>;
+  onSelect: (selected: T) => void;
+}): JSXElement {
+  return (
+    <div class="bg-sub-alt mb-4 grid gap-4 rounded-xl p-4">
+      <For each={props.items}>
+        {(item) => (
+          <Button
+            onClick={() => props.onSelect(item.id)}
+            fa={{ icon: item.icon }}
+            text={item.text}
+            class="justify-start"
+            classList={{
+              "bg-main": item.id === props.selected(),
+              "text-bg": item.id === props.selected(),
+            }}
+          />
+        )}
+      </For>
+    </div>
+  );
+}

From 49c92d34e6705c755c97085b3804ffad205fea4d Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 1 Feb 2026 14:18:38 +0100
Subject: [PATCH 02/26] using collections, not the best

---
 frontend/package.json                         |   4 +
 frontend/src/index.html                       |   1 +
 frontend/src/ts/collections/leaderboards.ts   |  49 ++++++++
 frontend/src/ts/components/common/Button.tsx  |   3 +
 .../pages/leaderboard/LeaderboardPage.tsx     |  29 ++++-
 .../components/pages/leaderboard/Sidebar.tsx  |   5 +-
 pnpm-lock.yaml                                | 112 ++++++++++++++++++
 7 files changed, 197 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/ts/collections/leaderboards.ts

diff --git a/frontend/package.json b/frontend/package.json
index d97f5c655374..8fb890ce70c9 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -30,6 +30,10 @@
     "@sentry/browser": "9.14.0",
     "@sentry/vite-plugin": "3.3.1",
     "@solidjs/meta": "0.29.4",
+    "@tanstack/db": "0.5.25",
+    "@tanstack/query-core": "5.90.20",
+    "@tanstack/query-db-collection": "1.0.22",
+    "@tanstack/solid-db": "0.2.5",
     "@tanstack/solid-query": "5.90.23",
     "@tanstack/solid-query-devtools": "5.91.3",
     "@tanstack/solid-table": "8.21.3",
diff --git a/frontend/src/index.html b/frontend/src/index.html
index b7ad14bba257..80f3fd97f095 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -3,6 +3,7 @@
   <load src="html/head.html" />
 
   <body>
+    <mount data-component="devtools"></mount>
     <mount data-component="overlays"></mount>
     <load src="html/warnings.html" />
     <div class="customBackground"></div>
diff --git a/frontend/src/ts/collections/leaderboards.ts b/frontend/src/ts/collections/leaderboards.ts
new file mode 100644
index 000000000000..7be8a3dffa16
--- /dev/null
+++ b/frontend/src/ts/collections/leaderboards.ts
@@ -0,0 +1,49 @@
+import { createCollection, parseLoadSubsetOptions } from "@tanstack/db";
+import { queryCollectionOptions } from "@tanstack/query-db-collection";
+import { queryClient } from "./client";
+import Ape from "../ape";
+import { GetLeaderboardQuery } from "@monkeytype/contracts/leaderboards";
+import { LeaderboardEntry } from "@monkeytype/schemas/leaderboards";
+const allTimeQueryKey = ["leaderboard", "all-time"];
+export const allTimeLeaderboardCollection = createCollection(
+  queryCollectionOptions<LeaderboardEntry>({
+    syncMode: "on-demand",
+    queryClient,
+    queryKey: allTimeQueryKey,
+    getKey: (item) => item.uid,
+    staleTime: 1000 * 60 * 15, //15 minutes
+    queryFn: async (ctx) => {
+      const { filters, limit } = parseLoadSubsetOptions(
+        ctx.meta?.loadSubsetOptions,
+      );
+      const lower =
+        (filters.find((it) => it.field[0] === "rank" && it.operator === "gt")
+          ?.value as number) ?? 0;
+      const upper =
+        (filters.find((it) => it.field[0] === "rank" && it.operator === "lte")
+          .value as number) ?? -1;
+      const pageSize = upper - lower;
+      const page = upper / pageSize - 1;
+
+      console.log("####", { lower, upper, page, pageSize });
+
+      const query: GetLeaderboardQuery = {
+        language: "english",
+        mode: "time",
+        mode2: "60",
+        pageSize,
+        page,
+      };
+
+      const response = await Ape.leaderboards.get({ query });
+
+      if (response.status !== 200) {
+        throw new Error(
+          "Cannot fetch all-time leaderboard " + response.body.message,
+        );
+      }
+      return response.body.data.entries;
+    },
+    meta: {},
+  }),
+);
diff --git a/frontend/src/ts/components/common/Button.tsx b/frontend/src/ts/components/common/Button.tsx
index 729436e3a375..67cc766f0dde 100644
--- a/frontend/src/ts/components/common/Button.tsx
+++ b/frontend/src/ts/components/common/Button.tsx
@@ -9,6 +9,7 @@ type BaseProps = {
   class?: string;
   classList?: JSX.HTMLAttributes<HTMLButtonElement>["classList"];
   type?: "text" | "button";
+  active?: boolean;
   children?: JSXElement;
 };
 
@@ -41,6 +42,8 @@ export function Button(props: ButtonProps | AnchorProps): JSXElement {
     return {
       [(props.type ?? "button") === "text" ? "textButton" : buttonClass]: true,
       [props.class ?? ""]: props.class !== undefined,
+      "bg-main": props.active,
+      "text-bg": props.active,
       ...props.classList,
     };
   };
diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
index cf80d75e42cf..183945211ed5 100644
--- a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
@@ -1,7 +1,10 @@
-import { JSXElement, Show } from "solid-js";
+import { and, gt, lt, lte, useLiveQuery } from "@tanstack/solid-db";
+import { createSignal, For, JSXElement, Show } from "solid-js";
 import { createStore } from "solid-js/store";
 
+import { allTimeLeaderboardCollection } from "../../../collections/leaderboards";
 import { getActivePage } from "../../../signals/core";
+import { addToGlobal } from "../../../utils/misc";
 
 import { Selection, Sidebar } from "./Sidebar";
 
@@ -12,6 +15,19 @@ export function LeaderboardPage(): JSXElement {
     time: "60",
     friendsOnly: false,
   });
+
+  const [page, setPage] = createSignal(0);
+
+  addToGlobal({ setPage });
+  const allTimeQuery = useLiveQuery((q) =>
+    q
+      .from({ lb: allTimeLeaderboardCollection })
+      .where(({ lb }) =>
+        and(gt(lb.rank, page() * 50), lte(lb.rank, (page() + 1) * 50)),
+      )
+      .orderBy(({ lb }) => lb.rank, "asc"),
+  );
+
   return (
     <Show when={isOpen}>
       <div class="content-grid grid">
@@ -20,7 +36,16 @@ export function LeaderboardPage(): JSXElement {
             <Sidebar onSelect={setSelection} />
           </div>
 
-          <div class="w-full flex-1">{JSON.stringify(selection)}</div>
+          <div class="w-full flex-1">
+            {JSON.stringify(selection)}
+            <For each={allTimeQuery()}>
+              {(item) => (
+                <div>
+                  {item.rank} - {item.name} - {item.wpm}
+                </div>
+              )}
+            </For>
+          </div>
         </div>
       </div>
     </Show>
diff --git a/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx b/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx
index 742dc66e397a..5baeb4daee65 100644
--- a/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx
@@ -130,10 +130,7 @@ function Group<T>(props: {
             fa={{ icon: item.icon }}
             text={item.text}
             class="justify-start"
-            classList={{
-              "bg-main": item.id === props.selected(),
-              "text-bg": item.id === props.selected(),
-            }}
+            active={item.id === props.selected()}
           />
         )}
       </For>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 59bda0b9f6db..d668ec3c38bc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -282,6 +282,18 @@ importers:
       '@solidjs/meta':
         specifier: 0.29.4
         version: 0.29.4(solid-js@1.9.10)
+      '@tanstack/db':
+        specifier: 0.5.25
+        version: 0.5.25(typescript@5.9.3)
+      '@tanstack/query-core':
+        specifier: 5.90.20
+        version: 5.90.20
+      '@tanstack/query-db-collection':
+        specifier: 1.0.22
+        version: 1.0.22(@tanstack/query-core@5.90.20)(typescript@5.9.3)
+      '@tanstack/solid-db':
+        specifier: 0.2.5
+        version: 0.2.5(solid-js@1.9.10)(typescript@5.9.3)
       '@tanstack/solid-query':
         specifier: 5.90.23
         version: 5.90.23(solid-js@1.9.10)
@@ -3277,6 +3289,21 @@ packages:
     engines: {node: '>=8.10'}
     hasBin: true
 
+  '@solid-primitives/map@0.7.2':
+    resolution: {integrity: sha512-sXK/rS68B4oq3XXNyLrzVhLtT1pnimmMUahd2FqhtYUuyQsCfnW058ptO1s+lWc2k8F/3zQSNVkZ2ifJjlcNbQ==}
+    peerDependencies:
+      solid-js: ^1.6.12
+
+  '@solid-primitives/trigger@1.2.2':
+    resolution: {integrity: sha512-IWoptVc0SWYgmpBPpCMehS5b07+tpFcvw15tOQ3QbXedSYn6KP8zCjPkHNzMxcOvOicTneleeZDP7lqmz+PQ6g==}
+    peerDependencies:
+      solid-js: ^1.6.12
+
+  '@solid-primitives/utils@6.3.2':
+    resolution: {integrity: sha512-hZ/M/qr25QOCcwDPOHtGjxTD8w2mNyVAYvcfgwzBHq2RwNqHNdDNsMZYap20+ruRwW4A3Cdkczyoz0TSxLCAPQ==}
+    peerDependencies:
+      solid-js: ^1.6.12
+
   '@solidjs/meta@0.29.4':
     resolution: {integrity: sha512-zdIWBGpR9zGx1p1bzIPqF5Gs+Ks/BH8R6fWhmUa/dcK1L2rUC8BAcZJzNRYBQv74kScf1TSOs0EY//Vd/I0V8g==}
     peerDependencies:
@@ -3295,6 +3322,9 @@ packages:
   '@standard-schema/spec@1.0.0':
     resolution: {integrity: sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==}
 
+  '@standard-schema/spec@1.1.0':
+    resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
+
   '@surma/rollup-plugin-off-main-thread@2.2.3':
     resolution: {integrity: sha512-lR8q/9W7hZpMWweNiAKU7NQerBnzQQLvi8qnTDU/fxItPhtZVMbPV3lbCwjhIlNBe9Bbr5V+KHshvWmVSG9cxQ==}
 
@@ -3388,6 +3418,16 @@ packages:
     peerDependencies:
       vite: ^5.2.0 || ^6 || ^7
 
+  '@tanstack/db-ivm@0.1.17':
+    resolution: {integrity: sha512-DK7vm56CDxNuRAdsbiPs+gITJ+16tUtYgZg3BRTLYKGIDsy8sdIO7sQFq5zl7Y+aIKAPmMAbVp9UjJ75FTtwgQ==}
+    peerDependencies:
+      typescript: '>=4.7'
+
+  '@tanstack/db@0.5.25':
+    resolution: {integrity: sha512-VqVchs6Mm4rw2GyiOkaoD+PJw6lCJT8EI/TzPu8KWZy3QxyOlilpMvEuDTCl0LZdp1iLYlQT1NdgDg0gimV3kQ==}
+    peerDependencies:
+      typescript: '>=4.7'
+
   '@tanstack/eslint-plugin-query@5.91.4':
     resolution: {integrity: sha512-8a+GAeR7oxJ5laNyYBQ6miPK09Hi18o5Oie/jx8zioXODv/AUFLZQecKabPdpQSLmuDXEBPKFh+W5DKbWlahjQ==}
     peerDependencies:
@@ -3397,12 +3437,27 @@ packages:
       typescript:
         optional: true
 
+  '@tanstack/pacer-lite@0.2.1':
+    resolution: {integrity: sha512-3PouiFjR4B6x1c969/Pl4ZIJleof1M0n6fNX8NRiC9Sqv1g06CVDlEaXUR4212ycGFyfq4q+t8Gi37Xy+z34iQ==}
+    engines: {node: '>=18'}
+
   '@tanstack/query-core@5.90.20':
     resolution: {integrity: sha512-OMD2HLpNouXEfZJWcKeVKUgQ5n+n3A2JFmBaScpNDUqSrQSjiveC7dKMe53uJUg1nDG16ttFPz2xfilz6i2uVg==}
 
+  '@tanstack/query-db-collection@1.0.22':
+    resolution: {integrity: sha512-feYfOIA/xgf3S/aWIhq7Oov/RE66M0wMOZUk1+oAHZ3W7x0br7JzRKFYwdTtIMtopFt8tDq3Pt2gtZVZu+S7rA==}
+    peerDependencies:
+      '@tanstack/query-core': ^5.0.0
+      typescript: '>=4.7'
+
   '@tanstack/query-devtools@5.93.0':
     resolution: {integrity: sha512-+kpsx1NQnOFTZsw6HAFCW3HkKg0+2cepGtAWXjiiSOJJ1CtQpt72EE2nyZb+AjAbLRPoeRmPJ8MtQd8r8gsPdg==}
 
+  '@tanstack/solid-db@0.2.5':
+    resolution: {integrity: sha512-tunB6Nbd2UHnPGXwprc0S4OjsP1JvwG0blmLnKgoG3bKdGyJQ8yVknHc7WWwIUdeAz4tH4x/p2RDVloqEKrnCA==}
+    peerDependencies:
+      solid-js: '>=1.9.0'
+
   '@tanstack/solid-query-devtools@5.91.3':
     resolution: {integrity: sha512-xzVwIIxQPbiublZP3RkGp8KVjt8zenv5y1YTSRarP32mLUHJgfdofvjsDvMEhhL/lomz90qa0jCIGsSxoSTyYQ==}
     peerDependencies:
@@ -5722,6 +5777,10 @@ packages:
   fraction.js@4.3.7:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
 
+  fractional-indexing@3.2.0:
+    resolution: {integrity: sha512-PcOxmqwYCW7O2ovKRU8OoQQj2yqTfEB/yeTYk4gPid6dN5ODRfU1hXd9tTVZzax/0NkO7AxpHykvZnT1aYp/BQ==}
+    engines: {node: ^14.13.1 || >=16.0.0}
+
   fresh@0.5.2:
     resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
     engines: {node: '>= 0.6'}
@@ -8867,6 +8926,9 @@ packages:
   sort-any@2.0.0:
     resolution: {integrity: sha512-T9JoiDewQEmWcnmPn/s9h/PH9t3d/LSWi0RgVmXSuDYeZXTZOZ1/wrK2PHaptuR1VXe3clLLt0pD6sgVOwjNEA==}
 
+  sorted-btree@1.8.1:
+    resolution: {integrity: sha512-395+XIP+wqNn3USkFSrNz7G3Ss/MXlZEqesxvzCRFwL14h6e8LukDHdLBePn5pwbm5OQ9vGu8mDyz2lLDIqamQ==}
+
   source-map-js@1.2.0:
     resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
     engines: {node: '>=0.10.0'}
@@ -13044,6 +13106,20 @@ snapshots:
       ignore: 5.3.2
       p-map: 4.0.0
 
+  '@solid-primitives/map@0.7.2(solid-js@1.9.10)':
+    dependencies:
+      '@solid-primitives/trigger': 1.2.2(solid-js@1.9.10)
+      solid-js: 1.9.10
+
+  '@solid-primitives/trigger@1.2.2(solid-js@1.9.10)':
+    dependencies:
+      '@solid-primitives/utils': 6.3.2(solid-js@1.9.10)
+      solid-js: 1.9.10
+
+  '@solid-primitives/utils@6.3.2(solid-js@1.9.10)':
+    dependencies:
+      solid-js: 1.9.10
+
   '@solidjs/meta@0.29.4(solid-js@1.9.10)':
     dependencies:
       solid-js: 1.9.10
@@ -13055,6 +13131,8 @@ snapshots:
 
   '@standard-schema/spec@1.0.0': {}
 
+  '@standard-schema/spec@1.1.0': {}
+
   '@surma/rollup-plugin-off-main-thread@2.2.3':
     dependencies:
       ejs: 3.1.10
@@ -13130,6 +13208,19 @@ snapshots:
       tailwindcss: 4.1.18
       vite: 7.1.12(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.70.0)(terser@5.46.0)(tsx@4.16.2)(yaml@2.8.1)
 
+  '@tanstack/db-ivm@0.1.17(typescript@5.9.3)':
+    dependencies:
+      fractional-indexing: 3.2.0
+      sorted-btree: 1.8.1
+      typescript: 5.9.3
+
+  '@tanstack/db@0.5.25(typescript@5.9.3)':
+    dependencies:
+      '@standard-schema/spec': 1.1.0
+      '@tanstack/db-ivm': 0.1.17(typescript@5.9.3)
+      '@tanstack/pacer-lite': 0.2.1
+      typescript: 5.9.3
+
   '@tanstack/eslint-plugin-query@5.91.4(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/utils': 8.52.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
@@ -13139,10 +13230,27 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@tanstack/pacer-lite@0.2.1': {}
+
   '@tanstack/query-core@5.90.20': {}
 
+  '@tanstack/query-db-collection@1.0.22(@tanstack/query-core@5.90.20)(typescript@5.9.3)':
+    dependencies:
+      '@standard-schema/spec': 1.1.0
+      '@tanstack/db': 0.5.25(typescript@5.9.3)
+      '@tanstack/query-core': 5.90.20
+      typescript: 5.9.3
+
   '@tanstack/query-devtools@5.93.0': {}
 
+  '@tanstack/solid-db@0.2.5(solid-js@1.9.10)(typescript@5.9.3)':
+    dependencies:
+      '@solid-primitives/map': 0.7.2(solid-js@1.9.10)
+      '@tanstack/db': 0.5.25(typescript@5.9.3)
+      solid-js: 1.9.10
+    transitivePeerDependencies:
+      - typescript
+
   '@tanstack/solid-query-devtools@5.91.3(@tanstack/solid-query@5.90.23(solid-js@1.9.10))(solid-js@1.9.10)':
     dependencies:
       '@tanstack/query-devtools': 5.93.0
@@ -16021,6 +16129,8 @@ snapshots:
 
   fraction.js@4.3.7: {}
 
+  fractional-indexing@3.2.0: {}
+
   fresh@0.5.2: {}
 
   fresh@2.0.0: {}
@@ -19652,6 +19762,8 @@ snapshots:
     dependencies:
       lodash: 4.17.21
 
+  sorted-btree@1.8.1: {}
+
   source-map-js@1.2.0: {}
 
   source-map-js@1.2.1: {}

From 5b8d5304585af07695727e578cdf4dfddfed14b9 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Mon, 2 Feb 2026 14:49:13 +0100
Subject: [PATCH 03/26] fetch dynamic leaderboard from server configuration

---
 frontend/src/ts/ape/server-configuration.ts   |  31 ++-
 frontend/src/ts/collections/leaderboards.ts   |   2 -
 .../pages/leaderboard/LeaderboardPage.tsx     |   5 +-
 .../components/pages/leaderboard/Sidebar.tsx  | 235 +++++++++++++++---
 .../src/ts/controllers/page-controller.ts     |   6 +-
 5 files changed, 230 insertions(+), 49 deletions(-)

diff --git a/frontend/src/ts/ape/server-configuration.ts b/frontend/src/ts/ape/server-configuration.ts
index 75a60cfd99cd..b83c6c1a510e 100644
--- a/frontend/src/ts/ape/server-configuration.ts
+++ b/frontend/src/ts/ape/server-configuration.ts
@@ -1,8 +1,9 @@
 import { Configuration } from "@monkeytype/schemas/configuration";
 import Ape from ".";
 import { promiseWithResolvers } from "../utils/misc";
-
-let config: Configuration | undefined = undefined;
+import { queryClient } from "../collections/client";
+const staleTime = 1000 * 60 * 60;
+const queryKey = ["serverConfiguration"];
 
 const {
   promise: configurationPromise,
@@ -12,20 +13,34 @@ const {
 
 export { configurationPromise };
 
+export function getServerConfiguration(): Configuration | undefined {
+  return get();
+}
+
 export function get(): Configuration | undefined {
-  return config;
+  return queryClient.getQueryData(queryKey);
 }
 
 export async function sync(): Promise<void> {
+  try {
+    await queryClient.fetchQuery({
+      queryFn: fetch,
+      queryKey,
+      staleTime,
+    });
+    resolve(true);
+  } catch (e) {
+    reject(e);
+  }
+}
+
+async function fetch(): Promise<Configuration> {
   const response = await Ape.configuration.get();
 
   if (response.status !== 200) {
     const message = `Could not fetch configuration: ${response.body.message}`;
     console.error(message);
-    reject(message);
-    return;
-  } else {
-    config = response.body.data ?? undefined;
-    resolve(true);
+    throw new Error(message);
   }
+  return response.body.data;
 }
diff --git a/frontend/src/ts/collections/leaderboards.ts b/frontend/src/ts/collections/leaderboards.ts
index 7be8a3dffa16..3e006f4d5635 100644
--- a/frontend/src/ts/collections/leaderboards.ts
+++ b/frontend/src/ts/collections/leaderboards.ts
@@ -25,8 +25,6 @@ export const allTimeLeaderboardCollection = createCollection(
       const pageSize = upper - lower;
       const page = upper / pageSize - 1;
 
-      console.log("####", { lower, upper, page, pageSize });
-
       const query: GetLeaderboardQuery = {
         language: "english",
         mode: "time",
diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
index 183945211ed5..af01012502a5 100644
--- a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
@@ -1,4 +1,4 @@
-import { and, gt, lt, lte, useLiveQuery } from "@tanstack/solid-db";
+import { and, gt, lte, useLiveQuery } from "@tanstack/solid-db";
 import { createSignal, For, JSXElement, Show } from "solid-js";
 import { createStore } from "solid-js/store";
 
@@ -12,7 +12,8 @@ export function LeaderboardPage(): JSXElement {
   const isOpen = (): boolean => getActivePage() === "leaderboards";
   const [selection, setSelection] = createStore<Selection>({
     type: "allTime",
-    time: "60",
+    mode: "time",
+    mode2: "15",
     friendsOnly: false,
   });
 
diff --git a/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx b/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx
index 5baeb4daee65..b731b14589d6 100644
--- a/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx
@@ -1,4 +1,5 @@
 import { Language } from "@monkeytype/schemas/languages";
+import { Mode, Mode2 } from "@monkeytype/schemas/shared";
 import {
   Accessor,
   createEffect,
@@ -8,31 +9,128 @@ import {
   Show,
 } from "solid-js";
 
+import { getServerConfiguration } from "../../../ape/server-configuration";
 import { FaSolidIcon } from "../../../types/font-awesome";
 import { Button } from "../../common/Button";
+
+type GroupItem<T> = { id: T; text: string; icon: FaSolidIcon };
+export type LeaderboardType = "allTime" | "daily" | "weekly";
 export type Selection = {
-  type: "allTime" | "daily" | "weekly";
+  type: LeaderboardType;
   friendsOnly: boolean;
-  time?: "15" | "60";
+  mode?: Mode;
+  // oxlint-disable-next-line typescript/no-explicit-any
+  mode2?: Mode2<any>;
   language?: Language;
 };
 
+type LanguagesByModeByMode2 = Partial<
+  // oxlint-disable-next-line typescript/no-explicit-any
+  Record<Mode, Record<Mode2<any>, Language[]>>
+>;
+
+type ValidLeaderboards = {
+  allTime: LanguagesByModeByMode2;
+  weekly: LanguagesByModeByMode2;
+  daily: LanguagesByModeByMode2;
+};
+
+type ModeSelect = Required<Pick<Selection, "mode" | "mode2">>;
+
 export function Sidebar(props: {
   onSelect: (selection: Selection) => void;
 }): JSXElement {
   const [type, setType] = createSignal<Selection["type"]>("allTime");
   const [friendsOnly, setFriendsOnly] =
     createSignal<Selection["friendsOnly"]>(false);
-  const [time, setTime] = createSignal<Selection["time"]>("15");
+  const [mode, setMode] = createSignal<ModeSelect | undefined>({
+    mode: "time",
+    mode2: "15",
+  });
   const [language, setLanguage] =
     createSignal<Selection["language"]>("english");
 
+  const validLeaderboards = (): ValidLeaderboards => getValidLeaderboards();
+
+  /**
+   * update leaderboard selection to a valid state.
+   * @param key
+   * @returns
+   */
+  const setSelected = (
+    key: "type" | "mode" | "language",
+  ): ((val: unknown) => void) => {
+    return (value) => {
+      const state = {
+        type: type(),
+        mode: mode(),
+        language: language(),
+      };
+
+      //@ts-expect-error generic
+      state[key] = value;
+
+      if (state.type === "weekly") {
+        setType("weekly");
+        setLanguage(undefined);
+        setMode(undefined);
+        return;
+      }
+      state.mode ??= { mode: "time", mode2: "15" };
+
+      const validLeaderboard = validLeaderboards()[state.type];
+
+      let validModes2 = validLeaderboard[state.mode.mode];
+
+      if (validModes2 === undefined) {
+        const firstMode = Object.keys(validLeaderboard).sort()[0] as Mode;
+        if (firstMode === undefined) {
+          throw new Error(`no valid leaderboard config for type ${state.type}`);
+        }
+        state.mode.mode = firstMode;
+        validModes2 = validLeaderboard[firstMode];
+      }
+
+      let supportedLanguages = validModes2?.[state.mode.mode2];
+      if (supportedLanguages === undefined) {
+        const firstLanguage = Object.keys(validModes2 ?? {}).sort(
+          (a, b) => parseInt(a) - parseInt(b),
+        )[0];
+        if (firstLanguage === undefined) {
+          throw new Error(
+            `no valid leaderboard config for type ${state.type} and mode ${state.mode.mode}`,
+          );
+        }
+        state.mode.mode2 = firstLanguage;
+        supportedLanguages = validModes2?.[firstLanguage];
+      }
+
+      if (supportedLanguages === undefined || supportedLanguages.length < 1) {
+        throw new Error(
+          `Daily leaderboard config not valid for mode:${state.mode.mode} mode2:${state.mode.mode2 as string}`,
+        );
+      }
+
+      if (
+        state.language === undefined ||
+        !supportedLanguages.includes(state.language)
+      ) {
+        state.language = supportedLanguages.sort()[0] as Language;
+      }
+
+      setType(state.type);
+      setMode(state.mode);
+      setLanguage(state.language);
+    };
+  };
+
   createEffect(() => {
     props.onSelect({
       type: type(),
       friendsOnly: friendsOnly(),
-      time: type() !== "weekly" ? time() : undefined,
-      language: type() === "daily" ? language() : undefined,
+      mode: mode()?.mode,
+      mode2: mode()?.mode2,
+      language: language(),
     });
   });
 
@@ -40,7 +138,7 @@ export function Sidebar(props: {
     <>
       <Group
         selected={type}
-        onSelect={setType}
+        onSelect={setSelected("type")}
         items={[
           {
             id: "allTime",
@@ -77,39 +175,16 @@ export function Sidebar(props: {
       />
       <Show when={type() !== "weekly"}>
         <Group
-          selected={time}
-          onSelect={setTime}
-          items={[
-            {
-              id: "15",
-              text: "time 15",
-              icon: "fa-clock",
-            },
-            {
-              id: "60",
-              text: "time 60",
-              icon: "fa-clock",
-            },
-          ]}
+          selected={mode}
+          onSelect={setSelected("mode")}
+          items={getModeButtons(validLeaderboards()[type()], language())}
         />
       </Show>
       <Show when={type() === "daily"}>
         <Group
           selected={language}
-          onSelect={setLanguage}
-          items={[
-            "english",
-            "french",
-            "german",
-            "indonesian",
-            "italian",
-            "portugese",
-            "spanish",
-          ].map((lang) => ({
-            id: lang as Language,
-            icon: "fa-globe",
-            text: lang,
-          }))}
+          onSelect={setSelected("language")}
+          items={getLanguageButtons(validLeaderboards()[type()], mode())}
         />
       </Show>
     </>
@@ -117,10 +192,13 @@ export function Sidebar(props: {
 }
 
 function Group<T>(props: {
-  items: { id: T; text: string; icon: FaSolidIcon }[];
+  items: GroupItem<T>[];
   selected: Accessor<T>;
   onSelect: (selected: T) => void;
 }): JSXElement {
+  const isEqual = (a: unknown, b: unknown): boolean =>
+    typeof a === "object" ? JSON.stringify(a) === JSON.stringify(b) : a === b;
+
   return (
     <div class="bg-sub-alt mb-4 grid gap-4 rounded-xl p-4">
       <For each={props.items}>
@@ -130,10 +208,95 @@ function Group<T>(props: {
             fa={{ icon: item.icon }}
             text={item.text}
             class="justify-start"
-            active={item.id === props.selected()}
+            active={isEqual(item.id, props.selected())}
           />
         )}
       </For>
     </div>
   );
 }
+
+function getModeButtons(
+  valid: LanguagesByModeByMode2,
+  language?: Language,
+): GroupItem<ModeSelect>[] {
+  const modes = Object.entries(valid).flatMap(([mode, mode2List]) =>
+    Object.entries(mode2List)
+      .filter(
+        ([_, languages]) =>
+          language === undefined || languages.includes(language),
+      )
+      .flatMap(([mode2]) => ({
+        id: { mode, mode2 },
+        text: `${mode} ${mode2}`,
+        icon: mode === "time" ? "fa-clock" : "fa-align-left",
+      })),
+  );
+
+  return modes as GroupItem<ModeSelect>[];
+}
+
+function getLanguageButtons(
+  valid: LanguagesByModeByMode2,
+  mode: ModeSelect | undefined,
+): GroupItem<Language>[] {
+  console.log("#### getLanguageButtons", mode);
+  if (mode === undefined) return [];
+
+  return (valid[mode.mode]?.[mode.mode2] ?? []).map((language) => ({
+    id: language,
+    text: language,
+    icon: "fa-globe",
+  }));
+}
+function getValidLeaderboards(): ValidLeaderboards {
+  const dailyRulesConfig =
+    getServerConfiguration()?.dailyLeaderboards.validModeRules ?? [];
+
+  //a rule can contain multiple values. create a flat list out of them
+  const dailyRules = dailyRulesConfig.flatMap((rule) => {
+    const languages = convertRuleOption(rule.language) as Language[];
+    const mode2List = convertRuleOption(rule.mode2);
+
+    return mode2List.map((mode2) => ({
+      mode: rule.mode as Mode,
+      mode2,
+      languages,
+    }));
+  });
+
+  return {
+    allTime: {
+      time: {
+        "15": ["english"],
+        "60": ["english"],
+      },
+    },
+    weekly: {},
+    daily: dailyRules.reduce<
+      Partial<Record<Mode, Record<string /*mode2*/, Language[]>>>
+    >((acc, { mode, mode2, languages }) => {
+      let modes = acc[mode];
+      if (modes === undefined) {
+        modes = {};
+        acc[mode] = modes;
+      }
+
+      let modes2 = modes[mode2];
+      if (modes2 === undefined) {
+        modes2 = [];
+        modes[mode2] = modes2;
+      }
+
+      modes2.push(...languages);
+      return acc;
+    }, {}),
+  };
+}
+
+function convertRuleOption(rule: string): string[] {
+  if (rule.startsWith("(")) {
+    return rule.slice(1, -1).split("|");
+  }
+  return [rule];
+}
diff --git a/frontend/src/ts/controllers/page-controller.ts b/frontend/src/ts/controllers/page-controller.ts
index 112179c62dd3..fa0d75ee36a6 100644
--- a/frontend/src/ts/controllers/page-controller.ts
+++ b/frontend/src/ts/controllers/page-controller.ts
@@ -295,7 +295,10 @@ export async function change(
   return true;
 }
 
-function solidPage(id: PageName, props?: { path?: string }): Page<undefined> {
+function solidPage(
+  id: PageName,
+  props?: { path?: string; loadingOptions?: LoadingOptions },
+): Page<undefined> {
   const path = props?.path ?? `/${id}`;
   const internalId = `page${Strings.capitalizeFirstLetter(id)}`;
   onDOMReady(() => Skeleton.save(internalId));
@@ -309,5 +312,6 @@ function solidPage(id: PageName, props?: { path?: string }): Page<undefined> {
     afterHide: async () => {
       Skeleton.remove(internalId);
     },
+    loadingOptions: props?.loadingOptions,
   });
 }

From 9e5cbc499985c64d4b9996e086c8e6794f3756a1 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Mon, 2 Feb 2026 16:46:51 +0100
Subject: [PATCH 04/26] replace db with query

---
 frontend/package.json                         |   3 -
 frontend/src/ts/collections/leaderboards.ts   |  47 ------
 .../pages/leaderboard/LeaderboardPage.tsx     | 143 +++++++++++++++---
 .../components/pages/leaderboard/Sidebar.tsx  |  43 +++---
 frontend/src/ts/signals/core.ts               |   3 +
 pnpm-lock.yaml                                | 109 -------------
 6 files changed, 146 insertions(+), 202 deletions(-)
 delete mode 100644 frontend/src/ts/collections/leaderboards.ts

diff --git a/frontend/package.json b/frontend/package.json
index 8fb890ce70c9..0ed6b852860a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -30,10 +30,7 @@
     "@sentry/browser": "9.14.0",
     "@sentry/vite-plugin": "3.3.1",
     "@solidjs/meta": "0.29.4",
-    "@tanstack/db": "0.5.25",
     "@tanstack/query-core": "5.90.20",
-    "@tanstack/query-db-collection": "1.0.22",
-    "@tanstack/solid-db": "0.2.5",
     "@tanstack/solid-query": "5.90.23",
     "@tanstack/solid-query-devtools": "5.91.3",
     "@tanstack/solid-table": "8.21.3",
diff --git a/frontend/src/ts/collections/leaderboards.ts b/frontend/src/ts/collections/leaderboards.ts
deleted file mode 100644
index 3e006f4d5635..000000000000
--- a/frontend/src/ts/collections/leaderboards.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { createCollection, parseLoadSubsetOptions } from "@tanstack/db";
-import { queryCollectionOptions } from "@tanstack/query-db-collection";
-import { queryClient } from "./client";
-import Ape from "../ape";
-import { GetLeaderboardQuery } from "@monkeytype/contracts/leaderboards";
-import { LeaderboardEntry } from "@monkeytype/schemas/leaderboards";
-const allTimeQueryKey = ["leaderboard", "all-time"];
-export const allTimeLeaderboardCollection = createCollection(
-  queryCollectionOptions<LeaderboardEntry>({
-    syncMode: "on-demand",
-    queryClient,
-    queryKey: allTimeQueryKey,
-    getKey: (item) => item.uid,
-    staleTime: 1000 * 60 * 15, //15 minutes
-    queryFn: async (ctx) => {
-      const { filters, limit } = parseLoadSubsetOptions(
-        ctx.meta?.loadSubsetOptions,
-      );
-      const lower =
-        (filters.find((it) => it.field[0] === "rank" && it.operator === "gt")
-          ?.value as number) ?? 0;
-      const upper =
-        (filters.find((it) => it.field[0] === "rank" && it.operator === "lte")
-          .value as number) ?? -1;
-      const pageSize = upper - lower;
-      const page = upper / pageSize - 1;
-
-      const query: GetLeaderboardQuery = {
-        language: "english",
-        mode: "time",
-        mode2: "60",
-        pageSize,
-        page,
-      };
-
-      const response = await Ape.leaderboards.get({ query });
-
-      if (response.status !== 200) {
-        throw new Error(
-          "Cannot fetch all-time leaderboard " + response.body.message,
-        );
-      }
-      return response.body.data.entries;
-    },
-    meta: {},
-  }),
-);
diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
index af01012502a5..87b8574474e9 100644
--- a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
@@ -1,12 +1,17 @@
-import { and, gt, lte, useLiveQuery } from "@tanstack/solid-db";
+import {
+  LeaderboardEntry,
+  XpLeaderboardEntry,
+} from "@monkeytype/schemas/leaderboards";
+import { keepPreviousData, useQuery } from "@tanstack/solid-query";
 import { createSignal, For, JSXElement, Show } from "solid-js";
 import { createStore } from "solid-js/store";
 
-import { allTimeLeaderboardCollection } from "../../../collections/leaderboards";
+import Ape from "../../../ape";
 import { getActivePage } from "../../../signals/core";
-import { addToGlobal } from "../../../utils/misc";
+import { Button } from "../../common/Button";
+import { Conditional } from "../../common/Conditional";
 
-import { Selection, Sidebar } from "./Sidebar";
+import { LeaderboardType, Selection, Sidebar } from "./Sidebar";
 
 export function LeaderboardPage(): JSXElement {
   const isOpen = (): boolean => getActivePage() === "leaderboards";
@@ -18,37 +23,131 @@ export function LeaderboardPage(): JSXElement {
   });
 
   const [page, setPage] = createSignal(0);
+  const onSelectionChange = (selection: Selection): void => {
+    setSelection(selection);
+    setPage(0);
+  };
 
-  addToGlobal({ setPage });
-  const allTimeQuery = useLiveQuery((q) =>
-    q
-      .from({ lb: allTimeLeaderboardCollection })
-      .where(({ lb }) =>
-        and(gt(lb.rank, page() * 50), lte(lb.rank, (page() + 1) * 50)),
-      )
-      .orderBy(({ lb }) => lb.rank, "asc"),
-  );
+  const query = useQuery(() => ({
+    queryKey: [
+      selection.friendsOnly ? "user" : "public",
+      "leaderboard",
+      selection.type,
+      {
+        mode: selection.mode,
+        mode2: selection.mode2,
+        language: selection.language,
+        previous: false, //TODO
+      },
+      { page: page() ?? 0 },
+    ],
+    queryFn: async (ctx) => {
+      const type = ctx.queryKey[2] as LeaderboardType | undefined;
+      const mode = ctx.queryKey[3] as
+        | Required<Omit<Selection, "type"> & { previous: boolean }>
+        | undefined;
+      const page = ctx.queryKey[4] as { page: number } | undefined;
+      if (type === undefined) throw new Error("type missing in query");
+      if (mode === undefined) throw new Error("mode missing in query");
+      if (page === undefined) throw new Error("page missing in query");
+
+      if (type === "weekly") {
+        return fetchWeeklyLeaderboard(mode.previous ?? false, mode.friendsOnly);
+      }
+
+      if (mode.language === undefined) {
+        throw new Error("language missing in query");
+      }
+
+      return fetchLeaderboard(type, mode, page.page);
+    },
+    //5 minutes for alltime, 10 seconds for others
+    staleTime: selection.type === "allTime" ? 1000 * 60 * 5 : 1000 * 10,
+    placeholderData: keepPreviousData,
+  }));
 
   return (
     <Show when={isOpen}>
       <div class="content-grid grid">
         <div class="flex flex-col gap-8 lg:flex-row">
           <div class="w-full lg:w-60">
-            <Sidebar onSelect={setSelection} />
+            <Sidebar onSelect={onSelectionChange} />
           </div>
 
           <div class="w-full flex-1">
-            {JSON.stringify(selection)}
-            <For each={allTimeQuery()}>
-              {(item) => (
-                <div>
-                  {item.rank} - {item.name} - {item.wpm}
-                </div>
-              )}
-            </For>
+            <Button
+              onClick={() => setPage((old) => old - 1)}
+              fa={{ icon: "fa-chevron-left" }}
+            />
+            <Button
+              onClick={() => setPage((old) => old + 1)}
+              fa={{ icon: "fa-chevron-right" }}
+            />
+
+            <Show when={query.isError}>error: {query.error}</Show>
+            <Show when={query.isLoading}>loading....</Show>
+            <Show when={query.isRefetching}>loading updating...</Show>
+
+            <Conditional
+              if={selection.type === "weekly"}
+              then={<div>t.b.d.</div>}
+              else={
+                <For each={query.data}>
+                  {(item) => (
+                    <div>
+                      {item.rank} - {item.name} - {item.wpm}
+                    </div>
+                  )}
+                </For>
+              }
+            />
           </div>
         </div>
       </div>
     </Show>
   );
 }
+
+async function fetchWeeklyLeaderboard(
+  friendsOnly: boolean,
+  previousWeek: boolean,
+): Promise<XpLeaderboardEntry[]> {
+  const response = await Ape.leaderboards.getWeeklyXp({
+    query: { friendsOnly, weeksBefore: previousWeek ? 1 : undefined },
+  });
+
+  if (response.status !== 200) {
+    throw new Error(
+      "Error fetching weekly leaderboard: " + response.body.message,
+    );
+  }
+
+  return response.body.data.entries;
+}
+async function fetchLeaderboard(
+  type: "allTime" | "daily",
+  selection: Required<Omit<Selection, "type"> & { previous: boolean }>,
+  page: number,
+): Promise<LeaderboardEntry[]> {
+  const query = {
+    friendsOnly: selection.friendsOnly,
+    language: selection.language,
+    mode: selection.mode,
+    mode2: selection.mode2,
+    pageSize: 50,
+    page,
+  };
+  const response = await (type === "allTime"
+    ? Ape.leaderboards.get({ query })
+    : Ape.leaderboards.getDaily({
+        query: { ...query, daysBefore: selection.previous ? 1 : undefined },
+      }));
+
+  if (response.status !== 200) {
+    throw new Error(
+      `Failed to get ${type} leaderboard: ` + response.body.message,
+    );
+  }
+
+  return response.body.data.entries;
+}
diff --git a/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx b/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx
index b731b14589d6..1e435f6c2ca1 100644
--- a/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx
@@ -10,6 +10,7 @@ import {
 } from "solid-js";
 
 import { getServerConfiguration } from "../../../ape/server-configuration";
+import { isLoggedIn } from "../../../signals/core";
 import { FaSolidIcon } from "../../../types/font-awesome";
 import { Button } from "../../common/Button";
 
@@ -19,8 +20,7 @@ export type Selection = {
   type: LeaderboardType;
   friendsOnly: boolean;
   mode?: Mode;
-  // oxlint-disable-next-line typescript/no-explicit-any
-  mode2?: Mode2<any>;
+  mode2?: string;
   language?: Language;
 };
 
@@ -35,7 +35,7 @@ type ValidLeaderboards = {
   daily: LanguagesByModeByMode2;
 };
 
-type ModeSelect = Required<Pick<Selection, "mode" | "mode2">>;
+export type ModeSelect = Required<Pick<Selection, "mode" | "mode2">>;
 
 export function Sidebar(props: {
   onSelect: (selection: Selection) => void;
@@ -107,7 +107,7 @@ export function Sidebar(props: {
 
       if (supportedLanguages === undefined || supportedLanguages.length < 1) {
         throw new Error(
-          `Daily leaderboard config not valid for mode:${state.mode.mode} mode2:${state.mode.mode2 as string}`,
+          `Daily leaderboard config not valid for mode:${state.mode.mode} mode2:${state.mode.mode2}`,
         );
       }
 
@@ -157,22 +157,24 @@ export function Sidebar(props: {
           },
         ]}
       />
-      <Group
-        selected={friendsOnly}
-        onSelect={setFriendsOnly}
-        items={[
-          {
-            id: false,
-            text: "everyone",
-            icon: "fa-users",
-          },
-          {
-            id: true,
-            text: "friends only",
-            icon: "fa-user-friends",
-          },
-        ]}
-      />
+      <Show when={isLoggedIn()}>
+        <Group
+          selected={friendsOnly}
+          onSelect={setFriendsOnly}
+          items={[
+            {
+              id: false,
+              text: "everyone",
+              icon: "fa-users",
+            },
+            {
+              id: true,
+              text: "friends only",
+              icon: "fa-user-friends",
+            },
+          ]}
+        />
+      </Show>
       <Show when={type() !== "weekly"}>
         <Group
           selected={mode}
@@ -240,7 +242,6 @@ function getLanguageButtons(
   valid: LanguagesByModeByMode2,
   mode: ModeSelect | undefined,
 ): GroupItem<Language>[] {
-  console.log("#### getLanguageButtons", mode);
   if (mode === undefined) return [];
 
   return (valid[mode.mode]?.[mode.mode2] ?? []).map((language) => ({
diff --git a/frontend/src/ts/signals/core.ts b/frontend/src/ts/signals/core.ts
index f3c6127b08e0..02ce0acb32f6 100644
--- a/frontend/src/ts/signals/core.ts
+++ b/frontend/src/ts/signals/core.ts
@@ -29,3 +29,6 @@ export const [getCommandlineSubgroup, setCommandlineSubgroup] = createSignal<
 export const [getFocus, setFocus] = createSignal(false);
 export const [getGlobalOffsetTop, setGlobalOffsetTop] = createSignal(0);
 export const [getIsScreenshotting, setIsScreenshotting] = createSignal(false);
+
+//TODO
+export const [isLoggedIn] = createSignal(true);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d668ec3c38bc..f2c7f1ba37b9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -282,18 +282,9 @@ importers:
       '@solidjs/meta':
         specifier: 0.29.4
         version: 0.29.4(solid-js@1.9.10)
-      '@tanstack/db':
-        specifier: 0.5.25
-        version: 0.5.25(typescript@5.9.3)
       '@tanstack/query-core':
         specifier: 5.90.20
         version: 5.90.20
-      '@tanstack/query-db-collection':
-        specifier: 1.0.22
-        version: 1.0.22(@tanstack/query-core@5.90.20)(typescript@5.9.3)
-      '@tanstack/solid-db':
-        specifier: 0.2.5
-        version: 0.2.5(solid-js@1.9.10)(typescript@5.9.3)
       '@tanstack/solid-query':
         specifier: 5.90.23
         version: 5.90.23(solid-js@1.9.10)
@@ -3289,21 +3280,6 @@ packages:
     engines: {node: '>=8.10'}
     hasBin: true
 
-  '@solid-primitives/map@0.7.2':
-    resolution: {integrity: sha512-sXK/rS68B4oq3XXNyLrzVhLtT1pnimmMUahd2FqhtYUuyQsCfnW058ptO1s+lWc2k8F/3zQSNVkZ2ifJjlcNbQ==}
-    peerDependencies:
-      solid-js: ^1.6.12
-
-  '@solid-primitives/trigger@1.2.2':
-    resolution: {integrity: sha512-IWoptVc0SWYgmpBPpCMehS5b07+tpFcvw15tOQ3QbXedSYn6KP8zCjPkHNzMxcOvOicTneleeZDP7lqmz+PQ6g==}
-    peerDependencies:
-      solid-js: ^1.6.12
-
-  '@solid-primitives/utils@6.3.2':
-    resolution: {integrity: sha512-hZ/M/qr25QOCcwDPOHtGjxTD8w2mNyVAYvcfgwzBHq2RwNqHNdDNsMZYap20+ruRwW4A3Cdkczyoz0TSxLCAPQ==}
-    peerDependencies:
-      solid-js: ^1.6.12
-
   '@solidjs/meta@0.29.4':
     resolution: {integrity: sha512-zdIWBGpR9zGx1p1bzIPqF5Gs+Ks/BH8R6fWhmUa/dcK1L2rUC8BAcZJzNRYBQv74kScf1TSOs0EY//Vd/I0V8g==}
     peerDependencies:
@@ -3322,9 +3298,6 @@ packages:
   '@standard-schema/spec@1.0.0':
     resolution: {integrity: sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==}
 
-  '@standard-schema/spec@1.1.0':
-    resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
-
   '@surma/rollup-plugin-off-main-thread@2.2.3':
     resolution: {integrity: sha512-lR8q/9W7hZpMWweNiAKU7NQerBnzQQLvi8qnTDU/fxItPhtZVMbPV3lbCwjhIlNBe9Bbr5V+KHshvWmVSG9cxQ==}
 
@@ -3418,16 +3391,6 @@ packages:
     peerDependencies:
       vite: ^5.2.0 || ^6 || ^7
 
-  '@tanstack/db-ivm@0.1.17':
-    resolution: {integrity: sha512-DK7vm56CDxNuRAdsbiPs+gITJ+16tUtYgZg3BRTLYKGIDsy8sdIO7sQFq5zl7Y+aIKAPmMAbVp9UjJ75FTtwgQ==}
-    peerDependencies:
-      typescript: '>=4.7'
-
-  '@tanstack/db@0.5.25':
-    resolution: {integrity: sha512-VqVchs6Mm4rw2GyiOkaoD+PJw6lCJT8EI/TzPu8KWZy3QxyOlilpMvEuDTCl0LZdp1iLYlQT1NdgDg0gimV3kQ==}
-    peerDependencies:
-      typescript: '>=4.7'
-
   '@tanstack/eslint-plugin-query@5.91.4':
     resolution: {integrity: sha512-8a+GAeR7oxJ5laNyYBQ6miPK09Hi18o5Oie/jx8zioXODv/AUFLZQecKabPdpQSLmuDXEBPKFh+W5DKbWlahjQ==}
     peerDependencies:
@@ -3437,27 +3400,12 @@ packages:
       typescript:
         optional: true
 
-  '@tanstack/pacer-lite@0.2.1':
-    resolution: {integrity: sha512-3PouiFjR4B6x1c969/Pl4ZIJleof1M0n6fNX8NRiC9Sqv1g06CVDlEaXUR4212ycGFyfq4q+t8Gi37Xy+z34iQ==}
-    engines: {node: '>=18'}
-
   '@tanstack/query-core@5.90.20':
     resolution: {integrity: sha512-OMD2HLpNouXEfZJWcKeVKUgQ5n+n3A2JFmBaScpNDUqSrQSjiveC7dKMe53uJUg1nDG16ttFPz2xfilz6i2uVg==}
 
-  '@tanstack/query-db-collection@1.0.22':
-    resolution: {integrity: sha512-feYfOIA/xgf3S/aWIhq7Oov/RE66M0wMOZUk1+oAHZ3W7x0br7JzRKFYwdTtIMtopFt8tDq3Pt2gtZVZu+S7rA==}
-    peerDependencies:
-      '@tanstack/query-core': ^5.0.0
-      typescript: '>=4.7'
-
   '@tanstack/query-devtools@5.93.0':
     resolution: {integrity: sha512-+kpsx1NQnOFTZsw6HAFCW3HkKg0+2cepGtAWXjiiSOJJ1CtQpt72EE2nyZb+AjAbLRPoeRmPJ8MtQd8r8gsPdg==}
 
-  '@tanstack/solid-db@0.2.5':
-    resolution: {integrity: sha512-tunB6Nbd2UHnPGXwprc0S4OjsP1JvwG0blmLnKgoG3bKdGyJQ8yVknHc7WWwIUdeAz4tH4x/p2RDVloqEKrnCA==}
-    peerDependencies:
-      solid-js: '>=1.9.0'
-
   '@tanstack/solid-query-devtools@5.91.3':
     resolution: {integrity: sha512-xzVwIIxQPbiublZP3RkGp8KVjt8zenv5y1YTSRarP32mLUHJgfdofvjsDvMEhhL/lomz90qa0jCIGsSxoSTyYQ==}
     peerDependencies:
@@ -5777,10 +5725,6 @@ packages:
   fraction.js@4.3.7:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
 
-  fractional-indexing@3.2.0:
-    resolution: {integrity: sha512-PcOxmqwYCW7O2ovKRU8OoQQj2yqTfEB/yeTYk4gPid6dN5ODRfU1hXd9tTVZzax/0NkO7AxpHykvZnT1aYp/BQ==}
-    engines: {node: ^14.13.1 || >=16.0.0}
-
   fresh@0.5.2:
     resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
     engines: {node: '>= 0.6'}
@@ -8926,9 +8870,6 @@ packages:
   sort-any@2.0.0:
     resolution: {integrity: sha512-T9JoiDewQEmWcnmPn/s9h/PH9t3d/LSWi0RgVmXSuDYeZXTZOZ1/wrK2PHaptuR1VXe3clLLt0pD6sgVOwjNEA==}
 
-  sorted-btree@1.8.1:
-    resolution: {integrity: sha512-395+XIP+wqNn3USkFSrNz7G3Ss/MXlZEqesxvzCRFwL14h6e8LukDHdLBePn5pwbm5OQ9vGu8mDyz2lLDIqamQ==}
-
   source-map-js@1.2.0:
     resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
     engines: {node: '>=0.10.0'}
@@ -13106,20 +13047,6 @@ snapshots:
       ignore: 5.3.2
       p-map: 4.0.0
 
-  '@solid-primitives/map@0.7.2(solid-js@1.9.10)':
-    dependencies:
-      '@solid-primitives/trigger': 1.2.2(solid-js@1.9.10)
-      solid-js: 1.9.10
-
-  '@solid-primitives/trigger@1.2.2(solid-js@1.9.10)':
-    dependencies:
-      '@solid-primitives/utils': 6.3.2(solid-js@1.9.10)
-      solid-js: 1.9.10
-
-  '@solid-primitives/utils@6.3.2(solid-js@1.9.10)':
-    dependencies:
-      solid-js: 1.9.10
-
   '@solidjs/meta@0.29.4(solid-js@1.9.10)':
     dependencies:
       solid-js: 1.9.10
@@ -13131,8 +13058,6 @@ snapshots:
 
   '@standard-schema/spec@1.0.0': {}
 
-  '@standard-schema/spec@1.1.0': {}
-
   '@surma/rollup-plugin-off-main-thread@2.2.3':
     dependencies:
       ejs: 3.1.10
@@ -13208,19 +13133,6 @@ snapshots:
       tailwindcss: 4.1.18
       vite: 7.1.12(@types/node@24.9.1)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.70.0)(terser@5.46.0)(tsx@4.16.2)(yaml@2.8.1)
 
-  '@tanstack/db-ivm@0.1.17(typescript@5.9.3)':
-    dependencies:
-      fractional-indexing: 3.2.0
-      sorted-btree: 1.8.1
-      typescript: 5.9.3
-
-  '@tanstack/db@0.5.25(typescript@5.9.3)':
-    dependencies:
-      '@standard-schema/spec': 1.1.0
-      '@tanstack/db-ivm': 0.1.17(typescript@5.9.3)
-      '@tanstack/pacer-lite': 0.2.1
-      typescript: 5.9.3
-
   '@tanstack/eslint-plugin-query@5.91.4(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/utils': 8.52.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
@@ -13230,27 +13142,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@tanstack/pacer-lite@0.2.1': {}
-
   '@tanstack/query-core@5.90.20': {}
 
-  '@tanstack/query-db-collection@1.0.22(@tanstack/query-core@5.90.20)(typescript@5.9.3)':
-    dependencies:
-      '@standard-schema/spec': 1.1.0
-      '@tanstack/db': 0.5.25(typescript@5.9.3)
-      '@tanstack/query-core': 5.90.20
-      typescript: 5.9.3
-
   '@tanstack/query-devtools@5.93.0': {}
 
-  '@tanstack/solid-db@0.2.5(solid-js@1.9.10)(typescript@5.9.3)':
-    dependencies:
-      '@solid-primitives/map': 0.7.2(solid-js@1.9.10)
-      '@tanstack/db': 0.5.25(typescript@5.9.3)
-      solid-js: 1.9.10
-    transitivePeerDependencies:
-      - typescript
-
   '@tanstack/solid-query-devtools@5.91.3(@tanstack/solid-query@5.90.23(solid-js@1.9.10))(solid-js@1.9.10)':
     dependencies:
       '@tanstack/query-devtools': 5.93.0
@@ -16129,8 +16024,6 @@ snapshots:
 
   fraction.js@4.3.7: {}
 
-  fractional-indexing@3.2.0: {}
-
   fresh@0.5.2: {}
 
   fresh@2.0.0: {}
@@ -19762,8 +19655,6 @@ snapshots:
     dependencies:
       lodash: 4.17.21
 
-  sorted-btree@1.8.1: {}
-
   source-map-js@1.2.0: {}
 
   source-map-js@1.2.1: {}

From dfb7fb3ab2506b0c1794f774e76f6a8bb171ff80 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Mon, 2 Feb 2026 17:48:26 +0100
Subject: [PATCH 05/26] fix friends not filtered

---
 .../src/ts/components/pages/leaderboard/LeaderboardPage.tsx    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
index 87b8574474e9..1f2f6ac2bffd 100644
--- a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
@@ -37,6 +37,7 @@ export function LeaderboardPage(): JSXElement {
         mode: selection.mode,
         mode2: selection.mode2,
         language: selection.language,
+        friendsOnly: selection.friendsOnly,
         previous: false, //TODO
       },
       { page: page() ?? 0 },
@@ -62,7 +63,7 @@ export function LeaderboardPage(): JSXElement {
       return fetchLeaderboard(type, mode, page.page);
     },
     //5 minutes for alltime, 10 seconds for others
-    staleTime: selection.type === "allTime" ? 1000 * 60 * 5 : 1000 * 10,
+    staleTime: selection.type === "allTime" ? 1000 : 1000 * 10,
     placeholderData: keepPreviousData,
   }));
 

From 018aebc5c2c8a068766f70f57f2a1866103111a8 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Tue, 3 Feb 2026 00:48:25 +0100
Subject: [PATCH 06/26] hide columns depending on screen size, typing speed in
 lb

---
 .../pages/leaderboard/LeaderboardPage.tsx     |  50 ++--
 .../pages/leaderboard/LeaderboardTable.tsx    | 278 ++++++++++++++++++
 .../src/ts/components/ui/table/DataTable.tsx  |  51 +++-
 frontend/src/ts/components/ui/table/Table.tsx |   2 +-
 frontend/src/ts/firebase.ts                   |   3 +
 frontend/src/ts/signals/core.ts               |   8 +-
 frontend/src/ts/types/tanstack-table.d.ts     |  11 +
 frontend/src/ts/utils/format.ts               |  22 +-
 8 files changed, 388 insertions(+), 37 deletions(-)
 create mode 100644 frontend/src/ts/components/pages/leaderboard/LeaderboardTable.tsx

diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
index 1f2f6ac2bffd..8e2aac283480 100644
--- a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
@@ -2,15 +2,17 @@ import {
   LeaderboardEntry,
   XpLeaderboardEntry,
 } from "@monkeytype/schemas/leaderboards";
-import { keepPreviousData, useQuery } from "@tanstack/solid-query";
-import { createSignal, For, JSXElement, Show } from "solid-js";
+import { useQuery } from "@tanstack/solid-query";
+import { createSignal, JSXElement, Show } from "solid-js";
 import { createStore } from "solid-js/store";
 
 import Ape from "../../../ape";
+import { createEffectOn } from "../../../hooks/effects";
+import { getConfig } from "../../../signals/config";
 import { getActivePage } from "../../../signals/core";
 import { Button } from "../../common/Button";
-import { Conditional } from "../../common/Conditional";
 
+import { LeaderboardTable } from "./LeaderboardTable";
 import { LeaderboardType, Selection, Sidebar } from "./Sidebar";
 
 export function LeaderboardPage(): JSXElement {
@@ -28,6 +30,14 @@ export function LeaderboardPage(): JSXElement {
     setPage(0);
   };
 
+  createEffectOn(
+    () => getConfig.typingSpeedUnit,
+    (unit) => {
+      console.log("#### change typing speed to ", unit);
+      //TODO better way to refresh table
+    },
+  );
+
   const query = useQuery(() => ({
     queryKey: [
       selection.friendsOnly ? "user" : "public",
@@ -63,8 +73,21 @@ export function LeaderboardPage(): JSXElement {
       return fetchLeaderboard(type, mode, page.page);
     },
     //5 minutes for alltime, 10 seconds for others
-    staleTime: selection.type === "allTime" ? 1000 : 1000 * 10,
-    placeholderData: keepPreviousData,
+    staleTime: selection.type === "allTime" ? 1000 * 60 * 60 : 1000 * 60,
+    placeholderData: (old) => {
+      if (old === undefined || old.length === 0 || old[0] === undefined) {
+        return undefined;
+      }
+      const last = old[0];
+      if (
+        (selection.type === "weekly" && !("totalXp" in last)) ||
+        (selection.type !== "weekly" && !("wpm" in last))
+      ) {
+        return [];
+      }
+
+      return old;
+    },
   }));
 
   return (
@@ -85,22 +108,13 @@ export function LeaderboardPage(): JSXElement {
               fa={{ icon: "fa-chevron-right" }}
             />
 
-            <Show when={query.isError}>error: {query.error}</Show>
             <Show when={query.isLoading}>loading....</Show>
             <Show when={query.isRefetching}>loading updating...</Show>
 
-            <Conditional
-              if={selection.type === "weekly"}
-              then={<div>t.b.d.</div>}
-              else={
-                <For each={query.data}>
-                  {(item) => (
-                    <div>
-                      {item.rank} - {item.name} - {item.wpm}
-                    </div>
-                  )}
-                </For>
-              }
+            <LeaderboardTable
+              type={selection.type === "weekly" ? "xp" : "wpm"}
+              query={query}
+              friendsOnly={selection.friendsOnly}
             />
           </div>
         </div>
diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardTable.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardTable.tsx
new file mode 100644
index 000000000000..195b993133ea
--- /dev/null
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardTable.tsx
@@ -0,0 +1,278 @@
+import {
+  LeaderboardEntry,
+  XpLeaderboardEntry,
+} from "@monkeytype/schemas/leaderboards";
+import { UseQueryResult } from "@tanstack/solid-query";
+import { createColumnHelper } from "@tanstack/solid-table";
+import { format as dateFormat } from "date-fns/format";
+import { formatDistanceToNow } from "date-fns/formatDistanceToNow";
+import { createMemo, JSXElement } from "solid-js";
+
+import { getConfig } from "../../../signals/config";
+import { secondsToString } from "../../../utils/date-and-time";
+import { Formatting } from "../../../utils/format";
+import { abbreviateNumber } from "../../../utils/numbers";
+import AsyncContent from "../../common/AsyncContent";
+import { Fa } from "../../common/Fa";
+import { DataTable, DataTableColumnDef } from "../../ui/table/DataTable";
+
+type LeaderboardTableProps = {
+  type: "wpm" | "xp";
+  query: UseQueryResult<LeaderboardEntry[] | XpLeaderboardEntry[]>;
+  friendsOnly: boolean;
+};
+
+export function LeaderboardTable(props: LeaderboardTableProps): JSXElement {
+  const wpmColumns = createMemo(() =>
+    getWpmColumns({
+      friendsOnly: props.friendsOnly,
+      format: new Formatting(getConfig),
+    }),
+  );
+  const xpColumns = createMemo(() => getXpColumns(props.friendsOnly));
+
+  return (
+    <AsyncContent query={props.query}>
+      {(data) => {
+        if (props.type === "wpm") {
+          return (
+            <DataTable
+              id="leaderboardTable"
+              columns={wpmColumns()}
+              data={data as LeaderboardEntry[]}
+            />
+          );
+        } else {
+          return (
+            <DataTable
+              id="xpLeaderboardTable"
+              columns={xpColumns()}
+              data={data as XpLeaderboardEntry[]}
+            />
+          );
+        }
+      }}
+    </AsyncContent>
+  );
+}
+
+function getWpmColumns({
+  friendsOnly,
+  format,
+}: {
+  friendsOnly: boolean;
+  format: Formatting;
+}): DataTableColumnDef<LeaderboardEntry>[] {
+  const defineColumn = createColumnHelper<LeaderboardEntry>().accessor;
+  const columns = [
+    defineColumn("friendsRank", {
+      header: () => (
+        <span aria-label="friends rank" data-balloon-pos="down">
+          <Fa icon="fa-user-friends" />
+        </span>
+      ),
+      meta: {
+        align: "center",
+      },
+    }),
+    defineColumn("rank", {
+      header: friendsOnly ? () => <Fa icon="fa-users" /> : "#",
+      cell: (info) =>
+        info.getValue() === 1 ? <Fa icon="fa-crown" /> : info.getValue(),
+      meta: {
+        align: "center",
+      },
+    }),
+    defineColumn("uid", {
+      header: "name",
+      cell: (info) => <User user={info.row.original} />,
+    }),
+    defineColumn("wpm", {
+      header: format.typingSpeedUnit,
+      cell: (info) =>
+        format.typingSpeed(info.getValue(), { showDecimalPlaces: true }),
+      meta: {
+        align: "right",
+        breakpoint: "xl",
+      },
+    }),
+    defineColumn("acc", {
+      header: "accuracy",
+      cell: (info) =>
+        format.percentage(info.getValue(), { showDecimalPlaces: true }),
+      meta: {
+        align: "right",
+        breakpoint: "xl",
+      },
+    }),
+    defineColumn("wpm", {
+      id: "wpmAcc",
+      header: () => (
+        <>
+          <div>{format.typingSpeedUnit}</div>
+          <div class="text-sub">accucacy</div>
+        </>
+      ),
+      cell: (info) => (
+        <>
+          <div>
+            {format.typingSpeed(info.row.original.wpm, {
+              showDecimalPlaces: true,
+            })}
+          </div>
+          <div class="text-sub">
+            {format.percentage(info.row.original.acc, {
+              showDecimalPlaces: true,
+            })}
+          </div>
+        </>
+      ),
+      meta: {
+        align: "right",
+        maxBreakpoint: "xl",
+      },
+    }),
+    defineColumn("raw", {
+      header: "raw",
+      cell: (info) =>
+        format.typingSpeed(info.getValue(), { showDecimalPlaces: true }),
+      meta: {
+        align: "right",
+        breakpoint: "xl",
+      },
+    }),
+    defineColumn("consistency", {
+      header: "consistency",
+      cell: (info) =>
+        format.percentage(info.getValue(), { showDecimalPlaces: true }),
+      meta: {
+        align: "right",
+        breakpoint: "xl",
+      },
+    }),
+    defineColumn("raw", {
+      id: "rawCon",
+      header: () => (
+        <>
+          <div>raw</div>
+          <div class="text-sub">consistency</div>
+        </>
+      ),
+      cell: (info) => (
+        <>
+          <div>
+            {format.typingSpeed(info.row.original.raw, {
+              showDecimalPlaces: true,
+            })}
+          </div>
+          <div class="text-sub">
+            {" "}
+            {format.percentage(info.row.original.consistency, {
+              showDecimalPlaces: true,
+            })}
+          </div>
+        </>
+      ),
+      meta: {
+        align: "right",
+        maxBreakpoint: "xl",
+      },
+    }),
+    defineColumn("timestamp", {
+      header: "date",
+      cell: (info) => (
+        <>
+          <div>{dateFormat(info.getValue(), "dd MMM yyyy")}</div>
+          <div class="text-sub">{dateFormat(info.getValue(), "HH:mm")}</div>
+        </>
+      ),
+      meta: {
+        align: "right",
+      },
+    }),
+  ];
+
+  if (!friendsOnly) {
+    columns.shift();
+  }
+
+  return columns.map((it) => ({ ...it, enableSorting: false }));
+}
+
+function getXpColumns(
+  friendsOnly: boolean,
+): DataTableColumnDef<XpLeaderboardEntry>[] {
+  const defineColumn = createColumnHelper<XpLeaderboardEntry>().accessor;
+  const columns = [
+    defineColumn("friendsRank", {
+      header: () => (
+        <span aria-label="friends rank" data-balloon-pos="down">
+          <Fa icon="fa-user-friends" />
+        </span>
+      ),
+      meta: {
+        align: "center",
+      },
+    }),
+    defineColumn("rank", {
+      header: friendsOnly ? () => <Fa icon="fa-users" /> : "#",
+      cell: (info) =>
+        info.getValue() === 1 ? <Fa icon="fa-crown" /> : info.getValue(),
+      meta: {
+        align: "center",
+      },
+    }),
+    defineColumn("uid", {
+      header: "name",
+      cell: (info) => <User user={info.row.original} />,
+    }),
+    defineColumn("totalXp", {
+      header: "wpm",
+      cell: (info) =>
+        info.getValue() < 1000
+          ? info.getValue()
+          : abbreviateNumber(info.getValue()),
+      meta: {
+        align: "right",
+      },
+    }),
+    defineColumn("timeTypedSeconds", {
+      header: "time typed",
+      cell: (info) =>
+        secondsToString(Math.round(info.getValue()), true, true, ":"),
+      meta: {
+        align: "right",
+      },
+    }),
+
+    defineColumn("lastActivityTimestamp", {
+      header: "date",
+      cell: (info) => (
+        <>
+          <div>{dateFormat(info.getValue(), "dd MMM yyyy")}</div>
+          <div class="text-sub">{dateFormat(info.getValue(), "HH:mm")}</div>
+        </>
+      ),
+      meta: {
+        align: "right",
+        cellMeta: ({ value }) => ({
+          "aria-label": formatDistanceToNow(value, { addSuffix: true }),
+          "data-balloon-pos": "left",
+        }),
+      },
+    }),
+  ];
+
+  if (!friendsOnly) {
+    columns.unshift();
+  }
+
+  return columns.map((it) => ({
+    ...it,
+    enableSorting: false,
+  }));
+}
+//placeholder
+function User(props: { user: { name: string } }): JSXElement {
+  return <div>{props.user.name}</div>;
+}
diff --git a/frontend/src/ts/components/ui/table/DataTable.tsx b/frontend/src/ts/components/ui/table/DataTable.tsx
index 664ff05aad48..e7c57f2d5f5b 100644
--- a/frontend/src/ts/components/ui/table/DataTable.tsx
+++ b/frontend/src/ts/components/ui/table/DataTable.tsx
@@ -32,19 +32,20 @@ const SortingStateSchema = z.array(
   }),
 );
 
-export type AnyColumnDef<TData, TValue = unknown> =
+// oxlint-disable-next-line typescript/no-explicit-any
+export type DataTableColumnDef<TData, TValue = any> =
   | ColumnDef<TData, TValue>
   | AccessorFnColumnDef<TData, TValue>
   | AccessorKeyColumnDef<TData, TValue>;
 
 type DataTableProps<TData, TValue> = {
   id: string;
-  columns: AnyColumnDef<TData, TValue>[];
+  columns: DataTableColumnDef<TData, TValue>[];
   data: TData[];
   fallback?: JSXElement;
 };
 
-export function DataTable<TData, TValue = unknown>(
+export function DataTable<TData, TValue>(
   props: DataTableProps<TData, TValue>,
 ): JSXElement {
   const [sorting, setSorting] = useLocalStorage<SortingState>({
@@ -77,7 +78,11 @@ export function DataTable<TData, TValue = unknown>(
             ? String(col.accessorKey)
             : `__col_${index}`);
 
-        return [id, current[col.meta?.breakpoint ?? "xxs"]];
+        return [
+          id,
+          current[col.meta?.breakpoint ?? "xxs"] &&
+            !current[col.meta?.maxBreakpoint ?? "xxl"],
+        ];
       }),
     );
 
@@ -132,9 +137,19 @@ export function DataTable<TData, TValue = unknown>(
                             onClick={(e) => {
                               header.column.getToggleSortingHandler()?.(e);
                             }}
-                            class="text-sub hover:bg-sub-alt m-0 box-border flex h-full w-full cursor-pointer items-start justify-start rounded-none border-0 bg-transparent p-2 text-left font-normal whitespace-nowrap"
+                            class="text-sub hover:bg-sub-alt m-0 box-border flex h-full w-full cursor-pointer items-start justify-start rounded-none border-0 bg-transparent p-2 font-normal whitespace-nowrap"
                             {...(header.column.columnDef.meta
                               ?.sortableHeaderMeta ?? {})}
+                            classList={{
+                              "text-left":
+                                (header.column.columnDef.meta?.align ??
+                                  "left") === "left",
+                              "text-center":
+                                header.column.columnDef.meta?.align ===
+                                "center",
+                              "text-right":
+                                header.column.columnDef.meta?.align === "right",
+                            }}
                           >
                             <Show when={!header.isPlaceholder}>
                               {flexRender(
@@ -167,7 +182,18 @@ export function DataTable<TData, TValue = unknown>(
                         </TableHead>
                       }
                       else={
-                        <TableHead colSpan={header.colSpan}>
+                        <TableHead
+                          colSpan={header.colSpan}
+                          classList={{
+                            "text-left":
+                              (header.column.columnDef.meta?.align ??
+                                "left") === "left",
+                            "text-center":
+                              header.column.columnDef.meta?.align === "center",
+                            "text-right":
+                              header.column.columnDef.meta?.align === "right",
+                          }}
+                        >
                           <Show when={!header.isPlaceholder}>
                             {flexRender(
                               header.column.columnDef.header,
@@ -197,7 +223,18 @@ export function DataTable<TData, TValue = unknown>(
                           })
                         : (cell.column.columnDef.meta?.cellMeta ?? {});
                     return (
-                      <TableCell {...cellMeta}>
+                      <TableCell
+                        {...cellMeta}
+                        classList={{
+                          "text-left":
+                            (cell.column.columnDef.meta?.align ?? "left") ===
+                            "left",
+                          "text-center":
+                            cell.column.columnDef.meta?.align === "center",
+                          "text-right":
+                            cell.column.columnDef.meta?.align === "right",
+                        }}
+                      >
                         {flexRender(
                           cell.column.columnDef.cell,
                           cell.getContext(),
diff --git a/frontend/src/ts/components/ui/table/Table.tsx b/frontend/src/ts/components/ui/table/Table.tsx
index 1e1f5e762ae4..484cf9abc706 100644
--- a/frontend/src/ts/components/ui/table/Table.tsx
+++ b/frontend/src/ts/components/ui/table/Table.tsx
@@ -57,7 +57,7 @@ const TableHead: Component<ComponentProps<"th">> = (props) => {
     <th
       aria-label={local["aria-label"]}
       class={cn(
-        "text-sub has-button:p-0 appearance-none p-2 text-left align-bottom text-xs font-normal",
+        "text-sub has-button:p-0 appearance-none p-2 align-bottom text-xs font-normal",
         local.class,
       )}
       {...others}
diff --git a/frontend/src/ts/firebase.ts b/frontend/src/ts/firebase.ts
index 85b562673397..c12620e4d5ab 100644
--- a/frontend/src/ts/firebase.ts
+++ b/frontend/src/ts/firebase.ts
@@ -35,6 +35,7 @@ import {
 import { tryCatch } from "@monkeytype/util/trycatch";
 import { dispatch as dispatchSignUpEvent } from "./observables/google-sign-up-event";
 import { addBanner } from "./stores/banners";
+import { setUserId } from "./signals/core";
 
 let app: FirebaseApp | undefined;
 let Auth: AuthType | undefined;
@@ -75,6 +76,7 @@ export async function init(callback: ReadyCallback): Promise<void> {
 
     onAuthStateChanged(Auth, async (user) => {
       if (!ignoreAuthCallback) {
+        setUserId(user?.uid ?? null);
         await callback(true, user);
       }
     });
@@ -82,6 +84,7 @@ export async function init(callback: ReadyCallback): Promise<void> {
     app = undefined;
     Auth = undefined;
     console.error("Firebase failed to initialize", e);
+    setUserId(null);
     await callback(false, null);
     if (isDevEnvironment()) {
       addBanner({
diff --git a/frontend/src/ts/signals/core.ts b/frontend/src/ts/signals/core.ts
index 02ce0acb32f6..8614eda9e779 100644
--- a/frontend/src/ts/signals/core.ts
+++ b/frontend/src/ts/signals/core.ts
@@ -1,4 +1,4 @@
-import { createSignal } from "solid-js";
+import { createMemo, createSignal } from "solid-js";
 import { PageName } from "../pages/page";
 
 export const [getActivePage, setActivePage] = createSignal<PageName>("loading");
@@ -30,5 +30,7 @@ export const [getFocus, setFocus] = createSignal(false);
 export const [getGlobalOffsetTop, setGlobalOffsetTop] = createSignal(0);
 export const [getIsScreenshotting, setIsScreenshotting] = createSignal(false);
 
-//TODO
-export const [isLoggedIn] = createSignal(true);
+const [userId, setUserId] = createSignal<string | null>(null);
+export { setUserId };
+export const getUserId = createMemo(() => userId());
+export const isLoggedIn = createMemo(() => getUserId() !== null);
diff --git a/frontend/src/ts/types/tanstack-table.d.ts b/frontend/src/ts/types/tanstack-table.d.ts
index d69863e3b835..6727d0d286e8 100644
--- a/frontend/src/ts/types/tanstack-table.d.ts
+++ b/frontend/src/ts/types/tanstack-table.d.ts
@@ -12,6 +12,17 @@ declare module "@tanstack/solid-table" {
      */
     breakpoint?: BreakpointKey;
 
+    /**
+     * define maximal breakpoint for the column to be visible.
+     * If not set, the column is always visible
+     */
+    maxBreakpoint?: BreakpointKey;
+
+    /**
+     * align header and cells, default: `left`
+     */
+    align?: "left" | "right" | "center";
+
     /**
      * additional attributes to be set on the table cell.
      * Can be used to define mouse-overs with `aria-label` and `data-balloon-pos`
diff --git a/frontend/src/ts/utils/format.ts b/frontend/src/ts/utils/format.ts
index c8ebab24b644..896f32c39bd8 100644
--- a/frontend/src/ts/utils/format.ts
+++ b/frontend/src/ts/utils/format.ts
@@ -1,6 +1,9 @@
 import { get as getTypingSpeedUnit } from "../utils/typing-speed-units";
 import * as Numbers from "@monkeytype/util/numbers";
-import { Config as ConfigType } from "@monkeytype/schemas/configs";
+import {
+  Config as ConfigType,
+  TypingSpeedUnit,
+} from "@monkeytype/schemas/configs";
 import Config from "../config";
 
 export type FormatOptions = {
@@ -21,8 +24,14 @@ export type FallbackOptions = {
 };
 
 export class Formatting {
-  constructor(private config: ConfigType) {
-    //
+  public typingSpeedUnit: TypingSpeedUnit;
+  private alwaysShowDecimalPlaces;
+
+  constructor(
+    config: Pick<ConfigType, "typingSpeedUnit" | "alwaysShowDecimalPlaces">,
+  ) {
+    this.typingSpeedUnit = config.typingSpeedUnit;
+    this.alwaysShowDecimalPlaces = config.alwaysShowDecimalPlaces;
   }
 
   typingSpeed(
@@ -32,7 +41,7 @@ export class Formatting {
     const options = { ...FORMAT_DEFAULT_OPTIONS, ...formatOptions };
     if (wpm === undefined || wpm === null) return options.fallback ?? "";
 
-    const result = getTypingSpeedUnit(this.config.typingSpeedUnit).fromWpm(wpm);
+    const result = getTypingSpeedUnit(this.typingSpeedUnit).fromWpm(wpm);
 
     return this.number(result, options);
   }
@@ -74,10 +83,7 @@ export class Formatting {
     }
     const suffix = formatOptions.suffix ?? "";
 
-    if (
-      formatOptions.showDecimalPlaces ??
-      this.config.alwaysShowDecimalPlaces
-    ) {
+    if (formatOptions.showDecimalPlaces ?? this.alwaysShowDecimalPlaces) {
       return Numbers.roundTo2(value).toFixed(2) + suffix;
     }
     return (formatOptions.rounding ?? Math.round)(value).toString() + suffix;

From e1047f3f8842d8a400764a59c938737221292aaf Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Tue, 3 Feb 2026 15:32:32 +0100
Subject: [PATCH 07/26] wip

---
 frontend/src/ts/ape/server-configuration.ts   |   2 +-
 .../src/ts/components/common/AsyncContent.tsx |   1 -
 frontend/src/ts/components/common/Button.tsx  |   2 +
 frontend/src/ts/components/common/Headers.tsx |  34 ++
 .../pages/leaderboard/LeaderboardPage.tsx     | 295 ++++++++++--------
 .../pages/leaderboard/LeaderboardTable.tsx    |  47 ++-
 .../components/pages/leaderboard/Sidebar.tsx  |   9 +-
 .../src/ts/components/ui/table/DataTable.tsx  | 165 +++++-----
 frontend/src/ts/queries/client.ts             |   3 +
 frontend/src/ts/queries/keys.ts               |   6 +
 frontend/src/ts/queries/leaderboards.ts       | 144 +++++++++
 11 files changed, 466 insertions(+), 242 deletions(-)
 create mode 100644 frontend/src/ts/components/common/Headers.tsx
 create mode 100644 frontend/src/ts/queries/client.ts
 create mode 100644 frontend/src/ts/queries/keys.ts
 create mode 100644 frontend/src/ts/queries/leaderboards.ts

diff --git a/frontend/src/ts/ape/server-configuration.ts b/frontend/src/ts/ape/server-configuration.ts
index b83c6c1a510e..6aaaacabe622 100644
--- a/frontend/src/ts/ape/server-configuration.ts
+++ b/frontend/src/ts/ape/server-configuration.ts
@@ -1,7 +1,7 @@
 import { Configuration } from "@monkeytype/schemas/configuration";
 import Ape from ".";
 import { promiseWithResolvers } from "../utils/misc";
-import { queryClient } from "../collections/client";
+import { queryClient } from "../queries/client";
 const staleTime = 1000 * 60 * 60;
 const queryKey = ["serverConfiguration"];
 
diff --git a/frontend/src/ts/components/common/AsyncContent.tsx b/frontend/src/ts/components/common/AsyncContent.tsx
index be3e4a37037f..30c13c727428 100644
--- a/frontend/src/ts/components/common/AsyncContent.tsx
+++ b/frontend/src/ts/components/common/AsyncContent.tsx
@@ -57,7 +57,6 @@ export default function AsyncContent<T>(
         error: () => props.query.error,
       };
     }
-    throw new Error("missing source");
   });
 
   const value = () => {
diff --git a/frontend/src/ts/components/common/Button.tsx b/frontend/src/ts/components/common/Button.tsx
index 67cc766f0dde..3e8affaea964 100644
--- a/frontend/src/ts/components/common/Button.tsx
+++ b/frontend/src/ts/components/common/Button.tsx
@@ -17,6 +17,7 @@ type ButtonProps = BaseProps & {
   onClick: () => void;
   href?: never;
   sameTarget?: true;
+  disabled?: boolean;
 };
 
 type AnchorProps = BaseProps & {
@@ -66,6 +67,7 @@ export function Button(props: ButtonProps | AnchorProps): JSXElement {
           type="button"
           classList={getClassList()}
           onClick={() => props.onClick?.()}
+          disabled={props["disabled"] as boolean}
         >
           {content}
         </button>
diff --git a/frontend/src/ts/components/common/Headers.tsx b/frontend/src/ts/components/common/Headers.tsx
new file mode 100644
index 000000000000..47d00ee34819
--- /dev/null
+++ b/frontend/src/ts/components/common/Headers.tsx
@@ -0,0 +1,34 @@
+import { JSXElement, Show } from "solid-js";
+
+import { Fa, FaProps } from "./Fa";
+
+export function H1(props: { text: string; fa?: FaProps }): JSXElement {
+  return (
+    <h1 class="text-sub flex place-items-center gap-4 pb-4 text-4xl">
+      <Show when={props.fa}>
+        <Fa {...(props.fa as FaProps)} />
+      </Show>
+      {props.text}
+    </h1>
+  );
+}
+
+export function H2(props: { text: string; fa?: FaProps }): JSXElement {
+  return (
+    <h2 class="text-sub flex place-items-center gap-4 pb-4 text-2xl">
+      <Show when={props.fa}>
+        <Fa {...(props.fa as FaProps)} />
+      </Show>
+      {props.text}
+    </h2>
+  );
+}
+
+export function H3(props: { text: string; fa: FaProps }): JSXElement {
+  return (
+    <h3 class="text-sub flex place-items-center gap-2 pb-2">
+      <Fa {...props.fa} />
+      {props.text}
+    </h3>
+  );
+}
diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
index 8e2aac283480..bff72eb222f9 100644
--- a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
@@ -1,22 +1,42 @@
-import {
-  LeaderboardEntry,
-  XpLeaderboardEntry,
-} from "@monkeytype/schemas/leaderboards";
+import { UTCDateMini } from "@date-fns/utc/date/mini";
 import { useQuery } from "@tanstack/solid-query";
-import { createSignal, JSXElement, Show } from "solid-js";
+import { endOfDay, endOfWeek } from "date-fns";
+import { differenceInSeconds } from "date-fns/differenceInSeconds";
+import {
+  createEffect,
+  createMemo,
+  createSignal,
+  JSXElement,
+  onCleanup,
+  Show,
+} from "solid-js";
 import { createStore } from "solid-js/store";
 
-import Ape from "../../../ape";
-import { createEffectOn } from "../../../hooks/effects";
-import { getConfig } from "../../../signals/config";
-import { getActivePage } from "../../../signals/core";
+import { queryClient } from "../../../queries/client";
+import {
+  getLeaderboardQueryOptions,
+  LeaderboardType,
+  Selection,
+} from "../../../queries/leaderboards";
+import { getActivePage, isLoggedIn } from "../../../signals/core";
+import { secondsToString } from "../../../utils/date-and-time";
+import { qsr } from "../../../utils/dom";
+import { capitalizeFirstLetter } from "../../../utils/strings";
+import AsyncContent from "../../common/AsyncContent";
 import { Button } from "../../common/Button";
+import { H2 } from "../../common/Headers";
 
 import { LeaderboardTable } from "./LeaderboardTable";
-import { LeaderboardType, Selection, Sidebar } from "./Sidebar";
+import { Sidebar } from "./Sidebar";
+
+//TODO update page name
+qsr("nav .view-about").on("mouseenter", () => {
+  prefetch();
+});
 
 export function LeaderboardPage(): JSXElement {
-  const isOpen = (): boolean => getActivePage() === "leaderboards";
+  //TODO update page
+  const isOpen = (): boolean => getActivePage() === "about";
   const [selection, setSelection] = createStore<Selection>({
     type: "allTime",
     mode: "time",
@@ -30,139 +50,158 @@ export function LeaderboardPage(): JSXElement {
     setPage(0);
   };
 
-  createEffectOn(
-    () => getConfig.typingSpeedUnit,
-    (unit) => {
-      console.log("#### change typing speed to ", unit);
-      //TODO better way to refresh table
-    },
-  );
-
   const query = useQuery(() => ({
-    queryKey: [
-      selection.friendsOnly ? "user" : "public",
-      "leaderboard",
-      selection.type,
-      {
-        mode: selection.mode,
-        mode2: selection.mode2,
-        language: selection.language,
-        friendsOnly: selection.friendsOnly,
-        previous: false, //TODO
-      },
-      { page: page() ?? 0 },
-    ],
-    queryFn: async (ctx) => {
-      const type = ctx.queryKey[2] as LeaderboardType | undefined;
-      const mode = ctx.queryKey[3] as
-        | Required<Omit<Selection, "type"> & { previous: boolean }>
-        | undefined;
-      const page = ctx.queryKey[4] as { page: number } | undefined;
-      if (type === undefined) throw new Error("type missing in query");
-      if (mode === undefined) throw new Error("mode missing in query");
-      if (page === undefined) throw new Error("page missing in query");
-
-      if (type === "weekly") {
-        return fetchWeeklyLeaderboard(mode.previous ?? false, mode.friendsOnly);
-      }
-
-      if (mode.language === undefined) {
-        throw new Error("language missing in query");
-      }
-
-      return fetchLeaderboard(type, mode, page.page);
-    },
-    //5 minutes for alltime, 10 seconds for others
-    staleTime: selection.type === "allTime" ? 1000 * 60 * 60 : 1000 * 60,
-    placeholderData: (old) => {
-      if (old === undefined || old.length === 0 || old[0] === undefined) {
-        return undefined;
-      }
-      const last = old[0];
-      if (
-        (selection.type === "weekly" && !("totalXp" in last)) ||
-        (selection.type !== "weekly" && !("wpm" in last))
-      ) {
-        return [];
-      }
-
-      return old;
-    },
+    ...getLeaderboardQueryOptions({
+      ...selection,
+      previous: false,
+      page: page() ?? 0,
+    }),
+    enabled: isOpen(),
   }));
 
   return (
-    <Show when={isOpen}>
-      <div class="content-grid grid">
-        <div class="flex flex-col gap-8 lg:flex-row">
-          <div class="w-full lg:w-60">
-            <Sidebar onSelect={onSelectionChange} />
-          </div>
-
-          <div class="w-full flex-1">
-            <Button
-              onClick={() => setPage((old) => old - 1)}
-              fa={{ icon: "fa-chevron-left" }}
-            />
-            <Button
-              onClick={() => setPage((old) => old + 1)}
-              fa={{ icon: "fa-chevron-right" }}
-            />
-
-            <Show when={query.isLoading}>loading....</Show>
-            <Show when={query.isRefetching}>loading updating...</Show>
+    <div class="content-grid grid">
+      <div class="flex flex-col gap-8 lg:flex-row">
+        <div class="w-full lg:w-60">
+          <Sidebar onSelect={onSelectionChange} />
+        </div>
 
+        <div class="w-full flex-1">
+          <Title selection={selection} />
+          <Show when={isLoggedIn()}>
             <LeaderboardTable
               type={selection.type === "weekly" ? "xp" : "wpm"}
-              query={query}
-              friendsOnly={selection.friendsOnly}
+              entries={[
+                {
+                  uid: "0",
+                  name: "You",
+                  timestamp: 0,
+                  timeTypedSeconds: 0,
+                  totalXp: 0,
+                  lastActivityTimestamp: 0,
+                },
+              ]}
+              hideHeader
             />
+          </Show>
+          <Show when={query.isLoading}>loading....</Show>
+          <Show when={query.isRefetching}>loading updating...</Show>
+          <div class="grid grid-cols-2 items-center justify-between text-base">
+            <div>
+              <NextUpdate type={selection.type} />
+            </div>
+            <div class="grid grid-flow-col items-center gap-2 justify-self-end">
+              <Button
+                onClick={() => setPage(0)}
+                fa={{ icon: "fa-crown", fixedWidth: true }}
+                disabled={page() === 0}
+              />
+              <Button
+                onClick={() => setPage(2)}
+                fa={{ icon: "fa-user", fixedWidth: true }}
+                disabled={page() === 2}
+              />
+              <Button
+                onClick={() => setPage((old) => old - 1)}
+                fa={{ icon: "fa-chevron-left", fixedWidth: true }}
+                disabled={page() === 0}
+              />
+              <Button
+                onClick={() => setPage((old) => old - 1)}
+                fa={{ icon: "fa-hashtag", fixedWidth: true }}
+              />
+              <Button
+                onClick={() => setPage((old) => old + 1)}
+                fa={{ icon: "fa-chevron-right", fixedWidth: true }}
+                disabled={
+                  page() + 1 >= Math.ceil((query.data?.count ?? 0) / 50)
+                }
+              />
+            </div>
           </div>
+          <AsyncContent query={query}>
+            {(data) => (
+              <LeaderboardTable
+                type={selection.type === "weekly" ? "xp" : "wpm"}
+                entries={data.entries}
+                friendsOnly={selection.friendsOnly}
+              />
+            )}
+          </AsyncContent>
         </div>
       </div>
-    </Show>
+    </div>
   );
 }
 
-async function fetchWeeklyLeaderboard(
-  friendsOnly: boolean,
-  previousWeek: boolean,
-): Promise<XpLeaderboardEntry[]> {
-  const response = await Ape.leaderboards.getWeeklyXp({
-    query: { friendsOnly, weeksBefore: previousWeek ? 1 : undefined },
+function Title(props: { selection: Selection }): JSXElement {
+  const title = createMemo(() => {
+    const type =
+      props.selection.type === "allTime"
+        ? "All-time"
+        : props.selection.type === "weekly"
+          ? "Weekly XP"
+          : "Daily";
+
+    const friend = props.selection.friendsOnly ? "Friends " : "";
+
+    const language = capitalizeFirstLetter(props.selection.language ?? "");
+
+    const mode =
+      props.selection.type !== "weekly"
+        ? ` ${capitalizeFirstLetter(props.selection.mode ?? "")} ${props.selection.mode2}`
+        : "";
+    return `${type} ${language} ${mode} ${friend}Leaderboard`;
+  });
+
+  return <H2 text={title()} />;
+}
+
+function NextUpdate(props: { type: LeaderboardType }): JSXElement {
+  const [tick, setTick] = createSignal(Date.now());
+
+  // Update the tick every second
+  createEffect(() => {
+    const interval = setInterval(() => setTick(Date.now()), 1000);
+    onCleanup(() => clearInterval(interval));
   });
 
-  if (response.status !== 200) {
-    throw new Error(
-      "Error fetching weekly leaderboard: " + response.body.message,
-    );
-  }
+  const nextUpdate = createMemo(() => {
+    const now = new Date(tick());
+    if (props.type === "daily") {
+      const diff = differenceInSeconds(now, endOfDay(new UTCDateMini()));
+      return "Next reset in: " + secondsToString(diff, true);
+    } else if (props.type === "allTime") {
+      const minutesToNextUpdate = 14 - (now.getMinutes() % 15);
+      const secondsToNextUpdate = 60 - now.getSeconds();
+      const totalSeconds = minutesToNextUpdate * 60 + secondsToNextUpdate;
+      return "Next update in: " + secondsToString(totalSeconds, true);
+    } else if (props.type === "weekly") {
+      const nextWeekTimestamp = endOfWeek(new UTCDateMini(), {
+        weekStartsOn: 1,
+      });
+      const totalSeconds = differenceInSeconds(now, nextWeekTimestamp);
+      return (
+        "Next reset in: " +
+        secondsToString(totalSeconds, true, true, ":", true, true)
+      );
+    }
+    return "";
+  });
 
-  return response.body.data.entries;
+  return <div>{nextUpdate()}</div>;
 }
-async function fetchLeaderboard(
-  type: "allTime" | "daily",
-  selection: Required<Omit<Selection, "type"> & { previous: boolean }>,
-  page: number,
-): Promise<LeaderboardEntry[]> {
-  const query = {
-    friendsOnly: selection.friendsOnly,
-    language: selection.language,
-    mode: selection.mode,
-    mode2: selection.mode2,
-    pageSize: 50,
-    page,
-  };
-  const response = await (type === "allTime"
-    ? Ape.leaderboards.get({ query })
-    : Ape.leaderboards.getDaily({
-        query: { ...query, daysBefore: selection.previous ? 1 : undefined },
-      }));
-
-  if (response.status !== 200) {
-    throw new Error(
-      `Failed to get ${type} leaderboard: ` + response.body.message,
-    );
-  }
-
-  return response.body.data.entries;
+
+function prefetch(): void {
+  void queryClient.prefetchQuery(
+    getLeaderboardQueryOptions({
+      type: "allTime",
+      mode: "time",
+      mode2: "15",
+      language: "english",
+      friendsOnly: false,
+      page: 0,
+      previous: false,
+    }),
+  );
 }
diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardTable.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardTable.tsx
index 195b993133ea..96fdd8db65bb 100644
--- a/frontend/src/ts/components/pages/leaderboard/LeaderboardTable.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardTable.tsx
@@ -2,7 +2,6 @@ import {
   LeaderboardEntry,
   XpLeaderboardEntry,
 } from "@monkeytype/schemas/leaderboards";
-import { UseQueryResult } from "@tanstack/solid-query";
 import { createColumnHelper } from "@tanstack/solid-table";
 import { format as dateFormat } from "date-fns/format";
 import { formatDistanceToNow } from "date-fns/formatDistanceToNow";
@@ -12,14 +11,15 @@ import { getConfig } from "../../../signals/config";
 import { secondsToString } from "../../../utils/date-and-time";
 import { Formatting } from "../../../utils/format";
 import { abbreviateNumber } from "../../../utils/numbers";
-import AsyncContent from "../../common/AsyncContent";
+import { Conditional } from "../../common/Conditional";
 import { Fa } from "../../common/Fa";
 import { DataTable, DataTableColumnDef } from "../../ui/table/DataTable";
 
 type LeaderboardTableProps = {
   type: "wpm" | "xp";
-  query: UseQueryResult<LeaderboardEntry[] | XpLeaderboardEntry[]>;
+  entries: LeaderboardEntry[] | XpLeaderboardEntry[];
   friendsOnly: boolean;
+  hideHeader?: true;
 };
 
 export function LeaderboardTable(props: LeaderboardTableProps): JSXElement {
@@ -32,27 +32,26 @@ export function LeaderboardTable(props: LeaderboardTableProps): JSXElement {
   const xpColumns = createMemo(() => getXpColumns(props.friendsOnly));
 
   return (
-    <AsyncContent query={props.query}>
-      {(data) => {
-        if (props.type === "wpm") {
-          return (
-            <DataTable
-              id="leaderboardTable"
-              columns={wpmColumns()}
-              data={data as LeaderboardEntry[]}
-            />
-          );
-        } else {
-          return (
-            <DataTable
-              id="xpLeaderboardTable"
-              columns={xpColumns()}
-              data={data as XpLeaderboardEntry[]}
-            />
-          );
-        }
-      }}
-    </AsyncContent>
+    <Conditional
+      if={props.type === "wpm"}
+      then={
+        <DataTable
+          fallback=<div>no data found</div>
+          id="leaderboardTable"
+          columns={wpmColumns()}
+          data={props.entries as LeaderboardEntry[]}
+          hideHeader={props.hideHeader}
+        />
+      }
+      else={
+        <DataTable
+          id="xpLeaderboardTable"
+          columns={xpColumns()}
+          data={props.entries as XpLeaderboardEntry[]}
+          hideHeader={props.hideHeader}
+        />
+      }
+    />
   );
 }
 
diff --git a/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx b/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx
index 1e435f6c2ca1..7f0afa352350 100644
--- a/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx
@@ -10,19 +10,12 @@ import {
 } from "solid-js";
 
 import { getServerConfiguration } from "../../../ape/server-configuration";
+import { Selection } from "../../../queries/leaderboards";
 import { isLoggedIn } from "../../../signals/core";
 import { FaSolidIcon } from "../../../types/font-awesome";
 import { Button } from "../../common/Button";
 
 type GroupItem<T> = { id: T; text: string; icon: FaSolidIcon };
-export type LeaderboardType = "allTime" | "daily" | "weekly";
-export type Selection = {
-  type: LeaderboardType;
-  friendsOnly: boolean;
-  mode?: Mode;
-  mode2?: string;
-  language?: Language;
-};
 
 type LanguagesByModeByMode2 = Partial<
   // oxlint-disable-next-line typescript/no-explicit-any
diff --git a/frontend/src/ts/components/ui/table/DataTable.tsx b/frontend/src/ts/components/ui/table/DataTable.tsx
index e7c57f2d5f5b..0b5344848d44 100644
--- a/frontend/src/ts/components/ui/table/DataTable.tsx
+++ b/frontend/src/ts/components/ui/table/DataTable.tsx
@@ -43,6 +43,7 @@ type DataTableProps<TData, TValue> = {
   columns: DataTableColumnDef<TData, TValue>[];
   data: TData[];
   fallback?: JSXElement;
+  hideHeader?: true;
 };
 
 export function DataTable<TData, TValue>(
@@ -112,34 +113,80 @@ export function DataTable<TData, TValue>(
   return (
     <Show when={table.getRowModel().rows?.length} fallback={props.fallback}>
       <Table>
-        <TableHeader>
-          <For each={table.getHeaderGroups()}>
-            {(headerGroup) => (
-              <TableRow>
-                <For each={headerGroup.headers}>
-                  {(header) => (
-                    <Conditional
-                      if={header.column.getCanSort()}
-                      then={
-                        <TableHead
-                          colSpan={header.colSpan}
-                          aria-sort={
-                            header.column.getIsSorted() === "asc"
-                              ? "ascending"
-                              : header.column.getIsSorted() === "desc"
-                                ? "descending"
-                                : "none"
-                          }
-                        >
-                          <button
-                            type="button"
-                            role="button"
-                            onClick={(e) => {
-                              header.column.getToggleSortingHandler()?.(e);
-                            }}
-                            class="text-sub hover:bg-sub-alt m-0 box-border flex h-full w-full cursor-pointer items-start justify-start rounded-none border-0 bg-transparent p-2 font-normal whitespace-nowrap"
-                            {...(header.column.columnDef.meta
-                              ?.sortableHeaderMeta ?? {})}
+        <Show when={!props.hideHeader}>
+          <TableHeader>
+            <For each={table.getHeaderGroups()}>
+              {(headerGroup) => (
+                <TableRow>
+                  <For each={headerGroup.headers}>
+                    {(header) => (
+                      <Conditional
+                        if={header.column.getCanSort()}
+                        then={
+                          <TableHead
+                            colSpan={header.colSpan}
+                            aria-sort={
+                              header.column.getIsSorted() === "asc"
+                                ? "ascending"
+                                : header.column.getIsSorted() === "desc"
+                                  ? "descending"
+                                  : "none"
+                            }
+                          >
+                            <button
+                              type="button"
+                              role="button"
+                              onClick={(e) => {
+                                header.column.getToggleSortingHandler()?.(e);
+                              }}
+                              class="text-sub hover:bg-sub-alt m-0 box-border flex h-full w-full cursor-pointer items-start justify-start rounded-none border-0 bg-transparent p-2 font-normal whitespace-nowrap"
+                              {...(header.column.columnDef.meta
+                                ?.sortableHeaderMeta ?? {})}
+                              classList={{
+                                "text-left":
+                                  (header.column.columnDef.meta?.align ??
+                                    "left") === "left",
+                                "text-center":
+                                  header.column.columnDef.meta?.align ===
+                                  "center",
+                                "text-right":
+                                  header.column.columnDef.meta?.align ===
+                                  "right",
+                              }}
+                            >
+                              <Show when={!header.isPlaceholder}>
+                                {flexRender(
+                                  header.column.columnDef.header,
+                                  header.getContext(),
+                                )}
+                              </Show>
+
+                              <Switch fallback={<i class="fa-fw"></i>}>
+                                <Match
+                                  when={header.column.getIsSorted() === "asc"}
+                                >
+                                  <Fa
+                                    icon={"fa-sort-up"}
+                                    fixedWidth
+                                    aria-hidden="true"
+                                  />
+                                </Match>
+                                <Match
+                                  when={header.column.getIsSorted() === "desc"}
+                                >
+                                  <Fa
+                                    icon={"fa-sort-down"}
+                                    fixedWidth
+                                    aria-hidden="true"
+                                  />
+                                </Match>
+                              </Switch>
+                            </button>
+                          </TableHead>
+                        }
+                        else={
+                          <TableHead
+                            colSpan={header.colSpan}
                             classList={{
                               "text-left":
                                 (header.column.columnDef.meta?.align ??
@@ -157,58 +204,16 @@ export function DataTable<TData, TValue>(
                                 header.getContext(),
                               )}
                             </Show>
-
-                            <Switch fallback={<i class="fa-fw"></i>}>
-                              <Match
-                                when={header.column.getIsSorted() === "asc"}
-                              >
-                                <Fa
-                                  icon={"fa-sort-up"}
-                                  fixedWidth
-                                  aria-hidden="true"
-                                />
-                              </Match>
-                              <Match
-                                when={header.column.getIsSorted() === "desc"}
-                              >
-                                <Fa
-                                  icon={"fa-sort-down"}
-                                  fixedWidth
-                                  aria-hidden="true"
-                                />
-                              </Match>
-                            </Switch>
-                          </button>
-                        </TableHead>
-                      }
-                      else={
-                        <TableHead
-                          colSpan={header.colSpan}
-                          classList={{
-                            "text-left":
-                              (header.column.columnDef.meta?.align ??
-                                "left") === "left",
-                            "text-center":
-                              header.column.columnDef.meta?.align === "center",
-                            "text-right":
-                              header.column.columnDef.meta?.align === "right",
-                          }}
-                        >
-                          <Show when={!header.isPlaceholder}>
-                            {flexRender(
-                              header.column.columnDef.header,
-                              header.getContext(),
-                            )}
-                          </Show>
-                        </TableHead>
-                      }
-                    />
-                  )}
-                </For>
-              </TableRow>
-            )}
-          </For>
-        </TableHeader>
+                          </TableHead>
+                        }
+                      />
+                    )}
+                  </For>
+                </TableRow>
+              )}
+            </For>
+          </TableHeader>
+        </Show>
         <TableBody>
           <For each={table.getRowModel().rows}>
             {(row) => (
diff --git a/frontend/src/ts/queries/client.ts b/frontend/src/ts/queries/client.ts
new file mode 100644
index 000000000000..6311a8feae26
--- /dev/null
+++ b/frontend/src/ts/queries/client.ts
@@ -0,0 +1,3 @@
+import { QueryClient } from "@tanstack/query-core";
+
+export const queryClient = new QueryClient();
diff --git a/frontend/src/ts/queries/keys.ts b/frontend/src/ts/queries/keys.ts
new file mode 100644
index 000000000000..84cbbaf79e6f
--- /dev/null
+++ b/frontend/src/ts/queries/keys.ts
@@ -0,0 +1,6 @@
+export function baseKey(
+  key: string,
+  options?: { isUserSpecific?: true },
+): unknown[] {
+  return options?.isUserSpecific ? ["user", key] : [key];
+}
diff --git a/frontend/src/ts/queries/leaderboards.ts b/frontend/src/ts/queries/leaderboards.ts
new file mode 100644
index 000000000000..9f1d2f7bc238
--- /dev/null
+++ b/frontend/src/ts/queries/leaderboards.ts
@@ -0,0 +1,144 @@
+import {
+  GetLeaderboardResponse,
+  GetWeeklyXpLeaderboardResponse,
+} from "@monkeytype/contracts/leaderboards";
+import { Language } from "@monkeytype/schemas/languages";
+import { Mode } from "@monkeytype/schemas/shared";
+import { queryOptions } from "@tanstack/solid-query";
+import Ape from "../ape";
+
+const queryKeys = {
+  leaderboardMeta: (props: Selection) => [
+    props.friendsOnly ? "user" : "leaderboard",
+    "leaderboard",
+    props.type,
+    {
+      mode: props.mode,
+      mode2: props.mode2,
+      language: props.language,
+      friendsOnly: props.friendsOnly,
+      previous: props.previous,
+    },
+  ],
+  leaderboardData: (props: Selection & { page: number }) => [
+    ...queryKeys.leaderboardMeta(props),
+    { page: props.page },
+  ],
+};
+export type LeaderboardType = "allTime" | "daily" | "weekly";
+export type Selection = {
+  type: LeaderboardType;
+  friendsOnly: boolean;
+  mode?: Mode;
+  mode2?: string;
+  language?: Language;
+  previous?: boolean;
+};
+export type LeaderboardMeta = {
+  count: number;
+  minWpm?: number;
+};
+
+export const getLeaderboardQueryOptions = (
+  props: Required<Selection> & {
+    page: number;
+  }, // oxlint-disable-next-line typescript/explicit-function-return-type
+) =>
+  queryOptions({
+    queryKey: queryKeys.leaderboardData(props),
+    queryFn: async (ctx) => {
+      const type = ctx.queryKey[2] as LeaderboardType | undefined;
+      const mode = ctx.queryKey[3] as
+        | Required<Omit<Selection, "type"> & { previous: boolean }>
+        | undefined;
+      const page = ctx.queryKey[4] as { page: number } | undefined;
+      if (type === undefined) throw new Error("type missing in query");
+      if (mode === undefined) throw new Error("mode missing in query");
+      if (page === undefined) throw new Error("page missing in query");
+
+      if (type === "weekly") {
+        return await fetchWeeklyLeaderboard(
+          mode.previous ?? false,
+          mode.friendsOnly,
+          page.page,
+        );
+      }
+
+      if (mode.language === undefined) {
+        throw new Error("language missing in query");
+      }
+
+      return await fetchLeaderboard(type, mode, page.page);
+    },
+    //5 minutes for alltime, 10 seconds for others
+    staleTime: props.type === "allTime" ? 1000 * 60 * 60 : 1000 * 60,
+    placeholderData: (old) => {
+      if (
+        old === undefined ||
+        old["entries"] === undefined ||
+        old["entries"].length === 0 ||
+        old["entries"][0] === undefined
+      ) {
+        return undefined;
+      }
+      const last = old["entries"][0];
+      if (
+        (props.type === "weekly" && !("totalXp" in last)) ||
+        (props.type !== "weekly" && !("wpm" in last))
+      ) {
+        return undefined;
+      }
+
+      return old;
+    },
+  });
+
+async function fetchWeeklyLeaderboard(
+  friendsOnly: boolean,
+  previousWeek: boolean,
+  page: number,
+): Promise<GetWeeklyXpLeaderboardResponse["data"]> {
+  const response = await Ape.leaderboards.getWeeklyXp({
+    query: {
+      friendsOnly,
+      weeksBefore: previousWeek ? 1 : undefined,
+      page,
+      pageSize: 50,
+    },
+  });
+
+  if (response.status !== 200) {
+    throw new Error(
+      "Error fetching weekly leaderboard: " + response.body.message,
+    );
+  }
+
+  return response.body.data;
+}
+async function fetchLeaderboard(
+  type: "allTime" | "daily",
+  selection: Required<Omit<Selection, "type"> & { previous: boolean }>,
+  page: number,
+): Promise<GetLeaderboardResponse["data"]> {
+  const query = {
+    friendsOnly: selection.friendsOnly,
+    language: selection.language,
+    mode: selection.mode,
+    mode2: selection.mode2,
+    pageSize: 50,
+    page,
+  };
+  const response = await (type === "allTime"
+    ? Ape.leaderboards.get({ query })
+    : Ape.leaderboards.getDaily({
+        query: { ...query, daysBefore: selection.previous ? 1 : undefined },
+      }));
+
+  if (response.status !== 200) {
+    throw new Error(
+      `Failed to get ${type} leaderboard: ` + response.body.message,
+    );
+  }
+
+  return response.body.data;
+}

From 9fec8bb29ed5b4c44c184617ce157b1c71b4752d Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Tue, 3 Feb 2026 16:10:15 +0100
Subject: [PATCH 08/26] wip

---
 .../components/pages/leaderboard/LeaderboardPage.tsx | 12 ++++++++++++
 .../pages/leaderboard/LeaderboardTable.tsx           |  4 ++--
 frontend/src/ts/queries/leaderboards.ts              |  2 +-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
index bff72eb222f9..d43ac7f809a9 100644
--- a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
@@ -12,6 +12,7 @@ import {
 } from "solid-js";
 import { createStore } from "solid-js/store";
 
+import { createEffectOn } from "../../../hooks/effects";
 import { queryClient } from "../../../queries/client";
 import {
   getLeaderboardQueryOptions,
@@ -50,6 +51,17 @@ export function LeaderboardPage(): JSXElement {
     setPage(0);
   };
 
+  createEffect(() => {
+    //TODO fetch previous page as well, check boundaries
+    void queryClient.prefetchQuery(
+      getLeaderboardQueryOptions({
+        ...selection,
+        previous: false, //TODO
+        page: page() + 1,
+      }),
+    );
+  });
+
   const query = useQuery(() => ({
     ...getLeaderboardQueryOptions({
       ...selection,
diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardTable.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardTable.tsx
index 96fdd8db65bb..d408f5e4b678 100644
--- a/frontend/src/ts/components/pages/leaderboard/LeaderboardTable.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardTable.tsx
@@ -75,7 +75,7 @@ function getWpmColumns({
       },
     }),
     defineColumn("rank", {
-      header: friendsOnly ? () => <Fa icon="fa-users" /> : "#",
+      header: () => <Fa icon={friendsOnly ? "fa-users" : "fa-hashtag"} />,
       cell: (info) =>
         info.getValue() === 1 ? <Fa icon="fa-crown" /> : info.getValue(),
       meta: {
@@ -214,7 +214,7 @@ function getXpColumns(
       },
     }),
     defineColumn("rank", {
-      header: friendsOnly ? () => <Fa icon="fa-users" /> : "#",
+      header: () => <Fa icon={friendsOnly ? "fa-users" : "fa-hashtag"} />,
       cell: (info) =>
         info.getValue() === 1 ? <Fa icon="fa-crown" /> : info.getValue(),
       meta: {
diff --git a/frontend/src/ts/queries/leaderboards.ts b/frontend/src/ts/queries/leaderboards.ts
index 9f1d2f7bc238..4b9f711b707d 100644
--- a/frontend/src/ts/queries/leaderboards.ts
+++ b/frontend/src/ts/queries/leaderboards.ts
@@ -40,7 +40,7 @@ export type LeaderboardMeta = {
 };
 
 export const getLeaderboardQueryOptions = (
-  props: Required<Selection> & {
+  props: Selection & {
     page: number;
   }, // oxlint-disable-next-line typescript/explicit-function-return-type
 ) =>

From feac67ccbbd035131fc0d1e9d768348f52e2df99 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Tue, 3 Feb 2026 18:45:18 +0100
Subject: [PATCH 09/26] don't preload if not visible

---
 .../pages/leaderboard/LeaderboardPage.tsx        | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
index d43ac7f809a9..9b8445817ca5 100644
--- a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
@@ -53,13 +53,15 @@ export function LeaderboardPage(): JSXElement {
 
   createEffect(() => {
     //TODO fetch previous page as well, check boundaries
-    void queryClient.prefetchQuery(
-      getLeaderboardQueryOptions({
-        ...selection,
-        previous: false, //TODO
-        page: page() + 1,
-      }),
-    );
+    if (isOpen()) {
+      void queryClient.prefetchQuery(
+        getLeaderboardQueryOptions({
+          ...selection,
+          previous: false, //TODO
+          page: page() + 1,
+        }),
+      );
+    }
   });
 
   const query = useQuery(() => ({

From 77af738ffa1d60e0f0ea38aba10344f34dc78bbc Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Wed, 4 Feb 2026 09:56:21 +0100
Subject: [PATCH 10/26] wip

---
 .../src/ts/components/common/AsyncContent.tsx |  1 +
 frontend/src/ts/components/common/Button.tsx  |  3 ++-
 .../pages/leaderboard/LeaderboardPage.tsx     |  1 -
 frontend/src/ts/queries/leaderboards.ts       | 22 +++++++++----------
 4 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/frontend/src/ts/components/common/AsyncContent.tsx b/frontend/src/ts/components/common/AsyncContent.tsx
index 30c13c727428..be3e4a37037f 100644
--- a/frontend/src/ts/components/common/AsyncContent.tsx
+++ b/frontend/src/ts/components/common/AsyncContent.tsx
@@ -57,6 +57,7 @@ export default function AsyncContent<T>(
         error: () => props.query.error,
       };
     }
+    throw new Error("missing source");
   });
 
   const value = () => {
diff --git a/frontend/src/ts/components/common/Button.tsx b/frontend/src/ts/components/common/Button.tsx
index 3e8affaea964..00a08fd53181 100644
--- a/frontend/src/ts/components/common/Button.tsx
+++ b/frontend/src/ts/components/common/Button.tsx
@@ -23,6 +23,7 @@ type ButtonProps = BaseProps & {
 type AnchorProps = BaseProps & {
   href: string;
   onClick?: never;
+  disabled?: never;
 };
 
 export function Button(props: ButtonProps | AnchorProps): JSXElement {
@@ -67,7 +68,7 @@ export function Button(props: ButtonProps | AnchorProps): JSXElement {
           type="button"
           classList={getClassList()}
           onClick={() => props.onClick?.()}
-          disabled={props["disabled"] as boolean}
+          disabled={props.disabled !== false}
         >
           {content}
         </button>
diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
index 9b8445817ca5..055749e1b123 100644
--- a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
@@ -12,7 +12,6 @@ import {
 } from "solid-js";
 import { createStore } from "solid-js/store";
 
-import { createEffectOn } from "../../../hooks/effects";
 import { queryClient } from "../../../queries/client";
 import {
   getLeaderboardQueryOptions,
diff --git a/frontend/src/ts/queries/leaderboards.ts b/frontend/src/ts/queries/leaderboards.ts
index 4b9f711b707d..f3196cd4cac4 100644
--- a/frontend/src/ts/queries/leaderboards.ts
+++ b/frontend/src/ts/queries/leaderboards.ts
@@ -8,21 +8,21 @@ import { queryOptions } from "@tanstack/solid-query";
 import Ape from "../ape";
 
 const queryKeys = {
-  leaderboardMeta: (props: Selection) => [
-    props.friendsOnly ? "user" : "leaderboard",
+  leaderboardMeta: (options: Selection) => [
+    options.friendsOnly ? "user" : "leaderboard",
     "leaderboard",
-    props.type,
+    options.type,
     {
-      mode: props.mode,
-      mode2: props.mode2,
-      language: props.language,
-      friendsOnly: props.friendsOnly,
-      previous: props.previous,
+      mode: options.mode,
+      mode2: options.mode2,
+      language: options.language,
+      friendsOnly: options.friendsOnly,
+      previous: options.previous,
     },
   ],
-  leaderboardData: (props: Selection & { page: number }) => [
-    ...queryKeys.leaderboardMeta(props),
-    { page: props.page },
+  leaderboardData: (options: Selection & { page: number }) => [
+    ...queryKeys.leaderboardMeta(options),
+    { page: options.page },
   ],
 };
 export type LeaderboardType = "allTime" | "daily" | "weekly";

From 800bcfdfcc2390fae2ff9b4abb6f0166205b5ecf Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Wed, 4 Feb 2026 11:58:24 +0100
Subject: [PATCH 11/26] cleanup

---
 frontend/package.json                                  |  1 -
 frontend/src/index.html                                |  1 -
 frontend/src/ts/ape/server-configuration.ts            |  2 +-
 frontend/src/ts/components/common/Button.tsx           |  2 +-
 .../components/pages/leaderboard/LeaderboardPage.tsx   |  2 +-
 frontend/src/ts/queries/client.ts                      |  3 ---
 frontend/src/ts/queries/leaderboards.ts                | 10 +++++-----
 pnpm-lock.yaml                                         |  3 ---
 8 files changed, 8 insertions(+), 16 deletions(-)
 delete mode 100644 frontend/src/ts/queries/client.ts

diff --git a/frontend/package.json b/frontend/package.json
index 0ed6b852860a..d97f5c655374 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -30,7 +30,6 @@
     "@sentry/browser": "9.14.0",
     "@sentry/vite-plugin": "3.3.1",
     "@solidjs/meta": "0.29.4",
-    "@tanstack/query-core": "5.90.20",
     "@tanstack/solid-query": "5.90.23",
     "@tanstack/solid-query-devtools": "5.91.3",
     "@tanstack/solid-table": "8.21.3",
diff --git a/frontend/src/index.html b/frontend/src/index.html
index 80f3fd97f095..b7ad14bba257 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -3,7 +3,6 @@
   <load src="html/head.html" />
 
   <body>
-    <mount data-component="devtools"></mount>
     <mount data-component="overlays"></mount>
     <load src="html/warnings.html" />
     <div class="customBackground"></div>
diff --git a/frontend/src/ts/ape/server-configuration.ts b/frontend/src/ts/ape/server-configuration.ts
index 6aaaacabe622..cb7c3864e8e1 100644
--- a/frontend/src/ts/ape/server-configuration.ts
+++ b/frontend/src/ts/ape/server-configuration.ts
@@ -1,7 +1,7 @@
 import { Configuration } from "@monkeytype/schemas/configuration";
 import Ape from ".";
 import { promiseWithResolvers } from "../utils/misc";
-import { queryClient } from "../queries/client";
+import { queryClient } from "../queries";
 const staleTime = 1000 * 60 * 60;
 const queryKey = ["serverConfiguration"];
 
diff --git a/frontend/src/ts/components/common/Button.tsx b/frontend/src/ts/components/common/Button.tsx
index 00a08fd53181..b786bfba842d 100644
--- a/frontend/src/ts/components/common/Button.tsx
+++ b/frontend/src/ts/components/common/Button.tsx
@@ -68,7 +68,7 @@ export function Button(props: ButtonProps | AnchorProps): JSXElement {
           type="button"
           classList={getClassList()}
           onClick={() => props.onClick?.()}
-          disabled={props.disabled !== false}
+          disabled={props.disabled ?? false}
         >
           {content}
         </button>
diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
index 055749e1b123..af3c6e624849 100644
--- a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
@@ -12,7 +12,7 @@ import {
 } from "solid-js";
 import { createStore } from "solid-js/store";
 
-import { queryClient } from "../../../queries/client";
+import { queryClient } from "../../../queries";
 import {
   getLeaderboardQueryOptions,
   LeaderboardType,
diff --git a/frontend/src/ts/queries/client.ts b/frontend/src/ts/queries/client.ts
deleted file mode 100644
index 6311a8feae26..000000000000
--- a/frontend/src/ts/queries/client.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { QueryClient } from "@tanstack/query-core";
-
-export const queryClient = new QueryClient();
diff --git a/frontend/src/ts/queries/leaderboards.ts b/frontend/src/ts/queries/leaderboards.ts
index f3196cd4cac4..c70edc85d1a2 100644
--- a/frontend/src/ts/queries/leaderboards.ts
+++ b/frontend/src/ts/queries/leaderboards.ts
@@ -40,12 +40,12 @@ export type LeaderboardMeta = {
 };
 
 export const getLeaderboardQueryOptions = (
-  props: Selection & {
+  options: Selection & {
     page: number;
   }, // oxlint-disable-next-line typescript/explicit-function-return-type
 ) =>
   queryOptions({
-    queryKey: queryKeys.leaderboardData(props),
+    queryKey: queryKeys.leaderboardData(options),
     queryFn: async (ctx) => {
       const type = ctx.queryKey[2] as LeaderboardType | undefined;
       const mode = ctx.queryKey[3] as
@@ -71,7 +71,7 @@ export const getLeaderboardQueryOptions = (
       return await fetchLeaderboard(type, mode, page.page);
     },
     //5 minutes for alltime, 10 seconds for others
-    staleTime: props.type === "allTime" ? 1000 * 60 * 60 : 1000 * 60,
+    staleTime: options.type === "allTime" ? 1000 * 60 * 60 : 1000 * 60,
     placeholderData: (old) => {
       if (
         old === undefined ||
@@ -83,8 +83,8 @@ export const getLeaderboardQueryOptions = (
       }
       const last = old["entries"][0];
       if (
-        (props.type === "weekly" && !("totalXp" in last)) ||
-        (props.type !== "weekly" && !("wpm" in last))
+        (options.type === "weekly" && !("totalXp" in last)) ||
+        (options.type !== "weekly" && !("wpm" in last))
       ) {
         return undefined;
       }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f2c7f1ba37b9..59bda0b9f6db 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -282,9 +282,6 @@ importers:
       '@solidjs/meta':
         specifier: 0.29.4
         version: 0.29.4(solid-js@1.9.10)
-      '@tanstack/query-core':
-        specifier: 5.90.20
-        version: 5.90.20
       '@tanstack/solid-query':
         specifier: 5.90.23
         version: 5.90.23(solid-js@1.9.10)

From 82eafe4079446a21b89754b280458bc4f5f85426 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 6 Feb 2026 10:28:37 +0100
Subject: [PATCH 12/26] wip

---
 frontend/src/ts/components/common/Fa.tsx      |  2 +-
 frontend/src/ts/components/common/Headers.tsx | 36 +++++--
 .../pages/leaderboard/LeaderboardPage.tsx     | 94 ++++++++++++++++++-
 .../pages/leaderboard/LeaderboardTable.tsx    | 43 +++++----
 4 files changed, 147 insertions(+), 28 deletions(-)

diff --git a/frontend/src/ts/components/common/Fa.tsx b/frontend/src/ts/components/common/Fa.tsx
index 60604d84f930..aac4445f4134 100644
--- a/frontend/src/ts/components/common/Fa.tsx
+++ b/frontend/src/ts/components/common/Fa.tsx
@@ -12,13 +12,13 @@ export function Fa(props: FaProps): JSXElement {
   const variant = (): string => props.variant ?? "solid";
   return (
     <i
-      class={props.icon}
       classList={{
         ["fas"]: variant() === "solid",
         ["far"]: variant() === "regular",
         ["fab"]: variant() === "brand",
         ["fa-fw"]: props.fixedWidth === true,
         ["fa-spin"]: props.spin === true,
+        [props.icon]: true,
       }}
       style={{
         "font-size": props.size !== undefined ? `${props.size}em` : undefined,
diff --git a/frontend/src/ts/components/common/Headers.tsx b/frontend/src/ts/components/common/Headers.tsx
index 47d00ee34819..e9e5946b64b4 100644
--- a/frontend/src/ts/components/common/Headers.tsx
+++ b/frontend/src/ts/components/common/Headers.tsx
@@ -1,10 +1,21 @@
 import { JSXElement, Show } from "solid-js";
 
+import { cn } from "../../utils/cn";
+
 import { Fa, FaProps } from "./Fa";
 
-export function H1(props: { text: string; fa?: FaProps }): JSXElement {
+export function H1(props: {
+  class?: string;
+  text: string;
+  fa?: FaProps;
+}): JSXElement {
   return (
-    <h1 class="text-sub flex place-items-center gap-4 pb-4 text-4xl">
+    <h1
+      class={cn(
+        "flex place-items-center gap-4 pb-4 text-4xl text-sub",
+        props.class,
+      )}
+    >
       <Show when={props.fa}>
         <Fa {...(props.fa as FaProps)} />
       </Show>
@@ -13,9 +24,18 @@ export function H1(props: { text: string; fa?: FaProps }): JSXElement {
   );
 }
 
-export function H2(props: { text: string; fa?: FaProps }): JSXElement {
+export function H2(props: {
+  class?: string;
+  text: string;
+  fa?: FaProps;
+}): JSXElement {
   return (
-    <h2 class="text-sub flex place-items-center gap-4 pb-4 text-2xl">
+    <h2
+      class={cn(
+        "flex place-items-center gap-4 pb-4 text-2xl text-sub",
+        props.class,
+      )}
+    >
       <Show when={props.fa}>
         <Fa {...(props.fa as FaProps)} />
       </Show>
@@ -24,9 +44,13 @@ export function H2(props: { text: string; fa?: FaProps }): JSXElement {
   );
 }
 
-export function H3(props: { text: string; fa: FaProps }): JSXElement {
+export function H3(props: {
+  class?: string;
+  text: string;
+  fa: FaProps;
+}): JSXElement {
   return (
-    <h3 class="text-sub flex place-items-center gap-2 pb-2">
+    <h3 class={cn("flex place-items-center gap-2 pb-2 text-sub", props.class)}>
       <Fa {...props.fa} />
       {props.text}
     </h3>
diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
index af3c6e624849..4191c5ed3478 100644
--- a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
@@ -1,7 +1,16 @@
 import { UTCDateMini } from "@date-fns/utc/date/mini";
 import { useQuery } from "@tanstack/solid-query";
-import { endOfDay, endOfWeek } from "date-fns";
+import {
+  endOfDay,
+  endOfWeek,
+  startOfDay,
+  startOfWeek,
+  subDays,
+  subHours,
+  subMinutes,
+} from "date-fns";
 import { differenceInSeconds } from "date-fns/differenceInSeconds";
+import { format as dateFormat } from "date-fns/format";
 import {
   createEffect,
   createMemo,
@@ -21,6 +30,7 @@ import {
 import { getActivePage, isLoggedIn } from "../../../signals/core";
 import { secondsToString } from "../../../utils/date-and-time";
 import { qsr } from "../../../utils/dom";
+import { addToGlobal } from "../../../utils/misc";
 import { capitalizeFirstLetter } from "../../../utils/strings";
 import AsyncContent from "../../common/AsyncContent";
 import { Button } from "../../common/Button";
@@ -50,13 +60,13 @@ export function LeaderboardPage(): JSXElement {
     setPage(0);
   };
 
+  addToGlobal({ selection });
   createEffect(() => {
     //TODO fetch previous page as well, check boundaries
     if (isOpen()) {
       void queryClient.prefetchQuery(
         getLeaderboardQueryOptions({
           ...selection,
-          previous: false, //TODO
           page: page() + 1,
         }),
       );
@@ -80,7 +90,11 @@ export function LeaderboardPage(): JSXElement {
         </div>
 
         <div class="w-full flex-1">
-          <Title selection={selection} />
+          <Title
+            selection={selection}
+            onPreviousSelect={() => setSelection("previous", (old) => !old)}
+          />
+
           <Show when={isLoggedIn()}>
             <LeaderboardTable
               type={selection.type === "weekly" ? "xp" : "wpm"}
@@ -147,7 +161,10 @@ export function LeaderboardPage(): JSXElement {
   );
 }
 
-function Title(props: { selection: Selection }): JSXElement {
+function Title(props: {
+  selection: Selection;
+  onPreviousSelect: () => void;
+}): JSXElement {
   const title = createMemo(() => {
     const type =
       props.selection.type === "allTime"
@@ -167,7 +184,74 @@ function Title(props: { selection: Selection }): JSXElement {
     return `${type} ${language} ${mode} ${friend}Leaderboard`;
   });
 
-  return <H2 text={title()} />;
+  const subTitle = createMemo(() => {
+    const utcDateFormat = "EEEE, do MMMM yyyy";
+    const localDateFormat = "EEEE, do MMMM yyyy HH:mm";
+    const toLocalString = (
+      timestamp: UTCDateMini,
+      endTimestamp: UTCDateMini,
+    ): string =>
+      `local time\n${dateFormat(utcToLocalDate(timestamp), localDateFormat)} -\n${dateFormat(utcToLocalDate(endTimestamp), localDateFormat)}`;
+
+    if (props.selection.type === "daily") {
+      let timestamp = startOfDay(new UTCDateMini());
+      if (props.selection.previous) {
+        timestamp = subHours(timestamp, 24);
+      }
+      const endTimestamp = endOfDay(timestamp);
+      return {
+        dateString: dateFormat(timestamp, utcDateFormat) + " UTC",
+        localString: toLocalString(timestamp, endTimestamp),
+        buttonText: props.selection.previous ? "show today" : "show yesterday",
+      };
+    } else if (props.selection.type === "weekly") {
+      let timestamp = startOfWeek(new UTCDateMini(), { weekStartsOn: 1 });
+      if (props.selection.previous) {
+        timestamp = subDays(timestamp, 7);
+      }
+      const endTimestamp = endOfWeek(timestamp, { weekStartsOn: 1 });
+
+      return {
+        dateString: `${dateFormat(timestamp, utcDateFormat)} - ${dateFormat(endTimestamp, utcDateFormat)} UTC`,
+        localString: toLocalString(timestamp, endTimestamp),
+        buttonText: props.selection.previous
+          ? "show this week"
+          : "show last week",
+      };
+    }
+    return null;
+  });
+
+  return (
+    <>
+      <H2 text={title()} class="p-0" />
+      <Show when={subTitle() !== null}>
+        <div class="flex items-center gap-2">
+          <div
+            data-balloon-pos="down"
+            data-balloon-break
+            aria-label={subTitle()?.localString}
+          >
+            {subTitle()?.dateString}
+          </div>
+          <div class="h-[1.75em] w-[0.25em] rounded bg-sub-alt"></div>
+          <Button
+            text={subTitle()?.buttonText}
+            type="text"
+            onClick={props.onPreviousSelect}
+            fa={{
+              icon: props.selection.previous ? "fa-forward" : "fa-backward",
+              variant: "solid",
+            }}
+          />
+        </div>
+      </Show>
+    </>
+  );
+}
+
+function utcToLocalDate(timestamp: UTCDateMini): Date {
+  return subMinutes(timestamp, new Date().getTimezoneOffset());
 }
 
 function NextUpdate(props: { type: LeaderboardType }): JSXElement {
diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardTable.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardTable.tsx
index d408f5e4b678..c220cbe0b3a5 100644
--- a/frontend/src/ts/components/pages/leaderboard/LeaderboardTable.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardTable.tsx
@@ -179,12 +179,15 @@ function getWpmColumns({
     }),
     defineColumn("timestamp", {
       header: "date",
-      cell: (info) => (
-        <>
-          <div>{dateFormat(info.getValue(), "dd MMM yyyy")}</div>
-          <div class="text-sub">{dateFormat(info.getValue(), "HH:mm")}</div>
-        </>
-      ),
+      cell: (info) =>
+        info.getValue() !== undefined ? (
+          <>
+            <div>{dateFormat(info.getValue(), "dd MMM yyyy")}</div>
+            <div class="text-sub">{dateFormat(info.getValue(), "HH:mm")}</div>
+          </>
+        ) : (
+          ""
+        ),
       meta: {
         align: "right",
       },
@@ -246,18 +249,26 @@ function getXpColumns(
 
     defineColumn("lastActivityTimestamp", {
       header: "date",
-      cell: (info) => (
-        <>
-          <div>{dateFormat(info.getValue(), "dd MMM yyyy")}</div>
-          <div class="text-sub">{dateFormat(info.getValue(), "HH:mm")}</div>
-        </>
-      ),
+      cell: (info) =>
+        info.getValue() !== undefined ? (
+          <>
+            <div>{dateFormat(info.getValue(), "dd MMM yyyy")}</div>
+            <div class="text-sub">{dateFormat(info.getValue(), "HH:mm")}</div>
+          </>
+        ) : (
+          ""
+        ),
       meta: {
         align: "right",
-        cellMeta: ({ value }) => ({
-          "aria-label": formatDistanceToNow(value, { addSuffix: true }),
-          "data-balloon-pos": "left",
-        }),
+        cellMeta: (info) =>
+          info.value !== undefined
+            ? {
+                "aria-label": formatDistanceToNow(info.value, {
+                  addSuffix: true,
+                }),
+                "data-balloon-pos": "left",
+              }
+            : {},
       },
     }),
   ];

From 94d85db448084d8d525619c7e0ee6ed93dd61d97 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 6 Feb 2026 13:03:11 +0100
Subject: [PATCH 13/26] refactor

---
 .../pages/leaderboard/LeaderboardPage.tsx     |   4 +-
 .../components/pages/leaderboard/Sidebar.tsx  | 253 ++++++++----------
 frontend/src/ts/queries/leaderboards.ts       |  40 +--
 3 files changed, 138 insertions(+), 159 deletions(-)

diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
index 4191c5ed3478..fb0ff1108b01 100644
--- a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
@@ -51,7 +51,9 @@ export function LeaderboardPage(): JSXElement {
     type: "allTime",
     mode: "time",
     mode2: "15",
+    language: "english",
     friendsOnly: false,
+    previous: false,
   });
 
   const [page, setPage] = createSignal(0);
@@ -61,6 +63,7 @@ export function LeaderboardPage(): JSXElement {
   };
 
   addToGlobal({ selection });
+
   createEffect(() => {
     //TODO fetch previous page as well, check boundaries
     if (isOpen()) {
@@ -76,7 +79,6 @@ export function LeaderboardPage(): JSXElement {
   const query = useQuery(() => ({
     ...getLeaderboardQueryOptions({
       ...selection,
-      previous: false,
       page: page() ?? 0,
     }),
     enabled: isOpen(),
diff --git a/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx b/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx
index 7f0afa352350..2ecd32f24e7e 100644
--- a/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx
@@ -1,26 +1,18 @@
 import { Language } from "@monkeytype/schemas/languages";
-import { Mode, Mode2 } from "@monkeytype/schemas/shared";
-import {
-  Accessor,
-  createEffect,
-  createSignal,
-  For,
-  JSXElement,
-  Show,
-} from "solid-js";
+import { Mode } from "@monkeytype/schemas/shared";
+import { For, JSXElement, Show } from "solid-js";
+import { createStore } from "solid-js/store";
 
 import { getServerConfiguration } from "../../../ape/server-configuration";
 import { Selection } from "../../../queries/leaderboards";
 import { isLoggedIn } from "../../../signals/core";
 import { FaSolidIcon } from "../../../types/font-awesome";
+import { addToGlobal } from "../../../utils/misc";
 import { Button } from "../../common/Button";
 
 type GroupItem<T> = { id: T; text: string; icon: FaSolidIcon };
 
-type LanguagesByModeByMode2 = Partial<
-  // oxlint-disable-next-line typescript/no-explicit-any
-  Record<Mode, Record<Mode2<any>, Language[]>>
->;
+type LanguagesByModeByMode2 = Partial<Record<Mode, Record<string, Language[]>>>;
 
 type ValidLeaderboards = {
   allTime: LanguagesByModeByMode2;
@@ -28,158 +20,94 @@ type ValidLeaderboards = {
   daily: LanguagesByModeByMode2;
 };
 
-export type ModeSelect = Required<Pick<Selection, "mode" | "mode2">>;
+export type ModeSelect = Pick<Selection, "mode" | "mode2">;
 
 export function Sidebar(props: {
   onSelect: (selection: Selection) => void;
 }): JSXElement {
-  const [type, setType] = createSignal<Selection["type"]>("allTime");
-  const [friendsOnly, setFriendsOnly] =
-    createSignal<Selection["friendsOnly"]>(false);
-  const [mode, setMode] = createSignal<ModeSelect | undefined>({
+  const [selection, setSelection] = createStore<Selection>({
+    type: "allTime",
     mode: "time",
     mode2: "15",
+    language: "english",
+    previous: false,
+    friendsOnly: false,
   });
-  const [language, setLanguage] =
-    createSignal<Selection["language"]>("english");
 
+  addToGlobal({ ss: selection });
   const validLeaderboards = (): ValidLeaderboards => getValidLeaderboards();
 
-  /**
-   * update leaderboard selection to a valid state.
-   * @param key
-   * @returns
-   */
-  const setSelected = (
-    key: "type" | "mode" | "language",
-  ): ((val: unknown) => void) => {
-    return (value) => {
-      const state = {
-        type: type(),
-        mode: mode(),
-        language: language(),
-      };
-
-      //@ts-expect-error generic
-      state[key] = value;
-
-      if (state.type === "weekly") {
-        setType("weekly");
-        setLanguage(undefined);
-        setMode(undefined);
-        return;
-      }
-      state.mode ??= { mode: "time", mode2: "15" };
-
-      const validLeaderboard = validLeaderboards()[state.type];
-
-      let validModes2 = validLeaderboard[state.mode.mode];
-
-      if (validModes2 === undefined) {
-        const firstMode = Object.keys(validLeaderboard).sort()[0] as Mode;
-        if (firstMode === undefined) {
-          throw new Error(`no valid leaderboard config for type ${state.type}`);
-        }
-        state.mode.mode = firstMode;
-        validModes2 = validLeaderboard[firstMode];
-      }
-
-      let supportedLanguages = validModes2?.[state.mode.mode2];
-      if (supportedLanguages === undefined) {
-        const firstLanguage = Object.keys(validModes2 ?? {}).sort(
-          (a, b) => parseInt(a) - parseInt(b),
-        )[0];
-        if (firstLanguage === undefined) {
-          throw new Error(
-            `no valid leaderboard config for type ${state.type} and mode ${state.mode.mode}`,
-          );
-        }
-        state.mode.mode2 = firstLanguage;
-        supportedLanguages = validModes2?.[firstLanguage];
-      }
-
-      if (supportedLanguages === undefined || supportedLanguages.length < 1) {
-        throw new Error(
-          `Daily leaderboard config not valid for mode:${state.mode.mode} mode2:${state.mode.mode2}`,
-        );
-      }
+  function updateSelection(patch: Partial<Selection>): void {
+    setSelection((prev) => {
+      const newValue = normalizeSelection(
+        //@ts-expect-error this is fine
+        { ...prev, ...patch },
+        validLeaderboards(),
+      );
+      props.onSelect(newValue);
+      return newValue;
+    });
+  }
 
-      if (
-        state.language === undefined ||
-        !supportedLanguages.includes(state.language)
-      ) {
-        state.language = supportedLanguages.sort()[0] as Language;
-      }
+  function selectType(type: Selection["type"]): void {
+    updateSelection({ type });
+  }
 
-      setType(state.type);
-      setMode(state.mode);
-      setLanguage(state.language);
-    };
-  };
+  function selectMode(value: ModeSelect): void {
+    updateSelection({ mode: value.mode, mode2: value.mode2 });
+  }
 
-  createEffect(() => {
-    props.onSelect({
-      type: type(),
-      friendsOnly: friendsOnly(),
-      mode: mode()?.mode,
-      mode2: mode()?.mode2,
-      language: language(),
-    });
-  });
+  function selectLanguage(language: Language): void {
+    updateSelection({ language });
+  }
+  function selectFriendsOnly(friendsOnly: boolean): void {
+    updateSelection({ friendsOnly });
+  }
 
   return (
     <>
       <Group
-        selected={type}
-        onSelect={setSelected("type")}
+        selected={selection.type}
+        onSelect={selectType}
         items={[
           {
             id: "allTime",
             text: "all-time english",
             icon: "fa-globe-americas",
           },
-          {
-            id: "weekly",
-            text: "weekly xp",
-            icon: "fa-calendar-day",
-          },
-          {
-            id: "daily",
-            text: "daily",
-            icon: "fa-sun",
-          },
+          { id: "weekly", text: "weekly xp", icon: "fa-calendar-day" },
+          { id: "daily", text: "daily", icon: "fa-sun" },
         ]}
       />
       <Show when={isLoggedIn()}>
         <Group
-          selected={friendsOnly}
-          onSelect={setFriendsOnly}
+          selected={selection.friendsOnly}
+          onSelect={selectFriendsOnly}
           items={[
-            {
-              id: false,
-              text: "everyone",
-              icon: "fa-users",
-            },
-            {
-              id: true,
-              text: "friends only",
-              icon: "fa-user-friends",
-            },
+            { id: false, text: "everyone", icon: "fa-users" },
+            { id: true, text: "friends only", icon: "fa-user-friends" },
           ]}
         />
       </Show>
-      <Show when={type() !== "weekly"}>
+      <Show when={selection.type !== "weekly"}>
         <Group
-          selected={mode}
-          onSelect={setSelected("mode")}
-          items={getModeButtons(validLeaderboards()[type()], language())}
+          selected={{ mode: selection.mode, mode2: selection.mode2 }}
+          onSelect={selectMode}
+          items={getModeButtons(
+            validLeaderboards()[selection.type],
+            selection.language as Language,
+          )}
         />
       </Show>
-      <Show when={type() === "daily"}>
+      <Show when={selection.type === "daily"}>
         <Group
-          selected={language}
-          onSelect={setSelected("language")}
-          items={getLanguageButtons(validLeaderboards()[type()], mode())}
+          selected={selection.language as Language}
+          onSelect={selectLanguage}
+          items={getLanguageButtons(
+            validLeaderboards().daily,
+            selection.mode as Mode,
+            selection.mode2 as string,
+          )}
         />
       </Show>
     </>
@@ -188,14 +116,14 @@ export function Sidebar(props: {
 
 function Group<T>(props: {
   items: GroupItem<T>[];
-  selected: Accessor<T>;
+  selected: T;
   onSelect: (selected: T) => void;
 }): JSXElement {
   const isEqual = (a: unknown, b: unknown): boolean =>
     typeof a === "object" ? JSON.stringify(a) === JSON.stringify(b) : a === b;
 
   return (
-    <div class="bg-sub-alt mb-4 grid gap-4 rounded-xl p-4">
+    <div class="mb-4 grid gap-4 rounded-xl bg-sub-alt p-4">
       <For each={props.items}>
         {(item) => (
           <Button
@@ -203,7 +131,7 @@ function Group<T>(props: {
             fa={{ icon: item.icon }}
             text={item.text}
             class="justify-start"
-            active={isEqual(item.id, props.selected())}
+            active={isEqual(item.id, props.selected)}
           />
         )}
       </For>
@@ -211,6 +139,55 @@ function Group<T>(props: {
   );
 }
 
+function normalizeSelection(
+  draft: Selection,
+  valid: ValidLeaderboards,
+): Selection {
+  if (draft.type === "weekly") {
+    return {
+      ...draft,
+      mode: undefined,
+      mode2: undefined,
+      language: undefined,
+      previous: false,
+    };
+  }
+
+  let { mode, mode2, language } = draft;
+  const validModes = valid[draft.type];
+
+  if (mode === null || validModes[mode] === undefined) {
+    const firstMode = Object.keys(validModes).sort()[0] as Mode | undefined;
+    if (!firstMode) {
+      throw new Error(`No valid mode for type ${draft.type}`);
+    }
+    mode = firstMode;
+  }
+
+  const validMode2 = validModes[mode] as Record<string, Language[]>;
+
+  if (mode2 === null || validMode2[mode2] === undefined) {
+    const firstMode2 = Object.keys(validMode2).sort(
+      (a, b) => parseInt(a) - parseInt(b),
+    )[0];
+    if (firstMode2 === undefined) {
+      throw new Error(`No valid mode2 for ${draft.type}:${mode}`);
+    }
+    mode2 = firstMode2;
+  }
+
+  const supportedLanguages = validMode2[mode2];
+  if (!supportedLanguages || supportedLanguages.length === 0) {
+    throw new Error(`Invalid leaderboard config for ${mode}:${mode2}`);
+  }
+
+  if (!language || !supportedLanguages.includes(language)) {
+    language = supportedLanguages.sort()[0] as Language;
+  }
+
+  return { ...draft, mode, mode2, language };
+}
+
 function getModeButtons(
   valid: LanguagesByModeByMode2,
   language?: Language,
@@ -233,11 +210,12 @@ function getModeButtons(
 
 function getLanguageButtons(
   valid: LanguagesByModeByMode2,
-  mode: ModeSelect | undefined,
+  mode: Mode,
+  mode2: string,
 ): GroupItem<Language>[] {
   if (mode === undefined) return [];
 
-  return (valid[mode.mode]?.[mode.mode2] ?? []).map((language) => ({
+  return (valid[mode]?.[mode2] ?? []).map((language) => ({
     id: language,
     text: language,
     icon: "fa-globe",
@@ -289,8 +267,5 @@ function getValidLeaderboards(): ValidLeaderboards {
 }
 
 function convertRuleOption(rule: string): string[] {
-  if (rule.startsWith("(")) {
-    return rule.slice(1, -1).split("|");
-  }
-  return [rule];
+  return rule.startsWith("(") ? rule.slice(1, -1).split("|") : [rule];
 }
diff --git a/frontend/src/ts/queries/leaderboards.ts b/frontend/src/ts/queries/leaderboards.ts
index c70edc85d1a2..799eb58e34e9 100644
--- a/frontend/src/ts/queries/leaderboards.ts
+++ b/frontend/src/ts/queries/leaderboards.ts
@@ -8,7 +8,7 @@ import { queryOptions } from "@tanstack/solid-query";
 import Ape from "../ape";
 
 const queryKeys = {
-  leaderboardMeta: (options: Selection) => [
+  leaderboardData: (options: Selection & { page: number }) => [
     options.friendsOnly ? "user" : "leaderboard",
     "leaderboard",
     options.type,
@@ -19,25 +19,27 @@ const queryKeys = {
       friendsOnly: options.friendsOnly,
       previous: options.previous,
     },
-  ],
-  leaderboardData: (options: Selection & { page: number }) => [
-    ...queryKeys.leaderboardMeta(options),
     { page: options.page },
   ],
 };
-export type LeaderboardType = "allTime" | "daily" | "weekly";
-export type Selection = {
-  type: LeaderboardType;
-  friendsOnly: boolean;
-  mode?: Mode;
-  mode2?: string;
-  language?: Language;
-  previous?: boolean;
-};
-export type LeaderboardMeta = {
-  count: number;
-  minWpm?: number;
-};
+export type LeaderboardType = Selection["type"];
+export type Selection =
+  | {
+      type: "weekly";
+      friendsOnly: boolean;
+      previous: boolean;
+      language?: never;
+      mode?: never;
+      mode2?: never;
+    }
+  | {
+      type: "daily" | "allTime";
+      mode: Mode;
+      mode2: string;
+      language: Language;
+      friendsOnly: boolean;
+      previous: boolean;
+    };
 
 export const getLeaderboardQueryOptions = (
   options: Selection & {
@@ -58,8 +60,8 @@ export const getLeaderboardQueryOptions = (
 
       if (type === "weekly") {
         return await fetchWeeklyLeaderboard(
+          mode.friendsOnly ?? false,
           mode.previous ?? false,
-          mode.friendsOnly,
           page.page,
         );
       }
@@ -121,7 +123,7 @@ async function fetchLeaderboard(
   page: number,
 ): Promise<GetLeaderboardResponse["data"]> {
   const query = {
-    friendsOnly: selection.friendsOnly,
+    friendsOnly: selection.friendsOnly ? true : undefined,
     language: selection.language,
     mode: selection.mode,
     mode2: selection.mode2,

From e3517aa3f525e9bfcb966c1152018aeebe595d1a Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 6 Feb 2026 14:42:50 +0100
Subject: [PATCH 14/26] move stuff around

---
 .../ts/components/common/LoadingCircle.tsx    |  10 +
 .../pages/leaderboard/LeaderboardPage.tsx     | 241 ++----------------
 .../{LeaderboardTable.tsx => Table.tsx}       |   2 +-
 .../pages/leaderboard/TableNavigation.tsx     | 134 ++++++++++
 .../ts/components/pages/leaderboard/Title.tsx | 110 ++++++++
 5 files changed, 280 insertions(+), 217 deletions(-)
 create mode 100644 frontend/src/ts/components/common/LoadingCircle.tsx
 rename frontend/src/ts/components/pages/leaderboard/{LeaderboardTable.tsx => Table.tsx} (98%)
 create mode 100644 frontend/src/ts/components/pages/leaderboard/TableNavigation.tsx
 create mode 100644 frontend/src/ts/components/pages/leaderboard/Title.tsx

diff --git a/frontend/src/ts/components/common/LoadingCircle.tsx b/frontend/src/ts/components/common/LoadingCircle.tsx
new file mode 100644
index 000000000000..21ae75397284
--- /dev/null
+++ b/frontend/src/ts/components/common/LoadingCircle.tsx
@@ -0,0 +1,10 @@
+import { JSXElement } from "solid-js";
+
+import { Fa } from "./Fa";
+export function LoadingCircle(): JSXElement {
+  return (
+    <div class="text-main">
+      <Fa icon="fa-circle-notch" fixedWidth spin />
+    </div>
+  );
+}
diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
index fb0ff1108b01..d0790cfdd004 100644
--- a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
@@ -1,43 +1,21 @@
-import { UTCDateMini } from "@date-fns/utc/date/mini";
 import { useQuery } from "@tanstack/solid-query";
-import {
-  endOfDay,
-  endOfWeek,
-  startOfDay,
-  startOfWeek,
-  subDays,
-  subHours,
-  subMinutes,
-} from "date-fns";
-import { differenceInSeconds } from "date-fns/differenceInSeconds";
-import { format as dateFormat } from "date-fns/format";
-import {
-  createEffect,
-  createMemo,
-  createSignal,
-  JSXElement,
-  onCleanup,
-  Show,
-} from "solid-js";
+import { createEffect, createSignal, JSXElement } from "solid-js";
 import { createStore } from "solid-js/store";
 
 import { queryClient } from "../../../queries";
 import {
   getLeaderboardQueryOptions,
-  LeaderboardType,
   Selection,
 } from "../../../queries/leaderboards";
-import { getActivePage, isLoggedIn } from "../../../signals/core";
-import { secondsToString } from "../../../utils/date-and-time";
+import { getActivePage } from "../../../signals/core";
 import { qsr } from "../../../utils/dom";
 import { addToGlobal } from "../../../utils/misc";
-import { capitalizeFirstLetter } from "../../../utils/strings";
 import AsyncContent from "../../common/AsyncContent";
-import { Button } from "../../common/Button";
-import { H2 } from "../../common/Headers";
 
-import { LeaderboardTable } from "./LeaderboardTable";
 import { Sidebar } from "./Sidebar";
+import { Table } from "./Table";
+import { TableNavigation } from "./TableNavigation";
+import { Title } from "./Title";
 
 //TODO update page name
 qsr("nav .view-about").on("mouseenter", () => {
@@ -91,206 +69,37 @@ export function LeaderboardPage(): JSXElement {
           <Sidebar onSelect={onSelectionChange} />
         </div>
 
-        <div class="w-full flex-1">
+        <div class="flex w-full flex-1 flex-col gap-4">
           <Title
             selection={selection}
             onPreviousSelect={() => setSelection("previous", (old) => !old)}
           />
 
-          <Show when={isLoggedIn()}>
-            <LeaderboardTable
-              type={selection.type === "weekly" ? "xp" : "wpm"}
-              entries={[
-                {
-                  uid: "0",
-                  name: "You",
-                  timestamp: 0,
-                  timeTypedSeconds: 0,
-                  totalXp: 0,
-                  lastActivityTimestamp: 0,
-                },
-              ]}
-              hideHeader
-            />
-          </Show>
-          <Show when={query.isLoading}>loading....</Show>
-          <Show when={query.isRefetching}>loading updating...</Show>
-          <div class="grid grid-cols-2 items-center justify-between text-base">
-            <div>
-              <NextUpdate type={selection.type} />
-            </div>
-            <div class="grid grid-flow-col items-center gap-2 justify-self-end">
-              <Button
-                onClick={() => setPage(0)}
-                fa={{ icon: "fa-crown", fixedWidth: true }}
-                disabled={page() === 0}
-              />
-              <Button
-                onClick={() => setPage(2)}
-                fa={{ icon: "fa-user", fixedWidth: true }}
-                disabled={page() === 2}
-              />
-              <Button
-                onClick={() => setPage((old) => old - 1)}
-                fa={{ icon: "fa-chevron-left", fixedWidth: true }}
-                disabled={page() === 0}
-              />
-              <Button
-                onClick={() => setPage((old) => old - 1)}
-                fa={{ icon: "fa-hashtag", fixedWidth: true }}
-              />
-              <Button
-                onClick={() => setPage((old) => old + 1)}
-                fa={{ icon: "fa-chevron-right", fixedWidth: true }}
-                disabled={
-                  page() + 1 >= Math.ceil((query.data?.count ?? 0) / 50)
-                }
-              />
-            </div>
-          </div>
-          <AsyncContent query={query}>
-            {(data) => (
-              <LeaderboardTable
-                type={selection.type === "weekly" ? "xp" : "wpm"}
-                entries={data.entries}
-                friendsOnly={selection.friendsOnly}
-              />
-            )}
-          </AsyncContent>
+          <TableNavigation
+            type={selection.type}
+            lastPage={Math.ceil((query.data?.count ?? 0) / 50)}
+            currentPage={page()}
+            onPageChange={setPage}
+            isLoading={
+              query.isLoading || query.isFetching || query.isRefetching
+            }
+          >
+            <AsyncContent query={query} alwaysShowContent>
+              {(data) => (
+                <Table
+                  type={selection.type === "weekly" ? "xp" : "wpm"}
+                  entries={data?.entries ?? []}
+                  friendsOnly={selection.friendsOnly}
+                />
+              )}
+            </AsyncContent>
+          </TableNavigation>
         </div>
       </div>
     </div>
   );
 }
 
-function Title(props: {
-  selection: Selection;
-  onPreviousSelect: () => void;
-}): JSXElement {
-  const title = createMemo(() => {
-    const type =
-      props.selection.type === "allTime"
-        ? "All-time"
-        : props.selection.type === "weekly"
-          ? "Weekly XP"
-          : "Daily";
-
-    const friend = props.selection.friendsOnly ? "Friends " : "";
-
-    const language = capitalizeFirstLetter(props.selection.language ?? "");
-
-    const mode =
-      props.selection.type !== "weekly"
-        ? ` ${capitalizeFirstLetter(props.selection.mode ?? "")} ${props.selection.mode2}`
-        : "";
-    return `${type} ${language} ${mode} ${friend}Leaderboard`;
-  });
-
-  const subTitle = createMemo(() => {
-    const utcDateFormat = "EEEE, do MMMM yyyy";
-    const localDateFormat = "EEEE, do MMMM yyyy HH:mm";
-    const toLocalString = (
-      timestamp: UTCDateMini,
-      endTimestamp: UTCDateMini,
-    ): string =>
-      `local time\n${dateFormat(utcToLocalDate(timestamp), localDateFormat)} -\n${dateFormat(utcToLocalDate(endTimestamp), localDateFormat)}`;
-
-    if (props.selection.type === "daily") {
-      let timestamp = startOfDay(new UTCDateMini());
-      if (props.selection.previous) {
-        timestamp = subHours(timestamp, 24);
-      }
-      const endTimestamp = endOfDay(timestamp);
-      return {
-        dateString: dateFormat(timestamp, utcDateFormat) + " UTC",
-        localString: toLocalString(timestamp, endTimestamp),
-        buttonText: props.selection.previous ? "show today" : "show yesterday",
-      };
-    } else if (props.selection.type === "weekly") {
-      let timestamp = startOfWeek(new UTCDateMini(), { weekStartsOn: 1 });
-      if (props.selection.previous) {
-        timestamp = subDays(timestamp, 7);
-      }
-      const endTimestamp = endOfWeek(timestamp, { weekStartsOn: 1 });
-
-      return {
-        dateString: `${dateFormat(timestamp, utcDateFormat)} - ${dateFormat(endTimestamp, utcDateFormat)} UTC`,
-        localString: toLocalString(timestamp, endTimestamp),
-        buttonText: props.selection.previous
-          ? "show this week"
-          : "show last week",
-      };
-    }
-    return null;
-  });
-
-  return (
-    <>
-      <H2 text={title()} class="p-0" />
-      <Show when={subTitle() !== null}>
-        <div class="flex items-center gap-2">
-          <div
-            data-balloon-pos="down"
-            data-balloon-break
-            aria-label={subTitle()?.localString}
-          >
-            {subTitle()?.dateString}
-          </div>
-          <div class="h-[1.75em] w-[0.25em] rounded bg-sub-alt"></div>
-          <Button
-            text={subTitle()?.buttonText}
-            type="text"
-            onClick={props.onPreviousSelect}
-            fa={{
-              icon: props.selection.previous ? "fa-forward" : "fa-backward",
-              variant: "solid",
-            }}
-          />
-        </div>
-      </Show>
-    </>
-  );
-}
-
-function utcToLocalDate(timestamp: UTCDateMini): Date {
-  return subMinutes(timestamp, new Date().getTimezoneOffset());
-}
-
-function NextUpdate(props: { type: LeaderboardType }): JSXElement {
-  const [tick, setTick] = createSignal(Date.now());
-
-  // Update the tick every second
-  createEffect(() => {
-    const interval = setInterval(() => setTick(Date.now()), 1000);
-    onCleanup(() => clearInterval(interval));
-  });
-
-  const nextUpdate = createMemo(() => {
-    const now = new Date(tick());
-    if (props.type === "daily") {
-      const diff = differenceInSeconds(now, endOfDay(new UTCDateMini()));
-      return "Next reset in: " + secondsToString(diff, true);
-    } else if (props.type === "allTime") {
-      const minutesToNextUpdate = 14 - (now.getMinutes() % 15);
-      const secondsToNextUpdate = 60 - now.getSeconds();
-      const totalSeconds = minutesToNextUpdate * 60 + secondsToNextUpdate;
-      return "Next update in: " + secondsToString(totalSeconds, true);
-    } else if (props.type === "weekly") {
-      const nextWeekTimestamp = endOfWeek(new UTCDateMini(), {
-        weekStartsOn: 1,
-      });
-      const totalSeconds = differenceInSeconds(now, nextWeekTimestamp);
-      return (
-        "Next reset in: " +
-        secondsToString(totalSeconds, true, true, ":", true, true)
-      );
-    }
-    return "";
-  });
-
-  return <div>{nextUpdate()}</div>;
-}
-
 function prefetch(): void {
   void queryClient.prefetchQuery(
     getLeaderboardQueryOptions({
diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardTable.tsx b/frontend/src/ts/components/pages/leaderboard/Table.tsx
similarity index 98%
rename from frontend/src/ts/components/pages/leaderboard/LeaderboardTable.tsx
rename to frontend/src/ts/components/pages/leaderboard/Table.tsx
index c220cbe0b3a5..82271d5de92c 100644
--- a/frontend/src/ts/components/pages/leaderboard/LeaderboardTable.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/Table.tsx
@@ -22,7 +22,7 @@ type LeaderboardTableProps = {
   hideHeader?: true;
 };
 
-export function LeaderboardTable(props: LeaderboardTableProps): JSXElement {
+export function Table(props: LeaderboardTableProps): JSXElement {
   const wpmColumns = createMemo(() =>
     getWpmColumns({
       friendsOnly: props.friendsOnly,
diff --git a/frontend/src/ts/components/pages/leaderboard/TableNavigation.tsx b/frontend/src/ts/components/pages/leaderboard/TableNavigation.tsx
new file mode 100644
index 000000000000..328b6f0e3757
--- /dev/null
+++ b/frontend/src/ts/components/pages/leaderboard/TableNavigation.tsx
@@ -0,0 +1,134 @@
+import { UTCDateMini } from "@date-fns/utc/date/mini";
+import { endOfDay, endOfWeek } from "date-fns";
+import { differenceInSeconds } from "date-fns/differenceInSeconds";
+import {
+  JSXElement,
+  ParentProps,
+  Setter,
+  Show,
+  createEffect,
+  createMemo,
+  createSignal,
+  onCleanup,
+} from "solid-js";
+
+import { LeaderboardType } from "../../../queries/leaderboards";
+import { secondsToString } from "../../../utils/date-and-time";
+import { Button } from "../../common/Button";
+import { LoadingCircle } from "../../common/LoadingCircle";
+
+export function TableNavigation(
+  props: {
+    type: LeaderboardType;
+    lastPage: number;
+    userPage?: number;
+    currentPage: number;
+    onPageChange: Setter<number>;
+    isLoading?: boolean;
+  } & ParentProps,
+): JSXElement {
+  return (
+    <>
+      <div class="grid grid-cols-2 items-center justify-between text-base">
+        <div>
+          <NextUpdate type={props.type} />
+        </div>
+        <Navigation
+          isLoading={props.isLoading}
+          lastPage={props.lastPage}
+          userPage={props.userPage}
+          currentPage={props.currentPage}
+          onPageChange={props.onPageChange}
+        />
+      </div>
+
+      {props.children}
+
+      <div class="grid grid-cols-1 items-center justify-between text-base">
+        <Navigation
+          lastPage={props.lastPage}
+          currentPage={props.currentPage}
+          onPageChange={props.onPageChange}
+        />
+      </div>
+    </>
+  );
+}
+
+function Navigation(props: {
+  lastPage: number;
+  userPage?: number;
+  currentPage: number;
+  onPageChange: Setter<number>;
+  isLoading?: boolean;
+}): JSXElement {
+  return (
+    <div class="grid grid-flow-col items-center gap-2 justify-self-end">
+      <Show when={props.isLoading}>
+        <LoadingCircle />
+      </Show>
+      <Button
+        onClick={() => props.onPageChange(0)}
+        fa={{ icon: "fa-crown", fixedWidth: true }}
+        disabled={props.currentPage === 0}
+      />
+      <Button
+        onClick={() => props.onPageChange(props.userPage as number)}
+        fa={{ icon: "fa-user", fixedWidth: true }}
+        disabled={
+          props.userPage === undefined || props.currentPage === props.userPage
+        }
+      />
+      <Button
+        onClick={() => props.onPageChange((old) => old - 1)}
+        fa={{ icon: "fa-chevron-left", fixedWidth: true }}
+        disabled={props.currentPage === 0}
+      />
+      <Button
+        onClick={() => props.onPageChange((old) => old - 1)}
+        fa={{ icon: "fa-hashtag", fixedWidth: true }}
+        disabled={true} //TODO
+      />
+      <Button
+        onClick={() => props.onPageChange((old) => old + 1)}
+        fa={{ icon: "fa-chevron-right", fixedWidth: true }}
+        disabled={props.currentPage + 1 >= props.lastPage}
+      />
+    </div>
+  );
+}
+
+function NextUpdate(props: { type: LeaderboardType }): JSXElement {
+  const [tick, setTick] = createSignal(Date.now());
+
+  // Update the tick every second
+  createEffect(() => {
+    const interval = setInterval(() => setTick(Date.now()), 1000);
+    onCleanup(() => clearInterval(interval));
+  });
+
+  const nextUpdate = createMemo(() => {
+    const now = new Date(tick());
+    if (props.type === "daily") {
+      const diff = differenceInSeconds(now, endOfDay(new UTCDateMini()));
+      return "Next reset in: " + secondsToString(diff, true);
+    } else if (props.type === "allTime") {
+      const minutesToNextUpdate = 14 - (now.getMinutes() % 15);
+      const secondsToNextUpdate = 60 - now.getSeconds();
+      const totalSeconds = minutesToNextUpdate * 60 + secondsToNextUpdate;
+      return "Next update in: " + secondsToString(totalSeconds, true);
+    } else if (props.type === "weekly") {
+      const nextWeekTimestamp = endOfWeek(new UTCDateMini(), {
+        weekStartsOn: 1,
+      });
+      const totalSeconds = differenceInSeconds(now, nextWeekTimestamp);
+      return (
+        "Next reset in: " +
+        secondsToString(totalSeconds, true, true, ":", true, true)
+      );
+    }
+    return "";
+  });
+
+  return <div>{nextUpdate()}</div>;
+}
diff --git a/frontend/src/ts/components/pages/leaderboard/Title.tsx b/frontend/src/ts/components/pages/leaderboard/Title.tsx
new file mode 100644
index 000000000000..6ec12d99151a
--- /dev/null
+++ b/frontend/src/ts/components/pages/leaderboard/Title.tsx
@@ -0,0 +1,110 @@
+import { UTCDateMini } from "@date-fns/utc/date/mini";
+import {
+  endOfDay,
+  endOfWeek,
+  startOfDay,
+  startOfWeek,
+  subDays,
+  subHours,
+  subMinutes,
+} from "date-fns";
+import { format as dateFormat } from "date-fns/format";
+import { createMemo, JSXElement, Show } from "solid-js";
+
+import { Selection } from "../../../queries/leaderboards";
+import { capitalizeFirstLetter } from "../../../utils/strings";
+import { Button } from "../../common/Button";
+import { H2 } from "../../common/Headers";
+
+export function Title(props: {
+  selection: Selection;
+  onPreviousSelect: () => void;
+}): JSXElement {
+  const title = createMemo(() => {
+    const type =
+      props.selection.type === "allTime"
+        ? "All-time"
+        : props.selection.type === "weekly"
+          ? "Weekly XP"
+          : "Daily";
+
+    const friend = props.selection.friendsOnly ? "Friends " : "";
+
+    const language = capitalizeFirstLetter(props.selection.language ?? "");
+
+    const mode =
+      props.selection.type !== "weekly"
+        ? ` ${capitalizeFirstLetter(props.selection.mode ?? "")} ${props.selection.mode2}`
+        : "";
+    return `${type} ${language} ${mode} ${friend}Leaderboard`;
+  });
+
+  const subTitle = createMemo(() => {
+    const utcDateFormat = "EEEE, do MMMM yyyy";
+    const localDateFormat = "EEEE, do MMMM yyyy HH:mm";
+    const toLocalString = (
+      timestamp: UTCDateMini,
+      endTimestamp: UTCDateMini,
+    ): string =>
+      `local time\n${dateFormat(utcToLocalDate(timestamp), localDateFormat)} -\n${dateFormat(utcToLocalDate(endTimestamp), localDateFormat)}`;
+
+    if (props.selection.type === "daily") {
+      let timestamp = startOfDay(new UTCDateMini());
+      if (props.selection.previous) {
+        timestamp = subHours(timestamp, 24);
+      }
+      const endTimestamp = endOfDay(timestamp);
+      return {
+        dateString: dateFormat(timestamp, utcDateFormat) + " UTC",
+        localString: toLocalString(timestamp, endTimestamp),
+        buttonText: props.selection.previous ? "show today" : "show yesterday",
+      };
+    } else if (props.selection.type === "weekly") {
+      let timestamp = startOfWeek(new UTCDateMini(), { weekStartsOn: 1 });
+      if (props.selection.previous) {
+        timestamp = subDays(timestamp, 7);
+      }
+      const endTimestamp = endOfWeek(timestamp, { weekStartsOn: 1 });
+
+      return {
+        dateString: `${dateFormat(timestamp, utcDateFormat)} - ${dateFormat(endTimestamp, utcDateFormat)} UTC`,
+        localString: toLocalString(timestamp, endTimestamp),
+        buttonText: props.selection.previous
+          ? "show this week"
+          : "show last week",
+      };
+    }
+    return null;
+  });
+
+  return (
+    <div>
+      <H2 text={title()} class="p-0" />
+      <Show when={subTitle() !== null}>
+        <div class="flex items-center gap-2">
+          <div
+            data-balloon-pos="down"
+            data-balloon-break
+            aria-label={subTitle()?.localString}
+          >
+            {subTitle()?.dateString}
+          </div>
+          <div class="h-[1.75em] w-[0.25em] rounded bg-sub-alt"></div>
+          <Button
+            text={subTitle()?.buttonText}
+            type="text"
+            onClick={props.onPreviousSelect}
+            fa={{
+              icon: props.selection.previous ? "fa-forward" : "fa-backward",
+              variant: "solid",
+            }}
+          />
+        </div>
+      </Show>
+    </div>
+  );
+}
+
+function utcToLocalDate(timestamp: UTCDateMini): Date {
+  return subMinutes(timestamp, new Date().getTimezoneOffset());
+}

From 2389d8056b6929dbaf124b2dfbf69cbfc17e0508 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 6 Feb 2026 19:11:58 +0100
Subject: [PATCH 15/26] add rank query, scroll to user

---
 .../pages/leaderboard/LeaderboardPage.tsx     |  39 +++-
 .../components/pages/leaderboard/Sidebar.tsx  |   2 -
 .../ts/components/pages/leaderboard/Table.tsx |  40 +++-
 .../pages/leaderboard/TableNavigation.tsx     |  25 +-
 .../components/pages/leaderboard/UserRank.tsx |  39 ++++
 .../src/ts/components/ui/table/DataTable.tsx  |  51 ++++-
 frontend/src/ts/queries/leaderboards.ts       | 215 +++++++++++-------
 7 files changed, 305 insertions(+), 106 deletions(-)
 create mode 100644 frontend/src/ts/components/pages/leaderboard/UserRank.tsx

diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
index d0790cfdd004..c888c93c8e3a 100644
--- a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
@@ -5,17 +5,18 @@ import { createStore } from "solid-js/store";
 import { queryClient } from "../../../queries";
 import {
   getLeaderboardQueryOptions,
+  getRankQueryOptions,
   Selection,
 } from "../../../queries/leaderboards";
-import { getActivePage } from "../../../signals/core";
+import { getActivePage, isLoggedIn } from "../../../signals/core";
 import { qsr } from "../../../utils/dom";
-import { addToGlobal } from "../../../utils/misc";
 import AsyncContent from "../../common/AsyncContent";
 
 import { Sidebar } from "./Sidebar";
 import { Table } from "./Table";
 import { TableNavigation } from "./TableNavigation";
 import { Title } from "./Title";
+import { UserRank } from "./UserRank";
 
 //TODO update page name
 qsr("nav .view-about").on("mouseenter", () => {
@@ -35,13 +36,13 @@ export function LeaderboardPage(): JSXElement {
   });
 
   const [page, setPage] = createSignal(0);
+  const [scrollToUser, setScrollToUser] = createSignal(false);
+
   const onSelectionChange = (selection: Selection): void => {
     setSelection(selection);
     setPage(0);
   };
 
-  addToGlobal({ selection });
-
   createEffect(() => {
     //TODO fetch previous page as well, check boundaries
     if (isOpen()) {
@@ -62,6 +63,18 @@ export function LeaderboardPage(): JSXElement {
     enabled: isOpen(),
   }));
 
+  const rank = useQuery(() => ({
+    ...getRankQueryOptions(selection),
+    enabled: isLoggedIn() && isOpen(),
+  }));
+
+  const userPage = (): number | undefined => {
+    const userRank = rank.data?.friendsRank ?? rank.data?.rank;
+    if (userRank === undefined) return undefined;
+    const page = Math.ceil(userRank / 50) - 1;
+    return page;
+  };
+
   return (
     <div class="content-grid grid">
       <div class="flex flex-col gap-8 lg:flex-row">
@@ -75,11 +88,27 @@ export function LeaderboardPage(): JSXElement {
             onPreviousSelect={() => setSelection("previous", (old) => !old)}
           />
 
+          <AsyncContent query={rank} alwaysShowContent>
+            {(data) => (
+              <UserRank
+                type={selection.type === "weekly" ? "xp" : "wpm"}
+                data={data}
+                minWpm={
+                  query.data && "minWpm" in query.data
+                    ? (query.data.minWpm as number)
+                    : undefined
+                }
+              />
+            )}
+          </AsyncContent>
+
           <TableNavigation
             type={selection.type}
             lastPage={Math.ceil((query.data?.count ?? 0) / 50)}
             currentPage={page()}
             onPageChange={setPage}
+            userPage={userPage()}
+            onScrollToUser={setScrollToUser}
             isLoading={
               query.isLoading || query.isFetching || query.isRefetching
             }
@@ -90,6 +119,8 @@ export function LeaderboardPage(): JSXElement {
                   type={selection.type === "weekly" ? "xp" : "wpm"}
                   entries={data?.entries ?? []}
                   friendsOnly={selection.friendsOnly}
+                  scrollToUser={scrollToUser}
+                  onScrolledToUser={() => setScrollToUser(false)}
                 />
               )}
             </AsyncContent>
diff --git a/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx b/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx
index 2ecd32f24e7e..5817e228548e 100644
--- a/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx
@@ -7,7 +7,6 @@ import { getServerConfiguration } from "../../../ape/server-configuration";
 import { Selection } from "../../../queries/leaderboards";
 import { isLoggedIn } from "../../../signals/core";
 import { FaSolidIcon } from "../../../types/font-awesome";
-import { addToGlobal } from "../../../utils/misc";
 import { Button } from "../../common/Button";
 
 type GroupItem<T> = { id: T; text: string; icon: FaSolidIcon };
@@ -34,7 +33,6 @@ export function Sidebar(props: {
     friendsOnly: false,
   });
 
-  addToGlobal({ ss: selection });
   const validLeaderboards = (): ValidLeaderboards => getValidLeaderboards();
 
   function updateSelection(patch: Partial<Selection>): void {
diff --git a/frontend/src/ts/components/pages/leaderboard/Table.tsx b/frontend/src/ts/components/pages/leaderboard/Table.tsx
index 82271d5de92c..94c47d1b262e 100644
--- a/frontend/src/ts/components/pages/leaderboard/Table.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/Table.tsx
@@ -5,24 +5,38 @@ import {
 import { createColumnHelper } from "@tanstack/solid-table";
 import { format as dateFormat } from "date-fns/format";
 import { formatDistanceToNow } from "date-fns/formatDistanceToNow";
-import { createMemo, JSXElement } from "solid-js";
+import { Accessor, createMemo, JSXElement } from "solid-js";
 
+import { createEffectOn } from "../../../hooks/effects";
 import { getConfig } from "../../../signals/config";
+import { getUserId } from "../../../signals/core";
 import { secondsToString } from "../../../utils/date-and-time";
+import { qs } from "../../../utils/dom";
 import { Formatting } from "../../../utils/format";
 import { abbreviateNumber } from "../../../utils/numbers";
 import { Conditional } from "../../common/Conditional";
 import { Fa } from "../../common/Fa";
 import { DataTable, DataTableColumnDef } from "../../ui/table/DataTable";
 
-type LeaderboardTableProps = {
+export function Table(props: {
   type: "wpm" | "xp";
   entries: LeaderboardEntry[] | XpLeaderboardEntry[];
   friendsOnly: boolean;
   hideHeader?: true;
-};
+  scrollToUser: Accessor<boolean>;
+  onScrolledToUser: () => void;
+}): JSXElement {
+  const commonProps = createMemo(() => ({
+    id: "leaderboardTable",
+    fallback: <div>no data found</div>,
+    hideHeader: props.hideHeader,
+    rowSelection: {
+      getRowId: (row: { uid: string }) => row.uid,
+      activeRow: getUserId,
+      class: "text-main",
+    },
+  }));
 
-export function Table(props: LeaderboardTableProps): JSXElement {
   const wpmColumns = createMemo(() =>
     getWpmColumns({
       friendsOnly: props.friendsOnly,
@@ -31,24 +45,32 @@ export function Table(props: LeaderboardTableProps): JSXElement {
   );
   const xpColumns = createMemo(() => getXpColumns(props.friendsOnly));
 
+  createEffectOn(props.scrollToUser, (enabled) => {
+    if (enabled) {
+      requestAnimationFrame(() => {
+        qs("#leaderboardTable tr[data-state='selected']")?.scrollIntoView({
+          block: "center",
+        });
+        props.onScrolledToUser();
+      });
+    }
+  });
+
   return (
     <Conditional
       if={props.type === "wpm"}
       then={
         <DataTable
-          fallback=<div>no data found</div>
-          id="leaderboardTable"
+          {...commonProps()}
           columns={wpmColumns()}
           data={props.entries as LeaderboardEntry[]}
-          hideHeader={props.hideHeader}
         />
       }
       else={
         <DataTable
-          id="xpLeaderboardTable"
+          {...commonProps()}
           columns={xpColumns()}
           data={props.entries as XpLeaderboardEntry[]}
-          hideHeader={props.hideHeader}
         />
       }
     />
diff --git a/frontend/src/ts/components/pages/leaderboard/TableNavigation.tsx b/frontend/src/ts/components/pages/leaderboard/TableNavigation.tsx
index 328b6f0e3757..c95ec3c4e8cb 100644
--- a/frontend/src/ts/components/pages/leaderboard/TableNavigation.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/TableNavigation.tsx
@@ -24,6 +24,7 @@ export function TableNavigation(
     userPage?: number;
     currentPage: number;
     onPageChange: Setter<number>;
+    onScrollToUser: Setter<boolean>;
     isLoading?: boolean;
   } & ParentProps,
 ): JSXElement {
@@ -39,6 +40,7 @@ export function TableNavigation(
           userPage={props.userPage}
           currentPage={props.currentPage}
           onPageChange={props.onPageChange}
+          onScrollToUser={props.onScrollToUser}
         />
       </div>
 
@@ -49,6 +51,7 @@ export function TableNavigation(
           lastPage={props.lastPage}
           currentPage={props.currentPage}
           onPageChange={props.onPageChange}
+          onScrollToUser={props.onScrollToUser}
         />
       </div>
     </>
@@ -60,6 +63,7 @@ function Navigation(props: {
   userPage?: number;
   currentPage: number;
   onPageChange: Setter<number>;
+  onScrollToUser: Setter<boolean>;
   isLoading?: boolean;
 }): JSXElement {
   return (
@@ -72,13 +76,18 @@ function Navigation(props: {
         fa={{ icon: "fa-crown", fixedWidth: true }}
         disabled={props.currentPage === 0}
       />
-      <Button
-        onClick={() => props.onPageChange(props.userPage as number)}
-        fa={{ icon: "fa-user", fixedWidth: true }}
-        disabled={
-          props.userPage === undefined || props.currentPage === props.userPage
-        }
-      />
+      <Show when={props.userPage !== undefined}>
+        <Button
+          onClick={() => {
+            props.onPageChange(props.userPage as number);
+            props.onScrollToUser(true);
+          }}
+          fa={{ icon: "fa-user", fixedWidth: true }}
+          disabled={
+            props.userPage === undefined || props.currentPage === props.userPage
+          }
+        />
+      </Show>
       <Button
         onClick={() => props.onPageChange((old) => old - 1)}
         fa={{ icon: "fa-chevron-left", fixedWidth: true }}
@@ -92,7 +101,7 @@ function Navigation(props: {
       <Button
         onClick={() => props.onPageChange((old) => old + 1)}
         fa={{ icon: "fa-chevron-right", fixedWidth: true }}
-        disabled={props.currentPage + 1 >= props.lastPage}
+        disabled={props.currentPage >= props.lastPage}
       />
     </div>
   );
diff --git a/frontend/src/ts/components/pages/leaderboard/UserRank.tsx b/frontend/src/ts/components/pages/leaderboard/UserRank.tsx
new file mode 100644
index 000000000000..ce988ae53fc4
--- /dev/null
+++ b/frontend/src/ts/components/pages/leaderboard/UserRank.tsx
@@ -0,0 +1,39 @@
+import {
+  LeaderboardEntry,
+  XpLeaderboardEntry,
+} from "@monkeytype/schemas/leaderboards";
+import { createMemo, JSXElement, Show } from "solid-js";
+
+import { getConfig } from "../../../signals/config";
+import { Formatting } from "../../../utils/format";
+
+export function UserRank(props: {
+  type: "wpm" | "xp";
+  data?: LeaderboardEntry | XpLeaderboardEntry | null;
+  minWpm?: number;
+}): JSXElement {
+  const format = createMemo(() => new Formatting(getConfig));
+  return (
+    <div class="flex rounded bg-sub-alt p-4">
+      <Show
+        when={props.data}
+        fallback={
+          <div class="w-full p-2 text-center">
+            Not qualified
+            <Show when={props.minWpm}>
+              {" "}
+              (min speed required:{" "}
+              {format().typingSpeed(props.minWpm, {
+                showDecimalPlaces: true,
+                suffix: ` ${format().typingSpeedUnit}`,
+              })}
+              )
+            </Show>
+          </div>
+        }
+      >
+        foo
+      </Show>
+    </div>
+  );
+}
diff --git a/frontend/src/ts/components/ui/table/DataTable.tsx b/frontend/src/ts/components/ui/table/DataTable.tsx
index 0b5344848d44..847fa1b5b61a 100644
--- a/frontend/src/ts/components/ui/table/DataTable.tsx
+++ b/frontend/src/ts/components/ui/table/DataTable.tsx
@@ -8,7 +8,17 @@ import {
   getSortedRowModel,
   SortingState,
 } from "@tanstack/solid-table";
-import { createMemo, For, JSXElement, Match, Show, Switch } from "solid-js";
+import {
+  Accessor,
+  createEffect,
+  createMemo,
+  createSignal,
+  For,
+  JSXElement,
+  Match,
+  Show,
+  Switch,
+} from "solid-js";
 import { z } from "zod";
 
 import { useLocalStorage } from "../../../hooks/useLocalStorage";
@@ -38,12 +48,17 @@ export type DataTableColumnDef<TData, TValue = any> =
   | AccessorFnColumnDef<TData, TValue>
   | AccessorKeyColumnDef<TData, TValue>;
 
-type DataTableProps<TData, TValue> = {
+export type DataTableProps<TData, TValue> = {
   id: string;
   columns: DataTableColumnDef<TData, TValue>[];
   data: TData[];
   fallback?: JSXElement;
   hideHeader?: true;
+  rowSelection?: {
+    getRowId: (row: TData) => string;
+    class: string;
+    activeRow: Accessor<string | null>;
+  };
 };
 
 export function DataTable<TData, TValue>(
@@ -90,6 +105,15 @@ export function DataTable<TData, TValue>(
     return result;
   });
 
+  const [rowSelection, setRowSelection] = createSignal({});
+  createEffect(() => {
+    if (!props.rowSelection || props.rowSelection.activeRow === undefined) {
+      setRowSelection({});
+    } else {
+      setRowSelection({ [`${props.rowSelection.activeRow()}`]: true });
+    }
+  });
+
   const table = createSolidTable<TData>({
     get data() {
       return props.data;
@@ -100,6 +124,13 @@ export function DataTable<TData, TValue>(
     getCoreRowModel: getCoreRowModel(),
     onSortingChange: setSorting,
     getSortedRowModel: getSortedRowModel(),
+    enableRowSelection: () => props.rowSelection !== undefined,
+    getRowId: (row, index) =>
+      props.rowSelection !== undefined
+        ? props.rowSelection.getRowId(row)
+        : index.toString(),
+    onRowSelectionChange: setRowSelection,
+
     state: {
       get sorting() {
         return sorting();
@@ -107,12 +138,15 @@ export function DataTable<TData, TValue>(
       get columnVisibility() {
         return columnVisibility();
       },
+      get rowSelection() {
+        return rowSelection();
+      },
     },
   });
 
   return (
     <Show when={table.getRowModel().rows?.length} fallback={props.fallback}>
-      <Table>
+      <Table id={props.id}>
         <Show when={!props.hideHeader}>
           <TableHeader>
             <For each={table.getHeaderGroups()}>
@@ -139,7 +173,7 @@ export function DataTable<TData, TValue>(
                               onClick={(e) => {
                                 header.column.getToggleSortingHandler()?.(e);
                               }}
-                              class="text-sub hover:bg-sub-alt m-0 box-border flex h-full w-full cursor-pointer items-start justify-start rounded-none border-0 bg-transparent p-2 font-normal whitespace-nowrap"
+                              class="m-0 box-border flex h-full w-full cursor-pointer items-start justify-start rounded-none border-0 bg-transparent p-2 font-normal whitespace-nowrap text-sub hover:bg-sub-alt"
                               {...(header.column.columnDef.meta
                                 ?.sortableHeaderMeta ?? {})}
                               classList={{
@@ -217,7 +251,14 @@ export function DataTable<TData, TValue>(
         <TableBody>
           <For each={table.getRowModel().rows}>
             {(row) => (
-              <TableRow data-state={row.getIsSelected() && "selected"}>
+              <TableRow
+                data-state={row.getIsSelected() && "selected"}
+                class={
+                  row.getIsSelected() && props.rowSelection
+                    ? props.rowSelection.class
+                    : ""
+                }
+              >
                 <For each={row.getVisibleCells()}>
                   {(cell) => {
                     const cellMeta =
diff --git a/frontend/src/ts/queries/leaderboards.ts b/frontend/src/ts/queries/leaderboards.ts
index 799eb58e34e9..f333e42663f9 100644
--- a/frontend/src/ts/queries/leaderboards.ts
+++ b/frontend/src/ts/queries/leaderboards.ts
@@ -1,27 +1,12 @@
 import {
-  GetLeaderboardResponse,
-  GetWeeklyXpLeaderboardResponse,
+  GetLeaderboardQuery,
+  GetLeaderboardRankQuery,
 } from "@monkeytype/contracts/leaderboards";
 import { Language } from "@monkeytype/schemas/languages";
 import { Mode } from "@monkeytype/schemas/shared";
-import { queryOptions } from "@tanstack/solid-query";
+import { QueryKey, queryOptions } from "@tanstack/solid-query";
 import Ape from "../ape";
 
-const queryKeys = {
-  leaderboardData: (options: Selection & { page: number }) => [
-    options.friendsOnly ? "user" : "leaderboard",
-    "leaderboard",
-    options.type,
-    {
-      mode: options.mode,
-      mode2: options.mode2,
-      language: options.language,
-      friendsOnly: options.friendsOnly,
-      previous: options.previous,
-    },
-    { page: options.page },
-  ],
-};
 export type LeaderboardType = Selection["type"];
 export type Selection =
   | {
@@ -41,38 +26,84 @@ export type Selection =
       previous: boolean;
     };
 
+const queryKeys = {
+  root: (options: Selection & { userSpecific?: true }) => [
+    options.userSpecific === true || options.friendsOnly
+      ? "user"
+      : "leaderboard",
+    "leaderboard",
+    options.type,
+    {
+      mode: options.mode,
+      mode2: options.mode2,
+      language: options.language,
+      friendsOnly: options.friendsOnly,
+      previous: options.previous,
+    },
+  ],
+  data: (options: Selection & { page: number }) => [
+    ...queryKeys.root(options),
+    { page: options.page },
+  ],
+  rank: (options: Selection) =>
+    queryKeys.root({ ...options, userSpecific: true }), //rank is always user specific
+};
+
 export const getLeaderboardQueryOptions = (
   options: Selection & {
     page: number;
   }, // oxlint-disable-next-line typescript/explicit-function-return-type
 ) =>
   queryOptions({
-    queryKey: queryKeys.leaderboardData(options),
+    queryKey: queryKeys.data(options),
     queryFn: async (ctx) => {
-      const type = ctx.queryKey[2] as LeaderboardType | undefined;
-      const mode = ctx.queryKey[3] as
-        | Required<Omit<Selection, "type"> & { previous: boolean }>
-        | undefined;
       const page = ctx.queryKey[4] as { page: number } | undefined;
-      if (type === undefined) throw new Error("type missing in query");
-      if (mode === undefined) throw new Error("mode missing in query");
       if (page === undefined) throw new Error("page missing in query");
 
-      if (type === "weekly") {
-        return await fetchWeeklyLeaderboard(
-          mode.friendsOnly ?? false,
-          mode.previous ?? false,
-          page.page,
-        );
-      }
+      const selection = getSelectionFromQueryKey(ctx.queryKey);
 
-      if (mode.language === undefined) {
-        throw new Error("language missing in query");
+      let request;
+
+      if (selection.type === "weekly") {
+        request = Ape.leaderboards.getWeeklyXp({
+          query: {
+            friendsOnly: selection.friendsOnly ? true : undefined,
+            weeksBefore: selection.previous ? 1 : undefined,
+            pageSize: 50,
+            page: page.page,
+          },
+        });
+      } else {
+        const baseQuery: GetLeaderboardQuery = {
+          mode: selection.mode,
+          mode2: selection.mode2,
+          language: selection.language,
+          friendsOnly: selection.friendsOnly ? true : undefined,
+          pageSize: 50,
+          page: page.page,
+        };
+        if (selection.type === "allTime") {
+          request = Ape.leaderboards.get({ query: baseQuery });
+        } else {
+          request = Ape.leaderboards.getDaily({
+            query: {
+              ...baseQuery,
+              daysBefore: selection.previous ? 1 : undefined,
+            },
+          });
+        }
       }
 
-      return await fetchLeaderboard(type, mode, page.page);
+      const response = await request;
+      if (response.status !== 200) {
+        throw new Error(
+          `Failed to get ${selection.type} leaderboard rank: ` +
+            response.body.message,
+        );
+      }
+      return response.body.data;
     },
-    //5 minutes for alltime, 10 seconds for others
+    //5 minutes for alltime, one minute for others
     staleTime: options.type === "allTime" ? 1000 * 60 * 60 : 1000 * 60,
     placeholderData: (old) => {
       if (
@@ -95,52 +126,80 @@ export const getLeaderboardQueryOptions = (
     },
   });
 
-async function fetchWeeklyLeaderboard(
-  friendsOnly: boolean,
-  previousWeek: boolean,
-  page: number,
-): Promise<GetWeeklyXpLeaderboardResponse["data"]> {
-  const response = await Ape.leaderboards.getWeeklyXp({
-    query: {
-      friendsOnly,
-      weeksBefore: previousWeek ? 1 : undefined,
-      page,
-      pageSize: 50,
+// oxlint-disable-next-line typescript/explicit-function-return-type
+export const getRankQueryOptions = (options: Selection) =>
+  queryOptions({
+    queryKey: queryKeys.rank(options),
+    queryFn: async (ctx) => {
+      let request;
+      const selection = getSelectionFromQueryKey(ctx.queryKey);
+      if (selection.type === "weekly") {
+        request = Ape.leaderboards.getWeeklyXpRank({
+          query: {
+            friendsOnly: selection.friendsOnly ? true : undefined,
+            weeksBefore: selection.previous ? 1 : undefined,
+          },
+        });
+      } else {
+        const baseQuery: GetLeaderboardRankQuery = {
+          mode: selection.mode,
+          mode2: selection.mode2,
+          language: selection.language,
+          friendsOnly: selection.friendsOnly ? true : undefined,
+        };
+        if (selection.type === "allTime") {
+          request = Ape.leaderboards.getRank({ query: baseQuery });
+        } else {
+          request = Ape.leaderboards.getDailyRank({
+            query: {
+              ...baseQuery,
+              daysBefore: selection.previous ? 1 : undefined,
+            },
+          });
+        }
+      }
+
+      const response = await request;
+      if (response.status !== 200) {
+        throw new Error(
+          `Failed to get ${selection.type} leaderboard rank: ` +
+            response.body.message,
+        );
+      }
+      return response.body.data;
     },
+    //5 minutes for alltime, one minute for others
+    staleTime: options.type === "allTime" ? 1000 * 60 * 60 : 1000 * 60,
   });
 
-  if (response.status !== 200) {
-    throw new Error(
-      "Error fetching weekly leaderboard: " + response.body.message,
-    );
-  }
+function getSelectionFromQueryKey(queryKey: QueryKey): Selection {
+  if (queryKey.length < 3) throw new Error("invalid query key");
 
-  return response.body.data;
-}
-async function fetchLeaderboard(
-  type: "allTime" | "daily",
-  selection: Required<Omit<Selection, "type"> & { previous: boolean }>,
-  page: number,
-): Promise<GetLeaderboardResponse["data"]> {
-  const query = {
-    friendsOnly: selection.friendsOnly ? true : undefined,
-    language: selection.language,
-    mode: selection.mode,
-    mode2: selection.mode2,
-    pageSize: 50,
-    page,
-  };
-  const response = await (type === "allTime"
-    ? Ape.leaderboards.get({ query })
-    : Ape.leaderboards.getDaily({
-        query: { ...query, daysBefore: selection.previous ? 1 : undefined },
-      }));
+  const type = queryKey[2] as LeaderboardType | undefined;
+  const mode = queryKey[3] as
+    | Required<Omit<Selection, "type"> & { previous: boolean }>
+    | undefined;
 
-  if (response.status !== 200) {
-    throw new Error(
-      `Failed to get ${type} leaderboard: ` + response.body.message,
-    );
-  }
+  if (type === undefined) throw new Error("type missing in query");
+  if (mode === undefined) throw new Error("mode missing in query");
 
-  return response.body.data;
+  if (type === "weekly") {
+    return {
+      type: "weekly",
+      friendsOnly: mode.friendsOnly,
+      previous: mode.previous,
+    };
+  } else {
+    if (mode.language === undefined) {
+      throw new Error("language missing in query");
+    }
+    return {
+      type,
+      mode: mode.mode,
+      mode2: mode.mode2,
+      language: mode.language,
+      friendsOnly: mode.friendsOnly,
+      previous: mode.previous,
+    };
+  }
 }

From d216579e983131fc048403719d0a09c0f3dff5cd Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sat, 7 Feb 2026 13:38:16 +0100
Subject: [PATCH 16/26] loading indicator on rank

---
 .../pages/leaderboard/LeaderboardPage.tsx     | 30 ++++++++--------
 .../ts/components/pages/leaderboard/Table.tsx | 22 ++++++------
 .../components/pages/leaderboard/UserRank.tsx | 36 ++++++++++++-------
 3 files changed, 51 insertions(+), 37 deletions(-)

diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
index c888c93c8e3a..79157fdd9c00 100644
--- a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/solid-query";
-import { createEffect, createSignal, JSXElement } from "solid-js";
+import { createEffect, createSignal, JSXElement, Show } from "solid-js";
 import { createStore } from "solid-js/store";
 
 import { queryClient } from "../../../queries";
@@ -88,19 +88,21 @@ export function LeaderboardPage(): JSXElement {
             onPreviousSelect={() => setSelection("previous", (old) => !old)}
           />
 
-          <AsyncContent query={rank} alwaysShowContent>
-            {(data) => (
-              <UserRank
-                type={selection.type === "weekly" ? "xp" : "wpm"}
-                data={data}
-                minWpm={
-                  query.data && "minWpm" in query.data
-                    ? (query.data.minWpm as number)
-                    : undefined
-                }
-              />
-            )}
-          </AsyncContent>
+          <Show when={isLoggedIn()}>
+            <AsyncContent query={rank} alwaysShowContent>
+              {(data) => (
+                <UserRank
+                  type={selection.type === "weekly" ? "xp" : "wpm"}
+                  data={data}
+                  minWpm={
+                    query.data && "minWpm" in query.data
+                      ? (query.data.minWpm as number)
+                      : undefined
+                  }
+                />
+              )}
+            </AsyncContent>
+          </Show>
 
           <TableNavigation
             type={selection.type}
diff --git a/frontend/src/ts/components/pages/leaderboard/Table.tsx b/frontend/src/ts/components/pages/leaderboard/Table.tsx
index 94c47d1b262e..4e7346fdb5c1 100644
--- a/frontend/src/ts/components/pages/leaderboard/Table.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/Table.tsx
@@ -28,7 +28,6 @@ export function Table(props: {
 }): JSXElement {
   const commonProps = createMemo(() => ({
     id: "leaderboardTable",
-    fallback: <div>no data found</div>,
     hideHeader: props.hideHeader,
     rowSelection: {
       getRowId: (row: { uid: string }) => row.uid,
@@ -45,16 +44,19 @@ export function Table(props: {
   );
   const xpColumns = createMemo(() => getXpColumns(props.friendsOnly));
 
-  createEffectOn(props.scrollToUser, (enabled) => {
-    if (enabled) {
-      requestAnimationFrame(() => {
-        qs("#leaderboardTable tr[data-state='selected']")?.scrollIntoView({
-          block: "center",
+  createEffectOn(
+    () => props.scrollToUser(),
+    (enabled) => {
+      if (enabled) {
+        requestAnimationFrame(() => {
+          qs("#leaderboardTable tr[data-state='selected']")?.scrollIntoView({
+            block: "center",
+          });
+          props.onScrolledToUser();
         });
-        props.onScrolledToUser();
-      });
-    }
-  });
+      }
+    },
+  );
 
   return (
     <Conditional
diff --git a/frontend/src/ts/components/pages/leaderboard/UserRank.tsx b/frontend/src/ts/components/pages/leaderboard/UserRank.tsx
index ce988ae53fc4..64e974fac800 100644
--- a/frontend/src/ts/components/pages/leaderboard/UserRank.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/UserRank.tsx
@@ -6,6 +6,7 @@ import { createMemo, JSXElement, Show } from "solid-js";
 
 import { getConfig } from "../../../signals/config";
 import { Formatting } from "../../../utils/format";
+import { Fa } from "../../common/Fa";
 
 export function UserRank(props: {
   type: "wpm" | "xp";
@@ -16,23 +17,32 @@ export function UserRank(props: {
   return (
     <div class="flex rounded bg-sub-alt p-4">
       <Show
-        when={props.data}
+        when={props.data !== undefined}
         fallback={
-          <div class="w-full p-2 text-center">
-            Not qualified
-            <Show when={props.minWpm}>
-              {" "}
-              (min speed required:{" "}
-              {format().typingSpeed(props.minWpm, {
-                showDecimalPlaces: true,
-                suffix: ` ${format().typingSpeedUnit}`,
-              })}
-              )
-            </Show>
+          <div class="w-full text-center">
+            <Fa icon="fa-circle-notch" fixedWidth spin />
           </div>
         }
       >
-        foo
+        <Show
+          when={props.data}
+          fallback={
+            <div class="w-full p-2 text-center">
+              Not qualified
+              <Show when={props.minWpm}>
+                {" "}
+                (min speed required:{" "}
+                {format().typingSpeed(props.minWpm, {
+                  showDecimalPlaces: true,
+                  suffix: ` ${format().typingSpeedUnit}`,
+                })}
+                )
+              </Show>
+            </div>
+          }
+        >
+          foo
+        </Show>
       </Show>
     </div>
   );

From d147b938704b9dd14c1d764dd0afcbf53c1b6d58 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 8 Feb 2026 16:28:31 +0100
Subject: [PATCH 17/26] add rank info

---
 .../ts/components/common/LoadingCircle.tsx    |  6 +-
 .../pages/leaderboard/LeaderboardPage.tsx     |  2 +
 .../ts/components/pages/leaderboard/Table.tsx | 88 ++++++++++++-------
 .../pages/leaderboard/TableNavigation.tsx     |  4 +-
 .../components/pages/leaderboard/UserRank.tsx | 54 ++++++++++--
 .../src/ts/components/ui/table/DataTable.tsx  | 23 +++--
 frontend/src/ts/types/tanstack-table.d.ts     |  4 +-
 7 files changed, 126 insertions(+), 55 deletions(-)

diff --git a/frontend/src/ts/components/common/LoadingCircle.tsx b/frontend/src/ts/components/common/LoadingCircle.tsx
index 21ae75397284..50469a57bcb8 100644
--- a/frontend/src/ts/components/common/LoadingCircle.tsx
+++ b/frontend/src/ts/components/common/LoadingCircle.tsx
@@ -1,9 +1,11 @@
 import { JSXElement } from "solid-js";
 
+import { cn } from "../../utils/cn";
+
 import { Fa } from "./Fa";
-export function LoadingCircle(): JSXElement {
+export function LoadingCircle(props: { class?: string }): JSXElement {
   return (
-    <div class="text-main">
+    <div class={cn("preloader text-main", props.class)}>
       <Fa icon="fa-circle-notch" fixedWidth spin />
     </div>
   );
diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
index 79157fdd9c00..a80f092de7a2 100644
--- a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
@@ -94,6 +94,8 @@ export function LeaderboardPage(): JSXElement {
                 <UserRank
                   type={selection.type === "weekly" ? "xp" : "wpm"}
                   data={data}
+                  friendsOnly={selection.friendsOnly}
+                  total={query.data?.count}
                   minWpm={
                     query.data && "minWpm" in query.data
                       ? (query.data.minWpm as number)
diff --git a/frontend/src/ts/components/pages/leaderboard/Table.tsx b/frontend/src/ts/components/pages/leaderboard/Table.tsx
index 4e7346fdb5c1..444775d168db 100644
--- a/frontend/src/ts/components/pages/leaderboard/Table.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/Table.tsx
@@ -18,22 +18,30 @@ import { Conditional } from "../../common/Conditional";
 import { Fa } from "../../common/Fa";
 import { DataTable, DataTableColumnDef } from "../../ui/table/DataTable";
 
+type WpmEntry = LeaderboardEntry & { userOverride?: () => JSXElement };
+type XpEntry = XpLeaderboardEntry & { userOverride?: () => JSXElement };
+export type TableEntry = WpmEntry | XpEntry;
+
 export function Table(props: {
   type: "wpm" | "xp";
-  entries: LeaderboardEntry[] | XpLeaderboardEntry[];
+  entries: TableEntry[];
   friendsOnly: boolean;
+  userOnly?: true;
   hideHeader?: true;
-  scrollToUser: Accessor<boolean>;
-  onScrolledToUser: () => void;
+  scrollToUser?: Accessor<boolean>;
+  onScrolledToUser?: () => void;
 }): JSXElement {
   const commonProps = createMemo(() => ({
     id: "leaderboardTable",
     hideHeader: props.hideHeader,
-    rowSelection: {
-      getRowId: (row: { uid: string }) => row.uid,
-      activeRow: getUserId,
-      class: "text-main",
-    },
+    class: "table-auto [&>tbody>tr>td]:whitespace-nowrap",
+    rowSelection: props.userOnly
+      ? undefined
+      : {
+          getRowId: (row: { uid: string }) => row.uid,
+          activeRow: getUserId,
+          class: "text-main",
+        },
   }));
 
   const wpmColumns = createMemo(() =>
@@ -45,14 +53,14 @@ export function Table(props: {
   const xpColumns = createMemo(() => getXpColumns(props.friendsOnly));
 
   createEffectOn(
-    () => props.scrollToUser(),
+    () => props.scrollToUser?.(),
     (enabled) => {
       if (enabled) {
         requestAnimationFrame(() => {
           qs("#leaderboardTable tr[data-state='selected']")?.scrollIntoView({
             block: "center",
           });
-          props.onScrolledToUser();
+          props.onScrolledToUser?.();
         });
       }
     },
@@ -85,17 +93,19 @@ function getWpmColumns({
 }: {
   friendsOnly: boolean;
   format: Formatting;
-}): DataTableColumnDef<LeaderboardEntry>[] {
-  const defineColumn = createColumnHelper<LeaderboardEntry>().accessor;
+}): DataTableColumnDef<WpmEntry>[] {
+  const defineColumn = createColumnHelper<WpmEntry>().accessor;
   const columns = [
     defineColumn("friendsRank", {
-      header: () => (
-        <span aria-label="friends rank" data-balloon-pos="down">
-          <Fa icon="fa-user-friends" />
-        </span>
-      ),
+      header: () => <Fa icon="fa-user-friends" />,
+      cell: (info) =>
+        info.getValue() === 1 ? <Fa icon="fa-crown" /> : info.getValue(),
       meta: {
         align: "center",
+        headerMeta: {
+          "aria-label": "Friends rank",
+          "data-balloon-pos": "down",
+        },
       },
     }),
     defineColumn("rank", {
@@ -104,11 +114,19 @@ function getWpmColumns({
         info.getValue() === 1 ? <Fa icon="fa-crown" /> : info.getValue(),
       meta: {
         align: "center",
+        headerMeta: {
+          "aria-label": "Global rank",
+          "data-balloon-pos": "down",
+        },
       },
     }),
     defineColumn("uid", {
       header: "name",
-      cell: (info) => <User user={info.row.original} />,
+      cell: (info) =>
+        info.row.original.userOverride?.() ?? <User user={info.row.original} />,
+      meta: {
+        cellMeta: () => ({ class: "w-full" }),
+      },
     }),
     defineColumn("wpm", {
       header: format.typingSpeedUnit,
@@ -133,7 +151,7 @@ function getWpmColumns({
       header: () => (
         <>
           <div>{format.typingSpeedUnit}</div>
-          <div class="text-sub">accucacy</div>
+          <div class="opacity-50">accucacy</div>
         </>
       ),
       cell: (info) => (
@@ -178,7 +196,7 @@ function getWpmColumns({
       header: () => (
         <>
           <div>raw</div>
-          <div class="text-sub">consistency</div>
+          <div class="opacity-50">consistency</div>
         </>
       ),
       cell: (info) => (
@@ -225,19 +243,19 @@ function getWpmColumns({
   return columns.map((it) => ({ ...it, enableSorting: false }));
 }
 
-function getXpColumns(
-  friendsOnly: boolean,
-): DataTableColumnDef<XpLeaderboardEntry>[] {
-  const defineColumn = createColumnHelper<XpLeaderboardEntry>().accessor;
+function getXpColumns(friendsOnly: boolean): DataTableColumnDef<XpEntry>[] {
+  const defineColumn = createColumnHelper<XpEntry>().accessor;
   const columns = [
     defineColumn("friendsRank", {
-      header: () => (
-        <span aria-label="friends rank" data-balloon-pos="down">
-          <Fa icon="fa-user-friends" />
-        </span>
-      ),
+      header: () => <Fa icon="fa-user-friends" />,
+      cell: (info) =>
+        info.getValue() === 1 ? <Fa icon="fa-crown" /> : info.getValue(),
       meta: {
         align: "center",
+        headerMeta: {
+          "aria-label": "Friends rank",
+          "data-balloon-pos": "down",
+        },
       },
     }),
     defineColumn("rank", {
@@ -246,11 +264,19 @@ function getXpColumns(
         info.getValue() === 1 ? <Fa icon="fa-crown" /> : info.getValue(),
       meta: {
         align: "center",
+        headerMeta: {
+          "aria-label": "Global rank",
+          "data-balloon-pos": "down",
+        },
       },
     }),
     defineColumn("uid", {
       header: "name",
-      cell: (info) => <User user={info.row.original} />,
+      cell: (info) =>
+        info.row.original.userOverride?.() ?? <User user={info.row.original} />,
+      meta: {
+        cellMeta: () => ({ class: "w-full" }),
+      },
     }),
     defineColumn("totalXp", {
       header: "wpm",
@@ -298,7 +324,7 @@ function getXpColumns(
   ];
 
   if (!friendsOnly) {
-    columns.unshift();
+    columns.shift();
   }
 
   return columns.map((it) => ({
diff --git a/frontend/src/ts/components/pages/leaderboard/TableNavigation.tsx b/frontend/src/ts/components/pages/leaderboard/TableNavigation.tsx
index c95ec3c4e8cb..536f6f7bfe31 100644
--- a/frontend/src/ts/components/pages/leaderboard/TableNavigation.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/TableNavigation.tsx
@@ -101,7 +101,7 @@ function Navigation(props: {
       <Button
         onClick={() => props.onPageChange((old) => old + 1)}
         fa={{ icon: "fa-chevron-right", fixedWidth: true }}
-        disabled={props.currentPage >= props.lastPage}
+        disabled={props.currentPage + 1 >= props.lastPage}
       />
     </div>
   );
@@ -139,5 +139,5 @@ function NextUpdate(props: { type: LeaderboardType }): JSXElement {
     return "";
   });
 
-  return <div>{nextUpdate()}</div>;
+  return <div class="text-sub">{nextUpdate()}</div>;
 }
diff --git a/frontend/src/ts/components/pages/leaderboard/UserRank.tsx b/frontend/src/ts/components/pages/leaderboard/UserRank.tsx
index 64e974fac800..8dfd618f39f6 100644
--- a/frontend/src/ts/components/pages/leaderboard/UserRank.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/UserRank.tsx
@@ -4,30 +4,55 @@ import {
 } from "@monkeytype/schemas/leaderboards";
 import { createMemo, JSXElement, Show } from "solid-js";
 
+import { bp } from "../../../signals/breakpoints";
 import { getConfig } from "../../../signals/config";
 import { Formatting } from "../../../utils/format";
-import { Fa } from "../../common/Fa";
+import { LoadingCircle } from "../../common/LoadingCircle";
+
+import { Table, TableEntry } from "./Table";
 
 export function UserRank(props: {
   type: "wpm" | "xp";
   data?: LeaderboardEntry | XpLeaderboardEntry | null;
   minWpm?: number;
+  friendsOnly: boolean;
+  total: number | undefined;
 }): JSXElement {
   const format = createMemo(() => new Formatting(getConfig));
+  const userOverride = createMemo(() => {
+    if (
+      props.data === undefined ||
+      props.data === null ||
+      props.total === undefined
+    ) {
+      return <div>no data</div>;
+    }
+    const rank = props.friendsOnly
+      ? (props.data.friendsRank as number)
+      : props.data.rank;
+    const percentile = (rank / props.total) * 100;
+
+    let percentileString = `Top ${percentile.toFixed(2)}%`;
+    if (rank === 1) {
+      percentileString = "GOAT";
+    }
+    return () => (
+      <>
+        <div>You ({percentileString})</div>
+        <div class="text-xs text-sub">( = since you last checked)</div>
+      </>
+    );
+  });
   return (
-    <div class="flex rounded bg-sub-alt p-4">
+    <div class="flex rounded bg-sub-alt">
       <Show
         when={props.data !== undefined}
-        fallback={
-          <div class="w-full text-center">
-            <Fa icon="fa-circle-notch" fixedWidth spin />
-          </div>
-        }
+        fallback={<LoadingCircle class="w-full p-4 text-center" />}
       >
         <Show
           when={props.data}
           fallback={
-            <div class="w-full p-2 text-center">
+            <div class="w-full p-4 text-center">
               Not qualified
               <Show when={props.minWpm}>
                 {" "}
@@ -41,7 +66,18 @@ export function UserRank(props: {
             </div>
           }
         >
-          foo
+          <Table
+            type={props.type}
+            entries={[
+              {
+                ...props.data,
+                userOverride,
+              } as TableEntry,
+            ]}
+            friendsOnly={props.friendsOnly}
+            userOnly={true}
+            hideHeader={!bp().xl || undefined}
+          />
         </Show>
       </Show>
     </div>
diff --git a/frontend/src/ts/components/ui/table/DataTable.tsx b/frontend/src/ts/components/ui/table/DataTable.tsx
index 847fa1b5b61a..791aa5597f96 100644
--- a/frontend/src/ts/components/ui/table/DataTable.tsx
+++ b/frontend/src/ts/components/ui/table/DataTable.tsx
@@ -59,9 +59,11 @@ export type DataTableProps<TData, TValue> = {
     class: string;
     activeRow: Accessor<string | null>;
   };
+  class?: string;
 };
 
-export function DataTable<TData, TValue>(
+// oxlint-disable-next-line typescript/no-explicit-any
+export function DataTable<TData, TValue = any>(
   props: DataTableProps<TData, TValue>,
 ): JSXElement {
   const [sorting, setSorting] = useLocalStorage<SortingState>({
@@ -88,17 +90,18 @@ export function DataTable<TData, TValue>(
     const current = bp();
     const result = Object.fromEntries(
       props.columns.map((col, index) => {
-        const id =
+        col.id =
           col.id ??
           ("accessorKey" in col && col.accessorKey !== null
             ? String(col.accessorKey)
             : `__col_${index}`);
 
-        return [
-          id,
+        const visible =
           current[col.meta?.breakpoint ?? "xxs"] &&
-            !current[col.meta?.maxBreakpoint ?? "xxl"],
-        ];
+          (col.meta?.maxBreakpoint === undefined ||
+            !current[col.meta?.maxBreakpoint]);
+
+        return [col.id, visible];
       }),
     );
 
@@ -146,7 +149,7 @@ export function DataTable<TData, TValue>(
 
   return (
     <Show when={table.getRowModel().rows?.length} fallback={props.fallback}>
-      <Table id={props.id}>
+      <Table id={props.id} class={props.class}>
         <Show when={!props.hideHeader}>
           <TableHeader>
             <For each={table.getHeaderGroups()}>
@@ -174,8 +177,6 @@ export function DataTable<TData, TValue>(
                                 header.column.getToggleSortingHandler()?.(e);
                               }}
                               class="m-0 box-border flex h-full w-full cursor-pointer items-start justify-start rounded-none border-0 bg-transparent p-2 font-normal whitespace-nowrap text-sub hover:bg-sub-alt"
-                              {...(header.column.columnDef.meta
-                                ?.sortableHeaderMeta ?? {})}
                               classList={{
                                 "text-left":
                                   (header.column.columnDef.meta?.align ??
@@ -187,6 +188,8 @@ export function DataTable<TData, TValue>(
                                   header.column.columnDef.meta?.align ===
                                   "right",
                               }}
+                              {...(header.column.columnDef.meta?.headerMeta ??
+                                {})}
                             >
                               <Show when={!header.isPlaceholder}>
                                 {flexRender(
@@ -231,6 +234,8 @@ export function DataTable<TData, TValue>(
                               "text-right":
                                 header.column.columnDef.meta?.align === "right",
                             }}
+                            {...(header.column.columnDef.meta?.headerMeta ??
+                              {})}
                           >
                             <Show when={!header.isPlaceholder}>
                               {flexRender(
diff --git a/frontend/src/ts/types/tanstack-table.d.ts b/frontend/src/ts/types/tanstack-table.d.ts
index 6727d0d286e8..b0719fca4858 100644
--- a/frontend/src/ts/types/tanstack-table.d.ts
+++ b/frontend/src/ts/types/tanstack-table.d.ts
@@ -35,9 +35,9 @@ declare module "@tanstack/solid-table" {
         }) => JSX.HTMLAttributes<HTMLTableCellElement>);
 
     /**
-     * additional attributes to be set on the header if it is sortable
+     * additional attributes to be set on the header
      * Can be used to define mouse-overs with `aria-label` and `data-balloon-pos`
      */
-    sortableHeaderMeta?: JSX.HTMLAttributes;
+    headerMeta?: JSX.HTMLAttributes;
   }
 }

From 9353de8525c33c44b17c745bd5f932f4c7b61326 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 8 Feb 2026 19:30:00 +0100
Subject: [PATCH 18/26] simplify rank table

---
 .../ts/components/pages/leaderboard/Table.tsx | 174 ++++++++++++++----
 .../components/pages/leaderboard/UserRank.tsx |   8 +-
 2 files changed, 137 insertions(+), 45 deletions(-)

diff --git a/frontend/src/ts/components/pages/leaderboard/Table.tsx b/frontend/src/ts/components/pages/leaderboard/Table.tsx
index 444775d168db..576a530021f8 100644
--- a/frontend/src/ts/components/pages/leaderboard/Table.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/Table.tsx
@@ -8,6 +8,7 @@ import { formatDistanceToNow } from "date-fns/formatDistanceToNow";
 import { Accessor, createMemo, JSXElement } from "solid-js";
 
 import { createEffectOn } from "../../../hooks/effects";
+import { bp } from "../../../signals/breakpoints";
 import { getConfig } from "../../../signals/config";
 import { getUserId } from "../../../signals/core";
 import { secondsToString } from "../../../utils/date-and-time";
@@ -18,39 +19,58 @@ import { Conditional } from "../../common/Conditional";
 import { Fa } from "../../common/Fa";
 import { DataTable, DataTableColumnDef } from "../../ui/table/DataTable";
 
-type WpmEntry = LeaderboardEntry & { userOverride?: () => JSXElement };
-type XpEntry = XpLeaderboardEntry & { userOverride?: () => JSXElement };
+type WpmEntry = LeaderboardEntry;
+type XpEntry = XpLeaderboardEntry;
 export type TableEntry = WpmEntry | XpEntry;
 
-export function Table(props: {
-  type: "wpm" | "xp";
-  entries: TableEntry[];
-  friendsOnly: boolean;
-  userOnly?: true;
-  hideHeader?: true;
-  scrollToUser?: Accessor<boolean>;
-  onScrolledToUser?: () => void;
-}): JSXElement {
+export function Table(
+  props: {
+    type: "wpm" | "xp";
+    entries: TableEntry[];
+    friendsOnly: boolean;
+    hideHeader?: true;
+  } & (
+    | {
+        scrollToUser: Accessor<boolean>;
+        onScrolledToUser: () => void;
+        userOverride?: never;
+      }
+    | {
+        scrollToUser?: never;
+        onScrolledToUser?: never;
+        userOverride: Accessor<JSXElement>;
+      }
+  ),
+): JSXElement {
   const commonProps = createMemo(() => ({
     id: "leaderboardTable",
     hideHeader: props.hideHeader,
     class: "table-auto [&>tbody>tr>td]:whitespace-nowrap",
-    rowSelection: props.userOnly
-      ? undefined
-      : {
-          getRowId: (row: { uid: string }) => row.uid,
-          activeRow: getUserId,
-          class: "text-main",
-        },
+    rowSelection:
+      props.userOverride !== undefined
+        ? undefined
+        : {
+            getRowId: (row: { uid: string }) => row.uid,
+            activeRow: getUserId,
+            class: "text-main",
+          },
   }));
 
   const wpmColumns = createMemo(() =>
     getWpmColumns({
       friendsOnly: props.friendsOnly,
       format: new Formatting(getConfig),
+      userOverride: props.userOverride,
+      addHeader: props.userOverride !== undefined && bp().xl,
+    }),
+  );
+  const xpColumns = createMemo(() =>
+    getXpColumns({
+      friendsOnly: props.friendsOnly,
+      userOverride: props.userOverride,
+      addHeader: props.userOverride !== undefined && bp().xl,
     }),
   );
-  const xpColumns = createMemo(() => getXpColumns(props.friendsOnly));
 
   createEffectOn(
     () => props.scrollToUser?.(),
@@ -90,9 +110,13 @@ export function Table(props: {
 function getWpmColumns({
   friendsOnly,
   format,
+  userOverride,
+  addHeader,
 }: {
   friendsOnly: boolean;
   format: Formatting;
+  userOverride?: Accessor<JSXElement>;
+  addHeader?: boolean;
 }): DataTableColumnDef<WpmEntry>[] {
   const defineColumn = createColumnHelper<WpmEntry>().accessor;
   const columns = [
@@ -122,16 +146,20 @@ function getWpmColumns({
     }),
     defineColumn("uid", {
       header: "name",
-      cell: (info) =>
-        info.row.original.userOverride?.() ?? <User user={info.row.original} />,
+      cell: (info) => userOverride?.() ?? <User user={info.row.original} />,
       meta: {
         cellMeta: () => ({ class: "w-full" }),
       },
     }),
     defineColumn("wpm", {
       header: format.typingSpeedUnit,
+
       cell: (info) =>
-        format.typingSpeed(info.getValue(), { showDecimalPlaces: true }),
+        wrapWithHeader(
+          format.typingSpeed(info.getValue(), { showDecimalPlaces: true }),
+          format.typingSpeedUnit,
+          addHeader,
+        ),
       meta: {
         align: "right",
         breakpoint: "xl",
@@ -140,7 +168,11 @@ function getWpmColumns({
     defineColumn("acc", {
       header: "accuracy",
       cell: (info) =>
-        format.percentage(info.getValue(), { showDecimalPlaces: true }),
+        wrapWithHeader(
+          format.percentage(info.getValue(), { showDecimalPlaces: true }),
+          "accuracy",
+          addHeader,
+        ),
       meta: {
         align: "right",
         breakpoint: "xl",
@@ -176,7 +208,11 @@ function getWpmColumns({
     defineColumn("raw", {
       header: "raw",
       cell: (info) =>
-        format.typingSpeed(info.getValue(), { showDecimalPlaces: true }),
+        wrapWithHeader(
+          format.typingSpeed(info.getValue(), { showDecimalPlaces: true }),
+          "raw",
+          addHeader,
+        ),
       meta: {
         align: "right",
         breakpoint: "xl",
@@ -185,7 +221,11 @@ function getWpmColumns({
     defineColumn("consistency", {
       header: "consistency",
       cell: (info) =>
-        format.percentage(info.getValue(), { showDecimalPlaces: true }),
+        wrapWithHeader(
+          format.percentage(info.getValue(), { showDecimalPlaces: true }),
+          "consistency",
+          addHeader,
+        ),
       meta: {
         align: "right",
         breakpoint: "xl",
@@ -223,10 +263,22 @@ function getWpmColumns({
       header: "date",
       cell: (info) =>
         info.getValue() !== undefined ? (
-          <>
-            <div>{dateFormat(info.getValue(), "dd MMM yyyy")}</div>
-            <div class="text-sub">{dateFormat(info.getValue(), "HH:mm")}</div>
-          </>
+          addHeader ? (
+            wrapWithHeader(
+              dateFormat(info.getValue(), "dd MMM yyyy HH:mm"),
+              "date",
+              true,
+            )
+          ) : (
+            <>
+              <div class="text-xs">
+                {dateFormat(info.getValue(), "dd MMM yyyy")}
+              </div>
+              <div class="text-xs text-sub">
+                {dateFormat(info.getValue(), "HH:mm")}
+              </div>
+            </>
+          )
         ) : (
           ""
         ),
@@ -243,7 +295,15 @@ function getWpmColumns({
   return columns.map((it) => ({ ...it, enableSorting: false }));
 }
 
-function getXpColumns(friendsOnly: boolean): DataTableColumnDef<XpEntry>[] {
+function getXpColumns({
+  friendsOnly,
+  userOverride,
+  addHeader,
+}: {
+  friendsOnly: boolean;
+  userOverride?: Accessor<JSXElement>;
+  addHeader?: boolean;
+}): DataTableColumnDef<XpEntry>[] {
   const defineColumn = createColumnHelper<XpEntry>().accessor;
   const columns = [
     defineColumn("friendsRank", {
@@ -272,8 +332,7 @@ function getXpColumns(friendsOnly: boolean): DataTableColumnDef<XpEntry>[] {
     }),
     defineColumn("uid", {
       header: "name",
-      cell: (info) =>
-        info.row.original.userOverride?.() ?? <User user={info.row.original} />,
+      cell: (info) => userOverride?.() ?? <User user={info.row.original} />,
       meta: {
         cellMeta: () => ({ class: "w-full" }),
       },
@@ -281,9 +340,13 @@ function getXpColumns(friendsOnly: boolean): DataTableColumnDef<XpEntry>[] {
     defineColumn("totalXp", {
       header: "wpm",
       cell: (info) =>
-        info.getValue() < 1000
-          ? info.getValue()
-          : abbreviateNumber(info.getValue()),
+        wrapWithHeader(
+          info.getValue() < 1000
+            ? info.getValue().toFixed(0)
+            : abbreviateNumber(info.getValue()),
+          "xp gained",
+          addHeader,
+        ),
       meta: {
         align: "right",
       },
@@ -291,7 +354,11 @@ function getXpColumns(friendsOnly: boolean): DataTableColumnDef<XpEntry>[] {
     defineColumn("timeTypedSeconds", {
       header: "time typed",
       cell: (info) =>
-        secondsToString(Math.round(info.getValue()), true, true, ":"),
+        wrapWithHeader(
+          secondsToString(Math.round(info.getValue()), true, true, ":"),
+          "time typed",
+          addHeader,
+        ),
       meta: {
         align: "right",
       },
@@ -301,10 +368,22 @@ function getXpColumns(friendsOnly: boolean): DataTableColumnDef<XpEntry>[] {
       header: "date",
       cell: (info) =>
         info.getValue() !== undefined ? (
-          <>
-            <div>{dateFormat(info.getValue(), "dd MMM yyyy")}</div>
-            <div class="text-sub">{dateFormat(info.getValue(), "HH:mm")}</div>
-          </>
+          addHeader ? (
+            wrapWithHeader(
+              dateFormat(info.getValue(), "dd MMM yyyy HH:mm"),
+              "last activity",
+              true,
+            )
+          ) : (
+            <>
+              <div class="text-xs">
+                {dateFormat(info.getValue(), "dd MMM yyyy")}
+              </div>
+              <div class="text-xs text-sub">
+                {dateFormat(info.getValue(), "HH:mm")}
+              </div>
+            </>
+          )
         ) : (
           ""
         ),
@@ -336,3 +415,18 @@ function getXpColumns(friendsOnly: boolean): DataTableColumnDef<XpEntry>[] {
 function User(props: { user: { name: string } }): JSXElement {
   return <div>{props.user.name}</div>;
 }
+
+function wrapWithHeader(
+  value: string,
+  header: string,
+  enabled?: boolean,
+): string | JSXElement {
+  return enabled ? (
+    <>
+      <div class="text-xs text-sub">{header}</div>
+      <div>{value}</div>
+    </>
+  ) : (
+    value
+  );
+}
diff --git a/frontend/src/ts/components/pages/leaderboard/UserRank.tsx b/frontend/src/ts/components/pages/leaderboard/UserRank.tsx
index 8dfd618f39f6..51a45239ad4c 100644
--- a/frontend/src/ts/components/pages/leaderboard/UserRank.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/UserRank.tsx
@@ -4,7 +4,6 @@ import {
 } from "@monkeytype/schemas/leaderboards";
 import { createMemo, JSXElement, Show } from "solid-js";
 
-import { bp } from "../../../signals/breakpoints";
 import { getConfig } from "../../../signals/config";
 import { Formatting } from "../../../utils/format";
 import { LoadingCircle } from "../../common/LoadingCircle";
@@ -36,7 +35,7 @@ export function UserRank(props: {
     if (rank === 1) {
       percentileString = "GOAT";
     }
-    return () => (
+    return (
       <>
         <div>You ({percentileString})</div>
         <div class="text-xs text-sub">( = since you last checked)</div>
@@ -71,12 +70,11 @@ export function UserRank(props: {
             entries={[
               {
                 ...props.data,
-                userOverride,
               } as TableEntry,
             ]}
             friendsOnly={props.friendsOnly}
-            userOnly={true}
-            hideHeader={!bp().xl || undefined}
+            userOverride={userOverride}
+            hideHeader={true}
           />
         </Show>
       </Show>

From 6ba3635572d3b830e183b4302b9377efe6f66a9a Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sun, 8 Feb 2026 23:23:58 +0100
Subject: [PATCH 19/26] lb memory, not the bestg

---
 frontend/src/ts/ape/server-configuration.ts   |  1 +
 .../pages/leaderboard/LeaderboardPage.tsx     | 54 +++++++++++++++++--
 .../components/pages/leaderboard/Sidebar.tsx  |  2 +
 .../components/pages/leaderboard/UserRank.tsx | 40 ++++++++++----
 4 files changed, 82 insertions(+), 15 deletions(-)

diff --git a/frontend/src/ts/ape/server-configuration.ts b/frontend/src/ts/ape/server-configuration.ts
index cb7c3864e8e1..61480e6fbcc0 100644
--- a/frontend/src/ts/ape/server-configuration.ts
+++ b/frontend/src/ts/ape/server-configuration.ts
@@ -27,6 +27,7 @@ export async function sync(): Promise<void> {
       queryFn: fetch,
       queryKey,
       staleTime,
+      gcTime: staleTime,
     });
     resolve(true);
   } catch (e) {
diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
index a80f092de7a2..86f067f149a7 100644
--- a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
@@ -2,6 +2,7 @@ import { useQuery } from "@tanstack/solid-query";
 import { createEffect, createSignal, JSXElement, Show } from "solid-js";
 import { createStore } from "solid-js/store";
 
+import { getSnapshot, updateLbMemory } from "../../../db";
 import { queryClient } from "../../../queries";
 import {
   getLeaderboardQueryOptions,
@@ -38,11 +39,6 @@ export function LeaderboardPage(): JSXElement {
   const [page, setPage] = createSignal(0);
   const [scrollToUser, setScrollToUser] = createSignal(false);
 
-  const onSelectionChange = (selection: Selection): void => {
-    setSelection(selection);
-    setPage(0);
-  };
-
   createEffect(() => {
     //TODO fetch previous page as well, check boundaries
     if (isOpen()) {
@@ -68,6 +64,30 @@ export function LeaderboardPage(): JSXElement {
     enabled: isLoggedIn() && isOpen(),
   }));
 
+  const onSelectionChange = (newSelection: Selection): void => {
+    //TODO: find a better place to update
+    if (
+      rank.data !== undefined &&
+      rank.data !== null &&
+      selection !== undefined &&
+      selection.type === "allTime"
+    ) {
+      const diff = getLbMemoryDifference(selection, rank.data.rank);
+
+      if (diff !== 0) {
+        void updateLbMemory(
+          "time",
+          selection.mode2,
+          "english",
+          rank.data.rank,
+          true,
+        );
+      }
+    }
+    setSelection(newSelection);
+    setPage(0);
+  };
+
   const userPage = (): number | undefined => {
     const userRank = rank.data?.friendsRank ?? rank.data?.rank;
     if (userRank === undefined) return undefined;
@@ -101,6 +121,10 @@ export function LeaderboardPage(): JSXElement {
                       ? (query.data.minWpm as number)
                       : undefined
                   }
+                  memoryDifference={getLbMemoryDifference(
+                    selection,
+                    data?.rank,
+                  )}
                 />
               )}
             </AsyncContent>
@@ -135,6 +159,26 @@ export function LeaderboardPage(): JSXElement {
   );
 }
 
+function getLbMemoryDifference(
+  selection: Selection,
+  currentRank: number | undefined,
+): number | undefined {
+  if (
+    selection.type !== "allTime" ||
+    selection.mode !== "time" ||
+    selection.language !== "english" ||
+    selection.friendsOnly ||
+    currentRank === undefined
+  ) {
+    return undefined;
+  }
+  const oldRank =
+    getSnapshot()?.lbMemory?.time?.[selection.mode2]?.english ?? 0;
+  const diff = oldRank - currentRank;
+
+  return diff;
+}
+
 function prefetch(): void {
   void queryClient.prefetchQuery(
     getLeaderboardQueryOptions({
diff --git a/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx b/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx
index 5817e228548e..fee2c62bcc74 100644
--- a/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx
@@ -154,6 +154,8 @@ function normalizeSelection(
   let { mode, mode2, language } = draft;
   const validModes = valid[draft.type];
 
+  if (valid === undefined) throw new Error("no valid leaderboards");
+
   if (mode === null || validModes[mode] === undefined) {
     const firstMode = Object.keys(validModes).sort()[0] as Mode | undefined;
     if (!firstMode) {
diff --git a/frontend/src/ts/components/pages/leaderboard/UserRank.tsx b/frontend/src/ts/components/pages/leaderboard/UserRank.tsx
index 51a45239ad4c..02faab6d1da0 100644
--- a/frontend/src/ts/components/pages/leaderboard/UserRank.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/UserRank.tsx
@@ -2,10 +2,11 @@ import {
   LeaderboardEntry,
   XpLeaderboardEntry,
 } from "@monkeytype/schemas/leaderboards";
-import { createMemo, JSXElement, Show } from "solid-js";
+import { createMemo, JSXElement, Match, Show, Switch } from "solid-js";
 
 import { getConfig } from "../../../signals/config";
 import { Formatting } from "../../../utils/format";
+import { Fa } from "../../common/Fa";
 import { LoadingCircle } from "../../common/LoadingCircle";
 
 import { Table, TableEntry } from "./Table";
@@ -16,15 +17,16 @@ export function UserRank(props: {
   minWpm?: number;
   friendsOnly: boolean;
   total: number | undefined;
+  memoryDifference: number | undefined;
 }): JSXElement {
   const format = createMemo(() => new Formatting(getConfig));
-  const userOverride = createMemo(() => {
+  const userOverride = (): JSXElement => {
     if (
       props.data === undefined ||
       props.data === null ||
       props.total === undefined
     ) {
-      return <div>no data</div>;
+      return "";
     }
     const rank = props.friendsOnly
       ? (props.data.friendsRank as number)
@@ -35,13 +37,35 @@ export function UserRank(props: {
     if (rank === 1) {
       percentileString = "GOAT";
     }
+
     return (
       <>
         <div>You ({percentileString})</div>
-        <div class="text-xs text-sub">( = since you last checked)</div>
+        <div class="text-xs text-sub">
+          {" "}
+          <Show when={props.memoryDifference !== undefined}>
+            ({" "}
+            <Switch>
+              <Match when={props.memoryDifference === 0}>=</Match>
+              <Match when={(props.memoryDifference as number) > 0}>
+                <>
+                  <Fa icon="fa-angle-up" fixedWidth />
+                  {Math.abs(props.memoryDifference as number)}
+                </>
+              </Match>
+              <Match when={(props.memoryDifference as number) < 0}>
+                <>
+                  <Fa icon="fa-angle-down" fixedWidth />
+                  {Math.abs(props.memoryDifference as number)}
+                </>
+              </Match>
+            </Switch>{" "}
+            since you last checked)
+          </Show>
+        </div>
       </>
     );
-  });
+  };
   return (
     <div class="flex rounded bg-sub-alt">
       <Show
@@ -67,11 +91,7 @@ export function UserRank(props: {
         >
           <Table
             type={props.type}
-            entries={[
-              {
-                ...props.data,
-              } as TableEntry,
-            ]}
+            entries={[props.data as TableEntry]}
             friendsOnly={props.friendsOnly}
             userOverride={userOverride}
             hideHeader={true}

From 2f29d7e35352ae0fec30ecaa980099e4cf5019c8 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Mon, 9 Feb 2026 12:08:03 +0100
Subject: [PATCH 20/26] move server-configuration query

---
 frontend/src/ts/ape/server-configuration.ts   | 26 ++++--------------
 .../src/ts/queries/server-configuration.ts    | 27 +++++++++++++++++++
 2 files changed, 32 insertions(+), 21 deletions(-)
 create mode 100644 frontend/src/ts/queries/server-configuration.ts

diff --git a/frontend/src/ts/ape/server-configuration.ts b/frontend/src/ts/ape/server-configuration.ts
index 61480e6fbcc0..88be5df315c6 100644
--- a/frontend/src/ts/ape/server-configuration.ts
+++ b/frontend/src/ts/ape/server-configuration.ts
@@ -1,9 +1,7 @@
 import { Configuration } from "@monkeytype/schemas/configuration";
-import Ape from ".";
 import { promiseWithResolvers } from "../utils/misc";
 import { queryClient } from "../queries";
-const staleTime = 1000 * 60 * 60;
-const queryKey = ["serverConfiguration"];
+import { getServerConfigurationQueryOptions } from "../queries/server-configuration";
 
 const {
   promise: configurationPromise,
@@ -18,30 +16,16 @@ export function getServerConfiguration(): Configuration | undefined {
 }
 
 export function get(): Configuration | undefined {
-  return queryClient.getQueryData(queryKey);
+  return queryClient.getQueryData(
+    getServerConfigurationQueryOptions().queryKey,
+  );
 }
 
 export async function sync(): Promise<void> {
   try {
-    await queryClient.fetchQuery({
-      queryFn: fetch,
-      queryKey,
-      staleTime,
-      gcTime: staleTime,
-    });
+    await queryClient.fetchQuery(getServerConfigurationQueryOptions());
     resolve(true);
   } catch (e) {
     reject(e);
   }
 }
-
-async function fetch(): Promise<Configuration> {
-  const response = await Ape.configuration.get();
-
-  if (response.status !== 200) {
-    const message = `Could not fetch configuration: ${response.body.message}`;
-    console.error(message);
-    throw new Error(message);
-  }
-  return response.body.data;
-}
diff --git a/frontend/src/ts/queries/server-configuration.ts b/frontend/src/ts/queries/server-configuration.ts
new file mode 100644
index 000000000000..c4cd1a9115b1
--- /dev/null
+++ b/frontend/src/ts/queries/server-configuration.ts
@@ -0,0 +1,27 @@
+import { queryOptions } from "@tanstack/solid-query";
+import { baseKey } from "./keys";
+import Ape from "../ape";
+
+const queryKeys = {
+  root: () => baseKey("serverConfiguration"),
+};
+
+const staleTime = 1000 * 60 * 60;
+
+// oxlint-disable-next-line typescript/explicit-function-return-type
+export const getServerConfigurationQueryOptions = () =>
+  queryOptions({
+    queryKey: queryKeys.root(),
+    queryFn: async () => {
+      const response = await Ape.configuration.get();
+
+      if (response.status !== 200) {
+        throw new Error(
+          `Could not fetch configuration: ${response.body.message}`,
+        );
+      }
+      return response.body.data;
+    },
+    staleTime,
+    gcTime: Infinity,
+  });

From 15d5b448c454ce9d5992116d74cf833d16c9519b Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Mon, 9 Feb 2026 15:11:39 +0100
Subject: [PATCH 21/26] add url params

---
 .../pages/leaderboard/LeaderboardPage.tsx     | 224 ++++++++++++++----
 .../components/pages/leaderboard/Sidebar.tsx  |  48 ++--
 .../pages/leaderboard/TableNavigation.tsx     |   9 +-
 .../src/ts/controllers/page-controller.ts     |  63 +++--
 frontend/src/ts/pages/page.ts                 |   2 +-
 frontend/src/ts/queries/leaderboards.ts       |  41 ++--
 frontend/src/ts/signals/core.ts               |  10 +-
 7 files changed, 278 insertions(+), 119 deletions(-)

diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
index 86f067f149a7..255f1e8e47f2 100644
--- a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
@@ -1,15 +1,31 @@
+import { LanguageSchema } from "@monkeytype/schemas/languages";
+import { ModeSchema } from "@monkeytype/schemas/shared";
 import { useQuery } from "@tanstack/solid-query";
-import { createEffect, createSignal, JSXElement, Show } from "solid-js";
-import { createStore } from "solid-js/store";
+import {
+  Accessor,
+  createEffect,
+  createSignal,
+  JSXElement,
+  Setter,
+  Show,
+} from "solid-js";
+import { z } from "zod";
 
 import { getSnapshot, updateLbMemory } from "../../../db";
+import { useLocalStorage } from "../../../hooks/useLocalStorage";
+import { PageWithUrlParams } from "../../../pages/page";
 import { queryClient } from "../../../queries";
 import {
   getLeaderboardQueryOptions,
   getRankQueryOptions,
   Selection,
+  SelectionSchema,
 } from "../../../queries/leaderboards";
-import { getActivePage, isLoggedIn } from "../../../signals/core";
+import {
+  getActivePage,
+  getCurrentPage,
+  isLoggedIn,
+} from "../../../signals/core";
 import { qsr } from "../../../utils/dom";
 import AsyncContent from "../../common/AsyncContent";
 
@@ -19,24 +35,34 @@ import { TableNavigation } from "./TableNavigation";
 import { Title } from "./Title";
 import { UserRank } from "./UserRank";
 
-//TODO update page name
-qsr("nav .view-about").on("mouseenter", () => {
+//TODO change
+const pageName = "about";
+
+export const LeaderboardUrlParamsSchema = z
+  .object({
+    type: z.enum(["allTime", "daily", "weekly"]),
+    mode: ModeSchema.optional(),
+    mode2: z.string().optional(),
+    language: LanguageSchema.optional(),
+    yesterday: z.boolean().optional(),
+    lastWeek: z.boolean().optional(),
+    friendsOnly: z.boolean().optional(),
+    page: z.number().optional(),
+    goToUserPage: z.boolean().optional(),
+  })
+  .partial();
+type LeaderboardUrlParams = z.infer<typeof LeaderboardUrlParamsSchema>;
+
+qsr(`nav .view-${pageName}`).on("mouseenter", () => {
   prefetch();
 });
 
+const [selection, setSelection] = lsSelection();
+const [page, setPage] = createSignal(0);
+
 export function LeaderboardPage(): JSXElement {
-  //TODO update page
-  const isOpen = (): boolean => getActivePage() === "about";
-  const [selection, setSelection] = createStore<Selection>({
-    type: "allTime",
-    mode: "time",
-    mode2: "15",
-    language: "english",
-    friendsOnly: false,
-    previous: false,
-  });
+  const isOpen = (): boolean => getActivePage() === pageName;
 
-  const [page, setPage] = createSignal(0);
   const [scrollToUser, setScrollToUser] = createSignal(false);
 
   createEffect(() => {
@@ -44,46 +70,37 @@ export function LeaderboardPage(): JSXElement {
     if (isOpen()) {
       void queryClient.prefetchQuery(
         getLeaderboardQueryOptions({
-          ...selection,
+          ...selection(),
           page: page() + 1,
         }),
       );
     }
   });
 
+  createEffect(() => {
+    //update url after the data is loaded
+    if (query.isSuccess) updateGetParameters(selection(), page());
+  });
+
+  createEffect(() => {
+    //update url after the data is loaded
+    if (rank.isSuccess) syncLbMemory();
+  });
+
   const query = useQuery(() => ({
     ...getLeaderboardQueryOptions({
-      ...selection,
+      ...selection(),
       page: page() ?? 0,
     }),
     enabled: isOpen(),
   }));
 
   const rank = useQuery(() => ({
-    ...getRankQueryOptions(selection),
+    ...getRankQueryOptions(selection()),
     enabled: isLoggedIn() && isOpen(),
   }));
 
   const onSelectionChange = (newSelection: Selection): void => {
-    //TODO: find a better place to update
-    if (
-      rank.data !== undefined &&
-      rank.data !== null &&
-      selection !== undefined &&
-      selection.type === "allTime"
-    ) {
-      const diff = getLbMemoryDifference(selection, rank.data.rank);
-
-      if (diff !== 0) {
-        void updateLbMemory(
-          "time",
-          selection.mode2,
-          "english",
-          rank.data.rank,
-          true,
-        );
-      }
-    }
     setSelection(newSelection);
     setPage(0);
   };
@@ -99,22 +116,27 @@ export function LeaderboardPage(): JSXElement {
     <div class="content-grid grid">
       <div class="flex flex-col gap-8 lg:flex-row">
         <div class="w-full lg:w-60">
-          <Sidebar onSelect={onSelectionChange} />
+          <Sidebar selection={selection} onSelect={onSelectionChange} />
         </div>
 
         <div class="flex w-full flex-1 flex-col gap-4">
           <Title
-            selection={selection}
-            onPreviousSelect={() => setSelection("previous", (old) => !old)}
+            selection={selection()}
+            onPreviousSelect={() =>
+              setSelection((old) => ({
+                ...old,
+                previous: !old.previous,
+              }))
+            }
           />
 
           <Show when={isLoggedIn()}>
             <AsyncContent query={rank} alwaysShowContent>
               {(data) => (
                 <UserRank
-                  type={selection.type === "weekly" ? "xp" : "wpm"}
+                  type={selection().type === "weekly" ? "xp" : "wpm"}
                   data={data}
-                  friendsOnly={selection.friendsOnly}
+                  friendsOnly={selection().friendsOnly}
                   total={query.data?.count}
                   minWpm={
                     query.data && "minWpm" in query.data
@@ -122,7 +144,7 @@ export function LeaderboardPage(): JSXElement {
                       : undefined
                   }
                   memoryDifference={getLbMemoryDifference(
-                    selection,
+                    selection(),
                     data?.rank,
                   )}
                 />
@@ -131,7 +153,7 @@ export function LeaderboardPage(): JSXElement {
           </Show>
 
           <TableNavigation
-            type={selection.type}
+            type={selection().type}
             lastPage={Math.ceil((query.data?.count ?? 0) / 50)}
             currentPage={page()}
             onPageChange={setPage}
@@ -144,9 +166,9 @@ export function LeaderboardPage(): JSXElement {
             <AsyncContent query={query} alwaysShowContent>
               {(data) => (
                 <Table
-                  type={selection.type === "weekly" ? "xp" : "wpm"}
+                  type={selection().type === "weekly" ? "xp" : "wpm"}
                   entries={data?.entries ?? []}
-                  friendsOnly={selection.friendsOnly}
+                  friendsOnly={selection().friendsOnly}
                   scrollToUser={scrollToUser}
                   onScrolledToUser={() => setScrollToUser(false)}
                 />
@@ -157,6 +179,27 @@ export function LeaderboardPage(): JSXElement {
       </div>
     </div>
   );
+
+  function syncLbMemory(): void {
+    if (
+      rank.data !== undefined &&
+      rank.data !== null &&
+      selection !== undefined &&
+      selection().type === "allTime"
+    ) {
+      const diff = getLbMemoryDifference(selection(), rank.data.rank);
+
+      if (diff !== 0) {
+        void updateLbMemory(
+          "time",
+          selection().mode2 as string,
+          "english",
+          rank.data.rank,
+          true,
+        );
+      }
+    }
+  }
 }
 
 function getLbMemoryDifference(
@@ -179,6 +222,93 @@ function getLbMemoryDifference(
   return diff;
 }
 
+function lsSelection(): [Accessor<Selection>, Setter<Selection>] {
+  return useLocalStorage<Selection>({
+    key: "leaderboardSelector",
+    schema: SelectionSchema,
+    fallback: {
+      type: "allTime",
+      mode: "time",
+      mode2: "15",
+      language: "english",
+      friendsOnly: false,
+      previous: false,
+    },
+    migrate: (value) => {
+      if (value === null || typeof value !== "object") {
+        return {} as Selection;
+      }
+      const result = value as Selection;
+      if ("lastWeek" in result) {
+        delete result["lastWeek"];
+        result.previous = true;
+      } else if ("yesterday" in result) {
+        delete result["yesterday"];
+        result.previous = true;
+      }
+
+      if (result.type === "weekly") {
+        delete result.mode;
+        delete result.mode2;
+        delete result.language;
+      }
+      return result;
+    },
+  });
+}
+
+function updateGetParameters(selection: Selection, page: number): void {
+  const params: LeaderboardUrlParams = {
+    type: selection.type,
+    mode: selection.mode,
+    mode2: selection.mode2,
+    language: selection.language,
+    page: page + 1,
+  };
+
+  if (selection.type === "weekly" && selection.previous) {
+    params.lastWeek = true;
+  }
+  if (selection.type === "daily" && selection.previous) {
+    params.yesterday = true;
+  }
+  if (selection.friendsOnly) {
+    params.friendsOnly = true;
+  }
+  // oxlint-disable-next-line typescript/no-explicit-any
+  const currentPage = getCurrentPage() as PageWithUrlParams<unknown, any>;
+  if (currentPage !== undefined && currentPage.id === pageName) {
+    currentPage.setUrlParams(params);
+  }
+}
+
+export function readGetParameters(
+  params: LeaderboardUrlParams | undefined,
+): void {
+  if (params === undefined || params.type === undefined) return;
+
+  let newSelection: Partial<Selection> = {
+    type: params.type,
+    friendsOnly: params.friendsOnly ?? false,
+  };
+
+  if (params.type === "weekly") {
+    newSelection.previous = params.lastWeek ?? false;
+  } else {
+    newSelection.mode = params.mode ?? "time";
+    newSelection.mode2 = params.mode2 ?? "15";
+    newSelection.language = params.language ?? "english";
+    newSelection.previous =
+      (params.type === "daily" && params.yesterday) ?? false;
+  }
+
+  setSelection({ ...selection(), ...newSelection } as Selection);
+
+  if (params.page !== undefined) {
+    setPage(params.page - 1);
+  }
+}
+
 function prefetch(): void {
   void queryClient.prefetchQuery(
     getLeaderboardQueryOptions({
diff --git a/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx b/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx
index fee2c62bcc74..e2bc6df1b790 100644
--- a/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx
@@ -1,7 +1,6 @@
 import { Language } from "@monkeytype/schemas/languages";
 import { Mode } from "@monkeytype/schemas/shared";
-import { For, JSXElement, Show } from "solid-js";
-import { createStore } from "solid-js/store";
+import { Accessor, For, JSXElement, Show } from "solid-js";
 
 import { getServerConfiguration } from "../../../ape/server-configuration";
 import { Selection } from "../../../queries/leaderboards";
@@ -22,29 +21,19 @@ type ValidLeaderboards = {
 export type ModeSelect = Pick<Selection, "mode" | "mode2">;
 
 export function Sidebar(props: {
+  selection: Accessor<Selection>;
   onSelect: (selection: Selection) => void;
 }): JSXElement {
-  const [selection, setSelection] = createStore<Selection>({
-    type: "allTime",
-    mode: "time",
-    mode2: "15",
-    language: "english",
-    previous: false,
-    friendsOnly: false,
-  });
-
   const validLeaderboards = (): ValidLeaderboards => getValidLeaderboards();
 
   function updateSelection(patch: Partial<Selection>): void {
-    setSelection((prev) => {
-      const newValue = normalizeSelection(
+    props.onSelect(
+      normalizeSelection(
         //@ts-expect-error this is fine
-        { ...prev, ...patch },
+        { ...props.selection(), ...patch },
         validLeaderboards(),
-      );
-      props.onSelect(newValue);
-      return newValue;
-    });
+      ),
+    );
   }
 
   function selectType(type: Selection["type"]): void {
@@ -65,7 +54,7 @@ export function Sidebar(props: {
   return (
     <>
       <Group
-        selected={selection.type}
+        selected={props.selection().type}
         onSelect={selectType}
         items={[
           {
@@ -79,7 +68,7 @@ export function Sidebar(props: {
       />
       <Show when={isLoggedIn()}>
         <Group
-          selected={selection.friendsOnly}
+          selected={props.selection().friendsOnly}
           onSelect={selectFriendsOnly}
           items={[
             { id: false, text: "everyone", icon: "fa-users" },
@@ -87,24 +76,27 @@ export function Sidebar(props: {
           ]}
         />
       </Show>
-      <Show when={selection.type !== "weekly"}>
+      <Show when={props.selection().type !== "weekly"}>
         <Group
-          selected={{ mode: selection.mode, mode2: selection.mode2 }}
+          selected={{
+            mode: props.selection().mode,
+            mode2: props.selection().mode2,
+          }}
           onSelect={selectMode}
           items={getModeButtons(
-            validLeaderboards()[selection.type],
-            selection.language as Language,
+            validLeaderboards()[props.selection().type],
+            props.selection().language as Language,
           )}
         />
       </Show>
-      <Show when={selection.type === "daily"}>
+      <Show when={props.selection().type === "daily"}>
         <Group
-          selected={selection.language as Language}
+          selected={props.selection().language as Language}
           onSelect={selectLanguage}
           items={getLanguageButtons(
             validLeaderboards().daily,
-            selection.mode as Mode,
-            selection.mode2 as string,
+            props.selection().mode as Mode,
+            props.selection().mode2 as string,
           )}
         />
       </Show>
diff --git a/frontend/src/ts/components/pages/leaderboard/TableNavigation.tsx b/frontend/src/ts/components/pages/leaderboard/TableNavigation.tsx
index 536f6f7bfe31..cc5c3816a94a 100644
--- a/frontend/src/ts/components/pages/leaderboard/TableNavigation.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/TableNavigation.tsx
@@ -89,14 +89,17 @@ function Navigation(props: {
         />
       </Show>
       <Button
-        onClick={() => props.onPageChange((old) => old - 1)}
+        onClick={() =>
+          props.onPageChange((old) => Math.min(old, props.lastPage) - 1)
+        }
         fa={{ icon: "fa-chevron-left", fixedWidth: true }}
         disabled={props.currentPage === 0}
       />
       <Button
-        onClick={() => props.onPageChange((old) => old - 1)}
+        //TODO
+        onClick={() => props.onPageChange(() => 7)}
         fa={{ icon: "fa-hashtag", fixedWidth: true }}
-        disabled={true} //TODO
+        disabled={true}
       />
       <Button
         onClick={() => props.onPageChange((old) => old + 1)}
diff --git a/frontend/src/ts/controllers/page-controller.ts b/frontend/src/ts/controllers/page-controller.ts
index fa0d75ee36a6..b5ea4990a8c7 100644
--- a/frontend/src/ts/controllers/page-controller.ts
+++ b/frontend/src/ts/controllers/page-controller.ts
@@ -1,23 +1,34 @@
-import * as Misc from "../utils/misc";
-import * as Strings from "../utils/strings";
-import { getActivePage, setActivePage } from "../signals/core";
-import * as Settings from "../pages/settings";
+import * as AdController from "../controllers/ad-controller";
+import * as Page404 from "../pages/404";
 import * as Account from "../pages/account";
-import * as PageTest from "../pages/test";
-import * as PageLogin from "../pages/login";
+import * as PageAccountSettings from "../pages/account-settings";
+import * as Friends from "../pages/friends";
+import * as PageLeaderboards from "../pages/leaderboards";
 import * as PageLoading from "../pages/loading";
+import * as PageLogin from "../pages/login";
+import Page, {
+  LoadingOptions,
+  PageName,
+  PageWithUrlParams,
+  UrlParamsSchema,
+} from "../pages/page";
 import * as PageProfile from "../pages/profile";
 import * as PageProfileSearch from "../pages/profile-search";
-import * as Friends from "../pages/friends";
-import * as Page404 from "../pages/404";
-import * as PageLeaderboards from "../pages/leaderboards";
-import * as PageAccountSettings from "../pages/account-settings";
+import * as Settings from "../pages/settings";
+import * as PageTest from "../pages/test";
+import { getActivePage, setCurrentPage } from "../signals/core";
 import * as PageTransition from "../states/page-transition";
-import * as AdController from "../controllers/ad-controller";
 import * as Focus from "../test/focus";
-import Page, { PageName, LoadingOptions } from "../pages/page";
 import { onDOMReady, qsa, qsr } from "../utils/dom";
+import * as Misc from "../utils/misc";
 import * as Skeleton from "../utils/skeleton";
+import * as Strings from "../utils/strings";
+
+import { z } from "zod";
+import {
+  LeaderboardUrlParamsSchema,
+  readGetParameters as lbReadGetParameters,
+} from "../components/pages/leaderboard/LeaderboardPage";
 
 type ChangeOptions = {
   force?: boolean;
@@ -30,7 +41,12 @@ const pages = {
   loading: PageLoading.page,
   test: PageTest.page,
   settings: Settings.page,
-  about: solidPage("about"),
+  about: solidPage("about", {
+    urlParamsSchema: LeaderboardUrlParamsSchema,
+    beforeShow: async (options) => {
+      lbReadGetParameters(options.urlParams);
+    },
+  }),
   account: Account.page,
   login: PageLogin.page,
   profile: PageProfile.page,
@@ -246,7 +262,7 @@ export async function change(
     }
 
     pages.loading.element.addClass("active");
-    setActivePage(pages.loading.id);
+    setCurrentPage(pages.loading);
     Focus.set(false);
     PageLoading.showError();
     PageLoading.updateText(
@@ -260,7 +276,7 @@ export async function change(
 
   //between
   updateTitle(nextPage);
-  setActivePage(nextPage.id);
+  setCurrentPage(nextPage);
   updateOpenGraphUrl();
   Focus.set(false);
 
@@ -295,23 +311,32 @@ export async function change(
   return true;
 }
 
-function solidPage(
+// oxlint-disable-next-line typescript/no-explicit-any
+function solidPage<U extends UrlParamsSchema | never>(
   id: PageName,
-  props?: { path?: string; loadingOptions?: LoadingOptions },
+  props?: {
+    path?: string;
+    loadingOptions?: LoadingOptions;
+    urlParamsSchema?: U;
+    beforeShow?: (options: { urlParams?: z.infer<U> }) => Promise<void>;
+  },
 ): Page<undefined> {
   const path = props?.path ?? `/${id}`;
   const internalId = `page${Strings.capitalizeFirstLetter(id)}`;
   onDOMReady(() => Skeleton.save(internalId));
-  return new Page({
+  return new PageWithUrlParams({
     id,
     path,
     element: qsr(`#${internalId}`),
-    beforeShow: async () => {
+    beforeShow: async (options) => {
       Skeleton.append(internalId, "main");
+      await props?.beforeShow?.(options);
     },
     afterHide: async () => {
       Skeleton.remove(internalId);
     },
     loadingOptions: props?.loadingOptions,
+    //@ts-expect-error ignore for now
+    urlParamsSchema: props?.urlParamsSchema,
   });
 }
diff --git a/frontend/src/ts/pages/page.ts b/frontend/src/ts/pages/page.ts
index 44032b6cc3f6..49d6a314183a 100644
--- a/frontend/src/ts/pages/page.ts
+++ b/frontend/src/ts/pages/page.ts
@@ -115,7 +115,7 @@ type OptionsWithUrlParams<T, U extends UrlParamsSchema> = Options<T> & {
   urlParams?: z.infer<U>;
 };
 
-type UrlParamsSchema = z.ZodObject<Record<string, z.ZodTypeAny>>;
+export type UrlParamsSchema = z.ZodObject<Record<string, z.ZodTypeAny>>;
 type PagePropertiesWithUrlParams<T, U extends UrlParamsSchema> = Omit<
   PageProperties<T>,
   "beforeShow"
diff --git a/frontend/src/ts/queries/leaderboards.ts b/frontend/src/ts/queries/leaderboards.ts
index f333e42663f9..140209d985f7 100644
--- a/frontend/src/ts/queries/leaderboards.ts
+++ b/frontend/src/ts/queries/leaderboards.ts
@@ -2,29 +2,32 @@ import {
   GetLeaderboardQuery,
   GetLeaderboardRankQuery,
 } from "@monkeytype/contracts/leaderboards";
-import { Language } from "@monkeytype/schemas/languages";
-import { Mode } from "@monkeytype/schemas/shared";
+import { LanguageSchema } from "@monkeytype/schemas/languages";
+import { ModeSchema } from "@monkeytype/schemas/shared";
 import { QueryKey, queryOptions } from "@tanstack/solid-query";
+import { z } from "zod";
 import Ape from "../ape";
 
 export type LeaderboardType = Selection["type"];
-export type Selection =
-  | {
-      type: "weekly";
-      friendsOnly: boolean;
-      previous: boolean;
-      language?: never;
-      mode?: never;
-      mode2?: never;
-    }
-  | {
-      type: "daily" | "allTime";
-      mode: Mode;
-      mode2: string;
-      language: Language;
-      friendsOnly: boolean;
-      previous: boolean;
-    };
+const XpSelection = z.object({
+  type: z.literal("weekly"),
+  friendsOnly: z.boolean(),
+  previous: z.boolean(),
+  language: z.never().optional(),
+  mode: z.never().optional(),
+  mode2: z.never().optional(),
+});
+const WpmSelection = z.object({
+  type: z.enum(["daily", "allTime"]),
+  friendsOnly: z.boolean(),
+  previous: z.boolean(),
+  mode: ModeSchema,
+  mode2: z.string(),
+  language: LanguageSchema,
+});
+
+export const SelectionSchema = WpmSelection.or(XpSelection);
+export type Selection = z.infer<typeof SelectionSchema>;
 
 const queryKeys = {
   root: (options: Selection & { userSpecific?: true }) => [
diff --git a/frontend/src/ts/signals/core.ts b/frontend/src/ts/signals/core.ts
index 8614eda9e779..af2c5cb98e68 100644
--- a/frontend/src/ts/signals/core.ts
+++ b/frontend/src/ts/signals/core.ts
@@ -1,7 +1,13 @@
 import { createMemo, createSignal } from "solid-js";
-import { PageName } from "../pages/page";
+import Page, { PageName } from "../pages/page";
+
+export const [getCurrentPage, setCurrentPage] = createSignal<
+  Page<undefined> | undefined
+>(undefined);
+export const getActivePage = createMemo<PageName>(
+  () => getCurrentPage()?.id ?? "loading",
+);
 
-export const [getActivePage, setActivePage] = createSignal<PageName>("loading");
 export const [getVersion, setVersion] = createSignal<{
   text: string;
   isNew: boolean;

From 2faf95b16e3b5ed6b64b8822be77ceec8d955c15 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Tue, 10 Feb 2026 13:22:03 +0100
Subject: [PATCH 22/26] use serverConfigurationQuery, pass validModeRule to
 sidebar

---
 frontend/src/ts/ape/server-configuration.ts   |  4 --
 .../pages/leaderboard/LeaderboardPage.tsx     | 52 ++++++++++++-------
 .../components/pages/leaderboard/Sidebar.tsx  | 21 ++++----
 3 files changed, 44 insertions(+), 33 deletions(-)

diff --git a/frontend/src/ts/ape/server-configuration.ts b/frontend/src/ts/ape/server-configuration.ts
index 88be5df315c6..c63100950238 100644
--- a/frontend/src/ts/ape/server-configuration.ts
+++ b/frontend/src/ts/ape/server-configuration.ts
@@ -11,10 +11,6 @@ const {
 
 export { configurationPromise };
 
-export function getServerConfiguration(): Configuration | undefined {
-  return get();
-}
-
 export function get(): Configuration | undefined {
   return queryClient.getQueryData(
     getServerConfigurationQueryOptions().queryKey,
diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
index 255f1e8e47f2..2b6b4acf91ed 100644
--- a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
@@ -21,6 +21,7 @@ import {
   Selection,
   SelectionSchema,
 } from "../../../queries/leaderboards";
+import { getServerConfigurationQueryOptions } from "../../../queries/server-configuration";
 import {
   getActivePage,
   getCurrentPage,
@@ -36,7 +37,7 @@ import { Title } from "./Title";
 import { UserRank } from "./UserRank";
 
 //TODO change
-const pageName = "about";
+export const pageName = "about";
 
 export const LeaderboardUrlParamsSchema = z
   .object({
@@ -79,15 +80,15 @@ export function LeaderboardPage(): JSXElement {
 
   createEffect(() => {
     //update url after the data is loaded
-    if (query.isSuccess) updateGetParameters(selection(), page());
+    if (dataQuery.isSuccess) updateGetParameters(selection(), page());
   });
 
   createEffect(() => {
     //update url after the data is loaded
-    if (rank.isSuccess) syncLbMemory();
+    if (rankQuery.isSuccess) syncLbMemory();
   });
 
-  const query = useQuery(() => ({
+  const dataQuery = useQuery(() => ({
     ...getLeaderboardQueryOptions({
       ...selection(),
       page: page() ?? 0,
@@ -95,18 +96,23 @@ export function LeaderboardPage(): JSXElement {
     enabled: isOpen(),
   }));
 
-  const rank = useQuery(() => ({
+  const rankQuery = useQuery(() => ({
     ...getRankQueryOptions(selection()),
     enabled: isLoggedIn() && isOpen(),
   }));
 
+  const serverConfigurationQuery = useQuery(() => ({
+    ...getServerConfigurationQueryOptions(),
+    enabled: isOpen(),
+  }));
+
   const onSelectionChange = (newSelection: Selection): void => {
     setSelection(newSelection);
     setPage(0);
   };
 
   const userPage = (): number | undefined => {
-    const userRank = rank.data?.friendsRank ?? rank.data?.rank;
+    const userRank = rankQuery.data?.friendsRank ?? rankQuery.data?.rank;
     if (userRank === undefined) return undefined;
     const page = Math.ceil(userRank / 50) - 1;
     return page;
@@ -116,7 +122,15 @@ export function LeaderboardPage(): JSXElement {
     <div class="content-grid grid">
       <div class="flex flex-col gap-8 lg:flex-row">
         <div class="w-full lg:w-60">
-          <Sidebar selection={selection} onSelect={onSelectionChange} />
+          <AsyncContent query={serverConfigurationQuery}>
+            {(config) => (
+              <Sidebar
+                selection={selection}
+                onSelect={onSelectionChange}
+                validModeRules={config.dailyLeaderboards.validModeRules ?? []}
+              />
+            )}
+          </AsyncContent>
         </div>
 
         <div class="flex w-full flex-1 flex-col gap-4">
@@ -131,16 +145,16 @@ export function LeaderboardPage(): JSXElement {
           />
 
           <Show when={isLoggedIn()}>
-            <AsyncContent query={rank} alwaysShowContent>
+            <AsyncContent query={rankQuery} alwaysShowContent>
               {(data) => (
                 <UserRank
                   type={selection().type === "weekly" ? "xp" : "wpm"}
                   data={data}
                   friendsOnly={selection().friendsOnly}
-                  total={query.data?.count}
+                  total={dataQuery.data?.count}
                   minWpm={
-                    query.data && "minWpm" in query.data
-                      ? (query.data.minWpm as number)
+                    dataQuery.data && "minWpm" in dataQuery.data
+                      ? (dataQuery.data.minWpm as number)
                       : undefined
                   }
                   memoryDifference={getLbMemoryDifference(
@@ -154,16 +168,18 @@ export function LeaderboardPage(): JSXElement {
 
           <TableNavigation
             type={selection().type}
-            lastPage={Math.ceil((query.data?.count ?? 0) / 50)}
+            lastPage={Math.ceil((dataQuery.data?.count ?? 0) / 50)}
             currentPage={page()}
             onPageChange={setPage}
             userPage={userPage()}
             onScrollToUser={setScrollToUser}
             isLoading={
-              query.isLoading || query.isFetching || query.isRefetching
+              dataQuery.isLoading ||
+              dataQuery.isFetching ||
+              dataQuery.isRefetching
             }
           >
-            <AsyncContent query={query} alwaysShowContent>
+            <AsyncContent query={dataQuery} alwaysShowContent>
               {(data) => (
                 <Table
                   type={selection().type === "weekly" ? "xp" : "wpm"}
@@ -182,19 +198,19 @@ export function LeaderboardPage(): JSXElement {
 
   function syncLbMemory(): void {
     if (
-      rank.data !== undefined &&
-      rank.data !== null &&
+      rankQuery.data !== undefined &&
+      rankQuery.data !== null &&
       selection !== undefined &&
       selection().type === "allTime"
     ) {
-      const diff = getLbMemoryDifference(selection(), rank.data.rank);
+      const diff = getLbMemoryDifference(selection(), rankQuery.data.rank);
 
       if (diff !== 0) {
         void updateLbMemory(
           "time",
           selection().mode2 as string,
           "english",
-          rank.data.rank,
+          rankQuery.data.rank,
           true,
         );
       }
diff --git a/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx b/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx
index e2bc6df1b790..73c121cd6782 100644
--- a/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/Sidebar.tsx
@@ -1,8 +1,8 @@
+import { ValidModeRule } from "@monkeytype/schemas/configuration";
 import { Language } from "@monkeytype/schemas/languages";
 import { Mode } from "@monkeytype/schemas/shared";
 import { Accessor, For, JSXElement, Show } from "solid-js";
 
-import { getServerConfiguration } from "../../../ape/server-configuration";
 import { Selection } from "../../../queries/leaderboards";
 import { isLoggedIn } from "../../../signals/core";
 import { FaSolidIcon } from "../../../types/font-awesome";
@@ -23,15 +23,14 @@ export type ModeSelect = Pick<Selection, "mode" | "mode2">;
 export function Sidebar(props: {
   selection: Accessor<Selection>;
   onSelect: (selection: Selection) => void;
+  validModeRules: ValidModeRule[];
 }): JSXElement {
-  const validLeaderboards = (): ValidLeaderboards => getValidLeaderboards();
-
   function updateSelection(patch: Partial<Selection>): void {
     props.onSelect(
       normalizeSelection(
         //@ts-expect-error this is fine
         { ...props.selection(), ...patch },
-        validLeaderboards(),
+        getValidLeaderboards(props.validModeRules),
       ),
     );
   }
@@ -76,6 +75,7 @@ export function Sidebar(props: {
           ]}
         />
       </Show>
+
       <Show when={props.selection().type !== "weekly"}>
         <Group
           selected={{
@@ -84,7 +84,7 @@ export function Sidebar(props: {
           }}
           onSelect={selectMode}
           items={getModeButtons(
-            validLeaderboards()[props.selection().type],
+            getValidLeaderboards(props.validModeRules)[props.selection().type],
             props.selection().language as Language,
           )}
         />
@@ -94,7 +94,7 @@ export function Sidebar(props: {
           selected={props.selection().language as Language}
           onSelect={selectLanguage}
           items={getLanguageButtons(
-            validLeaderboards().daily,
+            getValidLeaderboards(props.validModeRules).daily,
             props.selection().mode as Mode,
             props.selection().mode2 as string,
           )}
@@ -213,12 +213,11 @@ function getLanguageButtons(
     icon: "fa-globe",
   }));
 }
-function getValidLeaderboards(): ValidLeaderboards {
-  const dailyRulesConfig =
-    getServerConfiguration()?.dailyLeaderboards.validModeRules ?? [];
-
+function getValidLeaderboards(
+  validModeRules: ValidModeRule[],
+): ValidLeaderboards {
   //a rule can contain multiple values. create a flat list out of them
-  const dailyRules = dailyRulesConfig.flatMap((rule) => {
+  const dailyRules = validModeRules.flatMap((rule) => {
     const languages = convertRuleOption(rule.language) as Language[];
     const mode2List = convertRuleOption(rule.mode2);
 

From b48175d2100494e3e8e54a05159522b68700e1c2 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Tue, 10 Feb 2026 13:43:44 +0100
Subject: [PATCH 23/26] add minTyping, banned, optOut to UserRank

---
 .../pages/leaderboard/LeaderboardPage.tsx     |  7 ++
 .../pages/leaderboard/TableNavigation.tsx     |  4 +-
 .../components/pages/leaderboard/UserRank.tsx | 65 ++++++++++++-------
 3 files changed, 53 insertions(+), 23 deletions(-)

diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
index 2b6b4acf91ed..28538ed21b91 100644
--- a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
@@ -161,6 +161,13 @@ export function LeaderboardPage(): JSXElement {
                     selection(),
                     data?.rank,
                   )}
+                  isLbOptOut={getSnapshot()?.lbOptOut ?? false}
+                  isBanned={getSnapshot()?.banned ?? false}
+                  minTimeTyping={
+                    serverConfigurationQuery.data?.leaderboards.minTimeTyping ??
+                    0
+                  }
+                  userTimeTyping={getSnapshot()?.typingStats.timeTyping ?? 0}
                 />
               )}
             </AsyncContent>
diff --git a/frontend/src/ts/components/pages/leaderboard/TableNavigation.tsx b/frontend/src/ts/components/pages/leaderboard/TableNavigation.tsx
index cc5c3816a94a..4e1aa2a9b732 100644
--- a/frontend/src/ts/components/pages/leaderboard/TableNavigation.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/TableNavigation.tsx
@@ -90,7 +90,9 @@ function Navigation(props: {
       </Show>
       <Button
         onClick={() =>
-          props.onPageChange((old) => Math.min(old, props.lastPage) - 1)
+          props.onPageChange((old) =>
+            Math.max(0, Math.min(old, props.lastPage) - 1),
+          )
         }
         fa={{ icon: "fa-chevron-left", fixedWidth: true }}
         disabled={props.currentPage === 0}
diff --git a/frontend/src/ts/components/pages/leaderboard/UserRank.tsx b/frontend/src/ts/components/pages/leaderboard/UserRank.tsx
index 02faab6d1da0..6aeec2c986f1 100644
--- a/frontend/src/ts/components/pages/leaderboard/UserRank.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/UserRank.tsx
@@ -2,10 +2,12 @@ import {
   LeaderboardEntry,
   XpLeaderboardEntry,
 } from "@monkeytype/schemas/leaderboards";
+import { formatDuration, intervalToDuration } from "date-fns";
 import { createMemo, JSXElement, Match, Show, Switch } from "solid-js";
 
 import { getConfig } from "../../../signals/config";
 import { Formatting } from "../../../utils/format";
+import { Conditional } from "../../common/Conditional";
 import { Fa } from "../../common/Fa";
 import { LoadingCircle } from "../../common/LoadingCircle";
 
@@ -18,6 +20,10 @@ export function UserRank(props: {
   friendsOnly: boolean;
   total: number | undefined;
   memoryDifference: number | undefined;
+  isLbOptOut: boolean;
+  isBanned: boolean;
+  minTimeTyping: number;
+  userTimeTyping: number;
 }): JSXElement {
   const format = createMemo(() => new Formatting(getConfig));
   const userOverride = (): JSXElement => {
@@ -72,31 +78,46 @@ export function UserRank(props: {
         when={props.data !== undefined}
         fallback={<LoadingCircle class="w-full p-4 text-center" />}
       >
-        <Show
-          when={props.data}
-          fallback={
+        <Conditional
+          if={props.data !== null}
+          then={
+            <Table
+              type={props.type}
+              entries={[props.data as TableEntry]}
+              friendsOnly={props.friendsOnly}
+              userOverride={userOverride}
+              hideHeader={true}
+            />
+          }
+          else={
             <div class="w-full p-4 text-center">
-              Not qualified
-              <Show when={props.minWpm}>
-                {" "}
-                (min speed required:{" "}
-                {format().typingSpeed(props.minWpm, {
-                  showDecimalPlaces: true,
-                  suffix: ` ${format().typingSpeedUnit}`,
-                })}
-                )
-              </Show>
+              <Switch fallback="not qualified">
+                <Match when={props.isLbOptOut}>
+                  You have opted out of the leaderboards.
+                </Match>
+                <Match when={props.isBanned}>Your account is banned.</Match>
+                <Match when={props.userTimeTyping < props.minTimeTyping}>
+                  Your account must have
+                  {formatDuration(
+                    intervalToDuration({
+                      start: 0,
+                      end: props.minTimeTyping * 1000,
+                    }),
+                  )}{" "}
+                  typed to be placed on the leaderboard.
+                </Match>
+                <Match when={props.minWpm}>
+                  Not qualified (min speed required:{" "}
+                  {format().typingSpeed(props.minWpm, {
+                    showDecimalPlaces: true,
+                    suffix: ` ${format().typingSpeedUnit}`,
+                  })}
+                  )
+                </Match>
+              </Switch>
             </div>
           }
-        >
-          <Table
-            type={props.type}
-            entries={[props.data as TableEntry]}
-            friendsOnly={props.friendsOnly}
-            userOverride={userOverride}
-            hideHeader={true}
-          />
-        </Show>
+        />
       </Show>
     </div>
   );

From 3fa0e222b9588d559428fbfa44ea078e37e8b832 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Tue, 10 Feb 2026 14:09:37 +0100
Subject: [PATCH 24/26] add (skeleton) page back to the page file, simplifies
 url parameter handling

---
 .../pages/leaderboard/LeaderboardPage.tsx     | 42 ++++++++++++++-----
 .../src/ts/controllers/page-controller.ts     | 40 ++++--------------
 frontend/src/ts/signals/core.ts               | 10 +----
 3 files changed, 43 insertions(+), 49 deletions(-)

diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
index 28538ed21b91..34a4add459c9 100644
--- a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
@@ -11,6 +11,7 @@ import {
 } from "solid-js";
 import { z } from "zod";
 
+import { configurationPromise as serverConfigurationPromise } from "../../../ape/server-configuration";
 import { getSnapshot, updateLbMemory } from "../../../db";
 import { useLocalStorage } from "../../../hooks/useLocalStorage";
 import { PageWithUrlParams } from "../../../pages/page";
@@ -22,12 +23,9 @@ import {
   SelectionSchema,
 } from "../../../queries/leaderboards";
 import { getServerConfigurationQueryOptions } from "../../../queries/server-configuration";
-import {
-  getActivePage,
-  getCurrentPage,
-  isLoggedIn,
-} from "../../../signals/core";
+import { getActivePage, isLoggedIn } from "../../../signals/core";
 import { qsr } from "../../../utils/dom";
+import * as Skeleton from "../../../utils/skeleton";
 import AsyncContent from "../../common/AsyncContent";
 
 import { Sidebar } from "./Sidebar";
@@ -298,11 +296,7 @@ function updateGetParameters(selection: Selection, page: number): void {
   if (selection.friendsOnly) {
     params.friendsOnly = true;
   }
-  // oxlint-disable-next-line typescript/no-explicit-any
-  const currentPage = getCurrentPage() as PageWithUrlParams<unknown, any>;
-  if (currentPage !== undefined && currentPage.id === pageName) {
-    currentPage.setUrlParams(params);
-  }
+  skeletonPage.setUrlParams(params);
 }
 
 export function readGetParameters(
@@ -345,3 +339,31 @@ function prefetch(): void {
     }),
   );
 }
+
+export const skeletonPage = new PageWithUrlParams({
+  id: "about",
+  element: qsr(".page.pageAbout"),
+  path: "/about",
+  urlParamsSchema: LeaderboardUrlParamsSchema,
+  loadingOptions: {
+    style: "spinner",
+    loadingMode: () => "sync",
+    loadingPromise: async () => {
+      await serverConfigurationPromise;
+    },
+  },
+
+  afterHide: async (): Promise<void> => {
+    Skeleton.remove("pageLeaderboards");
+  },
+  beforeShow: async (options): Promise<void> => {
+    Skeleton.append("pageLeaderboards", "main");
+    readGetParameters(options.urlParams);
+  },
+});
+
+/* TODO enable when moving to the correct page
+onDOMReady(async () => {
+  Skeleton.save("pageLeaderboards");
+});
+*/
diff --git a/frontend/src/ts/controllers/page-controller.ts b/frontend/src/ts/controllers/page-controller.ts
index b5ea4990a8c7..bdd38e23a14d 100644
--- a/frontend/src/ts/controllers/page-controller.ts
+++ b/frontend/src/ts/controllers/page-controller.ts
@@ -6,17 +6,12 @@ import * as Friends from "../pages/friends";
 import * as PageLeaderboards from "../pages/leaderboards";
 import * as PageLoading from "../pages/loading";
 import * as PageLogin from "../pages/login";
-import Page, {
-  LoadingOptions,
-  PageName,
-  PageWithUrlParams,
-  UrlParamsSchema,
-} from "../pages/page";
+import Page, { LoadingOptions, PageName } from "../pages/page";
 import * as PageProfile from "../pages/profile";
 import * as PageProfileSearch from "../pages/profile-search";
 import * as Settings from "../pages/settings";
 import * as PageTest from "../pages/test";
-import { getActivePage, setCurrentPage } from "../signals/core";
+import { getActivePage, setActivePage } from "../signals/core";
 import * as PageTransition from "../states/page-transition";
 import * as Focus from "../test/focus";
 import { onDOMReady, qsa, qsr } from "../utils/dom";
@@ -24,11 +19,7 @@ import * as Misc from "../utils/misc";
 import * as Skeleton from "../utils/skeleton";
 import * as Strings from "../utils/strings";
 
-import { z } from "zod";
-import {
-  LeaderboardUrlParamsSchema,
-  readGetParameters as lbReadGetParameters,
-} from "../components/pages/leaderboard/LeaderboardPage";
+import { skeletonPage } from "../components/pages/leaderboard/LeaderboardPage";
 
 type ChangeOptions = {
   force?: boolean;
@@ -41,12 +32,7 @@ const pages = {
   loading: PageLoading.page,
   test: PageTest.page,
   settings: Settings.page,
-  about: solidPage("about", {
-    urlParamsSchema: LeaderboardUrlParamsSchema,
-    beforeShow: async (options) => {
-      lbReadGetParameters(options.urlParams);
-    },
-  }),
+  about: skeletonPage,
   account: Account.page,
   login: PageLogin.page,
   profile: PageProfile.page,
@@ -262,7 +248,7 @@ export async function change(
     }
 
     pages.loading.element.addClass("active");
-    setCurrentPage(pages.loading);
+    setActivePage(pages.loading.id);
     Focus.set(false);
     PageLoading.showError();
     PageLoading.updateText(
@@ -276,7 +262,7 @@ export async function change(
 
   //between
   updateTitle(nextPage);
-  setCurrentPage(nextPage);
+  setActivePage(nextPage.id);
   updateOpenGraphUrl();
   Focus.set(false);
 
@@ -311,32 +297,24 @@ export async function change(
   return true;
 }
 
-// oxlint-disable-next-line typescript/no-explicit-any
-function solidPage<U extends UrlParamsSchema | never>(
+function _solidPage(
   id: PageName,
   props?: {
     path?: string;
-    loadingOptions?: LoadingOptions;
-    urlParamsSchema?: U;
-    beforeShow?: (options: { urlParams?: z.infer<U> }) => Promise<void>;
   },
 ): Page<undefined> {
   const path = props?.path ?? `/${id}`;
   const internalId = `page${Strings.capitalizeFirstLetter(id)}`;
   onDOMReady(() => Skeleton.save(internalId));
-  return new PageWithUrlParams({
+  return new Page({
     id,
     path,
     element: qsr(`#${internalId}`),
-    beforeShow: async (options) => {
+    beforeShow: async () => {
       Skeleton.append(internalId, "main");
-      await props?.beforeShow?.(options);
     },
     afterHide: async () => {
       Skeleton.remove(internalId);
     },
-    loadingOptions: props?.loadingOptions,
-    //@ts-expect-error ignore for now
-    urlParamsSchema: props?.urlParamsSchema,
   });
 }
diff --git a/frontend/src/ts/signals/core.ts b/frontend/src/ts/signals/core.ts
index af2c5cb98e68..8614eda9e779 100644
--- a/frontend/src/ts/signals/core.ts
+++ b/frontend/src/ts/signals/core.ts
@@ -1,13 +1,7 @@
 import { createMemo, createSignal } from "solid-js";
-import Page, { PageName } from "../pages/page";
-
-export const [getCurrentPage, setCurrentPage] = createSignal<
-  Page<undefined> | undefined
->(undefined);
-export const getActivePage = createMemo<PageName>(
-  () => getCurrentPage()?.id ?? "loading",
-);
+import { PageName } from "../pages/page";
 
+export const [getActivePage, setActivePage] = createSignal<PageName>("loading");
 export const [getVersion, setVersion] = createSignal<{
   text: string;
   isNew: boolean;

From 82228ff4e99db5c21951d611ee8827945c1acb15 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Tue, 10 Feb 2026 18:35:02 +0100
Subject: [PATCH 25/26] xp header

---
 frontend/src/ts/components/pages/leaderboard/Table.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/src/ts/components/pages/leaderboard/Table.tsx b/frontend/src/ts/components/pages/leaderboard/Table.tsx
index 576a530021f8..d9e3289913a3 100644
--- a/frontend/src/ts/components/pages/leaderboard/Table.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/Table.tsx
@@ -153,7 +153,6 @@ function getWpmColumns({
     }),
     defineColumn("wpm", {
       header: format.typingSpeedUnit,
-
       cell: (info) =>
         wrapWithHeader(
           format.typingSpeed(info.getValue(), { showDecimalPlaces: true }),
@@ -338,7 +337,7 @@ function getXpColumns({
       },
     }),
     defineColumn("totalXp", {
-      header: "wpm",
+      header: "xp gained",
       cell: (info) =>
         wrapWithHeader(
           info.getValue() < 1000

From 471ed1a7cb4490a7f8e842c4a1e8f67fae3a24d5 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Tue, 10 Feb 2026 23:29:49 +0100
Subject: [PATCH 26/26] fix missing rank when data query is not complete

---
 .../components/common/AsyncMultiContext.tsx   | 166 ++++++++++++++++++
 .../pages/leaderboard/LeaderboardPage.tsx     |  69 ++++----
 .../components/pages/leaderboard/UserRank.tsx |  10 +-
 3 files changed, 207 insertions(+), 38 deletions(-)
 create mode 100644 frontend/src/ts/components/common/AsyncMultiContext.tsx

diff --git a/frontend/src/ts/components/common/AsyncMultiContext.tsx b/frontend/src/ts/components/common/AsyncMultiContext.tsx
new file mode 100644
index 000000000000..eb2fe197dbd7
--- /dev/null
+++ b/frontend/src/ts/components/common/AsyncMultiContext.tsx
@@ -0,0 +1,166 @@
+import { UseQueryResult } from "@tanstack/solid-query";
+import {
+  createMemo,
+  ErrorBoundary,
+  JSXElement,
+  Match,
+  Resource,
+  Show,
+  Switch,
+} from "solid-js";
+
+import * as Notifications from "../../elements/notifications";
+import { createErrorMessage, typedKeys } from "../../utils/misc";
+
+import { Conditional } from "./Conditional";
+import { Fa } from "./Fa";
+
+type AsyncEntry<T> = {
+  value: () => T | undefined;
+  isLoading: () => boolean;
+  isError: () => boolean;
+  error?: () => unknown;
+};
+
+type AsyncMap<T extends Record<string, unknown>> = {
+  [K in keyof T]: AsyncEntry<T[K]>;
+};
+
+type BaseProps = {
+  errorMessage?: string;
+};
+
+type ResourceProps<T extends Record<string, unknown>> = {
+  query?: never;
+  resource: { [K in keyof T]: Resource<T[K]> };
+};
+
+type QueryProps<T extends Record<string, unknown>> = {
+  query: { [K in keyof T]: UseQueryResult<T[K]> };
+  resource?: never;
+};
+
+type DeferredChildren<T extends Record<string, unknown>> = {
+  alwaysShowContent?: false;
+  children: (data: { [K in keyof T]: T[K] }) => JSXElement;
+};
+
+type EagerChildren<T extends Record<string, unknown>> = {
+  alwaysShowContent: true;
+  showLoader?: true;
+  children: (data: { [K in keyof T]: T[K] | undefined }) => JSXElement;
+};
+
+type Props<T extends Record<string, unknown>> = BaseProps &
+  (ResourceProps<T> | QueryProps<T>) &
+  (DeferredChildren<T> | EagerChildren<T>);
+
+export default function AsyncMultiContent<T extends Record<string, unknown>>(
+  props: Props<T>,
+): JSXElement {
+  const source = createMemo<AsyncMap<T>>(() => {
+    if (props.resource !== undefined) {
+      return fromResources(props.resource);
+    }
+    if (props.query !== undefined) {
+      return fromQueries(props.query);
+    }
+    throw new Error("missing source");
+  });
+
+  const handleError = (err: unknown): string => {
+    const message = createErrorMessage(
+      err,
+      props.errorMessage ?? "An error occurred",
+    );
+    console.error("AsyncMultiContent failed", message, err);
+    Notifications.add(message, -1);
+    return message;
+  };
+
+  const value = (): { [K in keyof T]: T[K] } =>
+    Object.fromEntries(
+      typedKeys(source()).map((key) => [key, source()[key].value()]),
+    ) as { [K in keyof T]: T[K] };
+
+  function allResolved(
+    data: ReturnType<typeof value>,
+  ): data is { [K in keyof T]: T[K] } {
+    return Object.values(data).every((v) => v !== undefined && v !== null);
+  }
+
+  const isLoading = (): boolean =>
+    Object.values(source() as AsyncEntry<unknown>[]).some((s) => s.isLoading());
+
+  const firstError = (): unknown | undefined =>
+    Object.values(source() as AsyncEntry<unknown>[])
+      .find((s) => s.isError())
+      ?.error?.();
+
+  const loader = (
+    <div class="preloader p-4 text-center text-2xl text-main">
+      <Fa icon="fa-circle-notch" fixedWidth spin />
+    </div>
+  );
+
+  const errorText = (err: unknown): JSXElement => (
+    <div class="error">{handleError(err)}</div>
+  );
+
+  return (
+    <ErrorBoundary fallback={errorText}>
+      <Switch
+        fallback={
+          <>
+            <Show when={isLoading() && !props.alwaysShowContent}>{loader}</Show>
+
+            <Conditional
+              if={props.alwaysShowContent === true}
+              then={<>{props.children(value())}</>}
+              else={
+                <Show when={allResolved(value())}>
+                  {props.children(value())}
+                </Show>
+              }
+            />
+          </>
+        }
+      >
+        <Match when={firstError() !== undefined}>
+          {errorText(firstError())}
+        </Match>
+
+        <Match when={isLoading() && !props.alwaysShowContent}>{loader}</Match>
+      </Switch>
+    </ErrorBoundary>
+  );
+}
+
+function fromResources<T extends Record<string, unknown>>(resources: {
+  [K in keyof T]: Resource<T[K]>;
+}): AsyncMap<T> {
+  return typedKeys(resources).reduce((acc, key) => {
+    const r = resources[key];
+    acc[key] = {
+      value: () => r(),
+      isLoading: () => r.loading,
+      isError: () => false,
+    };
+    return acc;
+  }, {} as AsyncMap<T>);
+}
+
+function fromQueries<T extends Record<string, unknown>>(queries: {
+  [K in keyof T]: UseQueryResult<T[K]>;
+}): AsyncMap<T> {
+  return typedKeys(queries).reduce((acc, key) => {
+    const q = queries[key];
+    acc[key] = {
+      value: () => q.data,
+      isLoading: () => q.isLoading,
+      isError: () => q.isError,
+      error: () => q.error,
+    };
+    return acc;
+  }, {} as AsyncMap<T>);
+}
diff --git a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
index 34a4add459c9..5beb8f964e20 100644
--- a/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/LeaderboardPage.tsx
@@ -27,6 +27,7 @@ import { getActivePage, isLoggedIn } from "../../../signals/core";
 import { qsr } from "../../../utils/dom";
 import * as Skeleton from "../../../utils/skeleton";
 import AsyncContent from "../../common/AsyncContent";
+import AsyncMultiContent from "../../common/AsyncMultiContext";
 
 import { Sidebar } from "./Sidebar";
 import { Table } from "./Table";
@@ -110,7 +111,9 @@ export function LeaderboardPage(): JSXElement {
   };
 
   const userPage = (): number | undefined => {
-    const userRank = rankQuery.data?.friendsRank ?? rankQuery.data?.rank;
+    const userRank = selection().friendsOnly
+      ? rankQuery.data?.friendsRank
+      : rankQuery.data?.rank;
     if (userRank === undefined) return undefined;
     const page = Math.ceil(userRank / 50) - 1;
     return page;
@@ -143,49 +146,53 @@ export function LeaderboardPage(): JSXElement {
           />
 
           <Show when={isLoggedIn()}>
-            <AsyncContent query={rankQuery} alwaysShowContent>
-              {(data) => (
+            <AsyncMultiContent
+              query={{
+                data: dataQuery,
+                rank: rankQuery,
+                config: serverConfigurationQuery,
+              }}
+              alwaysShowContent
+            >
+              {({ data, rank, config }) => (
                 <UserRank
                   type={selection().type === "weekly" ? "xp" : "wpm"}
-                  data={data}
+                  data={rank}
                   friendsOnly={selection().friendsOnly}
-                  total={dataQuery.data?.count}
+                  total={data?.count}
                   minWpm={
-                    dataQuery.data && "minWpm" in dataQuery.data
-                      ? (dataQuery.data.minWpm as number)
+                    data && "minWpm" in data
+                      ? (data.minWpm as number)
                       : undefined
                   }
                   memoryDifference={getLbMemoryDifference(
                     selection(),
-                    data?.rank,
+                    rank?.rank,
                   )}
                   isLbOptOut={getSnapshot()?.lbOptOut ?? false}
                   isBanned={getSnapshot()?.banned ?? false}
-                  minTimeTyping={
-                    serverConfigurationQuery.data?.leaderboards.minTimeTyping ??
-                    0
-                  }
+                  minTimeTyping={config?.leaderboards.minTimeTyping ?? 0}
                   userTimeTyping={getSnapshot()?.typingStats.timeTyping ?? 0}
                 />
               )}
-            </AsyncContent>
+            </AsyncMultiContent>
           </Show>
 
-          <TableNavigation
-            type={selection().type}
-            lastPage={Math.ceil((dataQuery.data?.count ?? 0) / 50)}
-            currentPage={page()}
-            onPageChange={setPage}
-            userPage={userPage()}
-            onScrollToUser={setScrollToUser}
-            isLoading={
-              dataQuery.isLoading ||
-              dataQuery.isFetching ||
-              dataQuery.isRefetching
-            }
-          >
-            <AsyncContent query={dataQuery} alwaysShowContent>
-              {(data) => (
+          <AsyncContent query={dataQuery} alwaysShowContent>
+            {(data) => (
+              <TableNavigation
+                type={selection().type}
+                lastPage={Math.ceil((data?.count ?? 0) / 50)}
+                currentPage={page()}
+                onPageChange={setPage}
+                userPage={userPage()}
+                onScrollToUser={setScrollToUser}
+                isLoading={
+                  dataQuery.isLoading ||
+                  dataQuery.isFetching ||
+                  dataQuery.isRefetching
+                }
+              >
                 <Table
                   type={selection().type === "weekly" ? "xp" : "wpm"}
                   entries={data?.entries ?? []}
@@ -193,9 +200,9 @@ export function LeaderboardPage(): JSXElement {
                   scrollToUser={scrollToUser}
                   onScrolledToUser={() => setScrollToUser(false)}
                 />
-              )}
-            </AsyncContent>
-          </TableNavigation>
+              </TableNavigation>
+            )}
+          </AsyncContent>
         </div>
       </div>
     </div>
diff --git a/frontend/src/ts/components/pages/leaderboard/UserRank.tsx b/frontend/src/ts/components/pages/leaderboard/UserRank.tsx
index 6aeec2c986f1..0be6bd6c46b9 100644
--- a/frontend/src/ts/components/pages/leaderboard/UserRank.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/UserRank.tsx
@@ -27,17 +27,13 @@ export function UserRank(props: {
 }): JSXElement {
   const format = createMemo(() => new Formatting(getConfig));
   const userOverride = (): JSXElement => {
-    if (
-      props.data === undefined ||
-      props.data === null ||
-      props.total === undefined
-    ) {
+    if (props.data === undefined || props.data === null) {
       return "";
     }
     const rank = props.friendsOnly
       ? (props.data.friendsRank as number)
       : props.data.rank;
-    const percentile = (rank / props.total) * 100;
+    const percentile = (rank / (props.total ?? 1)) * 100;
 
     let percentileString = `Top ${percentile.toFixed(2)}%`;
     if (rank === 1) {
@@ -75,7 +71,7 @@ export function UserRank(props: {
   return (
     <div class="flex rounded bg-sub-alt">
       <Show
-        when={props.data !== undefined}
+        when={props.data !== undefined && props.total !== undefined}
         fallback={<LoadingCircle class="w-full p-4 text-center" />}
       >
         <Conditional