Skip to content

feat: Implement user profile management page closes #77 #92

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
imuniqueshiv merged 2 commits into from
Jul 7, 2026
Merged

feat: Implement user profile management page closes #77 #92

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e924718
feat: implement user profile page closes #77
M0izz Jul 7, 2026
6c5e9b1
fix: refactor avatar error handling using react state instead of dire…
M0izz Jul 7, 2026
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
10 changes: 10 additions & 0 deletions client/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import AiSearch from "./pages/AiSearch.jsx";
import MeetingRoom from "./pages/MeetingRoom.jsx";
import MeetingDetails from "./pages/MeetingDetails.jsx";
import TeamMembers from "./pages/TeamMembers.jsx";
import Profile from "./pages/Profile.jsx";

// --- Components ---
import ProtectedRoute from "./components/ProtectedRoute.jsx";
Expand Down Expand Up @@ -230,6 +231,15 @@ const App = () => {
}
/>

<Route
path="/profile"
element={
<ProtectedRoute>
<Profile />
</ProtectedRoute>
}
/>

{/* ✅ Fallback route — send unknown routes to Home */}
<Route path="*" element={<Home />} />
</Routes>
Expand Down
39 changes: 33 additions & 6 deletions client/src/components/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,11 @@ const Navbar = () => {
const [notificationsOpen, setNotificationsOpen] = useState(false);
const [mobileNotifOpen, setMobileNotifOpen] = useState(false);
const [scrolled, setScrolled] = useState(false);
const [imgFailed, setImgFailed] = useState(false);

useEffect(() => {
setImgFailed(false);
}, [userData?.profilePic]);

// Unread notifications mock state
const [unreadCount, setUnreadCount] = useState(3);
Expand Down Expand Up @@ -395,10 +400,20 @@ const Navbar = () => {
aria-haspopup="true"
aria-label="Open user menu"
>
<div className="w-8 h-8 rounded-lg bg-linear-to-br from-blue-600 to-violet-600 text-white flex items-center justify-center font-bold text-sm shadow-xs">
{userData?.name
? userData.name.charAt(0).toUpperCase()
: "U"}
<div className="relative w-8 h-8 rounded-lg overflow-hidden shrink-0">
<div className="absolute inset-0 bg-linear-to-br from-blue-600 to-violet-600 text-white flex items-center justify-center font-bold text-sm shadow-xs">
{userData?.name
? userData.name.charAt(0).toUpperCase()
: "U"}
</div>
{userData?.profilePic && !imgFailed && (
<img
src={userData.profilePic}
alt={userData.name}
className="absolute inset-0 w-full h-full object-cover border border-gray-200/40"
onError={() => setImgFailed(true)}
/>
)}
Comment thread
coderabbitai[bot] marked this conversation as resolved.
</div>
<ChevronDown
className={`w-3.5 h-3.5 text-gray-500 transition-transform duration-200 ${
Expand Down Expand Up @@ -546,8 +561,20 @@ const Navbar = () => {
/* Logged In Mobile Nav List */
<>
<div className="px-3.5 py-3 bg-gray-50 border border-gray-100/60 flex items-center gap-3 rounded-2xl mb-2">
<div className="w-10 h-10 rounded-xl bg-linear-to-br from-blue-600 to-violet-600 text-white flex items-center justify-center font-bold text-base shadow-sm shrink-0">
{userData?.name ? userData.name.charAt(0).toUpperCase() : "U"}
<div className="relative w-10 h-10 rounded-xl overflow-hidden shrink-0">
<div className="absolute inset-0 bg-linear-to-br from-blue-600 to-violet-600 text-white flex items-center justify-center font-bold text-base shadow-xs">
{userData?.name
? userData.name.charAt(0).toUpperCase()
: "U"}
</div>
{userData?.profilePic && !imgFailed && (
<img
src={userData.profilePic}
alt={userData.name}
className="absolute inset-0 w-full h-full object-cover border border-gray-200/40"
onError={() => setImgFailed(true)}
/>
)}
</div>
<div className="overflow-hidden">
<p className="text-sm font-bold text-gray-800 truncate">
Expand Down
Loading
Loading