From 3c3bf4dd8b4ed4045055156512ed0ca710f745bf Mon Sep 17 00:00:00 2001
From: Elijah <elijah.kuntz@gmail.com>
Date: Mon, 15 Jun 2026 16:19:19 -0700
Subject: [PATCH] Fix UI feedback (tile contrast, PDF thumbnails)

---
 frontend/src/app/globals.css               | 10 +++++-----
 frontend/src/components/FileExplorer.tsx   | 21 ++++++++++++++++++---
 frontend/src/components/ThumbnailImage.tsx | 10 ++++++++--
 3 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 07e57ed..cf7db78 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -57,11 +57,11 @@
    LIGHT THEME OVERRIDES
    ============================================ */
 [data-theme="light"] {
-  --color-bg-primary: #fafafa;
-  --color-bg-secondary: #ffffff;
-  --color-bg-tertiary: #f5f5f5;
-  --color-bg-elevated: #ffffff;
-  --color-bg-hover: #f0f0f5;
+  --color-bg-primary: #ffffff;
+  --color-bg-secondary: #f8f9fa;
+  --color-bg-tertiary: #f0f4f8;
+  --color-bg-elevated: #f0f4f8;
+  --color-bg-hover: #e8eaed;
   --color-bg-active: #e8e8f0;
   --color-bg-glass: rgba(255, 255, 255, 0.8);
 
diff --git a/frontend/src/components/FileExplorer.tsx b/frontend/src/components/FileExplorer.tsx
index f064d5f..40dde0c 100644
--- a/frontend/src/components/FileExplorer.tsx
+++ b/frontend/src/components/FileExplorer.tsx
@@ -1161,7 +1161,7 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
     const isVideo = ['mp4', 'mkv', 'avi', 'mov', 'webm', 'ogg'].includes(ext) || file.mime_type?.startsWith('video/');
     const isOffice = ['docx', 'doc', 'pptx', 'ppt', 'xlsx', 'xls'].includes(ext) || file.mime_type?.includes('officedocument');
     const isAudio = ['mp3', 'flac', 'wav', 'm4a', 'wma', 'aac'].includes(ext) || file.mime_type?.startsWith('audio/');
-    const isMedia = isImage || isVideo || isOffice || isAudio;
+    const isMedia = isImage || isVideo || isOffice || isAudio || ext === 'pdf';
 
     if (ext === 'pdf') {
       return (
@@ -1240,10 +1240,25 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
     })();
 
     if (isMedia && file.checksum && viewMode === 'grid') {
-      const docType = file.name.endsWith('.docx') ? 'docs' : file.name.endsWith('.pptx') ? 'slides' : (file.name.endsWith('.xlsx') || file.name.endsWith('.xls')) ? 'sheets' : null;
+      const docType = file.name.endsWith('.docx') ? 'docs' : file.name.endsWith('.pptx') ? 'slides' : (file.name.endsWith('.xlsx') || file.name.endsWith('.xls')) ? 'sheets' : file.name.endsWith('.pdf') ? 'pdf' : null;
+      // Use fallbackIcon for PDF too so it shows "PDF" text while loading
+      const currentFallback = ext === 'pdf' ? (
+        <div className={`${large ? 'w-20 h-20 rounded-2xl text-2xl' : 'w-5 h-5 rounded text-[6px] flex-shrink-0 aspect-square'} flex items-center justify-center font-black tracking-tighter shadow-sm text-white bg-[#ea4335]`}>
+          PDF
+        </div>
+      ) : fallbackIcon;
+
       return (
         <div className="relative w-full h-full flex items-center justify-center overflow-hidden rounded-md">
-          <ThumbnailImage checksum={file.checksum} fallbackIcon={fallbackIcon} downloadToken={downloadToken || ''} docType={docType} />
+          <ThumbnailImage checksum={file.checksum} fallbackIcon={currentFallback} downloadToken={downloadToken || ''} docType={docType} />
+        </div>
+      );
+    }
+
+    if (ext === 'pdf') {
+      return (
+        <div className={`${large ? 'w-20 h-20 rounded-2xl text-2xl' : 'w-5 h-5 rounded text-[6px] flex-shrink-0 aspect-square'} flex items-center justify-center font-black tracking-tighter shadow-sm text-white bg-[#ea4335]`}>
+          PDF
         </div>
       );
     }
diff --git a/frontend/src/components/ThumbnailImage.tsx b/frontend/src/components/ThumbnailImage.tsx
index f25b15b..b2782fb 100644
--- a/frontend/src/components/ThumbnailImage.tsx
+++ b/frontend/src/components/ThumbnailImage.tsx
@@ -5,7 +5,7 @@ interface ThumbnailImageProps {
   checksum: string;
   fallbackIcon: React.ReactNode;
   downloadToken: string;
-  docType?: 'docs' | 'slides' | 'sheets' | null;
+  docType?: 'docs' | 'slides' | 'sheets' | 'pdf' | null;
 }
 
 export default function ThumbnailImage({ checksum, fallbackIcon, downloadToken, docType }: ThumbnailImageProps) {
@@ -25,6 +25,8 @@ export default function ThumbnailImage({ checksum, fallbackIcon, downloadToken,
     ? 'w-[85%] max-h-[85%] aspect-[16/9] bg-white border border-gray-300 dark:border-gray-600 shadow-md'
     : docType === 'sheets'
     ? 'w-[85%] max-h-[85%] aspect-[1.4/1] bg-white border border-gray-300 dark:border-gray-600 shadow-md'
+    : docType === 'pdf'
+    ? 'w-full h-full rounded-md overflow-hidden bg-white'
     : 'w-full h-full';
 
   const imgElement = (
@@ -32,7 +34,11 @@ export default function ThumbnailImage({ checksum, fallbackIcon, downloadToken,
       key={key}
       src={downloadToken ? `${api.getThumbnailUrl(checksum, downloadToken)}${errorCount > 0 ? `&t=${key}` : ''}` : ''}
       alt=""
-      className={`object-contain ${docType ? 'w-full h-full object-cover mix-blend-multiply' : 'w-full h-full'}`}
+      className={`object-contain ${
+        docType === 'pdf' ? 'w-full h-full object-cover object-top' : 
+        docType ? 'w-full h-full object-cover mix-blend-multiply' : 
+        'w-full h-full'
+      }`}
       style={{ display: showFallback ? 'none' : 'block' }}
       onError={(e) => {
         if (errorCount < 20) {