feat: add user activity tab and responsive navbar #48
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -30,8 +30,8 @@ export function ModeToggle() { | |
|
|
||
| if (!mounted) { | ||
| return ( | ||
| <div className="border-2 border-border bg-card h-9 w-9 flex items-center justify-center font-bold shadow-none"> | ||
| <Droplet className="h-4 w-4" /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
@@ -44,10 +44,9 @@ export function ModeToggle() { | |
| <button | ||
| type="button" | ||
| onClick={() => setIsOpen(!isOpen)} | ||
| className="border-2 flex h-9 w-9 items-center justify-center border-border bg-card font-bold text-card-foreground shadow-none transition-all hover:bg-secondary hover:text-black group" | ||
| > | ||
| <Icon className="h-4 w-4 transition-transform group-hover:scale-110" style={{ color: currentTheme.color }} /> | ||
| </button> | ||
|
|
||
| {isOpen && ( | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -42,13 +42,14 @@ export default function ProfileDropdown() { | |
| <DropdownMenuTrigger asChild> | ||
| <Button | ||
| variant="neutral" | ||
| size="sm" | ||
| className="h-9 border-2 border-border flex items-center gap-2 px-3 text-sm font-bold shadow-none hover:bg-secondary hover:text-black transition-all group" | ||
| > | ||
|
|
||
| <span className="tracking-tight"> | ||
| {user.firstName || user.username} | ||
| </span> | ||
| <ChevronDown size={14} className="opacity-70 transition-transform group-hover:translate-y-0.5" /> | ||
| </Button> | ||
| </DropdownMenuTrigger> | ||
|
|
||
|
|
@@ -82,7 +83,7 @@ export default function ProfileDropdown() { | |
|
|
||
| <DropdownMenuItem asChild> | ||
| <Link | ||
| to={user.username ? `/profile/${user.username}` : "/my/profile"} | ||
|
Contributor
There was a problem hiding this comment. The "My Threads" link points to the same destination as "My Profile" (line 66). This redundancy is also present in the mobile header drawer. If the intention is to show the user's threads, consider linking to the profile page with a query parameter or hash to activate the threads tab (e.g., |
||
| className="flex cursor-pointer items-center gap-2 p-3 font-bold transition-all hover:translate-x-1 hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground" | ||
| > | ||
| <MessageSquare size={18} /> | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,37 @@ | ||
| import { useState } from "react"; | ||
| import { Link } from "react-router"; | ||
| import { ModeToggle } from "@/components/mode-toggle"; | ||
| import { Button } from "@/components/ui/button"; | ||
| import { useAuth } from "@/contexts/AuthContext"; | ||
| import { NotificationBell } from "@/components/ui/notification-bell"; | ||
| import ProfileDropdown from "@/components/profile-dropdown"; | ||
| import { | ||
| Github, | ||
| Home, | ||
| LogOut, | ||
| Menu, | ||
| MessageSquare, | ||
| Plus, | ||
| Settings, | ||
| Shield, | ||
| User, | ||
| } from "lucide-react"; | ||
| import { RxDiscordLogo } from "react-icons/rx"; | ||
| import { | ||
| Drawer, | ||
| DrawerContent, | ||
| DrawerHeader, | ||
| DrawerTitle, | ||
| DrawerTrigger, | ||
| } from "@/components/ui/drawer"; | ||
|
|
||
| interface HeaderProps { | ||
| hideThemeToggle?: boolean; | ||
| } | ||
|
|
||
| const Header = ({ hideThemeToggle = false }: HeaderProps) => { | ||
| const { user, isLoading, isAuthenticated, isAdmin, login, logout } = useAuth(); | ||
| const [isMobileNavOpen, setIsMobileNavOpen] = useState(false); | ||
|
|
||
| return ( | ||
| <header className="border-b border-border bg-background/95 backdrop-blur-sm sticky top-0 z-50"> | ||
|
|
@@ -24,46 +44,181 @@ const Header = ({ hideThemeToggle = false }: HeaderProps) => { | |
| </Link> | ||
|
|
||
| <div className="flex items-center gap-2"> | ||
| {!hideThemeToggle && ( | ||
| <div className="nav-desktop"> | ||
| <ModeToggle /> | ||
| </div> | ||
| )} | ||
|
|
||
| {isLoading ? ( | ||
| <div className="animate-pulse mono-meta">...</div> | ||
| ) : isAuthenticated ? ( | ||
| <> | ||
| <div className="nav-desktop items-center gap-3"> | ||
| {!hideThemeToggle && ( | ||
| <Link to="/home"> | ||
| <Button | ||
| type="button" | ||
| variant="neutral" | ||
| size="sm" | ||
| className="flex h-9 items-center gap-1 px-3 text-xs font-bold border-2 border-border shadow-none hover:bg-secondary hover:text-black transition-all group" | ||
| > | ||
| <Home className="h-4 w-4 transition-transform group-hover:scale-110" /> | ||
| <span>Home</span> | ||
| </Button> | ||
| </Link> | ||
| )} | ||
| {isAdmin && ( | ||
| <Link to="/admin"> | ||
| <Button | ||
| type="button" | ||
| variant="neutral" | ||
| size="sm" | ||
| className="flex h-9 items-center gap-1 px-3 text-xs font-bold border-2 border-border shadow-none hover:bg-secondary hover:text-black transition-all group" | ||
| > | ||
| <Shield className="h-4 w-4 transition-transform group-hover:scale-110" /> | ||
| <span>Admin</span> | ||
| </Button> | ||
| </Link> | ||
| )} | ||
| <NotificationBell /> | ||
| <ProfileDropdown /> | ||
| {!hideThemeToggle && ( | ||
| <Link | ||
| to="/new-thread" | ||
| className="bg-primary h-9 px-4 flex items-center gap-2 font-bold text-primary-foreground text-xs border-2 border-border hover:bg-primary/90 transition-all hover:-translate-y-0.5 active:translate-y-0 shadow-none group" | ||
| > | ||
| <Plus className="h-4 w-4 transition-transform group-hover:rotate-90" /> | ||
| <span>New</span> | ||
| </Link> | ||
| )} | ||
| </div> | ||
|
|
||
| <div className="nav-mobile items-center gap-2"> | ||
| <NotificationBell /> | ||
| {!hideThemeToggle && ( | ||
| <Link | ||
| to="/new-thread" | ||
| className="bg-primary p-2 flex items-center justify-center font-bold text-primary-foreground border-2 border-border" | ||
| > | ||
| <Plus className="h-4 w-4" /> | ||
| </Link> | ||
| )} | ||
|
|
||
| {!isLoading && ( | ||
| <Drawer | ||
| open={isMobileNavOpen} | ||
| onOpenChange={setIsMobileNavOpen} | ||
| direction="right" | ||
| > | ||
| <DrawerTrigger asChild> | ||
| <Button variant="neutral" className="p-2 border-2"> | ||
| <Menu className="h-5 w-5" /> | ||
| </Button> | ||
| </DrawerTrigger> | ||
| <DrawerContent className="p-4"> | ||
| <DrawerHeader className="px-0 pt-0 text-left"> | ||
| <DrawerTitle className="text-xl font-black">Menu</DrawerTitle> | ||
| </DrawerHeader> | ||
|
|
||
| <div className="flex flex-col gap-4 mt-4"> | ||
| {user && ( | ||
| <div className="p-3 border-2 border-border bg-secondary/50 rounded-lg"> | ||
| <p className="font-black text-sm">{user.firstName || user.username}</p> | ||
| <p className="text-xs text-muted-foreground">@{user.username}</p> | ||
| </div> | ||
| )} | ||
|
|
||
| <nav className="flex flex-col gap-2"> | ||
| <Link | ||
| to="/home" | ||
| className="flex items-center gap-3 p-3 font-bold border-2 border-transparent hover:border-border hover:bg-secondary rounded-lg transition-all" | ||
| onClick={() => setIsMobileNavOpen(false)} | ||
| > | ||
| <Home className="h-5 w-5" /> | ||
| <span>Home</span> | ||
| </Link> | ||
|
|
||
| {!hideThemeToggle && ( | ||
| <div className="flex items-center justify-between p-3 font-bold border-2 border-transparent"> | ||
| <div className="flex items-center gap-3"> | ||
| <Settings className="h-5 w-5 opacity-50" /> | ||
| <span>Theme</span> | ||
| </div> | ||
| <ModeToggle /> | ||
| </div> | ||
| )} | ||
|
|
||
| {isAdmin && ( | ||
| <Link | ||
| to="/admin" | ||
| className="flex items-center gap-3 p-3 font-bold border-2 border-transparent hover:border-border hover:bg-secondary rounded-lg transition-all" | ||
| onClick={() => setIsMobileNavOpen(false)} | ||
| > | ||
| <Shield className="h-5 w-5" /> | ||
| <span>Admin Dashboard</span> | ||
| </Link> | ||
| )} | ||
|
|
||
| <div className="h-px bg-border my-1" /> | ||
|
|
||
| <Link | ||
| to={user?.username ? `/profile/${user.username}` : "/my/profile"} | ||
| className="flex items-center gap-3 p-3 font-bold border-2 border-transparent hover:border-border hover:bg-secondary rounded-lg transition-all" | ||
| onClick={() => setIsMobileNavOpen(false)} | ||
| > | ||
| <User className="h-5 w-5" /> | ||
| <span>My Profile</span> | ||
| </Link> | ||
|
|
||
| <Link | ||
| to="/my/profile" | ||
| className="flex items-center gap-3 p-3 font-bold border-2 border-transparent hover:border-border hover:bg-secondary rounded-lg transition-all" | ||
| onClick={() => setIsMobileNavOpen(false)} | ||
| > | ||
| <Settings className="h-5 w-5" /> | ||
| <span>Settings</span> | ||
| </Link> | ||
|
|
||
| <Link | ||
| to={user?.username ? `/profile/${user.username}` : "/my/profile"} | ||
| className="flex items-center gap-3 p-3 font-bold border-2 border-transparent hover:border-border hover:bg-secondary rounded-lg transition-all" | ||
| onClick={() => setIsMobileNavOpen(false)} | ||
| > | ||
| <MessageSquare className="h-5 w-5" /> | ||
| <span>My Threads</span> | ||
| </Link> | ||
|
|
||
| <div className="h-px bg-border my-1" /> | ||
|
|
||
| <a href="https://github.com/p-society/" target="_blank" rel="noreferrer" className="flex items-center gap-3 p-3 font-bold border-2 border-transparent hover:border-border hover:bg-secondary rounded-lg transition-all"> | ||
| <Github className="h-5 w-5" /> | ||
| <span>GitHub</span> | ||
| </a> | ||
| <a href="https://discord.gg/q74qC2exY4" target="_blank" rel="noreferrer" className="flex items-center gap-3 p-3 font-bold border-2 border-transparent hover:border-border hover:bg-secondary rounded-lg transition-all"> | ||
| <RxDiscordLogo className="h-5 w-5" /> | ||
| <span>Discord</span> | ||
| </a> | ||
|
|
||
| <div className="mt-4"> | ||
| <Button | ||
| variant="neutral" | ||
| className="w-full justify-start gap-3 border-2 border-destructive text-destructive hover:bg-destructive hover:text-white" | ||
| onClick={() => { | ||
| logout(); | ||
| setIsMobileNavOpen(false); | ||
| }} | ||
| > | ||
| <LogOut className="h-5 w-5" /> | ||
| <span>Logout</span> | ||
| </Button> | ||
| </div> | ||
| </nav> | ||
| </div> | ||
| </DrawerContent> | ||
| </Drawer> | ||
| )} | ||
| </div> | ||
| </> | ||
| ) : ( | ||
| <> | ||
|
|
||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The
userIdparameter is extracted fromrequest.paramswithout validation. To maintain consistency with other routes in this file (e.g., line 22) and ensure data integrity, consider using a validation schema (e.g., Zod) to parse and validate theuserIdformat before using it in database queries.