create-interview-cockpit 0.1.1 → 0.2.0

package/template/client/src/components/WorkspaceSwitcher.tsx

@@ -0,0 +1,891 @@
+import { useState, useRef, useEffect } from "react";
+import {
+  ChevronDown,
+  Plus,
+  Check,
+  Trash2,
+  Pencil,
+  RefreshCw,
+  FolderOpen,
+  HardDrive,
+  Cloud,
+  X,
+  Link,
+  Upload,
+  Loader2,
+} from "lucide-react";
+import { useStore } from "../store";
+import type { WorkspaceMeta } from "../types";
+
+// ── Workspace Switcher ─────────────────────────────────────────────────────────
+
+export default function WorkspaceSwitcher() {
+  const {
+    workspaces,
+    activeWorkspaceId,
+    activateWorkspace,
+    createWorkspace,
+    deleteWorkspace,
+    renameWorkspace,
+    syncWorkspace,
+    linkDriveFolder,
+    attachDriveFolder,
+    exportWorkspace,
+    fetchDriveSubfolders,
+    createDriveSubfolder,
+  } = useStore();
+
+  const [open, setOpen] = useState(false);
+  const [showNewForm, setShowNewForm] = useState(false);
+  const [newName, setNewName] = useState("");
+  const [newType, setNewType] = useState<"local" | "google_drive">("local");
+  const [creating, setCreating] = useState(false);
+
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editingName, setEditingName] = useState("");
+
+  const [syncing, setSyncing] = useState<string | null>(null);
+  const [syncResult, setSyncResult] = useState<{
+    topicsUpserted: number;
+    filesImported: number;
+    filesSkipped: number;
+    errors: string[];
+  } | null>(null);
+
+  // Per-workspace URL input state for Drive linking
+  const [driveUrls, setDriveUrls] = useState<Record<string, string>>({});
+  const [linking, setLinking] = useState<string | null>(null);
+  const [attaching, setAttaching] = useState<string | null>(null);
+  // When set, show the URL paste form even if driveConfig is already linked
+  const [changingDriveId, setChangingDriveId] = useState<string | null>(null);
+  // Local workspaces where user clicked "Connect Drive"
+  const [showDriveAttach, setShowDriveAttach] = useState<
+    Record<string, boolean>
+  >({});
+
+  const [exporting, setExporting] = useState<string | null>(null);
+  const [exportResult, setExportResult] = useState<{
+    topicsExported: number;
+    questionsExported: number;
+    filesExported: number;
+    errors: string[];
+  } | null>(null);
+  const [exportAuthedToast, setExportAuthedToast] = useState(() =>
+    new URLSearchParams(window.location.search).has("export_authed"),
+  );
+
+  // Subfolder picker state (export destination)
+  const [folderPicker, setFolderPicker] = useState<{
+    ws: WorkspaceMeta;
+    folders: { id: string; name: string }[];
+    loading: boolean;
+  } | null>(null);
+  const [newFolderName, setNewFolderName] = useState("");
+  const [creatingFolder, setCreatingFolder] = useState(false);
+
+  // Delete confirmation modal
+  const [deleteTarget, setDeleteTarget] = useState<WorkspaceMeta | null>(null);
+  const [deleting, setDeleting] = useState(false);
+
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(e.target as Node)
+      ) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, []);
+
+  // Auto-open folder picker when returning from Drive OAuth
+  // (removed — now using URL paste flow)
+
+  const activeWs = workspaces.find((w) => w.id === activeWorkspaceId);
+
+  const handleCreate = async () => {
+    if (!newName.trim()) return;
+    setCreating(true);
+    try {
+      await createWorkspace(newName.trim(), newType);
+      setNewName("");
+      setNewType("local");
+      setShowNewForm(false);
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const handleActivate = async (ws: WorkspaceMeta) => {
+    if (ws.id === activeWorkspaceId) return;
+    setOpen(false);
+    await activateWorkspace(ws.id);
+  };
+
+  const handleDelete = async () => {
+    if (!deleteTarget) return;
+    setDeleting(true);
+    try {
+      await deleteWorkspace(deleteTarget.id);
+    } finally {
+      setDeleting(false);
+      setDeleteTarget(null);
+    }
+  };
+
+  const commitRename = async (id: string) => {
+    const trimmed = editingName.trim();
+    if (trimmed) await renameWorkspace(id, trimmed);
+    setEditingId(null);
+  };
+
+  const handleSync = async (ws: WorkspaceMeta, e: React.MouseEvent) => {
+    e.stopPropagation();
+    setSyncing(ws.id);
+    setSyncResult(null);
+    try {
+      const result = await syncWorkspace(ws.id);
+      setSyncResult(result);
+    } catch (err: any) {
+      setSyncResult({
+        topicsUpserted: 0,
+        filesImported: 0,
+        filesSkipped: 0,
+        errors: [err?.message || "Sync failed"],
+      });
+    } finally {
+      setSyncing(null);
+    }
+  };
+
+  const handleLinkDrive = async (ws: WorkspaceMeta, e: React.FormEvent) => {
+    e.preventDefault();
+    const url = driveUrls[ws.id]?.trim();
+    if (!url) return;
+    setLinking(ws.id);
+    setSyncResult(null);
+    try {
+      await linkDriveFolder(ws.id, url);
+      setDriveUrls((prev) => ({ ...prev, [ws.id]: "" }));
+      setChangingDriveId(null);
+    } catch (err: any) {
+      setSyncResult({
+        topicsUpserted: 0,
+        filesImported: 0,
+        filesSkipped: 0,
+        errors: [err?.message || "Failed to link folder"],
+      });
+    } finally {
+      setLinking(null);
+    }
+  };
+
+  const handleAttachDrive = async (ws: WorkspaceMeta, e: React.FormEvent) => {
+    e.preventDefault();
+    const url = driveUrls[ws.id]?.trim();
+    if (!url) return;
+    setAttaching(ws.id);
+    try {
+      await attachDriveFolder(ws.id, url);
+      setDriveUrls((prev) => ({ ...prev, [ws.id]: "" }));
+      setShowDriveAttach((prev) => ({ ...prev, [ws.id]: false }));
+      setChangingDriveId(null);
+    } catch (err: any) {
+      setSyncResult({
+        topicsUpserted: 0,
+        filesImported: 0,
+        filesSkipped: 0,
+        errors: [err?.message || "Failed to attach Drive folder"],
+      });
+    } finally {
+      setAttaching(null);
+    }
+  };
+
+  const handleExport = async (ws: WorkspaceMeta, e: React.MouseEvent) => {
+    e.stopPropagation();
+    setExportResult(null);
+
+    // If the workspace has subfolders, show the picker first
+    if (ws.driveConfig?.folderId) {
+      setFolderPicker({ ws, folders: [], loading: true });
+      try {
+        const folders = await fetchDriveSubfolders(ws.id);
+        setFolderPicker({ ws, folders, loading: false });
+      } catch {
+        setFolderPicker({ ws, folders: [], loading: false });
+      }
+      return;
+    }
+
+    await runExport(ws);
+  };
+
+  const runExport = async (ws: WorkspaceMeta, targetFolderId?: string) => {
+    setFolderPicker(null);
+    setExporting(ws.id);
+    try {
+      const result = await exportWorkspace(ws.id, targetFolderId);
+      if ("needsAuth" in result && result.needsAuth) {
+        window.location.href = result.authUrl;
+        return;
+      }
+      setExportResult(result);
+    } catch (err: any) {
+      setExportResult({
+        topicsExported: 0,
+        questionsExported: 0,
+        filesExported: 0,
+        errors: [err?.message || "Export failed"],
+      });
+    } finally {
+      setExporting(null);
+    }
+  };
+
+  const formatSyncTime = (iso: string) => {
+    const d = new Date(iso);
+    return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  };
+
+  return (
+    <>
+      {/* Delete workspace confirmation modal */}
+      {deleteTarget && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
+          onClick={() => !deleting && setDeleteTarget(null)}
+        >
+          <div
+            className="bg-slate-900 border border-slate-700 rounded-xl shadow-2xl w-80 p-5"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <h3 className="text-sm font-semibold text-slate-200 mb-1">
+              Delete workspace?
+            </h3>
+            <p className="text-xs text-slate-400 mb-4">
+              <span className="text-slate-200 font-medium">
+                &ldquo;{deleteTarget.name}&rdquo;
+              </span>{" "}
+              and all its topics, questions, and files will be permanently
+              deleted. This cannot be undone.
+            </p>
+            <div className="flex gap-2 justify-end">
+              <button
+                onClick={() => setDeleteTarget(null)}
+                disabled={deleting}
+                className="px-3 py-1.5 rounded-lg text-xs text-slate-400 hover:text-slate-200 disabled:opacity-40 transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleDelete}
+                disabled={deleting}
+                className="px-3 py-1.5 rounded-lg bg-red-700 hover:bg-red-600 disabled:opacity-40 text-xs text-white font-medium flex items-center gap-1.5 transition-colors"
+              >
+                {deleting ? (
+                  <Loader2 size={11} className="animate-spin" />
+                ) : (
+                  <Trash2 size={11} />
+                )}
+                Delete
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Subfolder picker modal (export destination) */}
+      {folderPicker && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
+          onClick={() => setFolderPicker(null)}
+        >
+          <div
+            className="bg-slate-900 border border-slate-700 rounded-xl shadow-2xl w-80 p-4"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex items-center justify-between mb-3">
+              <h3 className="text-sm font-semibold text-slate-200">
+                Export to subfolder
+              </h3>
+              <button
+                onClick={() => setFolderPicker(null)}
+                className="text-slate-500 hover:text-slate-300"
+              >
+                <X size={15} />
+              </button>
+            </div>
+            {folderPicker.loading ? (
+              <div className="flex items-center gap-2 text-slate-400 text-xs py-4 justify-center">
+                <Loader2 size={14} className="animate-spin" /> Loading folders…
+              </div>
+            ) : (
+              <>
+                <div className="space-y-1 max-h-48 overflow-y-auto">
+                  <button
+                    onClick={() => runExport(folderPicker.ws)}
+                    className="w-full text-left px-3 py-2 rounded-lg text-xs text-slate-300 hover:bg-slate-800 flex items-center gap-2"
+                  >
+                    <FolderOpen size={13} className="text-slate-500 shrink-0" />
+                    <span className="italic text-slate-400">
+                      Root (no subfolder)
+                    </span>
+                  </button>
+                  {folderPicker.folders.map((f) => (
+                    <button
+                      key={f.id}
+                      onClick={() => runExport(folderPicker.ws, f.id)}
+                      className="w-full text-left px-3 py-2 rounded-lg text-xs text-slate-200 hover:bg-slate-800 flex items-center gap-2"
+                    >
+                      <FolderOpen
+                        size={13}
+                        className="text-blue-400 shrink-0"
+                      />
+                      {f.name}
+                    </button>
+                  ))}
+                  {folderPicker.folders.length === 0 && (
+                    <p className="text-xs text-slate-500 px-3 py-2">
+                      No subfolders yet.
+                    </p>
+                  )}
+                </div>
+                {/* New folder form */}
+                <form
+                  className="mt-3 flex gap-2"
+                  onSubmit={async (e) => {
+                    e.preventDefault();
+                    const name = newFolderName.trim();
+                    if (!name) return;
+                    setCreatingFolder(true);
+                    try {
+                      const created = await createDriveSubfolder(
+                        folderPicker.ws.id,
+                        name,
+                      );
+                      setFolderPicker((p) =>
+                        p ? { ...p, folders: [...p.folders, created] } : p,
+                      );
+                      setNewFolderName("");
+                    } catch (err: any) {
+                      alert(err?.message || "Failed to create folder");
+                    } finally {
+                      setCreatingFolder(false);
+                    }
+                  }}
+                >
+                  <input
+                    value={newFolderName}
+                    onChange={(e) => setNewFolderName(e.target.value)}
+                    placeholder="New folder name…"
+                    className="flex-1 bg-slate-800 border border-slate-600 rounded-lg px-2 py-1.5 text-xs text-slate-200 placeholder-slate-500 focus:outline-none focus:border-blue-500"
+                  />
+                  <button
+                    type="submit"
+                    disabled={!newFolderName.trim() || creatingFolder}
+                    className="px-2.5 py-1.5 rounded-lg bg-blue-600 hover:bg-blue-500 disabled:opacity-40 text-xs text-white font-medium flex items-center gap-1"
+                  >
+                    {creatingFolder ? (
+                      <Loader2 size={11} className="animate-spin" />
+                    ) : (
+                      <Plus size={11} />
+                    )}
+                    Create
+                  </button>
+                </form>
+              </>
+            )}
+          </div>
+        </div>
+      )}
+      {/* Drive OAuth auth'd toast */}
+      {exportAuthedToast && (
+        <div className="fixed bottom-4 right-4 z-40 p-3 rounded-lg border bg-emerald-950 border-emerald-700 text-emerald-300 text-xs max-w-xs shadow-lg">
+          <div className="flex items-start justify-between gap-2">
+            <p className="font-medium">
+              Google Drive connected! Click Export again to upload.
+            </p>
+            <button
+              onClick={() => setExportAuthedToast(false)}
+              className="text-emerald-400 hover:text-emerald-200 shrink-0 mt-0.5"
+            >
+              <X size={14} />
+            </button>
+          </div>
+        </div>
+      )}
+      {/* Sync result toast */}
+      {syncResult && (
+        <div
+          className={`fixed bottom-4 right-4 z-40 p-3 rounded-lg border text-xs max-w-xs shadow-lg ${
+            syncResult.errors.length > 0
+              ? "bg-red-950 border-red-800 text-red-300"
+              : "bg-slate-800 border-slate-700 text-slate-300"
+          }`}
+        >
+          <div className="flex items-start justify-between gap-2">
+            <div>
+              {syncResult.errors.length === 0 ? (
+                <>
+                  <p className="font-medium text-slate-200">Sync complete</p>
+                  <p className="mt-0.5 text-slate-400">
+                    {syncResult.filesImported} imported ·{" "}
+                    {syncResult.topicsUpserted} topics ·{" "}
+                    {syncResult.filesSkipped} skipped
+                  </p>
+                </>
+              ) : (
+                <>
+                  <p className="font-medium">Sync errors</p>
+                  {syncResult.errors.slice(0, 3).map((e, i) => (
+                    <p key={i} className="mt-0.5 text-red-400 truncate">
+                      {e}
+                    </p>
+                  ))}
+                </>
+              )}
+            </div>
+            <button
+              onClick={() => setSyncResult(null)}
+              className="shrink-0 text-slate-500 hover:text-slate-300"
+            >
+              <X className="w-3.5 h-3.5" />
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Export result toast */}
+      {exportResult && (
+        <div
+          className={`fixed bottom-4 right-4 z-40 p-3 rounded-lg border text-xs w-72 shadow-lg ${
+            exportResult.errors.length > 0
+              ? "bg-red-950 border-red-800 text-red-300"
+              : "bg-slate-800 border-slate-700 text-slate-300"
+          }`}
+        >
+          <div className="flex items-start justify-between gap-2">
+            <div className="min-w-0 flex-1">
+              {exportResult.errors.length === 0 ? (
+                <>
+                  <p className="font-medium text-slate-200">Export complete</p>
+                  <p className="mt-0.5 text-slate-400">
+                    {exportResult.questionsExported} questions ·{" "}
+                    {exportResult.filesExported} files ·{" "}
+                    {exportResult.topicsExported} topics
+                  </p>
+                </>
+              ) : (
+                <>
+                  <p className="font-medium">Export errors</p>
+                  {exportResult.errors.slice(0, 3).map((e, i) => (
+                    <p key={i} className="mt-0.5 text-red-400 break-words">
+                      {e}
+                    </p>
+                  ))}
+                </>
+              )}
+            </div>
+            <button
+              onClick={() => setExportResult(null)}
+              className="shrink-0 text-slate-500 hover:text-slate-300"
+            >
+              <X className="w-3.5 h-3.5" />
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Switcher widget */}
+      <div ref={dropdownRef} className="relative">
+        <button
+          onClick={() => setOpen((v) => !v)}
+          className="w-full flex items-center gap-2 px-3 py-2 hover:bg-slate-800/60 transition-colors border-b border-slate-800"
+        >
+          {activeWs?.type === "google_drive" ? (
+            <Cloud className="w-3.5 h-3.5 text-cyan-400 shrink-0" />
+          ) : (
+            <HardDrive className="w-3.5 h-3.5 text-slate-500 shrink-0" />
+          )}
+          <span className="text-xs font-medium text-slate-300 truncate flex-1 text-left">
+            {activeWs?.name ?? "Workspace"}
+          </span>
+          {activeWs?.type === "google_drive" && (
+            <span className="text-[10px] text-cyan-500 bg-cyan-500/10 px-1.5 py-0.5 rounded shrink-0">
+              Drive
+            </span>
+          )}
+          <ChevronDown
+            className={`w-3 h-3 text-slate-500 shrink-0 transition-transform ${open ? "rotate-180" : ""}`}
+          />
+        </button>
+
+        {open && (
+          <div className="absolute top-full left-0 right-0 z-30 bg-slate-900 border border-slate-700 rounded-b-lg shadow-xl overflow-hidden">
+            {/* Workspace list */}
+            <div className="max-h-72 overflow-y-auto">
+              {workspaces.map((ws) => (
+                <div
+                  key={ws.id}
+                  onClick={() => handleActivate(ws)}
+                  className={`group px-3 py-2 cursor-pointer transition-colors ${
+                    ws.id === activeWorkspaceId
+                      ? "bg-cyan-500/10"
+                      : "hover:bg-slate-800/60"
+                  }`}
+                >
+                  {/* Name row */}
+                  <div className="flex items-center gap-2">
+                    {ws.type === "google_drive" ? (
+                      <Cloud className="w-3.5 h-3.5 text-cyan-400 shrink-0" />
+                    ) : (
+                      <HardDrive className="w-3.5 h-3.5 text-slate-500 shrink-0" />
+                    )}
+
+                    {editingId === ws.id ? (
+                      <input
+                        autoFocus
+                        value={editingName}
+                        onChange={(e) => setEditingName(e.target.value)}
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter") commitRename(ws.id);
+                          if (e.key === "Escape") setEditingId(null);
+                        }}
+                        onBlur={() => commitRename(ws.id)}
+                        onClick={(e) => e.stopPropagation()}
+                        className="flex-1 min-w-0 bg-slate-700 border border-cyan-500 rounded px-1 py-0 text-xs text-slate-200 focus:outline-none"
+                      />
+                    ) : (
+                      <span
+                        className="text-xs text-slate-300 truncate flex-1"
+                        onDoubleClick={(e) => {
+                          e.stopPropagation();
+                          setEditingId(ws.id);
+                          setEditingName(ws.name);
+                        }}
+                      >
+                        {ws.name}
+                      </span>
+                    )}
+
+                    {ws.id === activeWorkspaceId && (
+                      <Check className="w-3 h-3 text-cyan-400 shrink-0" />
+                    )}
+
+                    {/* Context actions (visible on hover) */}
+                    <span
+                      className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setEditingId(ws.id);
+                          setEditingName(ws.name);
+                        }}
+                        className="p-0.5 rounded text-slate-600 hover:text-cyan-400 transition-colors"
+                        title="Rename"
+                      >
+                        <Pencil className="w-2.5 h-2.5" />
+                      </button>
+                      {workspaces.length > 1 && (
+                        <button
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setDeleteTarget(ws);
+                          }}
+                          className="p-0.5 rounded text-slate-600 hover:text-red-400 transition-colors"
+                          title="Delete workspace"
+                        >
+                          <Trash2 className="w-2.5 h-2.5" />
+                        </button>
+                      )}
+                    </span>
+                  </div>
+
+                  {/* Drive row for google_drive workspaces */}
+                  {ws.type === "google_drive" && (
+                    <div
+                      className="mt-1 ml-5"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      {!ws.driveConfig?.folderId ||
+                      changingDriveId === ws.id ? (
+                        // No folder linked yet (or user clicked "Change") — URL paste form
+                        <form
+                          onSubmit={(e) => handleLinkDrive(ws, e)}
+                          className="flex items-center gap-1"
+                        >
+                          <input
+                            value={driveUrls[ws.id] ?? ""}
+                            onChange={(e) =>
+                              setDriveUrls((prev) => ({
+                                ...prev,
+                                [ws.id]: e.target.value,
+                              }))
+                            }
+                            placeholder="Paste Drive share link…"
+                            className="flex-1 min-w-0 bg-slate-800 border border-slate-700 rounded px-1.5 py-0.5 text-[10px] text-slate-300 placeholder-slate-600 focus:outline-none focus:border-cyan-600"
+                          />
+                          <button
+                            type="submit"
+                            disabled={
+                              linking === ws.id || !driveUrls[ws.id]?.trim()
+                            }
+                            className="flex items-center gap-0.5 text-[10px] text-cyan-500 hover:text-cyan-300 transition-colors disabled:opacity-40"
+                          >
+                            {linking === ws.id ? (
+                              <Loader2 className="w-2.5 h-2.5 animate-spin" />
+                            ) : (
+                              <Link className="w-2.5 h-2.5" />
+                            )}
+                            Link
+                          </button>
+                          {ws.driveConfig?.folderId && (
+                            <button
+                              type="button"
+                              onClick={() => setChangingDriveId(null)}
+                              className="text-[10px] text-slate-600 hover:text-slate-400 transition-colors"
+                            >
+                              Cancel
+                            </button>
+                          )}
+                        </form>
+                      ) : (
+                        // Folder linked — show name + sync/change/export actions
+                        <div className="flex items-center gap-2">
+                          <FolderOpen className="w-2.5 h-2.5 text-slate-500 shrink-0" />
+                          <span
+                            className="text-[10px] text-slate-400 truncate max-w-[110px]"
+                            title={ws.driveConfig.folderName}
+                          >
+                            {ws.driveConfig.folderName}
+                          </span>
+                          <button
+                            onClick={(e) => handleSync(ws, e)}
+                            disabled={syncing === ws.id}
+                            className="flex items-center gap-1 text-[10px] text-slate-500 hover:text-cyan-400 transition-colors disabled:opacity-50"
+                            title="Sync from Drive"
+                          >
+                            {syncing === ws.id ? (
+                              <Loader2 className="w-2.5 h-2.5 animate-spin" />
+                            ) : (
+                              <RefreshCw className="w-2.5 h-2.5" />
+                            )}
+                            {syncing === ws.id
+                              ? "Syncing…"
+                              : ws.driveConfig.lastSyncedAt
+                                ? `Synced ${formatSyncTime(ws.driveConfig.lastSyncedAt)}`
+                                : "Sync"}
+                          </button>
+                          <button
+                            onClick={() => setChangingDriveId(ws.id)}
+                            className="text-[10px] text-slate-600 hover:text-slate-400 transition-colors"
+                            title="Change linked folder"
+                          >
+                            Change
+                          </button>
+                          <button
+                            onClick={(e) => handleExport(ws, e)}
+                            disabled={exporting === ws.id}
+                            className="flex items-center gap-1 text-[10px] text-slate-500 hover:text-cyan-400 transition-colors disabled:opacity-50"
+                            title="Export topics/questions to Drive"
+                          >
+                            {exporting === ws.id ? (
+                              <Loader2 className="w-2.5 h-2.5 animate-spin" />
+                            ) : (
+                              <Upload className="w-2.5 h-2.5" />
+                            )}
+                            {exporting === ws.id ? "Exporting…" : "Export"}
+                          </button>
+                        </div>
+                      )}
+                    </div>
+                  )}
+
+                  {/* Drive row for local workspaces — attach-only, no sync */}
+                  {ws.type === "local" && (
+                    <div
+                      className="mt-1 ml-5"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      {ws.driveConfig?.folderId && changingDriveId !== ws.id ? (
+                        // Folder attached — show name + change + export
+                        <div className="flex items-center gap-2">
+                          <FolderOpen className="w-2.5 h-2.5 text-slate-500 shrink-0" />
+                          <span
+                            className="text-[10px] text-slate-400 truncate max-w-[110px]"
+                            title={ws.driveConfig.folderName}
+                          >
+                            {ws.driveConfig.folderName}
+                          </span>
+                          <button
+                            onClick={() => setChangingDriveId(ws.id)}
+                            className="text-[10px] text-slate-600 hover:text-slate-400 transition-colors"
+                            title="Change linked folder"
+                          >
+                            Change
+                          </button>
+                          <button
+                            onClick={(e) => handleExport(ws, e)}
+                            disabled={exporting === ws.id}
+                            className="flex items-center gap-1 text-[10px] text-slate-500 hover:text-cyan-400 transition-colors disabled:opacity-50"
+                            title="Push local content to Drive"
+                          >
+                            {exporting === ws.id ? (
+                              <Loader2 className="w-2.5 h-2.5 animate-spin" />
+                            ) : (
+                              <Upload className="w-2.5 h-2.5" />
+                            )}
+                            {exporting === ws.id ? "Pushing…" : "Push to Drive"}
+                          </button>
+                        </div>
+                      ) : showDriveAttach[ws.id] ||
+                        changingDriveId === ws.id ? (
+                        // URL paste form
+                        <form
+                          onSubmit={(e) => handleAttachDrive(ws, e)}
+                          className="flex items-center gap-1"
+                        >
+                          <input
+                            autoFocus
+                            value={driveUrls[ws.id] ?? ""}
+                            onChange={(e) =>
+                              setDriveUrls((prev) => ({
+                                ...prev,
+                                [ws.id]: e.target.value,
+                              }))
+                            }
+                            placeholder="Paste Drive share link…"
+                            className="flex-1 min-w-0 bg-slate-800 border border-slate-700 rounded px-1.5 py-0.5 text-[10px] text-slate-300 placeholder-slate-600 focus:outline-none focus:border-cyan-600"
+                          />
+                          <button
+                            type="submit"
+                            disabled={
+                              attaching === ws.id || !driveUrls[ws.id]?.trim()
+                            }
+                            className="flex items-center gap-0.5 text-[10px] text-cyan-500 hover:text-cyan-300 transition-colors disabled:opacity-40"
+                          >
+                            {attaching === ws.id ? (
+                              <Loader2 className="w-2.5 h-2.5 animate-spin" />
+                            ) : (
+                              <Link className="w-2.5 h-2.5" />
+                            )}
+                            Connect
+                          </button>
+                          <button
+                            type="button"
+                            onClick={() => {
+                              setShowDriveAttach((prev) => ({
+                                ...prev,
+                                [ws.id]: false,
+                              }));
+                              setChangingDriveId(null);
+                            }}
+                            className="text-[10px] text-slate-600 hover:text-slate-400 transition-colors"
+                          >
+                            Cancel
+                          </button>
+                        </form>
+                      ) : (
+                        // Default — small "Connect Drive" button
+                        <button
+                          onClick={() =>
+                            setShowDriveAttach((prev) => ({
+                              ...prev,
+                              [ws.id]: true,
+                            }))
+                          }
+                          className="flex items-center gap-1 text-[10px] text-slate-600 hover:text-cyan-400 transition-colors"
+                        >
+                          <Cloud className="w-2.5 h-2.5" />
+                          Connect Drive
+                        </button>
+                      )}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+
+            {/* New workspace */}
+            <div className="border-t border-slate-800">
+              {showNewForm ? (
+                <div className="p-2 space-y-1.5">
+                  <input
+                    autoFocus
+                    value={newName}
+                    onChange={(e) => setNewName(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter") handleCreate();
+                      if (e.key === "Escape") setShowNewForm(false);
+                    }}
+                    placeholder="Workspace name…"
+                    className="w-full bg-slate-800 border border-slate-700 rounded px-2 py-1 text-xs text-slate-200 placeholder-slate-500 focus:outline-none focus:border-cyan-500"
+                  />
+                  {/* Type selector */}
+                  <div className="flex gap-1">
+                    <button
+                      onClick={() => setNewType("local")}
+                      className={`flex-1 flex items-center justify-center gap-1 py-1 rounded text-[11px] border transition-colors ${
+                        newType === "local"
+                          ? "bg-slate-700 border-slate-600 text-slate-200"
+                          : "border-slate-800 text-slate-500 hover:text-slate-300"
+                      }`}
+                    >
+                      <HardDrive className="w-2.5 h-2.5" />
+                      Local
+                    </button>
+                    <button
+                      onClick={() => setNewType("google_drive")}
+                      className={`flex-1 flex items-center justify-center gap-1 py-1 rounded text-[11px] border transition-colors ${
+                        newType === "google_drive"
+                          ? "bg-cyan-500/20 border-cyan-600 text-cyan-300"
+                          : "border-slate-800 text-slate-500 hover:text-slate-300"
+                      }`}
+                    >
+                      <Cloud className="w-2.5 h-2.5" />
+                      Drive
+                    </button>
+                  </div>
+                  <div className="flex gap-1">
+                    <button
+                      onClick={handleCreate}
+                      disabled={!newName.trim() || creating}
+                      className="flex-1 py-1 bg-cyan-600 hover:bg-cyan-500 disabled:opacity-50 text-white text-xs rounded transition-colors"
+                    >
+                      {creating ? "Creating…" : "Create"}
+                    </button>
+                    <button
+                      onClick={() => setShowNewForm(false)}
+                      className="px-2 py-1 text-slate-500 hover:text-slate-300 transition-colors"
+                    >
+                      <X className="w-3 h-3" />
+                    </button>
+                  </div>
+                </div>
+              ) : (
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setShowNewForm(true);
+                  }}
+                  className="w-full flex items-center gap-1.5 px-3 py-2 text-xs text-slate-500 hover:text-slate-300 hover:bg-slate-800/40 transition-colors"
+                >
+                  <Plus className="w-3.5 h-3.5" />
+                  New workspace
+                </button>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}