feat(dashboard): import a proposal from JSON when creating one

.changeset/import-proposal-json.md

@@ -0,0 +1,5 @@
+---
+"@anticapture/dashboard": minor
+---
+
+Import a proposal from JSON when creating one.

apps/dashboard/features/create-proposal/components/BodyField.tsx

@@ -10,6 +10,8 @@ import {
   MDXEditor,
   Separator,
   StrikeThroughSupSubToggles,
+  codeBlockPlugin,
+  codeMirrorPlugin,
   diffSourcePlugin,
   headingsPlugin,
   linkDialogPlugin,
@@ -122,6 +124,27 @@ export const BodyField = ({ version = 0 }: BodyFieldProps) => {
                 linkPlugin(),
                 linkDialogPlugin(),
                 tablePlugin(),
+                // Required, not optional. With no plugin claiming the `code`
+                // mdast node, a body holding a fenced block puts the editor in
+                // its failure state, "Parsing of the following markdown
+                // structure failed: {"type":"code","name":"N/A"}", and the
+                // author can only edit in source mode. Real proposals quote
+                // calldata and JSON constantly, and an imported body carries
+                // whatever fences the document had.
+                codeBlockPlugin({ defaultCodeBlockLanguage: "" }),
+                codeMirrorPlugin({
+                  // The empty key is the fallback for a fence with no language,
+                  // which is most of them. Anything else in the map is resolved
+                  // through @codemirror/language-data on demand.
+                  codeBlockLanguages: {
+                    "": "Plain text",
+                    json: "JSON",
+                    js: "JavaScript",
+                    ts: "TypeScript",
+                    solidity: "Solidity",
+                    bash: "Shell",
+                  },
+                }),
                 markdownShortcutPlugin(),
                 diffSourcePlugin({
                   viewMode: mode === "markdown" ? "source" : "rich-text",

apps/dashboard/features/create-proposal/components/JsonTextarea.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { useRef, type Ref } from "react";
+
+import { cn } from "@/shared/utils/cn";
+
+/**
+ * A textarea that can carry a line-number gutter, for callers whose messages cite
+ * a line.
+ *
+ * Two things keep the numbers honest, and both are load-bearing. The content must
+ * not soft-wrap, so that one line of text is one line on screen; it is rendered
+ * `whitespace-pre` and scrolls sideways instead, which the format hint needs
+ * anyway since wrapping breaks `"recipient":` away from its value. And the two
+ * columns must share an explicit `leading-5` and the same vertical padding, or
+ * they inherit different line heights and drift further apart with every line.
+ */
+
+type JsonTextareaProps = {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  /** 1-based line to mark in the gutter, if any. */
+  errorLine?: number;
+  /**
+   * Opt in to the line-number gutter. Off by default: a numbered column earns
+   * its width only where something refers to a line, so a caller that never
+   * mentions one gets a plain textarea.
+   */
+  showLineNumbers?: boolean;
+  hasError?: boolean;
+  ariaLabel?: string;
+  /** Height belongs to the caller; the columns stretch to fill it. */
+  className?: string;
+  ref?: Ref<HTMLTextAreaElement>;
+};
+
+export const JsonTextarea = ({
+  value,
+  onChange,
+  placeholder,
+  errorLine,
+  showLineNumbers = false,
+  hasError = false,
+  ariaLabel,
+  className,
+  ref,
+}: JsonTextareaProps) => {
+  const gutterRef = useRef<HTMLDivElement>(null);
+
+  // No numbers at all while the box is empty. Numbering a document that isn't
+  // there would sit "1" beside a fourteen-line placeholder.
+  const lineCount = value === "" ? 0 : value.split("\n").length;
+
+  // Sized to the digits it actually has to hold. A fixed column is either too
+  // wide, which is dead space on every line, or too narrow the moment a document
+  // passes its width. `ch` is exact here because the font is monospaced. Two
+  // digits is the floor so the text doesn't shift sideways at line 10.
+  const gutterDigits = Math.max(2, String(lineCount).length);
+
+  return (
+    <div
+      className={cn(
+        // The wrapper owns the field's surface, so the two columns read as one
+        // control and the focus ring goes round both.
+        "border-border-contrast bg-surface-default rounded-base flex overflow-hidden border transition-all duration-200",
+        "focus-within:shadow-[var(--shadow-focus-ring)]",
+        // Draggable, but bounded. Browsers clamp a resize to max-height, and
+        // without one the field can be dragged taller than the screen, which
+        // pushes the dialog's own footer out of reach and leaves no way back. The
+        // cap is relative to the viewport so it holds on a laptop as well as a
+        // large monitor, and the floor stops it being dragged shut.
+        "max-h-[50vh] min-h-32 resize-y",
+        hasError && "border-error",
+        className,
+      )}
+    >
+      {showLineNumbers && (
+        <div
+          ref={gutterRef}
+          aria-hidden
+          // Border-box, so the width covers its own padding and leaves exactly
+          // the digits room to sit in.
+          style={{ width: `calc(${gutterDigits}ch + 1rem)` }}
+          className="text-dimmed pointer-events-none shrink-0 select-none overflow-hidden py-2 pl-2 pr-2 text-right font-mono text-xs leading-5"
+        >
+          {Array.from({ length: lineCount }, (_, index) => {
+            const line = index + 1;
+            return (
+              <div
+                key={line}
+                className={line === errorLine ? "text-error" : ""}
+              >
+                {line}
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      <textarea
+        ref={ref}
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        // Programmatic scrolling fires this too, so jumping to the first error
+        // brings the gutter with it.
+        onScroll={(event) => {
+          const gutter = gutterRef.current;
+          if (gutter) gutter.scrollTop = event.currentTarget.scrollTop;
+        }}
+        placeholder={placeholder}
+        spellCheck={false}
+        aria-label={ariaLabel}
+        className={cn(
+          "text-primary placeholder:text-dimmed h-full w-full resize-none whitespace-pre bg-transparent py-2 pr-2.5 font-mono text-xs leading-5",
+          // The same scrollbar the tables use, from the shared utility rather
+          // than a second definition of it, so the two stay in step.
+          "scrollbar-thin overflow-auto border-0 outline-none",
+          // The gutter's own right padding is the gap when it is there; without
+          // it the field falls back to the design system's own inset.
+          showLineNumbers ? "pl-0" : "pl-2.5",
+        )}
+      />
+    </div>
+  );
+};

apps/dashboard/features/create-proposal/components/NewProposalMenu.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Plus } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/shared/components/design-system/buttons/button/Button";
+import { itemStatusStyles } from "@/shared/components/design-system/combobox/styles";
+import { cn } from "@/shared/utils/cn";
+
+/**
+ * The two ways to start a proposal, behind the New Proposal button.
+ *
+ * The import used to be a button sitting on the creation form, which is one step
+ * too late: by then the author has an empty form in front of them and importing
+ * replaces what they are looking at. Choosing it here makes it a way of starting,
+ * which is what it is.
+ *
+ * Built on the Popover primitive rather than the Combobox, which is a select: it
+ * shows its current value in the trigger, and these two options are actions with
+ * nothing selected between them. The item styling is borrowed from the combobox
+ * so the two menus look like one system.
+ */
+
+type NewProposalMenuProps = {
+  onCreateNew: () => void;
+  onImportJson: () => void;
+  /**
+   * Forwarded to the trigger, which is where the analytics attributes live.
+   *
+   * `data-*` keys are spelled out because JSX accepts them on an element without
+   * being declared, but an object literal assigned to a typed prop does not.
+   */
+  triggerProps?: React.ComponentProps<typeof Button> &
+    Partial<Record<`data-${string}`, string | undefined>>;
+};
+
+/** Just the label. Two options this plain need nothing explaining them. */
+const MenuItem = ({
+  label,
+  onSelect,
+}: {
+  label: string;
+  onSelect: () => void;
+}) => (
+  <button
+    type="button"
+    role="menuitem"
+    onClick={onSelect}
+    className={cn(
+      // The same padding and type as a combobox item, so the two menus in the
+      // app read as one system.
+      "flex w-full items-center px-3 py-2 text-left",
+      "text-primary text-sm font-normal leading-5",
+      itemStatusStyles.default,
+      "hover:bg-surface-hover cursor-pointer transition-colors duration-150",
+    )}
+  >
+    {label}
+  </button>
+);
+
+export const NewProposalMenu = ({
+  onCreateNew,
+  onImportJson,
+  triggerProps,
+}: NewProposalMenuProps) => {
+  const [open, setOpen] = useState(false);
+
+  const choose = (action: () => void) => () => {
+    setOpen(false);
+    action();
+  };
+
+  return (
+    <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
+      <PopoverPrimitive.Trigger asChild>
+        <Button
+          variant="primary"
+          size="md"
+          aria-haspopup="menu"
+          aria-expanded={open}
+          {...triggerProps}
+          className={cn(
+            "flex-1 whitespace-nowrap lg:w-fit lg:flex-none",
+            triggerProps?.className,
+          )}
+        >
+          <Plus className="size-4" />
+          New Proposal
+        </Button>
+      </PopoverPrimitive.Trigger>
+
+      <PopoverPrimitive.Content
+        role="menu"
+        align="end"
+        sideOffset={4}
+        className={cn(
+          "flex flex-col",
+          // Sized to the labels now that nothing sits under them. Wide enough
+          // that the two rows don't look cramped against the trigger above.
+          "min-w-40 py-1",
+          "bg-surface-contrast",
+          "border-border-contrast rounded-base border",
+          "z-50",
+          "animate-[popover-slide-in_0.15s_ease-out]",
+        )}
+      >
+        <MenuItem label="Create new" onSelect={choose(onCreateNew)} />
+        <MenuItem label="Import JSON" onSelect={choose(onImportJson)} />
+      </PopoverPrimitive.Content>
+    </PopoverPrimitive.Root>
+  );
+};