feat(settings): refine genres preference drawer UX

[ElMagnea]

##Screenshots

Summary

• Split subtitle copy per drawer: loved genres get "Select up to 5 genres which you'd like to see more of." and hated genres get "Select up to 5 genres you'd like to avoid entirely."
• 4-per-row grid in the drawer catalog (was overflowing at wider counts); selection row wraps across rows instead of cutting off
• "Selected" / "All Genres" section labels — 14 px, foreground color, matching filter panel style
• Extra top padding before the All Genres section for visual breathing room
• Tighter gap between the drawer title and the subtitle (gap-micro) to match the settings block header rhythm
• Save error message shown inline next to the Apply button on failure; Apply is disabled while saving or when there are no pending changes
• Genre changes now correctly persist through PUT /settings on save

Closes #2757

Test plan

• Open Settings → Genres You Like drawer; confirm subtitle reads "Select up to 5 genres which you'd like to see more of."
• Open Settings → Genres You Dislike drawer; confirm subtitle reads "Select up to 5 genres you'd like to avoid entirely."
• Verify catalog renders 4 columns; verify selections row wraps when > 4 selected
• Select genres, tap Apply — changes persist and drawer closes
• Reopen drawer — previously saved genres are shown as selected
• Tap Apply with no changes — button should be disabled

🤖 Generated with Claude Code

[gemini-code-assist]

Summary of Changes

Hello, 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 refines the user experience for managing genre preferences in the settings drawer. It introduces a clearer distinction between loved and hated genres, improves the layout of the genre catalog, and ensures robust state management and persistence for these settings. The changes include updated UI components, improved error handling, and corrected data mapping to ensure genre preferences are correctly saved and retrieved.

Highlights

• Genre Preferences Refinement: Split genre preferences into 'loved' and 'hated' categories with distinct subtitles and improved drawer UX.
• UI/UX Improvements: Updated the genre catalog to a 4-per-row grid with wrapping, added visual breathing room, and improved consistency with filter panel styles.
• State Management & Persistence: Genre changes now correctly persist through PUT /settings and include inline error handling for save failures.

Ignored Files

• Ignored by pattern: projects/client/src/mocks/data/**/*.ts (1)
  • projects/client/src/mocks/data/users/mapped/ExtendedUserSettingsMappedMock.ts

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 the 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 counterproductive. 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.

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

[deepsource-io]

DeepSource Code Review

We reviewed changes in 8af9583...886c962 on this pull request. Below is the summary for the review, and you can see the individual issues we found as inline review comments.

See full review on DeepSource ↗

PR Report Card

Overall Grade

Security   Reliability   Complexity   Hygiene   Coverage

Code Review Summary

Analyzer	Status	Updated (UTC)	Details
JavaScript		Aug 24, 2026 2:19p.m.	Review ↗
Code coverage		Aug 24, 2026 2:19p.m.	Review ↗

Code Coverage Summary

Language	Line Coverage (Overall)
Aggregate	69.3%
Javascript	69.3%

➟ Additional coverage metrics may have been reported. See full coverage report ↗

---

Important

AI Review is run only on demand for your team. We're only showing results of static analysis review right now. To trigger AI Review, comment @deepsourcebot review on this thread.

[gemini-code-assist]

Code Review

This pull request refactors the user settings for genres, transitioning from a single array of favorite genres to separate categories for 'loved' and 'hated' genres. This involves updates to schemas, queries, stores, filters, and tests, alongside a redesigned settings UI featuring a new GenresDrawer component. The review feedback identifies several critical runtime safety issues, such as potential TypeErrors from unsafe observable property access, potential RangeErrors from negative array lengths when calculating empty slots, and a Svelte 5 compatibility issue when passing non-iterable objects to {#each} loops. Additionally, a style guide violation was noted regarding a missing .ts extension on a relative import.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[seferturan]

Some fixups:

• Removed the disliked ones for now; easy to add back when we actually start using them.
• Added a feature flag for this:
  • Settings row on mobile size is not exactly the best.
  • We really need better icons for the genres 😅