Merge pull request #11 from Noooste/4-static-website-options

Add static option on the UI

.github/workflows/build.yml

@@ -51,6 +51,7 @@ jobs:
           context: .
           platforms: ${{ matrix.platform }}
           labels: ${{ steps.meta.outputs.labels }}
+          build-args: VERSION=${{ steps.meta.outputs.version }}
           cache-from: type=gha,scope=build-${{ matrix.platform }}
           cache-to: type=gha,mode=max,scope=build-${{ matrix.platform }}
           outputs: type=image,name=${{ secrets.DOCKER_REGISTRY }},push-by-digest=true,name-canonical=true,push=true

Dockerfile

@@ -29,12 +29,14 @@ RUN --mount=type=cache,target=/go/pkg/mod \
 
 COPY backend .
 
+ARG VERSION=dev
+
 RUN --mount=type=cache,target=/root/.cache/go-build \
     swag init
 
 RUN --mount=type=cache,target=/go/pkg/mod \
     --mount=type=cache,target=/root/.cache/go-build \
-    CGO_ENABLED=0 GOOS=${TARGETOS} GOARCH=${TARGETARCH} go build -a -installsuffix cgo -o garage-ui .
+    CGO_ENABLED=0 GOOS=${TARGETOS} GOARCH=${TARGETARCH} go build -a -installsuffix cgo -ldflags "-X main.version=${VERSION}" -o garage-ui .
 
 FROM alpine:3.23.3
 

backend/internal/handlers/buckets.go

@@ -67,11 +67,13 @@ func (h *BucketHandler) ListBuckets(c fiber.Ctx) error {
 		}
 
 		bucketInfo := models.BucketInfo{
-			Name:         bucketName,
-			CreationDate: adminBucket.Created,
-			Region:       "", // Garage doesn't have regions
-			ObjectCount:  &detailedInfo.Objects,
-			Size:         &detailedInfo.Bytes,
+			Name:          bucketName,
+			CreationDate:  adminBucket.Created,
+			Region:        "",
+			ObjectCount:   &detailedInfo.Objects,
+			Size:          &detailedInfo.Bytes,
+			WebsiteAccess: detailedInfo.WebsiteAccess,
+			WebsiteConfig: detailedInfo.WebsiteConfig,
 		}
 
 		buckets = append(buckets, bucketInfo)
@@ -306,3 +308,77 @@ func (h *BucketHandler) GrantBucketPermission(c fiber.Ctx) error {
 
 	return c.JSON(models.SuccessResponse(result))
 }
+
+// UpdateBucketWebsite updates the website access configuration for a bucket
+//
+//	@Summary		Update bucket website configuration
+//	@Description	Enables or disables static website hosting for a bucket
+//	@Tags			Buckets
+//	@Accept			json
+//	@Produce		json
+//	@Param			name	path		string												true	"Name of the bucket"
+//	@Param			request	body		models.UpdateBucketWebsiteRequest				true	"Website configuration"
+//	@Success		200		{object}	models.APIResponse{data=models.GarageBucketInfo}	"Website configuration updated"
+//	@Failure		400		{object}	models.APIResponse{error=models.APIError}			"Invalid request"
+//	@Failure		404		{object}	models.APIResponse{error=models.APIError}			"Bucket not found"
+//	@Failure		500		{object}	models.APIResponse{error=models.APIError}			"Failed to update bucket"
+//	@Router			/api/v1/buckets/{name}/website [put]
+func (h *BucketHandler) UpdateBucketWebsite(c fiber.Ctx) error {
+	ctx := c.Context()
+
+	bucketName := c.Params("name")
+	if bucketName == "" {
+		return c.Status(fiber.StatusBadRequest).JSON(
+			models.ErrorResponse(models.ErrCodeBadRequest, "Bucket name is required"),
+		)
+	}
+
+	var req models.UpdateBucketWebsiteRequest
+	if err := c.Bind().JSON(&req); err != nil {
+		return c.Status(fiber.StatusBadRequest).JSON(
+			models.ErrorResponse(models.ErrCodeBadRequest, "Invalid request body: "+err.Error()),
+		)
+	}
+
+	if req.Enabled && req.IndexDocument == "" {
+		return c.Status(fiber.StatusBadRequest).JSON(
+			models.ErrorResponse(models.ErrCodeBadRequest, "indexDocument is required when enabling website access"),
+		)
+	}
+
+	bucketInfo, err := h.adminService.GetBucketInfoByAlias(ctx, bucketName)
+	if err != nil {
+		return c.Status(fiber.StatusInternalServerError).JSON(
+			models.ErrorResponse(models.ErrCodeInternalError, "Failed to get bucket info: "+err.Error()),
+		)
+	}
+
+	if bucketInfo == nil {
+		return c.Status(fiber.StatusNotFound).JSON(
+			models.ErrorResponse(models.ErrCodeBucketNotFound, "Bucket does not exist"),
+		)
+	}
+
+	websiteAccess := &models.UpdateBucketWebsiteAccess{
+		Enabled: req.Enabled,
+	}
+	if req.Enabled {
+		websiteAccess.IndexDocument = &req.IndexDocument
+		if req.ErrorDocument != "" {
+			websiteAccess.ErrorDocument = &req.ErrorDocument
+		}
+	}
+
+	updateReq := models.UpdateBucketRequest{
+		WebsiteAccess: websiteAccess,
+	}
+
+	result, err := h.adminService.UpdateBucket(ctx, bucketInfo.ID, updateReq)
+	if err != nil {
+		return c.Status(fiber.StatusInternalServerError).JSON(
+			models.ErrorResponse(models.ErrCodeInternalError, "Failed to update bucket website: "+err.Error()),
+		)
+	}
+
+	return c.JSON(models.SuccessResponse(result))
+}

backend/internal/models/requests.go

@@ -59,3 +59,10 @@ type UpdateUserRequest struct {
 	Status     *string `json:"status,omitempty"`     // "active" or "inactive"
 	Expiration *string `json:"expiration,omitempty"` // ISO 8601 date string
 }
+
+// UpdateBucketWebsiteRequest represents a request to update bucket website configuration
+type UpdateBucketWebsiteRequest struct {
+	Enabled       bool   `json:"enabled"`
+	IndexDocument string `json:"indexDocument,omitempty"`
+	ErrorDocument string `json:"errorDocument,omitempty"`
+}

backend/internal/models/responses.go

@@ -40,11 +40,13 @@ type HealthResponse struct {
 
 // BucketInfo represents information about a bucket
 type BucketInfo struct {
-	Name         string    `json:"name"`
-	CreationDate time.Time `json:"creationDate"`
-	ObjectCount  *int64    `json:"objectCount,omitempty"`
-	Size         *int64    `json:"size,omitempty"`
-	Region       string    `json:"region,omitempty"`
+	Name          string               `json:"name"`
+	CreationDate  time.Time            `json:"creationDate"`
+	ObjectCount   *int64               `json:"objectCount,omitempty"`
+	Size          *int64               `json:"size,omitempty"`
+	Region        string               `json:"region,omitempty"`
+	WebsiteAccess bool                 `json:"websiteAccess"`
+	WebsiteConfig *BucketWebsiteConfig `json:"websiteConfig,omitempty"`
 }
 
 // BucketListResponse represents a list of buckets

backend/internal/routes/routes.go

@@ -60,6 +60,7 @@ func SetupRoutes(
 		buckets.Get("/:name", bucketHandler.GetBucketInfo)                      // Get bucket info
 		buckets.Delete("/:name", bucketHandler.DeleteBucket)                    // Delete a bucket
 		buckets.Post("/:name/permissions", bucketHandler.GrantBucketPermission) // Grant bucket permissions
+		buckets.Put("/:name/website", bucketHandler.UpdateBucketWebsite)        // Update bucket website configuration
 	}
 
 	// Object routes

backend/main.go

@@ -54,7 +54,7 @@ import (
 //	@name						Authorization
 //	@description				Type "Bearer" followed by a space and JWT token.
 
-const version = "0.1.0"
+var version = "dev"
 
 func main() {
 	// Parse command-line flags

frontend/src/components/buckets/BucketListView.tsx

@@ -9,7 +9,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { FolderIcon, Loader2, MoreVertical, Plus, Search, Settings, Trash2 } from 'lucide-react';
+import { FolderIcon, Globe, Loader2, MoreVertical, Plus, Search, Settings, Trash2 } from 'lucide-react';
 import { formatBytes } from '@/lib/file-utils';
 import { formatDate } from '@/lib/utils';
 import type { Bucket } from '@/types';
@@ -23,6 +23,7 @@ interface BucketListViewProps {
   onOpenSettings: (bucket: Bucket) => void;
   onCreateBucket: () => void;
   onDeleteBucket: (bucket: Bucket) => void;
+  onWebsiteSettings: (bucket: Bucket) => void;
 }
 
 export function BucketListView({
@@ -34,6 +35,7 @@ export function BucketListView({
   onOpenSettings,
   onCreateBucket,
   onDeleteBucket,
+  onWebsiteSettings,
 }: BucketListViewProps) {
   const filteredBuckets = buckets.filter((bucket) =>
     bucket.name.toLowerCase().includes(searchQuery.toLowerCase())
@@ -94,7 +96,15 @@ export function BucketListView({
                   className="cursor-pointer hover:bg-muted/50"
                   onClick={() => onViewBucket(bucket.name)}
                 >
-                  <TableCell className="font-medium truncate max-w-[200px]">{bucket.name}</TableCell>
+                  <TableCell className="font-medium max-w-[200px]">
+                    <span className="truncate">{bucket.name}</span>
+                    {bucket.websiteAccess && (
+                      <Badge variant="outline" className="text-xs ml-2">
+                        <Globe className="h-3 w-3 mr-1" />
+                        Website
+                      </Badge>
+                    )}
+                  </TableCell>
                   <TableCell className="hidden sm:table-cell">
                     <Badge variant="secondary">{bucket.region || 'default'}</Badge>
                   </TableCell>
@@ -123,6 +133,13 @@ export function BucketListView({
                           <Settings className="h-4 w-4" />
                           Settings
                         </DropdownMenuItem>
+                        <DropdownMenuItem onClick={(e) => {
+                          e.stopPropagation();
+                          onWebsiteSettings(bucket);
+                        }}>
+                          <Globe className="h-4 w-4" />
+                          Website Settings
+                        </DropdownMenuItem>
                         <DropdownMenuSeparator />
                         <DropdownMenuItem
                           className="text-destructive"

frontend/src/components/buckets/BucketSettingsDialog.tsx

@@ -10,8 +10,8 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
-import { accessApi } from '@/lib/api';
-import type { AccessKey, Bucket } from '@/types';
+import { useAccessKeys } from '@/hooks/useApi';
+import type { Bucket } from '@/types';
 import { toast } from 'sonner';
 
 interface BucketSettingsDialogProps {
@@ -22,7 +22,7 @@ interface BucketSettingsDialogProps {
 }
 
 export function BucketSettingsDialog({ open, onOpenChange, bucket, onGrantPermission }: BucketSettingsDialogProps) {
-  const [availableKeys, setAvailableKeys] = useState<AccessKey[]>([]);
+  const { data: availableKeys = [] } = useAccessKeys();
   const [selectedAccessKey, setSelectedAccessKey] = useState<string>('');
   const [permissionRead, setPermissionRead] = useState(false);
   const [permissionWrite, setPermissionWrite] = useState(false);
@@ -30,20 +30,10 @@ export function BucketSettingsDialog({ open, onOpenChange, bucket, onGrantPermis
 
   useEffect(() => {
     if (open && bucket) {
-      loadAccessKeys();
       resetForm();
     }
   }, [open, bucket]);
 
-  const loadAccessKeys = async () => {
-    try {
-      const keys = await accessApi.listKeys();
-      setAvailableKeys(keys);
-    } catch (error) {
-      console.error('Failed to load access keys:', error);
-    }
-  };
-
   const resetForm = () => {
     setSelectedAccessKey('');
     setPermissionRead(false);

frontend/src/components/buckets/BucketWebsiteDialog.tsx

@@ -0,0 +1,133 @@
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Badge } from '@/components/ui/badge';
+import { Switch } from '@/components/ui/switch';
+import type { Bucket } from '@/types';
+
+interface BucketWebsiteDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  bucket: Bucket | null;
+  onSave: (
+    bucketName: string,
+    payload: { enabled: boolean; indexDocument?: string; errorDocument?: string }
+  ) => Promise<boolean>;
+}
+
+export function BucketWebsiteDialog({
+  open,
+  onOpenChange,
+  bucket,
+  onSave,
+}: BucketWebsiteDialogProps) {
+  const [enabled, setEnabled] = useState(false);
+  const [indexDocument, setIndexDocument] = useState('index.html');
+  const [errorDocument, setErrorDocument] = useState('');
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    if (open && bucket) {
+      setEnabled(bucket.websiteAccess);
+      setIndexDocument(bucket.websiteConfig?.indexDocument ?? 'index.html');
+      setErrorDocument(bucket.websiteConfig?.errorDocument ?? '');
+    }
+  }, [open, bucket]);
+
+  const handleSave = async () => {
+    if (!bucket) return;
+    setSaving(true);
+    const success = await onSave(bucket.name, {
+      enabled,
+      indexDocument: enabled ? indexDocument : undefined,
+      errorDocument: enabled && errorDocument ? errorDocument : undefined,
+    });
+    setSaving(false);
+    if (success) onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Website Hosting — {bucket?.name}</DialogTitle>
+          <DialogDescription>
+            Configure this bucket to serve a static website.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-6 py-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium">Website access</p>
+              <p className="text-xs text-muted-foreground mt-0.5">
+                Allow public HTTP access to bucket objects
+              </p>
+            </div>
+            <div className="flex items-center gap-3">
+              <Badge variant={enabled ? 'default' : 'secondary'}>
+                {enabled ? 'Enabled' : 'Disabled'}
+              </Badge>
+              <Switch checked={enabled} onCheckedChange={setEnabled} />
+            </div>
+          </div>
+
+          {enabled && (
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <label className="text-sm font-medium">
+                  Index document <span className="text-destructive">*</span>
+                </label>
+                <Input
+                  value={indexDocument}
+                  onChange={(e) => setIndexDocument(e.target.value)}
+                  placeholder="index.html"
+                />
+                <p className="text-xs text-muted-foreground">
+                  The file served when a directory is requested (e.g. index.html)
+                </p>
+              </div>
+
+              <div className="space-y-2">
+                <label className="text-sm font-medium">Error document</label>
+                <Input
+                  value={errorDocument}
+                  onChange={(e) => setErrorDocument(e.target.value)}
+                  placeholder="404.html (optional)"
+                />
+                <p className="text-xs text-muted-foreground">
+                  The file served when an object is not found (optional)
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            onClick={handleSave}
+            variant={!enabled && bucket?.websiteAccess ? 'destructive' : 'default'}
+            disabled={saving || (enabled && !indexDocument)}
+          >
+            {saving
+              ? 'Saving...'
+              : !enabled && bucket?.websiteAccess
+              ? 'Disable Website'
+              : 'Save'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/src/components/buckets/ObjectsTable.tsx

@@ -301,56 +301,60 @@ export function ObjectsTable({
               </TableCell>
               <TableCell>{obj.isFolder ? null : formatBytes(obj.size)}</TableCell>
               <TableCell>
-                {obj.lastModified ?
-                <TooltipProvider>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <div className="decoration-dashed decoration-1 underline underline-offset-6 cursor-pointer text-muted-foreground hover:text-foreground transition-colors">
-                        {new Date(obj.lastModified).toLocaleDateString('en-GB', {
-                          day: '2-digit',
-                          month: 'short',
-                          year: 'numeric',
-                        })} {new Date(obj.lastModified).toLocaleTimeString('en-GB', {
-                          hour: '2-digit',
-                          minute: '2-digit',
-                          second: '2-digit',
-                          hour12: false,
-                        })} CET
-                      </div>
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      <div className="space-y-1 min-w-max">
-                        <div className="flex gap-3 items-center">
-                          <span className="text-sm text-gray-400 w-20 text-right">UTC</span>
-                          <span className="text-sm text-white">
-                            {new Date(obj.lastModified).toLocaleString('en-GB', {
+                {obj.lastModified ? (() => {
+                  const d = new Date(obj.lastModified);
+                  return (
+                    <TooltipProvider>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <div className="decoration-dashed decoration-1 underline underline-offset-6 cursor-pointer text-muted-foreground hover:text-foreground transition-colors">
+                            {d.toLocaleDateString('en-GB', {
                               day: '2-digit',
                               month: 'short',
                               year: 'numeric',
+                            })} {d.toLocaleTimeString('en-GB', {
                               hour: '2-digit',
                               minute: '2-digit',
                               second: '2-digit',
                               hour12: false,
-                              timeZone: 'UTC',
-                            })} UTC
-                          </span>
-                        </div>
-                        <div className="flex gap-3 items-center">
-                          <span className="text-sm text-gray-400 w-20 text-right">Relative</span>
-                          <span className="text-sm text-white">
-                            {formatRelativeTime(new Date(obj.lastModified))}
-                          </span>
-                        </div>
-                        <div className="flex gap-3 items-center">
-                          <span className="text-sm text-gray-400 w-20 text-right">Timestamp</span>
-                          <span className="text-sm text-white font-mono">
-                            {new Date(obj.lastModified).toISOString()}
-                          </span>
-                        </div>
-                      </div>
-                    </TooltipContent>
-                  </Tooltip>
-                </TooltipProvider>: null}
+                            })} CET
+                          </div>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          <div className="space-y-1 min-w-max">
+                            <div className="flex gap-3 items-center">
+                              <span className="text-sm text-gray-400 w-20 text-right">UTC</span>
+                              <span className="text-sm text-white">
+                                {d.toLocaleString('en-GB', {
+                                  day: '2-digit',
+                                  month: 'short',
+                                  year: 'numeric',
+                                  hour: '2-digit',
+                                  minute: '2-digit',
+                                  second: '2-digit',
+                                  hour12: false,
+                                  timeZone: 'UTC',
+                                })} UTC
+                              </span>
+                            </div>
+                            <div className="flex gap-3 items-center">
+                              <span className="text-sm text-gray-400 w-20 text-right">Relative</span>
+                              <span className="text-sm text-white">
+                                {formatRelativeTime(d)}
+                              </span>
+                            </div>
+                            <div className="flex gap-3 items-center">
+                              <span className="text-sm text-gray-400 w-20 text-right">Timestamp</span>
+                              <span className="text-sm text-white font-mono">
+                                {d.toISOString()}
+                              </span>
+                            </div>
+                          </div>
+                        </TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
+                  );
+                })() : null}
               </TableCell>
               <TableCell>
                 {!obj.isFolder && (

frontend/src/components/layout/sidebar.tsx

@@ -3,6 +3,8 @@ import {cn} from '@/lib/utils';
 import {Database, Key, LayoutDashboard, LogOut, Server, User} from 'lucide-react';
 import {useAuthStore} from '@/store/auth-store';
 import {Button} from '@/components/ui/button';
+import { useQuery } from '@tanstack/react-query';
+import { healthApi, garageApi } from '@/lib/api';
 
 interface NavItem {
   title: string;
@@ -46,6 +48,24 @@ export function Sidebar({ isOpen, onClose }: SidebarProps) {
     logout();
   };
 
+  const { data: uiVersion } = useQuery({
+    queryKey: ['ui-version'],
+    queryFn: healthApi.getVersion,
+    staleTime: 5 * 60 * 1000,
+    retry: false,
+  });
+
+  const { data: nodeInfo } = useQuery({
+    queryKey: ['garage-version'],
+    queryFn: () => garageApi.getNodeInfo('self'),
+    staleTime: 5 * 60 * 1000,
+    retry: false,
+  });
+
+  const garageVersion = nodeInfo
+    ? Object.values(nodeInfo.success)[0]?.garageVersion
+    : undefined;
+
   return (
     <div
       className={cn(
@@ -107,6 +127,13 @@ export function Sidebar({ isOpen, onClose }: SidebarProps) {
           </Button>
         </div>
       )}
+      {(uiVersion || garageVersion) && (
+        <div className="px-4 pb-3 text-xs text-muted-foreground text-center">
+          {uiVersion && `UI ${uiVersion}`}
+          {uiVersion && garageVersion && ' | '}
+          {garageVersion && `Garage ${garageVersion}`}
+        </div>
+      )}
     </div>
   );
 }

frontend/src/components/ui/switch.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+}
+
+const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
+  ({ className, checked, onCheckedChange, ...props }, ref) => {
+    return (
+      <label className="relative inline-flex cursor-pointer items-center">
+        <input
+          type="checkbox"
+          className="sr-only peer"
+          ref={ref}
+          checked={checked}
+          onChange={(e) => onCheckedChange?.(e.target.checked)}
+          {...props}
+        />
+        <div
+          className={cn(
+            'relative h-6 w-11 rounded-full border transition-colors',
+            checked ? 'border-[#ff9329] bg-[#ff9329]' : 'border-[#6b7280] bg-[#6b7280]',
+            'peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background',
+            'peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+            className
+          )}
+        >
+          <span
+            className="absolute left-[2px] h-5 w-5 rounded-full bg-white shadow transition-transform"
+            style={{ top: '50%', transform: `translateY(-50%) translateX(${checked ? '20px' : '0px'})` }}
+          />
+        </div>
+      </label>
+    );
+  }
+);
+Switch.displayName = 'Switch';
+
+export { Switch };

frontend/src/lib/api.ts

@@ -2,6 +2,7 @@ import axios from 'axios';
 import {toast} from 'sonner';
 import type {
   AccessKey,
+  ApiResponse,
   Bucket,
   BucketDetails,
   ClusterHealth,
@@ -158,6 +159,14 @@ export const authApi = {
   },
 };
 
+// Health API
+export const healthApi = {
+  getVersion: async (): Promise<string> => {
+    const response = await api.get('/v1/health');
+    return response.data.data.version as string;
+  },
+};
+
 // Bucket API
 export const bucketsApi = {
   list: async (): Promise<Bucket[]> => {
@@ -192,6 +201,17 @@ export const bucketsApi = {
   updateSettings: async (name: string, settings: Partial<BucketDetails>): Promise<void> => {
     await api.patch(`/v1/buckets/${name}/settings`, settings);
   },
+
+  updateBucketWebsite: async (
+    name: string,
+    payload: { enabled: boolean; indexDocument?: string; errorDocument?: string }
+  ) => {
+    const response = await api.put<ApiResponse<any>>(
+      `/v1/buckets/${encodeURIComponent(name)}/website`,
+      payload
+    );
+    return response.data.data;
+  },
 };
 
 // Objects API

frontend/src/pages/Buckets.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
 import { useSearchParams } from 'react-router-dom';
 import { Header } from '@/components/layout/header';
 import { useBuckets, useCreateBucket, useDeleteBucket, useGrantBucketPermission } from '@/hooks/useApi';
@@ -8,8 +9,10 @@ import { ObjectBrowserView } from '@/components/buckets/ObjectBrowserView';
 import { CreateBucketDialog } from '@/components/buckets/CreateBucketDialog';
 import { DeleteBucketDialog } from '@/components/buckets/DeleteBucketDialog';
 import { BucketSettingsDialog } from '@/components/buckets/BucketSettingsDialog';
+import { BucketWebsiteDialog } from '@/components/buckets/BucketWebsiteDialog';
 import type { Bucket } from '@/types';
 import { toast } from 'sonner';
+import { bucketsApi } from '@/lib/api';
 
 export function Buckets() {
   const [searchParams, setSearchParams] = useSearchParams();
@@ -21,6 +24,8 @@ export function Buckets() {
   const [selectedBucket, setSelectedBucket] = useState<Bucket | null>(null);
   const [settingsDialogOpen, setSettingsDialogOpen] = useState(false);
   const [settingsBucket, setSettingsBucket] = useState<Bucket | null>(null);
+  const [websiteDialogOpen, setWebsiteDialogOpen] = useState(false);
+  const [websiteBucket, setWebsiteBucket] = useState<Bucket | null>(null);
 
   // Object browser state - initialize from URL params
   const [viewingBucket, setViewingBucket] = useState<string | null>(searchParams.get('bucket'));
@@ -51,6 +56,7 @@ export function Buckets() {
   }, [searchParams]);
 
   // Custom hooks
+  const queryClient = useQueryClient();
   const { data: buckets = [], isLoading: bucketsLoading } = useBuckets();
   const createBucketMutation = useCreateBucket();
   const deleteBucketMutation = useDeleteBucket();
@@ -139,6 +145,25 @@ export function Buckets() {
     setSettingsDialogOpen(true);
   };
 
+  const handleOpenWebsiteSettings = (bucket: Bucket) => {
+    setWebsiteBucket(bucket);
+    setWebsiteDialogOpen(true);
+  };
+
+  const handleSaveWebsite = async (
+    bucketName: string,
+    payload: { enabled: boolean; indexDocument?: string; errorDocument?: string }
+  ): Promise<boolean> => {
+    try {
+      await bucketsApi.updateBucketWebsite(bucketName, payload);
+      queryClient.invalidateQueries({ queryKey: ['buckets'] });
+      toast.success('Website configuration updated');
+      return true;
+    } catch {
+      return false;
+    }
+  };
+
   const handleRefreshObjects = async () => {
     if (isRefreshing) return;
     try {
@@ -224,6 +249,7 @@ export function Buckets() {
           onSearchChange={setSearchQuery}
           onViewBucket={handleViewBucket}
           onOpenSettings={handleOpenSettings}
+          onWebsiteSettings={handleOpenWebsiteSettings}
           onCreateBucket={() => setCreateDialogOpen(true)}
           onDeleteBucket={(bucket) => {
             setSelectedBucket(bucket);
@@ -252,6 +278,13 @@ export function Buckets() {
         bucket={settingsBucket}
         onGrantPermission={grantPermission}
       />
+
+      <BucketWebsiteDialog
+        open={websiteDialogOpen}
+        onOpenChange={setWebsiteDialogOpen}
+        bucket={websiteBucket}
+        onSave={handleSaveWebsite}
+      />
     </div>
   );
 }

frontend/src/types/index.ts

@@ -5,6 +5,11 @@ export interface Bucket {
   objectCount?: number;
   size?: number;
   region?: string;
+  websiteAccess: boolean;
+  websiteConfig?: {
+    indexDocument: string;
+    errorDocument?: string;
+  };
 }
 
 export interface BucketDetails extends Bucket {