feat: refine path display and layout adjustments for folder and media grids

- Enhanced path display logic to accommodate longer directory names and improved truncation for better clarity.
- Adjusted grid item dimensions and padding for a more consistent and responsive layout across components.
- Updated title formatting and line clamping to enhance readability and prevent overflow in media item displays.

src/app/folder-viewer/page.tsx

@@ -107,13 +107,23 @@ const FolderViewerPage = () => {
     const directory = path.substring(0, lastSeparatorIndex);
     const filename = path.substring(lastSeparatorIndex + 1);
     
-    // If directory is short enough, show it all
-    if (directory.length <= 30) {
-      return `${directory}/${filename}`;
+    // If the full path is short enough, show it all
+    if (path.length <= 80) {
+      return path;
     }
     
-    // Truncate directory with ellipsis in the middle
-    const maxDirLength = 25;
+    // If directory is short enough, show directory + truncated filename
+    if (directory.length <= 50) {
+      const maxFilenameLength = 80 - directory.length - 1; // -1 for "/"
+      if (filename.length <= maxFilenameLength) {
+        return `${directory}/${filename}`;
+      } else {
+        return `${directory}/${filename.substring(0, maxFilenameLength - 3)}...`;
+      }
+    }
+    
+    // For longer paths, show more of the directory structure
+    const maxDirLength = 45;
     const startLength = Math.floor(maxDirLength / 2);
     const endLength = maxDirLength - startLength - 3; // -3 for "..."
     
@@ -121,7 +131,25 @@ const FolderViewerPage = () => {
       ? `${directory.substring(0, startLength)}...${directory.substring(directory.length - endLength)}`
       : directory;
     
-    return `${truncatedDir}/${filename}`;
+    // Add filename if there's space
+    const remainingSpace = 80 - truncatedDir.length - 1; // -1 for "/"
+    if (remainingSpace > 3) {
+      return `${truncatedDir}/${filename.length > remainingSpace ? filename.substring(0, remainingSpace - 3) + '...' : filename}`;
+    }
+    
+    return `${truncatedDir}/...`;
+  };
+
+  const formatTitle = (title: string) => {
+    if (!title) return '';
+    
+    // If title is short enough, return as is
+    if (title.length <= 40) {
+      return title;
+    }
+    
+    // For longer titles, truncate to prevent awkward third-line display
+    return title.length > 60 ? title.substring(0, 60) + '...' : title;
   };
 
   const getLibraryRoot = (currentPath: string): string | null => {
@@ -351,7 +379,7 @@ const FolderViewerPage = () => {
               </h1>
             </div>
 
-            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-4">
+            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4">
               {error && (
                 <div className="col-span-full text-center py-12">
                   <div className="max-w-sm mx-auto">
@@ -374,9 +402,9 @@ const FolderViewerPage = () => {
               
               {!error && Array.isArray(items) && items.map((item) => (
                 <div key={item.name} 
-                     className={`group relative bg-white dark:bg-slate-800 rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1 overflow-hidden ${(item.type === 'video' || item.type === 'photo') ? 'cursor-pointer' : ''}`}>
+                     className={`group relative bg-white dark:bg-slate-800 rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1 overflow-hidden min-h-[240px] ${(item.type === 'video' || item.type === 'photo') ? 'cursor-pointer' : ''}`}>
                   <Link href={item.isDirectory ? `/folder-viewer?path=${item.path}` : '#'} 
-                        className="block"
+                        className="block h-full flex flex-col"
                         onClick={(e) => {
                           if (item.type === 'video' && item.id) {
                             e.preventDefault();
@@ -387,7 +415,7 @@ const FolderViewerPage = () => {
                             handlePhotoClick(item, photoIndex);
                           }
                         }}>
-                    <div className="aspect-square relative overflow-hidden">
+                    <div className="aspect-[4/3] relative overflow-hidden">
                       {item.isDirectory ? (
                         <div className="absolute inset-0 bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-blue-900/20 dark:to-indigo-900/20 flex items-center justify-center">
                           <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center shadow-lg"
@@ -396,44 +424,29 @@ const FolderViewerPage = () => {
                           </div>
                         </div>
                       ) : isMediaFile(item) ? (
-                        <div className={`relative overflow-hidden ${item.type === 'video' ? 'aspect-video' : 'aspect-[4/3]'}`}>
+                        <div className="relative overflow-hidden aspect-[4/3] bg-black rounded-t-xl">
                           <img
                             src={item.thumbnail || (item.type === 'video' ? '/placeholder-video.svg' : '/placeholder-photo.svg')}
                             alt={item.name}
-                            className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+                            className="w-full h-full object-contain transition-transform duration-300 group-hover:scale-105"
                           />
-                          <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
-                          <div className="absolute bottom-2 left-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
-                            {item.type === 'video' ? (
-                              <div className="bg-white/90 backdrop-blur-sm rounded-full p-2 shadow-lg">
-                                <Film className="h-4 w-4 text-slate-800" />
-                              </div>
-                            ) : (
-                              <div className="bg-white/90 backdrop-blur-sm rounded-full p-2 shadow-lg">
-                                <Image className="h-4 w-4 text-slate-800" />
-                              </div>
-                            )}
-                          </div>
                           {item.type === 'video' && (
                             <>
-                              {/* Always visible small play icon */}
-                              <div className="absolute top-2 right-2 bg-black/70 backdrop-blur-sm rounded-full p-1.5">
-                                <Play className="h-3 w-3 text-white" />
+                              <div className="absolute top-2 right-2 bg-black/60 text-white rounded-full p-1">
+                                <Play className="h-3 w-3" />
                               </div>
-                              {/* Large play button on hover */}
-                              <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
-                                <div className="bg-white/90 backdrop-blur-sm rounded-full p-3 shadow-lg">
-                                  <Play className="h-6 w-6 text-slate-800" />
-                                </div>
-                              </div>
-                              {/* Loading overlay when video is being opened */}
                               {isVideoLoading && selectedVideo?.id === item.id && (
-                                <div className="absolute inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center">
-                                  <div className="animate-spin rounded-full h-8 w-8 border-2 border-white border-t-transparent"></div>
+                                <div className="absolute inset-0 bg-black/50 flex items-center justify-center">
+                                  <div className="animate-spin rounded-full h-6 w-6 border-2 border-white border-t-transparent"></div>
                                 </div>
                               )}
                             </>
                           )}
+                          {item.type === 'photo' && (
+                            <div className="absolute top-2 right-2 bg-black/60 text-white rounded-full p-1">
+                              <Image className="h-3 w-3" />
+                            </div>
+                          )}
                         </div>
                       ) : (
                         <div className="absolute inset-0 bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-700 dark:to-slate-800 flex items-center justify-center"
@@ -445,32 +458,27 @@ const FolderViewerPage = () => {
                         </div>
                       )}
                     </div>
-                    <div className="p-3">
-                      <p className="text-sm font-semibold text-slate-900 dark:text-slate-100 truncate mb-1">{item.name}</p>
+                    <div className="p-2.5 flex flex-col flex-1 bg-slate-50 dark:bg-slate-800/50 border-t border-slate-200 dark:border-slate-700">
+                      <p className="text-sm font-semibold text-slate-900 dark:text-slate-100 line-clamp-2 leading-tight mb-1 min-h-[2rem]" title={item.name}>{formatTitle(item.name)}</p>
                       
-                      {/* Star Rating for media files */}
+                      <div className="flex items-center justify-between text-xs mb-1">
+                        <span className="text-slate-600 dark:text-slate-400">{formatFileSize(item.size)}</span>
                         {isMediaFile(item) && (item.avg_rating || 0) > 0 && (
-                        <div className="mb-2">
                           <StarRating 
                             rating={item.avg_rating || 0}
                             count={item.star_count || 0}
-                            size="sm"
-                            showCount={true}
+                            size="xs"
+                            showCount={false}
                           />
-                        </div>
                         )}
+                      </div>
                       
-                      <div className="flex items-center justify-between">
-                        <p className="text-xs text-slate-600 dark:text-slate-400">{formatFileSize(item.size)}</p>
-                        {!item.isDirectory && (
                       <p 
-                            className="text-xs text-slate-500 dark:text-slate-500 truncate ml-2 cursor-help"
+                        className="text-xs text-slate-500 dark:text-slate-400 line-clamp-2 leading-tight cursor-help flex-1"
                         title={item.path}
                       >
                         {formatFilePath(item.path)}
                       </p>
-                        )}
-                      </div>
                     </div>
                   </Link>
                 </div>

src/components/infinite-virtual-grid.tsx

@@ -27,7 +27,7 @@ interface InfiniteVirtualGridProps {
   onRate: (id: number, rating: number) => Promise<void>;
 }
 
-const ITEM_HEIGHT = 300;
+const ITEM_HEIGHT = 220;
 const ITEMS_PER_BATCH = 50;
 const BUFFER_SIZE = 200;
 
@@ -70,11 +70,11 @@ export default function InfiniteVirtualGrid({
     const directory = path.substring(0, lastSeparatorIndex);
     const filename = path.substring(lastSeparatorIndex + 1);
     
-    if (directory.length <= 30) {
+    if (directory.length <= 40) {
       return `${directory}/${filename}`;
     }
     
-    const maxDirLength = 25;
+    const maxDirLength = 35;
     const startLength = Math.floor(maxDirLength / 2);
     const endLength = maxDirLength - startLength - 3;
     
@@ -354,7 +354,7 @@ export default function InfiniteVirtualGrid({
           className="group hover:shadow-lg transition-all duration-300 hover:-translate-y-1 cursor-pointer border-border overflow-hidden h-full"
           onClick={() => onItemClick(item)}
         >
-          <div className={`relative overflow-hidden bg-muted ${type === 'video' ? 'aspect-video' : 'aspect-square'}`}>
+          <div className="relative overflow-hidden bg-muted aspect-video">
             <img
               src={item.thumbnail || (type === 'video' ? "/placeholder-video.svg" : "/placeholder-photo.svg")}
               alt={item.title}
@@ -384,34 +384,54 @@ export default function InfiniteVirtualGrid({
             </div>
           </div>
           
-          <CardContent className="p-3">
-            <h3 className="font-medium text-foreground text-sm line-clamp-2 mb-2 group-hover:text-primary transition-colors">
+          <CardContent className="p-2.5">
+            <div className="flex items-start justify-between min-h-[2rem]">
+              <div className="flex-1 min-w-0">
+                <h3 className="font-medium text-foreground text-xs line-clamp-2 group-hover:text-primary transition-colors leading-tight">
                   {item.title || item.path.split('/').pop()}
                 </h3>
                 
                 {(item.avg_rating > 0 || item.star_count > 0) && (
-              <div className="mb-2">
+                  <div className="mt-0.5">
                     <StarRating 
                       rating={item.avg_rating || 0} 
                       count={item.star_count}
-                  size="sm"
-                  showCount={true}
+                      size="xs"
+                      showCount={false}
                     />
                   </div>
                 )}
+              </div>
               
-            <div className="flex items-center gap-2 text-xs text-muted-foreground">
+              <div className="flex gap-1 ml-1 flex-shrink-0">
+                {type === 'video' && item.bookmark_count > 0 && (
+                  <div className="text-xs text-yellow-500">
+                    <Bookmark className="h-2.5 w-2.5 fill-yellow-500" />
+                  </div>
+                )}
+              </div>
+            </div>
+            
+            <div className="mt-1 space-y-0.5">
+              <div className="flex items-center justify-between text-xs text-muted-foreground">
                 <div className="flex items-center gap-1">
-                <HardDrive className="h-3 w-3" />
+                  <HardDrive className="h-2.5 w-2.5" />
                   <span>{formatFileSize(item.size)}</span>
                 </div>
+                {type === 'video' && item.bookmark_count > 0 && (
+                  <span className="text-xs text-muted-foreground">
+                    {item.bookmark_count}
+                  </span>
+                )}
               </div>
+              
               <p 
-              className="text-xs text-muted-foreground mt-1 line-clamp-1 cursor-help"
+                className="text-xs text-muted-foreground line-clamp-1 cursor-help hover:text-foreground transition-colors"
                 title={item.path}
               >
                 {formatFilePath(item.path)}
               </p>
+            </div>
           </CardContent>
         </Card>
       </div>

src/components/star-rating.tsx

@@ -6,7 +6,7 @@ import { cn } from '@/lib/utils';
 interface StarRatingProps {
   rating: number;
   count?: number;
-  size?: 'sm' | 'md' | 'lg';
+  size?: 'xs' | 'sm' | 'md' | 'lg';
   showCount?: boolean;
   interactive?: boolean;
   onRate?: (rating: number) => void;
@@ -23,6 +23,7 @@ export function StarRating({
   className 
 }: StarRatingProps) {
   const sizeClasses = {
+    xs: 'h-2.5 w-2.5',
     sm: 'h-3 w-3',
     md: 'h-4 w-4',
     lg: 'h-5 w-5'

src/components/video-viewer.tsx

@@ -242,8 +242,34 @@ export default function VideoViewer({
 
           {/* Title overlay */}
           <div className={`absolute top-0 left-0 right-0 bg-gradient-to-b from-black/60 to-transparent p-4 transition-opacity duration-300 ${showControls ? 'opacity-100' : 'opacity-0'}`}>
-            <div className="flex items-center justify-between">
             <h2 className="text-white text-lg font-semibold">{getVideoTitle()}</h2>
+          </div>
+
+          {/* Controls overlay */}
+          <div className={`absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-4 transition-opacity duration-300 ${showControls ? 'opacity-100' : 'opacity-0'}`}>
+            {/* Progress bar */}
+            <div className="mb-4">
+              <input
+                type="range"
+                min="0"
+                max={duration || 0}
+                value={currentTime}
+                onChange={handleSeek}
+                className="w-full h-1 bg-gray-600 rounded-lg appearance-none cursor-pointer slider"
+              />
+              <div className="flex justify-between text-white text-sm mt-1">
+                <span>{formatTime(currentTime)}</span>
+                <span>{formatTime(duration)}</span>
+              </div>
+            </div>
+
+            {/* Video Info Bar (similar to photo viewer) */}
+            <div className="bg-black/70 backdrop-blur-sm rounded-lg p-4 mb-2">
+              <div className="flex items-center justify-between">
+                <div>
+                  <h3 className="text-white font-medium">{getVideoTitle()}</h3>
+                  <p className="text-gray-300 text-sm">{getVideoSize()}</p>
+                </div>
                 {(showBookmarks || showRatings) && (
                   <div className="flex items-center gap-4">
                     {showBookmarks && (
@@ -272,24 +298,6 @@ export default function VideoViewer({
               </div>
             </div>
 
-          {/* Controls overlay */}
-          <div className={`absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-4 transition-opacity duration-300 ${showControls ? 'opacity-100' : 'opacity-0'}`}>
-            {/* Progress bar */}
-            <div className="mb-4">
-              <input
-                type="range"
-                min="0"
-                max={duration || 0}
-                value={currentTime}
-                onChange={handleSeek}
-                className="w-full h-1 bg-gray-600 rounded-lg appearance-none cursor-pointer slider"
-              />
-              <div className="flex justify-between text-white text-sm mt-1">
-                <span>{formatTime(currentTime)}</span>
-                <span>{formatTime(duration)}</span>
-              </div>
-            </div>
-
             {/* Control buttons */}
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-4">

src/components/virtualized-media-grid.tsx

@@ -80,11 +80,11 @@ export default function VirtualizedMediaGrid({
     const directory = path.substring(0, lastSeparatorIndex);
     const filename = path.substring(lastSeparatorIndex + 1);
     
-    if (directory.length <= 30) {
+    if (directory.length <= 40) {
       return `${directory}/${filename}`;
     }
     
-    const maxDirLength = 25;
+    const maxDirLength = 35;
     const startLength = Math.floor(maxDirLength / 2);
     const endLength = maxDirLength - startLength - 3;
     
@@ -231,13 +231,13 @@ export default function VirtualizedMediaGrid({
             </div>
           </div>
           
-          <CardContent className="p-3">
-            <h3 className="font-medium text-foreground text-sm line-clamp-2 mb-2 group-hover:text-primary transition-colors">
+          <CardContent className="p-2.5">
+            <h3 className="font-medium text-foreground text-sm line-clamp-2 mb-1.5 group-hover:text-primary transition-colors">
               {item.title || item.path.split('/').pop()}
             </h3>
             
             {(item.avg_rating > 0 || item.star_count > 0) && (
-              <div className="mb-2">
+              <div className="mb-1.5">
                 <StarRating 
                   rating={item.avg_rating || 0} 
                   count={item.star_count}