insforge 0.3.1

package/frontend/src/features/secrets/hooks/useSecrets.ts

@@ -0,0 +1,139 @@
+import { useState, useCallback } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  secretsService,
+  type Secret,
+  type CreateSecretInput,
+} from '@/features/secrets/services/secrets.service';
+import { useToast } from '@/lib/hooks/useToast';
+import { useConfirm } from '@/lib/hooks/useConfirm';
+
+export function useSecrets() {
+  const queryClient = useQueryClient();
+  const { showToast } = useToast();
+  const { confirm, confirmDialogProps } = useConfirm();
+  const [searchQuery, setSearchQuery] = useState('');
+
+  // Query to fetch all secrets
+  const {
+    data: allSecrets = [],
+    isLoading,
+    error,
+    refetch,
+  } = useQuery({
+    queryKey: ['secrets'],
+    queryFn: () => secretsService.listSecrets(),
+    staleTime: 2 * 60 * 1000, // Cache for 2 minutes
+  });
+
+  // Filter out inactive secrets
+  const secrets = allSecrets.filter((secret: Secret) => secret.isActive);
+
+  // Create secret mutation
+  const createSecretMutation = useMutation({
+    mutationFn: (input: CreateSecretInput) => secretsService.createSecret(input),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ['secrets'] });
+      showToast('Secret created successfully', 'success');
+    },
+    onError: (error: Error) => {
+      console.error('Failed to create secret:', error);
+      const errorMessage = error instanceof Error ? error.message : 'Failed to create secret';
+      showToast(errorMessage, 'error');
+    },
+  });
+
+  // Delete secret mutation
+  const deleteSecretMutation = useMutation({
+    mutationFn: (key: string) => secretsService.deleteSecret(key),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ['secrets'] });
+      showToast('Secret deleted successfully', 'success');
+    },
+    onError: (error: Error) => {
+      console.error('Failed to delete secret:', error);
+      const errorMessage = error instanceof Error ? error.message : 'Failed to delete secret';
+      showToast(errorMessage, 'error');
+    },
+  });
+
+  // Create secret with validation
+  const createSecret = useCallback(
+    async (key: string, value: string) => {
+      if (!key.trim() || !value.trim()) {
+        showToast('Please fill in both key and value', 'error');
+        return false;
+      }
+
+      try {
+        await createSecretMutation.mutateAsync({
+          key: key.trim(),
+          value: value.trim(),
+        });
+        return true;
+      } catch {
+        return false;
+      }
+    },
+    [createSecretMutation, showToast]
+  );
+
+  // Delete secret with confirmation
+  const deleteSecret = useCallback(
+    async (secret: Secret) => {
+      if (secret.isReserved) {
+        showToast('Cannot delete reserved secrets', 'error');
+        return false;
+      }
+
+      const shouldDelete = await confirm({
+        title: 'Delete Secret',
+        description: `You sure to delete "${secret.key}"?`,
+        confirmText: 'Delete',
+        cancelText: 'Cancel',
+        destructive: true,
+      });
+
+      if (shouldDelete) {
+        try {
+          await deleteSecretMutation.mutateAsync(secret.key);
+          return true;
+        } catch {
+          return false;
+        }
+      }
+      return false;
+    },
+    [confirm, deleteSecretMutation, showToast]
+  );
+
+  // Filter secrets based on search query
+  const filteredSecrets = secrets.filter((secret: Secret) =>
+    secret.key.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  return {
+    // Data
+    secrets,
+    filteredSecrets,
+    secretsCount: secrets.length,
+    searchQuery,
+
+    // Loading states
+    isLoading,
+    isCreating: createSecretMutation.isPending,
+    isDeleting: deleteSecretMutation.isPending,
+
+    // Error
+    error,
+
+    // Actions
+    createSecret,
+    deleteSecret,
+    setSearchQuery,
+    refetch,
+
+    // Confirm dialog props
+    confirmDialogProps,
+  };
+}

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

@@ -0,0 +1,57 @@
+import { apiClient } from '@/lib/api/client';
+
+export interface Secret {
+  id: string;
+  key: string;
+  isActive: boolean;
+  isReserved: boolean;
+  lastUsedAt: string | null;
+  expiresAt: string | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface CreateSecretInput {
+  key: string;
+  value: string;
+}
+
+export interface SecretsListResponse {
+  secrets: Secret[];
+}
+
+export interface SecretValueResponse {
+  key: string;
+  value: string;
+}
+
+export class SecretsService {
+  async listSecrets(): Promise<Secret[]> {
+    const data = (await apiClient.request('/secrets', {
+      headers: apiClient.withAccessToken(),
+    })) as SecretsListResponse;
+    return data.secrets || [];
+  }
+
+  async createSecret(
+    input: CreateSecretInput
+  ): Promise<{ success: boolean; message: string; id?: string }> {
+    return apiClient.request('/secrets', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        ...apiClient.withAccessToken(),
+      },
+      body: JSON.stringify(input),
+    });
+  }
+
+  async deleteSecret(key: string): Promise<{ success: boolean; message: string }> {
+    return apiClient.request(`/secrets/${encodeURIComponent(key)}`, {
+      method: 'DELETE',
+      headers: apiClient.withAccessToken(),
+    });
+  }
+}
+
+export const secretsService = new SecretsService();

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

@@ -0,0 +1,19 @@
+import { Folder } from 'lucide-react';
+
+interface BucketEmptyStateProps {
+  searchTerm: string;
+}
+
+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">
+        {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>
+    </div>
+  );
+}

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

@@ -0,0 +1,194 @@
+import React, { useState, useEffect } from 'react';
+import { useMutation } from '@tanstack/react-query';
+import { storageService } from '@/features/storage/services/storage.service';
+import {
+  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';
+
+interface BucketFormDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSuccess: (bucketName?: string) => void;
+  mode: 'create' | 'edit';
+  initialBucketName?: string;
+  initialIsPublic?: boolean;
+}
+
+export function BucketFormDialog({
+  open,
+  onOpenChange,
+  onSuccess,
+  mode,
+  initialBucketName = '',
+  initialIsPublic = true,
+}: BucketFormDialogProps) {
+  const [bucketName, setBucketName] = useState(initialBucketName);
+  const [isPublic, setIsPublic] = useState(initialIsPublic);
+  const [error, setError] = useState('');
+  const { showToast } = useToast();
+
+  useEffect(() => {
+    if (open) {
+      if (mode === 'edit') {
+        setBucketName(initialBucketName);
+        setIsPublic(initialIsPublic);
+      } else {
+        setBucketName('');
+        setIsPublic(true);
+      }
+      setError('');
+    }
+  }, [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) => {
+    e.preventDefault();
+
+    if (mode === 'create') {
+      if (!bucketName.trim()) {
+        setError('Bucket name is required');
+        return;
+      }
+      createBucketMutation.mutate({ name: bucketName.trim(), isPublic });
+    } else {
+      editBucketMutation.mutate({ name: bucketName, isPublic });
+    }
+  };
+
+  const handleClose = () => {
+    onOpenChange(false);
+  };
+
+  const isLoading =
+    mode === 'create' ? createBucketMutation.isPending : editBucketMutation.isPending;
+  const submitButtonText =
+    mode === 'create'
+      ? isLoading
+        ? 'Creating...'
+        : 'Create Bucket'
+      : isLoading
+        ? 'Saving...'
+        : 'Save Changes';
+
+  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">
+          <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'}
+            </DialogTitle>
+            {mode === 'create' && (
+              <DialogDescription className="text-sm text-zinc-500">
+                Create a new storage bucket to organize your files.
+              </DialogDescription>
+            )}
+          </DialogHeader>
+          <div className="flex flex-col gap-6 p-6">
+            <div className="flex flex-row justify-between gap-10">
+              <Label
+                htmlFor="bucket-name"
+                className="text-sm font-medium text-zinc-950 dark:text-zinc-300"
+              >
+                Bucket Name
+              </Label>
+              <div className="w-70 flex flex-col gap-1">
+                <Input
+                  id="bucket-name"
+                  value={bucketName}
+                  onChange={(e) => {
+                    if (mode === 'create') {
+                      setBucketName(e.target.value);
+                      setError('');
+                    }
+                  }}
+                  placeholder={mode === 'create' ? 'Enter a name' : ''}
+                  disabled={mode === 'edit'}
+                  className={`w-full h-9 px-3 py-2 bg-transparent dark:bg-neutral-900 ${mode === 'edit' ? 'cursor-not-allowed' : ''} dark:text-white dark:placeholder:text-neutral-400 dark:border-neutral-700`}
+                  autoFocus={mode === 'create'}
+                />
+                {error && <p className="text-sm text-red-600 dark:text-red-500">{error}</p>}
+                <p className="text-xs font-medium text-zinc-500 dark:text-neutral-400">
+                  {mode === 'create'
+                    ? 'Use lowercase letters, numbers, hyphens, and underscores only.'
+                    : 'Bucket name cannot be changed.'}
+                </p>
+              </div>
+            </div>
+            <div className="flex flex-row justify-between gap-10">
+              <div className="flex items-center gap-2">
+                <Label
+                  htmlFor="bucket-public"
+                  className="text-sm font-medium text-zinc-950 dark:text-white"
+                >
+                  Public
+                </Label>
+                <Switch
+                  id="bucket-public"
+                  checked={isPublic}
+                  onCheckedChange={setIsPublic}
+                  className="h-6"
+                />
+              </div>
+              <p className="w-70 text-xs font-medium text-zinc-500 dark:text-neutral-400">
+                If enabled, files in this bucket can be accessed without authentication.
+              </p>
+            </div>
+          </div>
+          <DialogFooter className="p-6 gap-3 border-t border-zinc-200 dark:border-neutral-700">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleClose}
+              className="w-30 h-9 px-3 py-2 text-sm font-medium dark:bg-neutral-600 dark:text-zinc-300 dark:border-neutral-600 dark:hover:bg-neutral-700"
+            >
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              disabled={isLoading || (mode === 'create' && !bucketName.trim())}
+              className="w-30 h-9 px-3 py-2 text-sm font-medium bg-zinc-950 text-white hover:bg-zinc-800 disabled:opacity-40 dark:bg-emerald-300 dark:text-zinc-950 dark:hover:bg-emerald-400"
+            >
+              {submitButtonText}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,17 @@
+import { Skeleton } from '@/components/radix/Skeleton';
+
+export function BucketListSkeleton() {
+  return (
+    <div className="space-y-1">
+      {[...Array(5)].map((_, i) => (
+        <div key={i} className="flex items-center gap-3 px-3 py-2">
+          <Skeleton className="h-4 w-4 rounded" />
+          <div className="flex-1 space-y-1">
+            <Skeleton className="h-4 w-24" />
+            <Skeleton className="h-3 w-16" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}