bdbb187ee4
Add comprehensive SignalR client implementation with connection management, React hooks, and UI components for real-time notifications and project updates. Changes: - Install @microsoft/signalr package (v9.0.6) - Create SignalR connection manager with auto-reconnect - Implement useNotificationHub hook for notification hub - Implement useProjectHub hook for project hub with room-based subscriptions - Add NotificationPopover UI component with badge and dropdown - Create Badge UI component - Add SignalRProvider for global connection initialization - Update Header to display real-time notifications - Update app layout to include SignalRProvider - Add comprehensive documentation in SIGNALR_INTEGRATION.md Features: - JWT authentication with automatic token management - Auto-reconnect with exponential backoff (0s, 2s, 5s, 10s, 30s) - Connection state management and indicators - Real-time notification push - Project event subscriptions (create, update, delete, status change) - Room-based project subscriptions - Typing indicators support 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
73 lines
2.4 KiB
TypeScript
73 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { Menu, LogOut, User } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { useUIStore } from '@/stores/ui-store';
|
|
import { useLogout } from '@/lib/hooks/useAuth';
|
|
import { useAuthStore } from '@/stores/authStore';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu';
|
|
import { NotificationPopover } from '@/components/notifications/NotificationPopover';
|
|
|
|
export function Header() {
|
|
const toggleSidebar = useUIStore((state) => state.toggleSidebar);
|
|
const { mutate: logout } = useLogout();
|
|
const user = useAuthStore((state) => state.user);
|
|
|
|
return (
|
|
<header className="sticky top-0 z-50 w-full border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
|
<div className="flex h-14 items-center px-4">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="mr-4"
|
|
onClick={toggleSidebar}
|
|
>
|
|
<Menu className="h-5 w-5" />
|
|
<span className="sr-only">Toggle sidebar</span>
|
|
</Button>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<h1 className="text-lg font-semibold">ColaFlow</h1>
|
|
</div>
|
|
|
|
<div className="ml-auto flex items-center gap-4">
|
|
<NotificationPopover />
|
|
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon">
|
|
<User className="h-5 w-5" />
|
|
<span className="sr-only">User menu</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuLabel>
|
|
<div className="flex flex-col space-y-1">
|
|
<p className="text-sm font-medium leading-none">
|
|
{user?.fullName}
|
|
</p>
|
|
<p className="text-xs leading-none text-muted-foreground">
|
|
{user?.email}
|
|
</p>
|
|
</div>
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={() => logout()}>
|
|
<LogOut className="mr-2 h-4 w-4" />
|
|
<span>Log out</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|