You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
317 lines
10 KiB
317 lines
10 KiB
"use client";
|
|
|
|
import { useState, useEffect, useCallback } from "react";
|
|
import { WorkflowFile } from "@/store/workflowStore";
|
|
import { QuickstartBackButton } from "./QuickstartBackButton";
|
|
import {
|
|
getWorkflowsDirectory,
|
|
setWorkflowsDirectory,
|
|
} from "@/store/utils/localStorage";
|
|
|
|
interface WorkflowListEntry {
|
|
name: string;
|
|
directoryPath: string;
|
|
lastModified: number;
|
|
}
|
|
|
|
interface WorkflowBrowserViewProps {
|
|
onBack?: () => void;
|
|
onWorkflowLoaded: (workflow: WorkflowFile, directoryPath: string) => void;
|
|
onClose?: () => void;
|
|
}
|
|
|
|
function formatRelativeTime(timestamp: number): string {
|
|
const seconds = Math.floor((Date.now() - timestamp) / 1000);
|
|
if (seconds < 60) return "just now";
|
|
const minutes = Math.floor(seconds / 60);
|
|
if (minutes < 60) return `${minutes}m ago`;
|
|
const hours = Math.floor(minutes / 60);
|
|
if (hours < 24) return `${hours}h ago`;
|
|
const days = Math.floor(hours / 24);
|
|
if (days < 30) return `${days}d ago`;
|
|
const months = Math.floor(days / 30);
|
|
return `${months}mo ago`;
|
|
}
|
|
|
|
export function WorkflowBrowserView({
|
|
onBack,
|
|
onWorkflowLoaded,
|
|
onClose,
|
|
}: WorkflowBrowserViewProps) {
|
|
const [defaultDir, setDefaultDir] = useState<string | null>(null);
|
|
const [workflows, setWorkflows] = useState<WorkflowListEntry[]>([]);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [loadingWorkflow, setLoadingWorkflow] = useState<string | null>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
setDefaultDir(getWorkflowsDirectory());
|
|
}, []);
|
|
|
|
const fetchWorkflows = useCallback(async (dirPath: string) => {
|
|
setIsLoading(true);
|
|
setError(null);
|
|
try {
|
|
const res = await fetch(
|
|
`/api/list-workflows?path=${encodeURIComponent(dirPath)}`
|
|
);
|
|
const result = await res.json();
|
|
if (result.success) {
|
|
setWorkflows(result.workflows);
|
|
if (result.workflows.length === 0) {
|
|
setError("No workflows found in this folder");
|
|
}
|
|
} else {
|
|
setError(result.error || "Failed to list workflows");
|
|
}
|
|
} catch {
|
|
setError("Failed to fetch workflows");
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
// Fetch workflows when default directory is set
|
|
useEffect(() => {
|
|
if (defaultDir) {
|
|
fetchWorkflows(defaultDir);
|
|
}
|
|
}, [defaultDir, fetchWorkflows]);
|
|
|
|
const handleChooseFolder = useCallback(async () => {
|
|
try {
|
|
const res = await fetch("/api/browse-directory");
|
|
const result = await res.json();
|
|
if (result.success && !result.cancelled && result.path) {
|
|
setWorkflowsDirectory(result.path);
|
|
setDefaultDir(result.path);
|
|
}
|
|
} catch {
|
|
setError("Failed to open directory picker");
|
|
}
|
|
}, []);
|
|
|
|
const handleChangeFolder = useCallback(async () => {
|
|
try {
|
|
const res = await fetch("/api/browse-directory");
|
|
const result = await res.json();
|
|
if (result.success && !result.cancelled && result.path) {
|
|
setWorkflowsDirectory(result.path);
|
|
setDefaultDir(result.path);
|
|
}
|
|
} catch {
|
|
setError("Failed to open directory picker");
|
|
}
|
|
}, []);
|
|
|
|
const handleBrowseOther = useCallback(async () => {
|
|
try {
|
|
const browseRes = await fetch("/api/browse-directory");
|
|
const browseResult = await browseRes.json();
|
|
|
|
if (
|
|
!browseResult.success ||
|
|
browseResult.cancelled ||
|
|
!browseResult.path
|
|
) {
|
|
if (!browseResult.success && !browseResult.cancelled) {
|
|
setError(browseResult.error || "Failed to open directory picker");
|
|
}
|
|
return;
|
|
}
|
|
|
|
const dirPath = browseResult.path;
|
|
|
|
setLoadingWorkflow(dirPath);
|
|
const loadRes = await fetch(
|
|
`/api/workflow?path=${encodeURIComponent(dirPath)}&load=true`
|
|
);
|
|
const loadResult = await loadRes.json();
|
|
setLoadingWorkflow(null);
|
|
|
|
if (!loadResult.success) {
|
|
setError(loadResult.error || "No workflow file found in directory");
|
|
return;
|
|
}
|
|
|
|
onWorkflowLoaded(loadResult.workflow as WorkflowFile, dirPath);
|
|
onClose?.();
|
|
} catch {
|
|
setLoadingWorkflow(null);
|
|
setError("Failed to open workflow");
|
|
}
|
|
}, [onWorkflowLoaded, onClose]);
|
|
|
|
const handleSelectWorkflow = useCallback(
|
|
async (entry: WorkflowListEntry) => {
|
|
setLoadingWorkflow(entry.directoryPath);
|
|
setError(null);
|
|
try {
|
|
const res = await fetch(
|
|
`/api/workflow?path=${encodeURIComponent(entry.directoryPath)}&load=true`
|
|
);
|
|
const result = await res.json();
|
|
|
|
if (!result.success) {
|
|
setError(result.error || "Failed to load workflow");
|
|
setLoadingWorkflow(null);
|
|
return;
|
|
}
|
|
|
|
onWorkflowLoaded(
|
|
result.workflow as WorkflowFile,
|
|
entry.directoryPath
|
|
);
|
|
onClose?.();
|
|
} catch {
|
|
setError("Failed to load workflow");
|
|
setLoadingWorkflow(null);
|
|
}
|
|
},
|
|
[onWorkflowLoaded, onClose]
|
|
);
|
|
|
|
// State A: No default directory configured
|
|
if (defaultDir === null) {
|
|
return (
|
|
<div className="p-8 flex flex-col items-center">
|
|
{onBack && (
|
|
<div className="w-full mb-4">
|
|
<QuickstartBackButton onClick={onBack} />
|
|
</div>
|
|
)}
|
|
<div className="flex flex-col items-center gap-4 py-8">
|
|
<div className="w-12 h-12 rounded-xl bg-neutral-700/50 flex items-center justify-center">
|
|
<svg
|
|
className="w-6 h-6 text-neutral-400"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
strokeWidth={1.5}
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div className="text-center">
|
|
<h2 className="text-lg font-medium text-neutral-200 mb-1">
|
|
Your Workflows
|
|
</h2>
|
|
<p className="text-sm text-neutral-500 max-w-xs">
|
|
Choose a folder that contains your workflow projects
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={handleChooseFolder}
|
|
className="px-4 py-2 text-sm font-medium text-neutral-200 bg-neutral-700 hover:bg-neutral-600 rounded-lg transition-colors"
|
|
>
|
|
Choose folder
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// State B: Default directory configured — show listing
|
|
return (
|
|
<div className="flex flex-col h-full max-h-[70vh]">
|
|
{/* Header */}
|
|
<div className="px-6 py-4 border-b border-neutral-700/50 flex-shrink-0">
|
|
<div className="flex items-center gap-3">
|
|
{onBack && <QuickstartBackButton onClick={onBack} />}
|
|
<div className="flex-1 min-w-0">
|
|
<h2 className="text-lg font-medium text-neutral-200">
|
|
Your Workflows
|
|
</h2>
|
|
<p
|
|
className="text-xs text-neutral-500 truncate"
|
|
title={defaultDir}
|
|
>
|
|
{defaultDir}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Workflow list */}
|
|
<div className="flex-1 overflow-y-auto px-6 py-3">
|
|
{isLoading ? (
|
|
<div className="flex items-center justify-center py-12">
|
|
<div className="w-5 h-5 border-2 border-neutral-600 border-t-neutral-300 rounded-full animate-spin" />
|
|
</div>
|
|
) : error && workflows.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-12 text-center">
|
|
<p className="text-sm text-neutral-500">{error}</p>
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col gap-1">
|
|
{workflows.map((entry) => (
|
|
<button
|
|
key={entry.directoryPath}
|
|
onClick={() => handleSelectWorkflow(entry)}
|
|
disabled={loadingWorkflow !== null}
|
|
className="group text-left px-4 py-3 rounded-lg hover:bg-neutral-700/40 transition-colors disabled:opacity-50"
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div className="min-w-0 flex-1">
|
|
<span className="text-sm font-medium text-neutral-200 group-hover:text-neutral-100 transition-colors">
|
|
{entry.name}
|
|
</span>
|
|
<div className="mt-0.5">
|
|
<span className="text-xs text-neutral-500">
|
|
{formatRelativeTime(entry.lastModified)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
{loadingWorkflow === entry.directoryPath ? (
|
|
<div className="w-4 h-4 border-2 border-neutral-600 border-t-neutral-300 rounded-full animate-spin" />
|
|
) : (
|
|
<svg
|
|
className="w-4 h-4 text-neutral-600 group-hover:text-neutral-400 transition-colors"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M8.25 4.5l7.5 7.5-7.5 7.5"
|
|
/>
|
|
</svg>
|
|
)}
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{error && workflows.length > 0 && (
|
|
<p className="text-xs text-red-400 mt-2 px-4">{error}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="px-6 py-3 border-t border-neutral-700/50 flex-shrink-0 flex items-center gap-3">
|
|
<button
|
|
onClick={handleBrowseOther}
|
|
disabled={loadingWorkflow !== null}
|
|
className="text-xs text-neutral-400 hover:text-neutral-200 transition-colors disabled:opacity-50"
|
|
>
|
|
Browse other location...
|
|
</button>
|
|
<span className="text-neutral-700">·</span>
|
|
<button
|
|
onClick={handleChangeFolder}
|
|
disabled={loadingWorkflow !== null}
|
|
className="text-xs text-neutral-400 hover:text-neutral-200 transition-colors disabled:opacity-50"
|
|
>
|
|
Change folder
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|