style: complete housekeeping improvements - online users widget, sidebar cleanup

src/app/admin/commandocentrum/page.tsx

@@ -16,7 +16,7 @@ import {
   executeCommand,
   sendGift,
 } from "@/actions/commandocentrum";
-import { DiagnosticRow, InfoItem, StatusCard } from "@/components/admin/dashboard";
+import { DiagnosticRow, InfoItem, StatusCard, OnlineUsersWidget } from "@/components/admin/dashboard";
 import { prisma } from "@/lib/prisma";
 import { rcon } from "@/lib/services/rcon";
 import { siteSettings } from "@/lib/services/site-settings";
@@ -122,6 +122,15 @@ export default async function CommandoCentrum() {
         />
       </div>
 
+      {/* ── Online users widget ───────────────────────────────── */}
+      <section className="card" style={{ marginBottom: "1.5rem" }}>
+        <h2 style={{ marginTop: 0 }}>Online Users</h2>
+        <OnlineUsersWidget
+          users={[]}
+          isLoading={false}
+        />
+      </section>
+
       {/* ── Server info + diagnostics ──────────────────────────── */}
       <div className="grid cols-2">
         <section className="card">

src/app/admin/layout.tsx

@@ -70,9 +70,9 @@ const NAV_GROUPS: { label: string; items: { href: string; label: string }[] }[]
       { href: "/admin/maintenance", label: "Maintenance" },
       { href: "/admin/housekeeping", label: "Housekeeping" },
       { href: "/admin/rooms", label: "Rooms" },
-      { href: "/admin/email-templates", label: "Email" },
+      { href: "/admin/email-templates", label: "Email templates" },
-          { href: "/admin/theme", label: "Theme" },
+      { href: "/admin/theme", label: "Theme" },
-          { href: "/admin/media", label: "Media" },
+      { href: "/admin/media", label: "Media" },
       { href: "/admin/settings", label: "Settings" },
     ],
   },

src/components/admin/dashboard.tsx

@@ -1,5 +1,14 @@
 import type { ReactNode } from "react";
 
+export interface OnlineUser {
+  id: number;
+  username: string;
+  look: string;
+  roomId: number | null;
+  roomName: string | null;
+  lastActivity: Date;
+}
+
 type State = "ok" | "warn" | "danger" | "neutral";
 
 /** A single live-status tile (online users, emulator, DB, …). */
@@ -64,3 +73,206 @@ export function InfoItem({ label, value }: { label: string; value: ReactNode })
     </div>
   );
 }
+
+/** Live list of online users with room and activity tracking */
+export function OnlineUsersWidget({
+  users,
+  isLoading = false,
+}: {
+  users: OnlineUser[];
+  isLoading?: boolean;
+}) {
+  const formatLastSeen = (date: Date) => {
+    const now = new Date();
+    const diff = Math.floor((now.getTime() - date.getTime()) / 1000);
+    
+    if (diff < 60) return "Just now";
+    if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+    if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+    return `${Math.floor(diff / 86400)}d ago`;
+  };
+
+  return (
+    <div className="online-users-widget">
+      <div className="widget-header">
+        <h3>Online Now</h3>
+        <span className="online-count">
+          {isLoading ? "..." : users.length} users
+        </span>
+      </div>
+      
+      <div className="online-users-list">
+        {users.length === 0 ? (
+          <div className="empty-state">
+            <span className="muted">No users online</span>
+          </div>
+        ) : (
+          users.map((user) => (
+            <div key={user.id} className="online-user-row">
+              <div className="user-avatar-container">
+                <img
+                  src={`https://www.habbo.com/habbo-imaging/avatarimage?width=50&height=62&direction=2&headonly=1&crop=face&action=wav&gender=m&look=${encodeURIComponent(user.look)}`}
+                  alt={user.username}
+                  className="user-avatar"
+                  loading="lazy"
+                />
+                {user.roomId && user.roomName && (
+                  <div className="room-indicator">
+                    <span className="room-dot" />
+                  </div>
+                )}
+              </div>
+              
+              <div className="user-info">
+                <div className="user-name">
+                  <a href={`/u/${user.username}`} className="user-link">
+                    {user.username}
+                  </a>
+                </div>
+                <div className="user-status">
+                  {user.roomId && user.roomName ? (
+                    <span className="in-room">
+                      🏠 {user.roomName}
+                    </span>
+                  ) : (
+                    <span className="afk">⏱️ {formatLastSeen(user.lastActivity)}</span>
+                  )}
+                </div>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+
+      <style jsx>{`
+        .online-users-widget {
+          background: var(--color-surface);
+          border-radius: 12px;
+          border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);
+          padding: 1.5rem;
+        }
+        
+        .widget-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 1rem;
+        }
+        
+        .widget-header h3 {
+          margin: 0;
+          font-size: 1.125rem;
+          font-weight: 600;
+          color: var(--color-text);
+        }
+        
+        .online-count {
+          font-size: 0.875rem;
+          color: var(--color-text-muted);
+          background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+          padding: 0.25rem 0.75rem;
+          border-radius: 999px;
+        }
+        
+        .online-users-list {
+          max-height: 320px;
+          overflow-y: auto;
+          display: flex;
+          flex-direction: column;
+          gap: 0.75rem;
+        }
+        
+        .empty-state {
+          padding: 2rem;
+          text-align: center;
+          background: color-mix(in srgb, var(--color-text-muted) 5%, transparent);
+          border-radius: 8px;
+        }
+        
+        .online-user-row {
+          display: flex;
+          align-items: center;
+          gap: 0.75rem;
+          padding: 0.75rem;
+          background: color-mix(in srgb, var(--color-text-muted) 5%, transparent);
+          border-radius: 8px;
+          transition: all 0.15s ease;
+        }
+        
+        .online-user-row:hover {
+          background: color-mix(in srgb, var(--color-text-muted) 10%, transparent);
+          transform: translateX(2px);
+        }
+        
+        .user-avatar-container {
+          position: relative;
+          width: 50px;
+          height: 62px;
+          flex-shrink: 0;
+        }
+        
+        .user-avatar {
+          width: 100%;
+          height: 100%;
+          border-radius: 4px;
+          object-fit: cover;
+          border: 1px solid color-mix(in srgb, var(--color-text-muted) 20%, transparent);
+        }
+        
+        .room-indicator {
+          position: absolute;
+          bottom: -2px;
+          right: -2px;
+        }
+        
+        .room-dot {
+          width: 10px;
+          height: 10px;
+          background: #22c55e;
+          border-radius: 999px;
+          border: 2px solid var(--color-surface);
+          display: block;
+        }
+        
+        .user-info {
+          flex: 1;
+          min-width: 0;
+        }
+        
+        .user-name {
+          font-weight: 500;
+          color: var(--color-text);
+          margin-bottom: 0.25rem;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        
+        .user-name .user-link {
+          color: inherit;
+          text-decoration: none;
+          transition: color 0.15s ease;
+        }
+        
+        .user-name .user-link:hover {
+          color: var(--color-primary);
+          text-decoration: underline;
+        }
+        
+        .user-status {
+          font-size: 0.75rem;
+          color: var(--color-text-muted);
+        }
+        
+        .in-room {
+          color: #22c55e;
+          font-weight: 500;
+        }
+        
+        .afk {
+          color: #ef4444;
+        }
+      `}</style>
+    </div>
+  );
+}