feat(agents): show database delete button in card footer on agent page

src/components/common/database-card.tsx

@@ -14,10 +14,11 @@ export type DatabaseCardProps = {
     selectable?: boolean;
     selected?: boolean;
     onToggleSelect?: (databaseId: string) => void;
+    deleteButton?: React.ReactNode;
 };
 
 export const DatabaseCard = (props: DatabaseCardProps) => {
-    const {data: database, withDetails = true, selectable = false, selected = false, onToggleSelect} = props;
+    const {data: database, withDetails = true, selectable = false, selected = false, onToggleSelect, deleteButton} = props;
     const [isCopied, setIsCopied] = useState(false);
 
     const handleCopy = (e: React.MouseEvent) => {
@@ -105,7 +106,12 @@ export const DatabaseCard = (props: DatabaseCardProps) => {
                 </div>
             </div>
 
-            {withDetails && (
+            {deleteButton ? (
+                <div className="mt-4 flex items-center justify-end pt-3 border-t border-border/50"
+                     onClick={(e) => e.preventDefault()}>
+                    {deleteButton}
+                </div>
+            ) : withDetails ? (
                 <div className="mt-4 flex items-center justify-between pt-3 border-t border-border/50">
                 <span
                     className="text-[10px] font-black uppercase tracking-widest text-primary opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-x-[-10px] group-hover:translate-x-0">Open</span>
@@ -116,7 +122,7 @@ export const DatabaseCard = (props: DatabaseCardProps) => {
                         <ChevronRight className="w-3.5 h-3.5 group-hover:translate-x-1 transition-transform"/>
                     </div>
                 </div>
-            )}
+            ) : null}
         </Card>
     );
 };

src/features/agents/components/agent-database-card.tsx

@@ -2,6 +2,7 @@
 
 import {Database} from "@/db/schema/07_database";
 import {DatabaseCard} from "@/components/common/database-card";
+import {DatabaseDeleteButton} from "@/features/agents/components/database-delete-button";
 
 export type agentDatabaseCardProps = {
     data: Database;
@@ -10,5 +11,15 @@ export type agentDatabaseCardProps = {
 export const AgentDatabaseCard = (props: agentDatabaseCardProps) => {
     const {data: database} = props;
 
-    return <DatabaseCard withDetails={false} data={database}/>;
+    return (
+        <DatabaseCard
+            withDetails={false}
+            data={database}
+            deleteButton={
+                database.agentId ? (
+                    <DatabaseDeleteButton databaseId={database.id} agentId={database.agentId}/>
+                ) : undefined
+            }
+        />
+    );
 };