create-interview-cockpit 0.1.0

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

@@ -0,0 +1,470 @@
+import { useEffect, useRef, useState, useCallback } from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+import {
+  X,
+  GripVertical,
+  Maximize2,
+  Minimize2,
+  Loader2,
+  Plus,
+  Check,
+} from "lucide-react";
+import { useStore } from "../store";
+import type { CodeSnippet } from "../types";
+
+interface Props {
+  filePath: string;
+  onClose: () => void;
+}
+
+/** Derive a Prism language tag from the file extension. */
+function getLang(filePath: string): string {
+  const ext = filePath.split(".").pop()?.toLowerCase() ?? "";
+  const map: Record<string, string> = {
+    ts: "typescript",
+    tsx: "tsx",
+    js: "javascript",
+    jsx: "jsx",
+    py: "python",
+    rs: "rust",
+    go: "go",
+    java: "java",
+    kt: "kotlin",
+    cs: "csharp",
+    cpp: "cpp",
+    c: "c",
+    h: "c",
+    rb: "ruby",
+    php: "php",
+    swift: "swift",
+    sh: "bash",
+    bash: "bash",
+    zsh: "bash",
+    ps1: "powershell",
+    json: "json",
+    yaml: "yaml",
+    yml: "yaml",
+    toml: "toml",
+    xml: "xml",
+    html: "html",
+    css: "css",
+    scss: "scss",
+    sass: "scss",
+    less: "less",
+    sql: "sql",
+    md: "markdown",
+    mdx: "markdown",
+    graphql: "graphql",
+    gql: "graphql",
+    dockerfile: "docker",
+  };
+  return map[ext] ?? "text";
+}
+
+const MIN_W = 380;
+const MIN_H = 260;
+const DEFAULT_W = 720;
+const DEFAULT_H = 520;
+
+type ResizeDir = "e" | "s" | "se" | "sw" | "w" | "ne" | "nw" | "n" | null;
+
+export default function FileViewerModal({ filePath, onClose }: Props) {
+  const { addSnippet } = useStore();
+  const [content, setContent] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [maximized, setMaximized] = useState(false);
+  const [selectedLines, setSelectedLines] = useState<Set<number>>(new Set());
+  const [addedFeedback, setAddedFeedback] = useState(false);
+  const lastClickedLineRef = useRef<number | null>(null);
+
+  // Position & size (pre-maximise)
+  const [pos, setPos] = useState(() => ({
+    x: Math.max(0, (window.innerWidth - DEFAULT_W) / 2),
+    y: Math.max(0, (window.innerHeight - DEFAULT_H) / 2),
+  }));
+  const [size, setSize] = useState({ w: DEFAULT_W, h: DEFAULT_H });
+
+  const dragStart = useRef<{
+    mx: number;
+    my: number;
+    ox: number;
+    oy: number;
+  } | null>(null);
+  const resizeDir = useRef<ResizeDir>(null);
+  const resizeStart = useRef<{
+    mx: number;
+    my: number;
+    ox: number;
+    oy: number;
+    ow: number;
+    oh: number;
+  } | null>(null);
+  const savedPos = useRef(pos);
+  const savedSize = useRef(size);
+
+  const fileName = filePath.split("/").pop() ?? filePath;
+
+  // Fetch file content
+  useEffect(() => {
+    setLoading(true);
+    setError(null);
+    setSelectedLines(new Set());
+    lastClickedLineRef.current = null;
+    fetch(`/api/code-context/file?path=${encodeURIComponent(filePath)}`)
+      .then((r) => r.json())
+      .then((d) => {
+        if (d.error) setError(d.error);
+        else setContent(d.content as string);
+      })
+      .catch(() => setError("Failed to load file."))
+      .finally(() => setLoading(false));
+  }, [filePath]);
+
+  const handleLineClick = useCallback(
+    (e: React.MouseEvent, lineNumber: number) => {
+      // Don't toggle if user was drag-selecting text
+      if (window.getSelection()?.toString()) return;
+      setSelectedLines((prev) => {
+        const next = new Set(prev);
+        if (e.shiftKey && lastClickedLineRef.current !== null) {
+          const lo = Math.min(lastClickedLineRef.current, lineNumber);
+          const hi = Math.max(lastClickedLineRef.current, lineNumber);
+          for (let i = lo; i <= hi; i++) next.add(i);
+        } else {
+          if (next.has(lineNumber)) next.delete(lineNumber);
+          else next.add(lineNumber);
+        }
+        return next;
+      });
+      lastClickedLineRef.current = lineNumber;
+    },
+    [],
+  );
+
+  const handleAddSnippet = useCallback(() => {
+    if (!content || selectedLines.size === 0) return;
+    const lines = content.split("\n");
+    const sortedNums = [...selectedLines].sort((a, b) => a - b);
+    const code = sortedNums.map((n) => lines[n - 1] ?? "").join("\n");
+    const snippet: CodeSnippet = {
+      id: crypto.randomUUID(),
+      filePath,
+      fileName,
+      startLine: sortedNums[0],
+      endLine: sortedNums[sortedNums.length - 1],
+      code,
+    };
+    addSnippet(snippet);
+    setSelectedLines(new Set());
+    lastClickedLineRef.current = null;
+    setAddedFeedback(true);
+    setTimeout(() => setAddedFeedback(false), 1500);
+  }, [content, selectedLines, filePath, fileName, addSnippet]);
+
+  // ─── Drag ────────────────────────────────────────────
+
+  const onTitleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (maximized) return;
+      e.preventDefault();
+      dragStart.current = {
+        mx: e.clientX,
+        my: e.clientY,
+        ox: pos.x,
+        oy: pos.y,
+      };
+    },
+    [maximized, pos],
+  );
+
+  useEffect(() => {
+    const onMove = (e: MouseEvent) => {
+      // Snapshot refs at the start — state setters run asynchronously and the
+      // refs may be nulled by onUp before the callback fires.
+      const drag = dragStart.current;
+      const resize = resizeStart.current;
+      const dir = resizeDir.current;
+
+      if (drag) {
+        const dx = e.clientX - drag.mx;
+        const dy = e.clientY - drag.my;
+        setPos({
+          x: Math.max(0, drag.ox + dx),
+          y: Math.max(0, drag.oy + dy),
+        });
+      }
+      if (resize && dir) {
+        const dx = e.clientX - resize.mx;
+        const dy = e.clientY - resize.my;
+
+        setSize((prev) => {
+          let w = prev.w;
+          let h = prev.h;
+          if (dir.includes("e")) w = Math.max(MIN_W, resize.ow + dx);
+          if (dir.includes("s")) h = Math.max(MIN_H, resize.oh + dy);
+          if (dir.includes("w")) w = Math.max(MIN_W, resize.ow - dx);
+          if (dir.includes("n")) h = Math.max(MIN_H, resize.oh - dy);
+          return { w, h };
+        });
+
+        if (dir.includes("w")) {
+          setPos((prev) => ({
+            ...prev,
+            x: Math.min(resize.ox + resize.ow - MIN_W, resize.ox + dx),
+          }));
+        }
+        if (dir.includes("n")) {
+          setPos((prev) => ({
+            ...prev,
+            y: Math.min(resize.oy + resize.oh - MIN_H, resize.oy + dy),
+          }));
+        }
+      }
+    };
+    const onUp = () => {
+      dragStart.current = null;
+      resizeStart.current = null;
+      resizeDir.current = null;
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+    return () => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+    };
+  }, []);
+
+  // ─── Resize handles ──────────────────────────────────
+
+  const startResize = useCallback(
+    (dir: ResizeDir) => (e: React.MouseEvent) => {
+      if (maximized) return;
+      e.preventDefault();
+      e.stopPropagation();
+      resizeDir.current = dir;
+      resizeStart.current = {
+        mx: e.clientX,
+        my: e.clientY,
+        ox: pos.x,
+        oy: pos.y,
+        ow: size.w,
+        oh: size.h,
+      };
+    },
+    [maximized, pos, size],
+  );
+
+  // ─── Maximise ────────────────────────────────────────
+
+  const toggleMax = useCallback(() => {
+    if (!maximized) {
+      savedPos.current = pos;
+      savedSize.current = size;
+      setMaximized(true);
+    } else {
+      setPos(savedPos.current);
+      setSize(savedSize.current);
+      setMaximized(false);
+    }
+  }, [maximized, pos, size]);
+
+  // ─── Keyboard close ──────────────────────────────────
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [onClose]);
+
+  const lang = getLang(filePath);
+
+  const style: React.CSSProperties = maximized
+    ? {
+        position: "fixed",
+        inset: 0,
+        width: "100vw",
+        height: "100vh",
+        borderRadius: 0,
+      }
+    : {
+        position: "fixed",
+        left: pos.x,
+        top: pos.y,
+        width: size.w,
+        height: size.h,
+        minWidth: MIN_W,
+        minHeight: MIN_H,
+      };
+
+  return (
+    <>
+      {/* Modal */}
+      <div
+        className="fixed z-50 flex flex-col bg-slate-900 border border-slate-700 rounded-xl shadow-2xl overflow-hidden select-none"
+        style={style}
+      >
+        {/* ── Title bar ── */}
+        <div
+          className="flex items-center gap-2 px-3 py-2 bg-slate-800 border-b border-slate-700 shrink-0 cursor-default"
+          onMouseDown={onTitleMouseDown}
+          style={{ cursor: maximized ? "default" : "grab" }}
+        >
+          <GripVertical className="w-3.5 h-3.5 text-slate-600 shrink-0" />
+          <span
+            className="text-xs font-mono text-slate-300 truncate flex-1"
+            title={filePath}
+          >
+            {fileName}
+          </span>
+          <span className="text-[10px] text-slate-600 shrink-0 uppercase tracking-wider hidden sm:block">
+            {lang}
+          </span>
+          <button
+            onClick={toggleMax}
+            className="p-1 rounded hover:bg-slate-700 text-slate-500 hover:text-slate-300 transition-colors shrink-0"
+            title={maximized ? "Restore" : "Maximise"}
+          >
+            {maximized ? (
+              <Minimize2 className="w-3.5 h-3.5" />
+            ) : (
+              <Maximize2 className="w-3.5 h-3.5" />
+            )}
+          </button>
+          <button
+            onClick={onClose}
+            className="p-1 rounded hover:bg-slate-700 text-slate-500 hover:text-red-400 transition-colors shrink-0"
+            title="Close (Esc)"
+          >
+            <X className="w-3.5 h-3.5" />
+          </button>
+        </div>
+
+        {/* ── Content ── */}
+        <div className="flex-1 overflow-auto">
+          {loading && (
+            <div className="flex items-center justify-center h-full">
+              <Loader2 className="w-5 h-5 text-cyan-400 animate-spin" />
+            </div>
+          )}
+          {error && (
+            <div className="flex items-center justify-center h-full p-4">
+              <p className="text-sm text-red-400 text-center">{error}</p>
+            </div>
+          )}
+          {!loading && !error && content !== null && (
+            <SyntaxHighlighter
+              language={lang}
+              style={oneDark}
+              showLineNumbers
+              wrapLines
+              wrapLongLines={false}
+              lineProps={(lineNumber) => ({
+                onClick: (e: React.MouseEvent) =>
+                  lineNumber !== undefined && handleLineClick(e, lineNumber),
+                style: {
+                  display: "block",
+                  cursor: "pointer",
+                  backgroundColor: selectedLines.has(lineNumber)
+                    ? "rgba(6, 182, 212, 0.15)"
+                    : undefined,
+                  outline: selectedLines.has(lineNumber)
+                    ? "1px solid rgba(6, 182, 212, 0.3)"
+                    : undefined,
+                },
+              })}
+              customStyle={{
+                margin: 0,
+                borderRadius: 0,
+                background: "#0f172a",
+                fontSize: "0.75rem",
+                lineHeight: "1.6",
+                minHeight: "100%",
+              }}
+              lineNumberStyle={{ color: "#334155", minWidth: "2.8em" }}
+            >
+              {content}
+            </SyntaxHighlighter>
+          )}
+        </div>
+
+        {/* ── Snippet selection toolbar ── */}
+        {selectedLines.size > 0 && (
+          <div className="shrink-0 border-t border-cyan-900/50 bg-slate-800 px-3 py-2 flex items-center gap-2">
+            <span className="text-xs text-slate-400">
+              {selectedLines.size} line{selectedLines.size !== 1 ? "s" : ""}{" "}
+              selected
+            </span>
+            <span className="flex-1" />
+            <button
+              onClick={() => {
+                setSelectedLines(new Set());
+                lastClickedLineRef.current = null;
+              }}
+              className="text-xs text-slate-500 hover:text-slate-300 transition-colors"
+            >
+              Clear
+            </button>
+            <button
+              onClick={handleAddSnippet}
+              className="flex items-center gap-1 text-xs bg-cyan-700 hover:bg-cyan-600 text-white px-2.5 py-1 rounded-md transition-colors"
+            >
+              {addedFeedback ? (
+                <>
+                  <Check className="w-3 h-3" /> Added!
+                </>
+              ) : (
+                <>
+                  <Plus className="w-3 h-3" /> Add to context
+                </>
+              )}
+            </button>
+          </div>
+        )}
+
+        {/* ── Resize handles (hidden when maximized) ── */}
+        {!maximized && (
+          <>
+            {/* edges */}
+            <div
+              onMouseDown={startResize("e")}
+              className="absolute top-0 right-0 w-1.5 h-full cursor-ew-resize z-10"
+            />
+            <div
+              onMouseDown={startResize("s")}
+              className="absolute bottom-0 left-0 w-full h-1.5 cursor-ns-resize z-10"
+            />
+            <div
+              onMouseDown={startResize("w")}
+              className="absolute top-0 left-0 w-1.5 h-full cursor-ew-resize z-10"
+            />
+            <div
+              onMouseDown={startResize("n")}
+              className="absolute top-0 left-0 w-full h-1.5 cursor-ns-resize z-10"
+            />
+            {/* corners */}
+            <div
+              onMouseDown={startResize("se")}
+              className="absolute bottom-0 right-0 w-3 h-3 cursor-se-resize z-20"
+            />
+            <div
+              onMouseDown={startResize("sw")}
+              className="absolute bottom-0 left-0  w-3 h-3 cursor-sw-resize z-20"
+            />
+            <div
+              onMouseDown={startResize("ne")}
+              className="absolute top-0 right-0    w-3 h-3 cursor-ne-resize z-20"
+            />
+            <div
+              onMouseDown={startResize("nw")}
+              className="absolute top-0 left-0     w-3 h-3 cursor-nw-resize z-20"
+            />
+          </>
+        )}
+      </div>
+    </>
+  );
+}