feat: cases (reports, reviews, requests, appeals) and notifications (#9)
Phase 3, part 1 (`docs/design.md`, "Next"): cases and notifications. File blocks, API tokens and two-factor sign-in come as separate PRs.
**Cases**
- One queue (Console → Cases) for everything someone has to decide. Each case has:
- a thread of notes, where internal notes are visible only to those deciding
- an assignee (moderators assign cases to moderators)
- a decision, Resolve or Decline, with a written resolution that the person who opened it sees
- **Reports:** anyone signed in can report a product or catalog from its page (the API also takes rooms and people).
- Limits: 10 an hour, one open report per person and thing, and you can't report yourself.
- Reports about a product go to the teams of the catalogs hosting it, as well as to moderators.
- Only the reporter and moderators know who reported. The audit entry for a report isn't tagged with what it's about, so a product's creator can't find out from their audit log either.
- **Rating reviews:** a creator lowering a rating from adult to general now opens a review instead of being refused. The rest of the edit still saves. Resolving the review lowers the rating, recorded in the product's history.
- **Removal requests:** a catalog's team can ask moderators to remove a product it hosts, everywhere. Resolving it removes the product.
- **Deletion requests:** a catalog's owner asks for deletion from the catalog's console page, and a moderator decides, as agreed. Resolving it marks the catalog `deleted`: its key stops working, nothing is available from it, and its changes feed says so.
- **Appeals:**
- From the audit log, the person an action affected can appeal it, once: their product removed, delisted or edited by someone else; their catalog suspended or rejected; a ban from a catalog or a declined request to join.
- Another moderator decides. An admin may decide an appeal of their own action, and the audit log flags it.
- Resolving records the decision; the moderator then undoes the action where it's done. For that, there's now a Restore for removed products (Console → Products, for moderators); the design mentioned one, but it was never built.
- The console shows a "Cases" tab, and a to-do with the number of open cases the person could decide.
**Notifications**
- A bell in the header with the unread count, and a notifications page with "Mark all as read".
- Each is also sent to the person's proxies over the realtime connection (`{"type": "notification"}`), so the client can show them later.
- They cover:
- a moderator edited or locked your product, or undid a change (with the reason)
- your product was removed or restored
- your case was decided
- someone replied on your case
- a catalog decided your membership
**Also changed**
- A product's creator and moderators can now see it when it's adult, even without an adult account. Before, a creator who made their own product adult couldn't open its page any more, and neither could moderators. Getting and wearing adult products still need an adult account.
**Not done yet** (in `docs/console.md`): email notifications (the hub sends no email yet), canned reasons, private moderator notes on people and products, and second approval for the most destructive actions.
**Migration** `0012_cases`: the `moderation_case`, `case_note` and `notification` tables. (`case` is a reserved word in SQL, hence the table's name.)
**Checks**
- 51 API tests pass. The 7 in the new `cases.test.ts` cover:
- who sees and decides each kind of case, and that the reporter stays private
- rate limits and duplicate reports
- the thread and internal notes, and assigning
- what deciding each kind of case does
- appeals by the person affected only, decided by another moderator
- restoring a removed product
- the notifications
- Type checks pass.
- On a local hub I went through every flow with the website's own forms: report from a product page; the catalog owner's note and decision; assigning, an internal note and a decision as admin; removal by a moderator, the creator's appeal from the audit log, the admin's decision and Restore; a creator's rating review and the decision lowering the rating; a deletion request and its decline; the notifications, the bell's count, and Mark all as read.
- Fixed along the way:
- The catalog's team could see who reported.
- A missing Resolve/Decline choice was treated as Decline; now it's refused.
- The Unassign button sent the typed name instead of nothing.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Phase 3, part 1 (`docs/design.md`, "Next"): cases and notifications. File blocks, API tokens and two-factor sign-in come as separate PRs.
**Cases**
- One queue (Console → Cases) for everything someone has to decide. Each case has:
- a thread of notes, where internal notes are visible only to those deciding
- an assignee (moderators assign cases to moderators)
- a decision, Resolve or Decline, with a written resolution that the person who opened it sees
- **Reports:** anyone signed in can report a product or catalog from its page (the API also takes rooms and people).
- Limits: 10 an hour, one open report per person and thing, and you can't report yourself.
- Reports about a product go to the teams of the catalogs hosting it, as well as to moderators.
- Only the reporter and moderators know who reported. The audit entry for a report isn't tagged with what it's about, so a product's creator can't find out from their audit log either.
- **Rating reviews:** a creator lowering a rating from adult to general now opens a review instead of being refused. The rest of the edit still saves. Resolving the review lowers the rating, recorded in the product's history.
- **Removal requests:** a catalog's team can ask moderators to remove a product it hosts, everywhere. Resolving it removes the product.
- **Deletion requests:** a catalog's owner asks for deletion from the catalog's console page, and a moderator decides, as agreed. Resolving it marks the catalog `deleted`: its key stops working, nothing is available from it, and its changes feed says so.
- **Appeals:**
- From the audit log, the person an action affected can appeal it, once: their product removed, delisted or edited by someone else; their catalog suspended or rejected; a ban from a catalog or a declined request to join.
- Another moderator decides. An admin may decide an appeal of their own action, and the audit log flags it.
- Resolving records the decision; the moderator then undoes the action where it's done. For that, there's now a Restore for removed products (Console → Products, for moderators); the design mentioned one, but it was never built.
- The console shows a "Cases" tab, and a to-do with the number of open cases the person could decide.
**Notifications**
- A bell in the header with the unread count, and a notifications page with "Mark all as read".
- Each is also sent to the person's proxies over the realtime connection (`{"type": "notification"}`), so the client can show them later.
- They cover:
- a moderator edited or locked your product, or undid a change (with the reason)
- your product was removed or restored
- your case was decided
- someone replied on your case
- a catalog decided your membership
**Also changed**
- A product's creator and moderators can now see it when it's adult, even without an adult account. Before, a creator who made their own product adult couldn't open its page any more, and neither could moderators. Getting and wearing adult products still need an adult account.
**Not done yet** (in `docs/console.md`): email notifications (the hub sends no email yet), canned reasons, private moderator notes on people and products, and second approval for the most destructive actions.
**Migration** `0012_cases`: the `moderation_case`, `case_note` and `notification` tables. (`case` is a reserved word in SQL, hence the table's name.)
**Checks**
- 51 API tests pass. The 7 in the new `cases.test.ts` cover:
- who sees and decides each kind of case, and that the reporter stays private
- rate limits and duplicate reports
- the thread and internal notes, and assigning
- what deciding each kind of case does
- appeals by the person affected only, decided by another moderator
- restoring a removed product
- the notifications
- Type checks pass.
- On a local hub I went through every flow with the website's own forms: report from a product page; the catalog owner's note and decision; assigning, an internal note and a decision as admin; removal by a moderator, the creator's appeal from the audit log, the admin's decision and Restore; a creator's rating review and the decision lowering the rating; a deletion request and its decline; the notifications, the bell's count, and Mark all as read.
- Fixed along the way:
- The catalog's team could see who reported.
- A missing Resolve/Decline choice was treated as Decline; now it's refused.
- The Unassign button sent the typed name instead of nothing.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-authored-by: dhkatz <[email protected]>
This commit was merged in pull request #9.
This commit is contained in:
dhkatz authored and 
dhkatz committed
1 parent
e07a6c6dac
commit
7299e10b08
33 files changed
+5228
-44
No files matched your search
@@ -1,6 +1,7 @@
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { notFound } from "next/navigation";
|
||||
import { ReportForm } from "@/components/cases";
|
||||
import { membership as membershipLabel } from "@/components/catalogs";
|
||||
import { ActionForm, SubmitButton } from "@/components/forms";
|
||||
import { PageHeader, Tag } from "@/components/status";
|
||||
@@ -95,6 +96,7 @@ export default async function CatalogPage({
|
||||
Manage
|
||||
</Link>
|
||||
)}
|
||||
{me && !manage && <ReportForm about="catalog" id={id} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +1,10 @@
|
||||
import Link from "next/link";
|
||||
import { ActionForm, SubmitButton } from "@/components/forms";
|
||||
import { DateTime } from "@/components/time";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import type { AuditEntry } from "@/lib/api";
|
||||
import { appeal } from "./cases/actions";
|
||||
|
||||
const tagLinks: Record<string, (id: string) => string> = {
|
||||
catalog: (id) => `/console/catalogs/${id}`,
|
||||
@@ -59,7 +62,22 @@ export function AuditTable({ entries, empty = "Nothing yet." }: { entries: Audit
|
||||
})}
|
||||
{Object.keys(e.tags).length === 0 && e.target}
|
||||
</TableCell>
|
||||
<TableCell className="text-xs whitespace-normal text-muted-foreground">{detailText(e.detail)}</TableCell>
|
||||
<TableCell className="text-xs whitespace-normal text-muted-foreground">
|
||||
{detailText(e.detail)}
|
||||
{e.appealable && (
|
||||
<details className="mt-1">
|
||||
<summary className="cursor-pointer text-foreground underline-offset-4 hover:underline">Appeal</summary>
|
||||
<ActionForm action={appeal} fields={{ audit: e.id }} className="mt-2">
|
||||
<div className="flex gap-2">
|
||||
<Input name="reason" required maxLength={2000} placeholder="Why it should be undone" aria-label="Why" className="h-8 min-w-48" />
|
||||
<SubmitButton size="sm" variant="outline" pendingLabel="Sending…">
|
||||
Send
|
||||
</SubmitButton>
|
||||
</div>
|
||||
</ActionForm>
|
||||
</details>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
|
||||
@@ -0,0 +1,191 @@
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { notFound } from "next/navigation";
|
||||
import { CaseAbout, caseKinds, CaseStatus, resolveLabel } from "@/components/cases";
|
||||
import { ActionForm, SubmitButton } from "@/components/forms";
|
||||
import { PageHeader, Tag } from "@/components/status";
|
||||
import { DateTime } from "@/components/time";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { api, unwrap } from "@/lib/api";
|
||||
import { ConsoleNav, requireConsole } from "../../console-nav";
|
||||
import { addNote, assign, decide } from "../actions";
|
||||
|
||||
export const metadata: Metadata = { title: "Case" };
|
||||
|
||||
/** What each kind of case asks. */
|
||||
const asks: Record<string, string> = {
|
||||
report: "Someone reported this.",
|
||||
"rating-review": "Its creator asks to lower its rating from adult to general.",
|
||||
"removal-request": "A catalog hosting it asks for it to be removed everywhere.",
|
||||
"catalog-deletion": "Its owner asks for it to be deleted.",
|
||||
appeal: "The person it affected asks for this action to be undone.",
|
||||
};
|
||||
|
||||
export default async function CasePage({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await params;
|
||||
if (!/^\d{1,9}$/.test(id)) notFound();
|
||||
const { me } = await requireConsole(`/console/cases/${id}`);
|
||||
const answer = await api.cases({ id: Number(id) }).get();
|
||||
if (answer.error) notFound();
|
||||
const { case: c, notes, canDecide, canAssign } = unwrap(answer);
|
||||
const appealed = c.kind === "appeal" ? (c.data as { action?: string; detail?: Record<string, unknown> }) : undefined;
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader title={`${caseKinds[c.kind] ?? c.kind} #${c.id}`}>
|
||||
<span className="flex flex-wrap items-center gap-2">
|
||||
<CaseStatus status={c.status} />
|
||||
<span>
|
||||
opened by {c.openedBy || "someone"} <DateTime iso={c.createdAt} />
|
||||
</span>
|
||||
{c.assignee && <Tag>assigned to {c.assignee}</Tag>}
|
||||
</span>
|
||||
</PageHeader>
|
||||
<ConsoleNav />
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>About</CardTitle>
|
||||
<CardDescription>{asks[c.kind]}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3 text-sm">
|
||||
<p>
|
||||
<CaseAbout tags={c.tags} names={c.tagNames} />
|
||||
</p>
|
||||
{appealed && (
|
||||
<p>
|
||||
<span className="text-muted-foreground">Action appealed: </span>
|
||||
<span className="font-mono text-xs">{appealed.action}</span>
|
||||
{appealed.detail && Object.keys(appealed.detail).length > 0 && (
|
||||
<span className="text-muted-foreground">
|
||||
{" "}
|
||||
({Object.entries(appealed.detail)
|
||||
.map(([k, v]) => `${k}: ${typeof v === "string" ? v : JSON.stringify(v)}`)
|
||||
.join(", ")}
|
||||
)
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
{c.reason && <p className="whitespace-pre-line">{c.reason}</p>}
|
||||
{c.status !== "open" && (
|
||||
<div className="rounded-lg border p-3">
|
||||
<p className="font-medium">
|
||||
{c.status === "resolved" ? "Resolved" : "Declined"} by {c.decidedBy || "a moderator"}{" "}
|
||||
{c.decidedAt && (
|
||||
<span className="font-normal text-muted-foreground">
|
||||
<DateTime iso={c.decidedAt} />
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
{c.resolution && <p className="mt-1 whitespace-pre-line">{c.resolution}</p>}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{canDecide && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Decide</CardTitle>
|
||||
<CardDescription>
|
||||
{c.kind === "report" || c.kind === "appeal"
|
||||
? "Resolving records the decision; take any action where it's done (removed products are restored from Console › Products, edits undone from the product's history)."
|
||||
: `Resolving does it: ${resolveLabel[c.kind]?.toLowerCase()}.`}{" "}
|
||||
{c.openedBy ? `${c.openedBy} is told, with what you write.` : ""}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ActionForm action={decide} fields={{ case: c.id }}>
|
||||
<Textarea name="resolution" maxLength={2000} rows={3} placeholder="What you decided, and why" aria-label="Resolution" />
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<SubmitButton
|
||||
name="decision"
|
||||
value="resolve"
|
||||
pendingLabel="Saving…"
|
||||
confirm={c.kind === "catalog-deletion" || c.kind === "removal-request" ? `${resolveLabel[c.kind]}?` : undefined}
|
||||
>
|
||||
{resolveLabel[c.kind] ?? "Resolve"}
|
||||
</SubmitButton>
|
||||
<SubmitButton name="decision" value="decline" variant="outline" pendingLabel="Saving…">
|
||||
Decline
|
||||
</SubmitButton>
|
||||
</div>
|
||||
</ActionForm>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{canAssign && c.status === "open" && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Assignment</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-wrap gap-2">
|
||||
<ActionForm action={assign} fields={{ case: c.id }} className="flex flex-wrap gap-2 space-y-0">
|
||||
<Input name="to" defaultValue={c.assignee ?? me.username} maxLength={64} aria-label="Moderator" className="max-w-48" />
|
||||
<SubmitButton variant="outline" pendingLabel="Saving…">
|
||||
Assign
|
||||
</SubmitButton>
|
||||
</ActionForm>
|
||||
{c.assignee && (
|
||||
<ActionForm action={assign} fields={{ case: c.id, to: "" }}>
|
||||
<SubmitButton variant="ghost" pendingLabel="Saving…">
|
||||
Unassign
|
||||
</SubmitButton>
|
||||
</ActionForm>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Thread</CardTitle>
|
||||
{canDecide && <CardDescription>Internal notes are only for those deciding.</CardDescription>}
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{notes.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No notes yet.</p>
|
||||
) : (
|
||||
<ul className="divide-y">
|
||||
{notes.map((n) => (
|
||||
<li key={n.id} className="space-y-1 py-3 first:pt-0">
|
||||
<div className="flex flex-wrap items-center gap-2 text-sm">
|
||||
<span className="font-medium">{n.by || "Someone"}</span>
|
||||
{n.internal && <Tag>Internal</Tag>}
|
||||
<span className="text-muted-foreground">
|
||||
<DateTime iso={n.at} />
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm whitespace-pre-line">{n.body}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
<ActionForm action={addNote} fields={{ case: c.id }}>
|
||||
<Textarea name="body" required maxLength={4000} rows={3} placeholder="Write a note" aria-label="Note" />
|
||||
<div className="flex flex-wrap items-center gap-4">
|
||||
<SubmitButton variant="outline" pendingLabel="Sending…">
|
||||
Add note
|
||||
</SubmitButton>
|
||||
{canDecide && (
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<input type="checkbox" name="internal" className="size-4 accent-foreground" />
|
||||
Internal
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
</ActionForm>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Link href="/console/cases" className="text-sm underline-offset-4 hover:underline">
|
||||
All cases
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
"use server";
|
||||
// Cases (reports, reviews, requests, appeals) and notifications, from the website.
|
||||
import { revalidatePath } from "next/cache";
|
||||
import { redirect } from "next/navigation";
|
||||
import { api, unwrap } from "@/lib/api";
|
||||
import { attempt, field, type ActionState } from "@/lib/actions";
|
||||
|
||||
/** Reports a product, catalog, room or person. */
|
||||
export async function report(_: ActionState, form: FormData): Promise<ActionState> {
|
||||
const kind = field(form, "about");
|
||||
const id = field(form, "id");
|
||||
if (!["product", "catalog", "room", "person"].includes(kind)) return { error: "Nothing to report." };
|
||||
return attempt(async () => {
|
||||
unwrap(await api.cases.post({ kind: "report", about: { [kind]: id }, reason: field(form, "reason") }));
|
||||
revalidatePath("/console/cases");
|
||||
return "Reported. Moderators will look at it; you'll be told what they decide.";
|
||||
});
|
||||
}
|
||||
|
||||
/** Appeals an action from the audit log. */
|
||||
export async function appeal(_: ActionState, form: FormData): Promise<ActionState> {
|
||||
let id = 0;
|
||||
const state = await attempt(async () => {
|
||||
const { case: c } = unwrap(await api.cases.post({ kind: "appeal", audit: Number(field(form, "audit")), reason: field(form, "reason") }));
|
||||
id = c.id;
|
||||
});
|
||||
if (state?.error) return state;
|
||||
redirect(`/console/cases/${id}`);
|
||||
}
|
||||
|
||||
/** A catalog's team asks moderators to remove a product everywhere. */
|
||||
export async function requestRemoval(_: ActionState, form: FormData): Promise<ActionState> {
|
||||
return attempt(async () => {
|
||||
unwrap(
|
||||
await api.cases.post({
|
||||
kind: "removal-request",
|
||||
about: { product: field(form, "product") },
|
||||
catalog: field(form, "catalog"),
|
||||
reason: field(form, "reason"),
|
||||
}),
|
||||
);
|
||||
revalidatePath("/console/cases");
|
||||
return "Asked. Moderators will decide.";
|
||||
});
|
||||
}
|
||||
|
||||
/** A catalog's owner asks for it to be deleted. */
|
||||
export async function requestDeletion(_: ActionState, form: FormData): Promise<ActionState> {
|
||||
const id = field(form, "id");
|
||||
let kase = 0;
|
||||
const state = await attempt(async () => {
|
||||
kase = unwrap(await api.catalogs({ id }).delete.post({ reason: field(form, "reason") })).case;
|
||||
});
|
||||
if (state?.error) return state;
|
||||
redirect(`/console/cases/${kase}`);
|
||||
}
|
||||
|
||||
const onCase = (form: FormData) => {
|
||||
const id = Number(field(form, "case"));
|
||||
return { id, done: () => revalidatePath(`/console/cases/${id}`) };
|
||||
};
|
||||
|
||||
export async function addNote(_: ActionState, form: FormData): Promise<ActionState> {
|
||||
const { id, done } = onCase(form);
|
||||
return attempt(async () => {
|
||||
unwrap(await api.cases({ id }).notes.post({ body: field(form, "body"), internal: form.get("internal") === "on" }));
|
||||
done();
|
||||
});
|
||||
}
|
||||
|
||||
export async function assign(_: ActionState, form: FormData): Promise<ActionState> {
|
||||
const { id, done } = onCase(form);
|
||||
return attempt(async () => {
|
||||
const to = field(form, "to");
|
||||
unwrap(await api.cases({ id }).assign.post({ to: to || null }));
|
||||
done();
|
||||
});
|
||||
}
|
||||
|
||||
export async function decide(_: ActionState, form: FormData): Promise<ActionState> {
|
||||
const { id, done } = onCase(form);
|
||||
const decision = field(form, "decision");
|
||||
if (decision !== "resolve" && decision !== "decline") return { error: "Choose to resolve or decline it." };
|
||||
return attempt(async () => {
|
||||
unwrap(await api.cases({ id }).decide.post({ decision, resolution: field(form, "resolution") }));
|
||||
done();
|
||||
revalidatePath("/console/cases");
|
||||
revalidatePath("/console");
|
||||
});
|
||||
}
|
||||
|
||||
export async function markAllRead(_: ActionState): Promise<ActionState> {
|
||||
return attempt(async () => {
|
||||
unwrap(await api.notifications.read.post({}));
|
||||
revalidatePath("/notifications");
|
||||
revalidatePath("/", "layout");
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,122 @@
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { CaseAbout, caseKinds, CaseStatus } from "@/components/cases";
|
||||
import { PageHeader } from "@/components/status";
|
||||
import { DateTime } from "@/components/time";
|
||||
import { Button, buttonVariants } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { api, unwrap } from "@/lib/api";
|
||||
import { ConsoleNav, requireConsole } from "../console-nav";
|
||||
|
||||
export const metadata: Metadata = { title: "Cases" };
|
||||
|
||||
const statuses = ["open", "resolved", "declined"] as const;
|
||||
const kinds = ["report", "rating-review", "removal-request", "catalog-deletion", "appeal"] as const;
|
||||
|
||||
export default async function CasesPage({ searchParams }: { searchParams: Promise<Record<string, string | string[]>> }) {
|
||||
await requireConsole("/console/cases");
|
||||
const params = await searchParams;
|
||||
// Open cases unless asked otherwise ("any" for all).
|
||||
const status = params.status === "any" ? undefined : (statuses.find((s) => s === params.status) ?? "open");
|
||||
const kind = kinds.find((k) => k === params.kind);
|
||||
const mine = params.mine === "1";
|
||||
const before = typeof params.before === "string" && /^\d+$/.test(params.before) ? Number(params.before) : undefined;
|
||||
const data = unwrap(
|
||||
await api.cases.get({
|
||||
query: {
|
||||
...(status ? { status } : {}),
|
||||
...(kind ? { kind } : {}),
|
||||
...(mine ? { mine: "1" as const } : {}),
|
||||
...(before ? { before } : {}),
|
||||
limit: 50,
|
||||
},
|
||||
}),
|
||||
);
|
||||
const older = new URLSearchParams({
|
||||
status: status ?? "any",
|
||||
...(kind ? { kind } : {}),
|
||||
...(mine ? { mine: "1" } : {}),
|
||||
...(data.before ? { before: String(data.before) } : {}),
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader title="Cases">
|
||||
{data.moderator ? "Reports, reviews, requests and appeals." : "Cases you opened, and those about what you manage."}
|
||||
</PageHeader>
|
||||
<ConsoleNav />
|
||||
<form action="/console/cases" className="mb-6 flex flex-wrap gap-2">
|
||||
<NativeSelect name="status" defaultValue={status ?? "any"} aria-label="Status" className="w-36">
|
||||
<NativeSelectOption value="open">Open</NativeSelectOption>
|
||||
<NativeSelectOption value="resolved">Resolved</NativeSelectOption>
|
||||
<NativeSelectOption value="declined">Declined</NativeSelectOption>
|
||||
<NativeSelectOption value="any">Any status</NativeSelectOption>
|
||||
</NativeSelect>
|
||||
<NativeSelect name="kind" defaultValue={kind ?? ""} aria-label="Kind" className="w-44">
|
||||
<NativeSelectOption value="">Any kind</NativeSelectOption>
|
||||
{kinds.map((k) => (
|
||||
<NativeSelectOption key={k} value={k}>
|
||||
{caseKinds[k]}
|
||||
</NativeSelectOption>
|
||||
))}
|
||||
</NativeSelect>
|
||||
<NativeSelect name="mine" defaultValue={mine ? "1" : ""} aria-label="Whose" className="w-44">
|
||||
<NativeSelectOption value="">{data.moderator ? "Everyone's" : "All I can see"}</NativeSelectOption>
|
||||
<NativeSelectOption value="1">Opened by me</NativeSelectOption>
|
||||
</NativeSelect>
|
||||
<Button type="submit">Filter</Button>
|
||||
</form>
|
||||
<Card>
|
||||
<CardContent>
|
||||
{data.cases.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">Nothing here.</p>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Case</TableHead>
|
||||
<TableHead>About</TableHead>
|
||||
<TableHead>Opened by</TableHead>
|
||||
<TableHead>Assigned</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Changed</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{data.cases.map((c) => (
|
||||
<TableRow key={c.id}>
|
||||
<TableCell className="font-medium">
|
||||
<Link href={`/console/cases/${c.id}`} className="underline-offset-4 hover:underline">
|
||||
{caseKinds[c.kind] ?? c.kind} #{c.id}
|
||||
</Link>
|
||||
</TableCell>
|
||||
<TableCell className="text-sm">
|
||||
<CaseAbout tags={c.tags} names={c.tagNames} />
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground">{c.openedBy || "someone"}</TableCell>
|
||||
<TableCell className="text-muted-foreground">{c.assignee ?? ""}</TableCell>
|
||||
<TableCell>
|
||||
<CaseStatus status={c.status} />
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground">
|
||||
<DateTime iso={c.updatedAt} />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
{data.before && data.cases.length === 50 && (
|
||||
<div className="mt-4">
|
||||
<Link href={`/console/cases?${older}`} className={buttonVariants({ variant: "outline" })}>
|
||||
Older
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -14,6 +14,7 @@ import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { api, unwrap, type CatalogMember, type CatalogPage } from "@/lib/api";
|
||||
import { AuditTable } from "../../audit-table";
|
||||
import { requestDeletion, requestRemoval } from "../../cases/actions";
|
||||
import { ConsoleNav, requireConsole } from "../../console-nav";
|
||||
import {
|
||||
addOperator,
|
||||
@@ -357,6 +358,21 @@ export default async function ManageCatalog({ params }: { params: Promise<{ id:
|
||||
</SubmitButton>
|
||||
</div>
|
||||
</ActionForm>
|
||||
{!p.removed && (
|
||||
<details className="mt-1 text-left text-xs">
|
||||
<summary className="cursor-pointer text-right text-muted-foreground hover:text-foreground">
|
||||
Ask moderators to remove it everywhere
|
||||
</summary>
|
||||
<ActionForm action={requestRemoval} fields={{ catalog: id, product: p.id }} className="mt-2">
|
||||
<div className="flex justify-end gap-2">
|
||||
<Input name="reason" placeholder="Why" aria-label="Why" required maxLength={2000} className="h-8 w-48" />
|
||||
<SubmitButton size="sm" variant="outline" pendingLabel="Asking…">
|
||||
Ask
|
||||
</SubmitButton>
|
||||
</div>
|
||||
</ActionForm>
|
||||
</details>
|
||||
)}
|
||||
</TableCell>
|
||||
)}
|
||||
</TableRow>
|
||||
@@ -394,6 +410,28 @@ export default async function ManageCatalog({ params }: { params: Promise<{ id:
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{has("catalog:delete-request") && c.status !== "deleted" && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Delete Catalog</CardTitle>
|
||||
<CardDescription>
|
||||
Moderators review deletions for now. Once deleted, nothing is available from it; people who got its products
|
||||
keep them only where other catalogs host them.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ActionForm action={requestDeletion} fields={{ id }}>
|
||||
<div className="flex max-w-xl gap-2">
|
||||
<Input name="reason" placeholder="Why" aria-label="Why" required maxLength={2000} />
|
||||
<SubmitButton variant="destructive" pendingLabel="Asking…" confirm={`Ask moderators to delete ${c.name}?`}>
|
||||
Ask to delete
|
||||
</SubmitButton>
|
||||
</div>
|
||||
</ActionForm>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Recent Changes</CardTitle>
|
||||
|
||||
@@ -37,6 +37,7 @@ const tabs: { section: Section; href: string; label: string }[] = [
|
||||
{ section: "overview", href: "/console", label: "Overview" },
|
||||
{ section: "products", href: "/console/products", label: "Products" },
|
||||
{ section: "catalogs", href: "/console/catalogs", label: "Catalogs" },
|
||||
{ section: "cases", href: "/console/cases", label: "Cases" },
|
||||
{ section: "people", href: "/console/people", label: "People" },
|
||||
{ section: "audit", href: "/console/audit", label: "Audit" },
|
||||
];
|
||||
|
||||
@@ -19,6 +19,7 @@ export default async function Console() {
|
||||
const settings = me.role === "admin" ? await api.console.settings.get().then(unwrap) : undefined;
|
||||
|
||||
const todo: Stat[] = [
|
||||
{ label: "Cases", value: data.todo.cases, note: "open, for you to decide", href: "/console/cases" },
|
||||
{ label: "Drafts", value: data.todo.drafts, note: "to review and publish", href: "/console/products?status=draft" },
|
||||
{ label: "Member Requests", value: data.todo.memberRequests, note: "waiting in your catalogs", href: "/console/catalogs" },
|
||||
];
|
||||
|
||||
@@ -8,7 +8,9 @@ import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { ActionForm, SubmitButton } from "@/components/forms";
|
||||
import { api, unwrap } from "@/lib/api";
|
||||
import { restoreProduct } from "../../products/actions";
|
||||
import { ConsoleNav, requireConsole } from "../console-nav";
|
||||
|
||||
export const metadata: Metadata = { title: "Products" };
|
||||
@@ -112,10 +114,21 @@ export default async function ConsoleProducts({ searchParams }: { searchParams:
|
||||
<DateTime iso={p.updatedAt} dateOnly />
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{!p.removed && (
|
||||
{!p.removed ? (
|
||||
<Link href={`/products/${p.id}/edit`} className={buttonVariants({ size: "sm", variant: "outline" })}>
|
||||
{p.status === "draft" ? "Review" : "Edit"}
|
||||
</Link>
|
||||
) : (
|
||||
data.moderator && (
|
||||
<ActionForm action={restoreProduct} fields={{ id: p.id }}>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Input name="reason" placeholder="Reason" aria-label="Reason" maxLength={500} className="h-8 w-36" />
|
||||
<SubmitButton size="sm" variant="outline" pendingLabel="Restoring…" confirm={`Restore ${p.name}?`}>
|
||||
Restore
|
||||
</SubmitButton>
|
||||
</div>
|
||||
</ActionForm>
|
||||
)
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
@@ -0,0 +1,117 @@
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { redirect } from "next/navigation";
|
||||
import { caseKinds } from "@/components/cases";
|
||||
import { ActionForm, SubmitButton } from "@/components/forms";
|
||||
import { PageHeader } from "@/components/status";
|
||||
import { DateTime } from "@/components/time";
|
||||
import { buttonVariants } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { api, getMe, unwrap, type NotificationEntry } from "@/lib/api";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { markAllRead } from "../console/cases/actions";
|
||||
|
||||
export const metadata: Metadata = { title: "Notifications" };
|
||||
|
||||
export default async function Notifications({ searchParams }: { searchParams: Promise<{ before?: string | string[] }> }) {
|
||||
const me = await getMe();
|
||||
if (!me) redirect("/signin?next=/notifications");
|
||||
const raw = (await searchParams).before;
|
||||
const before = typeof raw === "string" && /^\d+$/.test(raw) ? Number(raw) : undefined;
|
||||
const data = unwrap(await api.notifications.get({ query: before ? { before } : {} }));
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-wrap items-start justify-between gap-4">
|
||||
<PageHeader title="Notifications">
|
||||
{data.unread > 0 ? `${data.unread} unread.` : "You're up to date."}
|
||||
</PageHeader>
|
||||
{data.unread > 0 && (
|
||||
<ActionForm action={markAllRead}>
|
||||
<SubmitButton variant="outline" pendingLabel="Marking…">
|
||||
Mark all as read
|
||||
</SubmitButton>
|
||||
</ActionForm>
|
||||
)}
|
||||
</div>
|
||||
<Card>
|
||||
<CardContent>
|
||||
{data.notifications.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">Nothing yet.</p>
|
||||
) : (
|
||||
<ul className="divide-y">
|
||||
{data.notifications.map((n) => {
|
||||
const { text, href } = describe(n);
|
||||
return (
|
||||
<li key={n.id} className={cn("flex flex-wrap items-baseline gap-x-3 gap-y-1 py-3 first:pt-0 last:pb-0", n.read && "text-muted-foreground")}>
|
||||
{!n.read && <span className="size-2 shrink-0 self-center rounded-full bg-foreground" aria-label="Unread" />}
|
||||
<span className="min-w-0 flex-1 text-sm">
|
||||
{href ? (
|
||||
<Link href={href} className="underline-offset-4 hover:underline">
|
||||
{text}
|
||||
</Link>
|
||||
) : (
|
||||
text
|
||||
)}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
<DateTime iso={n.at} />
|
||||
</span>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
{data.before && (
|
||||
<div className="mt-4">
|
||||
<Link href={`/notifications?before=${data.before}`} className={buttonVariants({ variant: "outline" })}>
|
||||
Older
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
/** A notification in words, and where it leads. */
|
||||
function describe(n: NotificationEntry): { text: string; href?: string } {
|
||||
const d = n.data as Record<string, unknown>;
|
||||
const s = (k: string) => (typeof d[k] === "string" ? (d[k] as string) : "");
|
||||
const why = s("reason") ? `: “${s("reason")}”` : "";
|
||||
switch (n.type) {
|
||||
case "product_edited": {
|
||||
const what =
|
||||
s("kind") === "lock"
|
||||
? "changed the locks on"
|
||||
: s("kind") === "revert"
|
||||
? "undid a change to"
|
||||
: `changed the ${(d.fields as string[] | undefined)?.join(", ") ?? "info"} of`;
|
||||
return { text: `${s("by") || "A moderator"} ${what} ${s("name")}${why}`, href: `/products/${s("product")}/edit` };
|
||||
}
|
||||
case "product_removed":
|
||||
return { text: `Moderation removed ${s("name")}${why}. You can appeal it from your audit log.`, href: `/console/audit?product=${s("product")}` };
|
||||
case "product_restored":
|
||||
return { text: `Moderation restored ${s("name")}${why}`, href: `/products/${s("product")}` };
|
||||
case "case_decided": {
|
||||
const status = s("status") === "resolved" ? "resolved" : "declined";
|
||||
const res = s("resolution") ? `: “${s("resolution")}”` : "";
|
||||
return { text: `Your ${caseKinds[s("kind")]?.toLowerCase() ?? "case"} was ${status}${res}`, href: `/console/cases/${d.case}` };
|
||||
}
|
||||
case "case_note":
|
||||
return { text: `${s("by") || "Someone"} replied on your ${caseKinds[s("kind")]?.toLowerCase() ?? "case"}`, href: `/console/cases/${d.case}` };
|
||||
case "membership_decided": {
|
||||
const status = s("status");
|
||||
const text =
|
||||
status === "member"
|
||||
? `You're a member of ${s("name")}`
|
||||
: status === "banned"
|
||||
? `${s("name")} banned you`
|
||||
: `${s("name")} declined your request to join`;
|
||||
return { text, href: `/catalogs/${s("catalog")}` };
|
||||
}
|
||||
default:
|
||||
return { text: n.type };
|
||||
}
|
||||
}
|
||||
@@ -162,7 +162,7 @@ export default async function EditProduct({ params }: { params: Promise<{ id: st
|
||||
<div className="grid gap-6 sm:grid-cols-2">
|
||||
<Field>
|
||||
<FieldLabel htmlFor="rating">Rating</FieldLabel>
|
||||
{locked("rating") || (product.rating === "adult" && !can("product:rate-lower")) ? (
|
||||
{locked("rating") ? (
|
||||
<p className="text-sm capitalize">{product.rating}</p>
|
||||
) : (
|
||||
<NativeSelect id="rating" name="rating" defaultValue={product.rating} className="w-48">
|
||||
@@ -173,7 +173,9 @@ export default async function EditProduct({ params }: { params: Promise<{ id: st
|
||||
{locked("rating") ? (
|
||||
<LockedNote />
|
||||
) : (
|
||||
<FieldDescription>Raising it to adult is immediate; lowering it needs a moderator.</FieldDescription>
|
||||
<FieldDescription>
|
||||
Raising it to adult is immediate; {can("product:rate-lower") ? "lowering it is too." : "lowering it asks moderators."}
|
||||
</FieldDescription>
|
||||
)}
|
||||
</Field>
|
||||
<Field>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { ActionForm, SubmitButton } from "@/components/forms";
|
||||
import { ReportForm } from "@/components/cases";
|
||||
import { formatSize, ProductImage, RatingTag, StateTags } from "@/components/products";
|
||||
import { PageHeader, Tag } from "@/components/status";
|
||||
import { DateTime } from "@/components/time";
|
||||
@@ -150,6 +151,8 @@ export default async function ProductPage({ params }: { params: Promise<{ id: st
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{me && !mine && !draft && <ReportForm about="product" id={id} />}
|
||||
|
||||
{isModerator(me) && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
|
||||
@@ -56,6 +56,18 @@ export async function removeProduct(_: ActionState, form: FormData): Promise<Act
|
||||
redirect("/products");
|
||||
}
|
||||
|
||||
/** Moderation restores a removed product. */
|
||||
export async function restoreProduct(_: ActionState, form: FormData): Promise<ActionState> {
|
||||
const id = field(form, "id");
|
||||
return attempt(async () => {
|
||||
unwrap(await api.products({ id }).unremove.post({ reason: field(form, "reason") }));
|
||||
done(id);
|
||||
revalidatePath("/products");
|
||||
revalidatePath("/console/products");
|
||||
return "Restored.";
|
||||
});
|
||||
}
|
||||
|
||||
export async function retract(_: ActionState, form: FormData): Promise<ActionState> {
|
||||
const id = field(form, "id");
|
||||
return attempt(async () => {
|
||||
@@ -71,7 +83,7 @@ export async function saveProduct(_: ActionState, form: FormData): Promise<Actio
|
||||
const rating = field(form, "rating");
|
||||
const listed = field(form, "listed");
|
||||
return attempt(async () => {
|
||||
const { fields } = unwrap(
|
||||
const { fields, review } = unwrap(
|
||||
await api.products({ id }).patch({
|
||||
...(has("name") ? { name: field(form, "name") } : {}),
|
||||
...(has("description") ? { description: String(form.get("description") ?? "") } : {}),
|
||||
@@ -92,6 +104,7 @@ export async function saveProduct(_: ActionState, form: FormData): Promise<Actio
|
||||
done(id);
|
||||
revalidatePath("/products");
|
||||
revalidatePath(`/products/${id}/edit`);
|
||||
if (review) return `${fields.length ? "Saved. " : ""}Moderators will review lowering the rating (case #${review}).`;
|
||||
return fields.length ? "Saved." : "Nothing changed.";
|
||||
});
|
||||
}
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
// Pieces shared by the case pages and the places people open cases from.
|
||||
import Link from "next/link";
|
||||
import { ActionForm, SubmitButton } from "@/components/forms";
|
||||
import { Tag } from "@/components/status";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { report } from "@/app/console/cases/actions";
|
||||
|
||||
export const caseKinds: Record<string, string> = {
|
||||
report: "Report",
|
||||
"rating-review": "Rating review",
|
||||
"removal-request": "Removal request",
|
||||
"catalog-deletion": "Catalog deletion",
|
||||
appeal: "Appeal",
|
||||
};
|
||||
|
||||
/** What resolving each kind of case does (its button). */
|
||||
export const resolveLabel: Record<string, string> = {
|
||||
report: "Resolve",
|
||||
"rating-review": "Lower to general",
|
||||
"removal-request": "Remove the product",
|
||||
"catalog-deletion": "Delete the catalog",
|
||||
appeal: "Uphold the appeal",
|
||||
};
|
||||
|
||||
export function CaseStatus({ status }: { status: string }) {
|
||||
if (status === "open") return <Tag tone="strong">Open</Tag>;
|
||||
if (status === "resolved") return <Tag>Resolved</Tag>;
|
||||
return <Tag>Declined</Tag>;
|
||||
}
|
||||
|
||||
const tagLinks: Record<string, (id: string) => string> = {
|
||||
catalog: (id) => `/catalogs/${id}`,
|
||||
product: (id) => `/products/${id}`,
|
||||
};
|
||||
|
||||
/** What a case is about, linked. */
|
||||
export function CaseAbout({ tags, names }: { tags: Record<string, string | undefined>; names: Record<string, string> }) {
|
||||
const parts = Object.entries(tags).filter((e): e is [string, string] => !!e[1]);
|
||||
if (parts.length === 0) return <span className="text-muted-foreground">nothing</span>;
|
||||
return (
|
||||
<span className="space-x-2">
|
||||
{parts.map(([kind, id]) => {
|
||||
const href = tagLinks[kind]?.(id);
|
||||
return (
|
||||
<span key={kind}>
|
||||
<span className="text-muted-foreground">{kind} </span>
|
||||
{href ? (
|
||||
<Link href={href} className="underline-offset-4 hover:underline">
|
||||
{names[id] ?? id}
|
||||
</Link>
|
||||
) : (
|
||||
(names[id] ?? id)
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/** "Report": a reason, sent to moderators (and the hosting catalogs' teams, for products). */
|
||||
export function ReportForm({ about, id, label = "Report" }: { about: "product" | "catalog" | "room" | "person"; id: string; label?: string }) {
|
||||
return (
|
||||
<details className="text-sm">
|
||||
<summary className="cursor-pointer text-muted-foreground hover:text-foreground">{label}</summary>
|
||||
<ActionForm action={report} fields={{ about, id }} className="mt-2">
|
||||
<div className="flex max-w-xl flex-wrap gap-2">
|
||||
<Input name="reason" required maxLength={2000} placeholder="What's wrong?" aria-label="What's wrong" className="min-w-60 flex-1" />
|
||||
<SubmitButton variant="outline" pendingLabel="Sending…">
|
||||
Send report
|
||||
</SubmitButton>
|
||||
</div>
|
||||
</ActionForm>
|
||||
</details>
|
||||
);
|
||||
}
|
||||
@@ -2,9 +2,9 @@ import { Tag } from "@/components/status";
|
||||
|
||||
export const membership: Record<string, string> = { open: "Open", approval: "By approval", invite: "Invite only" };
|
||||
|
||||
/** A catalog's status: approved, pending, rejected or suspended. */
|
||||
/** A catalog's status: approved, pending, rejected, suspended or deleted. */
|
||||
export function CatalogStatus({ status }: { status: string }) {
|
||||
if (status === "approved") return <Tag tone="strong">approved</Tag>;
|
||||
if (status === "rejected" || status === "suspended") return <Tag tone="danger">{status}</Tag>;
|
||||
if (status === "rejected" || status === "suspended" || status === "deleted") return <Tag tone="danger">{status}</Tag>;
|
||||
return <Tag>{status}</Tag>;
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import Image from "next/image";
|
||||
import { Bell } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { getMe } from "@/lib/api";
|
||||
import { buttonVariants } from "@/components/ui/button";
|
||||
@@ -28,7 +29,21 @@ export async function Header() {
|
||||
Download
|
||||
</a>
|
||||
{me ? (
|
||||
<ProfileMenu username={me.username} picture={me.picture} console={me.console} />
|
||||
<>
|
||||
<Link
|
||||
href="/notifications"
|
||||
aria-label={me.unread ? `Notifications, ${me.unread} unread` : "Notifications"}
|
||||
className={buttonVariants({ variant: "ghost", size: "icon", className: "relative" })}
|
||||
>
|
||||
<Bell className="size-4" />
|
||||
{me.unread > 0 && (
|
||||
<span className="absolute -top-0.5 -right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-foreground px-1 text-[10px] font-semibold text-background tabular-nums">
|
||||
{me.unread > 99 ? "99+" : me.unread}
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
<ProfileMenu username={me.username} picture={me.picture} console={me.console} />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Link href="/signin" className={buttonVariants({ variant: "ghost" })}>
|
||||
|
||||
@@ -41,6 +41,9 @@ export type AgeInfo = Data<V1["age"]["get"]>;
|
||||
export type OnlineEntry = Data<V1["online"]["get"]>["online"][number];
|
||||
export type ConsoleData = Data<V1["console"]["get"]>;
|
||||
export type AuditEntry = ConsoleData["audit"][number];
|
||||
export type CaseSummary = Data<V1["cases"]["get"]>["cases"][number];
|
||||
export type CasePage = Data<ReturnType<V1["cases"]>["get"]>;
|
||||
export type NotificationEntry = Data<V1["notifications"]["get"]>["notifications"][number];
|
||||
export type CatalogPage = Data<ReturnType<V1["catalogs"]>["get"]>;
|
||||
export type CatalogMember = Data<ReturnType<V1["catalogs"]>["members"]["get"]>["members"][number];
|
||||
export type CatalogInvite = Data<ReturnType<V1["catalogs"]>["invites"]["get"]>["invites"][number];
|
||||
|
||||
Reference in new issue
Block a user