In-app notification inbox, consolidate /profile into /me, theme realign

In-app notification center (Phase 5, migration 051): - notifications.read_at + partial unread index. /me Notifications is now an inbox: unread styling, click to expand the message + mark read, "mark all as read", unread count. markNotificationsRead is a service- client write scoped to the caller's own member_id. Always-on channel: email-muted ('skipped') notifications still appear in-app. Consolidate /profile into /me: - Delete app/(app)/profile/*; /me is the single member page. Port the conflict-of-interest privileged-role nudge + last-disclosed date into /me's profile editor. Remove the "My profile" sidebar + command-palette entries; rename the /me nav label to "My membership". Repoint the recruitment empty-state link to /me. Theme realign: - Revert the rounded-lg cards introduced in the prior /me visual pass to rounded (the app norm, matching the former /profile). Route /me section headers through the SectionTitle primitive. Regression guard: - integration/auth-embed.test.ts runs the auth layout's space_members.select('*, spaces(*)') embed through PostgREST and fails on PGRST201, so a future junction table cannot silently break auth again.
2026-05-19 22:51:44 -07:00
parent a7d880d747
commit 5d153b4d68
20 changed files with 319 additions and 380 deletions
@@ -2,6 +2,7 @@

 import { Badge } from '@/components/ui/badge'
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
+import { SectionTitle } from '@/components/ui/page-title'
 import {
  certificationStatus,
  CERT_STATUS_LABEL,
@@ -14,6 +15,7 @@ import { DuesCard, type DuesMethod } from '@/components/billing/dues-card'
 import { ProfileForm, type ProfileInitial } from './profile-form'
 import { CancelAction } from './cancel-action'
 import { NotificationPrefs } from './notification-prefs'
+import { NotificationsInbox } from './notifications-inbox'
 import type { PrefMap } from '@/lib/notifications-prefs-logic'
 import { cancelMySignup, cancelReservation } from '@/lib/actions'

@@ -53,7 +55,7 @@ export type Reservation = {
 }
 export type MyCard = { id: string; card_type: string; label: string | null; is_active: boolean; last4: string }
 export type MyVisit = { id: string; checked_in_at: string; checked_out_at: string | null; is_host: boolean; check_in_note: string | null; check_out_note: string | null }
-export type MyNotif = { id: string; type: string; subject: string; status: string; createdAt: string; sentAt: string | null }
+export type MyNotif = { id: string; type: string; subject: string; bodyText: string; status: string; createdAt: string; sentAt: string | null; readAt: string | null }
 export type MyPayment = { id: string; amount: number; currency: string; platform: string; description: string | null; status: string; date: string }
 export type HeldPermission = { code: string; label: string }
 export type Billing = { status: string | null; currentPeriodEnd: string | null; hasCustomer: boolean; configured: boolean } | null
@@ -66,6 +68,7 @@ type Props = {
  duesMethods: DuesMethod[]
  payments: MyPayment[]
  notifs: MyNotif[]
+  unreadNotifs: number
  notifPrefs: PrefMap
  classSignups: ClassSignup[]
  reservations: Reservation[]
@@ -73,8 +76,6 @@ type Props = {
  myVisits: MyVisit[]
 }

-const sectionH = 'font-mono text-[10px] uppercase tracking-widest text-muted-foreground mb-3'
-
 export function MePortalClient({
  profile,
  grants,
@@ -83,6 +84,7 @@ export function MePortalClient({
  duesMethods,
  payments,
  notifs,
+  unreadNotifs,
  notifPrefs,
  classSignups,
  reservations,
@@ -109,12 +111,12 @@ export function MePortalClient({

        <TabsContent value="profile" className="space-y-8">
          <section>
-            <h2 className={sectionH}>Profile</h2>
+            <SectionTitle className="mb-3">Profile</SectionTitle>
            <ProfileForm initial={profile} />
          </section>

          <section>
-            <h2 className={sectionH}>My permissions</h2>
+            <SectionTitle className="mb-3">My permissions</SectionTitle>
            {held.length === 0 ? (
              <p className="font-sans text-sm text-muted-foreground">
                You have the standard member access for this space. No extra permissions are granted to your role.
@@ -140,18 +142,18 @@ export function MePortalClient({

        <TabsContent value="membership" className="space-y-8">
          <section>
-            <h2 className={sectionH}>Dues</h2>
+            <SectionTitle className="mb-3">Dues</SectionTitle>
            <DuesCard billing={billing} methods={duesMethods} />
          </section>

          <section>
-            <h2 className={sectionH}>My payments</h2>
+            <SectionTitle className="mb-3">My payments</SectionTitle>
            {payments.length === 0 ? (
              <p className="font-sans text-sm text-muted-foreground">
                No payments recorded for you yet.
              </p>
            ) : (
-              <ul className="divide-y rounded-lg border border-border">
+              <ul className="divide-y rounded border border-border">
                {payments.map(p => (
                  <li key={p.id} className="p-4 flex items-start justify-between gap-4 flex-wrap">
                    <div className="min-w-0">
@@ -171,13 +173,13 @@ export function MePortalClient({
          </section>

          <section>
-            <h2 className={sectionH}>Certifications</h2>
+            <SectionTitle className="mb-3">Certifications</SectionTitle>
            {grants.length === 0 ? (
              <p className="font-sans text-sm text-muted-foreground">
                You have no certifications yet. An instructor can award one to you.
              </p>
            ) : (
-              <ul className="divide-y rounded-lg border border-border">
+              <ul className="divide-y rounded border border-border">
                {grants.map(g => {
                  const status = certificationStatus(g)
                  return (
@@ -217,7 +219,7 @@ export function MePortalClient({

        <TabsContent value="activity" className="space-y-8">
          <section>
-            <h2 className={sectionH}>Email preferences</h2>
+            <SectionTitle className="mb-3">Email preferences</SectionTitle>
            <NotificationPrefs initial={notifPrefs} />
            <p className="font-sans text-xs text-muted-foreground mt-3">
              Billing emails (dues receipts, payment alerts) are always sent.
@@ -225,46 +227,19 @@ export function MePortalClient({
          </section>

          <section>
-            <h2 className={sectionH}>Notifications</h2>
-            {notifs.length === 0 ? (
-              <p className="font-sans text-sm text-muted-foreground">
-                No notifications yet. Dues receipts and payment alerts will show up here.
-              </p>
-            ) : (
-              <ul className="divide-y rounded-lg border border-border">
-                {notifs.map(n => (
-                  <li key={n.id} className="p-4 flex items-start justify-between gap-4 flex-wrap">
-                    <div className="min-w-0">
-                      <span className="font-sans text-sm text-foreground">{n.subject}</span>
-                      <p className="font-mono text-[10px] text-muted-foreground mt-1">
-                        {new Date(n.createdAt).toLocaleString()}
-                        {n.sentAt ? ` · sent ${new Date(n.sentAt).toLocaleDateString()}` : ''}
-                      </p>
-                    </div>
-                    <Badge variant={n.status === 'sent' ? 'default' : 'outline'}>
-                      {n.status === 'sent'
-                        ? 'Sent'
-                        : n.status === 'failed'
-                          ? 'Failed'
-                          : n.status === 'skipped'
-                            ? 'Muted'
-                            : 'Queued'}
-                    </Badge>
-                  </li>
-                ))}
-              </ul>
-            )}
+            <SectionTitle className="mb-3">Notifications</SectionTitle>
+            <NotificationsInbox items={notifs} unreadCount={unreadNotifs} />
          </section>

          <section>
-            <h2 className={sectionH}>My classes</h2>
+            <SectionTitle className="mb-3">My classes</SectionTitle>
            {classSignups.length === 0 ? (
              <p className="font-sans text-sm text-muted-foreground">
                You have not signed up for any classes. Browse what&rsquo;s on at{' '}
                <a href="/classes" className="text-primary underline">Classes</a>.
              </p>
            ) : (
-              <ul className="divide-y rounded-lg border border-border">
+              <ul className="divide-y rounded border border-border">
                {classSignups.map(cs => {
                  const sess = sessionOf(cs)
                  return (
@@ -302,14 +277,14 @@ export function MePortalClient({
          </section>

          <section>
-            <h2 className={sectionH}>My equipment reservations</h2>
+            <SectionTitle className="mb-3">My equipment reservations</SectionTitle>
            {reservations.length === 0 ? (
              <p className="font-sans text-sm text-muted-foreground">
                You have no reservations. Browse what you can reserve at{' '}
                <a href="/equipment" className="text-primary underline">Equipment</a>.
              </p>
            ) : (
-              <ul className="divide-y rounded-lg border border-border">
+              <ul className="divide-y rounded border border-border">
                {reservations.map(r => {
                  const eq = equipOf(r)
                  return (
@@ -343,13 +318,13 @@ export function MePortalClient({
          </section>

          <section>
-            <h2 className={sectionH}>My access cards</h2>
+            <SectionTitle className="mb-3">My access cards</SectionTitle>
            {myCards.length === 0 ? (
              <p className="font-sans text-sm text-muted-foreground">
                No access cards are registered to you. A door manager can add one.
              </p>
            ) : (
-              <ul className="divide-y rounded-lg border border-border">
+              <ul className="divide-y rounded border border-border">
                {myCards.map(c => (
                  <li key={c.id} className="p-4 flex items-center justify-between gap-4">
                    <div>
@@ -370,13 +345,13 @@ export function MePortalClient({
          </section>

          <section>
-            <h2 className={sectionH}>My recent visits</h2>
+            <SectionTitle className="mb-3">My recent visits</SectionTitle>
            {myVisits.length === 0 ? (
              <p className="font-sans text-sm text-muted-foreground">
                No visits yet. Check in from the dashboard when you are at the space.
              </p>
            ) : (
-              <ul className="divide-y rounded-lg border border-border">
+              <ul className="divide-y rounded border border-border">
                {myVisits.map(v => {
                  const st = presenceStatus(v.checked_in_at, v.checked_out_at)
                  return (
@@ -29,7 +29,7 @@ export function NotificationPrefs({ initial }: { initial: PrefMap }) {
  }

  return (
-    <ul className="divide-y rounded-lg border border-border">
+    <ul className="divide-y rounded border border-border">
      {CATEGORY_META.map(meta => {
        const enabled = prefs[meta.category] ?? true
        return (
@@ -0,0 +1,116 @@
+'use client'
+
+import { useState, useTransition } from 'react'
+import { useRouter } from 'next/navigation'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { markNotificationsRead } from '@/lib/actions'
+
+export type InboxItem = {
+  id: string
+  type: string
+  subject: string
+  bodyText: string
+  status: string
+  createdAt: string
+  sentAt: string | null
+  readAt: string | null
+}
+
+// The member's in-app notification inbox. Click an item to expand its message
+// (plain text) and mark it read; "Mark all as read" clears the rest. Read
+// state lives in notifications.read_at; this is the always-on channel, so a
+// notification whose email was muted ('skipped') still shows here.
+export function NotificationsInbox({
+  items,
+  unreadCount,
+}: {
+  items: InboxItem[]
+  unreadCount: number
+}) {
+  const router = useRouter()
+  const [expanded, setExpanded] = useState<string | null>(null)
+  const [pending, startTransition] = useTransition()
+
+  function open(n: InboxItem) {
+    setExpanded(e => (e === n.id ? null : n.id))
+    if (!n.readAt) {
+      startTransition(async () => {
+        await markNotificationsRead({ ids: [n.id] })
+        router.refresh()
+      })
+    }
+  }
+
+  function markAll() {
+    startTransition(async () => {
+      await markNotificationsRead({})
+      router.refresh()
+    })
+  }
+
+  if (items.length === 0) {
+    return (
+      <p className="font-sans text-sm text-muted-foreground">
+        No notifications yet. Dues receipts, booking and class updates, and form receipts show up here.
+      </p>
+    )
+  }
+
+  return (
+    <div className="space-y-3">
+      {unreadCount > 0 && (
+        <div className="flex items-center justify-between">
+          <span className="font-mono text-[10px] uppercase tracking-widest text-muted-foreground">
+            {unreadCount} unread
+          </span>
+          <Button size="sm" variant="outline" disabled={pending} onClick={markAll}>
+            Mark all as read
+          </Button>
+        </div>
+      )}
+      <ul className="divide-y rounded border border-border">
+        {items.map(n => {
+          const unread = !n.readAt
+          const isOpen = expanded === n.id
+          return (
+            <li key={n.id}>
+              <button
+                type="button"
+                onClick={() => open(n)}
+                className="w-full text-left p-4 flex items-start justify-between gap-4 hover:bg-muted/40"
+                aria-expanded={isOpen}
+              >
+                <div className="min-w-0 flex items-start gap-2">
+                  <span
+                    className={`mt-1.5 h-2 w-2 rounded-full shrink-0 ${unread ? 'bg-primary' : 'bg-transparent'}`}
+                    aria-hidden
+                  />
+                  <div className="min-w-0">
+                    <span className={`font-sans text-sm text-foreground ${unread ? 'font-semibold' : ''}`}>
+                      {n.subject}
+                    </span>
+                    <p className="font-mono text-[10px] text-muted-foreground mt-1">
+                      {new Date(n.createdAt).toLocaleString()}
+                      {n.sentAt
+                        ? ` · emailed ${new Date(n.sentAt).toLocaleDateString()}`
+                        : n.status === 'skipped'
+                          ? ' · email muted'
+                          : ''}
+                    </p>
+                  </div>
+                </div>
+                {unread && <Badge variant="outline">New</Badge>}
+              </button>
+              {isOpen && n.bodyText && (
+                <pre className="px-4 pb-4 font-sans text-sm text-muted-foreground whitespace-pre-wrap break-words">
+                  {n.bodyText}
+                </pre>
+              )}
+            </li>
+          )
+        })}
+      </ul>
+    </div>
+  )
+}
@@ -29,7 +29,7 @@ export default async function MePage() {
  const { data: member } = await supabase
    .from('space_members')
    .select(
-      'id, space_id, role, email, display_name, handle, phone, bio, skills, interests, willing_to, affiliations',
+      'id, space_id, role, email, display_name, handle, phone, bio, skills, interests, willing_to, affiliations, coi_last_disclosed_at',
    )
    .eq('user_id', user.id)
    .in('status', ['current', 'unverified', 'late'])
@@ -59,6 +59,8 @@ export default async function MePage() {
    interests: (member.interests as string[] | null) ?? [],
    willing_to: (member.willing_to as string[] | null) ?? [],
    affiliations: (member.affiliations as string[] | null) ?? [],
+    isPrivileged: ['admin', 'board', 'treasurer'].includes(member.role as string),
+    coiLastDisclosed: (member.coi_last_disclosed_at as string | null) ?? null,
  }

  const { data: grantsRaw } = await supabase
@@ -119,6 +121,7 @@ export default async function MePage() {

  const notifsRes = await getMyNotifications()
  const notifs: MyNotif[] = 'data' in notifsRes ? (notifsRes.data as MyNotif[]) : []
+  const unreadNotifs = 'unreadCount' in notifsRes ? notifsRes.unreadCount : 0

  const notifPrefsRes = await getMyNotificationPreferences()
  const notifPrefs: PrefMap = 'data' in notifPrefsRes ? notifPrefsRes.data : {}
@@ -140,6 +143,7 @@ export default async function MePage() {
        duesMethods={duesMethods}
        payments={payments}
        notifs={notifs}
+        unreadNotifs={unreadNotifs}
        notifPrefs={notifPrefs}
        classSignups={classSignups}
        reservations={reservations}
@@ -21,6 +21,11 @@ export type ProfileInitial = {
  interests: string[]
  willing_to: string[]
  affiliations: string[]
+  // Conflict-of-interest disclosure (ported from the former /profile page):
+  // privileged roles are nudged to disclose; the last-disclosed date is shown
+  // when set.
+  isPrivileged: boolean
+  coiLastDisclosed: string | null
 }

 const sameList = (a: string[], b: string[]) =>
@@ -90,7 +95,7 @@ export function ProfileForm({ initial }: { initial: ProfileInitial }) {

  return (
    <div className="space-y-4">
-      <div className="bg-card rounded-lg border border-border p-5 space-y-5">
+      <div className="bg-card rounded border border-border p-5 space-y-5">
        <div className="grid gap-4 sm:grid-cols-2">
          <div className="space-y-1.5">
            <Label htmlFor="pf-name">Display name</Label>
@@ -138,7 +143,20 @@ export function ProfileForm({ initial }: { initial: ProfileInitial }) {

        <div className="space-y-1.5">
          <span className={fieldLabel}>Affiliations (conflict-of-interest)</span>
+          {initial.isPrivileged && !initial.coiLastDisclosed && (
+            <div className="rounded border border-orange-200 bg-orange-50 dark:border-orange-900/50 dark:bg-orange-950/30 p-3">
+              <p className="font-sans text-xs text-orange-900 dark:text-orange-200">
+                You hold a privileged role. Please disclose any outside affiliations that could
+                conflict with space governance. Your disclosure is visible to other members.
+              </p>
+            </div>
+          )}
          <ChipInput values={affiliations} onChange={setAffiliations} placeholder="add an affiliation and press enter" maxLength={200} maxItems={50} />
+          {initial.coiLastDisclosed && (
+            <p className="font-mono text-[10px] text-muted-foreground">
+              last disclosed {new Date(initial.coiLastDisclosed).toLocaleDateString()}
+            </p>
+          )}
        </div>

        <div className="flex justify-end">
@@ -148,7 +166,7 @@ export function ProfileForm({ initial }: { initial: ProfileInitial }) {
        </div>
      </div>

-      <div className="bg-card rounded-lg border border-border p-5 space-y-3">
+      <div className="bg-card rounded border border-border p-5 space-y-3">
        <div>
          <p className="font-sans text-sm font-medium text-foreground">Login email</p>
          <p className="font-mono text-[10px] text-muted-foreground mt-0.5">