feat: update homepage layout and VIP theme colors#2331
Conversation
…enu naming convention.
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 focuses on refining the homepage user experience by removing the WeeklyPulse component and enhancing the visual feedback for empty states in the 'Where to Watch' sections. Additionally, it expands the application's social media utility links and performs minor localization updates to improve clarity. 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 introduces a new WhereToWatchEmptyItem component to provide a visual empty state for the 'Where to Watch' section, updates the 'Upcoming Schedule' translation to 'Calendar', adds several social media links to the UrlBuilder, and removes the WeeklyPulse feature from the home page. Review feedback highlights several opportunities for improvement, specifically regarding CSS encapsulation and the avoidance of global style pollution. Recommendations include scoping styles to prevent leakage, removing unnecessary SCSS declarations and dead CSS, and ensuring all user-facing strings are properly internationalized.
| :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.
The :global(.section-list-empty-state) selector is not scoped to this component, which will cause these styles to leak and affect all SectionList components throughout the application. To avoid global CSS pollution, please scope this selector by wrapping the SectionList in a unique container class or using a more specific selector.
References
- Avoid using :global() for CSS classes that are only used as selectors within the same Svelte component. Prefer scoped styles to maintain better style encapsulation.
| <span>No Services</span> | ||
| <span>Available</span> |
There was a problem hiding this comment.
The strings "No Services" and "Available" are hardcoded. To support internationalization, please use the project's i18n system by referencing a key from the m object (e.g., m.button_text_no_services() or a new specific key).
| :global(.trakt-link) { | ||
| text-decoration: none; | ||
| color: var(--color-text-secondary); | ||
|
|
||
| &:hover { | ||
| color: var(--color-text-secondary); | ||
| } | ||
| } |
There was a problem hiding this comment.
The CSS block targeting :global(.trakt-link) appears to be dead code as there are no elements with that class in this component's markup. Please remove it to maintain code cleanliness.
| </div> | ||
| {/if} | ||
|
|
||
| <style lang="scss"> |
There was a problem hiding this comment.
The lang="scss" attribute is unnecessary here because no SCSS-specific features (like variables, mixins, or functions) are being used. Plain CSS nesting is supported by the Svelte compiler and modern browsers.
<style>
References
- Only add lang="scss" to <style> tags in Svelte components when SCSS-specific features are used. Plain CSS nesting does not require it. (link)
| :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 global styles are identical to those added in WhereToWatchList.svelte. Beyond the duplication, they also suffer from global scope leakage. Consider moving shared layout overrides for the empty state into a common location or scoping them properly within each component to prevent unintended side effects on other lists.
|
Will be tackled differently (e.g. when we add the screen time version). |
2 participants
Updates homepage layout by removing WeeklyPulse component and adjusts VIP theme colors.