Dashboard#65
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughThe dashboard page is now rendered as an embedded section on the homepage. The dashboard layout is restructured with a new welcome banner, reworked Continue Learning and Quick Actions sections, and restyled QuickActionCard/RecentActivityCard components. Navbar Dashboard link and active-section/scroll logic are also updated. ChangesDashboard Embedding and Restyling
Navbar Hash Navigation and Active-State Updates
Estimated code review effort: 3 (Moderate) | ~25 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 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 |
🎉 Congratulations @nitinmohan18!Thank you for contributing to HyperLearningTech. Your pull request has been successfully merged into main. 📦 Merge Summary
🚀 Keep Contributing
Thank you for helping make HyperLearningTech better. Happy Coding! 🚀 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
components/navbar.tsx (1)
290-295: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winFragile active-state matching via label string; verify dual-route setup is intentional.
The added clause
pathname === "/dashboard" && link.label === "Dashboard"matches on the link's display label rather than a stable identifier (e.g. its href/target). If the label text ever changes, this condition silently stops working with no compile-time signal.Separately,
app/dashboard/page.tsxstill exports a standalone page component reachable at/dashboard, in addition to the newly embedded/#Dashboardsection on the homepage. Confirm this dual-route setup (same content served at both/dashboardand/#Dashboard) is intentional (e.g., for deep-linking/bookmarks) rather than a leftover route that should be redirected or removed.♻️ Suggested refactor: match on a stable target instead of label text
+const DASHBOARD_ROUTE = "/dashboard"; +const DASHBOARD_HASH = "/#Dashboard"; + const isActive = (pathname === "/" && link.href.startsWith("/#") && activeSection === link.href) || (pathname === link.href && !link.href.startsWith("/#")) || - (pathname === "/dashboard" && link.label === "Dashboard"); + (pathname === DASHBOARD_ROUTE && link.href === DASHBOARD_HASH);🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@components/navbar.tsx` around lines 290 - 295, The active-state check in navbar.tsx is fragile because it keys off link.label === "Dashboard" instead of a stable target. Update the matching logic in the Navbar link handling to use a durable identifier such as link.href or an explicit route key, so the Dashboard state does not break if the display text changes. Also verify the dual-route setup between the Navbar’s /dashboard handling and the homepage `#Dashboard` section is intentional; if not, remove or redirect the standalone dashboard page rather than relying on both paths.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@components/dashboard/quick-action-card.tsx`:
- Around line 61-64: The focus-visible state on QuickActionCard is missing a
ring width, so the ring color from style.wrapper won’t render visibly. Update
the className in quick-action-card so the card includes a ring width utility
(for example matching the pattern used by RecentActivityCard) while keeping the
existing focus-visible ring color from style.wrapper.
---
Nitpick comments:
In `@components/navbar.tsx`:
- Around line 290-295: The active-state check in navbar.tsx is fragile because
it keys off link.label === "Dashboard" instead of a stable target. Update the
matching logic in the Navbar link handling to use a durable identifier such as
link.href or an explicit route key, so the Dashboard state does not break if the
display text changes. Also verify the dual-route setup between the Navbar’s
/dashboard handling and the homepage `#Dashboard` section is intentional; if not,
remove or redirect the standalone dashboard page rather than relying on both
paths.
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: 3c385449-c8f0-433b-9e24-d2d6fd54bbd2
📒 Files selected for processing (5)
app/(public)/page.tsxapp/dashboard/page.tsxcomponents/dashboard/quick-action-card.tsxcomponents/dashboard/recent-activity-card.tsxcomponents/navbar.tsx
| className={`group relative flex flex-col gap-3 overflow-hidden rounded-[20px] border border-black/10 dark:border-white/[0.08] bg-black/[0.02] dark:bg-white/[0.03] p-5 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)] transition-transform hover:-translate-y-1 hover:shadow-xl hover:bg-black/[0.04] dark:hover:bg-white/[0.05] hover:border-blue-500/30 ${style.wrapper}`} | ||
| > | ||
| <div | ||
| className={`flex h-12 w-12 items-center justify-center rounded-xl transition-colors ${style.iconBox}`} | ||
| > | ||
| <Icon className="h-6 w-6" /> | ||
| <div className="absolute inset-0 bg-gradient-to-br from-black/5 dark:from-white/5 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" /> | ||
|
|
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect the target component and related shared styles
git ls-files | rg 'components/dashboard/quick-action-card\.tsx|RecentActivityCard|style\.|tailwind|class-variance|variants'
printf '\n--- quick-action-card.tsx ---\n'
cat -n components/dashboard/quick-action-card.tsx | sed -n '1,220p'
printf '\n--- search for wrapper style definitions and focus-visible ring usage ---\n'
rg -n "focus-visible:ring|ring-2|ring-\[|style\.wrapper|RecentActivityCard|quick-action-card" components -SRepository: imuniqueshiv/HyperLearningTech
Length of output: 11290
Add a focus-visible ring width. style.wrapper only adds focus-visible:ring-*, so this card has no visible focus ring without ring/ring-2 (as in RecentActivityCard).
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@components/dashboard/quick-action-card.tsx` around lines 61 - 64, The
focus-visible state on QuickActionCard is missing a ring width, so the ring
color from style.wrapper won’t render visibly. Update the className in
quick-action-card so the card includes a ring width utility (for example
matching the pattern used by RecentActivityCard) while keeping the existing
focus-visible ring color from style.wrapper.
1 participant
Pull Request
Summary
This PR introduces major layout and logic improvements to the Dashboard, enhances the Navbar's scroll-spy reliability, and refines the mobile responsiveness of the Contact section. It also addresses various dark/light mode visual bugs to ensure a premium user experience across all devices.
Related Issue
Closes #
Type of Change
What Changed?
QuickActionCardandRecentActivityCard. Replaced the washed-out glassmorphism with high-contrast, premium translucent colors (bg-white/[0.03]for dark mode,bg-black/[0.02]for light mode) and subtle inner 3D shadows.transition-allandtransition-colorsfrom text elements inside dashboard cards to prevent text from slowly "fading" and blinking when toggling between dark and light modes.navbar.tsxscroll intersection logic. It now uses a highly accurate "eye-level" offset (40%down the screen) rather than relying on top-edge boundaries, preventing the wrong link (like Contact) from highlighting on large screens. Added explicit highlighting for direct navigation to/dashboard.Screenshots (UI Changes Only)
Testing
/dashboardto ensure the Dashboard link is actively highlighted.Checklist
main.npx prettier --write <file>).npm run format:checkpasses.npm run lintpasses.npm run typecheckpasses.npm run buildpasses.Additional Notes
The next phase will involve completely replicating the premium dark-mode dashboard reference image (including glowing progress bars and centered banner).