fix(db-card): optional selection checkbox and selected state

src/components/common/database-card.tsx

@@ -8,14 +8,18 @@ import {ConnectionIndicator} from "@/components/common/connection-indicator";
 import {formatDateLastContact} from "@/utils/date-formatting";
 import {Database} from "@/db/schema/07_database";
 import {ChevronRight, Activity, Fingerprint, Copy, Check} from "lucide-react";
+import {cn} from "@/lib/utils";
 
 export type DatabaseCardProps = {
     data: Database;
     withDetails?: boolean;
+    selectable?: boolean;
+    selected?: boolean;
+    onToggleSelect?: (databaseId: string) => void;
 };
 
 export const DatabaseCard = (props: DatabaseCardProps) => {
-    const {data: database, withDetails = true} = props;
+    const {data: database, withDetails = true, selectable = false, selected = false, onToggleSelect} = props;
     const [isCopied, setIsCopied] = useState(false);
 
     const handleCopy = (e: React.MouseEvent) => {
@@ -28,8 +32,29 @@ export const DatabaseCard = (props: DatabaseCardProps) => {
 
     return (
         <Card
-            className="relative h-full flex flex-col p-4 transition-all border-border/50 bg-card hover:bg-accent/50 hover:border-primary/50 group-hover:shadow-lg overflow-hidden gap-0">
+            className={cn(
-            <div className="flex items-start justify-between mb-2">
+                "relative h-full flex flex-col p-4 transition-all border-border/50 bg-card hover:bg-accent/50 hover:border-primary/50 group-hover:shadow-lg overflow-hidden gap-0",
+                selected && "ring-2 ring-primary border-primary",
+            )}>
+            {selectable && (
+                <button
+                    type="button"
+                    aria-pressed={selected}
+                    aria-label={selected ? "Deselect database" : "Select database"}
+                    onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        onToggleSelect?.(database.id);
+                    }}
+                    className={cn(
+                        "absolute top-3 left-3 z-20 w-5 h-5 rounded-md border-2 flex items-center justify-center transition-colors",
+                        selected ? "bg-primary border-primary text-primary-foreground" : "border-muted-foreground/50 bg-background/70",
+                    )}
+                >
+                    {selected && <Check className="w-3 h-3" />}
+                </button>
+            )}
+            <div className={cn("flex items-start justify-between mb-2", selectable && "pl-7")}>
                 <div
                     className="relative w-12 h-12 p-2 bg-background rounded-xl border border-border/50 shadow-sm flex items-center justify-center group-hover:border-primary/30 transition-all duration-300 group-hover:scale-105">
                     <Image