Conversation
Add a 14-day genre breakdown chart with stacked bars showing watching distribution across genres. Includes frosted glass design and "Other" bucket for long-tail genres. Responsive: hidden on mobile via RenderFor device guard.
Summary of ChangesHello, I'm Gemini Code Assist1! 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 enhances the user experience on the home page by introducing a new data visualization feature. Users can now gain insights into their recent content consumption patterns through a genre breakdown chart, which dynamically displays their watching habits over the past two weeks. This addition provides a personalized and engaging overview of their media preferences, making the home page more informative and interactive. Highlights
Using Gemini Code AssistThe 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
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 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. Footnotes
|
rudf0rd
changed the title
 |
|
Overall Grade |
Security Reliability Complexity Hygiene |
Code Review Summary
| Analyzer | Status | Updated (UTC) | Details |
|---|---|---|---|
| JavaScript |  |
Mar 21, 2026 7:35p.m. | Review ↗ |
| Test coverage |  |
Mar 21, 2026 7:35p.m. | Review ↗ |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
The pull request introduces a new genre breakdown chart to the home page, along with the necessary internationalization keys and data processing logic. The implementation is well-tested with comprehensive unit tests. I've identified a few opportunities to improve code clarity and maintainability by replacing magic numbers with named constants and removing redundant nullish coalescing operators.
| } from '$lib/requests/queries/users/showActivityHistoryQuery.ts'; | ||
| import { usePaginatedListQuery } from '../../lists/stores/usePaginatedListQuery.ts'; | ||
|
|
||
| const historyLimit = 1000; |
There was a problem hiding this comment.
The value 1000 is a magic number. It should be extracted into a named constant to improve readability and maintainability. This adheres to the repository's naming conventions for constants.
| const historyLimit = 1000; | |
| const HISTORY_LIMIT = 1000; |
| const genreColors = [ | ||
| '#a87cf0', // purple - slot 1 | ||
| '#6ea1f7', // blue - slot 2 | ||
| '#4ecdc4', // teal - slot 3 | ||
| '#7bc67e', // green - slot 4 | ||
| '#f0a04b', // orange - slot 5 | ||
| '#555555', // gray - "Other" |
There was a problem hiding this comment.
The genreColors array contains hardcoded hex values. While the array itself is a constant, the individual color values could be defined as named constants (e.g., COLOR_PURPLE_SLOT_1) or retrieved from a centralized theme/design system to improve maintainability and ensure consistency across the application. This aligns with the spirit of the repository's naming conventions for constants.
| '#555555', // gray - "Other" | ||
| ]; | ||
|
|
||
| const topGenreCount = 5; |
There was a problem hiding this comment.
The value 5 is a magic number representing the topGenreCount. It should be extracted into a named constant (e.g., TOP_GENRE_COUNT) to improve readability and maintainability, adhering to the repository's naming conventions for constants.
| const topGenreCount = 5; | |
| const TOP_GENRE_COUNT = 5; |
|
|
||
| const topGenreCount = 5; | ||
| export const DAY_COUNT = 14; | ||
| const genresPerEntry = 2; |
There was a problem hiding this comment.
The value 2 is a magic number representing genresPerEntry. It should be extracted into a named constant (e.g., MAX_GENRES_PER_ENTRY) to improve readability and maintainability, adhering to the repository's naming conventions for constants.
| const genresPerEntry = 2; | |
| const MAX_GENRES_PER_ENTRY = 2; |
| ), | ||
| ); | ||
|
|
||
| const rangeStart = days[0] ?? today; |
There was a problem hiding this comment.
The nullish coalescing operator ?? today is redundant here. The days array is initialized with DAY_COUNT elements, so days[0] will always be defined. This can be simplified to const rangeStart = days[0];
| const rangeStart = days[0] ?? today; | |
| const rangeStart = days[0]; |
|
|
||
| // Build day data | ||
| const dayData: GenreDayData[] = days.map((date) => { | ||
| const dayCounts = dayGenreCounts.get(getDayKey(date)) ?? new Map<string, number>(); |
There was a problem hiding this comment.
The nullish coalescing operator ?? new Map<string, number>() is redundant here. The dayGenreCounts map is initialized with an entry for every day in the days array, so dayGenreCounts.get(getDayKey(date)) will always return a Map. This can be simplified to const dayCounts = dayGenreCounts.get(getDayKey(date));
| const dayCounts = dayGenreCounts.get(getDayKey(date)) ?? new Map<string, number>(); | |
| const dayCounts = dayGenreCounts.get(getDayKey(date)); |
| : toTranslatedGenre(genre), | ||
| percentage: | ||
| totalWeight > 0 ? Math.round((count / totalWeight) * 100) : 0, | ||
| color: genreColors[Math.min(i, genreColors.length - 1)] ?? '#555555', |
There was a problem hiding this comment.
The fallback color '#555555' is a hardcoded hex value. It should be defined as a named constant (e.g., DEFAULT_GENRE_COLOR) to improve maintainability and ensure consistency across the application. This aligns with the repository's naming conventions for constants.
Marius-TV
force-pushed
the
main
branch
2 times, most recently
from
3276247 to
ab9c79e
Compare
vladjerca
force-pushed
the
main
branch
6 times, most recently
from
69ea09d to
9c529d3
Compare
Marius-TV
force-pushed
the
main
branch
11 times, most recently
from
0bdef1e to
bf977c9
Compare
1 participant
Scene Setting: A Clear Description
Adds a 14-day genre breakdown stacked bar chart to the authenticated home page. The chart visualizes watching habits by genre over the last two weeks, showing the top 5 genres plus an "Other" bucket. Each day is a stacked bar with genre-colored segments, accompanied by a legend with percentage breakdowns.
Not 100% excited by the design, so opening as a draft. My pref would be to merge and then iterate design after.
What's included:
Show, Don't Tell: Screenshots and Videos
Hidden on mobile.
Testing: The Dress Rehearsal
The core logic is covered by unit tests in useGenreBreakdown.spec.ts (8 test cases):