insforge 0.3.3 → 1.3.0

package/frontend/src/features/storage/{page → pages}/StoragePage.tsx

@@ -1,33 +1,30 @@
 import React, { useState, useEffect, useRef, useCallback, type DragEvent } from 'react';
-import { useQuery, useQueryClient, useMutation } from '@tanstack/react-query';
+import { useQueryClient } from '@tanstack/react-query';
 import { Upload } from 'lucide-react';
 import PencilIcon from '@/assets/icons/pencil.svg?react';
 import RefreshIcon from '@/assets/icons/refresh.svg?react';
-import { storageService } from '@/features/storage/services/storage.service';
-import { Button } from '@/components/radix/Button';
-import { Alert, AlertDescription } from '@/components/radix/Alert';
+import { useStorage } from '@/features/storage/hooks/useStorage';
 import { StorageSidebar } from '@/features/storage/components/StorageSidebar';
 import { StorageManager } from '@/features/storage/components/StorageManager';
 import { BucketFormDialog } from '@/features/storage/components/BucketFormDialog';
-import { ConfirmDialog } from '@/components/ConfirmDialog';
-import { EmptyState } from '@/components/EmptyState';
+
+import { useConfirm } from '@/lib/hooks/useConfirm';
+import { useToast } from '@/lib/hooks/useToast';
+import { useUploadToast } from '@/features/storage/components/UploadToast';
 import {
+  SearchInput,
+  SelectionClearButton,
+  DeleteActionButton,
+  Alert,
+  AlertDescription,
+  Button,
+  ConfirmDialog,
+  EmptyState,
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from '@/components/radix/Tooltip';
-import { useConfirm } from '@/lib/hooks/useConfirm';
-import { useToast } from '@/lib/hooks/useToast';
-import { useUploadToast } from '@/features/storage/components/UploadToast';
-import { SearchInput, SelectionClearButton, DeleteActionButton } from '@/components';
-import {
-  DataUpdatePayload,
-  DataUpdateResourceType,
-  ServerEvents,
-  SocketMessage,
-  useSocket,
-} from '@/lib/contexts/SocketContext';
+} from '@/components';
 
 interface BucketFormState {
   mode: 'create' | 'edit';
@@ -49,131 +46,43 @@ export default function StoragePage() {
     name: null,
     isPublic: false,
   });
+  const queryClient = useQueryClient();
   const { confirm, confirmDialogProps } = useConfirm();
   const { showToast } = useToast();
   const { showUploadToast, updateUploadProgress, cancelUpload } = useUploadToast();
-  const queryClient = useQueryClient();
   const fileInputRef = useRef<HTMLInputElement>(null);
   const uploadAbortControllerRef = useRef<AbortController | null>(null);
 
-  const { socket, isConnected } = useSocket();
-
-  // Fetch buckets
   const {
-    data: buckets = [],
-    isLoading,
-    error: bucketsError,
-    refetch: refetchBuckets,
-  } = useQuery({
-    queryKey: ['storage', 'buckets'],
-    queryFn: () => storageService.listBuckets(),
-  });
-
-  // Fetch bucket statistics
-  const { data: bucketStats } = 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: buckets.length > 0,
-    staleTime: 30000, // Cache for 30 seconds
-  });
+    buckets,
+    isLoadingBuckets: isLoading,
+    bucketsError,
+    refetchBuckets,
+    useBucketStats,
+    uploadObject,
+    deleteObjects,
+    deleteBucket,
+  } = useStorage();
+
+  const { data: bucketStats } = useBucketStats();
 
   // Build bucket info map
   const bucketInfo = React.useMemo(() => {
     return bucketStats || {};
   }, [bucketStats]);
 
-  // Upload mutation
-  const uploadMutation = useMutation({
-    mutationFn: async ({
-      bucket,
-      file,
-      fileName,
-    }: {
-      bucket: string;
-      file: File;
-      fileName?: string;
-    }) => {
-      const key = fileName || file.name;
-      return await storageService.uploadObject(bucket, key, file);
-    },
-    onSuccess: () => {
-      void queryClient.invalidateQueries({ queryKey: ['storage'] });
-    },
-    // Remove global onError handler - errors are now handled individually in uploadFiles
-  });
-
-  useEffect(() => {
-    if (!socket || !isConnected) {
-      return;
-    }
-
-    const handleDataUpdate = (message: SocketMessage<DataUpdatePayload>) => {
-      if (
-        message.payload?.resource === DataUpdateResourceType.METADATA ||
-        message.payload?.resource === DataUpdateResourceType.STORAGE_SCHEMA
-      ) {
-        // Invalidate all buckets queries
-        void queryClient.invalidateQueries({ queryKey: ['storage'] });
-      }
-    };
-
-    socket.on(ServerEvents.DATA_UPDATE, handleDataUpdate);
-
-    return () => {
-      socket.off(ServerEvents.DATA_UPDATE, handleDataUpdate);
-    };
-  }, [socket, isConnected, queryClient]);
-
   // Auto-select first bucket
   useEffect(() => {
-    if (buckets.length > 0 && !selectedBucket) {
+    if (buckets.length && !selectedBucket) {
       setSelectedBucket(buckets[0].name);
     }
   }, [buckets, selectedBucket]);
 
+  // Clear selected files when switching buckets
+  useEffect(() => {
+    setSelectedFiles(new Set());
+  }, [selectedBucket]);
+
   const handleRefresh = async () => {
     setIsRefreshing(true);
     try {
@@ -188,7 +97,7 @@ export default function StoragePage() {
 
   // Handle bulk delete files
   const handleBulkDeleteFiles = async (fileKeys: string[]) => {
-    if (!selectedBucket || fileKeys.length === 0) {
+    if (!selectedBucket || !fileKeys.length) {
       return;
     }
 
@@ -200,20 +109,13 @@ export default function StoragePage() {
     });
 
     if (shouldDelete) {
-      try {
-        await Promise.all(fileKeys.map((key) => storageService.deleteObject(selectedBucket, key)));
-        void queryClient.invalidateQueries({ queryKey: ['storage'] });
-        setSelectedFiles(new Set());
-        showToast(`${fileKeys.length} files deleted successfully`, 'success');
-      } catch {
-        showToast('Failed to delete some files', 'error');
-      }
+      deleteObjects({ bucket: selectedBucket, keys: fileKeys });
+      setSelectedFiles(new Set());
     }
-    void queryClient.invalidateQueries({ queryKey: ['storage'] });
   };
 
   const uploadFiles = async (files: FileList | File[] | null) => {
-    if (!files || files.length === 0 || !selectedBucket) {
+    if (!files || !files.length || !selectedBucket) {
       return;
     }
 
@@ -246,10 +148,10 @@ export default function StoragePage() {
       updateUploadProgress(toastId, progress);
 
       try {
-        await uploadMutation.mutateAsync({
+        await uploadObject({
           bucket: selectedBucket,
+          objectKey: files[i].name,
           file: files[i],
-          fileName: files[i].name, // Backend will auto-rename if needed
         });
         successCount++;
       } catch (error) {
@@ -282,7 +184,7 @@ export default function StoragePage() {
     showToast,
     showUploadToast,
     updateUploadProgress,
-    uploadMutation,
+    uploadObject,
   ]);
 
   const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -301,12 +203,8 @@ export default function StoragePage() {
 
     if (shouldDelete) {
       try {
-        await storageService.deleteBucket(bucketName);
-
-        // Refresh buckets list
+        await deleteBucket(bucketName);
         await refetchBuckets();
-        showToast('Bucket deleted successfully', 'success');
-
         // If the deleted bucket was selected, select the first available bucket
         if (selectedBucket === bucketName) {
           const updatedBuckets =

package/frontend/src/features/storage/services/storage.service.ts

@@ -94,7 +94,7 @@ export const storageService = {
 
   // Download an object (returns blob)
   async downloadObject(bucketName: string, objectKey: string): Promise<Blob> {
-    const response = await fetch(this.getDownloadUrl(bucketName, objectKey), {
+    const response = await fetch(storageService.getDownloadUrl(bucketName, objectKey), {
       headers: {
         Authorization: `Bearer ${apiClient.getToken()}`,
       },
@@ -116,6 +116,27 @@ export const storageService = {
     );
   },
 
+  async deleteObjects(
+    bucketName: string,
+    objectKeys: string[]
+  ): Promise<{ success: string[]; failures: { key: string; error: Error }[] }> {
+    const results = await Promise.allSettled(
+      objectKeys.map((key) => this.deleteObject(bucketName, key))
+    );
+    const success: string[] = [];
+    const failures: { key: string; error: Error }[] = [];
+
+    results.forEach((result, index) => {
+      if (result.status === 'fulfilled') {
+        success.push(objectKeys[index]);
+      } else {
+        failures.push({ key: objectKeys[index], error: result.reason as Error });
+      }
+    });
+
+    return { success, failures };
+  },
+
   // Create a new bucket
   async createBucket(bucketName: string, isPublic: boolean = true): Promise<void> {
     await apiClient.request('/storage/buckets', {

package/frontend/src/features/visualizer/components/AuthNode.tsx

@@ -1,34 +1,35 @@
-import { Lock, FormInput, Users } from 'lucide-react';
-import GoogleIcon from '@/assets/logos/google.svg';
-import GithubIcon from '@/assets/logos/github.svg';
+import { Lock, FormInput, Users, Circle } from 'lucide-react';
+import { Handle, Position } from '@xyflow/react';
 import { AuthMetadataSchema } from '@insforge/shared-schemas';
 import { cn } from '@/lib/utils/utils';
 import { useOAuthConfig } from '@/features/auth/hooks/useOAuthConfig';
+import { oauthProviders } from '@/features/auth/helpers';
 
 interface AuthNodeProps {
   data: {
     authMetadata: AuthMetadataSchema;
     userCount?: number;
+    isReferenced?: boolean; // Whether any tables have foreign keys to users.id
   };
 }
 
 export function AuthNode({ data }: AuthNodeProps) {
-  const { authMetadata, userCount } = data;
+  const { authMetadata, userCount, isReferenced = false } = data;
   const { isProviderConfigured } = useOAuthConfig();
 
-  const enabledCount = authMetadata.oauths.length;
+  const enabledCount = authMetadata.oauths.length + 1;
 
   return (
-    <div className="bg-neutral-900 rounded-lg border border-[#363636] min-w-[280px]">
+    <div className="bg-white dark:bg-neutral-900 rounded-lg border border-gray-300 dark:border-[#363636] min-w-[280px] shadow-sm">
       {/* Auth Header */}
-      <div className="flex items-center justify-between p-2 border-b border-neutral-800">
+      <div className="flex items-center justify-between p-2 border-b border-gray-200 dark:border-neutral-800">
         <div className="flex items-center gap-2">
           <div className="flex items-center justify-center w-11 h-11 bg-lime-300 rounded p-1.5">
             <Lock className="w-5 h-5 text-neutral-900" />
           </div>
           <div className="flex-1">
-            <h3 className="text-sm font-medium text-white">Authentication</h3>
-            <p className="text-xs text-neutral-300">
+            <h3 className="text-sm font-medium text-zinc-950 dark:text-white">Authentication</h3>
+            <p className="text-xs text-zinc-600 dark:text-neutral-300">
               {enabledCount} provider{enabledCount !== 1 ? 's' : ''} enabled
             </p>
           </div>
@@ -39,67 +40,82 @@ export function AuthNode({ data }: AuthNodeProps) {
       </div>
 
       {/* Auth Providers */}
-      <div className="p-2 space-y-2 border-b border-neutral-800">
+      <div className="p-2 space-y-2 border-b border-gray-200 dark:border-neutral-800">
         {/* Email/Password */}
-        <div className="flex items-center justify-between p-2.5 bg-neutral-800 rounded">
+        <div className="flex items-center justify-between p-2.5 bg-gray-100 dark:bg-neutral-800 rounded">
           <div className="flex items-center gap-2.5">
-            <FormInput className="w-5 h-5 text-neutral-300" />
-            <span className="text-sm text-neutral-300">Email/Password</span>
+            <FormInput className="w-5 h-5 text-zinc-700 dark:text-neutral-300" />
+            <span className="text-sm text-zinc-700 dark:text-neutral-300">Email/Password</span>
           </div>
           <div className="px-1.5 py-0.5 bg-lime-200 rounded flex items-center">
             <span className="text-xs font-medium text-lime-900">Enabled</span>
           </div>
         </div>
 
-        {/* Google OAuth */}
-        <div className="flex items-center justify-between p-2.5 bg-neutral-800 rounded">
-          <div className="flex items-center gap-2.5">
-            <img src={GoogleIcon} alt="google" className="h-5 w-5" />
-            <span className="text-sm text-neutral-300">Google OAuth</span>
-          </div>
-          <div
-            className={cn(
-              'px-1.5 py-0.5 rounded flex items-center',
-              isProviderConfigured('google')
-                ? 'bg-lime-200 text-lime-900'
-                : 'bg-neutral-700 text-neutral-300'
-            )}
-          >
-            <span className="text-xs font-medium">
-              {isProviderConfigured('google') ? 'Enabled' : 'Disabled'}
-            </span>
-          </div>
-        </div>
-
-        {/* GitHub OAuth */}
-        <div className="flex items-center justify-between p-2.5 bg-neutral-800 rounded">
-          <div className="flex items-center gap-2.5">
-            <img src={GithubIcon} alt="github" className="h-5 w-5" />
-            <span className="text-sm text-neutral-300">GitHub OAuth</span>
-          </div>
-          <div
-            className={cn(
-              'px-1.5 py-0.5 rounded flex items-center',
-              isProviderConfigured('github')
-                ? 'bg-lime-200 text-lime-900'
-                : 'bg-neutral-700 text-neutral-300'
-            )}
-          >
-            <span className="text-xs font-medium">
-              {isProviderConfigured('github') ? 'Enabled' : 'Disabled'}
-            </span>
-          </div>
-        </div>
+        {/* OAuth Providers */}
+        {oauthProviders.map((provider) => {
+          const isEnabled = isProviderConfigured(provider.id);
+          return (
+            <div
+              key={provider.id}
+              className="flex items-center justify-between p-2.5 bg-gray-100 dark:bg-neutral-800 rounded"
+            >
+              <div className="flex items-center gap-2.5">
+                <div className="w-5 h-5 flex items-center justify-center [&>svg]:w-5 [&>svg]:h-5">
+                  {provider.icon}
+                </div>
+                <span className="text-sm text-zinc-700 dark:text-neutral-300">{provider.name}</span>
+              </div>
+              <div
+                className={cn(
+                  'px-1.5 py-0.5 rounded flex items-center',
+                  isEnabled
+                    ? 'bg-lime-200 text-lime-900'
+                    : 'bg-gray-200 dark:bg-neutral-700 text-gray-600 dark:text-neutral-300'
+                )}
+              >
+                <span className="text-xs font-medium">{isEnabled ? 'Enabled' : 'Disabled'}</span>
+              </div>
+            </div>
+          );
+        })}
       </div>
 
       {/* Users Section */}
-      <div className="flex items-center justify-between p-3 border-t border-neutral-700">
+      <div className="flex items-center justify-between p-3 border-t border-gray-300 dark:border-neutral-700 relative">
+        {/* Target handle for auth.id references - positioned at right bottom corner */}
+        <Handle
+          type="target"
+          position={Position.Right}
+          id="id-target"
+          className="!w-3 !h-3 !opacity-0 !border-0 !pointer-events-none"
+          style={{
+            right: 16,
+            bottom: 16,
+            top: 'auto',
+            transform: 'none',
+            pointerEvents: 'none',
+          }}
+          isConnectable={false}
+        />
+
         <div className="flex items-center gap-2.5">
-          <Users className="w-5 h-5 text-neutral-300" />
-          <span className="text-sm text-neutral-300">Users</span>
+          <Users className="w-5 h-5 text-zinc-700 dark:text-neutral-300" />
+          <span className="text-sm text-zinc-700 dark:text-neutral-300">Users</span>
+          <span className="text-xs text-zinc-500 dark:text-neutral-400">{userCount ?? 0}</span>
         </div>
         <div className="flex items-center">
-          {userCount !== undefined && <span className="text-xs text-neutral-400">{userCount}</span>}
+          {isReferenced ? (
+            <div className="w-5 h-5 flex items-center justify-center relative">
+              <Circle
+                className="w-5 h-5 text-zinc-950 dark:text-white fill-none stroke-current"
+                strokeWidth={1.5}
+              />
+              <div className="w-2 h-2 bg-zinc-950 dark:bg-white rounded-full absolute" />
+            </div>
+          ) : (
+            <Circle className="w-5 h-5 text-gray-400 dark:text-neutral-700 fill-gray-100 dark:fill-neutral-800 stroke-current" />
+          )}
         </div>
       </div>
     </div>

package/frontend/src/features/visualizer/components/BucketNode.tsx

@@ -11,16 +11,16 @@ export function BucketNode({ data }: BucketNodeProps) {
   const { bucket } = data;
 
   return (
-    <div className="bg-neutral-900 rounded-lg border border-[#363636] min-w-[320px]">
+    <div className="bg-white dark:bg-neutral-900 rounded-lg border border-gray-300 dark:border-[#363636] min-w-[320px] shadow-sm">
       {/* Bucket Header */}
-      <div className="flex items-center justify-between p-2 border-b border-neutral-800">
+      <div className="flex items-center justify-between p-2 border-b border-gray-200 dark:border-neutral-800">
         <div className="flex items-center gap-2">
           <div className="flex items-center justify-center w-11 h-11 bg-blue-300 rounded p-1.5">
             <HardDrive className="w-5 h-5 text-neutral-900" />
           </div>
           <div className="flex-1">
-            <h3 className="text-sm font-medium text-white">{bucket.name}</h3>
-            <p className="text-xs text-neutral-300">
+            <h3 className="text-sm font-medium text-zinc-950 dark:text-white">{bucket.name}</h3>
+            <p className="text-xs text-zinc-600 dark:text-neutral-300">
               {bucket.objectCount ? `${bucket.objectCount} files` : '0 files'}
             </p>
           </div>