refactor: move collapsible logic into shared-filter for checkbox filters

[abdimo101]

Description

This PR moves collapsible logic for checkbox filters into shared-filter component. Parent components now only set [collapsible].

Motivation

Background on use case, changes needed

Fixes:

Please provide a list of the fixes implemented in this PR

• Items added

Changes:

Please provide a list of the changes implemented by this PR

• changes made

Tests included

• Included for each change/fix?
• Passing? (Merge will not be approved unless this is checked)

Documentation

• swagger documentation updated [required]
• official documentation updated [nice-to-have]

official documentation info

If you have updated the official documentation, please provide PR # and URL of the pages where the updates are included

Backend version

• Does it require a specific version of the backend
• which version of the backend is required:

Summary by Sourcery

Centralize checkbox filter collapsible behavior within the shared-filter component and simplify parent filter components to configure collapsibility via an input flag.

Enhancements:

• Move collapsible checkbox filter UI and state management from dataset and proposal filter components into the shared-filter component.
• Add a collapsible input and internal collapsed state to shared-filter to control checkbox filter expansion and badge visibility.
• Update styles so collapsible filter wrapper and toggle button are defined in shared-filter styles instead of per-consumer styles.

[sourcery-ai]

Hey there - I've reviewed your changes - here's some feedback:

• The showBadge @input on SharedFilterComponent is no longer used (badge visibility is now derived from collapsible/collapsed), so consider either removing the input or wiring it into shouldShowBadge to avoid dead or misleading API surface.
• The new collapse-toggle button in shared-filter lacks accessibility attributes; consider adding at least aria-label and aria-expanded (and optionally aria-controls) so screen readers can correctly announce the collapsible state of the filter.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- The `showBadge` @Input on `SharedFilterComponent` is no longer used (badge visibility is now derived from `collapsible`/`collapsed`), so consider either removing the input or wiring it into `shouldShowBadge` to avoid dead or misleading API surface.
- The new `collapse-toggle` button in `shared-filter` lacks accessibility attributes; consider adding at least `aria-label` and `aria-expanded` (and optionally `aria-controls`) so screen readers can correctly announce the collapsible state of the filter.

## Individual Comments

### Comment 1
<location> `src/app/datasets/datasets-filter/datasets-filter.component.html:29-33` </location>
<code_context>
-        class="collapsible-filter-wrapper"
-        [class.collapsed]="!expandedFilters[filter.key]"
-      >
-        <shared-filter
-          [key]="filter.key"
-          [label]="filter.label"
</code_context>

<issue_to_address>
**issue (bug_risk):** Dropping the `filter.enabled` condition means disabled filters will now still render.

Previously, checkboxes used `*ngIf="filter.type === 'checkbox' && filter.enabled"` and other filters used `*ngIf="filter.type !== 'checkbox' && filter.enabled"`, so disabled filters never rendered. After the refactor, `shared-filter` is created for every entry in `filtersList`, regardless of `filter.enabled`.

Unless `filtersList` is already restricted to enabled filters, this will surface filters that were previously hidden (same in `proposal-side-filter.component.html`). To keep the old behavior, either add `*ngIf="filter.enabled"` to `shared-filter` or filter out disabled items when constructing `filtersList`.
</issue_to_address>

### Comment 2
<location> `src/app/shared/modules/shared-filter/shared-filter.component.html:92-98` </location>
<code_context>
         <ng-template #noItems>
           <div class="empty-text">No options found</div>
         </ng-template>
+        <button
+          *ngIf="collapsible"
+          class="collapse-toggle"
+          type="button"
+          (click)="toggleCollapse()"
+        >
+          <mat-icon>{{ collapsed ? "expand_more" : "expand_less" }}</mat-icon>
+        </button>
       </div>
</code_context>

<issue_to_address>
**suggestion (bug_risk):** The collapse/expand button lacks an accessible label, which can hinder screen-reader users.

Since the button has only an icon and no text or ARIA attribute, screen readers will announce it as an unlabeled button.

Please add an accessible name, e.g. `aria-label="Toggle filter"` or bind a localized label such as `[attr.aria-label]="collapsed ? 'Expand filter' : 'Collapse filter' | translate"`, following your existing i18n pattern.

Suggested implementation:

```
        <button
          *ngIf="collapsible"
          class="collapse-toggle"
          type="button"
          (click)="toggleCollapse()"
          [attr.aria-label]="(collapsed ? 'shared.filters.expand' : 'shared.filters.collapse') | translate: localization"
        >
          <mat-icon>{{ collapsed ? "expand_more" : "expand_less" }}</mat-icon>
        </button>

```

1. Ensure that translation keys like `shared.filters.expand` and `shared.filters.collapse` exist in your i18n files and resolve to something like "Expand filter" / "Collapse filter".
2. If your project uses a different key namespace, adjust the string literals to match the existing pattern (e.g. `filters.expand`, `filters.collapse`, etc.).
</issue_to_address>

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}