headquarter/apps/web/src/components/workspace-create-form.tsx

/** Form for creating a new workspace. */

import { useState } from "react";
import { Icon } from "./icon";
import type { CreateWorkspaceRequest } from "../types/workspace";

export interface WorkspaceCreateFormProps {
  projectId: string;
  repoId: string;
  defaultBranch?: string;
  onSubmit: (data: CreateWorkspaceRequest) => Promise<void>;
  onCancel: () => void;
}

export function WorkspaceCreateForm({
  defaultBranch = "main",
  onSubmit,
  onCancel,
}: WorkspaceCreateFormProps) {
  const [name, setName] = useState("");
  const [branch, setBranch] = useState(defaultBranch);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!name.trim()) {
      setError("Workspace name is required");
      return;
    }
    setSubmitting(true);
    setError(null);
    try {
      await onSubmit({ name: name.trim(), branch: branch.trim() });
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to create workspace");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <form className="workspace-create-form card" onSubmit={handleSubmit}>
      <h3>
        <Icon name="add" size="sm" /> Create Workspace
      </h3>
      <div className="form-group">
        <label htmlFor="ws-name">Name</label>
        <input
          id="ws-name"
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="e.g., feature-branch"
          disabled={submitting}
        />
      </div>
      <div className="form-group">
        <label htmlFor="ws-branch">
          <Icon name="branch" size="sm" /> Branch
        </label>
        <input
          id="ws-branch"
          type="text"
          value={branch}
          onChange={(e) => setBranch(e.target.value)}
          placeholder="main"
          disabled={submitting}
        />
      </div>
      {error && <p className="form-error">{error}</p>}
      <div className="form-actions">
        <button type="button" className="btn btn-secondary" onClick={onCancel} disabled={submitting}>
          Cancel
        </button>
        <button type="submit" className="btn btn-primary" disabled={submitting}>
          {submitting ? "Creating..." : "Create"}
        </button>
      </div>
    </form>
  );
}