feat(new-deepnotes): notifications list route, tests, and plan progress

Author: gustavotoyota

new-deepnotes/PLAN_PROGRESS.md

@@ -17,6 +17,7 @@ Vue 3 SPA for the greenfield stack. The bundle talks to the API only through [`s
 - `src/features/auth/` — session bootstrap (`/api/sessions/refresh` + `GET /api/users/me` when the `loggedIn` cookie is set), demo login, email/password + 2FA step, shared helpers.
 - `src/features/home/` — first shell screen after auth.
 - `src/features/groups/` — `GET /api/users/me/groups` plus per-group `main-page`, `members`, and `pages` (first window) for a read-only [Groups](src/features/groups/GroupsView.vue) screen (`/groups`, signed-in only).
+- `src/features/notifications/` — `GET /api/users/me/notifications` and `POST …/notifications/read` for [Notifications](src/features/notifications/NotificationsView.vue) (`/notifications`, signed-in only; list shows `type` + time, bodies stay encrypted in this MVP).
 - `src/router.ts` — `vue-router` history routes.
 
 ## Local dev

new-deepnotes/apps/web/README.md

@@ -56,6 +56,14 @@ async function onLogout() {
           >
             <RouterLink to="/groups">Groups</RouterLink>
           </Button>
+          <Button
+            v-if="isAuthenticated"
+            as-child
+            size="sm"
+            variant="ghost"
+          >
+            <RouterLink to="/notifications">Notifications</RouterLink>
+          </Button>
           <template v-if="!isAuthenticated">
             <Button as-child variant="ghost" size="sm">
               <RouterLink to="/register">Register</RouterLink>

new-deepnotes/apps/web/src/App.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { watch } from "vue";
+import { useRouter } from "vue-router";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+import { useSession } from "../auth/useSession";
+import { useNotifications } from "./useNotifications";
+
+const router = useRouter();
+const { isAuthenticated, bootstrapped } = useSession();
+const {
+  rows,
+  loadFirst,
+  loadMore,
+  markRead,
+  loading,
+  error,
+  hasMore,
+  markingRead,
+} = useNotifications();
+
+watch(
+  [bootstrapped, isAuthenticated],
+  () => {
+    if (!bootstrapped.value) {
+      return;
+    }
+    if (!isAuthenticated.value) {
+      void router.replace({ name: "login", query: { redirect: "/notifications" } });
+      return;
+    }
+    void loadFirst();
+  },
+  { immediate: true },
+);
+
+function formatWhen(iso: string): string {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) {
+    return iso;
+  }
+  return new Intl.DateTimeFormat(undefined, {
+    dateStyle: "medium",
+    timeStyle: "short",
+  }).format(d);
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div class="flex flex-wrap items-center justify-between gap-2">
+      <h1 class="text-lg font-semibold tracking-tight">Notifications</h1>
+      <div class="flex flex-wrap gap-2">
+        <Button
+          v-if="isAuthenticated && rows.length > 0"
+          :disabled="markingRead || loading"
+          size="sm"
+          variant="secondary"
+          @click="markRead()"
+        >
+          Mark all as read
+        </Button>
+        <Button
+          v-if="isAuthenticated"
+          :disabled="loading"
+          size="sm"
+          variant="outline"
+          @click="loadFirst()"
+        >
+          Refresh
+        </Button>
+      </div>
+    </div>
+
+    <p class="text-muted-foreground text-sm">
+      This list shows type and time. Message bodies stay encrypted in the API response.
+    </p>
+
+    <p
+      v-if="!bootstrapped || (loading && rows.length === 0)"
+      class="text-muted-foreground text-sm"
+    >
+      Loading…
+    </p>
+    <p v-else-if="error" class="text-destructive text-sm">
+      {{ error }}
+    </p>
+    <ul
+      v-else-if="rows.length > 0"
+      class="space-y-3"
+    >
+      <li v-for="n in rows" :key="n.id">
+        <Card :class="n.unread ? 'border-primary/40 bg-muted/30' : ''">
+          <CardHeader class="pb-2">
+            <div class="flex items-start justify-between gap-2">
+              <CardTitle class="text-base">
+                {{ n.type }}
+                <span
+                  v-if="n.unread"
+                  class="bg-primary text-primary-foreground ml-2 inline-block rounded px-1.5 py-0.5 text-xs font-medium"
+                >New</span>
+              </CardTitle>
+              <CardDescription class="shrink-0 text-xs">
+                {{ formatWhen(n.dateTime) }}
+              </CardDescription>
+            </div>
+          </CardHeader>
+          <CardContent class="text-muted-foreground text-xs">
+            Message body is not shown (encrypted).
+          </CardContent>
+        </Card>
+      </li>
+    </ul>
+    <p
+      v-else
+      class="text-muted-foreground text-sm"
+    >
+      No notifications.
+    </p>
+
+    <div v-if="hasMore" class="flex justify-center">
+      <Button
+        :disabled="loading"
+        size="sm"
+        variant="outline"
+        @click="loadMore()"
+      >
+        {{ loading ? "Loading…" : "Load older" }}
+      </Button>
+    </div>
+  </div>
+</template>

new-deepnotes/apps/web/src/features/notifications/NotificationsView.vue

@@ -0,0 +1,109 @@
+import { describe, expect, it, vi } from "vitest";
+
+import type { DeepnotesApiClient } from "../../api/client";
+import {
+  fetchNotificationsPage,
+  isNotificationUnread,
+  markAllNotificationsRead,
+} from "./notifications-list";
+
+describe("isNotificationUnread", () => {
+  it("treats all as unread when the user has no read cursor", () => {
+    expect(isNotificationUnread(42, null)).toBe(true);
+  });
+
+  it("compares id to the stored read cursor", () => {
+    expect(isNotificationUnread(5, 4)).toBe(true);
+    expect(isNotificationUnread(4, 4)).toBe(false);
+    expect(isNotificationUnread(3, 4)).toBe(false);
+  });
+});
+
+describe("fetchNotificationsPage", () => {
+  it("maps items and first-page read cursor", async () => {
+    const client = {
+      GET: vi.fn().mockResolvedValue({
+        response: { status: 200 },
+        data: {
+          items: [
+            {
+              id: 10,
+              type: "group-invite",
+              encryptedSymmetricKey: "YQ==",
+              encryptedContent: "Yg==",
+              dateTime: "2026-01-01T12:00:00.000Z",
+            },
+          ],
+          hasMore: false,
+          lastNotificationRead: 4,
+        },
+      }),
+    };
+    const out = await fetchNotificationsPage({
+      client: client as unknown as DeepnotesApiClient,
+    });
+    expect(out.error).toBeNull();
+    expect(out.hasMore).toBe(false);
+    expect(out.lastNotificationRead).toBe(4);
+    expect(out.rows[0]).toMatchObject({
+      id: 10,
+      type: "group-invite",
+      unread: true,
+    });
+  });
+
+  it("uses readCursorForUnread when loading older pages", async () => {
+    const client = {
+      GET: vi.fn().mockResolvedValue({
+        response: { status: 200 },
+        data: {
+          items: [
+            {
+              id: 2,
+              type: "old",
+              encryptedSymmetricKey: "YQ==",
+              encryptedContent: "Yg==",
+              dateTime: "2025-01-01T12:00:00.000Z",
+            },
+          ],
+          hasMore: false,
+        },
+      }),
+    };
+    const out = await fetchNotificationsPage({
+      client: client as unknown as DeepnotesApiClient,
+      lastNotificationId: 10,
+      readCursorForUnread: 5,
+    });
+    expect(out.rows[0]?.unread).toBe(false);
+  });
+
+  it("returns an error on failed GET", async () => {
+    const client = {
+      GET: vi.fn().mockResolvedValue({
+        response: { status: 401 },
+        error: { message: "No session" },
+        data: undefined,
+      }),
+    };
+    const out = await fetchNotificationsPage({
+      client: client as unknown as DeepnotesApiClient,
+    });
+    expect(out.rows).toEqual([]);
+    expect(out.error).toBe("No session");
+  });
+});
+
+describe("markAllNotificationsRead", () => {
+  it("returns ok on 204", async () => {
+    const client = {
+      POST: vi.fn().mockResolvedValue({
+        response: { status: 204 },
+      }),
+    };
+    const out = await markAllNotificationsRead({
+      client: client as unknown as DeepnotesApiClient,
+    });
+    expect(out).toEqual({ ok: true, error: null });
+  });
+});

new-deepnotes/apps/web/src/features/notifications/notifications-list.test.ts

@@ -0,0 +1,101 @@
+import type { DeepnotesApiClient } from "../../api/client";
+
+export type NotificationRow = {
+  id: number;
+  type: string;
+  dateTime: string;
+  /** True when this row is newer than the server’s read cursor (or cursor unset). */
+  unread: boolean;
+};
+
+/**
+ * `GET /api/users/me/notifications` with optional older-than pagination.
+ * The API includes `lastNotificationRead` on the first page only; for `load more`,
+ * pass the same cursor you stored from the first response so unread badges stay
+ * correct.
+ * Payload ciphertext is not decrypted here; the UI shows type + time only.
+ */
+export async function fetchNotificationsPage(input: {
+  client: DeepnotesApiClient;
+  lastNotificationId?: number;
+  /** Required when `lastNotificationId` is set — the read cursor from the first page. */
+  readCursorForUnread?: number | null;
+}): Promise<{
+  rows: NotificationRow[];
+  hasMore: boolean;
+  lastNotificationRead: number | null | undefined;
+  error: string | null;
+}> {
+  const { client, lastNotificationId, readCursorForUnread } = input;
+  const res = await client.GET("/api/users/me/notifications", {
+    params: {
+      query:
+        lastNotificationId != null ? { lastNotificationId } : {},
+    },
+  });
+
+  if (res.response.status !== 200 || !res.data) {
+    if (res.error && typeof res.error === "object" && "message" in res.error) {
+      return {
+        rows: [],
+        hasMore: false,
+        lastNotificationRead: undefined,
+        error: String((res.error as { message?: string }).message),
+      };
+    }
+    return {
+      rows: [],
+      hasMore: false,
+      lastNotificationRead: undefined,
+      error: "Could not load notifications.",
+    };
+  }
+
+  const { items, hasMore, lastNotificationRead } = res.data;
+  const readCursor =
+    lastNotificationId == null
+      ? (lastNotificationRead ?? null)
+      : (readCursorForUnread ?? null);
+
+  const rows: NotificationRow[] = items.map((it) => ({
+    id: it.id,
+    type: it.type,
+    dateTime: it.dateTime,
+    unread: isNotificationUnread(it.id, readCursor),
+  }));
+
+  return {
+    rows,
+    hasMore: Boolean(hasMore),
+    lastNotificationRead:
+      lastNotificationId == null ? (lastNotificationRead ?? null) : undefined,
+    error: null,
+  };
+}
+
+/** Server stores the newest notification id the user has acknowledged. */
+export function isNotificationUnread(
+  notificationId: number,
+  lastNotificationRead: number | null,
+): boolean {
+  if (lastNotificationRead == null) {
+    return true;
+  }
+  return notificationId > lastNotificationRead;
+}
+
+export async function markAllNotificationsRead(input: {
+  client: DeepnotesApiClient;
+}): Promise<{ ok: boolean; error: string | null }> {
+  const res = await input.client.POST("/api/users/me/notifications/read", {});
+  if (res.response.status === 204) {
+    return { ok: true, error: null };
+  }
+  if (res.error && typeof res.error === "object" && "message" in res.error) {
+    return {
+      ok: false,
+      error: String((res.error as { message?: string }).message),
+    };
+  }
+  return { ok: false, error: "Could not update read state." };
+}