create-interview-cockpit 0.24.0 → 0.26.0

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

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, useCallback } from "react";
+import { memo, useEffect, useMemo, useRef, useState, useCallback } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
 import {
@@ -72,9 +72,208 @@ const MIN_W = 380;
 const MIN_H = 260;
 const DEFAULT_W = 720;
 const DEFAULT_H = 520;
+const LARGE_FILE_LINE_THRESHOLD = 2_500;
+const LARGE_FILE_CHAR_THRESHOLD = 220_000;
+const VIRTUAL_ROW_HEIGHT = 20;
+const VIRTUAL_OVERSCAN = 24;
 
 type ResizeDir = "e" | "s" | "se" | "sw" | "w" | "ne" | "nw" | "n" | null;
 
+interface CodeViewerContentProps {
+  content: string;
+  lang: string;
+  selectedLines: Set<number>;
+  chatContextLines: Set<number>;
+  codeAnnotations: CodeAnnotation[];
+  onLineClick: (e: React.MouseEvent, lineNumber: number) => void;
+}
+
+const CodeViewerContent = memo(function CodeViewerContent({
+  content,
+  lang,
+  selectedLines,
+  chatContextLines,
+  codeAnnotations,
+  onLineClick,
+}: CodeViewerContentProps) {
+  const annotationLineSet = useMemo(
+    () => new Set(codeAnnotations.map((annotation) => annotation.lineNumber)),
+    [codeAnnotations],
+  );
+  const lineCount = useMemo(() => content.split(/\r?\n/).length, [content]);
+  const isLargeFile =
+    lineCount > LARGE_FILE_LINE_THRESHOLD ||
+    content.length > LARGE_FILE_CHAR_THRESHOLD;
+
+  if (isLargeFile) {
+    return (
+      <VirtualizedPlainCodeViewer
+        content={content}
+        selectedLines={selectedLines}
+        chatContextLines={chatContextLines}
+        annotationLineSet={annotationLineSet}
+        onLineClick={onLineClick}
+      />
+    );
+  }
+
+  return (
+    <div className="h-full overflow-auto">
+      <SyntaxHighlighter
+        language={lang}
+        style={oneDark}
+        showLineNumbers
+        wrapLines
+        wrapLongLines={false}
+        lineProps={(lineNumber) => {
+          const hasAnnotation = annotationLineSet.has(lineNumber);
+          const isChatCtx = chatContextLines.has(lineNumber);
+          const isSelected = selectedLines.has(lineNumber);
+          let bg: string | undefined;
+          let outline: string | undefined;
+          if (hasAnnotation) {
+            bg = "rgba(139, 92, 246, 0.2)";
+            outline = "1px solid rgba(139, 92, 246, 0.35)";
+          } else if (isChatCtx) {
+            bg = "rgba(245, 158, 11, 0.15)";
+            outline = "1px solid rgba(245, 158, 11, 0.3)";
+          } else if (isSelected) {
+            bg = "rgba(6, 182, 212, 0.15)";
+            outline = "1px solid rgba(6, 182, 212, 0.3)";
+          }
+          return {
+            onClick: (e: React.MouseEvent) =>
+              lineNumber !== undefined && onLineClick(e, lineNumber),
+            style: {
+              display: "block",
+              cursor: "pointer",
+              backgroundColor: bg,
+              outline,
+            },
+          };
+        }}
+        customStyle={{
+          margin: 0,
+          borderRadius: 0,
+          background: "#0f172a",
+          fontSize: "0.75rem",
+          lineHeight: "1.6",
+          minHeight: "100%",
+        }}
+        lineNumberStyle={{ color: "#334155", minWidth: "2.8em" }}
+      >
+        {content}
+      </SyntaxHighlighter>
+    </div>
+  );
+});
+
+interface VirtualizedPlainCodeViewerProps {
+  content: string;
+  selectedLines: Set<number>;
+  chatContextLines: Set<number>;
+  annotationLineSet: Set<number>;
+  onLineClick: (e: React.MouseEvent, lineNumber: number) => void;
+}
+
+function VirtualizedPlainCodeViewer({
+  content,
+  selectedLines,
+  chatContextLines,
+  annotationLineSet,
+  onLineClick,
+}: VirtualizedPlainCodeViewerProps) {
+  const lines = useMemo(() => content.split(/\r?\n/), [content]);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [viewportHeight, setViewportHeight] = useState(0);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const update = () => setViewportHeight(el.clientHeight);
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  const visibleStart = Math.max(
+    0,
+    Math.floor(scrollTop / VIRTUAL_ROW_HEIGHT) - VIRTUAL_OVERSCAN,
+  );
+  const visibleEnd = Math.min(
+    lines.length,
+    Math.ceil((scrollTop + viewportHeight) / VIRTUAL_ROW_HEIGHT) +
+      VIRTUAL_OVERSCAN,
+  );
+  const visibleLines = lines.slice(visibleStart, visibleEnd);
+
+  return (
+    <div
+      ref={containerRef}
+      className="h-full overflow-auto bg-slate-950 font-mono text-xs text-slate-300"
+      onScroll={(e) => setScrollTop(e.currentTarget.scrollTop)}
+    >
+      <div
+        style={{
+          height: lines.length * VIRTUAL_ROW_HEIGHT,
+          position: "relative",
+          minWidth: "max-content",
+        }}
+      >
+        <div
+          style={{
+            position: "absolute",
+            top: visibleStart * VIRTUAL_ROW_HEIGHT,
+            left: 0,
+            right: 0,
+          }}
+        >
+          {visibleLines.map((line, offset) => {
+            const lineNumber = visibleStart + offset + 1;
+            const hasAnnotation = annotationLineSet.has(lineNumber);
+            const isChatCtx = chatContextLines.has(lineNumber);
+            const isSelected = selectedLines.has(lineNumber);
+            const backgroundColor = hasAnnotation
+              ? "rgba(139, 92, 246, 0.2)"
+              : isChatCtx
+                ? "rgba(245, 158, 11, 0.15)"
+                : isSelected
+                  ? "rgba(6, 182, 212, 0.15)"
+                  : undefined;
+            const outline = hasAnnotation
+              ? "1px solid rgba(139, 92, 246, 0.35)"
+              : isChatCtx
+                ? "1px solid rgba(245, 158, 11, 0.3)"
+                : isSelected
+                  ? "1px solid rgba(6, 182, 212, 0.3)"
+                  : undefined;
+
+            return (
+              <div
+                key={lineNumber}
+                onClick={(e) => onLineClick(e, lineNumber)}
+                className="flex cursor-pointer whitespace-pre leading-none hover:bg-slate-800/60"
+                style={{
+                  height: VIRTUAL_ROW_HEIGHT,
+                  backgroundColor,
+                  outline,
+                }}
+              >
+                <span className="sticky left-0 z-10 w-12 shrink-0 select-none bg-slate-950 pr-3 text-right text-slate-600">
+                  {lineNumber}
+                </span>
+                <span className="pr-6">{line || " "}</span>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export default function FileViewerModal({ filePath, onClose }: Props) {
   const {
     addSnippet,
@@ -598,7 +797,7 @@ export default function FileViewerModal({ filePath, onClose }: Props) {
         </div>
 
         {/* ── Content ── */}
-        <div className="flex-1 overflow-auto">
+        <div className="flex-1 min-h-0">
           {loading && (
             <div className="flex items-center justify-center h-full">
               <Loader2 className="w-5 h-5 text-cyan-400 animate-spin" />
@@ -610,53 +809,14 @@ export default function FileViewerModal({ filePath, onClose }: Props) {
             </div>
           )}
           {!loading && !error && content !== null && (
-            <SyntaxHighlighter
-              language={lang}
-              style={oneDark}
-              showLineNumbers
-              wrapLines
-              wrapLongLines={false}
-              lineProps={(lineNumber) => {
-                const hasAnnotation = codeAnnotations.some(
-                  (a) => a.lineNumber === lineNumber,
-                );
-                const isChatCtx = chatContextLines.has(lineNumber);
-                const isSelected = selectedLines.has(lineNumber);
-                let bg: string | undefined;
-                let outline: string | undefined;
-                if (hasAnnotation) {
-                  bg = "rgba(139, 92, 246, 0.2)";
-                  outline = "1px solid rgba(139, 92, 246, 0.35)";
-                } else if (isChatCtx) {
-                  bg = "rgba(245, 158, 11, 0.15)";
-                  outline = "1px solid rgba(245, 158, 11, 0.3)";
-                } else if (isSelected) {
-                  bg = "rgba(6, 182, 212, 0.15)";
-                  outline = "1px solid rgba(6, 182, 212, 0.3)";
-                }
-                return {
-                  onClick: (e: React.MouseEvent) =>
-                    lineNumber !== undefined && handleLineClick(e, lineNumber),
-                  style: {
-                    display: "block",
-                    cursor: "pointer",
-                    backgroundColor: bg,
-                    outline,
-                  },
-                };
-              }}
-              customStyle={{
-                margin: 0,
-                borderRadius: 0,
-                background: "#0f172a",
-                fontSize: "0.75rem",
-                lineHeight: "1.6",
-                minHeight: "100%",
-              }}
-              lineNumberStyle={{ color: "#334155", minWidth: "2.8em" }}
-            >
-              {content}
-            </SyntaxHighlighter>
+            <CodeViewerContent
+              content={content}
+              lang={lang}
+              selectedLines={selectedLines}
+              chatContextLines={chatContextLines}
+              codeAnnotations={codeAnnotations}
+              onLineClick={handleLineClick}
+            />
           )}
         </div>