feat: update layout, add copy key

src/app/styles.css

@@ -20,6 +20,10 @@
     @apply bg-base-100;
   }
 
+  .card-body {
+    @apply p-4 md:p-8;
+  }
+
   .dropdown-content {
     @apply z-10;
   }

src/components/containers/sidebar.tsx

@@ -45,7 +45,7 @@ const Sidebar = () => {
                 className={cn(
                   "h-12 flex items-center px-6",
                   isActive &&
-                    "bg-primary text-primary-content hover:bg-primary/60 focus:bg-primary"
+                    "bg-primary text-primary-content hover:bg-primary/60 focus:bg-primary focus:text-primary-content"
                 )}
               >
                 <page.icon size={18} />

src/components/layouts/main-layout.tsx

@@ -45,7 +45,8 @@ const Header = ({ onSidebarOpen }: HeaderProps) => {
   const navigate = useNavigate();
 
   return (
-    <header className="bg-base-100 px-4 h-16 md:px-8 md:h-20 flex flex-row items-center gap-4">
+    <header className="bg-base-100 px-4 md:px-8">
+      <div className="container h-16 md:h-20 flex flex-row items-center gap-4">
         {page?.prev ? (
           <Button
             href={page.prev}
@@ -65,9 +66,12 @@ const Header = ({ onSidebarOpen }: HeaderProps) => {
           />
         )}
 
-      <h1 className="text-xl flex-1 truncate">{page?.title || "Dashboard"}</h1>
+        <h1 className="text-xl flex-1 truncate">
+          {page?.title || "Dashboard"}
+        </h1>
 
         {page?.actions}
+      </div>
     </header>
   );
 };

src/components/ui/toggle.tsx

@@ -42,7 +42,13 @@ export const ToggleField = <T extends FieldValues>({
       title={title}
       className={className}
       render={(field) => (
-        <Toggle {...props} {...field} className={inputClassName} />
+        <Toggle
+          {...props}
+          {...field}
+          className={inputClassName}
+          checked={field.value || false}
+          onChange={(e) => field.onChange(e.target.checked)}
+        />
       )}
     />
   );

src/lib/utils.ts

@@ -22,3 +22,12 @@ export const readableBytes = (bytes?: number | null, divider = 1024) => {
 export const handleError = (err: unknown) => {
   toast.error((err as Error)?.message || "Unknown error");
 };
+
+export const copyToClipboard = async (text: string) => {
+  try {
+    await navigator.clipboard.writeText(text);
+    toast.success("Copied to clipboard");
+  } catch (err) {
+    handleError(err);
+  }
+};

src/pages/buckets/components/bucket-card.tsx

@@ -10,8 +10,8 @@ type Props = {
 const BucketCard = ({ data }: Props) => {
   return (
     <div className="card card-body p-6">
-      <div className="grid grid-cols-2 md:grid-cols-3 items-start gap-4 p-2 pb-0">
+      <div className="grid grid-cols-2 items-start gap-4 p-2 pb-0">
-        <div className="flex flex-row items-start gap-x-3 col-span-2 md:col-span-1">
+        <div className="flex flex-row items-start gap-x-3 col-span-2">
           <ArchiveIcon size={28} className="shrink-0" />
 
           <p className="text-xl font-medium truncate">
@@ -38,7 +38,7 @@ const BucketCard = ({ data }: Props) => {
         </div>
       </div>
 
-      <div className="mt-1 flex flex-row justify-end gap-4">
+      <div className="flex flex-row justify-end gap-4">
         <Button href={`/buckets/${data.id}`}>Manage</Button>
         {/* <Button color="primary">Browse</Button> */}
       </div>

src/pages/buckets/page.tsx

@@ -3,9 +3,24 @@ import { useBuckets } from "./hooks";
 import { Input } from "react-daisyui";
 import BucketCard from "./components/bucket-card";
 import CreateBucketDialog from "./components/create-bucket-dialog";
+import { useMemo, useState } from "react";
 
 const BucketsPage = () => {
   const { data } = useBuckets();
+  const [search, setSearch] = useState("");
+
+  const items = useMemo(() => {
+    if (!search?.length) {
+      return data;
+    }
+
+    const q = search.toLowerCase();
+    return data?.filter(
+      (bucket) =>
+        bucket.id.includes(q) ||
+        bucket.globalAliases.find((alias) => alias.includes(q))
+    );
+  }, [data, search]);
 
   return (
     <div className="container">
@@ -13,13 +28,17 @@ const BucketsPage = () => {
 
       <div>
         <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
-          <Input placeholder="Search..." />
+          <Input
+            placeholder="Search..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+          />
           <div className="flex-1" />
           <CreateBucketDialog />
         </div>
 
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-8 items-stretch mt-4 md:mt-8">
-          {data?.map((bucket) => (
+          {items?.map((bucket) => (
             <BucketCard key={bucket.id} data={bucket} />
           ))}
         </div>

src/pages/keys/page.tsx

@@ -1,14 +1,18 @@
 import Button from "@/components/ui/button";
 import Page from "@/context/page-context";
-import { Trash } from "lucide-react";
+import { Copy, Eye, Trash } from "lucide-react";
 import { Card, Input, Table } from "react-daisyui";
 import { useKeys, useRemoveKey } from "./hooks";
 import CreateKeyDialog from "./components/create-key-dialog";
 import { toast } from "sonner";
-import { handleError } from "@/lib/utils";
+import { copyToClipboard, handleError } from "@/lib/utils";
+import { useCallback, useMemo, useState } from "react";
+import api from "@/lib/api";
 
 const KeysPage = () => {
   const { data, refetch } = useKeys();
+  const [search, setSearch] = useState("");
+  const [secretKeys, setSecretKeys] = useState<Record<string, string>>({});
 
   const removeKey = useRemoveKey({
     onSuccess: () => {
@@ -18,18 +22,45 @@ const KeysPage = () => {
     onError: handleError,
   });
 
+  const fetchSecretKey = useCallback(async (id: string) => {
+    try {
+      const result = await api.get("/v1/key", {
+        params: { id, showSecretKey: "true" },
+      });
+      if (!result?.secretAccessKey) {
+        throw new Error("Failed to fetch secret key");
+      }
+      setSecretKeys((prev) => ({ ...prev, [id]: result.secretAccessKey }));
+    } catch (err) {
+      handleError(err);
+    }
+  }, []);
+
   const onRemove = (id: string) => {
     if (window.confirm("Are you sure you want to remove this key?")) {
       removeKey.mutate(id);
     }
   };
 
+  const items = useMemo(() => {
+    if (!search?.length) {
+      return data;
+    }
+
+    const q = search.toLowerCase();
+    return data?.filter((item) => item.id.includes(q) || item.name.includes(q));
+  }, [data, search]);
+
   return (
     <div className="container">
       <Page title="Keys" />
 
       <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
-        <Input placeholder="Search..." />
+        <Input
+          placeholder="Search..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+        />
         <div className="flex-1" />
         <CreateKeyDialog />
       </div>
@@ -39,17 +70,51 @@ const KeysPage = () => {
           <Table zebra>
             <Table.Head>
               <span>#</span>
-              <span>Key ID</span>
               <span>Name</span>
+              <span>Key ID</span>
+              <span>Secret Key</span>
               <span />
             </Table.Head>
 
             <Table.Body>
-              {data?.map((key, idx) => (
+              {items?.map((key, idx) => (
                 <Table.Row key={key.id}>
                   <span>{idx + 1}</span>
-                  <span className="truncate">{key.id}</span>
                   <span>{key.name}</span>
+                  <div className="flex flex-row items-center">
+                    <p className="truncate max-w-20" title={key.id}>
+                      {key.id}
+                    </p>
+                    <Button
+                      size="sm"
+                      icon={Copy}
+                      onClick={() => copyToClipboard(key.id)}
+                    />
+                  </div>
+                  {!secretKeys[key.id] ? (
+                    <Button
+                      icon={Eye}
+                      size="sm"
+                      onClick={() => fetchSecretKey(key.id)}
+                    >
+                      View
+                    </Button>
+                  ) : (
+                    <div className="flex flex-row items-center">
+                      <p
+                        className="font-mono max-w-20 truncate"
+                        title={secretKeys[key.id]}
+                      >
+                        {secretKeys[key.id]}
+                      </p>
+                      <Button
+                        size="sm"
+                        icon={Copy}
+                        onClick={() => copyToClipboard(secretKeys[key.id])}
+                      />
+                    </div>
+                  )}
+
                   <span>
                     <Button
                       color="ghost"