feat: added a function to give unique icons based on content type of resource

Author: PreciousOritsedere

app/lib/helpers/fileIcons.tsx

@@ -6,20 +6,130 @@ import {
   FolderIcon,
   PhotoIcon,
   DocumentIcon,
+  DocumentTextIcon,
+  CodeBracketIcon,
+  VideoCameraIcon,
+  MusicalNoteIcon,
+  PresentationChartBarIcon,
+  TableCellsIcon,
+  ArchiveBoxIcon,
 } from "@heroicons/react/24/outline";
 
 export type FileType = "folder" | "file" | "image" | "document" | "other";
 
+/**
+ * Determines the icon based on MIME type
+ * @param mimeType - The MIME type of the file
+ * @returns React component for the file icon with appropriate color
+ */
+function getIconFromMimeType(mimeType: string) {
+  const normalizedMime = mimeType.toLowerCase().split(";")[0].trim();
+
+  // Images
+  if (normalizedMime.startsWith("image/")) {
+    return <PhotoIcon className="h-6 w-6 text-green-500" />;
+  }
+
+  // PDFs
+  if (normalizedMime === "application/pdf") {
+    return <DocumentTextIcon className="h-6 w-6 text-blue-500" />;
+  }
+
+  // Videos
+  if (normalizedMime.startsWith("video/")) {
+    return <VideoCameraIcon className="h-6 w-6 text-purple-500" />;
+  }
+
+  // Audio
+  if (normalizedMime.startsWith("audio/")) {
+    return <MusicalNoteIcon className="h-6 w-6 text-pink-500" />;
+  }
+
+  // Code files
+  if (
+    normalizedMime.startsWith("text/") ||
+    normalizedMime === "application/json" ||
+    normalizedMime === "application/xml" ||
+    normalizedMime === "text/xml" ||
+    normalizedMime === "application/javascript" ||
+    normalizedMime === "application/x-javascript" ||
+    normalizedMime === "text/javascript" ||
+    normalizedMime === "application/x-sh" ||
+    normalizedMime === "application/x-yaml" ||
+    normalizedMime === "text/yaml" ||
+    normalizedMime === "text/css" ||
+    normalizedMime === "text/html" ||
+    normalizedMime === "text/markdown" ||
+    normalizedMime === "text/plain"
+  ) {
+    return <CodeBracketIcon className="h-6 w-6 text-orange-500" />;
+  }
+
+  // Office documents - Word
+  if (
+    normalizedMime === "application/msword" ||
+    normalizedMime === "application/vnd.openxmlformats-officedocument.wordprocessingml.document" ||
+    normalizedMime === "application/vnd.ms-word.document.macroEnabled.12"
+  ) {
+    return <DocumentIcon className="h-6 w-6 text-blue-600" />;
+  }
+
+  // Office documents - Excel
+  if (
+    normalizedMime === "application/vnd.ms-excel" ||
+    normalizedMime === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+  ) {
+    return <TableCellsIcon className="h-6 w-6 text-green-600" />;
+  }
+
+  // Office documents - PowerPoint
+  if (
+    normalizedMime === "application/vnd.ms-powerpoint" ||
+    normalizedMime === "application/vnd.openxmlformats-officedocument.presentationml.presentation"
+  ) {
+    return <PresentationChartBarIcon className="h-6 w-6 text-orange-600" />;
+  }
+
+  // Archives
+  if (
+    normalizedMime === "application/zip" ||
+    normalizedMime === "application/x-zip-compressed" ||
+    normalizedMime === "application/x-rar-compressed" ||
+    normalizedMime === "application/x-tar" ||
+    normalizedMime === "application/gzip" ||
+    normalizedMime === "application/x-7z-compressed"
+  ) {
+    return <ArchiveBoxIcon className="h-6 w-6 text-amber-600" />;
+  }
+
+  // CSV files
+  if (normalizedMime === "text/csv" || normalizedMime === "application/x-csv") {
+    return <TableCellsIcon className="h-6 w-6 text-green-500" />;
+  }
+
+  // Default document icon for other types
+  return <DocumentIcon className="h-6 w-6 text-blue-500" />;
+}
+
 /**
  * Returns the appropriate icon component for a given file type
  * @param type - The type of file (folder, image, document, etc.)
- * @param mimeType - Optional MIME type for more specific icon selection
+ * @param mimeType - Optional MIME type for more specific icon selection (takes priority)
  * @returns React component for the file icon
  */
 export function getFileIcon(type: FileType, mimeType?: string) {
+  // Always show folder icon for folders
+  if (type === "folder") {
+    return <FolderIcon className="h-6 w-6 text-yellow-500" />;
+  }
+
+  // If MIME type is provided, use it for more specific icon selection
+  if (mimeType) {
+    return getIconFromMimeType(mimeType);
+  }
+
+  // Fallback to type-based icons if no MIME type
   switch (type) {
-    case "folder":
-      return <FolderIcon className="h-6 w-6 text-yellow-500" />;
     case "image":
       return <PhotoIcon className="h-6 w-6 text-green-500" />;
     case "document":

app/lib/hooks/useBrowseStorage.ts

@@ -81,6 +81,7 @@ export function useBrowseStorage(containerUrl: string | null, refreshKey?: numbe
             let name = extractNameFromUrl(absoluteUrl);
             let lastModified: Date | undefined;
             let size: number | undefined;
+            let mimeType: string | undefined;
 
             // Check RDF metadata from container dataset- using getThing because it reads a resource (thing) from the RDF dataset to access properties like dcterms:title, rdfs:label, dcterms:modified, posix:size
             const itemThing = getThing(containerDataset, absoluteUrl);
@@ -132,6 +133,20 @@ export function useBrowseStorage(containerUrl: string | null, refreshKey?: numbe
                 // otherwise only treat as container if URL explicitly ends with "/"
                 finalIsContainer = isContainerUrl;
               }
+
+              // Extract MIME type from IANA media type URIs in RDF types
+              // Pattern: http://www.w3.org/ns/iana/media-types/{mime-type}#Resource
+              // Example: http://www.w3.org/ns/iana/media-types/image/png#Resource -> image/png
+              if (!finalIsContainer && !mimeType) {
+                const ianaMediaTypePattern = /^http:\/\/www\.w3\.org\/ns\/iana\/media-types\/(.+)#Resource$/;
+                for (const type of types) {
+                  const match = type.match(ianaMediaTypePattern);
+                  if (match && match[1]) {
+                    mimeType = match[1];
+                    break; // Use the first IANA media type found
+                  }
+                }
+              }
             } else {
               // If no RDF metadata available
               if (isContainerUrl) {
@@ -143,13 +158,36 @@ export function useBrowseStorage(containerUrl: string | null, refreshKey?: numbe
               }
             }
 
+            // For non-folder files, only fetch content-type if not already found in RDF metadata
+            if (!finalIsContainer && !mimeType) {
+              try {
+                const headResponse = await cacheBustingFetch(absoluteUrl, {
+                  method: "HEAD",
+                  headers: {
+                    Accept: "*/*",
+                  },
+                });
+                
+                if (headResponse.ok) {
+                  const contentType = headResponse.headers.get("Content-Type");
+                  if (contentType) {
+                    // Extract just the MIME type (remove charset, etc.)
+                    mimeType = contentType.split(";")[0].trim();
+                  }
+                }
+              } catch (err) {
+                console.debug(`Could not fetch content-type for ${absoluteUrl}:`, err);
+              }
+            }
+
             fileItems.push({
               id: absoluteUrl,
               name,
               type: finalIsContainer ? "folder" : "file",
               url: absoluteUrl,
               lastModified,
               size,
+              mimeType,
             });
           } catch (err) {
             console.error(`Failed to process item ${itemUrl}:`, err);