add links to profile on like dialog - #28
Conversation
KianBaghai
commented
Dec 2, 2025
KianBaghai
commented
- clicking like on a username on like dialog redirects to that users gallery
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR adds clickable username links in the likes dialog that navigate users to the profile gallery of the person who liked a post. This improves user experience by allowing direct navigation to user profiles from the likes list.
- Converted static username text to interactive buttons with navigation functionality
- Added button styling with hover effects and transitions
- Integrated Next.js router for client-side navigation
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| client/app/feed/components/likesDialog.jsx | Replaced username <span> with <button> element and added router navigation to user profiles |
| client/app/feed/components/likesDialog.module.css | Added button reset styles, hover states, and visual feedback for clickable usernames |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| className={styles.avatar} | ||
| /> | ||
| <span className={styles.username}>{displayName}</span> | ||
| <button |
There was a problem hiding this comment.
The button is missing the type="button" attribute. Without this, the button defaults to type="submit" which could cause unexpected form submission behavior if this component is rendered within a form context. Add type="button" to make the button's purpose explicit.
| <button | |
| <button | |
| type="button" |
| <span className={styles.username}>{displayName}</span> | ||
| <button | ||
| className={styles.username} | ||
| onClick={() => router.push(`/${displayName}`)} |
There was a problem hiding this comment.
The button lacks an accessible label. Screen reader users will only hear the username text but won't know that clicking will navigate to the user's profile. Add an aria-label attribute like aria-label={View ${displayName}'s profile} to provide context about what the button does.
| onClick={() => router.push(`/${displayName}`)} | |
| onClick={() => router.push(`/${displayName}`)} | |
| aria-label={`View ${displayName}'s profile`} |
| <span className={styles.username}>{displayName}</span> | ||
| <button | ||
| className={styles.username} | ||
| onClick={() => router.push(`/${displayName}`)} |
There was a problem hiding this comment.
The navigation doesn't close the dialog. When a user clicks a username, they're navigated to the profile but the dialog remains open, which creates a poor UX. Consider calling onClose() before or after the navigation: onClick={() => { onClose(); router.push(\/${displayName}`); }}`
| onClick={() => router.push(`/${displayName}`)} | |
| onClick={() => { onClose(); router.push(`/${displayName}`); }} |
| color: #7a6e60; | ||
| text-decoration: underline; | ||
| } | ||
|
|
There was a problem hiding this comment.
Consider adding a focus state for keyboard navigation accessibility. Add a .username:focus style (similar to :hover) to ensure keyboard users can see which username button has focus: .username:focus { outline: 2px solid #7a6e60; outline-offset: 2px; }
| .username:focus { | |
| outline: 2px solid #7a6e60; | |
| outline-offset: 2px; | |
| } |
