Crowmate/Wyview
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: change the DA to something more readable

Browse Source
This commit is contained in:
Pierre Ryssen
2026-03-11 12:26:45 +01:00
parent cd15c81b53
commit 9642f2511a
22 changed files with 136 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
components/LiveBanner.tsx
View File

@@ -8,40 +8,40 @@ export type StreamInfo = {
export default function LiveBanner({ stream }: { stream: StreamInfo }) {
return (
<div className={`border rounded-sm p-5 flex items-center gap-5 transition-colors duration-300 ${
<div className={`border rounded-lg p-5 flex items-center gap-5 transition-colors duration-300 ${
stream.live
? "bg-[#4aff8c]/3 border-[#4aff8c]/20"
: "bg-white/[0.02] border-[#1a2a1a]"
? "bg-acid-green/10 border-acid-green/30"
: "bg-wy-surface border-wy-border"
}`}>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-2">
{stream.live ? (
<span className="flex items-center gap-1.5 text-[9px] font-mono tracking-[0.2em] text-red-400 bg-red-500/10 border border-red-500/20 px-2 py-1 rounded-sm">
<span className="flex items-center gap-1.5 text-xs font-mono tracking-widest text-red-400 bg-red-500/10 border border-red-500/30 px-2 py-1 rounded-md">
<span className="w-1.5 h-1.5 rounded-full bg-red-400 animate-pulse" />
EN DIRECT
</span>
) : (
<span className="text-[9px] font-mono tracking-[0.2em] text-[#3a5a3a] bg-white/[0.02] border border-[#1a2a1a] px-2 py-1 rounded-sm">
<span className="text-xs font-mono tracking-widest text-wy-text-secondary bg-wy-surface border border-wy-border px-2 py-1 rounded-md">
HORS LIGNE
</span>
)}
{stream.duration && (
<span className="text-[10px] font-mono text-[#3a5a3a]">{stream.duration}</span>
<span className="text-xs font-mono text-wy-text-secondary">{stream.duration}</span>
)}
</div>
<div className="text-white font-bold truncate">
{stream.title || "En attente du prochain stream..."}
</div>
{stream.game && (
<div className="text-[12px] text-[#3a5a3a] font-mono mt-1">🎮 {stream.game}</div>
<div className="text-sm text-wy-text-secondary font-mono mt-1">🎮 {stream.game}</div>
)}
</div>
<div className="text-right flex-shrink-0">
<div className={`text-3xl font-black leading-none ${stream.live ? "text-[#4aff8c]" : "text-[#2a3a2a]"}`}>
<div className={`text-4xl font-black leading-none ${stream.live ? "text-acid-green" : "text-wy-text-secondary"}`}>
{stream.viewers ?? 0}
</div>
<div className="text-[9px] font-mono tracking-widest text-[#3a5a3a] mt-0.5">VIEWERS</div>
<div className="text-xs font-mono tracking-widest text-wy-text-secondary mt-0.5">VIEWERS</div>
</div>
</div>
);

12
components/LogFeed.tsx
View File

@@ -7,12 +7,12 @@ export type LogEntry = {
};
const typeStyles = {
info: { border: "border-l-[#4aff8c]/60", icon: "✅" },
info: { border: "border-l-acid-green/60", icon: "✅" },
warn: { border: "border-l-yellow-400/60", icon: "⚠️" },
ban: { border: "border-l-red-500/60", icon: "🔨" },
unban: { border: "border-l-blue-400/60", icon: "🔓" },
twitch: { border: "border-l-purple-400/60", icon: "📡" },
sub: { border: "border-l-[#4aff8c]/60", icon: "🎖️" },
sub: { border: "border-l-acid-green/60", icon: "🎖️" },
};
const MOCK_LOGS: LogEntry[] = [
@@ -32,17 +32,17 @@ export default function LogFeed({ logs = MOCK_LOGS }: { logs?: LogEntry[] }) {
return (
<div
key={log.id}
className={`flex items-start gap-3 px-3 py-2.5 bg-white/[0.02] border border-[#1a2a1a] border-l-2 ${style.border} rounded-sm text-sm`}
className={`flex items-start gap-3 px-3 py-2.5 bg-wy-surface border border-wy-border border-l-2 ${style.border} rounded-md text-sm`}
style={{ animation: `fadeIn 0.3s ${i * 0.05}s both` }}
>
<span className="text-base flex-shrink-0 mt-0.5">{style.icon}</span>
<div className="flex-1 min-w-0">
<div className="text-[#b0c4b0] leading-snug">{log.text}</div>
<div className="text-wy-text-primary leading-snug">{log.text}</div>
{log.reason && (
<div className="text-[11px] text-[#3a5a3a] font-mono mt-0.5 italic">{log.reason}</div>
<div className="text-xs text-wy-text-secondary font-mono mt-0.5 italic">{log.reason}</div>
)}
</div>
<div className="text-[10px] font-mono text-[#2a4a2a] whitespace-nowrap mt-0.5">{log.time}</div>
<div className="text-xs font-mono text-wy-text-secondary whitespace-nowrap mt-0.5">{log.time}</div>
</div>
);
})}

16
components/MemberList.tsx
View File

@@ -6,10 +6,10 @@ export type Member = {
};
const roleStyles = {
admin: { label: "ADMIN", cls: "text-red-400 bg-red-500/8 border-red-500/20" },
mod: { label: "MOD", cls: "text-yellow-400 bg-yellow-400/8 border-yellow-400/20" },
sub: { label: "SUB", cls: "text-[#4aff8c] bg-[#4aff8c]/8 border-[#4aff8c]/20" },
viewer: { label: "VIEWER", cls: "text-blue-400 bg-blue-400/8 border-blue-400/20" },
admin: { label: "ADMIN", cls: "text-red-400 bg-red-500/10 border-red-500/30" },
mod: { label: "MOD", cls: "text-yellow-400 bg-yellow-400/10 border-yellow-400/30" },
sub: { label: "SUB", cls: "text-acid-green bg-acid-green/10 border-acid-green/30" },
viewer: { label: "VIEWER", cls: "text-blue-400 bg-blue-400/10 border-blue-400/30" },
};
const AVATARS = ["🗡️", "🛡️", "🏹", "⚔️", "🔥", "💀", "🐉", "⚡"];
@@ -32,13 +32,13 @@ export default function MemberList({ members = MOCK_MEMBERS }: { members?: Membe
return (
<div
key={m.id}
className="flex items-center gap-3 px-3 py-2 bg-white/[0.02] border border-[#1a2a1a] rounded-sm hover:bg-[#4aff8c]/3 transition-colors duration-150"
className="flex items-center gap-3 px-3 py-2 bg-wy-surface border border-wy-border rounded-md hover:bg-wy-surface/50 transition-colors duration-150"
>
<div className="w-7 h-7 rounded-full bg-[#0a1a0a] border border-[#1a2a1a] flex items-center justify-center text-xs flex-shrink-0">
<div className="w-8 h-8 rounded-full bg-wy-dark border border-wy-border flex items-center justify-center text-sm flex-shrink-0">
{avatar}
</div>
<div className="flex-1 text-sm text-[#b0c4b0] font-mono">{m.name}</div>
<span className={`text-[9px] font-mono tracking-wider px-2 py-0.5 border rounded-sm ${role.cls}`}>
<div className="flex-1 text-sm text-wy-text-primary font-mono">{m.name}</div>
<span className={`text-xs font-mono tracking-wider px-2 py-0.5 border rounded-md ${role.cls}`}>
{role.label}
</span>
</div>

28
components/Sidebar.tsx
View File

@@ -31,18 +31,17 @@ export default function Sidebar() {
};
return (
<aside className="fixed left-0 top-0 h-screen w-56 bg-[#0a0d0f] border-r border-[#1a2a1a] flex flex-col z-50">
<aside className="fixed left-0 top-0 h-screen w-56 bg-wy-dark border-r border-wy-border flex flex-col z-50">
{/* Logo */}
<div className="flex items-center gap-3 px-5 py-6 border-b border-[#1a2a1a]">
<div className="flex items-center gap-3 px-5 py-6 border-b border-wy-border">
<DragonEye size={32} />
<div>
<div className="text-[8px] font-mono tracking-[0.3em] text-[#4aff8c]/40 uppercase">Analytics</div>
<div className="text-[8px] font-mono tracking-[0.3em] text-acid-green/60 uppercase">Analytics</div>
<div className="text-base font-black tracking-widest text-white">WYVIEW</div>
</div>
</div>
{/* Nav */}
<nav className="flex-1 px-3 py-4 flex flex-col gap-1">
{nav.map(({ label, href, icon: Icon }) => {
const active = pathname === href;
@@ -50,28 +49,27 @@ export default function Sidebar() {
<button
key={href}
onClick={() => router.push(href)}
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-sm text-left transition-all duration-150 group ${
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-md text-left transition-all duration-150 group ${
active
? "bg-[#4aff8c]/8 border border-[#4aff8c]/20 text-[#4aff8c]"
: "border border-transparent text-[#4a6a4a] hover:text-[#a0c4a0] hover:bg-white/[0.03]"
? "bg-acid-green/10 border border-acid-green/30 text-acid-green"
: "border border-transparent text-wy-text-secondary hover:text-wy-text-primary hover:bg-white/[0.04]"
}`}
>
<Icon size={14} className="flex-shrink-0" />
<span className="text-[11px] font-mono tracking-wider">{label}</span>
{active && <span className="ml-auto w-1 h-1 rounded-full bg-[#4aff8c]" />}
<Icon size={16} className="flex-shrink-0" />
<span className="text-sm font-medium">{label}</span>
{active && <span className="ml-auto w-1.5 h-1.5 rounded-full bg-acid-green" />}
</button>
);
})}
</nav>
{/* Footer */}
<div className="px-3 py-4 border-t border-[#1a2a1a]">
<div className="px-3 py-4 border-t border-wy-border">
<button
onClick={handleLogout}
className="w-full flex items-center gap-3 px-3 py-2.5 rounded-sm text-[#3a5a3a] hover:text-red-400 hover:bg-red-500/5 border border-transparent hover:border-red-500/20 transition-all duration-150"
className="w-full flex items-center gap-3 px-3 py-2.5 rounded-md text-wy-text-secondary hover:text-red-400 hover:bg-red-500/10 border border-transparent hover:border-red-500/25 transition-all duration-150"
>
<LogOut size={14} />
<span className="text-[11px] font-mono tracking-wider">DÉCONNEXION</span>
<LogOut size={16} />
<span className="text-sm font-medium">Déconnexion</span>
</button>
</div>

20
components/StatCard.tsx
View File

@@ -8,7 +8,7 @@ interface StatCardProps {
}
const accentColors = {
green: { val: "text-[#4aff8c]", border: "border-t-[#4aff8c]/40" },
green: { val: "text-acid-green", border: "border-t-acid-green/40" },
red: { val: "text-red-400", border: "border-t-red-500/40" },
blue: { val: "text-blue-400", border: "border-t-blue-400/40" },
purple: { val: "text-purple-400", border: "border-t-purple-400/40" },
@@ -18,23 +18,23 @@ const accentColors = {
export default function StatCard({ label, value, sub, accent = "green", delta, deltaUp }: StatCardProps) {
const colors = accentColors[accent];
return (
<div className={`bg-[#0d1210] border border-[#1a2a1a] border-t-2 ${colors.border} rounded-sm p-5 relative group hover:-translate-y-0.5 transition-transform duration-200`}>
<div className="text-[9px] font-mono tracking-[0.25em] text-[#3a5a3a] uppercase mb-3">
<div className={`bg-wy-surface border border-wy-border border-t-2 ${colors.border} rounded-lg p-5 relative group hover:-translate-y-0.5 transition-transform duration-200`}>
<div className="text-xs font-mono tracking-widest text-wy-text-secondary uppercase mb-3">
{label}
</div>
<div className={`text-3xl font-black tracking-tight ${colors.val} leading-none mb-1`}>
{value === "—" || value === 0 ? <span className="text-[#2a3a2a]">—</span> : value}
<div className={`text-4xl font-black tracking-tight ${colors.val} leading-none mb-1`}>
{value === "—" || value === 0 ? <span className="text-wy-text-secondary">—</span> : value}
</div>
{sub && (
<div className="text-[11px] text-[#3a4a3a] font-mono mt-1">{sub}</div>
<div className="text-xs text-wy-text-secondary font-mono mt-1">{sub}</div>
)}
{delta && (
<div className={`absolute top-4 right-4 text-[9px] font-mono tracking-wider px-2 py-1 rounded-sm border ${
<div className={`absolute top-4 right-4 text-xs font-mono tracking-wider px-2 py-1 rounded-md border ${
deltaUp
? "text-[#4aff8c] bg-[#4aff8c]/5 border-[#4aff8c]/20"
: "text-red-400 bg-red-500/5 border-red-500/20"
? "text-acid-green bg-acid-green/10 border-acid-green/30"
: "text-red-400 bg-red-500/10 border-red-500/30"
}`}>
{deltaUp ? "+" : ""}{delta}
{deltaUp ? "▲" : "▼"} {delta}
</div>
)}
</div>