app/routes/project.flags.tsx

Functions

Imports

It imports app/components/project-tabs.tsx, app/lib/ai.server.ts, app/lib/context.ts, app/lib/projects.server.ts, app/lib/roles.ts, app/lib/sites.server.ts. No module of this repo imports it.

Source

1// Every flag on a site project, in one list (open first): from the checks, from AI sessions and from
2// reviewers, including flags on items the site does not have, which no editor page can reach (a proof
3// item, a post since deleted). Anyone who can read the project sees them; only the Owner dismisses,
4// through the same function as the editor's Dismiss, so a dismissal is recorded the same way.
5
6import { useState, type ReactNode } from "react";
7import { Form, Link, useFetcher } from "react-router";
8import { Banner } from "capsomer/react/banner";
9import { Button } from "capsomer/react/button";
10import { ConfirmDialog } from "capsomer/react/confirm-dialog";
11import { Empty } from "capsomer/react/empty";
12import { Panel } from "capsomer/react/panel";
13import { Row, RowList } from "capsomer/react/row-list";
14import { Pill, Status } from "capsomer/react/status";
15import { Time } from "capsomer/react/time";
16import { PageHead } from "capsomer/react/page-head";
17
18import { ProjectTabs } from "~/components/project-tabs";
19
20import { dismissItemFinding, projectFlags } from "~/lib/ai.server";
21import { getEnv, getViewer } from "~/lib/context";
22import { requireSiteProject } from "~/lib/projects.server";
23import { can } from "~/lib/roles";
24import { siteEntry } from "~/lib/sites.server";
25
26import type { Route } from "./+types/project.flags";
27
28export function meta({ loaderData: data }: Route.MetaArgs) {
29  return [{ title: data ? `Flags · ${data.project.name} · Carrel` : "Carrel" }];
30}
31
32export async function loader({ params, context }: Route.LoaderArgs) {
33  const env = getEnv(context);
34  const project = await requireSiteProject(env.DB, getViewer(context), params.project, "read");
35  return {
36    project: { slug: project.slug, name: project.name, site: siteEntry(project.site).name, mentions: can(project.role, "read_mentions") },
37    canDismiss: can(project.role, "publish"),
38    flags: await projectFlags(env.DB, project),
39  };
40}
41
42export async function action({ params, request, context }: Route.ActionArgs) {
43  const env = getEnv(context);
44  const viewer = getViewer(context);
45  // The Owner's alone, as in the editor: a dismissed flag no longer holds publish.
46  const project = await requireSiteProject(env.DB, viewer, params.project, "publish");
47  const form = await request.formData();
48  if (form.get("intent") !== "dismiss") throw new Response("Bad request", { status: 400 });
49  const id = Number(form.get("flag"));
50  const item = String(form.get("item") ?? "");
51  if (!Number.isInteger(id) || !item) throw new Response("Bad request", { status: 400 });
52  await dismissItemFinding(env.DB, project, viewer, item, id);
53  return { dismissed: id };
54}
55
56/** Who raised it: a check by name, or the credit an AI session or reviewer put on its message. */
57function source(check: string): string {
58  if (check === "review") return "Reviewer";
59  if (check === "ai") return "AI session";
60  return `Check: ${check}`;
61}
62
63type Flag = Route.ComponentProps["loaderData"]["flags"][number];
64
65export default function ProjectFlags({ loaderData, actionData }: Route.ComponentProps) {
66  const { project, canDismiss, flags } = loaderData;
67  const fetcher = useFetcher<typeof action>();
68  const [target, setTarget] = useState<{ flag: Flag; opener: HTMLElement | null } | null>(null);
69  const open = flags.filter((f) => f.status === "open").length;
70  const dismissed = fetcher.data?.dismissed ?? actionData?.dismissed;
71  const link = ({ href, children }: { href: string; children: ReactNode }) => <Link to={href}>{children}</Link>;
72
73  return (
74    <div className="app-page">
75      <PageHead
76        title={project.name}
77        lead={`${open} open of ${flags.length} flags on ${project.site}. An open flag holds publish until the text is fixed or the Owner dismisses it.`}
78      />
79
80      <ProjectTabs slug={project.slug} current="flags" mentions={project.mentions} />
81
82      {dismissed ? <Banner tone="ok">Dismissed flag {dismissed}.</Banner> : null}
83
84      <Panel title="Flags" count={open} src={`${open} open, ${flags.length - open} dismissed`} flush>
85        {flags.length === 0 ? (
86          <Empty kind="all-clear" flush title={<Status tone="ok">All clear</Status>}>
87            No flags on this project.
88          </Empty>
89        ) : (
90          <RowList label="Flags on this project">
91            {flags.map((flag) => {
92              const isOpen = flag.status === "open";
93              return (
94                <Row
95                  key={flag.id}
96                  status={isOpen ? <Status tone="warn">Open</Status> : <Pill variant="secondary">Dismissed</Pill>}
97                  title={flag.message}
98                  href={flag.onSite ? `/p/${project.slug}/e/${encodeURIComponent(flag.itemId)}` : undefined}
99                  renderLink={link}
100                  detail={
101                    <>
102                      {source(flag.check)} on {flag.onSite ? flag.title || flag.itemId : flag.itemId}
103                      {flag.onSite ? null : ". Not on the site: no editor page reaches this flag"}
104                      {flag.excerpt ? (
105                        <>
106                          {" "}
107                          <q>{flag.excerpt}</q>
108                        </>
109                      ) : null}
110                    </>
111                  }
112                  meta={<Time at={flag.createdAt} />}
113                  actions={
114                    isOpen && canDismiss ? (
115                      <Form method="post">
116                        <input type="hidden" name="flag" value={flag.id} />
117                        <input type="hidden" name="item" value={flag.itemId} />
118                        <Button
119                          type="submit"
120                          name="intent"
121                          value="dismiss"
122                          size="sm"
123                          onClick={(event) => {
124                            event.preventDefault();
125                            setTarget({ flag, opener: event.currentTarget });
126                          }}
127                        >
128                          Dismiss<span className="cap-sr-only"> flag: {flag.message}</span>
129                        </Button>
130                      </Form>
131                    ) : undefined
132                  }
133                />
134              );
135            })}
136          </RowList>
137        )}
138      </Panel>
139
140      <ConfirmDialog
141        open={target !== null}
142        title="Dismiss this flag?"
143        lead="A dismissed flag no longer holds publish, and it cannot be reopened."
144        body={target ? [target.flag.message] : []}
145        action="Dismiss flag"
146        returnTo={target?.opener}
147        perform={async () => {
148          if (!target) return;
149          await fetcher.submit({ intent: "dismiss", flag: String(target.flag.id), item: target.flag.itemId }, { method: "post" });
150        }}
151        onClose={() => setTarget(null)}
152      />
153    </div>
154  );
155}