feat: redesign homepage experience#336
Open
ankitkr104 wants to merge 2 commits intoAOSSIE-Org:mainfrom
Open
Conversation
Contributor
WalkthroughNavbar and homepage switched to a glass-themed UI; the root layout uses NAV_LABELS for link text. The Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant Router
participant HomePage
participant ConnectionHook as useConnection()
participant Stylesheet as CSS
User->>Router: Navigate to "/"
Router->>HomePage: render HomePage component
HomePage->>ConnectionHook: call useConnection()
ConnectionHook-->>HomePage: return {status, latency, platform}
HomePage->>Stylesheet: apply glass/home classes
HomePage-->>User: render UI with status, latency, platform, nav links
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/routes/__root.tsx`:
- Around line 145-170: The nav labels "Home", "Trackpad", and "Settings" are
hardcoded in the Link components; move them to the app's i18n/resource layer and
replace the literal strings with localization lookups (e.g., use t('nav.home'),
t('nav.trackpad'), t('nav.settings') or your project's resource accessor).
Update the __root.tsx Link elements (the Link components with to="/" ,
to="/trackpad", to="/settings") to use those resource keys and ensure the new
keys are added to the default resource files so translations are available.
In `@src/styles.css`:
- Around line 154-203: The ambient blobs (.home-ambient::before,
.home-ambient::after) and entry classes (.home-enter-up, .home-enter-up-delay)
currently animate unconditionally; add a prefers-reduced-motion media override
that sets animation: none (and animation-delay: 0 if needed), removes heavy
effects (e.g., filter: none or reduce blur) and avoids transitions for these
selectors and for the keyframe names home-float and home-enter-up so
motion-sensitive users see a static page and unnecessary animation work is
skipped. Ensure the override targets .home-ambient::before,
.home-ambient::after, .home-grid (if needed), .home-enter-up and
.home-enter-up-delay and explicitly nulls animations and delays.
- Around line 10-22: The .home-shell CSS currently prevents vertical scrolling;
update the rules so the container can scroll vertically: replace overflow:
hidden with overflow-x: hidden; overflow-y: auto on the .home-shell selector,
and remove or change the scrollbar-hiding rules (remove scrollbar-width: none
and the .home-shell::-webkit-scrollbar { display: none }) so vertical scrollbars
can appear when needed; keep only horizontal overflow hidden if required.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 9bfd3edf-2e37-4d1d-a4e2-c3a4e4e7bd18
📒 Files selected for processing (3)
src/routes/__root.tsxsrc/routes/index.tsxsrc/styles.css
…rtical scroll, add prefers-reduced-motion accessibility
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
src/config.tsx (1)
14-18:⚠️ Potential issue | 🟠 MajorMove navbar labels to i18n resource keys instead of hardcoded English literals.
NAV_LABELScentralizes strings, but it still blocks localization because translations are not sourced from resource files.💡 Suggested direction
-export const NAV_LABELS = { - HOME: "Home", - TRACKPAD: "Trackpad", - SETTINGS: "Settings", -} +export const NAV_LABEL_KEYS = { + HOME: "nav.home", + TRACKPAD: "nav.trackpad", + SETTINGS: "nav.settings", +} as constThen resolve labels in UI via your translation accessor (e.g.,
t(NAV_LABEL_KEYS.HOME)), with corresponding entries in locale resources.As per coding guidelines, User-visible strings should be externalized to resource files (i18n).
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/config.tsx` around lines 14 - 18, NAV_LABELS currently contains hardcoded English text which blocks localization; replace it with a map of i18n resource keys (e.g., rename NAV_LABELS -> NAV_LABEL_KEYS with keys like HOME, TRACKPAD, SETTINGS) and update all UI consumers to call the translation function (e.g., t(NAV_LABEL_KEYS.HOME)) instead of using the literal; add corresponding entries for those keys into the locale resource files for each supported language.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/styles.css`:
- Around line 226-233: The reduced-motion media query currently only disables
keyframe animations for .home-ambient::before, .home-ambient::after,
.home-enter-up, and .home-enter-up-delay but leaves transitions/transforms on
hover/focus active; update the `@media` (prefers-reduced-motion: reduce) block to
also set transition: none and transform: none (with !important if necessary) for
those selectors and their interactive states (e.g., .home-ambient:hover,
.home-ambient:focus, .home-enter-up:hover, .home-enter-up-delay:hover and any
related :active/:focus-visible rules) so hover-based motion is suppressed
consistently.
---
Duplicate comments:
In `@src/config.tsx`:
- Around line 14-18: NAV_LABELS currently contains hardcoded English text which
blocks localization; replace it with a map of i18n resource keys (e.g., rename
NAV_LABELS -> NAV_LABEL_KEYS with keys like HOME, TRACKPAD, SETTINGS) and update
all UI consumers to call the translation function (e.g., t(NAV_LABEL_KEYS.HOME))
instead of using the literal; add corresponding entries for those keys into the
locale resource files for each supported language.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: ce380991-f26e-4f0d-a922-f4e70f9ed5e0
📒 Files selected for processing (3)
src/config.tsxsrc/routes/__root.tsxsrc/styles.css
Comment on lines
+226
to
+233
| @media (prefers-reduced-motion: reduce) { | ||
| .home-ambient::before, | ||
| .home-ambient::after, | ||
| .home-enter-up, | ||
| .home-enter-up-delay { | ||
| animation: none; | ||
| animation-delay: 0; | ||
| } |
Contributor
There was a problem hiding this comment.
Extend reduced-motion override to interactive hover transitions.
prefers-reduced-motion currently disables keyframe animations, but hover transforms/transitions still introduce motion.
💡 Suggested patch
`@media` (prefers-reduced-motion: reduce) {
.home-ambient::before,
.home-ambient::after,
.home-enter-up,
.home-enter-up-delay {
animation: none;
animation-delay: 0;
}
+
+ .glass-btn,
+ .glass-nav-link,
+ .glass-hover {
+ transition: none;
+ }
+
+ .glass-btn:hover,
+ .glass-nav-link:hover,
+ .glass-hover:hover {
+ transform: none;
+ }
}As per coding guidelines, **/*.css should adhere to best practices recommended by lighthouse or similar tools for performance.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/styles.css` around lines 226 - 233, The reduced-motion media query
currently only disables keyframe animations for .home-ambient::before,
.home-ambient::after, .home-enter-up, and .home-enter-up-delay but leaves
transitions/transforms on hover/focus active; update the `@media`
(prefers-reduced-motion: reduce) block to also set transition: none and
transform: none (with !important if necessary) for those selectors and their
interactive states (e.g., .home-ambient:hover, .home-ambient:focus,
.home-enter-up:hover, .home-enter-up-delay:hover and any related
:active/:focus-visible rules) so hover-based motion is suppressed consistently.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Addressed Issues:
Fixes #335
Description
The homepage was updated with a new layout and glass-style design to make the app look more polished, modern, and easier to use. The goal is to improve first impressions, create a cleaner visual hierarchy, and make the main entry point feel more professional for users.
Screenshots:
Checklist
My PR addresses a single issue, fixes a single bug or makes a single improvement.
My code follows the project's code style and conventions
I have performed a self-review of my own code
I have commented my code, particularly in hard-to-understand areas
If applicable, I have made corresponding changes or additions to the documentation
If applicable, I have made corresponding changes or additions to tests
My changes generate no new warnings or errors
I have joined the and I will share a link to this PR with the project maintainers there
I have read the
Once I submit my PR, CodeRabbit AI will automatically review it and I will address CodeRabbit's comments.
Incase of UI change I've added a demo video.
We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact.
Summary by CodeRabbit
New Features
Style