Replace demo pages with live app data

src/components/app-shell.tsx

@@ -1,22 +1,28 @@
 import Link from "next/link";
 import { Gauge, MonitorPlay, Shield, UsersRound } from "lucide-react";
-
-const nav = [
-  { href: "/dashboard", label: "Dashboard", icon: Gauge },
-  { href: "/rooms/@admin", label: "Rooms", icon: MonitorPlay },
-  { href: "/friends", label: "Friends", icon: UsersRound }
-];
+import { Avatar } from "./avatar";
 
 export function AppShell({
   children,
   active = "Dashboard",
-  isAdmin = false
+  isAdmin = false,
+  roomHref = "/dashboard",
+  userName
 }: {
   children: React.ReactNode;
   active?: string;
   isAdmin?: boolean;
+  roomHref?: string;
+  userName?: string;
 }) {
-  const visibleNav = isAdmin ? [...nav, { href: "/admin", label: "Admin", icon: Shield }] : nav;
+  const nav = [
+    { href: "/dashboard", label: "Dashboard", icon: Gauge },
+    { href: roomHref, label: "Rooms", icon: MonitorPlay },
+    { href: "/friends", label: "Friends", icon: UsersRound }
+  ];
+  const visibleNav = isAdmin
+    ? [nav[0], nav[1], nav[2], { href: "/admin", label: "Admin", icon: Shield }]
+    : nav;
 
   return (
     <div className="app-shell">
@@ -36,6 +42,15 @@ export function AppShell({
             );
           })}
         </nav>
+        {userName ? (
+          <div className="sidebar-user">
+            <Avatar name={userName} />
+            <div className="row-title">
+              <strong>{userName}</strong>
+              <span>{isAdmin ? "Administrator" : "Member"}</span>
+            </div>
+          </div>
+        ) : null}
       </aside>
       <main className="main">{children}</main>
     </div>