feat: implement UI redesign with updated button styles and new components

Signed-off-by: Noooste <83548733+Noooste@users.noreply.github.com>

frontend/src/components/buckets/BucketListView.tsx

@@ -9,7 +9,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { FolderIcon, Globe, Loader2, MoreVertical, Plus, Search, Settings, Trash2 } from 'lucide-react';
+import { FolderIcon, Globe, Loader2, MoreVertical, Search, Settings, Trash2 } from 'lucide-react';
 import { formatBytes } from '@/lib/file-utils';
 import { formatDate } from '@/lib/utils';
 import type { Bucket } from '@/types';
@@ -21,7 +21,6 @@ interface BucketListViewProps {
   onSearchChange: (query: string) => void;
   onViewBucket: (bucketName: string) => void;
   onOpenSettings: (bucket: Bucket) => void;
-  onCreateBucket: () => void;
   onDeleteBucket: (bucket: Bucket) => void;
   onWebsiteSettings: (bucket: Bucket) => void;
 }
@@ -33,7 +32,6 @@ export function BucketListView({
   onSearchChange,
   onViewBucket,
   onOpenSettings,
-  onCreateBucket,
   onDeleteBucket,
   onWebsiteSettings,
 }: BucketListViewProps) {
@@ -44,20 +42,14 @@ export function BucketListView({
   return (
     <div className="space-y-4 sm:space-y-6">
       {/* Toolbar */}
-      <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3">
-        <div className="relative flex-1 max-w-full sm:max-w-xs">
-          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-          <Input
-            placeholder="Search buckets..."
-            value={searchQuery}
-            onChange={(e) => onSearchChange(e.target.value)}
-            className="pl-8"
-          />
-        </div>
-        <Button onClick={onCreateBucket} className="w-full sm:w-auto">
-          <Plus className="h-4 w-4" />
-          Create Bucket
-        </Button>
+      <div className="relative w-full max-w-xs">
+        <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+        <Input
+          placeholder="Search buckets..."
+          value={searchQuery}
+          onChange={(e) => onSearchChange(e.target.value)}
+          className="pl-8"
+        />
       </div>
 
       {/* Buckets Table */}
@@ -99,14 +91,14 @@ export function BucketListView({
                   <TableCell className="font-medium max-w-[200px]">
                     <span className="truncate">{bucket.name}</span>
                     {bucket.websiteAccess && (
-                      <Badge variant="outline" className="text-xs ml-2">
+                      <Badge variant="neutral" 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>
+                    <Badge variant="neutral">{bucket.region || 'default'}</Badge>
                   </TableCell>
                   <TableCell className="hidden md:table-cell">{bucket.objectCount?.toLocaleString() || 0}</TableCell>
                   <TableCell>{bucket.size ? formatBytes(bucket.size) : '0 B'}</TableCell>

frontend/src/components/buckets/BucketSettingsDialog.tsx

@@ -1,196 +0,0 @@
-import { useState, useEffect } from 'react';
-import { Button } from '@/components/ui/button';
-import { Checkbox } from '@/components/ui/checkbox';
-import { Select, SelectOption } from '@/components/ui/select';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { useAccessKeys } from '@/hooks/useApi';
-import type { Bucket } from '@/types';
-import { toast } from 'sonner';
-
-interface BucketSettingsDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  bucket: Bucket | null;
-  onGrantPermission: (bucketName: string, accessKeyId: string, permissions: { read: boolean; write: boolean; owner: boolean }) => Promise<boolean>;
-}
-
-export function BucketSettingsDialog({ open, onOpenChange, bucket, onGrantPermission }: BucketSettingsDialogProps) {
-  const { data: availableKeys = [] } = useAccessKeys();
-  const [selectedAccessKey, setSelectedAccessKey] = useState<string>('');
-  const [permissionRead, setPermissionRead] = useState(false);
-  const [permissionWrite, setPermissionWrite] = useState(false);
-  const [permissionOwner, setPermissionOwner] = useState(false);
-
-  useEffect(() => {
-    if (open && bucket) {
-      resetForm();
-    }
-  }, [open, bucket]);
-
-  const resetForm = () => {
-    setSelectedAccessKey('');
-    setPermissionRead(false);
-    setPermissionWrite(false);
-    setPermissionOwner(false);
-  };
-
-  const handleAccessKeyChange = (accessKeyId: string) => {
-    setSelectedAccessKey(accessKeyId);
-
-    if (!accessKeyId) {
-      setPermissionRead(false);
-      setPermissionWrite(false);
-      setPermissionOwner(false);
-      return;
-    }
-
-    const selectedKey = availableKeys.find(key => key.accessKeyId === accessKeyId);
-    if (selectedKey && bucket) {
-      const bucketPermission = selectedKey.permissions.find(
-        perm => perm.bucketName === bucket.name || perm.bucketId === bucket.name
-      );
-
-      if (bucketPermission) {
-        setPermissionRead(bucketPermission.read);
-        setPermissionWrite(bucketPermission.write);
-        setPermissionOwner(bucketPermission.owner);
-      } else {
-        setPermissionRead(false);
-        setPermissionWrite(false);
-        setPermissionOwner(false);
-      }
-    }
-  };
-
-  const handleGrantPermission = async () => {
-    if (!bucket || !selectedAccessKey) {
-      toast.error('Please select an access key');
-      return;
-    }
-
-    if (!permissionRead && !permissionWrite && !permissionOwner) {
-      toast.error('Please select at least one permission');
-      return;
-    }
-
-    const success = await onGrantPermission(bucket.name, selectedAccessKey, {
-      read: permissionRead,
-      write: permissionWrite,
-      owner: permissionOwner,
-    });
-
-    if (success) {
-      resetForm();
-      onOpenChange(false);
-    }
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-2xl">
-        <DialogHeader>
-          <DialogTitle>Bucket Settings - {bucket?.name}</DialogTitle>
-          <DialogDescription>
-            Grant access key permissions for this bucket
-          </DialogDescription>
-        </DialogHeader>
-        <div className="space-y-6 py-4">
-          <div className="space-y-2">
-            <label className="text-sm font-medium">Select Access Key</label>
-            <Select
-              value={selectedAccessKey}
-              onChange={(value) => handleAccessKeyChange(value)}
-            >
-              <SelectOption value="">-- Select an access key --</SelectOption>
-              {availableKeys.map((key) => (
-                <SelectOption key={key.accessKeyId} value={key.accessKeyId}>
-                  {key.name} ({key.accessKeyId})
-                </SelectOption>
-              ))}
-            </Select>
-            <p className="text-xs text-muted-foreground">
-              Choose which access key should have permissions on this bucket. Current permissions will be displayed when selected.
-            </p>
-          </div>
-
-          <div className="space-y-3">
-            <label className="text-sm font-medium">Permissions</label>
-            <div className="space-y-3 border rounded-lg p-4">
-              <div className="flex items-start space-x-3">
-                <Checkbox
-                  id="permission-read"
-                  checked={permissionRead}
-                  onCheckedChange={(checked) => setPermissionRead(checked as boolean)}
-                />
-                <div className="flex-1">
-                  <label
-                    htmlFor="permission-read"
-                    className="text-sm font-medium leading-none cursor-pointer"
-                  >
-                    Read
-                  </label>
-                  <p className="text-xs text-muted-foreground mt-1">
-                    Allows reading objects from the bucket (GetObject, HeadObject, ListObjects)
-                  </p>
-                </div>
-              </div>
-
-              <div className="flex items-start space-x-3">
-                <Checkbox
-                  id="permission-write"
-                  checked={permissionWrite}
-                  onCheckedChange={(checked) => setPermissionWrite(checked as boolean)}
-                />
-                <div className="flex-1">
-                  <label
-                    htmlFor="permission-write"
-                    className="text-sm font-medium leading-none cursor-pointer"
-                  >
-                    Write
-                  </label>
-                  <p className="text-xs text-muted-foreground mt-1">
-                    Allows writing and deleting objects in the bucket (PutObject, DeleteObject)
-                  </p>
-                </div>
-              </div>
-
-              <div className="flex items-start space-x-3">
-                <Checkbox
-                  id="permission-owner"
-                  checked={permissionOwner}
-                  onCheckedChange={(checked) => setPermissionOwner(checked as boolean)}
-                />
-                <div className="flex-1">
-                  <label
-                    htmlFor="permission-owner"
-                    className="text-sm font-medium leading-none cursor-pointer"
-                  >
-                    Owner
-                  </label>
-                  <p className="text-xs text-muted-foreground mt-1">
-                    Allows managing bucket settings and policies (DeleteBucket, PutBucketPolicy)
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <DialogFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
-            Cancel
-          </Button>
-          <Button onClick={handleGrantPermission} disabled={!selectedAccessKey}>
-            Grant Permission
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

frontend/src/components/buckets/BucketWebsiteDialog.tsx

@@ -1,133 +0,0 @@
-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/CreateBucketDialog.tsx

@@ -1,14 +1,17 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import { Database } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import {
   Dialog,
+  DialogBody,
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
+import { IconTile } from '@/components/ui/icon-tile';
 import { toast } from 'sonner';
 
 interface CreateBucketDialogProps {
@@ -20,6 +23,8 @@ interface CreateBucketDialogProps {
 export function CreateBucketDialog({ open, onOpenChange, onCreateBucket }: CreateBucketDialogProps) {
   const [bucketName, setBucketName] = useState('');
 
+  useEffect(() => { if (!open) setBucketName(''); }, [open]);
+
   const handleCreate = async () => {
     if (!bucketName) {
       toast.error('Please enter a bucket name');
@@ -37,15 +42,19 @@ export function CreateBucketDialog({ open, onOpenChange, onCreateBucket }: Creat
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Create New Bucket</DialogTitle>
-          <DialogDescription>
-            Create a new storage bucket for your objects
-          </DialogDescription>
+          <IconTile icon={<Database />} tone="primary" size="md" />
+          <div className="flex-1">
+            <DialogTitle>Create New Bucket</DialogTitle>
+            <DialogDescription>
+              Create a new storage bucket for your objects
+            </DialogDescription>
+          </div>
         </DialogHeader>
-        <div className="space-y-4 py-4">
+        <DialogBody className="space-y-4">
           <div className="space-y-2">
             <label className="text-sm font-medium">Bucket Name</label>
             <Input
+              autoFocus
               placeholder="my-bucket-name"
               value={bucketName}
               onChange={(e) => setBucketName(e.target.value)}
@@ -59,13 +68,13 @@ export function CreateBucketDialog({ open, onOpenChange, onCreateBucket }: Creat
               Must be unique and follow DNS naming conventions
             </p>
           </div>
-        </div>
-        <DialogFooter className="space-y-2">
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
+        </DialogBody>
+        <DialogFooter>
+          <Button variant="secondary" onClick={() => onOpenChange(false)}>
             Cancel
           </Button>
           <Button
-            variant={!bucketName ? 'default_disabled' : 'default'}
+            variant="primary"
             onClick={handleCreate}
             disabled={!bucketName}
           >

frontend/src/components/buckets/CreateDirectoryDialog.tsx

@@ -1,14 +1,17 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import { FolderPlus } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import {
   Dialog,
+  DialogBody,
   DialogContent,
   DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
+import { IconTile } from '@/components/ui/icon-tile';
 import { toast } from 'sonner';
 
 interface CreateDirectoryDialogProps {
@@ -21,6 +24,8 @@ interface CreateDirectoryDialogProps {
 export function CreateDirectoryDialog({ open, onOpenChange, currentPath, onCreateDirectory }: CreateDirectoryDialogProps) {
   const [dirName, setDirName] = useState('');
 
+  useEffect(() => { if (!open) setDirName(''); }, [open]);
+
   const handleCreate = async () => {
     if (!dirName) {
       toast.error('Please enter a directory name');
@@ -38,15 +43,19 @@ export function CreateDirectoryDialog({ open, onOpenChange, currentPath, onCreat
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Create Directory</DialogTitle>
-          <DialogDescription>
-            Create a new directory in {currentPath || 'the root'}
-          </DialogDescription>
+          <IconTile icon={<FolderPlus />} tone="primary" size="md" />
+          <div className="flex-1">
+            <DialogTitle>Create Directory</DialogTitle>
+            <DialogDescription>
+              Create a new directory in {currentPath || 'the root'}
+            </DialogDescription>
+          </div>
         </DialogHeader>
-        <div className="space-y-4 py-4">
+        <DialogBody className="space-y-4">
           <div className="space-y-2">
             <label className="text-sm font-medium">Directory Name</label>
             <Input
+              autoFocus
               placeholder="my-directory"
               value={dirName}
               onChange={(e) => setDirName(e.target.value)}
@@ -57,9 +66,9 @@ export function CreateDirectoryDialog({ open, onOpenChange, currentPath, onCreat
               }}
             />
           </div>
-        </div>
+        </DialogBody>
         <DialogFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
+          <Button variant="secondary" onClick={() => onOpenChange(false)}>
             Cancel
           </Button>
           <Button onClick={handleCreate} disabled={!dirName}>

frontend/src/components/buckets/DeleteBucketDialog.tsx

@@ -1,49 +0,0 @@
-import { Button } from '@/components/ui/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import type { Bucket } from '@/types';
-
-interface DeleteBucketDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  bucket: Bucket | null;
-  onDeleteBucket: (name: string) => Promise<boolean>;
-}
-
-export function DeleteBucketDialog({ open, onOpenChange, bucket, onDeleteBucket }: DeleteBucketDialogProps) {
-  const handleDelete = async () => {
-    if (!bucket) return;
-
-    const success = await onDeleteBucket(bucket.name);
-    if (success) {
-      onOpenChange(false);
-    }
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Delete Bucket</DialogTitle>
-          <DialogDescription>
-            Are you sure you want to delete "{bucket?.name}"? This action cannot be undone.
-          </DialogDescription>
-        </DialogHeader>
-        <DialogFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
-            Cancel
-          </Button>
-          <Button variant="destructive" onClick={handleDelete}>
-            Delete
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

frontend/src/components/buckets/DeleteObjectDialog.tsx

@@ -1,3 +1,4 @@
+import { Trash2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import {
   Dialog,
@@ -7,6 +8,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
+import { IconTile } from '@/components/ui/icon-tile';
 import type { S3Object } from '@/types';
 
 interface DeleteObjectDialogProps {
@@ -27,16 +29,19 @@ export function DeleteObjectDialog({ open, onOpenChange, object, onDeleteObject
   };
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
+    <Dialog open={open} onOpenChange={onOpenChange} size="destructive">
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Delete Object</DialogTitle>
-          <DialogDescription>
-            Are you sure you want to delete "{object?.key}"? This action cannot be undone.
-          </DialogDescription>
+          <IconTile icon={<Trash2 />} tone="destructive" size="md" />
+          <div className="flex-1">
+            <DialogTitle>Delete Object</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to delete "{object?.key}"? This action cannot be undone.
+            </DialogDescription>
+          </div>
         </DialogHeader>
         <DialogFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
+          <Button variant="secondary" onClick={() => onOpenChange(false)}>
             Cancel
           </Button>
           <Button variant="destructive" onClick={handleDelete}>

frontend/src/components/buckets/ObjectBrowserView.tsx

@@ -2,7 +2,6 @@ import {useState} from 'react';
 import {useDropzone} from 'react-dropzone';
 import {Button} from '@/components/ui/button';
 import {Input} from '@/components/ui/input';
-import {Header} from '@/components/layout/header';
 import {ObjectsTable} from './ObjectsTable';
 import {CreateDirectoryDialog} from './CreateDirectoryDialog';
 import {DeleteObjectDialog} from './DeleteObjectDialog';
@@ -170,10 +169,9 @@ export function ObjectBrowserView({
 
   return (
     <div>
-      <Header title={`Objects in ${bucketName}`} />
       <div className="p-4 sm:p-6 space-y-4 sm:space-y-6">
         {/* Back Button */}
-        <Button variant="outline" onClick={onBackToBuckets} className="text-sm sm:text-base">
+        <Button variant="secondary" onClick={onBackToBuckets} className="text-sm sm:text-base">
           <ArrowLeft className="h-4 w-4" />
           <span className="hidden sm:inline">Back to Buckets</span>
           <span className="sm:hidden">Back</span>
@@ -229,7 +227,7 @@ export function ObjectBrowserView({
               <FolderPlus className="h-4 w-4" />
               <span className="hidden sm:inline">Add Directory</span>
             </Button>
-            <Button variant="outline" size="icon" onClick={onRefresh} title="Refresh" disabled={isRefreshing}>
+            <Button variant="secondary" size="icon" onClick={onRefresh} title="Refresh" disabled={isRefreshing}>
               <RotateCwIcon className={`h-4 w-4 transition-transform duration-500 ${isRefreshing ? 'animate-spin' : ''}`} />
             </Button>
           </div>

frontend/src/components/buckets/ObjectDetailsView.tsx

@@ -1,21 +1,55 @@
 import { useEffect, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams, Link } from 'react-router-dom';
 import { objectsApi } from '@/lib/api';
 import type { ObjectMetadata } from '@/types';
-import { Header } from '@/components/layout/header';
 import { Button } from '@/components/ui/button';
-import { ArrowLeft, Download, Trash, Copy, File } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { IconTile } from '@/components/ui/icon-tile';
+import { ConfirmDialog } from '@/components/ui/confirm-dialog';
+import { ArrowLeft, ChevronRight, Copy, Download, File, Loader2, Trash2 } from 'lucide-react';
 import { toast } from 'sonner';
 import { formatBytes } from '@/lib/file-utils';
 
+function formatDate(value: string) {
+  return new Date(value).toLocaleString(undefined, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+function CardSection({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <section className="overflow-hidden rounded-xl border border-[var(--border)] bg-[var(--card)]">
+      <div className="border-b border-[var(--border)] px-5 py-3.5">
+        <h3 className="text-[14px] font-semibold tracking-[-0.01em]">{title}</h3>
+      </div>
+      {children}
+    </section>
+  );
+}
+
+function DetailRow({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="grid grid-cols-1 gap-1 px-5 py-3.5 sm:grid-cols-[200px_1fr] sm:gap-4">
+      <dt className="text-[12.5px] font-medium text-[var(--muted-foreground)]">{label}</dt>
+      <dd className="text-[13.5px] text-[var(--foreground)] break-words">{children}</dd>
+    </div>
+  );
+}
+
 export function ObjectDetailsView() {
   const navigate = useNavigate();
   const { bucketName, '*': encodedObjectKey } = useParams();
-  // Decode the object key from the URL
   const objectKey = encodedObjectKey ? decodeURIComponent(encodedObjectKey) : undefined;
+
   const [metadata, setMetadata] = useState<ObjectMetadata | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [deleting, setDeleting] = useState(false);
 
   useEffect(() => {
     if (!bucketName || !objectKey) {
@@ -23,7 +57,6 @@ export function ObjectDetailsView() {
       setIsLoading(false);
       return;
     }
-
     const fetchMetadata = async () => {
       try {
         setIsLoading(true);
@@ -32,240 +65,184 @@ export function ObjectDetailsView() {
         setMetadata(data);
       } catch (err) {
         setError(err instanceof Error ? err.message : 'Failed to load object metadata');
-        console.error('Failed to fetch object metadata:', err);
       } finally {
         setIsLoading(false);
       }
     };
-
     fetchMetadata();
   }, [bucketName, objectKey]);
 
+  const parentPath = objectKey?.split('/').slice(0, -1).join('/') ?? '';
+  const fileName = objectKey?.split('/').pop() || objectKey || '';
+  const backHref = `/buckets/${bucketName}/objects${parentPath ? `?prefix=${encodeURIComponent(parentPath + '/')}` : ''}`;
+  const pathSegments = parentPath ? parentPath.split('/').filter(Boolean) : [];
+
+  const copy = (text: string, label = 'Copied') => {
+    navigator.clipboard.writeText(text);
+    toast.success(label);
+  };
+
   const handleDownload = async () => {
     if (!bucketName || !objectKey) return;
-
     try {
       const blob = await objectsApi.get(bucketName, objectKey);
       const url = window.URL.createObjectURL(blob);
       const a = document.createElement('a');
       a.href = url;
-      a.download = objectKey.split('/').pop() || 'download';
+      a.download = fileName || 'download';
       document.body.appendChild(a);
       a.click();
       window.URL.revokeObjectURL(url);
       document.body.removeChild(a);
       toast.success('Download started');
-    } catch (err) {
-      console.error('Download failed:', err);
+    } catch {
+      toast.error('Download failed');
     }
   };
 
   const handleDelete = async () => {
     if (!bucketName || !objectKey) return;
-
-    if (!confirm(`Are you sure you want to delete "${objectKey}"?`)) {
-      return;
-    }
-
     try {
+      setDeleting(true);
       await objectsApi.delete(bucketName, objectKey);
-      toast.success('Object deleted successfully');
-      handleBackNavigation();
-    } catch (err) {
-      console.error('Delete failed:', err);
+      toast.success('Object deleted');
+      navigate(backHref);
+    } catch {
+      toast.error('Delete failed');
+    } finally {
+      setDeleting(false);
+      setDeleteOpen(false);
     }
   };
 
-  const handleBackNavigation = () => {
-    if (!bucketName) return;
-
-    // Navigate back to the bucket explorer with the appropriate prefix
-    // Extract the folder path from the object key (everything before the last /)
-    const folderPath = objectKey?.split('/').slice(0, -1).join('/') || '';
-    const prefix = folderPath ? `${folderPath}/` : '';
-
-    // Navigate to the bucket view with the correct prefix
-    navigate(`/buckets?bucket=${encodeURIComponent(bucketName)}${prefix ? `&prefix=${encodeURIComponent(prefix)}` : ''}`);
-  };
-
-  const copyToClipboard = (text: string) => {
-    navigator.clipboard.writeText(text);
-    toast.success('Copied to clipboard');
-  };
-
-  const formatDate = (dateString: string) => {
-    const date = new Date(dateString);
-    return date.toLocaleString('en-US', {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit',
-      second: '2-digit',
-      timeZoneName: 'short',
-    });
-  };
-
   if (isLoading) {
     return (
-      <div>
-        <Header title="Object Details" />
-        <div className="p-4 sm:p-6">
-          <div className="flex items-center justify-center h-64">
-            <div className="text-muted-foreground">Loading object details...</div>
-          </div>
-        </div>
+      <div className="flex h-64 items-center justify-center gap-2 text-[var(--muted-foreground)]">
+        <Loader2 className="h-4 w-4 animate-spin" /> Loading object details…
       </div>
     );
   }
 
   if (error || !metadata) {
     return (
-      <div>
-        <Header title="Object Details" />
-        <div className="p-4 sm:p-6">
-          <Button variant="outline" onClick={handleBackNavigation} className="mb-4">
-            <ArrowLeft className="h-4 w-4" />
-            Back
-          </Button>
-          <div className="flex items-center justify-center h-64">
-            <div className="text-red-500">{error || 'Object not found'}</div>
-          </div>
+      <div className="px-7 py-6">
+        <Button variant="secondary" onClick={() => navigate(backHref)} className="mb-4">
+          <ArrowLeft className="h-4 w-4" /> Back
+        </Button>
+        <div className="rounded-xl border border-[var(--danger-border)] bg-[var(--danger-soft)] px-5 py-4 text-[13.5px] text-[var(--destructive)]">
+          {error || 'Object not found'}
         </div>
       </div>
     );
   }
 
-  const fileName = objectKey?.split('/').pop() || objectKey || '';
-  const pathParts = objectKey?.split('/').filter(part => part) || [];
-  const parentPath = pathParts.slice(0, -1).join('/');
-
   return (
-    <div>
-      <Header title={fileName} />
-      <div className="p-4 sm:p-6 space-y-6">
-        {/* Back Button and Actions */}
-        <div className="flex items-center justify-between">
-          <Button variant="outline" onClick={handleBackNavigation}>
-            <ArrowLeft className="h-4 w-4" />
-            Back
-          </Button>
-          <div className="flex items-center gap-2">
-            <Button variant="outline" onClick={handleDownload}>
-              <Download className="h-4 w-4" />
-              Download
-            </Button>
-            <Button
-              variant="outline"
-              className="border-red-500 text-red-500 hover:bg-red-500/5"
-              onClick={handleDelete}
-            >
-              <Trash className="h-4 w-4" />
-              Delete
-            </Button>
-          </div>
-        </div>
-
-        {/* File Name Header */}
-        <div className="flex items-start gap-3 p-4 border-b border-border bg-card rounded-t-lg">
-          <div className="mt-1">
-            <File className="h-5 w-5 text-muted-foreground" />
-          </div>
-          <div className="flex-1 min-w-0">
-            <div className="flex items-center gap-4 flex-wrap">
-              <h2 className="text-lg font-medium text-foreground break-all">
-                {parentPath && (
-                  <span className="text-muted-foreground font-mono">/{parentPath}/</span>
-                )}
-                {fileName}
-              </h2>
-              <button
-                onClick={() => copyToClipboard(metadata.key)}
-                className="text-sm text-muted-foreground hover:text-foreground flex items-center gap-1 shrink-0"
-              >
-                <Copy className="h-3 w-3" />
-                Copy
-              </button>
-            </div>
-          </div>
-        </div>
-
-        {/* Object Details Section */}
-        <div className="border border-border rounded-lg bg-card">
-          <div className="p-6 border-b border-border">
-            <h3 className="text-base font-semibold text-foreground">Object Details</h3>
-          </div>
-          <div className="divide-y divide-border">
-            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 p-6">
-              <div className="text-sm font-medium text-muted-foreground">Date Created</div>
-              <div className="sm:col-span-2 text-sm text-foreground">
-                {formatDate(metadata.lastModified)}
-              </div>
-            </div>
-            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 p-6">
-              <div className="text-sm font-medium text-muted-foreground">Type</div>
-              <div className="sm:col-span-2 text-sm text-foreground">
-                {metadata.contentType || 'application/octet-stream'}
-              </div>
-            </div>
-            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 p-6">
-              <div className="text-sm font-medium text-muted-foreground">Storage Class</div>
-              <div className="sm:col-span-2 text-sm text-foreground">
-                {metadata.storageClass || 'Standard'}
-              </div>
-            </div>
-            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 p-6">
-              <div className="text-sm font-medium text-muted-foreground">Size</div>
-              <div className="sm:col-span-2 text-sm text-foreground">
-                {formatBytes(metadata.size)}
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Custom Metadata Section */}
-        {metadata.metadata && Object.keys(metadata.metadata).length > 0 && (
-          <div className="border border-border rounded-lg bg-card">
-            <div className="p-6 border-b border-border">
-              <h3 className="text-base font-semibold text-foreground">Custom Metadata</h3>
-            </div>
-            <div className="overflow-x-auto">
-              <table className="w-full">
-                <thead className="bg-muted/30">
-                  <tr className="border-b border-border">
-                    <th className="px-6 py-3 text-left text-sm font-medium text-muted-foreground">
-                      Key
-                    </th>
-                    <th className="px-6 py-3 text-left text-sm font-medium text-muted-foreground">
-                      Value
-                    </th>
-                  </tr>
-                </thead>
-                <tbody className="divide-y divide-border">
-                  {Object.entries(metadata.metadata).map(([key, value]) => (
-                    <tr key={key} className="hover:bg-muted/30">
-                      <td className="px-6 py-4 text-sm font-medium text-foreground break-all">
-                        {key}
-                      </td>
-                      <td className="px-6 py-4 text-sm text-foreground break-all">{value}</td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </div>
-        )}
-
-        {/* Object Preview Section */}
-        <div className="border border-border rounded-lg bg-card">
-          <div className="p-6 border-b border-border">
-            <h3 className="text-base font-semibold text-foreground">Object Preview</h3>
-          </div>
-          <div className="p-6">
-            <p className="text-sm text-muted-foreground">No preview available</p>
-          </div>
-        </div>
+    <div className="px-7 py-6 space-y-6">
+      {/* Back + breadcrumb */}
+      <div className="flex items-center gap-2 text-[13px] text-[var(--muted-foreground)]">
+        <Link
+          to={backHref}
+          className="inline-flex items-center gap-1.5 rounded-md px-2 py-1 hover:bg-[var(--accent)] hover:text-[var(--foreground)]"
+        >
+          <ArrowLeft className="h-3.5 w-3.5" />
+          Objects
+        </Link>
+        {pathSegments.map((seg, i) => (
+          <span key={i} className="inline-flex items-center gap-1">
+            <ChevronRight className="h-3.5 w-3.5 opacity-50" />
+            <span className="font-mono">{seg}</span>
+          </span>
+        ))}
+        <ChevronRight className="h-3.5 w-3.5 opacity-50" />
+        <span className="truncate font-mono text-[var(--foreground)]">{fileName}</span>
       </div>
+
+      {/* Hero */}
+      <section className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+        <div className="flex min-w-0 items-start gap-3">
+          <IconTile icon={<File />} tone="primary" size="lg" />
+          <div className="min-w-0">
+            <h1 className="truncate text-[22px] font-semibold tracking-[-0.02em]">{fileName}</h1>
+            <button
+              type="button"
+              onClick={() => copy(metadata.key, 'Object key copied')}
+              title="Copy key"
+              className="group mt-1 inline-flex max-w-full items-center gap-1.5 truncate font-mono text-[13px] text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
+            >
+              <span className="truncate">{metadata.key}</span>
+              <Copy className="h-3 w-3 flex-shrink-0 opacity-60 group-hover:opacity-100" />
+            </button>
+            <div className="mt-2 flex flex-wrap gap-1.5">
+              <Badge>{formatBytes(metadata.size)}</Badge>
+              <Badge>{metadata.contentType || 'application/octet-stream'}</Badge>
+              {metadata.storageClass && <Badge>{metadata.storageClass}</Badge>}
+            </div>
+          </div>
+        </div>
+        <div className="flex shrink-0 items-center gap-2">
+          <Button variant="secondary" onClick={handleDownload}>
+            <Download className="h-4 w-4" /> Download
+          </Button>
+          <Button variant="destructive" onClick={() => setDeleteOpen(true)}>
+            <Trash2 className="h-4 w-4" /> Delete
+          </Button>
+        </div>
+      </section>
+
+      {/* Details */}
+      <CardSection title="Details">
+        <dl className="divide-y divide-[var(--border)]">
+          <DetailRow label="Size">{formatBytes(metadata.size)}</DetailRow>
+          <DetailRow label="Content type">{metadata.contentType || 'application/octet-stream'}</DetailRow>
+          <DetailRow label="Storage class">{metadata.storageClass || 'Standard'}</DetailRow>
+          <DetailRow label="Last modified">{formatDate(metadata.lastModified)}</DetailRow>
+          <DetailRow label="ETag">
+            <button
+              type="button"
+              onClick={() => copy(metadata.etag, 'ETag copied')}
+              className="inline-flex max-w-full items-center gap-1.5 truncate rounded-md bg-[var(--surface-sunken)] px-2 py-0.5 font-mono text-[12.5px] hover:bg-[var(--accent)]"
+            >
+              <span className="truncate">{metadata.etag}</span>
+              <Copy className="h-3 w-3 flex-shrink-0 opacity-60" />
+            </button>
+          </DetailRow>
+          {metadata.versionId && (
+            <DetailRow label="Version ID">
+              <span className="font-mono text-[12.5px]">{metadata.versionId}</span>
+            </DetailRow>
+          )}
+        </dl>
+      </CardSection>
+
+      {/* Custom metadata */}
+      {metadata.metadata && Object.keys(metadata.metadata).length > 0 && (
+        <CardSection title="Custom metadata">
+          <dl className="divide-y divide-[var(--border)]">
+            {Object.entries(metadata.metadata).map(([key, value]) => (
+              <DetailRow key={key} label={key}>
+                <span className="font-mono text-[12.5px]">{value}</span>
+              </DetailRow>
+            ))}
+          </dl>
+        </CardSection>
+      )}
+
+      {/* Preview */}
+      <CardSection title="Preview">
+        <div className="px-5 py-10 text-center text-[13px] text-[var(--muted-foreground)]">
+          No preview available for this object.
+        </div>
+      </CardSection>
+
+      <ConfirmDialog
+        open={deleteOpen}
+        onOpenChange={setDeleteOpen}
+        title={`Delete "${fileName}"?`}
+        description="Applications referencing this object will no longer be able to read it."
+        confirmLabel="Delete object"
+        loading={deleting}
+        onConfirm={handleDelete}
+      />
     </div>
   );
 }

frontend/src/components/buckets/ObjectsTable.tsx

@@ -282,7 +282,7 @@ export function ObjectsTable({
               </TableCell>
               <TableCell className="hidden md:table-cell">
                 {obj.storageClass && (
-                  <Badge variant="secondary">{obj.storageClass}</Badge>
+                  <Badge variant="neutral">{obj.storageClass}</Badge>
                 )}
               </TableCell>
               <TableCell>{obj.isFolder ? null : formatBytes(obj.size)}</TableCell>
@@ -400,7 +400,7 @@ export function ObjectsTable({
 
           <div className="flex items-center gap-2">
             <Button
-              variant={hasPrevious ? "default": "default_disabled"}
+              variant="primary"
               size="sm"
               onClick={handlePreviousPage}
               disabled={!hasPrevious}
@@ -411,7 +411,7 @@ export function ObjectsTable({
             </Button>
 
             <Button
-                variant={hasNext ? "default": "default_disabled"}
+              variant="primary"
               size="sm"
               onClick={handleNextPage}
               disabled={!hasNext}

frontend/src/components/buckets/index.ts

@@ -2,7 +2,5 @@ export { BucketListView } from './BucketListView';
 export { ObjectBrowserView } from './ObjectBrowserView';
 export { ObjectsTable } from './ObjectsTable';
 export { CreateBucketDialog } from './CreateBucketDialog';
-export { DeleteBucketDialog } from './DeleteBucketDialog';
-export { BucketSettingsDialog } from './BucketSettingsDialog';
 export { CreateDirectoryDialog } from './CreateDirectoryDialog';
 export { DeleteObjectDialog } from './DeleteObjectDialog';