Add notification preferences and alternate dues payment options

Notification preferences (migration 048):
- Per-member opt-out of muteable categories (bookings, classes, forms,
  admin alerts); billing is always-on. Opt-out model, default on.
- Dispatcher reads prefs and marks muted outbox rows 'skipped' instead
  of sending; pure isMuted logic, fail-open on a prefs lookup error.
- notification_preferences table (default-deny RLS); /me toggles and
  self-view via validated service-client actions.

Alternate dues payment methods (migration 049):
- Admin sets external pay-here URLs per platform (PayPal/Zeffy/Venmo)
  in /settings; members see active ones on /me and pay off-platform;
  the treasurer reconciles manually (platform pre-tagged). https-only.
- dues_payment_methods table (SELECT space member, write admin/board).

/me visual pass:
- Restore the chip/preset profile editor (skills/interests/willing-to/
  affiliations); promote ChipInput and presets to shared modules.
- Gate the Stripe pay-dues button on whether the space has Stripe
  configured; show external links or a contact-admin note otherwise.

app/(app)/me/profile-form.tsx

@@ -7,6 +7,8 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Textarea } from '@/components/ui/textarea'
+import { ChipInput } from '@/components/chip-input'
+import { WILLING_TO_SUGGESTIONS } from '@/lib/profile-presets'
 import { updateMyProfile, discloseAffiliations, requestEmailChange } from '@/lib/actions'
 
 export type ProfileInitial = {
@@ -21,11 +23,11 @@ export type ProfileInitial = {
   affiliations: string[]
 }
 
-const toList = (s: string): string[] =>
-  s.split(',').map(x => x.trim()).filter(Boolean)
 const sameList = (a: string[], b: string[]) =>
   a.length === b.length && a.every((x, i) => x === b[i])
 
+const fieldLabel = 'font-mono text-[10px] tracking-widest text-muted-foreground uppercase'
+
 export function ProfileForm({ initial }: { initial: ProfileInitial }) {
   const router = useRouter()
   const [busy, setBusy] = useState(false)
@@ -35,10 +37,10 @@ export function ProfileForm({ initial }: { initial: ProfileInitial }) {
   const [handle, setHandle] = useState(initial.handle)
   const [phone, setPhone] = useState(initial.phone)
   const [bio, setBio] = useState(initial.bio)
-  const [skills, setSkills] = useState(initial.skills.join(', '))
-  const [interests, setInterests] = useState(initial.interests.join(', '))
-  const [willingTo, setWillingTo] = useState(initial.willing_to.join(', '))
-  const [affiliations, setAffiliations] = useState(initial.affiliations.join(', '))
+  const [skills, setSkills] = useState<string[]>(initial.skills)
+  const [interests, setInterests] = useState<string[]>(initial.interests)
+  const [willingTo, setWillingTo] = useState<string[]>(initial.willing_to)
+  const [affiliations, setAffiliations] = useState<string[]>(initial.affiliations)
 
   async function save() {
     if (!displayName.trim()) return toast.error('Display name is required.')
@@ -49,9 +51,9 @@ export function ProfileForm({ initial }: { initial: ProfileInitial }) {
       handle: handle.trim() || null,
       phone: phone.trim() || null,
       bio: bio.trim() || null,
-      skills: toList(skills),
-      interests: toList(interests),
-      willing_to: toList(willingTo),
+      skills,
+      interests,
+      willing_to: willingTo,
     })
     if ('error' in res && res.error) {
       setBusy(false)
@@ -60,9 +62,8 @@ export function ProfileForm({ initial }: { initial: ProfileInitial }) {
 
     // Only re-disclose affiliations when they actually changed, so the
     // conflict-of-interest disclosure timestamp is not reset on every save.
-    const nextAffiliations = toList(affiliations)
-    if (!sameList(nextAffiliations, initial.affiliations)) {
-      const aff = await discloseAffiliations({ affiliations: nextAffiliations })
+    if (!sameList(affiliations, initial.affiliations)) {
+      const aff = await discloseAffiliations({ affiliations })
       if ('error' in aff && aff.error) {
         setBusy(false)
         return toast.error(aff.error)
@@ -88,83 +89,94 @@ export function ProfileForm({ initial }: { initial: ProfileInitial }) {
   }
 
   return (
-   <div className="space-y-4">
-    <div className="bg-card rounded border border-border p-4 space-y-4">
-      <div className="grid gap-4 sm:grid-cols-2">
-        <div className="space-y-1.5">
-          <Label htmlFor="pf-name">Display name</Label>
-          <Input id="pf-name" value={displayName} onChange={e => setDisplayName(e.target.value)} maxLength={100} />
+    <div className="space-y-4">
+      <div className="bg-card rounded-lg 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>
+            <Input id="pf-name" value={displayName} onChange={e => setDisplayName(e.target.value)} maxLength={100} />
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="pf-handle">Handle</Label>
+            <Input id="pf-handle" value={handle} onChange={e => setHandle(e.target.value)} maxLength={50} placeholder="optional" />
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="pf-phone">Phone</Label>
+            <Input id="pf-phone" value={phone} onChange={e => setPhone(e.target.value)} maxLength={20} placeholder="optional" />
+          </div>
         </div>
-        <div className="space-y-1.5">
-          <Label htmlFor="pf-handle">Handle</Label>
-          <Input id="pf-handle" value={handle} onChange={e => setHandle(e.target.value)} maxLength={50} placeholder="optional" />
-        </div>
-        <div className="space-y-1.5">
-          <Label htmlFor="pf-phone">Phone</Label>
-          <Input id="pf-phone" value={phone} onChange={e => setPhone(e.target.value)} maxLength={20} placeholder="optional" />
-        </div>
-      </div>
 
-      <div className="space-y-1.5">
-        <Label htmlFor="pf-bio">Bio</Label>
-        <Textarea id="pf-bio" value={bio} onChange={e => setBio(e.target.value)} maxLength={2000} rows={3} placeholder="optional" />
-      </div>
+        <div className="space-y-1.5">
+          <Label htmlFor="pf-bio">Bio</Label>
+          <Textarea id="pf-bio" value={bio} onChange={e => setBio(e.target.value)} maxLength={2000} rows={3} placeholder="optional" />
+        </div>
 
-      <div className="grid gap-4 sm:grid-cols-2">
         <div className="space-y-1.5">
-          <Label htmlFor="pf-skills">Skills</Label>
-          <Input id="pf-skills" value={skills} onChange={e => setSkills(e.target.value)} placeholder="comma, separated" />
+          <span className={fieldLabel}>Skills</span>
+          <ChipInput values={skills} onChange={setSkills} placeholder="add a skill and press enter" maxLength={60} maxItems={40} />
         </div>
-        <div className="space-y-1.5">
-          <Label htmlFor="pf-interests">Interests</Label>
-          <Input id="pf-interests" value={interests} onChange={e => setInterests(e.target.value)} placeholder="comma, separated" />
-        </div>
-        <div className="space-y-1.5">
-          <Label htmlFor="pf-willing">Willing to</Label>
-          <Input id="pf-willing" value={willingTo} onChange={e => setWillingTo(e.target.value)} placeholder="comma, separated" />
-        </div>
-        <div className="space-y-1.5">
-          <Label htmlFor="pf-aff">Affiliations (conflict-of-interest)</Label>
-          <Input id="pf-aff" value={affiliations} onChange={e => setAffiliations(e.target.value)} placeholder="comma, separated" />
-        </div>
-      </div>
 
-      <div className="flex justify-end">
-        <Button size="sm" disabled={busy} onClick={save}>
-          {busy ? 'Saving…' : 'Save profile'}
-        </Button>
-      </div>
-    </div>
-
-    <div className="bg-card rounded border border-border p-4 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">
-          {initial.email || 'not set'}
-        </p>
-      </div>
-      <div className="grid gap-4 sm:grid-cols-2">
         <div className="space-y-1.5">
-          <Label htmlFor="pf-email">New email</Label>
-          <Input
-            id="pf-email"
-            type="email"
-            value={newEmail}
-            onChange={e => setNewEmail(e.target.value)}
-            maxLength={254}
-            placeholder="new@email.com"
+          <span className={fieldLabel}>Interests</span>
+          <ChipInput values={interests} onChange={setInterests} placeholder="add an interest and press enter" maxLength={60} maxItems={40} />
+        </div>
+
+        <div className="space-y-1.5">
+          <span className={fieldLabel}>Willing to do</span>
+          <ChipInput
+            values={willingTo}
+            onChange={setWillingTo}
+            placeholder="add a role and press enter"
+            maxLength={60}
+            maxItems={20}
+            suggestions={WILLING_TO_SUGGESTIONS}
           />
+          <p className="font-sans text-xs text-muted-foreground">
+            Used by the board-only recruitment view when looking for members willing to take on a role.
+          </p>
+        </div>
+
+        <div className="space-y-1.5">
+          <span className={fieldLabel}>Affiliations (conflict-of-interest)</span>
+          <ChipInput values={affiliations} onChange={setAffiliations} placeholder="add an affiliation and press enter" maxLength={200} maxItems={50} />
+        </div>
+
+        <div className="flex justify-end">
+          <Button size="sm" disabled={busy} onClick={save}>
+            {busy ? 'Saving…' : 'Save profile'}
+          </Button>
         </div>
       </div>
-      <div className="flex items-center justify-between gap-3 flex-wrap">
-        <p className="font-sans text-xs text-muted-foreground">
-          You must confirm via links sent to both your current and new address.
-        </p>
-        <Button size="sm" variant="outline" disabled={emailBusy} onClick={changeEmail}>
-          {emailBusy ? 'Sending…' : 'Change email'}
-        </Button>
+
+      <div className="bg-card rounded-lg 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">
+            {initial.email || 'not set'}
+          </p>
+        </div>
+        <div className="grid gap-4 sm:grid-cols-2">
+          <div className="space-y-1.5">
+            <Label htmlFor="pf-email">New email</Label>
+            <Input
+              id="pf-email"
+              type="email"
+              value={newEmail}
+              onChange={e => setNewEmail(e.target.value)}
+              maxLength={254}
+              placeholder="new@email.com"
+            />
+          </div>
+        </div>
+        <div className="flex items-center justify-between gap-3 flex-wrap">
+          <p className="font-sans text-xs text-muted-foreground">
+            You must confirm via links sent to both your current and new address.
+          </p>
+          <Button size="sm" variant="outline" disabled={emailBusy} onClick={changeEmail}>
+            {emailBusy ? 'Sending…' : 'Change email'}
+          </Button>
+        </div>
       </div>
     </div>
-   </div>
   )
 }