Multi-page PDF viewer with react-pdf, remove select mode, fix path overflow

- Replace iframe PDF viewer with react-pdf (PDF.js) for proper multi-page rendering
- Zoom, text selection, page count, loading/error states
- Remove select mode toggle (preview mode handles text selection)
- Fix file path overlapping toolbar buttons with text-ellipsis truncation
- Disable text selection on file path to prevent interference with buttons

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: davindicode

app/components/files/CodeEditor.tsx

@@ -193,7 +193,6 @@ export default function CodeEditor({ path, content, onSave, onClose }: CodeEdito
   const [value, setValue] = useState(content);
   const [dirty, setDirty] = useState(false);
   const [mode, setMode] = useState<"edit" | "preview">(canPreview ? "preview" : "edit");
-  const [selectMode, setSelectMode] = useState(false);
   const [editorFontSize, setEditorFontSize] = useState(6);
 
   const handleChange = (v: string | undefined) => {
@@ -212,7 +211,7 @@ export default function CodeEditor({ path, content, onSave, onClose }: CodeEdito
     <div className="flex flex-col h-full">
       {/* Toolbar */}
       <div className="flex items-center gap-2 px-3 py-1.5 bg-[#16162a] border-b border-gray-700 shrink-0">
-        <span className="text-sm text-gray-300 overflow-x-auto scrollbar-none whitespace-nowrap min-w-0 flex-1 select-all">{path}</span>
+        <span className="text-sm text-gray-300 whitespace-nowrap min-w-0 flex-1 overflow-hidden text-ellipsis select-none" title={path}>{path}</span>
         <div className="flex items-center gap-1.5 shrink-0">
           {canPreview && (
             <div className="flex items-center bg-[#0d0d1a] rounded overflow-hidden border border-gray-700">
@@ -238,20 +237,6 @@ export default function CodeEditor({ path, content, onSave, onClose }: CodeEdito
               </button>
             </div>
           )}
-          {/* Select mode toggle (for mobile text selection) */}
-          {mode === "edit" && (
-            <button
-              onClick={() => setSelectMode((s) => !s)}
-              className={`px-2 py-0.5 text-xs rounded border transition-colors ${
-                selectMode
-                  ? "bg-yellow-600 text-white border-yellow-500"
-                  : "text-gray-400 hover:text-white border-gray-700"
-              }`}
-              title={selectMode ? "Exit select mode (read-only)" : "Select mode (read-only, enables text selection)"}
-            >
-              Select
-            </button>
-          )}
           {/* Font size */}
           <div className="flex items-center border border-gray-700 rounded overflow-hidden">
             <button
@@ -328,9 +313,7 @@ export default function CodeEditor({ path, content, onSave, onClose }: CodeEdito
                 automaticLayout: true,
                 selectionHighlight: true,
                 occurrencesHighlight: "singleFile",
-                dragAndDrop: !selectMode,
-                readOnly: selectMode,
-                domReadOnly: selectMode,
+                dragAndDrop: true,
               }}
             />
           </Suspense>

app/components/files/FileViewer.tsx

@@ -1,7 +1,12 @@
-import { useState, useRef } from "react";
+import { useState, useRef, useCallback } from "react";
+import { Document, Page, pdfjs } from "react-pdf";
+import "react-pdf/dist/Page/AnnotationLayer.css";
+import "react-pdf/dist/Page/TextLayer.css";
 import CodeEditor from "./CodeEditor";
 import ImageViewer from "./ImageViewer";
 
+pdfjs.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
+
 const IMAGE_EXTS = new Set(["png", "jpg", "jpeg", "gif", "svg", "webp", "ico", "bmp"]);
 const VIDEO_EXTS = new Set(["mp4", "webm", "ogg", "mov", "mkv", "avi"]);
 const AUDIO_EXTS = new Set(["mp3", "wav", "ogg", "flac", "aac", "m4a"]);
@@ -22,7 +27,7 @@ function MediaViewer({ path, type, onClose }: { path: string; type: "video" | "a
   return (
     <div className="flex flex-col h-full">
       <div className="flex items-center justify-between px-3 py-2 bg-[#16162a] border-b border-gray-700 shrink-0">
-        <span className="text-sm text-gray-300 overflow-x-auto scrollbar-none whitespace-nowrap min-w-0 flex-1 select-all">{path}</span>
+        <span className="text-sm text-gray-300 whitespace-nowrap min-w-0 flex-1 overflow-hidden text-ellipsis select-none">{path}</span>
         <div className="flex items-center gap-2 shrink-0">
           <a
             href={`/api/files/download?path=${encodeURIComponent(path)}`}
@@ -53,23 +58,31 @@ function MediaViewer({ path, type, onClose }: { path: string; type: "video" | "a
 }
 
 function PdfViewer({ path, onClose }: { path: string; onClose: () => void }) {
-  const [zoomPct, setZoomPct] = useState(100);
+  const [numPages, setNumPages] = useState<number>(0);
+  const [scale, setScale] = useState(1.0);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const zoomIn = () => setScale((s) => Math.min(3, s + 0.25));
+  const zoomOut = () => setScale((s) => Math.max(0.25, s - 0.25));
+  const zoomFit = () => setScale(1.0);
 
-  const zoomIn = () => setZoomPct((z) => Math.min(500, z + 25));
-  const zoomOut = () => setZoomPct((z) => Math.max(25, z - 25));
-  const zoomFit = () => setZoomPct(100);
+  const onDocumentLoadSuccess = useCallback(({ numPages }: { numPages: number }) => {
+    setNumPages(numPages);
+  }, []);
 
-  // Use PDF viewer's built-in zoom via URL fragment
-  const pdfUrl = `/api/files/download?path=${encodeURIComponent(path)}&inline=1#zoom=${zoomPct}`;
+  const pdfUrl = `/api/files/download?path=${encodeURIComponent(path)}&inline=1`;
 
   return (
     <div className="flex flex-col h-full">
       <div className="flex items-center justify-between px-3 py-2 bg-[#16162a] border-b border-gray-700 shrink-0">
-        <span className="text-sm text-gray-300 overflow-x-auto scrollbar-none whitespace-nowrap min-w-0 flex-1 select-all">{path}</span>
+        <span className="text-sm text-gray-300 whitespace-nowrap min-w-0 flex-1 overflow-hidden text-ellipsis select-none">{path}</span>
         <div className="flex items-center gap-2">
+          {numPages > 0 && (
+            <span className="text-[10px] text-gray-500">{numPages} pg</span>
+          )}
           <div className="flex items-center gap-1 border border-gray-700 rounded overflow-hidden">
             <button onClick={zoomOut} className="px-2 py-0.5 text-xs text-gray-400 hover:text-white hover:bg-gray-700">-</button>
-            <button onClick={zoomFit} className="px-2 py-0.5 text-[10px] text-gray-400 hover:text-white hover:bg-gray-700 tabular-nums">{zoomPct}%</button>
+            <button onClick={zoomFit} className="px-2 py-0.5 text-[10px] text-gray-400 hover:text-white hover:bg-gray-700 tabular-nums">{Math.round(scale * 100)}%</button>
             <button onClick={zoomIn} className="px-2 py-0.5 text-xs text-gray-400 hover:text-white hover:bg-gray-700">+</button>
           </div>
           <a
@@ -89,13 +102,30 @@ function PdfViewer({ path, onClose }: { path: string; onClose: () => void }) {
           </button>
         </div>
       </div>
-      <div className="flex-1 min-h-0 bg-[#0d0d1a]">
-        <iframe
-          key={zoomPct}
-          src={pdfUrl}
-          title={path}
-          className="w-full h-full border-0"
-        />
+      <div ref={containerRef} className="flex-1 min-h-0 overflow-auto bg-[#0d0d1a]">
+        <Document
+          file={pdfUrl}
+          onLoadSuccess={onDocumentLoadSuccess}
+          loading={
+            <div className="flex items-center justify-center h-full text-gray-500 text-sm">Loading PDF...</div>
+          }
+          error={
+            <div className="flex items-center justify-center h-full text-red-400 text-sm">Failed to load PDF</div>
+          }
+        >
+          <div className="flex flex-col items-center gap-2 p-4">
+            {Array.from({ length: numPages }, (_, i) => (
+              <Page
+                key={i + 1}
+                pageNumber={i + 1}
+                scale={scale}
+                className="shadow-lg"
+                renderTextLayer={true}
+                renderAnnotationLayer={true}
+              />
+            ))}
+          </div>
+        </Document>
       </div>
     </div>
   );
@@ -128,7 +158,7 @@ export default function FileViewer({ path, content, onSave, onClose }: FileViewe
   return (
     <div className="flex flex-col h-full">
       <div className="flex items-center justify-between px-3 py-2 bg-[#16162a] border-b border-gray-700 shrink-0">
-        <span className="text-sm text-gray-300 overflow-x-auto scrollbar-none whitespace-nowrap min-w-0 flex-1 select-all">{path}</span>
+        <span className="text-sm text-gray-300 whitespace-nowrap min-w-0 flex-1 overflow-hidden text-ellipsis select-none">{path}</span>
         <div className="flex items-center gap-2">
           <a
             href={`/api/files/download?path=${encodeURIComponent(path)}`}

package.json

@@ -26,6 +26,7 @@
     "node-pty": "^1.1.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
+    "react-pdf": "^10.4.1",
     "react-router": "7.12.0",
     "socket.io": "^4.8.3",
     "socket.io-client": "^4.8.3",