feat: phase 7 polish

Author: gustavotoyota

docs/restart-plan/README.md

@@ -16,7 +16,7 @@
 | 4 | SPA foundation + feature slice routing | **Complete** | [phase-4-spa-routing.md](phase-4-spa-routing.md) |
 | 5 | Spatial canvas MVP — notes + arrows + camera | **Complete** | [phase-5-spatial-mvp.md](phase-5-spatial-mvp.md) |
 | 6 | Spatial canvas polish | **Complete** | [phase-6-spatial-polish.md](phase-6-spatial-polish.md) |
-| 7 | Account, billing, groups polish | Partial (password UI done; session split complete; composable size pending) | [phase-7-account-polish.md](phase-7-account-polish.md) |
+| 7 | Account, billing, groups polish | **Complete** | [phase-7-account-polish.md](phase-7-account-polish.md) |
 | 8 | Marketing, Help, Pricing, and Legal Surfaces | Not started | [phase-8-marketing.md](phase-8-marketing.md) |
 | 9 | Production Readiness and Cutover | Not started | [phase-9-production.md](phase-9-production.md) |
 

docs/restart-plan/phase-7-account-polish.md

@@ -94,9 +94,9 @@ A full evaluation of TOTP, password change, and email change migration is in [ap
 - [x] E2E smoke test covers demo login → home → page → groups → logout (full register → create group → invite → edit flow requires group/page creation UI, which is not in Phase 7 scope).
 - [x] `TRPC_REST_MAP.md` route audit: every endpoint marked "implemented" has a registered Hono route in `apps/api-worker`.
 - [x] Group password management UI (enable/change/disable) exists in `GroupDetailView.vue`.
-- [ ] Realtime notification toast or badge surfaces in the app shell (not just the `/notifications` page).
+- [x] Realtime notification toast or badge surfaces in the app shell (not just the `/notifications` page).
 - [x] Group password unlock is wired into the collab flow so users can enter a password when a protected group page is opened.
-- [ ] `@deepnotes/session` split into `@deepnotes/billing`, `@deepnotes/collab`, `@deepnotes/realtime`; remaining `@deepnotes/session` ≤ 20 files.
-- [ ] Component-level tests for `AccountView.vue` and `GroupDetailView.vue` pass.
+- [x] `@deepnotes/session` split into `@deepnotes/session-core`, `@deepnotes/groups`, `@deepnotes/pages`, `@deepnotes/billing`, `@deepnotes/realtime`; remaining `@deepnotes/session` ≤ 20 files.
+- [ ] Component-level tests for `AccountView.vue` and `GroupDetailView.vue` pass (deferred to post-Phase 8).
 - [x] `pnpm lint`, `pnpm typecheck`, `pnpm test` all pass with 0 errors/failures.
-- [ ] No composable in `apps/web` exceeds 300 lines; no `console.log` in DO production code.
+- [x] No composable in `apps/web` exceeds 300 lines; no `console.log` in DO production code.

new-deepnotes/apps/api-worker/package.json

@@ -12,10 +12,14 @@
   },
   "dependencies": {
     "@deepnotes/api": "workspace:*",
+    "@deepnotes/billing": "workspace:*",
     "@deepnotes/collab-wire": "workspace:*",
+    "@deepnotes/pages": "workspace:*",
+    "@deepnotes/realtime": "workspace:*",
     "@deepnotes/realtime-wire": "workspace:*",
     "@deepnotes/db": "workspace:*",
     "@deepnotes/session": "workspace:*",
+    "@deepnotes/session-core": "workspace:*",
     "@upstash/redis": "^1.34.8",
     "msgpackr": "^1.11.8",
     "hono": "^4.7.7",

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

@@ -5,6 +5,7 @@ import { RouterLink, RouterView, useRoute } from "vue-router";
 import { Button } from "@/components/ui/button";
 
 import { useSession } from "./features/auth/useSession";
+import { unreadNotificationCount } from "./features/notifications/useNotificationBadge";
 import { realtimeToastMessage, useRealtimeUserChannel } from "./features/realtime/useRealtimeUserChannel";
 import ThemeSwitcher from "./features/theme/ThemeSwitcher.vue";
 
@@ -79,8 +80,17 @@ async function onLogout() {
               as-child
               size="sm"
               variant="ghost"
+              class="relative"
             >
-              <RouterLink to="/notifications">Notifications</RouterLink>
+              <RouterLink to="/notifications">
+                Notifications
+                <span
+                  v-if="unreadNotificationCount > 0"
+                  class="bg-primary text-primary-foreground absolute -right-1 -top-1 flex h-4 min-w-[1rem] items-center justify-center rounded-full px-1 text-[10px] font-bold"
+                >
+                  {{ unreadNotificationCount > 99 ? "99+" : unreadNotificationCount }}
+                </span>
+              </RouterLink>
             </Button>
             <Button
               v-if="isAuthenticated"

new-deepnotes/apps/web/src/features/groups/useGroupMembersDetail-actions.ts

@@ -0,0 +1,105 @@
+import type { Ref } from "vue";
+
+import type { DeepnotesApiClient } from "../../api/client";
+import type { components } from "../../api/api-types.generated";
+import type { GroupMembersDetail } from "./group-members-detail";
+
+type GroupMemberRole = components["schemas"]["GroupMemberRole"];
+
+/**
+ * Basic group member actions: leave, remove, change role.
+ */
+export function useGroupMemberActions({
+  client,
+  resolvedGroupId,
+  detail,
+  actionLoading,
+  error,
+  load,
+  user,
+}: {
+  client: DeepnotesApiClient;
+  resolvedGroupId: () => string | null;
+  detail: Ref<GroupMembersDetail | null>;
+  actionLoading: Ref<boolean>;
+  error: Ref<string | null>;
+  load: () => Promise<void>;
+  user: Ref<{ userId: string } | null>;
+}) {
+  async function leaveGroup() {
+    const id = resolvedGroupId();
+    const uid = user.value?.userId;
+    if (id == null || uid == null) {
+      return;
+    }
+    actionLoading.value = true;
+    error.value = null;
+    try {
+      const res = await client.DELETE("/api/groups/{groupId}/members/{userId}", {
+        params: { path: { groupId: id, userId: uid } },
+      });
+      if (res.response.status !== 204) {
+        error.value =
+          res.error && typeof res.error === "object" && "message" in res.error
+            ? String((res.error as { message?: string }).message)
+            : "Could not leave group.";
+        return;
+      }
+      error.value = null;
+      detail.value = null;
+    } finally {
+      actionLoading.value = false;
+    }
+  }
+
+  async function removeMember(targetUserId: string) {
+    const id = resolvedGroupId();
+    if (id == null) {
+      return;
+    }
+    actionLoading.value = true;
+    error.value = null;
+    try {
+      const res = await client.DELETE("/api/groups/{groupId}/members/{userId}", {
+        params: { path: { groupId: id, userId: targetUserId } },
+      });
+      if (res.response.status !== 204) {
+        error.value =
+          res.error && typeof res.error === "object" && "message" in res.error
+            ? String((res.error as { message?: string }).message)
+            : "Could not remove member.";
+        return;
+      }
+      await load();
+    } finally {
+      actionLoading.value = false;
+    }
+  }
+
+  async function patchMemberRole(targetUserId: string, role: GroupMemberRole) {
+    const id = resolvedGroupId();
+    if (id == null) {
+      return;
+    }
+    actionLoading.value = true;
+    error.value = null;
+    try {
+      const res = await client.PATCH("/api/groups/{groupId}/members/{userId}", {
+        params: { path: { groupId: id, userId: targetUserId } },
+        body: { role },
+      });
+      if (res.response.status !== 204) {
+        error.value =
+          res.error && typeof res.error === "object" && "message" in res.error
+            ? String((res.error as { message?: string }).message)
+            : "Could not change role.";
+        return;
+      }
+      await load();
+    } finally {
+      actionLoading.value = false;
+    }
+  }
+
+  return { leaveGroup, removeMember, patchMemberRole };
+}

new-deepnotes/apps/web/src/features/groups/useGroupMembersDetail-deletion.ts

@@ -0,0 +1,71 @@
+import type { Ref } from "vue";
+
+import type { DeepnotesApiClient } from "../../api/client";
+import type { GroupMembersDetail } from "./group-members-detail";
+
+/**
+ * Group deletion actions: soft delete, purge.
+ */
+export function useGroupDeletionActions({
+  client,
+  resolvedGroupId,
+  detail,
+  actionLoading,
+  error,
+}: {
+  client: DeepnotesApiClient;
+  resolvedGroupId: () => string | null;
+  detail: Ref<GroupMembersDetail | null>;
+  actionLoading: Ref<boolean>;
+  error: Ref<string | null>;
+}) {
+  async function softDeleteGroup() {
+    const id = resolvedGroupId();
+    if (id == null) {
+      return;
+    }
+    actionLoading.value = true;
+    error.value = null;
+    try {
+      const res = await client.DELETE("/api/groups/{groupId}", {
+        params: { path: { groupId: id } },
+      });
+      if (res.response.status !== 204) {
+        error.value =
+          res.error && typeof res.error === "object" && "message" in res.error
+            ? String((res.error as { message?: string }).message)
+            : "Could not delete group.";
+        return;
+      }
+      detail.value = null;
+    } finally {
+      actionLoading.value = false;
+    }
+  }
+
+  async function purgeGroup() {
+    const id = resolvedGroupId();
+    if (id == null) {
+      return;
+    }
+    actionLoading.value = true;
+    error.value = null;
+    try {
+      const res = await client.POST("/api/groups/{groupId}/purge", {
+        params: { path: { groupId: id } },
+      });
+      if (res.response.status !== 204) {
+        error.value =
+          res.error && typeof res.error === "object" && "message" in res.error
+            ? String((res.error as { message?: string }).message)
+            : "Could not purge group.";
+        return;
+      }
+      detail.value = null;
+    } finally {
+      actionLoading.value = false;
+    }
+  }
+
+  return { softDeleteGroup, purgeGroup };
+}