orcheo-canvas 0.0.1

package/src/features/workflow/pages/workflow-gallery/workflow-card.tsx

@@ -0,0 +1,222 @@
+import { Link } from "react-router-dom";
+import { toast } from "@/hooks/use-toast";
+import { Button } from "@/design-system/ui/button";
+import { Badge } from "@/design-system/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/design-system/ui/card";
+import { Avatar, AvatarFallback, AvatarImage } from "@/design-system/ui/avatar";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/design-system/ui/dropdown-menu";
+import {
+  AlertCircle,
+  CheckCircle,
+  Clock,
+  Copy,
+  Download,
+  FolderPlus,
+  MoreHorizontal,
+  Pencil,
+  Star,
+  Trash,
+} from "lucide-react";
+import { type Workflow } from "@features/workflow/data/workflow-data";
+import { WorkflowThumbnail } from "./workflow-thumbnail";
+
+interface WorkflowCardProps {
+  workflow: Workflow;
+  isTemplate: boolean;
+  onOpenWorkflow: (workflowId: string) => void;
+  onUseTemplate: (workflowId: string) => void;
+  onDuplicateWorkflow: (workflowId: string) => void;
+  onExportWorkflow: (workflow: Workflow) => void;
+  onDeleteWorkflow: (workflowId: string, workflowName: string) => void;
+}
+
+export const WorkflowCard = ({
+  workflow,
+  isTemplate,
+  onOpenWorkflow,
+  onUseTemplate,
+  onDuplicateWorkflow,
+  onExportWorkflow,
+  onDeleteWorkflow,
+}: WorkflowCardProps) => {
+  const updatedLabel = new Date(
+    workflow.updatedAt || workflow.createdAt,
+  ).toLocaleDateString();
+
+  return (
+    <Card className="overflow-hidden">
+      <CardHeader className="px-3 pb-2 pt-3">
+        <div className="flex items-start justify-between">
+          <CardTitle className="text-base">{workflow.name}</CardTitle>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="icon" className="h-7 w-7">
+                <MoreHorizontal className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              {isTemplate ? (
+                <>
+                  <DropdownMenuItem
+                    onSelect={(event) => {
+                      event.preventDefault();
+                      onUseTemplate(workflow.id);
+                    }}
+                  >
+                    <Copy className="mr-2 h-4 w-4" />
+                    Use template
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onSelect={(event) => {
+                      event.preventDefault();
+                      onExportWorkflow(workflow);
+                    }}
+                  >
+                    <Download className="mr-2 h-4 w-4" />
+                    Export JSON
+                  </DropdownMenuItem>
+                </>
+              ) : (
+                <>
+                  <DropdownMenuItem
+                    onSelect={(event) => {
+                      event.preventDefault();
+                      onOpenWorkflow(workflow.id);
+                    }}
+                  >
+                    <Pencil className="mr-2 h-4 w-4" />
+                    Edit
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onSelect={(event) => {
+                      event.preventDefault();
+                      onDuplicateWorkflow(workflow.id);
+                    }}
+                  >
+                    <Copy className="mr-2 h-4 w-4" />
+                    Duplicate
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onSelect={(event) => {
+                      event.preventDefault();
+                      onExportWorkflow(workflow);
+                    }}
+                  >
+                    <Download className="mr-2 h-4 w-4" />
+                    Export JSON
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem
+                    className="text-red-600"
+                    onSelect={(event) => {
+                      event.preventDefault();
+                      onDeleteWorkflow(workflow.id, workflow.name);
+                    }}
+                  >
+                    <Trash className="mr-2 h-4 w-4" />
+                    Delete
+                  </DropdownMenuItem>
+                </>
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+
+        <CardDescription className="line-clamp-1">
+          {workflow.description || "No description provided"}
+        </CardDescription>
+
+        {isTemplate && workflow.sourceExample && (
+          <p className="mt-1 line-clamp-1 text-xs text-muted-foreground/80">
+            Based on {workflow.sourceExample}
+          </p>
+        )}
+      </CardHeader>
+
+      <CardContent className="px-3 pb-2">
+        <WorkflowThumbnail workflow={workflow} />
+        <div className="mt-2 flex flex-wrap gap-1">
+          {workflow.tags.slice(0, 2).map((tag) => (
+            <Badge key={tag} variant="secondary" className="text-xs">
+              {tag}
+            </Badge>
+          ))}
+          {workflow.tags.length > 2 && (
+            <Badge variant="secondary" className="text-xs">
+              +{workflow.tags.length - 2} more
+            </Badge>
+          )}
+        </div>
+      </CardContent>
+
+      <CardFooter className="flex justify-between px-3 pb-3 pt-2 text-xs text-muted-foreground">
+        <div className="flex items-center">
+          <Avatar className="mr-1 h-5 w-5">
+            <AvatarImage src={workflow.owner.avatar} />
+            <AvatarFallback>{workflow.owner.name.charAt(0)}</AvatarFallback>
+          </Avatar>
+          <div className="flex items-center gap-1">
+            <span>{updatedLabel}</span>
+            {workflow.lastRun?.status === "success" && (
+              <CheckCircle className="h-3 w-3 text-green-500" />
+            )}
+            {workflow.lastRun?.status === "error" && (
+              <AlertCircle className="h-3 w-3 text-red-500" />
+            )}
+            {workflow.lastRun?.status === "running" && (
+              <Clock className="h-3 w-3 animate-pulse text-blue-500" />
+            )}
+          </div>
+        </div>
+
+        <div className="flex gap-1">
+          {isTemplate ? (
+            <Button
+              size="sm"
+              className="h-7 px-3 text-xs"
+              onClick={() => onUseTemplate(workflow.id)}
+            >
+              <FolderPlus className="mr-1 h-3 w-3" />
+              Use template
+            </Button>
+          ) : (
+            <>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7"
+                onClick={() =>
+                  toast({
+                    title: "Favorites coming soon",
+                    description: `We'll remember ${workflow.name} as a favorite soon.`,
+                  })
+                }
+              >
+                <Star className="h-3 w-3" />
+              </Button>
+              <Link to={`/workflow-canvas/${workflow.id}`}>
+                <Button size="sm" className="h-7 px-2 text-xs">
+                  <Pencil className="mr-1 h-3 w-3" />
+                  Edit
+                </Button>
+              </Link>
+            </>
+          )}
+        </div>
+      </CardFooter>
+    </Card>
+  );
+};

package/src/features/workflow/pages/workflow-gallery/workflow-create-dialogs.tsx

@@ -0,0 +1,114 @@
+import { ChangeEvent } from "react";
+import { Button } from "@/design-system/ui/button";
+import { Input } from "@/design-system/ui/input";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/design-system/ui/dialog";
+import { Label } from "@/design-system/ui/label";
+import { FolderPlus, Plus } from "lucide-react";
+
+interface WorkflowCreateFolderDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  folderName: string;
+  onFolderNameChange: (value: string) => void;
+  onCreateFolder: () => void;
+}
+
+export const WorkflowCreateFolderDialog = ({
+  open,
+  onOpenChange,
+  folderName,
+  onFolderNameChange,
+  onCreateFolder,
+}: WorkflowCreateFolderDialogProps) => (
+  <Dialog open={open} onOpenChange={onOpenChange}>
+    <DialogTrigger asChild>
+      <Button variant="outline">
+        <FolderPlus className="mr-2 h-4 w-4" />
+        New Folder
+      </Button>
+    </DialogTrigger>
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>Create New Folder</DialogTitle>
+        <DialogDescription>Enter a name for your new folder.</DialogDescription>
+      </DialogHeader>
+      <div className="py-4">
+        <Label htmlFor="folder-name">Folder Name</Label>
+        <Input
+          id="folder-name"
+          value={folderName}
+          onChange={(event: ChangeEvent<HTMLInputElement>) =>
+            onFolderNameChange(event.target.value)
+          }
+          placeholder="My Workflows"
+          className="mt-2"
+        />
+      </div>
+      <DialogFooter>
+        <Button variant="outline" onClick={() => onOpenChange(false)}>
+          Cancel
+        </Button>
+        <Button onClick={onCreateFolder}>Create Folder</Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+);
+
+interface WorkflowCreateWorkflowDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  workflowName: string;
+  onWorkflowNameChange: (value: string) => void;
+  onCreateWorkflow: () => void;
+}
+
+export const WorkflowCreateWorkflowDialog = ({
+  open,
+  onOpenChange,
+  workflowName,
+  onWorkflowNameChange,
+  onCreateWorkflow,
+}: WorkflowCreateWorkflowDialogProps) => (
+  <Dialog open={open} onOpenChange={onOpenChange}>
+    <DialogTrigger asChild>
+      <Button>
+        <Plus className="mr-2 h-4 w-4" />
+        Create Workflow
+      </Button>
+    </DialogTrigger>
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>Create New Workflow</DialogTitle>
+        <DialogDescription>
+          Enter a name for your new workflow.
+        </DialogDescription>
+      </DialogHeader>
+      <div className="py-4">
+        <Label htmlFor="workflow-name">Workflow Name</Label>
+        <Input
+          id="workflow-name"
+          value={workflowName}
+          onChange={(event: ChangeEvent<HTMLInputElement>) =>
+            onWorkflowNameChange(event.target.value)
+          }
+          placeholder="My New Workflow"
+          className="mt-2"
+        />
+      </div>
+      <DialogFooter>
+        <Button variant="outline" onClick={() => onOpenChange(false)}>
+          Cancel
+        </Button>
+        <Button onClick={onCreateWorkflow}>Create &amp; Open</Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+);

package/src/features/workflow/pages/workflow-gallery/workflow-filter-popover.tsx

@@ -0,0 +1,190 @@
+import { Button } from "@/design-system/ui/button";
+import { Checkbox } from "@/design-system/ui/checkbox";
+import { Label } from "@/design-system/ui/label";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/design-system/ui/popover";
+import { Filter } from "lucide-react";
+import { useCallback } from "react";
+import { type WorkflowGalleryFilters } from "./types";
+
+interface WorkflowFilterPopoverProps {
+  filters: WorkflowGalleryFilters;
+  onFiltersChange: (filters: WorkflowGalleryFilters) => void;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onApplyFilters: () => void;
+}
+
+const OWNER_OPTIONS = [
+  {
+    id: "owner-me",
+    label: "Created by me",
+    key: "me" as const,
+  },
+  {
+    id: "owner-shared",
+    label: "Shared with me",
+    key: "shared" as const,
+  },
+];
+
+const STATUS_OPTIONS = [
+  {
+    id: "status-active",
+    label: "Active",
+    key: "active" as const,
+  },
+  {
+    id: "status-draft",
+    label: "Draft",
+    key: "draft" as const,
+  },
+  {
+    id: "status-archived",
+    label: "Archived",
+    key: "archived" as const,
+  },
+];
+
+const TAG_OPTIONS = [
+  {
+    id: "tag-favorite",
+    label: "Favorite",
+    key: "favorite" as const,
+  },
+  {
+    id: "tag-template",
+    label: "Template",
+    key: "template" as const,
+  },
+  {
+    id: "tag-production",
+    label: "Production",
+    key: "production" as const,
+  },
+  {
+    id: "tag-development",
+    label: "Development",
+    key: "development" as const,
+  },
+];
+
+export const WorkflowFilterPopover = ({
+  filters,
+  onFiltersChange,
+  open,
+  onOpenChange,
+  onApplyFilters,
+}: WorkflowFilterPopoverProps) => {
+  const updateOwner = useCallback(
+    (key: keyof WorkflowGalleryFilters["owner"]) =>
+      (checked: boolean | "indeterminate") => {
+        onFiltersChange({
+          ...filters,
+          owner: { ...filters.owner, [key]: Boolean(checked) },
+        });
+      },
+    [filters, onFiltersChange],
+  );
+
+  const updateStatus = useCallback(
+    (key: keyof WorkflowGalleryFilters["status"]) =>
+      (checked: boolean | "indeterminate") => {
+        onFiltersChange({
+          ...filters,
+          status: { ...filters.status, [key]: Boolean(checked) },
+        });
+      },
+    [filters, onFiltersChange],
+  );
+
+  const updateTags = useCallback(
+    (key: keyof WorkflowGalleryFilters["tags"]) =>
+      (checked: boolean | "indeterminate") => {
+        onFiltersChange({
+          ...filters,
+          tags: { ...filters.tags, [key]: Boolean(checked) },
+        });
+      },
+    [filters, onFiltersChange],
+  );
+
+  return (
+    <Popover open={open} onOpenChange={onOpenChange}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Filter className="h-4 w-4" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80">
+        <div className="space-y-4">
+          <h4 className="font-medium">Filter Workflows</h4>
+
+          <div className="space-y-2">
+            <h5 className="text-sm font-medium">Owner</h5>
+            <div className="flex flex-col gap-2">
+              {OWNER_OPTIONS.map((option) => (
+                <div key={option.id} className="flex items-center space-x-2">
+                  <Checkbox
+                    id={option.id}
+                    checked={filters.owner[option.key]}
+                    onCheckedChange={updateOwner(option.key)}
+                  />
+                  <Label htmlFor={option.id}>{option.label}</Label>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <h5 className="text-sm font-medium">Status</h5>
+            <div className="flex flex-col gap-2">
+              {STATUS_OPTIONS.map((option) => (
+                <div key={option.id} className="flex items-center space-x-2">
+                  <Checkbox
+                    id={option.id}
+                    checked={filters.status[option.key]}
+                    onCheckedChange={updateStatus(option.key)}
+                  />
+                  <Label htmlFor={option.id}>{option.label}</Label>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <h5 className="text-sm font-medium">Tags</h5>
+            <div className="flex flex-col gap-2">
+              {TAG_OPTIONS.map((option) => (
+                <div key={option.id} className="flex items-center space-x-2">
+                  <Checkbox
+                    id={option.id}
+                    checked={filters.tags[option.key]}
+                    onCheckedChange={updateTags(option.key)}
+                  />
+                  <Label htmlFor={option.id}>{option.label}</Label>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="flex justify-end gap-2 pt-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onOpenChange(false)}
+            >
+              Cancel
+            </Button>
+            <Button size="sm" onClick={onApplyFilters}>
+              Apply Filters
+            </Button>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};

package/src/features/workflow/pages/workflow-gallery/workflow-gallery-header.tsx

@@ -0,0 +1,134 @@
+import { ChangeEvent } from "react";
+import { Input } from "@/design-system/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/design-system/ui/select";
+import { Search, ArrowUpDown, Clock } from "lucide-react";
+import {
+  WorkflowCreateFolderDialog,
+  WorkflowCreateWorkflowDialog,
+} from "./workflow-create-dialogs";
+import { WorkflowFilterPopover } from "./workflow-filter-popover";
+import { type WorkflowGalleryFilters, type WorkflowGallerySort } from "./types";
+
+interface WorkflowGalleryHeaderProps {
+  searchQuery: string;
+  onSearchQueryChange: (value: string) => void;
+  sortBy: WorkflowGallerySort;
+  onSortChange: (value: WorkflowGallerySort) => void;
+  filters: WorkflowGalleryFilters;
+  onFiltersChange: (filters: WorkflowGalleryFilters) => void;
+  showFilterPopover: boolean;
+  onFilterPopoverChange: (open: boolean) => void;
+  showNewFolderDialog: boolean;
+  onNewFolderDialogChange: (open: boolean) => void;
+  newFolderName: string;
+  onFolderNameChange: (value: string) => void;
+  onCreateFolder: () => void;
+  showNewWorkflowDialog: boolean;
+  onNewWorkflowDialogChange: (open: boolean) => void;
+  newWorkflowName: string;
+  onWorkflowNameChange: (value: string) => void;
+  onCreateWorkflow: () => void;
+  onApplyFilters: () => void;
+}
+
+export const WorkflowGalleryHeader = ({
+  searchQuery,
+  onSearchQueryChange,
+  sortBy,
+  onSortChange,
+  filters,
+  onFiltersChange,
+  showFilterPopover,
+  onFilterPopoverChange,
+  showNewFolderDialog,
+  onNewFolderDialogChange,
+  newFolderName,
+  onFolderNameChange,
+  onCreateFolder,
+  showNewWorkflowDialog,
+  onNewWorkflowDialogChange,
+  newWorkflowName,
+  onWorkflowNameChange,
+  onCreateWorkflow,
+  onApplyFilters,
+}: WorkflowGalleryHeaderProps) => {
+  const handleSearchChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onSearchQueryChange(event.target.value);
+  };
+
+  return (
+    <div className="flex flex-col gap-4 p-4 md:flex-row md:items-center">
+      <div className="relative flex-1 md:order-1">
+        <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+        <Input
+          placeholder="Search workflows..."
+          className="pl-10"
+          value={searchQuery}
+          onChange={handleSearchChange}
+        />
+      </div>
+
+      <div className="flex items-center gap-2 md:order-2">
+        <WorkflowCreateFolderDialog
+          open={showNewFolderDialog}
+          onOpenChange={onNewFolderDialogChange}
+          folderName={newFolderName}
+          onFolderNameChange={onFolderNameChange}
+          onCreateFolder={onCreateFolder}
+        />
+        <WorkflowCreateWorkflowDialog
+          open={showNewWorkflowDialog}
+          onOpenChange={onNewWorkflowDialogChange}
+          workflowName={newWorkflowName}
+          onWorkflowNameChange={onWorkflowNameChange}
+          onCreateWorkflow={onCreateWorkflow}
+        />
+      </div>
+
+      <div className="flex items-center gap-2 md:order-3">
+        <Select
+          value={sortBy}
+          onValueChange={(value) => onSortChange(value as WorkflowGallerySort)}
+        >
+          <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder="Sort by" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="updated">
+              <div className="flex items-center">
+                <ArrowUpDown className="mr-2 h-4 w-4" />
+                Last Updated
+              </div>
+            </SelectItem>
+            <SelectItem value="created">
+              <div className="flex items-center">
+                <Clock className="mr-2 h-4 w-4" />
+                Creation Date
+              </div>
+            </SelectItem>
+            <SelectItem value="name">
+              <div className="flex items-center">
+                <ArrowUpDown className="mr-2 h-4 w-4" />
+                Name
+              </div>
+            </SelectItem>
+          </SelectContent>
+        </Select>
+
+        <WorkflowFilterPopover
+          filters={filters}
+          onFiltersChange={onFiltersChange}
+          open={showFilterPopover}
+          onOpenChange={onFilterPopoverChange}
+          onApplyFilters={onApplyFilters}
+        />
+      </div>
+    </div>
+  );
+};