feat: update layout, add copy key

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="flex flex-row items-start gap-x-3 col-span-2 md:col-span-1">
+      <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">
           <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"