Merge pull request #7 from solid/feat/my-storages

Feat/my storages

Author: PreciousOritsedere

app/components/AuthWrapper.tsx

@@ -22,48 +22,30 @@ export default function AuthWrapper({ children }: AuthWrapperProps) {
     async function checkAuth() {
       try {
         setError(null);
-        
-        // Always handle incoming redirect first - this is necessary to restore sessions
+
         // The library uses this to restore session state from localStorage
-        // Set restorePreviousSession to true to enable session restoration on page refresh
         const redirectInfo = await handleIncomingRedirect({
           restorePreviousSession: true,
         });
-        
+
         // Get the session instance after handling redirect
         const session = getDefaultSession();
-        
-        // development logs (will remove later)
-        console.log("=== Session Check ===");
-        console.log("Redirect Info:", redirectInfo);
-        console.log("Session Info:", session.info);
-        console.log("Is Logged In:", session.info.isLoggedIn);
-        console.log("WebID:", session.info.webId);
-        console.log("Session ID:", session.info.sessionId);
-        if (session.info.expirationDate) {
-          const expDate = new Date(session.info.expirationDate);
-          console.log("Expiration Date:", expDate.toISOString());
-          console.log("Is Expired:", expDate <= new Date());
-        }
-        
-        // Check if we have a valid session
+
         let isLoggedIn = session.info.isLoggedIn && !!session.info.webId;
-        
+
         // Check expiration if session exists
         if (isLoggedIn && session.info.expirationDate) {
           const expirationDate = new Date(session.info.expirationDate);
           const now = new Date();
           if (expirationDate <= now) {
-            console.log("Session expired, user needs to re-login");
             isLoggedIn = false;
           }
         }
-        
-      
-        
+
+
+
         setIsAuthenticated(isLoggedIn);
       } catch (err) {
-        console.error("Auth check failed:", err);
         const errorMessage =
           err instanceof Error ? err : new Error("Authentication check failed");
         setError(errorMessage);
@@ -78,28 +60,19 @@ export default function AuthWrapper({ children }: AuthWrapperProps) {
 
   // Re-check authentication state periodically in case user logs in from another tab
   useEffect(() => {
-      if (!isAuthenticated && !error) {
-        const interval = setInterval(async () => {
-          try {
-            const redirectInfo = await handleIncomingRedirect({
-              restorePreviousSession: true,
-            });
-            const session = getDefaultSession();
+    if (!isAuthenticated && !error) {
+      const interval = setInterval(async () => {
+        try {
+          const redirectInfo = await handleIncomingRedirect({
+            restorePreviousSession: true,
+          });
+          const session = getDefaultSession();
           if (session.info.isLoggedIn) {
-            // Log authentication response after redirect (from polling)
-            console.log("=== Authentication Response (from polling) ===");
-            console.log("Redirect Info:", redirectInfo);
-            console.log("Session Info:", session.info);
-            console.log("WebID:", session.info.webId);
-            console.log("Is Logged In:", session.info.isLoggedIn);
-            console.log("Session ID:", session.info.sessionId);
-            console.log("==============================================");
-            
             setIsAuthenticated(true);
             setError(null);
           }
         } catch (err) {
-          console.error("Auth polling failed:", err);
+          // Silent fail for polling
         }
       }, 1000);
 
@@ -111,7 +84,7 @@ export default function AuthWrapper({ children }: AuthWrapperProps) {
     setError(null);
     setIsChecking(true);
     setIsAuthenticated(null);
-    // Trigger re-check
+
     handleIncomingRedirect({ restorePreviousSession: true })
       .then(() => {
         const session = getDefaultSession();

app/components/Breadcrumb.tsx

@@ -36,8 +36,9 @@ export default function Breadcrumb({ items, onNavigate }: BreadcrumbProps) {
         )}
         {displayItems.slice(items.length > 2 ? 1 : 0).map((item, index) => {
           const actualIndex = items.length > 2 ? items.length - 2 + index : index;
+          // Use a combination of path and index to ensure unique keys
           return (
-            <li key={item.path} className="flex items-center gap-1 sm:gap-2">
+            <li key={`${item.path}-${actualIndex}`} className="flex items-center gap-1 sm:gap-2">
               {actualIndex > 0 && (
                 <ChevronRightIcon className="h-4 w-4 flex-shrink-0 text-gray-400" />
               )}

app/components/FileItem.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useRef } from "react";
 import Button from "./shared/Button";
 import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
 import { getFileIcon, formatFileSize, formatDate, type FileType } from "../lib/helpers";
@@ -33,6 +33,31 @@ export default function FileItem({
   isSelected = false,
 }: FileItemProps) {
   const [isHovered, setIsHovered] = useState(false);
+  const clickCountRef = useRef(0);
+  const clickTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const handleClick = (e: React.MouseEvent) => {
+    clickCountRef.current += 1;
+    
+    if (clickCountRef.current === 1) {
+      clickTimeoutRef.current = setTimeout(() => {
+        if (clickCountRef.current === 1) {
+          onSelect(file);
+        }
+        clickCountRef.current = 0;
+        clickTimeoutRef.current = null;
+      }, 300);
+    } else if (clickCountRef.current === 2) {
+      if (clickTimeoutRef.current) {
+        clearTimeout(clickTimeoutRef.current);
+        clickTimeoutRef.current = null;
+      }
+      clickCountRef.current = 0;
+      e.preventDefault();
+      e.stopPropagation();
+      onDoubleClick(file);
+    }
+  };
 
   if (view === "grid") {
     return (
@@ -43,8 +68,7 @@ export default function FileItem({
           }`}
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
-        onClick={() => onSelect(file)}
-        onDoubleClick={() => onDoubleClick(file)}
+        onClick={handleClick}
         role="button"
         tabIndex={0}
         aria-label={`${file.type === "folder" ? "Folder" : "File"}: ${file.name}`}
@@ -66,8 +90,7 @@ export default function FileItem({
         }`}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
-      onClick={() => onSelect(file)}
-      onDoubleClick={() => onDoubleClick(file)}
+      onClick={handleClick}
       role="button"
       tabIndex={0}
       aria-label={`${file.type === "folder" ? "Folder" : "File"}: ${file.name}`}
@@ -91,7 +114,6 @@ export default function FileItem({
             aria-label="More options"
             onClick={(e) => {
               e.stopPropagation();
-              // Handle more options
             }}
           >
             <EllipsisVerticalIcon className="h-4 w-4 sm:h-5 sm:w-5" />

app/components/Header.tsx

@@ -8,17 +8,14 @@ import ProfileIcon from "./ProfileIcon";
 import {
   Bars3Icon,
   MagnifyingGlassIcon,
-  ShareIcon,
   PlusIcon,
 } from "@heroicons/react/24/outline";
 
 interface HeaderProps {
-  selectedFileCount?: number;
-  onShareClick?: () => void;
   onMenuClick?: () => void;
 }
 
-export default function Header({ selectedFileCount = 0, onShareClick, onMenuClick }: HeaderProps) {
+export default function Header({ onMenuClick }: HeaderProps) {
   const [searchQuery, setSearchQuery] = useState("");
 
   return (
@@ -54,18 +51,6 @@ export default function Header({ selectedFileCount = 0, onShareClick, onMenuClic
 
           {/* Action Buttons */}
           <div className="ml-auto flex items-center gap-1 sm:gap-2">
-            {selectedFileCount > 0 && onShareClick && (
-              <Button
-                variant="primary"
-                size="sm"
-                onClick={onShareClick}
-                className="flex h-9 items-center gap-1 sm:gap-2 sm:px-3"
-                aria-label="Share selected files"
-              >
-                <ShareIcon className="h-4 w-4" />
-                <span className="hidden sm:inline">Share</span>
-              </Button>
-            )}
             <Button
               variant="secondary"
               size="sm"

app/lib/helpers/breadcrumbUtils.ts

@@ -0,0 +1,51 @@
+/**
+ * Breadcrumb utility functions for building navigation breadcrumbs
+ */
+
+export interface BreadcrumbItem {
+  name: string;
+  path: string;
+}
+
+/**
+ * Builds breadcrumb items for navigation within a storage
+ * @param selectedStorageId - The ID of the currently selected storage
+ * @param selectedStorageUrl - The URL of the currently selected storage
+ * @param selectedStorageName - The name of the currently selected storage
+ * @param currentPath - The current path within the storage
+ * @returns Array of breadcrumb items
+ */
+export function buildBreadcrumbItems(
+  selectedStorageId: string | null,
+  selectedStorageUrl: string | undefined,
+  selectedStorageName: string | undefined,
+  currentPath: string
+): BreadcrumbItem[] {
+  if (!selectedStorageId) {
+    return [{ name: "My Solid Storages", path: "/" }];
+  }
+
+  const items: BreadcrumbItem[] = [
+    { name: "My Solid Storages", path: "/" },
+    { name: selectedStorageName || "Storage", path: selectedStorageUrl || "/" },
+  ];
+
+  if (currentPath !== "/" && currentPath !== selectedStorageUrl) {
+    const storageUrl = selectedStorageUrl || "";
+    const storagePath = new URL(storageUrl).pathname;
+    const currentPathObj = new URL(currentPath);
+    const relativePath = currentPathObj.pathname
+      .replace(storagePath, "")
+      .replace(/^\/|\/$/g, "");
+    const segments = relativePath.split("/").filter(Boolean);
+    
+    segments.forEach((segment, index) => {
+      const pathSegments = segments.slice(0, index + 1);
+      const path = storageUrl + pathSegments.join("/") + "/";
+      items.push({ name: decodeURIComponent(segment), path });
+    });
+  }
+
+  return items;
+}
+

app/lib/helpers/fileFilters.ts

@@ -4,6 +4,7 @@
 
 /**
  * Checks if a URL or name represents a profile-related item that should be hidden from the file manager
+ * Only filters out the actual profile card document, not the profile folder
  * @param url - The URL to check
  * @param name - Optional name to check (for additional filtering)
  * @returns true if the item should be filtered out (is profile-related)
@@ -12,12 +13,13 @@ export function isProfileItem(url: string, name?: string): boolean {
   const urlLower = url.toLowerCase();
   const nameLower = name?.toLowerCase() || "";
 
+  // Only filter out the profile card document, not the profile folder
+  // Profile card is typically at /profile/card or ends with /card
   return (
-    urlLower.includes('/profile/') ||
-    urlLower.includes('/card') ||
-    urlLower.endsWith('/profile') ||
-    urlLower.includes('profile/card') ||
-    nameLower.includes('card')
+    urlLower.includes('/profile/card') ||
+    urlLower.endsWith('/card') ||
+    (urlLower.includes('/card') && !urlLower.endsWith('/')) ||
+    nameLower === 'card'
   );
 }
 

app/lib/helpers/index.ts

@@ -1,10 +1,7 @@
-/**
- * Central export point for all helper functions
- * This allows importing multiple helpers from a single location
- */
-
 export * from "./fileUtils";
 export * from "./dateUtils";
 export * from "./fileIcons";
 export * from "./fileFilters";
+export * from "./urlUtils";
+export * from "./breadcrumbUtils";
 

app/lib/helpers/urlUtils.ts

@@ -0,0 +1,59 @@
+/**
+ * URL utility functions for processing and extracting information from URLs
+ */
+
+/**
+ * Extracts a display name from a URL
+ * @param url - The URL to extract the name from
+ * @returns The decoded name extracted from the URL path
+ */
+export function extractNameFromUrl(url: string): string {
+  try {
+    const urlObj = new URL(url);
+    const pathParts = urlObj.pathname.split("/").filter(Boolean);
+    let name = pathParts[pathParts.length - 1] || urlObj.hostname;
+    
+    try {
+      name = decodeURIComponent(name);
+    } catch (e) {
+      // Keep original name if decoding fails
+    }
+    
+    return name;
+  } catch (e) {
+    // If URL parsing fails, try to extract from the string directly
+    const parts = url.split("/").filter(Boolean);
+    const lastPart = parts[parts.length - 1] || url;
+    try {
+      return decodeURIComponent(lastPart);
+    } catch {
+      return lastPart;
+    }
+  }
+}
+
+/**
+ * Resolves a relative URL to an absolute URL
+ * @param url - The URL to resolve (may be relative or absolute)
+ * @param baseUrl - The base URL to resolve against
+ * @returns The absolute URL
+ */
+export function resolveUrl(url: string, baseUrl: string): string {
+  try {
+    return new URL(url, baseUrl).href;
+  } catch (e) {
+    return url;
+  }
+}
+
+/**
+ * Checks if a URL has a file extension that indicates it's likely a file
+ * @param url - The URL to check
+ * @returns true if the URL has a known file extension
+ */
+export function isLikelyFile(url: string): boolean {
+  const fileExtension = url.split('.').pop()?.toLowerCase();
+  const knownFileExtensions = ['txt', 'md', 'json', 'xml', 'html', 'css', 'js', 'png', 'jpg', 'jpeg', 'gif', 'svg', 'pdf'];
+  return fileExtension ? knownFileExtensions.includes(fileExtension) : false;
+}
+

app/lib/hooks/index.ts

@@ -13,4 +13,5 @@ export { useSolidStorages } from "./useSolidStorages";
 export type { SolidStorage } from "./useSolidStorages";
 export { useUserProfile } from "./useUserProfile";
 export type { UserProfile } from "./useUserProfile";
+export { useBrowseStorage } from "./useBrowseStorage";