[PM-14019] Toggle Vault Filters

[nick-livefront]

🎟️ Tracking

PM-14019

📔 Objective

Add the ability to toggle the visibility of the vault filters

• State of the visibility is persisted between navigation and open/closing of the extension
• Only shows the badge when the vault filters are hidden and there are filters applied

Notes

• The colors notification-100 & notification-600 are only available in the ps/extension-refresh branch.
  • Adding them here would create conflicts and could open up developers using them outside of the extension refresh.
  • I'll raise a PR to update them once this is makes it into the ps/extension-refresh branch and will then move this to testing.
• @vleague2 I added an event emitter to the DisclosureComponent so I could track the state from the consuming component.
  • There were a couple more approaches I considered like making the open attribute an observable. We can discuss if an other approach would be better.

📸 Screenshots

Filter Badge	Persisting state	Screen reader
filter-badges.mov	filter-persist-state.mov	filter-screen-reader.mov

🦮 Reviewer guidelines

• 👍 (:+1:) or similar for great changes
• 📝 (:memo:) or ℹ️ (:information_source:) for notes or general info
• ❓ (:question:) for questions
• 🤔 (:thinking:) or 💭 (:thought_balloon:) for more open inquiry that's not quite a confirmed issue and could potentially benefit from discussion
• 🎨 (:art:) for suggestions / improvements
• ❌ (:x:) or ⚠️ (:warning:) for more significant problems or concerns needing attention
• 🌱 (:seedling:) or ♻️ (:recycle:) for future improvements or indications of technical debt
• ⛏ (:pick:) for minor or nitpick changes

[codecov]

Codecov Report

Attention: Patch coverage is 80.95238% with 8 lines in your changes missing coverage. Please review.

Project coverage is 33.52%. Comparing base (c17f582) to head (440e37f).
Report is 1 commits behind head on main.

✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
.../components/src/disclosure/disclosure.component.ts	0.00%	5 Missing ⚠️
...vault-v2/vault-header/vault-header-v2.component.ts	96.29%	0 Missing and 1 partial ⚠️
...vault/popup/components/vault/vault-v2.component.ts	0.00%	1 Missing ⚠️
...popup/services/vault-popup-list-filters.service.ts	88.88%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #11929      +/-   ##
==========================================
+ Coverage   33.46%   33.52%   +0.06%     
==========================================
  Files        2858     2859       +1     
  Lines       89396    89434      +38     
  Branches    17018    17022       +4     
==========================================
+ Hits        29919    29986      +67     
+ Misses      57120    57087      -33     
- Partials     2357     2361       +4     

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

---

🚨 Try these New Features:

• JS Bundle Analysis - Avoid shipping oversized bundles

[github-actions]

Checkmarx One – Scan Summary & Details – 61250733-efa1-4c02-948b-89068c6c4c52

No New Or Fixed Issues Found

[willmartian]

Could we use a two-way binding instead of a separate output?

[nick-livefront]

Nice! 69713d0

I also refactored a little bit to make sure there wasn't duplicate class/state updates in this same commit.

[shane-melton]

Looking great! Just a few suggestions and a possible missing border issue.

[shane-melton]

Looking good! I just had two other suggestions after taking another look. Let me know what you think!

[shane-melton]

🎨 I think it would be preferable to avoid exposing the "raw" state on the service and instead have the service provide an public observable stream and public method to toggle it the state's value. What do you think?

[nick-livefront]

I debated the same, thanks for pushing me in the right direction! 3a9eb5f

[danielleflinn]

✅ Verified visuals for expanded/collapsed icon button look as expected
✅ Verified a badge is added when user applies a filter and collapses the section
✅ Verified screen reader behavior works in Chrome with VO

[shane-melton]

Looks great, nice work! I do see that we have some failing tests now though

[nick-livefront]

@willmartian @Jingo88 @cd-bitwarden @gbubemismith Shane is out, I apologize for the ping. The only update since his approval is using the Tailwind colors now that ps/extension-refresh is in main.

64782db