fix(spaces): clearer base-directories UX (#180)

Signed-off-by: Mohammod Al Amin Ashik <maa.ashik00@gmail.com>

Author: its-mash

apps/desktop/src/features/spaces/SpaceBaseDirsModal.tsx

@@ -14,10 +14,9 @@ import {
  * Manage a Space's base directories.
  *
  * A base dir scopes any workspace root opened at or under it to this Space:
- * an unmapped folder there falls back to this Space's Starter set, and the
- * self-optimize meta-tools + mapping popup restrict to this Space. Longest
- * match wins when base dirs nest across Spaces, and a folder can belong to
- * only one Space.
+ * an unmapped folder there uses this Space's tools, and self-optimize stays
+ * in this Space. Longest match wins when base dirs nest, and a folder can
+ * belong to only one Space.
  */
 export function SpaceBaseDirsModal({
   space,
@@ -29,7 +28,7 @@ export function SpaceBaseDirsModal({
   const [dirs, setDirs] = useState<SpaceBaseDir[]>([]);
   const [loading, setLoading] = useState(false);
   const [busy, setBusy] = useState(false);
-  const { toasts, success, error: showError, dismiss } = useToast();
+  const { toasts, error: showError, dismiss } = useToast();
 
   const spaceId = space?.id ?? null;
 
@@ -66,26 +65,18 @@ export function SpaceBaseDirsModal({
       return;
     }
     const paths = Array.isArray(picked) ? picked : picked ? [picked] : [];
-    if (paths.length === 0) return;
+    if (paths.length === 0) return; // cancelled — nothing added
 
     setBusy(true);
-    let added = 0;
     for (const p of paths) {
       try {
         await addSpaceBaseDir(spaceId, p);
-        added++;
       } catch (e) {
         showError('Could not add folder', e instanceof Error ? e.message : String(e));
       }
     }
     await load();
     setBusy(false);
-    if (added > 0) {
-      success(
-        added === 1 ? 'Base directory added' : `${added} base directories added`,
-        'Folders here are now scoped to this space.'
-      );
-    }
   };
 
   const handleRemove = async (dir: SpaceBaseDir) => {
@@ -109,10 +100,11 @@ export function SpaceBaseDirsModal({
       onClick={onClose}
     >
       <div
-        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"
+        className="flex max-h-[80vh] w-full max-w-lg flex-col rounded-2xl border border-[rgb(var(--border))] bg-[rgb(var(--background))] shadow-2xl"
         onClick={(e) => e.stopPropagation()}
         data-testid="space-base-dirs-modal"
       >
+        {/* Header */}
         <div className="flex items-start justify-between border-b border-[rgb(var(--border-subtle))] p-5">
           <div className="flex items-center gap-3">
             <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">
@@ -121,77 +113,95 @@ export function SpaceBaseDirsModal({
             <div>
               <h2 className="text-lg font-semibold">Base directories</h2>
               <p className="text-xs text-[rgb(var(--muted))]">
-                Folders scoped to <span className="font-medium">{space.name}</span>
+                Scoped to <span className="font-medium">{space.name}</span>
               </p>
             </div>
           </div>
           <button
             onClick={onClose}
             className="rounded-lg p-1.5 text-[rgb(var(--muted))] transition-colors hover:bg-[rgb(var(--surface))] hover:text-[rgb(var(--foreground))]"
             aria-label="Close"
+            data-testid="space-base-dirs-close"
           >
             <X className="h-5 w-5" />
           </button>
         </div>
 
+        {/* Body */}
         <div className="min-h-0 flex-1 overflow-y-auto p-5">
           <p className="mb-4 text-sm text-[rgb(var(--muted))]">
-            Any folder you open here (or under it) is scoped to this space — it uses this
-            space&apos;s tools by default, and self-optimize only sees this space. The most specific
-            base directory wins, and a folder can belong to only one space.
+            Folders you open here (or under them) are scoped to this space.
           </p>
 
           {loading ? (
-            <div className="flex items-center justify-center py-10 text-[rgb(var(--muted))]">
+            <div className="flex items-center justify-center py-8 text-[rgb(var(--muted))]">
               <Loader2 className="h-5 w-5 animate-spin" />
             </div>
-          ) : dirs.length === 0 ? (
-            <div className="rounded-xl border border-dashed border-[rgb(var(--border))] px-4 py-8 text-center text-sm text-[rgb(var(--muted))]">
-              No base directories yet. Add one to scope its folders to this space.
-            </div>
           ) : (
-            <ul className="space-y-2" data-testid="space-base-dirs-list">
-              {dirs.map((dir) => (
-                <li
-                  key={dir.id}
-                  className="flex items-center gap-3 rounded-xl border border-[rgb(var(--border-subtle))] bg-[rgb(var(--surface))] px-3 py-2.5"
-                >
-                  <FolderOpen className="text-primary-500 h-4 w-4 flex-shrink-0" />
-                  <span
-                    className="min-w-0 flex-1 truncate font-mono text-xs text-[rgb(var(--foreground))]"
-                    title={dir.path}
-                  >
-                    {dir.path}
-                  </span>
-                  <button
-                    onClick={() => handleRemove(dir)}
-                    disabled={busy}
-                    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"
-                    title="Remove base directory"
-                    data-testid={`remove-base-dir-${dir.id}`}
-                  >
-                    <Trash2 className="h-4 w-4" />
-                  </button>
-                </li>
-              ))}
-            </ul>
+            <>
+              {dirs.length > 0 && (
+                <ul className="mb-3 space-y-2" data-testid="space-base-dirs-list">
+                  {dirs.map((dir) => (
+                    <li
+                      key={dir.id}
+                      className="flex items-center gap-3 rounded-xl border border-[rgb(var(--border-subtle))] bg-[rgb(var(--surface))] px-3 py-2.5"
+                    >
+                      <FolderOpen className="text-primary-500 h-4 w-4 flex-shrink-0" />
+                      <span
+                        className="min-w-0 flex-1 truncate font-mono text-xs text-[rgb(var(--foreground))]"
+                        title={dir.path}
+                      >
+                        {dir.path}
+                      </span>
+                      <button
+                        onClick={() => handleRemove(dir)}
+                        disabled={busy}
+                        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"
+                        title="Remove this folder"
+                        aria-label={`Remove ${dir.path}`}
+                        data-testid={`remove-base-dir-${dir.id}`}
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+              )}
+
+              {/* Add row — a clearly optional action, not the only way out. */}
+              <button
+                type="button"
+                onClick={handleAdd}
+                disabled={busy}
+                className="hover:border-primary-400 hover:text-primary-600 dark:hover:text-primary-400 flex w-full items-center justify-center gap-2 rounded-xl border border-dashed border-[rgb(var(--border))] px-3 py-3 text-sm font-medium text-[rgb(var(--muted))] transition-colors disabled:opacity-50"
+                data-testid="add-base-dir-btn"
+              >
+                {busy ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <FolderPlus className="h-4 w-4" />
+                )}
+                Add folder…
+              </button>
+
+              {dirs.length === 0 && !busy && (
+                <p className="mt-3 text-center text-xs text-[rgb(var(--muted))]">
+                  No base directories yet.
+                </p>
+              )}
+            </>
           )}
         </div>
 
-        <div className="border-t border-[rgb(var(--border-subtle))] p-5">
+        {/* Footer — close without adding. */}
+        <div className="flex justify-end border-t border-[rgb(var(--border-subtle))] p-4">
           <Button
             variant="primary"
-            className="w-full"
-            onClick={handleAdd}
-            disabled={busy}
-            data-testid="add-base-dir-btn"
+            onClick={onClose}
+            className="px-6"
+            data-testid="space-base-dirs-done"
           >
-            {busy ? (
-              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-            ) : (
-              <FolderPlus className="mr-2 h-4 w-4" />
-            )}
-            Add folder…
+            Done
           </Button>
         </div>
       </div>

apps/desktop/src/features/spaces/SpacesPage.tsx

@@ -157,21 +157,21 @@ export function SpacesPage() {
                           <div className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg border border-[rgb(var(--border-subtle))] bg-[rgb(var(--surface))] text-xl">
                             {space.icon || '🌐'}
                           </div>
-                          <div className="min-w-0 flex-1">
-                            <h3 className="truncate text-base font-semibold">{space.name}</h3>
+                          <button
+                            type="button"
+                            onClick={() => setBaseDirsSpace(space)}
+                            className="group min-w-0 flex-1 text-left"
+                            title="Manage base directories for this space"
+                            data-testid={`space-open-${space.id}`}
+                          >
+                            <h3 className="group-hover:text-primary-600 dark:group-hover:text-primary-400 truncate text-base font-semibold transition-colors">
+                              {space.name}
+                            </h3>
                             <p className="line-clamp-1 text-sm text-[rgb(var(--muted))]">
                               {space.description || 'No description'}
                             </p>
-                          </div>
+                          </button>
                           <div className="flex flex-shrink-0 items-center gap-1">
-                            <button
-                              onClick={() => setBaseDirsSpace(space)}
-                              className="rounded-lg p-1.5 text-[rgb(var(--muted))] transition-colors hover:bg-[rgb(var(--surface))] hover:text-[rgb(var(--foreground))]"
-                              title="Base directories — scope folders to this space"
-                              data-testid={`space-base-dirs-${space.id}`}
-                            >
-                              <FolderTree className="h-4 w-4" />
-                            </button>
                             {space.is_default && (
                               <span
                                 className="inline-flex items-center gap-1 rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"
@@ -193,6 +193,16 @@ export function SpacesPage() {
                             )}
                           </div>
                         </div>
+
+                        <button
+                          type="button"
+                          onClick={() => setBaseDirsSpace(space)}
+                          className="hover:text-primary-600 dark:hover:text-primary-400 inline-flex items-center gap-1.5 text-xs text-[rgb(var(--muted))] transition-colors"
+                          data-testid={`space-base-dirs-${space.id}`}
+                        >
+                          <FolderTree className="h-3.5 w-3.5" />
+                          Base directories
+                        </button>
                       </CardContent>
                     </Card>
                   );

tests/ts/components/SpaceBaseDirsModal.test.tsx

@@ -0,0 +1,91 @@
+/**
+ * Spaces — "Base directories" modal.
+ *
+ * The modal must show the space's existing base dirs, let you remove one
+ * easily, add a folder as a clearly-optional action, and close via "Done"
+ * without being forced to add anything.
+ *
+ * `@mcpmux/ui` is aliased to the real source in vitest.config, so the real
+ * Button / toast render.
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+const { listMock, addMock, removeMock } = vi.hoisted(() => ({
+  listMock: vi.fn(),
+  addMock: vi.fn(),
+  removeMock: vi.fn(),
+}));
+
+vi.mock('@/lib/api/spaces', () => ({
+  listSpaceBaseDirs: listMock,
+  addSpaceBaseDir: addMock,
+  removeSpaceBaseDir: removeMock,
+}));
+
+import { SpaceBaseDirsModal } from '@/features/spaces/SpaceBaseDirsModal';
+
+const SPACE = {
+  id: 's1',
+  name: 'Work',
+  icon: '💼',
+  description: null,
+  is_default: false,
+  sort_order: 0,
+  created_at: '',
+  updated_at: '',
+};
+
+function dir(id: string, path: string) {
+  return { id, space_id: 's1', path, created_at: '' };
+}
+
+describe('SpaceBaseDirsModal', () => {
+  beforeEach(() => {
+    listMock.mockReset();
+    addMock.mockReset();
+    removeMock.mockReset();
+  });
+
+  it('lists the space’s existing base directories', async () => {
+    listMock.mockResolvedValue([dir('d1', '/work/a'), dir('d2', '/work/b')]);
+    render(<SpaceBaseDirsModal space={SPACE} onClose={() => {}} />);
+
+    expect(await screen.findByText('/work/a')).toBeTruthy();
+    expect(screen.getByText('/work/b')).toBeTruthy();
+  });
+
+  it('removes a directory with one click', async () => {
+    const user = userEvent.setup();
+    removeMock.mockResolvedValue(undefined);
+    listMock.mockResolvedValue([dir('d1', '/work/a')]);
+    render(<SpaceBaseDirsModal space={SPACE} onClose={() => {}} />);
+
+    await screen.findByText('/work/a');
+    await user.click(screen.getByTestId('remove-base-dir-d1'));
+
+    await waitFor(() => expect(removeMock).toHaveBeenCalledWith('d1'));
+    await waitFor(() => expect(screen.queryByText('/work/a')).toBeNull());
+  });
+
+  it('closes via "Done" without adding anything', async () => {
+    const user = userEvent.setup();
+    const onClose = vi.fn();
+    listMock.mockResolvedValue([]);
+    render(<SpaceBaseDirsModal space={SPACE} onClose={onClose} />);
+
+    await screen.findByTestId('add-base-dir-btn'); // loaded (empty)
+    await user.click(screen.getByTestId('space-base-dirs-done'));
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+    expect(addMock).not.toHaveBeenCalled();
+  });
+
+  it('renders nothing when no space is selected', () => {
+    const { container } = render(<SpaceBaseDirsModal space={null} onClose={() => {}} />);
+    expect(container).toBeEmptyDOMElement();
+    expect(listMock).not.toHaveBeenCalled();
+  });
+});