From b3519433ebbcc218d9dbb5372dbf53da1a9d7d46 Mon Sep 17 00:00:00 2001
From: Gagancreates <gaganp000999@gmail.com>
Date: Fri, 8 May 2026 02:07:16 +0530
Subject: [PATCH] feat: render pdf files via chromium pdfium plugin

---
 apps/x/apps/main/src/main.ts                  |  3 +
 apps/x/apps/renderer/src/App.tsx              |  5 ++
 .../src/components/pdf-file-viewer.tsx        | 56 +++++++++++++++++++
 3 files changed, 64 insertions(+)
 create mode 100644 apps/x/apps/renderer/src/components/pdf-file-viewer.tsx

diff --git a/apps/x/apps/main/src/main.ts b/apps/x/apps/main/src/main.ts
index 661f73a3..3cfd3f4f 100644
--- a/apps/x/apps/main/src/main.ts
+++ b/apps/x/apps/main/src/main.ts
@@ -221,6 +221,9 @@ function createWindow() {
       contextIsolation: true,
       sandbox: true,
       preload: preloadPath,
+      // Enable Chromium's built-in PDFium plugin so <iframe src="*.pdf">
+      // renders PDFs natively (zoom/scroll/print toolbar included).
+      plugins: true,
     },
   });
 
diff --git a/apps/x/apps/renderer/src/App.tsx b/apps/x/apps/renderer/src/App.tsx
index edd939a5..8984fcb7 100644
--- a/apps/x/apps/renderer/src/App.tsx
+++ b/apps/x/apps/renderer/src/App.tsx
@@ -16,6 +16,7 @@ import { BasesView, type BaseConfig, DEFAULT_BASE_CONFIG } from '@/components/ba
 import { HtmlFileViewer } from '@/components/html-file-viewer';
 import { ImageFileViewer } from '@/components/image-file-viewer';
 import { VideoFileViewer } from '@/components/video-file-viewer';
+import { PdfFileViewer } from '@/components/pdf-file-viewer';
 import { useDebounce } from './hooks/use-debounce';
 import { SidebarContentPanel } from '@/components/sidebar-content';
 import { SuggestedTopicsView } from '@/components/suggested-topics-view';
@@ -4841,6 +4842,10 @@ function App() {
                   <div className="flex-1 min-h-0 overflow-hidden">
                     <VideoFileViewer path={selectedPath} />
                   </div>
+                ) : selectedPath?.toLowerCase().endsWith('.pdf') ? (
+                  <div className="flex-1 min-h-0 overflow-hidden">
+                    <PdfFileViewer path={selectedPath} />
+                  </div>
                 ) : (
                   <div className="flex-1 overflow-auto p-4">
                     <pre className="text-sm font-mono text-foreground whitespace-pre-wrap">
diff --git a/apps/x/apps/renderer/src/components/pdf-file-viewer.tsx b/apps/x/apps/renderer/src/components/pdf-file-viewer.tsx
new file mode 100644
index 00000000..6c8cc48a
--- /dev/null
+++ b/apps/x/apps/renderer/src/components/pdf-file-viewer.tsx
@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react'
+import { ExternalLinkIcon, FileTextIcon, Loader2Icon } from 'lucide-react'
+
+interface PdfFileViewerProps {
+  path: string
+}
+
+type State = 'loading' | 'ready' | 'error'
+
+export function PdfFileViewer({ path }: PdfFileViewerProps) {
+  const [state, setState] = useState<State>('loading')
+
+  useEffect(() => {
+    setState('loading')
+  }, [path])
+
+  const src = `app://workspace/${path.split('/').map(encodeURIComponent).join('/')}`
+
+  if (state === 'error') {
+    return (
+      <div className="flex h-full w-full flex-col items-center justify-center gap-3 px-6 text-center text-muted-foreground">
+        <FileTextIcon className="size-6" />
+        <p className="text-sm font-medium text-foreground">Cannot preview this PDF</p>
+        <button
+          type="button"
+          onClick={() => {
+            void window.ipc.invoke('shell:openPath', { path })
+          }}
+          className="inline-flex items-center gap-1.5 rounded-md border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground hover:bg-accent"
+        >
+          <ExternalLinkIcon className="size-3.5" />
+          Open in system
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="relative h-full w-full">
+      <iframe
+        key={path}
+        src={src}
+        className="h-full w-full border-0 bg-white"
+        title="PDF preview"
+        onLoad={() => setState('ready')}
+        onError={() => setState('error')}
+      />
+      {state === 'loading' && (
+        <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-background text-muted-foreground">
+          <Loader2Icon className="size-6 animate-spin" />
+          <p className="text-sm">Loading PDF…</p>
+        </div>
+      )}
+    </div>
+  )
+}