feat(frontend): Implement SignalR client integration for real-time notifications

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>
This commit is contained in:
Yaojia Wang
2025-11-04 09:41:13 +01:00
parent 9f05836226
commit bdbb187ee4
12 changed files with 1034 additions and 7 deletions

View File

@@ -1,6 +1,6 @@
'use client';
import { Menu, Bell, LogOut, User } from 'lucide-react';
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';
@@ -13,6 +13,7 @@ import {
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { NotificationPopover } from '@/components/notifications/NotificationPopover';
export function Header() {
const toggleSidebar = useUIStore((state) => state.toggleSidebar);
@@ -37,10 +38,7 @@ export function Header() {
</div>
<div className="ml-auto flex items-center gap-4">
<Button variant="ghost" size="icon">
<Bell className="h-5 w-5" />
<span className="sr-only">Notifications</span>
</Button>
<NotificationPopover />
<DropdownMenu>
<DropdownMenuTrigger asChild>