feat: add my storages functionality

Author: PreciousOritsedere

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);
           }

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>

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";