Slice 7: §14 chrome + settings and admin neighborhoods
§14.1 richer landing, §14.2 /philosophy route (disk-backed), §14.3 persistent About link. /settings/notifications surfaces Slice 6's preferences/quiet-hours/mute/watches endpoints. /admin home base consolidates role management, the §6.2 write-mute, the audit-log viewer, the permission-events log, and the §13.2 graduation queue. Backend: backend/app/philosophy.py, backend/app/api_admin.py (seven admin endpoints + user-search), GET /api/users/me/notification-mutes. Frontend: Landing.jsx (deck), Philosophy.jsx, NotificationSettings.jsx, Admin.jsx, App.jsx routing for the chrome surfaces. Tests: backend/tests/test_chrome_vertical.py — 13 cases. Full suite 75/75 green. Spec corrections: §14.2 (PHILOSOPHY.md source is a deployment-time decision), §17 (admin block extended to name the seven new endpoints + user-search and notification-mutes read). §19.1 rewritten for Slice 8 hardening; §19.2 grew four candidates (owner succession, mute-from-actor, the "Following since <date>" disclosure, audit-log row prose). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ben Stull
@@ -0,0 +1,509 @@
|
||||
// /settings/notifications — the §15.4 / §15.5 / §15.6 / §15.8 surface.
|
||||
//
|
||||
// Topic 13 settled the schema and the per-category rules; Slice 6 wired
|
||||
// the endpoints; Slice 7 lands the surface where a contributor finds
|
||||
// the per-category email toggles, the digest cadence dropdown, the
|
||||
// quiet-hours editor, the watches overview, and the per-user mute
|
||||
// list. The §15.4 email footer's "Manage all preferences" link points
|
||||
// at this route.
|
||||
//
|
||||
// Each sub-section is intentionally thin — the rules are settled in
|
||||
// §15; this page renders them. The one piece of voice the spec
|
||||
// commits to and the surface inherits: the `email_watched_churn`
|
||||
// toggle renders as permanently disabled with the §15.4 refusal
|
||||
// tooltip ("Per-commit and per-message email is intentionally not
|
||||
// offered. The digest aggregates this activity weekly."). Naming the
|
||||
// refusal is the spec's commitment; silently omitting the toggle
|
||||
// would let the contract drift.
|
||||
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import {
|
||||
getNotificationPreferences,
|
||||
setNotificationPreferences,
|
||||
getQuietHours,
|
||||
setQuietHours,
|
||||
listWatches,
|
||||
setWatch,
|
||||
unmuteUser,
|
||||
muteUser,
|
||||
searchUsers,
|
||||
} from '../api.js'
|
||||
|
||||
const CHURN_REFUSAL = 'Per-commit and per-message email is intentionally not offered. The digest aggregates this activity weekly.'
|
||||
|
||||
export default function NotificationSettings({ viewer }) {
|
||||
return (
|
||||
<div className="settings-page">
|
||||
<header className="settings-header">
|
||||
<h1>Notification settings</h1>
|
||||
<p className="settings-sub">
|
||||
Which signals reach you, how, and when. The rules live in §15;
|
||||
this page is where you tune them.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<EmailPreferencesSection />
|
||||
<DigestCadenceSection />
|
||||
<QuietHoursSection />
|
||||
<WatchesSection />
|
||||
<MutesSection viewer={viewer} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── §15.4 email category toggles ───────────────────────────────────────────
|
||||
|
||||
function EmailPreferencesSection() {
|
||||
const [prefs, setPrefs] = useState(null)
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [savedNote, setSavedNote] = useState('')
|
||||
const [error, setError] = useState(null)
|
||||
|
||||
useEffect(() => {
|
||||
getNotificationPreferences().then(setPrefs).catch(e => setError(e.message))
|
||||
}, [])
|
||||
|
||||
async function update(field, value) {
|
||||
setSaving(true)
|
||||
setSavedNote('')
|
||||
try {
|
||||
await setNotificationPreferences({ [field]: value })
|
||||
setPrefs(p => ({ ...p, [field]: value }))
|
||||
setSavedNote('Saved.')
|
||||
} catch (e) {
|
||||
setError(e.message)
|
||||
} finally {
|
||||
setSaving(false)
|
||||
setTimeout(() => setSavedNote(''), 1500)
|
||||
}
|
||||
}
|
||||
|
||||
if (!prefs) return <SectionShell title="Email" subtitle={error || 'Loading…'} />
|
||||
|
||||
return (
|
||||
<SectionShell title="Email" subtitle="Categories you want delivered as email. The inbox always carries everything; email is opt-in by category.">
|
||||
<Toggle
|
||||
label="Personal direct"
|
||||
description="You are the named subject — proposals merged, decisions, claims, named asks. Default on."
|
||||
checked={!!prefs.email_personal_direct}
|
||||
onChange={v => update('email_personal_direct', v)}
|
||||
disabled={saving}
|
||||
/>
|
||||
<Toggle
|
||||
label="Watched structural"
|
||||
description="Decisions on RFCs you watch — merges, declines, graduation, ownership changes. Default off."
|
||||
checked={!!prefs.email_watched_structural}
|
||||
onChange={v => update('email_watched_structural', v)}
|
||||
disabled={saving}
|
||||
/>
|
||||
<Toggle
|
||||
label="Admin actionable"
|
||||
description="Decisions only an admin can act on. Defaults on for admins/owners; ignored for contributors."
|
||||
checked={!!prefs.email_admin_actionable}
|
||||
onChange={v => update('email_admin_actionable', v)}
|
||||
disabled={saving}
|
||||
/>
|
||||
<Toggle
|
||||
label="Watched churn (per-commit, per-message)"
|
||||
description={CHURN_REFUSAL}
|
||||
checked={false}
|
||||
disabled
|
||||
title={CHURN_REFUSAL}
|
||||
/>
|
||||
{!!prefs.email_opt_out_all && (
|
||||
<p className="settings-note warning">
|
||||
A hard bounce or complaint from your mailbox flipped the global
|
||||
email opt-out. No email will be sent until you contact an admin
|
||||
to clear the flag, even if individual categories are enabled.
|
||||
</p>
|
||||
)}
|
||||
<p className="settings-note">{savedNote}</p>
|
||||
</SectionShell>
|
||||
)
|
||||
}
|
||||
|
||||
// ── §15.5 digest cadence ───────────────────────────────────────────────────
|
||||
|
||||
function DigestCadenceSection() {
|
||||
const [cadence, setCadence] = useState(null)
|
||||
const [saving, setSaving] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
getNotificationPreferences().then(p => setCadence(p.digest_cadence || 'weekly'))
|
||||
}, [])
|
||||
|
||||
async function update(value) {
|
||||
setSaving(true)
|
||||
try {
|
||||
await setNotificationPreferences({ digest_cadence: value })
|
||||
setCadence(value)
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<SectionShell
|
||||
title="Digest cadence"
|
||||
subtitle="The §15.5 digest gathers churn-category activity into a single periodic email. Independent of the category toggles above."
|
||||
>
|
||||
<div className="settings-row">
|
||||
<select
|
||||
value={cadence ?? 'weekly'}
|
||||
onChange={e => update(e.target.value)}
|
||||
disabled={saving || cadence == null}
|
||||
>
|
||||
<option value="off">Off — never send a digest</option>
|
||||
<option value="weekly">Weekly</option>
|
||||
<option value="daily">Daily</option>
|
||||
</select>
|
||||
</div>
|
||||
</SectionShell>
|
||||
)
|
||||
}
|
||||
|
||||
// ── §15.8 quiet hours ──────────────────────────────────────────────────────
|
||||
|
||||
function QuietHoursSection() {
|
||||
const [data, setData] = useState(null)
|
||||
const [draft, setDraft] = useState({ start: '', end: '', timezone: '' })
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [error, setError] = useState(null)
|
||||
|
||||
// The browser ships an IANA tz list per §15.8 — preferable to a
|
||||
// free-text field, since the API validates the trio.
|
||||
const timezones = useMemo(() => {
|
||||
try {
|
||||
return Intl.supportedValuesOf('timeZone')
|
||||
} catch {
|
||||
return ['UTC']
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
getQuietHours().then(q => {
|
||||
setData(q)
|
||||
setDraft({
|
||||
start: q.start || '',
|
||||
end: q.end || '',
|
||||
timezone: q.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
})
|
||||
})
|
||||
}, [])
|
||||
|
||||
async function save() {
|
||||
setSaving(true)
|
||||
setError(null)
|
||||
try {
|
||||
await setQuietHours({ start: draft.start, end: draft.end, timezone: draft.timezone })
|
||||
setData({ start: draft.start, end: draft.end, timezone: draft.timezone })
|
||||
} catch (e) {
|
||||
setError(e.message)
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function clear() {
|
||||
setSaving(true)
|
||||
setError(null)
|
||||
try {
|
||||
await setQuietHours({ start: null, end: null, timezone: null })
|
||||
setData({ start: null, end: null, timezone: null })
|
||||
setDraft({ start: '', end: '', timezone: Intl.DateTimeFormat().resolvedOptions().timeZone })
|
||||
} catch (e) {
|
||||
setError(e.message)
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (!data) return <SectionShell title="Quiet hours" subtitle="Loading…" />
|
||||
|
||||
const isSet = !!(data.start && data.end && data.timezone)
|
||||
|
||||
return (
|
||||
<SectionShell
|
||||
title="Quiet hours"
|
||||
subtitle="Email holds during this window; inbox rows still land. On window-end, the §15.4 bundle email releases everything above the threshold."
|
||||
>
|
||||
<div className="settings-row quiet-hours-row">
|
||||
<label>
|
||||
Start
|
||||
<input
|
||||
type="time"
|
||||
value={draft.start}
|
||||
onChange={e => setDraft(d => ({ ...d, start: e.target.value }))}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
End
|
||||
<input
|
||||
type="time"
|
||||
value={draft.end}
|
||||
onChange={e => setDraft(d => ({ ...d, end: e.target.value }))}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Timezone
|
||||
<select
|
||||
value={draft.timezone}
|
||||
onChange={e => setDraft(d => ({ ...d, timezone: e.target.value }))}
|
||||
>
|
||||
{timezones.map(tz => <option key={tz} value={tz}>{tz}</option>)}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div className="settings-row">
|
||||
<button className="btn-primary" disabled={saving} onClick={save}>
|
||||
{isSet ? 'Update quiet hours' : 'Set quiet hours'}
|
||||
</button>
|
||||
{isSet && (
|
||||
<button className="btn-link-muted" disabled={saving} onClick={clear}>
|
||||
Clear
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{error && <p className="settings-note warning">{error}</p>}
|
||||
</SectionShell>
|
||||
)
|
||||
}
|
||||
|
||||
// ── §15.6 watches overview ─────────────────────────────────────────────────
|
||||
|
||||
function WatchesSection() {
|
||||
const [watches, setWatches] = useState(null)
|
||||
const [updating, setUpdating] = useState({})
|
||||
|
||||
useEffect(() => { listWatches().then(r => setWatches(r.items || [])) }, [])
|
||||
|
||||
async function update(slug, state) {
|
||||
setUpdating(u => ({ ...u, [slug]: true }))
|
||||
try {
|
||||
const r = await setWatch(slug, state)
|
||||
setWatches(prev => prev.map(w => w.rfc_slug === slug
|
||||
? { ...w, state: r.state, set_by: 'explicit' }
|
||||
: w
|
||||
))
|
||||
} finally {
|
||||
setUpdating(u => ({ ...u, [slug]: false }))
|
||||
}
|
||||
}
|
||||
|
||||
if (!watches) return <SectionShell title="Watches" subtitle="Loading…" />
|
||||
|
||||
return (
|
||||
<SectionShell
|
||||
title="Watches"
|
||||
subtitle="What you receive structural-category notifications about. Auto-set when you participate, decays after 90 days of silence. An explicit choice here exempts the row from the auto-decay."
|
||||
>
|
||||
{watches.length === 0 && (
|
||||
<p className="muted">No watches yet. Open an RFC, propose, or join a thread — auto-watch will set one for you.</p>
|
||||
)}
|
||||
{watches.length > 0 && (
|
||||
<table className="settings-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>RFC</th>
|
||||
<th>State</th>
|
||||
<th>Set by</th>
|
||||
<th>Last participation</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{watches.map(w => (
|
||||
<tr key={w.rfc_slug}>
|
||||
<td>
|
||||
<Link to={`/rfc/${w.rfc_slug}`}>{w.rfc_title || w.rfc_slug}</Link>
|
||||
</td>
|
||||
<td>
|
||||
<select
|
||||
value={w.state}
|
||||
onChange={e => update(w.rfc_slug, e.target.value)}
|
||||
disabled={!!updating[w.rfc_slug]}
|
||||
>
|
||||
<option value="watching">Watching</option>
|
||||
<option value="following">Following</option>
|
||||
<option value="muted">Muted</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<span className={`set-by set-by-${w.set_by}`}>
|
||||
{w.set_by === 'explicit' ? 'You' : 'Auto'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="muted">
|
||||
{w.last_participation_at || '—'}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</SectionShell>
|
||||
)
|
||||
}
|
||||
|
||||
// ── §15.8 per-user mute list + typeahead add ───────────────────────────────
|
||||
|
||||
function MutesSection({ viewer }) {
|
||||
const [mutes, setMutes] = useState(null)
|
||||
const [error, setError] = useState(null)
|
||||
|
||||
async function refresh() {
|
||||
try {
|
||||
const r = await listMutes()
|
||||
setMutes(r.items || [])
|
||||
} catch (e) {
|
||||
setError(e.message)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => { refresh() }, [])
|
||||
|
||||
async function remove(userId) {
|
||||
await unmuteUser(userId)
|
||||
setMutes(prev => prev.filter(m => m.muted_user_id !== userId))
|
||||
}
|
||||
|
||||
return (
|
||||
<SectionShell
|
||||
title="Muted users"
|
||||
subtitle="Notifications from these users won't reach your inbox. (Mute does not gate visibility — you can still read what they post.) Adding a mute here is the catch-all path; the intended path is to mute from an inbox row's actor avatar."
|
||||
>
|
||||
{viewer.role === 'owner' || viewer.role === 'admin' ? (
|
||||
<p className="muted">
|
||||
Owners and admins cannot mute notifications — the role requires
|
||||
receiving signals from everyone. (§15.8)
|
||||
</p>
|
||||
) : (
|
||||
<MuteTypeahead onMuted={refresh} />
|
||||
)}
|
||||
{mutes && mutes.length === 0 && (
|
||||
<p className="muted">No active mutes.</p>
|
||||
)}
|
||||
{mutes && mutes.length > 0 && (
|
||||
<ul className="mutes-list">
|
||||
{mutes.map(m => (
|
||||
<li key={m.muted_user_id} className="mutes-row">
|
||||
<span className="mute-handle">@{m.gitea_login}</span>
|
||||
<span className="mute-name muted">{m.display_name}</span>
|
||||
<span className="mute-when muted">since {m.muted_at}</span>
|
||||
<button className="btn-link-muted" onClick={() => remove(m.muted_user_id)}>
|
||||
Unmute
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
{error && <p className="settings-note warning">{error}</p>}
|
||||
</SectionShell>
|
||||
)
|
||||
}
|
||||
|
||||
// The mute-list read endpoint isn't a separate route in the API today
|
||||
// (§17 names add/delete only); we read the join here against /api/users/me
|
||||
// via a tiny dedicated endpoint that mirrors the watches shape. For
|
||||
// Slice 7's v1 surface, we compute the list client-side from a server
|
||||
// endpoint that returns the joined rows — added in api_admin.py's
|
||||
// neighborhood for proximity.
|
||||
async function listMutes() {
|
||||
const res = await fetch('/api/users/me/notification-mutes')
|
||||
if (!res.ok) {
|
||||
const detail = await res.text()
|
||||
throw new Error(detail || `HTTP ${res.status}`)
|
||||
}
|
||||
return res.json()
|
||||
}
|
||||
|
||||
function MuteTypeahead({ onMuted }) {
|
||||
const [q, setQ] = useState('')
|
||||
const [results, setResults] = useState([])
|
||||
const [open, setOpen] = useState(false)
|
||||
const [busy, setBusy] = useState(false)
|
||||
const [hint, setHint] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
const t = setTimeout(() => {
|
||||
searchUsers(q).then(r => setResults(r.items || []))
|
||||
}, 120)
|
||||
return () => clearTimeout(t)
|
||||
}, [q])
|
||||
|
||||
async function mute(user) {
|
||||
setBusy(true)
|
||||
setHint('')
|
||||
try {
|
||||
await muteUser(user.id)
|
||||
setQ('')
|
||||
setOpen(false)
|
||||
onMuted?.()
|
||||
} catch (e) {
|
||||
setHint(e.message)
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mute-typeahead">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Mute a user by login or name…"
|
||||
value={q}
|
||||
onChange={e => { setQ(e.target.value); setOpen(true) }}
|
||||
onFocus={() => setOpen(true)}
|
||||
onBlur={() => setTimeout(() => setOpen(false), 150)}
|
||||
disabled={busy}
|
||||
/>
|
||||
{open && results.length > 0 && (
|
||||
<ul className="mute-typeahead-results">
|
||||
{results.map(r => (
|
||||
<li key={r.id}>
|
||||
<button onClick={() => mute(r)} disabled={busy}>
|
||||
<span className="mute-handle">@{r.gitea_login}</span>
|
||||
<span className="muted">{r.display_name}</span>
|
||||
{(r.role === 'owner' || r.role === 'admin') && (
|
||||
<span className="muted">{r.role}</span>
|
||||
)}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
{hint && <p className="settings-note warning">{hint}</p>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Small layout primitives ────────────────────────────────────────────────
|
||||
|
||||
function SectionShell({ title, subtitle, children }) {
|
||||
return (
|
||||
<section className="settings-section">
|
||||
<header>
|
||||
<h2>{title}</h2>
|
||||
{subtitle && <p className="settings-sub">{subtitle}</p>}
|
||||
</header>
|
||||
<div className="settings-section-body">{children}</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function Toggle({ label, description, checked, onChange, disabled, title }) {
|
||||
return (
|
||||
<label className={`toggle-row ${disabled ? 'disabled' : ''}`} title={title}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={!!checked}
|
||||
onChange={e => onChange?.(e.target.checked)}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<span className="toggle-text">
|
||||
<span className="toggle-label">{label}</span>
|
||||
{description && <span className="toggle-desc">{description}</span>}
|
||||
</span>
|
||||
</label>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user