Round 12: WebSocket Collaboration, Curriculum Mapping, Attendance Analytics, Data Backup, Mobile Optimization, Performance

src/components/app-layout.tsx

@@ -114,6 +114,7 @@ import {
   CommandShortcut,
 } from '@/components/ui/command';
 import { toast } from 'sonner';
+import { useWebSocket, usePushNotifications, playNotificationSound, getNotificationSoundPref } from '@/lib/websocket';
 
 import DashboardView from './dashboard-view';
 import ClassesView from './classes-view';
@@ -256,6 +257,10 @@ export default function AppLayout() {
   const [schoolYears, setSchoolYears] = useState<SchoolYear[]>([]);
   const [selectedYearId, setSelectedYearId] = useState<string>(storeSchoolYearId ?? '');
 
+  // WebSocket connection for real-time push notifications
+  const { connected: wsConnected } = useWebSocket();
+  const { notification: pushNotification } = usePushNotifications();
+
   // Quick search (Cmd+K) state
   const [searchOpen, setSearchOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
@@ -500,6 +505,23 @@ export default function AppLayout() {
     return () => clearInterval(interval);
   }, [loadNotifications]);
 
+  // Handle push notifications in real-time (after loadNotifications is defined)
+  useEffect(() => {
+    if (!pushNotification) return;
+    // Play notification sound if enabled
+    if (getNotificationSoundPref()) {
+      playNotificationSound();
+    }
+    // Show toast notification
+    const typeInfo = getNotifTypeInfo(pushNotification.type);
+    toast(typeInfo.label, {
+      description: pushNotification.message,
+      duration: 5000,
+    });
+    // Refresh notification data to update the bell count
+    loadNotifications();
+  }, [pushNotification, loadNotifications]);
+
   const handleMarkAllRead = useCallback(async () => {
     if (!notifData || notifData.unreadCount === 0) return;
     try {