create-interview-cockpit 0.27.0 → 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 ─────────────────────────────────
@@ -453,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 = (() => {
@@ -466,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();
   }, []);
@@ -866,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 && (
@@ -881,6 +918,13 @@ export default function CodeContextPanel() {
           onClose={() => setNotesOpen(false)}
         />
       )}
+
+      {diagramsOpen && (
+        <DiagramsModal
+          questionId={currentQuestion?.id}
+          onClose={() => setDiagramsOpen(false)}
+        />
+      )}
     </div>
   );
 }