Skip to content

add links to profile on like dialog #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
KianBaghai merged 1 commit into from
Dec 2, 2025
Merged

add links to profile on like dialog #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 8 additions & 3 deletions client/app/feed/components/likesDialog.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@
import { useEffect } from "react";
import Image from "next/image";
import styles from "./likesDialog.module.css";

import { useRouter } from "next/navigation";
export default function LikesDialog({ isOpen, onClose, likes, postId }) {
const router = useRouter();
useEffect(() => {
if (isOpen) {
document.body.style.overflow = "hidden";
Expand Down Expand Up @@ -46,7 +47,12 @@ export default function LikesDialog({ isOpen, onClose, likes, postId }) {
height={40}
className={styles.avatar}
/>
<span className={styles.username}>{displayName}</span>
<button

Copilot AI Dec 2, 2025

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
<button
<button
type="button"

Copilot uses AI. Check for mistakes.
className={styles.username}
onClick={() => router.push(`/${displayName}`)}

Copilot AI Dec 2, 2025

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
onClick={() => router.push(`/${displayName}`)}
onClick={() => router.push(`/${displayName}`)}
aria-label={`View ${displayName}'s profile`}

Copilot uses AI. Check for mistakes.

Copilot AI Dec 2, 2025

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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}`); }}`

Suggested change
onClick={() => router.push(`/${displayName}`)}
onClick={() => { onClose(); router.push(`/${displayName}`); }}

Copilot uses AI. Check for mistakes.
>
{displayName}
</button>
</li>
);
})}
Expand All @@ -59,4 +65,3 @@ export default function LikesDialog({ isOpen, onClose, likes, postId }) {
</div>
);
}

12 changes: 11 additions & 1 deletion client/app/feed/components/likesDialog.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,18 @@
.username {
font-size: 16px;
font-weight: 500;
background: none;
border: none;
padding: 0;
cursor: pointer;
color: #333;
text-align: left;
transition: color 0.2s;
}

.username:hover {
color: #7a6e60;
text-decoration: underline;
}

Copilot AI Dec 2, 2025

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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; }

Suggested change
.username:focus {
outline: 2px solid #7a6e60;
outline-offset: 2px;
}

Copilot uses AI. Check for mistakes.
.noLikes {
Expand All @@ -121,4 +132,3 @@
padding: 40px 20px;
font-size: 16px;
}

Loading