Feedback inbox: read/unread + delete
Make the admin Feedback section a real inbox.
* DB: feedback.read_at column (schema + idempotent migration).
* API: feedback list returns read_at; POST /api/admin/feedback/{id}/read
{read} toggles it; DELETE /api/admin/feedback/{id} removes a message
(both admin-gated). admin_stats gains feedback_unread; the Attention strip
and the tab badge now count UNREAD, not total.
* Frontend: unread messages are highlighted with an accent rail + dot; an
Unread filter joins the category chips; each message has Mark read/unread
and Delete (confirm), with optimistic updates that revert on failure.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
import { onMount } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { page } from '$app/stores';
|
||||
import { getJSON } from '$lib/api.js';
|
||||
import { getJSON, postJSON, delJSON } from '$lib/api.js';
|
||||
import { auth, refresh } from '$lib/auth.svelte.js';
|
||||
|
||||
let stats = $state(null);
|
||||
@@ -62,10 +62,37 @@
|
||||
: sources
|
||||
);
|
||||
|
||||
// Feedback inbox filter.
|
||||
let fbCat = $state('all');
|
||||
let shownFeedback = $derived(fbCat === 'all' ? feedback : feedback.filter((f) => f.category === fbCat));
|
||||
// Feedback inbox: filter + read/unread + delete.
|
||||
let fbCat = $state('all'); // 'all' | 'unread' | a category
|
||||
let shownFeedback = $derived(
|
||||
fbCat === 'all' ? feedback
|
||||
: fbCat === 'unread' ? feedback.filter((f) => !f.read_at)
|
||||
: feedback.filter((f) => f.category === fbCat)
|
||||
);
|
||||
let fbCats = $derived([...new Set(feedback.map((f) => f.category))]);
|
||||
let unreadCount = $derived(feedback.filter((f) => !f.read_at).length);
|
||||
|
||||
async function markRead(f, read) {
|
||||
const prev = f.read_at;
|
||||
f.read_at = read ? new Date().toISOString().slice(0, 19).replace('T', ' ') : null; // optimistic
|
||||
feedback = [...feedback];
|
||||
try {
|
||||
await postJSON(`/api/admin/feedback/${f.id}/read`, { read });
|
||||
} catch {
|
||||
f.read_at = prev; // revert on failure
|
||||
feedback = [...feedback];
|
||||
}
|
||||
}
|
||||
async function removeFeedback(f) {
|
||||
if (!confirm('Delete this feedback message? This cannot be undone.')) return;
|
||||
const snapshot = feedback;
|
||||
feedback = feedback.filter((x) => x.id !== f.id); // optimistic
|
||||
try {
|
||||
await delJSON(`/api/admin/feedback/${f.id}`);
|
||||
} catch {
|
||||
feedback = snapshot; // revert on failure
|
||||
}
|
||||
}
|
||||
|
||||
const SHARE_LABEL = {
|
||||
share_ub: 'Copied UB link',
|
||||
@@ -95,7 +122,7 @@
|
||||
<nav class="tabs" aria-label="Dashboard sections">
|
||||
{#each TABS as t (t.key)}
|
||||
<a href={'?section=' + t.key} class:active={section === t.key}>
|
||||
{t.label}{#if t.key === 'feedback' && feedback.length}<span class="badge">{feedback.length}</span>{/if}
|
||||
{t.label}{#if t.key === 'feedback' && unreadCount}<span class="badge">{unreadCount}</span>{/if}
|
||||
</a>
|
||||
{/each}
|
||||
</nav>
|
||||
@@ -294,26 +321,34 @@
|
||||
</section>
|
||||
|
||||
{:else if section === 'feedback'}
|
||||
<h2>Feedback {#if feedback.length}<span class="count">({feedback.length})</span>{/if}</h2>
|
||||
<h2>Feedback {#if feedback.length}<span class="count">({unreadCount} unread / {feedback.length})</span>{/if}</h2>
|
||||
{#if feedback.length}
|
||||
<div class="filterchips">
|
||||
<button class="chip" class:on={fbCat === 'all'} onclick={() => (fbCat = 'all')}>All</button>
|
||||
<button class="chip" class:on={fbCat === 'unread'} onclick={() => (fbCat = 'unread')}>Unread{#if unreadCount} ({unreadCount}){/if}</button>
|
||||
{#each fbCats as cat (cat)}
|
||||
<button class="chip" class:on={fbCat === cat} onclick={() => (fbCat = cat)}>{cat}</button>
|
||||
{/each}
|
||||
</div>
|
||||
{#if shownFeedback.length}
|
||||
<ul class="fb">
|
||||
{#each shownFeedback as f (f.id)}
|
||||
<li>
|
||||
<li class:unread={!f.read_at}>
|
||||
<div class="fhead">
|
||||
{#if !f.read_at}<span class="dot" title="Unread"></span>{/if}
|
||||
<span class="cat">{f.category}</span>
|
||||
<span class="when">{fdate(f.created_at)}</span>
|
||||
{#if f.contact_email}<a class="reply" href={'mailto:' + f.contact_email}>Reply ↩</a>{:else}<span class="anon">anonymous</span>{/if}
|
||||
</div>
|
||||
<p class="msg">{f.message}</p>
|
||||
<div class="factions">
|
||||
<button class="act" onclick={() => markRead(f, !f.read_at)}>{f.read_at ? 'Mark unread' : 'Mark read'}</button>
|
||||
<button class="act del" onclick={() => removeFeedback(f)}>Delete</button>
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{:else}<p class="muted">Nothing in this filter.</p>{/if}
|
||||
{:else}<p class="muted">No feedback yet.</p>{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
@@ -419,10 +454,19 @@
|
||||
.count { color: var(--muted); font-weight: 400; font-size: 0.9rem; }
|
||||
ul.fb { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
|
||||
ul.fb li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
|
||||
ul.fb li.unread { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
|
||||
.fhead { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; font-size: 0.78rem; }
|
||||
.fhead .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
|
||||
.fhead .cat { background: var(--accent-soft); color: var(--accent-deep); border-radius: 999px; padding: 2px 9px; text-transform: capitalize; }
|
||||
.fhead .when { color: var(--muted); }
|
||||
.fhead .reply { color: var(--accent-deep); margin-left: auto; }
|
||||
.fhead .anon { color: var(--muted); margin-left: auto; font-style: italic; }
|
||||
.msg { margin: 0; color: var(--ink); font-size: 0.92rem; white-space: pre-wrap; }
|
||||
.factions { display: flex; gap: 14px; margin-top: 9px; }
|
||||
.factions .act {
|
||||
background: none; border: none; padding: 0; cursor: pointer;
|
||||
color: var(--muted); font-size: 0.76rem; border-bottom: 1px dotted var(--line);
|
||||
}
|
||||
.factions .act:hover { color: var(--accent-deep); border-bottom-color: var(--accent); }
|
||||
.factions .act.del:hover { color: #9a3b3b; border-bottom-color: #9a3b3b; }
|
||||
</style>
|
||||
|
||||
+25
-2
@@ -377,6 +377,10 @@ class FeedbackBody(BaseModel):
|
||||
hp: str | None = None # honeypot — bots fill it, humans don't
|
||||
|
||||
|
||||
class FeedbackReadBody(BaseModel):
|
||||
read: bool = True
|
||||
|
||||
|
||||
_FEEDBACK_CATEGORIES = {"idea", "concern", "bug", "praise", "other"}
|
||||
|
||||
# The only event kinds we record. All aggregate, non-personal.
|
||||
@@ -782,12 +786,31 @@ def create_app() -> FastAPI:
|
||||
with get_conn() as conn:
|
||||
_require_admin(conn, request)
|
||||
rows = conn.execute(
|
||||
"SELECT f.id, f.category, f.message, f.contact_email, f.created_at, "
|
||||
"SELECT f.id, f.category, f.message, f.contact_email, f.created_at, f.read_at, "
|
||||
"u.email AS user_email FROM feedback f LEFT JOIN users u ON u.id = f.user_id "
|
||||
"ORDER BY f.created_at DESC LIMIT 100"
|
||||
"ORDER BY f.created_at DESC LIMIT 200"
|
||||
).fetchall()
|
||||
return [dict(r) for r in rows]
|
||||
|
||||
@app.post("/api/admin/feedback/{fid}/read")
|
||||
def admin_feedback_read(fid: int, body: FeedbackReadBody, request: Request) -> dict:
|
||||
with get_conn() as conn:
|
||||
_require_admin(conn, request)
|
||||
if body.read:
|
||||
conn.execute("UPDATE feedback SET read_at = CURRENT_TIMESTAMP WHERE id = ?", (fid,))
|
||||
else:
|
||||
conn.execute("UPDATE feedback SET read_at = NULL WHERE id = ?", (fid,))
|
||||
conn.commit()
|
||||
return {"ok": True, "read": body.read}
|
||||
|
||||
@app.delete("/api/admin/feedback/{fid}")
|
||||
def admin_feedback_delete(fid: int, request: Request) -> dict:
|
||||
with get_conn() as conn:
|
||||
_require_admin(conn, request)
|
||||
conn.execute("DELETE FROM feedback WHERE id = ?", (fid,))
|
||||
conn.commit()
|
||||
return {"ok": True}
|
||||
|
||||
@app.get("/api/admin/stats")
|
||||
def admin_stats(request: Request) -> dict:
|
||||
with get_conn() as conn:
|
||||
|
||||
+7
-1
@@ -236,7 +236,8 @@ CREATE TABLE IF NOT EXISTS feedback (
|
||||
user_id INTEGER REFERENCES users(id) ON DELETE SET NULL,
|
||||
visitor_hash TEXT NOT NULL DEFAULT '',
|
||||
day TEXT NOT NULL,
|
||||
created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP
|
||||
created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
read_at TEXT
|
||||
);
|
||||
CREATE INDEX IF NOT EXISTS idx_feedback_created ON feedback(created_at);
|
||||
"""
|
||||
@@ -304,3 +305,8 @@ def _migrate(conn: sqlite3.Connection) -> None:
|
||||
for column, decl in health_columns.items():
|
||||
if column not in source_cols:
|
||||
conn.execute(f"ALTER TABLE sources ADD COLUMN {column} {decl}")
|
||||
|
||||
# feedback.read_at (admin inbox read/unread) added later.
|
||||
fb_cols = {row["name"] for row in conn.execute("PRAGMA table_info(feedback)")}
|
||||
if fb_cols and "read_at" not in fb_cols:
|
||||
conn.execute("ALTER TABLE feedback ADD COLUMN read_at TEXT")
|
||||
|
||||
+6
-4
@@ -313,7 +313,7 @@ def source_health(conn: sqlite3.Connection) -> list[dict]:
|
||||
return [dict(r) for r in rows]
|
||||
|
||||
|
||||
def _attention(content: dict, sources: list[dict], feedback_7d: int) -> list[dict]:
|
||||
def _attention(content: dict, sources: list[dict], feedback_unread: int) -> list[dict]:
|
||||
"""The 'Attention Needed' strip: what an operator should look at, soft-toned
|
||||
(warn = act soon, info = worth a glance). Derived from the same data shown
|
||||
elsewhere, so it never disagrees with the detail sections."""
|
||||
@@ -336,8 +336,8 @@ def _attention(content: dict, sources: list[dict], feedback_7d: int) -> list[dic
|
||||
if brief_size < 7:
|
||||
items.append({"level": "info", "text": f"Today's brief has only {brief_size} item{n(brief_size)}"})
|
||||
|
||||
if feedback_7d:
|
||||
items.append({"level": "info", "text": f"{feedback_7d} feedback message{n(feedback_7d)} in the last 7 days"})
|
||||
if feedback_unread:
|
||||
items.append({"level": "info", "text": f"{feedback_unread} unread feedback message{n(feedback_unread)}"})
|
||||
return items
|
||||
|
||||
|
||||
@@ -441,13 +441,15 @@ def admin_stats(conn: sqlite3.Connection, days: int = 30) -> dict:
|
||||
content = content_stats(conn)
|
||||
sources = source_health(conn)
|
||||
feedback_7d = scalar("SELECT COUNT(*) FROM feedback WHERE created_at >= datetime('now','-7 days')")
|
||||
feedback_unread = scalar("SELECT COUNT(*) FROM feedback WHERE read_at IS NULL")
|
||||
|
||||
return {
|
||||
"days": days,
|
||||
"content": content,
|
||||
"sources": sources,
|
||||
"attention": _attention(content, sources, feedback_7d),
|
||||
"attention": _attention(content, sources, feedback_unread),
|
||||
"feedback_7d": feedback_7d,
|
||||
"feedback_unread": feedback_unread,
|
||||
"visitors": visitors,
|
||||
"returning": loyalty.get("returning", 0),
|
||||
"once": loyalty.get("once", 0),
|
||||
|
||||
@@ -57,12 +57,12 @@ def test_attention_flags_resting_flagged_and_brief():
|
||||
{"failures": 0, "review_flag": 1},
|
||||
{"failures": 0, "review_flag": 0},
|
||||
]
|
||||
items = queries._attention(content, sources, feedback_7d=2)
|
||||
items = queries._attention(content, sources, feedback_unread=2)
|
||||
texts = " | ".join(i["text"] for i in items)
|
||||
assert "1 source backing off" in texts # one resting
|
||||
assert "1 source flagged" in texts # one flagged
|
||||
assert "brief has only 5" in texts # brief < 7
|
||||
assert "2 feedback" in texts # recent feedback
|
||||
assert "2 unread feedback" in texts # unread feedback
|
||||
# 90/100 = 90% image coverage → no coverage warning
|
||||
assert "Image coverage" not in texts
|
||||
|
||||
@@ -71,4 +71,4 @@ def test_attention_clear_when_healthy():
|
||||
from goodnews import queries
|
||||
content = {"served": 100, "with_image": 95, "latest_brief_size": 7}
|
||||
sources = [{"failures": 0, "review_flag": 0}]
|
||||
assert queries._attention(content, sources, feedback_7d=0) == []
|
||||
assert queries._attention(content, sources, feedback_unread=0) == []
|
||||
|
||||
@@ -50,3 +50,41 @@ def test_admin_feedback_gated(tmp_path, monkeypatch):
|
||||
stats = tc.get("/api/admin/stats").json()
|
||||
assert {"funnel", "accounts", "retention", "emotional_mix", "paywall", "replace"} <= set(stats)
|
||||
assert stats["accounts"]["total"] >= 1
|
||||
|
||||
|
||||
def _admin_client(tmp_path, monkeypatch):
|
||||
app, api, db = _app(tmp_path, monkeypatch, admin="boss@x.com")
|
||||
monkeypatch.setattr(api.email_send, "send_feedback", lambda *a, **k: None)
|
||||
TestClient(app).post("/api/feedback", json={"message": "hello there", "visitor": "v"})
|
||||
tc = TestClient(app); sent = {}
|
||||
monkeypatch.setattr(api.email_send, "send_magic_link", lambda to, link: sent.update(link=link))
|
||||
tc.post("/api/auth/email/start", json={"email": "boss@x.com"})
|
||||
tc.post("/api/auth/email/verify", json={"token": sent["link"].split("token=")[1]})
|
||||
return tc
|
||||
|
||||
|
||||
def test_feedback_read_unread_and_delete(tmp_path, monkeypatch):
|
||||
tc = _admin_client(tmp_path, monkeypatch)
|
||||
fb = tc.get("/api/admin/feedback").json()
|
||||
fid = fb[0]["id"]
|
||||
assert fb[0]["read_at"] is None # starts unread
|
||||
assert tc.get("/api/admin/stats").json()["feedback_unread"] == 1
|
||||
|
||||
tc.post(f"/api/admin/feedback/{fid}/read", json={"read": True})
|
||||
assert tc.get("/api/admin/feedback").json()[0]["read_at"] is not None
|
||||
assert tc.get("/api/admin/stats").json()["feedback_unread"] == 0
|
||||
|
||||
tc.post(f"/api/admin/feedback/{fid}/read", json={"read": False}) # back to unread
|
||||
assert tc.get("/api/admin/stats").json()["feedback_unread"] == 1
|
||||
|
||||
assert tc.delete(f"/api/admin/feedback/{fid}").json() == {"ok": True}
|
||||
assert tc.get("/api/admin/feedback").json() == []
|
||||
|
||||
|
||||
def test_feedback_admin_actions_gated(tmp_path, monkeypatch):
|
||||
app, api, db = _app(tmp_path, monkeypatch, admin="boss@x.com")
|
||||
monkeypatch.setattr(api.email_send, "send_feedback", lambda *a, **k: None)
|
||||
TestClient(app).post("/api/feedback", json={"message": "hi", "visitor": "v"})
|
||||
anon = TestClient(app)
|
||||
assert anon.post("/api/admin/feedback/1/read", json={"read": True}).status_code == 401
|
||||
assert anon.delete("/api/admin/feedback/1").status_code == 401
|
||||
|
||||
Reference in New Issue
Block a user