add thumbnail generation

src/components/mixed/MixedView.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState, useCallback } from 'react'
+import { useEffect, useState, useCallback, useRef } from 'react'
 import type { DirectoryListing, FileEntry } from '@/types'
 import VideoPlayerModal from './VideoPlayerModal'
 import ImageLightbox from './ImageLightbox'
@@ -126,8 +126,8 @@ export default function MixedView({ libraryId, initialPath }: Props) {
               {breadcrumbs.length > 0 && (
                 <button
                   onClick={navigateUp}
-                  className="flex flex-col items-center justify-center gap-2 rounded-xl border p-4 text-xs transition-colors aspect-square"
-                  style={{ borderColor: 'var(--border)', backgroundColor: 'var(--surface)', color: 'var(--text-secondary)' }}
+                  className="flex flex-col items-center justify-center gap-2 rounded-xl border p-4 text-xs transition-colors"
+                  style={{ borderColor: 'var(--border)', backgroundColor: 'var(--surface)', color: 'var(--text-secondary)', aspectRatio: '1 / 1' }}
                   onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)')}
                   onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)')}
                 >
@@ -154,43 +154,96 @@ export default function MixedView({ libraryId, initialPath }: Props) {
 }
 
 function EntryTile({ entry, onOpen }: { entry: FileEntry; onOpen: (e: FileEntry) => void }) {
-  const icon = entry.type === 'directory'
-    ? '📁'
-    : entry.mediaType === 'video'
-    ? '▶'
-    : entry.mediaType === 'image'
-    ? '🖼'
-    : '📄'
+  type ImgState = 'loading' | 'loaded' | 'error'
+  const [imgState, setImgState] = useState<ImgState>(
+    entry.thumbnailUrl ? 'loading' : 'error'
+  )
+  // Reset image state when the entry changes (e.g. navigating to a new folder)
+  const prevUrl = useRef(entry.thumbnailUrl)
+  if (prevUrl.current !== entry.thumbnailUrl) {
+    prevUrl.current = entry.thumbnailUrl
+    if (entry.thumbnailUrl) setImgState('loading')
+    else setImgState('error')
+  }
 
-  const isVideo = entry.type === 'file' && entry.mediaType === 'video'
+  const isDir = entry.type === 'directory'
+  const isVideo = entry.mediaType === 'video'
+  const showThumbnail = !isDir && imgState !== 'error' && entry.thumbnailUrl
+
+  // Icon shown when no thumbnail available or while loading
+  const icon = isDir ? '📁' : isVideo ? '▶' : entry.mediaType === 'image' ? '🖼' : '📄'
 
   return (
     <button
       onClick={() => onOpen(entry)}
-      className="group flex flex-col items-center gap-2 rounded-xl border p-3 text-xs transition-all text-center overflow-hidden"
-      style={{ borderColor: 'var(--border)', backgroundColor: 'var(--surface)' }}
+      className="group relative flex flex-col rounded-xl border overflow-hidden text-xs transition-all focus:outline-none text-left"
+      style={{ borderColor: 'var(--border)', backgroundColor: 'var(--surface)', aspectRatio: '1 / 1' }}
       onMouseEnter={(e) => {
-        ;(e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface-hover)'
         ;(e.currentTarget as HTMLElement).style.borderColor = 'var(--accent)'
+        ;(e.currentTarget as HTMLElement).style.transform = 'translateY(-1px)'
       }}
       onMouseLeave={(e) => {
-        ;(e.currentTarget as HTMLElement).style.backgroundColor = 'var(--surface)'
         ;(e.currentTarget as HTMLElement).style.borderColor = 'var(--border)'
+        ;(e.currentTarget as HTMLElement).style.transform = 'translateY(0)'
       }}
     >
-      <span
-        className="text-3xl"
-        style={isVideo ? { color: 'var(--accent)' } : undefined}
+      {/* Thumbnail image — hidden until loaded */}
+      {entry.thumbnailUrl && (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          src={entry.thumbnailUrl}
+          alt=""
+          aria-hidden
+          className="absolute inset-0 w-full h-full object-cover transition-opacity duration-300"
+          style={{ opacity: imgState === 'loaded' ? 1 : 0 }}
+          onLoad={() => setImgState('loaded')}
+          onError={() => setImgState('error')}
+        />
+      )}
+
+      {/* Skeleton pulse shown while image is loading */}
+      {imgState === 'loading' && (
+        <div
+          className="absolute inset-0 animate-pulse"
+          style={{ backgroundColor: 'var(--border)' }}
+        />
+      )}
+
+      {/* Icon fallback — shown for dirs, other files, and failed thumbnails */}
+      {!showThumbnail && imgState !== 'loading' && (
+        <div className="absolute inset-0 flex items-center justify-center text-3xl"
+          style={isVideo && imgState === 'error' ? { color: 'var(--accent)' } : undefined}>
+          {icon}
+        </div>
+      )}
+
+      {/* Bottom label — always shown */}
+      <div
+        className="absolute bottom-0 left-0 right-0 px-2 py-1.5"
+        style={{
+          background: showThumbnail
+            ? 'linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%)'
+            : undefined,
+        }}
       >
-        {icon}
-      </span>
-      <span
-        className="w-full truncate text-center"
-        style={{ color: 'var(--text-primary)' }}
-        title={entry.name}
-      >
-        {entry.name}
-      </span>
+        <span
+          className="block w-full truncate"
+          style={{ color: showThumbnail ? '#fff' : 'var(--text-primary)' }}
+          title={entry.name}
+        >
+          {entry.name}
+        </span>
+      </div>
+
+      {/* Video play badge — top-right overlay */}
+      {isVideo && imgState === 'loaded' && (
+        <div
+          className="absolute top-2 right-2 w-6 h-6 rounded-full flex items-center justify-center text-xs"
+          style={{ backgroundColor: 'rgba(0,0,0,0.55)', color: '#fff' }}
+        >
+          ▶
+        </div>
+      )}
     </button>
   )
 }
@@ -201,8 +254,8 @@ function LoadingSkeleton() {
       {Array.from({ length: 12 }).map((_, i) => (
         <div
           key={i}
-          className="rounded-xl aspect-square animate-pulse"
-          style={{ backgroundColor: 'var(--surface)' }}
+          className="rounded-xl animate-pulse"
+          style={{ backgroundColor: 'var(--surface)', aspectRatio: '1 / 1' }}
         />
       ))}
     </div>