insforge 0.3.3 → 1.3.0

package/frontend/src/features/storage/components/BucketEmptyState.tsx

@@ -1,4 +1,5 @@
 import { Folder } from 'lucide-react';
+import { ConnectCTA } from '@/components/ConnectCTA';
 
 interface BucketEmptyStateProps {
   searchTerm: string;
@@ -6,14 +7,16 @@ interface BucketEmptyStateProps {
 
 export function BucketEmptyState({ searchTerm }: BucketEmptyStateProps) {
   return (
-    <div className="flex flex-col items-center justify-center py-8 px-4 text-center">
-      <Folder className="h-10 w-10 text-gray-400 dark:text-zinc-300 mb-2.5" />
-      <p className="text-sm text-gray-600 dark:text-zinc-300 font-medium">
+    <div className="flex flex-col items-center justify-center py-4 text-center">
+      <Folder className="h-10 w-10 text-gray-400 dark:text-neutral-600 mb-3" />
+      <p className="text-sm text-gray-600 dark:text-neutral-400 font-medium">
         {searchTerm ? 'No buckets found' : 'No buckets yet'}
       </p>
-      <p className="text-xs text-gray-500 dark:text-zinc-300 mt-2.5">
-        {searchTerm ? 'Try a different search term' : 'Create your first bucket to get started'}
-      </p>
+      {!searchTerm && (
+        <p className="text-xs text-gray-500 dark:text-neutral-400 font-medium mt-1 mx-10">
+          <ConnectCTA fallback="Create your first bucket to get started" />
+        </p>
+      )}
     </div>
   );
 }

package/frontend/src/features/storage/components/BucketFormDialog.tsx

@@ -1,19 +1,17 @@
 import React, { useState, useEffect } from 'react';
-import { useMutation } from '@tanstack/react-query';
-import { storageService } from '@/features/storage/services/storage.service';
+import { useStorage } from '@/features/storage/hooks/useStorage';
 import {
+  Button,
   Dialog,
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from '@/components/radix/Dialog';
-import { Button } from '@/components/radix/Button';
-import { Input } from '@/components/radix/Input';
-import { Label } from '@/components/radix/Label';
-import { Switch } from '@/components/radix/Switch';
-import { useToast } from '@/lib/hooks/useToast';
+  Input,
+  Label,
+  Switch,
+} from '@/components';
 
 interface BucketFormDialogProps {
   open: boolean;
@@ -35,7 +33,8 @@ export function BucketFormDialog({
   const [bucketName, setBucketName] = useState(initialBucketName);
   const [isPublic, setIsPublic] = useState(initialIsPublic);
   const [error, setError] = useState('');
-  const { showToast } = useToast();
+
+  const { createBucket, editBucket, isCreatingBucket, isEditingBucket } = useStorage();
 
   useEffect(() => {
     if (open) {
@@ -50,33 +49,7 @@ export function BucketFormDialog({
     }
   }, [open, mode, initialBucketName, initialIsPublic]);
 
-  const createBucketMutation = useMutation({
-    mutationFn: ({ name, isPublic }: { name: string; isPublic: boolean }) =>
-      storageService.createBucket(name, isPublic),
-    onSuccess: () => {
-      onSuccess(bucketName);
-      showToast('Bucket created successfully', 'success');
-      handleClose();
-    },
-    onError: (error: Error) => {
-      setError(error.message || 'Failed to create bucket');
-    },
-  });
-
-  const editBucketMutation = useMutation({
-    mutationFn: ({ name, isPublic }: { name: string; isPublic: boolean }) =>
-      storageService.editBucket(name, { isPublic: isPublic }),
-    onSuccess: () => {
-      onSuccess();
-      showToast('Bucket updated successfully', 'success');
-      handleClose();
-    },
-    onError: (error: Error) => {
-      setError(error.message || 'Failed to update bucket');
-    },
-  });
-
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent): Promise<void> => {
     e.preventDefault();
 
     if (mode === 'create') {
@@ -84,9 +57,21 @@ export function BucketFormDialog({
         setError('Bucket name is required');
         return;
       }
-      createBucketMutation.mutate({ name: bucketName.trim(), isPublic });
+      try {
+        await createBucket({ bucketName: bucketName.trim(), isPublic });
+        onSuccess(bucketName);
+        handleClose();
+      } catch (error) {
+        setError(error instanceof Error ? error.message : 'Failed to create bucket');
+      }
     } else {
-      editBucketMutation.mutate({ name: bucketName, isPublic });
+      try {
+        await editBucket({ bucketName, config: { isPublic } });
+        onSuccess();
+        handleClose();
+      } catch (error) {
+        setError(error instanceof Error ? error.message : 'Failed to update bucket');
+      }
     }
   };
 
@@ -94,8 +79,7 @@ export function BucketFormDialog({
     onOpenChange(false);
   };
 
-  const isLoading =
-    mode === 'create' ? createBucketMutation.isPending : editBucketMutation.isPending;
+  const isLoading = mode === 'create' ? isCreatingBucket : isEditingBucket;
   const submitButtonText =
     mode === 'create'
       ? isLoading
@@ -108,7 +92,7 @@ export function BucketFormDialog({
   return (
     <Dialog open={open} onOpenChange={handleClose}>
       <DialogContent className="w-[480px] p-0 border-zinc-200 shadow-[0px_1px_3px_0px_rgba(0,0,0,0.1)]">
-        <form onSubmit={handleSubmit} className="flex flex-col">
+        <form onSubmit={(e) => void handleSubmit(e)} className="flex flex-col">
           <DialogHeader className="px-6 py-3 flex flex-col gap-1 justify-start border-b border-zinc-200 dark:border-neutral-700">
             <DialogTitle className="text-lg font-semibold text-zinc-950 dark:text-white">
               {mode === 'create' ? 'Create New Bucket' : 'Edit Bucket'}

package/frontend/src/features/storage/components/FilePreviewDialog.tsx

@@ -1,11 +1,8 @@
 import { useState, useEffect } from 'react';
 import { Download, ExternalLink } from 'lucide-react';
-import { Dialog, DialogContent } from '@/components/radix/Dialog';
-import { Button } from '@/components/radix/Button';
-import { LoadingState } from '@/components';
-import { storageService } from '@/features/storage/services/storage.service';
+import { Button, Dialog, DialogContent, LoadingState, TypeBadge } from '@/components';
+import { useStorage } from '@/features/storage/hooks/useStorage';
 import { StorageFileSchema } from '@insforge/shared-schemas';
-import { TypeBadge } from '@/components/TypeBadge';
 
 interface FilePreviewDialogProps {
   open: boolean;
@@ -19,6 +16,8 @@ export function FilePreviewDialog({ open, onOpenChange, file, bucket }: FilePrev
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
 
+  const { downloadObject } = useStorage();
+
   // Reset state when file changes
   useEffect(() => {
     if (!file || !open) {
@@ -27,7 +26,9 @@ export function FilePreviewDialog({ open, onOpenChange, file, bucket }: FilePrev
       return;
     }
 
-    const loadPreview = () => {
+    let currentUrl: string | null = null;
+
+    const loadPreview = async () => {
       if (!file) {
         return;
       }
@@ -37,7 +38,10 @@ export function FilePreviewDialog({ open, onOpenChange, file, bucket }: FilePrev
 
       try {
         const fileBucket = file.bucket || bucket;
-        const url = storageService.getDownloadUrl(fileBucket, file.key);
+        // Fetch file with authentication and create blob URL
+        const blob = await downloadObject(fileBucket, file.key);
+        const url = URL.createObjectURL(blob);
+        currentUrl = url;
         setPreviewUrl(url);
       } catch (err) {
         const errorMessage = err instanceof Error ? err.message : 'Failed to load preview';
@@ -48,7 +52,14 @@ export function FilePreviewDialog({ open, onOpenChange, file, bucket }: FilePrev
     };
 
     void loadPreview();
-  }, [file, open, bucket]);
+
+    // Cleanup: Revoke blob URL when component unmounts or file changes
+    return () => {
+      if (currentUrl) {
+        URL.revokeObjectURL(currentUrl);
+      }
+    };
+  }, [file, open, bucket, downloadObject]);
 
   const handleDownload = () => {
     if (!file || !previewUrl) {
@@ -250,6 +261,7 @@ function TextPreview({ url }: { url: string }) {
     const loadTextContent = async () => {
       try {
         setLoading(true);
+        // Fetch the blob URL (which is already authenticated)
         const response = await fetch(url);
         if (!response.ok) {
           throw new Error('Failed to load text content');

package/frontend/src/features/storage/components/StorageDataGrid.tsx

@@ -6,8 +6,8 @@ import {
   type RenderCellProps,
   type DataGridColumn,
   type DataGridRowType,
-} from '@/components/datagrid';
-import { Button } from '@/components/radix/Button';
+  Button,
+} from '@/components';
 import { Download, Eye, Trash2, Image, FileText, Music, Video, Archive, File } from 'lucide-react';
 import { StorageFileSchema } from '@insforge/shared-schemas';
 
@@ -135,6 +135,7 @@ export function createStorageColumns(
     columns.push({
       key: 'actions',
       name: '',
+      minWidth: 120,
       maxWidth: 120,
       resizable: false,
       sortable: false,
@@ -178,7 +179,7 @@ export function createStorageColumns(
               <Button
                 variant="ghost"
                 size="icon"
-                className="h-8 w-8 hover:bg-red-50"
+                className="h-8 w-8"
                 onClick={(e) => {
                   e.stopPropagation();
                   onDelete(row as StorageFileSchema);

package/frontend/src/features/storage/components/StorageManager.tsx

@@ -1,12 +1,10 @@
 import { useState, useCallback, useMemo, useEffect } from 'react';
-import { useQuery, useQueryClient, useMutation } from '@tanstack/react-query';
 import { Folder } from 'lucide-react';
-import { storageService } from '@/features/storage/services/storage.service';
+import { useStorage } from '@/features/storage/hooks/useStorage';
 import { StorageFileSchema } from '@insforge/shared-schemas';
-import { LoadingState, ErrorState, EmptyState } from '@/components';
+import { LoadingState, ErrorState, EmptyState, ConfirmDialog, ConnectCTA } from '@/components';
 import { StorageDataGrid } from './StorageDataGrid';
 import { FilePreviewDialog } from './FilePreviewDialog';
-import { ConfirmDialog } from '@/components/ConfirmDialog';
 import { useConfirm } from '@/lib/hooks/useConfirm';
 import { useToast } from '@/lib/hooks/useToast';
 import { SortColumn } from 'react-data-grid';
@@ -28,7 +26,6 @@ export function StorageManager({
   onSelectedFilesChange,
   isRefreshing = false,
 }: StorageManagerProps) {
-  const queryClient = useQueryClient();
   const [downloadingFiles, setDownloadingFiles] = useState<Set<string>>(new Set());
   const [previewFile, setPreviewFile] = useState<StorageFileSchema | null>(null);
   const [showPreviewDialog, setShowPreviewDialog] = useState(false);
@@ -45,25 +42,21 @@ export function StorageManager({
     setCurrentPage(1);
   }, [searchQuery, bucketName]);
 
+  const { useListObjects, deleteObjects, downloadObject } = useStorage();
+
   // Fetch objects in selected bucket
   const {
     data: objectsData,
     isLoading: objectsLoading,
     error: objectsError,
-  } = useQuery({
-    queryKey: ['storage', 'objects', bucketName, currentPage, pageSize, searchQuery],
-    queryFn: () =>
-      storageService.listObjects(
-        bucketName,
-        {
-          limit: pageSize,
-          offset: (currentPage - 1) * pageSize,
-        },
-        searchQuery
-      ),
-    enabled: !!bucketName,
-    placeholderData: (previousData) => previousData, // Keep previous data while loading
-  });
+  } = useListObjects(
+    bucketName,
+    {
+      limit: pageSize,
+      offset: (currentPage - 1) * pageSize,
+    },
+    searchQuery
+  );
 
   // Calculate pagination from backend response
   const totalPages = useMemo(() => {
@@ -71,22 +64,13 @@ export function StorageManager({
     return Math.ceil(total / pageSize);
   }, [objectsData?.pagination.total, fileCount, pageSize]);
 
-  // Delete mutation
-  const deleteMutation = useMutation({
-    mutationFn: ({ bucket, key }: { bucket: string; key: string }) =>
-      storageService.deleteObject(bucket, key),
-    onSuccess: () => {
-      void queryClient.invalidateQueries({ queryKey: ['storage'] });
-    },
-  });
-
   // No need for client-side filtering - backend handles search
   // Just apply sorting
   const processedFiles = useMemo(() => {
     let files = objectsData?.objects || [];
 
     // Apply sorting
-    if (sortColumns.length > 0) {
+    if (sortColumns.length) {
       const sortColumn = sortColumns[0];
       files = [...files].sort((a, b) => {
         const aValue = a[sortColumn.columnKey as keyof StorageFileSchema];
@@ -115,7 +99,7 @@ export function StorageManager({
     async (file: StorageFileSchema) => {
       setDownloadingFiles((prev) => new Set(prev).add(file.key));
       try {
-        const blob = await storageService.downloadObject(bucketName, file.key);
+        const blob = await downloadObject(bucketName, file.key);
 
         // Create download link
         const url = window.URL.createObjectURL(blob);
@@ -137,7 +121,7 @@ export function StorageManager({
         });
       }
     },
-    [bucketName, showToast]
+    [bucketName, downloadObject, showToast]
   );
 
   const handlePreview = useCallback((file: StorageFileSchema) => {
@@ -157,10 +141,10 @@ export function StorageManager({
       const shouldDelete = await confirm(confirmOptions);
 
       if (shouldDelete) {
-        deleteMutation.mutate({ bucket: bucketName, key: file.key });
+        deleteObjects({ bucket: bucketName, keys: [file.key] });
       }
     },
-    [bucketName, confirm, deleteMutation]
+    [bucketName, confirm, deleteObjects]
   );
 
   const isDownloading = useCallback(
@@ -217,7 +201,12 @@ export function StorageManager({
           onDownload={(file) => void handleDownload(file)}
           onDelete={(file) => void handleDelete(file)}
           isDownloading={isDownloading}
-          emptyStateTitle={searchQuery ? 'No files match your search criteria' : 'No files found'}
+          emptyState={
+            <div className="text-sm text-zinc-500 dark:text-zinc-400">
+              {searchQuery ? 'No files match your search criteria' : 'No files found'}.{' '}
+              <ConnectCTA />
+            </div>
+          }
         />
       </div>
 

package/frontend/src/features/storage/components/index.ts

@@ -0,0 +1,12 @@
+export { BucketEmptyState } from './BucketEmptyState';
+export { BucketFormDialog } from './BucketFormDialog';
+export { BucketListSkeleton } from './BucketListSkeleton';
+export { FilePreviewDialog } from './FilePreviewDialog';
+export {
+  createStorageColumns,
+  StorageDataGrid,
+  type StorageDataGridProps,
+} from './StorageDataGrid';
+export { StorageManager } from './StorageManager';
+export { StorageSidebar } from './StorageSidebar';
+export { useUploadToast } from './UploadToast';

package/frontend/src/features/storage/hooks/useStorage.ts

@@ -0,0 +1,208 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { storageService, type ListObjectsParams } from '../services/storage.service';
+import { useToast } from '@/lib/hooks/useToast';
+
+export function useStorage() {
+  const queryClient = useQueryClient();
+  const { showToast } = useToast();
+
+  // Query to fetch all buckets
+  const {
+    data: buckets,
+    isLoading: isLoadingBuckets,
+    error: bucketsError,
+    refetch: refetchBuckets,
+  } = useQuery({
+    queryKey: ['storage', 'buckets'],
+    queryFn: () => storageService.listBuckets(),
+  });
+
+  // Hook to fetch objects in a bucket
+  const useListObjects = (
+    bucketName: string,
+    params?: ListObjectsParams,
+    searchQuery?: string,
+    enabled = true
+  ) => {
+    return useQuery({
+      queryKey: ['storage', 'objects', bucketName, params?.limit, params?.offset, searchQuery],
+      queryFn: () => storageService.listObjects(bucketName, params, searchQuery),
+      enabled: enabled && !!bucketName,
+      placeholderData: (previousData) => previousData,
+    });
+  };
+
+  // Query to fetch bucket statistics
+  const useBucketStats = (enabled = true) => {
+    return useQuery({
+      queryKey: ['storage', 'bucket-stats', buckets],
+      queryFn: async () => {
+        const stats: Record<
+          string,
+          { fileCount: number; totalSize: number; public: boolean; createdAt?: string }
+        > = {};
+        const currentBuckets = buckets || [];
+        const promises = currentBuckets.map(async (bucket) => {
+          try {
+            const result = await storageService.listObjects(bucket.name, { limit: 1000 });
+            const objects = result.objects;
+            const totalSize = objects.reduce((sum, file) => sum + file.size, 0);
+            return {
+              bucketName: bucket.name,
+              stats: {
+                fileCount: result.pagination.total,
+                totalSize: totalSize,
+                public: bucket.public,
+                createdAt: bucket.createdAt,
+              },
+            };
+          } catch (error) {
+            if (error) {
+              console.error(error);
+              return null;
+            }
+            return {
+              bucketName: bucket.name,
+              stats: {
+                fileCount: 0,
+                totalSize: 0,
+                public: bucket.public,
+                createdAt: bucket.createdAt,
+              },
+            };
+          }
+        });
+        const results = await Promise.all(promises);
+        results.forEach((result) => {
+          if (result) {
+            stats[result.bucketName] = result.stats;
+          }
+        });
+        return stats;
+      },
+      enabled: enabled && (buckets?.length || 0) > 0,
+      staleTime: 30000,
+    });
+  };
+
+  // Mutation to upload an object
+  const uploadObjectMutation = useMutation({
+    mutationFn: async ({
+      bucket,
+      objectKey,
+      file,
+    }: {
+      bucket: string;
+      objectKey: string;
+      file: File;
+    }) => storageService.uploadObject(bucket, objectKey, file),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ['storage'] });
+    },
+  });
+
+  // Mutation to delete an object
+  const deleteObjectsMutation = useMutation({
+    mutationFn: ({ bucket, keys }: { bucket: string; keys: string[] }) =>
+      storageService.deleteObjects(bucket, keys),
+    onSuccess: (result) => {
+      const { success, failures } = result;
+      const successCount = success.length;
+      const failureCount = failures.length;
+      if (failureCount > 0 && successCount > 0) {
+        showToast(
+          `${successCount} ${successCount > 1 ? 'files' : 'file'} deleted, ${failureCount} ${failureCount > 1 ? 'files' : 'file'} failed to delete.`,
+          'warn'
+        );
+      } else if (failureCount > 0) {
+        showToast(
+          `Failed to delete ${failureCount} ${failureCount > 1 ? 'files' : 'file'}`,
+          'error'
+        );
+      } else if (successCount > 0) {
+        showToast(
+          `${successCount} ${successCount > 1 ? 'files' : 'file'} deleted successfully.`,
+          'success'
+        );
+      }
+
+      void queryClient.invalidateQueries({ queryKey: ['storage'] });
+    },
+    onError: (error: Error) => {
+      const errorMessage = error instanceof Error ? error.message : 'Failed to delete file';
+      showToast(errorMessage, 'error');
+    },
+  });
+
+  // Mutation to create a bucket
+  const createBucketMutation = useMutation({
+    mutationFn: ({ bucketName, isPublic }: { bucketName: string; isPublic: boolean }) =>
+      storageService.createBucket(bucketName, isPublic),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ['storage', 'buckets'] });
+      showToast('Bucket created successfully', 'success');
+    },
+    onError: (error: Error) => {
+      const errorMessage = error instanceof Error ? error.message : 'Failed to create bucket';
+      showToast(errorMessage, 'error');
+    },
+  });
+
+  // Mutation to delete a bucket
+  const deleteBucketMutation = useMutation({
+    mutationFn: (bucketName: string) => storageService.deleteBucket(bucketName),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ['storage', 'buckets'] });
+      showToast('Bucket deleted successfully', 'success');
+    },
+    onError: (error: Error) => {
+      const errorMessage = error instanceof Error ? error.message : 'Failed to delete bucket';
+      showToast(errorMessage, 'error');
+    },
+  });
+
+  // Mutation to edit a bucket
+  const editBucketMutation = useMutation({
+    mutationFn: ({ bucketName, config }: { bucketName: string; config: { isPublic: boolean } }) =>
+      storageService.editBucket(bucketName, config),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ['storage'] });
+      showToast('Bucket updated successfully', 'success');
+    },
+    onError: (error: Error) => {
+      const errorMessage = error instanceof Error ? error.message : 'Failed to update bucket';
+      showToast(errorMessage, 'error');
+    },
+  });
+
+  return {
+    // Data
+    buckets: buckets || [],
+    bucketsCount: buckets?.length || 0,
+
+    // Loading states
+    isLoadingBuckets,
+    isUploadingObject: uploadObjectMutation.isPending,
+    isDeletingObject: deleteObjectsMutation.isPending,
+    isCreatingBucket: createBucketMutation.isPending,
+    isDeletingBucket: deleteBucketMutation.isPending,
+    isEditingBucket: editBucketMutation.isPending,
+
+    // Errors
+    bucketsError,
+
+    // Actions
+    uploadObject: uploadObjectMutation.mutateAsync,
+    deleteObjects: deleteObjectsMutation.mutate,
+    createBucket: createBucketMutation.mutateAsync,
+    deleteBucket: deleteBucketMutation.mutateAsync,
+    editBucket: editBucketMutation.mutateAsync,
+    refetchBuckets,
+
+    // Helpers
+    useListObjects,
+    useBucketStats,
+    getDownloadUrl: storageService.getDownloadUrl,
+    downloadObject: storageService.downloadObject,
+  };
+}