ui: indeterminate group checkboxes and inert grayed rows

A category that is on with nothing enabled under it now shows the
mixed checkbox state instead of a checked box next to 0/N. Rows
grayed out by a disabled parent no longer stay clickable behind
opacity.

Assisted-by: pi
This commit is contained in:
Aleksander Grygier
2026-08-27 06:44:44 +02:00
committed by GitHub
parent 4f2f679559
commit ba419bf2f1
2 changed files with 11 additions and 2 deletions
@@ -252,11 +252,14 @@
{#snippet sheetGroupRow(group: ToolGroup)}
{@const checked = toolsPanel.isGroupChecked(group)}
{@const enabledCount = toolsPanel.getEnabledToolCount(group)}
// parent on but nothing under it enabled, or partially enabled: show mixed state
{@const indeterminate =
group.tools.length > 0 && (enabledCount === 0 ? checked : enabledCount < group.tools.length)}
{@const favicon = toolsPanel.getFavicon(group)}
{@const groupDisabled = toolsPanel.isGroupDisabled(group)}
<button
class="{sheetItemRowClass} {groupDisabled ? 'opacity-50' : ''}"
class="{sheetItemRowClass} {groupDisabled ? 'pointer-events-none opacity-50' : ''}"
onclick={() => toolsPanel.toggleGroupByKey(group.key)}
type="button"
>
@@ -280,6 +283,7 @@
<Checkbox
{checked}
class="{ICON_CLASS_DEFAULT} shrink-0"
{indeterminate}
onCheckedChange={() => toolsPanel.toggleGroupByKey(group.key)}
onclick={(e) => e.stopPropagation()}
/>
@@ -78,6 +78,10 @@
{#snippet groupRow(group: ToolGroup)}
{@const isExpanded = toolsPanel.expandedGroups.has(group.key)}
{@const checked = toolsPanel.isGroupChecked(group)}
{@const enabledCount = toolsPanel.getEnabledToolCount(group)}
// parent on but nothing under it enabled, or partially enabled: show mixed state
{@const indeterminate =
group.tools.length > 0 && (enabledCount === 0 ? checked : enabledCount < group.tools.length)}
{@const favicon = toolsPanel.getFavicon(group)}
{@const groupDisabled = toolsPanel.isGroupDisabled(group)}
@@ -85,7 +89,7 @@
onOpenChange={() => toolsPanel.toggleGroupExpanded(group.key)}
open={isExpanded}
>
<div class="flex items-center gap-1 {groupDisabled ? 'opacity-50' : ''}">
<div class="flex items-center gap-1 {groupDisabled ? 'pointer-events-none opacity-50' : ''}">
<Collapsible.Trigger
class="flex min-w-0 flex-1 items-center gap-2 rounded px-2 py-1.5 text-sm hover:bg-muted/50"
>
@@ -122,6 +126,7 @@
{...props}
{checked}
class="mr-2 {ICON_CLASS_DEFAULT} shrink-0"
{indeterminate}
onCheckedChange={() => toolsPanel.toggleGroupByKey(group.key)}
/>
{/snippet}