feat: update weekly pulse stats graphs and streak UI#2329
Conversation
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 introduces significant visual and functional enhancements to the weekly statistics and streak tracking components. By modernizing the UI elements and improving the data representation for streaks and pulse graphs, the changes provide a more intuitive and polished experience for users tracking their viewing habits. Highlights
Ignored Files
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 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 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
|
 |
|
Overall Grade |
Security Reliability Complexity Hygiene Coverage  |
Code Review Summary
| Analyzer | Status | Updated (UTC) | Details |
|---|---|---|---|
| JavaScript |  |
May 14, 2026 9:39a.m. | Review ↗ |
| Code coverage | |
May 14, 2026 9:39a.m. | Review ↗ |
Code Coverage Summary
| Language | Line Coverage (Overall) |
|---|---|
| Aggregate | 71.5% |
| Javascript | 71.5% |
➟ 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[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request implements UI enhancements and refactors across several components, notably introducing a new WhereToWatchEmptyItem component for empty states and refactoring the StreakAccumulator to use Svelte snippets for grouped time intervals. Significant styling updates were applied to the "Pulse" statistics components, including a darker theme and improved visualization for daily bars. Feedback highlights the need to internationalize hardcoded strings in the new empty state component, remove a redundant lang="scss" attribute where standard CSS suffices, and refactor duplicated styles between the "Where to Watch" list and drawer components.
| <script lang="ts"></script> | ||
|
|
||
| <div class="where-to-watch-item"> | ||
| <div class="where-to-watch-item-content" data-variant="service"> | ||
| <span class="sad-face" aria-hidden="true">😢</span> | ||
| <p class="empty-text"> | ||
| <span>No Services</span> | ||
| <span>Available</span> | ||
| </p> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
Hardcoded user-facing strings should be internationalized. Use the existing messages from $lib/features/i18n/messages.ts to ensure consistency and support for multiple languages.
| </div> | ||
| {/if} | ||
|
|
||
| <style lang="scss"> |
There was a problem hiding this comment.
The lang="scss" attribute is redundant here as no SCSS-specific features are being used. Modern CSS supports nesting natively, and Svelte handles :global() in plain CSS blocks.
| .where-to-watch-empty { | ||
| display: flex; | ||
| justify-content: flex-start; | ||
| align-items: flex-start; | ||
| align-self: flex-start; | ||
| width: fit-content; | ||
| margin-inline: 0; | ||
| padding-inline: 0; | ||
| padding-block: var(--ni-12); | ||
| min-height: var(--height-where-to-watch-list); | ||
| } | ||
|
|
||
| :global(.section-list-empty-state) { | ||
| width: auto; | ||
| margin: 0; | ||
| padding-inline: 0; | ||
| align-items: flex-start; | ||
| justify-content: flex-start; | ||
| } | ||
|
|
||
| :global(.section-list-empty-state:not(:has(:global(.trakt-skeleton-list)))) { | ||
| width: auto; | ||
| } |
There was a problem hiding this comment.
These styles are identical to the ones added in WhereToWatchList.svelte. Consider refactoring this shared logic into a common utility class or shared stylesheet to avoid duplication and improve maintainability.
|
Will be tackled differently (e.g. when we add the screen time version). |
2 participants
Improves weekly pulse statistics with enhanced graphs and streak accumulator UI.