feat: add real-time notification system and fix admin login bug

- Fix login: role field was missing from session (admin page inaccessible)
- Add onlineUsers map in socket/state.ts to track connected users
- Join personal user:${id} socket room on connect for targeted notifications
- Emit friendRequestReceived/friendRequestAccepted socket events from friends controller
- Add sendGameInvite socket event handler on server
- New NotificationContext: global socket provider for registered users
- New NotificationPanel: bell icon with unread badge and dropdown in header
- Friends page: inline game invite input per friend with sendGameInvite

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

client/src/components/Header.tsx

@@ -2,6 +2,7 @@
 
 import { IconUser, IconShield } from "@tabler/icons-react";
 import Link from "next/link";
+import NotificationPanel from "./NotificationPanel";
 import ThemeToggle from "./ThemeToggle";
 import { useSession } from "@/context/session";
 
@@ -35,6 +36,7 @@ export default function Header() {
             Admin
           </Link>
         )}
+        {user?.id && typeof user.id === "number" && <NotificationPanel />}
         <ThemeToggle />
         <label tabIndex={0} htmlFor="auth-modal" className="btn btn-ghost btn-circle avatar">
           <div className="w-10 rounded-full">

client/src/components/NotificationPanel.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import type { AppNotification } from "@michess/types";
+import Link from "next/link";
+
+import { useNotifications } from "@/context/NotificationContext";
+
+function NotificationItem({ n, onDismiss }: { n: AppNotification; onDismiss: () => void }) {
+  let text = "";
+  if (n.type === "friendRequest") text = `${n.fromName} hat dir eine Freundschaftsanfrage gesendet.`;
+  if (n.type === "friendAccepted") text = `${n.fromName} hat deine Freundschaftsanfrage angenommen.`;
+  if (n.type === "gameInvite") text = `${n.fromName} lädt dich zu einem Spiel ein.`;
+
+  return (
+    <div className={`flex items-start gap-2 p-2 rounded-lg ${!n.read ? "bg-base-300" : ""}`}>
+      <div className="flex-1 min-w-0">
+        <p className="text-sm leading-snug">{text}</p>
+      </div>
+      {n.type === "gameInvite" && n.gameCode && (
+        <Link href={`/${n.gameCode}`} className="btn btn-xs btn-primary shrink-0" onClick={onDismiss}>
+          Beitreten
+        </Link>
+      )}
+      {n.type === "friendRequest" && (
+        <Link href="/friends" className="btn btn-xs btn-outline shrink-0" onClick={onDismiss}>
+          Ansehen
+        </Link>
+      )}
+      <button className="btn btn-xs btn-ghost shrink-0" onClick={onDismiss} aria-label="Schließen">
+        ✕
+      </button>
+    </div>
+  );
+}
+
+export default function NotificationPanel() {
+  const { notifications, unreadCount, markAllRead, dismiss } = useNotifications();
+
+  return (
+    <div className="dropdown dropdown-end">
+      <button
+        tabIndex={0}
+        className="btn btn-ghost btn-circle relative"
+        onClick={markAllRead}
+        aria-label="Benachrichtigungen"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-5 w-5"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
+          <path d="M13.73 21a2 2 0 0 1-3.46 0" />
+        </svg>
+        {unreadCount > 0 && (
+          <span className="badge badge-xs badge-primary absolute top-1 right-1">
+            {unreadCount > 9 ? "9+" : unreadCount}
+          </span>
+        )}
+      </button>
+      <div
+        tabIndex={0}
+        className="dropdown-content shadow bg-base-200 rounded-box w-80 max-h-96 overflow-y-auto z-50 p-2 flex flex-col gap-1 mt-1"
+      >
+        <p className="text-xs font-semibold opacity-60 px-1 pb-1">Benachrichtigungen</p>
+        {notifications.length === 0 && (
+          <p className="text-sm opacity-50 px-2 py-3 text-center">Keine Benachrichtigungen</p>
+        )}
+        {notifications.map((n) => (
+          <NotificationItem key={n.id} n={n} onDismiss={() => dismiss(n.id)} />
+        ))}
+      </div>
+    </div>
+  );
+}