Conversation
motirebuma
commented
Apr 24, 2026
motirebuma
commented
- The UI for the Explore page has been completely redesigned and refined.
- fix the UI of the Your Profile section.
- Enhanced the UI of the message section.
- Refined the UI of the post detail page.
- Updated and polished the navbar UI.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR focuses on a broad UI refresh across the dashboard experience, with the biggest shift being a new Explore page layout and updated navigation/chat/notification presentation.
Changes:
- Redesign Explore into a multi-column layout: left notifications + filters, center feed, right chat panel (xl+).
- Standardize avatar rendering across chat/buddy list components by moving to
DisplayAvatar. - Update dashboard navbar/search styling and adjust several UI elements in posts/notifications/chat.
Reviewed changes
Copilot reviewed 18 out of 18 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| quotevote-frontend/src/components/Profile/ProfileHeader.tsx | Adjusts z-index stacking for banner vs. profile info. |
| quotevote-frontend/src/components/Post/Post.tsx | Removes vote button emojis; hides Follow button for owners. |
| quotevote-frontend/src/components/Notifications/NotificationLists.tsx | Simplifies empty state UI and switches list leading visuals from avatar+badge to icon-only. |
| quotevote-frontend/src/components/Notifications/Notification.tsx | Refactors notification popover/page header and loading skeleton styling. |
| quotevote-frontend/src/components/Navbars/NavSearch.tsx | Makes search fully responsive-width and improves dark-mode styling. |
| quotevote-frontend/src/components/Chat/MessageItem.tsx | Migrates message avatar rendering to DisplayAvatar. |
| quotevote-frontend/src/components/Chat/MessageBox.tsx | Migrates chat header avatar rendering to DisplayAvatar. |
| quotevote-frontend/src/components/Chat/ChatTabs.tsx | Renames “Groups” tab label to “Discussions”. |
| quotevote-frontend/src/components/Chat/ChatList.tsx | Uses DisplayAvatar and normalizes avatar URL resolution via parseAvatarToUrl. |
| quotevote-frontend/src/components/Chat/ChatContent.tsx | Removes the close control in the “no room selected” view and tweaks layout styling. |
| quotevote-frontend/src/components/BuddyList/BuddyListWithPresence.tsx | Migrates buddy avatars to DisplayAvatar. |
| quotevote-frontend/src/components/BuddyList/BuddyItemList.tsx | Migrates buddy item avatars to DisplayAvatar. |
| quotevote-frontend/src/components/Avatar.tsx | Tightens image rendering guard to string src only. |
| quotevote-frontend/src/app/dashboard/layout.tsx | Centers search in desktop navbar and changes which global actions are shown; updates mobile nav items. |
| quotevote-frontend/src/app/dashboard/explore/ExploreContent.tsx | Implements the new Explore page structure with notifications/filters sidebar and chat panel. |
| quotevote-frontend/src/tests/components/Chat/MessageItem.test.tsx | Adds DisplayAvatar mocking to keep MessageItem tests passing. |
| quotevote-frontend/src/tests/components/Chat/ChatList.test.tsx | Updates tests to align with DisplayAvatar behavior. |
| quotevote-frontend/src/tests/app/dashboard/notifications/NotificationsPageContent.test.tsx | Updates assertion to match the new empty notifications copy. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const handleClearAll = useCallback( | ||
| () => updateParams({ friends: null, interactions: null, sort: null, from: null, to: null }), | ||
| [updateParams] | ||
| ) | ||
|
|
||
| const hasDateFilter = !!(from || to) | ||
| const hasAnyFilter = interactions || friends || sortOrder !== '' || hasDateFilter || !!q |
There was a problem hiding this comment.
“Clear all” is shown when hasAnyFilter is true, but hasAnyFilter includes the search query (q) while handleClearAll does not clear q. This makes the button ineffective when the only active filter is search (and it can also stay visible after clearing). Either include q: null in handleClearAll, or exclude q from hasAnyFilter if search isn’t intended to be cleared here.
| {/* Sort order */} | ||
| <div className="space-y-2"> | ||
| <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Sort</p> | ||
| <div className="space-y-2"> | ||
| {sortOptions.map(({ value, label }) => ( | ||
| <label key={value} className="flex items-center gap-2.5 cursor-pointer group"> | ||
| <Checkbox | ||
| checked={sortOrder === value} | ||
| onCheckedChange={() => onSortChange(value)} | ||
| id={`sort-${value || 'default'}`} | ||
| /> | ||
| <span className="text-sm text-foreground/80 group-hover:text-foreground transition-colors select-none"> | ||
| {label} | ||
| </span> | ||
| </label> | ||
| ))} |
There was a problem hiding this comment.
The sort selector is implemented as a list of independent checkboxes but is being used as a mutually-exclusive choice. This is confusing for assistive tech (and makes it hard to express the intent of a single selection). Use a radio group / segmented control for sort, or at minimum ensure the interaction matches checkbox semantics (including allowing uncheck to clear the sort).
| <Users2 className="h-4 w-4 transition-transform duration-200" /> | ||
| <span>Groups</span> | ||
| <span>Discussions</span> | ||
| {groupCount > 0 && ( |
There was a problem hiding this comment.
This tab label change (“Groups” → “Discussions”) will break existing tests and any UI code relying on the visible text (e.g., ChatContent.test.tsx uses getByText('Groups')). Update the affected tests/selectors (prefer stable data-testid/aria-labels over visible text) to keep CI green and reduce brittleness going forward.
| @@ -243,29 +246,6 @@ export default function DashboardLayout({ | |||
| <span>Create</span> | |||
| </button> | |||
|
|
|||
| {/* Notifications */} | |||
| <Link href="/dashboard/notifications" className="outline-none" aria-label="Notifications"> | |||
| <IconBtn | |||
| label={unreadCount > 0 ? `Notifications (${unreadCount} unread)` : 'Notifications'} | |||
| badge={unreadCount} | |||
| badgeColor="red" | |||
| active={isActive('/dashboard/notifications')} | |||
| > | |||
| <Bell className="size-5" fill={isActive('/dashboard/notifications') ? 'currentColor' : 'none'} /> | |||
| </IconBtn> | |||
| </Link> | |||
|
|
|||
| {/* Messages */} | |||
| <IconBtn | |||
| label="Messages" | |||
| badge={unreadChat} | |||
| badgeColor="green" | |||
| active={chatOpen} | |||
| onClick={() => setChatOpen(!chatOpen)} | |||
| > | |||
| <MessageSquare className="size-5" fill={chatOpen ? 'currentColor' : 'none'} /> | |||
| </IconBtn> | |||
|
|
|||
| {/* Avatar dropdown */} | |||
| {loggedIn && ( | |||
There was a problem hiding this comment.
Desktop navbar no longer provides any navigation to Notifications (/dashboard/notifications) or a way to open the chat panel. The avatar dropdown also doesn’t include these items, so on desktop these screens become effectively unreachable except via deep links. Consider adding back the bell/chat actions (or adding entries in the account dropdown) to preserve access.
