create-interview-cockpit 0.26.1 → 0.28.0

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

@@ -3,6 +3,7 @@ import { useStore } from "../store";
 import type { CodeContextRoot } from "../types";
 import FileViewerModal from "./FileViewerModal";
 import NotesModal, { notesKey } from "./NotesModal";
+import DiagramsModal, { diagramsKey } from "./DiagramsModal";
 import GitDiffPanel from "./GitDiffPanel";
 import {
   File,
@@ -25,6 +26,7 @@ import {
   Trash2,
   Pencil,
   NotebookPen,
+  Workflow,
 } from "lucide-react";
 
 // ─── Tree data structure ─────────────────────────────────
@@ -150,7 +152,7 @@ function FolderNode({
     selectedFiles.includes(codeContextFileId(rootId, f)),
   ).length;
   const folderKey = codeContextFileId(rootId, node.path);
-  const isExpanded = expandedFolders.has(folderKey);
+  const isExpanded = Boolean(filter) || expandedFolders.has(folderKey);
 
   // Filter: if searching, only show nodes that have matching files
   const matchingFiles = filter
@@ -310,7 +312,8 @@ function CodeContextRootNode({
     : true;
   if (filter && !hasMatchingDescendants) return null;
 
-  const isExpanded = rootMatches || expandedFolders.has(rootKey);
+  const isExpanded =
+    Boolean(filter) || rootMatches || expandedFolders.has(rootKey);
   const checkState: "none" | "some" | "all" =
     selectedCount === 0 || rootFileIds.length === 0
       ? "none"
@@ -452,6 +455,7 @@ export default function CodeContextPanel() {
   );
   const [viewingFile, setViewingFile] = useState<string | null>(null);
   const [notesOpen, setNotesOpen] = useState(false);
+  const [diagramsOpen, setDiagramsOpen] = useState(false);
 
   // Show a dot in the Notes button when there are saved notes for this context
   const hasNotes = (() => {
@@ -465,6 +469,18 @@ export default function CodeContextPanel() {
     }
   })();
 
+  // Same indicator for diagrams attached to this question.
+  const hasDiagrams = (() => {
+    try {
+      const raw = localStorage.getItem(diagramsKey(currentQuestion?.id));
+      if (!raw) return false;
+      const parsed = JSON.parse(raw);
+      return Array.isArray(parsed) && parsed.length > 0;
+    } catch {
+      return false;
+    }
+  })();
+
   useEffect(() => {
     fetchAvailableFiles();
   }, []);
@@ -865,6 +881,28 @@ export default function CodeContextPanel() {
             </span>
           </button>
         </div>
+
+        {/* ── Diagrams section ────────────────────────────────── */}
+        <div className="border-t border-slate-800 px-3 py-2">
+          <button
+            onClick={() => setDiagramsOpen((v) => !v)}
+            className="w-full flex items-center gap-2 group"
+          >
+            <Workflow className="w-3 h-3 text-sky-400/70 shrink-0" />
+            <span className="text-[10px] uppercase tracking-wider text-slate-600 flex-1 text-left">
+              Diagrams
+            </span>
+            {hasDiagrams && (
+              <span
+                className="w-1.5 h-1.5 rounded-full bg-sky-400/70 shrink-0"
+                title="Has diagrams"
+              />
+            )}
+            <span className="text-[10px] text-slate-700 group-hover:text-slate-500 transition-colors">
+              {diagramsOpen ? "close" : "open"}
+            </span>
+          </button>
+        </div>
       </div>
 
       {viewingFile && (
@@ -880,6 +918,13 @@ export default function CodeContextPanel() {
           onClose={() => setNotesOpen(false)}
         />
       )}
+
+      {diagramsOpen && (
+        <DiagramsModal
+          questionId={currentQuestion?.id}
+          onClose={() => setDiagramsOpen(false)}
+        />
+      )}
     </div>
   );
 }