feat(dm): more stats

src/pages/overview/index.tsx

@@ -5,6 +5,7 @@ import { allThreadsOverviewQuery, overallSentMessagesQuery, SELF_ID } from "~/db
 
 import { OverviewTable, type RoomOverview } from "./overview-table";
 import { getNameFromRecipient } from "~/lib/get-name-from-recipient";
+import { Title } from "@solidjs/meta";
 
 export const Overview: Component<RouteSectionProps> = () => {
   const [allSelfSentMessagesCount] = createResource(() => overallSentMessagesQuery(SELF_ID));
@@ -34,12 +35,16 @@ export const Overview: Component<RouteSectionProps> = () => {
   });
 
   return (
-    <div>
-      <p>All messages: {allSelfSentMessagesCount()?.messageCount as number}</p>
-      <Show when={!roomOverview.loading && roomOverview()} fallback="Loading...">
-        {(currentRoomOverview) => <OverviewTable data={currentRoomOverview()} />}
-      </Show>
-    </div>
+    <>
+      <Title>Signal statistics overview</Title>
+
+      <div>
+        <p>All messages: {allSelfSentMessagesCount()?.messageCount as number}</p>
+        <Show when={!roomOverview.loading && roomOverview()} fallback="Loading...">
+          {(currentRoomOverview) => <OverviewTable data={currentRoomOverview()} />}
+        </Show>
+      </div>
+    </>
   );
 };
 

src/pages/overview/overview-table.tsx

@@ -47,6 +47,14 @@ const archivedFilterFn: FilterFn<RoomOverview> = (row, _columnId, filterValue) =
   return !row.original.archived;
 };
 
+const isGroupFilterFn: FilterFn<RoomOverview> = (row, _columnId, filterValue) => {
+  if (filterValue === true) {
+    return true;
+  }
+
+  return !row.original.isGroup;
+};
+
 const SortingDisplay: Component<{ sorting: false | SortDirection; class?: string; activeClass?: string }> = (props) => {
   return (
     <Switch>
@@ -166,7 +174,7 @@ export const columns = [
     filterFn: archivedFilterFn,
   }),
   columnHelper.accessor("isGroup", {
-    header: "Group",
+    header: "isGroup",
     cell: (props) => {
       return (
         <Show when={props.cell.getValue()}>
@@ -174,6 +182,7 @@ export const columns = [
         </Show>
       );
     },
+    filterFn: isGroupFilterFn,
   }),
 ];
 
@@ -193,6 +202,10 @@ export const OverviewTable = (props: OverviewTableProps) => {
       id: "archived",
       value: false,
     },
+    {
+      id: "isGroup",
+      value: false,
+    },
   ]);
 
   const table = createSolidTable({
@@ -250,6 +263,16 @@ export const OverviewTable = (props: OverviewTableProps) => {
             <Label for="show-archived">Show archived chats</Label>
           </div>
         </div>
+        <div class="flex items-start space-x-2">
+          <Checkbox
+            id="show-archived"
+            checked={(table.getColumn("isGroup")?.getFilterValue() as boolean | undefined) ?? false}
+            onChange={(value) => table.getColumn("isGroup")?.setFilterValue(value)}
+          />
+          <div class="grid gap-1.5 leading-none">
+            <Label for="show-archived">Show group chats (detailed analysis not implemented)</Label>
+          </div>
+        </div>
       </div>
       <Table class="border-separate border-spacing-0">
         <TableHeader>