style: complete housekeeping improvements - online users widget, sidebar cleanup
This commit is contained in:
remco committed
1 parent
dca77a891b
commit
c3de7cb576
3 files changed
+225
-4
No files matched your search
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user