skillverse 0.1.0

package/client/src/pages/Workspaces.tsx

@@ -0,0 +1,662 @@
+import { useEffect, useState, useMemo } from 'react';
+import { useAppStore } from '../stores/appStore';
+import {
+    FolderOpen,
+    Plus,
+    X,
+    Loader2,
+    Monitor,
+    Code,
+    MessageSquare,
+    Box,
+    Trash2,
+    Link2,
+    AlertTriangle,
+    Sparkles,
+    Terminal,
+    Globe,
+    FolderCog,
+    ArrowRight,
+    CheckCircle,
+    XCircle,
+    Pencil,
+    Check,
+} from 'lucide-react';
+import { LoadingPage, EmptyState } from '../components/LoadingSpinner';
+import { workspacesApi } from '../lib/api';
+import { clsx } from 'clsx';
+import Tooltip from '../components/Tooltip';
+import type { Workspace, WorkspaceType, WorkspaceScope } from '@skillverse/shared';
+import { WORKSPACE_SKILLS_PATHS } from '@skillverse/shared';
+
+const workspaceTypeInfo: Record<
+    WorkspaceType,
+    { icon: React.ComponentType<{ className?: string }>; label: string; color: string }
+> = {
+    vscode: { icon: Code, label: 'VS Code', color: 'text-blue-400 bg-blue-500/10' },
+    cursor: { icon: Monitor, label: 'Cursor', color: 'text-purple-400 bg-purple-500/10' },
+    'claude-desktop': {
+        icon: MessageSquare,
+        label: 'Claude Code',
+        color: 'text-orange-400 bg-orange-500/10',
+    },
+    codex: { icon: Terminal, label: 'Codex', color: 'text-green-400 bg-green-500/10' },
+    antigravity: { icon: Sparkles, label: 'Antigravity', color: 'text-cyan-400 bg-cyan-500/10' },
+    custom: { icon: Box, label: 'Custom', color: 'text-dark-400 bg-dark-700' },
+};
+
+const scopeInfo: Record<WorkspaceScope, { icon: React.ComponentType<{ className?: string }>; label: string; description: string }> = {
+    project: { icon: FolderCog, label: 'Project', description: 'Skills for a specific project' },
+    global: { icon: Globe, label: 'Global', description: 'Skills available across all projects' },
+};
+
+export default function Workspaces() {
+    const {
+        workspaces,
+        workspacesLoading,
+        fetchWorkspaces,
+        addWorkspace,
+        removeWorkspace,
+        showToast,
+        updateWorkspace,
+    } = useAppStore();
+    const [showAddDialog, setShowAddDialog] = useState(false);
+    const [editingWorkspaceId, setEditingWorkspaceId] = useState<string | null>(null);
+    const [editName, setEditName] = useState('');
+    const [saving, setSaving] = useState(false);
+    const [migrationData, setMigrationData] = useState<{
+        workspace: Workspace;
+        skills: { name: string; hasSkillMd: boolean; path: string }[];
+    } | null>(null);
+
+    useEffect(() => {
+        fetchWorkspaces();
+    }, [fetchWorkspaces]);
+
+    const handleDelete = async (workspace: Workspace) => {
+        if (
+            !confirm(
+                `Are you sure you want to delete "${workspace.name}"? This will remove all skill links.`
+            )
+        )
+            return;
+
+        try {
+            await workspacesApi.delete(workspace.id);
+            removeWorkspace(workspace.id);
+            showToast(`Workspace "${workspace.name}" deleted`, 'success');
+        } catch (err: any) {
+            showToast(err.message || 'Failed to delete workspace', 'error');
+        }
+    };
+
+    const handleWorkspaceAdded = async (workspace: Workspace) => {
+        addWorkspace(workspace);
+        setShowAddDialog(false);
+
+        // Check for existing skills in workspace
+        try {
+            const existingSkills = await workspacesApi.detectSkills(workspace.id);
+            if (existingSkills.length > 0) {
+                setMigrationData({ workspace, skills: existingSkills });
+            } else {
+                showToast(`Workspace "${workspace.name}" added successfully!`, 'success');
+            }
+        } catch (err) {
+            // Silent fail - just show success without migration prompt
+            showToast(`Workspace "${workspace.name}" added successfully!`, 'success');
+        }
+    };
+
+    const handleMigrationComplete = () => {
+        setMigrationData(null);
+        fetchWorkspaces(); // Refresh to get updated workspace data
+    };
+
+    const handleEditStart = (workspace: Workspace) => {
+        setEditingWorkspaceId(workspace.id);
+        setEditName(workspace.name);
+    };
+
+    const handleEditCancel = () => {
+        setEditingWorkspaceId(null);
+        setEditName('');
+    };
+
+    const handleEditSave = async (workspace: Workspace) => {
+        if (!editName.trim() || editName === workspace.name) {
+            handleEditCancel();
+            return;
+        }
+
+        setSaving(true);
+        try {
+            const updated = await workspacesApi.update(workspace.id, { name: editName });
+            updateWorkspace(workspace.id, updated);
+            showToast('Workspace name updated', 'success');
+            handleEditCancel();
+        } catch (err: any) {
+            showToast(err.message || 'Failed to update workspace name', 'error');
+        } finally {
+            setSaving(false);
+        }
+    };
+
+    if (workspacesLoading && workspaces.length === 0) {
+        return <LoadingPage />;
+    }
+
+    return (
+        <div className="space-y-6 animate-fade-in">
+            {/* Header - Responsive */}
+            <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+                <div className="min-w-0 flex-1">
+                    <h1 className="text-2xl sm:text-3xl font-bold text-dark-100">Workspaces</h1>
+                    <p className="text-dark-400 mt-1 text-sm sm:text-base">
+                        Manage your development workspaces
+                    </p>
+                </div>
+                <button onClick={() => setShowAddDialog(true)} className="btn-primary shrink-0 w-full sm:w-auto">
+                    <Plus className="w-4 h-4" />
+                    Add Workspace
+                </button>
+            </div>
+
+            {/* Workspaces Grid - Enhanced responsive */}
+            {workspaces.length > 0 ? (
+                <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4 sm:gap-6">
+                    {workspaces.map((workspace: any) => {
+                        const typeInfo = workspaceTypeInfo[workspace.type as WorkspaceType];
+                        const TypeIcon = typeInfo?.icon || Box;
+                        const linkedSkills = workspace.linkedSkills?.length || 0;
+                        const isPathValid = workspace.isPathValid !== false;
+
+                        return (
+                            <div key={workspace.id} className="card group">
+                                <div className="flex items-start justify-between gap-2">
+                                    <div className="flex items-center gap-3 min-w-0 flex-1">
+                                        <div className={clsx('w-10 h-10 rounded-xl flex items-center justify-center shrink-0', typeInfo?.color || 'bg-dark-700')}>
+                                            <TypeIcon className="w-5 h-5" />
+                                        </div>
+                                        <div className="min-w-0 flex-1">
+                                            <div className="flex items-center gap-2">
+                                                {editingWorkspaceId === workspace.id ? (
+                                                    <div className="flex items-center gap-1">
+                                                        <input
+                                                            type="text"
+                                                            value={editName}
+                                                            onChange={(e) => setEditName(e.target.value)}
+                                                            className="px-2 py-0.5 text-sm bg-dark-800 border border-primary-500 rounded text-dark-100 placeholder-dark-500 focus:outline-none w-[120px] sm:w-[160px]"
+                                                            autoFocus
+                                                            onKeyDown={(e) => {
+                                                                if (e.key === 'Enter') handleEditSave(workspace);
+                                                                if (e.key === 'Escape') handleEditCancel();
+                                                            }}
+                                                            onClick={(e) => e.stopPropagation()}
+                                                        />
+                                                        <button
+                                                            onClick={(e) => {
+                                                                e.stopPropagation();
+                                                                handleEditSave(workspace);
+                                                            }}
+                                                            className="p-1 rounded-md text-green-400 hover:bg-green-500/10"
+                                                            disabled={saving}
+                                                        >
+                                                            {saving ? (
+                                                                <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                                                            ) : (
+                                                                <Check className="w-3.5 h-3.5" />
+                                                            )}
+                                                        </button>
+                                                        <button
+                                                            onClick={(e) => {
+                                                                e.stopPropagation();
+                                                                handleEditCancel();
+                                                            }}
+                                                            className="p-1 rounded-md text-red-400 hover:bg-red-500/10"
+                                                            disabled={saving}
+                                                        >
+                                                            <X className="w-3.5 h-3.5" />
+                                                        </button>
+                                                    </div>
+                                                ) : (
+                                                    <div className="flex items-center gap-2 group/title">
+                                                        <Tooltip content={workspace.name} position="top">
+                                                            <h3 className="font-semibold text-dark-100 truncate max-w-[150px] sm:max-w-[200px]">
+                                                                {workspace.name}
+                                                            </h3>
+                                                        </Tooltip>
+                                                        <button
+                                                            onClick={(e) => {
+                                                                e.stopPropagation();
+                                                                handleEditStart(workspace);
+                                                            }}
+                                                            className="opacity-0 group-hover/title:opacity-100 text-dark-400 hover:text-primary-400 transition-all p-0.5 rounded"
+                                                        >
+                                                            <Pencil className="w-3.5 h-3.5" />
+                                                        </button>
+                                                    </div>
+                                                )}
+                                                {!isPathValid && (
+                                                    <Tooltip content="Skills folder not found - directory may have been deleted" position="top">
+                                                        <span className="text-amber-400 shrink-0">
+                                                            <AlertTriangle className="w-4 h-4" />
+                                                        </span>
+                                                    </Tooltip>
+                                                )}
+                                            </div>
+                                            <div className="flex items-center gap-2 text-xs text-dark-500">
+                                                <span>{typeInfo?.label || workspace.type}</span>
+                                                <span>•</span>
+                                                <span className="capitalize">{workspace.scope || 'project'}</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <button
+                                        onClick={() => handleDelete(workspace)}
+                                        className="btn-icon opacity-0 group-hover:opacity-100 transition-opacity text-red-400 hover:text-red-300 shrink-0"
+                                    >
+                                        <Trash2 className="w-4 h-4" />
+                                    </button>
+                                </div>
+
+                                <div className="mt-4">
+                                    <Tooltip content={workspace.path} position="bottom" className="max-w-full">
+                                        <p className={clsx("text-sm truncate", isPathValid ? "text-dark-400" : "text-amber-400")}>
+                                            {workspace.path}
+                                        </p>
+                                    </Tooltip>
+                                </div>
+
+                                <div className="mt-4 pt-4 border-t border-dark-700 flex items-center justify-between">
+                                    <div className="flex items-center gap-2 text-xs text-dark-500">
+                                        <Link2 className="w-3.5 h-3.5" />
+                                        <span>{linkedSkills} skill{linkedSkills !== 1 ? 's' : ''} linked</span>
+                                    </div>
+                                    <div className="text-xs text-dark-500">
+                                        {new Date(workspace.createdAt).toLocaleDateString()}
+                                    </div>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            ) : (
+                <EmptyState
+                    icon={FolderOpen}
+                    title="No workspaces yet"
+                    description="Add a workspace to start linking skills to your development environment."
+                    action={
+                        <button onClick={() => setShowAddDialog(true)} className="btn-primary">
+                            <Plus className="w-4 h-4" />
+                            Add Your First Workspace
+                        </button>
+                    }
+                />
+            )}
+
+            {/* Add Dialog */}
+            {showAddDialog && (
+                <AddWorkspaceDialog
+                    onClose={() => setShowAddDialog(false)}
+                    onAdd={handleWorkspaceAdded}
+                />
+            )}
+
+            {/* Migration Dialog */}
+            {migrationData && (
+                <MigrationDialog
+                    workspace={migrationData.workspace}
+                    skills={migrationData.skills}
+                    onClose={handleMigrationComplete}
+                />
+            )}
+        </div>
+    );
+}
+
+function AddWorkspaceDialog({
+    onClose,
+    onAdd,
+}: {
+    onClose: () => void;
+    onAdd: (workspace: Workspace) => void;
+}) {
+    const [name, setName] = useState('');
+    const [projectPath, setProjectPath] = useState('');
+    const [type, setType] = useState<WorkspaceType>('antigravity');
+    const [scope, setScope] = useState<WorkspaceScope>('project');
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState('');
+
+    // Compute preview path
+    const previewPath = useMemo(() => {
+        const config = WORKSPACE_SKILLS_PATHS[type];
+        if (scope === 'global') {
+            return config.global;
+        }
+        return projectPath ? `${projectPath}/${config.project}` : config.project;
+    }, [type, scope, projectPath]);
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!name) {
+            setError('Name is required');
+            return;
+        }
+        if (scope === 'project' && !projectPath) {
+            setError('Project path is required for project scope');
+            return;
+        }
+
+        setLoading(true);
+        setError('');
+
+        try {
+            const workspace = await workspacesApi.create({ name, projectPath, type, scope });
+            onAdd(workspace);
+        } catch (err: any) {
+            setError(err.message || 'Failed to create workspace');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-2 sm:p-4">
+            <div className="absolute inset-0 bg-dark-950/80 backdrop-blur-sm" onClick={onClose} />
+
+            <div className="relative w-full max-w-lg bg-dark-800 border border-dark-700 rounded-2xl shadow-2xl animate-scale-in max-h-[90vh] overflow-y-auto">
+                <div className="flex items-center justify-between px-4 sm:px-6 py-4 border-b border-dark-700 sticky top-0 bg-dark-800 z-10">
+                    <h2 className="text-lg font-semibold text-dark-100">Add Workspace</h2>
+                    <button onClick={onClose} className="btn-icon">
+                        <X className="w-5 h-5" />
+                    </button>
+                </div>
+
+                <form onSubmit={handleSubmit} className="p-4 sm:p-6 space-y-4 sm:space-y-5">
+                    {/* Name */}
+                    <div>
+                        <label className="block text-sm font-medium text-dark-300 mb-2">Name</label>
+                        <input
+                            type="text"
+                            value={name}
+                            onChange={(e) => setName(e.target.value)}
+                            placeholder="My Workspace"
+                            className="input"
+                            disabled={loading}
+                        />
+                    </div>
+
+                    {/* Type */}
+                    <div>
+                        <label className="block text-sm font-medium text-dark-300 mb-2">Editor Type</label>
+                        <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
+                            {(Object.keys(workspaceTypeInfo) as WorkspaceType[]).map((t) => {
+                                const info = workspaceTypeInfo[t];
+                                const Icon = info.icon;
+                                return (
+                                    <button
+                                        key={t}
+                                        type="button"
+                                        onClick={() => setType(t)}
+                                        className={clsx(
+                                            'flex items-center gap-2 p-2 sm:p-3 rounded-lg border transition-all',
+                                            type === t
+                                                ? 'bg-primary-500/10 border-primary-500/50 text-dark-100'
+                                                : 'bg-dark-750 border-dark-600 text-dark-400 hover:border-dark-500'
+                                        )}
+                                        disabled={loading}
+                                    >
+                                        <Icon className="w-4 h-4 shrink-0" />
+                                        <span className="text-xs sm:text-sm truncate">{info.label}</span>
+                                    </button>
+                                );
+                            })}
+                        </div>
+                    </div>
+
+                    {/* Scope */}
+                    <div>
+                        <label className="block text-sm font-medium text-dark-300 mb-2">Scope</label>
+                        <div className="grid grid-cols-2 gap-2">
+                            {(Object.keys(scopeInfo) as WorkspaceScope[]).map((s) => {
+                                const info = scopeInfo[s];
+                                const Icon = info.icon;
+                                return (
+                                    <button
+                                        key={s}
+                                        type="button"
+                                        onClick={() => setScope(s)}
+                                        className={clsx(
+                                            'flex flex-col items-start gap-1 p-2 sm:p-3 rounded-lg border transition-all',
+                                            scope === s
+                                                ? 'bg-primary-500/10 border-primary-500/50 text-dark-100'
+                                                : 'bg-dark-750 border-dark-600 text-dark-400 hover:border-dark-500'
+                                        )}
+                                        disabled={loading}
+                                    >
+                                        <div className="flex items-center gap-2">
+                                            <Icon className="w-4 h-4" />
+                                            <span className="text-sm font-medium">{info.label}</span>
+                                        </div>
+                                        <span className="text-xs text-dark-500 text-left">{info.description}</span>
+                                    </button>
+                                );
+                            })}
+                        </div>
+                    </div>
+
+                    {/* Project Path - only show for project scope */}
+                    {scope === 'project' && (
+                        <div>
+                            <label className="block text-sm font-medium text-dark-300 mb-2">Project Path</label>
+                            <input
+                                type="text"
+                                value={projectPath}
+                                onChange={(e) => setProjectPath(e.target.value)}
+                                placeholder="/path/to/your/project"
+                                className="input"
+                                disabled={loading}
+                            />
+                        </div>
+                    )}
+
+                    {/* Path Preview */}
+                    <div className="p-3 rounded-lg bg-dark-750 border border-dark-600">
+                        <p className="text-xs text-dark-400 mb-1">Skills will be stored in:</p>
+                        <code className="text-xs sm:text-sm text-primary-400 break-all">{previewPath}</code>
+                        <p className="text-xs text-dark-500 mt-2">
+                            The folder will be created automatically if it doesn&apos;t exist.
+                        </p>
+                    </div>
+
+                    {error && (
+                        <div className="p-3 rounded-lg bg-red-500/10 border border-red-500/30 text-red-400 text-sm">
+                            {error}
+                        </div>
+                    )}
+
+                    <div className="flex gap-3 pt-2">
+                        <button type="button" onClick={onClose} className="btn-secondary flex-1" disabled={loading}>
+                            Cancel
+                        </button>
+                        <button type="submit" className="btn-primary flex-1" disabled={loading}>
+                            {loading ? (
+                                <>
+                                    <Loader2 className="w-4 h-4 animate-spin" />
+                                    Creating...
+                                </>
+                            ) : (
+                                'Add Workspace'
+                            )}
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+}
+
+function MigrationDialog({
+    workspace,
+    skills,
+    onClose,
+}: {
+    workspace: Workspace;
+    skills: { name: string; hasSkillMd: boolean; path: string }[];
+    onClose: () => void;
+}) {
+    const [loading, setLoading] = useState(false);
+    const [result, setResult] = useState<{ success: boolean; migrated: string[]; errors: string[] } | null>(null);
+    const { showToast, fetchSkills } = useAppStore();
+
+    const handleMigrate = async () => {
+        setLoading(true);
+        try {
+            const skillNames = skills.map(s => s.name);
+            const migrationResult = await workspacesApi.migrateSkills(workspace.id, skillNames);
+            setResult(migrationResult);
+
+            if (migrationResult.migrated.length > 0) {
+                showToast(`Migrated ${migrationResult.migrated.length} skill(s) successfully!`, 'success');
+                fetchSkills(); // Refresh skills list
+            }
+        } catch (err: any) {
+            showToast(err.message || 'Migration failed', 'error');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleSkip = () => {
+        showToast(`Workspace "${workspace.name}" added successfully!`, 'success');
+        onClose();
+    };
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-2 sm:p-4">
+            <div className="absolute inset-0 bg-dark-950/80 backdrop-blur-sm" onClick={result ? onClose : undefined} />
+
+            <div className="relative w-full max-w-lg bg-dark-800 border border-dark-700 rounded-2xl shadow-2xl animate-scale-in max-h-[90vh] overflow-y-auto">
+                <div className="flex items-center justify-between px-4 sm:px-6 py-4 border-b border-dark-700 sticky top-0 bg-dark-800 z-10">
+                    <h2 className="text-lg font-semibold text-dark-100">
+                        {result ? 'Migration Complete' : 'Existing Skills Detected'}
+                    </h2>
+                    {result && (
+                        <button onClick={onClose} className="btn-icon">
+                            <X className="w-5 h-5" />
+                        </button>
+                    )}
+                </div>
+
+                <div className="p-4 sm:p-6 space-y-4">
+                    {!result ? (
+                        <>
+                            <div className="p-3 sm:p-4 rounded-lg bg-amber-500/10 border border-amber-500/30">
+                                <p className="text-amber-400 text-sm text-justified">
+                                    Found <strong>{skills.length}</strong> existing skill(s) in this workspace.
+                                    Would you like to migrate them to unified management?
+                                </p>
+                            </div>
+
+                            <div className="space-y-2 max-h-48 overflow-y-auto">
+                                {skills.map((skill) => (
+                                    <div key={skill.name} className="flex items-center gap-3 p-3 rounded-lg bg-dark-750 border border-dark-600">
+                                        <Box className="w-4 h-4 text-primary-400 shrink-0" />
+                                        <div className="flex-1 min-w-0">
+                                            <p className="text-sm font-medium text-dark-100 truncate">{skill.name}</p>
+                                            <Tooltip content={skill.path} position="bottom">
+                                                <p className="text-xs text-dark-500 truncate lg:max-w-[320px]">{skill.path}</p>
+                                            </Tooltip>
+                                        </div>
+                                        {skill.hasSkillMd && (
+                                            <span className="px-2 py-0.5 text-xs rounded bg-green-500/10 text-green-400 shrink-0">
+                                                SKILL.md
+                                            </span>
+                                        )}
+                                    </div>
+                                ))}
+                            </div>
+
+                            <div className="p-3 rounded-lg bg-dark-750 border border-dark-600">
+                                <p className="text-xs text-dark-400 mb-2">Migration will:</p>
+                                <ul className="text-xs text-dark-500 space-y-1 ml-3">
+                                    <li className="flex items-center gap-2">
+                                        <ArrowRight className="w-3 h-3 text-primary-400 shrink-0" />
+                                        <span>Move skills to <code className="text-primary-400">~/.skillverse/skills/</code></span>
+                                    </li>
+                                    <li className="flex items-center gap-2">
+                                        <ArrowRight className="w-3 h-3 text-primary-400 shrink-0" />
+                                        <span>Register them in SkillVerse for unified management</span>
+                                    </li>
+                                    <li className="flex items-center gap-2">
+                                        <ArrowRight className="w-3 h-3 text-primary-400 shrink-0" />
+                                        <span>Create symlinks back to this workspace</span>
+                                    </li>
+                                </ul>
+                            </div>
+
+                            <div className="flex gap-3 pt-2">
+                                <button onClick={handleSkip} className="btn-secondary flex-1" disabled={loading}>
+                                    No, Keep as is
+                                </button>
+                                <button onClick={handleMigrate} className="btn-primary flex-1" disabled={loading}>
+                                    {loading ? (
+                                        <>
+                                            <Loader2 className="w-4 h-4 animate-spin" />
+                                            Migrating...
+                                        </>
+                                    ) : (
+                                        'Yes, Migrate'
+                                    )}
+                                </button>
+                            </div>
+                        </>
+                    ) : (
+                        <>
+                            {result.migrated.length > 0 && (
+                                <div className="space-y-2">
+                                    <p className="text-sm font-medium text-green-400 flex items-center gap-2">
+                                        <CheckCircle className="w-4 h-4" />
+                                        Successfully migrated ({result.migrated.length})
+                                    </p>
+                                    <div className="space-y-1">
+                                        {result.migrated.map((name) => (
+                                            <div key={name} className="flex items-center gap-2 p-2 rounded bg-green-500/10 text-sm text-dark-100">
+                                                <Box className="w-3.5 h-3.5 text-green-400" />
+                                                <span className="truncate">{name}</span>
+                                            </div>
+                                        ))}
+                                    </div>
+                                </div>
+                            )}
+
+                            {result.errors.length > 0 && (
+                                <div className="space-y-2">
+                                    <p className="text-sm font-medium text-red-400 flex items-center gap-2">
+                                        <XCircle className="w-4 h-4" />
+                                        Errors ({result.errors.length})
+                                    </p>
+                                    <div className="space-y-1">
+                                        {result.errors.map((err, i) => (
+                                            <div key={i} className="p-2 rounded bg-red-500/10 text-sm text-red-400 break-words">
+                                                {err}
+                                            </div>
+                                        ))}
+                                    </div>
+                                </div>
+                            )}
+
+                            <div className="flex justify-end pt-2">
+                                <button onClick={onClose} className="btn-primary">
+                                    Done
+                                </button>
+                            </div>
+                        </>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}