From e68f8f9716ccb3a2435bb35a1316798d3a55ab3a Mon Sep 17 00:00:00 2001
From: Precious Oritsedere <rukyjacob@gmail.com>
Date: Tue, 11 Nov 2025 18:02:27 +0000
Subject: [PATCH] feat: add my storages functionality

---
 app/components/AuthWrapper.tsx    |  23 +-
 app/components/Sidebar.tsx        |  70 ++---
 app/lib/hooks/index.ts            |   4 +-
 app/lib/hooks/useSolidStorages.ts | 454 ++++++++++++++++++++++++++++++
 app/page.tsx                      | 164 ++++++-----
 package-lock.json                 | 422 ++++++++++++++++++++++++++-
 package.json                      |   3 +
 7 files changed, 1026 insertions(+), 114 deletions(-)
 create mode 100644 app/lib/hooks/useSolidStorages.ts

diff --git a/app/components/AuthWrapper.tsx b/app/components/AuthWrapper.tsx
index 70856a1..75c5494 100644
--- a/app/components/AuthWrapper.tsx
+++ b/app/components/AuthWrapper.tsx
@@ -22,8 +22,18 @@ export default function AuthWrapper({ children }: AuthWrapperProps) {
     async function checkAuth() {
       try {
         setError(null);
-        await handleIncomingRedirect();
+        const redirectInfo = await handleIncomingRedirect();
         const session = getDefaultSession();
+        
+        // Log authentication response after redirect
+        console.log("=== Authentication Response ===");
+        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(session.info.isLoggedIn);
       } catch (err) {
         console.error("Auth check failed:", err);
@@ -44,9 +54,18 @@ export default function AuthWrapper({ children }: AuthWrapperProps) {
     if (!isAuthenticated && !error) {
       const interval = setInterval(async () => {
         try {
-          await handleIncomingRedirect();
+          const redirectInfo = await handleIncomingRedirect();
           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);
           }
diff --git a/app/components/Sidebar.tsx b/app/components/Sidebar.tsx
index 21db9bf..bb151c0 100644
--- a/app/components/Sidebar.tsx
+++ b/app/components/Sidebar.tsx
@@ -1,33 +1,27 @@
 "use client";
 
 import Button from "./shared/Button";
-import { XMarkIcon, FolderIcon } from "@heroicons/react/24/outline";
-
-interface Drive {
-  id: string;
-  name: string;
-  url: string;
-}
+import { XMarkIcon } from "@heroicons/react/24/outline";
 
 interface SidebarProps {
-  drives: Drive[];
-  selectedDriveId?: string;
-  onDriveSelect: (driveId: string) => void;
   isOpen?: boolean;
   onClose?: () => void;
+  activeTab?: string;
 }
 
 export default function Sidebar({
-  drives,
-  selectedDriveId,
-  onDriveSelect,
   isOpen = true,
   onClose,
+  activeTab = "my-storages",
 }: SidebarProps) {
   // On desktop (lg+), sidebar is always visible, so isOpen doesn't matter
   // On mobile, use isOpen state
   const isMobileOpen = isOpen;
 
+  const navigationTabs = [
+    { id: "my-storages", label: "My Storages" },
+  ];
+
   return (
     <>
       {/* Sidebar */}
@@ -36,11 +30,9 @@ export default function Sidebar({
           isMobileOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0"
         }`}
       >
-        <nav className="p-2" aria-label="Drives navigation">
+        <nav className="p-2" aria-label="Navigation">
           <div className="mb-2 flex items-center justify-between px-3 py-2 lg:block">
-            <h2 className="text-xs font-medium uppercase tracking-wider text-gray-500">
-              Drives
-            </h2>
+            
             {onClose && (
               <Button
                 variant="icon"
@@ -52,31 +44,27 @@ export default function Sidebar({
               </Button>
             )}
           </div>
+          
+          {/* Navigation Tabs */}
           <ul className="space-y-1" role="list">
-            {drives.map((drive) => (
-              <li key={drive.id}>
-                <button
-                  type="button"
-                  onClick={() => {
-                    onDriveSelect(drive.id);
-                    if (onClose) {
-                      onClose();
-                    }
-                  }}
-                  className={`cursor-pointer w-full rounded-md px-3 py-2 text-left text-sm font-medium transition-colors ${
-                    selectedDriveId === drive.id
-                      ? "bg-[#F3EDFF] text-black"
-                      : "text-gray-700 hover:bg-gray-100"
-                  }`}
-                  aria-current={selectedDriveId === drive.id ? "page" : undefined}
-                >
-                  <div className="flex items-center gap-3">
-                    <FolderIcon className="h-5 w-5 flex-shrink-0 text-gray-600" />
-                    <span className="truncate">{drive.name}</span>
-                  </div>
-                </button>
-              </li>
-            ))}
+            {navigationTabs.map((tab) => {
+              const isActive = activeTab === tab.id;
+              return (
+                <li key={tab.id}>
+                  <button
+                    type="button"
+                    className={`cursor-pointer w-full rounded-md px-3 py-2 text-left text-sm font-medium transition-colors ${
+                      isActive
+                        ? "bg-[#F3EDFF] text-black"
+                        : "text-gray-700 hover:bg-gray-100"
+                    }`}
+                    aria-current={isActive ? "page" : undefined}
+                  >
+                    {tab.label}
+                  </button>
+                </li>
+              );
+            })}
           </ul>
         </nav>
       </aside>
diff --git a/app/lib/hooks/index.ts b/app/lib/hooks/index.ts
index fd4b254..a7c87db 100644
--- a/app/lib/hooks/index.ts
+++ b/app/lib/hooks/index.ts
@@ -9,6 +9,6 @@
  * ```
  */
 
-// Export hooks here as they are created
-// Example: export { useCustomHook } from './useCustomHook';
+export { useSolidStorages } from "./useSolidStorages";
+export type { SolidStorage } from "./useSolidStorages";
 
diff --git a/app/lib/hooks/useSolidStorages.ts b/app/lib/hooks/useSolidStorages.ts
new file mode 100644
index 0000000..e831efb
--- /dev/null
+++ b/app/lib/hooks/useSolidStorages.ts
@@ -0,0 +1,454 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { getDefaultSession } from "@inrupt/solid-client-authn-browser";
+import { Parser, Store, NamedNode, Literal } from "n3";
+
+// Storage predicates
+const PIM_STORAGE = "http://www.w3.org/ns/pim/space#storage";
+const SOLID_STORAGE = "http://www.w3.org/ns/solid/terms#storage";
+const FOAF_NAME = "http://xmlns.com/foaf/0.1/name";
+const VCARD_FN = "http://www.w3.org/2006/vcard/ns#fn";
+
+export interface SolidStorage {
+  id: string;
+  name: string;
+  url: string;
+}
+
+interface UseSolidStoragesResult {
+  storages: SolidStorage[];
+  isLoading: boolean;
+  error: Error | null;
+}
+
+/**
+ * Hook to fetch Solid storage roots from the user's WebID profile.
+ * Uses direct RDF parsing to discover storage locations via pim:storage and solid:storage predicates.
+ */
+export function useSolidStorages(): UseSolidStoragesResult {
+  const [storages, setStorages] = useState<SolidStorage[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    async function fetchStorages() {
+      try {
+        setIsLoading(true);
+        setError(null);
+
+        const session = getDefaultSession();
+        
+        // Wait a bit for authentication to complete
+        if (!session.info.isLoggedIn || !session.info.webId) {
+          console.log("=== Storage Discovery ===");
+          console.log("User not logged in or WebID not available");
+          console.log("Session:", session.info);
+          console.log("Waiting for authentication...");
+          console.log("=========================");
+          
+          // Set up a polling mechanism to check when authentication completes
+          const checkInterval = setInterval(() => {
+            const currentSession = getDefaultSession();
+            if (currentSession.info.isLoggedIn && currentSession.info.webId) {
+              clearInterval(checkInterval);
+              // Trigger re-fetch by updating state
+              fetchStorages();
+            }
+          }, 500);
+          
+          // Clear interval after 10 seconds to avoid infinite polling
+          setTimeout(() => clearInterval(checkInterval), 10000);
+          
+          setIsLoading(false);
+          return;
+        }
+
+        const webId = session.info.webId;
+        console.log("=== Storage Discovery ===");
+        console.log("WebID:", webId);
+        console.log("Fetching profile document...");
+
+        // Try different Accept headers to get the profile
+        const acceptHeaders = [
+          'text/turtle, application/turtle, text/n3, application/n3',
+          'text/turtle',
+          'application/ld+json',
+        ];
+
+        let content: string | null = null;
+        let contentType: string = '';
+
+        for (const acceptHeader of acceptHeaders) {
+          try {
+            console.log(`Trying Accept header: ${acceptHeader}`);
+            // Always use the authenticated session's fetch function
+            const fetchFn = session.fetch || fetch;
+            const response = await fetchFn(webId, {
+              method: 'GET',
+              headers: {
+                'Accept': acceptHeader,
+              },
+            });
+
+            if (response.ok) {
+              contentType = response.headers.get('content-type') || '';
+              content = await response.text();
+              console.log(`Successfully fetched profile with content-type: ${contentType}`);
+              console.log(`Content length: ${content.length} characters`);
+              console.log(`\n=== Raw Profile Content (Full) ===`);
+              console.log(content);
+              console.log(`\n=== End of Raw Content ===`);
+              break;
+            } else {
+              console.log(`Failed with status ${response.status} for Accept: ${acceptHeader}`);
+            }
+          } catch (err) {
+            console.log(`Error with Accept header ${acceptHeader}:`, err);
+            continue;
+          }
+        }
+
+        if (!content) {
+          throw new Error("Failed to fetch profile document with any Accept header");
+        }
+
+        // Parse the RDF content
+        const store = new Store();
+        
+        if (contentType.includes('text/turtle') || contentType.includes('application/turtle') || 
+            contentType.includes('text/n3') || contentType.includes('application/n3')) {
+          console.log("Parsing as Turtle/N3...");
+          const parser = new Parser();
+          const quads = parser.parse(content);
+          store.addQuads(quads);
+          console.log(`Parsed ${quads.length} quads from Turtle`);
+        } else if (contentType.includes('application/ld+json')) {
+          console.log("Parsing as JSON-LD...");
+          // For JSON-LD, we'd need a different parser, but for now let's try to extract from Turtle
+          // Most Solid servers return Turtle even if JSON-LD is requested
+          try {
+            const parser = new Parser();
+            const quads = parser.parse(content);
+            store.addQuads(quads);
+            console.log(`Parsed ${quads.length} quads from JSON-LD (as Turtle)`);
+          } catch (e) {
+            console.warn("Failed to parse as Turtle, might be actual JSON-LD:", e);
+            // TODO: Add JSON-LD parsing if needed
+          }
+        }
+
+        // Find the main subject - try different variants
+        const baseUrl = webId.split('#')[0];
+        const subjectVariants = [
+          new NamedNode(webId),
+          new NamedNode(baseUrl + '#me'),
+          new NamedNode('#me'),
+          new NamedNode(baseUrl + '#card'),
+        ];
+
+        console.log("Looking for main subject with variants:", subjectVariants.map(s => s.value));
+
+        // Find the main subject by looking for common profile properties
+        let mainSubject: NamedNode | null = null;
+        
+        for (const subject of subjectVariants) {
+          const nameQuads = store.getQuads(subject, new NamedNode(FOAF_NAME), null, null);
+          if (nameQuads.length > 0) {
+            mainSubject = subject;
+            console.log(`Found main subject: ${subject.value} (via FOAF name)`);
+            break;
+          }
+        }
+
+        // If still not found, try to find Person type
+        if (!mainSubject) {
+          const personType = new NamedNode('http://xmlns.com/foaf/0.1/Person');
+          const personQuads = store.getQuads(null, new NamedNode('http://www.w3.org/1999/02/22-rdf-syntax-ns#type'), personType, null);
+          if (personQuads.length > 0 && personQuads[0].subject.termType === 'NamedNode') {
+            mainSubject = personQuads[0].subject as NamedNode;
+            console.log(`Found main subject: ${mainSubject.value} (via Person type)`);
+          }
+        }
+
+        // Fallback to WebID itself
+        if (!mainSubject) {
+          mainSubject = new NamedNode(webId);
+          console.log(`Using WebID as main subject: ${webId}`);
+        }
+
+        // Get profile name
+        const getName = (subject: NamedNode): string | null => {
+          const nameQuads = store.getQuads(subject, new NamedNode(FOAF_NAME), null, null);
+          if (nameQuads.length > 0 && nameQuads[0].object instanceof Literal) {
+            return nameQuads[0].object.value;
+          }
+          const vcardQuads = store.getQuads(subject, new NamedNode(VCARD_FN), null, null);
+          if (vcardQuads.length > 0 && vcardQuads[0].object instanceof Literal) {
+            return vcardQuads[0].object.value;
+          }
+          return null;
+        };
+
+        const profileName = getName(mainSubject) || 
+                           webId.split("/").pop()?.split("#")[0] || 
+                           "My Storage";
+        
+        console.log("Profile name:", profileName);
+
+        // Get storage roots using both pim:storage and solid:storage predicates
+        const storageUrls: string[] = [];
+        
+        // Try pim:storage
+        const pimStorageQuads = store.getQuads(mainSubject, new NamedNode(PIM_STORAGE), null, null);
+        console.log(`Found ${pimStorageQuads.length} pim:storage quads`);
+        pimStorageQuads.forEach(quad => {
+          if (quad.object instanceof NamedNode) {
+            let storageUrl = quad.object.value;
+            const originalValue = storageUrl;
+            
+            // Handle the case where n3 parser didn't resolve the prefix correctly
+            // "pre:" prefix resolves to "</.>" which should be the root "/"
+            if (storageUrl === 'undefined/' || storageUrl.includes('undefined')) {
+              const baseUrlObj = new URL(baseUrl);
+              storageUrl = `${baseUrlObj.protocol}//${baseUrlObj.host}/`;
+              console.log(`Fixed undefined prefix: ${originalValue} -> ${storageUrl}`);
+            } else if (!storageUrl.startsWith('http://') && !storageUrl.startsWith('https://')) {
+              // Resolve relative URLs
+              const baseUrlObj = new URL(baseUrl);
+              if (storageUrl === './' || storageUrl === '/' || storageUrl.endsWith('/.')) {
+                storageUrl = `${baseUrlObj.protocol}//${baseUrlObj.host}/`;
+              } else {
+                storageUrl = new URL(storageUrl, baseUrl).href;
+              }
+              console.log(`Resolved relative storage URL: ${originalValue} -> ${storageUrl}`);
+            }
+            
+            if (storageUrl && storageUrl.startsWith('http') && !storageUrls.includes(storageUrl)) {
+              storageUrls.push(storageUrl);
+              console.log("Found storage via pim:storage:", storageUrl);
+            }
+          }
+        });
+
+        // Try solid:storage
+        const solidStorageQuads = store.getQuads(mainSubject, new NamedNode(SOLID_STORAGE), null, null);
+        console.log(`Found ${solidStorageQuads.length} solid:storage quads`);
+        solidStorageQuads.forEach(quad => {
+          if (quad.object instanceof NamedNode) {
+            const storageUrl = quad.object.value;
+            if (!storageUrls.includes(storageUrl)) {
+              storageUrls.push(storageUrl);
+              console.log("Found storage via solid:storage:", storageUrl);
+            }
+          }
+        });
+
+        // Also check all quads in the store for storage predicates (in case subject is different)
+        const allPimStorageQuads = store.getQuads(null, new NamedNode(PIM_STORAGE), null, null);
+        console.log(`Found ${allPimStorageQuads.length} total pim:storage quads in store`);
+        allPimStorageQuads.forEach(quad => {
+          if (quad.object instanceof NamedNode) {
+            let storageUrl = quad.object.value;
+            const originalValue = storageUrl;
+            
+            console.log(`Processing storage URL: ${storageUrl} (original: ${originalValue})`);
+            
+            // Handle the case where n3 parser didn't resolve the prefix correctly
+            // "pre:" prefix resolves to "</.>" which should be the root "/"
+            // If we see "undefined/" it means the prefix wasn't resolved
+            if (storageUrl === 'undefined/' || storageUrl.includes('undefined')) {
+              // The prefix "pre:" resolves to "</.>" which is the root
+              const baseUrlObj = new URL(baseUrl);
+              storageUrl = `${baseUrlObj.protocol}//${baseUrlObj.host}/`;
+              console.log(`Fixed undefined prefix: ${originalValue} -> ${storageUrl}`);
+            }
+            // Handle relative URLs that end with "/." or are just "/"
+            else if (storageUrl.endsWith('/.') || storageUrl.endsWith('/./') || 
+                     storageUrl === './' || storageUrl === '/' || 
+                     (storageUrl.startsWith('/') && !storageUrl.startsWith('http'))) {
+              // Resolve relative URL to absolute
+              const baseUrlObj = new URL(baseUrl);
+              if (storageUrl.endsWith('/.') || storageUrl === './' || storageUrl === '/') {
+                storageUrl = `${baseUrlObj.protocol}//${baseUrlObj.host}/`;
+              } else {
+                // Handle paths like "/path" -> "https://domain.com/path"
+                try {
+                  storageUrl = new URL(storageUrl, baseUrl).href;
+                } catch (e) {
+                  // If URL construction fails, try manual resolution
+                  if (storageUrl.startsWith('/')) {
+                    storageUrl = `${baseUrlObj.protocol}//${baseUrlObj.host}${storageUrl}`;
+                  }
+                }
+              }
+              console.log(`Resolved relative storage URL: ${originalValue} -> ${storageUrl}`);
+            }
+            // Also check if it's a relative URL without protocol
+            else if (!storageUrl.startsWith('http://') && !storageUrl.startsWith('https://')) {
+              try {
+                const baseUrlObj = new URL(baseUrl);
+                if (storageUrl.startsWith('/')) {
+                  storageUrl = `${baseUrlObj.protocol}//${baseUrlObj.host}${storageUrl}`;
+                } else {
+                  storageUrl = new URL(storageUrl, baseUrl).href;
+                }
+                console.log(`Resolved non-absolute storage URL: ${originalValue} -> ${storageUrl}`);
+              } catch (e) {
+                console.warn(`Failed to resolve storage URL: ${originalValue}`, e);
+              }
+            }
+            
+            // Final validation - ensure it's a valid absolute URL
+            if (storageUrl && storageUrl.startsWith('http')) {
+              if (!storageUrls.includes(storageUrl)) {
+                storageUrls.push(storageUrl);
+                console.log("Found storage via pim:storage (from any subject):", storageUrl);
+              }
+            } else {
+              console.warn(`Skipping invalid storage URL: ${storageUrl}`);
+            }
+          } else if (quad.object instanceof Literal) {
+            // Sometimes storage might be a literal, try to resolve it
+            const storageValue = quad.object.value;
+            if (storageValue === './' || storageValue === '/' || storageValue.startsWith('/')) {
+              const baseUrlObj = new URL(baseUrl);
+              const resolvedUrl = storageValue === './' || storageValue === '/' 
+                ? `${baseUrlObj.protocol}//${baseUrlObj.host}/`
+                : new URL(storageValue, baseUrl).href;
+              if (!storageUrls.includes(resolvedUrl)) {
+                storageUrls.push(resolvedUrl);
+                console.log("Found storage via pim:storage (literal, resolved):", resolvedUrl);
+              }
+            }
+          }
+        });
+
+        const allSolidStorageQuads = store.getQuads(null, new NamedNode(SOLID_STORAGE), null, null);
+        console.log(`Found ${allSolidStorageQuads.length} total solid:storage quads in store`);
+        allSolidStorageQuads.forEach(quad => {
+          if (quad.object instanceof NamedNode) {
+            const storageUrl = quad.object.value;
+            if (!storageUrls.includes(storageUrl)) {
+              storageUrls.push(storageUrl);
+              console.log("Found storage via solid:storage (from any subject):", storageUrl);
+            }
+          }
+        });
+
+        // Log all quads for debugging
+        console.log("=== All Quads in Store ===");
+        const allQuads = store.getQuads(null, null, null, null);
+        console.log(`Total quads: ${allQuads.length}`);
+        
+        // Group quads by subject for better readability
+        const quadsBySubject = new Map<string, Array<{ predicate: string; object: string; objectType: string }>>();
+        
+        allQuads.forEach(quad => {
+          const subject = quad.subject.value;
+          if (!quadsBySubject.has(subject)) {
+            quadsBySubject.set(subject, []);
+          }
+          quadsBySubject.get(subject)!.push({
+            predicate: quad.predicate.value,
+            object: quad.object instanceof NamedNode ? quad.object.value : 
+                   quad.object instanceof Literal ? quad.object.value : 
+                   quad.object.value,
+            objectType: quad.object.termType,
+          });
+        });
+        
+        console.log(`Found ${quadsBySubject.size} unique subjects`);
+        console.log("\n=== Quads Grouped by Subject ===");
+        quadsBySubject.forEach((quads, subject) => {
+          console.log(`\nSubject: ${subject}`);
+          quads.forEach(quad => {
+            console.log(`  ${quad.predicate}`);
+            console.log(`    -> ${quad.object} (${quad.objectType})`);
+          });
+        });
+        
+        // Also log all quads in a flat list
+        console.log("\n=== All Quads (Flat List) ===");
+        allQuads.forEach((quad, idx) => {
+          const objectValue = quad.object instanceof NamedNode ? quad.object.value : 
+                             quad.object instanceof Literal ? quad.object.value : 
+                             quad.object.value;
+          console.log(`Quad ${idx + 1}:`, {
+            subject: quad.subject.value,
+            predicate: quad.predicate.value,
+            object: objectValue,
+            objectType: quad.object.termType,
+          });
+        });
+        console.log("=========================");
+
+        // If no storage found via predicates, try to infer from WebID
+        if (storageUrls.length === 0) {
+          console.log("No storage found via predicates, attempting to infer from WebID...");
+          
+          // Extract base URL from WebID
+          const webIdUrl = new URL(webId);
+          const baseUrl = `${webIdUrl.protocol}//${webIdUrl.host}/`;
+          
+          // For solidcommunity.net, storage is typically at the root
+          if (webId.includes("solidcommunity.net")) {
+            storageUrls.push(baseUrl);
+            console.log("Inferred storage from solidcommunity.net:", baseUrl);
+          } else {
+            // For other providers, try common patterns
+            storageUrls.push(baseUrl);
+            console.log("Inferred storage from WebID base URL:", baseUrl);
+          }
+        }
+
+        // Filter out invalid URLs (those with "undefined" or not starting with http)
+        const validStorageUrls = storageUrls.filter(url => 
+          url && 
+          (url.startsWith('http://') || url.startsWith('https://')) &&
+          !url.includes('undefined')
+        );
+        
+        console.log("All discovered storage URLs (before filtering):", storageUrls);
+        console.log("Valid storage URLs (after filtering):", validStorageUrls);
+
+        // Convert to SolidStorage format
+        const discoveredStorages: SolidStorage[] = validStorageUrls.map((url, index) => {
+          return {
+            id: url,
+            name: index === 0 ? profileName : `${profileName} (${index + 1})`,
+            url: url,
+          };
+        });
+
+        console.log("Discovered storages:", discoveredStorages);
+        console.log("=========================");
+
+        setStorages(discoveredStorages);
+      } catch (err) {
+        console.error("Error fetching storages:", err);
+        const errorMessage =
+          err instanceof Error ? err : new Error("Failed to fetch storage roots");
+        setError(errorMessage);
+        setStorages([]);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    fetchStorages();
+    
+    // Also set up a listener for session changes
+    const checkSession = setInterval(() => {
+      const session = getDefaultSession();
+      if (session.info.isLoggedIn && session.info.webId && storages.length === 0 && !isLoading) {
+        console.log("Session state changed, re-fetching storages...");
+        fetchStorages();
+      }
+    }, 1000);
+    
+    return () => clearInterval(checkSession);
+  }, []);
+
+  return { storages, isLoading, error };
+}
diff --git a/app/page.tsx b/app/page.tsx
index 15295f1..9f5f94e 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import AuthWrapper from "./components/AuthWrapper";
 import Header from "./components/Header";
 import Sidebar from "./components/Sidebar";
@@ -8,53 +8,17 @@ import Breadcrumb from "./components/Breadcrumb";
 import FileList from "./components/FileList";
 import PermissionsDialog, { Permission } from "./components/PermissionsDialog";
 import { FileItemData } from "./components/FileItem";
-
-// Mock data for development
-const mockDrives = [
-  { id: "1", name: "My Drive", url: "https://storage.example.com/" },
-  { id: "2", name: "Shared with me", url: "https://storage.example.com/shared/" },
-];
-
-const mockFiles: FileItemData[] = [
-  {
-    id: "1",
-    name: "Documents",
-    type: "folder",
-    url: "https://storage.example.com/documents/",
-    lastModified: new Date(Date.now() - 86400000),
-  },
-  {
-    id: "2",
-    name: "example.pdf",
-    type: "document",
-    url: "https://storage.example.com/example.pdf",
-    lastModified: new Date(Date.now() - 3600000),
-    size: 1024000,
-    mimeType: "application/pdf",
-  },
-  {
-    id: "3",
-    name: "photo.jpg",
-    type: "image",
-    url: "https://storage.example.com/photo.jpg",
-    lastModified: new Date(Date.now() - 7200000),
-    size: 2048000,
-    mimeType: "image/jpeg",
-  },
-  {
-    id: "4",
-    name: "Notes",
-    type: "folder",
-    url: "https://storage.example.com/notes/",
-    lastModified: new Date(Date.now() - 172800000),
-  },
-];
+import { useSolidStorages } from "./lib/hooks";
+import LoadingSpinner from "./components/shared/LoadingSpinner";
+import ErrorDisplay from "./components/shared/ErrorDisplay";
 
 export default function Home() {
-  const [selectedDriveId, setSelectedDriveId] = useState<string>("1");
+  const { storages, isLoading: isLoadingStorages, error: storagesError } = useSolidStorages();
+  
+  const [selectedStorageId, setSelectedStorageId] = useState<string | null>(null);
   const [currentPath, setCurrentPath] = useState<string>("/");
   const [selectedFileIds, setSelectedFileIds] = useState<string[]>([]);
-  const [files, setFiles] = useState<FileItemData[]>(mockFiles);
+  const [files, setFiles] = useState<FileItemData[]>([]);
   const [permissionsDialogOpen, setPermissionsDialogOpen] = useState(false);
   const [selectedFileForPermissions, setSelectedFileForPermissions] =
     useState<FileItemData | null>(null);
@@ -62,16 +26,45 @@ export default function Home() {
   // Sidebar is open by default on desktop, closed on mobile
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
+  // Convert storages to FileItemData format for display in FileList
+  const storageFiles: FileItemData[] = storages.map((storage) => ({
+    id: storage.id,
+    name: storage.name,
+    type: "folder" as const,
+    url: storage.url,
+    lastModified: new Date(), // Storages don't have a lastModified date
+  }));
+
+  // Combine storage files with actual files
+  // If no storage is selected, show storages. If a storage is selected, show files in that storage
+  const displayFiles = selectedStorageId ? files : storageFiles;
+
+  // Get selected storage name for breadcrumb
+  const selectedStorage = storages.find((s) => s.id === selectedStorageId);
   const breadcrumbItems = [
-    { name: "My Drive", path: "/" },
+    { name: "My Solid Storages", path: "/" },
     ...(currentPath !== "/" ? [{ name: currentPath.split("/").pop() || "", path: currentPath }] : []),
   ];
 
-  const handleDriveSelect = (driveId: string) => {
-    setSelectedDriveId(driveId);
-    setCurrentPath("/");
-    setSelectedFileIds([]);
-    // In real implementation, fetch files for the selected drive
+  const handleFileDoubleClick = (file: FileItemData) => {
+    if (file.type === "folder") {
+      // If it's a storage (not yet selected), select it
+      if (!selectedStorageId && storages.some(s => s.id === file.id)) {
+        setSelectedStorageId(file.id);
+        setCurrentPath("/");
+        setSelectedFileIds([]);
+        // In real implementation, fetch files for the selected storage
+        console.log("Selected storage:", file);
+      } else {
+        // Navigate into folder
+        setCurrentPath(file.url);
+        setSelectedFileIds([]);
+        // In real implementation, navigate into folder and fetch its contents
+      }
+    } else {
+      // In real implementation, open/preview the file
+      console.log("Open file:", file);
+    }
   };
 
   const handleFileSelect = (file: FileItemData) => {
@@ -83,23 +76,20 @@ export default function Home() {
     });
   };
 
-  const handleFileDoubleClick = (file: FileItemData) => {
-    if (file.type === "folder") {
-      setCurrentPath(file.url);
+
+  const handleBreadcrumbNavigate = (path: string) => {
+    if (path === "/") {
+      // Navigate back to storages view
+      setSelectedStorageId(null);
+      setCurrentPath("/");
       setSelectedFileIds([]);
-      // In real implementation, navigate into folder and fetch its contents
     } else {
-      // In real implementation, open/preview the file
-      console.log("Open file:", file);
+      setCurrentPath(path);
+      setSelectedFileIds([]);
+      // In real implementation, navigate to the path and fetch files
     }
   };
 
-  const handleBreadcrumbNavigate = (path: string) => {
-    setCurrentPath(path);
-    setSelectedFileIds([]);
-    // In real implementation, navigate to the path and fetch files
-  };
-
   const handleShareClickForFile = (file: FileItemData) => {
     setSelectedFileForPermissions(file);
     setPermissionsDialogOpen(true);
@@ -141,7 +131,7 @@ export default function Home() {
 
   const handleShareClick = () => {
     if (selectedFileIds.length === 1) {
-      const file = files.find((f) => f.id === selectedFileIds[0]);
+      const file = displayFiles.find((f) => f.id === selectedFileIds[0]);
       if (file) {
         handleShareClickForFile(file);
       }
@@ -151,6 +141,48 @@ export default function Home() {
     }
   };
 
+  console.log("storages", storages);
+
+  // Show loading state while fetching storages
+  if (isLoadingStorages) {
+    return (
+      <AuthWrapper>
+        <div className="flex min-h-screen items-center justify-center bg-white">
+          <LoadingSpinner size="md" text="Loading your Solid storages..." />
+        </div>
+      </AuthWrapper>
+    );
+  }
+
+  // Show error state if storage fetch failed
+  if (storagesError) {
+    return (
+      <AuthWrapper>
+        <ErrorDisplay
+          title="Failed to Load Storages"
+          message={storagesError.message || "Unable to discover your Solid storage roots. Please try again."}
+          onRetry={() => window.location.reload()}
+        />
+      </AuthWrapper>
+    );
+  }
+
+  // Show empty state if no storages found
+  if (storages.length === 0) {
+    return (
+      <AuthWrapper>
+        <div className="flex min-h-screen items-center justify-center bg-white">
+          <div className="text-center">
+            <h2 className="mb-2 text-xl font-semibold text-black">No Storages Found</h2>
+            <p className="text-gray-600">
+              Unable to discover any Solid storage roots from your WebID profile.
+            </p>
+          </div>
+        </div>
+      </AuthWrapper>
+    );
+  }
+
   return (
     <AuthWrapper>
       <div className="flex h-screen flex-col overflow-hidden bg-white">
@@ -161,16 +193,14 @@ export default function Home() {
         />
         <div className="flex flex-1 overflow-hidden">
           <Sidebar
-            drives={mockDrives}
-            selectedDriveId={selectedDriveId}
-            onDriveSelect={handleDriveSelect}
             isOpen={sidebarOpen}
             onClose={() => setSidebarOpen(false)}
+            activeTab="my-storages"
           />
           <main className="flex flex-1 flex-col overflow-hidden">
             <Breadcrumb items={breadcrumbItems} onNavigate={handleBreadcrumbNavigate} />
             <FileList
-              files={files}
+              files={displayFiles}
               currentPath={currentPath}
               onFileSelect={handleFileSelect}
               onFileDoubleClick={handleFileDoubleClick}
diff --git a/package-lock.json b/package-lock.json
index 7ab529c..223169d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,10 @@
       "version": "0.1.0",
       "dependencies": {
         "@heroicons/react": "^2.2.0",
+        "@inrupt/solid-client": "^1.23.1",
         "@inrupt/solid-client-authn-browser": "^3.1.1",
+        "@inrupt/vocab-common-rdf": "^1.0.5",
+        "n3": "^1.26.0",
         "next": "16.0.1",
         "react": "19.2.0",
         "react-dom": "19.2.0"
@@ -279,6 +282,20 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@digitalbazaar/http-client": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@digitalbazaar/http-client/-/http-client-1.2.0.tgz",
+      "integrity": "sha512-W9KQQ5pUJcaR0I4c2HPJC0a7kRbZApIorZgPnEDwMBgj16iQzutGLrCXYaZOmxqVLVNqqlQ4aUJh+HBQZy4W6Q==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "esm": "^3.2.22",
+        "ky": "^0.25.1",
+        "ky-universal": "^0.8.2"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/@emnapi/core": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.7.0.tgz",
@@ -1020,6 +1037,25 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/@inrupt/solid-client": {
+      "version": "1.23.1",
+      "resolved": "https://registry.npmjs.org/@inrupt/solid-client/-/solid-client-1.23.1.tgz",
+      "integrity": "sha512-M1MyS0Qd9FjedppFctnpfAO8x046VIcmFOt9SHU3/1aDTGQrgNIqGeIBRCDwUvCRVvfvmpYE9Q9BdnA2gHAgzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@rdfjs/dataset": "^1.1.0",
+        "@rdfjs/types": "^1.1.0",
+        "@types/n3": "^1.10.0",
+        "@types/rdfjs__dataset": "^1.0.4",
+        "cross-fetch": "^3.0.4",
+        "http-link-header": "^1.0.2",
+        "jsonld": "^5.2.0",
+        "n3": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=14.0"
+      }
+    },
     "node_modules/@inrupt/solid-client-authn-browser": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/@inrupt/solid-client-authn-browser/-/solid-client-authn-browser-3.1.1.tgz",
@@ -1047,6 +1083,12 @@
         "node": "^20.0.0 || ^22.0.0"
       }
     },
+    "node_modules/@inrupt/vocab-common-rdf": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@inrupt/vocab-common-rdf/-/vocab-common-rdf-1.0.5.tgz",
+      "integrity": "sha512-onrehQte8m0XW83WwM6T4o5WgmYGzdYUCef6FDjMKfQCF64FnARFNn5fYhKodimBaAOFKhuJ3vw1NBZV/EYqJw==",
+      "license": "MIT"
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -1302,6 +1344,39 @@
         "node": ">=12.4.0"
       }
     },
+    "node_modules/@rdfjs/data-model": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@rdfjs/data-model/-/data-model-1.3.4.tgz",
+      "integrity": "sha512-iKzNcKvJotgbFDdti7GTQDCYmL7GsGldkYStiP0K8EYtN7deJu5t7U11rKTz+nR7RtesUggT+lriZ7BakFv8QQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@rdfjs/types": ">=1.0.1"
+      },
+      "bin": {
+        "rdfjs-data-model-test": "bin/test.js"
+      }
+    },
+    "node_modules/@rdfjs/dataset": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@rdfjs/dataset/-/dataset-1.1.1.tgz",
+      "integrity": "sha512-BNwCSvG0cz0srsG5esq6CQKJc1m8g/M0DZpLuiEp0MMpfwguXX7VeS8TCg4UUG3DV/DqEvhy83ZKSEjdsYseeA==",
+      "license": "MIT",
+      "dependencies": {
+        "@rdfjs/data-model": "^1.2.0"
+      },
+      "bin": {
+        "rdfjs-dataset-test": "bin/test.js"
+      }
+    },
+    "node_modules/@rdfjs/types": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@rdfjs/types/-/types-1.1.2.tgz",
+      "integrity": "sha512-wqpOJK1QCbmsGNtyzYnojPU8gRDPid2JO0Q0kMtb4j65xhCK880cnKAfEOwC+dX85VJcCByQx5zOwyyfCjDJsg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -1621,16 +1696,34 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/n3": {
+      "version": "1.26.1",
+      "resolved": "https://registry.npmjs.org/@types/n3/-/n3-1.26.1.tgz",
+      "integrity": "sha512-TilYHzpU6ecXVJAbV+6o17Z8ZkWLWx6ZJD3IluaU4RiGHxqjU2or9fopxFHS6iXS6qcl5Mg1K3wSx9L8xxJaJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@rdfjs/types": "*",
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "20.19.24",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.24.tgz",
       "integrity": "sha512-FE5u0ezmi6y9OZEzlJfg37mqqf6ZDSF2V/NLjUyGrR9uTZ7Sb9F7bLNZ03S4XVUNRWGA7Ck4c1kK+YnuWjl+DA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/rdfjs__dataset": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/rdfjs__dataset/-/rdfjs__dataset-1.0.5.tgz",
+      "integrity": "sha512-8OBC9Kr/ZSgNoUTe5mHTDPHaPt8Xen4XbYfqcbYv56d+4WdKliHXaFmFc0L4I5vsynE5JGu21Hvg2zWgX1Az6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "rdf-js": "^4.0.2"
+      }
+    },
     "node_modules/@types/react": {
       "version": "19.2.2",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
@@ -2223,6 +2316,18 @@
         "win32"
       ]
     },
+    "node_modules/abort-controller": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
+      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
+      "license": "MIT",
+      "dependencies": {
+        "event-target-shim": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=6.5"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
@@ -2606,6 +2711,30 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
     "node_modules/call-bind": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
@@ -2686,6 +2815,12 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/canonicalize": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/canonicalize/-/canonicalize-1.0.8.tgz",
+      "integrity": "sha512-0CNTVCLZggSh7bc5VkX5WWPWO+cyZbNd07IHIsSXLia/eAq+r836hgk+8BKoEh7949Mda87VUOitx5OddVj64A==",
+      "license": "Apache-2.0"
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -2754,6 +2889,15 @@
         "url": "https://opencollective.com/core-js"
       }
     },
+    "node_modules/cross-fetch": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.2.0.tgz",
+      "integrity": "sha512-Q+xVJLoGOeIMXZmbUK4HYk+69cQH6LudR0Vu/pRm2YlU/hDV9CiS0gKUMaWY5f2NeUH9C1nV3bsTlCo0FsTV1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "node-fetch": "^2.7.0"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -2789,6 +2933,15 @@
       "dev": true,
       "license": "BSD-2-Clause"
     },
+    "node_modules/data-uri-to-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz",
+      "integrity": "sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/data-view-buffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
@@ -3532,6 +3685,15 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/esm": {
+      "version": "3.2.25",
+      "resolved": "https://registry.npmjs.org/esm/-/esm-3.2.25.tgz",
+      "integrity": "sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/espree": {
       "version": "10.4.0",
       "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
@@ -3596,6 +3758,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/event-target-shim": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
+      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/events": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
@@ -3666,6 +3837,20 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fetch-blob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-2.1.2.tgz",
+      "integrity": "sha512-YKqtUDwqLyfyMnmbw8XD6Q8j9i/HggKtPEI+pZ1+8bvheBu78biSmNaXWusx1TauGqtUUGx/cBb1mKdq2rLYow==",
+      "license": "MIT",
+      "engines": {
+        "node": "^10.17.0 || >=12.3.0"
+      },
+      "peerDependenciesMeta": {
+        "domexception": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -4058,6 +4243,35 @@
         "hermes-estree": "0.25.1"
       }
     },
+    "node_modules/http-link-header": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/http-link-header/-/http-link-header-1.1.3.tgz",
+      "integrity": "sha512-3cZ0SRL8fb9MUlU3mKM61FcQvPfXx2dBrZW3Vbg5CXa8jFlK8OaEpePenLe1oEXQduhz8b0QjsqfS59QP4AJDQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -4643,6 +4857,39 @@
         "node": ">=6"
       }
     },
+    "node_modules/jsonld": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/jsonld/-/jsonld-5.2.0.tgz",
+      "integrity": "sha512-JymgT6Xzk5CHEmHuEyvoTNviEPxv6ihLWSPu1gFdtjSAyM6cFqNrv02yS/SIur3BBIkCf0HjizRc24d8/FfQKw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@digitalbazaar/http-client": "^1.1.0",
+        "canonicalize": "^1.0.1",
+        "lru-cache": "^6.0.0",
+        "rdf-canonize": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/jsonld/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/jsonld/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "license": "ISC"
+    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -4669,6 +4916,61 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/ky": {
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/ky/-/ky-0.25.1.tgz",
+      "integrity": "sha512-PjpCEWlIU7VpiMVrTwssahkYXX1by6NCT0fhTUX34F3DTinARlgMpriuroolugFPcMgpPWrOW4mTb984Qm1RXA==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/ky?sponsor=1"
+      }
+    },
+    "node_modules/ky-universal": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/ky-universal/-/ky-universal-0.8.2.tgz",
+      "integrity": "sha512-xe0JaOH9QeYxdyGLnzUOVGK4Z6FGvDVzcXFTdrYA1f33MZdEa45sUDaMBy98xQMcsd2XIBrTXRrRYnegcSdgVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "abort-controller": "^3.0.0",
+        "node-fetch": "3.0.0-beta.9"
+      },
+      "engines": {
+        "node": ">=10.17"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/ky-universal?sponsor=1"
+      },
+      "peerDependencies": {
+        "ky": ">=0.17.0",
+        "web-streams-polyfill": ">=2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "web-streams-polyfill": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ky-universal/node_modules/node-fetch": {
+      "version": "3.0.0-beta.9",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.0.0-beta.9.tgz",
+      "integrity": "sha512-RdbZCEynH2tH46+tj0ua9caUHVWrd/RHnRfvly2EVdqGmI3ndS1Vn/xjm5KuGejDt2RNDQsVRLPNd2QPwcewVg==",
+      "license": "MIT",
+      "dependencies": {
+        "data-uri-to-buffer": "^3.0.1",
+        "fetch-blob": "^2.1.1"
+      },
+      "engines": {
+        "node": "^10.17 || >=12.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/node-fetch"
+      }
+    },
     "node_modules/language-subtag-registry": {
       "version": "0.3.23",
       "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz",
@@ -5084,6 +5386,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/n3": {
+      "version": "1.26.0",
+      "resolved": "https://registry.npmjs.org/n3/-/n3-1.26.0.tgz",
+      "integrity": "sha512-SQknS0ua90rN+3RHuk8BeIqeYyqIH/+ecViZxX08jR4j6MugqWRjtONl3uANG/crWXnOM2WIqBJtjIhVYFha+w==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer": "^6.0.3",
+        "readable-stream": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -5205,6 +5520,26 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/node-fetch": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.27",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
@@ -5511,6 +5846,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -5563,6 +5907,28 @@
         "safe-buffer": "^5.1.0"
       }
     },
+    "node_modules/rdf-canonize": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/rdf-canonize/-/rdf-canonize-3.4.0.tgz",
+      "integrity": "sha512-fUeWjrkOO0t1rg7B2fdyDTvngj+9RlUyL92vOdiB7c0FPguWVsniIMjEtHH+meLBO9rzkUlUzBVXgWrjI8P9LA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "setimmediate": "^1.0.5"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/rdf-js": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/rdf-js/-/rdf-js-4.0.2.tgz",
+      "integrity": "sha512-ApvlFa/WsQh8LpPK/6hctQwG06Z9ztQQGWVtrcrf9L6+sejHNXLPOqL+w7q3hF+iL0C4sv3AX1PUtGkLNzyZ0Q==",
+      "deprecated": "Use @types/rdf-js instead. See https://github.com/rdfjs/types?tab=readme-ov-file#what-about-typesrdf-js",
+      "license": "MIT",
+      "dependencies": {
+        "@rdfjs/types": "*"
+      }
+    },
     "node_modules/react": {
       "version": "19.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
@@ -5593,6 +5959,22 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/readable-stream": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.7.0.tgz",
+      "integrity": "sha512-oIGGmcpTLwPga8Bn6/Z75SVaH1z5dUut2ibSyAMVhmUggWpmDn2dapB0n7f8nwaSiRtepAsfJyfXIO5DCVAODg==",
+      "license": "MIT",
+      "dependencies": {
+        "abort-controller": "^3.0.0",
+        "buffer": "^6.0.3",
+        "events": "^3.3.0",
+        "process": "^0.11.10",
+        "string_decoder": "^1.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -5862,6 +6244,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "license": "MIT"
+    },
     "node_modules/sharp": {
       "version": "0.34.5",
       "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
@@ -6049,6 +6437,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
     "node_modules/string.prototype.includes": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
@@ -6317,6 +6714,12 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+      "license": "MIT"
+    },
     "node_modules/ts-api-utils": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
@@ -6515,7 +6918,6 @@
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
       "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/unrs-resolver": {
@@ -6607,6 +7009,22 @@
         "uuid": "dist/esm/bin/uuid"
       }
     },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index 284a855..5a47d47 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,10 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.2.0",
+    "@inrupt/solid-client": "^1.23.1",
     "@inrupt/solid-client-authn-browser": "^3.1.1",
+    "@inrupt/vocab-common-rdf": "^1.0.5",
+    "n3": "^1.26.0",
     "next": "16.0.1",
     "react": "19.2.0",
     "react-dom": "19.2.0"