|
| 1 | +import { useCallback, useEffect, useState } from 'react'; |
| 2 | +import { open as openDialog } from '@tauri-apps/plugin-dialog'; |
| 3 | +import { FolderPlus, FolderOpen, Loader2, Trash2, X } from 'lucide-react'; |
| 4 | +import { Button, useToast, ToastContainer } from '@mcpmux/ui'; |
| 5 | +import { |
| 6 | + addSpaceBaseDir, |
| 7 | + listSpaceBaseDirs, |
| 8 | + removeSpaceBaseDir, |
| 9 | + type Space, |
| 10 | + type SpaceBaseDir, |
| 11 | +} from '@/lib/api/spaces'; |
| 12 | + |
| 13 | +/** |
| 14 | + * Manage a Space's base directories. |
| 15 | + * |
| 16 | + * A base dir scopes any workspace root opened at or under it to this Space: |
| 17 | + * an unmapped folder there falls back to this Space's Starter set, and the |
| 18 | + * self-optimize meta-tools + mapping popup restrict to this Space. Longest |
| 19 | + * match wins when base dirs nest across Spaces, and a folder can belong to |
| 20 | + * only one Space. |
| 21 | + */ |
| 22 | +export function SpaceBaseDirsModal({ |
| 23 | + space, |
| 24 | + onClose, |
| 25 | +}: { |
| 26 | + space: Space | null; |
| 27 | + onClose: () => void; |
| 28 | +}) { |
| 29 | + const [dirs, setDirs] = useState<SpaceBaseDir[]>([]); |
| 30 | + const [loading, setLoading] = useState(false); |
| 31 | + const [busy, setBusy] = useState(false); |
| 32 | + const { toasts, success, error: showError, dismiss } = useToast(); |
| 33 | + |
| 34 | + const spaceId = space?.id ?? null; |
| 35 | + |
| 36 | + const load = useCallback(async () => { |
| 37 | + if (!spaceId) return; |
| 38 | + setLoading(true); |
| 39 | + try { |
| 40 | + setDirs(await listSpaceBaseDirs(spaceId)); |
| 41 | + } catch (e) { |
| 42 | + showError('Could not load base directories', e instanceof Error ? e.message : String(e)); |
| 43 | + } finally { |
| 44 | + setLoading(false); |
| 45 | + } |
| 46 | + }, [spaceId, showError]); |
| 47 | + |
| 48 | + useEffect(() => { |
| 49 | + void load(); |
| 50 | + }, [load]); |
| 51 | + |
| 52 | + useEffect(() => { |
| 53 | + const onKey = (e: KeyboardEvent) => { |
| 54 | + if (e.key === 'Escape') onClose(); |
| 55 | + }; |
| 56 | + window.addEventListener('keydown', onKey); |
| 57 | + return () => window.removeEventListener('keydown', onKey); |
| 58 | + }, [onClose]); |
| 59 | + |
| 60 | + const handleAdd = async () => { |
| 61 | + if (!spaceId || busy) return; |
| 62 | + let picked: string | string[] | null; |
| 63 | + try { |
| 64 | + picked = await openDialog({ directory: true, multiple: true, title: 'Add base directory' }); |
| 65 | + } catch { |
| 66 | + return; |
| 67 | + } |
| 68 | + const paths = Array.isArray(picked) ? picked : picked ? [picked] : []; |
| 69 | + if (paths.length === 0) return; |
| 70 | + |
| 71 | + setBusy(true); |
| 72 | + let added = 0; |
| 73 | + for (const p of paths) { |
| 74 | + try { |
| 75 | + await addSpaceBaseDir(spaceId, p); |
| 76 | + added++; |
| 77 | + } catch (e) { |
| 78 | + showError('Could not add folder', e instanceof Error ? e.message : String(e)); |
| 79 | + } |
| 80 | + } |
| 81 | + await load(); |
| 82 | + setBusy(false); |
| 83 | + if (added > 0) { |
| 84 | + success( |
| 85 | + added === 1 ? 'Base directory added' : `${added} base directories added`, |
| 86 | + 'Folders here are now scoped to this space.' |
| 87 | + ); |
| 88 | + } |
| 89 | + }; |
| 90 | + |
| 91 | + const handleRemove = async (dir: SpaceBaseDir) => { |
| 92 | + if (busy) return; |
| 93 | + setBusy(true); |
| 94 | + try { |
| 95 | + await removeSpaceBaseDir(dir.id); |
| 96 | + setDirs((prev) => prev.filter((d) => d.id !== dir.id)); |
| 97 | + } catch (e) { |
| 98 | + showError('Could not remove folder', e instanceof Error ? e.message : String(e)); |
| 99 | + } finally { |
| 100 | + setBusy(false); |
| 101 | + } |
| 102 | + }; |
| 103 | + |
| 104 | + if (!space) return null; |
| 105 | + |
| 106 | + return ( |
| 107 | + <div |
| 108 | + className="animate-fade-in fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4 backdrop-blur-sm" |
| 109 | + onClick={onClose} |
| 110 | + > |
| 111 | + <div |
| 112 | + className="animate-slide-up flex max-h-[80vh] w-full max-w-lg flex-col rounded-2xl border border-[rgb(var(--border))] bg-[rgb(var(--background))] shadow-2xl" |
| 113 | + onClick={(e) => e.stopPropagation()} |
| 114 | + data-testid="space-base-dirs-modal" |
| 115 | + > |
| 116 | + <div className="flex items-start justify-between border-b border-[rgb(var(--border-subtle))] p-5"> |
| 117 | + <div className="flex items-center gap-3"> |
| 118 | + <div className="flex h-10 w-10 items-center justify-center rounded-lg border border-[rgb(var(--border-subtle))] bg-[rgb(var(--surface))] text-xl"> |
| 119 | + {space.icon || '🌐'} |
| 120 | + </div> |
| 121 | + <div> |
| 122 | + <h2 className="text-lg font-semibold">Base directories</h2> |
| 123 | + <p className="text-xs text-[rgb(var(--muted))]"> |
| 124 | + Folders scoped to <span className="font-medium">{space.name}</span> |
| 125 | + </p> |
| 126 | + </div> |
| 127 | + </div> |
| 128 | + <button |
| 129 | + onClick={onClose} |
| 130 | + className="rounded-lg p-1.5 text-[rgb(var(--muted))] transition-colors hover:bg-[rgb(var(--surface))] hover:text-[rgb(var(--foreground))]" |
| 131 | + aria-label="Close" |
| 132 | + > |
| 133 | + <X className="h-5 w-5" /> |
| 134 | + </button> |
| 135 | + </div> |
| 136 | + |
| 137 | + <div className="min-h-0 flex-1 overflow-y-auto p-5"> |
| 138 | + <p className="mb-4 text-sm text-[rgb(var(--muted))]"> |
| 139 | + Any folder you open here (or under it) is scoped to this space — it uses this |
| 140 | + space's tools by default, and self-optimize only sees this space. The most specific |
| 141 | + base directory wins, and a folder can belong to only one space. |
| 142 | + </p> |
| 143 | + |
| 144 | + {loading ? ( |
| 145 | + <div className="flex items-center justify-center py-10 text-[rgb(var(--muted))]"> |
| 146 | + <Loader2 className="h-5 w-5 animate-spin" /> |
| 147 | + </div> |
| 148 | + ) : dirs.length === 0 ? ( |
| 149 | + <div className="rounded-xl border border-dashed border-[rgb(var(--border))] px-4 py-8 text-center text-sm text-[rgb(var(--muted))]"> |
| 150 | + No base directories yet. Add one to scope its folders to this space. |
| 151 | + </div> |
| 152 | + ) : ( |
| 153 | + <ul className="space-y-2" data-testid="space-base-dirs-list"> |
| 154 | + {dirs.map((dir) => ( |
| 155 | + <li |
| 156 | + key={dir.id} |
| 157 | + className="flex items-center gap-3 rounded-xl border border-[rgb(var(--border-subtle))] bg-[rgb(var(--surface))] px-3 py-2.5" |
| 158 | + > |
| 159 | + <FolderOpen className="text-primary-500 h-4 w-4 flex-shrink-0" /> |
| 160 | + <span |
| 161 | + className="min-w-0 flex-1 truncate font-mono text-xs text-[rgb(var(--foreground))]" |
| 162 | + title={dir.path} |
| 163 | + > |
| 164 | + {dir.path} |
| 165 | + </span> |
| 166 | + <button |
| 167 | + onClick={() => handleRemove(dir)} |
| 168 | + disabled={busy} |
| 169 | + className="flex-shrink-0 rounded-lg p-1.5 text-[rgb(var(--muted))] transition-colors hover:bg-red-50 hover:text-red-500 disabled:opacity-50 dark:hover:bg-red-900/20" |
| 170 | + title="Remove base directory" |
| 171 | + data-testid={`remove-base-dir-${dir.id}`} |
| 172 | + > |
| 173 | + <Trash2 className="h-4 w-4" /> |
| 174 | + </button> |
| 175 | + </li> |
| 176 | + ))} |
| 177 | + </ul> |
| 178 | + )} |
| 179 | + </div> |
| 180 | + |
| 181 | + <div className="border-t border-[rgb(var(--border-subtle))] p-5"> |
| 182 | + <Button |
| 183 | + variant="primary" |
| 184 | + className="w-full" |
| 185 | + onClick={handleAdd} |
| 186 | + disabled={busy} |
| 187 | + data-testid="add-base-dir-btn" |
| 188 | + > |
| 189 | + {busy ? ( |
| 190 | + <Loader2 className="mr-2 h-4 w-4 animate-spin" /> |
| 191 | + ) : ( |
| 192 | + <FolderPlus className="mr-2 h-4 w-4" /> |
| 193 | + )} |
| 194 | + Add folder… |
| 195 | + </Button> |
| 196 | + </div> |
| 197 | + </div> |
| 198 | + <ToastContainer toasts={toasts} onClose={dismiss} /> |
| 199 | + </div> |
| 200 | + ); |
| 201 | +} |
0 commit comments