create-interview-cockpit 0.4.0 → 0.6.0

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

@@ -0,0 +1,179 @@
+import { useState, useRef, useCallback, useEffect } from "react";
+import { X, Code2 } from "lucide-react";
+import MarkdownRenderer from "./MarkdownRenderer";
+
+export interface CodeAnnotation {
+  id: string;
+  lineNumber: number;
+  lineContent: string;
+  prompt: string;
+  response: string;
+  filePath: string;
+}
+
+interface Props {
+  annotation: CodeAnnotation;
+  onClose: () => void;
+  initialPos?: { x: number; y: number };
+}
+
+const DEFAULT_W = 400;
+const DEFAULT_H = 300;
+const MIN_W = 280;
+const MIN_H = 160;
+
+export default function CodeLineAnnotationPopup({
+  annotation,
+  onClose,
+  initialPos,
+}: Props) {
+  const [pos, setPos] = useState(() => ({
+    x:
+      initialPos?.x ??
+      Math.min(window.innerWidth - DEFAULT_W - 16, window.innerWidth * 0.6),
+    y: initialPos?.y ?? Math.max(8, window.innerHeight * 0.3),
+  }));
+  const [size, setSize] = useState({ w: DEFAULT_W, h: DEFAULT_H });
+
+  const dragStart = useRef<{
+    mx: number;
+    my: number;
+    ox: number;
+    oy: number;
+  } | null>(null);
+  const resizeStart = useRef<{
+    mx: number;
+    my: number;
+    ox: number;
+    oy: number;
+    ow: number;
+    oh: number;
+  } | null>(null);
+  const resizeDir = useRef<"e" | "s" | "se" | null>(null);
+
+  useEffect(() => {
+    const onMove = (e: MouseEvent) => {
+      if (dragStart.current) {
+        setPos({
+          x: Math.max(
+            0,
+            dragStart.current.ox + (e.clientX - dragStart.current.mx),
+          ),
+          y: Math.max(
+            0,
+            dragStart.current.oy + (e.clientY - dragStart.current.my),
+          ),
+        });
+      }
+      if (resizeStart.current && resizeDir.current) {
+        const dx = e.clientX - resizeStart.current.mx;
+        const dy = e.clientY - resizeStart.current.my;
+        setSize((prev) => ({
+          w: resizeDir.current?.includes("e")
+            ? Math.max(MIN_W, resizeStart.current!.ow + dx)
+            : prev.w,
+          h: resizeDir.current?.includes("s")
+            ? Math.max(MIN_H, resizeStart.current!.oh + dy)
+            : prev.h,
+        }));
+      }
+    };
+    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);
+    };
+  }, []);
+
+  const onTitleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      dragStart.current = {
+        mx: e.clientX,
+        my: e.clientY,
+        ox: pos.x,
+        oy: pos.y,
+      };
+    },
+    [pos],
+  );
+
+  const startResize = (dir: "e" | "s" | "se") => (e: React.MouseEvent) => {
+    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,
+    };
+  };
+
+  const fileName = annotation.filePath.split("/").pop() ?? annotation.filePath;
+  const linePreview =
+    annotation.lineContent.trim().length > 55
+      ? annotation.lineContent.trim().slice(0, 55) + "…"
+      : annotation.lineContent.trim();
+
+  return (
+    <div
+      className="fixed z-[65] flex flex-col bg-slate-900 border border-violet-500/40 rounded-xl shadow-2xl overflow-hidden"
+      style={{ left: pos.x, top: pos.y, width: size.w, height: size.h }}
+    >
+      {/* Title bar */}
+      <div
+        className="flex items-start gap-2 px-3 py-2 bg-slate-800/90 border-b border-violet-700/30 cursor-move select-none shrink-0"
+        onMouseDown={onTitleMouseDown}
+      >
+        <Code2 className="w-3.5 h-3.5 text-violet-400 shrink-0 mt-0.5" />
+        <div className="flex-1 min-w-0">
+          <p className="text-xs font-medium text-slate-200 truncate">
+            {annotation.prompt}
+          </p>
+          <p className="text-[10px] text-slate-500 font-mono truncate mt-0.5">
+            {fileName}
+            <span className="text-violet-500/70">:{annotation.lineNumber}</span>
+            {linePreview && (
+              <span className="text-slate-600"> — {linePreview}</span>
+            )}
+          </p>
+        </div>
+        <button
+          onMouseDown={(e) => e.stopPropagation()}
+          onClick={onClose}
+          className="p-1 rounded hover:bg-slate-700 text-slate-500 hover:text-slate-300 transition-colors shrink-0"
+        >
+          <X className="w-3.5 h-3.5" />
+        </button>
+      </div>
+
+      {/* Body */}
+      <div className="flex-1 overflow-y-auto px-4 py-3 text-sm min-h-0">
+        <MarkdownRenderer content={annotation.response} />
+      </div>
+
+      {/* Resize handles */}
+      <div
+        className="absolute inset-y-0 right-0 w-1.5 cursor-ew-resize"
+        onMouseDown={startResize("e")}
+      />
+      <div
+        className="absolute inset-x-0 bottom-0 h-1.5 cursor-ns-resize"
+        onMouseDown={startResize("s")}
+      />
+      <div
+        className="absolute bottom-0 right-0 w-3 h-3 cursor-se-resize z-10"
+        onMouseDown={startResize("se")}
+      />
+    </div>
+  );
+}