Enhancement: Make filter section collapsible to improve popup layout …

[ugupta17k]

…(#385)

📌 Fixes

Fixes # (Use "Fixes", "Closes", or "Resolves" for automatic closing)

---

📝 Summary of Changes

• Short description of what was changed
• Include links to related issues/discussions if any

---

📸 Screenshots / Demo (if UI-related)

Add screenshots, video, or link to deployed preview if applicable

---

✅ Checklist

• I’ve tested my changes locally
• I’ve added tests (if applicable)
• I’ve updated documentation (if applicable)
• My code follows the project’s code style guidelines

---

👀 Reviewer Notes

Add any special notes for the reviewer here

Summary by Sourcery

Make the popup’s filter controls collapsible under an Advanced Filters section to keep the UI compact while preserving existing options.

Enhancements:

• Add an expandable Advanced Filters section that groups existing filter checkboxes in the popup and remembers its open/closed state via local storage.

Documentation:

• Update README to document the new collapsible Advanced Filters section and how it affects the popup layout.

[sourcery-ai]

Reviewer's Guide

Introduces a collapsible "Advanced Filters" section in the popup UI, wiring it to persistent toggle behavior via chrome.storage and documenting the new behavior in the README and locale strings.

Sequence diagram for collapsible advanced filters state persistence

sequenceDiagram
    actor User
    participant PopupUI
    participant PopupJS
    participant ChromeStorage

    %% Initial load
    User->>PopupUI: Open extension popup
    PopupUI->>PopupJS: DOMContentLoaded
    PopupJS->>ChromeStorage: get advancedFiltersOpen
    ChromeStorage-->>PopupJS: advancedFiltersOpen value
    alt advancedFiltersOpen is true
        PopupJS->>PopupUI: Remove hidden from advancedFiltersContainer
        PopupJS->>PopupUI: Replace fa-chevron-down with fa-chevron-up on advancedFiltersIcon
    else advancedFiltersOpen is false or undefined
        PopupJS->>PopupUI: Ensure advancedFiltersContainer has hidden
        PopupJS->>PopupUI: Ensure advancedFiltersIcon has fa-chevron-down
    end

    %% User toggles advanced filters
    User->>PopupUI: Click advancedFiltersToggle button
    PopupUI->>PopupJS: advancedFiltersToggle click event
    PopupJS->>PopupJS: Check advancedFiltersContainer.hidden
    alt Container is open
        PopupJS->>PopupUI: Add hidden to advancedFiltersContainer
        PopupJS->>PopupUI: Replace fa-chevron-up with fa-chevron-down on advancedFiltersIcon
        PopupJS->>ChromeStorage: set advancedFiltersOpen = false
    else Container is closed
        PopupJS->>PopupUI: Remove hidden from advancedFiltersContainer
        PopupJS->>PopupUI: Replace fa-chevron-down with fa-chevron-up on advancedFiltersIcon
        PopupJS->>ChromeStorage: set advancedFiltersOpen = true
    end

Loading

File-Level Changes

Change	Details	Files
Group existing filter checkboxes into a collapsible "Advanced Filters" section in the popup UI.	Wrap the existing filter checkboxes (show labels, only issues/PRs/reviewed PRs, show commits) inside a new container div controlled by an Advanced Filters toggle button. Add a full‑width styled button with text and a chevron icon to expand/collapse the advanced filters container. Hide the advanced filters container by default using a CSS utility class to keep the popup more compact on initial load.	src/popup.html
Add interactive behavior and persistence for the Advanced Filters toggle in the popup script.	Attach a click listener to the Advanced Filters toggle button to show/hide the filters container and swap the chevron icon direction. Persist the open/closed state of the Advanced Filters section into chrome.storage.local on each toggle. Restore the collapsed/expanded state from chrome.storage.local on popup load so the UI remembers the user’s last choice. Register the Advanced Filters toggle element in the existing list of queried DOM IDs used during initialization.	src/scripts/popup.js
Document the new collapsible Advanced Filters feature and add supporting localization entries.	Add a new README section describing the collapsible Advanced Filters behavior and its UX impact. Introduce or update locale strings (e.g., label text for "Advanced Filters") in the English locale JSON to support i18n for the new UI element.	README.md src/_locales/en/messages.json

Possibly linked issues

• [Enhancement]: Make filter section collapsible to improve popup layout** #385: The PR adds a collapsible Advanced Filters section hiding the filter checkboxes, exactly matching the requested UI enhancement.

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey - I've left some high level feedback:

• In popup.js, advancedFiltersContainer and advancedFiltersIcon are used but only advancedFiltersToggle is added to the idsToGet list, so make sure you’re actually querying and assigning those elements before using them to avoid runtime errors.
• When restoring the advanced filters state from chrome.storage, consider explicitly setting both the container visibility and the chevron icon class for both open and closed cases so the UI is always in a known, consistent state (including when no value is stored yet).
• For the new Advanced Filters button, adding appropriate ARIA attributes (e.g. aria-expanded, aria-controls) and updating them on toggle would improve accessibility of the collapsible section.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- In `popup.js`, `advancedFiltersContainer` and `advancedFiltersIcon` are used but only `advancedFiltersToggle` is added to the `idsToGet` list, so make sure you’re actually querying and assigning those elements before using them to avoid runtime errors.
- When restoring the advanced filters state from `chrome.storage`, consider explicitly setting both the container visibility and the chevron icon class for both open and closed cases so the UI is always in a known, consistent state (including when no value is stored yet).
- For the new `Advanced Filters` button, adding appropriate ARIA attributes (e.g. `aria-expanded`, `aria-controls`) and updating them on toggle would improve accessibility of the collapsible section.

---

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.}

[gurusatsangi]

Hi @ugpta17k,

I’ve already implemented this enhancement and opened PR #387 earlier, which is linked above in the thread and is currently under review.

The functionality you described is already covered there. Since the work is already in progress, please consider closing PR #388 to avoid duplication.

@hpdang @vedansh-5 — could you please take a look and close the duplicate PR if appropriate?

Thank you.

[vedansh-5]

Thanks @ugupta17k for your contribution. However #387 addresses this issue. Therefore closing this PR.