create-astram-app 0.12.10 → 0.13.0

package/template/frontend/src/pages/access/accessMatrix.js

@@ -96,3 +96,52 @@ export function actionHeading(action) {
     .map((w, i) => ACRONYMS.get(w) ?? (i === 0 ? w[0].toUpperCase() + w.slice(1) : w));
   return words.join(' ');
 }
+
+/** A key's display label: the catalog label, else "<type name>: <action heading>"; never the raw key. */
+function rowLabel(catalog, row) {
+  if (typeof row.label === 'string' && row.label.trim() !== '') return row.label.trim();
+  const type = typeLabelOf(catalog, row.typeKey);
+  const action = actionHeading(row.action);
+  if (type && action) return `${type}: ${action}`;
+  return type || action || 'Permission';
+}
+
+/**
+ * The working set after a role is picked in ASSIGN mode: the picked role's current grants
+ * (`nextLoaded`) plus the keys the user ticked in the form (`working` minus the previously picked
+ * role's grants, `prevLoaded`). So Save only adds to the role; a revoke needs an explicit untick,
+ * and switching roles drops the previous role's grants instead of copying them. Pure: returns a
+ * new Set, inputs (any iterables) untouched.
+ */
+export function mergePicked(prevLoaded, nextLoaded, working) {
+  const prev = new Set(prevLoaded ?? []);
+  const out = new Set(nextLoaded ?? []);
+  for (const key of working ?? []) if (!prev.has(key)) out.add(key);
+  return out;
+}
+
+/**
+ * The cautions to confirm before saving (G-027 step 5): `[{ key, label, caution }]` for each of
+ * `addedKeys` (any iterable) whose catalog row has a non-blank `caution`, ordered by label (then
+ * key, for a stable order). Keys not in the catalog and blank cautions are ignored; duplicates
+ * collapse. `key` is for React keys / lookups only; user text uses `label` and `caution`.
+ */
+export function cautionsFor(catalog, addedKeys) {
+  const rows = Array.isArray(catalog) ? catalog : [];
+  const byKey = new Map();
+  for (const row of rows) {
+    if (row && typeof row.key === 'string' && !byKey.has(row.key)) byKey.set(row.key, row);
+  }
+  const out = [];
+  const seen = new Set();
+  for (const key of addedKeys ?? []) {
+    if (seen.has(key)) continue;
+    seen.add(key);
+    const row = byKey.get(key);
+    if (!row || typeof row.caution !== 'string') continue;
+    const caution = row.caution.trim();
+    if (!caution) continue;
+    out.push({ key, label: rowLabel(rows, row), caution });
+  }
+  return out.sort((a, b) => a.label.localeCompare(b.label) || (a.key < b.key ? -1 : 1));
+}

package/template/frontend/src/pages/access/accessMatrix.test.mjs

@@ -7,9 +7,11 @@ import { test, describe } from 'node:test';
 import assert from 'node:assert/strict';
 import {
   actionHeading,
+  cautionsFor,
   extraActionsByType,
   humanizeKey,
   matrixActions,
+  mergePicked,
   typeLabelOf,
 } from './accessMatrix.js';
 
@@ -200,3 +202,119 @@ describe('typeLabelOf / actionHeading (G-027 labels in the matrix)', () => {
     assert.equal(actionHeading('read'), 'Read');
   });
 });
+
+describe('cautionsFor (G-027 step 5: confirm cautions before a grant is sent)', () => {
+  const withCaution = (typeKey, action, label, caution, extra = {}) => ({
+    ...row(typeKey, action, label),
+    caution,
+    ...extra,
+  });
+  const catalog = [
+    row('user', 'read', 'Users: view'),
+    withCaution('user', 'delete', 'Users: delete', 'Removes the account for good.'),
+    withCaution('role', 'update', 'Roles: edit', 'Can change what anyone may do.'),
+    withCaution('audit', 'read', 'Audit: view', '   '),
+    withCaution('job', 'run', 'Jobs: run', null),
+  ];
+
+  test('no added keys or no cautioned keys => empty', () => {
+    assert.deepEqual(cautionsFor(catalog, []), []);
+    assert.deepEqual(cautionsFor(catalog, new Set()), []);
+    assert.deepEqual(cautionsFor(catalog, ['app:user:read']), []);
+    assert.deepEqual(cautionsFor(catalog, undefined), []);
+    assert.deepEqual(cautionsFor(null, ['app:user:delete']), []);
+  });
+
+  test('one cautioned key => its label and caution', () => {
+    assert.deepEqual(cautionsFor(catalog, ['app:user:read', 'app:user:delete']), [
+      { key: 'app:user:delete', label: 'Users: delete', caution: 'Removes the account for good.' },
+    ]);
+  });
+
+  test('many => ordered by label, not by input order; duplicates collapse; a Set works', () => {
+    const res = cautionsFor(
+      catalog,
+      new Set(['app:user:delete', 'app:role:update', 'app:user:read']),
+    );
+    assert.deepEqual(
+      res.map((c) => c.label),
+      ['Roles: edit', 'Users: delete'],
+    );
+    const again = cautionsFor(catalog, ['app:role:update', 'app:user:delete', 'app:role:update']);
+    assert.deepEqual(again, res);
+  });
+
+  test('blank or missing caution ignored', () => {
+    assert.deepEqual(cautionsFor(catalog, ['app:audit:read', 'app:job:run']), []);
+  });
+
+  test('unknown key ignored', () => {
+    assert.deepEqual(cautionsFor(catalog, ['app:ghost:read', 'nope']), []);
+  });
+
+  test('caution text is trimmed; a missing label falls back to type + action, never the raw key', () => {
+    const c = [
+      { ...withCaution('company_branch', 'manage_keys', '', '  Mind this.  ') },
+      row('company_branch', 'read', ''),
+    ];
+    const res = cautionsFor(c, ['app:company_branch:manage_keys']);
+    assert.deepEqual(res, [
+      {
+        key: 'app:company_branch:manage_keys',
+        label: 'Company branch: Manage keys',
+        caution: 'Mind this.',
+      },
+    ]);
+    assert.ok(!res[0].label.includes('app:'));
+  });
+
+  test('input catalog is not mutated', () => {
+    const snapshot = JSON.stringify(catalog);
+    cautionsFor(catalog, ['app:user:delete', 'app:role:update']);
+    assert.equal(JSON.stringify(catalog), snapshot);
+  });
+});
+
+describe('mergePicked (assign mode: picking a role keeps its grants)', () => {
+  const sorted = (s) => [...s].sort();
+
+  test('first pick: the role grants plus the pre-ticked key', () => {
+    const res = mergePicked(new Set(), new Set(['app:user:read', 'app:role:read']), [
+      'app:user:invite',
+    ]);
+    assert.deepEqual(sorted(res), ['app:role:read', 'app:user:invite', 'app:user:read']);
+  });
+
+  test('first pick with nothing ticked: exactly the role grants (Save sends nothing)', () => {
+    const grants = ['app:user:read', 'app:*'];
+    assert.deepEqual(sorted(mergePicked([], grants, [])), sorted(grants));
+  });
+
+  test('a key the role already holds is not duplicated', () => {
+    const res = mergePicked([], ['app:user:read'], ['app:user:read']);
+    assert.deepEqual(sorted(res), ['app:user:read']);
+  });
+
+  test("switching roles drops the previous role's grants, keeps the user's ticks", () => {
+    const roleA = ['app:user:read', 'app:user:delete'];
+    const working = ['app:user:read', 'app:user:delete', 'app:job:run'];
+    const res = mergePicked(roleA, ['app:role:read'], working);
+    assert.deepEqual(sorted(res), ['app:job:run', 'app:role:read']);
+  });
+
+  test('clearing the role keeps only the user ticks', () => {
+    const res = mergePicked(['app:user:read'], [], ['app:user:read', 'app:job:run']);
+    assert.deepEqual(sorted(res), ['app:job:run']);
+  });
+
+  test('inputs are not mutated; null-safe', () => {
+    const prev = new Set(['a']);
+    const next = new Set(['b']);
+    const working = new Set(['a', 'c']);
+    mergePicked(prev, next, working);
+    assert.deepEqual(sorted(prev), ['a']);
+    assert.deepEqual(sorted(next), ['b']);
+    assert.deepEqual(sorted(working), ['a', 'c']);
+    assert.deepEqual(sorted(mergePicked(null, undefined, null)), []);
+  });
+});

package/template/frontend/src/shell/AnnouncementsMenu.jsx

@@ -0,0 +1,190 @@
+/**
+ * AnnouncementsMenu — the header Announcements icon (G-027 step 5), shown to every signed-in
+ * user. Badge = unread `announcement` notices + open admin tasks (useNotificationCounts).
+ *
+ * On open: for holders of `identity:role:update`, the open admin tasks (a new permission no role
+ * in a company holds yet): "Grant…" opens `/access/add?key=` with the key ticked; "Reviewed, not
+ * needed" confirms (naming the permission and company) then dismisses. Below, the announcement
+ * notices with the same read behaviour as the bell. The `can` gate is cosmetic: the server
+ * decides, and a 403 on the task list hides the section. Labels and company names only — the
+ * task's company id and key are used in calls and URLs, never shown.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Megaphone, TriangleAlert } from 'lucide-react';
+import { toast } from 'sonner';
+import { useAuth, useCan } from '@/auth/AuthContext';
+import ConfirmDialog from '@/components/ConfirmDialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from '@/components/ui/dropdown-menu';
+import { announcementsBadgeCount, taskSince, taskTitle } from './notificationsView';
+import { TASKS_PERMISSION, useNotificationCounts } from './useNotificationCounts';
+import { HeaderMenuTrigger, MenuError, MenuLoading, NoticeSection } from './NotificationsMenu';
+
+const TASK_LIMIT = 20;
+
+/** The open admin tasks; loads on mount (= menu open). Hidden on a 403. */
+function TasksSection({ onDismiss }) {
+  const { tokens, identity } = useAuth();
+  const navigate = useNavigate();
+  const token = tokens?.accessToken ?? null;
+  const [view, setView] = useState({ status: 'loading', rows: [], total: 0, error: '' });
+  const alive = useRef(true);
+  // Bumped per load (mount, retry): only the latest answer applies, never an older, slower one.
+  const loadSeq = useRef(0);
+
+  useEffect(() => {
+    alive.current = true;
+    return () => {
+      alive.current = false;
+    };
+  }, []);
+
+  const load = useCallback(async () => {
+    if (!token) return;
+    const seq = ++loadSeq.current;
+    const r = await identity.listPermissionAnnouncements(token, {
+      status: 'open',
+      limit: TASK_LIMIT,
+    });
+    if (!alive.current || seq !== loadSeq.current) return;
+    if (r.ok) setView({ status: 'ready', rows: r.rows, total: r.total, error: '' });
+    else if (r.status === 403) setView((v) => ({ ...v, status: 'forbidden' }));
+    else setView((v) => ({ ...v, status: 'error', error: r.error }));
+  }, [identity, token]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  if (view.status === 'forbidden') return null;
+
+  const retry = () => {
+    setView((v) => ({ ...v, status: 'loading' }));
+    void load();
+  };
+
+  return (
+    <>
+      <section aria-label="Permissions to review">
+        <div className="px-2 pt-1.5 pb-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+          Permissions to review
+        </div>
+        {view.status === 'loading' && <MenuLoading />}
+        {view.status === 'error' && <MenuError text={view.error} onRetry={retry} />}
+        {view.status === 'ready' && view.rows.length === 0 && (
+          <p className="px-2 py-4 text-center text-sm text-muted-foreground">
+            No permissions to review.
+          </p>
+        )}
+        {view.status === 'ready' &&
+          view.rows.map((row) => {
+            const since = taskSince(row);
+            return (
+              <div key={`${row.companyUuid}|${row.key}`} className="rounded-sm px-2 py-2">
+                <div className="text-sm font-semibold">{taskTitle(row)}</div>
+                <div className="text-xs text-muted-foreground">{row.companyName}</div>
+                {row.caution && (
+                  <p className="mt-1 flex items-start gap-1.5 text-xs text-warn">
+                    <TriangleAlert className="mt-px size-3.5 shrink-0" aria-hidden="true" />
+                    <span>
+                      <span className="sr-only">Caution: </span>
+                      {row.caution}
+                    </span>
+                  </p>
+                )}
+                {since && <div className="mt-0.5 text-[11px] text-muted-foreground">{since}</div>}
+                <div className="mt-1.5 flex flex-wrap gap-1">
+                  <DropdownMenuItem
+                    aria-label={`Grant ${row.label} in ${row.companyName}`}
+                    onSelect={() => navigate(`/access/add?key=${encodeURIComponent(row.key)}`)}
+                    className="h-7 px-2 text-xs font-medium text-primary focus:text-primary"
+                  >
+                    Grant…
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    aria-label={`Reviewed, not needed: ${row.label} in ${row.companyName}`}
+                    onSelect={() => onDismiss(row)}
+                    className="h-7 px-2 text-xs"
+                  >
+                    Reviewed, not needed
+                  </DropdownMenuItem>
+                </div>
+              </div>
+            );
+          })}
+        {view.status === 'ready' && view.total > view.rows.length && (
+          <p className="px-2 pb-1 text-[11px] text-muted-foreground">
+            Showing {view.rows.length} of {view.total}.
+          </p>
+        )}
+      </section>
+      <DropdownMenuSeparator />
+    </>
+  );
+}
+
+export default function AnnouncementsMenu() {
+  const { tokens, identity } = useAuth();
+  const canTasks = useCan(TASKS_PERMISSION);
+  const counts = useNotificationCounts();
+  const { refresh } = counts;
+  const [target, setTarget] = useState(null); // the task row awaiting confirmation
+  const [busy, setBusy] = useState(false);
+
+  // The API call runs only from the confirm handler. The task list reloads on the next open
+  // (the menu closed when the action was chosen); the badges refresh at once.
+  const dismiss = async () => {
+    const row = target;
+    const token = tokens?.accessToken;
+    if (!row || !token) return;
+    setBusy(true);
+    const r = await identity.dismissPermissionAnnouncement(token, row.companyUuid, row.key);
+    setBusy(false);
+    setTarget(null);
+    if (r.ok) toast.success(`“${row.label}” marked as reviewed in ${row.companyName}.`);
+    else toast.error(r.error); // fixed text: 404 no longer available, 409 already granted
+    void refresh();
+  };
+
+  return (
+    <>
+      <DropdownMenu>
+        <HeaderMenuTrigger
+          icon={Megaphone}
+          label="Announcements"
+          count={announcementsBadgeCount(counts)}
+        />
+        <DropdownMenuContent align="end" className="w-96 max-w-[calc(100vw-2rem)]">
+          <DropdownMenuLabel>Announcements</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          {canTasks && <TasksSection onDismiss={setTarget} />}
+          <NoticeSection
+            category="announcement"
+            heading={canTasks ? 'News' : undefined}
+            emptyText="No announcements."
+          />
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <ConfirmDialog
+        open={!!target}
+        title={target ? `Mark “${target.label}” as reviewed?` : 'Mark as reviewed?'}
+        message={
+          target
+            ? `No role in ${target.companyName} is given this permission now. The task leaves the list; you can still grant it later from Access.`
+            : undefined
+        }
+        confirmLabel="Reviewed, not needed"
+        busy={busy}
+        onConfirm={dismiss}
+        onCancel={() => setTarget(null)}
+      />
+    </>
+  );
+}

package/template/frontend/src/shell/AppShell.jsx

@@ -6,7 +6,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { saveReturnPath } from '@/platform/returnPathStore';
-import { Bell, HelpCircle, LogOut, Menu, PanelLeft, Search, Settings, X } from 'lucide-react';
+import { HelpCircle, LogOut, Menu, PanelLeft, Search, Settings, X } from 'lucide-react';
 import { useAuth } from '@/auth/AuthContext';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -23,6 +23,8 @@ import {
 import ThemeToggle from '@/theme/ThemeToggle';
 import Sidebar from './Sidebar';
 import GraceBanner from './GraceBanner';
+import NotificationsMenu from './NotificationsMenu';
+import AnnouncementsMenu from './AnnouncementsMenu';
 
 /** A header icon-action button with a tooltip (ffs pattern). */
 function IconAction({ icon: Icon, label, dot }) {
@@ -174,8 +176,9 @@ export default function AppShell({ children, title: _title, section: _section })
 
             <div className="flex-1" />
 
-            {/* Icon actions */}
-            <IconAction icon={Bell} label="Notifications" dot />
+            {/* Icon actions: personal notices (bell) and announcements + admin tasks (G-027). */}
+            <NotificationsMenu />
+            <AnnouncementsMenu />
             <IconAction icon={Settings} label="Settings" />
             <IconAction icon={HelpCircle} label="Help" />
 

package/template/frontend/src/shell/NotificationsMenu.jsx

@@ -0,0 +1,263 @@
+/**
+ * NotificationsMenu — the header bell (G-027 step 5): the user's PERSONAL notices (changes to
+ * their own access). Badge = unread personal count (useNotificationCounts). The list loads when
+ * the menu opens; opening marks nothing read. Clicking a notice marks it read and follows its
+ * link only when app-relative; "Mark all read" clears the category. Text only, never HTML.
+ *
+ * Also exports the pieces AnnouncementsMenu reuses: `HeaderMenuTrigger` (the header icon button
+ * with tooltip and count badge) and `NoticeSection` (one category's notices).
+ */
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { Bell, CheckCheck, Loader2, RotateCw } from 'lucide-react';
+import { toast } from 'sonner';
+import { useAuth } from '@/auth/AuthContext';
+import { cn } from '@/lib/utils';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from '@/components/ui/dropdown-menu';
+import { badgeLabel, badgeText, relativeTime, safeAppLink } from './notificationsView';
+import { useNotificationCounts } from './useNotificationCounts';
+
+/**
+ * The header icon button itself. Forwards its ref and any props Radix passes through `asChild`
+ * (handlers, `data-state`, aria attributes) to the `<button>`.
+ */
+const HeaderIconButton = forwardRef(function HeaderIconButton(
+  { icon: Icon, label, count, className, ...props },
+  ref,
+) {
+  const text = badgeText(count);
+  return (
+    <button
+      ref={ref}
+      type="button"
+      aria-label={badgeLabel(label, count)}
+      {...props}
+      className={cn(
+        'relative flex size-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:bg-secondary data-[state=open]:text-foreground',
+        className,
+      )}
+    >
+      <Icon className="size-[18px]" aria-hidden="true" />
+      {text && (
+        <span
+          aria-hidden="true"
+          className="absolute right-0.5 top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-destructive px-1 text-[10px] font-semibold leading-none text-white ring-2 ring-background"
+        >
+          {text}
+        </span>
+      )}
+    </button>
+  );
+});
+
+/**
+ * The header icon button (AppShell `IconAction` styling) that opens a dropdown menu, with a
+ * tooltip. Both `asChild` triggers need a child that takes a ref: the tooltip's child is the
+ * Radix dropdown trigger primitive (a forwardRef component; the `ui/dropdown-menu` wrapper is a
+ * plain function component, so a ref given to it is dropped with a React warning), and that
+ * primitive's child is the forwardRef button above. The ref and extra props are forwarded too.
+ */
+export const HeaderMenuTrigger = forwardRef(function HeaderMenuTrigger(
+  { icon, label, count, ...props },
+  ref,
+) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" asChild>
+          <HeaderIconButton ref={ref} icon={icon} label={label} count={count} {...props} />
+        </DropdownMenuPrimitive.Trigger>
+      </TooltipTrigger>
+      <TooltipContent>{label}</TooltipContent>
+    </Tooltip>
+  );
+});
+
+/** A loading line inside a menu section. */
+export function MenuLoading() {
+  return (
+    <div role="status" className="flex items-center gap-2 px-2 py-4 text-sm text-muted-foreground">
+      <Loader2 className="size-4 animate-spin" aria-hidden="true" />
+      Loading…
+    </div>
+  );
+}
+
+/** A fixed error line plus a "Try again" item (keeps the menu open). */
+export function MenuError({ text, onRetry }) {
+  return (
+    <>
+      <p role="alert" className="px-2 py-2 text-sm text-destructive">
+        {text}
+      </p>
+      <DropdownMenuItem
+        onSelect={(e) => {
+          e.preventDefault();
+          onRetry();
+        }}
+      >
+        <RotateCw aria-hidden="true" /> Try again
+      </DropdownMenuItem>
+    </>
+  );
+}
+
+const LIST_LIMIT = 20;
+
+/**
+ * One category's latest notices. Mounted only while the menu is open (Radix unmounts closed
+ * content), so it loads on open. `heading` (optional) labels the section.
+ */
+export function NoticeSection({ category, heading, emptyText }) {
+  const { tokens, notifications } = useAuth();
+  const counts = useNotificationCounts();
+  const { refresh } = counts;
+  const navigate = useNavigate();
+  const token = tokens?.accessToken ?? null;
+  const [view, setView] = useState({ status: 'loading', rows: [], error: '', now: 0 });
+  const [busyAll, setBusyAll] = useState(false);
+  const alive = useRef(true);
+  // Bumped per list load and when "Mark all read" starts, so only the latest load applies: a
+  // slow list answer from before the mark never overwrites the list loaded after it.
+  const loadSeq = useRef(0);
+
+  useEffect(() => {
+    alive.current = true;
+    return () => {
+      alive.current = false;
+    };
+  }, []);
+
+  const load = useCallback(async () => {
+    if (!token) return;
+    const seq = ++loadSeq.current;
+    const r = await notifications.listNotifications(token, { category, limit: LIST_LIMIT });
+    if (!alive.current || seq !== loadSeq.current) return;
+    if (r.ok) setView({ status: 'ready', rows: r.rows, error: '', now: Date.now() });
+    else setView((v) => ({ ...v, status: 'error', error: r.error }));
+  }, [notifications, token, category]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  const retry = () => {
+    setView((v) => ({ ...v, status: 'loading' }));
+    void load();
+  };
+
+  // Click: mark read (unless already read), follow an app-relative link, refresh the badges.
+  // A failed mark shows its fixed error text and leaves the notice unread (the next list load
+  // and the badge show the server's state); the safe link is still followed.
+  const openNotice = async (row) => {
+    if (!row.readAt && token) {
+      const r = await notifications.markNotificationRead(token, row.uuid);
+      if (!r.ok) toast.error(r.error);
+    }
+    const link = safeAppLink(row.link);
+    if (link) navigate(link);
+    void refresh();
+  };
+
+  const markAll = async () => {
+    if (!token || busyAll) return;
+    setBusyAll(true);
+    loadSeq.current += 1; // drop any list answer still in flight from before the mark
+    await notifications.markAllNotificationsRead(token, category);
+    if (alive.current) {
+      setBusyAll(false);
+      await load();
+    }
+    void refresh();
+  };
+
+  const unreadInList = view.rows.some((row) => !row.readAt);
+  const unreadCount = category === 'personal' ? counts.personal : counts.announcement;
+
+  return (
+    <section aria-label={heading || undefined}>
+      {heading && (
+        <div className="px-2 pt-1.5 pb-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+          {heading}
+        </div>
+      )}
+      {view.status === 'loading' && <MenuLoading />}
+      {view.status === 'error' && <MenuError text={view.error} onRetry={retry} />}
+      {view.status === 'ready' && view.rows.length === 0 && (
+        <p className="px-2 py-5 text-center text-sm text-muted-foreground">{emptyText}</p>
+      )}
+      {view.status === 'ready' &&
+        view.rows.map((row) => {
+          const unread = !row.readAt;
+          return (
+            <DropdownMenuItem
+              key={row.uuid}
+              onSelect={() => void openNotice(row)}
+              className="items-start gap-2.5 py-2"
+            >
+              <span
+                aria-hidden="true"
+                className={cn(
+                  'mt-1.5 size-2 shrink-0 rounded-full',
+                  unread ? 'bg-primary' : 'bg-transparent',
+                )}
+              />
+              <span className="min-w-0 flex-1">
+                <span className={cn('block text-sm', unread ? 'font-semibold' : 'font-normal')}>
+                  {unread && <span className="sr-only">Unread: </span>}
+                  {row.title}
+                </span>
+                {row.body && (
+                  <span className="mt-0.5 line-clamp-3 block whitespace-pre-line text-xs text-muted-foreground">
+                    {row.body}
+                  </span>
+                )}
+                <span className="mt-0.5 block text-[11px] text-muted-foreground">
+                  {relativeTime(row.createdAt, view.now)}
+                </span>
+              </span>
+            </DropdownMenuItem>
+          );
+        })}
+      {view.status === 'ready' && (unreadInList || unreadCount > 0) && (
+        <DropdownMenuItem
+          disabled={busyAll}
+          onSelect={(e) => {
+            e.preventDefault(); // keep the menu open to show the result
+            void markAll();
+          }}
+          className="justify-center text-xs font-medium"
+        >
+          {busyAll ? (
+            <Loader2 className="animate-spin" aria-hidden="true" />
+          ) : (
+            <CheckCheck aria-hidden="true" />
+          )}
+          Mark all read
+        </DropdownMenuItem>
+      )}
+    </section>
+  );
+}
+
+export default function NotificationsMenu() {
+  const { personal } = useNotificationCounts();
+  return (
+    <DropdownMenu>
+      <HeaderMenuTrigger icon={Bell} label="Notifications" count={personal} />
+      <DropdownMenuContent align="end" className="w-96 max-w-[calc(100vw-2rem)]">
+        <DropdownMenuLabel>Notifications</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <NoticeSection category="personal" emptyText="You have no notifications." />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}