From 4486697ca5b9fed281ec782a5a4a18dfacc79433 Mon Sep 17 00:00:00 2001
From: Noste <83548733+Noooste@users.noreply.github.com>
Date: Sat, 7 Mar 2026 11:18:14 +0100
Subject: [PATCH] refactor: simplify access key loading in BucketSettingsDialog
 and enhance last modified tooltip in ObjectsTable

Signed-off-by: Noste <83548733+Noooste@users.noreply.github.com>
---
 .../buckets/BucketSettingsDialog.tsx          | 16 +---
 .../src/components/buckets/ObjectsTable.tsx   | 90 ++++++++++---------
 2 files changed, 50 insertions(+), 56 deletions(-)

diff --git a/frontend/src/components/buckets/BucketSettingsDialog.tsx b/frontend/src/components/buckets/BucketSettingsDialog.tsx
index 7712313..5426551 100644
--- a/frontend/src/components/buckets/BucketSettingsDialog.tsx
+++ b/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);
diff --git a/frontend/src/components/buckets/ObjectsTable.tsx b/frontend/src/components/buckets/ObjectsTable.tsx
index cf13a0c..457f654 100644
--- a/frontend/src/components/buckets/ObjectsTable.tsx
+++ b/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 && (