From d8526afd45ae330b14588cec9e6cfb345236c55b Mon Sep 17 00:00:00 2001
From: Elijah <elijah.kuntz@gmail.com>
Date: Mon, 25 May 2026 15:04:11 -0700
Subject: [PATCH] Fix: thumbnail border styles and auto-refresh logic

---
 frontend/src/components/FileExplorer.tsx   | 11 +++++++++++
 frontend/src/components/OfficeHome.tsx     |  6 ++++++
 frontend/src/components/ThumbnailImage.tsx |  6 +++---
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/FileExplorer.tsx b/frontend/src/components/FileExplorer.tsx
index 3e64930..dd814fe 100644
--- a/frontend/src/components/FileExplorer.tsx
+++ b/frontend/src/components/FileExplorer.tsx
@@ -375,6 +375,17 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
     }
   }, [currentPath, activeSection]);
 
+  // Refresh files after editing to catch the debounced thumbnail generation
+  useEffect(() => {
+    if (!editingFile && activeSection === 'files') {
+      loadFiles(currentPath, true);
+      const timer = setTimeout(() => {
+        loadFiles(currentPath, true);
+      }, 12000);
+      return () => clearTimeout(timer);
+    }
+  }, [editingFile, activeSection, currentPath, loadFiles]);
+
   const loadFolderTree = useCallback(async () => {
     try {
       const data = await api.getFolderTree();
diff --git a/frontend/src/components/OfficeHome.tsx b/frontend/src/components/OfficeHome.tsx
index ec1fe19..b7a6516 100644
--- a/frontend/src/components/OfficeHome.tsx
+++ b/frontend/src/components/OfficeHome.tsx
@@ -122,6 +122,12 @@ export default function OfficeHome({ type, onFileSelect, onCreateBlank, onPinCha
   useEffect(() => {
     fetchFiles();
     api.createDownloadToken().then(setDownloadToken).catch(console.error);
+
+    // Refresh files after 12 seconds to catch any debounced thumbnail updates from recent edits
+    const timer = setTimeout(() => {
+      fetchFiles();
+    }, 12000);
+    return () => clearTimeout(timer);
   }, [type]);
 
   // Close context menu on click elsewhere
diff --git a/frontend/src/components/ThumbnailImage.tsx b/frontend/src/components/ThumbnailImage.tsx
index 8276e9e..65eab5c 100644
--- a/frontend/src/components/ThumbnailImage.tsx
+++ b/frontend/src/components/ThumbnailImage.tsx
@@ -18,10 +18,10 @@ export default function ThumbnailImage({ checksum, fallbackIcon, downloadToken }
         key={key}
         src={downloadToken ? `${api.getThumbnailUrl(checksum, downloadToken)}${errorCount > 0 ? `&t=${key}` : ''}` : ''}
         alt=""
-        className="w-full h-full object-contain"
-        style={{ display: showFallback ? 'none' : 'block' }}
+        className="w-full h-full object-contain bg-white border border-black/10 dark:border-white/10 shadow-sm rounded-sm"
+        style={{ display: showFallback ? 'none' : 'block', padding: '2px' }}
         onError={(e) => {
-          if (errorCount < 5) {
+          if (errorCount < 20) {
             e.currentTarget.style.display = 'none';
             setTimeout(() => {
               setErrorCount(c => c + 1);