v2-dashboard: created a new ui for the dashboard #116 #125
Conversation
|
@huamanraj is attempting to deploy a commit to the AJEET PRATAP SINGH's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
|
|
Can you comment out why have you make those changes in the .yaml file ? |
|
@Shivam107 could you please elaborate more ? if it is about pnpm-lock.yaml? then that chnages auto after doing pnpm i or adding new dependency ! |
WalkthroughAdded Geist font, introduced sidebar collapse state and responsive header toggle, restructured dashboard/layout into a flexible single-column container, redesigned sidebar, projects list, and filters panel, and applied several UI and safety tweaks across components and store. Changes
Sequence DiagramsequenceDiagram
participant User
participant Layout as Dashboard Layout
participant Store as useShowSidebar
participant Sidebar
participant Projects as ProjectsContainer
participant Filters as FiltersContainer
User->>Layout: navigate /dashboard
Layout->>Store: read showSidebar, isCollapsed
Layout->>Sidebar: render with current state
alt user taps hamburger (xl or smaller)
User->>Layout: click hamburger
Layout->>Store: setShowSidebar(true)
end
alt sidebar visible & collapse toggle used
User->>Sidebar: click collapse toggle
Sidebar->>Store: toggleCollapsed()
Store->>Sidebar: update isCollapsed
end
User->>Layout: navigate /dashboard/projects
Layout->>Projects: render (path-aware)
Projects->>User: show table or "Find projects" button
alt user opens filters
User->>Projects: click "Find projects"
Projects->>Filters: open (backdrop + panel)
Filters->>User: render panel, search action
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
🧰 Additional context used🧬 Code graph analysis (1)apps/web/src/components/dashboard/Sidebar.tsx (6)
🔇 Additional comments (5)
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 |
|
@huamanraj looks awesome aman! just checking it... |
|
@huamanraj hey aman! sorry for the delayed reviews. nice work tbh. here are some of my thoughts
Screen.Recording.2025-10-24.at.9.14.58.PM.movthis part shouldn't go up and stay still on scroll thanks 🙏 |
|
@apsinghdev ok i will make these changes 😊 |
|
@huamanraj hey aman, any updates on this? |
|
@ajeetunc was busy in some work but half done! i will push by today |
|
@ajeetunc was not able to make the table header sticky tried a lot! but fixed other things 
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (4)
apps/web/src/components/dashboard/ProjectsContainer.tsx (2)
116-116: Consider error handling for window.open.Opening external URLs can be blocked by popup blockers or fail due to security restrictions.
Apply this diff to add basic error handling:
- onClick={() => window.open(p.url, "_blank")} + onClick={() => { + const newWindow = window.open(p.url, "_blank"); + if (!newWindow) { + console.warn("Failed to open project URL:", p.url); + } + }}
79-91: Consider responsive alternatives to fixed viewport height.The
h-[80vh]creates a fixed-height container that may not adapt well to varying screen sizes and browser chrome (address bars, etc.).Consider using
h-[calc(100vh-theme(spacing.32))]or a similar calculation that accounts for the header and padding dynamically.apps/web/src/app/(main)/dashboard/home/page.tsx (1)
2-2: Potentially unnecessary import.With the modern JSX transform in React 18+ and Next.js 15, explicitly importing React is typically not required. However, this is harmless and may be needed for specific tooling configurations.
If this import was added due to a linting error, consider updating your ESLint configuration. Otherwise, this can safely remain.
apps/web/src/components/dashboard/Sidebar.tsx (1)
72-74: Remove unusedhandleLogoutfunction.The
handleLogoutfunction is defined here but never called. Line 210 callssignOutdirectly inline within the ProfileMenu. This standalone definition is redundant.Apply this diff to remove the unused function:
- const handleLogout = () => { - signOut({ callbackUrl: "/" }); - }; -
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (13)
apps/web/package.json(1 hunks)apps/web/src/app/(main)/dashboard/home/page.tsx(1 hunks)apps/web/src/app/(main)/dashboard/layout.tsx(1 hunks)apps/web/src/app/(main)/dashboard/projects/page.tsx(1 hunks)apps/web/src/app/layout.tsx(2 hunks)apps/web/src/components/dashboard/DashboardContainer.tsx(1 hunks)apps/web/src/components/dashboard/ProjectsContainer.tsx(3 hunks)apps/web/src/components/dashboard/Sidebar.tsx(3 hunks)apps/web/src/components/sidebar/SidebarItem.tsx(1 hunks)apps/web/src/components/ui/Filter.tsx(1 hunks)apps/web/src/components/ui/FiltersContainer.tsx(2 hunks)apps/web/src/store/useShowSidebar.ts(1 hunks)apps/web/src/utils/converter.ts(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (7)
apps/web/src/app/(main)/dashboard/home/page.tsx (1)
apps/web/src/app/(main)/dashboard/page.tsx (1)
Dashboard(3-9)
apps/web/src/app/(main)/dashboard/projects/page.tsx (4)
apps/web/src/store/useRenderProjectsStore.ts (1)
useRenderProjects(9-14)apps/web/src/store/useProjectTitleStore.ts (1)
useProjectTitleStore(8-11)apps/web/src/store/useProjectsDataStore.ts (2)
useProjectsData(10-14)ProjectsDataProps(4-8)apps/web/src/app/(main)/dashboard/page.tsx (1)
Dashboard(3-9)
apps/web/src/components/dashboard/DashboardContainer.tsx (7)
apps/web/src/store/useRenderProjectsStore.ts (1)
useRenderProjects(9-14)apps/web/src/store/useProjectsDataStore.ts (1)
useProjectsData(10-14)apps/web/src/store/useLoadingStore.ts (1)
useLoading(8-11)apps/web/src/store/useProjectsFoundStore.ts (1)
useProjectsNotFoundStore(8-11)apps/web/src/components/dashboard/ProjectsContainer.tsx (1)
ProjectsContainer(54-179)apps/web/src/components/ui/SpinnerElm.tsx (1)
SpinnerElm(5-17)apps/web/src/components/ui/ErrMsg.tsx (1)
ErrMsg(1-7)
apps/web/src/components/dashboard/ProjectsContainer.tsx (3)
apps/web/src/types/projects.ts (1)
DashboardProjectsProps(1-13)apps/web/src/store/useProjectTitleStore.ts (1)
useProjectTitleStore(8-11)apps/web/src/store/useFilterStore.ts (1)
useFilterStore(9-14)
apps/web/src/components/dashboard/Sidebar.tsx (6)
apps/web/src/store/useShowSidebar.ts (1)
useShowSidebar(10-16)apps/web/src/store/useFilterStore.ts (1)
useFilterStore(9-14)apps/web/src/components/ui/IconWrapper.tsx (1)
IconWrapper(10-22)apps/web/src/components/sidebar/SidebarItem.tsx (1)
SidebarItem(12-28)apps/web/src/components/icons/icons.tsx (1)
apps/web/src/components/dashboard/ProfilePic.tsx (1)
ProfilePic(6-18)
apps/web/src/components/ui/FiltersContainer.tsx (1)
apps/web/src/components/ui/IconWrapper.tsx (1)
IconWrapper(10-22)
apps/web/src/app/(main)/dashboard/layout.tsx (5)
apps/web/src/store/useFilterStore.ts (1)
useFilterStore(9-14)apps/web/src/store/useShowSidebar.ts (1)
useShowSidebar(10-16)apps/web/src/components/ui/FiltersContainer.tsx (1)
FiltersContainer(21-150)apps/web/src/components/dashboard/Sidebar.tsx (1)
Sidebar(45-180)apps/web/src/components/ui/IconWrapper.tsx (1)
IconWrapper(10-22)
🔇 Additional comments (19)
apps/web/package.json (1)
28-28: LGTM! Geist font dependency added.The addition of the
geistpackage is correctly integrated into the layout file for typography improvements.apps/web/src/app/layout.tsx (2)
13-13: LGTM! GeistSans font imported correctly.The import aligns with the new
geistdependency added to package.json.
43-43: LGTM! Font application is correct.The GeistSans font is properly combined with the existing DM Mono font variables in the body className.
apps/web/src/utils/converter.ts (1)
151-151: LGTM! Defensive null handling added.The optional chaining and fallback to "Other" prevents potential runtime errors when
primaryLanguageis undefined or null.apps/web/src/components/ui/Filter.tsx (1)
26-50: LGTM! UI styling improvements enhance visibility.The updated styling with improved contrast (text-slate-300, text-white, text-zinc-300) and enhanced interactive states addresses the maintainer's feedback about making options more visible. The consistent spacing and visual feedback on focus/checked states improve the user experience.
apps/web/src/components/dashboard/ProjectsContainer.tsx (2)
94-109: Excellent! Sticky header addresses maintainer feedback.The sticky header implementation (
sticky top-0 z-30) directly addresses the maintainer's concern that "the whole header scrolls away and gets hidden." The header now remains fixed while scrolling through projects.
83-89: Note: Custom scrollbar styling is webkit-only.The
[&::-webkit-scrollbar]pseudo-elements only work in Chromium and Safari. Firefox and other browsers will show default scrollbars.This is acceptable for progressive enhancement, but ensure the table is usable with default scrollbars in non-webkit browsers during testing.
apps/web/src/app/(main)/dashboard/projects/page.tsx (1)
14-18: LGTM! State initialization supports empty state UI.The logic correctly clears previous project data and enables rendering, which allows the empty state prompt in
ProjectsContainerto display when users first visit the projects page.apps/web/src/app/(main)/dashboard/layout.tsx (2)
17-33: LGTM! Responsive layout with proper state management.The refactored layout successfully implements:
- Collapsible sidebar with state-driven visibility
- Mobile-responsive header toggle (visible on xl and smaller screens)
- Proper overflow handling that preserves scrolling behavior
- Flexible container structure that supports the sticky header in ProjectsContainer
The layout changes work cohesively with the sidebar and filter panel updates to create a responsive dashboard experience.
23-28: Mobile header toggle enhances accessibility.The mobile header with the hamburger menu icon provides intuitive navigation on smaller screens, addressing mobile UX concerns.
apps/web/src/components/dashboard/DashboardContainer.tsx (2)
10-10: LGTM!The pathname detection for conditional layout is implemented correctly.
Also applies to: 17-19
24-40: LGTM!The conditional rendering logic properly prevents overlapping states, and the centered loading/error states improve UX.
apps/web/src/store/useShowSidebar.ts (1)
6-7: LGTM!The collapse state implementation follows the existing pattern and integrates cleanly with the store.
Also applies to: 13-15
apps/web/src/components/dashboard/Sidebar.tsx (3)
3-3: LGTM!The imports are well-organized and all the new icons and store hooks are properly integrated.
Also applies to: 8-25, 46-48
80-115: LGTM!The responsive header implementation with mobile/desktop variants and collapse toggle is well-structured.
117-173: LGTM!The sidebar items are well-organized with proper icon sizing and collapse support throughout.
apps/web/src/components/sidebar/SidebarItem.tsx (1)
5-27: LGTM!The component is well-typed and correctly handles icon rendering and collapsed state. The conditional layout based on
collapsedprop is clean and effective.apps/web/src/components/ui/FiltersContainer.tsx (2)
60-78: LGTM!The full-screen backdrop with blur effect and the updated panel styling provide excellent UX. The responsive width handling (w-full on mobile, w-[400px] on larger screens) is well-implemented.
138-146: LGTM!The full-width button in the footer improves mobile usability, and the updated styling aligns well with the overall design system.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
apps/web/src/components/dashboard/Sidebar.tsx (1)
196-197: Replace hardcoded user data with session information.Lines 196-197 contain hardcoded values
"Ajeet"and"hi@opensox.ai". This will display incorrect information for all users. As previously noted, the profile should use session data fromnext-auth.
🧹 Nitpick comments (1)
apps/web/src/components/dashboard/ProjectsContainer.tsx (1)
92-92: Consider responsive min-width for better mobile experience.The
min-w-[820px]ensures all columns are visible but will require horizontal scrolling on mobile devices. Consider whether some columns could be hidden on smaller screens using responsive utilities (e.g.,hidden sm:table-cell) to improve mobile UX.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (3)
apps/web/package.json(1 hunks)apps/web/src/components/dashboard/ProjectsContainer.tsx(3 hunks)apps/web/src/components/dashboard/Sidebar.tsx(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/web/package.json
🧰 Additional context used
🧬 Code graph analysis (2)
apps/web/src/components/dashboard/ProjectsContainer.tsx (3)
apps/web/src/types/projects.ts (1)
DashboardProjectsProps(1-13)apps/web/src/store/useProjectTitleStore.ts (1)
useProjectTitleStore(8-11)apps/web/src/store/useFilterStore.ts (1)
useFilterStore(9-14)
apps/web/src/components/dashboard/Sidebar.tsx (6)
apps/web/src/store/useShowSidebar.ts (1)
useShowSidebar(10-16)apps/web/src/store/useFilterStore.ts (1)
useFilterStore(9-14)apps/web/src/components/ui/IconWrapper.tsx (1)
IconWrapper(10-22)apps/web/src/components/sidebar/SidebarItem.tsx (1)
SidebarItem(12-28)apps/web/src/components/icons/icons.tsx (1)
apps/web/src/components/dashboard/ProfilePic.tsx (1)
ProfilePic(6-18)
🔇 Additional comments (6)
apps/web/src/components/dashboard/Sidebar.tsx (2)
82-115: Well-implemented responsive sidebar with collapse functionality.The conditional width (
w-20vsw-72), mobile/desktop headers, and collapse toggle are cleanly implemented with smooth transitions.
132-137: Good integration with filter store.The "Find projects" entry correctly triggers the filter panel via
setShowFilters(true), maintaining centralized state management.apps/web/src/components/dashboard/ProjectsContainer.tsx (4)
94-109: Sticky header successfully implemented.The
sticky top-0 z-30 bg-[#15161a]classes at line 101 successfully address the PR objective to keep the header fixed when scrolling the projects list. This is a good solution that maintains the header visibility during scroll.
78-91: Well-designed scrollable container with custom scrollbar.The scrollable container with
h-[80vh]and custom webkit-scrollbar styling provides a clean, professional appearance. The purple-themed scrollbar matches the overall design system.
118-133: Good responsive design for mobile and desktop.The use of responsive classes (
text-[10px] sm:text-xs,h-4 w-4 sm:h-6 sm:w-6,p-1 sm:p-2) ensures the table remains usable across different screen sizes.
165-176: Helpful empty state with clear guidance.The empty state provides clear visual feedback with the animated icon and instructive text, improving the user experience when no projects are available.
|
@ajeetunc could you please review and merge it! |
|
@huamanraj hey can you pls share a video of this? just checking this. |
|
here is the video @ajeetunc !! i have tried a lot to make the table header sticky but it is not working! 2025-11-04_17-27-05.mp4 |
|
hi @huamanraj, thanks for the good work! tried running your changes locally and getting some error like these |
|
opening it. i'll try to work on it and will see if i can fix the rest of the things. |
|
that error might be because i fixed some merge conflict here also what kind of auth error? also it was said to remove the header in issue? which header part are you talking about? also i want to work on this issue!
|
|
@huamanraj sorry for the misinterpretation aman! yes, there are some errors related to the merge conflicts. auth error was probably by my mistake of not running the backend. i mean the header of the project's card. lemme come up with a different idea. can you please rebase this branch on top of the latest changes? |
sure! rebased it! |
|
@huamanraj thanks aman! just looking into it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
@huamanraj awesome aman! thanks for your persistence! change going to prod..🫡🔥 |
3 participants
hey @apsinghdev ,
i have created the new ui! have a look!
issue: #116
OLD:
NEW:
Any changes you want ?
Summary by CodeRabbit
New Features
UI Improvements
Bug Fixes