feat: start of dm overview page

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": "explicit"
+    }
+}

package.json

@@ -42,6 +42,8 @@
     "@solidjs/router": "^0.15.1",
     "@tanstack/solid-table": "^8.20.5",
     "chart.js": "^4.4.7",
+    "chartjs-plugin-deferred": "^2.0.0",
+    "chartjs-plugin-zoom": "^2.2.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",

pnpm-lock.yaml

@@ -26,6 +26,12 @@ importers:
       chart.js:
         specifier: ^4.4.7
         version: 4.4.7
+      chartjs-plugin-deferred:
+        specifier: ^2.0.0
+        version: 2.0.0(chart.js@4.4.7)
+      chartjs-plugin-zoom:
+        specifier: ^2.2.0
+        version: 2.2.0(chart.js@4.4.7)
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -672,6 +678,9 @@ packages:
   '@types/estree@1.0.6':
     resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
 
+  '@types/hammerjs@2.0.46':
+    resolution: {integrity: sha512-ynRvcq6wvqexJ9brDMS4BnBLzmr0e14d6ZJTEShTBWKymQiHwlAyGu0ZPEFI2Fh1U53F7tN9ufClWM5KvqkKOw==}
+
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
@@ -866,6 +875,16 @@ packages:
     resolution: {integrity: sha512-pwkcKfdzTMAU/+jNosKhNL2bHtJc/sSmYgVbuGTEDhzkrhmyihmP7vUc/5ZK9WopidMDHNe3Wm7jOd/WhuHWuw==}
     engines: {pnpm: '>=8'}
 
+  chartjs-plugin-deferred@2.0.0:
+    resolution: {integrity: sha512-jq6b8Wt23WS6zxiX8oVB1MXq4uaJX2KGTyiqnq6xo4ctZPgFkT/FuIEKpJjsF1WkYv7ZQrqrrRg1fLw6O5ZEfQ==}
+    peerDependencies:
+      chart.js: '>= 3.0.0'
+
+  chartjs-plugin-zoom@2.2.0:
+    resolution: {integrity: sha512-in6kcdiTlP6npIVLMd4zXZ08PDUXC52gZ4FAy5oyjk1zX3gKarXMAof7B9eFiisf9WOC3bh2saHg+J5WtLXZeA==}
+    peerDependencies:
+      chart.js: '>=3.2.0'
+
   chokidar@3.6.0:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
@@ -1173,6 +1192,10 @@ packages:
   graphemer@1.4.0:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
 
+  hammerjs@2.0.8:
+    resolution: {integrity: sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==}
+    engines: {node: '>=0.8.0'}
+
   has-flag@3.0.0:
     resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
     engines: {node: '>=4'}
@@ -2470,6 +2493,8 @@ snapshots:
 
   '@types/estree@1.0.6': {}
 
+  '@types/hammerjs@2.0.46': {}
+
   '@types/json-schema@7.0.15': {}
 
   '@types/node@22.10.1':
@@ -2693,6 +2718,16 @@ snapshots:
     dependencies:
       '@kurkle/color': 0.3.4
 
+  chartjs-plugin-deferred@2.0.0(chart.js@4.4.7):
+    dependencies:
+      chart.js: 4.4.7
+
+  chartjs-plugin-zoom@2.2.0(chart.js@4.4.7):
+    dependencies:
+      '@types/hammerjs': 2.0.46
+      chart.js: 4.4.7
+      hammerjs: 2.0.8
+
   chokidar@3.6.0:
     dependencies:
       anymatch: 3.1.3
@@ -3018,6 +3053,8 @@ snapshots:
 
   graphemer@1.4.0: {}
 
+  hammerjs@2.0.8: {}
+
   has-flag@3.0.0: {}
 
   has-flag@4.0.0: {}

src/App.tsx

@@ -1,7 +1,8 @@
 import { type Component } from "solid-js";
 import { Route } from "@solidjs/router";
 
-import { Home, Overview } from "./pages";
+import { allThreadsOverviewQuery } from "./db";
+import { DmId, GroupId, Home, Overview } from "./pages";
 
 import "./app.css";
 
@@ -16,7 +17,31 @@ const App: Component = () => {
         path="/overview"
         component={Overview}
       />
-      <Route path="/thread/:threadid" />
+      <Route
+        path="/dm/:dmid"
+        component={DmId}
+      />
+      <Route
+        path="/group/:groupid"
+        component={GroupId}
+      />
+      <Route
+        path="/test"
+        component={() => {
+          console.time("first");
+          console.log(allThreadsOverviewQuery());
+          void allThreadsOverviewQuery().then((result) => {
+            console.log(result);
+            console.timeEnd("first");
+            console.time("second");
+            void allThreadsOverviewQuery().then((result) => {
+              console.log(result);
+              console.timeEnd("second");
+            });
+          });
+          return "";
+        }}
+      />
     </>
   );
 };

src/components/ui/charts.tsx

@@ -36,6 +36,10 @@ import {
   ScatterController,
   Tooltip,
 } from "chart.js";
+import ChartDeferred from "chartjs-plugin-deferred";
+import ChartZoom from "chartjs-plugin-zoom";
+
+Chart.register(ChartDeferred, ChartZoom);
 
 interface TypedChartProps {
   data: ChartData;

src/db.ts

@@ -1,11 +1,12 @@
 import { type Accessor, createMemo, createSignal, DEV, type Setter } from "solid-js";
 
-import { Kysely, type NotNull } from "kysely";
+import { Kysely, type NotNull, sql } from "kysely";
 import type { DB } from "kysely-codegen";
 import { SqlJsDialect } from "kysely-wasm";
 import initSqlJS, { type Database } from "sql.js";
 
 import wasmURL from "./assets/sql-wasm.wasm?url";
+import { cached } from "./lib/db-cache";
 
 export const SELF_ID = 2;
 
@@ -13,7 +14,8 @@ export const SQL = await initSqlJS({
   locateFile: () => wasmURL,
 });
 
-let rawDb: Accessor<Database | undefined>, setRawDb: Setter<Database | undefined>;
+let rawDb: Accessor<Database | undefined> = () => undefined,
+  setRawDb: Setter<Database | undefined> = () => undefined;
 
 if (DEV) {
   const file = await import("./assets/database.sqlite?url").then((result) => {
@@ -22,9 +24,9 @@ if (DEV) {
 
   const testDb = new SQL.Database(new Uint8Array(file));
 
-  [rawDb, setRawDb] = createSignal<Database>(testDb);
+  [rawDb, setRawDb] = createSignal<Database | undefined>(testDb);
 } else {
-  [rawDb, setRawDb] = createSignal<Database>();
+  [rawDb, setRawDb] = createSignal<Database | undefined>();
 }
 
 export { rawDb as db, setRawDb as setDb };
@@ -51,13 +53,13 @@ const kyselyDb = createMemo(() => {
   });
 });
 
-export const threadOverviewQuery = kyselyDb()
+const allThreadsOverviewQueryRaw = kyselyDb()
   .selectFrom("thread")
   .innerJoin(
     (eb) =>
       eb
         .selectFrom("message")
-        .select(["thread_id", kyselyDb().fn.countAll().as("message_count")])
+        .select((eb) => ["message.thread_id", eb.fn.countAll().as("message_count")])
         .where((eb) => {
           return eb.and([eb("message.body", "is not", null), eb("message.body", "is not", "")]);
         })
@@ -82,18 +84,67 @@ export const threadOverviewQuery = kyselyDb()
     thread_id: NotNull;
     archived: NotNull;
     message_count: number;
-  }>();
+  }>()
+  .compile();
 
-console.log(threadOverviewQuery.compile());
+export const allThreadsOverviewQuery = cached(() => kyselyDb().executeQuery(allThreadsOverviewQueryRaw));
 
-export const overallSentMessagesQuery = (recipientId: number) =>
+const overallSentMessagesQueryRaw = (recipientId: number) =>
   kyselyDb()
     .selectFrom("message")
-    .select(kyselyDb().fn.countAll().as("message_count"))
+    .select((eb) => eb.fn.countAll().as("messageCount"))
     .where((eb) =>
       eb.and([
         eb("message.from_recipient_id", "=", recipientId),
         eb("message.body", "is not", null),
         eb("message.body", "!=", ""),
       ]),
-    );
+    )
+    .executeTakeFirst();
+
+export const overallSentMessagesQuery = cached(overallSentMessagesQueryRaw);
+
+const dmPartnerRecipientQueryRaw = (dmId: number) =>
+  kyselyDb()
+    .selectFrom("recipient")
+    .select(["recipient._id", "recipient.system_joined_name", "recipient.profile_joined_name"])
+    .innerJoin("thread", "recipient._id", "thread.recipient_id")
+    .where((eb) => eb.and([eb("thread._id", "=", dmId), eb("recipient._id", "!=", SELF_ID)]))
+    .$narrowType<{
+      _id: number;
+    }>()
+    .executeTakeFirst();
+
+export const dmPartnerRecipientQuery = cached(dmPartnerRecipientQueryRaw);
+
+const dmOverviewQueryRaw = (dmId: number) =>
+  kyselyDb()
+    .selectFrom("message")
+    .select((eb) => [
+      sql<Date>`DATE(datetime(message.date_sent / 1000, 'unixepoch'))`.as("message_date"),
+      eb.fn.countAll().as("message_count"),
+    ])
+    .groupBy("message_date")
+    .orderBy("message_date asc")
+    .where("thread_id", "=", dmId)
+    .execute();
+
+export const dmOverviewQuery = cached(dmOverviewQueryRaw);
+
+const threadSentMessagesPerPersonOverviewQueryRaw = (dmId: number) =>
+  kyselyDb()
+    .selectFrom("message")
+    .select((eb) => [
+      "from_recipient_id",
+      sql<Date>`DATE(datetime(message.date_sent / 1000, 'unixepoch'))`.as("message_date"),
+      eb.fn.countAll().as("message_count"),
+    ])
+    .groupBy(["from_recipient_id", "message_date"])
+    .orderBy(["message_date"])
+    .where((eb) => eb.and([eb("body", "is not", null), eb("body", "!=", ""), eb("thread_id", "=", dmId)]))
+    .$narrowType<{
+      message_count: number;
+    }>()
+    .execute();
+
+export const dmSentMessagesPerPersonOverviewQuery = cached(threadSentMessagesPerPersonOverviewQueryRaw);

src/lib/db-cache.ts

@@ -0,0 +1,118 @@
+import { createEffect, on } from "solid-js";
+
+const DATABASE_HASH_PREFIX = "database";
+
+// clear the cache on new session so that selecting a different database does not result in wrong cache entries
+const clearDbCache = () => {
+  for (let i = 0, len = localStorage.length; i < len; i++) {
+    const key = localStorage.key(i);
+
+    if (key?.startsWith(DATABASE_HASH_PREFIX)) {
+      localStorage.removeItem(key);
+    }
+  }
+};
+
+// https://stackoverflow.com/a/7616484
+const hashString = (str: string) => {
+  let hash = 0,
+    i,
+    chr;
+  if (str.length === 0) return hash;
+  for (i = 0; i < str.length; i++) {
+    chr = str.charCodeAt(i);
+    hash = (hash << 5) - hash + chr;
+    hash |= 0; // Convert to 32bit integer
+  }
+  return hash;
+};
+
+const HASH_STORE_KEY = "database_hash";
+
+// cannot import `db` the normal way because this file is imported in ~/db.ts before the initialisation of `db` has happened
+queueMicrotask(() => {
+  void import("~/db").then(({ db }) => {
+    createEffect(
+      on(db, (currentDb) => {
+        if (currentDb) {
+          const newHash = hashString(new TextDecoder().decode(currentDb.export())).toString();
+
+          const oldHash = localStorage.getItem(HASH_STORE_KEY);
+
+          console.log(newHash, oldHash);
+
+          if (newHash !== oldHash) {
+            clearDbCache();
+
+            localStorage.setItem(HASH_STORE_KEY, newHash);
+          }
+        }
+      }),
+    );
+  });
+});
+
+class LocalStorageCacheAdapter {
+  keys = new Set<string>(Object.keys(localStorage).filter((key) => key.startsWith(this.prefix)));
+  prefix = "database";
+
+  #createKey(cacheName: string, key: string): string {
+    return `${this.prefix}-${cacheName}-${key}`;
+  }
+
+  set(cacheName: string, key: string, value: unknown) {
+    const fullKey = this.#createKey(cacheName, key);
+    this.keys.add(fullKey);
+
+    localStorage.setItem(fullKey, JSON.stringify(value));
+  }
+
+  has(cacheName: string, key: string): boolean {
+    return this.keys.has(this.#createKey(cacheName, key));
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-parameters
+  get<R>(cacheName: string, key: string): R | undefined {
+    const item = localStorage.getItem(this.#createKey(cacheName, key));
+    if (item) {
+      return JSON.parse(item) as R;
+    }
+  }
+}
+
+const cache = new LocalStorageCacheAdapter();
+
+export const cached = <T, R, TT>(fn: (...args: T[]) => R, self?: ThisType<TT>): ((...args: T[]) => R) => {
+  const cacheName = hashString(fn.toString()).toString();
+
+  // important to return a promise on follow-up calls even if the data is immediately available
+  let isPromise: boolean;
+
+  return (...args: T[]) => {
+    const cacheKey = JSON.stringify(args);
+
+    const cachedValue = cache.get<R>(cacheName, cacheKey);
+
+    if (cachedValue) {
+      return (isPromise ? Promise.resolve(cachedValue) : cachedValue) as R;
+    }
+
+    let newValue: R;
+
+    if (self) {
+      newValue = fn.apply(self, args);
+    } else {
+      newValue = fn(...args);
+    }
+
+    const promisified = Promise.resolve(newValue);
+
+    isPromise = promisified == newValue;
+
+    void promisified.then((result) => {
+      cache.set(cacheName, cacheKey, result);
+    });
+
+    return newValue;
+  };
+};

src/lib/random.ts

@@ -0,0 +1,9 @@
+export const generateRandomString = (length: number) => {
+  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  let result = "";
+  for (let i = 0; i < length; i++) {
+    const randomIndex = Math.floor(Math.random() * characters.length);
+    result += characters[randomIndex];
+  }
+  return result;
+};

src/lib/sql-queries.txt

@@ -28,17 +28,3 @@ WHERE
   r._id = 4
   AND message.body IS NOT NULL
   AND message.body != ''`;
-
-// select all chats / groups with details
-`SELECT
-  thread.recipient_id,
-  thread.active,
-  recipient.profile_joined_name,
-  recipient.system_joined_name,
-  groups.title
-FROM
-  thread
-  JOIN recipient ON thread.recipient_id = recipient._id
-  LEFT JOIN groups ON recipient._id = groups.recipient_id
-WHERE (SELECT 1 FROM message WHERE message.thread_id = thread._id AND message.body IS NOT NULL)
-`;

src/pages/dm/dm-id.tsx

@@ -0,0 +1,144 @@
+import { type Accessor, type Component, createResource, Show } from "solid-js";
+import type { RouteSectionProps } from "@solidjs/router";
+
+import { type ChartData } from "chart.js";
+
+import { LineChart } from "~/components/ui/charts";
+
+import { dmPartnerRecipientQuery, dmSentMessagesPerPersonOverviewQuery, SELF_ID } from "~/db";
+
+export const DmId: Component<RouteSectionProps> = (props) => {
+  const dmId = () => Number(props.params.dmid);
+
+  const [dmPartner] = createResource(async () => {
+    const dmPartner = await dmPartnerRecipientQuery(dmId());
+
+    if (dmPartner) {
+      return {
+        id: dmPartner._id,
+        name: /* can be empty string */ !dmPartner.system_joined_name
+          ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            dmPartner.profile_joined_name!
+          : dmPartner.system_joined_name,
+      };
+    }
+  });
+
+  const [dmMessagesPerPerson] = createResource(() => dmSentMessagesPerPersonOverviewQuery(dmId()));
+
+  const dmMessages = () => {
+    return dmMessagesPerPerson()?.reduce<
+      {
+        date: Date;
+        totalMessages: number;
+        [key: number]: number;
+      }[]
+    >((prev, curr) => {
+      const existingDate = prev.find(({ date }) => date === curr.message_date);
+      if (existingDate) {
+        existingDate[curr.from_recipient_id] = curr.message_count;
+
+        existingDate.totalMessages += curr.message_count;
+      } else {
+        prev.push({
+          date: curr.message_date,
+          totalMessages: curr.message_count,
+          [curr.from_recipient_id]: curr.message_count,
+        });
+      }
+
+      return prev;
+    }, []);
+  };
+
+  const recipients = () => {
+    const currentDmPartner = dmPartner();
+
+    if (currentDmPartner) {
+      return [
+        { recipientId: currentDmPartner.id, name: currentDmPartner.name },
+        {
+          recipientId: SELF_ID,
+          name: "You",
+        },
+      ];
+    }
+
+    return [
+      {
+        recipientId: SELF_ID,
+        name: "You",
+      },
+    ];
+  };
+
+  const dateChartData: Accessor<ChartData<"line"> | undefined> = () => {
+    const currentDmMessages = dmMessages();
+    const currentRecipients = recipients();
+
+    if (currentDmMessages) {
+      return {
+        labels: currentDmMessages.map((row) => row.date),
+        datasets: [
+          {
+            label: "Total number of messages",
+            data: currentDmMessages.map((row) => row.totalMessages),
+            borderWidth: 2,
+          },
+          ...currentDmMessages.reduce<{ id: number; label: string; data: number[] }[]>(
+            (prev, curr) => {
+              for (const recipient of currentRecipients) {
+                prev.find(({ id }) => id === recipient.recipientId)?.data.push(curr[recipient.recipientId] ?? 0);
+              }
+
+              return prev;
+            },
+            currentRecipients.map((recipient) => {
+              return {
+                id: recipient.recipientId,
+                label: `Number of messages from ${recipient.name.toString()}`,
+                data: [],
+                borderWidth: 2,
+              };
+            }),
+          ),
+        ],
+      };
+    }
+  };
+
+  return (
+    <Show when={dateChartData()}>
+      {(currentDateChartData) => (
+        <div class="max-h-96">
+          <LineChart
+            options={{
+              normalized: true,
+              aspectRatio: 2,
+              plugins: {
+                zoom: {
+                  pan: {
+                    enabled: true,
+                    mode: "xy",
+                  },
+                  zoom: {
+                    wheel: {
+                      enabled: true,
+                    },
+                    pinch: {
+                      enabled: true,
+                    },
+                    mode: "xy",
+                  },
+                },
+              },
+            }}
+            data={currentDateChartData()}
+          />
+        </div>
+      )}
+    </Show>
+  );
+};
+
+export default DmId;

src/pages/group/group-id.tsx

@@ -0,0 +1,8 @@
+import type { Component } from "solid-js";
+import type { RouteSectionProps } from "@solidjs/router";
+
+export const GroupId: Component<RouteSectionProps> = (props) => {
+  const groupId = () => Number(props.params.groupid);
+};
+
+export default GroupId;

src/pages/index.tsx

@@ -2,4 +2,7 @@ import { lazy } from "solid-js";
 
 export { Home } from "./home";
 
+export const GroupId = lazy(() => import("./group/group-id"));
+export const DmId = lazy(() => import("./dm/dm-id"));
+
 export const Overview = lazy(() => import("./overview"));

src/pages/overview/index.tsx

@@ -1,17 +1,19 @@
-import { type Component, createResource, Show } from "solid-js";
+import { type Component, createEffect, createResource, Show } from "solid-js";
 import type { RouteSectionProps } from "@solidjs/router";
 
-import { overallSentMessagesQuery, SELF_ID, threadOverviewQuery } from "~/db";
+import { allThreadsOverviewQuery, overallSentMessagesQuery, SELF_ID } from "~/db";
 
 import { OverviewTable, type RoomOverview } from "./overview-table";
 
 export const Overview: Component<RouteSectionProps> = () => {
-  const [allSelfSentMessagesCount] = createResource(() => overallSentMessagesQuery(SELF_ID).executeTakeFirstOrThrow());
+  const [allSelfSentMessagesCount] = createResource(() => overallSentMessagesQuery(SELF_ID));
 
   const [roomOverview] = createResource<RoomOverview[]>(async () => {
-    return (await threadOverviewQuery.execute()).map((row) => {
+    return (await allThreadsOverviewQuery()).rows.map((row) => {
       const isGroup = row.title !== null;
 
+      console.log(row);
+
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       const name = (
         isGroup
@@ -33,13 +35,18 @@ export const Overview: Component<RouteSectionProps> = () => {
     });
   });
 
+  createEffect(() => {
+    console.log(roomOverview());
+  });
+
   return (
     <div>
-      <p>All messages: {allSelfSentMessagesCount()?.message_count as number}</p>
+      <p>All messages: {allSelfSentMessagesCount()?.messageCount as number}</p>
       <Show
         when={!roomOverview.loading}
         fallback="Loading..."
       >
+        {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
         <OverviewTable data={roomOverview()!} />;
       </Show>
     </div>

src/pages/overview/overview-table.tsx

@@ -1,4 +1,5 @@
 import { type Component, createSignal, For, Match, Show, Switch } from "solid-js";
+import { useNavigate } from "@solidjs/router";
 
 import {
   type ColumnFiltersState,
@@ -37,7 +38,7 @@ export interface RoomOverview {
 
 const columnHelper = createColumnHelper<RoomOverview>();
 
-const archivedFilterFn: FilterFn<RoomOverview> = (row, columnId, filterValue) => {
+const archivedFilterFn: FilterFn<RoomOverview> = (row, _columnId, filterValue) => {
   if (filterValue === true) {
     return true;
   }
@@ -241,6 +242,8 @@ export const OverviewTable = (props: OverviewTableProps) => {
     },
   });
 
+  const navigate = useNavigate();
+
   return (
     <div>
       <div class="flex flex-row items-center gap-x-4">
@@ -304,8 +307,14 @@ export const OverviewTable = (props: OverviewTableProps) => {
             <For each={table.getRowModel().rows}>
               {(row) => (
                 <TableRow
-                  class="[&:last-of-type>td:first-of-type]:rounded-bl-md [&:last-of-type>td:last-of-type]:rounded-br-md"
+                  class="cursor-pointer [&:last-of-type>td:first-of-type]:rounded-bl-md [&:last-of-type>td:last-of-type]:rounded-br-md"
                   data-state={row.getIsSelected() && "selected"}
+                  onClick={() => {
+                    const threadId = row.original.threadId;
+                    const isGroup = row.original.isGroup;
+
+                    navigate(`/${isGroup ? "group" : "dm"}/${threadId.toString()}`);
+                  }}
                 >
                   <For each={row.getVisibleCells()}>
                     {(cell) => (