From c480e8107f2ebd8a2028410a5c38716b5cc76625 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 12 Feb 2026 17:27:13 +0100
Subject: [PATCH 01/52] wip

---
 frontend/package.json                  |   3 +
 frontend/src/ts/collections/results.ts |  66 ++++++++++++++
 frontend/src/ts/firebase.ts            |   2 +
 frontend/src/ts/queries/index.ts       |   8 ++
 frontend/src/ts/signals/core.ts        |   7 +-
 pnpm-lock.yaml                         | 119 +++++++++++++++++++++++--
 6 files changed, 198 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/ts/collections/results.ts

diff --git a/frontend/package.json b/frontend/package.json
index d97f5c655374..16f27291296a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -30,6 +30,9 @@
     "@sentry/browser": "9.14.0",
     "@sentry/vite-plugin": "3.3.1",
     "@solidjs/meta": "0.29.4",
+    "@tanstack/db": "0.5.25",
+    "@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/results.ts b/frontend/src/ts/collections/results.ts
new file mode 100644
index 000000000000..682134beb063
--- /dev/null
+++ b/frontend/src/ts/collections/results.ts
@@ -0,0 +1,66 @@
+import { baseKey } from "../queries/utils/keys";
+import {
+  createCollection,
+  liveQueryCollectionOptions,
+  parseLoadSubsetOptions,
+} from "@tanstack/db";
+import { queryCollectionOptions } from "@tanstack/query-db-collection";
+import { queryClient } from "../queries";
+import Ape from "../ape";
+import { SnapshotResult } from "../constants/default-snapshot";
+import { Mode } from "@monkeytype/schemas/shared";
+
+const queryKeys = {
+  root: () => baseKey("results", { isUserSpecific: true }),
+};
+
+export const resultsCollection = createCollection(
+  queryCollectionOptions({
+    queryKey: queryKeys.root(),
+    queryFn: async (ctx) => {
+      const options = parseLoadSubsetOptions(ctx.meta?.loadSubsetOptions);
+
+      const response = await Ape.results.get({
+        query: { limit: options.limit },
+      });
+
+      if (response.status !== 200) {
+        throw new Error("Error fetching results:" + response.body.message);
+      }
+      return response.body.data.map((result) => {
+    result.bailedOut ??= false;
+    result.blindMode ??= false;
+    result.lazyMode ??= false;
+    result.difficulty ??= "normal";
+    result.funbox ??= [];
+    result.language ??= "english";
+    result.numbers ??= false;
+    result.punctuation ??= false;
+    result.numbers ??= false;
+    result.quoteLength ??= -1;
+    result.restartCount ??= 0;
+    result.incompleteTestSeconds ??= 0;
+    result.afkDuration ??= 0;
+    result.tags ??= [];
+    return result as SnapshotResult<Mode>;
+      }),
+    },
+    queryClient,
+    getKey: (it) => it._id,
+  }),
+);
+
+const allResultsQuery = createCollection(
+  liveQueryCollectionOptions({
+    query: (q) => q.from({ results: resultsCollection }),
+  }),
+);
+
+export async function downloadResults:Promise<void>{
+    await allResultsQuery.stateWhenReady();
+    return;
+}
+
+export function getAllResults<M extends Mode>(): SnapshotResult<M>[] {
+  return allResultsQuery.toArray
+}
diff --git a/frontend/src/ts/firebase.ts b/frontend/src/ts/firebase.ts
index 85b562673397..d32b9c6944a5 100644
--- a/frontend/src/ts/firebase.ts
+++ b/frontend/src/ts/firebase.ts
@@ -75,6 +75,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 +83,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/queries/index.ts b/frontend/src/ts/queries/index.ts
index d247b59fdc73..723aaa32feae 100644
--- a/frontend/src/ts/queries/index.ts
+++ b/frontend/src/ts/queries/index.ts
@@ -1,3 +1,11 @@
 import { QueryClient } from "@tanstack/solid-query";
+import { createEffectOn } from "../hooks/effects";
+import { isLoggedIn } from "../signals/core";
 
 export const queryClient = new QueryClient();
+createEffectOn(isLoggedIn, (state) => {
+  if (!state) {
+    console.debug("QueryClient clear all user related queries.");
+    void queryClient.resetQueries({ queryKey: ["user"] });
+  }
+});
diff --git a/frontend/src/ts/signals/core.ts b/frontend/src/ts/signals/core.ts
index f3c6127b08e0..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");
@@ -29,3 +29,8 @@ export const [getCommandlineSubgroup, setCommandlineSubgroup] = createSignal<
 export const [getFocus, setFocus] = createSignal(false);
 export const [getGlobalOffsetTop, setGlobalOffsetTop] = createSignal(0);
 export const [getIsScreenshotting, setIsScreenshotting] = createSignal(false);
+
+const [userId, setUserId] = createSignal<string | null>(null);
+export { setUserId };
+export const getUserId = createMemo(() => userId());
+export const isLoggedIn = createMemo(() => getUserId() !== null);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 59bda0b9f6db..9a599c323350 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -282,6 +282,15 @@ 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-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 +3286,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:
@@ -3292,8 +3316,8 @@ packages:
       '@solidjs/router':
         optional: true
 
-  '@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 +3412,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 +3431,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 +5771,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'}
@@ -5876,25 +5929,28 @@ packages:
 
   glob@10.4.5:
     resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
+    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
     hasBin: true
 
   glob@11.0.3:
     resolution: {integrity: sha512-2Nim7dha1KVkaiF4q6Dj+ngPPMdfvLJEOpZk/jKiUAkqKebpGAWQXAq9z1xu9HKu5lWfqw/FASuccEjyznjPaA==}
     engines: {node: 20 || >=22}
+    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
     hasBin: true
 
   glob@7.2.3:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
-    deprecated: Glob versions prior to v9 are no longer supported
+    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
 
   glob@8.1.0:
     resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==}
     engines: {node: '>=12'}
-    deprecated: Glob versions prior to v9 are no longer supported
+    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
 
   glob@9.3.5:
     resolution: {integrity: sha512-e1LleDykUz2Iu+MTYdkSsuWX8lvAjAcs0Xef0lNIu0S2wOAzuTxCJtcd9S3cijlwYF18EsU3rzb8jPVobxDh9Q==}
     engines: {node: '>=16 || 14 >=14.17'}
+    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
 
   global-dirs@0.1.1:
     resolution: {integrity: sha512-NknMLn7F2J7aflwFOlGdNIuCDpN3VGoSoB+aap3KABFWbHVn1TCgFC+np23J8W2BiZbjfEw3BFBycSMv1AFblg==}
@@ -8867,6 +8923,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 +13103,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
@@ -13053,7 +13126,7 @@ snapshots:
       '@testing-library/dom': 10.4.1
       solid-js: 1.9.10
 
-  '@standard-schema/spec@1.0.0': {}
+  '@standard-schema/spec@1.1.0': {}
 
   '@surma/rollup-plugin-off-main-thread@2.2.3':
     dependencies:
@@ -13130,6 +13203,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 +13225,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
@@ -13596,7 +13699,7 @@ snapshots:
 
   '@vitest/expect@4.0.15':
     dependencies:
-      '@standard-schema/spec': 1.0.0
+      '@standard-schema/spec': 1.1.0
       '@types/chai': 5.2.3
       '@vitest/spy': 4.0.15
       '@vitest/utils': 4.0.15
@@ -16021,6 +16124,8 @@ snapshots:
 
   fraction.js@4.3.7: {}
 
+  fractional-indexing@3.2.0: {}
+
   fresh@0.5.2: {}
 
   fresh@2.0.0: {}
@@ -19652,6 +19757,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 1777458888bbba46184b6bc45bd56342e7df6d44 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 13 Feb 2026 02:44:26 +0100
Subject: [PATCH 02/52] wip

---
 frontend/src/index.html                       |   3 +-
 frontend/src/ts/collections/results.ts        |  40 ++---
 frontend/src/ts/components/common/Button.tsx  |  21 +--
 frontend/src/ts/components/mount.tsx          |   4 +-
 .../components/pages/account/AccountPage.tsx  |  72 ++++++++
 .../ts/components/pages/account/Filters.tsx   | 122 ++++++++++++++
 .../src/ts/components/pages/account/Table.tsx | 155 ++++++++++++++++++
 .../src/ts/components/ui/table/DataTable.tsx  |  18 +-
 frontend/src/ts/components/ui/table/Table.tsx |   4 +-
 .../src/ts/components/utils/aria-label.ts     |  19 +++
 frontend/src/ts/constants/default-snapshot.ts |   2 -
 frontend/src/ts/firebase.ts                   |   1 +
 frontend/src/ts/utils/format.ts               |   8 +-
 13 files changed, 420 insertions(+), 49 deletions(-)
 create mode 100644 frontend/src/ts/components/pages/account/AccountPage.tsx
 create mode 100644 frontend/src/ts/components/pages/account/Filters.tsx
 create mode 100644 frontend/src/ts/components/pages/account/Table.tsx
 create mode 100644 frontend/src/ts/components/utils/aria-label.ts

diff --git a/frontend/src/index.html b/frontend/src/index.html
index b7ad14bba257..86b9d087751f 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -38,7 +38,8 @@
           <div id="ad-vertical-right"></div>
         </div>
         <load src="html/pages/loading.html" />
-        <div class="page pageAbout full-width hidden" id="pageAbout">
+        <!-- TODO: revert full-width -->
+        <div class="page pageAbout hidden" id="pageAbout">
           <mount data-component="aboutpage"></mount>
         </div>
         <load src="html/pages/settings.html" />
diff --git a/frontend/src/ts/collections/results.ts b/frontend/src/ts/collections/results.ts
index 682134beb063..69850fb6b5ca 100644
--- a/frontend/src/ts/collections/results.ts
+++ b/frontend/src/ts/collections/results.ts
@@ -28,22 +28,22 @@ export const resultsCollection = createCollection(
         throw new Error("Error fetching results:" + response.body.message);
       }
       return response.body.data.map((result) => {
-    result.bailedOut ??= false;
-    result.blindMode ??= false;
-    result.lazyMode ??= false;
-    result.difficulty ??= "normal";
-    result.funbox ??= [];
-    result.language ??= "english";
-    result.numbers ??= false;
-    result.punctuation ??= false;
-    result.numbers ??= false;
-    result.quoteLength ??= -1;
-    result.restartCount ??= 0;
-    result.incompleteTestSeconds ??= 0;
-    result.afkDuration ??= 0;
-    result.tags ??= [];
-    return result as SnapshotResult<Mode>;
-      }),
+        result.bailedOut ??= false;
+        result.blindMode ??= false;
+        result.lazyMode ??= false;
+        result.difficulty ??= "normal";
+        result.funbox ??= [];
+        result.language ??= "english";
+        result.numbers ??= false;
+        result.punctuation ??= false;
+        result.numbers ??= false;
+        result.quoteLength ??= -1;
+        result.restartCount ??= 0;
+        result.incompleteTestSeconds ??= 0;
+        result.afkDuration ??= 0;
+        result.tags ??= [];
+        return result as SnapshotResult<Mode>;
+      });
     },
     queryClient,
     getKey: (it) => it._id,
@@ -56,11 +56,11 @@ const allResultsQuery = createCollection(
   }),
 );
 
-export async function downloadResults:Promise<void>{
-    await allResultsQuery.stateWhenReady();
-    return;
+export async function downloadResults(): Promise<void> {
+  await allResultsQuery.stateWhenReady();
+  return;
 }
 
 export function getAllResults<M extends Mode>(): SnapshotResult<M>[] {
-  return allResultsQuery.toArray
+  return allResultsQuery.toArray as SnapshotResult<M>[];
 }
diff --git a/frontend/src/ts/components/common/Button.tsx b/frontend/src/ts/components/common/Button.tsx
index 155719c67c36..f4dea7876aeb 100644
--- a/frontend/src/ts/components/common/Button.tsx
+++ b/frontend/src/ts/components/common/Button.tsx
@@ -1,5 +1,7 @@
 import { JSX, JSXElement, Show } from "solid-js";
 
+import { ariaLabel, AriaLabel } from "../utils/aria-label";
+
 import { Conditional } from "./Conditional";
 import { Fa, FaProps } from "./Fa";
 
@@ -10,9 +12,7 @@ type BaseProps = {
   classList?: JSX.HTMLAttributes<HTMLButtonElement>["classList"];
   type?: "text" | "button";
   children?: JSXElement;
-  ariaLabel?:
-    | string
-    | { text: string; position: "up" | "down" | "left" | "right" };
+  ariaLabel?: AriaLabel;
   "router-link"?: true;
 };
 
@@ -45,17 +45,6 @@ export function Button(props: ButtonProps | AnchorProps): JSXElement {
     </>
   );
 
-  const ariaLabel = (): object => {
-    if (props.ariaLabel === undefined) return {};
-    if (typeof props.ariaLabel === "string") {
-      return { "aria-label": props.ariaLabel, "data-balloon-pos": "up" };
-    }
-    return {
-      "aria-label": props.ariaLabel.text,
-      "data-balloon-pos": props.ariaLabel.position,
-    };
-  };
-
   const getClassList = (): Record<string, boolean | undefined> => {
     return {
       [(props.type ?? "button") === "text" ? "textButton" : buttonClass]: true,
@@ -84,7 +73,7 @@ export function Button(props: ButtonProps | AnchorProps): JSXElement {
               ? undefined
               : "noreferrer noopener"
           }
-          {...ariaLabel()}
+          {...ariaLabel(props.ariaLabel)}
           {...(props["router-link"] ? { "router-link": "" } : {})}
         >
           {content}
@@ -95,7 +84,7 @@ export function Button(props: ButtonProps | AnchorProps): JSXElement {
           type="button"
           classList={getClassList()}
           onClick={() => props.onClick?.()}
-          {...ariaLabel()}
+          {...ariaLabel(props.ariaLabel)}
           {...(props["router-link"] ? { "router-link": "" } : {})}
           disabled={props.disabled ?? false}
         >
diff --git a/frontend/src/ts/components/mount.tsx b/frontend/src/ts/components/mount.tsx
index a4dae541c9c4..90e7bbe13bd0 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 { AccountPage } from "./pages/account/AccountPage";
 
 const components: Record<string, () => JSXElement> = {
   footer: () => <Footer />,
-  aboutpage: () => <AboutPage />,
+  aboutpage: () => <AccountPage />,
   modals: () => <Modals />,
   overlays: () => <Overlays />,
   theme: () => <Theme />,
diff --git a/frontend/src/ts/components/pages/account/AccountPage.tsx b/frontend/src/ts/components/pages/account/AccountPage.tsx
new file mode 100644
index 000000000000..f384719fdbbe
--- /dev/null
+++ b/frontend/src/ts/components/pages/account/AccountPage.tsx
@@ -0,0 +1,72 @@
+import { ResultFilters } from "@monkeytype/schemas/users";
+import { inArray, useLiveQuery } from "@tanstack/solid-db";
+import { createSignal, JSXElement, Show } from "solid-js";
+import { createStore } from "solid-js/store";
+
+import { resultsCollection } from "../../../collections/results";
+import defaultResultFilters from "../../../constants/default-result-filters";
+import { SnapshotResult } from "../../../constants/default-snapshot";
+import { isLoggedIn } from "../../../signals/core";
+import { addToGlobal } from "../../../utils/misc";
+
+import { Filters } from "./Filters";
+import { Table } from "./Table";
+
+export function AccountPage(): JSXElement {
+  const [filters, setFilters] =
+    createStore<ResultFilters>(defaultResultFilters);
+
+  const [sorting, setSorting] = createSignal<{
+    // oxlint-disable-next-line typescript/no-explicit-any
+    field: keyof SnapshotResult<any>;
+    direction: "asc" | "desc";
+  }>({
+    field: "timestamp",
+    direction: "desc",
+  });
+
+  addToGlobal({ setSorting });
+  const data = useLiveQuery((q) => {
+    if (!isLoggedIn()) return undefined;
+    return q
+      .from({ results: resultsCollection })
+      .where(({ results }) =>
+        inArray(
+          results.mode,
+          Object.entries(filters.mode)
+            .filter(([_, v]) => v)
+            .map(([k]) => k),
+        ),
+      )
+      .where(({ results }) =>
+        inArray(
+          results.punctuation,
+          Object.entries(filters.punctuation)
+            .filter(([_, v]) => v)
+            .map(([k]) => k === "on"),
+        ),
+      )
+      .orderBy(({ results }) => results[sorting().field], sorting().direction);
+    //.limit(10);
+  });
+
+  addToGlobal({ data });
+
+  return (
+    <Show when={isLoggedIn()}>
+      <Filters
+        filters={filters}
+        onChangeFilter={(key, value) => {
+          setFilters(key, value);
+        }}
+      />
+      <Table
+        data={[...data()]}
+        onSortingChange={(val) => {
+          console.log("### page", val);
+          setSorting(val);
+        }}
+      />
+    </Show>
+  );
+}
diff --git a/frontend/src/ts/components/pages/account/Filters.tsx b/frontend/src/ts/components/pages/account/Filters.tsx
new file mode 100644
index 000000000000..a7cd4431692e
--- /dev/null
+++ b/frontend/src/ts/components/pages/account/Filters.tsx
@@ -0,0 +1,122 @@
+import { ResultFilters } from "@monkeytype/schemas/users";
+import { createSignal, For, JSXElement, Show } from "solid-js";
+
+import { FaSolidIcon } from "../../../types/font-awesome";
+import { Button } from "../../common/Button";
+import { H3 } from "../../common/Headers";
+
+const placeholder = (): void => {
+  //
+};
+
+export function Filters(props: {
+  filters: ResultFilters;
+  onChangeFilter: (id: keyof ResultFilters, value: object) => void;
+}): JSXElement {
+  const [isShowAdvanced, setShowAdvanced] = createSignal(true);
+
+  return (
+    <>
+      <H3 fa={{ icon: "fa-filter" }} text="filters" />
+      <div>
+        <Button text="all" onClick={placeholder} />
+        <Button text="current settings" onClick={placeholder} />
+        <Button
+          text="advanced"
+          active={isShowAdvanced()}
+          onClick={() => setShowAdvanced((old) => !old)}
+        />
+        <Button text="save as preset" onClick={placeholder} />
+      </div>
+
+      <ButtonGroup
+        group="date"
+        items={[
+          { id: "last_day", text: "last day" },
+          { id: "last_week", text: "last week" },
+          { id: "last_month", text: "last month" },
+          { id: "last_3months", text: "last 3 months" },
+          { id: "all", text: "all time" },
+        ]}
+        onSelect={(id) => {
+          const newValue = Object.fromEntries(
+            Object.entries(props.filters.date).map(([key]) => [
+              key,
+              key === id,
+            ]),
+          );
+          props.onChangeFilter("date", newValue);
+        }}
+      />
+
+      <Show when={isShowAdvanced()}>
+        <H3 fa={{ icon: "fa-tools" }} text="advanced filters" />
+        <Button text="clear filters" onClick={placeholder} />
+
+        <ButtonGroup text="difficulty" icon="fa-star" group="difficulty" />
+        <ButtonGroup text="personal best" icon="fa-crown" group="pb" />
+        <ButtonGroup text="mode" icon="fa-bars" group="mode" />
+        <ButtonGroup
+          text="quote length"
+          icon="fa-quote-right"
+          group="quoteLength"
+        />
+        <ButtonGroup text="words" icon="fa-font" group="words" />
+        <ButtonGroup text="time" icon="fa-clock" group="time" />
+        <ButtonGroup text="punctuation" icon="fa-at" group="punctuation" />
+        <ButtonGroup text="numbers" icon="fa-hashtag" group="numbers" />
+      </Show>
+    </>
+  );
+
+  function ButtonGroup<
+    T extends keyof ResultFilters,
+    K extends keyof ResultFilters[T],
+  >(options: {
+    icon?: FaSolidIcon;
+    text?: string;
+    group: T;
+    items?: { id: K; text?: string }[];
+    onSelect?: (id: K) => void;
+  }): JSXElement {
+    const items = (): { id: K; text?: string }[] =>
+      options.items ??
+      (Object.keys(props.filters[options.group]).map((id) => ({
+        id,
+        text: new String(id).toString(),
+      })) as { id: K; text?: string }[]);
+
+    return (
+      <>
+        <Show when={options.icon !== undefined && options.text !== undefined}>
+          <H3
+            fa={{ icon: options.icon as FaSolidIcon, fixedWidth: true }}
+            text={options.text as string}
+          />
+        </Show>
+        <div>
+          <For each={items()}>
+            {(item) => (
+              <Button
+                text={item.text ?? (item.id as string)}
+                active={props.filters[options.group][item.id] === true}
+                onClick={() => {
+                  if (options.onSelect !== undefined) {
+                    options.onSelect(item.id);
+                  } else {
+                    // oxlint-disable-next-line typescript/no-explicit-any typescript/no-unsafe-return
+                    props.onChangeFilter(options.group, (old: any) => ({
+                      ...old,
+                      // oxlint-disable-next-line typescript/strict-boolean-expressions typescript/no-unsafe-member-access
+                      [item.id]: !old[item.id],
+                    }));
+                  }
+                }}
+              />
+            )}
+          </For>
+        </div>
+      </>
+    );
+  }
+}
diff --git a/frontend/src/ts/components/pages/account/Table.tsx b/frontend/src/ts/components/pages/account/Table.tsx
new file mode 100644
index 000000000000..e8b23210dbab
--- /dev/null
+++ b/frontend/src/ts/components/pages/account/Table.tsx
@@ -0,0 +1,155 @@
+import { Difficulty } from "@monkeytype/schemas/configs";
+import { Mode } from "@monkeytype/schemas/shared";
+import { createColumnHelper } from "@tanstack/solid-table";
+import { format as dateFormat } from "date-fns/format";
+import { createMemo, JSXElement, Show } from "solid-js";
+
+import { SnapshotResult } from "../../../constants/default-snapshot";
+import { getConfig } from "../../../signals/config";
+import { Formatting } from "../../../utils/format";
+import { Fa, FaProps } from "../../common/Fa";
+import { DataTable, DataTableColumnDef } from "../../ui/table/DataTable";
+
+export type Sorting = {
+  // oxlint-disable-next-line typescript/no-explicit-any
+  field: keyof SnapshotResult<any>;
+  direction: "asc" | "desc";
+};
+
+export function Table<M extends Mode>(props: {
+  data: SnapshotResult<M>[];
+  onSortingChange: (sorting: Sorting) => void;
+}): JSXElement {
+  const columns = createMemo(() =>
+    getColumns<M>({
+      format: new Formatting(getConfig),
+    }),
+  );
+  return (
+    <DataTable
+      id="resultList"
+      onSortingChange={(val) => {
+        if (val.length === 0) {
+          props.onSortingChange({ field: "timestamp", direction: "desc" });
+        } else {
+          props.onSortingChange({
+            // oxlint-disable-next-line typescript/no-explicit-any
+            field: val[0]?.id as keyof SnapshotResult<any>,
+            direction: val[0]?.desc ? "desc" : "asc",
+          });
+        }
+      }}
+      class="table-auto [&>tbody>tr>td]:px-4 [&>tbody>tr>td]:py-2.5 [&>tbody>tr>td]:whitespace-nowrap xl:[&>tbody>tr>td]:px-6 [&>thead>tr>th]:px-4 xl:[&>thead>tr>th]:px-6"
+      data={props.data}
+      columns={columns()}
+      fallback=<span>No data found. Check your filters.</span>
+    />
+  );
+}
+
+function getColumns<M extends Mode>({
+  format,
+}: {
+  format: Formatting;
+}): DataTableColumnDef<SnapshotResult<M>>[] {
+  const defineColumn = createColumnHelper<SnapshotResult<M>>().accessor;
+  const columns = [
+    defineColumn("isPb", {
+      header: "",
+      cell: (info) => (info.getValue() ? <Fa icon="fa-crown" /> : ""),
+      enableSorting: false,
+    }),
+    defineColumn("wpm", {
+      header: format.typingSpeedUnit,
+      cell: (info) =>
+        format.typingSpeed(info.getValue(), { showDecimalPlaces: true }),
+    }),
+    defineColumn("rawWpm", {
+      header: "raw",
+      cell: (info) =>
+        format.typingSpeed(info.getValue(), { showDecimalPlaces: true }),
+    }),
+    defineColumn("acc", {
+      header: "accuracy",
+      cell: (info) =>
+        format.percentage(info.getValue(), { showDecimalPlaces: true }),
+    }),
+    defineColumn("consistency", {
+      header: "consistency",
+      cell: (info) =>
+        format.percentage(info.getValue(), { showDecimalPlaces: true }),
+    }),
+    defineColumn("mode", {
+      header: "mode",
+      cell: (info) =>
+        `${info.getValue()} ${info.row.original.mode2 === "custom" ? "" : info.row.original.mode2}`,
+    }),
+    defineColumn("_id", {
+      header: "info",
+      cell: (info) => (
+        <>
+          <span aria-label={info.row.original.language} data-balloon-pos="up">
+            <Fa icon="fa-globe-americas" fixedWidth={true} />
+          </span>
+          <span aria-label={info.row.original.difficulty} data-balloon-pos="up">
+            <Fa {...difficultyIcon(info.row.original.difficulty)} />
+          </span>
+          <Show when={info.row.original.punctuation}>
+            <span aria-label="punctuation" data-balloon-pos="up">
+              <Fa icon="fa-at" fixedWidth={true} />
+            </span>
+          </Show>
+          <Show when={info.row.original.numbers}>
+            <span aria-label="numbers" data-balloon-pos="up">
+              <Fa icon="fa-hashtag" fixedWidth={true} />
+            </span>
+          </Show>
+          <Show when={info.row.original.blindMode}>
+            <span aria-label="blind mode" data-balloon-pos="up">
+              <Fa icon="fa-eye-slash" fixedWidth={true} />
+            </span>
+          </Show>
+          <Show when={info.row.original.lazyMode}>
+            <span aria-label="lazy mode" data-balloon-pos="up">
+              <Fa icon="fa-couch" fixedWidth={true} />
+            </span>
+          </Show>
+          <Show when={(info.row.original.funbox ?? []).length > 0}>
+            <span
+              aria-label={info.row.original.funbox
+                .map((it) => it.replace(/_/g, " "))
+                .join(", ")}
+              data-balloon-pos="up"
+            >
+              <Fa icon="fa-gamepad" fixedWidth={true} />
+            </span>
+          </Show>
+        </>
+      ),
+    }),
+    defineColumn("timestamp", {
+      header: "date",
+      cell: (info) => (
+        <>
+          <div class="text-xs">
+            {dateFormat(info.getValue(), "dd MMM yyyy")}
+          </div>
+          <div class="text-xs text-sub">
+            {dateFormat(info.getValue(), "HH:mm")}
+          </div>
+        </>
+      ),
+    }),
+  ];
+  return columns;
+}
+
+function difficultyIcon(difficulty: Difficulty): FaProps {
+  if (difficulty === "expert") {
+    return { variant: "solid", icon: "fa-star-half-alt", fixedWidth: true };
+  } else if (difficulty === "master") {
+    return { variant: "solid", icon: "fa-star", fixedWidth: true };
+  } else {
+    return { variant: "regular", icon: "fa-star", fixedWidth: true };
+  }
+}
diff --git a/frontend/src/ts/components/ui/table/DataTable.tsx b/frontend/src/ts/components/ui/table/DataTable.tsx
index f022003ec0a8..1e5946ad8be1 100644
--- a/frontend/src/ts/components/ui/table/DataTable.tsx
+++ b/frontend/src/ts/components/ui/table/DataTable.tsx
@@ -41,8 +41,8 @@ const SortingStateSchema = z.array(
     id: z.string(),
   }),
 );
-
-export type DataTableColumnDef<TData, TValue> =
+// oxlint-disable-next-line typescript/no-explicit-any
+export type DataTableColumnDef<TData, TValue = any> =
   | ColumnDef<TData, TValue>
   | AccessorFnColumnDef<TData, TValue>
   | AccessorKeyColumnDef<TData, TValue>;
@@ -58,6 +58,8 @@ export type DataTableProps<TData, TValue> = {
     class: string;
     activeRow: Accessor<string | null>;
   };
+  class?: string;
+  onSortingChange?: (sorting: SortingState) => void;
 };
 
 export function DataTable<TData, TValue = unknown>(
@@ -123,8 +125,14 @@ export function DataTable<TData, TValue = unknown>(
       return props.columns;
     },
     getCoreRowModel: getCoreRowModel(),
-    onSortingChange: setSorting,
-    getSortedRowModel: getSortedRowModel(),
+    onSortingChange: (it) => {
+      setSorting(it);
+      props.onSortingChange?.(sorting());
+    },
+
+    ...(props.onSortingChange
+      ? { manualSorting: true }
+      : { getSortedRowModel: getSortedRowModel() }),
     enableRowSelection: () => props.rowSelection !== undefined,
     getRowId: (row, index) =>
       props.rowSelection !== undefined
@@ -147,7 +155,7 @@ export function DataTable<TData, TValue = unknown>(
 
   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()}>
diff --git a/frontend/src/ts/components/ui/table/Table.tsx b/frontend/src/ts/components/ui/table/Table.tsx
index 42a6d0c107c3..63a7735cd87c 100644
--- a/frontend/src/ts/components/ui/table/Table.tsx
+++ b/frontend/src/ts/components/ui/table/Table.tsx
@@ -8,7 +8,7 @@ const Table: Component<ComponentProps<"table">> = (props) => {
   return (
     <table
       class={cn(
-        "w-full border-separate border-spacing-0 [&>tbody>tr>td]:p-0 [&>thead>tr>th]:p-2",
+        "w-full border-separate border-spacing-0 [&>tbody>tr>td]:p-0",
         local.class,
       )}
       {...others}
@@ -55,7 +55,7 @@ const TableHead: Component<ComponentProps<"th">> = (props) => {
     <th
       aria-label={local["aria-label"]}
       class={cn(
-        "has-button:p-0 appearance-none align-bottom text-xs font-normal",
+        "has-button:p-0 appearance-none p-2 align-bottom text-xs font-normal",
         local.class,
       )}
       {...others}
diff --git a/frontend/src/ts/components/utils/aria-label.ts b/frontend/src/ts/components/utils/aria-label.ts
new file mode 100644
index 000000000000..6f2924b6bfea
--- /dev/null
+++ b/frontend/src/ts/components/utils/aria-label.ts
@@ -0,0 +1,19 @@
+export type AriaLabel =
+  | string
+  | { text: string; position: "up" | "down" | "left" | "right" };
+
+export function ariaLabel(ariaLabel?: AriaLabel):
+  | {
+      "aria-label": string;
+      "data-balloon-pos": string;
+    }
+  | undefined {
+  if (ariaLabel === undefined) return undefined;
+  if (typeof ariaLabel === "string") {
+    return { "aria-label": ariaLabel, "data-balloon-pos": "up" };
+  }
+  return {
+    "aria-label": ariaLabel.text,
+    "data-balloon-pos": ariaLabel.position,
+  };
+}
diff --git a/frontend/src/ts/constants/default-snapshot.ts b/frontend/src/ts/constants/default-snapshot.ts
index 7a0ecec16eff..3435676d3d76 100644
--- a/frontend/src/ts/constants/default-snapshot.ts
+++ b/frontend/src/ts/constants/default-snapshot.ts
@@ -23,7 +23,6 @@ export type SnapshotUserTag = UserTag & {
 
 export type SnapshotResult<M extends Mode> = Omit<
   Result<M>,
-  | "_id"
   | "bailedOut"
   | "blindMode"
   | "lazyMode"
@@ -38,7 +37,6 @@ export type SnapshotResult<M extends Mode> = Omit<
   | "afkDuration"
   | "tags"
 > & {
-  _id: string;
   bailedOut: boolean;
   blindMode: boolean;
   lazyMode: boolean;
diff --git a/frontend/src/ts/firebase.ts b/frontend/src/ts/firebase.ts
index d32b9c6944a5..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;
diff --git a/frontend/src/ts/utils/format.ts b/frontend/src/ts/utils/format.ts
index c8ebab24b644..d4bfd28188bb 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 = {
@@ -64,6 +67,9 @@ export class Formatting {
     const options = { ...FORMAT_DEFAULT_OPTIONS, ...formatOptions };
     return this.number(value, options);
   }
+  get typingSpeedUnit(): TypingSpeedUnit {
+    return this.config.typingSpeedUnit;
+  }
 
   private number(
     value: number | null | undefined,

From e059de87ba32d1f428ed9606755d8f126514bd41 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 13 Feb 2026 02:54:02 +0100
Subject: [PATCH 03/52] wip

---
 .../components/pages/account/AccountPage.tsx  |  4 +-
 .../src/ts/components/pages/account/Table.tsx | 63 +++++++++++++------
 2 files changed, 46 insertions(+), 21 deletions(-)

diff --git a/frontend/src/ts/components/pages/account/AccountPage.tsx b/frontend/src/ts/components/pages/account/AccountPage.tsx
index f384719fdbbe..dda34f92b380 100644
--- a/frontend/src/ts/components/pages/account/AccountPage.tsx
+++ b/frontend/src/ts/components/pages/account/AccountPage.tsx
@@ -46,8 +46,8 @@ export function AccountPage(): JSXElement {
             .map(([k]) => k === "on"),
         ),
       )
-      .orderBy(({ results }) => results[sorting().field], sorting().direction);
-    //.limit(10);
+      .orderBy(({ results }) => results[sorting().field], sorting().direction)
+      .limit(10);
   });
 
   addToGlobal({ data });
diff --git a/frontend/src/ts/components/pages/account/Table.tsx b/frontend/src/ts/components/pages/account/Table.tsx
index e8b23210dbab..5805190c4c5d 100644
--- a/frontend/src/ts/components/pages/account/Table.tsx
+++ b/frontend/src/ts/components/pages/account/Table.tsx
@@ -2,13 +2,19 @@ import { Difficulty } from "@monkeytype/schemas/configs";
 import { Mode } from "@monkeytype/schemas/shared";
 import { createColumnHelper } from "@tanstack/solid-table";
 import { format as dateFormat } from "date-fns/format";
-import { createMemo, JSXElement, Show } from "solid-js";
+import { createMemo, For, JSXElement, Show } from "solid-js";
 
 import { SnapshotResult } from "../../../constants/default-snapshot";
 import { getConfig } from "../../../signals/config";
 import { Formatting } from "../../../utils/format";
 import { Fa, FaProps } from "../../common/Fa";
 import { DataTable, DataTableColumnDef } from "../../ui/table/DataTable";
+import {
+  TableBody,
+  TableCell,
+  TableRow,
+  Table as UiTable,
+} from "../../ui/table/Table";
 
 export type Sorting = {
   // oxlint-disable-next-line typescript/no-explicit-any
@@ -26,24 +32,43 @@ export function Table<M extends Mode>(props: {
     }),
   );
   return (
-    <DataTable
-      id="resultList"
-      onSortingChange={(val) => {
-        if (val.length === 0) {
-          props.onSortingChange({ field: "timestamp", direction: "desc" });
-        } else {
-          props.onSortingChange({
-            // oxlint-disable-next-line typescript/no-explicit-any
-            field: val[0]?.id as keyof SnapshotResult<any>,
-            direction: val[0]?.desc ? "desc" : "asc",
-          });
-        }
-      }}
-      class="table-auto [&>tbody>tr>td]:px-4 [&>tbody>tr>td]:py-2.5 [&>tbody>tr>td]:whitespace-nowrap xl:[&>tbody>tr>td]:px-6 [&>thead>tr>th]:px-4 xl:[&>thead>tr>th]:px-6"
-      data={props.data}
-      columns={columns()}
-      fallback=<span>No data found. Check your filters.</span>
-    />
+    <>
+      <UiTable>
+        <TableBody>
+          <For each={props.data}>
+            {(row) => (
+              <TableRow>
+                <TableCell>
+                  {new Formatting(getConfig).typingSpeed(row.wpm, {
+                    showDecimalPlaces: true,
+                  })}
+                </TableCell>
+                <TableCell>{row.acc}</TableCell>
+                <TableCell>{row.timestamp}</TableCell>
+              </TableRow>
+            )}
+          </For>
+        </TableBody>
+      </UiTable>
+      <DataTable
+        id="resultList"
+        onSortingChange={(val) => {
+          if (val.length === 0) {
+            props.onSortingChange({ field: "timestamp", direction: "desc" });
+          } else {
+            props.onSortingChange({
+              // oxlint-disable-next-line typescript/no-explicit-any
+              field: val[0]?.id as keyof SnapshotResult<any>,
+              direction: val[0]?.desc ? "desc" : "asc",
+            });
+          }
+        }}
+        class="table-auto [&>tbody>tr>td]:px-4 [&>tbody>tr>td]:py-2.5 [&>tbody>tr>td]:whitespace-nowrap xl:[&>tbody>tr>td]:px-6 [&>thead>tr>th]:px-4 xl:[&>thead>tr>th]:px-6"
+        data={props.data}
+        columns={columns()}
+        fallback=<span>No data found. Check your filters.</span>
+      />
+    </>
   );
 }
 

From 5b9a9b014212430b4062991e19dc4f6981e59848 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 13 Feb 2026 10:21:46 +0100
Subject: [PATCH 04/52] wip

---
 frontend/src/ts/collections/results.ts        | 17 ++++----
 .../src/ts/commandline/lists/result-saving.ts |  2 +
 .../components/pages/account/AccountPage.tsx  | 43 +++++++++++--------
 3 files changed, 35 insertions(+), 27 deletions(-)

diff --git a/frontend/src/ts/collections/results.ts b/frontend/src/ts/collections/results.ts
index 69850fb6b5ca..9a6a8ea38952 100644
--- a/frontend/src/ts/collections/results.ts
+++ b/frontend/src/ts/collections/results.ts
@@ -1,14 +1,11 @@
 import { baseKey } from "../queries/utils/keys";
-import {
-  createCollection,
-  liveQueryCollectionOptions,
-  parseLoadSubsetOptions,
-} from "@tanstack/db";
 import { queryCollectionOptions } from "@tanstack/query-db-collection";
 import { queryClient } from "../queries";
 import Ape from "../ape";
 import { SnapshotResult } from "../constants/default-snapshot";
 import { Mode } from "@monkeytype/schemas/shared";
+import { createCollection } from "@tanstack/solid-db";
+import { addToGlobal } from "../utils/misc";
 
 const queryKeys = {
   root: () => baseKey("results", { isUserSpecific: true }),
@@ -16,12 +13,13 @@ const queryKeys = {
 
 export const resultsCollection = createCollection(
   queryCollectionOptions({
+    staleTime: 1000 * 60 * 5,
     queryKey: queryKeys.root(),
-    queryFn: async (ctx) => {
-      const options = parseLoadSubsetOptions(ctx.meta?.loadSubsetOptions);
+    queryFn: async () => {
+      //const options = parseLoadSubsetOptions(ctx.meta?.loadSubsetOptions);
 
       const response = await Ape.results.get({
-        query: { limit: options.limit },
+        //query: { limit: options.limit },
       });
 
       if (response.status !== 200) {
@@ -49,7 +47,9 @@ export const resultsCollection = createCollection(
     getKey: (it) => it._id,
   }),
 );
+addToGlobal({ resultsCollection });
 
+/*
 const allResultsQuery = createCollection(
   liveQueryCollectionOptions({
     query: (q) => q.from({ results: resultsCollection }),
@@ -64,3 +64,4 @@ export async function downloadResults(): Promise<void> {
 export function getAllResults<M extends Mode>(): SnapshotResult<M>[] {
   return allResultsQuery.toArray as SnapshotResult<M>[];
 }
+*/
diff --git a/frontend/src/ts/commandline/lists/result-saving.ts b/frontend/src/ts/commandline/lists/result-saving.ts
index acf1d9600fda..27180adbc29c 100644
--- a/frontend/src/ts/commandline/lists/result-saving.ts
+++ b/frontend/src/ts/commandline/lists/result-saving.ts
@@ -13,6 +13,7 @@ const subgroup: CommandsSubgroup = {
         TestState.setSaving(false);
         void ModesNotice.update();
       },
+      active: () => !TestState.savingEnabled,
     },
     {
       id: "setResultSavingOn",
@@ -22,6 +23,7 @@ const subgroup: CommandsSubgroup = {
         TestState.setSaving(true);
         void ModesNotice.update();
       },
+      active: () => TestState.savingEnabled,
     },
   ],
 };
diff --git a/frontend/src/ts/components/pages/account/AccountPage.tsx b/frontend/src/ts/components/pages/account/AccountPage.tsx
index dda34f92b380..612a0a6fc913 100644
--- a/frontend/src/ts/components/pages/account/AccountPage.tsx
+++ b/frontend/src/ts/components/pages/account/AccountPage.tsx
@@ -1,6 +1,6 @@
 import { ResultFilters } from "@monkeytype/schemas/users";
 import { inArray, useLiveQuery } from "@tanstack/solid-db";
-import { createSignal, JSXElement, Show } from "solid-js";
+import { createMemo, createSignal, JSXElement, Show } from "solid-js";
 import { createStore } from "solid-js/store";
 
 import { resultsCollection } from "../../../collections/results";
@@ -25,29 +25,33 @@ export function AccountPage(): JSXElement {
     direction: "desc",
   });
 
+  const [modeFilter, setModeFilter] = createSignal<string[]>(["time", "words"]);
+  addToGlobal({ modeFilter, setModeFilter });
+
+  const memoFilters = createMemo(() => {
+    return {
+      mode: Object.entries(filters.mode)
+        .filter(([_, v]) => v)
+        .map(([k]) => k),
+      punctuation: Object.entries(filters.punctuation)
+        .filter(([_, v]) => v)
+        .map(([k]) => k === "on"),
+    };
+  });
+
+  const memoSorting = createMemo(() => sorting());
+
   addToGlobal({ setSorting });
   const data = useLiveQuery((q) => {
     if (!isLoggedIn()) return undefined;
     return q
       .from({ results: resultsCollection })
+      .where(({ results }) => inArray(results.mode, modeFilter()));
+    /*.where(({ results }) => inArray(results.mode, memoFilters().mode))
       .where(({ results }) =>
-        inArray(
-          results.mode,
-          Object.entries(filters.mode)
-            .filter(([_, v]) => v)
-            .map(([k]) => k),
-        ),
-      )
-      .where(({ results }) =>
-        inArray(
-          results.punctuation,
-          Object.entries(filters.punctuation)
-            .filter(([_, v]) => v)
-            .map(([k]) => k === "on"),
-        ),
-      )
-      .orderBy(({ results }) => results[sorting().field], sorting().direction)
-      .limit(10);
+        inArray(results.punctuation, memoFilters().punctuation),
+      )*/
+    //.orderBy(({ results }) => results["wpm"], sorting().direction)
   });
 
   addToGlobal({ data });
@@ -60,8 +64,9 @@ export function AccountPage(): JSXElement {
           setFilters(key, value);
         }}
       />
+      <pre>size: {data().length}</pre>
       <Table
-        data={[...data()]}
+        data={data()}
         onSortingChange={(val) => {
           console.log("### page", val);
           setSorting(val);

From 7f7f5b40ebb03209c9dd9e6e76f96bb82acbdb5d Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 13 Feb 2026 12:05:47 +0100
Subject: [PATCH 05/52] working filter and sorting

---
 frontend/package.json                         |  1 -
 frontend/src/ts/collections/results.ts        |  6 +-
 .../components/pages/account/AccountPage.tsx  | 24 +++----
 .../src/ts/components/pages/account/Table.tsx | 64 ++++++-------------
 pnpm-lock.yaml                                |  3 -
 5 files changed, 33 insertions(+), 65 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 16f27291296a..b504878b5c91 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/db": "0.5.25",
     "@tanstack/query-db-collection": "1.0.22",
     "@tanstack/solid-db": "0.2.5",
     "@tanstack/solid-query": "5.90.23",
diff --git a/frontend/src/ts/collections/results.ts b/frontend/src/ts/collections/results.ts
index 9a6a8ea38952..0055558fd9a6 100644
--- a/frontend/src/ts/collections/results.ts
+++ b/frontend/src/ts/collections/results.ts
@@ -8,12 +8,12 @@ import { createCollection } from "@tanstack/solid-db";
 import { addToGlobal } from "../utils/misc";
 
 const queryKeys = {
-  root: () => baseKey("results", { isUserSpecific: true }),
+  root: () => [...baseKey("results", { isUserSpecific: true }), Math.random()],
 };
 
 export const resultsCollection = createCollection(
   queryCollectionOptions({
-    staleTime: 1000 * 60 * 5,
+    staleTime: Infinity,
     queryKey: queryKeys.root(),
     queryFn: async () => {
       //const options = parseLoadSubsetOptions(ctx.meta?.loadSubsetOptions);
@@ -25,7 +25,9 @@ export const resultsCollection = createCollection(
       if (response.status !== 200) {
         throw new Error("Error fetching results:" + response.body.message);
       }
+
       return response.body.data.map((result) => {
+        result.id = result._id;
         result.bailedOut ??= false;
         result.blindMode ??= false;
         result.lazyMode ??= false;
diff --git a/frontend/src/ts/components/pages/account/AccountPage.tsx b/frontend/src/ts/components/pages/account/AccountPage.tsx
index 612a0a6fc913..35fbf7dfa3ac 100644
--- a/frontend/src/ts/components/pages/account/AccountPage.tsx
+++ b/frontend/src/ts/components/pages/account/AccountPage.tsx
@@ -25,7 +25,7 @@ export function AccountPage(): JSXElement {
     direction: "desc",
   });
 
-  const [modeFilter, setModeFilter] = createSignal<string[]>(["time", "words"]);
+  const [modeFilter, setModeFilter] = createSignal<string>("time");
   addToGlobal({ modeFilter, setModeFilter });
 
   const memoFilters = createMemo(() => {
@@ -39,20 +39,15 @@ export function AccountPage(): JSXElement {
     };
   });
 
-  const memoSorting = createMemo(() => sorting());
-
   addToGlobal({ setSorting });
-  const data = useLiveQuery((q) => {
-    if (!isLoggedIn()) return undefined;
-    return q
+
+  const data = useLiveQuery((q) =>
+    q
       .from({ results: resultsCollection })
-      .where(({ results }) => inArray(results.mode, modeFilter()));
-    /*.where(({ results }) => inArray(results.mode, memoFilters().mode))
-      .where(({ results }) =>
-        inArray(results.punctuation, memoFilters().punctuation),
-      )*/
-    //.orderBy(({ results }) => results["wpm"], sorting().direction)
-  });
+      .where(({ results }) => inArray(results.mode, memoFilters().mode))
+      .orderBy(({ results }) => results[sorting().field], sorting().direction)
+      .limit(10),
+  );
 
   addToGlobal({ data });
 
@@ -64,9 +59,8 @@ export function AccountPage(): JSXElement {
           setFilters(key, value);
         }}
       />
-      <pre>size: {data().length}</pre>
       <Table
-        data={data()}
+        data={[...data()]}
         onSortingChange={(val) => {
           console.log("### page", val);
           setSorting(val);
diff --git a/frontend/src/ts/components/pages/account/Table.tsx b/frontend/src/ts/components/pages/account/Table.tsx
index 5805190c4c5d..896a542a2297 100644
--- a/frontend/src/ts/components/pages/account/Table.tsx
+++ b/frontend/src/ts/components/pages/account/Table.tsx
@@ -2,19 +2,13 @@ import { Difficulty } from "@monkeytype/schemas/configs";
 import { Mode } from "@monkeytype/schemas/shared";
 import { createColumnHelper } from "@tanstack/solid-table";
 import { format as dateFormat } from "date-fns/format";
-import { createMemo, For, JSXElement, Show } from "solid-js";
+import { createMemo, JSXElement, Show } from "solid-js";
 
 import { SnapshotResult } from "../../../constants/default-snapshot";
 import { getConfig } from "../../../signals/config";
 import { Formatting } from "../../../utils/format";
 import { Fa, FaProps } from "../../common/Fa";
 import { DataTable, DataTableColumnDef } from "../../ui/table/DataTable";
-import {
-  TableBody,
-  TableCell,
-  TableRow,
-  Table as UiTable,
-} from "../../ui/table/Table";
 
 export type Sorting = {
   // oxlint-disable-next-line typescript/no-explicit-any
@@ -32,43 +26,24 @@ export function Table<M extends Mode>(props: {
     }),
   );
   return (
-    <>
-      <UiTable>
-        <TableBody>
-          <For each={props.data}>
-            {(row) => (
-              <TableRow>
-                <TableCell>
-                  {new Formatting(getConfig).typingSpeed(row.wpm, {
-                    showDecimalPlaces: true,
-                  })}
-                </TableCell>
-                <TableCell>{row.acc}</TableCell>
-                <TableCell>{row.timestamp}</TableCell>
-              </TableRow>
-            )}
-          </For>
-        </TableBody>
-      </UiTable>
-      <DataTable
-        id="resultList"
-        onSortingChange={(val) => {
-          if (val.length === 0) {
-            props.onSortingChange({ field: "timestamp", direction: "desc" });
-          } else {
-            props.onSortingChange({
-              // oxlint-disable-next-line typescript/no-explicit-any
-              field: val[0]?.id as keyof SnapshotResult<any>,
-              direction: val[0]?.desc ? "desc" : "asc",
-            });
-          }
-        }}
-        class="table-auto [&>tbody>tr>td]:px-4 [&>tbody>tr>td]:py-2.5 [&>tbody>tr>td]:whitespace-nowrap xl:[&>tbody>tr>td]:px-6 [&>thead>tr>th]:px-4 xl:[&>thead>tr>th]:px-6"
-        data={props.data}
-        columns={columns()}
-        fallback=<span>No data found. Check your filters.</span>
-      />
-    </>
+    <DataTable
+      id="resultList"
+      onSortingChange={(val) => {
+        if (val.length === 0) {
+          props.onSortingChange({ field: "timestamp", direction: "desc" });
+        } else {
+          props.onSortingChange({
+            // oxlint-disable-next-line typescript/no-explicit-any
+            field: val[0]?.id as keyof SnapshotResult<any>,
+            direction: val[0]?.desc ? "desc" : "asc",
+          });
+        }
+      }}
+      class="table-auto [&>tbody>tr>td]:px-4 [&>tbody>tr>td]:py-2.5 [&>tbody>tr>td]:whitespace-nowrap xl:[&>tbody>tr>td]:px-6 [&>thead>tr>th]:px-4 xl:[&>thead>tr>th]:px-6"
+      data={props.data}
+      columns={columns()}
+      fallback=<span>No data found. Check your filters.</span>
+    />
   );
 }
 
@@ -111,6 +86,7 @@ function getColumns<M extends Mode>({
     }),
     defineColumn("_id", {
       header: "info",
+      enableSorting: false,
       cell: (info) => (
         <>
           <span aria-label={info.row.original.language} data-balloon-pos="up">
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9a599c323350..05ec2c2cb72c 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/db':
-        specifier: 0.5.25
-        version: 0.5.25(typescript@5.9.3)
       '@tanstack/query-db-collection':
         specifier: 1.0.22
         version: 1.0.22(@tanstack/query-core@5.90.20)(typescript@5.9.3)

From 0cae531049a516596f2fde3e996867eee4cffefa Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 13 Feb 2026 14:26:07 +0100
Subject: [PATCH 06/52] working filter and sorting

---
 frontend/src/ts/collections/results.ts        |   4 +
 .../components/pages/account/AccountPage.tsx  | 108 +++++++++++++-----
 2 files changed, 85 insertions(+), 27 deletions(-)

diff --git a/frontend/src/ts/collections/results.ts b/frontend/src/ts/collections/results.ts
index 0055558fd9a6..23233a68e98b 100644
--- a/frontend/src/ts/collections/results.ts
+++ b/frontend/src/ts/collections/results.ts
@@ -27,6 +27,7 @@ export const resultsCollection = createCollection(
       }
 
       return response.body.data.map((result) => {
+        //@ts-expect-error without this somehow the collections is missing data
         result.id = result._id;
         result.bailedOut ??= false;
         result.blindMode ??= false;
@@ -42,6 +43,9 @@ export const resultsCollection = createCollection(
         result.incompleteTestSeconds ??= 0;
         result.afkDuration ??= 0;
         result.tags ??= [];
+        if (typeof result.mode2 === "number") {
+          result.mode2 = result.mode2.toString();
+        }
         return result as SnapshotResult<Mode>;
       });
     },
diff --git a/frontend/src/ts/components/pages/account/AccountPage.tsx b/frontend/src/ts/components/pages/account/AccountPage.tsx
index 35fbf7dfa3ac..d11ce6bf9642 100644
--- a/frontend/src/ts/components/pages/account/AccountPage.tsx
+++ b/frontend/src/ts/components/pages/account/AccountPage.tsx
@@ -1,18 +1,22 @@
 import { ResultFilters } from "@monkeytype/schemas/users";
 import { inArray, useLiveQuery } from "@tanstack/solid-db";
-import { createMemo, createSignal, JSXElement, Show } from "solid-js";
+import { createSignal, JSXElement, Show } from "solid-js";
 import { createStore } from "solid-js/store";
 
 import { resultsCollection } from "../../../collections/results";
 import defaultResultFilters from "../../../constants/default-result-filters";
 import { SnapshotResult } from "../../../constants/default-snapshot";
-import { isLoggedIn } from "../../../signals/core";
+import { getActivePage, isLoggedIn } from "../../../signals/core";
 import { addToGlobal } from "../../../utils/misc";
+import { Button } from "../../common/Button";
 
 import { Filters } from "./Filters";
 import { Table } from "./Table";
 
 export function AccountPage(): JSXElement {
+  //TODO change page
+  const isOpen = (): boolean => getActivePage() === "about";
+  const [limit, setLimit] = createSignal(10);
   const [filters, setFilters] =
     createStore<ResultFilters>(defaultResultFilters);
 
@@ -25,28 +29,31 @@ export function AccountPage(): JSXElement {
     direction: "desc",
   });
 
-  const [modeFilter, setModeFilter] = createSignal<string>("time");
-  addToGlobal({ modeFilter, setModeFilter });
-
-  const memoFilters = createMemo(() => {
-    return {
-      mode: Object.entries(filters.mode)
-        .filter(([_, v]) => v)
-        .map(([k]) => k),
-      punctuation: Object.entries(filters.punctuation)
-        .filter(([_, v]) => v)
-        .map(([k]) => k === "on"),
-    };
-  });
-
   addToGlobal({ setSorting });
 
   const data = useLiveQuery((q) =>
-    q
-      .from({ results: resultsCollection })
-      .where(({ results }) => inArray(results.mode, memoFilters().mode))
-      .orderBy(({ results }) => results[sorting().field], sorting().direction)
-      .limit(10),
+    !isLoggedIn() || !isOpen()
+      ? undefined
+      : q
+          .from({ r: resultsCollection })
+          .where(({ r }) =>
+            inArray(r.difficulty, valueFilter(filters.difficulty)),
+          )
+          .where(({ r }) => inArray(r.isPb, boolFilter(filters.pb)))
+          .where(({ r }) => inArray(r.mode, valueFilter(filters.mode)))
+          //.where(({ r }) =>        inArray(r.quoteLength, valueFilter(filters.quoteLength)),      )
+          .where(({ r }) =>
+            inArray(r.mode2, [
+              ...valueFilter(filters.words),
+              ...valueFilter(filters.time),
+            ]),
+          )
+          .where(({ r }) =>
+            inArray(r.punctuation, boolFilter(filters.punctuation)),
+          )
+          .where(({ r }) => inArray(r.numbers, boolFilter(filters.numbers)))
+          .orderBy(({ r }) => r[sorting().field], sorting().direction)
+          .limit(limit()),
   );
 
   addToGlobal({ data });
@@ -59,13 +66,60 @@ export function AccountPage(): JSXElement {
           setFilters(key, value);
         }}
       />
-      <Table
-        data={[...data()]}
-        onSortingChange={(val) => {
-          console.log("### page", val);
-          setSorting(val);
-        }}
+
+      {/*
+      <Button text="words" onClick={() => setModeFilter("words")} />
+      <Button text="time" onClick={() => setModeFilter("time")} />
+      <Button
+        text="wpm desc"
+        onClick={() => setSorting({ field: "wpm", direction: "desc" })}
+      />
+      <Button
+        text="wpm asc"
+        onClick={() => setSorting({ field: "wpm", direction: "asc" })}
+      />
+      <Button
+        text="acc desc"
+        onClick={() => setSorting({ field: "acc", direction: "desc" })}
+      />
+      <Button
+        text="acc asc"
+        onClick={() => setSorting({ field: "acc", direction: "asc" })}
+      />
+      <pre>
+        liveQuery size:{data().length} time: time:{" "}
+        {data().filter((it) => it.mode === "time").length}, words:{" "}
+        {data().filter((it) => it.mode === "words").length}
+      </pre>
+      
+      <pre>
+        {modeFilter()}
+        collection size:{resultsCollection.toArray.length} time:{" "}
+        {resultsCollection.toArray.filter((it) => it.mode === "time").length},
+        words:{" "}
+        {resultsCollection.toArray.filter((it) => it.mode === "words").length}
+      </pre>
+      */}
+      <Table data={[...data()]} onSortingChange={(val) => setSorting(val)} />
+      <Button
+        text="load more"
+        disabled={data.isLoading}
+        onClick={() => setLimit((limit) => limit + 10)}
       />
     </Show>
   );
 }
+
+function valueFilter(val: Record<string, boolean>): string[] {
+  return Object.entries(val)
+    .filter(([_, v]) => v)
+    .map(([k]) => k);
+}
+
+function boolFilter(
+  val: Record<"on" | "off", boolean> | Record<"yes" | "no", boolean>,
+): boolean[] {
+  return Object.entries(val)
+    .filter(([_, v]) => v)
+    .map(([k]) => k === "on" || k === "yes");
+}

From e6eb7595d7ac43349307cccd7a011129d878b75d Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sat, 14 Feb 2026 00:08:11 +0100
Subject: [PATCH 07/52] be migrate, move liveQuery and filters to
 collections/results

---
 backend/src/utils/result.ts                   |   4 +
 .../elements/account/result-filters.spec.ts   |   3 +-
 frontend/src/ts/collections/results.ts        | 111 ++++++++++++--
 .../components/pages/account/AccountPage.tsx  | 136 +++++++-----------
 .../ts/components/pages/account/Filters.tsx   |  19 ++-
 .../src/ts/components/ui/table/DataTable.tsx  |   1 +
 .../src/ts/elements/account/result-filters.ts |   6 +-
 7 files changed, 179 insertions(+), 101 deletions(-)

diff --git a/backend/src/utils/result.ts b/backend/src/utils/result.ts
index 2c79813f8b22..50c98b76c070 100644
--- a/backend/src/utils/result.ts
+++ b/backend/src/utils/result.ts
@@ -122,5 +122,9 @@ export function replaceLegacyValues(result: DBResult): DBResult {
     };
   }
 
+  if (typeof result.mode2 === "number") {
+    result.mode2 = (result.mode2 as number).toString();
+  }
+
   return result;
 }
diff --git a/frontend/__tests__/elements/account/result-filters.spec.ts b/frontend/__tests__/elements/account/result-filters.spec.ts
index 3403dda6b256..827ce47a1ca1 100644
--- a/frontend/__tests__/elements/account/result-filters.spec.ts
+++ b/frontend/__tests__/elements/account/result-filters.spec.ts
@@ -1,6 +1,7 @@
 import { describe, it, expect } from "vitest";
 import defaultResultFilters from "../../../src/ts/constants/default-result-filters";
-import { mergeWithDefaultFilters } from "../../../src/ts/elements/account/result-filters";
+import { __testing } from "../../../src/ts/elements/account/result-filters";
+const mergeWithDefaultFilters = __testing.mergeWithDefaultFilters;
 
 describe("result-filters.ts", () => {
   describe("mergeWithDefaultFilters", () => {
diff --git a/frontend/src/ts/collections/results.ts b/frontend/src/ts/collections/results.ts
index 23233a68e98b..9cd30620e527 100644
--- a/frontend/src/ts/collections/results.ts
+++ b/frontend/src/ts/collections/results.ts
@@ -1,11 +1,32 @@
-import { baseKey } from "../queries/utils/keys";
+import { Mode } from "@monkeytype/schemas/shared";
+import { ResultFilters } from "@monkeytype/schemas/users";
 import { queryCollectionOptions } from "@tanstack/query-db-collection";
-import { queryClient } from "../queries";
+import {
+  createCollection,
+  inArray,
+  InitialQueryBuilder,
+  useLiveQuery,
+} from "@tanstack/solid-db";
+import { createMemo } from "solid-js";
 import Ape from "../ape";
 import { SnapshotResult } from "../constants/default-snapshot";
-import { Mode } from "@monkeytype/schemas/shared";
-import { createCollection } from "@tanstack/solid-db";
-import { addToGlobal } from "../utils/misc";
+import { queryClient } from "../queries";
+import { baseKey } from "../queries/utils/keys";
+
+export type SortDirection = "asc" | "desc";
+
+export type ResultsSortField = keyof SnapshotResult<Mode>;
+type ResultsQueryState = {
+  difficulty: SnapshotResult<Mode>["difficulty"][];
+  pb: SnapshotResult<Mode>["isPb"][];
+  mode: SnapshotResult<Mode>["mode"][];
+  mode2: SnapshotResult<Mode>["mode2"][];
+  punctuation: SnapshotResult<Mode>["punctuation"][];
+  numbers: SnapshotResult<Mode>["numbers"][];
+  sortField: ResultsSortField;
+  sortDirection: SortDirection;
+  limit: number;
+};
 
 const queryKeys = {
   root: () => [...baseKey("results", { isUserSpecific: true }), Math.random()],
@@ -29,6 +50,7 @@ export const resultsCollection = createCollection(
       return response.body.data.map((result) => {
         //@ts-expect-error without this somehow the collections is missing data
         result.id = result._id;
+        //results strip default values, add them back
         result.bailedOut ??= false;
         result.blindMode ??= false;
         result.lazyMode ??= false;
@@ -43,9 +65,6 @@ export const resultsCollection = createCollection(
         result.incompleteTestSeconds ??= 0;
         result.afkDuration ??= 0;
         result.tags ??= [];
-        if (typeof result.mode2 === "number") {
-          result.mode2 = result.mode2.toString();
-        }
         return result as SnapshotResult<Mode>;
       });
     },
@@ -53,7 +72,81 @@ export const resultsCollection = createCollection(
     getKey: (it) => it._id,
   }),
 );
-addToGlobal({ resultsCollection });
+
+// oxlint-disable-next-line typescript/explicit-function-return-type
+export function useResultsLiveQuery(params: {
+  enabled: () => boolean;
+  filters: () => ResultFilters;
+  sorting: () => {
+    field: ResultsSortField;
+    direction: SortDirection;
+  };
+  limit: () => number;
+}) {
+  const queryState = createMemo(() => {
+    if (!params.enabled()) {
+      return undefined;
+    }
+
+    return createResultsQueryState(
+      params.filters(),
+      params.sorting(),
+      params.limit(),
+    );
+  });
+
+  return useLiveQuery((q) => {
+    const state = queryState();
+    if (state === undefined) return undefined;
+    return buildResultsQuery(state)(q);
+  });
+}
+
+function buildResultsQuery(state: ResultsQueryState) {
+  return (q: InitialQueryBuilder) =>
+    q
+      .from({ r: resultsCollection })
+      .where(({ r }) => inArray(r.difficulty, state.difficulty))
+      .where(({ r }) => inArray(r.isPb, state.pb))
+      .where(({ r }) => inArray(r.mode, state.mode))
+      .where(({ r }) => inArray(r.mode2, state.mode2))
+      .where(({ r }) => inArray(r.punctuation, state.punctuation))
+      .where(({ r }) => inArray(r.numbers, state.numbers))
+      .orderBy(({ r }) => r[state.sortField], state.sortDirection)
+      .limit(state.limit);
+}
+
+function createResultsQueryState(
+  filters: ResultFilters,
+  sorting: { field: ResultsSortField; direction: SortDirection },
+  limit: number,
+): ResultsQueryState {
+  return {
+    difficulty: valueFilter(filters.difficulty),
+    pb: boolFilter(filters.pb),
+    mode: valueFilter(filters.mode),
+    mode2: [...valueFilter(filters.words), ...valueFilter(filters.time)],
+    punctuation: boolFilter(filters.punctuation),
+    numbers: boolFilter(filters.numbers),
+    sortField: sorting.field,
+    sortDirection: sorting.direction,
+    limit,
+  };
+}
+
+function valueFilter<T extends string>(val: Partial<Record<T, boolean>>): T[] {
+  return Object.entries(val)
+    .filter(([_, v]) => v as boolean) //TODO remove as?
+    .map(([k]) => k as T);
+}
+
+function boolFilter(
+  val: Record<"on" | "off", boolean> | Record<"yes" | "no", boolean>,
+): boolean[] {
+  return Object.entries(val)
+    .filter(([_, v]) => v)
+    .map(([k]) => k === "on" || k === "yes");
+}
 
 /*
 const allResultsQuery = createCollection(
diff --git a/frontend/src/ts/components/pages/account/AccountPage.tsx b/frontend/src/ts/components/pages/account/AccountPage.tsx
index d11ce6bf9642..ec5e378d7c22 100644
--- a/frontend/src/ts/components/pages/account/AccountPage.tsx
+++ b/frontend/src/ts/components/pages/account/AccountPage.tsx
@@ -1,13 +1,13 @@
-import { ResultFilters } from "@monkeytype/schemas/users";
-import { inArray, useLiveQuery } from "@tanstack/solid-db";
+import { ResultFilters, ResultFiltersSchema } from "@monkeytype/schemas/users";
 import { createSignal, JSXElement, Show } from "solid-js";
-import { createStore } from "solid-js/store";
 
-import { resultsCollection } from "../../../collections/results";
+import { useResultsLiveQuery } from "../../../collections/results";
 import defaultResultFilters from "../../../constants/default-result-filters";
 import { SnapshotResult } from "../../../constants/default-snapshot";
+import { useLocalStorage } from "../../../hooks/useLocalStorage";
 import { getActivePage, isLoggedIn } from "../../../signals/core";
-import { addToGlobal } from "../../../utils/misc";
+import { isObject, typedKeys } from "../../../utils/misc";
+import { sanitize } from "../../../utils/sanitize";
 import { Button } from "../../common/Button";
 
 import { Filters } from "./Filters";
@@ -17,8 +17,13 @@ export function AccountPage(): JSXElement {
   //TODO change page
   const isOpen = (): boolean => getActivePage() === "about";
   const [limit, setLimit] = createSignal(10);
-  const [filters, setFilters] =
-    createStore<ResultFilters>(defaultResultFilters);
+
+  const [filters, setFilters] = useLocalStorage({
+    key: "resultFilters",
+    schema: ResultFiltersSchema,
+    fallback: defaultResultFilters,
+    migrate: migrateFilterStorage,
+  });
 
   const [sorting, setSorting] = createSignal<{
     // oxlint-disable-next-line typescript/no-explicit-any
@@ -29,77 +34,22 @@ export function AccountPage(): JSXElement {
     direction: "desc",
   });
 
-  addToGlobal({ setSorting });
-
-  const data = useLiveQuery((q) =>
-    !isLoggedIn() || !isOpen()
-      ? undefined
-      : q
-          .from({ r: resultsCollection })
-          .where(({ r }) =>
-            inArray(r.difficulty, valueFilter(filters.difficulty)),
-          )
-          .where(({ r }) => inArray(r.isPb, boolFilter(filters.pb)))
-          .where(({ r }) => inArray(r.mode, valueFilter(filters.mode)))
-          //.where(({ r }) =>        inArray(r.quoteLength, valueFilter(filters.quoteLength)),      )
-          .where(({ r }) =>
-            inArray(r.mode2, [
-              ...valueFilter(filters.words),
-              ...valueFilter(filters.time),
-            ]),
-          )
-          .where(({ r }) =>
-            inArray(r.punctuation, boolFilter(filters.punctuation)),
-          )
-          .where(({ r }) => inArray(r.numbers, boolFilter(filters.numbers)))
-          .orderBy(({ r }) => r[sorting().field], sorting().direction)
-          .limit(limit()),
-  );
-
-  addToGlobal({ data });
+  const data = useResultsLiveQuery({
+    enabled: () => isOpen() && isLoggedIn(),
+    filters,
+    sorting,
+    limit,
+  });
 
   return (
     <Show when={isLoggedIn()}>
       <Filters
-        filters={filters}
-        onChangeFilter={(key, value) => {
-          setFilters(key, value);
-        }}
+        filters={filters()}
+        onChangeFilter={(key, value) =>
+          setFilters({ ...filters(), [key]: value })
+        }
       />
 
-      {/*
-      <Button text="words" onClick={() => setModeFilter("words")} />
-      <Button text="time" onClick={() => setModeFilter("time")} />
-      <Button
-        text="wpm desc"
-        onClick={() => setSorting({ field: "wpm", direction: "desc" })}
-      />
-      <Button
-        text="wpm asc"
-        onClick={() => setSorting({ field: "wpm", direction: "asc" })}
-      />
-      <Button
-        text="acc desc"
-        onClick={() => setSorting({ field: "acc", direction: "desc" })}
-      />
-      <Button
-        text="acc asc"
-        onClick={() => setSorting({ field: "acc", direction: "asc" })}
-      />
-      <pre>
-        liveQuery size:{data().length} time: time:{" "}
-        {data().filter((it) => it.mode === "time").length}, words:{" "}
-        {data().filter((it) => it.mode === "words").length}
-      </pre>
-      
-      <pre>
-        {modeFilter()}
-        collection size:{resultsCollection.toArray.length} time:{" "}
-        {resultsCollection.toArray.filter((it) => it.mode === "time").length},
-        words:{" "}
-        {resultsCollection.toArray.filter((it) => it.mode === "words").length}
-      </pre>
-      */}
       <Table data={[...data()]} onSortingChange={(val) => setSorting(val)} />
       <Button
         text="load more"
@@ -110,16 +60,36 @@ export function AccountPage(): JSXElement {
   );
 }
 
-function valueFilter(val: Record<string, boolean>): string[] {
-  return Object.entries(val)
-    .filter(([_, v]) => v)
-    .map(([k]) => k);
-}
+function migrateFilterStorage(unknown: unknown): ResultFilters {
+  if (!isObject(unknown)) {
+    return defaultResultFilters;
+  }
+  const filters = sanitize(
+    ResultFiltersSchema.partial().strip(),
+    unknown as ResultFilters,
+  );
 
-function boolFilter(
-  val: Record<"on" | "off", boolean> | Record<"yes" | "no", boolean>,
-): boolean[] {
-  return Object.entries(val)
-    .filter(([_, v]) => v)
-    .map(([k]) => k === "on" || k === "yes");
+  try {
+    const merged = {} as ResultFilters;
+    for (const groupKey of typedKeys(defaultResultFilters)) {
+      if (groupKey === "_id") {
+        let id = filters[groupKey] ?? defaultResultFilters[groupKey];
+        if (id === "default-result-filters-id" || id === "") {
+          id = "default";
+        }
+        merged[groupKey] = id;
+      } else if (groupKey === "name") {
+        merged[groupKey] = filters[groupKey] ?? defaultResultFilters[groupKey];
+      } else {
+        // @ts-expect-error i cant figure this out
+        merged[groupKey] = {
+          ...defaultResultFilters[groupKey],
+          ...filters[groupKey],
+        };
+      }
+    }
+    return merged;
+  } catch (e) {
+    return defaultResultFilters;
+  }
 }
diff --git a/frontend/src/ts/components/pages/account/Filters.tsx b/frontend/src/ts/components/pages/account/Filters.tsx
index a7cd4431692e..5772c4b17948 100644
--- a/frontend/src/ts/components/pages/account/Filters.tsx
+++ b/frontend/src/ts/components/pages/account/Filters.tsx
@@ -11,7 +11,10 @@ const placeholder = (): void => {
 
 export function Filters(props: {
   filters: ResultFilters;
-  onChangeFilter: (id: keyof ResultFilters, value: object) => void;
+  onChangeFilter: (
+    id: keyof ResultFilters,
+    value: Record<string, boolean>,
+  ) => void;
 }): JSXElement {
   const [isShowAdvanced, setShowAdvanced] = createSignal(true);
 
@@ -104,12 +107,14 @@ export function Filters(props: {
                   if (options.onSelect !== undefined) {
                     options.onSelect(item.id);
                   } else {
-                    // oxlint-disable-next-line typescript/no-explicit-any typescript/no-unsafe-return
-                    props.onChangeFilter(options.group, (old: any) => ({
-                      ...old,
-                      // oxlint-disable-next-line typescript/strict-boolean-expressions typescript/no-unsafe-member-access
-                      [item.id]: !old[item.id],
-                    }));
+                    props.onChangeFilter(options.group, {
+                      ...(props.filters[options.group] as Record<
+                        string,
+                        boolean
+                      >),
+                      // oxlint-disable-next-line typescript/strict-boolean-expressions
+                      [item.id]: !props.filters[options.group][item.id],
+                    });
                   }
                 }}
               />
diff --git a/frontend/src/ts/components/ui/table/DataTable.tsx b/frontend/src/ts/components/ui/table/DataTable.tsx
index 1e5946ad8be1..176d0ef97004 100644
--- a/frontend/src/ts/components/ui/table/DataTable.tsx
+++ b/frontend/src/ts/components/ui/table/DataTable.tsx
@@ -130,6 +130,7 @@ export function DataTable<TData, TValue = unknown>(
       props.onSortingChange?.(sorting());
     },
 
+    //oxlint-disable-next-line solid/reactivity
     ...(props.onSortingChange
       ? { manualSorting: true }
       : { getSortedRowModel: getSortedRowModel() }),
diff --git a/frontend/src/ts/elements/account/result-filters.ts b/frontend/src/ts/elements/account/result-filters.ts
index fffecacb1e48..1c051e2e24a5 100644
--- a/frontend/src/ts/elements/account/result-filters.ts
+++ b/frontend/src/ts/elements/account/result-filters.ts
@@ -22,7 +22,7 @@ import * as AuthEvent from "../../observables/auth-event";
 import { sanitize } from "../../utils/sanitize";
 import { qs, qsa } from "../../utils/dom";
 
-export function mergeWithDefaultFilters(
+function mergeWithDefaultFilters(
   filters: Partial<ResultFilters>,
 ): ResultFilters {
   try {
@@ -963,3 +963,7 @@ AuthEvent.subscribe((event) => {
     void load();
   }
 });
+
+export const __testing = {
+  mergeWithDefaultFilters,
+};

From 3cc652122ef6358c0439d9813d7efcb556e611df Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Mon, 16 Feb 2026 21:05:13 +0100
Subject: [PATCH 08/52] wip

---
 frontend/src/ts/collections/results.ts        | 118 +++++++++++---
 .../components/pages/account/AccountPage.tsx  |  13 +-
 .../ts/components/pages/account/TestStats.tsx | 150 ++++++++++++++++++
 frontend/src/ts/constants/default-snapshot.ts |   1 +
 frontend/src/ts/utils/format.ts               |  12 +-
 5 files changed, 269 insertions(+), 25 deletions(-)
 create mode 100644 frontend/src/ts/components/pages/account/TestStats.tsx

diff --git a/frontend/src/ts/collections/results.ts b/frontend/src/ts/collections/results.ts
index 9cd30620e527..9f9777395485 100644
--- a/frontend/src/ts/collections/results.ts
+++ b/frontend/src/ts/collections/results.ts
@@ -2,12 +2,16 @@ import { Mode } from "@monkeytype/schemas/shared";
 import { ResultFilters } from "@monkeytype/schemas/users";
 import { queryCollectionOptions } from "@tanstack/query-db-collection";
 import {
+  avg,
+  count,
   createCollection,
+  createLiveQueryCollection,
   inArray,
-  InitialQueryBuilder,
+  max,
+  sum,
   useLiveQuery,
 } from "@tanstack/solid-db";
-import { createMemo } from "solid-js";
+import { Accessor, createMemo } from "solid-js";
 import Ape from "../ape";
 import { SnapshotResult } from "../constants/default-snapshot";
 import { queryClient } from "../queries";
@@ -29,7 +33,7 @@ type ResultsQueryState = {
 };
 
 const queryKeys = {
-  root: () => [...baseKey("results", { isUserSpecific: true }), Math.random()],
+  root: () => [...baseKey("results", { isUserSpecific: true })],
 };
 
 export const resultsCollection = createCollection(
@@ -65,7 +69,11 @@ export const resultsCollection = createCollection(
         result.incompleteTestSeconds ??= 0;
         result.afkDuration ??= 0;
         result.tags ??= [];
-        return result as SnapshotResult<Mode>;
+        result.isPb ??= false;
+        return {
+          ...result,
+          words: Math.round((result.wpm / 60) * result.testDuration),
+        } as SnapshotResult<Mode>;
       });
     },
     queryClient,
@@ -73,16 +81,33 @@ export const resultsCollection = createCollection(
   }),
 );
 
-// oxlint-disable-next-line typescript/explicit-function-return-type
-export function useResultsLiveQuery(params: {
-  enabled: () => boolean;
-  filters: () => ResultFilters;
-  sorting: () => {
+export type ResultsQuery = {
+  enabled: Accessor<boolean>;
+  filters: Accessor<ResultFilters>;
+  sorting: Accessor<{
     field: ResultsSortField;
     direction: SortDirection;
-  };
-  limit: () => number;
-}) {
+  }>;
+  limit: Accessor<number>;
+};
+
+export type ResultStats = {
+  words: number;
+  restarted: number;
+  completed: number;
+  maxWpm: number;
+  avgWpm: number;
+  maxRaw: number;
+  avgRaw: number;
+  maxAcc: number;
+  avgAcc: number;
+  maxConsistency: number;
+  avgConsistency: number;
+  timeTyping: number;
+};
+
+// oxlint-disable-next-line typescript/explicit-function-return-type
+export function useResultsLiveQuery(params: ResultsQuery) {
   const queryState = createMemo(() => {
     if (!params.enabled()) {
       return undefined;
@@ -98,22 +123,75 @@ export function useResultsLiveQuery(params: {
   return useLiveQuery((q) => {
     const state = queryState();
     if (state === undefined) return undefined;
-    return buildResultsQuery(state)(q);
+    return q
+      .from({ r: getFilteredResults(state) })
+      .orderBy(({ r }) => r[state.sortField], state.sortDirection)
+      .limit(state.limit);
   });
 }
-
-function buildResultsQuery(state: ResultsQueryState) {
-  return (q: InitialQueryBuilder) =>
+// oxlint-disable-next-line typescript/explicit-function-return-type
+function getFilteredResults(state: ResultsQueryState) {
+  return createLiveQueryCollection((q) =>
     q
       .from({ r: resultsCollection })
       .where(({ r }) => inArray(r.difficulty, state.difficulty))
       .where(({ r }) => inArray(r.isPb, state.pb))
       .where(({ r }) => inArray(r.mode, state.mode))
-      .where(({ r }) => inArray(r.mode2, state.mode2))
+      /*.where(({ r }) =>
+        or(inArray(r.mode, ["quote", "zen"]), inArray(r.mode2, state.mode2)),
+      )*/
       .where(({ r }) => inArray(r.punctuation, state.punctuation))
-      .where(({ r }) => inArray(r.numbers, state.numbers))
-      .orderBy(({ r }) => r[state.sortField], state.sortDirection)
-      .limit(state.limit);
+      .where(({ r }) => inArray(r.numbers, state.numbers)),
+  );
+}
+
+// oxlint-disable-next-line typescript/explicit-function-return-type
+export function useResultStatsLiveQuery(
+  params: ResultsQuery,
+  options?: { lastTen?: true },
+) {
+  const queryState = createMemo(() => {
+    if (!params.enabled()) {
+      return undefined;
+    }
+
+    return createResultsQueryState(
+      params.filters(),
+      params.sorting(),
+      params.limit(),
+    );
+  });
+
+  return useLiveQuery((q) => {
+    const state = queryState();
+    if (state === undefined) return undefined;
+
+    return (
+      options?.lastTen
+        ? q.from({
+            r: q
+              .from({ r: getFilteredResults(state) })
+              .orderBy(({ r }) => r.timestamp, "desc")
+              .limit(10),
+          })
+        : q.from({ r: getFilteredResults(state) })
+    )
+      .select(({ r }) => ({
+        words: sum(r.words),
+        completed: count(r._id),
+        restarted: sum(r.restartCount),
+        timeTyping: sum(r.testDuration),
+        maxWpm: max(r.wpm),
+        avgWpm: avg(r.wpm),
+        maxRaw: max(r.rawWpm),
+        avgRaw: avg(r.rawWpm),
+        maxAcc: max(r.acc),
+        avgAcc: avg(r.acc),
+        maxConsistency: max(r.consistency),
+        avgConsistency: avg(r.consistency),
+      }))
+      .findOne();
+  });
 }
 
 function createResultsQueryState(
diff --git a/frontend/src/ts/components/pages/account/AccountPage.tsx b/frontend/src/ts/components/pages/account/AccountPage.tsx
index ec5e378d7c22..a27f8ac5f7f3 100644
--- a/frontend/src/ts/components/pages/account/AccountPage.tsx
+++ b/frontend/src/ts/components/pages/account/AccountPage.tsx
@@ -1,7 +1,10 @@
 import { ResultFilters, ResultFiltersSchema } from "@monkeytype/schemas/users";
 import { createSignal, JSXElement, Show } from "solid-js";
 
-import { useResultsLiveQuery } from "../../../collections/results";
+import {
+  ResultsQuery,
+  useResultsLiveQuery,
+} from "../../../collections/results";
 import defaultResultFilters from "../../../constants/default-result-filters";
 import { SnapshotResult } from "../../../constants/default-snapshot";
 import { useLocalStorage } from "../../../hooks/useLocalStorage";
@@ -12,6 +15,7 @@ import { Button } from "../../common/Button";
 
 import { Filters } from "./Filters";
 import { Table } from "./Table";
+import { TestStats } from "./TestStats";
 
 export function AccountPage(): JSXElement {
   //TODO change page
@@ -34,12 +38,14 @@ export function AccountPage(): JSXElement {
     direction: "desc",
   });
 
-  const data = useResultsLiveQuery({
+  const resultsQuery: ResultsQuery = {
     enabled: () => isOpen() && isLoggedIn(),
     filters,
     sorting,
     limit,
-  });
+  };
+
+  const data = useResultsLiveQuery(resultsQuery);
 
   return (
     <Show when={isLoggedIn()}>
@@ -50,6 +56,7 @@ export function AccountPage(): JSXElement {
         }
       />
 
+      <TestStats resultsQuery={resultsQuery} />
       <Table data={[...data()]} onSortingChange={(val) => setSorting(val)} />
       <Button
         text="load more"
diff --git a/frontend/src/ts/components/pages/account/TestStats.tsx b/frontend/src/ts/components/pages/account/TestStats.tsx
new file mode 100644
index 000000000000..b28a9f23cf41
--- /dev/null
+++ b/frontend/src/ts/components/pages/account/TestStats.tsx
@@ -0,0 +1,150 @@
+import { createMemo, JSXElement, Show } from "solid-js";
+
+import {
+  ResultsQuery,
+  ResultStats,
+  useResultStatsLiveQuery,
+} from "../../../collections/results";
+import { getConfig } from "../../../signals/config";
+import { secondsToString } from "../../../utils/date-and-time";
+import { Formatting } from "../../../utils/format";
+
+export function TestStats(props: { resultsQuery: ResultsQuery }): JSXElement {
+  const format = createMemo(() => new Formatting(getConfig));
+
+  const formatWpm = createMemo(
+    () =>
+      (val: number): string =>
+        format().typingSpeed(val, { showDecimalPlaces: true }),
+  );
+  const formatPercentage = createMemo(
+    () =>
+      (val: number): string =>
+        format().percentage(val, { showDecimalPlaces: true }),
+  );
+
+  const statsQuery = useResultStatsLiveQuery(props.resultsQuery);
+  const last10StatsQuery = useResultStatsLiveQuery(props.resultsQuery, {
+    lastTen: true,
+  });
+
+  const stats = createMemo<ResultStats>(() => statsQuery()[0] as ResultStats);
+  const last10 = createMemo<ResultStats>(
+    () => last10StatsQuery()[0] as ResultStats,
+  );
+
+  //TODO use asynccontent or loader
+  return (
+    <Show
+      when={
+        statsQuery.isReady &&
+        last10StatsQuery.isReady &&
+        stats() !== undefined &&
+        last10() !== undefined
+      }
+    >
+      <div class="flex items-center justify-center text-sub">
+        estimate words typed{" "}
+        <span class="p-5 text-5xl text-text">{stats().words}</span>
+      </div>
+      <div class="grid grid-cols-3 gap-4">
+        <Stat
+          header="tests started"
+          value={stats().restarted + stats().completed}
+        />
+        <Stat header="tests completed" value={stats().completed} />
+        <Stat
+          header="time typing"
+          value={stats().timeTyping}
+          formatter={(val) => secondsToString(Math.round(val), true, true)}
+        />
+
+        <Stat
+          header={`highest ${format().typingSpeedUnit}`}
+          value={stats().maxWpm}
+          formatter={formatWpm()}
+        />
+        <Stat
+          header={`average ${format().typingSpeedUnit}`}
+          value={stats().avgWpm}
+          formatter={formatWpm()}
+        />
+        <Stat
+          header={`average ${format().typingSpeedUnit} (last 10 tests)`}
+          value={last10().avgWpm}
+          formatter={formatWpm()}
+        />
+
+        <Stat
+          header={`highest raw ${format().typingSpeedUnit}`}
+          value={stats().maxRaw}
+          formatter={formatWpm()}
+        />
+        <Stat
+          header={`average raw ${format().typingSpeedUnit}`}
+          value={stats().avgRaw}
+          formatter={formatWpm()}
+        />
+        <Stat
+          header={`average raw ${format().typingSpeedUnit} (last 10 tests)`}
+          value={last10().avgRaw}
+          formatter={formatWpm()}
+        />
+
+        <Stat
+          header={`highest acc`}
+          value={stats().maxAcc}
+          formatter={formatPercentage()}
+        />
+        <Stat
+          header={`average acc`}
+          value={stats().avgAcc}
+          formatter={formatPercentage()}
+        />
+        <Stat
+          header={`average acc (last 10 tests)`}
+          value={last10().avgAcc}
+          formatter={formatPercentage()}
+        />
+
+        <Stat
+          header={`highest consistency`}
+          value={stats().maxConsistency}
+          formatter={formatPercentage()}
+        />
+        <Stat
+          header={`average consistency`}
+          value={stats().avgConsistency}
+          formatter={formatPercentage()}
+        />
+        <Stat
+          header={`average consistency (last 10 tests)`}
+          value={last10().avgConsistency}
+          formatter={formatPercentage()}
+        />
+      </div>
+    </Show>
+  );
+}
+
+function Stat(options: {
+  header: string;
+  value: number | undefined;
+  formatter?: (value: number) => string;
+  subline?: string;
+}): JSXElement {
+  return (
+    <div>
+      <div class="text-sub">{options.header}</div>
+
+      <div class="text-5xl leading-[1.1]">
+        <Show when={options.value !== undefined}>
+          {options.formatter !== undefined
+            ? options.formatter(options.value ?? -1)
+            : options.value}
+        </Show>
+      </div>
+      <div>{options.subline}</div>
+    </div>
+  );
+}
diff --git a/frontend/src/ts/constants/default-snapshot.ts b/frontend/src/ts/constants/default-snapshot.ts
index 3435676d3d76..9563f98433e0 100644
--- a/frontend/src/ts/constants/default-snapshot.ts
+++ b/frontend/src/ts/constants/default-snapshot.ts
@@ -50,6 +50,7 @@ export type SnapshotResult<M extends Mode> = Omit<
   incompleteTestSeconds: number;
   afkDuration: number;
   tags: string[];
+  words: number;
 };
 
 export type Snapshot = Omit<
diff --git a/frontend/src/ts/utils/format.ts b/frontend/src/ts/utils/format.ts
index d4bfd28188bb..bf50d649b47a 100644
--- a/frontend/src/ts/utils/format.ts
+++ b/frontend/src/ts/utils/format.ts
@@ -23,9 +23,16 @@ export type FallbackOptions = {
   fallback?: string;
 };
 
+type FormatConfig = Pick<
+  ConfigType,
+  "typingSpeedUnit" | "alwaysShowDecimalPlaces"
+>;
+
 export class Formatting {
-  constructor(private config: ConfigType) {
-    //
+  private config: FormatConfig;
+
+  constructor(config: FormatConfig) {
+    this.config = config;
   }
 
   typingSpeed(
@@ -67,6 +74,7 @@ export class Formatting {
     const options = { ...FORMAT_DEFAULT_OPTIONS, ...formatOptions };
     return this.number(value, options);
   }
+
   get typingSpeedUnit(): TypingSpeedUnit {
     return this.config.typingSpeedUnit;
   }

From a4ae35f72f4a334445110e93961c11a76c128a9c Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Tue, 17 Feb 2026 12:47:38 +0100
Subject: [PATCH 09/52] wip

---
 frontend/src/ts/collections/results.ts        | 32 +++++++-
 .../ts/components/pages/account/TestStats.tsx | 77 ++++++++++++-------
 frontend/src/ts/constants/default-snapshot.ts |  2 +
 3 files changed, 81 insertions(+), 30 deletions(-)

diff --git a/frontend/src/ts/collections/results.ts b/frontend/src/ts/collections/results.ts
index 9f9777395485..d81a02ebc6b5 100644
--- a/frontend/src/ts/collections/results.ts
+++ b/frontend/src/ts/collections/results.ts
@@ -16,6 +16,7 @@ import Ape from "../ape";
 import { SnapshotResult } from "../constants/default-snapshot";
 import { queryClient } from "../queries";
 import { baseKey } from "../queries/utils/keys";
+import { ResultMinified } from "@monkeytype/schemas/results";
 
 export type SortDirection = "asc" | "desc";
 
@@ -72,6 +73,7 @@ export const resultsCollection = createCollection(
         result.isPb ??= false;
         return {
           ...result,
+          timeTyping: calcTimeTyping(result),
           words: Math.round((result.wpm / 60) * result.testDuration),
         } as SnapshotResult<Mode>;
       });
@@ -129,6 +131,7 @@ export function useResultsLiveQuery(params: ResultsQuery) {
       .limit(state.limit);
   });
 }
+
 // oxlint-disable-next-line typescript/explicit-function-return-type
 function getFilteredResults(state: ResultsQueryState) {
   return createLiveQueryCollection((q) =>
@@ -168,7 +171,8 @@ export function useResultStatsLiveQuery(
 
     return (
       options?.lastTen
-        ? q.from({
+        ? //for lastTen we need a sub-query to apply the sort+limit first and then run the aggregations
+          q.from({
             r: q
               .from({ r: getFilteredResults(state) })
               .orderBy(({ r }) => r.timestamp, "desc")
@@ -180,7 +184,7 @@ export function useResultStatsLiveQuery(
         words: sum(r.words),
         completed: count(r._id),
         restarted: sum(r.restartCount),
-        timeTyping: sum(r.testDuration),
+        timeTyping: sum(r.timeTyping),
         maxWpm: max(r.wpm),
         avgWpm: avg(r.wpm),
         maxRaw: max(r.rawWpm),
@@ -226,6 +230,30 @@ function boolFilter(
     .map(([k]) => k === "on" || k === "yes");
 }
 
+function calcTimeTyping(result: ResultMinified): number {
+  let tt = 0;
+  if (
+    result.testDuration === undefined &&
+    result.mode2 !== "custom" &&
+    result.mode2 !== "zen"
+  ) {
+    //test finished before testDuration field was introduced - estimate
+    if (result.mode === "time") {
+      tt = parseInt(result.mode2);
+    } else if (result.mode === "words") {
+      tt = (parseInt(result.mode2) / result.wpm) * 60;
+    }
+  } else {
+    tt = parseFloat(result.testDuration as unknown as string); //legacy results could have a string here
+  }
+  if (result.incompleteTestSeconds !== undefined) {
+    tt += result.incompleteTestSeconds;
+  } else if (result.restartCount !== undefined && result.restartCount > 0) {
+    tt += (tt / 4) * result.restartCount;
+  }
+  return tt;
+}
+
 /*
 const allResultsQuery = createCollection(
   liveQueryCollectionOptions({
diff --git a/frontend/src/ts/components/pages/account/TestStats.tsx b/frontend/src/ts/components/pages/account/TestStats.tsx
index b28a9f23cf41..d32892556ddd 100644
--- a/frontend/src/ts/components/pages/account/TestStats.tsx
+++ b/frontend/src/ts/components/pages/account/TestStats.tsx
@@ -8,20 +8,14 @@ import {
 import { getConfig } from "../../../signals/config";
 import { secondsToString } from "../../../utils/date-and-time";
 import { Formatting } from "../../../utils/format";
+import { Fa } from "../../common/Fa";
 
 export function TestStats(props: { resultsQuery: ResultsQuery }): JSXElement {
   const format = createMemo(() => new Formatting(getConfig));
-
-  const formatWpm = createMemo(
-    () =>
-      (val: number): string =>
-        format().typingSpeed(val, { showDecimalPlaces: true }),
-  );
-  const formatPercentage = createMemo(
-    () =>
-      (val: number): string =>
-        format().percentage(val, { showDecimalPlaces: true }),
-  );
+  const formatWpm = (val: number): string =>
+    format().typingSpeed(val, { showDecimalPlaces: true });
+  const formatPercentage = (val: number): string =>
+    format().percentage(val, { showDecimalPlaces: true });
 
   const statsQuery = useResultStatsLiveQuery(props.resultsQuery);
   const last10StatsQuery = useResultStatsLiveQuery(props.resultsQuery, {
@@ -45,14 +39,43 @@ export function TestStats(props: { resultsQuery: ResultsQuery }): JSXElement {
     >
       <div class="flex items-center justify-center text-sub">
         estimate words typed{" "}
-        <span class="p-5 text-5xl text-text">{stats().words}</span>
+        <span class="p-5 text-5xl text-text lg:text-5xl">{stats().words}</span>
       </div>
       <div class="grid grid-cols-3 gap-4">
         <Stat
           header="tests started"
           value={stats().restarted + stats().completed}
         />
-        <Stat header="tests completed" value={stats().completed} />
+        <div>
+          <div class="text-sub">
+            tests completed{" "}
+            <span
+              data-balloon-length="xlarge"
+              data-balloon-pos="up"
+              aria-label="Due to the increasing number of results in the database, you can now only see your last 1000 results in detail. Total time spent typing, started and completed tests stats will still be up to date at the top of the page, above the filters."
+              role="alertdialog"
+            >
+              <Fa icon="fa-question-circle" />
+            </span>
+          </div>
+          <div class="text-2xl leading-[1.1] md:text-3xl lg:text-5xl">
+            {stats().completed}(
+            {Math.floor(
+              ((stats().completed + stats().restarted) /
+                (stats().completed + 2 * stats().restarted)) *
+                100,
+            )}
+            %)
+          </div>
+          <div class="text-xs">
+            {(
+              stats().restarted /
+              (stats().restarted + stats().completed)
+            ).toFixed(1)}{" "}
+            restarts per completed test
+          </div>
+        </div>
+
         <Stat
           header="time typing"
           value={stats().timeTyping}
@@ -62,65 +85,65 @@ export function TestStats(props: { resultsQuery: ResultsQuery }): JSXElement {
         <Stat
           header={`highest ${format().typingSpeedUnit}`}
           value={stats().maxWpm}
-          formatter={formatWpm()}
+          formatter={formatWpm}
         />
         <Stat
           header={`average ${format().typingSpeedUnit}`}
           value={stats().avgWpm}
-          formatter={formatWpm()}
+          formatter={formatWpm}
         />
         <Stat
           header={`average ${format().typingSpeedUnit} (last 10 tests)`}
           value={last10().avgWpm}
-          formatter={formatWpm()}
+          formatter={formatWpm}
         />
 
         <Stat
           header={`highest raw ${format().typingSpeedUnit}`}
           value={stats().maxRaw}
-          formatter={formatWpm()}
+          formatter={formatWpm}
         />
         <Stat
           header={`average raw ${format().typingSpeedUnit}`}
           value={stats().avgRaw}
-          formatter={formatWpm()}
+          formatter={formatWpm}
         />
         <Stat
           header={`average raw ${format().typingSpeedUnit} (last 10 tests)`}
           value={last10().avgRaw}
-          formatter={formatWpm()}
+          formatter={formatWpm}
         />
 
         <Stat
           header={`highest acc`}
           value={stats().maxAcc}
-          formatter={formatPercentage()}
+          formatter={formatPercentage}
         />
         <Stat
           header={`average acc`}
           value={stats().avgAcc}
-          formatter={formatPercentage()}
+          formatter={formatPercentage}
         />
         <Stat
           header={`average acc (last 10 tests)`}
           value={last10().avgAcc}
-          formatter={formatPercentage()}
+          formatter={formatPercentage}
         />
 
         <Stat
           header={`highest consistency`}
           value={stats().maxConsistency}
-          formatter={formatPercentage()}
+          formatter={formatPercentage}
         />
         <Stat
           header={`average consistency`}
           value={stats().avgConsistency}
-          formatter={formatPercentage()}
+          formatter={formatPercentage}
         />
         <Stat
           header={`average consistency (last 10 tests)`}
           value={last10().avgConsistency}
-          formatter={formatPercentage()}
+          formatter={formatPercentage}
         />
       </div>
     </Show>
@@ -131,20 +154,18 @@ function Stat(options: {
   header: string;
   value: number | undefined;
   formatter?: (value: number) => string;
-  subline?: string;
 }): JSXElement {
   return (
     <div>
       <div class="text-sub">{options.header}</div>
 
-      <div class="text-5xl leading-[1.1]">
+      <div class="text-2xl leading-[1.1] md:text-3xl lg:text-5xl">
         <Show when={options.value !== undefined}>
           {options.formatter !== undefined
             ? options.formatter(options.value ?? -1)
             : options.value}
         </Show>
       </div>
-      <div>{options.subline}</div>
     </div>
   );
 }
diff --git a/frontend/src/ts/constants/default-snapshot.ts b/frontend/src/ts/constants/default-snapshot.ts
index 9563f98433e0..a96030646353 100644
--- a/frontend/src/ts/constants/default-snapshot.ts
+++ b/frontend/src/ts/constants/default-snapshot.ts
@@ -50,7 +50,9 @@ export type SnapshotResult<M extends Mode> = Omit<
   incompleteTestSeconds: number;
   afkDuration: number;
   tags: string[];
+  //calculated values
   words: number;
+  timeTyping: number;
 };
 
 export type Snapshot = Omit<

From dd708a5e8b245bcd9fbbc03bed976940f640a1d3 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Tue, 17 Feb 2026 14:53:50 +0100
Subject: [PATCH 10/52] complete filters?

---
 frontend/src/ts/collections/results.ts        | 270 ++++++++++--------
 .../components/pages/account/AccountPage.tsx  |  21 +-
 .../ts/components/pages/account/TestStats.tsx |  24 +-
 3 files changed, 178 insertions(+), 137 deletions(-)

diff --git a/frontend/src/ts/collections/results.ts b/frontend/src/ts/collections/results.ts
index d81a02ebc6b5..703e46e0f6ad 100644
--- a/frontend/src/ts/collections/results.ts
+++ b/frontend/src/ts/collections/results.ts
@@ -1,33 +1,39 @@
+import { ResultMinified } from "@monkeytype/schemas/results";
 import { Mode } from "@monkeytype/schemas/shared";
 import { ResultFilters } from "@monkeytype/schemas/users";
 import { queryCollectionOptions } from "@tanstack/query-db-collection";
 import {
+  and,
   avg,
   count,
   createCollection,
   createLiveQueryCollection,
+  eq,
+  gte,
   inArray,
   max,
+  not,
+  or,
   sum,
   useLiveQuery,
 } from "@tanstack/solid-db";
-import { Accessor, createMemo } from "solid-js";
+import { Accessor } from "solid-js";
 import Ape from "../ape";
 import { SnapshotResult } from "../constants/default-snapshot";
 import { queryClient } from "../queries";
 import { baseKey } from "../queries/utils/keys";
-import { ResultMinified } from "@monkeytype/schemas/results";
-
-export type SortDirection = "asc" | "desc";
 
-export type ResultsSortField = keyof SnapshotResult<Mode>;
-type ResultsQueryState = {
+type SortDirection = "asc" | "desc";
+type ResultsSortField = keyof SnapshotResult<Mode>;
+export type ResultsQueryState = {
   difficulty: SnapshotResult<Mode>["difficulty"][];
   pb: SnapshotResult<Mode>["isPb"][];
   mode: SnapshotResult<Mode>["mode"][];
-  mode2: SnapshotResult<Mode>["mode2"][];
+  words: ("10" | "25" | "50" | "100" | "custom")[];
+  time: ("15" | "30" | "60" | "120" | "custom")[];
   punctuation: SnapshotResult<Mode>["punctuation"][];
   numbers: SnapshotResult<Mode>["numbers"][];
+  timestamp: SnapshotResult<Mode>["timestamp"];
   sortField: ResultsSortField;
   sortDirection: SortDirection;
   limit: number;
@@ -37,7 +43,86 @@ const queryKeys = {
   root: () => [...baseKey("results", { isUserSpecific: true })],
 };
 
-export const resultsCollection = createCollection(
+export type ResultStats = {
+  words: number;
+  restarted: number;
+  completed: number;
+  maxWpm: number;
+  avgWpm: number;
+  maxRaw: number;
+  avgRaw: number;
+  maxAcc: number;
+  avgAcc: number;
+  maxConsistency: number;
+  avgConsistency: number;
+  timeTyping: number;
+};
+
+/**
+ * get aggregated statistics for the current result selection
+ * @param queryState
+ * @param options
+ * @returns
+ */
+// oxlint-disable-next-line typescript/explicit-function-return-type
+export function useResultStatsLiveQuery(
+  queryState: Accessor<ResultsQueryState | undefined>,
+  options?: { lastTen?: true },
+) {
+  return useLiveQuery((q) => {
+    const state = queryState();
+    if (state === undefined) return undefined;
+
+    return (
+      options?.lastTen
+        ? //for lastTen we need a sub-query to apply the sort+limit first and then run the aggregations
+          q.from({
+            r: q
+              .from({ r: getFilteredResults(state) })
+              .orderBy(({ r }) => r.timestamp, "desc")
+              .limit(10),
+          })
+        : q.from({ r: getFilteredResults(state) })
+    )
+      .select(({ r }) => ({
+        words: sum(r.words),
+        completed: count(r._id),
+        restarted: sum(r.restartCount),
+        timeTyping: sum(r.timeTyping),
+        maxWpm: max(r.wpm),
+        avgWpm: avg(r.wpm),
+        maxRaw: max(r.rawWpm),
+        avgRaw: avg(r.rawWpm),
+        maxAcc: max(r.acc),
+        avgAcc: avg(r.acc),
+        maxConsistency: max(r.consistency),
+        avgConsistency: avg(r.consistency),
+      }))
+      .findOne();
+  });
+}
+
+/**
+ * get list of SnapshotResults for the current result selection
+ * @param queryState
+ * @returns
+ */
+// oxlint-disable-next-line typescript/explicit-function-return-type
+export function useResultsLiveQuery(
+  queryState: Accessor<ResultsQueryState | undefined>,
+) {
+  console.log("###", queryState());
+  return useLiveQuery((q) => {
+    const state = queryState();
+    if (state === undefined) return undefined;
+    return q
+      .from({ r: getFilteredResults(state) })
+      .orderBy(({ r }) => r[state.sortField], state.sortDirection)
+      .limit(state.limit);
+  });
+}
+
+const resultsCollection = createCollection(
   queryCollectionOptions({
     staleTime: Infinity,
     queryKey: queryKeys.root(),
@@ -83,122 +168,56 @@ export const resultsCollection = createCollection(
   }),
 );
 
-export type ResultsQuery = {
-  enabled: Accessor<boolean>;
-  filters: Accessor<ResultFilters>;
-  sorting: Accessor<{
-    field: ResultsSortField;
-    direction: SortDirection;
-  }>;
-  limit: Accessor<number>;
-};
-
-export type ResultStats = {
-  words: number;
-  restarted: number;
-  completed: number;
-  maxWpm: number;
-  avgWpm: number;
-  maxRaw: number;
-  avgRaw: number;
-  maxAcc: number;
-  avgAcc: number;
-  maxConsistency: number;
-  avgConsistency: number;
-  timeTyping: number;
-};
-
-// oxlint-disable-next-line typescript/explicit-function-return-type
-export function useResultsLiveQuery(params: ResultsQuery) {
-  const queryState = createMemo(() => {
-    if (!params.enabled()) {
-      return undefined;
-    }
-
-    return createResultsQueryState(
-      params.filters(),
-      params.sorting(),
-      params.limit(),
-    );
-  });
-
-  return useLiveQuery((q) => {
-    const state = queryState();
-    if (state === undefined) return undefined;
-    return q
-      .from({ r: getFilteredResults(state) })
-      .orderBy(({ r }) => r[state.sortField], state.sortDirection)
-      .limit(state.limit);
-  });
-}
-
 // oxlint-disable-next-line typescript/explicit-function-return-type
 function getFilteredResults(state: ResultsQueryState) {
-  return createLiveQueryCollection((q) =>
-    q
+  return createLiveQueryCollection((q) => {
+    const applyMode2Filter = (
+      key: "time" | "words",
+      filter: ResultsQueryState["time"] | ResultsQueryState["words"],
+      nonCustomValues: string[],
+    ): void => {
+      if (filter.length === 5) return;
+      const isCustom = filter.includes("custom");
+      const selected = filter.filter((it) => it !== "custom");
+      query = query.where(({ r }) =>
+        or(
+          //results not matching the mode pass
+          inArray(
+            r.mode,
+            ["time", "words", "quote", "custom", "zen"].filter(
+              (it) => it !== key,
+            ),
+          ),
+          and(
+            eq(r.mode, key),
+            or(
+              //mode2 is matching the selected mode2
+              inArray(r.mode2, selected),
+              //or if custom selected are not matching any non-custom value
+              isCustom ? not(inArray(r.mode2, nonCustomValues)) : false,
+            ),
+          ),
+        ),
+      );
+    };
+
+    let query = q
       .from({ r: resultsCollection })
+      .where(({ r }) => gte(r.timestamp, state.timestamp))
       .where(({ r }) => inArray(r.difficulty, state.difficulty))
       .where(({ r }) => inArray(r.isPb, state.pb))
       .where(({ r }) => inArray(r.mode, state.mode))
-      /*.where(({ r }) =>
-        or(inArray(r.mode, ["quote", "zen"]), inArray(r.mode2, state.mode2)),
-      )*/
       .where(({ r }) => inArray(r.punctuation, state.punctuation))
-      .where(({ r }) => inArray(r.numbers, state.numbers)),
-  );
-}
+      .where(({ r }) => inArray(r.numbers, state.numbers));
 
-// oxlint-disable-next-line typescript/explicit-function-return-type
-export function useResultStatsLiveQuery(
-  params: ResultsQuery,
-  options?: { lastTen?: true },
-) {
-  const queryState = createMemo(() => {
-    if (!params.enabled()) {
-      return undefined;
-    }
+    applyMode2Filter("time", state.time, ["15", "30", "60", "120"]);
+    applyMode2Filter("words", state.words, ["10", "25", "50", "100"]);
 
-    return createResultsQueryState(
-      params.filters(),
-      params.sorting(),
-      params.limit(),
-    );
-  });
-
-  return useLiveQuery((q) => {
-    const state = queryState();
-    if (state === undefined) return undefined;
-
-    return (
-      options?.lastTen
-        ? //for lastTen we need a sub-query to apply the sort+limit first and then run the aggregations
-          q.from({
-            r: q
-              .from({ r: getFilteredResults(state) })
-              .orderBy(({ r }) => r.timestamp, "desc")
-              .limit(10),
-          })
-        : q.from({ r: getFilteredResults(state) })
-    )
-      .select(({ r }) => ({
-        words: sum(r.words),
-        completed: count(r._id),
-        restarted: sum(r.restartCount),
-        timeTyping: sum(r.timeTyping),
-        maxWpm: max(r.wpm),
-        avgWpm: avg(r.wpm),
-        maxRaw: max(r.rawWpm),
-        avgRaw: avg(r.rawWpm),
-        maxAcc: max(r.acc),
-        avgAcc: avg(r.acc),
-        maxConsistency: max(r.consistency),
-        avgConsistency: avg(r.consistency),
-      }))
-      .findOne();
+    return query;
   });
 }
 
-function createResultsQueryState(
+export function createResultsQueryState(
   filters: ResultFilters,
   sorting: { field: ResultsSortField; direction: SortDirection },
   limit: number,
@@ -207,9 +226,11 @@ function createResultsQueryState(
     difficulty: valueFilter(filters.difficulty),
     pb: boolFilter(filters.pb),
     mode: valueFilter(filters.mode),
-    mode2: [...valueFilter(filters.words), ...valueFilter(filters.time)],
+    words: valueFilter(filters.words),
+    time: valueFilter(filters.time),
     punctuation: boolFilter(filters.punctuation),
     numbers: boolFilter(filters.numbers),
+    timestamp: timestampFilter(filters.date),
     sortField: sorting.field,
     sortDirection: sorting.direction,
     limit,
@@ -230,6 +251,29 @@ function boolFilter(
     .map(([k]) => k === "on" || k === "yes");
 }
 
+function singleFilter<T extends string, U>(
+  val: Partial<Record<T, boolean>>,
+  mapping: Record<T, U>,
+): U | undefined {
+  const active = Object.entries(val).find(([_, v]) => v as boolean);
+  const result = active === undefined ? undefined : mapping[active[0] as T];
+  return result;
+}
+
+function timestampFilter(val: ResultFilters["date"]): number {
+  const seconds =
+    singleFilter(val, {
+      all: 0,
+      last_day: 24 * 60 * 60,
+      last_week: 7 * 24 * 60 * 60,
+      last_month: 30 * 24 * 60 * 60,
+      last_3months: 90 * 24 * 60 * 60,
+    }) ?? 0;
+
+  if (seconds === 0) return 0;
+  return Math.floor(Date.now() - seconds * 1000);
+}
+
 function calcTimeTyping(result: ResultMinified): number {
   let tt = 0;
   if (
diff --git a/frontend/src/ts/components/pages/account/AccountPage.tsx b/frontend/src/ts/components/pages/account/AccountPage.tsx
index a27f8ac5f7f3..f73bc57a576b 100644
--- a/frontend/src/ts/components/pages/account/AccountPage.tsx
+++ b/frontend/src/ts/components/pages/account/AccountPage.tsx
@@ -1,8 +1,8 @@
 import { ResultFilters, ResultFiltersSchema } from "@monkeytype/schemas/users";
-import { createSignal, JSXElement, Show } from "solid-js";
+import { createMemo, createSignal, JSXElement, Show } from "solid-js";
 
 import {
-  ResultsQuery,
+  createResultsQueryState,
   useResultsLiveQuery,
 } from "../../../collections/results";
 import defaultResultFilters from "../../../constants/default-result-filters";
@@ -38,14 +38,15 @@ export function AccountPage(): JSXElement {
     direction: "desc",
   });
 
-  const resultsQuery: ResultsQuery = {
-    enabled: () => isOpen() && isLoggedIn(),
-    filters,
-    sorting,
-    limit,
-  };
+  const queryState = createMemo(() => {
+    if (!isOpen() || !isLoggedIn()) {
+      return undefined;
+    }
+
+    return createResultsQueryState(filters(), sorting(), limit());
+  });
 
-  const data = useResultsLiveQuery(resultsQuery);
+  const data = useResultsLiveQuery(queryState);
 
   return (
     <Show when={isLoggedIn()}>
@@ -56,7 +57,7 @@ export function AccountPage(): JSXElement {
         }
       />
 
-      <TestStats resultsQuery={resultsQuery} />
+      <TestStats resultsQuery={queryState} />
       <Table data={[...data()]} onSortingChange={(val) => setSorting(val)} />
       <Button
         text="load more"
diff --git a/frontend/src/ts/components/pages/account/TestStats.tsx b/frontend/src/ts/components/pages/account/TestStats.tsx
index d32892556ddd..a774f9b99103 100644
--- a/frontend/src/ts/components/pages/account/TestStats.tsx
+++ b/frontend/src/ts/components/pages/account/TestStats.tsx
@@ -1,7 +1,7 @@
-import { createMemo, JSXElement, Show } from "solid-js";
+import { Accessor, createMemo, JSXElement, Show } from "solid-js";
 
 import {
-  ResultsQuery,
+  ResultsQueryState,
   ResultStats,
   useResultStatsLiveQuery,
 } from "../../../collections/results";
@@ -10,12 +10,12 @@ import { secondsToString } from "../../../utils/date-and-time";
 import { Formatting } from "../../../utils/format";
 import { Fa } from "../../common/Fa";
 
-export function TestStats(props: { resultsQuery: ResultsQuery }): JSXElement {
+export function TestStats(props: {
+  resultsQuery: Accessor<ResultsQueryState | undefined>;
+}): JSXElement {
   const format = createMemo(() => new Formatting(getConfig));
-  const formatWpm = (val: number): string =>
-    format().typingSpeed(val, { showDecimalPlaces: true });
-  const formatPercentage = (val: number): string =>
-    format().percentage(val, { showDecimalPlaces: true });
+  const formatWpm = (val: number): string => format().typingSpeed(val);
+  const formatPercentage = (val: number): string => format().percentage(val);
 
   const statsQuery = useResultStatsLiveQuery(props.resultsQuery);
   const last10StatsQuery = useResultStatsLiveQuery(props.resultsQuery, {
@@ -61,18 +61,14 @@ export function TestStats(props: { resultsQuery: ResultsQuery }): JSXElement {
           <div class="text-2xl leading-[1.1] md:text-3xl lg:text-5xl">
             {stats().completed}(
             {Math.floor(
-              ((stats().completed + stats().restarted) /
-                (stats().completed + 2 * stats().restarted)) *
+              (stats().completed / (stats().completed + stats().restarted)) *
                 100,
             )}
             %)
           </div>
           <div class="text-xs">
-            {(
-              stats().restarted /
-              (stats().restarted + stats().completed)
-            ).toFixed(1)}{" "}
-            restarts per completed test
+            {(stats().restarted / stats().completed).toFixed(1)} restarts per
+            completed test
           </div>
         </div>
 

From 93857119cedb61602806f4ba91e53c1dac4df64b Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Tue, 17 Feb 2026 15:24:17 +0100
Subject: [PATCH 11/52] forgot the quoteLength

---
 frontend/src/ts/collections/results.ts | 60 +++++++++++++++-----------
 1 file changed, 36 insertions(+), 24 deletions(-)

diff --git a/frontend/src/ts/collections/results.ts b/frontend/src/ts/collections/results.ts
index 703e46e0f6ad..7688d32020de 100644
--- a/frontend/src/ts/collections/results.ts
+++ b/frontend/src/ts/collections/results.ts
@@ -34,6 +34,7 @@ export type ResultsQueryState = {
   punctuation: SnapshotResult<Mode>["punctuation"][];
   numbers: SnapshotResult<Mode>["numbers"][];
   timestamp: SnapshotResult<Mode>["timestamp"];
+  quoteLength: SnapshotResult<Mode>["quoteLength"][];
   sortField: ResultsSortField;
   sortDirection: SortDirection;
   limit: number;
@@ -83,22 +84,20 @@ export function useResultStatsLiveQuery(
               .limit(10),
           })
         : q.from({ r: getFilteredResults(state) })
-    )
-      .select(({ r }) => ({
-        words: sum(r.words),
-        completed: count(r._id),
-        restarted: sum(r.restartCount),
-        timeTyping: sum(r.timeTyping),
-        maxWpm: max(r.wpm),
-        avgWpm: avg(r.wpm),
-        maxRaw: max(r.rawWpm),
-        avgRaw: avg(r.rawWpm),
-        maxAcc: max(r.acc),
-        avgAcc: avg(r.acc),
-        maxConsistency: max(r.consistency),
-        avgConsistency: avg(r.consistency),
-      }))
-      .findOne();
+    ).select(({ r }) => ({
+      words: sum(r.words),
+      completed: count(r._id),
+      restarted: sum(r.restartCount),
+      timeTyping: sum(r.timeTyping),
+      maxWpm: max(r.wpm),
+      avgWpm: avg(r.wpm),
+      maxRaw: max(r.rawWpm),
+      avgRaw: avg(r.rawWpm),
+      maxAcc: max(r.acc),
+      avgAcc: avg(r.acc),
+      maxConsistency: max(r.consistency),
+      avgConsistency: avg(r.consistency),
+    }));
   });
 }
 
@@ -111,7 +110,6 @@ export function useResultStatsLiveQuery(
 export function useResultsLiveQuery(
   queryState: Accessor<ResultsQueryState | undefined>,
 ) {
-  console.log("###", queryState());
   return useLiveQuery((q) => {
     const state = queryState();
     if (state === undefined) return undefined;
@@ -171,9 +169,9 @@ const resultsCollection = createCollection(
 // oxlint-disable-next-line typescript/explicit-function-return-type
 function getFilteredResults(state: ResultsQueryState) {
   return createLiveQueryCollection((q) => {
-    const applyMode2Filter = (
-      key: "time" | "words",
-      filter: ResultsQueryState["time"] | ResultsQueryState["words"],
+    const applyMode2Filter = <T extends "time" | "words">(
+      key: T,
+      filter: ResultsQueryState[T],
       nonCustomValues: string[],
     ): void => {
       if (filter.length === 5) return;
@@ -191,7 +189,7 @@ function getFilteredResults(state: ResultsQueryState) {
           and(
             eq(r.mode, key),
             or(
-              //mode2 is matching the selected mode2
+              //mode2 is matching one ofthe selected mode2
               inArray(r.mode2, selected),
               //or if custom selected are not matching any non-custom value
               isCustom ? not(inArray(r.mode2, nonCustomValues)) : false,
@@ -208,7 +206,8 @@ function getFilteredResults(state: ResultsQueryState) {
       .where(({ r }) => inArray(r.isPb, state.pb))
       .where(({ r }) => inArray(r.mode, state.mode))
       .where(({ r }) => inArray(r.punctuation, state.punctuation))
-      .where(({ r }) => inArray(r.numbers, state.numbers));
+      .where(({ r }) => inArray(r.numbers, state.numbers))
+      .where(({ r }) => inArray(r.quoteLength, state.quoteLength));
 
     applyMode2Filter("time", state.time, ["15", "30", "60", "120"]);
     applyMode2Filter("words", state.words, ["10", "25", "50", "100"]);
@@ -231,16 +230,29 @@ export function createResultsQueryState(
     punctuation: boolFilter(filters.punctuation),
     numbers: boolFilter(filters.numbers),
     timestamp: timestampFilter(filters.date),
+    quoteLength: [
+      ...valueFilter(filters.quoteLength, {
+        short: 0,
+        medium: 1,
+        long: 2,
+        thicc: 3,
+      }),
+      -1, // fallback value for results without quoteLength, set in the collection
+    ],
     sortField: sorting.field,
     sortDirection: sorting.direction,
     limit,
   };
 }
 
-function valueFilter<T extends string>(val: Partial<Record<T, boolean>>): T[] {
+function valueFilter<T extends string, U = T>(
+  val: Partial<Record<T, boolean>>,
+  mapping?: Record<T, U>,
+): U[] {
   return Object.entries(val)
     .filter(([_, v]) => v as boolean) //TODO remove as?
-    .map(([k]) => k as T);
+    .map(([k]) => k as T)
+    .map((it) => (mapping ? mapping[it] : (it as unknown as U)));
 }
 
 function boolFilter(

From 7f55e670281b710bd9234540194feec3ea8b0af6 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Tue, 17 Feb 2026 15:41:11 +0100
Subject: [PATCH 12/52] simplify

---
 frontend/src/ts/collections/results.ts | 21 ++++++---------------
 1 file changed, 6 insertions(+), 15 deletions(-)

diff --git a/frontend/src/ts/collections/results.ts b/frontend/src/ts/collections/results.ts
index 7688d32020de..b57f68caadad 100644
--- a/frontend/src/ts/collections/results.ts
+++ b/frontend/src/ts/collections/results.ts
@@ -3,7 +3,6 @@ import { Mode } from "@monkeytype/schemas/shared";
 import { ResultFilters } from "@monkeytype/schemas/users";
 import { queryCollectionOptions } from "@tanstack/query-db-collection";
 import {
-  and,
   avg,
   count,
   createCollection,
@@ -180,20 +179,12 @@ function getFilteredResults(state: ResultsQueryState) {
       query = query.where(({ r }) =>
         or(
           //results not matching the mode pass
-          inArray(
-            r.mode,
-            ["time", "words", "quote", "custom", "zen"].filter(
-              (it) => it !== key,
-            ),
-          ),
-          and(
-            eq(r.mode, key),
-            or(
-              //mode2 is matching one ofthe selected mode2
-              inArray(r.mode2, selected),
-              //or if custom selected are not matching any non-custom value
-              isCustom ? not(inArray(r.mode2, nonCustomValues)) : false,
-            ),
+          not(eq(r.mode, key)),
+          or(
+            //mode2 is matching one of the  selected mode2
+            inArray(r.mode2, selected),
+            //or if custom selected are not matching any non-custom value
+            isCustom ? not(inArray(r.mode2, nonCustomValues)) : false,
           ),
         ),
       );

From 003f571b5b9e71cdcbf7d5030f569ac685c18eaa Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Tue, 17 Feb 2026 20:59:36 +0100
Subject: [PATCH 13/52] styles

---
 frontend/src/ts/collections/results.ts        | 13 +----
 .../ts/components/pages/account/Filters.tsx   | 48 ++++++++++++-------
 2 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/frontend/src/ts/collections/results.ts b/frontend/src/ts/collections/results.ts
index b57f68caadad..b0975a2e6aa8 100644
--- a/frontend/src/ts/collections/results.ts
+++ b/frontend/src/ts/collections/results.ts
@@ -254,24 +254,15 @@ function boolFilter(
     .map(([k]) => k === "on" || k === "yes");
 }
 
-function singleFilter<T extends string, U>(
-  val: Partial<Record<T, boolean>>,
-  mapping: Record<T, U>,
-): U | undefined {
-  const active = Object.entries(val).find(([_, v]) => v as boolean);
-  const result = active === undefined ? undefined : mapping[active[0] as T];
-  return result;
-}
-
 function timestampFilter(val: ResultFilters["date"]): number {
   const seconds =
-    singleFilter(val, {
+    valueFilter(val, {
       all: 0,
       last_day: 24 * 60 * 60,
       last_week: 7 * 24 * 60 * 60,
       last_month: 30 * 24 * 60 * 60,
       last_3months: 90 * 24 * 60 * 60,
-    }) ?? 0;
+    })[0] ?? 0;
 
   if (seconds === 0) return 0;
   return Math.floor(Date.now() - seconds * 1000);
diff --git a/frontend/src/ts/components/pages/account/Filters.tsx b/frontend/src/ts/components/pages/account/Filters.tsx
index 5772c4b17948..731114a04149 100644
--- a/frontend/src/ts/components/pages/account/Filters.tsx
+++ b/frontend/src/ts/components/pages/account/Filters.tsx
@@ -21,7 +21,7 @@ export function Filters(props: {
   return (
     <>
       <H3 fa={{ icon: "fa-filter" }} text="filters" />
-      <div>
+      <div class="mb-12 grid gap-4 sm:grid-cols-2 lg:mb-4 lg:flex lg:justify-evenly [&>button]:w-full">
         <Button text="all" onClick={placeholder} />
         <Button text="current settings" onClick={placeholder} />
         <Button
@@ -33,6 +33,7 @@ export function Filters(props: {
       </div>
 
       <ButtonGroup
+        classOverride="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:flex lg:justify-evenly [&>button]:w-full [&>button]:last:col-span-2"
         group="date"
         items={[
           { id: "last_day", text: "last day" },
@@ -53,21 +54,27 @@ export function Filters(props: {
       />
 
       <Show when={isShowAdvanced()}>
-        <H3 fa={{ icon: "fa-tools" }} text="advanced filters" />
-        <Button text="clear filters" onClick={placeholder} />
+        <H3 fa={{ icon: "fa-tools" }} text="advanced filters" class="mt-8" />
 
-        <ButtonGroup text="difficulty" icon="fa-star" group="difficulty" />
-        <ButtonGroup text="personal best" icon="fa-crown" group="pb" />
-        <ButtonGroup text="mode" icon="fa-bars" group="mode" />
-        <ButtonGroup
-          text="quote length"
-          icon="fa-quote-right"
-          group="quoteLength"
+        <Button
+          text="clear filters"
+          onClick={placeholder}
+          class="mb-4 w-full"
         />
-        <ButtonGroup text="words" icon="fa-font" group="words" />
-        <ButtonGroup text="time" icon="fa-clock" group="time" />
-        <ButtonGroup text="punctuation" icon="fa-at" group="punctuation" />
-        <ButtonGroup text="numbers" icon="fa-hashtag" group="numbers" />
+        <div class="gap-4 md:grid md:grid-cols-2">
+          <ButtonGroup text="difficulty" icon="fa-star" group="difficulty" />
+          <ButtonGroup text="personal best" icon="fa-crown" group="pb" />
+          <ButtonGroup text="mode" icon="fa-bars" group="mode" />
+          <ButtonGroup
+            text="quote length"
+            icon="fa-quote-right"
+            group="quoteLength"
+          />
+          <ButtonGroup text="words" icon="fa-font" group="words" />
+          <ButtonGroup text="time" icon="fa-clock" group="time" />
+          <ButtonGroup text="punctuation" icon="fa-at" group="punctuation" />
+          <ButtonGroup text="numbers" icon="fa-hashtag" group="numbers" />
+        </div>
       </Show>
     </>
   );
@@ -81,6 +88,7 @@ export function Filters(props: {
     group: T;
     items?: { id: K; text?: string }[];
     onSelect?: (id: K) => void;
+    classOverride?: string;
   }): JSXElement {
     const items = (): { id: K; text?: string }[] =>
       options.items ??
@@ -90,14 +98,20 @@ export function Filters(props: {
       })) as { id: K; text?: string }[]);
 
     return (
-      <>
+      <div>
         <Show when={options.icon !== undefined && options.text !== undefined}>
           <H3
+            class=""
             fa={{ icon: options.icon as FaSolidIcon, fixedWidth: true }}
             text={options.text as string}
           />
         </Show>
-        <div>
+        <div
+          class={
+            options.classOverride ??
+            "flex justify-evenly gap-2 [&>button]:w-full [&>button]:last:col-span-2"
+          }
+        >
           <For each={items()}>
             {(item) => (
               <Button
@@ -121,7 +135,7 @@ export function Filters(props: {
             )}
           </For>
         </div>
-      </>
+      </div>
     );
   }
 }

From cdf66bf4ca76c7d22f3e0994a3da181f7606aa00 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Tue, 17 Feb 2026 21:07:11 +0100
Subject: [PATCH 14/52] buttons

---
 frontend/src/ts/components/pages/account/AccountPage.tsx | 1 +
 frontend/src/ts/components/pages/account/Filters.tsx     | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/ts/components/pages/account/AccountPage.tsx b/frontend/src/ts/components/pages/account/AccountPage.tsx
index f73bc57a576b..cb05ddcd1a6f 100644
--- a/frontend/src/ts/components/pages/account/AccountPage.tsx
+++ b/frontend/src/ts/components/pages/account/AccountPage.tsx
@@ -55,6 +55,7 @@ export function AccountPage(): JSXElement {
         onChangeFilter={(key, value) =>
           setFilters({ ...filters(), [key]: value })
         }
+        onResetFilter={() => setFilters(defaultResultFilters)}
       />
 
       <TestStats resultsQuery={queryState} />
diff --git a/frontend/src/ts/components/pages/account/Filters.tsx b/frontend/src/ts/components/pages/account/Filters.tsx
index 731114a04149..3388ed47eecc 100644
--- a/frontend/src/ts/components/pages/account/Filters.tsx
+++ b/frontend/src/ts/components/pages/account/Filters.tsx
@@ -15,6 +15,7 @@ export function Filters(props: {
     id: keyof ResultFilters,
     value: Record<string, boolean>,
   ) => void;
+  onResetFilter: () => void;
 }): JSXElement {
   const [isShowAdvanced, setShowAdvanced] = createSignal(true);
 
@@ -22,7 +23,7 @@ export function Filters(props: {
     <>
       <H3 fa={{ icon: "fa-filter" }} text="filters" />
       <div class="mb-12 grid gap-4 sm:grid-cols-2 lg:mb-4 lg:flex lg:justify-evenly [&>button]:w-full">
-        <Button text="all" onClick={placeholder} />
+        <Button text="all" onClick={() => props.onResetFilter()} />
         <Button text="current settings" onClick={placeholder} />
         <Button
           text="advanced"

From 58220bbce7bd60025960eed24a029efce0be4536 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Wed, 18 Feb 2026 16:04:52 +0100
Subject: [PATCH 15/52] dropdowns. filter, funbox filter is missing

---
 backend/src/utils/result.ts                   |   5 +
 frontend/package.json                         |   4 +-
 frontend/src/ts/collections/results.ts        |  19 +-
 .../components/pages/account/AccountPage.tsx  |   1 +
 .../ts/components/pages/account/Filters.tsx   |  81 ++++++-
 .../src/ts/components/pages/account/Table.tsx |  19 ++
 frontend/src/ts/components/ui/SlimSelect.tsx  | 200 ++++++++++++++++++
 pnpm-lock.yaml                                |  30 +--
 8 files changed, 337 insertions(+), 22 deletions(-)
 create mode 100644 frontend/src/ts/components/ui/SlimSelect.tsx

diff --git a/backend/src/utils/result.ts b/backend/src/utils/result.ts
index 50c98b76c070..2e99fe2e4e87 100644
--- a/backend/src/utils/result.ts
+++ b/backend/src/utils/result.ts
@@ -126,5 +126,10 @@ export function replaceLegacyValues(result: DBResult): DBResult {
     result.mode2 = (result.mode2 as number).toString();
   }
 
+  //legacy value for english_1k
+  if ((result.language as string) === "english_expanded") {
+    result.language = "english_1k";
+  }
+
   return result;
 }
diff --git a/frontend/package.json b/frontend/package.json
index b504878b5c91..605e9d65fade 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -30,8 +30,8 @@
     "@sentry/browser": "9.14.0",
     "@sentry/vite-plugin": "3.3.1",
     "@solidjs/meta": "0.29.4",
-    "@tanstack/query-db-collection": "1.0.22",
-    "@tanstack/solid-db": "0.2.5",
+    "@tanstack/query-db-collection": "1.0.23",
+    "@tanstack/solid-db": "0.2.6",
     "@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/results.ts b/frontend/src/ts/collections/results.ts
index b0975a2e6aa8..be4b9a0fc575 100644
--- a/frontend/src/ts/collections/results.ts
+++ b/frontend/src/ts/collections/results.ts
@@ -34,6 +34,9 @@ export type ResultsQueryState = {
   numbers: SnapshotResult<Mode>["numbers"][];
   timestamp: SnapshotResult<Mode>["timestamp"];
   quoteLength: SnapshotResult<Mode>["quoteLength"][];
+  tags: SnapshotResult<Mode>["tags"];
+  funbox: SnapshotResult<Mode>["funbox"][];
+  language: SnapshotResult<Mode>["language"][];
   sortField: ResultsSortField;
   sortDirection: SortDirection;
   limit: number;
@@ -190,6 +193,8 @@ function getFilteredResults(state: ResultsQueryState) {
       );
     };
 
+    console.log("####", state.tags);
+
     let query = q
       .from({ r: resultsCollection })
       .where(({ r }) => gte(r.timestamp, state.timestamp))
@@ -198,12 +203,18 @@ function getFilteredResults(state: ResultsQueryState) {
       .where(({ r }) => inArray(r.mode, state.mode))
       .where(({ r }) => inArray(r.punctuation, state.punctuation))
       .where(({ r }) => inArray(r.numbers, state.numbers))
-      .where(({ r }) => inArray(r.quoteLength, state.quoteLength));
+      .where(({ r }) => inArray(r.quoteLength, state.quoteLength))
+      //.where(({ r }) => inArray(r.funbox, state.funbox))
+      .where(({ r }) => inArray(r.language, state.language));
 
     applyMode2Filter("time", state.time, ["15", "30", "60", "120"]);
     applyMode2Filter("words", state.words, ["10", "25", "50", "100"]);
 
-    return query;
+    return query.fn.where((row) =>
+      state.tags.some((tag) =>
+        tag === "none" ? row.r.tags.length === 0 : row.r.tags.includes(tag),
+      ),
+    );
   });
 }
 
@@ -230,6 +241,10 @@ export function createResultsQueryState(
       }),
       -1, // fallback value for results without quoteLength, set in the collection
     ],
+    tags: valueFilter(filters.tags),
+    funbox: valueFilter(filters.funbox),
+    language: valueFilter(filters.language),
+
     sortField: sorting.field,
     sortDirection: sorting.direction,
     limit,
diff --git a/frontend/src/ts/components/pages/account/AccountPage.tsx b/frontend/src/ts/components/pages/account/AccountPage.tsx
index cb05ddcd1a6f..151fbe89f426 100644
--- a/frontend/src/ts/components/pages/account/AccountPage.tsx
+++ b/frontend/src/ts/components/pages/account/AccountPage.tsx
@@ -64,6 +64,7 @@ export function AccountPage(): JSXElement {
         text="load more"
         disabled={data.isLoading}
         onClick={() => setLimit((limit) => limit + 10)}
+        class="w-full text-center"
       />
     </Show>
   );
diff --git a/frontend/src/ts/components/pages/account/Filters.tsx b/frontend/src/ts/components/pages/account/Filters.tsx
index 3388ed47eecc..3447daeced43 100644
--- a/frontend/src/ts/components/pages/account/Filters.tsx
+++ b/frontend/src/ts/components/pages/account/Filters.tsx
@@ -1,9 +1,12 @@
 import { ResultFilters } from "@monkeytype/schemas/users";
-import { createSignal, For, JSXElement, Show } from "solid-js";
+import { createMemo, createSignal, For, JSXElement, Show } from "solid-js";
 
+import { getSnapshot } from "../../../db";
 import { FaSolidIcon } from "../../../types/font-awesome";
+import { getLanguageDisplayString } from "../../../utils/strings";
 import { Button } from "../../common/Button";
 import { H3 } from "../../common/Headers";
+import SlimSelect from "../../ui/SlimSelect";
 
 const placeholder = (): void => {
   //
@@ -62,7 +65,7 @@ export function Filters(props: {
           onClick={placeholder}
           class="mb-4 w-full"
         />
-        <div class="gap-4 md:grid md:grid-cols-2">
+        <div class="gap-4 md:grid md:grid-cols-2 [&>div]:last:col-span-2">
           <ButtonGroup text="difficulty" icon="fa-star" group="difficulty" />
           <ButtonGroup text="personal best" icon="fa-crown" group="pb" />
           <ButtonGroup text="mode" icon="fa-bars" group="mode" />
@@ -75,11 +78,84 @@ export function Filters(props: {
           <ButtonGroup text="time" icon="fa-clock" group="time" />
           <ButtonGroup text="punctuation" icon="fa-at" group="punctuation" />
           <ButtonGroup text="numbers" icon="fa-hashtag" group="numbers" />
+
+          <Dropdown
+            icon="fa-tag"
+            text="tags"
+            group="tags"
+            format={(tag) =>
+              getSnapshot()?.tags.find((it) => it._id === tag)?.display ?? tag
+            }
+          />
+          <Dropdown
+            icon="fa-gamepad"
+            text="funbox"
+            group="funbox"
+            format={(it) => it.replace(/_/g, " ")}
+          />
+          <Dropdown
+            icon="fa-globe-americas"
+            text="language"
+            group="language"
+            format={getLanguageDisplayString}
+          />
         </div>
       </Show>
     </>
   );
 
+  function Dropdown<
+    T extends keyof ResultFilters,
+    K extends keyof ResultFilters[T],
+  >(options: {
+    icon: FaSolidIcon;
+    text: string;
+    group: T;
+    format?: (value: K) => string;
+  }): JSXElement {
+    const allSelected = createMemo(
+      () =>
+        Object.values(props.filters[options.group]).filter((it) => it === true)
+          .length === Object.keys(props.filters[options.group]).length,
+    );
+    return (
+      <div>
+        <H3 fa={{ icon: options.icon, fixedWidth: true }} text={options.text} />
+        <SlimSelect
+          multiple
+          onChange={(val) => {
+            let selected = val as string[];
+            props.onChangeFilter(
+              options.group,
+              Object.fromEntries(
+                Object.entries(props.filters[options.group]).map(([k]) => [
+                  k,
+                  selected.includes(k),
+                ]),
+              ),
+            );
+          }}
+          settings={{
+            showSearch: true,
+            placeholderText: "select a " + options.group,
+            allowDeselect: true,
+            closeOnSelect: false,
+            scrollToTop: true,
+          }}
+          data={[
+            { value: "all", text: "all", selected: allSelected() }, //TODO move to component
+            ...Object.entries(props.filters[options.group]).map(([k, v]) => ({
+              value: k,
+              text: options.format?.(k as K) ?? k,
+              filter: k,
+              selected: v as boolean,
+            })),
+          ]}
+        />
+      </div>
+    );
+  }
+
   function ButtonGroup<
     T extends keyof ResultFilters,
     K extends keyof ResultFilters[T],
@@ -102,7 +178,6 @@ export function Filters(props: {
       <div>
         <Show when={options.icon !== undefined && options.text !== undefined}>
           <H3
-            class=""
             fa={{ icon: options.icon as FaSolidIcon, fixedWidth: true }}
             text={options.text as string}
           />
diff --git a/frontend/src/ts/components/pages/account/Table.tsx b/frontend/src/ts/components/pages/account/Table.tsx
index 896a542a2297..b03d63faa8cb 100644
--- a/frontend/src/ts/components/pages/account/Table.tsx
+++ b/frontend/src/ts/components/pages/account/Table.tsx
@@ -5,6 +5,7 @@ import { format as dateFormat } from "date-fns/format";
 import { createMemo, JSXElement, Show } from "solid-js";
 
 import { SnapshotResult } from "../../../constants/default-snapshot";
+import { getSnapshot } from "../../../db";
 import { getConfig } from "../../../signals/config";
 import { Formatting } from "../../../utils/format";
 import { Fa, FaProps } from "../../common/Fa";
@@ -128,6 +129,24 @@ function getColumns<M extends Mode>({
         </>
       ),
     }),
+    defineColumn("tags", {
+      header: "tags",
+      cell: (info) => (
+        <Show when={info.getValue().length > 0}>
+          <span
+            data-balloon-pos="up"
+            aria-label={info
+              .getValue()
+              .map(
+                (it) => getSnapshot()?.tags.find((tag) => tag._id === it)?.name,
+              )
+              .join(", ")}
+          >
+            <Fa icon="fa-tags" fixedWidth />
+          </span>
+        </Show>
+      ),
+    }),
     defineColumn("timestamp", {
       header: "date",
       cell: (info) => (
diff --git a/frontend/src/ts/components/ui/SlimSelect.tsx b/frontend/src/ts/components/ui/SlimSelect.tsx
new file mode 100644
index 000000000000..e6b3462022f9
--- /dev/null
+++ b/frontend/src/ts/components/ui/SlimSelect.tsx
@@ -0,0 +1,200 @@
+import SlimSelectCore, { Config } from "slim-select";
+import { Optgroup, Option } from "slim-select/store";
+import { onMount, onCleanup, createEffect, createSignal } from "solid-js";
+import type { JSX, JSXElement } from "solid-js";
+
+export type SlimSelectProps = {
+  data?: (Partial<Option> | Partial<Optgroup>)[];
+  settings?: Config["settings"] & { scrollToTop?: boolean };
+  events?: Config["events"];
+  cssClasses?: Config["cssClasses"];
+  value?: string | string[];
+  onChange?: (value: string | string[]) => void;
+  children?: JSX.Element;
+  multiple?: boolean;
+
+  // Solid-style instance exposure
+  ref?: (instance: SlimSelectCore | null) => void;
+};
+
+export default function SlimSelect(props: SlimSelectProps): JSXElement {
+  let selectRef!: HTMLSelectElement;
+  let slimSelect: SlimSelectCore | null = null;
+
+  const [isInitialMount, setIsInitialMount] = createSignal(true);
+  let currentValue: string | string[] | undefined = props.value;
+
+  const getCleanValue = (
+    val: string | string[] | undefined,
+  ): string | string[] => {
+    if (typeof val === "string") {
+      return props.multiple ? [val] : val;
+    }
+
+    if (Array.isArray(val)) {
+      return props.multiple ? val : (val[0] as string);
+    }
+
+    return props.multiple ? [] : "";
+  };
+
+  const syncValueToSlimSelect = (
+    val: string | string[] | undefined,
+    runAfterChange = false,
+  ): void => {
+    if (!slimSelect) return;
+    if (val === undefined) return;
+
+    const cleanValue = getCleanValue(val);
+
+    const data = slimSelect.getData();
+    const options = data.flatMap((item) =>
+      "label" in item ? item.options : [item],
+    );
+
+    const valueExists = Array.isArray(cleanValue)
+      ? cleanValue.length > 0 &&
+        cleanValue.every((v) => options.some((o) => o.value === v))
+      : cleanValue !== "" && options.some((o) => o.value === cleanValue);
+
+    if (!valueExists) {
+      if (!Array.isArray(cleanValue)) {
+        const hasPlaceholder = options.some((o) => o.placeholder);
+        if (!hasPlaceholder) {
+          const currentData = slimSelect.getData();
+          const placeholderOption: Partial<Option> = {
+            value: "",
+            text: "",
+            placeholder: true,
+          };
+          //@ts-expect-error todo
+          slimSelect.setData([placeholderOption, ...currentData]);
+        }
+      }
+    }
+
+    slimSelect.setSelected(cleanValue, runAfterChange);
+  };
+
+  onMount(() => {
+    const config: Config = {
+      select: selectRef,
+    };
+
+    //@ts-expect-error todo
+    if (props.data) config.data = props.data;
+    if (props.settings) config.settings = props.settings;
+    if (props.cssClasses) config.cssClasses = props.cssClasses;
+
+    const ogAfterChange = props.events?.afterChange;
+    const ogBeforeOpen = props.events?.beforeOpen;
+
+    config.events = {
+      ...props.events,
+      afterChange: (newVal) => {
+        if (!slimSelect) return;
+
+        const newValue = props.multiple
+          ? newVal.map((o) => o.value)
+          : (newVal[0]?.value ?? "");
+
+        const slimData = slimSelect.getData();
+        const options = slimData.flatMap((item) =>
+          "label" in item ? item.options : [item],
+        );
+
+        const currentValueExists =
+          currentValue === undefined
+            ? false
+            : Array.isArray(currentValue)
+              ? currentValue.length > 0 &&
+                currentValue.every((v) => options.some((o) => o.value === v))
+              : currentValue !== "" &&
+                options.some((o) => o.value === currentValue);
+
+        const newValueIsValid = Array.isArray(newValue)
+          ? newValue.length > 0 &&
+            newValue.every((v) => options.some((o) => o.value === v))
+          : newValue !== "" && options.some((o) => o.value === newValue);
+
+        const valueChanged =
+          Array.isArray(newValue) && Array.isArray(currentValue)
+            ? JSON.stringify([...newValue].sort()) !==
+              JSON.stringify([...(currentValue ?? [])].sort())
+            : currentValue !== newValue;
+
+        if (
+          props.onChange &&
+          valueChanged &&
+          (currentValueExists || newValueIsValid)
+        ) {
+          props.onChange(newValue);
+          currentValue = newValue;
+        }
+
+        ogAfterChange?.(newVal);
+      },
+      beforeOpen: () => {
+        if (!slimSelect) return;
+
+        if (props.settings?.scrollToTop) {
+          const listElement = slimSelect.render.content.list;
+          const topListItem = listElement.children.item(0) as HTMLElement;
+
+          listElement.scrollTop = topListItem.offsetTop - listElement.offsetTop;
+        }
+        ogBeforeOpen?.();
+      },
+    };
+
+    slimSelect = new SlimSelectCore(config);
+
+    // expose instance
+    props.ref?.(slimSelect);
+
+    if (props.value !== undefined) {
+      syncValueToSlimSelect(props.value, false);
+    }
+
+    setIsInitialMount(false);
+  });
+
+  onCleanup(() => {
+    slimSelect?.destroy();
+    slimSelect = null;
+    props.ref?.(null);
+  });
+
+  createEffect(() => {
+    const value = props.value;
+
+    if (isInitialMount()) {
+      currentValue = value;
+      return;
+    }
+
+    if (slimSelect && value !== undefined) {
+      currentValue = value;
+      syncValueToSlimSelect(value, false);
+    }
+  });
+
+  createEffect(() => {
+    const data = props.data;
+
+    if (!isInitialMount() && slimSelect && data) {
+      //@ts-expect-error todo
+      slimSelect.setData(data);
+
+      if (props.value !== undefined) {
+        syncValueToSlimSelect(props.value, false);
+      }
+    }
+  });
+
+  return (
+    <select ref={(el) => (selectRef = el)} multiple={props.multiple}>
+      {props.children}
+    </select>
+  );
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 05ec2c2cb72c..f8068880d177 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -283,11 +283,11 @@ importers:
         specifier: 0.29.4
         version: 0.29.4(solid-js@1.9.10)
       '@tanstack/query-db-collection':
-        specifier: 1.0.22
-        version: 1.0.22(@tanstack/query-core@5.90.20)(typescript@5.9.3)
+        specifier: 1.0.23
+        version: 1.0.23(@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)
+        specifier: 0.2.6
+        version: 0.2.6(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)
@@ -3414,8 +3414,8 @@ packages:
     peerDependencies:
       typescript: '>=4.7'
 
-  '@tanstack/db@0.5.25':
-    resolution: {integrity: sha512-VqVchs6Mm4rw2GyiOkaoD+PJw6lCJT8EI/TzPu8KWZy3QxyOlilpMvEuDTCl0LZdp1iLYlQT1NdgDg0gimV3kQ==}
+  '@tanstack/db@0.5.26':
+    resolution: {integrity: sha512-W8h4P/7Qm8URl9gk6AI/FQi4k9e713SViG4kZJAmiTzFRJRAlodApZAOb35VB9U/eORgyTfNs4gdUtyv3iBjbA==}
     peerDependencies:
       typescript: '>=4.7'
 
@@ -3435,8 +3435,8 @@ packages:
   '@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==}
+  '@tanstack/query-db-collection@1.0.23':
+    resolution: {integrity: sha512-2xVUvfOuW1wVx8zS5vgsy1Wt45P+3Nt3bGnGqWWqynLrU4guIM1V+VvoBaFI5ZleaIc0xZMpPS3fwIALh1OggA==}
     peerDependencies:
       '@tanstack/query-core': ^5.0.0
       typescript: '>=4.7'
@@ -3444,8 +3444,8 @@ packages:
   '@tanstack/query-devtools@5.93.0':
     resolution: {integrity: sha512-+kpsx1NQnOFTZsw6HAFCW3HkKg0+2cepGtAWXjiiSOJJ1CtQpt72EE2nyZb+AjAbLRPoeRmPJ8MtQd8r8gsPdg==}
 
-  '@tanstack/solid-db@0.2.5':
-    resolution: {integrity: sha512-tunB6Nbd2UHnPGXwprc0S4OjsP1JvwG0blmLnKgoG3bKdGyJQ8yVknHc7WWwIUdeAz4tH4x/p2RDVloqEKrnCA==}
+  '@tanstack/solid-db@0.2.6':
+    resolution: {integrity: sha512-LOuSgCN7/kqlMQeFPvZA8s+0dipnrDJzcI+ajHTR2Z9CHJBNev9hk3gOSOMi3BBGiGg+xUgxv0KcsyM7RGQ1FA==}
     peerDependencies:
       solid-js: '>=1.9.0'
 
@@ -13206,7 +13206,7 @@ snapshots:
       sorted-btree: 1.8.1
       typescript: 5.9.3
 
-  '@tanstack/db@0.5.25(typescript@5.9.3)':
+  '@tanstack/db@0.5.26(typescript@5.9.3)':
     dependencies:
       '@standard-schema/spec': 1.1.0
       '@tanstack/db-ivm': 0.1.17(typescript@5.9.3)
@@ -13226,19 +13226,19 @@ snapshots:
 
   '@tanstack/query-core@5.90.20': {}
 
-  '@tanstack/query-db-collection@1.0.22(@tanstack/query-core@5.90.20)(typescript@5.9.3)':
+  '@tanstack/query-db-collection@1.0.23(@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/db': 0.5.26(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)':
+  '@tanstack/solid-db@0.2.6(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)
+      '@tanstack/db': 0.5.26(typescript@5.9.3)
       solid-js: 1.9.10
     transitivePeerDependencies:
       - typescript

From 42ae60d9e646124aac25f73a2d6479c92820f07f Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Wed, 18 Feb 2026 17:14:35 +0100
Subject: [PATCH 16/52] missing funbox filter

---
 frontend/src/ts/collections/results.ts          | 17 +++++++++++------
 .../src/ts/components/pages/account/Filters.tsx |  1 +
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/frontend/src/ts/collections/results.ts b/frontend/src/ts/collections/results.ts
index be4b9a0fc575..85cc5e0ddabf 100644
--- a/frontend/src/ts/collections/results.ts
+++ b/frontend/src/ts/collections/results.ts
@@ -35,7 +35,7 @@ export type ResultsQueryState = {
   timestamp: SnapshotResult<Mode>["timestamp"];
   quoteLength: SnapshotResult<Mode>["quoteLength"][];
   tags: SnapshotResult<Mode>["tags"];
-  funbox: SnapshotResult<Mode>["funbox"][];
+  funbox: SnapshotResult<Mode>["funbox"];
   language: SnapshotResult<Mode>["language"][];
   sortField: ResultsSortField;
   sortDirection: SortDirection;
@@ -204,16 +204,21 @@ function getFilteredResults(state: ResultsQueryState) {
       .where(({ r }) => inArray(r.punctuation, state.punctuation))
       .where(({ r }) => inArray(r.numbers, state.numbers))
       .where(({ r }) => inArray(r.quoteLength, state.quoteLength))
-      //.where(({ r }) => inArray(r.funbox, state.funbox))
       .where(({ r }) => inArray(r.language, state.language));
 
     applyMode2Filter("time", state.time, ["15", "30", "60", "120"]);
     applyMode2Filter("words", state.words, ["10", "25", "50", "100"]);
 
-    return query.fn.where((row) =>
-      state.tags.some((tag) =>
-        tag === "none" ? row.r.tags.length === 0 : row.r.tags.includes(tag),
-      ),
+    return query.fn.where(
+      (row) =>
+        state.tags.some((tag) =>
+          tag === "none" ? row.r.tags.length === 0 : row.r.tags.includes(tag),
+        ) &&
+        state.funbox.some((fb) =>
+          (fb as string) === "none"
+            ? row.r.funbox.length === 0
+            : row.r.funbox.includes(fb),
+        ),
     );
   });
 }
diff --git a/frontend/src/ts/components/pages/account/Filters.tsx b/frontend/src/ts/components/pages/account/Filters.tsx
index 3447daeced43..eaa5e9a3eed4 100644
--- a/frontend/src/ts/components/pages/account/Filters.tsx
+++ b/frontend/src/ts/components/pages/account/Filters.tsx
@@ -141,6 +141,7 @@ export function Filters(props: {
             allowDeselect: true,
             closeOnSelect: false,
             scrollToTop: true,
+            maxValuesShown: 4,
           }}
           data={[
             { value: "all", text: "all", selected: allSelected() }, //TODO move to component

From 7a132ada40aacb8cd8770ac22feb3eddf47bb1ed Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 19 Feb 2026 14:09:07 +0100
Subject: [PATCH 17/52] use store with localStorage

---
 .../components/pages/account/AccountPage.tsx  | 12 ++-
 frontend/src/ts/hooks/useLocalStorageStore.ts | 82 +++++++++++++++++++
 2 files changed, 87 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/ts/hooks/useLocalStorageStore.ts

diff --git a/frontend/src/ts/components/pages/account/AccountPage.tsx b/frontend/src/ts/components/pages/account/AccountPage.tsx
index 151fbe89f426..ab00a1fb0a2d 100644
--- a/frontend/src/ts/components/pages/account/AccountPage.tsx
+++ b/frontend/src/ts/components/pages/account/AccountPage.tsx
@@ -7,7 +7,7 @@ import {
 } from "../../../collections/results";
 import defaultResultFilters from "../../../constants/default-result-filters";
 import { SnapshotResult } from "../../../constants/default-snapshot";
-import { useLocalStorage } from "../../../hooks/useLocalStorage";
+import { useLocalStorageStore } from "../../../hooks/useLocalStorageStore";
 import { getActivePage, isLoggedIn } from "../../../signals/core";
 import { isObject, typedKeys } from "../../../utils/misc";
 import { sanitize } from "../../../utils/sanitize";
@@ -22,7 +22,7 @@ export function AccountPage(): JSXElement {
   const isOpen = (): boolean => getActivePage() === "about";
   const [limit, setLimit] = createSignal(10);
 
-  const [filters, setFilters] = useLocalStorage({
+  const [filters, setFilters] = useLocalStorageStore({
     key: "resultFilters",
     schema: ResultFiltersSchema,
     fallback: defaultResultFilters,
@@ -43,7 +43,7 @@ export function AccountPage(): JSXElement {
       return undefined;
     }
 
-    return createResultsQueryState(filters(), sorting(), limit());
+    return createResultsQueryState(filters, sorting(), limit());
   });
 
   const data = useResultsLiveQuery(queryState);
@@ -51,10 +51,8 @@ export function AccountPage(): JSXElement {
   return (
     <Show when={isLoggedIn()}>
       <Filters
-        filters={filters()}
-        onChangeFilter={(key, value) =>
-          setFilters({ ...filters(), [key]: value })
-        }
+        filters={filters}
+        onChangeFilter={(key, value) => setFilters(key, value)}
         onResetFilter={() => setFilters(defaultResultFilters)}
       />
 
diff --git a/frontend/src/ts/hooks/useLocalStorageStore.ts b/frontend/src/ts/hooks/useLocalStorageStore.ts
new file mode 100644
index 000000000000..bf0911632734
--- /dev/null
+++ b/frontend/src/ts/hooks/useLocalStorageStore.ts
@@ -0,0 +1,82 @@
+import { createEffect } from "solid-js";
+import { createStore, reconcile, SetStoreFunction } from "solid-js/store";
+import { LocalStorageWithSchema } from "../utils/local-storage-with-schema";
+
+export type UseLocalStorageOptions<T extends object> = {
+  key: LocalStorageWithSchema<T>["key"];
+  schema: LocalStorageWithSchema<T>["schema"];
+  fallback: LocalStorageWithSchema<T>["fallback"];
+  migrate?: LocalStorageWithSchema<T>["migrate"];
+  /**
+   * Whether to sync changes across tabs/windows using storage events.
+   * @default true
+   */
+  syncAcrossTabs?: boolean;
+};
+
+/**
+ * SolidJS hook for reactive localStorage with Zod schema validation.
+ * Wraps LocalStorageWithSchema in a reactive SolidJS signal.
+ *
+ * @example
+ * ```tsx
+ * const [state, setState] = useLocalStorage({
+ *   key: "myKey",
+ *   schema: z.object({value:z.string()}),
+ *   fallback: {value:"default"},
+ * });
+ *
+ * return <div onClick={() => setState("value", "new value")}>{state.value}</div>;
+ * ```
+ */
+export function useLocalStorageStore<T extends object>(
+  options: UseLocalStorageOptions<T>,
+): [T, SetStoreFunction<T>] {
+  const { key, schema, fallback, migrate, syncAcrossTabs = true } = options;
+
+  // Create the underlying localStorage manager
+  const storage = new LocalStorageWithSchema({
+    key,
+    schema,
+    fallback,
+    migrate,
+  });
+
+  // Create store with initial value from storage
+  const [value, setValue] = createStore<T>(storage.get());
+
+  // Persist entire store to localStorage whenever it changes
+  createEffect(() => {
+    const success = storage.set(value);
+    if (!success) {
+      console.error(`LS ${key} failed to persist store`);
+    }
+  });
+
+  // Sync changes across tabs/windows
+  if (syncAcrossTabs) {
+    createEffect(() => {
+      const handleStorageChange = (e: StorageEvent): void => {
+        if (e.key === key && e.newValue !== null) {
+          console.debug(`LS ${key} Storage event detected from another tab`);
+          try {
+            const parsed = schema.parse(JSON.parse(e.newValue));
+            setValue(reconcile(parsed));
+          } catch (error) {
+            console.error(
+              `LS ${key} Failed to parse storage event value`,
+              error,
+            );
+          }
+        }
+      };
+
+      window.addEventListener("storage", handleStorageChange);
+      return () => {
+        window.removeEventListener("storage", handleStorageChange);
+      };
+    });
+  }
+
+  return [value, setValue];
+}

From ac17b517407846cb3f484f17b349f0cd0da71529 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 18 Feb 2026 16:37:11 +0100
Subject: [PATCH 18/52] all option

---
 .../ts/components/layout/footer/Footer.tsx    |  26 ++-
 .../ts/components/pages/account/Filters.tsx   |  23 +--
 frontend/src/ts/components/ui/SlimSelect.tsx  | 195 +++++++++++++++++-
 3 files changed, 224 insertions(+), 20 deletions(-)

diff --git a/frontend/src/ts/components/layout/footer/Footer.tsx b/frontend/src/ts/components/layout/footer/Footer.tsx
index 1e713a4862b0..94cead629773 100644
--- a/frontend/src/ts/components/layout/footer/Footer.tsx
+++ b/frontend/src/ts/components/layout/footer/Footer.tsx
@@ -1,21 +1,45 @@
-import { JSXElement } from "solid-js";
+import { createSignal, JSXElement } from "solid-js";
 
 import { getFocus, getIsScreenshotting } from "../../../signals/core";
 import { showModal } from "../../../stores/modals";
 import { cn } from "../../../utils/cn";
 import { Button } from "../../common/Button";
+import SlimSelect from "../../ui/SlimSelect";
 
 import { Keytips } from "./Keytips";
 import { ThemeIndicator } from "./ThemeIndicator";
 import { VersionButton } from "./VersionButton";
 
 export function Footer(): JSXElement {
+  const [state, setState] = createSignal(["initial"]);
   return (
     <footer
       class={cn("relative text-xs text-sub", {
         "opacity-0": getIsScreenshotting(),
       })}
     >
+      {state().join(" - ")}
+      <SlimSelect
+        settings={{
+          showSearch: false,
+        }}
+        data={[
+          {
+            text: "test1",
+            selected: true,
+          },
+          {
+            text: "test2",
+            selected: true,
+          },
+        ]}
+        multiple
+        addAllOption
+        onChange={(e) => {
+          console.log(e);
+          setState(Array.isArray(e) ? e : [e]);
+        }}
+      ></SlimSelect>
       <Keytips />
 
       <div
diff --git a/frontend/src/ts/components/pages/account/Filters.tsx b/frontend/src/ts/components/pages/account/Filters.tsx
index eaa5e9a3eed4..2500a36d25af 100644
--- a/frontend/src/ts/components/pages/account/Filters.tsx
+++ b/frontend/src/ts/components/pages/account/Filters.tsx
@@ -1,5 +1,5 @@
 import { ResultFilters } from "@monkeytype/schemas/users";
-import { createMemo, createSignal, For, JSXElement, Show } from "solid-js";
+import { createSignal, For, JSXElement, Show } from "solid-js";
 
 import { getSnapshot } from "../../../db";
 import { FaSolidIcon } from "../../../types/font-awesome";
@@ -113,16 +113,12 @@ export function Filters(props: {
     group: T;
     format?: (value: K) => string;
   }): JSXElement {
-    const allSelected = createMemo(
-      () =>
-        Object.values(props.filters[options.group]).filter((it) => it === true)
-          .length === Object.keys(props.filters[options.group]).length,
-    );
     return (
       <div>
         <H3 fa={{ icon: options.icon, fixedWidth: true }} text={options.text} />
         <SlimSelect
           multiple
+          addAllOption
           onChange={(val) => {
             let selected = val as string[];
             props.onChangeFilter(
@@ -143,15 +139,12 @@ export function Filters(props: {
             scrollToTop: true,
             maxValuesShown: 4,
           }}
-          data={[
-            { value: "all", text: "all", selected: allSelected() }, //TODO move to component
-            ...Object.entries(props.filters[options.group]).map(([k, v]) => ({
-              value: k,
-              text: options.format?.(k as K) ?? k,
-              filter: k,
-              selected: v as boolean,
-            })),
-          ]}
+          data={Object.entries(props.filters[options.group]).map(([k, v]) => ({
+            value: k,
+            text: options.format?.(k as K) ?? k,
+            filter: k,
+            selected: v as boolean,
+          }))}
         />
       </div>
     );
diff --git a/frontend/src/ts/components/ui/SlimSelect.tsx b/frontend/src/ts/components/ui/SlimSelect.tsx
index e6b3462022f9..8dd103df2ac7 100644
--- a/frontend/src/ts/components/ui/SlimSelect.tsx
+++ b/frontend/src/ts/components/ui/SlimSelect.tsx
@@ -1,6 +1,12 @@
 import SlimSelectCore, { Config } from "slim-select";
 import { Optgroup, Option } from "slim-select/store";
-import { onMount, onCleanup, createEffect, createSignal } from "solid-js";
+import {
+  onMount,
+  onCleanup,
+  createEffect,
+  createSignal,
+  createMemo,
+} from "solid-js";
 import type { JSX, JSXElement } from "solid-js";
 
 export type SlimSelectProps = {
@@ -12,6 +18,7 @@ export type SlimSelectProps = {
   onChange?: (value: string | string[]) => void;
   children?: JSX.Element;
   multiple?: boolean;
+  addAllOption?: boolean;
 
   // Solid-style instance exposure
   ref?: (instance: SlimSelectCore | null) => void;
@@ -24,6 +31,54 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
   const [isInitialMount, setIsInitialMount] = createSignal(true);
   let currentValue: string | string[] | undefined = props.value;
 
+  // Helper to get all non-"all" option values from data
+  const getAllOptionValues = (
+    data: (Partial<Option> | Partial<Optgroup>)[],
+  ): string[] => {
+    const options = data.flatMap((item) =>
+      "label" in item && item.options ? item.options : [item],
+    );
+    return options
+      .filter(
+        (o): o is Partial<Option> =>
+          "value" in o && o.value !== "all" && !o.placeholder,
+      )
+      .map((o) => o.value as string);
+  };
+
+  // Compute if all options are selected
+  const allAreSelected = createMemo(() => {
+    if (!props.addAllOption || !props.multiple || !props.data) return false;
+
+    const allValues = getAllOptionValues(props.data);
+    const currentValues = Array.isArray(props.value) ? props.value : [];
+
+    if (allValues.length === 0) return false;
+
+    return allValues.every((v) => currentValues.includes(v));
+  });
+
+  // Inject "all" option into data if needed
+  const getDataWithAll = (
+    data?: (Partial<Option> | Partial<Optgroup>)[],
+  ): (Partial<Option> | Partial<Optgroup>)[] => {
+    if (!props.addAllOption || !props.multiple || !data) return data ?? [];
+
+    const hasAllOption = data.some((item) =>
+      "value" in item ? item.value === "all" : false,
+    );
+
+    if (hasAllOption) return data;
+
+    const allOption: Partial<Option> = {
+      value: "all",
+      text: "all",
+      selected: allAreSelected(),
+    };
+
+    return [allOption, ...data];
+  };
+
   const getCleanValue = (
     val: string | string[] | undefined,
   ): string | string[] => {
@@ -82,22 +137,121 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
     };
 
     //@ts-expect-error todo
-    if (props.data) config.data = props.data;
+    if (props.data) config.data = getDataWithAll(props.data);
     if (props.settings) config.settings = props.settings;
     if (props.cssClasses) config.cssClasses = props.cssClasses;
 
     const ogAfterChange = props.events?.afterChange;
+    const ogBeforeChange = props.events?.beforeChange;
     const ogBeforeOpen = props.events?.beforeOpen;
 
     config.events = {
       ...props.events,
+      beforeChange: (selectedOptions, oldSelectedOptions) => {
+        // Call original beforeChange if it exists
+        const ogResult = ogBeforeChange?.(selectedOptions, oldSelectedOptions);
+        if (ogResult === false) return false;
+
+        // Handle "all" option logic if enabled
+        if (props.addAllOption && props.multiple && slimSelect) {
+          const includesAllNow = selectedOptions.some((o) => o.value === "all");
+          const includedAllBefore = oldSelectedOptions.some(
+            (o) => o.value === "all",
+          );
+
+          if (includesAllNow) {
+            if (!includedAllBefore) {
+              // User clicked "all" -> select all non-"all" options
+              const data = slimSelect.getData();
+              const allValues = getAllOptionValues(data);
+              slimSelect.setSelected(allValues, false);
+
+              // Manually trigger onChange
+              if (
+                props.onChange &&
+                JSON.stringify([...allValues].sort()) !==
+                  JSON.stringify(
+                    [
+                      ...(Array.isArray(currentValue) ? currentValue : []),
+                    ].sort(),
+                  )
+              ) {
+                props.onChange(allValues);
+                currentValue = allValues;
+              }
+
+              return false; // Prevent default behavior
+            } else if (selectedOptions.length < oldSelectedOptions.length) {
+              // User deselected items while "all" was selected -> remove "all"
+              const newSelection = selectedOptions
+                .filter((o) => o.value !== "all")
+                .map((o) => o.value);
+              slimSelect.setSelected(newSelection, false);
+
+              // Manually trigger onChange
+              if (
+                props.onChange &&
+                JSON.stringify([...newSelection].sort()) !==
+                  JSON.stringify(
+                    [
+                      ...(Array.isArray(currentValue) ? currentValue : []),
+                    ].sort(),
+                  )
+              ) {
+                props.onChange(newSelection);
+                currentValue = newSelection;
+              }
+
+              return false;
+            }
+          } else {
+            if (includedAllBefore) {
+              // User deselected "all" -> clear everything
+              slimSelect.setSelected([], false);
+
+              // Manually trigger onChange
+              if (
+                props.onChange &&
+                (Array.isArray(currentValue)
+                  ? currentValue.length > 0
+                  : currentValue !== "")
+              ) {
+                props.onChange([]);
+                currentValue = [];
+              }
+
+              return false;
+            }
+          }
+
+          // Check if all individual options are now selected
+          const data = slimSelect.getData();
+          const allValues = getAllOptionValues(data);
+          const newValuesSet = new Set(selectedOptions.map((o) => o.value));
+
+          if (
+            allValues.length > 0 &&
+            allValues.every((v) => newValuesSet.has(v))
+          ) {
+            // Auto-select "all" for display, but keep individual values
+            // Let default behavior happen, will be filtered in afterChange
+          }
+        }
+
+        return true; // Allow default behavior
+      },
       afterChange: (newVal) => {
         if (!slimSelect) return;
 
-        const newValue = props.multiple
+        let newValue = props.multiple
           ? newVal.map((o) => o.value)
           : (newVal[0]?.value ?? "");
 
+        // Filter out "all" from the value array for onChange
+        if (props.addAllOption && Array.isArray(newValue)) {
+          newValue = newValue.filter((v) => v !== "all");
+        }
+
         const slimData = slimSelect.getData();
         const options = slimData.flatMap((item) =>
           "label" in item ? item.options : [item],
@@ -184,7 +338,7 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
 
     if (!isInitialMount() && slimSelect && data) {
       //@ts-expect-error todo
-      slimSelect.setData(data);
+      slimSelect.setData(getDataWithAll(data));
 
       if (props.value !== undefined) {
         syncValueToSlimSelect(props.value, false);
@@ -192,6 +346,39 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
     }
   });
 
+  // Update "all" selected state when value changes
+  createEffect(() => {
+    if (
+      !props.addAllOption ||
+      !props.multiple ||
+      !slimSelect ||
+      isInitialMount()
+    ) {
+      return;
+    }
+
+    const isAllSelected = allAreSelected();
+    const data = slimSelect.getData();
+    const allOption = data.find(
+      (item) => "value" in item && item.value === "all",
+    );
+
+    if (
+      allOption &&
+      "selected" in allOption &&
+      allOption.selected !== isAllSelected
+    ) {
+      // Update the "all" option's selected state
+      const updatedData = data.map((item) => {
+        if ("value" in item && item.value === "all") {
+          return Object.assign({}, item, { selected: isAllSelected });
+        }
+        return item;
+      });
+      slimSelect.setData(updatedData);
+    }
+  });
+
   return (
     <select ref={(el) => (selectRef = el)} multiple={props.multiple}>
       {props.children}

From 7f67049846fe24ff75c332f2b1d93aa3fd265fe6 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 18 Feb 2026 17:32:42 +0100
Subject: [PATCH 19/52] wip

---
 .../ts/components/layout/footer/Footer.tsx    |   4 +-
 frontend/src/ts/components/ui/SlimSelect.tsx  | 174 ++++++++++--------
 2 files changed, 99 insertions(+), 79 deletions(-)

diff --git a/frontend/src/ts/components/layout/footer/Footer.tsx b/frontend/src/ts/components/layout/footer/Footer.tsx
index 94cead629773..36031b1a4387 100644
--- a/frontend/src/ts/components/layout/footer/Footer.tsx
+++ b/frontend/src/ts/components/layout/footer/Footer.tsx
@@ -22,15 +22,15 @@ export function Footer(): JSXElement {
       <SlimSelect
         settings={{
           showSearch: false,
+          allowDeselect: true,
+          closeOnSelect: false,
         }}
         data={[
           {
             text: "test1",
-            selected: true,
           },
           {
             text: "test2",
-            selected: true,
           },
         ]}
         multiple
diff --git a/frontend/src/ts/components/ui/SlimSelect.tsx b/frontend/src/ts/components/ui/SlimSelect.tsx
index 8dd103df2ac7..13cb800c6134 100644
--- a/frontend/src/ts/components/ui/SlimSelect.tsx
+++ b/frontend/src/ts/components/ui/SlimSelect.tsx
@@ -1,12 +1,6 @@
 import SlimSelectCore, { Config } from "slim-select";
 import { Optgroup, Option } from "slim-select/store";
-import {
-  onMount,
-  onCleanup,
-  createEffect,
-  createSignal,
-  createMemo,
-} from "solid-js";
+import { onMount, onCleanup, createEffect, createSignal } from "solid-js";
 import type { JSX, JSXElement } from "solid-js";
 
 export type SlimSelectProps = {
@@ -46,18 +40,6 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
       .map((o) => o.value as string);
   };
 
-  // Compute if all options are selected
-  const allAreSelected = createMemo(() => {
-    if (!props.addAllOption || !props.multiple || !props.data) return false;
-
-    const allValues = getAllOptionValues(props.data);
-    const currentValues = Array.isArray(props.value) ? props.value : [];
-
-    if (allValues.length === 0) return false;
-
-    return allValues.every((v) => currentValues.includes(v));
-  });
-
   // Inject "all" option into data if needed
   const getDataWithAll = (
     data?: (Partial<Option> | Partial<Optgroup>)[],
@@ -73,7 +55,7 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
     const allOption: Partial<Option> = {
       value: "all",
       text: "all",
-      selected: allAreSelected(),
+      selected: false, // Don't auto-select "all" initially
     };
 
     return [allOption, ...data];
@@ -102,7 +84,7 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
 
     const cleanValue = getCleanValue(val);
 
-    const data = slimSelect.getData();
+    const data = slimSelect.store.getData();
     const options = data.flatMap((item) =>
       "label" in item ? item.options : [item],
     );
@@ -116,14 +98,14 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
       if (!Array.isArray(cleanValue)) {
         const hasPlaceholder = options.some((o) => o.placeholder);
         if (!hasPlaceholder) {
-          const currentData = slimSelect.getData();
+          const currentData = slimSelect.store.getData();
           const placeholderOption: Partial<Option> = {
             value: "",
             text: "",
             placeholder: true,
           };
           //@ts-expect-error todo
-          slimSelect.setData([placeholderOption, ...currentData]);
+          slimSelect.store.setData([placeholderOption, ...currentData]);
         }
       }
     }
@@ -162,9 +144,31 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
           if (includesAllNow) {
             if (!includedAllBefore) {
               // User clicked "all" -> select all non-"all" options
-              const data = slimSelect.getData();
+              const data = slimSelect.store.getData();
               const allValues = getAllOptionValues(data);
-              slimSelect.setSelected(allValues, false);
+
+              // First update: mark only "all" as selected for the select box display
+              for (const item of data) {
+                if (!("value" in item)) continue;
+                item.selected = item.value === "all";
+              }
+              slimSelect.store.setData(data);
+              slimSelect.render.renderValues();
+
+              // Then update data to mark all options as selected for dropdown display
+              for (const item of data) {
+                if (!("value" in item)) continue;
+                const isAllOrIncluded =
+                  item.value === "all" || allValues.includes(item.value);
+                item.selected = isAllOrIncluded;
+              }
+
+              // Defer final update to next tick
+              setTimeout(() => {
+                if (!slimSelect) return;
+                slimSelect.store.setData(data);
+                slimSelect.render.renderOptions(data);
+              }, 0);
 
               // Manually trigger onChange
               if (
@@ -181,12 +185,52 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
               }
 
               return false; // Prevent default behavior
+            } else if (selectedOptions.length > oldSelectedOptions.length) {
+              // User clicked an individual option while "all" was selected
+              // Switch to showing all individual options as selected
+              const data = slimSelect.store.getData();
+              const allValues = getAllOptionValues(data);
+
+              // Update data to mark all individual options as selected and "all" as not selected
+              for (const item of data) {
+                if (!("value" in item)) continue;
+                if (item.value === "all") {
+                  item.selected = false;
+                } else if (allValues.includes(item.value)) {
+                  item.selected = true;
+                }
+              }
+
+              // Defer rendering to next tick to ensure proper UI updates
+              setTimeout(() => {
+                if (!slimSelect) return;
+                slimSelect.store.setData(data);
+                slimSelect.render.renderValues();
+                slimSelect.render.renderOptions(data);
+              }, 0);
+
+              // No onChange needed - value hasn't changed, just visual representation
+              return false;
             } else if (selectedOptions.length < oldSelectedOptions.length) {
               // User deselected items while "all" was selected -> remove "all"
               const newSelection = selectedOptions
                 .filter((o) => o.value !== "all")
                 .map((o) => o.value);
-              slimSelect.setSelected(newSelection, false);
+
+              // Update data based on new selection
+              const data = slimSelect.store.getData();
+              for (const item of data) {
+                if (!("value" in item)) continue;
+                item.selected = newSelection.includes(item.value);
+              }
+
+              // Defer rendering to next tick to ensure proper UI updates
+              setTimeout(() => {
+                if (!slimSelect) return;
+                slimSelect.store.setData(data);
+                slimSelect.render.renderValues();
+                slimSelect.render.renderOptions(data);
+              }, 0);
 
               // Manually trigger onChange
               if (
@@ -207,7 +251,19 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
           } else {
             if (includedAllBefore) {
               // User deselected "all" -> clear everything
-              slimSelect.setSelected([], false);
+              const data = slimSelect.store.getData();
+              for (const item of data) {
+                if (!("value" in item)) continue;
+                item.selected = false;
+              }
+
+              // Defer rendering to next tick to ensure proper UI updates
+              setTimeout(() => {
+                if (!slimSelect) return;
+                slimSelect.store.setData(data);
+                slimSelect.render.renderValues();
+                slimSelect.render.renderOptions(data);
+              }, 0);
 
               // Manually trigger onChange
               if (
@@ -223,19 +279,6 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
               return false;
             }
           }
-
-          // Check if all individual options are now selected
-          const data = slimSelect.getData();
-          const allValues = getAllOptionValues(data);
-          const newValuesSet = new Set(selectedOptions.map((o) => o.value));
-
-          if (
-            allValues.length > 0 &&
-            allValues.every((v) => newValuesSet.has(v))
-          ) {
-            // Auto-select "all" for display, but keep individual values
-            // Let default behavior happen, will be filtered in afterChange
-          }
         }
 
         return true; // Allow default behavior
@@ -247,12 +290,22 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
           ? newVal.map((o) => o.value)
           : (newVal[0]?.value ?? "");
 
-        // Filter out "all" from the value array for onChange
+        // Handle "all" option
         if (props.addAllOption && Array.isArray(newValue)) {
-          newValue = newValue.filter((v) => v !== "all");
+          const hasOnlyAll = newValue.length === 1 && newValue[0] === "all";
+
+          if (hasOnlyAll) {
+            // If only "all" is selected, get all individual values
+            const data = slimSelect.store.getData();
+            const allValues = getAllOptionValues(data);
+            newValue = allValues;
+          } else {
+            // Otherwise just filter out "all" from the array
+            newValue = newValue.filter((v) => v !== "all");
+          }
         }
 
-        const slimData = slimSelect.getData();
+        const slimData = slimSelect.store.getData();
         const options = slimData.flatMap((item) =>
           "label" in item ? item.options : [item],
         );
@@ -338,7 +391,7 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
 
     if (!isInitialMount() && slimSelect && data) {
       //@ts-expect-error todo
-      slimSelect.setData(getDataWithAll(data));
+      slimSelect.store.setData(getDataWithAll(data));
 
       if (props.value !== undefined) {
         syncValueToSlimSelect(props.value, false);
@@ -346,39 +399,6 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
     }
   });
 
-  // Update "all" selected state when value changes
-  createEffect(() => {
-    if (
-      !props.addAllOption ||
-      !props.multiple ||
-      !slimSelect ||
-      isInitialMount()
-    ) {
-      return;
-    }
-
-    const isAllSelected = allAreSelected();
-    const data = slimSelect.getData();
-    const allOption = data.find(
-      (item) => "value" in item && item.value === "all",
-    );
-
-    if (
-      allOption &&
-      "selected" in allOption &&
-      allOption.selected !== isAllSelected
-    ) {
-      // Update the "all" option's selected state
-      const updatedData = data.map((item) => {
-        if ("value" in item && item.value === "all") {
-          return Object.assign({}, item, { selected: isAllSelected });
-        }
-        return item;
-      });
-      slimSelect.setData(updatedData);
-    }
-  });
-
   return (
     <select ref={(el) => (selectRef = el)} multiple={props.multiple}>
       {props.children}

From df6c355b8077007bed2c0be75afe7734539c87ab Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 19 Feb 2026 09:02:34 +0100
Subject: [PATCH 20/52] wip

---
 .../ts/components/layout/footer/Footer.tsx    | 104 +++-
 frontend/src/ts/components/ui/SlimSelect.tsx  | 535 +++++++++++++++++-
 2 files changed, 624 insertions(+), 15 deletions(-)

diff --git a/frontend/src/ts/components/layout/footer/Footer.tsx b/frontend/src/ts/components/layout/footer/Footer.tsx
index 36031b1a4387..a46ae4d1aff2 100644
--- a/frontend/src/ts/components/layout/footer/Footer.tsx
+++ b/frontend/src/ts/components/layout/footer/Footer.tsx
@@ -11,34 +11,110 @@ import { ThemeIndicator } from "./ThemeIndicator";
 import { VersionButton } from "./VersionButton";
 
 export function Footer(): JSXElement {
-  const [state, setState] = createSignal(["initial"]);
+  // const [state, setState] = createSignal(["initial"]);
+  const [testData, setTestData] = createSignal([
+    { value: "test1", text: "test1", selected: true },
+    { value: "test2", text: "test2", selected: true },
+    { value: "test3", text: "test3", selected: false },
+  ]);
+
+  const toggleTest1 = (): void => {
+    console.log("[Footer] toggleTest1 called");
+    const current = testData();
+    console.log("[Footer] current data:", JSON.stringify(current, null, 2));
+    const item0 = current[0];
+    const item1 = current[1];
+    const item2 = current[2];
+    if (!item0 || !item1 || !item2) return;
+    const newData = [
+      { value: "test1", text: "test1", selected: !item0.selected },
+      item1,
+      item2,
+    ];
+    console.log("[Footer] setting new data:", JSON.stringify(newData, null, 2));
+    setTestData(newData);
+  };
+
+  const toggleTest2 = (): void => {
+    console.log("[Footer] toggleTest2 called");
+    const current = testData();
+    console.log("[Footer] current data:", JSON.stringify(current, null, 2));
+    const item0 = current[0];
+    const item1 = current[1];
+    const item2 = current[2];
+    if (!item0 || !item1 || !item2) return;
+    const newData = [
+      item0,
+      { value: "test2", text: "test2", selected: !item1.selected },
+      item2,
+    ];
+    console.log("[Footer] setting new data:", JSON.stringify(newData, null, 2));
+    setTestData(newData);
+  };
+
+  const toggleTest3 = (): void => {
+    console.log("[Footer] toggleTest3 called");
+    const current = testData();
+    console.log("[Footer] current data:", JSON.stringify(current, null, 2));
+    const item0 = current[0];
+    const item1 = current[1];
+    const item2 = current[2];
+    if (!item0 || !item1 || !item2) return;
+    const newData = [
+      item0,
+      item1,
+      { value: "test3", text: "test3", selected: !item2.selected },
+    ];
+    console.log("[Footer] setting new data:", JSON.stringify(newData, null, 2));
+    setTestData(newData);
+  };
+
   return (
     <footer
       class={cn("relative text-xs text-sub", {
         "opacity-0": getIsScreenshotting(),
       })}
     >
-      {state().join(" - ")}
+      {testData()
+        .filter((item) => item.selected)
+        .map((item) => item.value)
+        .join(" - ")}
+      <div class="mb-2 flex gap-4">
+        <label class="flex items-center gap-2">
+          <input
+            type="checkbox"
+            checked={testData()[0]?.selected ?? false}
+            onChange={toggleTest1}
+          />
+          test1 selected
+        </label>
+        <label class="flex items-center gap-2">
+          <input
+            type="checkbox"
+            checked={testData()[1]?.selected ?? false}
+            onChange={toggleTest2}
+          />
+          test2 selected
+        </label>
+        <label class="flex items-center gap-2">
+          <input
+            type="checkbox"
+            checked={testData()[2]?.selected ?? false}
+            onChange={toggleTest3}
+          />
+          test3 selected
+        </label>
+      </div>
       <SlimSelect
         settings={{
           showSearch: false,
           allowDeselect: true,
           closeOnSelect: false,
         }}
-        data={[
-          {
-            text: "test1",
-          },
-          {
-            text: "test2",
-          },
-        ]}
+        data={testData()}
+        dataSetter={setTestData}
         multiple
         addAllOption
-        onChange={(e) => {
-          console.log(e);
-          setState(Array.isArray(e) ? e : [e]);
-        }}
       ></SlimSelect>
       <Keytips />
 
diff --git a/frontend/src/ts/components/ui/SlimSelect.tsx b/frontend/src/ts/components/ui/SlimSelect.tsx
index 13cb800c6134..08446faa9e67 100644
--- a/frontend/src/ts/components/ui/SlimSelect.tsx
+++ b/frontend/src/ts/components/ui/SlimSelect.tsx
@@ -3,6 +3,11 @@ import { Optgroup, Option } from "slim-select/store";
 import { onMount, onCleanup, createEffect, createSignal } from "solid-js";
 import type { JSX, JSXElement } from "solid-js";
 
+// Global flag to prevent all SlimSelects from receiving data updates during any user interaction
+let globalActiveSlimSelectId: number | undefined;
+let globalUserChangeTimeoutId: number | undefined;
+let nextSlimSelectId = 0;
+
 export type SlimSelectProps = {
   data?: (Partial<Option> | Partial<Optgroup>)[];
   settings?: Config["settings"] & { scrollToTop?: boolean };
@@ -10,6 +15,7 @@ export type SlimSelectProps = {
   cssClasses?: Config["cssClasses"];
   value?: string | string[];
   onChange?: (value: string | string[]) => void;
+  dataSetter?: (data: (Partial<Option> | Partial<Optgroup>)[]) => void;
   children?: JSX.Element;
   multiple?: boolean;
   addAllOption?: boolean;
@@ -23,7 +29,10 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
   let slimSelect: SlimSelectCore | null = null;
 
   const [isInitialMount, setIsInitialMount] = createSignal(true);
+  const [isInitializing, setIsInitializing] = createSignal(true);
   let currentValue: string | string[] | undefined = props.value;
+  const instanceId = nextSlimSelectId++;
+  let lastDataReference: typeof props.data | undefined = undefined;
 
   // Helper to get all non-"all" option values from data
   const getAllOptionValues = (
@@ -130,9 +139,42 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
     config.events = {
       ...props.events,
       beforeChange: (selectedOptions, oldSelectedOptions) => {
+        console.log(
+          "[SlimSelect beforeChange] ENTRY",
+          JSON.stringify(
+            {
+              instanceId,
+              selected: selectedOptions.map((o) => o.value),
+              selectedDetailed: selectedOptions.map((o) => ({
+                value: o.value,
+                selected: o.selected,
+              })),
+              old: oldSelectedOptions.map((o) => o.value),
+              oldDetailed: oldSelectedOptions.map((o) => ({
+                value: o.value,
+                selected: o.selected,
+              })),
+              addAllOption: props.addAllOption,
+              multiple: props.multiple,
+              currentValue,
+              globalActiveSlimSelectIdBefore: globalActiveSlimSelectId,
+            },
+            null,
+            2,
+          ),
+        );
+        globalActiveSlimSelectId = instanceId;
+        console.log(
+          "[SlimSelect beforeChange] Set globalActiveSlimSelectId to",
+          instanceId,
+        );
+
         // Call original beforeChange if it exists
         const ogResult = ogBeforeChange?.(selectedOptions, oldSelectedOptions);
-        if (ogResult === false) return false;
+        if (ogResult === false) {
+          console.log("[SlimSelect] Original beforeChange returned false");
+          return false;
+        }
 
         // Handle "all" option logic if enabled
         if (props.addAllOption && props.multiple && slimSelect) {
@@ -141,11 +183,44 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
             (o) => o.value === "all",
           );
 
+          console.log(
+            "[SlimSelect] All option state:",
+            JSON.stringify(
+              {
+                includesAllNow,
+                includedAllBefore,
+                selectedLength: selectedOptions.length,
+                oldLength: oldSelectedOptions.length,
+                lengthDiff: selectedOptions.length - oldSelectedOptions.length,
+              },
+              null,
+              2,
+            ),
+          );
+
+          // Check if this is a normal select/deselect (no "all" involved)
+          if (!includesAllNow && !includedAllBefore) {
+            console.log(
+              "[SlimSelect] Normal selection (no 'all' involved), allowing default",
+            );
+            // Log the current data state for debugging
+            const currentData = slimSelect.store.getData();
+            const selectedInData = currentData
+              .filter((item) => "value" in item && item.selected)
+              .map((item) => ("value" in item ? item.value : null));
+            console.log(
+              "[SlimSelect] Current data selected state:",
+              selectedInData,
+            );
+          }
+
           if (includesAllNow) {
             if (!includedAllBefore) {
+              console.log("[SlimSelect] BRANCH: User clicked 'all'");
               // User clicked "all" -> select all non-"all" options
               const data = slimSelect.store.getData();
               const allValues = getAllOptionValues(data);
+              console.log("[SlimSelect] All values:", allValues);
 
               // First update: mark only "all" as selected for the select box display
               for (const item of data) {
@@ -154,6 +229,9 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
               }
               slimSelect.store.setData(data);
               slimSelect.render.renderValues();
+              console.log(
+                "[SlimSelect] Phase 1: Set 'all' only for renderValues",
+              );
 
               // Then update data to mark all options as selected for dropdown display
               for (const item of data) {
@@ -168,6 +246,9 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
                 if (!slimSelect) return;
                 slimSelect.store.setData(data);
                 slimSelect.render.renderOptions(data);
+                console.log(
+                  "[SlimSelect] Phase 2: Rendered all options in dropdown",
+                );
               }, 0);
 
               // Manually trigger onChange
@@ -180,12 +261,42 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
                     ].sort(),
                   )
               ) {
+                console.log("[SlimSelect] Calling onChange with all values");
                 props.onChange(allValues);
                 currentValue = allValues;
+              } else {
+                console.log(
+                  "[SlimSelect] Skipped onChange (no change or no handler)",
+                );
               }
 
+              // Automatic two-way binding with dataSetter
+              if (props.dataSetter && props.data) {
+                const updatedData = props.data.map((item) => {
+                  if ("label" in item && item.options) {
+                    const updatedOptions = item.options.map((opt) => {
+                      const isSelected = allValues.includes(String(opt.value));
+                      return Object.assign({}, opt, { selected: isSelected });
+                    });
+                    return Object.assign({}, item, { options: updatedOptions });
+                  } else if ("value" in item && item.value !== "all") {
+                    const isSelected = allValues.includes(String(item.value));
+                    return Object.assign({}, item, { selected: isSelected });
+                  }
+                  return item;
+                });
+                console.log(
+                  "[SlimSelect beforeChange] Calling dataSetter after 'all' click",
+                );
+                props.dataSetter(updatedData);
+              }
+
+              console.log("[SlimSelect] Returning false to prevent default");
               return false; // Prevent default behavior
             } else if (selectedOptions.length > oldSelectedOptions.length) {
+              console.log(
+                "[SlimSelect] BRANCH: User clicked individual option while 'all' selected",
+              );
               // User clicked an individual option while "all" was selected
               // Switch to showing all individual options as selected
               const data = slimSelect.store.getData();
@@ -207,16 +318,51 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
                 slimSelect.store.setData(data);
                 slimSelect.render.renderValues();
                 slimSelect.render.renderOptions(data);
+                console.log(
+                  "[SlimSelect] Switched from 'all' to individual options display",
+                );
               }, 0);
 
+              // Automatic two-way binding with dataSetter (keep all selected)
+              if (props.dataSetter && props.data) {
+                const updatedData = props.data.map((item) => {
+                  if ("label" in item && item.options) {
+                    const updatedOptions = item.options.map((opt) => {
+                      const isSelected = allValues.includes(String(opt.value));
+                      return Object.assign({}, opt, { selected: isSelected });
+                    });
+                    return Object.assign({}, item, { options: updatedOptions });
+                  } else if ("value" in item && item.value !== "all") {
+                    const isSelected = allValues.includes(String(item.value));
+                    return Object.assign({}, item, { selected: isSelected });
+                  }
+                  return item;
+                });
+                console.log(
+                  "[SlimSelect beforeChange] Calling dataSetter after switching from 'all' to individual",
+                );
+                props.dataSetter(updatedData);
+              }
+
+              console.log(
+                "[SlimSelect] Returning false (no onChange, just visual)",
+              );
               // No onChange needed - value hasn't changed, just visual representation
               return false;
             } else if (selectedOptions.length < oldSelectedOptions.length) {
+              console.log(
+                "[SlimSelect] BRANCH: User deselected items while 'all' selected",
+              );
               // User deselected items while "all" was selected -> remove "all"
               const newSelection = selectedOptions
                 .filter((o) => o.value !== "all")
                 .map((o) => o.value);
 
+              console.log(
+                "[SlimSelect] New selection after deselect:",
+                newSelection,
+              );
+
               // Update data based on new selection
               const data = slimSelect.store.getData();
               for (const item of data) {
@@ -230,6 +376,7 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
                 slimSelect.store.setData(data);
                 slimSelect.render.renderValues();
                 slimSelect.render.renderOptions(data);
+                console.log("[SlimSelect] Updated UI after deselection");
               }, 0);
 
               // Manually trigger onChange
@@ -242,14 +389,46 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
                     ].sort(),
                   )
               ) {
+                console.log("[SlimSelect] Calling onChange with new selection");
                 props.onChange(newSelection);
                 currentValue = newSelection;
+              } else {
+                console.log(
+                  "[SlimSelect] Skipped onChange (no change or no handler)",
+                );
+              }
+
+              // Automatic two-way binding with dataSetter
+              if (props.dataSetter && props.data) {
+                const updatedData = props.data.map((item) => {
+                  if ("label" in item && item.options) {
+                    const updatedOptions = item.options.map((opt) => {
+                      const isSelected = newSelection.includes(
+                        String(opt.value),
+                      );
+                      return Object.assign({}, opt, { selected: isSelected });
+                    });
+                    return Object.assign({}, item, { options: updatedOptions });
+                  } else if ("value" in item && item.value !== "all") {
+                    const isSelected = newSelection.includes(
+                      String(item.value),
+                    );
+                    return Object.assign({}, item, { selected: isSelected });
+                  }
+                  return item;
+                });
+                console.log(
+                  "[SlimSelect beforeChange] Calling dataSetter after deselecting while 'all' active",
+                );
+                props.dataSetter(updatedData);
               }
 
+              console.log("[SlimSelect] Returning false to prevent default");
               return false;
             }
           } else {
             if (includedAllBefore) {
+              console.log("[SlimSelect] BRANCH: User deselected 'all'");
               // User deselected "all" -> clear everything
               const data = slimSelect.store.getData();
               for (const item of data) {
@@ -263,6 +442,7 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
                 slimSelect.store.setData(data);
                 slimSelect.render.renderValues();
                 slimSelect.render.renderOptions(data);
+                console.log("[SlimSelect] Cleared all selections");
               }, 0);
 
               // Manually trigger onChange
@@ -272,36 +452,92 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
                   ? currentValue.length > 0
                   : currentValue !== "")
               ) {
+                console.log("[SlimSelect] Calling onChange with empty array");
                 props.onChange([]);
                 currentValue = [];
+              } else {
+                console.log(
+                  "[SlimSelect] Skipped onChange (already empty or no handler)",
+                );
+              }
+
+              // Automatic two-way binding with dataSetter
+              if (props.dataSetter && props.data) {
+                const updatedData = props.data.map((item) => {
+                  if ("label" in item && item.options) {
+                    const updatedOptions = item.options.map((opt) =>
+                      Object.assign({}, opt, { selected: false }),
+                    );
+                    return Object.assign({}, item, { options: updatedOptions });
+                  } else if ("value" in item && item.value !== "all") {
+                    return Object.assign({}, item, { selected: false });
+                  }
+                  return item;
+                });
+                console.log(
+                  "[SlimSelect beforeChange] Calling dataSetter after deselecting 'all'",
+                );
+                props.dataSetter(updatedData);
               }
 
+              console.log("[SlimSelect] Returning false to prevent default");
               return false;
             }
           }
         }
 
+        console.log("[SlimSelect] Returning true (allow default behavior)");
         return true; // Allow default behavior
       },
       afterChange: (newVal) => {
+        console.log(
+          "[SlimSelect afterChange] Entry:",
+          JSON.stringify(
+            {
+              instanceId,
+              newVal: newVal.map((o) => o.value),
+              currentValue,
+              addAllOption: props.addAllOption,
+              globalActiveSlimSelectId,
+            },
+            null,
+            2,
+          ),
+        );
+
         if (!slimSelect) return;
 
         let newValue = props.multiple
           ? newVal.map((o) => o.value)
           : (newVal[0]?.value ?? "");
 
+        console.log("[SlimSelect afterChange] Initial newValue:", newValue);
+
         // Handle "all" option
         if (props.addAllOption && Array.isArray(newValue)) {
           const hasOnlyAll = newValue.length === 1 && newValue[0] === "all";
 
+          console.log("[SlimSelect afterChange] hasOnlyAll:", hasOnlyAll);
+
           if (hasOnlyAll) {
             // If only "all" is selected, get all individual values
             const data = slimSelect.store.getData();
             const allValues = getAllOptionValues(data);
+            console.log(
+              "[SlimSelect afterChange] Converting 'all' to:",
+              allValues,
+            );
             newValue = allValues;
           } else {
             // Otherwise just filter out "all" from the array
+            const beforeFilter = newValue;
             newValue = newValue.filter((v) => v !== "all");
+            console.log(
+              "[SlimSelect afterChange] Filtered 'all' from:",
+              beforeFilter,
+              "to:",
+              newValue,
+            );
           }
         }
 
@@ -330,16 +566,94 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
               JSON.stringify([...(currentValue ?? [])].sort())
             : currentValue !== newValue;
 
+        console.log(
+          "[SlimSelect afterChange] Validation:",
+          JSON.stringify(
+            {
+              currentValueExists,
+              newValueIsValid,
+              valueChanged,
+              currentValue,
+              newValue,
+            },
+            null,
+            2,
+          ),
+        );
+
         if (
           props.onChange &&
           valueChanged &&
           (currentValueExists || newValueIsValid)
         ) {
+          console.log(
+            "[SlimSelect afterChange] Calling onChange with:",
+            newValue,
+          );
           props.onChange(newValue);
           currentValue = newValue;
+        } else {
+          console.log(
+            "[SlimSelect afterChange] Skipped onChange:",
+            JSON.stringify(
+              {
+                hasOnChange: !!props.onChange,
+                valueChanged,
+                currentValueExists,
+                newValueIsValid,
+                currentValue,
+                newValue,
+              },
+              null,
+              2,
+            ),
+          );
+        }
+
+        // Automatic two-way binding with dataSetter
+        if (props.dataSetter && props.data && valueChanged) {
+          const selectedValues = Array.isArray(newValue)
+            ? newValue
+            : [newValue];
+          const updatedData = props.data.map((item) => {
+            if ("label" in item && item.options) {
+              // Handle optgroup
+              const updatedOptions = item.options.map((opt) => {
+                const isSelected = selectedValues.includes(String(opt.value));
+                return Object.assign({}, opt, { selected: isSelected });
+              });
+              return Object.assign({}, item, { options: updatedOptions });
+            } else if ("value" in item && item.value !== "all") {
+              // Handle regular option (skip "all" option)
+              const isSelected = selectedValues.includes(String(item.value));
+              return Object.assign({}, item, { selected: isSelected });
+            }
+            return item;
+          });
+          console.log(
+            "[SlimSelect afterChange] Calling dataSetter with updated data",
+          );
+          props.dataSetter(updatedData);
         }
 
         ogAfterChange?.(newVal);
+
+        // Clear any pending timeout
+        if (globalUserChangeTimeoutId !== undefined) {
+          clearTimeout(globalUserChangeTimeoutId);
+        }
+
+        // Defer clearing the flag to allow all reactive updates to complete
+        // Using requestAnimationFrame to wait for next frame after all updates settle
+        globalUserChangeTimeoutId = setTimeout(() => {
+          requestAnimationFrame(() => {
+            globalActiveSlimSelectId = undefined;
+            globalUserChangeTimeoutId = undefined;
+            console.log(
+              "[SlimSelect afterChange] Cleared globalActiveSlimSelectId",
+            );
+          });
+        }, 150) as unknown as number;
       },
       beforeOpen: () => {
         if (!slimSelect) return;
@@ -356,6 +670,9 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
 
     slimSelect = new SlimSelectCore(config);
 
+    // Store initial data reference
+    lastDataReference = props.data;
+
     // expose instance
     props.ref?.(slimSelect);
 
@@ -363,7 +680,101 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
       syncValueToSlimSelect(props.value, false);
     }
 
+    console.log(
+      "[SlimSelect onMount] Setting isInitialMount to false",
+      JSON.stringify({ instanceId, currentValue }, null, 2),
+    );
     setIsInitialMount(false);
+
+    // Defer onChange call until after all effects settle to avoid race condition
+    setTimeout(() => {
+      console.log(
+        "[SlimSelect onMount setTimeout] Starting",
+        JSON.stringify(
+          {
+            instanceId,
+            hasOnChange: !!props.onChange,
+            hasData: !!props.data,
+            hasSlimSelect: !!slimSelect,
+            currentValue,
+          },
+          null,
+          2,
+        ),
+      );
+
+      if (!props.onChange || !props.data || !slimSelect) {
+        setIsInitializing(false);
+        console.log(
+          "[SlimSelect onMount setTimeout] No onChange/data/slimSelect, set isInitializing=false",
+        );
+        return;
+      }
+
+      const initialData = slimSelect.store.getData();
+      const selectedOptions = initialData
+        .flatMap((item) => ("label" in item ? item.options : [item]))
+        .filter((item) => item.selected);
+
+      console.log(
+        "[SlimSelect onMount setTimeout] Found selected options:",
+        JSON.stringify(
+          {
+            instanceId,
+            selectedCount: selectedOptions.length,
+            selectedValues: selectedOptions.map((o) => o.value),
+          },
+          null,
+          2,
+        ),
+      );
+
+      if (selectedOptions.length > 0) {
+        let initialValue = props.multiple
+          ? selectedOptions.map((o) => o.value)
+          : (selectedOptions[0]?.value ?? "");
+
+        // Handle "all" option
+        if (props.addAllOption && Array.isArray(initialValue)) {
+          const hasOnlyAll =
+            initialValue.length === 1 && initialValue[0] === "all";
+          if (hasOnlyAll) {
+            const allValues = getAllOptionValues(initialData);
+            initialValue = allValues;
+          } else {
+            initialValue = initialValue.filter((v) => v !== "all");
+          }
+        }
+
+        console.log(
+          "[SlimSelect onMount] Calling onChange with initial values:",
+          JSON.stringify(
+            {
+              instanceId,
+              initialValue,
+              currentValueBefore: currentValue,
+            },
+            null,
+            2,
+          ),
+        );
+        props.onChange(initialValue);
+        currentValue = initialValue;
+        console.log(
+          "[SlimSelect onMount] After onChange, currentValue set to:",
+          JSON.stringify(currentValue, null, 2),
+        );
+      }
+
+      // Clear initializing flag after onChange completes and effects settle
+      setTimeout(() => {
+        setIsInitializing(false);
+        console.log(
+          "[SlimSelect onMount] Set isInitializing=false",
+          JSON.stringify({ instanceId }, null, 2),
+        );
+      }, 0);
+    }, 0);
   });
 
   onCleanup(() => {
@@ -375,13 +786,35 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
   createEffect(() => {
     const value = props.value;
 
+    console.log(
+      "[SlimSelect createEffect:value]",
+      JSON.stringify(
+        {
+          instanceId,
+          isInitialMount: isInitialMount(),
+          value,
+          currentValue,
+        },
+        null,
+        2,
+      ),
+    );
+
     if (isInitialMount()) {
       currentValue = value;
+      console.log(
+        "[SlimSelect createEffect:value] Initial mount, set currentValue to:",
+        JSON.stringify(currentValue, null, 2),
+      );
       return;
     }
 
     if (slimSelect && value !== undefined) {
       currentValue = value;
+      console.log(
+        "[SlimSelect createEffect:value] Syncing value to SlimSelect:",
+        JSON.stringify(value, null, 2),
+      );
       syncValueToSlimSelect(value, false);
     }
   });
@@ -389,13 +822,113 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
   createEffect(() => {
     const data = props.data;
 
+    console.log(
+      "[SlimSelect createEffect:data]",
+      JSON.stringify(
+        {
+          instanceId,
+          isInitialMount: isInitialMount(),
+          isInitializing: isInitializing(),
+          hasSlimSelect: !!slimSelect,
+          hasData: !!data,
+          dataLength: data?.length,
+          globalActiveSlimSelectId,
+          dataReferenceChanged: data !== lastDataReference,
+        },
+        null,
+        2,
+      ),
+    );
+
     if (!isInitialMount() && slimSelect && data) {
+      // Skip if data reference hasn't changed
+      if (data === lastDataReference) {
+        console.log(
+          "[SlimSelect createEffect:data] Skipping - data reference unchanged",
+          JSON.stringify(
+            {
+              instanceId,
+            },
+            null,
+            2,
+          ),
+        );
+        return;
+      }
+
+      if (isInitializing()) {
+        console.log(
+          "[SlimSelect createEffect:data] Skipping data update - instance is initializing",
+          JSON.stringify(
+            {
+              instanceId,
+            },
+            null,
+            2,
+          ),
+        );
+        return;
+      }
+
+      if (globalActiveSlimSelectId !== undefined) {
+        console.log(
+          "[SlimSelect createEffect:data] Skipping data update - ANY instance is being interacted with",
+          JSON.stringify(
+            {
+              thisInstanceId: instanceId,
+              activeInstanceId: globalActiveSlimSelectId,
+              dataSelected: data
+                ?.filter((d) => "selected" in d && d.selected)
+                .map((d) => ("value" in d ? d.value : null)),
+            },
+            null,
+            2,
+          ),
+        );
+        return;
+      }
+
+      console.log(
+        "[SlimSelect createEffect:data] Applying data update",
+        JSON.stringify(
+          {
+            instanceId,
+            dataLength: data?.length,
+            dataPreview: data
+              ?.slice(0, 3)
+              .map((d) => ("value" in d ? d.value : "group")),
+            dataSelected: data
+              ?.filter((d) => "selected" in d && d.selected)
+              .map((d) => ("value" in d ? d.value : null)),
+          },
+          null,
+          2,
+        ),
+      );
       //@ts-expect-error todo
       slimSelect.store.setData(getDataWithAll(data));
 
+      // Update last data reference
+      lastDataReference = data;
+
+      // Force visual update
+      slimSelect.render.renderValues();
+      slimSelect.render.renderOptions(slimSelect.store.getData());
+      console.log(
+        "[SlimSelect createEffect:data] Rendered UI after data update",
+      );
+
       if (props.value !== undefined) {
+        console.log(
+          "[SlimSelect createEffect:data] Syncing value after data update:",
+          JSON.stringify(props.value, null, 2),
+        );
         syncValueToSlimSelect(props.value, false);
       }
+    } else {
+      console.log(
+        "[SlimSelect createEffect:data] Skipped - conditions not met",
+      );
     }
   });
 

From eaf3bdce013f09d653ffc00b15d7e6618365d5f9 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 19 Feb 2026 09:18:26 +0100
Subject: [PATCH 21/52] wip

---
 frontend/src/ts/components/ui/SlimSelect.tsx | 104 +++++++++++++++++--
 1 file changed, 96 insertions(+), 8 deletions(-)

diff --git a/frontend/src/ts/components/ui/SlimSelect.tsx b/frontend/src/ts/components/ui/SlimSelect.tsx
index 08446faa9e67..24b553c81dc7 100644
--- a/frontend/src/ts/components/ui/SlimSelect.tsx
+++ b/frontend/src/ts/components/ui/SlimSelect.tsx
@@ -33,6 +33,7 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
   let currentValue: string | string[] | undefined = props.value;
   const instanceId = nextSlimSelectId++;
   let lastDataReference: typeof props.data | undefined = undefined;
+  let lastDataSetterUpdate: typeof props.data | undefined = undefined;
 
   // Helper to get all non-"all" option values from data
   const getAllOptionValues = (
@@ -288,6 +289,7 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
                 console.log(
                   "[SlimSelect beforeChange] Calling dataSetter after 'all' click",
                 );
+                lastDataSetterUpdate = updatedData;
                 props.dataSetter(updatedData);
               }
 
@@ -341,6 +343,7 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
                 console.log(
                   "[SlimSelect beforeChange] Calling dataSetter after switching from 'all' to individual",
                 );
+                lastDataSetterUpdate = updatedData;
                 props.dataSetter(updatedData);
               }
 
@@ -420,6 +423,7 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
                 console.log(
                   "[SlimSelect beforeChange] Calling dataSetter after deselecting while 'all' active",
                 );
+                lastDataSetterUpdate = updatedData;
                 props.dataSetter(updatedData);
               }
 
@@ -477,6 +481,7 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
                 console.log(
                   "[SlimSelect beforeChange] Calling dataSetter after deselecting 'all'",
                 );
+                lastDataSetterUpdate = updatedData;
                 props.dataSetter(updatedData);
               }
 
@@ -633,6 +638,7 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
           console.log(
             "[SlimSelect afterChange] Calling dataSetter with updated data",
           );
+          lastDataSetterUpdate = updatedData;
           props.dataSetter(updatedData);
         }
 
@@ -871,21 +877,33 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
       }
 
       if (globalActiveSlimSelectId !== undefined) {
+        // Allow updates if this is an external change (not from our dataSetter)
+        const isExternalUpdate = data !== lastDataSetterUpdate;
+        if (!isExternalUpdate) {
+          console.log(
+            "[SlimSelect createEffect:data] Skipping data update - this instance triggered via dataSetter",
+            JSON.stringify(
+              {
+                thisInstanceId: instanceId,
+                activeInstanceId: globalActiveSlimSelectId,
+              },
+              null,
+              2,
+            ),
+          );
+          return;
+        }
         console.log(
-          "[SlimSelect createEffect:data] Skipping data update - ANY instance is being interacted with",
+          "[SlimSelect createEffect:data] Allowing external update despite active instance",
           JSON.stringify(
             {
               thisInstanceId: instanceId,
               activeInstanceId: globalActiveSlimSelectId,
-              dataSelected: data
-                ?.filter((d) => "selected" in d && d.selected)
-                .map((d) => ("value" in d ? d.value : null)),
             },
             null,
             2,
           ),
         );
-        return;
       }
 
       console.log(
@@ -905,15 +923,85 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
           2,
         ),
       );
+
+      console.log(
+        "[SlimSelect createEffect:data] Applying data update",
+        JSON.stringify(
+          {
+            dataSelected: data
+              ?.filter((d) => "selected" in d && d.selected)
+              .map((d) => ("value" in d ? d.value : null)),
+          },
+          null,
+          2,
+        ),
+      );
+
       //@ts-expect-error todo
       slimSelect.store.setData(getDataWithAll(data));
 
-      // Update last data reference
-      lastDataReference = data;
+      // Update last data reference AFTER all updates complete
+      let shouldUpdateLastRef = true;
+
+      // Handle "all" option visual state when all items are selected
+      if (props.addAllOption && props.multiple) {
+        const storeData = slimSelect.store.getData();
+        const allPossibleValues = getAllOptionValues(storeData);
+        const selectedValues = data
+          .filter((item) => "value" in item && item.selected)
+          .map((item) => ("value" in item ? item.value : ""))
+          .filter((v): v is string => Boolean(v) && v !== "all");
+
+        const allAreSelected =
+          allPossibleValues.length > 0 &&
+          selectedValues.length === allPossibleValues.length;
+
+        console.log(
+          "[SlimSelect createEffect:data] All check:",
+          JSON.stringify(
+            { allPossibleValues, selectedValues, allAreSelected },
+            null,
+            2,
+          ),
+        );
 
-      // Force visual update
+        if (allAreSelected) {
+          shouldUpdateLastRef = false; // Defer until setTimeout completes
+          // Phase 1: Show only "all" in select box
+          for (const item of storeData) {
+            if (!("value" in item)) continue;
+            item.selected = item.value === "all";
+          }
+          slimSelect.store.setData(storeData);
+          slimSelect.render.renderValues();
+
+          // Phase 2: Show all items checked in dropdown
+          for (const item of storeData) {
+            if (!("value" in item)) continue;
+            item.selected =
+              item.value === "all" || allPossibleValues.includes(item.value);
+          }
+          setTimeout(() => {
+            if (!slimSelect) return;
+            slimSelect.store.setData(storeData);
+            slimSelect.render.renderOptions(storeData);
+            lastDataReference = data;
+            console.log(
+              "[SlimSelect createEffect:data] Applied 'all' visual state",
+            );
+          }, 0);
+          return;
+        }
+      }
+
+      // Normal case: just render the incoming data
       slimSelect.render.renderValues();
       slimSelect.render.renderOptions(slimSelect.store.getData());
+
+      if (shouldUpdateLastRef) {
+        lastDataReference = data;
+      }
+
       console.log(
         "[SlimSelect createEffect:data] Rendered UI after data update",
       );

From 55cd54968e948697cf3fbc215251c14ae87f1ec2 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 19 Feb 2026 12:59:41 +0100
Subject: [PATCH 22/52] memo

---
 .../ts/components/pages/account/Filters.tsx   | 49 ++++++++++++-------
 1 file changed, 31 insertions(+), 18 deletions(-)

diff --git a/frontend/src/ts/components/pages/account/Filters.tsx b/frontend/src/ts/components/pages/account/Filters.tsx
index 2500a36d25af..48e63a2a0fd5 100644
--- a/frontend/src/ts/components/pages/account/Filters.tsx
+++ b/frontend/src/ts/components/pages/account/Filters.tsx
@@ -1,5 +1,5 @@
 import { ResultFilters } from "@monkeytype/schemas/users";
-import { createSignal, For, JSXElement, Show } from "solid-js";
+import { createSignal, createMemo, For, JSXElement, Show } from "solid-js";
 
 import { getSnapshot } from "../../../db";
 import { FaSolidIcon } from "../../../types/font-awesome";
@@ -113,23 +113,41 @@ export function Filters(props: {
     group: T;
     format?: (value: K) => string;
   }): JSXElement {
+    // Isolate this group's data to prevent unnecessary updates
+    const groupData = createMemo(() => props.filters[options.group]);
+
+    const dropdownData = createMemo(() =>
+      Object.entries(groupData()).map(([k, v]) => ({
+        value: k,
+        text: options.format?.(k as K) ?? k,
+        filter: k,
+        selected: v as boolean,
+      })),
+    );
+
     return (
       <div>
         <H3 fa={{ icon: options.icon, fixedWidth: true }} text={options.text} />
         <SlimSelect
           multiple
           addAllOption
-          onChange={(val) => {
-            let selected = val as string[];
-            props.onChangeFilter(
-              options.group,
-              Object.fromEntries(
-                Object.entries(props.filters[options.group]).map(([k]) => [
-                  k,
-                  selected.includes(k),
-                ]),
-              ),
-            );
+          dataSetter={(updatedData) => {
+            // Start with existing filter values to preserve all keys
+            const filterMap: Record<string, boolean> = {
+              ...(props.filters[options.group] as Record<string, boolean>),
+            };
+            // Update only the keys present in this dropdown's data
+            for (const item of updatedData) {
+              if (
+                "value" in item &&
+                item.value !== undefined &&
+                item.value !== "all"
+              ) {
+                filterMap[item.value] =
+                  "selected" in item ? Boolean(item.selected) : false;
+              }
+            }
+            props.onChangeFilter(options.group, filterMap);
           }}
           settings={{
             showSearch: true,
@@ -139,12 +157,7 @@ export function Filters(props: {
             scrollToTop: true,
             maxValuesShown: 4,
           }}
-          data={Object.entries(props.filters[options.group]).map(([k, v]) => ({
-            value: k,
-            text: options.format?.(k as K) ?? k,
-            filter: k,
-            selected: v as boolean,
-          }))}
+          data={dropdownData()}
         />
       </div>
     );

From 6ce8b79d7ded9e0ea12ab9f6fc0d3c7e09296496 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 19 Feb 2026 14:08:55 +0100
Subject: [PATCH 23/52] wip

---
 .../ts/components/layout/footer/Footer.tsx    |  92 ++--
 .../ts/components/pages/account/Filters.tsx   |  33 +-
 frontend/src/ts/components/ui/SlimSelect.tsx  | 421 +++++-------------
 3 files changed, 159 insertions(+), 387 deletions(-)

diff --git a/frontend/src/ts/components/layout/footer/Footer.tsx b/frontend/src/ts/components/layout/footer/Footer.tsx
index a46ae4d1aff2..6ac4bcf73325 100644
--- a/frontend/src/ts/components/layout/footer/Footer.tsx
+++ b/frontend/src/ts/components/layout/footer/Footer.tsx
@@ -12,61 +12,49 @@ import { VersionButton } from "./VersionButton";
 
 export function Footer(): JSXElement {
   // const [state, setState] = createSignal(["initial"]);
-  const [testData, setTestData] = createSignal([
-    { value: "test1", text: "test1", selected: true },
-    { value: "test2", text: "test2", selected: true },
-    { value: "test3", text: "test3", selected: false },
-  ]);
+  const testValues = ["test1", "test2", "test3"];
+  const [testSelected, setTestSelected] = createSignal(["test1", "test2"]);
 
   const toggleTest1 = (): void => {
     console.log("[Footer] toggleTest1 called");
-    const current = testData();
-    console.log("[Footer] current data:", JSON.stringify(current, null, 2));
-    const item0 = current[0];
-    const item1 = current[1];
-    const item2 = current[2];
-    if (!item0 || !item1 || !item2) return;
-    const newData = [
-      { value: "test1", text: "test1", selected: !item0.selected },
-      item1,
-      item2,
-    ];
-    console.log("[Footer] setting new data:", JSON.stringify(newData, null, 2));
-    setTestData(newData);
+    const current = testSelected();
+    console.log("[Footer] current selected:", JSON.stringify(current, null, 2));
+    const newSelected = current.includes("test1")
+      ? current.filter((v) => v !== "test1")
+      : [...current, "test1"];
+    console.log(
+      "[Footer] setting new selected:",
+      JSON.stringify(newSelected, null, 2),
+    );
+    setTestSelected(newSelected);
   };
 
   const toggleTest2 = (): void => {
     console.log("[Footer] toggleTest2 called");
-    const current = testData();
-    console.log("[Footer] current data:", JSON.stringify(current, null, 2));
-    const item0 = current[0];
-    const item1 = current[1];
-    const item2 = current[2];
-    if (!item0 || !item1 || !item2) return;
-    const newData = [
-      item0,
-      { value: "test2", text: "test2", selected: !item1.selected },
-      item2,
-    ];
-    console.log("[Footer] setting new data:", JSON.stringify(newData, null, 2));
-    setTestData(newData);
+    const current = testSelected();
+    console.log("[Footer] current selected:", JSON.stringify(current, null, 2));
+    const newSelected = current.includes("test2")
+      ? current.filter((v) => v !== "test2")
+      : [...current, "test2"];
+    console.log(
+      "[Footer] setting new selected:",
+      JSON.stringify(newSelected, null, 2),
+    );
+    setTestSelected(newSelected);
   };
 
   const toggleTest3 = (): void => {
     console.log("[Footer] toggleTest3 called");
-    const current = testData();
-    console.log("[Footer] current data:", JSON.stringify(current, null, 2));
-    const item0 = current[0];
-    const item1 = current[1];
-    const item2 = current[2];
-    if (!item0 || !item1 || !item2) return;
-    const newData = [
-      item0,
-      item1,
-      { value: "test3", text: "test3", selected: !item2.selected },
-    ];
-    console.log("[Footer] setting new data:", JSON.stringify(newData, null, 2));
-    setTestData(newData);
+    const current = testSelected();
+    console.log("[Footer] current selected:", JSON.stringify(current, null, 2));
+    const newSelected = current.includes("test3")
+      ? current.filter((v) => v !== "test3")
+      : [...current, "test3"];
+    console.log(
+      "[Footer] setting new selected:",
+      JSON.stringify(newSelected, null, 2),
+    );
+    setTestSelected(newSelected);
   };
 
   return (
@@ -75,15 +63,12 @@ export function Footer(): JSXElement {
         "opacity-0": getIsScreenshotting(),
       })}
     >
-      {testData()
-        .filter((item) => item.selected)
-        .map((item) => item.value)
-        .join(" - ")}
+      {testSelected().join(" - ")}
       <div class="mb-2 flex gap-4">
         <label class="flex items-center gap-2">
           <input
             type="checkbox"
-            checked={testData()[0]?.selected ?? false}
+            checked={testSelected().includes("test1")}
             onChange={toggleTest1}
           />
           test1 selected
@@ -91,7 +76,7 @@ export function Footer(): JSXElement {
         <label class="flex items-center gap-2">
           <input
             type="checkbox"
-            checked={testData()[1]?.selected ?? false}
+            checked={testSelected().includes("test2")}
             onChange={toggleTest2}
           />
           test2 selected
@@ -99,7 +84,7 @@ export function Footer(): JSXElement {
         <label class="flex items-center gap-2">
           <input
             type="checkbox"
-            checked={testData()[2]?.selected ?? false}
+            checked={testSelected().includes("test3")}
             onChange={toggleTest3}
           />
           test3 selected
@@ -111,8 +96,9 @@ export function Footer(): JSXElement {
           allowDeselect: true,
           closeOnSelect: false,
         }}
-        data={testData()}
-        dataSetter={setTestData}
+        values={testValues}
+        selected={testSelected()}
+        onChange={setTestSelected}
         multiple
         addAllOption
       ></SlimSelect>
diff --git a/frontend/src/ts/components/pages/account/Filters.tsx b/frontend/src/ts/components/pages/account/Filters.tsx
index 48e63a2a0fd5..c74d91c08119 100644
--- a/frontend/src/ts/components/pages/account/Filters.tsx
+++ b/frontend/src/ts/components/pages/account/Filters.tsx
@@ -116,13 +116,14 @@ export function Filters(props: {
     // Isolate this group's data to prevent unnecessary updates
     const groupData = createMemo(() => props.filters[options.group]);
 
-    const dropdownData = createMemo(() =>
-      Object.entries(groupData()).map(([k, v]) => ({
-        value: k,
-        text: options.format?.(k as K) ?? k,
-        filter: k,
-        selected: v as boolean,
-      })),
+    const dropdownValues = createMemo(() =>
+      Object.keys(groupData()).map((k) => options.format?.(k as K) ?? k),
+    );
+
+    const dropdownSelected = createMemo(() =>
+      Object.entries(groupData())
+        .filter(([, v]) => v as boolean)
+        .map(([k]) => options.format?.(k as K) ?? k),
     );
 
     return (
@@ -131,21 +132,16 @@ export function Filters(props: {
         <SlimSelect
           multiple
           addAllOption
-          dataSetter={(updatedData) => {
+          onChange={(selectedValues) => {
             // Start with existing filter values to preserve all keys
             const filterMap: Record<string, boolean> = {
               ...(props.filters[options.group] as Record<string, boolean>),
             };
             // Update only the keys present in this dropdown's data
-            for (const item of updatedData) {
-              if (
-                "value" in item &&
-                item.value !== undefined &&
-                item.value !== "all"
-              ) {
-                filterMap[item.value] =
-                  "selected" in item ? Boolean(item.selected) : false;
-              }
+            const entries = Object.keys(groupData());
+            for (const key of entries) {
+              const displayValue = options.format?.(key as K) ?? key;
+              filterMap[key] = selectedValues.includes(displayValue);
             }
             props.onChangeFilter(options.group, filterMap);
           }}
@@ -157,7 +153,8 @@ export function Filters(props: {
             scrollToTop: true,
             maxValuesShown: 4,
           }}
-          data={dropdownData()}
+          values={dropdownValues()}
+          selected={dropdownSelected()}
         />
       </div>
     );
diff --git a/frontend/src/ts/components/ui/SlimSelect.tsx b/frontend/src/ts/components/ui/SlimSelect.tsx
index 24b553c81dc7..b1301cad8e00 100644
--- a/frontend/src/ts/components/ui/SlimSelect.tsx
+++ b/frontend/src/ts/components/ui/SlimSelect.tsx
@@ -9,13 +9,12 @@ let globalUserChangeTimeoutId: number | undefined;
 let nextSlimSelectId = 0;
 
 export type SlimSelectProps = {
-  data?: (Partial<Option> | Partial<Optgroup>)[];
+  values?: string[];
+  selected?: string[];
   settings?: Config["settings"] & { scrollToTop?: boolean };
   events?: Config["events"];
   cssClasses?: Config["cssClasses"];
-  value?: string | string[];
-  onChange?: (value: string | string[]) => void;
-  dataSetter?: (data: (Partial<Option> | Partial<Optgroup>)[]) => void;
+  onChange?: (selected: string[]) => void;
   children?: JSX.Element;
   multiple?: boolean;
   addAllOption?: boolean;
@@ -30,10 +29,21 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
 
   const [isInitialMount, setIsInitialMount] = createSignal(true);
   const [isInitializing, setIsInitializing] = createSignal(true);
-  let currentValue: string | string[] | undefined = props.value;
+  let currentSelected: string[] = props.selected ?? [];
   const instanceId = nextSlimSelectId++;
-  let lastDataReference: typeof props.data | undefined = undefined;
-  let lastDataSetterUpdate: typeof props.data | undefined = undefined;
+  let lastValuesReference: typeof props.values | undefined = undefined;
+
+  // Convert values + selected into data format for slim-select
+  const buildData = (
+    values: string[] = [],
+    selected: string[] = [],
+  ): Partial<Option>[] => {
+    return values.map((value) => ({
+      value,
+      text: value,
+      selected: selected.includes(value),
+    }));
+  };
 
   // Helper to get all non-"all" option values from data
   const getAllOptionValues = (
@@ -50,76 +60,30 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
       .map((o) => o.value as string);
   };
 
-  // Inject "all" option into data if needed
-  const getDataWithAll = (
-    data?: (Partial<Option> | Partial<Optgroup>)[],
-  ): (Partial<Option> | Partial<Optgroup>)[] => {
-    if (!props.addAllOption || !props.multiple || !data) return data ?? [];
-
-    const hasAllOption = data.some((item) =>
-      "value" in item ? item.value === "all" : false,
-    );
-
-    if (hasAllOption) return data;
+  // Inject "all" option if needed
+  const getDataWithAll = (data: Partial<Option>[]): Partial<Option>[] => {
+    if (!props.addAllOption || !props.multiple) return data;
 
     const allOption: Partial<Option> = {
       value: "all",
       text: "all",
-      selected: false, // Don't auto-select "all" initially
+      selected: false,
     };
 
     return [allOption, ...data];
   };
 
-  const getCleanValue = (
-    val: string | string[] | undefined,
-  ): string | string[] => {
-    if (typeof val === "string") {
-      return props.multiple ? [val] : val;
-    }
-
-    if (Array.isArray(val)) {
-      return props.multiple ? val : (val[0] as string);
-    }
-
-    return props.multiple ? [] : "";
+  const getCleanValue = (val: string[]): string[] => {
+    return val ?? [];
   };
 
-  const syncValueToSlimSelect = (
-    val: string | string[] | undefined,
+  const syncSelectedToSlimSelect = (
+    selected: string[],
     runAfterChange = false,
   ): void => {
     if (!slimSelect) return;
-    if (val === undefined) return;
-
-    const cleanValue = getCleanValue(val);
-
-    const data = slimSelect.store.getData();
-    const options = data.flatMap((item) =>
-      "label" in item ? item.options : [item],
-    );
-
-    const valueExists = Array.isArray(cleanValue)
-      ? cleanValue.length > 0 &&
-        cleanValue.every((v) => options.some((o) => o.value === v))
-      : cleanValue !== "" && options.some((o) => o.value === cleanValue);
-
-    if (!valueExists) {
-      if (!Array.isArray(cleanValue)) {
-        const hasPlaceholder = options.some((o) => o.placeholder);
-        if (!hasPlaceholder) {
-          const currentData = slimSelect.store.getData();
-          const placeholderOption: Partial<Option> = {
-            value: "",
-            text: "",
-            placeholder: true,
-          };
-          //@ts-expect-error todo
-          slimSelect.store.setData([placeholderOption, ...currentData]);
-        }
-      }
-    }
 
+    const cleanValue = getCleanValue(selected);
     slimSelect.setSelected(cleanValue, runAfterChange);
   };
 
@@ -128,8 +92,9 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
       select: selectRef,
     };
 
+    const initialData = buildData(props.values, props.selected);
     //@ts-expect-error todo
-    if (props.data) config.data = getDataWithAll(props.data);
+    config.data = getDataWithAll(initialData);
     if (props.settings) config.settings = props.settings;
     if (props.cssClasses) config.cssClasses = props.cssClasses;
 
@@ -157,7 +122,7 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
               })),
               addAllOption: props.addAllOption,
               multiple: props.multiple,
-              currentValue,
+              currentSelected,
               globalActiveSlimSelectIdBefore: globalActiveSlimSelectId,
             },
             null,
@@ -256,43 +221,17 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
               if (
                 props.onChange &&
                 JSON.stringify([...allValues].sort()) !==
-                  JSON.stringify(
-                    [
-                      ...(Array.isArray(currentValue) ? currentValue : []),
-                    ].sort(),
-                  )
+                  JSON.stringify([...currentSelected].sort())
               ) {
                 console.log("[SlimSelect] Calling onChange with all values");
                 props.onChange(allValues);
-                currentValue = allValues;
+                currentSelected = allValues;
               } else {
                 console.log(
                   "[SlimSelect] Skipped onChange (no change or no handler)",
                 );
               }
 
-              // Automatic two-way binding with dataSetter
-              if (props.dataSetter && props.data) {
-                const updatedData = props.data.map((item) => {
-                  if ("label" in item && item.options) {
-                    const updatedOptions = item.options.map((opt) => {
-                      const isSelected = allValues.includes(String(opt.value));
-                      return Object.assign({}, opt, { selected: isSelected });
-                    });
-                    return Object.assign({}, item, { options: updatedOptions });
-                  } else if ("value" in item && item.value !== "all") {
-                    const isSelected = allValues.includes(String(item.value));
-                    return Object.assign({}, item, { selected: isSelected });
-                  }
-                  return item;
-                });
-                console.log(
-                  "[SlimSelect beforeChange] Calling dataSetter after 'all' click",
-                );
-                lastDataSetterUpdate = updatedData;
-                props.dataSetter(updatedData);
-              }
-
               console.log("[SlimSelect] Returning false to prevent default");
               return false; // Prevent default behavior
             } else if (selectedOptions.length > oldSelectedOptions.length) {
@@ -325,28 +264,6 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
                 );
               }, 0);
 
-              // Automatic two-way binding with dataSetter (keep all selected)
-              if (props.dataSetter && props.data) {
-                const updatedData = props.data.map((item) => {
-                  if ("label" in item && item.options) {
-                    const updatedOptions = item.options.map((opt) => {
-                      const isSelected = allValues.includes(String(opt.value));
-                      return Object.assign({}, opt, { selected: isSelected });
-                    });
-                    return Object.assign({}, item, { options: updatedOptions });
-                  } else if ("value" in item && item.value !== "all") {
-                    const isSelected = allValues.includes(String(item.value));
-                    return Object.assign({}, item, { selected: isSelected });
-                  }
-                  return item;
-                });
-                console.log(
-                  "[SlimSelect beforeChange] Calling dataSetter after switching from 'all' to individual",
-                );
-                lastDataSetterUpdate = updatedData;
-                props.dataSetter(updatedData);
-              }
-
               console.log(
                 "[SlimSelect] Returning false (no onChange, just visual)",
               );
@@ -386,47 +303,17 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
               if (
                 props.onChange &&
                 JSON.stringify([...newSelection].sort()) !==
-                  JSON.stringify(
-                    [
-                      ...(Array.isArray(currentValue) ? currentValue : []),
-                    ].sort(),
-                  )
+                  JSON.stringify([...currentSelected].sort())
               ) {
                 console.log("[SlimSelect] Calling onChange with new selection");
                 props.onChange(newSelection);
-                currentValue = newSelection;
+                currentSelected = newSelection;
               } else {
                 console.log(
                   "[SlimSelect] Skipped onChange (no change or no handler)",
                 );
               }
 
-              // Automatic two-way binding with dataSetter
-              if (props.dataSetter && props.data) {
-                const updatedData = props.data.map((item) => {
-                  if ("label" in item && item.options) {
-                    const updatedOptions = item.options.map((opt) => {
-                      const isSelected = newSelection.includes(
-                        String(opt.value),
-                      );
-                      return Object.assign({}, opt, { selected: isSelected });
-                    });
-                    return Object.assign({}, item, { options: updatedOptions });
-                  } else if ("value" in item && item.value !== "all") {
-                    const isSelected = newSelection.includes(
-                      String(item.value),
-                    );
-                    return Object.assign({}, item, { selected: isSelected });
-                  }
-                  return item;
-                });
-                console.log(
-                  "[SlimSelect beforeChange] Calling dataSetter after deselecting while 'all' active",
-                );
-                lastDataSetterUpdate = updatedData;
-                props.dataSetter(updatedData);
-              }
-
               console.log("[SlimSelect] Returning false to prevent default");
               return false;
             }
@@ -450,41 +337,16 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
               }, 0);
 
               // Manually trigger onChange
-              if (
-                props.onChange &&
-                (Array.isArray(currentValue)
-                  ? currentValue.length > 0
-                  : currentValue !== "")
-              ) {
+              if (props.onChange && currentSelected.length > 0) {
                 console.log("[SlimSelect] Calling onChange with empty array");
                 props.onChange([]);
-                currentValue = [];
+                currentSelected = [];
               } else {
                 console.log(
                   "[SlimSelect] Skipped onChange (already empty or no handler)",
                 );
               }
 
-              // Automatic two-way binding with dataSetter
-              if (props.dataSetter && props.data) {
-                const updatedData = props.data.map((item) => {
-                  if ("label" in item && item.options) {
-                    const updatedOptions = item.options.map((opt) =>
-                      Object.assign({}, opt, { selected: false }),
-                    );
-                    return Object.assign({}, item, { options: updatedOptions });
-                  } else if ("value" in item && item.value !== "all") {
-                    return Object.assign({}, item, { selected: false });
-                  }
-                  return item;
-                });
-                console.log(
-                  "[SlimSelect beforeChange] Calling dataSetter after deselecting 'all'",
-                );
-                lastDataSetterUpdate = updatedData;
-                props.dataSetter(updatedData);
-              }
-
               console.log("[SlimSelect] Returning false to prevent default");
               return false;
             }
@@ -501,7 +363,7 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
             {
               instanceId,
               newVal: newVal.map((o) => o.value),
-              currentValue,
+              currentSelected,
               addAllOption: props.addAllOption,
               globalActiveSlimSelectId,
             },
@@ -512,9 +374,7 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
 
         if (!slimSelect) return;
 
-        let newValue = props.multiple
-          ? newVal.map((o) => o.value)
-          : (newVal[0]?.value ?? "");
+        let newValue = newVal.map((o) => o.value);
 
         console.log("[SlimSelect afterChange] Initial newValue:", newValue);
 
@@ -552,24 +412,16 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
         );
 
         const currentValueExists =
-          currentValue === undefined
-            ? false
-            : Array.isArray(currentValue)
-              ? currentValue.length > 0 &&
-                currentValue.every((v) => options.some((o) => o.value === v))
-              : currentValue !== "" &&
-                options.some((o) => o.value === currentValue);
-
-        const newValueIsValid = Array.isArray(newValue)
-          ? newValue.length > 0 &&
-            newValue.every((v) => options.some((o) => o.value === v))
-          : newValue !== "" && options.some((o) => o.value === newValue);
+          currentSelected.length > 0 &&
+          currentSelected.every((v) => options.some((o) => o.value === v));
+
+        const newValueIsValid =
+          newValue.length > 0 &&
+          newValue.every((v) => options.some((o) => o.value === v));
 
         const valueChanged =
-          Array.isArray(newValue) && Array.isArray(currentValue)
-            ? JSON.stringify([...newValue].sort()) !==
-              JSON.stringify([...(currentValue ?? [])].sort())
-            : currentValue !== newValue;
+          JSON.stringify([...newValue].sort()) !==
+          JSON.stringify([...currentSelected].sort());
 
         console.log(
           "[SlimSelect afterChange] Validation:",
@@ -578,7 +430,7 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
               currentValueExists,
               newValueIsValid,
               valueChanged,
-              currentValue,
+              currentSelected,
               newValue,
             },
             null,
@@ -596,7 +448,7 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
             newValue,
           );
           props.onChange(newValue);
-          currentValue = newValue;
+          currentSelected = newValue;
         } else {
           console.log(
             "[SlimSelect afterChange] Skipped onChange:",
@@ -606,7 +458,7 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
                 valueChanged,
                 currentValueExists,
                 newValueIsValid,
-                currentValue,
+                currentSelected,
                 newValue,
               },
               null,
@@ -615,33 +467,6 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
           );
         }
 
-        // Automatic two-way binding with dataSetter
-        if (props.dataSetter && props.data && valueChanged) {
-          const selectedValues = Array.isArray(newValue)
-            ? newValue
-            : [newValue];
-          const updatedData = props.data.map((item) => {
-            if ("label" in item && item.options) {
-              // Handle optgroup
-              const updatedOptions = item.options.map((opt) => {
-                const isSelected = selectedValues.includes(String(opt.value));
-                return Object.assign({}, opt, { selected: isSelected });
-              });
-              return Object.assign({}, item, { options: updatedOptions });
-            } else if ("value" in item && item.value !== "all") {
-              // Handle regular option (skip "all" option)
-              const isSelected = selectedValues.includes(String(item.value));
-              return Object.assign({}, item, { selected: isSelected });
-            }
-            return item;
-          });
-          console.log(
-            "[SlimSelect afterChange] Calling dataSetter with updated data",
-          );
-          lastDataSetterUpdate = updatedData;
-          props.dataSetter(updatedData);
-        }
-
         ogAfterChange?.(newVal);
 
         // Clear any pending timeout
@@ -676,19 +501,19 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
 
     slimSelect = new SlimSelectCore(config);
 
-    // Store initial data reference
-    lastDataReference = props.data;
+    // Store initial values reference
+    lastValuesReference = props.values;
 
     // expose instance
     props.ref?.(slimSelect);
 
-    if (props.value !== undefined) {
-      syncValueToSlimSelect(props.value, false);
+    if (props.selected !== undefined) {
+      syncSelectedToSlimSelect(props.selected, false);
     }
 
     console.log(
       "[SlimSelect onMount] Setting isInitialMount to false",
-      JSON.stringify({ instanceId, currentValue }, null, 2),
+      JSON.stringify({ instanceId, currentSelected }, null, 2),
     );
     setIsInitialMount(false);
 
@@ -700,19 +525,19 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
           {
             instanceId,
             hasOnChange: !!props.onChange,
-            hasData: !!props.data,
+            hasValues: !!props.values,
             hasSlimSelect: !!slimSelect,
-            currentValue,
+            currentSelected,
           },
           null,
           2,
         ),
       );
 
-      if (!props.onChange || !props.data || !slimSelect) {
+      if (!props.onChange || !props.values || !slimSelect) {
         setIsInitializing(false);
         console.log(
-          "[SlimSelect onMount setTimeout] No onChange/data/slimSelect, set isInitializing=false",
+          "[SlimSelect onMount setTimeout] No onChange/values/slimSelect, set isInitializing=false",
         );
         return;
       }
@@ -736,12 +561,10 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
       );
 
       if (selectedOptions.length > 0) {
-        let initialValue = props.multiple
-          ? selectedOptions.map((o) => o.value)
-          : (selectedOptions[0]?.value ?? "");
+        let initialValue = selectedOptions.map((o) => o.value);
 
         // Handle "all" option
-        if (props.addAllOption && Array.isArray(initialValue)) {
+        if (props.addAllOption) {
           const hasOnlyAll =
             initialValue.length === 1 && initialValue[0] === "all";
           if (hasOnlyAll) {
@@ -758,17 +581,17 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
             {
               instanceId,
               initialValue,
-              currentValueBefore: currentValue,
+              currentValueBefore: currentSelected,
             },
             null,
             2,
           ),
         );
         props.onChange(initialValue);
-        currentValue = initialValue;
+        currentSelected = initialValue;
         console.log(
-          "[SlimSelect onMount] After onChange, currentValue set to:",
-          JSON.stringify(currentValue, null, 2),
+          "[SlimSelect onMount] After onChange, currentSelected set to:",
+          JSON.stringify(currentSelected, null, 2),
         );
       }
 
@@ -790,16 +613,16 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
   });
 
   createEffect(() => {
-    const value = props.value;
+    const selected = props.selected;
 
     console.log(
-      "[SlimSelect createEffect:value]",
+      "[SlimSelect createEffect:selected]",
       JSON.stringify(
         {
           instanceId,
           isInitialMount: isInitialMount(),
-          value,
-          currentValue,
+          selected,
+          currentSelected,
         },
         null,
         2,
@@ -807,50 +630,51 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
     );
 
     if (isInitialMount()) {
-      currentValue = value;
+      currentSelected = selected ?? [];
       console.log(
-        "[SlimSelect createEffect:value] Initial mount, set currentValue to:",
-        JSON.stringify(currentValue, null, 2),
+        "[SlimSelect createEffect:selected] Initial mount, set currentSelected to:",
+        JSON.stringify(currentSelected, null, 2),
       );
       return;
     }
 
-    if (slimSelect && value !== undefined) {
-      currentValue = value;
+    if (slimSelect && selected !== undefined) {
+      currentSelected = selected;
       console.log(
-        "[SlimSelect createEffect:value] Syncing value to SlimSelect:",
-        JSON.stringify(value, null, 2),
+        "[SlimSelect createEffect:selected] Syncing selected to SlimSelect:",
+        JSON.stringify(selected, null, 2),
       );
-      syncValueToSlimSelect(value, false);
+      syncSelectedToSlimSelect(selected, false);
     }
   });
 
   createEffect(() => {
-    const data = props.data;
+    const values = props.values;
+    const selected = props.selected;
 
     console.log(
-      "[SlimSelect createEffect:data]",
+      "[SlimSelect createEffect:values]",
       JSON.stringify(
         {
           instanceId,
           isInitialMount: isInitialMount(),
           isInitializing: isInitializing(),
           hasSlimSelect: !!slimSelect,
-          hasData: !!data,
-          dataLength: data?.length,
+          hasValues: !!values,
+          valuesLength: values?.length,
           globalActiveSlimSelectId,
-          dataReferenceChanged: data !== lastDataReference,
+          valuesReferenceChanged: values !== lastValuesReference,
         },
         null,
         2,
       ),
     );
 
-    if (!isInitialMount() && slimSelect && data) {
-      // Skip if data reference hasn't changed
-      if (data === lastDataReference) {
+    if (!isInitialMount() && slimSelect && values) {
+      // Skip if values reference hasn't changed
+      if (values === lastValuesReference) {
         console.log(
-          "[SlimSelect createEffect:data] Skipping - data reference unchanged",
+          "[SlimSelect createEffect:values] Skipping - values reference unchanged",
           JSON.stringify(
             {
               instanceId,
@@ -864,7 +688,7 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
 
       if (isInitializing()) {
         console.log(
-          "[SlimSelect createEffect:data] Skipping data update - instance is initializing",
+          "[SlimSelect createEffect:values] Skipping update - instance is initializing",
           JSON.stringify(
             {
               instanceId,
@@ -877,24 +701,8 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
       }
 
       if (globalActiveSlimSelectId !== undefined) {
-        // Allow updates if this is an external change (not from our dataSetter)
-        const isExternalUpdate = data !== lastDataSetterUpdate;
-        if (!isExternalUpdate) {
-          console.log(
-            "[SlimSelect createEffect:data] Skipping data update - this instance triggered via dataSetter",
-            JSON.stringify(
-              {
-                thisInstanceId: instanceId,
-                activeInstanceId: globalActiveSlimSelectId,
-              },
-              null,
-              2,
-            ),
-          );
-          return;
-        }
         console.log(
-          "[SlimSelect createEffect:data] Allowing external update despite active instance",
+          "[SlimSelect createEffect:values] Skipping update - another instance is active",
           JSON.stringify(
             {
               thisInstanceId: instanceId,
@@ -906,31 +714,17 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
         );
       }
 
-      console.log(
-        "[SlimSelect createEffect:data] Applying data update",
-        JSON.stringify(
-          {
-            instanceId,
-            dataLength: data?.length,
-            dataPreview: data
-              ?.slice(0, 3)
-              .map((d) => ("value" in d ? d.value : "group")),
-            dataSelected: data
-              ?.filter((d) => "selected" in d && d.selected)
-              .map((d) => ("value" in d ? d.value : null)),
-          },
-          null,
-          2,
-        ),
-      );
+      const data = buildData(values, selected ?? []);
 
       console.log(
-        "[SlimSelect createEffect:data] Applying data update",
+        "[SlimSelect createEffect:values] Applying update",
         JSON.stringify(
           {
-            dataSelected: data
-              ?.filter((d) => "selected" in d && d.selected)
-              .map((d) => ("value" in d ? d.value : null)),
+            instanceId,
+            valuesLength: values?.length,
+            selectedLength: selected?.length,
+            valuesPreview: values?.slice(0, 3),
+            selectedPreview: selected?.slice(0, 3),
           },
           null,
           2,
@@ -947,17 +741,14 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
       if (props.addAllOption && props.multiple) {
         const storeData = slimSelect.store.getData();
         const allPossibleValues = getAllOptionValues(storeData);
-        const selectedValues = data
-          .filter((item) => "value" in item && item.selected)
-          .map((item) => ("value" in item ? item.value : ""))
-          .filter((v): v is string => Boolean(v) && v !== "all");
+        const selectedValues = selected ?? [];
 
         const allAreSelected =
           allPossibleValues.length > 0 &&
           selectedValues.length === allPossibleValues.length;
 
         console.log(
-          "[SlimSelect createEffect:data] All check:",
+          "[SlimSelect createEffect:values] All check:",
           JSON.stringify(
             { allPossibleValues, selectedValues, allAreSelected },
             null,
@@ -985,9 +776,9 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
             if (!slimSelect) return;
             slimSelect.store.setData(storeData);
             slimSelect.render.renderOptions(storeData);
-            lastDataReference = data;
+            lastValuesReference = values;
             console.log(
-              "[SlimSelect createEffect:data] Applied 'all' visual state",
+              "[SlimSelect createEffect:values] Applied 'all' visual state",
             );
           }, 0);
           return;
@@ -999,23 +790,21 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
       slimSelect.render.renderOptions(slimSelect.store.getData());
 
       if (shouldUpdateLastRef) {
-        lastDataReference = data;
+        lastValuesReference = values;
       }
 
-      console.log(
-        "[SlimSelect createEffect:data] Rendered UI after data update",
-      );
+      console.log("[SlimSelect createEffect:values] Rendered UI after update");
 
-      if (props.value !== undefined) {
+      if (props.selected !== undefined) {
         console.log(
-          "[SlimSelect createEffect:data] Syncing value after data update:",
-          JSON.stringify(props.value, null, 2),
+          "[SlimSelect createEffect:values] Syncing selected after update:",
+          JSON.stringify(props.selected, null, 2),
         );
-        syncValueToSlimSelect(props.value, false);
+        syncSelectedToSlimSelect(props.selected, false);
       }
     } else {
       console.log(
-        "[SlimSelect createEffect:data] Skipped - conditions not met",
+        "[SlimSelect createEffect:values] Skipped - conditions not met",
       );
     }
   });

From ef883103ddd8f5bc333151b4a0789e1130cb2664 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 19 Feb 2026 14:14:57 +0100
Subject: [PATCH 24/52] wip

---
 frontend/src/ts/components/ui/SlimSelect.tsx | 48 ++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/frontend/src/ts/components/ui/SlimSelect.tsx b/frontend/src/ts/components/ui/SlimSelect.tsx
index b1301cad8e00..3d67d5b6c1af 100644
--- a/frontend/src/ts/components/ui/SlimSelect.tsx
+++ b/frontend/src/ts/components/ui/SlimSelect.tsx
@@ -644,6 +644,54 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
         "[SlimSelect createEffect:selected] Syncing selected to SlimSelect:",
         JSON.stringify(selected, null, 2),
       );
+
+      // Check if all values are selected - show "all" visually if so
+      if (props.addAllOption && props.multiple && props.values) {
+        const allPossibleValues = props.values;
+        const selectedValues = selected ?? [];
+
+        const allAreSelected =
+          allPossibleValues.length > 0 &&
+          selectedValues.length === allPossibleValues.length &&
+          allPossibleValues.every((v) => selectedValues.includes(v));
+
+        console.log(
+          "[SlimSelect createEffect:selected] All check:",
+          JSON.stringify(
+            { allPossibleValues, selectedValues, allAreSelected },
+            null,
+            2,
+          ),
+        );
+
+        if (allAreSelected) {
+          const storeData = slimSelect.store.getData();
+          // Phase 1: Show only "all" in select box
+          for (const item of storeData) {
+            if (!("value" in item)) continue;
+            item.selected = item.value === "all";
+          }
+          slimSelect.store.setData(storeData);
+          slimSelect.render.renderValues();
+
+          // Phase 2: Show all items checked in dropdown
+          for (const item of storeData) {
+            if (!("value" in item)) continue;
+            item.selected =
+              item.value === "all" || allPossibleValues.includes(item.value);
+          }
+          setTimeout(() => {
+            if (!slimSelect) return;
+            slimSelect.store.setData(storeData);
+            slimSelect.render.renderOptions(storeData);
+            console.log(
+              "[SlimSelect createEffect:selected] Applied 'all' visual state",
+            );
+          }, 0);
+          return;
+        }
+      }
+
       syncSelectedToSlimSelect(selected, false);
     }
   });

From 611c06df6971035642516a3dd41ca4db939938f9 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 19 Feb 2026 14:42:34 +0100
Subject: [PATCH 25/52] fix tags

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

diff --git a/frontend/src/ts/components/pages/account/Filters.tsx b/frontend/src/ts/components/pages/account/Filters.tsx
index c74d91c08119..13eb2b5eae32 100644
--- a/frontend/src/ts/components/pages/account/Filters.tsx
+++ b/frontend/src/ts/components/pages/account/Filters.tsx
@@ -140,8 +140,7 @@ export function Filters(props: {
             // Update only the keys present in this dropdown's data
             const entries = Object.keys(groupData());
             for (const key of entries) {
-              const displayValue = options.format?.(key as K) ?? key;
-              filterMap[key] = selectedValues.includes(displayValue);
+              filterMap[key] = selectedValues.includes(key);
             }
             props.onChangeFilter(options.group, filterMap);
           }}

From a82292c2cb3128d3bcd1ad74fc70d8ff20dc74f0 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 19 Feb 2026 16:16:47 +0100
Subject: [PATCH 26/52] better types, add charts filter summary

---
 .../components/pages/account/AccountPage.tsx  |  3 +
 .../ts/components/pages/account/Charts.tsx    | 79 +++++++++++++++++++
 .../ts/components/pages/account/Filters.tsx   | 19 +++--
 .../src/ts/components/pages/account/Table.tsx |  3 +-
 frontend/src/ts/utils/strings.ts              |  6 +-
 packages/schemas/src/users.ts                 |  1 +
 6 files changed, 101 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/ts/components/pages/account/Charts.tsx

diff --git a/frontend/src/ts/components/pages/account/AccountPage.tsx b/frontend/src/ts/components/pages/account/AccountPage.tsx
index ab00a1fb0a2d..9f5bb21307b9 100644
--- a/frontend/src/ts/components/pages/account/AccountPage.tsx
+++ b/frontend/src/ts/components/pages/account/AccountPage.tsx
@@ -13,6 +13,7 @@ import { isObject, typedKeys } from "../../../utils/misc";
 import { sanitize } from "../../../utils/sanitize";
 import { Button } from "../../common/Button";
 
+import { Charts } from "./Charts";
 import { Filters } from "./Filters";
 import { Table } from "./Table";
 import { TestStats } from "./TestStats";
@@ -56,6 +57,8 @@ export function AccountPage(): JSXElement {
         onResetFilter={() => setFilters(defaultResultFilters)}
       />
 
+      <Charts filters={filters} />
+
       <TestStats resultsQuery={queryState} />
       <Table data={[...data()]} onSortingChange={(val) => setSorting(val)} />
       <Button
diff --git a/frontend/src/ts/components/pages/account/Charts.tsx b/frontend/src/ts/components/pages/account/Charts.tsx
new file mode 100644
index 000000000000..1469e407cd95
--- /dev/null
+++ b/frontend/src/ts/components/pages/account/Charts.tsx
@@ -0,0 +1,79 @@
+import { ResultFilters, ResultFiltersKeys } from "@monkeytype/schemas/users";
+import { createMemo, JSXElement } from "solid-js";
+
+import { getSnapshot } from "../../../db";
+import { FaSolidIcon } from "../../../types/font-awesome";
+import {
+  capitalizeFirstLetter,
+  replaceUnderscoresWithSpaces,
+} from "../../../utils/strings";
+import { Fa } from "../../common/Fa";
+
+export function Charts(props: { filters: ResultFilters }): JSXElement {
+  return <FilterSummary filters={props.filters} />;
+}
+
+function FilterSummary(props: { filters: ResultFilters }): JSXElement {
+  return (
+    <div class="mt-4 mb-4 flex flex-wrap justify-center gap-4 text-sub [&>span>i]:mr-1">
+      <Item
+        group="date"
+        icon="fa-calendar"
+        format={replaceUnderscoresWithSpaces}
+      />
+      <Item group="mode" icon="fa-bars" />
+      <Item group="time" icon="fa-clock" />
+      <Item group="words" icon="fa-font" />
+      <Item group="difficulty" icon="fa-star" />
+      <Item group="punctuation" icon="fa-at" />
+      <Item group="numbers" icon="fa-hashtag" />
+      <Item group="language" icon="fa-globe-americas" />
+      <Item
+        group="funbox"
+        icon="fa-gamepad"
+        format={replaceUnderscoresWithSpaces}
+      />
+      <Item
+        group="tags"
+        icon="fa-tags"
+        format={(tag) =>
+          getSnapshot()?.tags.find((it) => it._id === tag)?.display ?? tag
+        }
+      />
+    </div>
+  );
+
+  function Item<
+    T extends ResultFiltersKeys,
+    K extends keyof ResultFilters[T],
+  >(options: {
+    group: T;
+    icon: FaSolidIcon;
+    format?: (val: K) => string;
+  }): JSXElement {
+    const values = createMemo(() =>
+      isAllSet(props.filters[options.group])
+        ? "all"
+        : Object.entries(props.filters[options.group])
+            .filter(([_, v]) => v)
+            .map(([it]) => options.format?.(it as K) ?? it)
+            .join(", "),
+    );
+
+    return (
+      <span
+        aria-label={capitalizeFirstLetter(options.group)}
+        data-balloon-pos="up"
+      >
+        <Fa icon={options.icon} fixedWidth />
+        {values()}
+      </span>
+    );
+  }
+}
+
+function isAllSet(
+  filter: Record<string | number | symbol, boolean | undefined>,
+): boolean {
+  return Object.values(filter).every((value) => value);
+}
diff --git a/frontend/src/ts/components/pages/account/Filters.tsx b/frontend/src/ts/components/pages/account/Filters.tsx
index eaa5e9a3eed4..dc493db38b8b 100644
--- a/frontend/src/ts/components/pages/account/Filters.tsx
+++ b/frontend/src/ts/components/pages/account/Filters.tsx
@@ -1,9 +1,12 @@
-import { ResultFilters } from "@monkeytype/schemas/users";
+import { ResultFilters, ResultFiltersKeys } from "@monkeytype/schemas/users";
 import { createMemo, createSignal, For, JSXElement, Show } from "solid-js";
 
 import { getSnapshot } from "../../../db";
 import { FaSolidIcon } from "../../../types/font-awesome";
-import { getLanguageDisplayString } from "../../../utils/strings";
+import {
+  getLanguageDisplayString,
+  replaceUnderscoresWithSpaces,
+} from "../../../utils/strings";
 import { Button } from "../../common/Button";
 import { H3 } from "../../common/Headers";
 import SlimSelect from "../../ui/SlimSelect";
@@ -15,7 +18,7 @@ const placeholder = (): void => {
 export function Filters(props: {
   filters: ResultFilters;
   onChangeFilter: (
-    id: keyof ResultFilters,
+    id: ResultFiltersKeys,
     value: Record<string, boolean>,
   ) => void;
   onResetFilter: () => void;
@@ -91,7 +94,7 @@ export function Filters(props: {
             icon="fa-gamepad"
             text="funbox"
             group="funbox"
-            format={(it) => it.replace(/_/g, " ")}
+            format={replaceUnderscoresWithSpaces}
           />
           <Dropdown
             icon="fa-globe-americas"
@@ -105,7 +108,7 @@ export function Filters(props: {
   );
 
   function Dropdown<
-    T extends keyof ResultFilters,
+    T extends ResultFiltersKeys,
     K extends keyof ResultFilters[T],
   >(options: {
     icon: FaSolidIcon;
@@ -115,7 +118,7 @@ export function Filters(props: {
   }): JSXElement {
     const allSelected = createMemo(
       () =>
-        Object.values(props.filters[options.group]).filter((it) => it === true)
+        Object.values(props.filters[options.group]).filter((it) => it)
           .length === Object.keys(props.filters[options.group]).length,
     );
     return (
@@ -149,7 +152,7 @@ export function Filters(props: {
               value: k,
               text: options.format?.(k as K) ?? k,
               filter: k,
-              selected: v as boolean,
+              selected: v,
             })),
           ]}
         />
@@ -158,7 +161,7 @@ export function Filters(props: {
   }
 
   function ButtonGroup<
-    T extends keyof ResultFilters,
+    T extends ResultFiltersKeys,
     K extends keyof ResultFilters[T],
   >(options: {
     icon?: FaSolidIcon;
diff --git a/frontend/src/ts/components/pages/account/Table.tsx b/frontend/src/ts/components/pages/account/Table.tsx
index b03d63faa8cb..4bde99568ecb 100644
--- a/frontend/src/ts/components/pages/account/Table.tsx
+++ b/frontend/src/ts/components/pages/account/Table.tsx
@@ -8,6 +8,7 @@ import { SnapshotResult } from "../../../constants/default-snapshot";
 import { getSnapshot } from "../../../db";
 import { getConfig } from "../../../signals/config";
 import { Formatting } from "../../../utils/format";
+import { replaceUnderscoresWithSpaces } from "../../../utils/strings";
 import { Fa, FaProps } from "../../common/Fa";
 import { DataTable, DataTableColumnDef } from "../../ui/table/DataTable";
 
@@ -119,7 +120,7 @@ function getColumns<M extends Mode>({
           <Show when={(info.row.original.funbox ?? []).length > 0}>
             <span
               aria-label={info.row.original.funbox
-                .map((it) => it.replace(/_/g, " "))
+                .map(replaceUnderscoresWithSpaces)
                 .join(", ")}
               data-balloon-pos="up"
             >
diff --git a/frontend/src/ts/utils/strings.ts b/frontend/src/ts/utils/strings.ts
index 4ec735b670ef..7572bc6f0b9f 100644
--- a/frontend/src/ts/utils/strings.ts
+++ b/frontend/src/ts/utils/strings.ts
@@ -134,7 +134,7 @@ export function getLanguageDisplayString(
   } else {
     out = language;
   }
-  return out.replace(/_/g, " ");
+  return replaceUnderscoresWithSpaces(out);
 }
 
 /**
@@ -365,6 +365,10 @@ export function isSpace(char: string): boolean {
   return spaces.has(codePoint);
 }
 
+export function replaceUnderscoresWithSpaces(text: string): string {
+  return text.replace(/_/g, " ");
+}
+
 // Export testing utilities for unit tests
 export const __testing = {
   hasRTLCharacters,
diff --git a/packages/schemas/src/users.ts b/packages/schemas/src/users.ts
index 9247f7090f50..7aafc1232d21 100644
--- a/packages/schemas/src/users.ts
+++ b/packages/schemas/src/users.ts
@@ -59,6 +59,7 @@ export const ResultFiltersSchema = z.object({
   funbox: z.record(FunboxNameSchema.or(NoneFilterSchema), z.boolean()),
 });
 export type ResultFilters = z.infer<typeof ResultFiltersSchema>;
+export type ResultFiltersKeys = keyof Omit<ResultFilters, "_id" | "name">;
 
 export const StreakHourOffsetSchema = z.number().min(-11).max(12).step(0.5);
 export type StreakHourOffset = z.infer<typeof StreakHourOffsetSchema>;

From 414e32ac5f171e5c062f5a3455faf0fd3d4d944a Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 19 Feb 2026 17:08:35 +0100
Subject: [PATCH 27/52] wip

---
 .../ts/components/pages/account/Filters.tsx   |  11 +-
 frontend/src/ts/components/ui/SlimSelect.tsx  | 868 +++++-------------
 2 files changed, 226 insertions(+), 653 deletions(-)

diff --git a/frontend/src/ts/components/pages/account/Filters.tsx b/frontend/src/ts/components/pages/account/Filters.tsx
index 13eb2b5eae32..4c15769400fb 100644
--- a/frontend/src/ts/components/pages/account/Filters.tsx
+++ b/frontend/src/ts/components/pages/account/Filters.tsx
@@ -116,14 +116,17 @@ export function Filters(props: {
     // Isolate this group's data to prevent unnecessary updates
     const groupData = createMemo(() => props.filters[options.group]);
 
-    const dropdownValues = createMemo(() =>
-      Object.keys(groupData()).map((k) => options.format?.(k as K) ?? k),
+    const dropdownOptions = createMemo(() =>
+      Object.keys(groupData()).map((k) => ({
+        value: k,
+        text: options.format?.(k as K) ?? k,
+      })),
     );
 
     const dropdownSelected = createMemo(() =>
       Object.entries(groupData())
         .filter(([, v]) => v as boolean)
-        .map(([k]) => options.format?.(k as K) ?? k),
+        .map(([k]) => k),
     );
 
     return (
@@ -152,7 +155,7 @@ export function Filters(props: {
             scrollToTop: true,
             maxValuesShown: 4,
           }}
-          values={dropdownValues()}
+          options={dropdownOptions()}
           selected={dropdownSelected()}
         />
       </div>
diff --git a/frontend/src/ts/components/ui/SlimSelect.tsx b/frontend/src/ts/components/ui/SlimSelect.tsx
index 3d67d5b6c1af..74d155f47f76 100644
--- a/frontend/src/ts/components/ui/SlimSelect.tsx
+++ b/frontend/src/ts/components/ui/SlimSelect.tsx
@@ -3,13 +3,12 @@ import { Optgroup, Option } from "slim-select/store";
 import { onMount, onCleanup, createEffect, createSignal } from "solid-js";
 import type { JSX, JSXElement } from "solid-js";
 
-// Global flag to prevent all SlimSelects from receiving data updates during any user interaction
 let globalActiveSlimSelectId: number | undefined;
 let globalUserChangeTimeoutId: number | undefined;
 let nextSlimSelectId = 0;
 
 export type SlimSelectProps = {
-  values?: string[];
+  options?: Pick<Option, "value" | "text">[];
   selected?: string[];
   settings?: Config["settings"] & { scrollToTop?: boolean };
   events?: Config["events"];
@@ -18,8 +17,6 @@ export type SlimSelectProps = {
   children?: JSX.Element;
   multiple?: boolean;
   addAllOption?: boolean;
-
-  // Solid-style instance exposure
   ref?: (instance: SlimSelectCore | null) => void;
 };
 
@@ -31,21 +28,18 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
   const [isInitializing, setIsInitializing] = createSignal(true);
   let currentSelected: string[] = props.selected ?? [];
   const instanceId = nextSlimSelectId++;
-  let lastValuesReference: typeof props.values | undefined = undefined;
+  let lastOptionsReference: typeof props.options | undefined = undefined;
 
-  // Convert values + selected into data format for slim-select
   const buildData = (
-    values: string[] = [],
+    options: Pick<Option, "value" | "text">[] = [],
     selected: string[] = [],
   ): Partial<Option>[] => {
-    return values.map((value) => ({
-      value,
-      text: value,
-      selected: selected.includes(value),
+    return options.map((option) => ({
+      ...option,
+      selected: selected.includes(option.value),
     }));
   };
 
-  // Helper to get all non-"all" option values from data
   const getAllOptionValues = (
     data: (Partial<Option> | Partial<Optgroup>)[],
   ): string[] => {
@@ -60,21 +54,9 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
       .map((o) => o.value as string);
   };
 
-  // Inject "all" option if needed
   const getDataWithAll = (data: Partial<Option>[]): Partial<Option>[] => {
     if (!props.addAllOption || !props.multiple) return data;
-
-    const allOption: Partial<Option> = {
-      value: "all",
-      text: "all",
-      selected: false,
-    };
-
-    return [allOption, ...data];
-  };
-
-  const getCleanValue = (val: string[]): string[] => {
-    return val ?? [];
+    return [{ value: "all", text: "all", selected: false }, ...data];
   };
 
   const syncSelectedToSlimSelect = (
@@ -82,463 +64,238 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
     runAfterChange = false,
   ): void => {
     if (!slimSelect) return;
-
-    const cleanValue = getCleanValue(selected);
-    slimSelect.setSelected(cleanValue, runAfterChange);
+    slimSelect.setSelected(selected ?? [], runAfterChange);
   };
 
-  onMount(() => {
-    const config: Config = {
-      select: selectRef,
-    };
+  const renderAllState = (
+    data: (Partial<Option> | Partial<Optgroup>)[],
+  ): void => {
+    if (!slimSelect) return;
 
-    const initialData = buildData(props.values, props.selected);
+    const allValues = getAllOptionValues(data);
+    for (const item of data) {
+      if (!("value" in item)) continue;
+      item.selected = item.value === "all";
+    }
     //@ts-expect-error todo
-    config.data = getDataWithAll(initialData);
-    if (props.settings) config.settings = props.settings;
-    if (props.cssClasses) config.cssClasses = props.cssClasses;
+    slimSelect.store.setData(data);
+    slimSelect.render.renderValues();
+
+    for (const item of data) {
+      if (!("value" in item)) continue;
+      const isAllOrIncluded =
+        item.value === "all" ||
+        (typeof item.value === "string" && allValues.includes(item.value));
+      item.selected = isAllOrIncluded;
+    }
+    setTimeout(() => {
+      if (!slimSelect) return;
+      //@ts-expect-error todo
+      slimSelect.store.setData(data);
+      //@ts-expect-error todo
+      slimSelect.render.renderOptions(data);
+    }, 0);
+  };
 
-    const ogAfterChange = props.events?.afterChange;
-    const ogBeforeChange = props.events?.beforeChange;
-    const ogBeforeOpen = props.events?.beforeOpen;
+  const handleAllSelection = (
+    selectedOptions: Option[],
+    oldSelectedOptions: Option[],
+  ): boolean | void => {
+    if (!props.addAllOption || !props.multiple || !slimSelect) return;
+
+    const includesAllNow = selectedOptions.some((o) => o.value === "all");
+    const includedAllBefore = oldSelectedOptions.some((o) => o.value === "all");
+
+    if (!includesAllNow && !includedAllBefore) return;
+
+    const data = slimSelect.store.getData();
+    const allValues = getAllOptionValues(data);
+
+    if (includesAllNow && !includedAllBefore) {
+      // User clicked "all"
+      renderAllState(data);
+      if (
+        props.onChange &&
+        JSON.stringify([...allValues].sort()) !==
+          JSON.stringify([...currentSelected].sort())
+      ) {
+        props.onChange(allValues);
+        currentSelected = allValues;
+      }
+      return false;
+    }
 
-    config.events = {
-      ...props.events,
-      beforeChange: (selectedOptions, oldSelectedOptions) => {
-        console.log(
-          "[SlimSelect beforeChange] ENTRY",
-          JSON.stringify(
-            {
-              instanceId,
-              selected: selectedOptions.map((o) => o.value),
-              selectedDetailed: selectedOptions.map((o) => ({
-                value: o.value,
-                selected: o.selected,
-              })),
-              old: oldSelectedOptions.map((o) => o.value),
-              oldDetailed: oldSelectedOptions.map((o) => ({
-                value: o.value,
-                selected: o.selected,
-              })),
-              addAllOption: props.addAllOption,
-              multiple: props.multiple,
-              currentSelected,
-              globalActiveSlimSelectIdBefore: globalActiveSlimSelectId,
-            },
-            null,
-            2,
-          ),
-        );
-        globalActiveSlimSelectId = instanceId;
-        console.log(
-          "[SlimSelect beforeChange] Set globalActiveSlimSelectId to",
-          instanceId,
-        );
-
-        // Call original beforeChange if it exists
-        const ogResult = ogBeforeChange?.(selectedOptions, oldSelectedOptions);
-        if (ogResult === false) {
-          console.log("[SlimSelect] Original beforeChange returned false");
-          return false;
-        }
+    if (includesAllNow && selectedOptions.length > oldSelectedOptions.length) {
+      // Clicked item while "all" selected - switch to individual display
+      for (const item of data) {
+        if (!("value" in item)) continue;
+        item.selected = item.value !== "all" && allValues.includes(item.value);
+      }
+      setTimeout(() => {
+        if (!slimSelect) return;
+        slimSelect.store.setData(data);
+        slimSelect.render.renderValues();
+        slimSelect.render.renderOptions(data);
+      }, 0);
+      return false;
+    }
 
-        // Handle "all" option logic if enabled
-        if (props.addAllOption && props.multiple && slimSelect) {
-          const includesAllNow = selectedOptions.some((o) => o.value === "all");
-          const includedAllBefore = oldSelectedOptions.some(
-            (o) => o.value === "all",
-          );
+    if (includesAllNow && selectedOptions.length < oldSelectedOptions.length) {
+      // Deselected items while "all" selected
+      const newSelection = selectedOptions
+        .filter((o) => o.value !== "all")
+        .map((o) => o.value);
 
-          console.log(
-            "[SlimSelect] All option state:",
-            JSON.stringify(
-              {
-                includesAllNow,
-                includedAllBefore,
-                selectedLength: selectedOptions.length,
-                oldLength: oldSelectedOptions.length,
-                lengthDiff: selectedOptions.length - oldSelectedOptions.length,
-              },
-              null,
-              2,
-            ),
-          );
+      for (const item of data) {
+        if (!("value" in item)) continue;
+        item.selected = newSelection.includes(item.value);
+      }
+      setTimeout(() => {
+        if (!slimSelect) return;
+        slimSelect.store.setData(data);
+        slimSelect.render.renderValues();
+        slimSelect.render.renderOptions(data);
+      }, 0);
 
-          // Check if this is a normal select/deselect (no "all" involved)
-          if (!includesAllNow && !includedAllBefore) {
-            console.log(
-              "[SlimSelect] Normal selection (no 'all' involved), allowing default",
-            );
-            // Log the current data state for debugging
-            const currentData = slimSelect.store.getData();
-            const selectedInData = currentData
-              .filter((item) => "value" in item && item.selected)
-              .map((item) => ("value" in item ? item.value : null));
-            console.log(
-              "[SlimSelect] Current data selected state:",
-              selectedInData,
-            );
-          }
+      if (
+        props.onChange &&
+        JSON.stringify([...newSelection].sort()) !==
+          JSON.stringify([...currentSelected].sort())
+      ) {
+        props.onChange(newSelection);
+        currentSelected = newSelection;
+      }
+      return false;
+    }
 
-          if (includesAllNow) {
-            if (!includedAllBefore) {
-              console.log("[SlimSelect] BRANCH: User clicked 'all'");
-              // User clicked "all" -> select all non-"all" options
-              const data = slimSelect.store.getData();
-              const allValues = getAllOptionValues(data);
-              console.log("[SlimSelect] All values:", allValues);
-
-              // First update: mark only "all" as selected for the select box display
-              for (const item of data) {
-                if (!("value" in item)) continue;
-                item.selected = item.value === "all";
-              }
-              slimSelect.store.setData(data);
-              slimSelect.render.renderValues();
-              console.log(
-                "[SlimSelect] Phase 1: Set 'all' only for renderValues",
-              );
-
-              // Then update data to mark all options as selected for dropdown display
-              for (const item of data) {
-                if (!("value" in item)) continue;
-                const isAllOrIncluded =
-                  item.value === "all" || allValues.includes(item.value);
-                item.selected = isAllOrIncluded;
-              }
-
-              // Defer final update to next tick
-              setTimeout(() => {
-                if (!slimSelect) return;
-                slimSelect.store.setData(data);
-                slimSelect.render.renderOptions(data);
-                console.log(
-                  "[SlimSelect] Phase 2: Rendered all options in dropdown",
-                );
-              }, 0);
-
-              // Manually trigger onChange
-              if (
-                props.onChange &&
-                JSON.stringify([...allValues].sort()) !==
-                  JSON.stringify([...currentSelected].sort())
-              ) {
-                console.log("[SlimSelect] Calling onChange with all values");
-                props.onChange(allValues);
-                currentSelected = allValues;
-              } else {
-                console.log(
-                  "[SlimSelect] Skipped onChange (no change or no handler)",
-                );
-              }
-
-              console.log("[SlimSelect] Returning false to prevent default");
-              return false; // Prevent default behavior
-            } else if (selectedOptions.length > oldSelectedOptions.length) {
-              console.log(
-                "[SlimSelect] BRANCH: User clicked individual option while 'all' selected",
-              );
-              // User clicked an individual option while "all" was selected
-              // Switch to showing all individual options as selected
-              const data = slimSelect.store.getData();
-              const allValues = getAllOptionValues(data);
-
-              // Update data to mark all individual options as selected and "all" as not selected
-              for (const item of data) {
-                if (!("value" in item)) continue;
-                if (item.value === "all") {
-                  item.selected = false;
-                } else if (allValues.includes(item.value)) {
-                  item.selected = true;
-                }
-              }
-
-              // Defer rendering to next tick to ensure proper UI updates
-              setTimeout(() => {
-                if (!slimSelect) return;
-                slimSelect.store.setData(data);
-                slimSelect.render.renderValues();
-                slimSelect.render.renderOptions(data);
-                console.log(
-                  "[SlimSelect] Switched from 'all' to individual options display",
-                );
-              }, 0);
-
-              console.log(
-                "[SlimSelect] Returning false (no onChange, just visual)",
-              );
-              // No onChange needed - value hasn't changed, just visual representation
-              return false;
-            } else if (selectedOptions.length < oldSelectedOptions.length) {
-              console.log(
-                "[SlimSelect] BRANCH: User deselected items while 'all' selected",
-              );
-              // User deselected items while "all" was selected -> remove "all"
-              const newSelection = selectedOptions
-                .filter((o) => o.value !== "all")
-                .map((o) => o.value);
-
-              console.log(
-                "[SlimSelect] New selection after deselect:",
-                newSelection,
-              );
-
-              // Update data based on new selection
-              const data = slimSelect.store.getData();
-              for (const item of data) {
-                if (!("value" in item)) continue;
-                item.selected = newSelection.includes(item.value);
-              }
-
-              // Defer rendering to next tick to ensure proper UI updates
-              setTimeout(() => {
-                if (!slimSelect) return;
-                slimSelect.store.setData(data);
-                slimSelect.render.renderValues();
-                slimSelect.render.renderOptions(data);
-                console.log("[SlimSelect] Updated UI after deselection");
-              }, 0);
-
-              // Manually trigger onChange
-              if (
-                props.onChange &&
-                JSON.stringify([...newSelection].sort()) !==
-                  JSON.stringify([...currentSelected].sort())
-              ) {
-                console.log("[SlimSelect] Calling onChange with new selection");
-                props.onChange(newSelection);
-                currentSelected = newSelection;
-              } else {
-                console.log(
-                  "[SlimSelect] Skipped onChange (no change or no handler)",
-                );
-              }
-
-              console.log("[SlimSelect] Returning false to prevent default");
-              return false;
-            }
-          } else {
-            if (includedAllBefore) {
-              console.log("[SlimSelect] BRANCH: User deselected 'all'");
-              // User deselected "all" -> clear everything
-              const data = slimSelect.store.getData();
-              for (const item of data) {
-                if (!("value" in item)) continue;
-                item.selected = false;
-              }
-
-              // Defer rendering to next tick to ensure proper UI updates
-              setTimeout(() => {
-                if (!slimSelect) return;
-                slimSelect.store.setData(data);
-                slimSelect.render.renderValues();
-                slimSelect.render.renderOptions(data);
-                console.log("[SlimSelect] Cleared all selections");
-              }, 0);
-
-              // Manually trigger onChange
-              if (props.onChange && currentSelected.length > 0) {
-                console.log("[SlimSelect] Calling onChange with empty array");
-                props.onChange([]);
-                currentSelected = [];
-              } else {
-                console.log(
-                  "[SlimSelect] Skipped onChange (already empty or no handler)",
-                );
-              }
-
-              console.log("[SlimSelect] Returning false to prevent default");
-              return false;
-            }
-          }
-        }
+    if (!includesAllNow && includedAllBefore) {
+      // User deselected "all"
+      for (const item of data) {
+        if (!("value" in item)) continue;
+        item.selected = false;
+      }
+      setTimeout(() => {
+        if (!slimSelect) return;
+        slimSelect.store.setData(data);
+        slimSelect.render.renderValues();
+        slimSelect.render.renderOptions(data);
+      }, 0);
 
-        console.log("[SlimSelect] Returning true (allow default behavior)");
-        return true; // Allow default behavior
-      },
-      afterChange: (newVal) => {
-        console.log(
-          "[SlimSelect afterChange] Entry:",
-          JSON.stringify(
-            {
-              instanceId,
-              newVal: newVal.map((o) => o.value),
-              currentSelected,
-              addAllOption: props.addAllOption,
-              globalActiveSlimSelectId,
-            },
-            null,
-            2,
-          ),
-        );
+      if (props.onChange && currentSelected.length > 0) {
+        props.onChange([]);
+        currentSelected = [];
+      }
+      return false;
+    }
+  };
 
-        if (!slimSelect) return;
+  onMount(() => {
+    const ogAfterChange = props.events?.afterChange;
+    const ogBeforeChange = props.events?.beforeChange;
+    const ogBeforeOpen = props.events?.beforeOpen;
 
-        let newValue = newVal.map((o) => o.value);
+    const config: Config = {
+      select: selectRef,
+      //@ts-expect-error todo
+      data: getDataWithAll(buildData(props.options, props.selected)),
+      ...(props.settings && { settings: props.settings }),
+      ...(props.cssClasses && { cssClasses: props.cssClasses }),
+      events: {
+        ...props.events,
+        beforeChange: (selectedOptions, oldSelectedOptions) => {
+          globalActiveSlimSelectId = instanceId;
+
+          if (ogBeforeChange?.(selectedOptions, oldSelectedOptions) === false) {
+            return false;
+          }
 
-        console.log("[SlimSelect afterChange] Initial newValue:", newValue);
+          const result = handleAllSelection(
+            selectedOptions,
+            oldSelectedOptions,
+          );
+          if (result !== undefined) return result;
 
-        // Handle "all" option
-        if (props.addAllOption && Array.isArray(newValue)) {
-          const hasOnlyAll = newValue.length === 1 && newValue[0] === "all";
+          return true;
+        },
+        afterChange: (newVal) => {
+          if (!slimSelect) return;
 
-          console.log("[SlimSelect afterChange] hasOnlyAll:", hasOnlyAll);
+          let newValue = newVal.map((o) => o.value);
 
-          if (hasOnlyAll) {
-            // If only "all" is selected, get all individual values
-            const data = slimSelect.store.getData();
-            const allValues = getAllOptionValues(data);
-            console.log(
-              "[SlimSelect afterChange] Converting 'all' to:",
-              allValues,
-            );
-            newValue = allValues;
-          } else {
-            // Otherwise just filter out "all" from the array
-            const beforeFilter = newValue;
-            newValue = newValue.filter((v) => v !== "all");
-            console.log(
-              "[SlimSelect afterChange] Filtered 'all' from:",
-              beforeFilter,
-              "to:",
-              newValue,
-            );
+          if (props.addAllOption && Array.isArray(newValue)) {
+            if (newValue.length === 1 && newValue[0] === "all") {
+              newValue = getAllOptionValues(slimSelect.store.getData());
+            } else {
+              newValue = newValue.filter((v) => v !== "all");
+            }
           }
-        }
 
-        const slimData = slimSelect.store.getData();
-        const options = slimData.flatMap((item) =>
-          "label" in item ? item.options : [item],
-        );
-
-        const currentValueExists =
-          currentSelected.length > 0 &&
-          currentSelected.every((v) => options.some((o) => o.value === v));
-
-        const newValueIsValid =
-          newValue.length > 0 &&
-          newValue.every((v) => options.some((o) => o.value === v));
-
-        const valueChanged =
-          JSON.stringify([...newValue].sort()) !==
-          JSON.stringify([...currentSelected].sort());
-
-        console.log(
-          "[SlimSelect afterChange] Validation:",
-          JSON.stringify(
-            {
-              currentValueExists,
-              newValueIsValid,
-              valueChanged,
-              currentSelected,
-              newValue,
-            },
-            null,
-            2,
-          ),
-        );
-
-        if (
-          props.onChange &&
-          valueChanged &&
-          (currentValueExists || newValueIsValid)
-        ) {
-          console.log(
-            "[SlimSelect afterChange] Calling onChange with:",
-            newValue,
-          );
-          props.onChange(newValue);
-          currentSelected = newValue;
-        } else {
-          console.log(
-            "[SlimSelect afterChange] Skipped onChange:",
-            JSON.stringify(
-              {
-                hasOnChange: !!props.onChange,
-                valueChanged,
-                currentValueExists,
-                newValueIsValid,
-                currentSelected,
-                newValue,
-              },
-              null,
-              2,
-            ),
+          const slimData = slimSelect.store.getData();
+          const options = slimData.flatMap((item) =>
+            "label" in item ? item.options : [item],
           );
-        }
 
-        ogAfterChange?.(newVal);
+          const valueChanged =
+            JSON.stringify([...newValue].sort()) !==
+            JSON.stringify([...currentSelected].sort());
+
+          const currentValueExists =
+            currentSelected.length > 0 &&
+            currentSelected.every((v) => options.some((o) => o.value === v));
+
+          const newValueIsValid =
+            newValue.length > 0 &&
+            newValue.every((v) => options.some((o) => o.value === v));
+
+          if (
+            props.onChange &&
+            valueChanged &&
+            (currentValueExists || newValueIsValid)
+          ) {
+            props.onChange(newValue);
+            currentSelected = newValue;
+          }
 
-        // Clear any pending timeout
-        if (globalUserChangeTimeoutId !== undefined) {
-          clearTimeout(globalUserChangeTimeoutId);
-        }
+          ogAfterChange?.(newVal);
 
-        // Defer clearing the flag to allow all reactive updates to complete
-        // Using requestAnimationFrame to wait for next frame after all updates settle
-        globalUserChangeTimeoutId = setTimeout(() => {
-          requestAnimationFrame(() => {
-            globalActiveSlimSelectId = undefined;
-            globalUserChangeTimeoutId = undefined;
-            console.log(
-              "[SlimSelect afterChange] Cleared globalActiveSlimSelectId",
-            );
-          });
-        }, 150) as unknown as number;
-      },
-      beforeOpen: () => {
-        if (!slimSelect) return;
-
-        if (props.settings?.scrollToTop) {
-          const listElement = slimSelect.render.content.list;
-          const topListItem = listElement.children.item(0) as HTMLElement;
+          if (globalUserChangeTimeoutId !== undefined) {
+            clearTimeout(globalUserChangeTimeoutId);
+          }
 
-          listElement.scrollTop = topListItem.offsetTop - listElement.offsetTop;
-        }
-        ogBeforeOpen?.();
+          globalUserChangeTimeoutId = setTimeout(() => {
+            requestAnimationFrame(() => {
+              globalActiveSlimSelectId = undefined;
+              globalUserChangeTimeoutId = undefined;
+            });
+          }, 150) as unknown as number;
+        },
+        beforeOpen: () => {
+          if (!slimSelect) return;
+
+          if (props.settings?.scrollToTop) {
+            const listElement = slimSelect.render.content.list;
+            const topListItem = listElement.children.item(0) as HTMLElement;
+            listElement.scrollTop =
+              topListItem.offsetTop - listElement.offsetTop;
+          }
+          ogBeforeOpen?.();
+        },
       },
     };
 
     slimSelect = new SlimSelectCore(config);
-
-    // Store initial values reference
-    lastValuesReference = props.values;
-
-    // expose instance
+    lastOptionsReference = props.options;
     props.ref?.(slimSelect);
 
     if (props.selected !== undefined) {
       syncSelectedToSlimSelect(props.selected, false);
     }
 
-    console.log(
-      "[SlimSelect onMount] Setting isInitialMount to false",
-      JSON.stringify({ instanceId, currentSelected }, null, 2),
-    );
     setIsInitialMount(false);
 
-    // Defer onChange call until after all effects settle to avoid race condition
     setTimeout(() => {
-      console.log(
-        "[SlimSelect onMount setTimeout] Starting",
-        JSON.stringify(
-          {
-            instanceId,
-            hasOnChange: !!props.onChange,
-            hasValues: !!props.values,
-            hasSlimSelect: !!slimSelect,
-            currentSelected,
-          },
-          null,
-          2,
-        ),
-      );
-
-      if (!props.onChange || !props.values || !slimSelect) {
+      if (!props.onChange || !props.options || !slimSelect) {
         setIsInitializing(false);
-        console.log(
-          "[SlimSelect onMount setTimeout] No onChange/values/slimSelect, set isInitializing=false",
-        );
         return;
       }
 
@@ -547,62 +304,22 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
         .flatMap((item) => ("label" in item ? item.options : [item]))
         .filter((item) => item.selected);
 
-      console.log(
-        "[SlimSelect onMount setTimeout] Found selected options:",
-        JSON.stringify(
-          {
-            instanceId,
-            selectedCount: selectedOptions.length,
-            selectedValues: selectedOptions.map((o) => o.value),
-          },
-          null,
-          2,
-        ),
-      );
-
       if (selectedOptions.length > 0) {
         let initialValue = selectedOptions.map((o) => o.value);
 
-        // Handle "all" option
         if (props.addAllOption) {
-          const hasOnlyAll =
-            initialValue.length === 1 && initialValue[0] === "all";
-          if (hasOnlyAll) {
-            const allValues = getAllOptionValues(initialData);
-            initialValue = allValues;
+          if (initialValue.length === 1 && initialValue[0] === "all") {
+            initialValue = getAllOptionValues(initialData);
           } else {
             initialValue = initialValue.filter((v) => v !== "all");
           }
         }
 
-        console.log(
-          "[SlimSelect onMount] Calling onChange with initial values:",
-          JSON.stringify(
-            {
-              instanceId,
-              initialValue,
-              currentValueBefore: currentSelected,
-            },
-            null,
-            2,
-          ),
-        );
         props.onChange(initialValue);
         currentSelected = initialValue;
-        console.log(
-          "[SlimSelect onMount] After onChange, currentSelected set to:",
-          JSON.stringify(currentSelected, null, 2),
-        );
       }
 
-      // Clear initializing flag after onChange completes and effects settle
-      setTimeout(() => {
-        setIsInitializing(false);
-        console.log(
-          "[SlimSelect onMount] Set isInitializing=false",
-          JSON.stringify({ instanceId }, null, 2),
-        );
-      }, 0);
+      setTimeout(() => setIsInitializing(false), 0);
     }, 0);
   });
 
@@ -615,58 +332,22 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
   createEffect(() => {
     const selected = props.selected;
 
-    console.log(
-      "[SlimSelect createEffect:selected]",
-      JSON.stringify(
-        {
-          instanceId,
-          isInitialMount: isInitialMount(),
-          selected,
-          currentSelected,
-        },
-        null,
-        2,
-      ),
-    );
-
     if (isInitialMount()) {
       currentSelected = selected ?? [];
-      console.log(
-        "[SlimSelect createEffect:selected] Initial mount, set currentSelected to:",
-        JSON.stringify(currentSelected, null, 2),
-      );
       return;
     }
 
     if (slimSelect && selected !== undefined) {
       currentSelected = selected;
-      console.log(
-        "[SlimSelect createEffect:selected] Syncing selected to SlimSelect:",
-        JSON.stringify(selected, null, 2),
-      );
-
-      // Check if all values are selected - show "all" visually if so
-      if (props.addAllOption && props.multiple && props.values) {
-        const allPossibleValues = props.values;
-        const selectedValues = selected ?? [];
 
+      if (props.addAllOption && props.multiple && props.options) {
         const allAreSelected =
-          allPossibleValues.length > 0 &&
-          selectedValues.length === allPossibleValues.length &&
-          allPossibleValues.every((v) => selectedValues.includes(v));
-
-        console.log(
-          "[SlimSelect createEffect:selected] All check:",
-          JSON.stringify(
-            { allPossibleValues, selectedValues, allAreSelected },
-            null,
-            2,
-          ),
-        );
+          props.options.length > 0 &&
+          selected.length === props.options.length &&
+          props.options.every((opt) => selected.includes(opt.value));
 
         if (allAreSelected) {
           const storeData = slimSelect.store.getData();
-          // Phase 1: Show only "all" in select box
           for (const item of storeData) {
             if (!("value" in item)) continue;
             item.selected = item.value === "all";
@@ -674,19 +355,16 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
           slimSelect.store.setData(storeData);
           slimSelect.render.renderValues();
 
-          // Phase 2: Show all items checked in dropdown
           for (const item of storeData) {
             if (!("value" in item)) continue;
             item.selected =
-              item.value === "all" || allPossibleValues.includes(item.value);
+              item.value === "all" ||
+              props.options.some((opt) => opt.value === item.value);
           }
           setTimeout(() => {
             if (!slimSelect) return;
             slimSelect.store.setData(storeData);
             slimSelect.render.renderOptions(storeData);
-            console.log(
-              "[SlimSelect createEffect:selected] Applied 'all' visual state",
-            );
           }, 0);
           return;
         }
@@ -697,116 +375,26 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
   });
 
   createEffect(() => {
-    const values = props.values;
+    const options = props.options;
     const selected = props.selected;
 
-    console.log(
-      "[SlimSelect createEffect:values]",
-      JSON.stringify(
-        {
-          instanceId,
-          isInitialMount: isInitialMount(),
-          isInitializing: isInitializing(),
-          hasSlimSelect: !!slimSelect,
-          hasValues: !!values,
-          valuesLength: values?.length,
-          globalActiveSlimSelectId,
-          valuesReferenceChanged: values !== lastValuesReference,
-        },
-        null,
-        2,
-      ),
-    );
-
-    if (!isInitialMount() && slimSelect && values) {
-      // Skip if values reference hasn't changed
-      if (values === lastValuesReference) {
-        console.log(
-          "[SlimSelect createEffect:values] Skipping - values reference unchanged",
-          JSON.stringify(
-            {
-              instanceId,
-            },
-            null,
-            2,
-          ),
-        );
-        return;
-      }
-
-      if (isInitializing()) {
-        console.log(
-          "[SlimSelect createEffect:values] Skipping update - instance is initializing",
-          JSON.stringify(
-            {
-              instanceId,
-            },
-            null,
-            2,
-          ),
-        );
-        return;
-      }
-
-      if (globalActiveSlimSelectId !== undefined) {
-        console.log(
-          "[SlimSelect createEffect:values] Skipping update - another instance is active",
-          JSON.stringify(
-            {
-              thisInstanceId: instanceId,
-              activeInstanceId: globalActiveSlimSelectId,
-            },
-            null,
-            2,
-          ),
-        );
-      }
-
-      const data = buildData(values, selected ?? []);
-
-      console.log(
-        "[SlimSelect createEffect:values] Applying update",
-        JSON.stringify(
-          {
-            instanceId,
-            valuesLength: values?.length,
-            selectedLength: selected?.length,
-            valuesPreview: values?.slice(0, 3),
-            selectedPreview: selected?.slice(0, 3),
-          },
-          null,
-          2,
-        ),
-      );
+    if (!isInitialMount() && slimSelect && options) {
+      if (options === lastOptionsReference) return;
+      if (isInitializing()) return;
+      if (globalActiveSlimSelectId !== undefined) return;
 
+      const data = buildData(options, selected ?? []);
       //@ts-expect-error todo
       slimSelect.store.setData(getDataWithAll(data));
 
-      // Update last data reference AFTER all updates complete
-      let shouldUpdateLastRef = true;
-
-      // Handle "all" option visual state when all items are selected
       if (props.addAllOption && props.multiple) {
         const storeData = slimSelect.store.getData();
         const allPossibleValues = getAllOptionValues(storeData);
-        const selectedValues = selected ?? [];
-
         const allAreSelected =
           allPossibleValues.length > 0 &&
-          selectedValues.length === allPossibleValues.length;
-
-        console.log(
-          "[SlimSelect createEffect:values] All check:",
-          JSON.stringify(
-            { allPossibleValues, selectedValues, allAreSelected },
-            null,
-            2,
-          ),
-        );
+          (selected?.length ?? 0) === allPossibleValues.length;
 
         if (allAreSelected) {
-          shouldUpdateLastRef = false; // Defer until setTimeout completes
-          // Phase 1: Show only "all" in select box
           for (const item of storeData) {
             if (!("value" in item)) continue;
             item.selected = item.value === "all";
@@ -814,7 +402,6 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
           slimSelect.store.setData(storeData);
           slimSelect.render.renderValues();
 
-          // Phase 2: Show all items checked in dropdown
           for (const item of storeData) {
             if (!("value" in item)) continue;
             item.selected =
@@ -824,36 +411,19 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
             if (!slimSelect) return;
             slimSelect.store.setData(storeData);
             slimSelect.render.renderOptions(storeData);
-            lastValuesReference = values;
-            console.log(
-              "[SlimSelect createEffect:values] Applied 'all' visual state",
-            );
+            lastOptionsReference = options;
           }, 0);
           return;
         }
       }
 
-      // Normal case: just render the incoming data
       slimSelect.render.renderValues();
       slimSelect.render.renderOptions(slimSelect.store.getData());
-
-      if (shouldUpdateLastRef) {
-        lastValuesReference = values;
-      }
-
-      console.log("[SlimSelect createEffect:values] Rendered UI after update");
+      lastOptionsReference = options;
 
       if (props.selected !== undefined) {
-        console.log(
-          "[SlimSelect createEffect:values] Syncing selected after update:",
-          JSON.stringify(props.selected, null, 2),
-        );
         syncSelectedToSlimSelect(props.selected, false);
       }
-    } else {
-      console.log(
-        "[SlimSelect createEffect:values] Skipped - conditions not met",
-      );
     }
   });
 

From b7fb022c5e531182692b798879da4b681ce6931f Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 19 Feb 2026 17:20:46 +0100
Subject: [PATCH 28/52] wip

---
 frontend/src/ts/components/ui/SlimSelect.tsx | 207 ++++++++++++-------
 1 file changed, 127 insertions(+), 80 deletions(-)

diff --git a/frontend/src/ts/components/ui/SlimSelect.tsx b/frontend/src/ts/components/ui/SlimSelect.tsx
index 74d155f47f76..172a650b186a 100644
--- a/frontend/src/ts/components/ui/SlimSelect.tsx
+++ b/frontend/src/ts/components/ui/SlimSelect.tsx
@@ -3,12 +3,31 @@ import { Optgroup, Option } from "slim-select/store";
 import { onMount, onCleanup, createEffect, createSignal } from "solid-js";
 import type { JSX, JSXElement } from "solid-js";
 
-let globalActiveSlimSelectId: number | undefined;
-let globalUserChangeTimeoutId: number | undefined;
-let nextSlimSelectId = 0;
+// Helper: Check if two arrays have the same elements (unordered)
+function arraysEqual(a: string[], b: string[]): boolean {
+  if (a.length !== b.length) return false;
+  const setA = new Set(a);
+  return b.every((item) => setA.has(item));
+}
+
+// Helper: Update SlimSelect data and trigger renders
+function updateSlimSelectData(
+  slimSelect: SlimSelectCore,
+  data: (Partial<Option> | Partial<Optgroup>)[],
+  scheduleRender = false,
+): void {
+  slimSelect.store.setData(data as Option[]);
+  if (scheduleRender) {
+    requestAnimationFrame(() => {
+      slimSelect.render.renderValues();
+      slimSelect.render.renderOptions(data as Option[]);
+    });
+  }
+}
 
 export type SlimSelectProps = {
   options?: Pick<Option, "value" | "text">[];
+  values?: string[]; // Simple string array where value === text
   selected?: string[];
   settings?: Config["settings"] & { scrollToTop?: boolean };
   events?: Config["events"];
@@ -24,22 +43,38 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
   let selectRef!: HTMLSelectElement;
   let slimSelect: SlimSelectCore | null = null;
 
+  // State tracking
   const [isInitialMount, setIsInitialMount] = createSignal(true);
   const [isInitializing, setIsInitializing] = createSignal(true);
   let currentSelected: string[] = props.selected ?? [];
-  const instanceId = nextSlimSelectId++;
   let lastOptionsReference: typeof props.options | undefined = undefined;
 
+  // Instance-scoped state to replace globals
+  let isActiveInstance = false;
+  let userChangeTimeoutId: number | undefined;
+
+  // Derive options from either 'options' or 'values' prop
+  const getOptions = (): Pick<Option, "value" | "text">[] => {
+    if (props.options) return props.options;
+    if (props.values) {
+      return props.values.map((v) => ({ value: v, text: v }));
+    }
+    return [];
+  };
+
+  // Build option data with selection state
   const buildData = (
     options: Pick<Option, "value" | "text">[] = [],
     selected: string[] = [],
   ): Partial<Option>[] => {
+    const selectedSet = new Set(selected);
     return options.map((option) => ({
       ...option,
-      selected: selected.includes(option.value),
+      selected: selectedSet.has(option.value),
     }));
   };
 
+  // Extract all non-special option values from data
   const getAllOptionValues = (
     data: (Partial<Option> | Partial<Optgroup>)[],
   ): string[] => {
@@ -54,6 +89,7 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
       .map((o) => o.value as string);
   };
 
+  // Prepend "all" option if configured
   const getDataWithAll = (data: Partial<Option>[]): Partial<Option>[] => {
     if (!props.addAllOption || !props.multiple) return data;
     return [{ value: "all", text: "all", selected: false }, ...data];
@@ -67,36 +103,40 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
     slimSelect.setSelected(selected ?? [], runAfterChange);
   };
 
+  // Render "all" selected state (shows "all" but all items are actually selected)
   const renderAllState = (
     data: (Partial<Option> | Partial<Optgroup>)[],
   ): void => {
     if (!slimSelect) return;
 
     const allValues = getAllOptionValues(data);
+    const allValuesSet = new Set(allValues);
+
+    // First pass: show only "all" in the display
     for (const item of data) {
       if (!("value" in item)) continue;
       item.selected = item.value === "all";
     }
-    //@ts-expect-error todo
-    slimSelect.store.setData(data);
+    slimSelect.store.setData(data as Option[]);
     slimSelect.render.renderValues();
 
+    // Second pass: mark all items as selected in the data
     for (const item of data) {
       if (!("value" in item)) continue;
       const isAllOrIncluded =
         item.value === "all" ||
-        (typeof item.value === "string" && allValues.includes(item.value));
+        (typeof item.value === "string" && allValuesSet.has(item.value));
       item.selected = isAllOrIncluded;
     }
-    setTimeout(() => {
+
+    requestAnimationFrame(() => {
       if (!slimSelect) return;
-      //@ts-expect-error todo
-      slimSelect.store.setData(data);
-      //@ts-expect-error todo
-      slimSelect.render.renderOptions(data);
-    }, 0);
+      slimSelect.store.setData(data as Option[]);
+      slimSelect.render.renderOptions(data as Option[]);
+    });
   };
 
+  // Handle "all" option selection logic
   const handleAllSelection = (
     selectedOptions: Option[],
     oldSelectedOptions: Option[],
@@ -106,80 +146,76 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
     const includesAllNow = selectedOptions.some((o) => o.value === "all");
     const includedAllBefore = oldSelectedOptions.some((o) => o.value === "all");
 
+    // No "all" option involvement, skip special handling
     if (!includesAllNow && !includedAllBefore) return;
 
     const data = slimSelect.store.getData();
     const allValues = getAllOptionValues(data);
+    const allValuesSet = new Set(allValues);
 
+    // Case 1: User clicked "all" option
     if (includesAllNow && !includedAllBefore) {
-      // User clicked "all"
       renderAllState(data);
-      if (
-        props.onChange &&
-        JSON.stringify([...allValues].sort()) !==
-          JSON.stringify([...currentSelected].sort())
-      ) {
+      if (props.onChange && !arraysEqual(allValues, currentSelected)) {
         props.onChange(allValues);
         currentSelected = allValues;
       }
       return false;
     }
 
+    // Case 2: User clicked individual item while "all" is selected
     if (includesAllNow && selectedOptions.length > oldSelectedOptions.length) {
-      // Clicked item while "all" selected - switch to individual display
+      // Switch from "all" display to showing individual selections
       for (const item of data) {
         if (!("value" in item)) continue;
-        item.selected = item.value !== "all" && allValues.includes(item.value);
+        item.selected = item.value !== "all" && allValuesSet.has(item.value);
       }
-      setTimeout(() => {
+      requestAnimationFrame(() => {
         if (!slimSelect) return;
-        slimSelect.store.setData(data);
+        updateSlimSelectData(slimSelect, data, false);
         slimSelect.render.renderValues();
-        slimSelect.render.renderOptions(data);
-      }, 0);
+        slimSelect.render.renderOptions(data as Option[]);
+      });
       return false;
     }
 
+    // Case 3: User deselected items while "all" was selected
     if (includesAllNow && selectedOptions.length < oldSelectedOptions.length) {
-      // Deselected items while "all" selected
       const newSelection = selectedOptions
         .filter((o) => o.value !== "all")
         .map((o) => o.value);
+      const newSelectionSet = new Set(newSelection);
 
       for (const item of data) {
         if (!("value" in item)) continue;
-        item.selected = newSelection.includes(item.value);
+        item.selected = newSelectionSet.has(item.value);
       }
-      setTimeout(() => {
+      requestAnimationFrame(() => {
         if (!slimSelect) return;
-        slimSelect.store.setData(data);
+        updateSlimSelectData(slimSelect, data, false);
         slimSelect.render.renderValues();
-        slimSelect.render.renderOptions(data);
-      }, 0);
-
-      if (
-        props.onChange &&
-        JSON.stringify([...newSelection].sort()) !==
-          JSON.stringify([...currentSelected].sort())
-      ) {
+        slimSelect.render.renderOptions(data as Option[]);
+      });
+
+      if (props.onChange && !arraysEqual(newSelection, currentSelected)) {
         props.onChange(newSelection);
         currentSelected = newSelection;
       }
       return false;
     }
 
+    // Case 4: User deselected "all" option
     if (!includesAllNow && includedAllBefore) {
-      // User deselected "all"
       for (const item of data) {
         if (!("value" in item)) continue;
         item.selected = false;
       }
-      setTimeout(() => {
+      requestAnimationFrame(() => {
         if (!slimSelect) return;
-        slimSelect.store.setData(data);
+        updateSlimSelectData(slimSelect, data, false);
         slimSelect.render.renderValues();
-        slimSelect.render.renderOptions(data);
-      }, 0);
+        slimSelect.render.renderOptions(data as Option[]);
+      });
 
       if (props.onChange && currentSelected.length > 0) {
         props.onChange([]);
@@ -196,14 +232,13 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
 
     const config: Config = {
       select: selectRef,
-      //@ts-expect-error todo
-      data: getDataWithAll(buildData(props.options, props.selected)),
+      data: getDataWithAll(buildData(getOptions(), props.selected)) as Option[],
       ...(props.settings && { settings: props.settings }),
       ...(props.cssClasses && { cssClasses: props.cssClasses }),
       events: {
         ...props.events,
         beforeChange: (selectedOptions, oldSelectedOptions) => {
-          globalActiveSlimSelectId = instanceId;
+          isActiveInstance = true;
 
           if (ogBeforeChange?.(selectedOptions, oldSelectedOptions) === false) {
             return false;
@@ -235,9 +270,7 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
             "label" in item ? item.options : [item],
           );
 
-          const valueChanged =
-            JSON.stringify([...newValue].sort()) !==
-            JSON.stringify([...currentSelected].sort());
+          const valueChanged = !arraysEqual(newValue, currentSelected);
 
           const currentValueExists =
             currentSelected.length > 0 &&
@@ -258,14 +291,15 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
 
           ogAfterChange?.(newVal);
 
-          if (globalUserChangeTimeoutId !== undefined) {
-            clearTimeout(globalUserChangeTimeoutId);
+          // Clear active instance flag with debounce
+          if (userChangeTimeoutId !== undefined) {
+            clearTimeout(userChangeTimeoutId);
           }
 
-          globalUserChangeTimeoutId = setTimeout(() => {
+          userChangeTimeoutId = setTimeout(() => {
             requestAnimationFrame(() => {
-              globalActiveSlimSelectId = undefined;
-              globalUserChangeTimeoutId = undefined;
+              isActiveInstance = false;
+              userChangeTimeoutId = undefined;
             });
           }, 150) as unknown as number;
         },
@@ -293,8 +327,9 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
 
     setIsInitialMount(false);
 
-    setTimeout(() => {
-      if (!props.onChange || !props.options || !slimSelect) {
+    // Initialize with selected values
+    requestAnimationFrame(() => {
+      if (!props.onChange || (!props.options && !props.values) || !slimSelect) {
         setIsInitializing(false);
         return;
       }
@@ -319,8 +354,8 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
         currentSelected = initialValue;
       }
 
-      setTimeout(() => setIsInitializing(false), 0);
-    }, 0);
+      requestAnimationFrame(() => setIsInitializing(false));
+    });
   });
 
   onCleanup(() => {
@@ -329,6 +364,7 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
     props.ref?.(null);
   });
 
+  // Effect: Sync external selected prop changes to SlimSelect
   createEffect(() => {
     const selected = props.selected;
 
@@ -340,32 +376,38 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
     if (slimSelect && selected !== undefined) {
       currentSelected = selected;
 
-      if (props.addAllOption && props.multiple && props.options) {
+      // Handle "all" selection rendering
+      if (props.addAllOption && props.multiple) {
+        const options = getOptions();
+        const selectedSet = new Set(selected);
         const allAreSelected =
-          props.options.length > 0 &&
-          selected.length === props.options.length &&
-          props.options.every((opt) => selected.includes(opt.value));
+          options.length > 0 &&
+          selected.length === options.length &&
+          options.every((opt) => selectedSet.has(opt.value));
 
         if (allAreSelected) {
           const storeData = slimSelect.store.getData();
+          const optionValuesSet = new Set(options.map((opt) => opt.value));
+
+          // First pass: show only "all"
           for (const item of storeData) {
             if (!("value" in item)) continue;
             item.selected = item.value === "all";
           }
-          slimSelect.store.setData(storeData);
+          slimSelect.store.setData(storeData as Option[]);
           slimSelect.render.renderValues();
 
+          // Second pass: mark all items selected
           for (const item of storeData) {
             if (!("value" in item)) continue;
             item.selected =
-              item.value === "all" ||
-              props.options.some((opt) => opt.value === item.value);
+              item.value === "all" || optionValuesSet.has(item.value);
           }
-          setTimeout(() => {
+          requestAnimationFrame(() => {
             if (!slimSelect) return;
-            slimSelect.store.setData(storeData);
-            slimSelect.render.renderOptions(storeData);
-          }, 0);
+            slimSelect.store.setData(storeData as Option[]);
+            slimSelect.render.renderOptions(storeData as Option[]);
+          });
           return;
         }
       }
@@ -374,19 +416,21 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
     }
   });
 
+  // Effect: Handle options prop changes
   createEffect(() => {
-    const options = props.options;
+    const options = getOptions();
     const selected = props.selected;
 
-    if (!isInitialMount() && slimSelect && options) {
+    if (!isInitialMount() && slimSelect && options.length > 0) {
+      // Skip if options haven't changed or we're still initializing or user is actively changing
       if (options === lastOptionsReference) return;
       if (isInitializing()) return;
-      if (globalActiveSlimSelectId !== undefined) return;
+      if (isActiveInstance) return;
 
       const data = buildData(options, selected ?? []);
-      //@ts-expect-error todo
-      slimSelect.store.setData(getDataWithAll(data));
+      slimSelect.store.setData(getDataWithAll(data) as Option[]);
 
+      // Handle "all" option when all items are selected
       if (props.addAllOption && props.multiple) {
         const storeData = slimSelect.store.getData();
         const allPossibleValues = getAllOptionValues(storeData);
@@ -395,24 +439,27 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
           (selected?.length ?? 0) === allPossibleValues.length;
 
         if (allAreSelected) {
+          const optionValuesSet = new Set(allPossibleValues);
+          // First pass: show only "all"
           for (const item of storeData) {
             if (!("value" in item)) continue;
             item.selected = item.value === "all";
           }
-          slimSelect.store.setData(storeData);
+          slimSelect.store.setData(storeData as Option[]);
           slimSelect.render.renderValues();
 
+          // Second pass: mark all items selected
           for (const item of storeData) {
             if (!("value" in item)) continue;
             item.selected =
-              item.value === "all" || allPossibleValues.includes(item.value);
+              item.value === "all" || optionValuesSet.has(item.value);
           }
-          setTimeout(() => {
+          requestAnimationFrame(() => {
             if (!slimSelect) return;
-            slimSelect.store.setData(storeData);
-            slimSelect.render.renderOptions(storeData);
+            slimSelect.store.setData(storeData as Option[]);
+            slimSelect.render.renderOptions(storeData as Option[]);
             lastOptionsReference = options;
-          }, 0);
+          });
           return;
         }
       }

From 8f4fdb7916ad947f1c76a3ae5e31a57343fcba06 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Thu, 19 Feb 2026 17:33:57 +0100
Subject: [PATCH 29/52] settings

---
 .../src/ts/components/layout/footer/Footer.tsx |  2 +-
 .../ts/components/pages/account/Filters.tsx    | 18 +++++++++---------
 frontend/src/ts/components/ui/SlimSelect.tsx   | 18 ++++++++++--------
 3 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/frontend/src/ts/components/layout/footer/Footer.tsx b/frontend/src/ts/components/layout/footer/Footer.tsx
index 6ac4bcf73325..7facdece1d9b 100644
--- a/frontend/src/ts/components/layout/footer/Footer.tsx
+++ b/frontend/src/ts/components/layout/footer/Footer.tsx
@@ -95,12 +95,12 @@ export function Footer(): JSXElement {
           showSearch: false,
           allowDeselect: true,
           closeOnSelect: false,
+          addAllOption: true,
         }}
         values={testValues}
         selected={testSelected()}
         onChange={setTestSelected}
         multiple
-        addAllOption
       ></SlimSelect>
       <Keytips />
 
diff --git a/frontend/src/ts/components/pages/account/Filters.tsx b/frontend/src/ts/components/pages/account/Filters.tsx
index 4c15769400fb..e927d92c209e 100644
--- a/frontend/src/ts/components/pages/account/Filters.tsx
+++ b/frontend/src/ts/components/pages/account/Filters.tsx
@@ -134,7 +134,15 @@ export function Filters(props: {
         <H3 fa={{ icon: options.icon, fixedWidth: true }} text={options.text} />
         <SlimSelect
           multiple
-          addAllOption
+          settings={{
+            showSearch: true,
+            placeholderText: "select a " + options.group,
+            allowDeselect: true,
+            closeOnSelect: false,
+            maxValuesShown: 4,
+            addAllOption: true,
+            scrollToTop: true,
+          }}
           onChange={(selectedValues) => {
             // Start with existing filter values to preserve all keys
             const filterMap: Record<string, boolean> = {
@@ -147,14 +155,6 @@ export function Filters(props: {
             }
             props.onChangeFilter(options.group, filterMap);
           }}
-          settings={{
-            showSearch: true,
-            placeholderText: "select a " + options.group,
-            allowDeselect: true,
-            closeOnSelect: false,
-            scrollToTop: true,
-            maxValuesShown: 4,
-          }}
           options={dropdownOptions()}
           selected={dropdownSelected()}
         />
diff --git a/frontend/src/ts/components/ui/SlimSelect.tsx b/frontend/src/ts/components/ui/SlimSelect.tsx
index 172a650b186a..7218e27d7a89 100644
--- a/frontend/src/ts/components/ui/SlimSelect.tsx
+++ b/frontend/src/ts/components/ui/SlimSelect.tsx
@@ -29,13 +29,15 @@ export type SlimSelectProps = {
   options?: Pick<Option, "value" | "text">[];
   values?: string[]; // Simple string array where value === text
   selected?: string[];
-  settings?: Config["settings"] & { scrollToTop?: boolean };
+  settings?: Config["settings"] & {
+    scrollToTop?: boolean;
+    addAllOption?: boolean;
+  };
   events?: Config["events"];
   cssClasses?: Config["cssClasses"];
   onChange?: (selected: string[]) => void;
   children?: JSX.Element;
   multiple?: boolean;
-  addAllOption?: boolean;
   ref?: (instance: SlimSelectCore | null) => void;
 };
 
@@ -91,7 +93,7 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
 
   // Prepend "all" option if configured
   const getDataWithAll = (data: Partial<Option>[]): Partial<Option>[] => {
-    if (!props.addAllOption || !props.multiple) return data;
+    if (!props.settings?.addAllOption || !props.multiple) return data;
     return [{ value: "all", text: "all", selected: false }, ...data];
   };
 
@@ -141,7 +143,7 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
     selectedOptions: Option[],
     oldSelectedOptions: Option[],
   ): boolean | void => {
-    if (!props.addAllOption || !props.multiple || !slimSelect) return;
+    if (!props.settings?.addAllOption || !props.multiple || !slimSelect) return;
 
     const includesAllNow = selectedOptions.some((o) => o.value === "all");
     const includedAllBefore = oldSelectedOptions.some((o) => o.value === "all");
@@ -257,7 +259,7 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
 
           let newValue = newVal.map((o) => o.value);
 
-          if (props.addAllOption && Array.isArray(newValue)) {
+          if (props.settings?.addAllOption && Array.isArray(newValue)) {
             if (newValue.length === 1 && newValue[0] === "all") {
               newValue = getAllOptionValues(slimSelect.store.getData());
             } else {
@@ -342,7 +344,7 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
       if (selectedOptions.length > 0) {
         let initialValue = selectedOptions.map((o) => o.value);
 
-        if (props.addAllOption) {
+        if (props.settings?.addAllOption) {
           if (initialValue.length === 1 && initialValue[0] === "all") {
             initialValue = getAllOptionValues(initialData);
           } else {
@@ -377,7 +379,7 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
       currentSelected = selected;
 
       // Handle "all" selection rendering
-      if (props.addAllOption && props.multiple) {
+      if (props.settings?.addAllOption && props.multiple) {
         const options = getOptions();
         const selectedSet = new Set(selected);
         const allAreSelected =
@@ -431,7 +433,7 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
       slimSelect.store.setData(getDataWithAll(data) as Option[]);
 
       // Handle "all" option when all items are selected
-      if (props.addAllOption && props.multiple) {
+      if (props.settings?.addAllOption && props.multiple) {
         const storeData = slimSelect.store.getData();
         const allPossibleValues = getAllOptionValues(storeData);
         const allAreSelected =

From 8ce62f736a3e87b05a4acae301a6e56ce01aa710 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 19 Feb 2026 17:43:14 +0100
Subject: [PATCH 30/52] simplify onChange

---
 .../ts/components/pages/account/Filters.tsx   | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/frontend/src/ts/components/pages/account/Filters.tsx b/frontend/src/ts/components/pages/account/Filters.tsx
index e927d92c209e..d0667ead3659 100644
--- a/frontend/src/ts/components/pages/account/Filters.tsx
+++ b/frontend/src/ts/components/pages/account/Filters.tsx
@@ -144,16 +144,15 @@ export function Filters(props: {
             scrollToTop: true,
           }}
           onChange={(selectedValues) => {
-            // Start with existing filter values to preserve all keys
-            const filterMap: Record<string, boolean> = {
-              ...(props.filters[options.group] as Record<string, boolean>),
-            };
-            // Update only the keys present in this dropdown's data
-            const entries = Object.keys(groupData());
-            for (const key of entries) {
-              filterMap[key] = selectedValues.includes(key);
-            }
-            props.onChangeFilter(options.group, filterMap);
+            props.onChangeFilter(
+              options.group,
+              Object.fromEntries(
+                Object.entries(props.filters[options.group]).map(([k]) => [
+                  k,
+                  selectedValues.includes(k),
+                ]),
+              ),
+            );
           }}
           options={dropdownOptions()}
           selected={dropdownSelected()}

From f06cbd354627a08342dbe35df336ef9529388186 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 19 Feb 2026 18:49:50 +0100
Subject: [PATCH 31/52] revert footer

---
 .../ts/components/layout/footer/Footer.tsx    | 88 +------------------
 1 file changed, 1 insertion(+), 87 deletions(-)

diff --git a/frontend/src/ts/components/layout/footer/Footer.tsx b/frontend/src/ts/components/layout/footer/Footer.tsx
index 7facdece1d9b..1e713a4862b0 100644
--- a/frontend/src/ts/components/layout/footer/Footer.tsx
+++ b/frontend/src/ts/components/layout/footer/Footer.tsx
@@ -1,107 +1,21 @@
-import { createSignal, JSXElement } from "solid-js";
+import { JSXElement } from "solid-js";
 
 import { getFocus, getIsScreenshotting } from "../../../signals/core";
 import { showModal } from "../../../stores/modals";
 import { cn } from "../../../utils/cn";
 import { Button } from "../../common/Button";
-import SlimSelect from "../../ui/SlimSelect";
 
 import { Keytips } from "./Keytips";
 import { ThemeIndicator } from "./ThemeIndicator";
 import { VersionButton } from "./VersionButton";
 
 export function Footer(): JSXElement {
-  // const [state, setState] = createSignal(["initial"]);
-  const testValues = ["test1", "test2", "test3"];
-  const [testSelected, setTestSelected] = createSignal(["test1", "test2"]);
-
-  const toggleTest1 = (): void => {
-    console.log("[Footer] toggleTest1 called");
-    const current = testSelected();
-    console.log("[Footer] current selected:", JSON.stringify(current, null, 2));
-    const newSelected = current.includes("test1")
-      ? current.filter((v) => v !== "test1")
-      : [...current, "test1"];
-    console.log(
-      "[Footer] setting new selected:",
-      JSON.stringify(newSelected, null, 2),
-    );
-    setTestSelected(newSelected);
-  };
-
-  const toggleTest2 = (): void => {
-    console.log("[Footer] toggleTest2 called");
-    const current = testSelected();
-    console.log("[Footer] current selected:", JSON.stringify(current, null, 2));
-    const newSelected = current.includes("test2")
-      ? current.filter((v) => v !== "test2")
-      : [...current, "test2"];
-    console.log(
-      "[Footer] setting new selected:",
-      JSON.stringify(newSelected, null, 2),
-    );
-    setTestSelected(newSelected);
-  };
-
-  const toggleTest3 = (): void => {
-    console.log("[Footer] toggleTest3 called");
-    const current = testSelected();
-    console.log("[Footer] current selected:", JSON.stringify(current, null, 2));
-    const newSelected = current.includes("test3")
-      ? current.filter((v) => v !== "test3")
-      : [...current, "test3"];
-    console.log(
-      "[Footer] setting new selected:",
-      JSON.stringify(newSelected, null, 2),
-    );
-    setTestSelected(newSelected);
-  };
-
   return (
     <footer
       class={cn("relative text-xs text-sub", {
         "opacity-0": getIsScreenshotting(),
       })}
     >
-      {testSelected().join(" - ")}
-      <div class="mb-2 flex gap-4">
-        <label class="flex items-center gap-2">
-          <input
-            type="checkbox"
-            checked={testSelected().includes("test1")}
-            onChange={toggleTest1}
-          />
-          test1 selected
-        </label>
-        <label class="flex items-center gap-2">
-          <input
-            type="checkbox"
-            checked={testSelected().includes("test2")}
-            onChange={toggleTest2}
-          />
-          test2 selected
-        </label>
-        <label class="flex items-center gap-2">
-          <input
-            type="checkbox"
-            checked={testSelected().includes("test3")}
-            onChange={toggleTest3}
-          />
-          test3 selected
-        </label>
-      </div>
-      <SlimSelect
-        settings={{
-          showSearch: false,
-          allowDeselect: true,
-          closeOnSelect: false,
-          addAllOption: true,
-        }}
-        values={testValues}
-        selected={testSelected()}
-        onChange={setTestSelected}
-        multiple
-      ></SlimSelect>
       <Keytips />
 
       <div

From 08aed4da8a04cf94d9878453d074851f93b5a1a0 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 19 Feb 2026 18:52:04 +0100
Subject: [PATCH 32/52] add new results to collection

---
 frontend/src/ts/collections/results.ts | 26 +++++++++++++++++++++++---
 frontend/src/ts/db.ts                  |  3 +++
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/frontend/src/ts/collections/results.ts b/frontend/src/ts/collections/results.ts
index 85cc5e0ddabf..4575e10e661d 100644
--- a/frontend/src/ts/collections/results.ts
+++ b/frontend/src/ts/collections/results.ts
@@ -122,7 +122,16 @@ export function useResultsLiveQuery(
   });
 }
 
-const resultsCollection = createCollection(
+export async function insertLocalResult(
+  result: SnapshotResult<Mode>,
+): Promise<void> {
+  //TODO check state better
+  await resultsCollection.stateWhenReady();
+  //resultsCollection.utils.writeInsert(result);
+  resultsCollection.insert(result);
+}
+
+export const resultsCollection = createCollection(
   queryCollectionOptions({
     staleTime: Infinity,
     queryKey: queryKeys.root(),
@@ -163,6 +172,19 @@ const resultsCollection = createCollection(
         } as SnapshotResult<Mode>;
       });
     },
+    onInsert: async ({ transaction }) => {
+      //call to the backend to post a result is done outside, we just  insert the result as we get it
+      const newItems = transaction.mutations.map((m) => m.modified);
+
+      resultsCollection.utils.writeBatch(() => {
+        newItems.forEach((item) => {
+          resultsCollection.utils.writeInsert(item);
+        });
+      });
+
+      //do not refetch after insert
+      return { refetch: false };
+    },
     queryClient,
     getKey: (it) => it._id,
   }),
@@ -193,8 +215,6 @@ function getFilteredResults(state: ResultsQueryState) {
       );
     };
 
-    console.log("####", state.tags);
-
     let query = q
       .from({ r: resultsCollection })
       .where(({ r }) => gte(r.timestamp, state.timestamp))
diff --git a/frontend/src/ts/db.ts b/frontend/src/ts/db.ts
index 0d69d9c62ab7..736aca0b6d0d 100644
--- a/frontend/src/ts/db.ts
+++ b/frontend/src/ts/db.ts
@@ -33,6 +33,7 @@ import {
   get as getServerConfiguration,
 } from "./ape/server-configuration";
 import { Connection } from "@monkeytype/schemas/connections";
+import { insertLocalResult } from "./collections/results";
 
 let dbSnapshot: Snapshot | undefined;
 const firstDayOfTheWeek = getFirstDayOfTheWeek();
@@ -967,6 +968,8 @@ export function saveLocalResult(data: SaveLocalResultData): void {
     if (snapshot?.results !== undefined) {
       snapshot.results.unshift(data.result);
     }
+
+    void insertLocalResult(data.result);
     if (snapshot.testActivity !== undefined) {
       snapshot.testActivity.increment(new Date(data.result.timestamp));
     }

From c00b6f2a60adfdb0140dce5049fc027494249693 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 19 Feb 2026 19:16:23 +0100
Subject: [PATCH 33/52] debug

---
 .../ts/components/pages/account/AccountPage.tsx | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/frontend/src/ts/components/pages/account/AccountPage.tsx b/frontend/src/ts/components/pages/account/AccountPage.tsx
index 9f5bb21307b9..81988a6e21c5 100644
--- a/frontend/src/ts/components/pages/account/AccountPage.tsx
+++ b/frontend/src/ts/components/pages/account/AccountPage.tsx
@@ -1,8 +1,11 @@
 import { ResultFilters, ResultFiltersSchema } from "@monkeytype/schemas/users";
+import { useLiveQuery } from "@tanstack/solid-db";
+import { format } from "date-fns/format";
 import { createMemo, createSignal, JSXElement, Show } from "solid-js";
 
 import {
   createResultsQueryState,
+  resultsCollection,
   useResultsLiveQuery,
 } from "../../../collections/results";
 import defaultResultFilters from "../../../constants/default-result-filters";
@@ -49,6 +52,13 @@ export function AccountPage(): JSXElement {
 
   const data = useResultsLiveQuery(queryState);
 
+  const lastResult = useLiveQuery((q) =>
+    q
+      .from({ r: resultsCollection })
+      .orderBy(({ r }) => r.timestamp, "desc")
+      .limit(1),
+  );
+
   return (
     <Show when={isLoggedIn()}>
       <Filters
@@ -60,6 +70,13 @@ export function AccountPage(): JSXElement {
       <Charts filters={filters} />
 
       <TestStats resultsQuery={queryState} />
+
+      <pre>
+        {" "}
+        Last result {lastResult()[0]?.wpm ?? ""} wpm on{" "}
+        {format(lastResult()[0]?.timestamp ?? 0, "yyyy-MM-dd HH:mm")}
+      </pre>
+
       <Table data={[...data()]} onSortingChange={(val) => setSorting(val)} />
       <Button
         text="load more"

From 40d80e0ee8df974a51e532a8dc84fec2a8d153ab Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Thu, 19 Feb 2026 22:53:10 +0100
Subject: [PATCH 34/52] fix new results not available, cleanup

---
 frontend/src/ts/collections/results.ts        | 190 +++++++++---------
 .../components/pages/account/AccountPage.tsx  |  25 +--
 2 files changed, 97 insertions(+), 118 deletions(-)

diff --git a/frontend/src/ts/collections/results.ts b/frontend/src/ts/collections/results.ts
index 4575e10e661d..86d63095855b 100644
--- a/frontend/src/ts/collections/results.ts
+++ b/frontend/src/ts/collections/results.ts
@@ -6,13 +6,13 @@ import {
   avg,
   count,
   createCollection,
-  createLiveQueryCollection,
   eq,
   gte,
   inArray,
   max,
   not,
   or,
+  Query,
   sum,
   useLiveQuery,
 } from "@tanstack/solid-db";
@@ -22,8 +22,6 @@ import { SnapshotResult } from "../constants/default-snapshot";
 import { queryClient } from "../queries";
 import { baseKey } from "../queries/utils/keys";
 
-type SortDirection = "asc" | "desc";
-type ResultsSortField = keyof SnapshotResult<Mode>;
 export type ResultsQueryState = {
   difficulty: SnapshotResult<Mode>["difficulty"][];
   pb: SnapshotResult<Mode>["isPb"][];
@@ -37,9 +35,6 @@ export type ResultsQueryState = {
   tags: SnapshotResult<Mode>["tags"];
   funbox: SnapshotResult<Mode>["funbox"];
   language: SnapshotResult<Mode>["language"][];
-  sortField: ResultsSortField;
-  sortDirection: SortDirection;
-  limit: number;
 };
 
 const queryKeys = {
@@ -81,11 +76,11 @@ export function useResultStatsLiveQuery(
         ? //for lastTen we need a sub-query to apply the sort+limit first and then run the aggregations
           q.from({
             r: q
-              .from({ r: getFilteredResults(state) })
+              .from({ r: buildResultsQuery(state) })
               .orderBy(({ r }) => r.timestamp, "desc")
               .limit(10),
           })
-        : q.from({ r: getFilteredResults(state) })
+        : q.from({ r: buildResultsQuery(state) })
     ).select(({ r }) => ({
       words: sum(r.words),
       completed: count(r._id),
@@ -109,26 +104,61 @@ export function useResultStatsLiveQuery(
  * @returns
  */
 // oxlint-disable-next-line typescript/explicit-function-return-type
-export function useResultsLiveQuery(
-  queryState: Accessor<ResultsQueryState | undefined>,
-) {
+export function useResultsLiveQuery(options: {
+  queryState: Accessor<ResultsQueryState | undefined>;
+  sorting: Accessor<{
+    field: keyof SnapshotResult<Mode>;
+    direction: "asc" | "desc";
+  }>;
+  limit: Accessor<number>;
+}) {
   return useLiveQuery((q) => {
-    const state = queryState();
+    const state = options.queryState();
+    const sorting = options.sorting();
+    const limit = options.limit();
     if (state === undefined) return undefined;
+
     return q
-      .from({ r: getFilteredResults(state) })
-      .orderBy(({ r }) => r[state.sortField], state.sortDirection)
-      .limit(state.limit);
+      .from({ r: buildResultsQuery(state) })
+      .orderBy(({ r }) => r[sorting.field], sorting.direction)
+      .limit(limit);
   });
 }
 
+function normalizeResult(
+  result: ResultMinified | SnapshotResult<Mode>,
+): SnapshotResult<Mode> {
+  //@ts-expect-error without this somehow the collections is missing data
+  result.id = result._id;
+  //results strip default values, add them back
+  result.bailedOut ??= false;
+  result.blindMode ??= false;
+  result.lazyMode ??= false;
+  result.difficulty ??= "normal";
+  result.funbox ??= [];
+  result.language ??= "english";
+  result.numbers ??= false;
+  result.punctuation ??= false;
+  result.numbers ??= false;
+  result.quoteLength ??= -1;
+  result.restartCount ??= 0;
+  result.incompleteTestSeconds ??= 0;
+  result.afkDuration ??= 0;
+  result.tags ??= [];
+  result.isPb ??= false;
+  return {
+    ...result,
+    timeTyping: calcTimeTyping(result),
+    words: Math.round((result.wpm / 60) * result.testDuration),
+  } as SnapshotResult<Mode>;
+}
+
 export async function insertLocalResult(
   result: SnapshotResult<Mode>,
 ): Promise<void> {
-  //TODO check state better
-  await resultsCollection.stateWhenReady();
-  //resultsCollection.utils.writeInsert(result);
-  resultsCollection.insert(result);
+  if (resultsCollection.isReady()) {
+    resultsCollection.insert(result);
+  }
 }
 
 export const resultsCollection = createCollection(
@@ -146,31 +176,7 @@ export const resultsCollection = createCollection(
         throw new Error("Error fetching results:" + response.body.message);
       }
 
-      return response.body.data.map((result) => {
-        //@ts-expect-error without this somehow the collections is missing data
-        result.id = result._id;
-        //results strip default values, add them back
-        result.bailedOut ??= false;
-        result.blindMode ??= false;
-        result.lazyMode ??= false;
-        result.difficulty ??= "normal";
-        result.funbox ??= [];
-        result.language ??= "english";
-        result.numbers ??= false;
-        result.punctuation ??= false;
-        result.numbers ??= false;
-        result.quoteLength ??= -1;
-        result.restartCount ??= 0;
-        result.incompleteTestSeconds ??= 0;
-        result.afkDuration ??= 0;
-        result.tags ??= [];
-        result.isPb ??= false;
-        return {
-          ...result,
-          timeTyping: calcTimeTyping(result),
-          words: Math.round((result.wpm / 60) * result.testDuration),
-        } as SnapshotResult<Mode>;
-      });
+      return response.body.data.map((result) => normalizeResult(result));
     },
     onInsert: async ({ transaction }) => {
       //call to the backend to post a result is done outside, we just  insert the result as we get it
@@ -178,7 +184,7 @@ export const resultsCollection = createCollection(
 
       resultsCollection.utils.writeBatch(() => {
         newItems.forEach((item) => {
-          resultsCollection.utils.writeInsert(item);
+          resultsCollection.utils.writeInsert(normalizeResult(item));
         });
       });
 
@@ -191,62 +197,58 @@ export const resultsCollection = createCollection(
 );
 
 // oxlint-disable-next-line typescript/explicit-function-return-type
-function getFilteredResults(state: ResultsQueryState) {
-  return createLiveQueryCollection((q) => {
-    const applyMode2Filter = <T extends "time" | "words">(
-      key: T,
-      filter: ResultsQueryState[T],
-      nonCustomValues: string[],
-    ): void => {
-      if (filter.length === 5) return;
-      const isCustom = filter.includes("custom");
-      const selected = filter.filter((it) => it !== "custom");
-      query = query.where(({ r }) =>
+export function buildResultsQuery(state: ResultsQueryState) {
+  const applyMode2Filter = <T extends "time" | "words">(
+    key: T,
+    filter: ResultsQueryState[T],
+    nonCustomValues: string[],
+  ): void => {
+    if (filter.length === 5) return;
+    const isCustom = filter.includes("custom");
+    const selected = filter.filter((it) => it !== "custom");
+    query = query.where(({ r }) =>
+      or(
+        //results not matching the mode pass
+        not(eq(r.mode, key)),
         or(
-          //results not matching the mode pass
-          not(eq(r.mode, key)),
-          or(
-            //mode2 is matching one of the  selected mode2
-            inArray(r.mode2, selected),
-            //or if custom selected are not matching any non-custom value
-            isCustom ? not(inArray(r.mode2, nonCustomValues)) : false,
-          ),
+          //mode2 is matching one of the  selected mode2
+          inArray(r.mode2, selected),
+          //or if custom selected are not matching any non-custom value
+          isCustom ? not(inArray(r.mode2, nonCustomValues)) : false,
         ),
-      );
-    };
+      ),
+    );
+  };
 
-    let query = q
-      .from({ r: resultsCollection })
-      .where(({ r }) => gte(r.timestamp, state.timestamp))
-      .where(({ r }) => inArray(r.difficulty, state.difficulty))
-      .where(({ r }) => inArray(r.isPb, state.pb))
-      .where(({ r }) => inArray(r.mode, state.mode))
-      .where(({ r }) => inArray(r.punctuation, state.punctuation))
-      .where(({ r }) => inArray(r.numbers, state.numbers))
-      .where(({ r }) => inArray(r.quoteLength, state.quoteLength))
-      .where(({ r }) => inArray(r.language, state.language));
+  let query = new Query()
+    .from({ r: resultsCollection })
+    .where(({ r }) => gte(r.timestamp, state.timestamp))
+    .where(({ r }) => inArray(r.difficulty, state.difficulty))
+    .where(({ r }) => inArray(r.isPb, state.pb))
+    .where(({ r }) => inArray(r.mode, state.mode))
+    .where(({ r }) => inArray(r.punctuation, state.punctuation))
+    .where(({ r }) => inArray(r.numbers, state.numbers))
+    .where(({ r }) => inArray(r.quoteLength, state.quoteLength))
+    .where(({ r }) => inArray(r.language, state.language));
 
-    applyMode2Filter("time", state.time, ["15", "30", "60", "120"]);
-    applyMode2Filter("words", state.words, ["10", "25", "50", "100"]);
+  applyMode2Filter("time", state.time, ["15", "30", "60", "120"]);
+  applyMode2Filter("words", state.words, ["10", "25", "50", "100"]);
 
-    return query.fn.where(
-      (row) =>
-        state.tags.some((tag) =>
-          tag === "none" ? row.r.tags.length === 0 : row.r.tags.includes(tag),
-        ) &&
-        state.funbox.some((fb) =>
-          (fb as string) === "none"
-            ? row.r.funbox.length === 0
-            : row.r.funbox.includes(fb),
-        ),
-    );
-  });
+  return query.fn.where(
+    (row) =>
+      state.tags.some((tag) =>
+        tag === "none" ? row.r.tags.length === 0 : row.r.tags.includes(tag),
+      ) &&
+      state.funbox.some((fb) =>
+        (fb as string) === "none"
+          ? row.r.funbox.length === 0
+          : row.r.funbox.includes(fb),
+      ),
+  );
 }
 
 export function createResultsQueryState(
   filters: ResultFilters,
-  sorting: { field: ResultsSortField; direction: SortDirection },
-  limit: number,
 ): ResultsQueryState {
   return {
     difficulty: valueFilter(filters.difficulty),
@@ -269,10 +271,6 @@ export function createResultsQueryState(
     tags: valueFilter(filters.tags),
     funbox: valueFilter(filters.funbox),
     language: valueFilter(filters.language),
-
-    sortField: sorting.field,
-    sortDirection: sorting.direction,
-    limit,
   };
 }
 
diff --git a/frontend/src/ts/components/pages/account/AccountPage.tsx b/frontend/src/ts/components/pages/account/AccountPage.tsx
index 81988a6e21c5..fe219a0a0795 100644
--- a/frontend/src/ts/components/pages/account/AccountPage.tsx
+++ b/frontend/src/ts/components/pages/account/AccountPage.tsx
@@ -1,11 +1,8 @@
 import { ResultFilters, ResultFiltersSchema } from "@monkeytype/schemas/users";
-import { useLiveQuery } from "@tanstack/solid-db";
-import { format } from "date-fns/format";
 import { createMemo, createSignal, JSXElement, Show } from "solid-js";
 
 import {
   createResultsQueryState,
-  resultsCollection,
   useResultsLiveQuery,
 } from "../../../collections/results";
 import defaultResultFilters from "../../../constants/default-result-filters";
@@ -43,21 +40,12 @@ export function AccountPage(): JSXElement {
   });
 
   const queryState = createMemo(() => {
-    if (!isOpen() || !isLoggedIn()) {
-      return undefined;
-    }
+    if (!isOpen() || !isLoggedIn()) return undefined;
 
-    return createResultsQueryState(filters, sorting(), limit());
+    return createResultsQueryState(filters);
   });
 
-  const data = useResultsLiveQuery(queryState);
-
-  const lastResult = useLiveQuery((q) =>
-    q
-      .from({ r: resultsCollection })
-      .orderBy(({ r }) => r.timestamp, "desc")
-      .limit(1),
-  );
+  const data = useResultsLiveQuery({ queryState, sorting, limit });
 
   return (
     <Show when={isLoggedIn()}>
@@ -68,15 +56,8 @@ export function AccountPage(): JSXElement {
       />
 
       <Charts filters={filters} />
-
       <TestStats resultsQuery={queryState} />
 
-      <pre>
-        {" "}
-        Last result {lastResult()[0]?.wpm ?? ""} wpm on{" "}
-        {format(lastResult()[0]?.timestamp ?? 0, "yyyy-MM-dd HH:mm")}
-      </pre>
-
       <Table data={[...data()]} onSortingChange={(val) => setSorting(val)} />
       <Button
         text="load more"

From cdff5348dee737544b65977c4baa8836d91da70b Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 20 Feb 2026 00:00:25 +0100
Subject: [PATCH 35/52] get rid of fn.where

---
 frontend/src/ts/collections/results.ts        | 47 +++++++++++--------
 .../ts/components/pages/account/Filters.tsx   | 10 +++-
 2 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/frontend/src/ts/collections/results.ts b/frontend/src/ts/collections/results.ts
index 86d63095855b..8213159bbf07 100644
--- a/frontend/src/ts/collections/results.ts
+++ b/frontend/src/ts/collections/results.ts
@@ -15,6 +15,7 @@ import {
   Query,
   sum,
   useLiveQuery,
+  length,
 } from "@tanstack/solid-db";
 import { Accessor } from "solid-js";
 import Ape from "../ape";
@@ -210,12 +211,11 @@ export function buildResultsQuery(state: ResultsQueryState) {
       or(
         //results not matching the mode pass
         not(eq(r.mode, key)),
-        or(
-          //mode2 is matching one of the  selected mode2
-          inArray(r.mode2, selected),
-          //or if custom selected are not matching any non-custom value
-          isCustom ? not(inArray(r.mode2, nonCustomValues)) : false,
-        ),
+
+        //mode2 is matching one of the  selected mode2
+        inArray(r.mode2, selected),
+        //or if custom selected are not matching any non-custom value
+        isCustom ? not(inArray(r.mode2, nonCustomValues)) : false,
       ),
     );
   };
@@ -229,22 +229,31 @@ export function buildResultsQuery(state: ResultsQueryState) {
     .where(({ r }) => inArray(r.punctuation, state.punctuation))
     .where(({ r }) => inArray(r.numbers, state.numbers))
     .where(({ r }) => inArray(r.quoteLength, state.quoteLength))
-    .where(({ r }) => inArray(r.language, state.language));
-
+    .where(({ r }) => inArray(r.language, state.language))
+    .where(({ r }) =>
+      or(
+        false,
+        false,
+        ...state.tags.map((tag) =>
+          tag === "none" ? eq(length(r.tags), 0) : inArray(tag, r.tags),
+        ),
+      ),
+    )
+    .where(({ r }) =>
+      or(
+        false,
+        false,
+        ...state.funbox.map((fb) =>
+          (fb as string) === "none"
+            ? eq(length(r.funbox), 0)
+            : inArray(fb, r.funbox),
+        ),
+      ),
+    );
   applyMode2Filter("time", state.time, ["15", "30", "60", "120"]);
   applyMode2Filter("words", state.words, ["10", "25", "50", "100"]);
 
-  return query.fn.where(
-    (row) =>
-      state.tags.some((tag) =>
-        tag === "none" ? row.r.tags.length === 0 : row.r.tags.includes(tag),
-      ) &&
-      state.funbox.some((fb) =>
-        (fb as string) === "none"
-          ? row.r.funbox.length === 0
-          : row.r.funbox.includes(fb),
-      ),
-  );
+  return query;
 }
 
 export function createResultsQueryState(
diff --git a/frontend/src/ts/components/pages/account/Filters.tsx b/frontend/src/ts/components/pages/account/Filters.tsx
index a716f3cf2f64..a92388b47205 100644
--- a/frontend/src/ts/components/pages/account/Filters.tsx
+++ b/frontend/src/ts/components/pages/account/Filters.tsx
@@ -87,14 +87,19 @@ export function Filters(props: {
             text="tags"
             group="tags"
             format={(tag) =>
-              getSnapshot()?.tags.find((it) => it._id === tag)?.display ?? tag
+              tag === "none"
+                ? "no tag"
+                : (getSnapshot()?.tags.find((it) => it._id === tag)?.display ??
+                  tag)
             }
           />
           <Dropdown
             icon="fa-gamepad"
             text="funbox"
             group="funbox"
-            format={replaceUnderscoresWithSpaces}
+            format={(val) =>
+              val === "none" ? "no funbox" : replaceUnderscoresWithSpaces(val)
+            }
           />
           <Dropdown
             icon="fa-globe-americas"
@@ -162,6 +167,7 @@ export function Filters(props: {
       </div>
     );
   }
+
   function ButtonGroup<
     T extends ResultFiltersKeys,
     K extends keyof ResultFilters[T],

From dfeb001b064aef2d2e6faf5e38557e293a39beec Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 20 Feb 2026 00:16:03 +0100
Subject: [PATCH 36/52] cleanup filters

---
 .../ts/components/pages/account/Filters.tsx   | 45 +++++++++----------
 1 file changed, 20 insertions(+), 25 deletions(-)

diff --git a/frontend/src/ts/components/pages/account/Filters.tsx b/frontend/src/ts/components/pages/account/Filters.tsx
index a92388b47205..7c1dec0e6c06 100644
--- a/frontend/src/ts/components/pages/account/Filters.tsx
+++ b/frontend/src/ts/components/pages/account/Filters.tsx
@@ -40,24 +40,14 @@ export function Filters(props: {
       </div>
 
       <ButtonGroup
+        singleSelect
         classOverride="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:flex lg:justify-evenly [&>button]:w-full [&>button]:last:col-span-2"
         group="date"
-        items={[
-          { id: "last_day", text: "last day" },
-          { id: "last_week", text: "last week" },
-          { id: "last_month", text: "last month" },
-          { id: "last_3months", text: "last 3 months" },
-          { id: "all", text: "all time" },
-        ]}
-        onSelect={(id) => {
-          const newValue = Object.fromEntries(
-            Object.entries(props.filters.date).map(([key]) => [
-              key,
-              key === id,
-            ]),
-          );
-          props.onChangeFilter("date", newValue);
-        }}
+        format={(val) =>
+          val === "last_3months"
+            ? "last 3 months"
+            : replaceUnderscoresWithSpaces(val)
+        }
       />
 
       <Show when={isShowAdvanced()}>
@@ -175,16 +165,15 @@ export function Filters(props: {
     icon?: FaSolidIcon;
     text?: string;
     group: T;
-    items?: { id: K; text?: string }[];
-    onSelect?: (id: K) => void;
+    format?: (value: K) => string;
     classOverride?: string;
+    singleSelect?: true;
   }): JSXElement {
-    const items = (): { id: K; text?: string }[] =>
-      options.items ??
-      (Object.keys(props.filters[options.group]).map((id) => ({
+    const items = (): { id: K; text: string }[] =>
+      Object.keys(props.filters[options.group]).map((id) => ({
         id,
-        text: new String(id).toString(),
-      })) as { id: K; text?: string }[]);
+        text: options.format?.(id as K) ?? new String(id).toString(),
+      })) as { id: K; text: string }[];
 
     return (
       <div>
@@ -206,8 +195,14 @@ export function Filters(props: {
                 text={item.text ?? (item.id as string)}
                 active={props.filters[options.group][item.id] === true}
                 onClick={() => {
-                  if (options.onSelect !== undefined) {
-                    options.onSelect(item.id);
+                  if (options.singleSelect) {
+                    const newValue = Object.fromEntries(
+                      Object.entries(props.filters.date).map(([key]) => [
+                        key,
+                        key === item.id,
+                      ]),
+                    );
+                    props.onChangeFilter(options.group, newValue);
                   } else {
                     props.onChangeFilter(options.group, {
                       ...(props.filters[options.group] as Record<

From 6e61354d44c9fe3578aabc9ae32ea3cbb60d8f15 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 20 Feb 2026 11:50:34 +0100
Subject: [PATCH 37/52] styles

---
 frontend/src/ts/components/pages/account/AccountPage.tsx | 2 +-
 frontend/src/ts/components/pages/account/Table.tsx       | 9 +++++++++
 frontend/src/ts/components/pages/account/TestStats.tsx   | 6 +++---
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/frontend/src/ts/components/pages/account/AccountPage.tsx b/frontend/src/ts/components/pages/account/AccountPage.tsx
index fe219a0a0795..4cf8787ca7b5 100644
--- a/frontend/src/ts/components/pages/account/AccountPage.tsx
+++ b/frontend/src/ts/components/pages/account/AccountPage.tsx
@@ -56,7 +56,7 @@ export function AccountPage(): JSXElement {
       />
 
       <Charts filters={filters} />
-      <TestStats resultsQuery={queryState} />
+      <TestStats queryState={queryState} />
 
       <Table data={[...data()]} onSortingChange={(val) => setSorting(val)} />
       <Button
diff --git a/frontend/src/ts/components/pages/account/Table.tsx b/frontend/src/ts/components/pages/account/Table.tsx
index 4bde99568ecb..128a0397ae9c 100644
--- a/frontend/src/ts/components/pages/account/Table.tsx
+++ b/frontend/src/ts/components/pages/account/Table.tsx
@@ -85,6 +85,9 @@ function getColumns<M extends Mode>({
       header: "mode",
       cell: (info) =>
         `${info.getValue()} ${info.row.original.mode2 === "custom" ? "" : info.row.original.mode2}`,
+      meta: {
+        breakpoint: "md",
+      },
     }),
     defineColumn("_id", {
       header: "info",
@@ -129,6 +132,9 @@ function getColumns<M extends Mode>({
           </Show>
         </>
       ),
+      meta: {
+        breakpoint: "md",
+      },
     }),
     defineColumn("tags", {
       header: "tags",
@@ -147,6 +153,9 @@ function getColumns<M extends Mode>({
           </span>
         </Show>
       ),
+      meta: {
+        breakpoint: "md",
+      },
     }),
     defineColumn("timestamp", {
       header: "date",
diff --git a/frontend/src/ts/components/pages/account/TestStats.tsx b/frontend/src/ts/components/pages/account/TestStats.tsx
index a774f9b99103..33c9ce7ed0ac 100644
--- a/frontend/src/ts/components/pages/account/TestStats.tsx
+++ b/frontend/src/ts/components/pages/account/TestStats.tsx
@@ -11,14 +11,14 @@ import { Formatting } from "../../../utils/format";
 import { Fa } from "../../common/Fa";
 
 export function TestStats(props: {
-  resultsQuery: Accessor<ResultsQueryState | undefined>;
+  queryState: Accessor<ResultsQueryState | undefined>;
 }): JSXElement {
   const format = createMemo(() => new Formatting(getConfig));
   const formatWpm = (val: number): string => format().typingSpeed(val);
   const formatPercentage = (val: number): string => format().percentage(val);
 
-  const statsQuery = useResultStatsLiveQuery(props.resultsQuery);
-  const last10StatsQuery = useResultStatsLiveQuery(props.resultsQuery, {
+  const statsQuery = useResultStatsLiveQuery(props.queryState);
+  const last10StatsQuery = useResultStatsLiveQuery(props.queryState, {
     lastTen: true,
   });
 

From ed1d7393b1ef399678f86fbfb77ff43307cf2a84 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 20 Feb 2026 14:01:52 +0100
Subject: [PATCH 38/52] miniResultChart

---
 frontend/src/ts/collections/results.ts        |  17 +
 .../ts/components/common/AnimatedModal.tsx    |  53 +--
 .../src/ts/components/pages/account/Table.tsx | 320 +++++++++++++++---
 frontend/src/ts/stores/modals.ts              |   7 +-
 4 files changed, 318 insertions(+), 79 deletions(-)

diff --git a/frontend/src/ts/collections/results.ts b/frontend/src/ts/collections/results.ts
index 8213159bbf07..262fa4f4fb33 100644
--- a/frontend/src/ts/collections/results.ts
+++ b/frontend/src/ts/collections/results.ts
@@ -22,6 +22,7 @@ import Ape from "../ape";
 import { SnapshotResult } from "../constants/default-snapshot";
 import { queryClient } from "../queries";
 import { baseKey } from "../queries/utils/keys";
+import { queryOptions } from "@tanstack/solid-query";
 
 export type ResultsQueryState = {
   difficulty: SnapshotResult<Mode>["difficulty"][];
@@ -40,6 +41,7 @@ export type ResultsQueryState = {
 
 const queryKeys = {
   root: () => [...baseKey("results", { isUserSpecific: true })],
+  fullResult: (_id: string) => [...queryKeys.root(), _id],
 };
 
 export type ResultStats = {
@@ -339,6 +341,21 @@ function calcTimeTyping(result: ResultMinified): number {
   return tt;
 }
 
+// oxlint-disable-next-line typescript/explicit-function-return-type
+export const getSingleResultQueryOptions = (_id: string) =>
+  queryOptions({
+    queryKey: queryKeys.fullResult(_id),
+    queryFn: async () => {
+      const response = await Ape.results.getById({ params: { resultId: _id } });
+
+      if (response.status !== 200) {
+        throw new Error(`Failed to load result: ${response.body.message}`);
+      }
+      return response.body.data;
+    },
+    staleTime: Infinity,
+  });
+
 /*
 const allResultsQuery = createCollection(
   liveQueryCollectionOptions({
diff --git a/frontend/src/ts/components/common/AnimatedModal.tsx b/frontend/src/ts/components/common/AnimatedModal.tsx
index 678bd7e67a5a..4e9fc008a891 100644
--- a/frontend/src/ts/components/common/AnimatedModal.tsx
+++ b/frontend/src/ts/components/common/AnimatedModal.tsx
@@ -5,6 +5,7 @@ import {
   ParentProps,
   Show,
 } from "solid-js";
+import { Portal } from "solid-js/web";
 
 import { useRefWithUtils } from "../../hooks/useRefWithUtils";
 import {
@@ -264,31 +265,33 @@ export function AnimatedModal(props: AnimatedModalProps): JSXElement {
   });
 
   return (
-    <dialog
-      id={`${props.id as string}Modal`}
-      ref={dialogRef}
-      class={cn(
-        "fixed top-0 left-0 z-1000 m-0 hidden h-screen max-h-screen w-screen max-w-screen border-none bg-[rgba(0,0,0,0.5)] p-8 backdrop:bg-transparent",
-        props.wrapperClass,
-      )}
-      onKeyDown={handleKeyDown}
-      onMouseDown={handleBackdropClick}
-    >
-      <div class="pointer-events-none flex h-full w-full items-center justify-center">
-        <div
-          class={cn(
-            "modal rounded-double pointer-events-auto grid h-max max-h-full w-full max-w-md gap-4 overflow-auto bg-bg p-4 text-text ring-4 ring-sub-alt sm:p-8",
-            props.modalClass,
-          )}
-          ref={modalRef}
-          onScroll={(e) => props.onScroll?.(e)}
-        >
-          <Show when={props.title !== undefined && props.title !== ""}>
-            <div class="text-2xl text-sub">{props.title}</div>
-          </Show>
-          {props.children}
+    <Portal mount={document.getElementById("solidmodals") as HTMLElement}>
+      <dialog
+        id={`${props.id as string}Modal`}
+        ref={dialogRef}
+        class={cn(
+          "fixed top-0 left-0 z-1000 m-0 hidden h-screen max-h-screen w-screen max-w-screen border-none bg-[rgba(0,0,0,0.5)] p-8 backdrop:bg-transparent",
+          props.wrapperClass,
+        )}
+        onKeyDown={handleKeyDown}
+        onMouseDown={handleBackdropClick}
+      >
+        <div class="pointer-events-none flex h-full w-full items-center justify-center">
+          <div
+            class={cn(
+              "modal rounded-double pointer-events-auto grid h-max max-h-full w-full max-w-md gap-4 overflow-auto bg-bg p-4 text-text ring-4 ring-sub-alt sm:p-8",
+              props.modalClass,
+            )}
+            ref={modalRef}
+            onScroll={(e) => props.onScroll?.(e)}
+          >
+            <Show when={props.title !== undefined && props.title !== ""}>
+              <div class="text-2xl text-sub">{props.title}</div>
+            </Show>
+            {props.children}
+          </div>
         </div>
-      </div>
-    </dialog>
+      </dialog>
+    </Portal>
   );
 }
diff --git a/frontend/src/ts/components/pages/account/Table.tsx b/frontend/src/ts/components/pages/account/Table.tsx
index 128a0397ae9c..cec4e283dcf2 100644
--- a/frontend/src/ts/components/pages/account/Table.tsx
+++ b/frontend/src/ts/components/pages/account/Table.tsx
@@ -1,14 +1,24 @@
 import { Difficulty } from "@monkeytype/schemas/configs";
+import { ChartData } from "@monkeytype/schemas/results";
 import { Mode } from "@monkeytype/schemas/shared";
+import { useQuery } from "@tanstack/solid-query";
 import { createColumnHelper } from "@tanstack/solid-table";
 import { format as dateFormat } from "date-fns/format";
-import { createMemo, JSXElement, Show } from "solid-js";
+import { createMemo, createSignal, JSXElement, Show } from "solid-js";
 
+import { getSingleResultQueryOptions } from "../../../collections/results";
 import { SnapshotResult } from "../../../constants/default-snapshot";
 import { getSnapshot } from "../../../db";
 import { getConfig } from "../../../signals/config";
+import { getTheme } from "../../../signals/theme";
+import { isModalOpen, showModal } from "../../../stores/modals";
 import { Formatting } from "../../../utils/format";
 import { replaceUnderscoresWithSpaces } from "../../../utils/strings";
+import { get as getTypingSpeedUnit } from "../../../utils/typing-speed-units";
+import { AnimatedModal } from "../../common/AnimatedModal";
+import AsyncContent from "../../common/AsyncContent";
+import { Button } from "../../common/Button";
+import { ChartJs } from "../../common/ChartJs";
 import { Fa, FaProps } from "../../common/Fa";
 import { DataTable, DataTableColumnDef } from "../../ui/table/DataTable";
 
@@ -22,37 +32,214 @@ export function Table<M extends Mode>(props: {
   data: SnapshotResult<M>[];
   onSortingChange: (sorting: Sorting) => void;
 }): JSXElement {
+  const [selectedResult, setSelectedResult] = createSignal<string | undefined>(
+    undefined,
+  );
+
   const columns = createMemo(() =>
     getColumns<M>({
       format: new Formatting(getConfig),
+      onMiniResultChartSelected: (id) => {
+        setSelectedResult(id);
+        if (id !== undefined) showModal("MiniResultChartModal");
+      },
     }),
   );
+
+  return (
+    <>
+      <MiniResultChart resultId={selectedResult()} />
+      <DataTable
+        id="resultList"
+        onSortingChange={(val) => {
+          if (val.length === 0) {
+            props.onSortingChange({ field: "timestamp", direction: "desc" });
+          } else {
+            props.onSortingChange({
+              // oxlint-disable-next-line typescript/no-explicit-any
+              field: val[0]?.id as keyof SnapshotResult<any>,
+              direction: val[0]?.desc ? "desc" : "asc",
+            });
+          }
+        }}
+        class="table-auto [&>tbody>tr>td]:px-4 [&>tbody>tr>td]:py-2.5 [&>tbody>tr>td]:whitespace-nowrap xl:[&>tbody>tr>td]:px-6 [&>thead>tr>th]:px-4 xl:[&>thead>tr>th]:px-6"
+        data={props.data}
+        columns={columns()}
+        fallback=<span>No data found. Check your filters.</span>
+      />
+    </>
+  );
+}
+
+function MiniResultChart(props: { resultId: string | undefined }): JSXElement {
+  const query = useQuery(() => ({
+    ...getSingleResultQueryOptions(props.resultId as string),
+    enabled:
+      isModalOpen("MiniResultChartModal") && props.resultId !== undefined,
+  }));
+
+  const beginAtZero = createMemo(() => getConfig.startGraphsAtZero);
+  const typingSpeedUnit = createMemo(() =>
+    getTypingSpeedUnit(getConfig.typingSpeedUnit),
+  );
+
   return (
-    <DataTable
-      id="resultList"
-      onSortingChange={(val) => {
-        if (val.length === 0) {
-          props.onSortingChange({ field: "timestamp", direction: "desc" });
-        } else {
-          props.onSortingChange({
-            // oxlint-disable-next-line typescript/no-explicit-any
-            field: val[0]?.id as keyof SnapshotResult<any>,
-            direction: val[0]?.desc ? "desc" : "asc",
-          });
-        }
-      }}
-      class="table-auto [&>tbody>tr>td]:px-4 [&>tbody>tr>td]:py-2.5 [&>tbody>tr>td]:whitespace-nowrap xl:[&>tbody>tr>td]:px-6 [&>thead>tr>th]:px-4 xl:[&>thead>tr>th]:px-6"
-      data={props.data}
-      columns={columns()}
-      fallback=<span>No data found. Check your filters.</span>
-    />
+    <AnimatedModal id="MiniResultChartModal" modalClass="max-w-4xl">
+      <AsyncContent query={query}>
+        {(result) => {
+          const data = result.chartData as ChartData;
+
+          const wpm = data.wpm.map((it) => typingSpeedUnit().fromWpm(it));
+          const burst = data.burst.map((it) => typingSpeedUnit().fromWpm(it));
+
+          const maxChartVal = Math.max(
+            ...[Math.max(...wpm), Math.max(...burst)],
+          );
+          const minChartVal = beginAtZero()
+            ? 0
+            : Math.floor(Math.min(...[Math.min(...wpm), Math.min(...burst)]));
+
+          return (
+            <div class="">
+              <ChartJs
+                type="line"
+                data={{
+                  labels: data.wpm.map((_, index) => (index + 1).toString()),
+                  datasets: [
+                    {
+                      label: "wpm",
+                      data: wpm,
+                      borderWidth: 3,
+                      yAxisID: "wpm",
+                      order: 2,
+                      pointRadius: 1,
+                    },
+                    {
+                      label: "burst",
+                      data: burst,
+                      borderWidth: 3,
+                      yAxisID: "burst",
+                      order: 3,
+                      pointRadius: 1,
+                    },
+                    {
+                      label: "errors",
+                      data: data.err,
+                      pointBackgroundColor: getTheme().error,
+                      borderWidth: 2,
+                      order: 1,
+                      yAxisID: "error",
+                      type: "scatter",
+                      pointStyle: "crossRot",
+                      pointRadius: function (context): number {
+                        const index = context.dataIndex;
+                        const value = context.dataset.data[index] as number;
+                        return (value ?? 0) <= 0 ? 0 : 3;
+                      },
+                      pointHoverRadius: function (context): number {
+                        const index = context.dataIndex;
+                        const value = context.dataset.data[index] as number;
+                        return (value ?? 0) <= 0 ? 0 : 5;
+                      },
+                    },
+                  ],
+                }}
+                options={{
+                  responsive: true,
+                  maintainAspectRatio: false,
+                  scales: {
+                    x: {
+                      axis: "x",
+                      ticks: {
+                        autoSkip: true,
+                        autoSkipPadding: 20,
+                      },
+                      display: true,
+                      title: {
+                        display: false,
+                        text: "Seconds",
+                      },
+                    },
+                    wpm: {
+                      axis: "y",
+                      display: true,
+                      title: {
+                        display: true,
+                        text: typingSpeedUnit().fullUnitString,
+                      },
+                      beginAtZero: beginAtZero(),
+                      min: minChartVal,
+                      max: maxChartVal,
+                      ticks: {
+                        autoSkip: true,
+                        autoSkipPadding: 20,
+                      },
+                      grid: {
+                        display: true,
+                      },
+                    },
+                    burst: {
+                      axis: "y",
+                      display: false,
+                      title: {
+                        display: true,
+                        text: "Burst " + typingSpeedUnit().fullUnitString,
+                      },
+                      beginAtZero: beginAtZero(),
+                      min: minChartVal,
+                      max: maxChartVal,
+                      ticks: {
+                        autoSkip: true,
+                        autoSkipPadding: 20,
+                      },
+                      grid: {
+                        display: false,
+                      },
+                    },
+                    error: {
+                      display: true,
+                      position: "right",
+                      title: {
+                        display: true,
+                        text: "Errors",
+                      },
+                      beginAtZero: beginAtZero(),
+                      ticks: {
+                        precision: 0,
+                        autoSkip: true,
+                        autoSkipPadding: 20,
+                      },
+                      grid: {
+                        display: false,
+                      },
+                    },
+                  },
+                  plugins: {
+                    annotation: {
+                      annotations: [],
+                    },
+                    tooltip: {
+                      animation: { duration: 250 },
+                      mode: "index",
+                      intersect: false,
+                    },
+                  },
+                }}
+              />
+            </div>
+          );
+        }}
+      </AsyncContent>
+    </AnimatedModal>
   );
 }
 
 function getColumns<M extends Mode>({
   format,
+  onMiniResultChartSelected,
 }: {
   format: Formatting;
+  onMiniResultChartSelected(val: string): void;
 }): DataTableColumnDef<SnapshotResult<M>>[] {
   const defineColumn = createColumnHelper<SnapshotResult<M>>().accessor;
   const columns = [
@@ -92,46 +279,73 @@ function getColumns<M extends Mode>({
     defineColumn("_id", {
       header: "info",
       enableSorting: false,
-      cell: (info) => (
-        <>
-          <span aria-label={info.row.original.language} data-balloon-pos="up">
-            <Fa icon="fa-globe-americas" fixedWidth={true} />
-          </span>
-          <span aria-label={info.row.original.difficulty} data-balloon-pos="up">
-            <Fa {...difficultyIcon(info.row.original.difficulty)} />
-          </span>
-          <Show when={info.row.original.punctuation}>
-            <span aria-label="punctuation" data-balloon-pos="up">
-              <Fa icon="fa-at" fixedWidth={true} />
-            </span>
-          </Show>
-          <Show when={info.row.original.numbers}>
-            <span aria-label="numbers" data-balloon-pos="up">
-              <Fa icon="fa-hashtag" fixedWidth={true} />
-            </span>
-          </Show>
-          <Show when={info.row.original.blindMode}>
-            <span aria-label="blind mode" data-balloon-pos="up">
-              <Fa icon="fa-eye-slash" fixedWidth={true} />
+      cell: (info) => {
+        const hasChart =
+          info.row.original.chartData !== "toolong" &&
+          info.row.original.testDuration <= 122;
+
+        return (
+          <div class="flex gap-0.5">
+            <span aria-label={info.row.original.language} data-balloon-pos="up">
+              <Fa icon="fa-globe-americas" fixedWidth={true} />
             </span>
-          </Show>
-          <Show when={info.row.original.lazyMode}>
-            <span aria-label="lazy mode" data-balloon-pos="up">
-              <Fa icon="fa-couch" fixedWidth={true} />
+            <span
+              aria-label={info.row.original.difficulty}
+              data-balloon-pos="up"
+            >
+              <Fa {...difficultyIcon(info.row.original.difficulty)} />
             </span>
-          </Show>
-          <Show when={(info.row.original.funbox ?? []).length > 0}>
+            <Show when={info.row.original.punctuation}>
+              <span aria-label="punctuation" data-balloon-pos="up">
+                <Fa icon="fa-at" fixedWidth={true} />
+              </span>
+            </Show>
+            <Show when={info.row.original.numbers}>
+              <span aria-label="numbers" data-balloon-pos="up">
+                <Fa icon="fa-hashtag" fixedWidth={true} />
+              </span>
+            </Show>
+            <Show when={info.row.original.blindMode}>
+              <span aria-label="blind mode" data-balloon-pos="up">
+                <Fa icon="fa-eye-slash" fixedWidth={true} />
+              </span>
+            </Show>
+            <Show when={info.row.original.lazyMode}>
+              <span aria-label="lazy mode" data-balloon-pos="up">
+                <Fa icon="fa-couch" fixedWidth={true} />
+              </span>
+            </Show>
+            <Show when={(info.row.original.funbox ?? []).length > 0}>
+              <span
+                aria-label={info.row.original.funbox
+                  .map(replaceUnderscoresWithSpaces)
+                  .join(", ")}
+                data-balloon-pos="up"
+              >
+                <Fa icon="fa-gamepad" fixedWidth={true} />
+              </span>
+            </Show>
             <span
-              aria-label={info.row.original.funbox
-                .map(replaceUnderscoresWithSpaces)
-                .join(", ")}
               data-balloon-pos="up"
+              aria-label={
+                hasChart
+                  ? "View graph"
+                  : "Graph history is not available for long tests"
+              }
             >
-              <Fa icon="fa-gamepad" fixedWidth={true} />
+              <Button
+                disabled={!hasChart}
+                class="p-0 text-text"
+                type="text"
+                fa={{ icon: "fa-chart-line", fixedWidth: true }}
+                onClick={() => {
+                  onMiniResultChartSelected(info.getValue());
+                }}
+              />
             </span>
-          </Show>
-        </>
-      ),
+          </div>
+        );
+      },
       meta: {
         breakpoint: "md",
       },
diff --git a/frontend/src/ts/stores/modals.ts b/frontend/src/ts/stores/modals.ts
index 749ebf11a593..7adef3e93952 100644
--- a/frontend/src/ts/stores/modals.ts
+++ b/frontend/src/ts/stores/modals.ts
@@ -1,6 +1,11 @@
 import { createStore } from "solid-js/store";
 
-export type ModalId = "VersionHistory" | "Contact" | "Support" | "Commandline";
+export type ModalId =
+  | "VersionHistory"
+  | "Contact"
+  | "Support"
+  | "Commandline"
+  | "MiniResultChartModal";
 
 export type ModalVisibility = {
   visible: boolean;

From 44ce83b3a1ee36fabe5d8a32ea38fb94fadee460 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 20 Feb 2026 14:43:17 +0100
Subject: [PATCH 39/52] use asyncContent

---
 .../src/ts/components/common/AsyncContent.tsx | 45 ++++++++++++++++---
 .../components/pages/account/AccountPage.tsx  | 24 +++++++---
 2 files changed, 57 insertions(+), 12 deletions(-)

diff --git a/frontend/src/ts/components/common/AsyncContent.tsx b/frontend/src/ts/components/common/AsyncContent.tsx
index 13438a7e70ec..329c425fa0a5 100644
--- a/frontend/src/ts/components/common/AsyncContent.tsx
+++ b/frontend/src/ts/components/common/AsyncContent.tsx
@@ -1,5 +1,6 @@
 import { UseQueryResult } from "@tanstack/solid-query";
 import {
+  Accessor,
   createMemo,
   ErrorBoundary,
   JSXElement,
@@ -21,6 +22,11 @@ type AsyncEntry<T> = {
   error?: () => unknown;
 };
 
+type Collection<T> = Accessor<T> & {
+  isLoading: boolean;
+  isError: boolean;
+};
+
 type QueryMapping = Record<string, unknown> | unknown;
 type AsyncMap<T extends QueryMapping> = {
   [K in keyof T]: AsyncEntry<T[K]>;
@@ -34,12 +40,18 @@ type BaseProps = {
 
 type QueryProps<T extends QueryMapping> = {
   queries: { [K in keyof T]: UseQueryResult<T[K]> };
-  query?: never;
 };
 
 type SingleQueryProps<T> = {
   query: UseQueryResult<T>;
-  queries?: never;
+};
+
+type CollectionProps<T extends QueryMapping> = {
+  collections: { [K in keyof T]: Collection<T[K]> };
+};
+
+type SingleCollectionProps<T> = {
+  collection: Collection<T>;
 };
 
 type DeferredChildren<T extends QueryMapping> = {
@@ -54,7 +66,12 @@ type EagerChildren<T extends QueryMapping> = {
 };
 
 export type Props<T extends QueryMapping> = BaseProps &
-  (QueryProps<T> | SingleQueryProps<T>) &
+  (
+    | QueryProps<T>
+    | SingleQueryProps<T>
+    | CollectionProps<T>
+    | SingleCollectionProps<T>
+  ) &
   (DeferredChildren<T> | EagerChildren<T>);
 
 export default function AsyncContent<T extends QueryMapping>(
@@ -62,10 +79,14 @@ export default function AsyncContent<T extends QueryMapping>(
 ): JSXElement {
   //@ts-expect-error this is fine
   const source = createMemo<AsyncMap<T>>(() => {
-    if (props.query !== undefined) {
+    if ("query" in props) {
       return fromQueries({ defaultQuery: props.query });
-    } else {
+    } else if ("queries" in props) {
       return fromQueries(props.queries);
+    } else if ("collection" in props) {
+      return fromCollections({ defaultQuery: props.collection });
+    } else if ("collections" in props) {
+      return fromCollections(props.collections);
     }
   });
 
@@ -163,3 +184,17 @@ function fromQueries<T extends Record<string, unknown>>(queries: {
     return acc;
   }, {} as AsyncMap<T>);
 }
+
+function fromCollections<T extends Record<string, unknown>>(collections: {
+  [K in keyof T]: Collection<T[K]>;
+}): AsyncMap<T> {
+  return typedKeys(collections).reduce((acc, key) => {
+    const q = collections[key];
+    acc[key] = {
+      value: () => q(),
+      isLoading: () => q.isLoading,
+      isError: () => q.isError,
+    };
+    return acc;
+  }, {} as AsyncMap<T>);
+}
diff --git a/frontend/src/ts/components/pages/account/AccountPage.tsx b/frontend/src/ts/components/pages/account/AccountPage.tsx
index 4cf8787ca7b5..f34de1344436 100644
--- a/frontend/src/ts/components/pages/account/AccountPage.tsx
+++ b/frontend/src/ts/components/pages/account/AccountPage.tsx
@@ -11,6 +11,7 @@ import { useLocalStorageStore } from "../../../hooks/useLocalStorageStore";
 import { getActivePage, isLoggedIn } from "../../../signals/core";
 import { isObject, typedKeys } from "../../../utils/misc";
 import { sanitize } from "../../../utils/sanitize";
+import AsyncContent from "../../common/AsyncContent";
 import { Button } from "../../common/Button";
 
 import { Charts } from "./Charts";
@@ -58,13 +59,22 @@ export function AccountPage(): JSXElement {
       <Charts filters={filters} />
       <TestStats queryState={queryState} />
 
-      <Table data={[...data()]} onSortingChange={(val) => setSorting(val)} />
-      <Button
-        text="load more"
-        disabled={data.isLoading}
-        onClick={() => setLimit((limit) => limit + 10)}
-        class="w-full text-center"
-      />
+      <AsyncContent collection={data}>
+        {(results) => (
+          <>
+            <Table
+              data={[...results]}
+              onSortingChange={(val) => setSorting(val)}
+            />
+            <Button
+              text="load more"
+              disabled={data.isLoading}
+              onClick={() => setLimit((limit) => limit + 10)}
+              class="w-full text-center"
+            />
+          </>
+        )}
+      </AsyncContent>
     </Show>
   );
 }

From 488daaf7adce0d6b27cc2c51accdfd64ee5f2bda Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 20 Feb 2026 14:54:44 +0100
Subject: [PATCH 40/52] move miniResultChart, simplify chart

---
 .../pages/account/MiniResultChart.tsx         | 150 +++++++++++++++
 .../src/ts/components/pages/account/Table.tsx | 180 +-----------------
 2 files changed, 155 insertions(+), 175 deletions(-)
 create mode 100644 frontend/src/ts/components/pages/account/MiniResultChart.tsx

diff --git a/frontend/src/ts/components/pages/account/MiniResultChart.tsx b/frontend/src/ts/components/pages/account/MiniResultChart.tsx
new file mode 100644
index 000000000000..37817860d9e8
--- /dev/null
+++ b/frontend/src/ts/components/pages/account/MiniResultChart.tsx
@@ -0,0 +1,150 @@
+import { ChartData } from "@monkeytype/schemas/results";
+import { useQuery } from "@tanstack/solid-query";
+import { createMemo, JSXElement } from "solid-js";
+
+import { getSingleResultQueryOptions } from "../../../collections/results";
+import { getConfig } from "../../../signals/config";
+import { getTheme } from "../../../signals/theme";
+import { isModalOpen } from "../../../stores/modals";
+import { get as getTypingSpeedUnit } from "../../../utils/typing-speed-units";
+import { AnimatedModal } from "../../common/AnimatedModal";
+import AsyncContent from "../../common/AsyncContent";
+import { ChartJs } from "../../common/ChartJs";
+
+export function MiniResultChart(props: {
+  resultId: string | undefined;
+}): JSXElement {
+  const query = useQuery(() => ({
+    ...getSingleResultQueryOptions(props.resultId as string),
+    enabled:
+      isModalOpen("MiniResultChartModal") && props.resultId !== undefined,
+  }));
+
+  const beginAtZero = createMemo(() => getConfig.startGraphsAtZero);
+  const typingSpeedUnit = createMemo(() =>
+    getTypingSpeedUnit(getConfig.typingSpeedUnit),
+  );
+
+  return (
+    <AnimatedModal id="MiniResultChartModal" modalClass="max-w-4xl">
+      <AsyncContent query={query}>
+        {(result) => {
+          const data = result.chartData as ChartData;
+
+          return (
+            <div class="">
+              <ChartJs
+                type="line"
+                data={{
+                  labels: data.wpm.map((_, index) => (index + 1).toString()),
+                  datasets: [
+                    {
+                      label: "wpm",
+                      data: data.wpm.map((it) => typingSpeedUnit().fromWpm(it)),
+                      borderWidth: 3,
+                      yAxisID: "wpm",
+                      order: 2,
+                      pointRadius: 1,
+                    },
+                    {
+                      label: "burst",
+                      data: data.burst.map((it) =>
+                        typingSpeedUnit().fromWpm(it),
+                      ),
+                      borderWidth: 3,
+                      yAxisID: "wpm",
+                      order: 3,
+                      pointRadius: 1,
+                    },
+                    {
+                      label: "errors",
+                      data: data.err,
+                      pointBackgroundColor: getTheme().error,
+                      borderWidth: 2,
+                      order: 1,
+                      yAxisID: "error",
+                      type: "scatter",
+                      pointStyle: "crossRot",
+                      pointRadius: function (context): number {
+                        const index = context.dataIndex;
+                        const value = context.dataset.data[index] as number;
+                        return (value ?? 0) <= 0 ? 0 : 3;
+                      },
+                      pointHoverRadius: function (context): number {
+                        const index = context.dataIndex;
+                        const value = context.dataset.data[index] as number;
+                        return (value ?? 0) <= 0 ? 0 : 5;
+                      },
+                    },
+                  ],
+                }}
+                options={{
+                  responsive: true,
+                  maintainAspectRatio: false,
+                  scales: {
+                    x: {
+                      axis: "x",
+                      ticks: {
+                        autoSkip: true,
+                        autoSkipPadding: 20,
+                      },
+                      display: true,
+                      title: {
+                        display: false,
+                        text: "Seconds",
+                      },
+                    },
+                    wpm: {
+                      axis: "y",
+                      display: true,
+                      title: {
+                        display: true,
+                        text: typingSpeedUnit().fullUnitString,
+                      },
+                      beginAtZero: beginAtZero(),
+                      ticks: {
+                        autoSkip: true,
+                        autoSkipPadding: 20,
+                      },
+                      grid: {
+                        display: true,
+                      },
+                    },
+
+                    error: {
+                      display: true,
+                      position: "right",
+                      title: {
+                        display: true,
+                        text: "Errors",
+                      },
+                      beginAtZero: beginAtZero(),
+                      ticks: {
+                        precision: 0,
+                        autoSkip: true,
+                        autoSkipPadding: 20,
+                      },
+                      grid: {
+                        display: false,
+                      },
+                    },
+                  },
+                  plugins: {
+                    annotation: {
+                      annotations: [],
+                    },
+                    tooltip: {
+                      animation: { duration: 250 },
+                      mode: "index",
+                      intersect: false,
+                    },
+                  },
+                }}
+              />
+            </div>
+          );
+        }}
+      </AsyncContent>
+    </AnimatedModal>
+  );
+}
diff --git a/frontend/src/ts/components/pages/account/Table.tsx b/frontend/src/ts/components/pages/account/Table.tsx
index cec4e283dcf2..b1dbd56aab71 100644
--- a/frontend/src/ts/components/pages/account/Table.tsx
+++ b/frontend/src/ts/components/pages/account/Table.tsx
@@ -1,30 +1,23 @@
 import { Difficulty } from "@monkeytype/schemas/configs";
-import { ChartData } from "@monkeytype/schemas/results";
 import { Mode } from "@monkeytype/schemas/shared";
-import { useQuery } from "@tanstack/solid-query";
 import { createColumnHelper } from "@tanstack/solid-table";
 import { format as dateFormat } from "date-fns/format";
 import { createMemo, createSignal, JSXElement, Show } from "solid-js";
 
-import { getSingleResultQueryOptions } from "../../../collections/results";
 import { SnapshotResult } from "../../../constants/default-snapshot";
 import { getSnapshot } from "../../../db";
 import { getConfig } from "../../../signals/config";
-import { getTheme } from "../../../signals/theme";
-import { isModalOpen, showModal } from "../../../stores/modals";
+import { showModal } from "../../../stores/modals";
 import { Formatting } from "../../../utils/format";
 import { replaceUnderscoresWithSpaces } from "../../../utils/strings";
-import { get as getTypingSpeedUnit } from "../../../utils/typing-speed-units";
-import { AnimatedModal } from "../../common/AnimatedModal";
-import AsyncContent from "../../common/AsyncContent";
 import { Button } from "../../common/Button";
-import { ChartJs } from "../../common/ChartJs";
 import { Fa, FaProps } from "../../common/Fa";
 import { DataTable, DataTableColumnDef } from "../../ui/table/DataTable";
 
-export type Sorting = {
-  // oxlint-disable-next-line typescript/no-explicit-any
-  field: keyof SnapshotResult<any>;
+import { MiniResultChart } from "./MiniResultChart";
+
+type Sorting = {
+  field: keyof SnapshotResult<Mode>;
   direction: "asc" | "desc";
 };
 
@@ -71,169 +64,6 @@ export function Table<M extends Mode>(props: {
   );
 }
 
-function MiniResultChart(props: { resultId: string | undefined }): JSXElement {
-  const query = useQuery(() => ({
-    ...getSingleResultQueryOptions(props.resultId as string),
-    enabled:
-      isModalOpen("MiniResultChartModal") && props.resultId !== undefined,
-  }));
-
-  const beginAtZero = createMemo(() => getConfig.startGraphsAtZero);
-  const typingSpeedUnit = createMemo(() =>
-    getTypingSpeedUnit(getConfig.typingSpeedUnit),
-  );
-
-  return (
-    <AnimatedModal id="MiniResultChartModal" modalClass="max-w-4xl">
-      <AsyncContent query={query}>
-        {(result) => {
-          const data = result.chartData as ChartData;
-
-          const wpm = data.wpm.map((it) => typingSpeedUnit().fromWpm(it));
-          const burst = data.burst.map((it) => typingSpeedUnit().fromWpm(it));
-
-          const maxChartVal = Math.max(
-            ...[Math.max(...wpm), Math.max(...burst)],
-          );
-          const minChartVal = beginAtZero()
-            ? 0
-            : Math.floor(Math.min(...[Math.min(...wpm), Math.min(...burst)]));
-
-          return (
-            <div class="">
-              <ChartJs
-                type="line"
-                data={{
-                  labels: data.wpm.map((_, index) => (index + 1).toString()),
-                  datasets: [
-                    {
-                      label: "wpm",
-                      data: wpm,
-                      borderWidth: 3,
-                      yAxisID: "wpm",
-                      order: 2,
-                      pointRadius: 1,
-                    },
-                    {
-                      label: "burst",
-                      data: burst,
-                      borderWidth: 3,
-                      yAxisID: "burst",
-                      order: 3,
-                      pointRadius: 1,
-                    },
-                    {
-                      label: "errors",
-                      data: data.err,
-                      pointBackgroundColor: getTheme().error,
-                      borderWidth: 2,
-                      order: 1,
-                      yAxisID: "error",
-                      type: "scatter",
-                      pointStyle: "crossRot",
-                      pointRadius: function (context): number {
-                        const index = context.dataIndex;
-                        const value = context.dataset.data[index] as number;
-                        return (value ?? 0) <= 0 ? 0 : 3;
-                      },
-                      pointHoverRadius: function (context): number {
-                        const index = context.dataIndex;
-                        const value = context.dataset.data[index] as number;
-                        return (value ?? 0) <= 0 ? 0 : 5;
-                      },
-                    },
-                  ],
-                }}
-                options={{
-                  responsive: true,
-                  maintainAspectRatio: false,
-                  scales: {
-                    x: {
-                      axis: "x",
-                      ticks: {
-                        autoSkip: true,
-                        autoSkipPadding: 20,
-                      },
-                      display: true,
-                      title: {
-                        display: false,
-                        text: "Seconds",
-                      },
-                    },
-                    wpm: {
-                      axis: "y",
-                      display: true,
-                      title: {
-                        display: true,
-                        text: typingSpeedUnit().fullUnitString,
-                      },
-                      beginAtZero: beginAtZero(),
-                      min: minChartVal,
-                      max: maxChartVal,
-                      ticks: {
-                        autoSkip: true,
-                        autoSkipPadding: 20,
-                      },
-                      grid: {
-                        display: true,
-                      },
-                    },
-                    burst: {
-                      axis: "y",
-                      display: false,
-                      title: {
-                        display: true,
-                        text: "Burst " + typingSpeedUnit().fullUnitString,
-                      },
-                      beginAtZero: beginAtZero(),
-                      min: minChartVal,
-                      max: maxChartVal,
-                      ticks: {
-                        autoSkip: true,
-                        autoSkipPadding: 20,
-                      },
-                      grid: {
-                        display: false,
-                      },
-                    },
-                    error: {
-                      display: true,
-                      position: "right",
-                      title: {
-                        display: true,
-                        text: "Errors",
-                      },
-                      beginAtZero: beginAtZero(),
-                      ticks: {
-                        precision: 0,
-                        autoSkip: true,
-                        autoSkipPadding: 20,
-                      },
-                      grid: {
-                        display: false,
-                      },
-                    },
-                  },
-                  plugins: {
-                    annotation: {
-                      annotations: [],
-                    },
-                    tooltip: {
-                      animation: { duration: 250 },
-                      mode: "index",
-                      intersect: false,
-                    },
-                  },
-                }}
-              />
-            </div>
-          );
-        }}
-      </AsyncContent>
-    </AnimatedModal>
-  );
-}
-
 function getColumns<M extends Mode>({
   format,
   onMiniResultChartSelected,

From 87a3615fac7f89955e32d1b419874aa91b0fa410 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 20 Feb 2026 19:27:36 +0100
Subject: [PATCH 41/52] some charts

---
 .../components/pages/account/AccountPage.tsx  |   2 +-
 .../ts/components/pages/account/Charts.tsx    | 285 +++++++++++++++++-
 2 files changed, 284 insertions(+), 3 deletions(-)

diff --git a/frontend/src/ts/components/pages/account/AccountPage.tsx b/frontend/src/ts/components/pages/account/AccountPage.tsx
index f34de1344436..57d032fff932 100644
--- a/frontend/src/ts/components/pages/account/AccountPage.tsx
+++ b/frontend/src/ts/components/pages/account/AccountPage.tsx
@@ -56,7 +56,7 @@ export function AccountPage(): JSXElement {
         onResetFilter={() => setFilters(defaultResultFilters)}
       />
 
-      <Charts filters={filters} />
+      <Charts filters={filters} queryState={queryState()} />
       <TestStats queryState={queryState} />
 
       <AsyncContent collection={data}>
diff --git a/frontend/src/ts/components/pages/account/Charts.tsx b/frontend/src/ts/components/pages/account/Charts.tsx
index 1469e407cd95..b9195f164d76 100644
--- a/frontend/src/ts/components/pages/account/Charts.tsx
+++ b/frontend/src/ts/components/pages/account/Charts.tsx
@@ -1,16 +1,33 @@
 import { ResultFilters, ResultFiltersKeys } from "@monkeytype/schemas/users";
+import { useLiveQuery } from "@tanstack/solid-db";
 import { createMemo, JSXElement } from "solid-js";
 
+import {
+  buildResultsQuery,
+  ResultsQueryState,
+} from "../../../collections/results";
 import { getSnapshot } from "../../../db";
+import { getConfig } from "../../../signals/config";
 import { FaSolidIcon } from "../../../types/font-awesome";
 import {
   capitalizeFirstLetter,
   replaceUnderscoresWithSpaces,
 } from "../../../utils/strings";
+import { get as getTypingSpeedUnit } from "../../../utils/typing-speed-units";
+import AsyncContent from "../../common/AsyncContent";
+import { ChartJs } from "../../common/ChartJs";
 import { Fa } from "../../common/Fa";
 
-export function Charts(props: { filters: ResultFilters }): JSXElement {
-  return <FilterSummary filters={props.filters} />;
+export function Charts(props: {
+  filters: ResultFilters;
+  queryState: ResultsQueryState | undefined;
+}): JSXElement {
+  return (
+    <>
+      <FilterSummary filters={props.filters} />
+      <HistoryChart queryState={props.queryState} />
+    </>
+  );
 }
 
 function FilterSummary(props: { filters: ResultFilters }): JSXElement {
@@ -77,3 +94,267 @@ function isAllSet(
 ): boolean {
   return Object.values(filter).every((value) => value);
 }
+
+function HistoryChart(props: {
+  queryState: ResultsQueryState | undefined;
+}): JSXElement {
+  const beginAtZero = createMemo(() => getConfig.startGraphsAtZero);
+  const typingSpeedUnit = createMemo(() =>
+    getTypingSpeedUnit(getConfig.typingSpeedUnit),
+  );
+
+  const resultsQuery = useLiveQuery((q) => {
+    if (props.queryState === undefined) return undefined;
+    return q
+      .from({ r: buildResultsQuery(props.queryState) })
+      .orderBy(({ r }) => r.timestamp, "desc");
+  });
+
+  return (
+    <AsyncContent collection={resultsQuery}>
+      {(results) => {
+        const wpm = results.map((it) => typingSpeedUnit().fromWpm(it.wpm));
+        const acc = results.map((it) => it.acc);
+        return (
+          <div style={{ height: "400px" }}>
+            <ChartJs
+              type="line"
+              data={{
+                labels: results.map((_, i) => i),
+                datasets: [
+                  {
+                    yAxisID: "wpm",
+                    data: wpm,
+                    fill: false,
+                    borderWidth: 0,
+                    order: 3,
+                  },
+                  {
+                    yAxisID: "wpm",
+                    data: pb(wpm),
+                    fill: false,
+                    stepped: true,
+                    pointRadius: 0,
+                    pointHoverRadius: 0,
+                    order: 4,
+                  },
+                  {
+                    yAxisID: "acc",
+                    fill: false,
+                    data: acc,
+                    pointStyle: "triangle",
+                    borderWidth: 0,
+                    pointRadius: 3.5,
+                    order: 3,
+                  },
+                  {
+                    yAxisID: "wpm",
+                    data: movingAverage(wpm, 10),
+                    fill: false,
+                    pointRadius: 0,
+                    pointHoverRadius: 0,
+                    order: 2,
+                  },
+                  {
+                    yAxisID: "acc",
+                    data: movingAverage(acc, 10),
+                    fill: false,
+                    pointRadius: 0,
+                    pointHoverRadius: 0,
+                    order: 2,
+                  },
+                  {
+                    yAxisID: "wpm",
+                    data: movingAverage(wpm, 100),
+                    fill: false,
+                    pointRadius: 0,
+                    pointHoverRadius: 0,
+                    order: 1,
+                  },
+                  {
+                    yAxisID: "acc",
+                    data: movingAverage(acc, 100),
+                    fill: false,
+                    pointRadius: 0,
+                    pointHoverRadius: 0,
+                    order: 1,
+                  },
+                ],
+              }}
+              options={{
+                // responsive: true,
+                maintainAspectRatio: false,
+                hover: {
+                  mode: "nearest",
+                  intersect: false,
+                },
+                scales: {
+                  x: {
+                    axis: "x",
+                    type: "linear",
+                    reverse: true,
+                    min: 0,
+                    ticks: {
+                      stepSize: 10,
+                    },
+                    display: false,
+                    grid: {
+                      display: false,
+                    },
+                  },
+                  wpm: {
+                    axis: "y",
+                    type: "linear",
+                    beginAtZero: beginAtZero(),
+                    ticks: {
+                      stepSize: typingSpeedUnit().historyStepSize,
+                    },
+                    display: true,
+                    title: {
+                      display: true,
+                      text: typingSpeedUnit().fullUnitString,
+                    },
+                    position: "right",
+                  },
+                  acc: {
+                    axis: "y",
+                    beginAtZero: beginAtZero(),
+                    min: 0,
+                    max: 100,
+                    reverse: true,
+                    ticks: {
+                      stepSize: 10,
+                    },
+                    display: true,
+                    title: {
+                      display: true,
+                      text: "Accuracy",
+                    },
+                    grid: {
+                      display: false,
+                    },
+                    position: "left",
+                  },
+                },
+
+                plugins: {
+                  annotation: {
+                    annotations: [],
+                  },
+                  tooltip: {
+                    animation: { duration: 250 },
+                    // Disable the on-canvas tooltip
+                    enabled: true,
+
+                    intersect: false,
+                    external: function (ctx): void {
+                      if (ctx === undefined) return;
+                      ctx.tooltip.options.displayColors = false;
+                    },
+                    filter: function (tooltipItem): boolean {
+                      return (
+                        tooltipItem.datasetIndex !== 1 &&
+                        tooltipItem.datasetIndex !== 3 &&
+                        tooltipItem.datasetIndex !== 4 &&
+                        tooltipItem.datasetIndex !== 5 &&
+                        tooltipItem.datasetIndex !== 6
+                      );
+                    },
+                    callbacks: {
+                      title: function (): string {
+                        return "";
+                      },
+                      /*
+                beforeLabel: function (tooltipItem): string {
+                  if (tooltipItem.datasetIndex !== 0) {
+                    const resultData = tooltipItem.dataset.data[
+                      tooltipItem.dataIndex
+                    ] as AccChartData;
+                    return `error rate: ${Numbers.roundTo2(
+                      resultData.errorRate,
+                    )}%\nacc: ${Numbers.roundTo2(100 - resultData.errorRate)}%`;
+                  }
+                  const resultData = tooltipItem.dataset.data[
+                    tooltipItem.dataIndex
+                  ] as HistoryChartData;
+                  let label =
+                    `${Config.typingSpeedUnit}: ${resultData.wpm}` +
+                    "\n" +
+                    `raw: ${resultData.raw}` +
+                    "\n" +
+                    `acc: ${resultData.acc}` +
+                    "\n\n" +
+                    `mode: ${resultData.mode} `;
+
+                  if (resultData.mode === "time") {
+                    label += resultData.mode2;
+                  } else if (resultData.mode === "words") {
+                    label += resultData.mode2;
+                  }
+
+                  let diff = resultData.difficulty ?? "normal";
+                  label += `\ndifficulty: ${diff}`;
+
+                  label +=
+                    "\n" +
+                    `punctuation: ${resultData.punctuation}` +
+                    "\n" +
+                    `language: ${resultData.language}` +
+                    `${resultData.isPb ? "\n\nnew personal best" : ""}` +
+                    "\n\n" +
+                    `date: ${format(
+                      new Date(resultData.timestamp),
+                      "dd MMM yyyy HH:mm",
+                    )}`;
+
+                  return label;
+                },
+
+                label: function (): string {
+                  return "";
+                },
+                afterLabel: function (tooltip): string {
+                  accountHistoryActiveIndex = tooltip.dataIndex;
+                  return "";
+                },
+                                */
+                    },
+                  },
+                },
+              }}
+            />
+          </div>
+        );
+      }}
+    </AsyncContent>
+  );
+}
+
+function movingAverage(data: number[], windowSize: number): number[] {
+  return data.map((_, i, array) => {
+    const subset = array.slice(i, i + windowSize);
+
+    if (subset.length === 0) return 0;
+
+    const sum = subset.reduce((acc, value) => acc + value, 0);
+
+    return sum / subset.length;
+  });
+}
+
+function pb(data: number[]): number[] {
+  const result = new Array<number>(data.length);
+  let currentMax: number = -Infinity;
+
+  for (let i = data.length - 1; i >= 0; i--) {
+    const value = Number(data[i]);
+
+    if (Number.isFinite(value)) {
+      currentMax = Math.max(currentMax, value);
+    }
+
+    result[i] = currentMax;
+  }
+
+  return result;
+}

From 822462f4a8e9dc44c462dc981a941863192c0e6b Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sat, 21 Feb 2026 01:14:05 +0100
Subject: [PATCH 42/52] add label, refactor, add trend

---
 .../components/pages/account/AccountPage.tsx  |   2 +-
 .../ts/components/pages/account/Charts.tsx    | 455 ++++++++++--------
 frontend/src/ts/utils/typing-speed-units.ts   |   2 +-
 3 files changed, 252 insertions(+), 207 deletions(-)

diff --git a/frontend/src/ts/components/pages/account/AccountPage.tsx b/frontend/src/ts/components/pages/account/AccountPage.tsx
index 57d032fff932..26324c390332 100644
--- a/frontend/src/ts/components/pages/account/AccountPage.tsx
+++ b/frontend/src/ts/components/pages/account/AccountPage.tsx
@@ -49,7 +49,7 @@ export function AccountPage(): JSXElement {
   const data = useResultsLiveQuery({ queryState, sorting, limit });
 
   return (
-    <Show when={isLoggedIn()}>
+    <Show when={isLoggedIn() && isOpen()}>
       <Filters
         filters={filters}
         onChangeFilter={(key, value) => setFilters(key, value)}
diff --git a/frontend/src/ts/components/pages/account/Charts.tsx b/frontend/src/ts/components/pages/account/Charts.tsx
index b9195f164d76..5873ebf51b67 100644
--- a/frontend/src/ts/components/pages/account/Charts.tsx
+++ b/frontend/src/ts/components/pages/account/Charts.tsx
@@ -1,19 +1,27 @@
+import { Mode } from "@monkeytype/schemas/shared";
 import { ResultFilters, ResultFiltersKeys } from "@monkeytype/schemas/users";
 import { useLiveQuery } from "@tanstack/solid-db";
-import { createMemo, JSXElement } from "solid-js";
+import { format as dateFormat } from "date-fns/format";
+import { createMemo, JSXElement, Show } from "solid-js";
 
 import {
   buildResultsQuery,
   ResultsQueryState,
 } from "../../../collections/results";
+import { SnapshotResult } from "../../../constants/default-snapshot";
 import { getSnapshot } from "../../../db";
 import { getConfig } from "../../../signals/config";
 import { FaSolidIcon } from "../../../types/font-awesome";
+import { Formatting } from "../../../utils/format";
+import { findLineByLeastSquares } from "../../../utils/numbers";
 import {
   capitalizeFirstLetter,
   replaceUnderscoresWithSpaces,
 } from "../../../utils/strings";
-import { get as getTypingSpeedUnit } from "../../../utils/typing-speed-units";
+import {
+  get as getTypingSpeedUnit,
+  TypingSpeedUnitSettings,
+} from "../../../utils/typing-speed-units";
 import AsyncContent from "../../common/AsyncContent";
 import { ChartJs } from "../../common/ChartJs";
 import { Fa } from "../../common/Fa";
@@ -22,11 +30,34 @@ export function Charts(props: {
   filters: ResultFilters;
   queryState: ResultsQueryState | undefined;
 }): JSXElement {
+  const beginAtZero = createMemo(() => getConfig.startGraphsAtZero);
+  const typingSpeedUnit = createMemo(() =>
+    getTypingSpeedUnit(getConfig.typingSpeedUnit),
+  );
+  const format = createMemo(() => new Formatting(getConfig));
+
+  const resultsQuery = useLiveQuery((q) => {
+    if (props.queryState === undefined) return undefined;
+    return q
+      .from({ r: buildResultsQuery(props.queryState) })
+      .orderBy(({ r }) => r.timestamp, "desc");
+  });
+
   return (
-    <>
-      <FilterSummary filters={props.filters} />
-      <HistoryChart queryState={props.queryState} />
-    </>
+    <AsyncContent collection={resultsQuery}>
+      {(results) => (
+        <>
+          <FilterSummary filters={props.filters} />
+          <HistoryChart
+            results={results}
+            beginAtZero={beginAtZero()}
+            typingSpeedUnit={typingSpeedUnit()}
+            format={format()}
+          />
+          <Trend results={results} />
+        </>
+      )}
+    </AsyncContent>
   );
 }
 
@@ -96,214 +127,204 @@ function isAllSet(
 }
 
 function HistoryChart(props: {
-  queryState: ResultsQueryState | undefined;
+  results: SnapshotResult<Mode>[];
+  beginAtZero: boolean;
+  typingSpeedUnit: TypingSpeedUnitSettings;
+  format: Formatting;
 }): JSXElement {
-  const beginAtZero = createMemo(() => getConfig.startGraphsAtZero);
-  const typingSpeedUnit = createMemo(() =>
-    getTypingSpeedUnit(getConfig.typingSpeedUnit),
-  );
-
-  const resultsQuery = useLiveQuery((q) => {
-    if (props.queryState === undefined) return undefined;
-    return q
-      .from({ r: buildResultsQuery(props.queryState) })
-      .orderBy(({ r }) => r.timestamp, "desc");
-  });
+  const format = props.format;
 
+  const formatAccuracy = (accuracy: number): string =>
+    format.accuracy(accuracy, { showDecimalPlaces: true });
+  const formatSpeed = (wpm: number): string =>
+    format.typingSpeed(wpm, { showDecimalPlaces: true });
+  const wpm = props.results.map((it) => props.typingSpeedUnit.fromWpm(it.wpm));
+  const acc = props.results.map((it) => it.acc);
   return (
-    <AsyncContent collection={resultsQuery}>
-      {(results) => {
-        const wpm = results.map((it) => typingSpeedUnit().fromWpm(it.wpm));
-        const acc = results.map((it) => it.acc);
-        return (
-          <div style={{ height: "400px" }}>
-            <ChartJs
-              type="line"
-              data={{
-                labels: results.map((_, i) => i),
-                datasets: [
-                  {
-                    yAxisID: "wpm",
-                    data: wpm,
-                    fill: false,
-                    borderWidth: 0,
-                    order: 3,
-                  },
-                  {
-                    yAxisID: "wpm",
-                    data: pb(wpm),
-                    fill: false,
-                    stepped: true,
-                    pointRadius: 0,
-                    pointHoverRadius: 0,
-                    order: 4,
-                  },
-                  {
-                    yAxisID: "acc",
-                    fill: false,
-                    data: acc,
-                    pointStyle: "triangle",
-                    borderWidth: 0,
-                    pointRadius: 3.5,
-                    order: 3,
-                  },
-                  {
-                    yAxisID: "wpm",
-                    data: movingAverage(wpm, 10),
-                    fill: false,
-                    pointRadius: 0,
-                    pointHoverRadius: 0,
-                    order: 2,
-                  },
-                  {
-                    yAxisID: "acc",
-                    data: movingAverage(acc, 10),
-                    fill: false,
-                    pointRadius: 0,
-                    pointHoverRadius: 0,
-                    order: 2,
-                  },
-                  {
-                    yAxisID: "wpm",
-                    data: movingAverage(wpm, 100),
-                    fill: false,
-                    pointRadius: 0,
-                    pointHoverRadius: 0,
-                    order: 1,
-                  },
-                  {
-                    yAxisID: "acc",
-                    data: movingAverage(acc, 100),
-                    fill: false,
-                    pointRadius: 0,
-                    pointHoverRadius: 0,
-                    order: 1,
-                  },
-                ],
-              }}
-              options={{
-                // responsive: true,
-                maintainAspectRatio: false,
-                hover: {
-                  mode: "nearest",
-                  intersect: false,
-                },
-                scales: {
-                  x: {
-                    axis: "x",
-                    type: "linear",
-                    reverse: true,
-                    min: 0,
-                    ticks: {
-                      stepSize: 10,
-                    },
-                    display: false,
-                    grid: {
-                      display: false,
-                    },
-                  },
-                  wpm: {
-                    axis: "y",
-                    type: "linear",
-                    beginAtZero: beginAtZero(),
-                    ticks: {
-                      stepSize: typingSpeedUnit().historyStepSize,
-                    },
-                    display: true,
-                    title: {
-                      display: true,
-                      text: typingSpeedUnit().fullUnitString,
-                    },
-                    position: "right",
-                  },
-                  acc: {
-                    axis: "y",
-                    beginAtZero: beginAtZero(),
-                    min: 0,
-                    max: 100,
-                    reverse: true,
-                    ticks: {
-                      stepSize: 10,
-                    },
-                    display: true,
-                    title: {
-                      display: true,
-                      text: "Accuracy",
-                    },
-                    grid: {
-                      display: false,
-                    },
-                    position: "left",
-                  },
+    <div style={{ height: "400px" }}>
+      <ChartJs
+        type="line"
+        data={{
+          labels: props.results.map((_, i) => i),
+          datasets: [
+            {
+              yAxisID: "wpm",
+              data: wpm,
+              fill: false,
+              borderWidth: 0,
+              order: 3,
+            },
+            {
+              yAxisID: "wpm",
+              data: pb(wpm),
+              fill: false,
+              stepped: true,
+              pointRadius: 0,
+              pointHoverRadius: 0,
+              order: 4,
+            },
+            {
+              yAxisID: "acc",
+              fill: false,
+              data: acc,
+              pointStyle: "triangle",
+              borderWidth: 0,
+              pointRadius: 3.5,
+              order: 3,
+            },
+            {
+              yAxisID: "wpm",
+              data: movingAverage(wpm, 10),
+              fill: false,
+              pointRadius: 0,
+              pointHoverRadius: 0,
+              order: 2,
+            },
+            {
+              yAxisID: "acc",
+              data: movingAverage(acc, 10),
+              fill: false,
+              pointRadius: 0,
+              pointHoverRadius: 0,
+              order: 2,
+            },
+            {
+              yAxisID: "wpm",
+              data: movingAverage(wpm, 100),
+              fill: false,
+              pointRadius: 0,
+              pointHoverRadius: 0,
+              order: 1,
+            },
+            {
+              yAxisID: "acc",
+              data: movingAverage(acc, 100),
+              fill: false,
+              pointRadius: 0,
+              pointHoverRadius: 0,
+              order: 1,
+            },
+          ],
+        }}
+        options={{
+          // responsive: true,
+          maintainAspectRatio: false,
+          hover: {
+            mode: "nearest",
+            intersect: false,
+          },
+          scales: {
+            x: {
+              axis: "x",
+              type: "linear",
+              reverse: true,
+              min: 0,
+              ticks: {
+                stepSize: 10,
+              },
+              display: false,
+              grid: {
+                display: false,
+              },
+            },
+            wpm: {
+              axis: "y",
+              type: "linear",
+              beginAtZero: props.beginAtZero,
+              ticks: {
+                stepSize: props.typingSpeedUnit.historyStepSize,
+              },
+              display: true,
+              title: {
+                display: true,
+                text: props.typingSpeedUnit.fullUnitString,
+              },
+              position: "right",
+            },
+            acc: {
+              axis: "y",
+              beginAtZero: props.beginAtZero,
+              min: 0,
+              max: 100,
+              reverse: true,
+              ticks: {
+                stepSize: 10,
+              },
+              display: true,
+              title: {
+                display: true,
+                text: "Accuracy",
+              },
+              grid: {
+                display: false,
+              },
+              position: "left",
+            },
+          },
+
+          plugins: {
+            annotation: {
+              annotations: [],
+            },
+            tooltip: {
+              animation: { duration: 250 },
+              // Disable the on-canvas tooltip
+              enabled: true,
+
+              intersect: false,
+              external: function (ctx): void {
+                if (ctx === undefined) return;
+                ctx.tooltip.options.displayColors = false;
+              },
+              filter: function (tooltipItem): boolean {
+                return (
+                  tooltipItem.datasetIndex !== 1 &&
+                  tooltipItem.datasetIndex !== 3 &&
+                  tooltipItem.datasetIndex !== 4 &&
+                  tooltipItem.datasetIndex !== 5 &&
+                  tooltipItem.datasetIndex !== 6
+                );
+              },
+              callbacks: {
+                title: function (): string {
+                  return "";
                 },
 
-                plugins: {
-                  annotation: {
-                    annotations: [],
-                  },
-                  tooltip: {
-                    animation: { duration: 250 },
-                    // Disable the on-canvas tooltip
-                    enabled: true,
-
-                    intersect: false,
-                    external: function (ctx): void {
-                      if (ctx === undefined) return;
-                      ctx.tooltip.options.displayColors = false;
-                    },
-                    filter: function (tooltipItem): boolean {
-                      return (
-                        tooltipItem.datasetIndex !== 1 &&
-                        tooltipItem.datasetIndex !== 3 &&
-                        tooltipItem.datasetIndex !== 4 &&
-                        tooltipItem.datasetIndex !== 5 &&
-                        tooltipItem.datasetIndex !== 6
-                      );
-                    },
-                    callbacks: {
-                      title: function (): string {
-                        return "";
-                      },
-                      /*
                 beforeLabel: function (tooltipItem): string {
+                  const result = props.results[tooltipItem.dataIndex];
+                  if (result === undefined) return "unknown";
+
                   if (tooltipItem.datasetIndex !== 0) {
-                    const resultData = tooltipItem.dataset.data[
-                      tooltipItem.dataIndex
-                    ] as AccChartData;
-                    return `error rate: ${Numbers.roundTo2(
-                      resultData.errorRate,
-                    )}%\nacc: ${Numbers.roundTo2(100 - resultData.errorRate)}%`;
+                    return `error rate: ${formatAccuracy(100 - result.acc)}\nacc: ${formatAccuracy(result.acc)}`;
                   }
-                  const resultData = tooltipItem.dataset.data[
-                    tooltipItem.dataIndex
-                  ] as HistoryChartData;
+
                   let label =
-                    `${Config.typingSpeedUnit}: ${resultData.wpm}` +
+                    `${getConfig.typingSpeedUnit}: ${formatSpeed(result.wpm)}` +
                     "\n" +
-                    `raw: ${resultData.raw}` +
+                    `raw: ${formatSpeed(result.rawWpm)}` +
                     "\n" +
-                    `acc: ${resultData.acc}` +
+                    `acc: ${formatAccuracy(result.acc)}` +
                     "\n\n" +
-                    `mode: ${resultData.mode} `;
+                    `mode: ${result.mode} `;
 
-                  if (resultData.mode === "time") {
-                    label += resultData.mode2;
-                  } else if (resultData.mode === "words") {
-                    label += resultData.mode2;
+                  if (result.mode === "time") {
+                    label += result.mode2;
+                  } else if (result.mode === "words") {
+                    label += result.mode2;
                   }
 
-                  let diff = resultData.difficulty ?? "normal";
+                  let diff = result.difficulty ?? "normal";
                   label += `\ndifficulty: ${diff}`;
 
                   label +=
                     "\n" +
-                    `punctuation: ${resultData.punctuation}` +
+                    `punctuation: ${result.punctuation}` +
                     "\n" +
-                    `language: ${resultData.language}` +
-                    `${resultData.isPb ? "\n\nnew personal best" : ""}` +
+                    `language: ${result.language}` +
+                    `${result.isPb ? "\n\nnew personal best" : ""}` +
                     "\n\n" +
-                    `date: ${format(
-                      new Date(resultData.timestamp),
+                    `date: ${dateFormat(
+                      new Date(result.timestamp),
                       "dd MMM yyyy HH:mm",
                     )}`;
 
@@ -313,20 +334,44 @@ function HistoryChart(props: {
                 label: function (): string {
                   return "";
                 },
-                afterLabel: function (tooltip): string {
-                  accountHistoryActiveIndex = tooltip.dataIndex;
+                afterLabel: function (_tooltip): string {
+                  //accountHistoryActiveIndex = tooltip.dataIndex;
                   return "";
                 },
-                                */
-                    },
-                  },
-                },
-              }}
-            />
-          </div>
-        );
-      }}
-    </AsyncContent>
+              },
+            },
+          },
+        }}
+      />
+    </div>
+  );
+}
+
+function Trend(props: { results: SnapshotResult<Mode>[] }): JSXElement {
+  const format = createMemo(() => new Formatting(getConfig));
+
+  const trend = findLineByLeastSquares(
+    props.results.map((it) => it.wpm).reverse(),
+  );
+  const totalSecondsFiltered = props.results
+    .map((it) => it.timeTyping)
+    .reduce((acc, it) => acc + it, 0);
+
+  const wpmChange = trend === null ? null : trend[1][1] - trend[0][1];
+  const wpmChangePerHour =
+    wpmChange === null ? null : wpmChange * (3600 / totalSecondsFiltered);
+
+  return (
+    <Show when={wpmChange !== null}>
+      <div class="w-full text-center">
+        Speed change per hour spent typing:{" "}
+        {wpmChangePerHour !== null && wpmChangePerHour > 0 ? "+" : ""}
+        {format().typingSpeed(wpmChangePerHour, {
+          showDecimalPlaces: true,
+        })}{" "}
+        {format().typingSpeedUnit}
+      </div>
+    </Show>
   );
 }
 
diff --git a/frontend/src/ts/utils/typing-speed-units.ts b/frontend/src/ts/utils/typing-speed-units.ts
index 7539f1e54102..ef96dd96db44 100644
--- a/frontend/src/ts/utils/typing-speed-units.ts
+++ b/frontend/src/ts/utils/typing-speed-units.ts
@@ -1,6 +1,6 @@
 import { TypingSpeedUnit } from "@monkeytype/schemas/configs";
 
-type TypingSpeedUnitSettings = {
+export type TypingSpeedUnitSettings = {
   fromWpm: (number: number) => number;
   toWpm: (number: number) => number;
   fullUnitString: string;

From 18a528e44b2b7fd4e2f14e221d222236e91adcfb Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sat, 21 Feb 2026 01:54:31 +0100
Subject: [PATCH 43/52] fixes

---
 frontend/src/ts/components/common/ChartJs.tsx | 16 +++--
 .../ts/components/pages/account/Charts.tsx    | 65 +++++++++----------
 2 files changed, 41 insertions(+), 40 deletions(-)

diff --git a/frontend/src/ts/components/common/ChartJs.tsx b/frontend/src/ts/components/common/ChartJs.tsx
index dae20fcd8af7..0d0a9f136fd9 100644
--- a/frontend/src/ts/components/common/ChartJs.tsx
+++ b/frontend/src/ts/components/common/ChartJs.tsx
@@ -31,12 +31,15 @@ export function ChartJs<T extends ChartType, TData = DefaultDataPoint<T>>(
   let chart: ChartWithUpdateColors<T, TData> | undefined;
 
   onMount(() => {
-    //oxlint-disable-next-line no-non-null-assertion
-    chart = new ChartWithUpdateColors(canvasEl()!.native, {
-      type: props.type,
-      data: props.data,
-      options: props.options,
-    });
+    chart = new ChartWithUpdateColors(
+      //oxlint-disable-next-line no-non-null-assertion
+      canvasEl()!.native,
+      {
+        type: props.type,
+        data: props.data,
+        options: props.options,
+      },
+    );
 
     props.onChartInit?.(chart);
   });
@@ -50,6 +53,7 @@ export function ChartJs<T extends ChartType, TData = DefaultDataPoint<T>>(
       chart.options = props.options;
     }
     chart.update();
+    void chart.updateColors(getTheme());
   });
 
   createDebouncedEffectOn(
diff --git a/frontend/src/ts/components/pages/account/Charts.tsx b/frontend/src/ts/components/pages/account/Charts.tsx
index 5873ebf51b67..69574ece35d1 100644
--- a/frontend/src/ts/components/pages/account/Charts.tsx
+++ b/frontend/src/ts/components/pages/account/Charts.tsx
@@ -132,14 +132,14 @@ function HistoryChart(props: {
   typingSpeedUnit: TypingSpeedUnitSettings;
   format: Formatting;
 }): JSXElement {
-  const format = props.format;
-
   const formatAccuracy = (accuracy: number): string =>
-    format.accuracy(accuracy, { showDecimalPlaces: true });
+    props.format.accuracy(accuracy, { showDecimalPlaces: true });
   const formatSpeed = (wpm: number): string =>
-    format.typingSpeed(wpm, { showDecimalPlaces: true });
-  const wpm = props.results.map((it) => props.typingSpeedUnit.fromWpm(it.wpm));
-  const acc = props.results.map((it) => it.acc);
+    props.format.typingSpeed(wpm, { showDecimalPlaces: true });
+  const wpm = createMemo(() =>
+    props.results.map((it) => props.typingSpeedUnit.fromWpm(it.wpm)),
+  );
+  const acc = createMemo(() => props.results.map((it) => it.acc));
   return (
     <div style={{ height: "400px" }}>
       <ChartJs
@@ -149,14 +149,14 @@ function HistoryChart(props: {
           datasets: [
             {
               yAxisID: "wpm",
-              data: wpm,
+              data: wpm(),
               fill: false,
               borderWidth: 0,
               order: 3,
             },
             {
               yAxisID: "wpm",
-              data: pb(wpm),
+              data: pb(wpm()),
               fill: false,
               stepped: true,
               pointRadius: 0,
@@ -166,7 +166,7 @@ function HistoryChart(props: {
             {
               yAxisID: "acc",
               fill: false,
-              data: acc,
+              data: acc(),
               pointStyle: "triangle",
               borderWidth: 0,
               pointRadius: 3.5,
@@ -174,7 +174,7 @@ function HistoryChart(props: {
             },
             {
               yAxisID: "wpm",
-              data: movingAverage(wpm, 10),
+              data: movingAverage(wpm(), 10),
               fill: false,
               pointRadius: 0,
               pointHoverRadius: 0,
@@ -182,7 +182,7 @@ function HistoryChart(props: {
             },
             {
               yAxisID: "acc",
-              data: movingAverage(acc, 10),
+              data: movingAverage(acc(), 10),
               fill: false,
               pointRadius: 0,
               pointHoverRadius: 0,
@@ -190,7 +190,7 @@ function HistoryChart(props: {
             },
             {
               yAxisID: "wpm",
-              data: movingAverage(wpm, 100),
+              data: movingAverage(wpm(), 100),
               fill: false,
               pointRadius: 0,
               pointHoverRadius: 0,
@@ -198,7 +198,7 @@ function HistoryChart(props: {
             },
             {
               yAxisID: "acc",
-              data: movingAverage(acc, 100),
+              data: movingAverage(acc(), 100),
               fill: false,
               pointRadius: 0,
               pointHoverRadius: 0,
@@ -219,9 +219,7 @@ function HistoryChart(props: {
               type: "linear",
               reverse: true,
               min: 0,
-              ticks: {
-                stepSize: 10,
-              },
+              max: wpm().length - 1,
               display: false,
               grid: {
                 display: false,
@@ -350,27 +348,26 @@ function HistoryChart(props: {
 function Trend(props: { results: SnapshotResult<Mode>[] }): JSXElement {
   const format = createMemo(() => new Formatting(getConfig));
 
-  const trend = findLineByLeastSquares(
-    props.results.map((it) => it.wpm).reverse(),
-  );
-  const totalSecondsFiltered = props.results
-    .map((it) => it.timeTyping)
-    .reduce((acc, it) => acc + it, 0);
+  const trend = createMemo(() => {
+    const line = findLineByLeastSquares(
+      props.results.map((it) => it.wpm).reverse(),
+    );
+    if (line === null) return undefined;
+
+    const totalSecondsFiltered = props.results
+      .map((it) => it.timeTyping)
+      .reduce((acc, it) => acc + it, 0);
 
-  const wpmChange = trend === null ? null : trend[1][1] - trend[0][1];
-  const wpmChangePerHour =
-    wpmChange === null ? null : wpmChange * (3600 / totalSecondsFiltered);
+    const wpmChange = line[1][1] - line[0][1];
+    const wpmChangePerHour = wpmChange * (3600 / totalSecondsFiltered);
+    const plus = wpmChangePerHour > 0 ? "+" : "";
+
+    return `Speed change per hour spent typing: ${plus}${format().typingSpeed(wpmChangePerHour, { showDecimalPlaces: true })} ${format().typingSpeedUnit}`;
+  });
 
   return (
-    <Show when={wpmChange !== null}>
-      <div class="w-full text-center">
-        Speed change per hour spent typing:{" "}
-        {wpmChangePerHour !== null && wpmChangePerHour > 0 ? "+" : ""}
-        {format().typingSpeed(wpmChangePerHour, {
-          showDecimalPlaces: true,
-        })}{" "}
-        {format().typingSpeedUnit}
-      </div>
+    <Show when={trend() !== undefined}>
+      <div class="w-full text-center">{trend()}</div>
     </Show>
   );
 }

From 24b55426aefb38e8335cd5bc90d18721ed1d8846 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sat, 21 Feb 2026 02:36:01 +0100
Subject: [PATCH 44/52] buttons

---
 .../ts/components/pages/account/Charts.tsx    | 430 ++++++++++--------
 1 file changed, 244 insertions(+), 186 deletions(-)

diff --git a/frontend/src/ts/components/pages/account/Charts.tsx b/frontend/src/ts/components/pages/account/Charts.tsx
index 69574ece35d1..2d1714960e7b 100644
--- a/frontend/src/ts/components/pages/account/Charts.tsx
+++ b/frontend/src/ts/components/pages/account/Charts.tsx
@@ -1,3 +1,4 @@
+import { AccountChart } from "@monkeytype/schemas/configs";
 import { Mode } from "@monkeytype/schemas/shared";
 import { ResultFilters, ResultFiltersKeys } from "@monkeytype/schemas/users";
 import { useLiveQuery } from "@tanstack/solid-db";
@@ -8,6 +9,7 @@ import {
   buildResultsQuery,
   ResultsQueryState,
 } from "../../../collections/results";
+import Config, { setConfig } from "../../../config";
 import { SnapshotResult } from "../../../constants/default-snapshot";
 import { getSnapshot } from "../../../db";
 import { getConfig } from "../../../signals/config";
@@ -23,6 +25,7 @@ import {
   TypingSpeedUnitSettings,
 } from "../../../utils/typing-speed-units";
 import AsyncContent from "../../common/AsyncContent";
+import { Button } from "../../common/Button";
 import { ChartJs } from "../../common/ChartJs";
 import { Fa } from "../../common/Fa";
 
@@ -54,7 +57,6 @@ export function Charts(props: {
             typingSpeedUnit={typingSpeedUnit()}
             format={format()}
           />
-          <Trend results={results} />
         </>
       )}
     </AsyncContent>
@@ -140,208 +142,264 @@ function HistoryChart(props: {
     props.results.map((it) => props.typingSpeedUnit.fromWpm(it.wpm)),
   );
   const acc = createMemo(() => props.results.map((it) => it.acc));
+
+  const toggleAccountChart = (pos: number): (() => void) => {
+    return () => {
+      const newValue = [...Config.accountChart] as AccountChart;
+      newValue[pos] = newValue[pos] === "on" ? "off" : "on";
+      setConfig("accountChart", newValue);
+    };
+  };
+
   return (
-    <div style={{ height: "400px" }}>
-      <ChartJs
-        type="line"
-        data={{
-          labels: props.results.map((_, i) => i),
-          datasets: [
-            {
-              yAxisID: "wpm",
-              data: wpm(),
-              fill: false,
-              borderWidth: 0,
-              order: 3,
-            },
-            {
-              yAxisID: "wpm",
-              data: pb(wpm()),
-              fill: false,
-              stepped: true,
-              pointRadius: 0,
-              pointHoverRadius: 0,
-              order: 4,
-            },
-            {
-              yAxisID: "acc",
-              fill: false,
-              data: acc(),
-              pointStyle: "triangle",
-              borderWidth: 0,
-              pointRadius: 3.5,
-              order: 3,
-            },
-            {
-              yAxisID: "wpm",
-              data: movingAverage(wpm(), 10),
-              fill: false,
-              pointRadius: 0,
-              pointHoverRadius: 0,
-              order: 2,
-            },
-            {
-              yAxisID: "acc",
-              data: movingAverage(acc(), 10),
-              fill: false,
-              pointRadius: 0,
-              pointHoverRadius: 0,
-              order: 2,
-            },
-            {
-              yAxisID: "wpm",
-              data: movingAverage(wpm(), 100),
-              fill: false,
-              pointRadius: 0,
-              pointHoverRadius: 0,
-              order: 1,
-            },
-            {
-              yAxisID: "acc",
-              data: movingAverage(acc(), 100),
-              fill: false,
-              pointRadius: 0,
-              pointHoverRadius: 0,
-              order: 1,
-            },
-          ],
-        }}
-        options={{
-          // responsive: true,
-          maintainAspectRatio: false,
-          hover: {
-            mode: "nearest",
-            intersect: false,
-          },
-          scales: {
-            x: {
-              axis: "x",
-              type: "linear",
-              reverse: true,
-              min: 0,
-              max: wpm().length - 1,
-              display: false,
-              grid: {
-                display: false,
+    <>
+      <div style={{ height: "400px" }}>
+        <ChartJs
+          type="line"
+          data={{
+            labels: props.results.map((_, i) => i),
+            datasets: [
+              {
+                yAxisID: "wpm",
+                data: wpm(),
+                fill: false,
+                borderWidth: 0,
+                order: 3,
+                hidden: getConfig.accountChart[0] === "off",
               },
-            },
-            wpm: {
-              axis: "y",
-              type: "linear",
-              beginAtZero: props.beginAtZero,
-              ticks: {
-                stepSize: props.typingSpeedUnit.historyStepSize,
+              {
+                yAxisID: "wpm",
+                data: pb(wpm()),
+                fill: false,
+                stepped: true,
+                pointRadius: 0,
+                pointHoverRadius: 0,
+                order: 4,
+                hidden: getConfig.accountChart[0] === "off",
               },
-              display: true,
-              title: {
-                display: true,
-                text: props.typingSpeedUnit.fullUnitString,
+              {
+                yAxisID: "acc",
+                fill: false,
+                data: acc(),
+                pointStyle: "triangle",
+                borderWidth: 0,
+                pointRadius: 3.5,
+                order: 3,
+                hidden: getConfig.accountChart[1] === "off",
               },
-              position: "right",
-            },
-            acc: {
-              axis: "y",
-              beginAtZero: props.beginAtZero,
-              min: 0,
-              max: 100,
-              reverse: true,
-              ticks: {
-                stepSize: 10,
+              {
+                yAxisID: "wpm",
+                data: movingAverage(wpm(), 10),
+                fill: false,
+                pointRadius: 0,
+                pointHoverRadius: 0,
+                order: 2,
+                hidden:
+                  getConfig.accountChart[0] === "off" ||
+                  getConfig.accountChart[2] === "off",
               },
-              display: true,
-              title: {
-                display: true,
-                text: "Accuracy",
+              {
+                yAxisID: "acc",
+                data: movingAverage(acc(), 10),
+                fill: false,
+                pointRadius: 0,
+                pointHoverRadius: 0,
+                order: 2,
+                hidden:
+                  getConfig.accountChart[1] === "off" ||
+                  getConfig.accountChart[2] === "off",
               },
-              grid: {
-                display: false,
+              {
+                yAxisID: "wpm",
+                data: movingAverage(wpm(), 100),
+                fill: false,
+                pointRadius: 0,
+                pointHoverRadius: 0,
+                order: 1,
+                hidden:
+                  getConfig.accountChart[0] === "off" ||
+                  getConfig.accountChart[3] === "off",
               },
-              position: "left",
-            },
-          },
-
-          plugins: {
-            annotation: {
-              annotations: [],
-            },
-            tooltip: {
-              animation: { duration: 250 },
-              // Disable the on-canvas tooltip
-              enabled: true,
-
+              {
+                yAxisID: "acc",
+                data: movingAverage(acc(), 100),
+                fill: false,
+                pointRadius: 0,
+                pointHoverRadius: 0,
+                order: 1,
+                hidden:
+                  getConfig.accountChart[1] === "off" ||
+                  getConfig.accountChart[3] === "off",
+              },
+            ],
+          }}
+          options={{
+            // responsive: true,
+            maintainAspectRatio: false,
+            hover: {
+              mode: "nearest",
               intersect: false,
-              external: function (ctx): void {
-                if (ctx === undefined) return;
-                ctx.tooltip.options.displayColors = false;
+            },
+            scales: {
+              x: {
+                axis: "x",
+                type: "linear",
+                reverse: true,
+                min: 0,
+                max: wpm().length - 1,
+                display: false,
+                grid: {
+                  display: false,
+                },
               },
-              filter: function (tooltipItem): boolean {
-                return (
-                  tooltipItem.datasetIndex !== 1 &&
-                  tooltipItem.datasetIndex !== 3 &&
-                  tooltipItem.datasetIndex !== 4 &&
-                  tooltipItem.datasetIndex !== 5 &&
-                  tooltipItem.datasetIndex !== 6
-                );
+              wpm: {
+                axis: "y",
+                type: "linear",
+                beginAtZero: props.beginAtZero,
+                ticks: {
+                  stepSize: props.typingSpeedUnit.historyStepSize,
+                },
+                display: true,
+                title: {
+                  display: true,
+                  text: props.typingSpeedUnit.fullUnitString,
+                },
+                position: "right",
               },
-              callbacks: {
-                title: function (): string {
-                  return "";
+              acc: {
+                axis: "y",
+                beginAtZero: props.beginAtZero,
+                min:
+                  Config.accountChart[0] === "on"
+                    ? 0
+                    : Math.floor(Math.min(...acc()) / 5) * 5,
+                max: 100,
+                reverse: true,
+                ticks: {
+                  stepSize: 10,
                 },
-
-                beforeLabel: function (tooltipItem): string {
-                  const result = props.results[tooltipItem.dataIndex];
-                  if (result === undefined) return "unknown";
-
-                  if (tooltipItem.datasetIndex !== 0) {
-                    return `error rate: ${formatAccuracy(100 - result.acc)}\nacc: ${formatAccuracy(result.acc)}`;
-                  }
-
-                  let label =
-                    `${getConfig.typingSpeedUnit}: ${formatSpeed(result.wpm)}` +
-                    "\n" +
-                    `raw: ${formatSpeed(result.rawWpm)}` +
-                    "\n" +
-                    `acc: ${formatAccuracy(result.acc)}` +
-                    "\n\n" +
-                    `mode: ${result.mode} `;
-
-                  if (result.mode === "time") {
-                    label += result.mode2;
-                  } else if (result.mode === "words") {
-                    label += result.mode2;
-                  }
-
-                  let diff = result.difficulty ?? "normal";
-                  label += `\ndifficulty: ${diff}`;
-
-                  label +=
-                    "\n" +
-                    `punctuation: ${result.punctuation}` +
-                    "\n" +
-                    `language: ${result.language}` +
-                    `${result.isPb ? "\n\nnew personal best" : ""}` +
-                    "\n\n" +
-                    `date: ${dateFormat(
-                      new Date(result.timestamp),
-                      "dd MMM yyyy HH:mm",
-                    )}`;
-
-                  return label;
+                display: true,
+                title: {
+                  display: true,
+                  text: "Accuracy",
+                },
+                grid: {
+                  display: false,
                 },
+                position: "left",
+              },
+            },
 
-                label: function (): string {
-                  return "";
+            plugins: {
+              annotation: {
+                annotations: [],
+              },
+              tooltip: {
+                animation: { duration: 250 },
+                // Disable the on-canvas tooltip
+                enabled: true,
+
+                intersect: false,
+                external: function (ctx): void {
+                  if (ctx === undefined) return;
+                  ctx.tooltip.options.displayColors = false;
+                },
+                filter: function (tooltipItem): boolean {
+                  return (
+                    tooltipItem.datasetIndex !== 1 &&
+                    tooltipItem.datasetIndex !== 3 &&
+                    tooltipItem.datasetIndex !== 4 &&
+                    tooltipItem.datasetIndex !== 5 &&
+                    tooltipItem.datasetIndex !== 6
+                  );
                 },
-                afterLabel: function (_tooltip): string {
-                  //accountHistoryActiveIndex = tooltip.dataIndex;
-                  return "";
+                callbacks: {
+                  title: function (): string {
+                    return "";
+                  },
+
+                  beforeLabel: function (tooltipItem): string {
+                    const result = props.results[tooltipItem.dataIndex];
+                    if (result === undefined) return "unknown";
+
+                    if (tooltipItem.datasetIndex !== 0) {
+                      return `error rate: ${formatAccuracy(100 - result.acc)}\nacc: ${formatAccuracy(result.acc)}`;
+                    }
+
+                    let label =
+                      `${getConfig.typingSpeedUnit}: ${formatSpeed(result.wpm)}` +
+                      "\n" +
+                      `raw: ${formatSpeed(result.rawWpm)}` +
+                      "\n" +
+                      `acc: ${formatAccuracy(result.acc)}` +
+                      "\n\n" +
+                      `mode: ${result.mode} `;
+
+                    if (result.mode === "time") {
+                      label += result.mode2;
+                    } else if (result.mode === "words") {
+                      label += result.mode2;
+                    }
+
+                    let diff = result.difficulty ?? "normal";
+                    label += `\ndifficulty: ${diff}`;
+
+                    label +=
+                      "\n" +
+                      `punctuation: ${result.punctuation}` +
+                      "\n" +
+                      `language: ${result.language}` +
+                      `${result.isPb ? "\n\nnew personal best" : ""}` +
+                      "\n\n" +
+                      `date: ${dateFormat(
+                        new Date(result.timestamp),
+                        "dd MMM yyyy HH:mm",
+                      )}`;
+
+                    return label;
+                  },
+
+                  label: function (): string {
+                    return "";
+                  },
+                  afterLabel: function (_tooltip): string {
+                    //accountHistoryActiveIndex = tooltip.dataIndex;
+                    return "";
+                  },
                 },
               },
             },
-          },
-        }}
-      />
-    </div>
+          }}
+        />
+      </div>
+      <Trend results={props.results} />
+      <div class="grid grid-cols-4 gap-2">
+        <Button
+          fa={{ icon: "fa-tachometer-alt", fixedWidth: true }}
+          text="Speed"
+          onClick={toggleAccountChart(0)}
+          active={getConfig.accountChart[0] === "on"}
+        />
+        <Button
+          fa={{ icon: "fa-bullseye", fixedWidth: true }}
+          text="Accuracy"
+          onClick={toggleAccountChart(1)}
+          active={getConfig.accountChart[1] === "on"}
+        />
+        <Button
+          fa={{ icon: "fa-chart-line", fixedWidth: true }}
+          text="Avg of 10"
+          onClick={toggleAccountChart(2)}
+          active={getConfig.accountChart[2] === "on"}
+        />
+        <Button
+          fa={{ icon: "fa-chart-line", fixedWidth: true }}
+          text="Avg of 100"
+          onClick={toggleAccountChart(3)}
+          active={getConfig.accountChart[3] === "on"}
+        />
+      </div>
+    </>
   );
 }
 

From 3a876657f945a7b0c167a4c0fb29d488d777d049 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sat, 21 Feb 2026 16:34:18 +0100
Subject: [PATCH 45/52] fix grid colors not updating, extract history chart,
 fix about page chart

---
 frontend/src/ts/components/common/ChartJs.tsx |  48 ++-
 .../src/ts/components/pages/AboutPage.tsx     |   3 +
 .../ts/components/pages/account/Charts.tsx    | 348 +---------------
 .../components/pages/account/HistoryChart.tsx | 390 ++++++++++++++++++
 .../pages/account/MiniResultChart.tsx         |   9 +-
 5 files changed, 440 insertions(+), 358 deletions(-)
 create mode 100644 frontend/src/ts/components/pages/account/HistoryChart.tsx

diff --git a/frontend/src/ts/components/common/ChartJs.tsx b/frontend/src/ts/components/common/ChartJs.tsx
index 0d0a9f136fd9..0a6a8231a953 100644
--- a/frontend/src/ts/components/common/ChartJs.tsx
+++ b/frontend/src/ts/components/common/ChartJs.tsx
@@ -1,14 +1,15 @@
 import {
+  CartesianScaleOptions,
   Chart,
   ChartData,
   ChartOptions,
   ChartType,
   DefaultDataPoint,
+  ScaleChartOptions,
 } from "chart.js";
 import { createEffect, JSXElement, onCleanup, onMount } from "solid-js";
 
-import { ChartWithUpdateColors } from "../../controllers/chart-controller";
-import { createDebouncedEffectOn } from "../../hooks/effects";
+import { Theme } from "../../constants/themes";
 import { useRefWithUtils } from "../../hooks/useRefWithUtils";
 import { getTheme } from "../../signals/theme";
 
@@ -28,16 +29,17 @@ export function ChartJs<T extends ChartType, TData = DefaultDataPoint<T>>(
   // Refs are assigned by SolidJS via the ref attribute
   const [canvasRef, canvasEl] = useRefWithUtils<HTMLCanvasElement>();
 
-  let chart: ChartWithUpdateColors<T, TData> | undefined;
+  let chart: Chart<T, TData> | undefined;
 
   onMount(() => {
-    chart = new ChartWithUpdateColors(
+    chart = new Chart(
       //oxlint-disable-next-line no-non-null-assertion
       canvasEl()!.native,
       {
         type: props.type,
         data: props.data,
-        options: props.options,
+        //@ts-expect-error it's too difficult to figure out these types, but this works
+        options: addColorsToOptions(props.options, getTheme),
       },
     );
 
@@ -50,21 +52,41 @@ export function ChartJs<T extends ChartType, TData = DefaultDataPoint<T>>(
     chart.config.type = props.type;
     chart.data = props.data;
     if (props.options) {
-      chart.options = props.options;
+      chart.options = addColorsToOptions(props.options, getTheme);
     }
     chart.update();
-    void chart.updateColors(getTheme());
   });
 
-  createDebouncedEffectOn(
-    125,
-    getTheme,
-    (theme) => void chart?.updateColors(theme),
-  );
-
   onCleanup(() => {
     chart?.destroy();
   });
 
   return <canvas class="chartCanvas" ref={canvasRef}></canvas>;
 }
+
+function addColorsToOptions<TType extends ChartType = ChartType>(
+  options: ChartOptions<TType>,
+  theme: () => Theme,
+): ChartOptions<TType> {
+  //axis colors
+  const chartScaleOptions = options as ScaleChartOptions<TType>;
+  Object.keys(chartScaleOptions.scales).forEach((scaleID) => {
+    const axis = chartScaleOptions.scales[scaleID] as CartesianScaleOptions;
+    axis.ticks = {
+      ...axis.ticks,
+      color: theme().sub,
+    };
+    axis.title = {
+      ...axis.title,
+      color: theme().sub,
+    };
+    axis.grid = {
+      ...axis.grid,
+      color: theme().subAlt,
+      tickColor: theme().subAlt,
+      borderColor: theme().subAlt,
+    };
+  });
+
+  return options;
+}
diff --git a/frontend/src/ts/components/pages/AboutPage.tsx b/frontend/src/ts/components/pages/AboutPage.tsx
index 64d77fe1d9bf..301277642caf 100644
--- a/frontend/src/ts/components/pages/AboutPage.tsx
+++ b/frontend/src/ts/components/pages/AboutPage.tsx
@@ -10,6 +10,7 @@ import {
 } from "../../queries/public";
 import { getConfig } from "../../signals/config";
 import { getActivePage } from "../../signals/core";
+import { getTheme } from "../../signals/theme";
 import { showModal } from "../../stores/modals";
 import { qsr } from "../../utils/dom";
 import AsyncContent from "../common/AsyncContent";
@@ -100,6 +101,8 @@ export function AboutPage(): JSXElement {
                     yAxisID: "count",
                     label: "Users",
                     data: data?.data ?? [],
+                    backgroundColor: getTheme().main,
+                    borderColor: getTheme().main,
                   },
                 ],
               }}
diff --git a/frontend/src/ts/components/pages/account/Charts.tsx b/frontend/src/ts/components/pages/account/Charts.tsx
index 2d1714960e7b..75c1f4b7d67d 100644
--- a/frontend/src/ts/components/pages/account/Charts.tsx
+++ b/frontend/src/ts/components/pages/account/Charts.tsx
@@ -1,34 +1,25 @@
-import { AccountChart } from "@monkeytype/schemas/configs";
-import { Mode } from "@monkeytype/schemas/shared";
 import { ResultFilters, ResultFiltersKeys } from "@monkeytype/schemas/users";
 import { useLiveQuery } from "@tanstack/solid-db";
-import { format as dateFormat } from "date-fns/format";
-import { createMemo, JSXElement, Show } from "solid-js";
+import { createMemo, JSXElement } from "solid-js";
 
 import {
   buildResultsQuery,
   ResultsQueryState,
 } from "../../../collections/results";
-import Config, { setConfig } from "../../../config";
-import { SnapshotResult } from "../../../constants/default-snapshot";
 import { getSnapshot } from "../../../db";
 import { getConfig } from "../../../signals/config";
 import { FaSolidIcon } from "../../../types/font-awesome";
 import { Formatting } from "../../../utils/format";
-import { findLineByLeastSquares } from "../../../utils/numbers";
 import {
   capitalizeFirstLetter,
   replaceUnderscoresWithSpaces,
 } from "../../../utils/strings";
-import {
-  get as getTypingSpeedUnit,
-  TypingSpeedUnitSettings,
-} from "../../../utils/typing-speed-units";
+import { get as getTypingSpeedUnit } from "../../../utils/typing-speed-units";
 import AsyncContent from "../../common/AsyncContent";
-import { Button } from "../../common/Button";
-import { ChartJs } from "../../common/ChartJs";
 import { Fa } from "../../common/Fa";
 
+import { HistoryChart } from "./HistoryChart";
+
 export function Charts(props: {
   filters: ResultFilters;
   queryState: ResultsQueryState | undefined;
@@ -127,334 +118,3 @@ function isAllSet(
 ): boolean {
   return Object.values(filter).every((value) => value);
 }
-
-function HistoryChart(props: {
-  results: SnapshotResult<Mode>[];
-  beginAtZero: boolean;
-  typingSpeedUnit: TypingSpeedUnitSettings;
-  format: Formatting;
-}): JSXElement {
-  const formatAccuracy = (accuracy: number): string =>
-    props.format.accuracy(accuracy, { showDecimalPlaces: true });
-  const formatSpeed = (wpm: number): string =>
-    props.format.typingSpeed(wpm, { showDecimalPlaces: true });
-  const wpm = createMemo(() =>
-    props.results.map((it) => props.typingSpeedUnit.fromWpm(it.wpm)),
-  );
-  const acc = createMemo(() => props.results.map((it) => it.acc));
-
-  const toggleAccountChart = (pos: number): (() => void) => {
-    return () => {
-      const newValue = [...Config.accountChart] as AccountChart;
-      newValue[pos] = newValue[pos] === "on" ? "off" : "on";
-      setConfig("accountChart", newValue);
-    };
-  };
-
-  return (
-    <>
-      <div style={{ height: "400px" }}>
-        <ChartJs
-          type="line"
-          data={{
-            labels: props.results.map((_, i) => i),
-            datasets: [
-              {
-                yAxisID: "wpm",
-                data: wpm(),
-                fill: false,
-                borderWidth: 0,
-                order: 3,
-                hidden: getConfig.accountChart[0] === "off",
-              },
-              {
-                yAxisID: "wpm",
-                data: pb(wpm()),
-                fill: false,
-                stepped: true,
-                pointRadius: 0,
-                pointHoverRadius: 0,
-                order: 4,
-                hidden: getConfig.accountChart[0] === "off",
-              },
-              {
-                yAxisID: "acc",
-                fill: false,
-                data: acc(),
-                pointStyle: "triangle",
-                borderWidth: 0,
-                pointRadius: 3.5,
-                order: 3,
-                hidden: getConfig.accountChart[1] === "off",
-              },
-              {
-                yAxisID: "wpm",
-                data: movingAverage(wpm(), 10),
-                fill: false,
-                pointRadius: 0,
-                pointHoverRadius: 0,
-                order: 2,
-                hidden:
-                  getConfig.accountChart[0] === "off" ||
-                  getConfig.accountChart[2] === "off",
-              },
-              {
-                yAxisID: "acc",
-                data: movingAverage(acc(), 10),
-                fill: false,
-                pointRadius: 0,
-                pointHoverRadius: 0,
-                order: 2,
-                hidden:
-                  getConfig.accountChart[1] === "off" ||
-                  getConfig.accountChart[2] === "off",
-              },
-              {
-                yAxisID: "wpm",
-                data: movingAverage(wpm(), 100),
-                fill: false,
-                pointRadius: 0,
-                pointHoverRadius: 0,
-                order: 1,
-                hidden:
-                  getConfig.accountChart[0] === "off" ||
-                  getConfig.accountChart[3] === "off",
-              },
-              {
-                yAxisID: "acc",
-                data: movingAverage(acc(), 100),
-                fill: false,
-                pointRadius: 0,
-                pointHoverRadius: 0,
-                order: 1,
-                hidden:
-                  getConfig.accountChart[1] === "off" ||
-                  getConfig.accountChart[3] === "off",
-              },
-            ],
-          }}
-          options={{
-            // responsive: true,
-            maintainAspectRatio: false,
-            hover: {
-              mode: "nearest",
-              intersect: false,
-            },
-            scales: {
-              x: {
-                axis: "x",
-                type: "linear",
-                reverse: true,
-                min: 0,
-                max: wpm().length - 1,
-                display: false,
-                grid: {
-                  display: false,
-                },
-              },
-              wpm: {
-                axis: "y",
-                type: "linear",
-                beginAtZero: props.beginAtZero,
-                ticks: {
-                  stepSize: props.typingSpeedUnit.historyStepSize,
-                },
-                display: true,
-                title: {
-                  display: true,
-                  text: props.typingSpeedUnit.fullUnitString,
-                },
-                position: "right",
-              },
-              acc: {
-                axis: "y",
-                beginAtZero: props.beginAtZero,
-                min:
-                  Config.accountChart[0] === "on"
-                    ? 0
-                    : Math.floor(Math.min(...acc()) / 5) * 5,
-                max: 100,
-                reverse: true,
-                ticks: {
-                  stepSize: 10,
-                },
-                display: true,
-                title: {
-                  display: true,
-                  text: "Accuracy",
-                },
-                grid: {
-                  display: false,
-                },
-                position: "left",
-              },
-            },
-
-            plugins: {
-              annotation: {
-                annotations: [],
-              },
-              tooltip: {
-                animation: { duration: 250 },
-                // Disable the on-canvas tooltip
-                enabled: true,
-
-                intersect: false,
-                external: function (ctx): void {
-                  if (ctx === undefined) return;
-                  ctx.tooltip.options.displayColors = false;
-                },
-                filter: function (tooltipItem): boolean {
-                  return (
-                    tooltipItem.datasetIndex !== 1 &&
-                    tooltipItem.datasetIndex !== 3 &&
-                    tooltipItem.datasetIndex !== 4 &&
-                    tooltipItem.datasetIndex !== 5 &&
-                    tooltipItem.datasetIndex !== 6
-                  );
-                },
-                callbacks: {
-                  title: function (): string {
-                    return "";
-                  },
-
-                  beforeLabel: function (tooltipItem): string {
-                    const result = props.results[tooltipItem.dataIndex];
-                    if (result === undefined) return "unknown";
-
-                    if (tooltipItem.datasetIndex !== 0) {
-                      return `error rate: ${formatAccuracy(100 - result.acc)}\nacc: ${formatAccuracy(result.acc)}`;
-                    }
-
-                    let label =
-                      `${getConfig.typingSpeedUnit}: ${formatSpeed(result.wpm)}` +
-                      "\n" +
-                      `raw: ${formatSpeed(result.rawWpm)}` +
-                      "\n" +
-                      `acc: ${formatAccuracy(result.acc)}` +
-                      "\n\n" +
-                      `mode: ${result.mode} `;
-
-                    if (result.mode === "time") {
-                      label += result.mode2;
-                    } else if (result.mode === "words") {
-                      label += result.mode2;
-                    }
-
-                    let diff = result.difficulty ?? "normal";
-                    label += `\ndifficulty: ${diff}`;
-
-                    label +=
-                      "\n" +
-                      `punctuation: ${result.punctuation}` +
-                      "\n" +
-                      `language: ${result.language}` +
-                      `${result.isPb ? "\n\nnew personal best" : ""}` +
-                      "\n\n" +
-                      `date: ${dateFormat(
-                        new Date(result.timestamp),
-                        "dd MMM yyyy HH:mm",
-                      )}`;
-
-                    return label;
-                  },
-
-                  label: function (): string {
-                    return "";
-                  },
-                  afterLabel: function (_tooltip): string {
-                    //accountHistoryActiveIndex = tooltip.dataIndex;
-                    return "";
-                  },
-                },
-              },
-            },
-          }}
-        />
-      </div>
-      <Trend results={props.results} />
-      <div class="grid grid-cols-4 gap-2">
-        <Button
-          fa={{ icon: "fa-tachometer-alt", fixedWidth: true }}
-          text="Speed"
-          onClick={toggleAccountChart(0)}
-          active={getConfig.accountChart[0] === "on"}
-        />
-        <Button
-          fa={{ icon: "fa-bullseye", fixedWidth: true }}
-          text="Accuracy"
-          onClick={toggleAccountChart(1)}
-          active={getConfig.accountChart[1] === "on"}
-        />
-        <Button
-          fa={{ icon: "fa-chart-line", fixedWidth: true }}
-          text="Avg of 10"
-          onClick={toggleAccountChart(2)}
-          active={getConfig.accountChart[2] === "on"}
-        />
-        <Button
-          fa={{ icon: "fa-chart-line", fixedWidth: true }}
-          text="Avg of 100"
-          onClick={toggleAccountChart(3)}
-          active={getConfig.accountChart[3] === "on"}
-        />
-      </div>
-    </>
-  );
-}
-
-function Trend(props: { results: SnapshotResult<Mode>[] }): JSXElement {
-  const format = createMemo(() => new Formatting(getConfig));
-
-  const trend = createMemo(() => {
-    const line = findLineByLeastSquares(
-      props.results.map((it) => it.wpm).reverse(),
-    );
-    if (line === null) return undefined;
-
-    const totalSecondsFiltered = props.results
-      .map((it) => it.timeTyping)
-      .reduce((acc, it) => acc + it, 0);
-
-    const wpmChange = line[1][1] - line[0][1];
-    const wpmChangePerHour = wpmChange * (3600 / totalSecondsFiltered);
-    const plus = wpmChangePerHour > 0 ? "+" : "";
-
-    return `Speed change per hour spent typing: ${plus}${format().typingSpeed(wpmChangePerHour, { showDecimalPlaces: true })} ${format().typingSpeedUnit}`;
-  });
-
-  return (
-    <Show when={trend() !== undefined}>
-      <div class="w-full text-center">{trend()}</div>
-    </Show>
-  );
-}
-
-function movingAverage(data: number[], windowSize: number): number[] {
-  return data.map((_, i, array) => {
-    const subset = array.slice(i, i + windowSize);
-
-    if (subset.length === 0) return 0;
-
-    const sum = subset.reduce((acc, value) => acc + value, 0);
-
-    return sum / subset.length;
-  });
-}
-
-function pb(data: number[]): number[] {
-  const result = new Array<number>(data.length);
-  let currentMax: number = -Infinity;
-
-  for (let i = data.length - 1; i >= 0; i--) {
-    const value = Number(data[i]);
-
-    if (Number.isFinite(value)) {
-      currentMax = Math.max(currentMax, value);
-    }
-
-    result[i] = currentMax;
-  }
-
-  return result;
-}
diff --git a/frontend/src/ts/components/pages/account/HistoryChart.tsx b/frontend/src/ts/components/pages/account/HistoryChart.tsx
new file mode 100644
index 000000000000..a21bf4b86656
--- /dev/null
+++ b/frontend/src/ts/components/pages/account/HistoryChart.tsx
@@ -0,0 +1,390 @@
+import { AccountChart } from "@monkeytype/schemas/configs";
+import { Mode } from "@monkeytype/schemas/shared";
+import { format as dateFormat } from "date-fns/format";
+import { createMemo, JSXElement, Show } from "solid-js";
+
+import Config, { setConfig } from "../../../config";
+import { SnapshotResult } from "../../../constants/default-snapshot";
+import { getConfig } from "../../../signals/config";
+import { getTheme } from "../../../signals/theme";
+import { blendTwoHexColors } from "../../../utils/colors";
+import { Formatting } from "../../../utils/format";
+import { findLineByLeastSquares } from "../../../utils/numbers";
+import { TypingSpeedUnitSettings } from "../../../utils/typing-speed-units";
+import { Button } from "../../common/Button";
+import { ChartJs } from "../../common/ChartJs";
+
+export function HistoryChart(props: {
+  results: SnapshotResult<Mode>[];
+  beginAtZero: boolean;
+  typingSpeedUnit: TypingSpeedUnitSettings;
+  format: Formatting;
+}): JSXElement {
+  const formatAccuracy = (accuracy: number): string =>
+    props.format.accuracy(accuracy, { showDecimalPlaces: true });
+  const formatSpeed = (wpm: number): string =>
+    props.format.typingSpeed(wpm, { showDecimalPlaces: true });
+  const wpm = createMemo(() =>
+    props.results.map((it) => props.typingSpeedUnit.fromWpm(it.wpm)),
+  );
+  const acc = createMemo(() => props.results.map((it) => it.acc));
+
+  const toggleAccountChart = (pos: number): (() => void) => {
+    return () => {
+      const newValue = [...Config.accountChart] as AccountChart;
+      newValue[pos] = newValue[pos] === "on" ? "off" : "on";
+      setConfig("accountChart", newValue);
+    };
+  };
+
+  const colorIndex = (...val: boolean[]): number =>
+    val.filter((it) => it).length;
+
+  const datasetOptions = createMemo(() => {
+    const wpmColors = [
+      getTheme().main,
+      blendTwoHexColors(getTheme().bg, getTheme().main, 0.4),
+      blendTwoHexColors(getTheme().bg, getTheme().main, 0.2),
+    ];
+    const accColors = [
+      getTheme().sub,
+      blendTwoHexColors(getTheme().bg, getTheme().sub, 0.4),
+      blendTwoHexColors(getTheme().bg, getTheme().sub, 0.2),
+    ];
+
+    const isSpeed = getConfig.accountChart[0] === "on";
+    const isAcc = getConfig.accountChart[1] === "on";
+    const isAvg10 = Config.accountChart[2] === "on";
+    const isAvg100 = Config.accountChart[3] === "on";
+
+    return {
+      wpm: {
+        yAxisID: "wpm",
+        fill: false,
+        borderWidth: 0,
+        hidden: !isSpeed,
+        pointBackgroundColor: wpmColors[colorIndex(isAvg10, isAvg100)],
+        order: 3,
+      },
+      wpmAvg10: {
+        yAxisID: "wpm",
+        fill: false,
+        pointRadius: 0,
+        pointHoverRadius: 0,
+        hidden: !isSpeed || !isAvg10,
+        borderColor: wpmColors[colorIndex(isAvg10, isAvg100) - 1],
+        order: 2,
+      },
+      wpmAvg100: {
+        yAxisID: "wpm",
+        fill: false,
+        pointRadius: 0,
+        pointHoverRadius: 0,
+        hidden: !isSpeed || !isAvg100,
+        borderColor: wpmColors[0],
+        order: 1,
+      },
+      acc: {
+        yAxisID: "acc",
+        fill: false,
+        pointStyle: "triangle",
+        borderWidth: 0,
+        pointRadius: 3.5,
+        hidden: !isAcc,
+        pointBackgroundColor: accColors[colorIndex(isAvg10, isAvg100)],
+        order: 3,
+      },
+      accAvg10: {
+        yAxisID: "acc",
+        fill: false,
+        pointRadius: 0,
+        pointHoverRadius: 0,
+        hidden: !isAcc || !isAvg10,
+        borderColor: accColors[colorIndex(isAvg10, isAvg100) - 1],
+        order: 2,
+      },
+      accAvg100: {
+        yAxisID: "acc",
+        fill: false,
+        pointRadius: 0,
+        pointHoverRadius: 0,
+        hidden: !isAcc || !isAvg100,
+        borderColor: accColors[0],
+        order: 1,
+      },
+      pb: {
+        yAxisID: "wpm",
+        fill: false,
+        stepped: true,
+        pointRadius: 0,
+        pointHoverRadius: 0,
+        order: 4,
+        hidden: !isSpeed,
+        borderColor: blendTwoHexColors(getTheme().bg, getTheme().text, 0.2),
+      },
+    };
+  });
+
+  return (
+    <>
+      <div style={{ height: "400px" }}>
+        <ChartJs
+          type="line"
+          data={{
+            labels: props.results.map((_, i) => i),
+            datasets: [
+              {
+                data: wpm(),
+                ...datasetOptions().wpm,
+              },
+              {
+                data: pb(wpm()),
+                ...datasetOptions().pb,
+              },
+              {
+                data: acc(),
+                ...datasetOptions().acc,
+              },
+              {
+                data: movingAverage(wpm(), 10),
+                ...datasetOptions().wpmAvg10,
+              },
+              {
+                data: movingAverage(acc(), 10),
+                ...datasetOptions().accAvg10,
+              },
+              {
+                data: movingAverage(wpm(), 100),
+                ...datasetOptions().wpmAvg100,
+              },
+              {
+                data: movingAverage(acc(), 100),
+                ...datasetOptions().accAvg100,
+              },
+            ],
+          }}
+          options={{
+            // responsive: true,
+            maintainAspectRatio: false,
+            hover: {
+              mode: "nearest",
+              intersect: false,
+            },
+            scales: {
+              x: {
+                axis: "x",
+                type: "linear",
+                reverse: true,
+                min: 0,
+                max: wpm().length - 1,
+                display: false,
+                grid: {
+                  display: false,
+                },
+              },
+              wpm: {
+                axis: "y",
+                type: "linear",
+                beginAtZero: props.beginAtZero,
+                ticks: {
+                  stepSize: props.typingSpeedUnit.historyStepSize,
+                },
+                display: true,
+                title: {
+                  display: true,
+                  text: props.typingSpeedUnit.fullUnitString,
+                },
+                position: "right",
+              },
+              acc: {
+                axis: "y",
+                beginAtZero: props.beginAtZero,
+                min:
+                  Config.accountChart[0] === "on"
+                    ? 0
+                    : Math.floor(Math.min(...acc()) / 5) * 5,
+                max: 100,
+                reverse: true,
+                ticks: {
+                  stepSize: 10,
+                },
+                display: true,
+                title: {
+                  display: true,
+                  text: "Accuracy",
+                },
+                grid: {
+                  display: false,
+                },
+                position: "left",
+              },
+            },
+
+            plugins: {
+              annotation: {
+                annotations: [],
+              },
+              tooltip: {
+                animation: { duration: 250 },
+                // Disable the on-canvas tooltip
+                enabled: true,
+
+                intersect: false,
+                external: function (ctx): void {
+                  if (ctx === undefined) return;
+                  ctx.tooltip.options.displayColors = false;
+                },
+                filter: function (tooltipItem): boolean {
+                  return (
+                    tooltipItem.datasetIndex !== 1 &&
+                    tooltipItem.datasetIndex !== 3 &&
+                    tooltipItem.datasetIndex !== 4 &&
+                    tooltipItem.datasetIndex !== 5 &&
+                    tooltipItem.datasetIndex !== 6
+                  );
+                },
+                callbacks: {
+                  title: function (): string {
+                    return "";
+                  },
+
+                  beforeLabel: function (tooltipItem): string {
+                    const result = props.results[tooltipItem.dataIndex];
+                    if (result === undefined) return "unknown";
+
+                    if (tooltipItem.datasetIndex !== 0) {
+                      return `error rate: ${formatAccuracy(100 - result.acc)}\nacc: ${formatAccuracy(result.acc)}`;
+                    }
+
+                    let label =
+                      `${getConfig.typingSpeedUnit}: ${formatSpeed(result.wpm)}` +
+                      "\n" +
+                      `raw: ${formatSpeed(result.rawWpm)}` +
+                      "\n" +
+                      `acc: ${formatAccuracy(result.acc)}` +
+                      "\n\n" +
+                      `mode: ${result.mode} `;
+
+                    if (result.mode === "time") {
+                      label += result.mode2;
+                    } else if (result.mode === "words") {
+                      label += result.mode2;
+                    }
+
+                    let diff = result.difficulty ?? "normal";
+                    label += `\ndifficulty: ${diff}`;
+
+                    label +=
+                      "\n" +
+                      `punctuation: ${result.punctuation}` +
+                      "\n" +
+                      `language: ${result.language}` +
+                      `${result.isPb ? "\n\nnew personal best" : ""}` +
+                      "\n\n" +
+                      `date: ${dateFormat(
+                        new Date(result.timestamp),
+                        "dd MMM yyyy HH:mm",
+                      )}`;
+
+                    return label;
+                  },
+
+                  label: function (): string {
+                    return "";
+                  },
+                  afterLabel: function (_tooltip): string {
+                    //accountHistoryActiveIndex = tooltip.dataIndex;
+                    return "";
+                  },
+                },
+              },
+            },
+          }}
+        />
+      </div>
+      <Trend results={props.results} />
+      <div class="grid grid-cols-4 gap-2">
+        <Button
+          fa={{ icon: "fa-tachometer-alt", fixedWidth: true }}
+          text="Speed"
+          onClick={toggleAccountChart(0)}
+          active={getConfig.accountChart[0] === "on"}
+        />
+        <Button
+          fa={{ icon: "fa-bullseye", fixedWidth: true }}
+          text="Accuracy"
+          onClick={toggleAccountChart(1)}
+          active={getConfig.accountChart[1] === "on"}
+        />
+        <Button
+          fa={{ icon: "fa-chart-line", fixedWidth: true }}
+          text="Avg of 10"
+          onClick={toggleAccountChart(2)}
+          active={getConfig.accountChart[2] === "on"}
+        />
+        <Button
+          fa={{ icon: "fa-chart-line", fixedWidth: true }}
+          text="Avg of 100"
+          onClick={toggleAccountChart(3)}
+          active={getConfig.accountChart[3] === "on"}
+        />
+      </div>
+    </>
+  );
+}
+
+function Trend(props: { results: SnapshotResult<Mode>[] }): JSXElement {
+  const format = createMemo(() => new Formatting(getConfig));
+
+  const trend = createMemo(() => {
+    const line = findLineByLeastSquares(
+      props.results.map((it) => it.wpm).reverse(),
+    );
+    if (line === null) return undefined;
+
+    const totalSecondsFiltered = props.results
+      .map((it) => it.timeTyping)
+      .reduce((acc, it) => acc + it, 0);
+
+    const wpmChange = line[1][1] - line[0][1];
+    const wpmChangePerHour = wpmChange * (3600 / totalSecondsFiltered);
+    const plus = wpmChangePerHour > 0 ? "+" : "";
+
+    return `Speed change per hour spent typing: ${plus}${format().typingSpeed(wpmChangePerHour, { showDecimalPlaces: true })} ${format().typingSpeedUnit}`;
+  });
+
+  return (
+    <Show when={trend() !== undefined}>
+      <div class="w-full text-center">{trend()}</div>
+    </Show>
+  );
+}
+
+function movingAverage(data: number[], windowSize: number): number[] {
+  return data.map((_, i, array) => {
+    const subset = array.slice(i, i + windowSize);
+
+    if (subset.length === 0) return 0;
+
+    const sum = subset.reduce((acc, value) => acc + value, 0);
+
+    return sum / subset.length;
+  });
+}
+
+function pb(data: number[]): number[] {
+  const result = new Array<number>(data.length);
+  let currentMax: number = -Infinity;
+
+  for (let i = data.length - 1; i >= 0; i--) {
+    const value = Number(data[i]);
+
+    if (Number.isFinite(value)) {
+      currentMax = Math.max(currentMax, value);
+    }
+
+    result[i] = currentMax;
+  }
+
+  return result;
+}
diff --git a/frontend/src/ts/components/pages/account/MiniResultChart.tsx b/frontend/src/ts/components/pages/account/MiniResultChart.tsx
index 37817860d9e8..c12e4cb6e0a7 100644
--- a/frontend/src/ts/components/pages/account/MiniResultChart.tsx
+++ b/frontend/src/ts/components/pages/account/MiniResultChart.tsx
@@ -45,6 +45,9 @@ export function MiniResultChart(props: {
                       yAxisID: "wpm",
                       order: 2,
                       pointRadius: 1,
+                      fill: false,
+                      borderColor: getTheme().main,
+                      backgroundColor: getTheme().main,
                     },
                     {
                       label: "burst",
@@ -55,11 +58,15 @@ export function MiniResultChart(props: {
                       yAxisID: "wpm",
                       order: 3,
                       pointRadius: 1,
+                      fill: false,
+                      borderColor: getTheme().sub,
+                      backgroundColor: getTheme().sub,
                     },
                     {
                       label: "errors",
                       data: data.err,
-                      pointBackgroundColor: getTheme().error,
+                      pointBorderColor: getTheme().error,
+                      backgroundColor: getTheme().error,
                       borderWidth: 2,
                       order: 1,
                       yAxisID: "error",

From 9fe9fbe390b37e39f730215880ce158a116a7fd2 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sat, 21 Feb 2026 17:17:23 +0100
Subject: [PATCH 46/52] add histogramChart

---
 .../ts/components/pages/account/Charts.tsx    |   6 +
 .../pages/account/HistogramChart.tsx          | 107 ++++++++++++++++++
 2 files changed, 113 insertions(+)
 create mode 100644 frontend/src/ts/components/pages/account/HistogramChart.tsx

diff --git a/frontend/src/ts/components/pages/account/Charts.tsx b/frontend/src/ts/components/pages/account/Charts.tsx
index 75c1f4b7d67d..5496d2ff373c 100644
--- a/frontend/src/ts/components/pages/account/Charts.tsx
+++ b/frontend/src/ts/components/pages/account/Charts.tsx
@@ -18,6 +18,7 @@ import { get as getTypingSpeedUnit } from "../../../utils/typing-speed-units";
 import AsyncContent from "../../common/AsyncContent";
 import { Fa } from "../../common/Fa";
 
+import { HistogramChart } from "./HistogramChart";
 import { HistoryChart } from "./HistoryChart";
 
 export function Charts(props: {
@@ -48,6 +49,11 @@ export function Charts(props: {
             typingSpeedUnit={typingSpeedUnit()}
             format={format()}
           />
+
+          <HistogramChart
+            results={results}
+            typingSpeedUnit={typingSpeedUnit()}
+          />
         </>
       )}
     </AsyncContent>
diff --git a/frontend/src/ts/components/pages/account/HistogramChart.tsx b/frontend/src/ts/components/pages/account/HistogramChart.tsx
new file mode 100644
index 000000000000..119ef80fb82e
--- /dev/null
+++ b/frontend/src/ts/components/pages/account/HistogramChart.tsx
@@ -0,0 +1,107 @@
+import { Mode } from "@monkeytype/schemas/shared";
+import { createMemo, JSXElement } from "solid-js";
+
+import { SnapshotResult } from "../../../constants/default-snapshot";
+import { getTheme } from "../../../signals/theme";
+import { TypingSpeedUnitSettings } from "../../../utils/typing-speed-units";
+import { ChartJs } from "../../common/ChartJs";
+
+export function HistogramChart(props: {
+  results: SnapshotResult<Mode>[];
+  typingSpeedUnit: TypingSpeedUnitSettings;
+}): JSXElement {
+  const buckets = createMemo(() =>
+    groupIntoBuckets(
+      props.results.map((it) => props.typingSpeedUnit.fromWpm(it.wpm)),
+      props.typingSpeedUnit.histogramDataBucketSize,
+    ),
+  );
+
+  return (
+    <div style={{ height: "200px" }}>
+      <ChartJs
+        type="bar"
+        data={{
+          datasets: [
+            {
+              label: "Tests",
+              data: buckets(),
+              backgroundColor: getTheme().main,
+              borderColor: getTheme().main,
+            },
+          ],
+        }}
+        options={{
+          responsive: true,
+          maintainAspectRatio: false,
+          hover: {
+            mode: "nearest",
+            intersect: false,
+          },
+          scales: {
+            x: {
+              axis: "x",
+              bounds: "ticks",
+              display: true,
+              title: {
+                display: false,
+                text: "Bucket",
+              },
+            },
+            count: {
+              axis: "y",
+              beginAtZero: true,
+              ticks: {
+                autoSkip: true,
+                autoSkipPadding: 20,
+                stepSize: 10,
+              },
+              display: true,
+              title: {
+                display: true,
+                text: "Tests",
+              },
+            },
+          },
+          plugins: {
+            annotation: {
+              annotations: [],
+            },
+            tooltip: {
+              animation: { duration: 250 },
+              intersect: false,
+              mode: "index",
+            },
+          },
+        }}
+      />
+    </div>
+  );
+}
+
+function groupIntoBuckets(
+  arr: number[],
+  bucketSize: number,
+): { x: string; y: number }[] {
+  const buckets: Record<string, number> = {};
+
+  for (const item of arr) {
+    const bucketStart = Math.floor(item / bucketSize) * bucketSize;
+    const bucketEnd = bucketStart + bucketSize - 1;
+    const label = `${bucketStart}-${bucketEnd}`;
+
+    buckets[label] = (buckets[label] ?? 0) + 1;
+  }
+
+  console.log("### buckets", buckets);
+
+  const result = Object.entries(buckets)
+    .sort(([a], [b]) => {
+      const startA = Number(a.split("-")[0]);
+      const startB = Number(b.split("-")[0]);
+      return startA - startB;
+    })
+    .map(([x, y]) => ({ x, y }));
+  console.log("### results", result);
+  return result;
+}

From 9cb313e8a6c58c5e7aff0ad1e3fd01acfd160537 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sat, 21 Feb 2026 19:22:34 +0100
Subject: [PATCH 47/52] add daily activity chart

---
 frontend/package.json                         |   2 +-
 frontend/src/ts/collections/results.ts        |  46 +++--
 frontend/src/ts/components/common/ChartJs.tsx |   2 +
 .../components/pages/account/AccountPage.tsx  |   2 +-
 .../ts/components/pages/account/Charts.tsx    |  16 +-
 .../pages/account/DailyActivityChart.tsx      | 178 ++++++++++++++++++
 .../pages/account/HistogramChart.tsx          |   6 +-
 frontend/src/ts/constants/default-snapshot.ts |   1 +
 pnpm-lock.yaml                                |  10 +-
 9 files changed, 233 insertions(+), 30 deletions(-)
 create mode 100644 frontend/src/ts/components/pages/account/DailyActivityChart.tsx

diff --git a/frontend/package.json b/frontend/package.json
index 605e9d65fade..1870184d66a4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -42,7 +42,7 @@
     "chart.js": "3.7.1",
     "chartjs-adapter-date-fns": "3.0.0",
     "chartjs-plugin-annotation": "2.2.1",
-    "chartjs-plugin-trendline": "1.0.2",
+    "chartjs-plugin-trendline": "3.2.0",
     "clsx": "2.1.1",
     "color-blend": "4.0.0",
     "damerau-levenshtein": "1.0.8",
diff --git a/frontend/src/ts/collections/results.ts b/frontend/src/ts/collections/results.ts
index 262fa4f4fb33..065b618d427c 100644
--- a/frontend/src/ts/collections/results.ts
+++ b/frontend/src/ts/collections/results.ts
@@ -9,20 +9,20 @@ import {
   eq,
   gte,
   inArray,
+  length,
   max,
   not,
   or,
   Query,
   sum,
   useLiveQuery,
-  length,
 } from "@tanstack/solid-db";
+import { queryOptions } from "@tanstack/solid-query";
 import { Accessor } from "solid-js";
 import Ape from "../ape";
 import { SnapshotResult } from "../constants/default-snapshot";
 import { queryClient } from "../queries";
 import { baseKey } from "../queries/utils/keys";
-import { queryOptions } from "@tanstack/solid-query";
 
 export type ResultsQueryState = {
   difficulty: SnapshotResult<Mode>["difficulty"][];
@@ -57,6 +57,7 @@ export type ResultStats = {
   maxConsistency: number;
   avgConsistency: number;
   timeTyping: number;
+  dayTimestamp?: number;
 };
 
 /**
@@ -68,23 +69,33 @@ export type ResultStats = {
 // oxlint-disable-next-line typescript/explicit-function-return-type
 export function useResultStatsLiveQuery(
   queryState: Accessor<ResultsQueryState | undefined>,
-  options?: { lastTen?: true },
+  options?: { lastTen?: true } | { groupByDay?: true },
 ) {
   return useLiveQuery((q) => {
     const state = queryState();
     if (state === undefined) return undefined;
 
-    return (
-      options?.lastTen
-        ? //for lastTen we need a sub-query to apply the sort+limit first and then run the aggregations
-          q.from({
-            r: q
-              .from({ r: buildResultsQuery(state) })
-              .orderBy(({ r }) => r.timestamp, "desc")
-              .limit(10),
-          })
-        : q.from({ r: buildResultsQuery(state) })
-    ).select(({ r }) => ({
+    const isLastTen =
+      options !== undefined && "lastTen" in options && options.lastTen;
+    const isGroupByDay =
+      options !== undefined && "groupByDay" in options && options.groupByDay;
+
+    let query = isLastTen
+      ? //for lastTen we need a sub-query to apply the sort+limit first and then run the aggregations
+        q.from({
+          r: q
+            .from({ r: buildResultsQuery(state) })
+            .orderBy(({ r }) => r.timestamp, "desc")
+            .limit(10),
+        })
+      : q.from({ r: buildResultsQuery(state) });
+
+    if (isGroupByDay) {
+      query = query.groupBy(({ r }) => r.dayTimestamp);
+    }
+
+    return query.select(({ r }) => ({
+      dayTimeamp: isGroupByDay ? r.dayTimestamp : undefined,
       words: sum(r.words),
       completed: count(r._id),
       restarted: sum(r.restartCount),
@@ -131,6 +142,12 @@ export function useResultsLiveQuery(options: {
 function normalizeResult(
   result: ResultMinified | SnapshotResult<Mode>,
 ): SnapshotResult<Mode> {
+  const resultDate = new Date(result.timestamp);
+  resultDate.setSeconds(0);
+  resultDate.setMinutes(0);
+  resultDate.setHours(0);
+  resultDate.setMilliseconds(0);
+
   //@ts-expect-error without this somehow the collections is missing data
   result.id = result._id;
   //results strip default values, add them back
@@ -153,6 +170,7 @@ function normalizeResult(
     ...result,
     timeTyping: calcTimeTyping(result),
     words: Math.round((result.wpm / 60) * result.testDuration),
+    dayTimestamp: resultDate.getTime(),
   } as SnapshotResult<Mode>;
 }
 
diff --git a/frontend/src/ts/components/common/ChartJs.tsx b/frontend/src/ts/components/common/ChartJs.tsx
index 0a6a8231a953..3fb2bd5dba12 100644
--- a/frontend/src/ts/components/common/ChartJs.tsx
+++ b/frontend/src/ts/components/common/ChartJs.tsx
@@ -7,12 +7,14 @@ import {
   DefaultDataPoint,
   ScaleChartOptions,
 } from "chart.js";
+import chartTrendline from "chartjs-plugin-trendline";
 import { createEffect, JSXElement, onCleanup, onMount } from "solid-js";
 
 import { Theme } from "../../constants/themes";
 import { useRefWithUtils } from "../../hooks/useRefWithUtils";
 import { getTheme } from "../../signals/theme";
 
+Chart.register(chartTrendline);
 type ChartJSProps<
   T extends ChartType = ChartType,
   TData = DefaultDataPoint<T>,
diff --git a/frontend/src/ts/components/pages/account/AccountPage.tsx b/frontend/src/ts/components/pages/account/AccountPage.tsx
index 26324c390332..b75785a33998 100644
--- a/frontend/src/ts/components/pages/account/AccountPage.tsx
+++ b/frontend/src/ts/components/pages/account/AccountPage.tsx
@@ -56,7 +56,7 @@ export function AccountPage(): JSXElement {
         onResetFilter={() => setFilters(defaultResultFilters)}
       />
 
-      <Charts filters={filters} queryState={queryState()} />
+      <Charts filters={filters} queryState={queryState} />
       <TestStats queryState={queryState} />
 
       <AsyncContent collection={data}>
diff --git a/frontend/src/ts/components/pages/account/Charts.tsx b/frontend/src/ts/components/pages/account/Charts.tsx
index 5496d2ff373c..02770872fd0b 100644
--- a/frontend/src/ts/components/pages/account/Charts.tsx
+++ b/frontend/src/ts/components/pages/account/Charts.tsx
@@ -1,6 +1,6 @@
 import { ResultFilters, ResultFiltersKeys } from "@monkeytype/schemas/users";
 import { useLiveQuery } from "@tanstack/solid-db";
-import { createMemo, JSXElement } from "solid-js";
+import { Accessor, createMemo, JSXElement } from "solid-js";
 
 import {
   buildResultsQuery,
@@ -18,12 +18,13 @@ import { get as getTypingSpeedUnit } from "../../../utils/typing-speed-units";
 import AsyncContent from "../../common/AsyncContent";
 import { Fa } from "../../common/Fa";
 
+import { DailyActivityChart } from "./DailyActivityChart";
 import { HistogramChart } from "./HistogramChart";
 import { HistoryChart } from "./HistoryChart";
 
 export function Charts(props: {
   filters: ResultFilters;
-  queryState: ResultsQueryState | undefined;
+  queryState: Accessor<ResultsQueryState | undefined>;
 }): JSXElement {
   const beginAtZero = createMemo(() => getConfig.startGraphsAtZero);
   const typingSpeedUnit = createMemo(() =>
@@ -32,9 +33,9 @@ export function Charts(props: {
   const format = createMemo(() => new Formatting(getConfig));
 
   const resultsQuery = useLiveQuery((q) => {
-    if (props.queryState === undefined) return undefined;
+    if (props.queryState() === undefined) return undefined;
     return q
-      .from({ r: buildResultsQuery(props.queryState) })
+      .from({ r: buildResultsQuery(props.queryState() as ResultsQueryState) })
       .orderBy(({ r }) => r.timestamp, "desc");
   });
 
@@ -54,6 +55,13 @@ export function Charts(props: {
             results={results}
             typingSpeedUnit={typingSpeedUnit()}
           />
+
+          <DailyActivityChart
+            queryState={props.queryState}
+            beginAtZero={beginAtZero()}
+            typingSpeedUnit={typingSpeedUnit()}
+            format={format()}
+          />
         </>
       )}
     </AsyncContent>
diff --git a/frontend/src/ts/components/pages/account/DailyActivityChart.tsx b/frontend/src/ts/components/pages/account/DailyActivityChart.tsx
new file mode 100644
index 000000000000..948e6c5fade6
--- /dev/null
+++ b/frontend/src/ts/components/pages/account/DailyActivityChart.tsx
@@ -0,0 +1,178 @@
+import { roundTo2 } from "@monkeytype/util/numbers";
+import { TooltipItem } from "chart.js";
+import { format as dateFormat } from "date-fns/format";
+import { Accessor, JSXElement } from "solid-js";
+
+import {
+  ResultsQueryState,
+  useResultStatsLiveQuery,
+} from "../../../collections/results";
+import { getTheme } from "../../../signals/theme";
+import { secondsToString } from "../../../utils/date-and-time";
+import { Formatting } from "../../../utils/format";
+import { TypingSpeedUnitSettings } from "../../../utils/typing-speed-units";
+import AsyncContent from "../../common/AsyncContent";
+import { ChartJs } from "../../common/ChartJs";
+
+export function DailyActivityChart(props: {
+  queryState: Accessor<ResultsQueryState | undefined>;
+  beginAtZero: boolean;
+  typingSpeedUnit: TypingSpeedUnitSettings;
+  format: Formatting;
+}): JSXElement {
+  const dataQuery = useResultStatsLiveQuery(props.queryState, {
+    groupByDay: true,
+  });
+
+  const formatSpeed = (wpm: number): string =>
+    props.format.typingSpeed(wpm, { showDecimalPlaces: true });
+
+  return (
+    <AsyncContent collection={dataQuery}>
+      {(data) => (
+        <div style={{ height: "200px" }}>
+          <ChartJs
+            type="bar"
+            data={{
+              labels: data.map((it) => it.dayTimeamp),
+              datasets: [
+                {
+                  yAxisID: "count",
+                  data: data.map((it) => Math.round(it.timeTyping / 60)),
+                  backgroundColor: getTheme().main,
+                  trendlineLinear: {
+                    style: getTheme().sub,
+                    lineStyle: "dotted",
+                    width: 2,
+                  },
+                  order: 3,
+                },
+                {
+                  yAxisID: "avgWpm",
+                  data: data.map((it) =>
+                    props.typingSpeedUnit.fromWpm(it.avgWpm),
+                  ),
+                  borderColor: getTheme().sub,
+                  type: "line",
+                  order: 2,
+                  tension: 0,
+                  fill: false,
+                },
+              ],
+            }}
+            options={{
+              responsive: true,
+              maintainAspectRatio: false,
+              hover: {
+                mode: "nearest",
+                intersect: false,
+              },
+              scales: {
+                x: {
+                  axis: "x",
+                  ticks: {
+                    autoSkip: true,
+                    autoSkipPadding: 20,
+                  },
+                  type: "time",
+                  time: {
+                    unit: "day",
+                    displayFormats: {
+                      day: "d MMM",
+                    },
+                  },
+                  bounds: "ticks",
+                  display: true,
+                  title: {
+                    display: false,
+                    text: "Date",
+                  },
+                  offset: true,
+                },
+                count: {
+                  axis: "y",
+                  beginAtZero: props.beginAtZero,
+                  ticks: {
+                    autoSkip: true,
+                    autoSkipPadding: 20,
+                    stepSize: 1,
+                  },
+                  display: true,
+                  title: {
+                    display: true,
+                    text: "Time typing (minutes)",
+                  },
+                },
+                avgWpm: {
+                  axis: "y",
+                  beginAtZero: props.beginAtZero,
+                  ticks: {
+                    autoSkip: true,
+                    autoSkipPadding: 20,
+                    stepSize: 10,
+                  },
+                  display: true,
+                  position: "right",
+                  title: {
+                    display: true,
+                    text:
+                      "Average " + props.format.typingSpeedUnit.toUpperCase(),
+                  },
+                  grid: {
+                    display: false,
+                  },
+                },
+              },
+              plugins: {
+                annotation: {
+                  annotations: [],
+                },
+                tooltip: {
+                  animation: { duration: 250 },
+                  intersect: false,
+                  mode: "index",
+                  filter: (tooltipItem): boolean => {
+                    return tooltipItem.datasetIndex === 0;
+                  },
+
+                  callbacks: {
+                    title: function (tooltipItem): string {
+                      const firstItem = tooltipItem[0] as TooltipItem<
+                        "bar" | "line"
+                      >;
+
+                      const item = data[firstItem.dataIndex];
+                      if (item === undefined) return "unknown";
+
+                      return dateFormat(
+                        new Date(item.dayTimeamp as number),
+                        "dd MMM yyy",
+                      );
+                    },
+                    beforeLabel: function (tooltipItem): string {
+                      const item = data[tooltipItem.dataIndex];
+                      if (item === undefined) return "unknown";
+
+                      return `
+Time Typing: ${secondsToString(Math.round(item.timeTyping), true, true)}
+Tests Completed: ${item.completed}
+Restarts per test: ${roundTo2(item.restarted / item.completed)}
+Highest  ${props.format.typingSpeedUnit.toUpperCase()}: ${formatSpeed(item.maxWpm)}
+Average ${props.format.typingSpeedUnit.toUpperCase()}: ${formatSpeed(item.avgWpm)}
+Average Accuracy: ${props.format.accuracy(item.avgAcc, { showDecimalPlaces: true })}
+Average Consistency: ${props.format.percentage(item.avgConsistency, { showDecimalPlaces: true })}
+                      `;
+                    },
+                    label: function (): string {
+                      return "";
+                    },
+                  },
+                },
+              },
+            }}
+          />
+        </div>
+      )}
+    </AsyncContent>
+  );
+}
diff --git a/frontend/src/ts/components/pages/account/HistogramChart.tsx b/frontend/src/ts/components/pages/account/HistogramChart.tsx
index 119ef80fb82e..7ee50c5a2533 100644
--- a/frontend/src/ts/components/pages/account/HistogramChart.tsx
+++ b/frontend/src/ts/components/pages/account/HistogramChart.tsx
@@ -93,15 +93,11 @@ function groupIntoBuckets(
     buckets[label] = (buckets[label] ?? 0) + 1;
   }
 
-  console.log("### buckets", buckets);
-
-  const result = Object.entries(buckets)
+  return Object.entries(buckets)
     .sort(([a], [b]) => {
       const startA = Number(a.split("-")[0]);
       const startB = Number(b.split("-")[0]);
       return startA - startB;
     })
     .map(([x, y]) => ({ x, y }));
-  console.log("### results", result);
-  return result;
 }
diff --git a/frontend/src/ts/constants/default-snapshot.ts b/frontend/src/ts/constants/default-snapshot.ts
index a96030646353..b39eddc7122d 100644
--- a/frontend/src/ts/constants/default-snapshot.ts
+++ b/frontend/src/ts/constants/default-snapshot.ts
@@ -53,6 +53,7 @@ export type SnapshotResult<M extends Mode> = Omit<
   //calculated values
   words: number;
   timeTyping: number;
+  dayTimestamp: number;
 };
 
 export type Snapshot = Omit<
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f8068880d177..5a6311938ec4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -319,8 +319,8 @@ importers:
         specifier: 2.2.1
         version: 2.2.1(chart.js@3.7.1)
       chartjs-plugin-trendline:
-        specifier: 1.0.2
-        version: 1.0.2
+        specifier: 3.2.0
+        version: 3.2.0
       clsx:
         specifier: 2.1.1
         version: 2.1.1
@@ -4479,8 +4479,8 @@ packages:
     peerDependencies:
       chart.js: '>=3.7.0'
 
-  chartjs-plugin-trendline@1.0.2:
-    resolution: {integrity: sha512-1yaWvaW3WvaikITgrc6JEyvWZWDN9Opjz65fCkgQr/dRdKuXcYzOMl45jylPiJyC9dWWL6HCYiL2HuwItjI8RQ==}
+  chartjs-plugin-trendline@3.2.0:
+    resolution: {integrity: sha512-UQ309v67EPc6KQsEIfn8YEBOclsZGvfddjbK8ZIN9QhEHQKzUrtJPpMc1F8o5G7ErgIFvmtFnt5YP9vkTPswSg==}
 
   cheerio-select@2.1.0:
     resolution: {integrity: sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==}
@@ -14438,7 +14438,7 @@ snapshots:
     dependencies:
       chart.js: 3.7.1
 
-  chartjs-plugin-trendline@1.0.2: {}
+  chartjs-plugin-trendline@3.2.0: {}
 
   cheerio-select@2.1.0:
     dependencies:

From b8ba5e7d96df863740c88fa536b4ef41daf79b3a Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 27 Feb 2026 11:22:28 +0100
Subject: [PATCH 48/52] clear filters button

---
 .../ts/components/pages/account/AccountPage.tsx  | 16 ++++++++++++++--
 .../src/ts/components/pages/account/Filters.tsx  |  3 ++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/frontend/src/ts/components/pages/account/AccountPage.tsx b/frontend/src/ts/components/pages/account/AccountPage.tsx
index b75785a33998..2b69926acc23 100644
--- a/frontend/src/ts/components/pages/account/AccountPage.tsx
+++ b/frontend/src/ts/components/pages/account/AccountPage.tsx
@@ -13,7 +13,6 @@ import { isObject, typedKeys } from "../../../utils/misc";
 import { sanitize } from "../../../utils/sanitize";
 import AsyncContent from "../../common/AsyncContent";
 import { Button } from "../../common/Button";
-
 import { Charts } from "./Charts";
 import { Filters } from "./Filters";
 import { Table } from "./Table";
@@ -54,6 +53,7 @@ export function AccountPage(): JSXElement {
         filters={filters}
         onChangeFilter={(key, value) => setFilters(key, value)}
         onResetFilter={() => setFilters(defaultResultFilters)}
+        onClearFilter={() => setFilters(noFilters())}
       />
 
       <Charts filters={filters} queryState={queryState} />
@@ -68,7 +68,7 @@ export function AccountPage(): JSXElement {
             />
             <Button
               text="load more"
-              disabled={data.isLoading}
+              disabled={data.isLoading || data().length < limit() + 10}
               onClick={() => setLimit((limit) => limit + 10)}
               class="w-full text-center"
             />
@@ -112,3 +112,15 @@ function migrateFilterStorage(unknown: unknown): ResultFilters {
     return defaultResultFilters;
   }
 }
+
+function noFilters(): ResultFilters {
+  const filters = structuredClone(defaultResultFilters);
+  Object.entries(filters)
+    .filter(([key, value]) => key !== "date" && typeof value === "object")
+    .map(([_, value]) => value as Record<string, boolean>)
+    .forEach((group) =>
+      Object.keys(group).forEach((it) => (group[it] = false)),
+    );
+
+  return filters;
+}
diff --git a/frontend/src/ts/components/pages/account/Filters.tsx b/frontend/src/ts/components/pages/account/Filters.tsx
index 7c1dec0e6c06..58e9d5789d61 100644
--- a/frontend/src/ts/components/pages/account/Filters.tsx
+++ b/frontend/src/ts/components/pages/account/Filters.tsx
@@ -22,6 +22,7 @@ export function Filters(props: {
     value: Record<string, boolean>,
   ) => void;
   onResetFilter: () => void;
+  onClearFilter: () => void;
 }): JSXElement {
   const [isShowAdvanced, setShowAdvanced] = createSignal(true);
 
@@ -55,7 +56,7 @@ export function Filters(props: {
 
         <Button
           text="clear filters"
-          onClick={placeholder}
+          onClick={props.onClearFilter}
           class="mb-4 w-full"
         />
         <div class="gap-4 md:grid md:grid-cols-2 [&>div]:last:col-span-2">

From 1af312ad7bdf4ef7270a305c497e17ee8ee46468 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 27 Feb 2026 11:44:45 +0100
Subject: [PATCH 49/52] refactor filter callback, current settings button

---
 .../components/pages/account/AccountPage.tsx  |  19 +--
 .../ts/components/pages/account/Filters.tsx   | 129 ++++++++++++++++--
 2 files changed, 117 insertions(+), 31 deletions(-)

diff --git a/frontend/src/ts/components/pages/account/AccountPage.tsx b/frontend/src/ts/components/pages/account/AccountPage.tsx
index 2b69926acc23..5c65ee10cf8b 100644
--- a/frontend/src/ts/components/pages/account/AccountPage.tsx
+++ b/frontend/src/ts/components/pages/account/AccountPage.tsx
@@ -49,12 +49,7 @@ export function AccountPage(): JSXElement {
 
   return (
     <Show when={isLoggedIn() && isOpen()}>
-      <Filters
-        filters={filters}
-        onChangeFilter={(key, value) => setFilters(key, value)}
-        onResetFilter={() => setFilters(defaultResultFilters)}
-        onClearFilter={() => setFilters(noFilters())}
-      />
+      <Filters filters={filters} onChangeFilters={setFilters} />
 
       <Charts filters={filters} queryState={queryState} />
       <TestStats queryState={queryState} />
@@ -112,15 +107,3 @@ function migrateFilterStorage(unknown: unknown): ResultFilters {
     return defaultResultFilters;
   }
 }
-
-function noFilters(): ResultFilters {
-  const filters = structuredClone(defaultResultFilters);
-  Object.entries(filters)
-    .filter(([key, value]) => key !== "date" && typeof value === "object")
-    .map(([_, value]) => value as Record<string, boolean>)
-    .forEach((group) =>
-      Object.keys(group).forEach((it) => (group[it] = false)),
-    );
-
-  return filters;
-}
diff --git a/frontend/src/ts/components/pages/account/Filters.tsx b/frontend/src/ts/components/pages/account/Filters.tsx
index 58e9d5789d61..e6f75cef54db 100644
--- a/frontend/src/ts/components/pages/account/Filters.tsx
+++ b/frontend/src/ts/components/pages/account/Filters.tsx
@@ -1,7 +1,15 @@
-import { ResultFilters, ResultFiltersKeys } from "@monkeytype/schemas/users";
+import { QuoteLength } from "@monkeytype/schemas/configs";
+import {
+  ResultFilters,
+  ResultFiltersGroupItem,
+  ResultFiltersKeys,
+} from "@monkeytype/schemas/users";
 import { createSignal, createMemo, For, JSXElement, Show } from "solid-js";
+import { SetStoreFunction } from "solid-js/store";
 
+import defaultResultFilters from "../../../constants/default-result-filters";
 import { getSnapshot } from "../../../db";
+import { getConfig } from "../../../signals/config";
 import { FaSolidIcon } from "../../../types/font-awesome";
 import {
   getLanguageDisplayString,
@@ -17,21 +25,29 @@ const placeholder = (): void => {
 
 export function Filters(props: {
   filters: ResultFilters;
-  onChangeFilter: (
-    id: ResultFiltersKeys,
-    value: Record<string, boolean>,
-  ) => void;
-  onResetFilter: () => void;
-  onClearFilter: () => void;
+  onChangeFilters: SetStoreFunction<ResultFilters>;
 }): JSXElement {
   const [isShowAdvanced, setShowAdvanced] = createSignal(true);
 
+  const setFilter = (
+    key: ResultFiltersKeys,
+    value: Record<string, boolean>,
+  ) => {
+    props.onChangeFilters(key, value);
+  };
+
   return (
     <>
       <H3 fa={{ icon: "fa-filter" }} text="filters" />
       <div class="mb-12 grid gap-4 sm:grid-cols-2 lg:mb-4 lg:flex lg:justify-evenly [&>button]:w-full">
-        <Button text="all" onClick={() => props.onResetFilter()} />
-        <Button text="current settings" onClick={placeholder} />
+        <Button
+          text="all"
+          onClick={() => props.onChangeFilters(defaultResultFilters)}
+        />
+        <Button
+          text="current settings"
+          onClick={() => props.onChangeFilters(fromCurrentSettings())}
+        />
         <Button
           text="advanced"
           active={isShowAdvanced()}
@@ -56,7 +72,7 @@ export function Filters(props: {
 
         <Button
           text="clear filters"
-          onClick={props.onClearFilter}
+          onClick={() => props.onChangeFilters(noFilters())}
           class="mb-4 w-full"
         />
         <div class="gap-4 md:grid md:grid-cols-2 [&>div]:last:col-span-2">
@@ -142,7 +158,7 @@ export function Filters(props: {
             scrollToTop: true,
           }}
           onChange={(selectedValues) => {
-            props.onChangeFilter(
+            setFilter(
               options.group,
               Object.fromEntries(
                 Object.entries(props.filters[options.group]).map(([k]) => [
@@ -203,9 +219,9 @@ export function Filters(props: {
                         key === item.id,
                       ]),
                     );
-                    props.onChangeFilter(options.group, newValue);
+                    setFilter(options.group, newValue);
                   } else {
-                    props.onChangeFilter(options.group, {
+                    setFilter(options.group, {
                       ...(props.filters[options.group] as Record<
                         string,
                         boolean
@@ -223,3 +239,90 @@ export function Filters(props: {
     );
   }
 }
+
+function noFilters(): ResultFilters {
+  const filters = structuredClone(defaultResultFilters);
+  Object.entries(filters)
+    .filter(([key, value]) => key !== "date" && typeof value === "object")
+    .map(([_, value]) => value as Record<string, boolean>)
+    .forEach((group) =>
+      Object.keys(group).forEach((it) => (group[it] = false)),
+    );
+
+  return filters;
+}
+
+function fromCurrentSettings(): ResultFilters {
+  const filters = noFilters();
+
+  filters.pb.no = true;
+  filters.pb.yes = true;
+
+  filters.difficulty[getConfig.difficulty] = true;
+  filters.mode[getConfig.mode] = true;
+  if (getConfig.mode === "time") {
+    if ([15, 30, 60, 120].includes(getConfig.time)) {
+      const configTime = `${getConfig.time}` as keyof typeof filters.time;
+      filters.time[configTime] = true;
+    } else {
+      filters.time.custom = true;
+    }
+  } else if (getConfig.mode === "words") {
+    if ([10, 25, 50, 100, 200].includes(getConfig.words)) {
+      const configWords = `${getConfig.words}` as keyof typeof filters.words;
+      filters.words[configWords] = true;
+    } else {
+      filters.words.custom = true;
+    }
+  } else if (getConfig.mode === "quote") {
+    const filterName: ResultFiltersGroupItem<"quoteLength">[] = [
+      "short",
+      "medium",
+      "long",
+      "thicc",
+    ];
+    filterName.forEach((ql, index) => {
+      if (getConfig.quoteLength.includes(index as QuoteLength)) {
+        filters.quoteLength[ql] = true;
+      } else {
+        filters.quoteLength[ql] = false;
+      }
+    });
+  }
+  if (getConfig.punctuation) {
+    filters.punctuation.on = true;
+  } else {
+    filters.punctuation.off = true;
+  }
+  if (getConfig.numbers) {
+    filters.numbers.on = true;
+  } else {
+    filters.numbers.off = true;
+  }
+  if (getConfig.mode === "quote" && /english.*/.test(getConfig.language)) {
+    filters.language["english"] = true;
+  } else {
+    filters.language[getConfig.language] = true;
+  }
+
+  if (getConfig.funbox.length === 0) {
+    filters.funbox["none"] = true;
+  } else {
+    for (const f of getConfig.funbox) {
+      filters.funbox[f] = true;
+    }
+  }
+
+  filters.tags["none"] = true;
+
+  getSnapshot()?.tags?.forEach((tag) => {
+    if (tag.active === true) {
+      filters.tags["none"] = false;
+      filters.tags[tag._id] = true;
+    }
+  });
+
+  filters.date.all = true;
+
+  return filters;
+}

From 87e30ff9941ace3e2131b30d3e0d898da860867a Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 27 Feb 2026 14:24:57 +0100
Subject: [PATCH 50/52] filter presets

---
 .../ts/collections/result-filter-presets.ts   |  87 ++++++++++++++
 frontend/src/ts/collections/results.ts        |  19 +---
 .../ts/components/pages/account/Filters.tsx   | 107 +++++++++++++++++-
 frontend/src/ts/utils/simple-modal.ts         |   7 +-
 frontend/src/ts/utils/strings.ts              |   4 +
 5 files changed, 201 insertions(+), 23 deletions(-)
 create mode 100644 frontend/src/ts/collections/result-filter-presets.ts

diff --git a/frontend/src/ts/collections/result-filter-presets.ts b/frontend/src/ts/collections/result-filter-presets.ts
new file mode 100644
index 000000000000..9c1931e59356
--- /dev/null
+++ b/frontend/src/ts/collections/result-filter-presets.ts
@@ -0,0 +1,87 @@
+import { queryCollectionOptions } from "@tanstack/query-db-collection";
+import { createCollection } from "@tanstack/solid-db";
+import { getSnapshot } from "../db";
+import { queryClient } from "../queries";
+import { baseKey } from "../queries/utils/keys";
+import Ape from "../ape";
+import * as Notifications from "../elements/notifications";
+import { addToGlobal } from "../utils/misc";
+
+const queryKeys = {
+  root: () => [...baseKey("resultFilterPresets", { isUserSpecific: true })],
+};
+
+export const resultFilterPresetsCollection = createCollection(
+  queryCollectionOptions({
+    staleTime: Infinity,
+    queryKey: queryKeys.root(),
+
+    queryClient,
+    getKey: (it) => it._id,
+    queryFn: async () => {
+      const fromSnapshot = getSnapshot()?.filterPresets;
+      if (fromSnapshot !== undefined) return fromSnapshot;
+
+      const response = await Ape.users.get();
+      if (response.status !== 200) {
+        throw new Error(
+          `Failed to load result filter presets: ${response.body.message}`,
+        );
+      }
+
+      return response.body.data.resultFilterPresets ?? [];
+    },
+    onInsert: async ({ transaction }) => {
+      const newItems = transaction.mutations.map((m) => m.modified);
+
+      const serverItems = await Promise.all(
+        newItems.map(async (it) => {
+          const response = await Ape.users.addResultFilterPreset({ body: it });
+          if (response.status !== 200) {
+            throw new Error(
+              `Failed to insert result filter presets: ${response.body.message}`,
+            );
+          }
+          return { ...it, _id: response.body.data };
+        }),
+      );
+
+      resultFilterPresetsCollection.utils.writeBatch(() => {
+        serverItems.forEach((it) =>
+          resultFilterPresetsCollection.utils.writeInsert(it),
+        );
+      });
+      return { refetch: false };
+    },
+    onDelete: async ({ transaction }) => {
+      const ids = transaction.mutations.map((it) => it.key as string);
+
+      await Promise.all(
+        ids.map(async (it) => {
+          const response = await Ape.users.removeResultFilterPreset({
+            params: { presetId: it },
+          });
+          if (response.status !== 200) {
+            Notifications.add(
+              "Error deleting filter preset: " + response.body.message,
+              -1,
+            );
+            throw new Error(
+              "Error deleting filter preset: " + response.body.message,
+            );
+          }
+        }),
+      );
+
+      resultFilterPresetsCollection.utils.writeBatch(() => {
+        ids.forEach((it) =>
+          resultFilterPresetsCollection.utils.writeDelete(it),
+        );
+      });
+      //don't refetch
+      return { refetch: false };
+    },
+  }),
+);
+
+addToGlobal({ rc: resultFilterPresetsCollection });
diff --git a/frontend/src/ts/collections/results.ts b/frontend/src/ts/collections/results.ts
index 065b618d427c..0e31d5d23e7d 100644
--- a/frontend/src/ts/collections/results.ts
+++ b/frontend/src/ts/collections/results.ts
@@ -182,7 +182,7 @@ export async function insertLocalResult(
   }
 }
 
-export const resultsCollection = createCollection(
+const resultsCollection = createCollection(
   queryCollectionOptions({
     staleTime: Infinity,
     queryKey: queryKeys.root(),
@@ -373,20 +373,3 @@ export const getSingleResultQueryOptions = (_id: string) =>
     },
     staleTime: Infinity,
   });
-
-/*
-const allResultsQuery = createCollection(
-  liveQueryCollectionOptions({
-    query: (q) => q.from({ results: resultsCollection }),
-  }),
-);
-
-export async function downloadResults(): Promise<void> {
-  await allResultsQuery.stateWhenReady();
-  return;
-}
-
-export function getAllResults<M extends Mode>(): SnapshotResult<M>[] {
-  return allResultsQuery.toArray as SnapshotResult<M>[];
-}
-*/
diff --git a/frontend/src/ts/components/pages/account/Filters.tsx b/frontend/src/ts/components/pages/account/Filters.tsx
index e6f75cef54db..1ed38e724693 100644
--- a/frontend/src/ts/components/pages/account/Filters.tsx
+++ b/frontend/src/ts/components/pages/account/Filters.tsx
@@ -3,25 +3,75 @@ import {
   ResultFilters,
   ResultFiltersGroupItem,
   ResultFiltersKeys,
+  ResultFiltersSchema,
 } from "@monkeytype/schemas/users";
+import { useLiveQuery } from "@tanstack/solid-db";
 import { createSignal, createMemo, For, JSXElement, Show } from "solid-js";
-import { SetStoreFunction } from "solid-js/store";
+import { SetStoreFunction, unwrap } from "solid-js/store";
+import { z } from "zod";
 
+import { resultFilterPresetsCollection } from "../../../collections/result-filter-presets";
 import defaultResultFilters from "../../../constants/default-result-filters";
 import { getSnapshot } from "../../../db";
+import { IsValidResponse } from "../../../elements/input-validation";
 import { getConfig } from "../../../signals/config";
 import { FaSolidIcon } from "../../../types/font-awesome";
+import { SimpleModal } from "../../../utils/simple-modal";
 import {
   getLanguageDisplayString,
+  replaceSpacesWithUnderscores,
   replaceUnderscoresWithSpaces,
 } from "../../../utils/strings";
+import AsyncContent from "../../common/AsyncContent";
 import { Button } from "../../common/Button";
 import { H3 } from "../../common/Headers";
 import SlimSelect from "../../ui/SlimSelect";
 
-const placeholder = (): void => {
-  //
+const presetNameValidation = async (
+  tagName: string,
+): Promise<IsValidResponse> => {
+  const validationResult = ResultFiltersSchema.shape.name.safeParse(
+    replaceSpacesWithUnderscores(tagName),
+  );
+  if (validationResult.success) return true;
+  return validationResult.error.errors.map((err) => err.message).join(", ");
 };
+const newFilterPresetModal = new SimpleModal({
+  id: "newFilterPresetModal",
+  title: "New Filter Preset",
+  inputs: [
+    {
+      placeholder: "Preset Name",
+      type: "text",
+      initVal: "",
+      validation: {
+        schema: z
+          .string()
+          .regex(/^[0-9a-zA-Z\ .-]+$/)
+          .max(16),
+        isValid: presetNameValidation,
+        debounceDelay: 0,
+      },
+    },
+  ],
+  buttonText: "add",
+  onlineOnly: true,
+  execFn: async (thisPopup, name) => {
+    const filters = thisPopup.context as ResultFilters;
+
+    try {
+      const tx = resultFilterPresetsCollection.insert({
+        ...structuredClone(filters),
+        name: replaceSpacesWithUnderscores(name),
+      });
+      await tx.isPersisted.promise;
+      return { status: 1, message: "Filter preset created" };
+    } catch (e) {
+      let message: string = "Error creating filter preset";
+      return { status: -1, message, alwaysHide: true };
+    }
+  },
+});
 
 export function Filters(props: {
   filters: ResultFilters;
@@ -36,8 +86,20 @@ export function Filters(props: {
     props.onChangeFilters(key, value);
   };
 
+  const presetsQuery = useLiveQuery((q) =>
+    q.from({ presets: resultFilterPresetsCollection }),
+  );
+
   return (
     <>
+      <AsyncContent collection={presetsQuery}>
+        {(presets) => (
+          <FilterPresets
+            presets={presets}
+            onChangeFilters={props.onChangeFilters}
+          />
+        )}
+      </AsyncContent>
       <H3 fa={{ icon: "fa-filter" }} text="filters" />
       <div class="mb-12 grid gap-4 sm:grid-cols-2 lg:mb-4 lg:flex lg:justify-evenly [&>button]:w-full">
         <Button
@@ -53,7 +115,14 @@ export function Filters(props: {
           active={isShowAdvanced()}
           onClick={() => setShowAdvanced((old) => !old)}
         />
-        <Button text="save as preset" onClick={placeholder} />
+        <Button
+          text="save as preset"
+          onClick={() =>
+            newFilterPresetModal.show(undefined, {
+              context: { ...unwrap(props.filters), _id: "tmp" },
+            })
+          }
+        />
       </div>
 
       <ButtonGroup
@@ -118,6 +187,36 @@ export function Filters(props: {
       </Show>
     </>
   );
+
+  function FilterPresets(props: {
+    presets: ResultFilters[];
+    onChangeFilters: SetStoreFunction<ResultFilters>;
+  }): JSXElement {
+    return (
+      <Show when={props.presets.length > 0}>
+        <H3 fa={{ icon: "fa-sliders-h" }} text="filter presets" />
+        <div class="mb-12 grid gap-4 sm:grid-cols-2 lg:mb-4 lg:flex lg:justify-evenly [&>button]:w-full">
+          <For each={props.presets}>
+            {(preset) => (
+              <div class="flex w-full flex-row gap-2">
+                <Button
+                  class="w-full"
+                  text={replaceUnderscoresWithSpaces(preset.name)}
+                  onClick={() => props.onChangeFilters(preset)}
+                />
+                <Button
+                  fa={{ icon: "fa-trash", fixedWidth: true }}
+                  onClick={() =>
+                    resultFilterPresetsCollection.delete(preset._id)
+                  }
+                />
+              </div>
+            )}
+          </For>
+        </div>
+      </Show>
+    );
+  }
   function Dropdown<
     T extends ResultFiltersKeys,
     K extends keyof ResultFilters[T],
diff --git a/frontend/src/ts/utils/simple-modal.ts b/frontend/src/ts/utils/simple-modal.ts
index 10318d5385bb..112c19049d7b 100644
--- a/frontend/src/ts/utils/simple-modal.ts
+++ b/frontend/src/ts/utils/simple-modal.ts
@@ -137,6 +137,7 @@ export class SimpleModal {
   hideCallsExec: boolean;
   showLabels: boolean;
   afterClickAway: (() => void) | undefined;
+  context?: unknown;
   constructor(options: SimpleModalOptions) {
     this.parameters = [];
     this.id = options.id;
@@ -407,13 +408,17 @@ export class SimpleModal {
     simpleModalEl.qsa(".checkbox").removeClass("disabled");
   }
 
-  show(parameters: string[] = [], showOptions: ShowOptions): void {
+  show(
+    parameters: string[] = [],
+    showOptions: ShowOptions & { context?: unknown },
+  ): void {
     if (this.onlineOnly && !ConnectionState.get()) {
       Notifications.add("You are offline", 0, { duration: 2 });
       return;
     }
     activePopup = this;
     this.parameters = parameters;
+    this.context = showOptions.context;
     void modal.show({
       focusFirstInput: true,
       ...showOptions,
diff --git a/frontend/src/ts/utils/strings.ts b/frontend/src/ts/utils/strings.ts
index 24034424dbfe..7b230502bc2d 100644
--- a/frontend/src/ts/utils/strings.ts
+++ b/frontend/src/ts/utils/strings.ts
@@ -366,6 +366,10 @@ export function replaceUnderscoresWithSpaces(text: string): string {
   return text.replace(/_/g, " ");
 }
 
+export function replaceSpacesWithUnderscores(text: string): string {
+  return text.replace(/ /g, "_");
+}
+
 // Export testing utilities for unit tests
 export const __testing = {
   hasRTLCharacters,

From 26db09c12875967f496dd36f512a8c4974660d25 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 27 Feb 2026 15:25:53 +0100
Subject: [PATCH 51/52] fill filter presets collection from snapshot directly

---
 .../ts/collections/result-filter-presets.ts   | 30 +++++++------------
 frontend/src/ts/constants/default-snapshot.ts |  2 +-
 frontend/src/ts/db.ts                         | 12 +++++++-
 3 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/frontend/src/ts/collections/result-filter-presets.ts b/frontend/src/ts/collections/result-filter-presets.ts
index 9c1931e59356..a888800bba62 100644
--- a/frontend/src/ts/collections/result-filter-presets.ts
+++ b/frontend/src/ts/collections/result-filter-presets.ts
@@ -1,11 +1,10 @@
+import { ResultFilters } from "@monkeytype/schemas/users";
 import { queryCollectionOptions } from "@tanstack/query-db-collection";
 import { createCollection } from "@tanstack/solid-db";
-import { getSnapshot } from "../db";
-import { queryClient } from "../queries";
-import { baseKey } from "../queries/utils/keys";
 import Ape from "../ape";
 import * as Notifications from "../elements/notifications";
-import { addToGlobal } from "../utils/misc";
+import { queryClient } from "../queries";
+import { baseKey } from "../queries/utils/keys";
 
 const queryKeys = {
   root: () => [...baseKey("resultFilterPresets", { isUserSpecific: true })],
@@ -19,17 +18,8 @@ export const resultFilterPresetsCollection = createCollection(
     queryClient,
     getKey: (it) => it._id,
     queryFn: async () => {
-      const fromSnapshot = getSnapshot()?.filterPresets;
-      if (fromSnapshot !== undefined) return fromSnapshot;
-
-      const response = await Ape.users.get();
-      if (response.status !== 200) {
-        throw new Error(
-          `Failed to load result filter presets: ${response.body.message}`,
-        );
-      }
-
-      return response.body.data.resultFilterPresets ?? [];
+      //return emtpy array. We load the user with the snapshot and fill the collection from there
+      return [] as ResultFilters[];
     },
     onInsert: async ({ transaction }) => {
       const newItems = transaction.mutations.map((m) => m.modified);
@@ -38,6 +28,10 @@ export const resultFilterPresetsCollection = createCollection(
         newItems.map(async (it) => {
           const response = await Ape.users.addResultFilterPreset({ body: it });
           if (response.status !== 200) {
+            Notifications.add(
+              `Failed to insert result filter presets: ${response.body.message}`,
+              -1,
+            );
             throw new Error(
               `Failed to insert result filter presets: ${response.body.message}`,
             );
@@ -63,11 +57,11 @@ export const resultFilterPresetsCollection = createCollection(
           });
           if (response.status !== 200) {
             Notifications.add(
-              "Error deleting filter preset: " + response.body.message,
+              `Failed to delete result filter presets: ${response.body.message}`,
               -1,
             );
             throw new Error(
-              "Error deleting filter preset: " + response.body.message,
+              `Failed to delete result filter presets: ${response.body.message}`,
             );
           }
         }),
@@ -83,5 +77,3 @@ export const resultFilterPresetsCollection = createCollection(
     },
   }),
 );
-
-addToGlobal({ rc: resultFilterPresetsCollection });
diff --git a/frontend/src/ts/constants/default-snapshot.ts b/frontend/src/ts/constants/default-snapshot.ts
index b39eddc7122d..5163a16dde3f 100644
--- a/frontend/src/ts/constants/default-snapshot.ts
+++ b/frontend/src/ts/constants/default-snapshot.ts
@@ -77,7 +77,7 @@ export type Snapshot = Omit<
   inboxUnreadSize: number;
   streak: number;
   maxStreak: number;
-  filterPresets: ResultFilters[];
+  filterPresets: ResultFilters[]; //TODO remove
   isPremium: boolean;
   streakHourOffset?: number;
   tags: SnapshotUserTag[];
diff --git a/frontend/src/ts/db.ts b/frontend/src/ts/db.ts
index 93fe6c04fe43..62daa6287bcf 100644
--- a/frontend/src/ts/db.ts
+++ b/frontend/src/ts/db.ts
@@ -34,6 +34,7 @@ import {
 } from "./ape/server-configuration";
 import { Connection } from "@monkeytype/schemas/connections";
 import { insertLocalResult } from "./collections/results";
+import { resultFilterPresetsCollection } from "./collections/result-filter-presets";
 
 let dbSnapshot: Snapshot | undefined;
 const firstDayOfTheWeek = getFirstDayOfTheWeek();
@@ -167,7 +168,6 @@ export async function initSnapshot(): Promise<Snapshot | false> {
     snap.inboxUnreadSize = userData.inboxUnreadSize ?? 0;
     snap.streak = userData?.streak?.length ?? 0;
     snap.maxStreak = userData?.streak?.maxLength ?? 0;
-    snap.filterPresets = userData.resultFilterPresets ?? [];
     snap.isPremium = userData?.isPremium ?? false;
     snap.allTimeLbs = userData.allTimeLbs;
 
@@ -247,6 +247,16 @@ export async function initSnapshot(): Promise<Snapshot | false> {
 
     snap.connections = convertConnections(connectionsData);
 
+    if (userData.resultFilterPresets !== undefined) {
+      void resultFilterPresetsCollection.stateWhenReady().then(() => {
+        resultFilterPresetsCollection.utils.writeBatch(() => {
+          (userData.resultFilterPresets ?? []).forEach((it) =>
+            resultFilterPresetsCollection.utils.writeInsert(it),
+          );
+        });
+      });
+    }
+
     dbSnapshot = snap;
     return dbSnapshot;
   } catch (e) {

From 62a69477789c5543377db5aa7e076b8c5a90a3d6 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Fri, 27 Feb 2026 15:43:06 +0100
Subject: [PATCH 52/52] fix AnimatedModal test

---
 .../__tests__/components/common/AnimatedModal.spec.tsx   | 9 ++++++---
 .../__tests__/components/common/AsyncContent.spec.tsx    | 2 ++
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/__tests__/components/common/AnimatedModal.spec.tsx b/frontend/__tests__/components/common/AnimatedModal.spec.tsx
index b57934428ace..209e5af446f5 100644
--- a/frontend/__tests__/components/common/AnimatedModal.spec.tsx
+++ b/frontend/__tests__/components/common/AnimatedModal.spec.tsx
@@ -28,9 +28,12 @@ describe("AnimatedModal", () => {
     modalDiv: HTMLDivElement;
   } {
     const { container } = render(() => (
-      <AnimatedModal id="Support" {...props}>
-        <div data-testid="modal-content">Test Content</div>
-      </AnimatedModal>
+      <>
+        <div id="solidmodals"></div>
+        <AnimatedModal id="Support" {...props}>
+          <div data-testid="modal-content">Test Content</div>
+        </AnimatedModal>
+      </>
     ));
 
     return {
diff --git a/frontend/__tests__/components/common/AsyncContent.spec.tsx b/frontend/__tests__/components/common/AsyncContent.spec.tsx
index da25c43ee814..c1d4b5575b5a 100644
--- a/frontend/__tests__/components/common/AsyncContent.spec.tsx
+++ b/frontend/__tests__/components/common/AsyncContent.spec.tsx
@@ -147,6 +147,7 @@ describe("AsyncContent", () => {
         }));
 
         return (
+          //@ts-expect-error generic children, fine for tests
           <AsyncContent
             query={myQuery}
             errorMessage={options?.errorMessage}
@@ -335,6 +336,7 @@ describe("AsyncContent", () => {
         }));
 
         return (
+          //@ts-expect-error generic children, fine for tests
           <AsyncContent
             queries={{ first: firstQuery, second: secondQuery }}
             errorMessage={options?.errorMessage}