create-interview-cockpit 0.1.0

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

@@ -0,0 +1,419 @@
+import { useState, useEffect, useRef, Fragment } from "react";
+import { useStore } from "../store";
+import type { Question } from "../types";
+import FileAttachments from "./FileAttachments";
+import {
+  ChevronRight,
+  ChevronDown,
+  Plus,
+  Trash2,
+  MessageSquare,
+  X,
+  Pencil,
+  CornerDownRight,
+} from "lucide-react";
+
+export default function Sidebar() {
+  const {
+    topics,
+    questionsByTopic,
+    expandedTopics,
+    selectedQuestionId,
+    toggleTopic,
+    addTopic,
+    removeTopic,
+    renameTopic,
+    addQuestion,
+    addChildQuestion,
+    removeQuestion,
+    renameQuestion,
+    selectQuestion,
+    fetchQuestions,
+    uploadTopicFiles,
+    removeTopicFile,
+  } = useStore();
+
+  const [newTopicName, setNewTopicName] = useState("");
+  const [showTopicInput, setShowTopicInput] = useState(false);
+  const [newQuestionTitle, setNewQuestionTitle] = useState("");
+  const [addingQuestionTo, setAddingQuestionTo] = useState<string | null>(null);
+  const [addingChildTo, setAddingChildTo] = useState<string | null>(null);
+  const [newChildTitle, setNewChildTitle] = useState("");
+  const [editingTopicId, setEditingTopicId] = useState<string | null>(null);
+  const [editingTopicName, setEditingTopicName] = useState("");
+  const [editingQuestionId, setEditingQuestionId] = useState<string | null>(
+    null,
+  );
+  const [editingQuestionTitle, setEditingQuestionTitle] = useState("");
+  const editInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (editingTopicId || editingQuestionId) {
+      editInputRef.current?.select();
+    }
+  }, [editingTopicId, editingQuestionId]);
+
+  const commitTopicRename = async (id: string) => {
+    const trimmed = editingTopicName.trim();
+    if (trimmed) await renameTopic(id, trimmed);
+    setEditingTopicId(null);
+  };
+
+  const commitQuestionRename = async (questionId: string, topicId: string) => {
+    const trimmed = editingQuestionTitle.trim();
+    if (trimmed) await renameQuestion(questionId, topicId, trimmed);
+    setEditingQuestionId(null);
+  };
+
+  useEffect(() => {
+    topics.forEach((t) => {
+      if (!questionsByTopic[t.id]) fetchQuestions(t.id);
+    });
+  }, [topics]);
+
+  const handleAddTopic = async () => {
+    if (!newTopicName.trim()) return;
+    await addTopic(newTopicName.trim());
+    setNewTopicName("");
+    setShowTopicInput(false);
+  };
+
+  const handleAddQuestion = async (topicId: string) => {
+    if (!newQuestionTitle.trim()) return;
+    await addQuestion(topicId, newQuestionTitle.trim());
+    setNewQuestionTitle("");
+    setAddingQuestionTo(null);
+  };
+
+  const handleAddChildQuestion = async (
+    topicId: string,
+    parentQuestionId: string,
+  ) => {
+    if (!newChildTitle.trim()) return;
+    await addChildQuestion(topicId, parentQuestionId, newChildTitle.trim());
+    setNewChildTitle("");
+    setAddingChildTo(null);
+  };
+
+  const renderQuestionRow = (
+    q: Question,
+    topicId: string,
+    isChild: boolean,
+  ) => (
+    <div
+      key={q.id}
+      className={`group flex items-center gap-1.5 ${
+        isChild ? "pl-7" : "pl-3"
+      } pr-2 py-1 cursor-pointer transition-colors ${
+        selectedQuestionId === q.id
+          ? "bg-cyan-500/10 border-l-2 border-l-cyan-500 -ml-px"
+          : "hover:bg-slate-800/30"
+      }`}
+      onClick={() =>
+        editingQuestionId !== q.id && selectQuestion(topicId, q.id)
+      }
+    >
+      {isChild && (
+        <span className="text-slate-600 text-[11px] shrink-0 leading-none select-none mr-0.5">
+          └
+        </span>
+      )}
+      <MessageSquare className="w-3 h-3 text-slate-600 shrink-0" />
+      {editingQuestionId === q.id ? (
+        <input
+          ref={editInputRef}
+          value={editingQuestionTitle}
+          onChange={(e) => setEditingQuestionTitle(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") commitQuestionRename(q.id, topicId);
+            if (e.key === "Escape") setEditingQuestionId(null);
+          }}
+          onBlur={() => commitQuestionRename(q.id, topicId)}
+          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-400 truncate flex-1"
+          onDoubleClick={(e) => {
+            e.stopPropagation();
+            setEditingQuestionId(q.id);
+            setEditingQuestionTitle(q.title);
+          }}
+        >
+          {q.title}
+        </span>
+      )}
+      <span className="text-[10px] text-slate-700 shrink-0">
+        {q.messages.length > 0 ? `${q.messages.length}` : ""}
+      </span>
+      {editingQuestionId !== q.id && !isChild && (
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            setAddingChildTo(q.id);
+            setNewChildTitle("");
+          }}
+          className="p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-600 hover:text-cyan-400 transition-all"
+          title="Add child question"
+        >
+          <CornerDownRight className="w-2.5 h-2.5" />
+        </button>
+      )}
+      {editingQuestionId !== q.id && (
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            setEditingQuestionId(q.id);
+            setEditingQuestionTitle(q.title);
+          }}
+          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-2.5 h-2.5" />
+        </button>
+      )}
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          removeQuestion(q.id, topicId);
+        }}
+        className="p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-600 hover:text-red-400 transition-all"
+      >
+        <Trash2 className="w-2.5 h-2.5" />
+      </button>
+    </div>
+  );
+
+  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>
+      </div>
+
+      {/* Add topic input */}
+      {showTopicInput && (
+        <div className="p-2 border-b border-slate-800 animate-fadeIn">
+          <div className="flex gap-1">
+            <input
+              autoFocus
+              value={newTopicName}
+              onChange={(e) => setNewTopicName(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") handleAddTopic();
+                if (e.key === "Escape") setShowTopicInput(false);
+              }}
+              placeholder="Topic name..."
+              className="flex-1 bg-slate-800 border border-slate-700 rounded px-2 py-1 text-sm text-slate-200 placeholder-slate-500 focus:outline-none focus:border-cyan-500"
+            />
+            <button
+              onClick={handleAddTopic}
+              className="px-2 py-1 bg-cyan-600 hover:bg-cyan-500 text-white text-xs rounded transition-colors"
+            >
+              Add
+            </button>
+            <button
+              onClick={() => setShowTopicInput(false)}
+              className="p-1 text-slate-500 hover:text-slate-300"
+            >
+              <X className="w-3 h-3" />
+            </button>
+          </div>
+        </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] || [];
+
+          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();
+                    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
+                    />
+                  </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>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </aside>
+  );
+}