Files
multica/packages/views/common/pill-button.tsx
Naiyuan Qing cd6bb48283 feat(autopilots): unified create/edit dialog with issue-modal layout (#1501)
Replace separate CreateAutopilotDialog / EditAutopilotDialog with a single
shared <AutopilotDialog mode="create"|"edit"> that mirrors the issue create
modal — dynamic sizing, expand/collapse, richtext Prompt, pill toolbar.

- Tiptap ContentEditor replaces plain textarea for Prompt; detail page
  renders description via ReadonlyContent for visual parity.
- Pills: Agent, Priority, Execution Mode, Schedule (Popover hosting
  TriggerConfigSection). 0/1/N trigger strategy: add on 0, edit inline on
  1, disabled with tooltip on 2+ (power users edit in detail page).
- Exposes priority + execution_mode at creation time (backend always
  supported them; old UI only offered them in Edit).
- parseCronExpression reverse-parses stored cron back to TriggerConfig for
  Edit-time prefill (with round-trip tests).
- PillButton extracted to packages/views/common for reuse across modals.
- DialogContent uses showCloseButton={false} so the shared header renders
  the Maximize + Close buttons next to the Rocket-prefixed breadcrumb.
- Conditional mount at call sites (`{open && <AutopilotDialog/>}`) keeps
  state fresh on each open.
- Schedule dirty detection compares cron+timezone payloads vs mount
  snapshot, and edit-mode submits against a snapshotted trigger id so
  concurrent WS refetches can't mis-target the update.

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-22 16:59:37 +08:00

26 lines
622 B
TypeScript

"use client";
import { cn } from "@multica/ui/lib/utils";
export function PillButton({
children,
className,
...props
}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
return (
<button
type="button"
className={cn(
"inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs",
"hover:bg-accent/60 transition-colors cursor-pointer",
"data-popup-open:bg-accent data-popup-open:text-accent-foreground",
"disabled:cursor-not-allowed disabled:hover:bg-transparent",
className,
)}
{...props}
>
{children}
</button>
);
}