chore: update dependencies

src/pages/dm/dm-id.tsx

@@ -1,7 +1,7 @@
 import { Suspense, type Component } from "solid-js";
 import { createAsync, type RoutePreloadFunc, type RouteSectionProps } from "@solidjs/router";
 
-import { dmPartnerRecipientQuery, threadMostUsedWordsQuery, threadSentMessagesOverviewQuery } from "~/db-queries";
+import { dmPartnerRecipientQuery, threadMostUsedWordsQuery, threadSentMessagesOverviewQuery, SELF_ID } from "~/db";
 import { getNameFromRecipient } from "~/lib/get-name-from-recipient";
 import { Heading } from "~/components/ui/heading";
 import { Grid } from "~/components/ui/grid";
@@ -15,7 +15,6 @@ import { DmMessagesPerRecipient } from "./dm-messages-per-recipients";
 import { DmMessagesPerWeekday } from "./dm-messages-per-weekday";
 import type { MessageOverview } from "~/types";
 import { createMessageStatsSources } from "~/lib/messages";
-import { SELF_ID } from "~/db";
 import { Flex } from "~/components/ui/flex";
 
 const getDmIdData = (dmId: number) => {

src/pages/dm/dm-wordcloud.tsx

@@ -1,7 +1,7 @@
 import type { ChartData } from "chart.js";
 import { Show, type Accessor, type Component } from "solid-js";
 import { WordCloudChart } from "~/components/ui/charts";
-import type { threadMostUsedWordsQuery } from "~/db-queries";
+import type { threadMostUsedWordsQuery } from "~/db";
 
 const maxWordSize = 100;
 

src/pages/home.tsx

@@ -1,41 +1,60 @@
 import { useNavigate, type RouteSectionProps } from "@solidjs/router";
-import { createSignal, Show, type Component, type JSX } from "solid-js";
+import { createSignal, type JSX, Show, type Component } from "solid-js";
 
 import { Title } from "@solidjs/meta";
 import { Portal } from "solid-js/web";
 import { Flex } from "~/components/ui/flex";
 
-import {
-  Progress,
-  ProgressLabel,
-  ProgressValueLabel,
-} from "~/components/ui/progress";
-// import { db } from "~/db";
-import { loadDb } from "~/db-queries";
+import { Progress, ProgressLabel, ProgressValueLabel } from "~/components/ui/progress";
+import { loadDb } from "~/db/db-queries";
 import { decryptBackup } from "~/lib/decryptor";
+import { createDropzone, createFileUploader } from "@solid-primitives/upload";
+import { Button } from "~/components/ui/button";
+import { TextField, TextFieldInput, TextFieldLabel } from "~/components/ui/text-field";
 
 export const Home: Component<RouteSectionProps> = () => {
-  const [decryptionProgress, setDecryptionProgress] = createSignal<number>();
-  const [isLoadingDatabase, setIsLoadingDatabase] = createSignal(false);
-  const [passphrase, setPassphrase] = createSignal("");
   const navigate = useNavigate();
 
-  const onFileChange: JSX.ChangeEventHandler<HTMLInputElement, Event> = (
-    event,
-  ) => {
-    const file = event.currentTarget.files?.[0];
+  const fileUploader = createFileUploader({
+    accept: ".backup",
+    multiple: false,
+  });
+
+  const dropzone = createDropzone({
+    onDrop: (files) => {
+      const file = files.at(0);
+
+      if (file?.name.endsWith(".backup")) {
+        setBackupFile(file.file);
+      }
+    },
+  });
+
+  const [passphrase, setPassphrase] = createSignal("");
+  const [backupFile, setBackupFile] = createSignal<File>();
+
+  const [decryptionProgress, setDecryptionProgress] = createSignal<number>();
+  const [loadingProgress, setLoadingProgress] = createSignal<number>();
+  // const [isLoadingDatabase, setIsLoadingDatabase] = createSignal(false);
+
+  const onSubmit: JSX.EventHandler<HTMLFormElement, SubmitEvent> = (event) => {
+    event.preventDefault();
+
+    const currentBackupFile = backupFile();
     const currentPassphrase = passphrase();
 
-    if (file && currentPassphrase) {
-      decryptBackup(file, currentPassphrase, setDecryptionProgress)
+    if (currentBackupFile && currentPassphrase) {
+      decryptBackup(currentBackupFile, currentPassphrase, setDecryptionProgress)
         .then((result) => {
           setDecryptionProgress(undefined);
-          setIsLoadingDatabase(true);
+          // setIsLoadingDatabase(true);
+          setLoadingProgress(0);
 
           setTimeout(() => {
-            loadDb(result.database_statements);
+            loadDb(result.database_statements, (newValue) => (console.log(newValue), setLoadingProgress(newValue)));
 
-            setIsLoadingDatabase(false);
+            // setIsLoadingDatabase(false);
+            setLoadingProgress(undefined);
 
             navigate("/overview");
           }, 0);
@@ -53,9 +72,10 @@ export const Home: Component<RouteSectionProps> = () => {
           flexDirection="col"
           alignItems="center"
           justifyContent="center"
-          class="fixed inset-0 backdrop-blur-lg backdrop-filter gap-y-8"
+          class="fixed inset-0 gap-y-8 backdrop-blur-lg backdrop-filter"
           classList={{
-            hidden: decryptionProgress() === undefined && !isLoadingDatabase(),
+            // hidden: decryptionProgress() === undefined && !isLoadingDatabase(),
+            hidden: decryptionProgress() === undefined && loadingProgress() === undefined,
           }}
         >
           <Show when={decryptionProgress() !== undefined}>
@@ -73,19 +93,62 @@ export const Home: Component<RouteSectionProps> = () => {
               </div>
             </Progress>
           </Show>
-          <Show when={isLoadingDatabase()}>
+          <Show when={loadingProgress() !== undefined}>
+            {/* <p class="font-bold text-2xl">Loading database</p>
+            <p class="text-muted-foreground">This can take some time</p> */}
             <p class="font-bold text-2xl">Loading database</p>
+            <Progress
+              value={loadingProgress()}
+              minValue={0}
+              maxValue={100}
+              getValueLabel={({ value }) => `${value}%`}
+              class="w-[300px] space-y-1"
+            >
+              <div class="flex justify-between">
+                <ProgressLabel>Loading...</ProgressLabel>
+                <ProgressValueLabel />
+              </div>
+            </Progress>
           </Show>
         </Flex>
       </Portal>
       <Title>Signal stats</Title>
-      <div>
-        <input
-          type="password"
-          onChange={(event) => setPassphrase(event.currentTarget.value)}
-        />
-        <input type="file" accept=".backup" onChange={onFileChange} />
-      </div>
+      <form class="flex flex-col gap-y-8 p-8" onSubmit={onSubmit}>
+        <TextField onChange={(value) => setPassphrase(value)}>
+          <TextFieldLabel>Passphrase</TextFieldLabel>
+          <TextFieldInput type="password" class="max-w-md" />
+        </TextField>
+        <Flex
+          ref={dropzone.setRef}
+          justifyContent="center"
+          alignItems="center"
+          class="relative min-h-32 min-w-96 max-w-xl rounded-lg border-4 border-border border-dashed"
+          classList={{
+            "border-ring": dropzone.isDragging(),
+          }}
+        >
+          <Button
+            onClick={() =>
+              fileUploader.selectFiles((files) => {
+                setBackupFile(files.at(0)?.file);
+              })
+            }
+          >
+            Select backup file
+          </Button>
+          <span
+            class="absolute bottom-2"
+            classList={{
+              "text-muted-foreground": !backupFile(),
+            }}
+          >
+            {backupFile() ? backupFile()?.name : "or drop the file here"}
+          </span>
+        </Flex>
+        <Button type="submit" class="max-w-72">
+          Decrypt and load backup
+        </Button>
+      </form>
     </>
   );
 };

src/pages/overview/index.tsx

@@ -1,67 +1,48 @@
 import type { RouteSectionProps } from "@solidjs/router";
 import { type Component, createResource, Show } from "solid-js";
 
-import {
-  allThreadsOverviewQuery,
-  overallSentMessagesQuery,
-} from "~/db-queries";
+import { allThreadsOverviewQuery, overallSentMessagesQuery, SELF_ID } from "~/db";
 
 import { Title } from "@solidjs/meta";
-import { SELF_ID } from "~/db";
 import { getNameFromRecipient } from "~/lib/get-name-from-recipient";
 import { OverviewTable, type RoomOverview } from "./overview-table";
 
 export const Overview: Component<RouteSectionProps> = () => {
-  const [allSelfSentMessagesCount] = createResource(() =>
-    overallSentMessagesQuery(SELF_ID),
-  );
+  const [allSelfSentMessagesCount] = createResource(() => overallSentMessagesQuery(SELF_ID));
 
-  const [roomOverview] = createResource<RoomOverview[] | undefined>(
-    async () => {
-      return (await allThreadsOverviewQuery())?.map((row) => {
-        const isGroup = row.title !== null;
+  const [roomOverview] = createResource<RoomOverview[] | undefined>(async () => {
+    return (await allThreadsOverviewQuery())?.map((row) => {
+      const isGroup = row.title !== null;
 
-        let name = "";
+      let name = "";
 
-        if (row.title !== null) {
-          name = row.title;
-        } else {
-          name = getNameFromRecipient(
-            row.nickname_joined_name,
-            row.system_joined_name,
-            row.profile_joined_name,
-          );
-        }
+      if (row.title !== null) {
+        name = row.title;
+      } else {
+        name = getNameFromRecipient(row.nickname_joined_name, row.system_joined_name, row.profile_joined_name);
+      }
 
-        return {
-          threadId: row.thread_id,
-          recipientId: row.recipient_id,
-          archived: Boolean(row.archived),
-          messageCount: row.message_count,
-          lastMessageDate: row.last_message_date
-            ? new Date(row.last_message_date)
-            : undefined,
-          name,
-          isGroup,
-        };
-      });
-    },
-  );
+      return {
+        threadId: row.thread_id,
+        recipientId: row.recipient_id,
+        archived: Boolean(row.archived),
+        messageCount: row.message_count,
+        lastMessageDate: row.last_message_date ? new Date(row.last_message_date) : undefined,
+        name,
+        isGroup,
+      };
+    });
+  });
 
   return (
     <>
       <Title>Signal statistics overview</Title>
 
       <div>
-        <p>
-          All messages: {allSelfSentMessagesCount()?.messageCount as number}
-        </p>
-        <Show
-          when={!roomOverview.loading && roomOverview()}
-          fallback="Loading..."
-        >
+        <p>All messages: {allSelfSentMessagesCount()?.messageCount as number}</p>
+        <Show when={!roomOverview.loading && roomOverview()} fallback="Loading...">
           {(currentRoomOverview) => (
-            <OverviewTable data={currentRoomOverview()} />
+            console.log(currentRoomOverview()), (<OverviewTable data={currentRoomOverview()} />)
           )}
         </Show>
       </div>