feat: add multiselect filters for media gallery by rodrigogs · Pull Request #49 · rodrigogs/whats-reader

rodrigogs · 2026-01-05T01:28:31Z

Changes

✨ Add search functionality to participant filter with search bar (like perspective view)
✨ Convert participant and type filters to multiselect with checkboxes
✨ Show selected filter count in options dropdown
🎨 Keep filter modals open for multiple selections
🌐 Add translations for search placeholder and no match messages (all 10 languages)
🔧 Update filtering logic to support multiple participants and types simultaneously

User Experience

Click participants/types to toggle selection (checkmarks show selected items)
Modal stays open for multiple selections
Close modal (X button or Escape) to apply filters
Empty selection = show all
Clear filters button removes all selections at once

Technical Details

Changed filterParticipant → filterParticipants (array)
Changed filterType → filterTypes (arraogic now checks if items match ANY selected participant or type
Replaced setParticipantFilter/setTypeFilter with toggleParticipantFilter/toggleTypeFilter

- Add search functionality to participant filter with search bar - Convert participant and type filters to multiselect with checkboxes - Show selected filter count in options dropdown - Keep filter modals open for multiple selections - Add translations for search placeholder and no match messages - Update filtering logic to support multiple participants and types simultaneously

Copilot

Pull request overview

This PR adds multiselect filtering functionality to the media gallery, allowing users to filter media by multiple participants and types simultaneously. The implementation follows the project's Svelte 5 runes pattern and includes comprehensive translations for all 10 supported languages.

Key Changes:

Convert single-select filters to multiselect with toggle-based selection
Add participant search functionality with auto-focus
Implement modal-based filter UI that stays open for multiple selections
Add visual indicators for active filters (count badges and filter status display)

Reviewed changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
`src/lib/gallery.svelte.ts`	Add multiselect filter state (`filterParticipants`, `filterTypes` arrays), implement filtering logic, add derived state for media participants and active filter status
`src/lib/components/MediaGallery.svelte`	Replace calendar button with options dropdown, add participant/type filter modals with search, implement toggle handlers and checkmark UI
`messages/en.json`	Add 14 new translation keys for filter UI (source language)
`messages/zh.json`	Add Chinese translations for new filter strings
`messages/ru.json`	Add Russian translations for new filter strings
`messages/pt.json`	Add Portuguese translations for new filter strings
`messages/nl.json`	Add Dutch translations for new filter strings
`messages/ja.json`	Add Japanese translations for new filter strings
`messages/it.json`	Add Italian translations for new filter strings
`messages/fr.json`	Add French translations for new filter strings
`messages/es.json`	Add Spanish translations for new filter strings
`messages/de.json`	Add German translations for new filter strings

Address Copilot review comment: Change '声音的' to '音频' for better grammar

Address Copilot review comments: Fix placeholder formatting in 8 languages (pt, ja, de, ru, nl, it, fr, es) - remove spaces around {query}

rodrigogs · 2026-01-05T01:39:58Z

✅ All Copilot review comments addressed:

Commit 96987de: Fixed Chinese audio translation ('声音的' → '音频')
Commit fb1b1d8: Fixed placeholder formatting in 8 languages - removed extra spaces around {query}

All 10 translation issues have been resolved.

Copilot

Pull request overview

Copilot reviewed 12 out of 12 changed files in this pull request and generated 1 comment.

Fix invalid JSON syntax - move closing quote after {query} placeholder

rodrigogs · 2026-01-05T01:45:37Z

✅ Fixed Chinese JSON syntax error in bf63ff8 - moved closing quote after {query} placeholder

Copilot

Pull request overview

Copilot reviewed 12 out of 12 changed files in this pull request and generated 3 comments.

- Use derived Sets for O(1) filter lookups instead of O(n) array includes - Remove unused getTypeLabel function - Address Copilot performance review comments

Copilot

Pull request overview

Copilot reviewed 12 out of 12 changed files in this pull request and generated 2 comments.

- Remove unused 'all' from MediaTypeFilter type (never used in UI) - Remove unused translation keys: media_gallery_all_participants, media_gallery_all_types, media_gallery_filter_active - Address Copilot code cleanup review comments

- Remove unused keys: media_gallery_all_participants, media_gallery_all_types, media_gallery_filter_active - Fix spacing in media_gallery_participant_no_match across all non-English languages - Address all remaining Copilot review comments

rodrigogs · 2026-01-05T02:20:28Z

✅ All Copilot review comments addressed:

Removed unused translation keys (media_gallery_all_participants, media_gallery_all_types, media_gallery_filter_active) from all 10 language files
Fixed spacing issues in media_gallery_participant_no_match across all non-English languages (removed extra spaces around {query} placeholder)
All checks passing, ready for review

Copilot

Pull request overview

Copilot reviewed 12 out of 12 changed files in this pull request and generated 5 comments.

- Change Options button icon color to teal when filters are active - Remove unused translation keys (media_gallery_all_participants, media_gallery_all_types, media_gallery_filter_active) - Fix spacing issues in media_gallery_participant_no_match across all languages - Options button now visually matches download button style when filters applied

- Replace setTimeout with tick() for auto-focus (better Svelte pattern) - Add ARIA attributes to filter modals (role="dialog", aria-modal="true", aria-labelledby) - Improve screen reader accessibility for participant and type filter modals - Address Copilot accessibility review comments

rodrigogs · 2026-01-05T02:35:09Z

✅ Addressed all Copilot review comments:

Accessibility Improvements (d099f5d):

Replaced setTimeout with tick() for auto-focus (better Svelte pattern)
Added ARIA attributes to filter modals: role="dialog", aria-modal="true", aria-labelledby
Added unique IDs to modal headers for screen reader accessibility

Visual Indicator (bb0dbf3):

Options button icon turns teal when filters are active
Matches download button color style for consistent visual language

Translation & Performance (e94114b, 9e43a00):

Removed unused translation keys across all 10 languages
Fixed spacing issues in placeholders
Optimized filter checks with Set-based O(1) lookups
Removed unused getTypeLabel function
Removed unused 'all' from MediaTypeFilter type

All checks passing ✓

- Use Set-based operations (has/add/delete) instead of array includes/filter - Improves toggle operations from O(n) to O(1) - Maintains consistency with component-level Set optimizations - Address final Copilot performance review comments

rodrigogs · 2026-01-05T02:37:27Z

✅ Final optimization: Set-based toggle operations (486ede4)

All Copilot review comments now fully addressed:

✅ Accessibility (ARIA attributes, tick() pattern)
✅ Performance (Set-based O(1) operations throughout)
✅ Code quality (removed unused code)
✅ i18n (fixed spacing across all languages)
✅ UX (visual filter indicator)

Ready for review!

- Store filterParticipants and filterTypes as Sets internally - Expose as arrays via derived getters for external consumption - Direct Set operations (add/delete/has) are now O(1) throughout - Eliminates temporary Set creation on every toggle - More efficient: modify Set directly instead of array→Set→array conversion This fully addresses Copilot's performance suggestions.

Copilot

Pull request overview

Copilot reviewed 12 out of 12 changed files in this pull request and generated 3 comments.

- Change 'l'audio' to 'Audio' to match capitalization of other types - Change 'Filtre clair' to 'Effacer le filtre' (proper verb form) - Reset participant search query when modal closes for clean state - Address Copilot French translation and UX review comments

- Replace WhatsApp icon with app favicon on empty state - Update package-lock.json peer dependencies

Copilot

Pull request overview

Copilot reviewed 13 out of 14 changed files in this pull request and generated 1 comment.

Copilot · 2026-01-05T02:50:01Z

+  "media_gallery_type_images": "Bilder",
+  "media_gallery_type_videos": "Videos",
+  "media_gallery_type_audio": "Audio",
+  "media_gallery_type_documents": "Unterlagen",


The German translation "Unterlagen" for "Documents" is not optimal. "Unterlagen" typically refers to bureaucratic records or papers. The standard German term for documents/files in software contexts is "Dokumente", which would be more appropriate here.

Suggested change

"media_gallery_type_documents": "Unterlagen",

"media_gallery_type_documents": "Dokumente",

- Change 'Unterlagen' to 'Dokumente' (standard term in software contexts) - 'Unterlagen' refers to bureaucratic papers, 'Dokumente' is correct for files/documents - Address Copilot German translation review comment

# [1.25.0](v1.24.0...v1.25.0) (2026-01-05) ### Bug Fixes * update package-lock.json to resolve picomatch dependency conflict ([98af4c9](98af4c9)) ### Features * add multiselect filters for media gallery ([#49](#49)) ([3cd58e3](3cd58e3))

github-actions · 2026-01-05T03:00:31Z

🎉 This PR is included in version 1.25.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

rodrigogs requested a review from Copilot January 5, 2026 01:28

Copilot started reviewing on behalf of rodrigogs January 5, 2026 01:29 View session