diff options
| author | Simon Orzel <simonorzel@gmail.com> | 2025-07-15 23:48:47 +0200 |
|---|---|---|
| committer | Simon Orzel <simonorzel@gmail.com> | 2025-07-15 23:48:47 +0200 |
| commit | acd1e2e2169c826d8cce08b3bf8d4416be05817f (patch) | |
| tree | 2d010e43a9a70c6ac48368f84681a389e8fcb102 | |
| parent | 1f95bb98d6108a5fa059e0f9a08c98e5bdb72c08 (diff) | |
| download | opencut-acd1e2e2169c826d8cce08b3bf8d4416be05817f.tar.gz | |
feat: makes the select all project button entirely clickable and cleans up small css changes
| -rw-r--r-- | apps/web/src/app/projects/page.tsx | 34 |
1 files changed, 15 insertions, 19 deletions
diff --git a/apps/web/src/app/projects/page.tsx b/apps/web/src/app/projects/page.tsx index 94defe1e..499b999a 100644 --- a/apps/web/src/app/projects/page.tsx +++ b/apps/web/src/app/projects/page.tsx @@ -173,28 +173,24 @@ export default function ProjectsPage() { </div> {isSelectionMode && savedProjects.length > 0 && ( - <div className="mb-6 p-4 bg-muted/30 rounded-lg border"> + <div + className="mb-6 p-4 bg-muted/30 rounded-lg border cursor-pointer hover:bg-muted/40 transition-colors" + onClick={() => handleSelectAll(!allSelected)} + > <div className="flex items-center gap-3"> <Checkbox checked={allSelected} - ref={(el) => { - if (el) { - const checkboxElement = el.querySelector( - "input" - ) as HTMLInputElement; - if (checkboxElement) { - checkboxElement.indeterminate = someSelected; - } - } - }} onCheckedChange={handleSelectAll} + onClick={(e) => e.stopPropagation()} /> - <span className="text-sm font-medium"> - {allSelected ? "Deselect All" : "Select All"} - </span> - <span className="text-sm text-muted-foreground"> - ({selectedProjects.size} of {savedProjects.length} selected) - </span> + <div className="flex-1 flex items-center justify-start gap-2"> + <span className="text-sm font-medium"> + {allSelected ? "Deselect All" : "Select All"} + </span> + <span className="text-sm text-muted-foreground"> + ({selectedProjects.size} of {savedProjects.length} selected) + </span> + </div> </div> </div> )} @@ -296,7 +292,7 @@ function ProjectCard({ {/* Selection checkbox */} {isSelectionMode && ( <div className="absolute top-3 left-3 z-10"> - <div className="w-5 h-5 rounded bg-background/80 backdrop-blur-sm border flex items-center justify-center"> + <div className="w-5 h-5 rounded-full bg-background/80 backdrop-blur-sm border flex items-center justify-center"> <Checkbox checked={isSelected} onCheckedChange={(checked) => @@ -326,7 +322,7 @@ function ProjectCard({ </div> </div> - <CardContent className="px-0 pt-5 flex flex-col gap-1"> + <CardContent className="px-0 pt-5 flex flex-col gap-1 p-2"> <div className="flex items-start justify-between"> <h3 className="font-medium text-sm leading-snug group-hover:text-foreground/90 transition-colors line-clamp-2"> {project.name} |