add collapse/expand

[viseshrp]

No description provided.

[gemini-code-assist]

Summary of Changes

Hello @viseshrp, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces a significant user experience improvement by adding global collapse and expand functionality for group cards. Users can now manage the visibility of all groups with a single click, and the application provides a more streamlined initial view by collapsing older groups by default. This change enhances navigation and reduces visual clutter, especially for users with many saved tab groups.

Highlights

• New 'Collapse/Expand All' Functionality: Introduced a new feature that allows users to collapse or expand all group cards simultaneously via a dedicated button in the navbar.
• Default Initial Load Behavior: On initial page load, all group cards will now start collapsed, except for the most recent group, to provide a cleaner and less overwhelming view.
• Lazy Loading Integration: Expanding a group that has not yet had its tabs fetched will now trigger a lazy load of its content, improving performance.
• UI and Accessibility Enhancements: The new collapse/expand all button includes a double-chevron icon that rotates to indicate its current state, along with appropriate ARIA labels for accessibility.

Changelog

• docs/architecture.md
  • Updated the UI behavior reference to include the new 'Collapse/expand all' functionality and its default state.
• entrypoints/nufftabs/index.html
  • Added a new button with a double-chevron icon to the navbar for toggling the collapse/expand state of all groups.
• entrypoints/nufftabs/index.ts
  • Added state variables allGroupsCollapsed and initialCollapseApplied to manage the global collapse state.
  • Implemented setGroupCollapsed to control the collapsed state of individual group cards, including CSS class toggling, ARIA label updates, and lazy loading.
  • Created collapseAllGroups, expandAllGroups, and toggleAllGroups functions to manage the collapse/expand state of all groups.
  • Added syncAllGroupsCollapsedState to keep the global collapse state in sync when individual groups are toggled.
  • Developed updateToggleCollapseAllButton to update the UI and accessibility attributes of the global toggle button.
  • Introduced applyDefaultCollapse to implement the initial load behavior, collapsing all but the most recent group.
  • Integrated the new collapse/expand logic into renderGroups, handleGroupAction, and init functions.
• entrypoints/nufftabs/style.css
  • Added CSS rules to visually rotate the double-chevron icon of the 'collapse/expand all' button when all groups are collapsed.
• tests/integration/list_page.test.ts
  • Added a new integration test to verify that all groups except the most recent are collapsed on initial load.
  • Added another integration test to confirm that the 'toggleCollapseAll' button correctly expands and collapses all groups.

Activity

• No specific activity recorded for this pull request.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a collapse/expand all feature for tab groups, which is a great usability improvement. The implementation is thorough, including documentation updates, UI changes, core logic, and integration tests. The code is well-structured and considers accessibility. I've suggested one refactoring to reduce code duplication in the new collapse/expand functions, which will improve long-term maintainability.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 94.9%. Comparing base (898b119) to head (f1b49de).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@          Coverage Diff          @@
##            main     #22   +/-   ##
=====================================
  Coverage   94.9%   94.9%           
=====================================
  Files         11      11           
  Lines       1021    1022    +1     
  Branches     273     273           
=====================================
+ Hits         969     970    +1     
  Misses        42      42           
  Partials      10      10           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.