app/routes/editor.tsx

Functions

Imports

It imports app/components/editor/flags-panel.tsx, app/components/editor/frontmatter-fields.tsx, app/components/editor/layout.ts, app/components/editor/save-keys.ts, app/components/editor/schedule-dialog.tsx, app/components/editor/typing.ts, app/components/editor/writing-surface.tsx, app/components/frame.tsx, app/components/history/history-panel.tsx, app/components/writing/binder.tsx, app/lib/ai.server.ts, app/lib/content.server.ts, app/lib/context.ts, app/lib/google/drive.server.ts, app/lib/google/oauth.server.ts, app/lib/google/search-console.server.ts, app/lib/google/service-account.server.ts, app/lib/history.server.ts, app/lib/index.server.ts, app/lib/kind-words.ts, app/lib/legal.server.ts, app/lib/media.server.ts, app/lib/projects.server.ts, app/lib/roles.ts, app/lib/save-state.ts, app/lib/site-markdown.ts, app/lib/sites.server.ts, app/lib/writing/binder.ts. No module of this repo imports it.

Source

1// The editor for one site item: the copied CodeMirror editor in a prose layout, autosave to D1 as
2// you type, the site's own render in a sandboxed preview, and the writes the viewer's role allows.
3
4import { useEffect, useRef, useState } from "react";
5import { useFetcher, type ShouldRevalidateFunctionArgs } from "react-router";
6import { Alert, Banner } from "capsomer/react/banner";
7import { Button } from "capsomer/react/button";
8import { ConfirmDialog } from "capsomer/react/confirm-dialog";
9import { useMessage } from "capsomer/react/message";
10import { Panel } from "capsomer/react/panel";
11import { PublishGate, type GateCheck, type GateSite } from "capsomer/react/publish-gate";
12import { Segmented } from "capsomer/react/segmented";
13import { Pill } from "capsomer/react/status";
14import { Time } from "capsomer/react/time";
15
16import { FlagsPanel } from "~/components/editor/flags-panel";
17import { useEditorLayout } from "~/components/editor/layout";
18import { ScheduleDialog } from "~/components/editor/schedule-dialog";
19import { FrontmatterFields } from "~/components/editor/frontmatter-fields";
20import { AUTOSAVE_DELAY_MS, useSaveShortcut } from "~/components/editor/save-keys";
21import { HistoryPanel } from "~/components/history/history-panel";
22import { WritingSurface } from "~/components/editor/writing-surface";
23import { useTypingRecede } from "~/components/editor/typing";
24import { RouterLink } from "~/components/frame";
25import { SiteBinder } from "~/components/writing/binder";
26import { dismissItemFinding, itemFindings, lastAiPublication, listAiDrafts, publishedByLine } from "~/lib/ai.server";
27import { autosave, discardDraft, readDoc, readDraft, writeToSite, type WriteOutcome } from "~/lib/content.server";
28import { getEnv, getViewer } from "~/lib/context";
29import { listRevisions } from "~/lib/history.server";
30import { joinSource, splitSource } from "@dustinedwards/site-api/frontmatter";
31import { listSections } from "~/lib/legal.server";
32import { kindNoun, kindWord } from "~/lib/kind-words";
33import { siteState } from "~/lib/save-state";
34import { importFromDocs, lastSentDoc, sendToDocs } from "~/lib/google/drive.server";
35import { isConnected } from "~/lib/google/oauth.server";
36import { pageStats } from "~/lib/google/search-console.server";
37import { GoogleNotConnected } from "~/lib/google/service-account.server";
38import { searchItems, sitePaths } from "~/lib/index.server";
39import { mediaLimits } from "~/lib/media.server";
40import { requireSiteProject } from "~/lib/projects.server";
41import { transitionsFor } from "capsomer/publish-transition";
42import { PageHead } from "capsomer/react/page-head";
43import { can } from "~/lib/roles";
44import { figureMarkup } from "~/lib/site-markdown";
45import { siteConnection, siteEntry, SiteNotConnected } from "~/lib/sites.server";
46import { siteBinderTree } from "~/lib/writing/binder";
47
48import type { Route } from "./+types/editor";
49
50/** The editor shows the newest revisions; the history page lists them all. */
51const HISTORY_SHOWN = 8;
52
53export function meta({ loaderData: data }: Route.MetaArgs) {
54  return [{ title: data ? `${data.title || data.itemId} · Carrel` : "Carrel" }];
55}
56
57export async function loader({ params, context }: Route.LoaderArgs) {
58  const env = getEnv(context);
59  const viewer = getViewer(context);
60  const project = await requireSiteProject(env.DB, viewer, params.project, "read");
61  const itemId = params.item;
62
63  const draft = await readDraft(env.DB, project, viewer, itemId);
64  let doc = null;
65  let siteError: string | null = null;
66  try {
67    doc = await readDoc(env, project, itemId);
68  } catch (error) {
69    siteError = error instanceof SiteNotConnected ? error.detail : "The site did not answer, so this shows your Carrel draft only.";
70  }
71  // An item that exists only as an AI draft is still the person's to open: the list shows it.
72  const aiDrafts = await listAiDrafts(env.DB, project, viewer, itemId);
73  if (!doc && !draft && aiDrafts.length === 0 && !siteError) throw new Response("Not found", { status: 404 });
74
75  // The site's revisions of this item, for the History panel. A site that does not answer leaves the
76  // panel saying so, never the editor failing.
77  let revisions: Awaited<ReturnType<typeof listRevisions>> = null;
78  let historyError: string | null = null;
79  if (doc) {
80    try {
81      revisions = await listRevisions(env, project, itemId);
82    } catch (error) {
83      historyError = error instanceof SiteNotConnected ? error.detail : "The site did not answer, so its history is not shown.";
84    }
85  }
86
87  const [targets, flags, aiPublished, sentDoc, googleConnected, search, sections] = await Promise.all([
88    searchItems(env.DB, project.id, {}),
89    itemFindings(env.DB, project, itemId),
90    lastAiPublication(env.DB, project, itemId),
91    lastSentDoc(env.DB, project, itemId),
92    can(project.role, "send_external") ? isConnected(env.DB, viewer) : Promise.resolve(false),
93    pageStats(env, project, doc?.path ?? null),
94    listSections(env.DB),
95  ]);
96  // Images go in only for someone who may edit, and only on a site with a media library. A site that
97  // does not answer leaves the editor without them rather than failing the page.
98  let mediaAccept: string | null = null;
99  if (can(project.role, "edit") && !siteError) {
100    try {
101      mediaAccept = (await mediaLimits(env, project))?.types.join(",") ?? null;
102    } catch {
103      mediaAccept = null;
104    }
105  }
106  const paths = sitePaths(targets);
107  const linkTargets: { href: string; title: string; state: "published" | "scheduled" | "draft" }[] = targets
108    .filter((t) => t.itemId !== itemId && paths.has(t.itemId))
109    .map((t) => ({ href: paths.get(t.itemId)!, title: t.title || t.itemId, state: t.status }));
110
111  return {
112    project: { slug: project.slug, name: project.name, site: siteEntry(project.site).name, siteId: project.site },
113    itemId,
114    binder: siteBinderTree(targets, `/p/${project.slug}`),
115    canEdit: can(project.role, "edit"),
116    media: mediaAccept ? { endpoint: `/p/${encodeURIComponent(project.slug)}/media/api`, accept: mediaAccept } : null,
117    canPublish: can(project.role, "publish"),
118    title: doc?.title ?? "",
119    kind: doc?.kind ?? null,
120    status: doc?.status ?? null,
121    path: doc?.path ?? null,
122    everPublished: Boolean(doc?.publishedAt),
123    publishedAt: doc?.publishedAt ?? null,
124    // Where the post lives, for the publish controls' View link: the site's origin and the post's path.
125    liveUrl: doc?.path && siteConnection(env, project.site).state === "connected" ? new URL(doc.path, (siteConnection(env, project.site) as { origin: string }).origin).href : null,
126    publishAt: doc?.publishAt ?? null,
127    version: doc?.version ?? null,
128    source: draft?.source ?? doc?.source ?? "",
129    baseVersion: draft ? draft.baseVersion : (doc?.version ?? null),
130    draftAt: draft?.updatedAt ?? null,
131    // The site moved on since this draft was started: saving it would be refused as stale.
132    behind: Boolean(draft && doc && draft.baseVersion !== doc.version),
133    siteError,
134    revisions: revisions ? revisions.slice(0, HISTORY_SHOWN).map((r) => ({ version: r.version, at: r.at, author: r.author, message: r.message })) : null,
135    revisionCount: revisions?.length ?? 0,
136    historyError,
137    linkTargets,
138    sections: sections.map((s) => ({ key: s.key, title: s.title })),
139    flags,
140    aiDrafts,
141    aiPublished: aiPublished ? { line: publishedByLine(aiPublished.client), at: aiPublished.publishedAt } : null,
142    canSend: can(project.role, "send_external"),
143    googleConnected,
144    sentDoc: sentDoc ? { url: sentDoc.url, at: sentDoc.createdAt } : null,
145    search: search
146      ? { clicks: search.clicks, impressions: search.impressions, position: Math.round(search.position * 10) / 10, start: search.startDate, end: search.endDate }
147      : null,
148  };
149}
150
151type ActionResult =
152  | { intent: "autosave"; updatedAt: string }
153  | { intent: "discard"; discarded: true }
154  | { intent: "publish"; needsConfirm: true }
155  | { intent: "dismiss-flag"; dismissed: number }
156  | { intent: "write"; outcome: WriteOutcome }
157  | { intent: "google"; ok: boolean; message: string; url?: string; imported?: boolean };
158
159export async function action({ params, request, context }: Route.ActionArgs): Promise<ActionResult> {
160  const env = getEnv(context);
161  const viewer = getViewer(context);
162  const project = await requireSiteProject(env.DB, viewer, params.project, "read");
163  const itemId = params.item;
164  const form = await request.formData();
165  const intent = String(form.get("intent") ?? "");
166  const source = String(form.get("source") ?? "").replace(/\r\n/g, "\n");
167  const version = String(form.get("expectedVersion") ?? "") || null;
168
169  switch (intent) {
170    case "autosave": {
171      const saved = await autosave(env.DB, project, viewer, itemId, { source, baseVersion: version });
172      return { intent, updatedAt: saved.updatedAt };
173    }
174    case "discard":
175      await discardDraft(env.DB, project, viewer, itemId);
176      return { intent, discarded: true };
177    case "dismiss-flag": {
178      const id = Number(form.get("flag"));
179      if (!Number.isInteger(id)) throw new Response("Bad request", { status: 400 });
180      await dismissItemFinding(env.DB, project, viewer, itemId, id);
181      return { intent, dismissed: id };
182    }
183    case "send-to-docs":
184    case "import-from-docs": {
185      try {
186        if (intent === "send-to-docs") {
187          const sent = await sendToDocs(env, project, viewer, itemId);
188          return sent.ok ? { intent: "google", ok: true, message: "Sent to Google Docs.", url: sent.url } : { intent: "google", ok: false, message: sent.message };
189        }
190        const imported = await importFromDocs(env, project, viewer, itemId);
191        return imported.ok
192          ? { intent: "google", ok: true, imported: true, message: `Imported ${imported.words} words from Google Docs as your draft.` }
193          : { intent: "google", ok: false, message: imported.message };
194      } catch (error) {
195        if (error instanceof GoogleNotConnected) return { intent: "google", ok: false, message: error.detail };
196        throw error;
197      }
198    }
199    case "save":
200      return { intent: "write", outcome: await writeToSite(env, project, viewer, itemId, { action: "save", source, expectedVersion: version }) };
201    case "publish": {
202      // Refused before the ceremony, so a person who may not publish is never asked to confirm.
203      if (!can(project.role, "publish")) throw new Response("Forbidden", { status: 403 });
204      if (!version) throw new Response("Save the post to the site before publishing it.", { status: 400 });
205      const current = await readDoc(env, project, itemId);
206      // The site's ceremony, kept: a post that has never been public is published only on a second, explicit ask.
207      if (current && !current.publishedAt && form.get("confirm") !== "first-publish") return { intent, needsConfirm: true };
208      return { intent: "write", outcome: await writeToSite(env, project, viewer, itemId, { action: "publish", source, expectedVersion: version }) };
209    }
210    case "schedule": {
211      const publishAt = String(form.get("publishAt") ?? "");
212      if (!version || Number.isNaN(Date.parse(publishAt))) throw new Response("A schedule needs a saved post and a time.", { status: 400 });
213      return {
214        intent: "write",
215        outcome: await writeToSite(env, project, viewer, itemId, {
216          action: "schedule",
217          source,
218          expectedVersion: version,
219          publishAt: new Date(publishAt).toISOString(),
220        }),
221      };
222    }
223    case "unpublish":
224      if (!version) throw new Response("Only a post on the site can be unpublished.", { status: 400 });
225      return { intent: "write", outcome: await writeToSite(env, project, viewer, itemId, { action: "unpublish", expectedVersion: version }) };
226    default:
227      throw new Response("Bad request", { status: 400 });
228  }
229}
230
231/** Autosave writes only the viewer's own draft, so the page has nothing to reload, and the site is not asked. */
232export function shouldRevalidate({ formData, defaultShouldRevalidate }: ShouldRevalidateFunctionArgs) {
233  if (formData?.get("intent") === "autosave") return false;
234  return defaultShouldRevalidate;
235}
236
237export default function EditorRoute({ loaderData }: Route.ComponentProps) {
238  // A new item gets a fresh editor, not the last item's cursor and history.
239  return <Editor key={`${loaderData.project.slug}/${loaderData.itemId}`} data={loaderData} />;
240}
241
242const utc = (iso: string) => `${iso.slice(0, 16).replace("T", " ")} UTC`;
243
244function Editor({ data }: { data: Route.ComponentProps["loaderData"] }) {
245  const [source, setSource] = useState(data.source);
246  const [savedSource, setSavedSource] = useState(data.source);
247  const [savedAt, setSavedAt] = useState<string | null>(data.draftAt);
248  const [layout, chooseLayout] = useEditorLayout();
249  const [asking, setAsking] = useState<null | { kind: "discard" | "import" | "schedule" | "dismiss"; flag?: number; opener: HTMLElement | null }>(null);
250  const autosaver = useFetcher<ActionResult>();
251  const writer = useFetcher<ActionResult>();
252  const { say } = useMessage();
253  useTypingRecede();
254
255  const readOnly = !data.canEdit;
256  const live = data.status === "published" || data.status === "scheduled";
257  const onSite = data.version !== null;
258  // Changes to a live post change the public site, which is the Owner's to do.
259  const maySave = data.canEdit && (!live || data.canPublish);
260
261
262  // Autosave a beat after typing stops. The base version travels with it, so a later save is checked
263  // against the version this draft started from.
264  const inFlight = useRef<string | null>(null);
265  useEffect(() => {
266    if (readOnly || source === savedSource || autosaver.state !== "idle") return;
267    const timer = window.setTimeout(() => {
268      inFlight.current = source;
269      void autosaver.submit({ intent: "autosave", source, expectedVersion: data.baseVersion ?? "" }, { method: "post" });
270    }, AUTOSAVE_DELAY_MS);
271    return () => window.clearTimeout(timer);
272    // eslint-disable-next-line react-hooks/exhaustive-deps
273  }, [source, savedSource, readOnly, data.baseVersion, autosaver.state]);
274
275  // Counted as saved only once the server said so; a failed autosave leaves the text unsaved and retried.
276  useEffect(() => {
277    if (autosaver.state !== "idle" || inFlight.current === null) return;
278    if (autosaver.data?.intent === "autosave") {
279      setSavedSource(inFlight.current);
280      setSavedAt(autosaver.data.updatedAt);
281    }
282    inFlight.current = null;
283  }, [autosaver.state, autosaver.data]);
284
285  // After a discard, the loader has the site's text again, which replaces the local copy.
286  const discarded = writer.data?.intent === "discard" && writer.state === "idle";
287  useEffect(() => {
288    if (discarded) {
289      setSource(data.source);
290      setSavedSource(data.source);
291      setSavedAt(null);
292    }
293  }, [discarded, data.source]);
294
295  // After an import, the loader has the imported draft, which replaces the local copy.
296  const imported = writer.data?.intent === "google" && writer.data.imported === true && writer.state === "idle";
297  useEffect(() => {
298    if (imported) {
299      setSource(data.source);
300      setSavedSource(data.source);
301      setSavedAt(data.draftAt);
302    }
303  }, [imported, data.source, data.draftAt]);
304
305  // A write that reached the site clears the draft there, so the local copy counts as saved.
306  const outcome = writer.data?.intent === "write" ? writer.data.outcome : null;
307  useEffect(() => {
308    if (outcome?.ok && writer.state === "idle") {
309      setSavedSource(source);
310      setSavedAt(null);
311    }
312    // eslint-disable-next-line react-hooks/exhaustive-deps
313  }, [outcome, writer.state]);
314
315  // What the controls send is read at the moment they send it: the publish controls keep an Undo that
316  // runs later, and it must carry the version the site has then, not the one this render saw.
317  const latest = useRef({ source, version: data.baseVersion });
318  latest.current = { source, version: data.baseVersion };
319  const waiting = useRef<((result: ActionResult) => void) | null>(null);
320  const viaGate = useRef(false);
321  const send = (intent: string, extra: Record<string, string> = {}) =>
322    new Promise<ActionResult>((resolve) => {
323      waiting.current = resolve;
324      void writer.submit({ intent, source: latest.current.source, expectedVersion: latest.current.version ?? "", ...extra }, { method: "post" });
325    });
326  useEffect(() => {
327    if (writer.state === "idle" && writer.data && waiting.current) {
328      const done = waiting.current;
329      waiting.current = null;
330      done(writer.data);
331    }
332  }, [writer.state, writer.data]);
333
334  // The publish controls' two verbs. A rejection carries the site's own words, which the gate says.
335  const writeThrough = async (intent: string, extra: Record<string, string> = {}) => {
336    viaGate.current = true;
337    const result = await send(intent, extra);
338    viaGate.current = false;
339    if (result.intent !== "write") throw new Error("The site did not answer.");
340    if (!result.outcome.ok) throw new Error(result.outcome.message);
341  };
342
343  // Results of the buttons Carrel owns are said in the message region; the gate says its own.
344  const said = useRef<unknown>(null);
345  useEffect(() => {
346    if (writer.state !== "idle" || !outcome || said.current === outcome || viaGate.current) return;
347    said.current = outcome;
348    if (outcome.ok) say(outcome.action === "save" ? "Saved to the site." : outcome.action === "schedule" ? "Scheduled." : outcome.action === "publish" ? "Published." : "Returned to draft.");
349  }, [outcome, writer.state, say]);
350
351  // Cmd+S saves in place: a draft stays a draft, a live post is updated.
352  useSaveShortcut(() => {
353    if (maySave && writer.state === "idle") void send("save");
354  });
355
356  const busy = writer.state !== "idle";
357  const transitions = data.status ? transitionsFor(data.status === "draft" ? "draft" : "published", data.everPublished) : [];
358  const saveTransition = transitions.find((t) => t.id === "save-draft" || t.id === "save");
359  const saveState =
360    autosaver.state !== "idle" ? "Saving to Carrel" : source !== savedSource ? "Not yet saved" : savedAt ? `Draft saved in Carrel ${new Date(savedAt).toLocaleTimeString()}` : onSite ? siteState(data.status, data.everPublished) : "";
361  // Absolute, not relative: from /p/x/e/item a bare "preview" would resolve to /p/x/e/preview.
362  const previewSrc = `/p/${encodeURIComponent(data.project.slug)}/e/${encodeURIComponent(data.itemId)}/preview?at=${encodeURIComponent(savedAt ?? data.version ?? "")}`;
363  const failure = outcome && !outcome.ok && !viaGate.current ? outcome : null;
364  const google = writer.data?.intent === "google" && !busy ? writer.data : null;
365
366  const gateSite: GateSite = {
367    id: data.project.siteId,
368    name: data.project.site,
369    first: !data.everPublished,
370    published: data.status === "published" && data.liveUrl ? { at: data.publishedAt ?? "", url: data.liveUrl } : null,
371    hold: data.status === "scheduled" && data.publishAt ? { reason: "scheduled", untilLabel: utc(data.publishAt), text: `Scheduled for ${utc(data.publishAt)}` } : null,
372  };
373  // Open flags never stop a publish here (checks and reviewers flag, they do not decide), so each is advisory.
374  const gateChecks: GateCheck[] = data.flags.map((f) => ({
375    id: `flag-${f.id}`,
376    name: "Flag",
377    required: false,
378    ok: f.status !== "open",
379    cause: f.message,
380    pass: "Dismissed",
381    href: "#flags",
382    fix: "Change the text, or dismiss the flag.",
383  }));
384
385  const historyPath = `/p/${encodeURIComponent(data.project.slug)}/e/${encodeURIComponent(data.itemId)}/history`;
386  const ask = (kind: "discard" | "import" | "schedule" | "dismiss", opener: HTMLElement | null, flag?: number) => setAsking({ kind, opener, flag });
387
388  return (
389    <div className="app-page app-editor" data-layout={layout}>
390      <PageHead
391        renderLink={RouterLink}
392        crumbs={[{ label: data.project.name, href: `/p/${data.project.slug}` }, { label: kindWord(data.kind) }]}
393        title={data.title || data.itemId}
394        lead={
395          <>
396            {data.status === "published" ? <Pill tone="ok">Published</Pill> : data.status === "scheduled" ? <Pill tone="info">Scheduled</Pill> : data.status === "draft" ? <Pill variant="secondary">Draft</Pill> : <Pill variant="outline">Not on the site yet</Pill>}{" "}
397            {data.path ? <span className="cap-mono">{data.path}</span> : null}
398          </>
399        }
400        actions={<Segmented legend="Layout" hideLegend size="sm" value={layout} onChange={chooseLayout} options={[{ value: "write", label: "Write" }, { value: "split", label: "Split" }, { value: "preview", label: "Preview" }]} />}
401      />
402
403      <div className="app-notices">
404        {data.siteError ? <Banner tone="warn">{data.siteError}</Banner> : null}
405        {data.behind ? (
406          <Banner tone="warn" title="The site's copy changed">
407            It changed after this draft was started, so saving it will be refused. Discard the draft to load the site's version, then reapply your changes.
408          </Banner>
409        ) : null}
410        {data.aiPublished && data.status === "published" ? (
411          <Banner tone="info">
412            {data.aiPublished.line} <Time at={data.aiPublished.at} format="exact" />
413          </Banner>
414        ) : null}
415        {data.canEdit && live && !data.canPublish ? <Banner tone="info">This {kindNoun(data.kind)} is live. Your changes autosave here as your draft; sending them to the site is the Owner's step.</Banner> : null}
416      </div>
417
418      <div className="app-editor-grid">
419        <div className="app-editor-main">
420          <div className="app-editor-body" data-layout={layout}>
421            {layout !== "preview" ? (
422              <section className="app-editor-pane" aria-label="Write">
423                <FrontmatterFields source={source} onChange={setSource} readOnly={readOnly} sections={data.sections} kind={data.kind} />
424                <WritingSurface
425                  label={kindWord(data.kind)}
426                  value={splitSource(source).body}
427                  onChange={(body) => setSource((current) => joinSource({ ...splitSource(current), body }))}
428                  readOnly={readOnly}
429                  linkTargets={data.linkTargets.map((t) => ({ href: t.href, title: t.title, hint: t.href, note: t.state !== "published" ? `not live yet (${t.state})` : undefined }))}
430                  media={data.media ? { ...data.media, figure: (url: string, alt: string) => figureMarkup(data.project.siteId, url, alt) } : null}
431                />
432              </section>
433            ) : null}
434            {layout !== "write" ? (
435              <section className="app-preview-pane" aria-label="Preview">
436                {/* Sandboxed with no permissions: the site's page runs no script and has an opaque origin. */}
437                <iframe title={`Preview of ${data.title || data.itemId} as ${data.project.site} renders it`} src={previewSrc} sandbox="" />
438              </section>
439            ) : null}
440          </div>
441          {data.flags.length > 0 || data.aiDrafts.length > 0 ? (
442            <FlagsPanel flags={data.flags} aiDrafts={data.aiDrafts} canPublish={data.canPublish} onDismiss={(button, flag) => ask("dismiss", button, flag)} />
443          ) : null}
444          {data.revisions || data.historyError ? (
445            <HistoryPanel
446              revisions={data.revisions}
447              revisionCount={data.revisionCount}
448              historyError={data.historyError}
449              historyPath={historyPath}
450              noun={kindNoun(data.kind)}
451              againstSite={Boolean(savedAt) && onSite}
452              aiDrafts={data.aiDrafts}
453            />
454          ) : null}
455        </div>
456
457        <aside className="app-editor-side" aria-label="Binder, saving and publishing">
458          <Panel title="Binder" src="This site's writing">
459            <SiteBinder nodes={data.binder} current={data.itemId} />
460          </Panel>
461          {data.canEdit ? (
462            <Panel title="This draft" src={data.version ? (data.status === "draft" ? "Draft on the site" : "On the site") : "Only in Carrel so far"}>
463              <div className="app-stack" data-tight>
464                <p role="status" className="app-savestate">
465                  {saveState}
466                </p>
467                {failure ? <Alert tone="crit">{failure.message}</Alert> : null}
468                {google ? (
469                  google.ok ? (
470                    <Banner tone="ok">
471                      {google.message}{" "}
472                      {google.url ? (
473                        <a href={google.url} target="_blank" rel="noreferrer">
474                          Open the Doc<span className="cap-sr-only"> (opens in a new tab)</span>
475                        </a>
476                      ) : null}
477                    </Banner>
478                  ) : (
479                    <Alert tone="crit">{google.message}</Alert>
480                  )
481                ) : null}
482                <div className="app-actions">
483                  {!onSite && maySave ? (
484                    <Button variant="primary" pending={busy} onClick={() => void send("save")}>
485                      Save draft to the site
486                    </Button>
487                  ) : null}
488                  {onSite && maySave && saveTransition ? (
489                    <Button variant={data.status === "draft" ? "default" : "primary"} pending={busy} onClick={() => void send("save")}>
490                      {saveTransition.label}
491                    </Button>
492                  ) : null}
493                  {onSite && data.canPublish && data.status === "scheduled" ? (
494                    <Button pending={busy} onClick={() => void send("unpublish")}>
495                      Revert to draft
496                    </Button>
497                  ) : null}
498                  {onSite && data.canPublish && data.status !== "published" ? (
499                    <Button onClick={(event) => ask("schedule", event.currentTarget)}>Schedule</Button>
500                  ) : null}
501                  {savedAt ? (
502                    <Button variant="quiet" pending={busy} onClick={(event) => ask("discard", event.currentTarget)}>
503                      Discard my draft
504                    </Button>
505                  ) : null}
506                </div>
507                {data.canSend && data.googleConnected ? (
508                  <div className="app-actions">
509                    <Button variant="quiet" pending={busy} onClick={() => void send("send-to-docs")}>
510                      Send to Google Docs
511                    </Button>
512                    {data.sentDoc ? (
513                      <Button variant="quiet" pending={busy} onClick={(event) => ask("import", event.currentTarget)}>
514                        Import from Docs
515                      </Button>
516                    ) : null}
517                  </div>
518                ) : null}
519              </div>
520            </Panel>
521          ) : null}
522
523          {onSite && data.canPublish ? (
524            <PublishGate
525              label="Publish checks"
526              sites={[gateSite]}
527              checks={gateChecks}
528              publish={() => writeThrough("publish", { confirm: "first-publish" })}
529              unpublish={() => writeThrough("unpublish")}
530              say={say}
531              fail={(text) => say(text)}
532            />
533          ) : null}
534
535          {data.search ? (
536            <Panel title="Search" src={`${data.search.start} to ${data.search.end}`} size="sm">
537              <dl className="app-facts">
538                <dt>Clicks</dt>
539                <dd className="cap-num">{data.search.clicks}</dd>
540                <dt>Impressions</dt>
541                <dd className="cap-num">{data.search.impressions}</dd>
542                <dt>Position</dt>
543                <dd className="cap-num">{data.search.position}</dd>
544              </dl>
545            </Panel>
546          ) : null}
547        </aside>
548      </div>
549
550      <ConfirmDialog
551        open={asking?.kind === "discard"}
552        title="Discard your draft?"
553        lead="Your working copy in Carrel is deleted, and the editor goes back to the site's text. This cannot be undone."
554        body={[]}
555        action="Discard my draft"
556        returnTo={asking?.opener}
557        perform={async () => void (await send("discard"))}
558        onClose={() => setAsking(null)}
559      />
560      <ConfirmDialog
561        open={asking?.kind === "import"}
562        title="Import from Google Docs?"
563        lead="The Doc's text replaces your working draft. This cannot be undone."
564        body={[]}
565        action="Import and replace"
566        returnTo={asking?.opener}
567        perform={async () => void (await send("import-from-docs"))}
568        onClose={() => setAsking(null)}
569      />
570      <ConfirmDialog
571        open={asking?.kind === "dismiss"}
572        title="Dismiss this flag?"
573        lead="A dismissed flag no longer holds publish, and it cannot be reopened."
574        body={asking?.flag !== undefined ? [data.flags.find((f) => f.id === asking.flag)?.message ?? ""] : []}
575        action="Dismiss flag"
576        returnTo={asking?.opener}
577        perform={async () => {
578          if (asking?.flag !== undefined) await writer.submit({ intent: "dismiss-flag", flag: String(asking.flag) }, { method: "post" });
579        }}
580        onClose={() => setAsking(null)}
581      />
582      <ScheduleDialog
583        open={asking?.kind === "schedule"}
584        noun={kindNoun(data.kind)}
585        returnTo={asking?.opener}
586        onClose={() => setAsking(null)}
587        schedule={async (publishAt) => {
588          await send("schedule", { publishAt });
589          setAsking(null);
590        }}
591      />
592    </div>
593  );
594}