app/components/editor/flags-panel.tsx

Functions

Imports

It imports app/lib/ai.server.ts. Imported by app/routes/editor.tsx.

Source

1// The editor's flags and the AI drafts kept beside the writer's own (routes/editor.tsx). Checks and
2// reviewers flag; they never decide, so a flag only asks to be read, and the Owner may dismiss it.
3
4import { Link } from "react-router";
5import { Button } from "capsomer/react/button";
6import { Panel } from "capsomer/react/panel";
7import { Pill, Status } from "capsomer/react/status";
8import { Time } from "capsomer/react/time";
9
10import type { AiDraftSummary, ItemFinding } from "~/lib/ai.server";
11
12type Props = {
13  flags: ItemFinding[];
14  aiDrafts: AiDraftSummary[];
15  canPublish: boolean;
16  onDismiss: (button: HTMLElement, flag: number) => void;
17};
18
19export function FlagsPanel({ flags, aiDrafts, canPublish, onDismiss }: Props) {
20  const openFlags = flags.filter((f) => f.status === "open").length;
21  return (
22    <Panel title="Flags and AI drafts" id="flags" count={openFlags} src={`${aiDrafts.length} AI draft${aiDrafts.length === 1 ? "" : "s"} beside yours`}>
23      <div className="app-stack" data-tight>
24        {flags.length > 0 ? (
25          <ul className="app-flags" aria-label="Flags">
26            {flags.map((f) => (
27              <li key={f.id}>
28                {f.status === "open" ? <Status tone="warn">Open</Status> : <Pill variant="secondary">Dismissed</Pill>}
29                <span>
30                  {f.message}
31                  {f.excerpt ? (
32                    <>
33                      {" "}
34                      <q className="cap-muted">{f.excerpt}</q>
35                    </>
36                  ) : null}
37                </span>
38                {f.status === "open" && canPublish ? (
39                  <Button size="sm" onClick={(event) => onDismiss(event.currentTarget, f.id)}>
40                    Dismiss<span className="cap-sr-only"> flag: {f.message}</span>
41                  </Button>
42                ) : null}
43              </li>
44            ))}
45          </ul>
46        ) : null}
47        {aiDrafts.length > 0 ? (
48          <ul className="app-flags" aria-label="AI drafts beside yours">
49            {aiDrafts.map((d) => (
50              <li key={d.id}>
51                <span>
52                  <Link to={`ai/${d.id}`}>AI draft from {d.client}</Link>{" "}
53                  <span className="cap-muted">
54                    <Time at={d.createdAt} /> · {d.words} words
55                  </span>
56                  {d.note ? <span> · {d.note}</span> : null}
57                </span>
58              </li>
59            ))}
60          </ul>
61        ) : null}
62                    </div>
63    </Panel>
64  );
65}