mirror of
https://github.com/Luchexx/wacrm.git
synced 2026-11-02 09:19:51 +00:00
ee8da11985
Add row selection to the contacts table so multiple contacts can be
deleted at once instead of one at a time.
- New Checkbox UI primitive wrapping @base-ui/react/checkbox, matching
the switch.tsx token conventions (incl. indeterminate state).
- Header select-all + per-row checkboxes; row-checkbox clicks stop
propagation so they don't open the detail sheet.
- Bulk action bar with selected count, Clear, and a role-gated
"Delete selected" action.
- handleBulkDelete via .delete().in('id', ids) — RLS already restricts
deletes to account members, so no migration/API route is needed.
- Selection is page-scoped and resets whenever the contact set reloads.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
|
|
import { Check, Minus } from "lucide-react"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
|
|
// Root: primary token when checked or indeterminate (responds to the active
|
|
// color theme), input border when unchecked. Mirrors switch.tsx conventions.
|
|
function Checkbox({
|
|
className,
|
|
...props
|
|
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
|
|
return (
|
|
<CheckboxPrimitive.Root
|
|
data-slot="checkbox"
|
|
className={cn(
|
|
"peer size-4 shrink-0 cursor-pointer rounded-[4px] border border-input bg-card shadow-sm transition-colors",
|
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background",
|
|
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
"data-[checked]:border-primary data-[checked]:bg-primary data-[checked]:text-primary-foreground",
|
|
"data-[indeterminate]:border-primary data-[indeterminate]:bg-primary data-[indeterminate]:text-primary-foreground",
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
<CheckboxPrimitive.Indicator
|
|
data-slot="checkbox-indicator"
|
|
className="flex items-center justify-center text-current"
|
|
>
|
|
{props.indeterminate ? (
|
|
<Minus className="size-3.5" />
|
|
) : (
|
|
<Check className="size-3.5" />
|
|
)}
|
|
</CheckboxPrimitive.Indicator>
|
|
</CheckboxPrimitive.Root>
|
|
)
|
|
}
|
|
|
|
export { Checkbox }
|