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,
@@ -76,7 +78,6 @@ export const BodyField = ({ version = 0 }: BodyFieldProps) => {
           "[&_.mdxeditor-toolbar]:rounded-base! [&_.mdxeditor-toolbar]:!mb-2 [&_.mdxeditor-toolbar]:!bg-transparent [&_.mdxeditor-toolbar]:!px-0 [&_.mdxeditor-toolbar]:!py-0",
           "[&_.mdxeditor-root-contenteditable]:max-h-100 md:[&_.mdxeditor-root-contenteditable]:max-h-150 [&_.mdxeditor-root-contenteditable]:overflow-y-auto",
           "[&_.cm-editor]:min-h-75 [&_.cm-editor]:max-h-100 [&_.cm-scroller]:min-h-75 [&_.cm-scroller]:max-h-100 md:[&_.cm-editor]:min-h-130 md:[&_.cm-editor]:max-h-150 md:[&_.cm-scroller]:min-h-130 md:[&_.cm-scroller]:max-h-150",
-          // Markdown source view (CodeMirror) — match the dashboard theme
           "[&_.cm-editor]:bg-surface-background [&_.cm-editor]:text-primary",
           "[&_.cm-scroller]:bg-surface-background",
           "[&_.cm-content]:bg-surface-background [&_.cm-content]:text-primary [&_.cm-content]:caret-primary",
@@ -91,7 +92,6 @@ export const BodyField = ({ version = 0 }: BodyFieldProps) => {
           "[&_.tok-comment]:text-secondary [&_.tok-comment]:italic",
           "[&_.tok-number]:text-warning [&_.tok-bool]:text-warning [&_.tok-atom]:text-warning",
           "[&_.tok-punctuation]:text-secondary [&_.tok-meta]:text-secondary",
-          // Heading styles for Visual Editor content (mdxeditor content area)
           "[&_.mdxeditor-root-contenteditable_h1]:mb-3 [&_.mdxeditor-root-contenteditable_h1]:mt-4 [&_.mdxeditor-root-contenteditable_h1]:text-2xl [&_.mdxeditor-root-contenteditable_h1]:font-semibold",
           "[&_.mdxeditor-root-contenteditable_h2]:mb-2 [&_.mdxeditor-root-contenteditable_h2]:mt-4 [&_.mdxeditor-root-contenteditable_h2]:text-xl [&_.mdxeditor-root-contenteditable_h2]:font-semibold",
           "[&_.mdxeditor-root-contenteditable_h3]:mb-2 [&_.mdxeditor-root-contenteditable_h3]:mt-3 [&_.mdxeditor-root-contenteditable_h3]:text-lg [&_.mdxeditor-root-contenteditable_h3]:font-semibold",
@@ -122,6 +122,17 @@ export const BodyField = ({ version = 0 }: BodyFieldProps) => {
                 linkPlugin(),
                 linkDialogPlugin(),
                 tablePlugin(),
+                codeBlockPlugin({ defaultCodeBlockLanguage: "" }),
+                codeMirrorPlugin({
+                  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,86 @@
+"use client";
+
+import { useRef, type Ref } from "react";
+
+import { cn } from "@/shared/utils/cn";
+
+type JsonTextareaProps = {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  errorLine?: number;
+  showLineNumbers?: boolean;
+  hasError?: boolean;
+  ariaLabel?: string;
+  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);
+
+  const lineCount = value === "" ? 0 : value.split("\n").length;
+
+  const gutterDigits = Math.max(2, String(lineCount).length);
+
+  return (
+    <div
+      className={cn(
+        "border-border-contrast bg-surface-default rounded-base flex overflow-hidden border transition-all duration-200",
+        "focus-within:shadow-[var(--shadow-focus-ring)]",
+        "max-h-[50vh] min-h-32 resize-y",
+        hasError && "border-error",
+        className,
+      )}
+    >
+      {showLineNumbers && (
+        <div
+          ref={gutterRef}
+          aria-hidden
+          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)}
+        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",
+          "scrollbar-thin overflow-auto border-0 outline-none",
+          showLineNumbers ? "pl-0" : "pl-2.5",
+        )}
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,89 @@
+"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";
+
+type NewProposalMenuProps = {
+  onCreateNew: () => void;
+  onImportJson: () => void;
+  triggerProps?: React.ComponentProps<typeof Button> &
+    Partial<Record<`data-${string}`, string | undefined>>;
+};
+
+const MenuItem = ({
+  label,
+  onSelect,
+}: {
+  label: string;
+  onSelect: () => void;
+}) => (
+  <button
+    type="button"
+    role="menuitem"
+    onClick={onSelect}
+    className={cn(
+      "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",
+          "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>
+  );
+};