Skip to content

Clear filter selections on count hover #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
debba merged 1 commit into from
May 14, 2026
Merged

Clear filter selections on count hover #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 31 additions & 10 deletions src/components/SidebarControls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,12 +104,26 @@ function CheckList({
);
}

function FilterSection({ title, activeCount, children, dataFor, open = false }: { title: string; activeCount: number; children: ReactNode; dataFor?: string; open?: boolean }) {
function FilterSection({ title, activeCount, children, dataFor, open = false, onClear }: { title: string; activeCount: number; children: ReactNode; dataFor?: string; open?: boolean; onClear?: () => void }) {
const clearable = activeCount > 0 && Boolean(onClear);
return (
<details className="section" data-for={dataFor} open={open || activeCount > 0}>
<summary>
<ChevronIcon />
{title} <span className={`count ${activeCount ? "active" : ""}`}>{activeCount}</span>
{title}
{clearable ? (
<button
type="button"
className="count active clearable"
aria-label={`Clear ${title} filter`}
onClick={(e) => { e.preventDefault(); e.stopPropagation(); onClear?.(); }}
>
<span className="count-num">{activeCount}</span>
<span className="count-clear">Clear all</span>
</button>
) : (
<span className={`count ${activeCount ? "active" : ""}`}>{activeCount}</span>
)}
</summary>
<div className="section-body">{children}</div>
</details>
Expand Down Expand Up @@ -202,7 +216,14 @@ export function SidebarControls({
</label>
</div>

<FilterSection title="Organizations" activeCount={orgSelection.size} open>
<FilterSection
title="Organizations"
activeCount={orgSelection.size}
open
onClear={() => ticketMode
? onActiveFiltersChange({ ...activeFilters, orgs: new Set() })
: onRepoFiltersChange({ ...repoFilters, orgs: new Set() })}
>
<CheckList
entries={[...orgEntries.entries()]}
selected={orgSelection}
Expand All @@ -216,32 +237,32 @@ export function SidebarControls({

{ticketMode ? (
<>
<FilterSection title="Repositories" activeCount={activeFilters.repos.size} dataFor={prMode ? "prs-only" : "issues-only"}>
<FilterSection title="Repositories" activeCount={activeFilters.repos.size} dataFor={prMode ? "prs-only" : "issues-only"} onClear={() => onActiveFiltersChange({ ...activeFilters, repos: new Set() })}>
<CheckList entries={[...activeFacets.repos.entries()]} selected={activeFilters.repos} onToggle={(value) => onActiveFiltersChange({ ...activeFilters, repos: toggleSetValue(activeFilters.repos, value) })} />
</FilterSection>
<FilterSection title="Labels" activeCount={activeFilters.labels.size} dataFor={prMode ? "prs-only" : "issues-only"}>
<FilterSection title="Labels" activeCount={activeFilters.labels.size} dataFor={prMode ? "prs-only" : "issues-only"} onClear={() => onActiveFiltersChange({ ...activeFilters, labels: new Set() })}>
<CheckList entries={[...activeFacets.labels.entries()]} selected={activeFilters.labels} showSwatch onToggle={(value) => onActiveFiltersChange({ ...activeFilters, labels: toggleSetValue(activeFilters.labels, value) })} />
</FilterSection>
<FilterSection title="Authors" activeCount={activeFilters.authors.size} dataFor={prMode ? "prs-only" : "issues-only"}>
<FilterSection title="Authors" activeCount={activeFilters.authors.size} dataFor={prMode ? "prs-only" : "issues-only"} onClear={() => onActiveFiltersChange({ ...activeFilters, authors: new Set() })}>
<CheckList entries={[...activeFacets.authors.entries()]} selected={activeFilters.authors} onToggle={(value) => onActiveFiltersChange({ ...activeFilters, authors: toggleSetValue(activeFilters.authors, value) })} />
</FilterSection>
<FilterSection title="Assignees" activeCount={activeFilters.assignees.size} dataFor={prMode ? "prs-only" : "issues-only"}>
<FilterSection title="Assignees" activeCount={activeFilters.assignees.size} dataFor={prMode ? "prs-only" : "issues-only"} onClear={() => onActiveFiltersChange({ ...activeFilters, assignees: new Set() })}>
<CheckList entries={[...activeFacets.assignees.entries()]} selected={activeFilters.assignees} onToggle={(value) => onActiveFiltersChange({ ...activeFilters, assignees: toggleSetValue(activeFilters.assignees, value) })} />
</FilterSection>
</>
) : (
<>
<FilterSection title="Languages" activeCount={repoFilters.languages.size} dataFor="repos-only">
<FilterSection title="Languages" activeCount={repoFilters.languages.size} dataFor="repos-only" onClear={() => onRepoFiltersChange({ ...repoFilters, languages: new Set() })}>
<CheckList entries={[...repoFacets.languages.entries()]} selected={repoFilters.languages} languageDot onToggle={(value) => onRepoFiltersChange({ ...repoFilters, languages: toggleSetValue(repoFilters.languages, value) })} />
</FilterSection>
<FilterSection title="Visibility" activeCount={repoFilters.visibility === "all" ? 0 : 1} dataFor="repos-only" open>
<FilterSection title="Visibility" activeCount={repoFilters.visibility === "all" ? 0 : 1} dataFor="repos-only" open onClear={() => onRepoFiltersChange({ ...repoFilters, visibility: "all" })}>
<div className="opt-group" role="tablist">
{(["all", "public", "private"] as const).map((value) => (
<button key={value} className={repoFilters.visibility === value ? "active" : ""} onClick={() => onRepoFiltersChange({ ...repoFilters, visibility: value })}>{value[0].toUpperCase() + value.slice(1)}</button>
))}
</div>
</FilterSection>
<FilterSection title="Options" activeCount={Number(!repoFilters.includeForks) + Number(repoFilters.includeArchived)} dataFor="repos-only" open>
<FilterSection title="Options" activeCount={Number(!repoFilters.includeForks) + Number(repoFilters.includeArchived)} dataFor="repos-only" open onClear={() => onRepoFiltersChange({ ...repoFilters, includeForks: true, includeArchived: false })}>
<div className="toggle-row">Include forks <button className={`toggle ${repoFilters.includeForks ? "on" : ""}`} role="switch" aria-checked={repoFilters.includeForks} onClick={() => onRepoFiltersChange({ ...repoFilters, includeForks: !repoFilters.includeForks })} /></div>
<div className="toggle-row">Include archived <button className={`toggle ${repoFilters.includeArchived ? "on" : ""}`} role="switch" aria-checked={repoFilters.includeArchived} onClick={() => onRepoFiltersChange({ ...repoFilters, includeArchived: !repoFilters.includeArchived })} /></div>
</FilterSection>
Expand Down
9 changes: 9 additions & 0 deletions src/styles/layout-sidebar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,15 @@
padding: 1px 7px; border-radius: 10px;
}
.section .count.active { color: var(--text); background: var(--panel-3); border-color: var(--border); }
button.count.clearable {
font: inherit; line-height: 1; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
min-width: 28px;
}
button.count.clearable .count-clear { display: none; }
button.count.clearable:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft, var(--panel-3)); }
button.count.clearable:hover .count-num { display: none; }
button.count.clearable:hover .count-clear { display: inline; font-weight: 600; }
.section-body { padding: 2px 10px 12px; }

/* Tab-scoped sidebar sections */
Expand Down