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">
@@ -1,64 +0,0 @@
-'use client'
-
-import { useState, useTransition } from 'react'
-import { useRouter } from 'next/navigation'
-import { discloseAffiliations } from '@/lib/actions'
-import { ChipInput } from '@/components/chip-input'
-
-export function AffiliationsForm({ initial }: { initial: { affiliations: string[] } }) {
-  const router = useRouter()
-  const [affiliations, setAffiliations] = useState<string[]>(initial.affiliations)
-  const [error, setError] = useState('')
-  const [status, setStatus] = useState<'idle' | 'saved'>('idle')
-  const [isPending, startTransition] = useTransition()
-
-  function handleSubmit(e: React.FormEvent) {
-    e.preventDefault()
-    setError('')
-    setStatus('idle')
-    startTransition(async () => {
-      const r = await discloseAffiliations({ affiliations })
-      if ('error' in r && r.error) setError(r.error)
-      else {
-        setStatus('saved')
-        router.refresh()
-      }
-    })
-  }
-
-  return (
-    <form onSubmit={handleSubmit} className="bg-card rounded border border-border p-5 space-y-4">
-      <div>
-        <label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-2">
-          Outside affiliations
-        </label>
-        <ChipInput
-          values={affiliations}
-          onChange={setAffiliations}
-          placeholder='add an affiliation and press enter, e.g. "ACME Robotics, contractor"'
-          maxLength={200}
-          maxItems={50}
-        />
-        <p className="font-mono text-[10px] text-muted-foreground mt-1">
-          Organizations, businesses, or roles outside this space that could intersect with space
-          decisions. Visible to all members. Submitting stamps your disclosure date.
-        </p>
-      </div>
-
-      {error && <p className="font-mono text-xs text-red-500">{error}</p>}
-      {status === 'saved' && !error && (
-        <p className="font-mono text-xs text-primary">Disclosed. Your timestamp is updated.</p>
-      )}
-
-      <div className="flex items-center justify-end">
-        <button
-          type="submit"
-          disabled={isPending}
-          className="bg-primary text-white font-sans text-sm font-medium px-4 py-2 rounded hover:bg-primary/90 transition disabled:opacity-50"
-        >
-          {isPending ? 'Disclosing...' : 'Disclose now'}
-        </button>
-      </div>
-    </form>
-  )
-}
@@ -1,101 +0,0 @@
-import { redirect } from 'next/navigation'
-import { createClient } from '@/lib/supabase/server'
-import { ProfileForm } from './profile-form'
-import { AffiliationsForm } from './affiliations-form'
-import { PageTitle } from '@/components/ui/page-title'
-
-export const dynamic = 'force-dynamic'
-
-export default async function ProfilePage() {
-  const supabase = await createClient()
-  const { data: { user } } = await supabase.auth.getUser()
-  if (!user) redirect('/login')
-
-  const { data: memberRaw } = await supabase
-    .from('space_members')
-    .select('*')
-    .eq('user_id', user.id)
-    .in('status', ['current', 'unverified', 'late'])
-    .maybeSingle()
-  if (!memberRaw) redirect('/signup')
-
-  const member = memberRaw as unknown as {
-    id: string
-    display_name: string | null
-    handle: string | null
-    phone: string | null
-    role: string
-    tier: string
-    skills: string[]
-    interests: string[]
-    willing_to: string[]
-    affiliations: string[]
-    coi_last_disclosed_at: string | null
-    email: string | null
-  }
-
-  const privilegedRoles = ['admin', 'board', 'treasurer']
-  const isPrivileged = privilegedRoles.includes(member.role)
-
-  return (
-    <div className="min-h-screen bg-background">
-      <div className="bg-sidebar px-4 md:px-6 py-3">
-        <PageTitle>My profile</PageTitle>
-      </div>
-
-      <div className="p-4 md:p-6 space-y-6 max-w-3xl">
-        <header className="bg-card rounded border border-border p-5">
-          <p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-1">
-            Account
-          </p>
-          <p className="font-sans text-sm text-foreground">{member.email}</p>
-          <p className="font-mono text-[10px] text-muted-foreground mt-1">
-            role: {member.role} · tier: {member.tier}
-          </p>
-          <p className="font-mono text-[10px] text-muted-foreground mt-2">
-            Role and tier can only be changed by an admin or board member. The privilege-escalation
-            trigger blocks self-edits to those fields at the database level.
-          </p>
-        </header>
-
-        <section>
-          <p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-3">
-            Profile
-          </p>
-          <ProfileForm
-            initial={{
-              display_name: member.display_name ?? '',
-              handle: member.handle ?? '',
-              phone: member.phone ?? '',
-              skills: member.skills ?? [],
-              interests: member.interests ?? [],
-              willing_to: member.willing_to ?? [],
-            }}
-          />
-        </section>
-
-        <section>
-          <div className="flex items-baseline justify-between mb-3">
-            <p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase">
-              Conflict-of-interest disclosure
-            </p>
-            {member.coi_last_disclosed_at && (
-              <p className="font-mono text-[10px] text-muted-foreground">
-                last disclosed {new Date(member.coi_last_disclosed_at).toLocaleDateString()}
-              </p>
-            )}
-          </div>
-          {isPrivileged && !member.coi_last_disclosed_at && (
-            <div className="bg-orange-50 border border-orange-200 rounded p-3 mb-3">
-              <p className="font-sans text-sm text-orange-900">
-                You hold a privileged role ({member.role}). Please disclose any outside affiliations
-                that could conflict with space governance. Disclosure is visible to other members.
-              </p>
-            </div>
-          )}
-          <AffiliationsForm initial={{ affiliations: member.affiliations ?? [] }} />
-        </section>
-      </div>
-    </div>
-  )
-}
@@ -1,146 +0,0 @@
-'use client'
-
-import { useState, useTransition } from 'react'
-import { useRouter } from 'next/navigation'
-import { updateMyProfile } from '@/lib/actions'
-import { ChipInput } from '@/components/chip-input'
-import { WILLING_TO_SUGGESTIONS } from '@/lib/profile-presets'
-
-type Props = {
-  initial: {
-    display_name: string
-    handle: string
-    phone: string
-    skills: string[]
-    interests: string[]
-    willing_to: string[]
-  }
-}
-
-export function ProfileForm({ initial }: Props) {
-  const router = useRouter()
-  const [displayName, setDisplayName] = useState(initial.display_name)
-  const [handle, setHandle] = useState(initial.handle)
-  const [phone, setPhone] = useState(initial.phone)
-  const [skills, setSkills] = useState<string[]>(initial.skills)
-  const [interests, setInterests] = useState<string[]>(initial.interests)
-  const [willingTo, setWillingTo] = useState<string[]>(initial.willing_to)
-  const [error, setError] = useState('')
-  const [status, setStatus] = useState<'idle' | 'saved'>('idle')
-  const [isPending, startTransition] = useTransition()
-
-  function handleSubmit(e: React.FormEvent) {
-    e.preventDefault()
-    setError('')
-    setStatus('idle')
-    startTransition(async () => {
-      const r = await updateMyProfile({
-        display_name: displayName,
-        handle: handle || null,
-        phone: phone || null,
-        skills,
-        interests,
-        willing_to: willingTo,
-      })
-      if ('error' in r && r.error) setError(r.error)
-      else {
-        setStatus('saved')
-        router.refresh()
-      }
-    })
-  }
-
-  return (
-    <form onSubmit={handleSubmit} className="bg-card rounded border border-border p-5 space-y-5">
-      <div className="grid md:grid-cols-2 gap-4">
-        <div>
-          <label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">
-            Display name
-          </label>
-          <input
-            type="text"
-            value={displayName}
-            onChange={e => setDisplayName(e.target.value)}
-            maxLength={100}
-            required
-            className="w-full bg-background border border-border text-foreground font-sans text-sm rounded px-3 py-2 focus:outline-none focus:border-primary"
-          />
-        </div>
-        <div>
-          <label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">
-            Handle
-          </label>
-          <input
-            type="text"
-            value={handle}
-            onChange={e => setHandle(e.target.value)}
-            maxLength={50}
-            className="w-full bg-background border border-border text-foreground font-sans text-sm rounded px-3 py-2 focus:outline-none focus:border-primary"
-          />
-        </div>
-      </div>
-
-      <div>
-        <label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">
-          Phone
-        </label>
-        <input
-          type="tel"
-          value={phone}
-          onChange={e => setPhone(e.target.value)}
-          maxLength={20}
-          className="w-full bg-background border border-border text-foreground font-sans text-sm rounded px-3 py-2 focus:outline-none focus:border-primary"
-        />
-      </div>
-
-      <div>
-        <label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">
-          Skills
-        </label>
-        <ChipInput values={skills} onChange={setSkills} placeholder="add a skill and press enter" maxLength={60} maxItems={40} />
-        <p className="font-mono text-[10px] text-muted-foreground mt-1">
-          Examples: woodworking, laser, electronics, accounting, grant writing.
-        </p>
-      </div>
-
-      <div>
-        <label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">
-          Interests
-        </label>
-        <ChipInput values={interests} onChange={setInterests} placeholder="add an interest and press enter" maxLength={60} maxItems={40} />
-      </div>
-
-      <div>
-        <label className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase block mb-1">
-          Willing to do
-        </label>
-        <ChipInput
-          values={willingTo}
-          onChange={setWillingTo}
-          placeholder="add a role and press enter"
-          maxLength={60}
-          maxItems={20}
-          suggestions={WILLING_TO_SUGGESTIONS}
-        />
-        <p className="font-mono text-[10px] text-muted-foreground mt-1">
-          Used by the recruitment view (board only) when looking for members willing to take on a role.
-        </p>
-      </div>
-
-      {error && <p className="font-mono text-xs text-red-500">{error}</p>}
-      {status === 'saved' && !error && (
-        <p className="font-mono text-xs text-primary">Saved.</p>
-      )}
-
-      <div className="flex items-center justify-end">
-        <button
-          type="submit"
-          disabled={isPending}
-          className="bg-primary text-white font-sans text-sm font-medium px-4 py-2 rounded hover:bg-primary/90 transition disabled:opacity-50"
-        >
-          {isPending ? 'Saving...' : 'Save profile'}
-        </button>
-      </div>
-    </form>
-  )
-}
@@ -75,7 +75,7 @@ export default async function RecruitmentPage() {
              <EmptyMedia variant="icon"><Users /></EmptyMedia>
              <EmptyTitle>No members have declared willingness or skills yet</EmptyTitle>
              <EmptyDescription>
-                Members opt in from their <Link href="/profile">profile</Link> page.
+                Members opt in from their <Link href="/me">membership</Link> page.
              </EmptyDescription>
            </EmptyHeader>
          </Empty>