fix: ui fixes

This commit is contained in:
gosangam
2026-06-16 15:49:23 +05:30
parent 41367a8b27
commit 5342123fba
8 changed files with 388 additions and 34 deletions
+72 -5
View File
@@ -8,6 +8,7 @@ import { ListShell, EmptyRow } from "@/components/list-shell";
import { Table, THead, TR, TH, TD } from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { Modal } from "@/components/ui/modal";
import { useConfirm } from "@/components/confirm";
import { Textarea } from "@/components/ui/input";
import { cn, fmtDate } from "@/lib/utils";
@@ -21,8 +22,43 @@ export default function FeedbackPage() {
[status],
);
const list = usePagedList<AdminFeedback>(fetcher, [status]);
const confirm = useConfirm();
const [reply, setReply] = useState<AdminFeedback | null>(null);
async function run(action: Promise<unknown>, successMsg: string) {
try {
await action;
toast.success(successMsg);
list.refresh();
} catch (err) {
toast.error(err instanceof AdminError ? err.message : "Action failed.");
}
}
async function acknowledge(f: AdminFeedback) {
if (
await confirm({
title: "Acknowledge this feedback?",
message: "The author will be emailed that we've seen it and started work.",
confirmLabel: "Acknowledge",
})
) {
run(api.acknowledgeFeedback(f.id), "Feedback acknowledged.");
}
}
async function resolve(f: AdminFeedback) {
if (
await confirm({
title: "Mark resolved?",
message: "The author will be emailed a thank-you. This can't be undone.",
confirmLabel: "Mark resolved",
})
) {
run(api.resolveFeedback(f.id), "Feedback resolved.");
}
}
return (
<ListShell
title="Feedback"
@@ -94,9 +130,29 @@ export default function FeedbackPage() {
</TD>
<TD className="whitespace-nowrap">{fmtDate(f.created_at)}</TD>
<TD className="text-right">
<Button size="sm" variant="outline" onClick={() => setReply(f)}>
{f.replied_at ? "Reply again" : "Reply"}
</Button>
<div className="flex flex-wrap justify-end gap-2">
{!f.resolved_at && !f.acknowledged_at ? (
<Button
size="sm"
variant="ghost"
onClick={() => acknowledge(f)}
>
Acknowledge
</Button>
) : null}
{!f.resolved_at ? (
<Button
size="sm"
variant="outline"
onClick={() => resolve(f)}
>
Resolve
</Button>
) : null}
<Button size="sm" variant="outline" onClick={() => setReply(f)}>
{f.replied_at ? "Reply again" : "Reply"}
</Button>
</div>
</TD>
</TR>
))
@@ -117,8 +173,19 @@ export default function FeedbackPage() {
}
function StatusBadge({ f }: { f: AdminFeedback }) {
const label = f.replied_at ? "Replied" : f.resolved_at ? "Resolved" : "Open";
const tone = f.resolved_at || f.replied_at ? "text-primary" : "text-muted-foreground";
const label = f.replied_at
? "Replied"
: f.resolved_at
? "Resolved"
: f.acknowledged_at
? "Acknowledged"
: "Open";
const tone =
f.replied_at || f.resolved_at
? "text-primary"
: f.acknowledged_at
? "text-amber-600"
: "text-muted-foreground";
return <span className={cn("text-sm", tone)}>{label}</span>;
}