create-interview-cockpit 0.1.1 → 0.3.0

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

@@ -2,6 +2,7 @@ import { useState, useEffect, useRef, Fragment } from "react";
 import { useStore } from "../store";
 import type { Question } from "../types";
 import FileAttachments from "./FileAttachments";
+import WorkspaceSwitcher from "./WorkspaceSwitcher";
 import {
   ChevronRight,
   ChevronDown,
@@ -11,6 +12,10 @@ import {
   X,
   Pencil,
   CornerDownRight,
+  FolderOpen,
+  Loader2,
+  ArrowLeft,
+  RefreshCw,
 } from "lucide-react";
 
 export default function Sidebar() {
@@ -31,6 +36,14 @@ export default function Sidebar() {
     fetchQuestions,
     uploadTopicFiles,
     removeTopicFile,
+    workspaces,
+    activeWorkspaceId,
+    driveRootFolders,
+    loadingDriveFolders,
+    fetchDriveRootFolders,
+    selectDriveSubfolder,
+    clearDriveSubfolder,
+    syncWorkspace,
   } = useStore();
 
   const [newTopicName, setNewTopicName] = useState("");
@@ -47,6 +60,54 @@ export default function Sidebar() {
   const [editingQuestionTitle, setEditingQuestionTitle] = useState("");
   const editInputRef = useRef<HTMLInputElement>(null);
 
+  // Drive subfolder navigator
+  const activeWs = workspaces.find((w) => w.id === activeWorkspaceId);
+  const isDriveWs =
+    activeWs?.type === "google_drive" && !!activeWs.driveConfig?.folderId;
+  const currentSubFolder = activeWs?.driveConfig?.subFolderId
+    ? {
+        id: activeWs.driveConfig.subFolderId,
+        name: activeWs.driveConfig.subFolderName ?? "",
+      }
+    : null;
+  const [navigating, setNavigating] = useState(false);
+  const [syncing, setSyncing] = useState(false);
+
+  // Load root folders whenever a Drive workspace becomes active with no subfolder selected
+  useEffect(() => {
+    if (isDriveWs && !currentSubFolder && driveRootFolders.length === 0) {
+      fetchDriveRootFolders(activeWorkspaceId!);
+    }
+  }, [activeWorkspaceId, isDriveWs]);
+
+  const handlePickFolder = async (folderId: string, folderName: string) => {
+    setNavigating(true);
+    try {
+      await selectDriveSubfolder(activeWorkspaceId!, folderId, folderName);
+    } finally {
+      setNavigating(false);
+    }
+  };
+
+  const handleBack = async () => {
+    setNavigating(true);
+    try {
+      await clearDriveSubfolder(activeWorkspaceId!);
+      fetchDriveRootFolders(activeWorkspaceId!);
+    } finally {
+      setNavigating(false);
+    }
+  };
+
+  const handleResync = async () => {
+    setSyncing(true);
+    try {
+      await syncWorkspace(activeWorkspaceId!);
+    } finally {
+      setSyncing(false);
+    }
+  };
+
   useEffect(() => {
     if (editingTopicId || editingQuestionId) {
       editInputRef.current?.select();
@@ -187,18 +248,68 @@ export default function Sidebar() {
 
   return (
     <aside className="w-72 border-r border-slate-800 flex flex-col bg-slate-900/50 shrink-0">
-      {/* Header */}
-      <div className="h-12 border-b border-slate-800 flex items-center justify-between px-3">
-        <span className="text-xs font-bold uppercase tracking-wider text-slate-500">
-          Topics
-        </span>
-        <button
-          onClick={() => setShowTopicInput(true)}
-          className="p-1 rounded hover:bg-slate-800 text-slate-500 hover:text-slate-300 transition-colors"
-          title="Add topic"
-        >
-          <Plus className="w-4 h-4" />
-        </button>
+      {/* Workspace switcher */}
+      <WorkspaceSwitcher />
+
+      {/* Header — Drive breadcrumb when inside a subfolder, else normal Topics header */}
+      <div className="h-12 border-b border-slate-800 flex items-center justify-between px-3 shrink-0">
+        {isDriveWs && currentSubFolder ? (
+          <>
+            <div className="flex items-center gap-1.5 min-w-0">
+              <button
+                onClick={handleBack}
+                disabled={navigating}
+                className="p-0.5 rounded text-slate-500 hover:text-cyan-400 transition-colors disabled:opacity-40"
+                title="Back to folder list"
+              >
+                <ArrowLeft className="w-3.5 h-3.5" />
+              </button>
+              <FolderOpen className="w-3.5 h-3.5 text-cyan-400 shrink-0" />
+              <span
+                className="text-xs font-semibold text-slate-300 truncate"
+                title={currentSubFolder.name}
+              >
+                {currentSubFolder.name}
+              </span>
+            </div>
+            <div className="flex items-center gap-1">
+              <button
+                onClick={handleResync}
+                disabled={syncing}
+                className="p-1 rounded text-slate-500 hover:text-cyan-400 transition-colors disabled:opacity-40"
+                title="Re-sync topics"
+              >
+                {syncing ? (
+                  <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                ) : (
+                  <RefreshCw className="w-3.5 h-3.5" />
+                )}
+              </button>
+              <button
+                onClick={() => setShowTopicInput(true)}
+                className="p-1 rounded hover:bg-slate-800 text-slate-500 hover:text-slate-300 transition-colors"
+                title="Add topic"
+              >
+                <Plus className="w-4 h-4" />
+              </button>
+            </div>
+          </>
+        ) : (
+          <>
+            <span className="text-xs font-bold uppercase tracking-wider text-slate-500">
+              Topics
+            </span>
+            {(!isDriveWs || currentSubFolder) && (
+              <button
+                onClick={() => setShowTopicInput(true)}
+                className="p-1 rounded hover:bg-slate-800 text-slate-500 hover:text-slate-300 transition-colors"
+                title="Add topic"
+              >
+                <Plus className="w-4 h-4" />
+              </button>
+            )}
+          </>
+        )}
       </div>
 
       {/* Add topic input */}
@@ -232,188 +343,237 @@ export default function Sidebar() {
         </div>
       )}
 
-      {/* Topic list */}
-      <div className="flex-1 overflow-y-auto">
-        {topics.length === 0 && (
-          <div className="p-4 text-center">
-            <p className="text-sm text-slate-600">No topics yet</p>
-            <p className="text-xs text-slate-700 mt-1">Click + to add one</p>
-          </div>
-        )}
+      {/* Drive subfolder navigator — shown when Drive workspace, no subfolder selected */}
+      {isDriveWs && !currentSubFolder ? (
+        <div className="flex-1 overflow-y-auto">
+          {loadingDriveFolders || navigating ? (
+            <div className="flex items-center justify-center gap-2 py-8 text-slate-500 text-xs">
+              <Loader2 className="w-4 h-4 animate-spin" />
+              Loading…
+            </div>
+          ) : driveRootFolders.length === 0 ? (
+            <div className="p-4 text-center">
+              <p className="text-sm text-slate-600">No folders found</p>
+              <p className="text-xs text-slate-700 mt-1">
+                Make sure the Drive folder has subfolders
+              </p>
+            </div>
+          ) : (
+            driveRootFolders.map((folder) => (
+              <button
+                key={folder.id}
+                onClick={() => handlePickFolder(folder.id, folder.name)}
+                className="w-full flex items-center gap-2.5 px-3 py-2.5 hover:bg-slate-800/60 transition-colors text-left group"
+              >
+                <FolderOpen className="w-4 h-4 text-cyan-400 shrink-0" />
+                <span className="text-sm text-slate-300 truncate flex-1">
+                  {folder.name}
+                </span>
+                <ChevronRight className="w-3.5 h-3.5 text-slate-600 group-hover:text-slate-400 shrink-0" />
+              </button>
+            ))
+          )}
+        </div>
+      ) : (
+        /* Topic list */
+        <div className="flex-1 overflow-y-auto">
+          {topics.length === 0 && (
+            <div className="p-4 text-center">
+              <p className="text-sm text-slate-600">No topics yet</p>
+              <p className="text-xs text-slate-700 mt-1">Click + to add one</p>
+            </div>
+          )}
 
-        {topics.map((topic) => {
-          const isExpanded = expandedTopics.includes(topic.id);
-          const questions = questionsByTopic[topic.id] || [];
+          {[...topics]
+            .sort((a, b) =>
+              a.name.localeCompare(b.name, undefined, {
+                numeric: true,
+                sensitivity: "base",
+              }),
+            )
+            .map((topic) => {
+              const isExpanded = expandedTopics.includes(topic.id);
+              const questions = questionsByTopic[topic.id] || [];
 
-          return (
-            <div key={topic.id}>
-              {/* Topic header */}
-              <div className="group flex items-center gap-1 px-2 py-1.5 hover:bg-slate-800/50 cursor-pointer">
-                <button
-                  onClick={() => toggleTopic(topic.id)}
-                  className="flex items-center gap-1 flex-1 min-w-0"
-                >
-                  {isExpanded ? (
-                    <ChevronDown className="w-3.5 h-3.5 text-slate-500 shrink-0" />
-                  ) : (
-                    <ChevronRight className="w-3.5 h-3.5 text-slate-500 shrink-0" />
-                  )}
-                  {editingTopicId === topic.id ? (
-                    <input
-                      ref={editInputRef}
-                      value={editingTopicName}
-                      onChange={(e) => setEditingTopicName(e.target.value)}
-                      onKeyDown={(e) => {
-                        if (e.key === "Enter") commitTopicRename(topic.id);
-                        if (e.key === "Escape") setEditingTopicId(null);
-                      }}
-                      onBlur={() => commitTopicRename(topic.id)}
-                      onClick={(e) => e.stopPropagation()}
-                      className="flex-1 min-w-0 bg-slate-700 border border-cyan-500 rounded px-1 py-0 text-sm text-slate-200 focus:outline-none"
-                    />
-                  ) : (
-                    <span
-                      className="text-sm font-medium text-slate-300 truncate"
-                      onDoubleClick={(e) => {
+              return (
+                <div key={topic.id}>
+                  {/* Topic header */}
+                  <div className="group flex items-center gap-1 px-2 py-1.5 hover:bg-slate-800/50 cursor-pointer">
+                    <button
+                      onClick={() => toggleTopic(topic.id)}
+                      className="flex items-center gap-1 flex-1 min-w-0"
+                    >
+                      {isExpanded ? (
+                        <ChevronDown className="w-3.5 h-3.5 text-slate-500 shrink-0" />
+                      ) : (
+                        <ChevronRight className="w-3.5 h-3.5 text-slate-500 shrink-0" />
+                      )}
+                      {editingTopicId === topic.id ? (
+                        <input
+                          ref={editInputRef}
+                          value={editingTopicName}
+                          onChange={(e) => setEditingTopicName(e.target.value)}
+                          onKeyDown={(e) => {
+                            if (e.key === "Enter") commitTopicRename(topic.id);
+                            if (e.key === "Escape") setEditingTopicId(null);
+                          }}
+                          onBlur={() => commitTopicRename(topic.id)}
+                          onClick={(e) => e.stopPropagation()}
+                          className="flex-1 min-w-0 bg-slate-700 border border-cyan-500 rounded px-1 py-0 text-sm text-slate-200 focus:outline-none"
+                        />
+                      ) : (
+                        <span
+                          className="text-sm font-medium text-slate-300 truncate"
+                          onDoubleClick={(e) => {
+                            e.stopPropagation();
+                            setEditingTopicId(topic.id);
+                            setEditingTopicName(topic.name);
+                          }}
+                        >
+                          {topic.name}
+                        </span>
+                      )}
+                      <span className="text-xs text-slate-600 ml-auto shrink-0">
+                        {questions.length}
+                      </span>
+                    </button>
+                    {editingTopicId !== topic.id && (
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setEditingTopicId(topic.id);
+                          setEditingTopicName(topic.name);
+                        }}
+                        className="p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-600 hover:text-cyan-400 transition-all"
+                        title="Rename"
+                      >
+                        <Pencil className="w-3 h-3" />
+                      </button>
+                    )}
+                    <button
+                      onClick={(e) => {
                         e.stopPropagation();
-                        setEditingTopicId(topic.id);
-                        setEditingTopicName(topic.name);
+                        if (
+                          confirm(
+                            `Delete topic "${topic.name}" and all its questions?`,
+                          )
+                        ) {
+                          removeTopic(topic.id);
+                        }
                       }}
+                      className="p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-600 hover:text-red-400 transition-all"
                     >
-                      {topic.name}
-                    </span>
-                  )}
-                  <span className="text-xs text-slate-600 ml-auto shrink-0">
-                    {questions.length}
-                  </span>
-                </button>
-                {editingTopicId !== topic.id && (
-                  <button
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setEditingTopicId(topic.id);
-                      setEditingTopicName(topic.name);
-                    }}
-                    className="p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-600 hover:text-cyan-400 transition-all"
-                    title="Rename"
-                  >
-                    <Pencil className="w-3 h-3" />
-                  </button>
-                )}
-                <button
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    if (
-                      confirm(
-                        `Delete topic "${topic.name}" and all its questions?`,
-                      )
-                    ) {
-                      removeTopic(topic.id);
-                    }
-                  }}
-                  className="p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-600 hover:text-red-400 transition-all"
-                >
-                  <Trash2 className="w-3 h-3" />
-                </button>
-              </div>
-
-              {/* Questions list */}
-              {isExpanded && (
-                <div className="ml-3 border-l border-slate-800">
-                  {/* Topic-level file attachments */}
-                  <div className="pl-3 pr-2 py-1.5 border-b border-slate-800/50">
-                    <FileAttachments
-                      files={topic.contextFiles || []}
-                      onUpload={(files) => uploadTopicFiles(topic.id, files)}
-                      onRemove={(fileId) => removeTopicFile(topic.id, fileId)}
-                      label="topic"
-                      compact
-                    />
+                      <Trash2 className="w-3 h-3" />
+                    </button>
                   </div>
 
-                  {/* Questions grouped: root → children */}
-                  {(() => {
-                    const rootQs = questions.filter((q) => !q.parentQuestionId);
-                    return rootQs.map((q) => {
-                      const children = questions.filter(
-                        (c) => c.parentQuestionId === q.id,
-                      );
-                      return (
-                        <Fragment key={q.id}>
-                          {renderQuestionRow(q, topic.id, false)}
-                          {/* Add-child input */}
-                          {addingChildTo === q.id && (
-                            <div className="pl-7 pr-2 py-1 animate-fadeIn">
-                              <input
-                                autoFocus
-                                value={newChildTitle}
-                                onChange={(e) =>
-                                  setNewChildTitle(e.target.value)
-                                }
-                                onKeyDown={(e) => {
-                                  if (e.key === "Enter")
-                                    handleAddChildQuestion(topic.id, q.id);
-                                  if (e.key === "Escape") {
-                                    setAddingChildTo(null);
-                                    setNewChildTitle("");
-                                  }
-                                }}
-                                onBlur={() => {
-                                  if (!newChildTitle.trim())
-                                    setAddingChildTo(null);
-                                }}
-                                placeholder="Child question title..."
-                                className="w-full bg-slate-800 border border-slate-700 rounded px-2 py-0.5 text-xs text-slate-300 placeholder-slate-600 focus:outline-none focus:border-cyan-500"
-                              />
-                            </div>
-                          )}
-                          {/* Children */}
-                          {children.map((c) =>
-                            renderQuestionRow(c, topic.id, true),
-                          )}
-                        </Fragment>
-                      );
-                    });
-                  })()}
-
-                  {/* Add question input */}
-                  {addingQuestionTo === topic.id ? (
-                    <div className="pl-3 pr-2 py-1 animate-fadeIn">
-                      <input
-                        autoFocus
-                        value={newQuestionTitle}
-                        onChange={(e) => setNewQuestionTitle(e.target.value)}
-                        onKeyDown={(e) => {
-                          if (e.key === "Enter") handleAddQuestion(topic.id);
-                          if (e.key === "Escape") {
-                            setAddingQuestionTo(null);
-                            setNewQuestionTitle("");
+                  {/* Questions list */}
+                  {isExpanded && (
+                    <div className="ml-3 border-l border-slate-800">
+                      {/* Topic-level file attachments */}
+                      <div className="pl-3 pr-2 py-1.5 border-b border-slate-800/50">
+                        <FileAttachments
+                          files={topic.contextFiles || []}
+                          onUpload={(files) =>
+                            uploadTopicFiles(topic.id, files)
                           }
-                        }}
-                        onBlur={() => {
-                          if (!newQuestionTitle.trim()) {
-                            setAddingQuestionTo(null);
+                          onRemove={(fileId) =>
+                            removeTopicFile(topic.id, fileId)
                           }
-                        }}
-                        placeholder="Question title..."
-                        className="w-full bg-slate-800 border border-slate-700 rounded px-2 py-0.5 text-xs text-slate-300 placeholder-slate-600 focus:outline-none focus:border-cyan-500"
-                      />
+                          label="topic"
+                          compact
+                        />
+                      </div>
+
+                      {/* Questions grouped: root → children */}
+                      {(() => {
+                        const rootQs = questions.filter(
+                          (q) => !q.parentQuestionId,
+                        );
+                        return rootQs.map((q) => {
+                          const children = questions.filter(
+                            (c) => c.parentQuestionId === q.id,
+                          );
+                          return (
+                            <Fragment key={q.id}>
+                              {renderQuestionRow(q, topic.id, false)}
+                              {/* Add-child input */}
+                              {addingChildTo === q.id && (
+                                <div className="pl-7 pr-2 py-1 animate-fadeIn">
+                                  <input
+                                    autoFocus
+                                    value={newChildTitle}
+                                    onChange={(e) =>
+                                      setNewChildTitle(e.target.value)
+                                    }
+                                    onKeyDown={(e) => {
+                                      if (e.key === "Enter")
+                                        handleAddChildQuestion(topic.id, q.id);
+                                      if (e.key === "Escape") {
+                                        setAddingChildTo(null);
+                                        setNewChildTitle("");
+                                      }
+                                    }}
+                                    onBlur={() => {
+                                      if (!newChildTitle.trim())
+                                        setAddingChildTo(null);
+                                    }}
+                                    placeholder="Child question title..."
+                                    className="w-full bg-slate-800 border border-slate-700 rounded px-2 py-0.5 text-xs text-slate-300 placeholder-slate-600 focus:outline-none focus:border-cyan-500"
+                                  />
+                                </div>
+                              )}
+                              {/* Children */}
+                              {children.map((c) =>
+                                renderQuestionRow(c, topic.id, true),
+                              )}
+                            </Fragment>
+                          );
+                        });
+                      })()}
+
+                      {/* Add question input */}
+                      {addingQuestionTo === topic.id ? (
+                        <div className="pl-3 pr-2 py-1 animate-fadeIn">
+                          <input
+                            autoFocus
+                            value={newQuestionTitle}
+                            onChange={(e) =>
+                              setNewQuestionTitle(e.target.value)
+                            }
+                            onKeyDown={(e) => {
+                              if (e.key === "Enter")
+                                handleAddQuestion(topic.id);
+                              if (e.key === "Escape") {
+                                setAddingQuestionTo(null);
+                                setNewQuestionTitle("");
+                              }
+                            }}
+                            onBlur={() => {
+                              if (!newQuestionTitle.trim()) {
+                                setAddingQuestionTo(null);
+                              }
+                            }}
+                            placeholder="Question title..."
+                            className="w-full bg-slate-800 border border-slate-700 rounded px-2 py-0.5 text-xs text-slate-300 placeholder-slate-600 focus:outline-none focus:border-cyan-500"
+                          />
+                        </div>
+                      ) : (
+                        <button
+                          onClick={() => setAddingQuestionTo(topic.id)}
+                          className="flex items-center gap-1 pl-3 pr-2 py-1 text-xs text-slate-600 hover:text-cyan-400 transition-colors w-full"
+                        >
+                          <Plus className="w-3 h-3" />
+                          Add question
+                        </button>
+                      )}
                     </div>
-                  ) : (
-                    <button
-                      onClick={() => setAddingQuestionTo(topic.id)}
-                      className="flex items-center gap-1 pl-3 pr-2 py-1 text-xs text-slate-600 hover:text-cyan-400 transition-colors w-full"
-                    >
-                      <Plus className="w-3 h-3" />
-                      Add question
-                    </button>
                   )}
                 </div>
-              )}
-            </div>
-          );
-        })}
-      </div>
+              );
+            })}
+        </div>
+      )}
     </aside>
   );
 }