From 1598057ed047fa2143dadf2207f44ecfbb71b90d Mon Sep 17 00:00:00 2001
From: Reece Browne <reecebrowne1995@gmail.com>
Date: Thu, 18 Sep 2025 08:44:57 +0100
Subject: [PATCH] Tweaks

---
 .../src/components/viewer/LocalEmbedPDF.tsx   | 60 ++++++-------------
 .../components/viewer/ThumbnailSidebar.tsx    | 19 +++---
 2 files changed, 27 insertions(+), 52 deletions(-)

diff --git a/frontend/src/components/viewer/LocalEmbedPDF.tsx b/frontend/src/components/viewer/LocalEmbedPDF.tsx
index f9a8e3fc9..a496e0798 100644
--- a/frontend/src/components/viewer/LocalEmbedPDF.tsx
+++ b/frontend/src/components/viewer/LocalEmbedPDF.tsx
@@ -20,6 +20,8 @@ import { RotatePluginPackage, Rotate } from '@embedpdf/plugin-rotate/react';
 import { Rotation } from '@embedpdf/models';
 import { CustomSearchLayer } from './CustomSearchLayer';
 import { ZoomAPIBridge } from './ZoomAPIBridge';
+import ToolLoadingFallback from '../tools/ToolLoadingFallback';
+import { Center, Stack, Text } from '@mantine/core';
 import { ScrollAPIBridge } from './ScrollAPIBridge';
 import { SelectionAPIBridge } from './SelectionAPIBridge';
 import { PanAPIBridge } from './PanAPIBridge';
@@ -121,55 +123,31 @@ export function LocalEmbedPDF({ file, url }: LocalEmbedPDFProps) {
   // Early return if no file or URL provided
   if (!file && !url) {
     return (
-      <div style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        height: '100%',
-        background: 'var(--bg-surface)',
-        color: 'var(--text-secondary)',
-      }}>
-        <div style={{ textAlign: 'center' }}>
-          <div style={{ fontSize: '24px', marginBottom: '16px' }}>📄</div>
-          <div>No PDF provided</div>
-        </div>
-      </div>
+      <Center h="100%" w="100%">
+        <Stack align="center" gap="md">
+          <div style={{ fontSize: '24px' }}>📄</div>
+          <Text c="dimmed" size="sm">
+            No PDF provided
+          </Text>
+        </Stack>
+      </Center>
     );
   }
 
   if (isLoading || !engine || !pdfUrl) {
-    return (
-      <div style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        height: '100%',
-        background: 'var(--bg-surface)',
-        color: 'var(--text-secondary)',
-      }}>
-        <div style={{ textAlign: 'center' }}>
-          <div style={{ fontSize: '24px', marginBottom: '16px' }}>⏳</div>
-          <div>Loading PDF Engine...</div>
-        </div>
-      </div>
-    );
+    return <ToolLoadingFallback toolName="PDF Engine" />;
   }
 
   if (error) {
     return (
-      <div style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        height: '100%',
-        background: 'var(--bg-surface)',
-        color: 'var(--color-red-500)',
-      }}>
-        <div style={{ textAlign: 'center' }}>
-          <div style={{ fontSize: '24px', marginBottom: '16px' }}>❌</div>
-          <div>Error loading PDF engine: {error.message}</div>
-        </div>
-      </div>
+      <Center h="100%" w="100%">
+        <Stack align="center" gap="md">
+          <div style={{ fontSize: '24px' }}>❌</div>
+          <Text c="red" size="sm" style={{ textAlign: 'center' }}>
+            Error loading PDF engine: {error.message}
+          </Text>
+        </Stack>
+      </Center>
     );
   }
 
diff --git a/frontend/src/components/viewer/ThumbnailSidebar.tsx b/frontend/src/components/viewer/ThumbnailSidebar.tsx
index 8a9b42bda..c6da278ad 100644
--- a/frontend/src/components/viewer/ThumbnailSidebar.tsx
+++ b/frontend/src/components/viewer/ThumbnailSidebar.tsx
@@ -15,6 +15,13 @@ export function ThumbnailSidebar({ visible, onToggle: _onToggle }: ThumbnailSide
   const scrollState = getScrollState();
   const thumbnailAPI = getThumbnailAPI();
 
+  // Clear thumbnails when sidebar closes
+  useEffect(() => {
+    if (!visible) {
+      setThumbnails({});
+    }
+  }, [visible]);
+
   // Generate thumbnails when sidebar becomes visible
   useEffect(() => {
     if (!visible || scrollState.totalPages === 0) return;
@@ -45,7 +52,6 @@ export function ThumbnailSidebar({ visible, onToggle: _onToggle }: ThumbnailSide
           
         } catch (error) {
           console.error('Failed to generate thumbnail for page', pageIndex + 1, error);
-          // Set a placeholder or error state
           setThumbnails(prev => ({
             ...prev,
             [pageIndex]: 'error'
@@ -55,16 +61,7 @@ export function ThumbnailSidebar({ visible, onToggle: _onToggle }: ThumbnailSide
     };
 
     generateThumbnails();
-
-    // Cleanup blob URLs when component unmounts
-    return () => {
-      Object.values(thumbnails).forEach(url => {
-        if (url.startsWith('blob:')) {
-          URL.revokeObjectURL(url);
-        }
-      });
-    };
-  }, [visible, scrollState.totalPages, thumbnailAPI]);
+  }, [visible, scrollState.totalPages, thumbnailAPI, thumbnails]);
 
   const handlePageClick = (pageIndex: number) => {
     const pageNumber = pageIndex + 1; // Convert to 1-based