From 61fdf0117861ec24af34ce5215d831ff31c494c6 Mon Sep 17 00:00:00 2001
From: "engine-labs-app[bot]"
 <140088366+engine-labs-app[bot]@users.noreply.github.com>
Date: Thu, 20 Nov 2025 00:41:49 +0000
Subject: [PATCH] feat(plugin-thumbnail): integrate thumbnail plugin and add
 thumbnail sidebar UI

---
 components/pdf-container/pdf-container.tsx    | 218 ++++++++++--------
 .../plugin-selection-2/components/index.ts    |   4 +-
 .../plugin-selection-2/hooks/index.ts         |   2 +-
 .../pdf-container/thumbnail-sidebar.tsx       |  52 +++++
 components/pdf-container/toolbar.tsx          |  24 +-
 package-lock.json                             |  18 ++
 package.json                                  |   1 +
 tsconfig.json                                 |   2 +-
 8 files changed, 215 insertions(+), 106 deletions(-)
 create mode 100644 components/pdf-container/thumbnail-sidebar.tsx

diff --git a/components/pdf-container/pdf-container.tsx b/components/pdf-container/pdf-container.tsx
index 0c51e66..6334bd8 100644
--- a/components/pdf-container/pdf-container.tsx
+++ b/components/pdf-container/pdf-container.tsx
@@ -13,6 +13,7 @@ import { RenderLayer, RenderPluginPackage } from "@embedpdf/plugin-render/react"
 import { Scroller, ScrollPluginPackage, ScrollStrategy } from "@embedpdf/plugin-scroll/react"
 import { SearchLayer, SearchPluginPackage } from "@embedpdf/plugin-search/react"
 import { SelectionLayer, SelectionPluginPackage } from "./plugin-selection-2"
+import { ThumbnailPluginPackage } from "@embedpdf/plugin-thumbnail/react"
 import { TilingLayer, TilingPluginPackage } from "@embedpdf/plugin-tiling/react"
 import { Viewport, ViewportPluginPackage } from "@embedpdf/plugin-viewport/react"
 import { PinchWrapper, ZoomMode, ZoomPluginPackage } from "@embedpdf/plugin-zoom/react"
@@ -21,6 +22,8 @@ import AnnotationStoreSync from "../annotation-store/annotation-store-sync"
 import { Spinner } from "../shadcn-ui/spinner"
 import { AnnotationLayer, AnnotationPluginPackage } from "./plugin-annotation-2"
 import Toolbar from "./toolbar"
+import ThumbnailSidebar from "./thumbnail-sidebar"
+import { Sidebar, SidebarContent, SidebarProvider } from "@/components/shadcn-ui/sidebar"
 
 const logger = new ConsoleLogger()
 
@@ -46,106 +49,121 @@ export default function PDFContainer({ url }: PDFContainerProps) {
   }
 
   return (
-    <div className="flex h-screen flex-1 flex-col overflow-hidden" ref={containerRef}>
-      <div className="flex flex-1 overflow-hidden" data-testid="embedpdf">
-        <EmbedPDF
-          logger={logger}
-          engine={engine}
-          plugins={[
-            // register Loader first
-            createPluginRegistration(LoaderPluginPackage, {
-              loadingOptions: {
-                type: "url",
-                pdfFile: {
-                  id: "1",
-                  url: url,
-                },
-                options: {
-                  mode: "full-fetch",
-                },
-              },
-            }),
-            createPluginRegistration(ViewportPluginPackage, {
-              viewportGap: 5,
-            }),
-            createPluginRegistration(ScrollPluginPackage, {
-              strategy: ScrollStrategy.Vertical,
-            }),
-            createPluginRegistration(RenderPluginPackage),
-            createPluginRegistration(InteractionManagerPluginPackage),
-            createPluginRegistration(TilingPluginPackage, {
-              tileSize: 768,
-              overlapPx: 2.5,
-              extraRings: 0,
-            }),
-            createPluginRegistration(SelectionPluginPackage),
-            // register Annotation after InteractionManager, Seletion
-            createPluginRegistration(AnnotationPluginPackage),
-            // register Export after Annotation
-            createPluginRegistration(ExportPluginPackage),
-            // register Zoom after InteractionManager, Viewport, Scroll
-            createPluginRegistration(ZoomPluginPackage, {
-              defaultZoomLevel: ZoomMode.Automatic,
-            }),
-            createPluginRegistration(SearchPluginPackage),
-          ]}
-        >
-          {({ pluginsReady }) => {
-            return (
-              <GlobalPointerProvider>
-                <AnnotationStoreSync />
-                <Toolbar data-testid="annotation-toolbar" />
-                <Viewport className="h-full w-full flex-1 overflow-auto bg-gray-100 select-none">
-                  {!pluginsReady && (
-                    <div className="flex h-full w-full items-center justify-center">
-                      <Spinner data-testid="spinner1" />
-                    </div>
-                  )}
-                  {pluginsReady && (
-                    <PinchWrapper>
-                      <Scroller
-                        renderPage={({ pageIndex, scale, width, height }) => (
-                          <PagePointerProvider
-                            pageIndex={pageIndex}
-                            scale={scale}
-                            pageWidth={width}
-                            pageHeight={height}
-                            rotation={0}
-                          >
-                            {/* RednerLayer must go first */}
-                            <RenderLayer pageIndex={pageIndex} className="pointer-events-none" />
-                            <TilingLayer
-                              pageIndex={pageIndex}
-                              scale={scale}
-                              className="pointer-events-none"
-                            />
-                            <AnnotationLayer
-                              pageIndex={pageIndex}
-                              scale={scale}
-                              pageWidth={width}
-                              pageHeight={height}
-                              rotation={0}
-                              data-testid="annotation-layer"
-                            />
-                            <SearchLayer
-                              pageIndex={pageIndex}
-                              scale={scale}
-                              highlightColor={"#FFFF00"}
-                              activeHighlightColor={"#FFFF00"}
-                            />
-                            {/* SelectionLayer must go last */}
-                            <SelectionLayer pageIndex={pageIndex} scale={scale} />
-                          </PagePointerProvider>
-                        )}
-                      />
-                    </PinchWrapper>
-                  )}
-                </Viewport>
-              </GlobalPointerProvider>
-            )
-          }}
-        </EmbedPDF>
+    <SidebarProvider>
+      <div className="flex h-screen w-full" ref={containerRef}>
+        <div className="flex flex-1 flex-col overflow-hidden">
+          <div className="flex flex-1 overflow-hidden" data-testid="embedpdf">
+            <EmbedPDF
+              logger={logger}
+              engine={engine}
+              plugins={[
+                // register Loader first
+                createPluginRegistration(LoaderPluginPackage, {
+                  loadingOptions: {
+                    type: "url",
+                    pdfFile: {
+                      id: "1",
+                      url: url,
+                    },
+                    options: {
+                      mode: "full-fetch",
+                    },
+                  },
+                }),
+                createPluginRegistration(ViewportPluginPackage, {
+                  viewportGap: 5,
+                }),
+                createPluginRegistration(ScrollPluginPackage, {
+                  strategy: ScrollStrategy.Vertical,
+                }),
+                createPluginRegistration(RenderPluginPackage),
+                createPluginRegistration(InteractionManagerPluginPackage),
+                createPluginRegistration(TilingPluginPackage, {
+                  tileSize: 768,
+                  overlapPx: 2.5,
+                  extraRings: 0,
+                }),
+                createPluginRegistration(SelectionPluginPackage),
+                // register Annotation after InteractionManager, Seletion
+                createPluginRegistration(AnnotationPluginPackage),
+                // register Export after Annotation
+                createPluginRegistration(ExportPluginPackage),
+                // register Zoom after InteractionManager, Viewport, Scroll
+                createPluginRegistration(ZoomPluginPackage, {
+                  defaultZoomLevel: ZoomMode.Automatic,
+                }),
+                createPluginRegistration(SearchPluginPackage),
+                createPluginRegistration(ThumbnailPluginPackage, {
+                  width: 120,
+                }),
+              ]}
+            >
+              {({ pluginsReady }) => {
+                return (
+                  <GlobalPointerProvider>
+                    <AnnotationStoreSync />
+                    <Toolbar data-testid="annotation-toolbar" />
+                    <Viewport className="h-full w-full flex-1 overflow-auto bg-gray-100 select-none">
+                      {!pluginsReady && (
+                        <div className="flex h-full w-full items-center justify-center">
+                          <Spinner data-testid="spinner1" />
+                        </div>
+                      )}
+                      {pluginsReady && (
+                        <PinchWrapper>
+                          <Scroller
+                            renderPage={({ pageIndex, scale, width, height }) => (
+                              <PagePointerProvider
+                                pageIndex={pageIndex}
+                                scale={scale}
+                                pageWidth={width}
+                                pageHeight={height}
+                                rotation={0}
+                              >
+                                {/* RednerLayer must go first */}
+                                <RenderLayer
+                                  pageIndex={pageIndex}
+                                  className="pointer-events-none"
+                                />
+                                <TilingLayer
+                                  pageIndex={pageIndex}
+                                  scale={scale}
+                                  className="pointer-events-none"
+                                />
+                                <AnnotationLayer
+                                  pageIndex={pageIndex}
+                                  scale={scale}
+                                  pageWidth={width}
+                                  pageHeight={height}
+                                  rotation={0}
+                                  data-testid="annotation-layer"
+                                />
+                                <SearchLayer
+                                  pageIndex={pageIndex}
+                                  scale={scale}
+                                  highlightColor={"#FFFF00"}
+                                  activeHighlightColor={"#FFFF00"}
+                                />
+                                {/* SelectionLayer must go last */}
+                                <SelectionLayer pageIndex={pageIndex} scale={scale} />
+                              </PagePointerProvider>
+                            )}
+                          />
+                        </PinchWrapper>
+                      )}
+                    </Viewport>
+                  </GlobalPointerProvider>
+                )
+              }}
+            </EmbedPDF>
+          </div>
+        </div>
+        <Sidebar side="right" variant="floating" collapsible="none">
+          <SidebarContent className="p-0">
+            <ThumbnailSidebar />
+          </SidebarContent>
+        </Sidebar>
       </div>
-    </div>
+    </SidebarProvider>
   )
 }
diff --git a/components/pdf-container/plugin-selection-2/components/index.ts b/components/pdf-container/plugin-selection-2/components/index.ts
index faf2083..1ce80e2 100644
--- a/components/pdf-container/plugin-selection-2/components/index.ts
+++ b/components/pdf-container/plugin-selection-2/components/index.ts
@@ -1,2 +1,2 @@
-export * from './selection-layer';
-export * from './copy-to-clipboard';
+export * from "./selection-layer"
+export * from "./copy-to-clipboard"
diff --git a/components/pdf-container/plugin-selection-2/hooks/index.ts b/components/pdf-container/plugin-selection-2/hooks/index.ts
index 01269b6..af27ca4 100644
--- a/components/pdf-container/plugin-selection-2/hooks/index.ts
+++ b/components/pdf-container/plugin-selection-2/hooks/index.ts
@@ -1 +1 @@
-export * from './use-selection';
+export * from "./use-selection"
diff --git a/components/pdf-container/thumbnail-sidebar.tsx b/components/pdf-container/thumbnail-sidebar.tsx
new file mode 100644
index 0000000..17965f4
--- /dev/null
+++ b/components/pdf-container/thumbnail-sidebar.tsx
@@ -0,0 +1,52 @@
+"use client"
+
+import { useScroll } from "@embedpdf/plugin-scroll/react"
+import { ThumbImg, ThumbnailsPane } from "@embedpdf/plugin-thumbnail/react"
+import { ScrollArea } from "@/components/shadcn-ui/scroll-area"
+
+const ThumbnailSidebar = () => {
+  const { state, provides } = useScroll()
+
+  return (
+    <ScrollArea className="h-full w-[120px] border-l border-gray-200 bg-white">
+      <div className="relative">
+        <ThumbnailsPane>
+          {(m) => {
+            const isActive = state.currentPage === m.pageIndex + 1
+            return (
+              <div
+                key={m.pageIndex}
+                style={{
+                  position: "absolute",
+                  top: m.top,
+                  height: m.wrapperHeight,
+                }}
+                onClick={() => provides?.scrollToPage({ pageNumber: m.pageIndex + 1 })}
+                className="w-full cursor-pointer transition-colors hover:bg-gray-50"
+              >
+                <div
+                  style={{
+                    border: `2px solid ${isActive ? "#3b82f6" : "#d1d5db"}`,
+                    width: m.width,
+                    height: m.height,
+                  }}
+                  className="mx-auto"
+                >
+                  <ThumbImg meta={m} />
+                </div>
+                <span
+                  style={{ height: m.labelHeight }}
+                  className="flex items-center justify-center text-xs font-medium"
+                >
+                  {m.pageIndex + 1}
+                </span>
+              </div>
+            )
+          }}
+        </ThumbnailsPane>
+      </div>
+    </ScrollArea>
+  )
+}
+
+export default ThumbnailSidebar
diff --git a/components/pdf-container/toolbar.tsx b/components/pdf-container/toolbar.tsx
index 738b08a..e616296 100644
--- a/components/pdf-container/toolbar.tsx
+++ b/components/pdf-container/toolbar.tsx
@@ -4,6 +4,7 @@ import { useZoom } from "@embedpdf/plugin-zoom/react"
 import {
   Download,
   Highlighter,
+  Images,
   Redo2,
   Trash2,
   Underline,
@@ -11,10 +12,16 @@ import {
   ZoomIn,
   ZoomOut,
 } from "lucide-react"
+import { useSidebar } from "@/components/shadcn-ui/sidebar"
 
-const Toolbar = () => {
+interface ToolbarProps {
+  "data-testid"?: string
+}
+
+const Toolbar = ({ "data-testid": dataTestId }: ToolbarProps) => {
   const { provides: exportApi } = useExportCapability()
   const { provides: zoom } = useZoom()
+  const { toggleSidebar } = useSidebar()
 
   const {
     capability: annotationApi,
@@ -36,7 +43,10 @@ const Toolbar = () => {
   ]
 
   return (
-    <div className="mt-4 mb-4 flex flex-wrap items-center gap-2 rounded-lg border border-gray-200 bg-white p-2 shadow-sm">
+    <div
+      className="mt-4 mb-4 flex flex-wrap items-center gap-2 rounded-lg border border-gray-200 bg-white p-2 shadow-sm"
+      data-testid={dataTestId}
+    >
       {tools.map((tool) => (
         <button
           key={tool.id}
@@ -54,6 +64,16 @@ const Toolbar = () => {
 
       <div className="h-6 w-px bg-gray-200" />
 
+      <button
+        onClick={() => toggleSidebar()}
+        className="rounded-md bg-gray-100 px-3 py-1 text-sm font-medium transition-colors hover:bg-gray-200"
+        title="Toggle Thumbnails Sidebar"
+      >
+        <Images size={18} />
+      </button>
+
+      <div className="h-6 w-px bg-gray-200" />
+
       <button
         onClick={() => zoom?.zoomOut()}
         disabled={!zoom}
diff --git a/package-lock.json b/package-lock.json
index 49af26e..c695af3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
         "@embedpdf/plugin-scroll": "1.3.16",
         "@embedpdf/plugin-search": "1.3.16",
         "@embedpdf/plugin-selection": "1.3.16",
+        "@embedpdf/plugin-thumbnail": "^1.3.16",
         "@embedpdf/plugin-tiling": "1.3.16",
         "@embedpdf/plugin-viewport": "1.3.16",
         "@embedpdf/plugin-zoom": "1.3.16",
@@ -2668,6 +2669,23 @@
         "vue": ">=3.2.0"
       }
     },
+    "node_modules/@embedpdf/plugin-thumbnail": {
+      "version": "1.3.16",
+      "resolved": "https://registry.npmjs.org/@embedpdf/plugin-thumbnail/-/plugin-thumbnail-1.3.16.tgz",
+      "integrity": "sha512-FJK1k9OyxXk9Ced3+JGhGmWz4w7D7NdGM3DHyxtGOq+vDGMCw9q0Qzrr2wbmTW4ClYjOx2onC8bjaVTZ24xQyw==",
+      "license": "MIT",
+      "dependencies": {
+        "@embedpdf/models": "1.3.16"
+      },
+      "peerDependencies": {
+        "@embedpdf/core": "1.3.16",
+        "@embedpdf/plugin-render": "1.3.16",
+        "preact": "^10.26.4",
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "vue": ">=3.2.0"
+      }
+    },
     "node_modules/@embedpdf/plugin-tiling": {
       "version": "1.3.16",
       "resolved": "https://registry.npmjs.org/@embedpdf/plugin-tiling/-/plugin-tiling-1.3.16.tgz",
diff --git a/package.json b/package.json
index 0029780..ff64786 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "@embedpdf/plugin-scroll": "1.3.16",
     "@embedpdf/plugin-search": "1.3.16",
     "@embedpdf/plugin-selection": "1.3.16",
+    "@embedpdf/plugin-thumbnail": "1.3.16",
     "@embedpdf/plugin-tiling": "1.3.16",
     "@embedpdf/plugin-viewport": "1.3.16",
     "@embedpdf/plugin-zoom": "1.3.16",
diff --git a/tsconfig.json b/tsconfig.json
index c92614a..28b320c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -17,7 +17,7 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
-    "types": ["node", "@testing-library/jest-dom", "bun-types"],
+    "types": ["node", "@testing-library/jest-dom", "@types/bun"],
     "plugins": [
       {
         "name": "next"