feat: preview file

Author: PreciousOritsedere

app/components/FileItem.tsx

@@ -22,6 +22,7 @@ interface FileItemProps {
   onSelect: (file: FileItemData) => void;
   onDoubleClick: (file: FileItemData) => void;
   onRename?: (file: FileItemData) => void;
+  onPreview?: (file: FileItemData) => void;
   isSelected?: boolean;
 }
 
@@ -31,6 +32,7 @@ export default function FileItem({
   onSelect,
   onDoubleClick,
   onRename,
+  onPreview,
   isSelected = false,
 }: FileItemProps) {
   const [isHovered, setIsHovered] = useState(false);
@@ -124,6 +126,7 @@ export default function FileItem({
             file={file}
             position="top-right"
             onRename={onRename}
+            onPreview={onPreview}
             onDownload={(f) => console.log("Download:", f.name)}
             onCopy={(f) => console.log("Copy:", f.name)}
             onMove={(f) => console.log("Move:", f.name)}
@@ -171,6 +174,7 @@ export default function FileItem({
           file={file}
           position="right"
           onRename={onRename}
+          onPreview={onPreview}
           onDownload={(f) => console.log("Download:", f.name)}
           onCopy={(f) => console.log("Copy:", f.name)}
           onMove={(f) => console.log("Move:", f.name)}

app/components/FileItemMenu.tsx

@@ -9,6 +9,7 @@ import {
   DocumentDuplicateIcon,
   ArrowRightCircleIcon,
   TrashIcon,
+  EyeIcon,
 } from "@heroicons/react/24/outline";
 import { useClickOutside } from "../lib/hooks";
 import { FileItemData } from "./FileItem";
@@ -20,6 +21,7 @@ interface FileItemMenuProps {
   onCopy?: (file: FileItemData) => void;
   onMove?: (file: FileItemData) => void;
   onDelete?: (file: FileItemData) => void;
+  onPreview?: (file: FileItemData) => void;
   position?: "top-right" | "right";
 }
 
@@ -30,6 +32,7 @@ export default function FileItemMenu({
   onCopy,
   onMove,
   onDelete,
+  onPreview,
   position = "right",
 }: FileItemMenuProps) {
   const [showMenu, setShowMenu] = useState(false);
@@ -68,6 +71,18 @@ export default function FileItemMenu({
   };
 
   const menuItems = [
+    // Only show Preview for files, not folders
+    ...(file.type === "file"
+      ? [
+          {
+            label: "Preview",
+            icon: EyeIcon,
+            action: onPreview,
+            className: "text-gray-700 hover:bg-gray-100 border-b border-gray-100",
+            iconClassName: "text-gray-500",
+          },
+        ]
+      : []),
     {
       label: "Rename",
       icon: PencilIcon,

app/components/FileList.tsx

@@ -11,6 +11,7 @@ interface FileListProps {
   onFileSelect: (file: FileItemData) => void;
   onFileDoubleClick: (file: FileItemData) => void;
   onFileRename?: (file: FileItemData) => void;
+  onFilePreview?: (file: FileItemData) => void;
   selectedFileIds: string[];
 }
 
@@ -22,6 +23,7 @@ export default function FileList({
   onFileSelect,
   onFileDoubleClick,
   onFileRename,
+  onFilePreview,
   selectedFileIds,
 }: FileListProps) {
   const [view, setView] = useState<"grid" | "list">(() => {
@@ -56,6 +58,7 @@ export default function FileList({
                 onSelect={onFileSelect}
                 onDoubleClick={onFileDoubleClick}
                 onRename={onFileRename}
+                onPreview={onFilePreview}
                 isSelected={selectedFileIds.includes(file.id)}
               />
             ))}
@@ -70,6 +73,7 @@ export default function FileList({
                 onSelect={onFileSelect}
                 onDoubleClick={onFileDoubleClick}
                 onRename={onFileRename}
+                onPreview={onFilePreview}
                 isSelected={selectedFileIds.includes(file.id)}
               />
             ))}

app/components/FileManager.tsx

@@ -10,6 +10,7 @@ import FileList from "./FileList";
 import PermissionsDialog, { Permission } from "./PermissionsDialog";
 import NewFolderDialog from "./NewFolderDialog";
 import RenameDialog from "./RenameDialog";
+import PreviewModal from "./PreviewModal";
 import FileUploadHandler from "./FileUploadHandler";
 import { FileItemData } from "./FileItem";
 import { useSolidStorages, useBrowseStorage } from "../lib/hooks";
@@ -27,12 +28,12 @@ export default function FileManager() {
   const [isInitialized, setIsInitialized] = useState(false);
   const [savedUrl, setSavedUrl] = useState<string | null>(() => {
     if (typeof window === "undefined") return null;
-    
+
     try {
       const fullUrl = window.location.href;
       const urlObj = new URL(fullUrl);
       let urlParam = urlObj.searchParams.get("url");
-      
+
       if (urlParam) {
         try {
           urlParam = decodeURIComponent(urlParam);
@@ -41,7 +42,7 @@ export default function FileManager() {
         }
         return urlParam;
       }
-      
+
       const stored = sessionStorage.getItem("solid-file-manager-url");
       if (stored) {
         return stored;
@@ -54,11 +55,11 @@ export default function FileManager() {
 
   useEffect(() => {
     if (typeof window === "undefined") return;
-    
+
     const fullUrl = window.location.href;
     const urlObj = new URL(fullUrl);
     let urlParam = urlObj.searchParams.get("url");
-    
+
     if (urlParam) {
       try {
         urlParam = decodeURIComponent(urlParam);
@@ -80,22 +81,22 @@ export default function FileManager() {
 
     const restoreFromUrl = () => {
       let urlParam: string | null = savedUrl;
-      
+
       if (!urlParam && typeof window !== "undefined") {
         const fullUrl = window.location.href;
         const urlObj = new URL(fullUrl);
         urlParam = urlObj.searchParams.get("url");
-        
+
         if (!urlParam && window.location.search) {
           const urlParams = new URLSearchParams(window.location.search);
           urlParam = urlParams.get("url");
         }
       }
-      
+
       if (!urlParam) {
         urlParam = searchParams.get("url");
       }
-      
+
       if (urlParam) {
         try {
           let decodedUrl = urlParam;
@@ -104,7 +105,7 @@ export default function FileManager() {
           } catch (e) {
             decodedUrl = urlParam;
           }
-          
+
           const matchingStorage = storages.find((s) => {
             const storageUrl = s.url.endsWith("/") ? s.url : s.url + "/";
             const normalizedDecoded = decodedUrl.endsWith("/") ? decodedUrl : decodedUrl + "/";
@@ -114,29 +115,29 @@ export default function FileManager() {
 
           if (matchingStorage) {
             setSelectedStorageId(matchingStorage.id);
-            
+
             if (decodedUrl === matchingStorage.url || decodedUrl === matchingStorage.url + "/") {
               setCurrentPath("/");
             } else {
               setCurrentPath(decodedUrl);
             }
-            
+
             if (typeof window !== "undefined") {
               const encodedUrl = encodeURIComponent(decodedUrl);
               const params = new URLSearchParams();
               params.set("url", encodedUrl);
               const newUrl = `/?${params.toString()}`;
               router.replace(newUrl, { scroll: false });
             }
-            
+
             setIsInitialized(true);
             return;
           }
         } catch (e) {
           // Ignore errors
         }
       }
-      
+
       setIsInitialized(true);
     };
 
@@ -165,11 +166,11 @@ export default function FileManager() {
     const params = new URLSearchParams();
     params.set("url", encodedUrl);
     const newUrl = `/?${params.toString()}`;
-    
+
     if (typeof window !== "undefined") {
       sessionStorage.setItem("solid-file-manager-url", urlToEncode);
     }
-    
+
     router.replace(newUrl, { scroll: false });
   };
 
@@ -178,7 +179,7 @@ export default function FileManager() {
       ? storages.find((s) => s.id === selectedStorageId)?.url || null
       : currentPath
     : null;
-  
+
   const [refreshKey, setRefreshKey] = useState(0);
   const { files: browsedFiles, isLoading: isLoadingFiles, error: browseError } = useBrowseStorage(containerUrlToBrowse, refreshKey);
   const [permissionsDialogOpen, setPermissionsDialogOpen] = useState(false);
@@ -190,6 +191,8 @@ export default function FileManager() {
   const [fileUploadTrigger, setFileUploadTrigger] = useState(0);
   const [showRenameDialog, setShowRenameDialog] = useState(false);
   const [fileToRename, setFileToRename] = useState<FileItemData | null>(null);
+  const [showPreviewModal, setShowPreviewModal] = useState(false);
+  const [fileToPreview, setFileToPreview] = useState<FileItemData | null>(null);
 
   const handleFolderCreated = () => {
     setRefreshKey((prev) => prev + 1);
@@ -208,6 +211,11 @@ export default function FileManager() {
     setRefreshKey((prev) => prev + 1);
   };
 
+  const handlePreview = (file: FileItemData) => {
+    setFileToPreview(file);
+    setShowPreviewModal(true);
+  };
+
   const storageFiles: FileItemData[] = filterProfileItems(storages).map((storage) => ({
     id: storage.id,
     name: storage.name,
@@ -229,7 +237,7 @@ export default function FileManager() {
   const handleFileDoubleClick = (file: FileItemData) => {
     if (file.type === "folder") {
       const isStorage = storages.some(s => s.id === file.id);
-      
+
       if (!selectedStorageId && isStorage) {
         setSelectedStorageId(file.id);
         setCurrentPath("/");
@@ -317,7 +325,7 @@ export default function FileManager() {
       </AuthWrapper>
     );
   }
-  
+
   const isBrowsing = selectedStorageId && isLoadingFiles;
 
   if (storagesError) {
@@ -390,6 +398,7 @@ export default function FileManager() {
                 onFileSelect={handleFileSelect}
                 onFileDoubleClick={handleFileDoubleClick}
                 onFileRename={handleRename}
+                onFilePreview={handlePreview}
                 selectedFileIds={selectedFileIds}
               />
             )}
@@ -424,6 +433,14 @@ export default function FileManager() {
           file={fileToRename}
           onRenamed={handleRenamed}
         />
+        <PreviewModal
+          isOpen={showPreviewModal}
+          onClose={() => {
+            setShowPreviewModal(false);
+            setFileToPreview(null);
+          }}
+          file={fileToPreview}
+        />
         <FileUploadHandler
           currentContainerUrl={containerUrlToBrowse}
           onUploadComplete={handleFileUploaded}