MythEclipse/GMW
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: update UI components for consistency and improved styling

Browse Source 
- Refactored ChannelCultureGlossary, LiveModerationFeed, TermGlossary, and Chatbot components to use new design tokens and styles.
- Updated button, badge, and section components to align with the new design system.
- Enhanced the visual hierarchy and accessibility of various UI elements.
- Improved responsiveness and hover states across components.
- Replaced hardcoded colors with design tokens for better maintainability.
This commit is contained in:
asepharyana committed 2026-08-26 14:57:08 +07:00
1 parent 7fc36170c8
commit a5f908dc06
18 files changed
+565 -535
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

services/frontend/src/app/(dashboard)/analysis/view.tsx
+16 -18
View File
@@ -116,16 +116,16 @@ export function AnalysisView() {
return (
<div className="space-y-4">
{/* Tactical HUD Header Bar */}
<div className="flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] pb-3">
<div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
<div className="flex items-center gap-2.5">
<span className="h-2 w-2 rounded-full bg-[#7170ff] shadow-[0_0_8px_#7170ff]" />
<h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase">
<span className="h-2 w-2 rounded-full bg-signal shadow-[0_0_8px_var(--color-signal-glow)]" />
<h1 className="font-mono text-xs font-semibold tracking-wide text-ink uppercase">
Deep Scan · Semantic Search & Telemetry Analysis
</h1>
</div>
<div className="flex items-center gap-2 font-mono text-[11px] text-[#8a8f98]">
<div className="flex items-center gap-2 font-mono text-[11px] text-ink-muted">
<span>ENGINE:</span>
<span className="rounded bg-white/[0.04] px-1.5 py-0.5 font-medium text-[#7170ff] border border-white/[0.06]">
<span className="rounded bg-signal/15 px-2 py-0.5 font-medium text-signal border border-signal/30">
{query.trim().length >= 2 ? "SCANNING" : "STANDBY"}
</span>
</div>
@@ -134,14 +134,14 @@ export function AnalysisView() {
{/* Hero Query Stage */}
<GlassPanel className="p-5">
<div className="flex items-center gap-3">
<span className="flex size-8 items-center justify-center rounded-[6px] border border-white/[0.08] bg-[#7170ff]/10 text-[#7170ff]">
<span className="flex size-8 items-center justify-center rounded-[6px] border border-signal/30 bg-signal/10 text-signal">
<Sparkles className="size-4" />
</span>
<div>
<h2 className="text-base font-semibold text-ink">
Cross-Guild Archive Intelligence
</h2>
<p className="font-mono text-[11px] text-[#8a8f98]">
<p className="font-mono text-[11px] text-ink-muted">
Query vectorized messages, heuristic flags, and user behavior
</p>
</div>
@@ -184,7 +184,7 @@ export function AnalysisView() {
{(search.data ?? []).map((m) => (
<div
key={m.id}
className="search-result-card flex items-start gap-3 rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-3 transition-all hover:border-white/[0.12] hover:bg-white/[0.04]"
className="search-result-card hud-card flex items-start gap-3 p-3 transition-all"
>
<Avatar src={m.avatar_url} name={m.username} size={32} />
<div className="min-w-0 flex-1">
@@ -224,8 +224,7 @@ export function AnalysisView() {
eyebrow="engagement"
title={
<span className="flex items-center gap-1.5">
<TrendingUp className="size-3.5 text-[#7170ff]" /> Top
Reactors
<TrendingUp className="size-3.5 text-signal" /> Top Reactors
</span>
}
/>
@@ -247,14 +246,14 @@ export function AnalysisView() {
<span className="w-24 shrink-0 truncate font-mono text-xs text-ink sm:w-32">
{r.username}
</span>
<div className="h-1 flex-1 overflow-hidden rounded-full bg-white/[0.06]">
<div className="h-1.5 flex-1 overflow-hidden rounded-full bg-surface-2">
<div
className="reactor-bar-fill h-full rounded-full bg-gradient-to-r from-[#5e6ad2] to-[#7170ff]"
className="reactor-bar-fill h-full rounded-full bg-signal"
style={{ width: `${pct}%` }}
/>
</div>
<span
className="reactor-count font-mono w-10 text-right text-[11px] font-semibold text-[#7170ff]"
className="reactor-count font-mono w-10 text-right text-[11px] font-semibold text-signal"
data-target={r.net_count}
>
+0
@@ -275,8 +274,7 @@ export function AnalysisView() {
eyebrow="volume"
title={
<span className="flex items-center gap-1.5">
<Hash className="size-3.5 text-[#7170ff]" /> Top Active
Channels
<Hash className="size-3.5 text-signal" /> Top Active Channels
</span>
}
/>
@@ -284,13 +282,13 @@ export function AnalysisView() {
{(channels ?? []).slice(0, 6).map((c) => (
<div
key={c.channel_id}
className="channel-row flex items-center justify-between rounded-[6px] border border-white/[0.04] bg-white/[0.01] p-2 text-xs hover:bg-white/[0.03]"
className="channel-row hud-card flex items-center justify-between p-2 text-xs"
>
<span className="flex items-center gap-1.5 truncate font-mono text-xs text-ink">
<Hash className="size-3 text-[#7170ff]" />
<Hash className="size-3 text-signal" />
{c.channel_name ?? c.channel_id.slice(0, 10)}
</span>
<span className="font-mono text-[10px] text-[#8a8f98]">
<span className="font-mono text-[10px] text-ink-muted">
{c.total_messages.toLocaleString()} msgs
</span>
</div>
services/frontend/src/app/(dashboard)/dashboard/view.tsx
+20 -24
View File
@@ -102,17 +102,17 @@ export function DashboardView({
return (
<PageTransition>
<div ref={hudRef} className="space-y-4">
{/* Precision Sub-Header Bar */}
<div className="linear-tile flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] pb-3">
{/* Tactical HUD Header Bar */}
<div className="linear-tile flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
<div className="flex items-center gap-2.5">
<span className="h-2 w-2 rounded-full bg-[#7170ff] shadow-[0_0_8px_#7170ff]" />
<h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase">
<span className="h-2 w-2 rounded-full bg-signal shadow-[0_0_8px_var(--color-signal-glow)]" />
<h1 className="font-mono text-xs font-semibold tracking-wide text-ink uppercase">
Telemetry Overview · Node 01
</h1>
</div>
<div className="flex items-center gap-2 font-mono text-[11px] text-[#8a8f98]">
<div className="flex items-center gap-2 font-mono text-[11px] text-ink-muted">
<span>SIGNAL:</span>
<span className="rounded bg-white/[0.04] px-1.5 py-0.5 font-medium text-[#7170ff] border border-white/[0.06]">
<span className="rounded bg-signal/15 px-2 py-0.5 font-medium text-signal border border-signal/30">
STABLE_STREAM
</span>
</div>
@@ -174,20 +174,16 @@ export function DashboardView({
/>
</div>
</div>
<div className="grid grid-cols-2 gap-2 border-t border-white/[0.06] pt-3 text-center">
<div className="grid grid-cols-2 gap-2 border-t border-hairline pt-3 text-center">
<div>
<div className="font-mono text-[10px] text-[#8a8f98]">
CLEAN
</div>
<div className="font-sans text-sm font-semibold text-[#10b981]">
<div className="eyebrow">CLEAN</div>
<div className="font-sans text-sm font-semibold text-success">
{formatNumber(s.total_clean)}
</div>
</div>
<div>
<div className="font-mono text-[10px] text-[#8a8f98]">
FLAGGED
</div>
<div className="font-sans text-sm font-semibold text-[#f43f5e]">
<div className="eyebrow">FLAGGED</div>
<div className="font-sans text-sm font-semibold text-vermilion">
{formatNumber(s.total_flagged)}
</div>
</div>
@@ -207,12 +203,12 @@ export function DashboardView({
{reactions.slice(0, 4).map((r) => (
<div
key={r.message_id}
className="flex items-center justify-between rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-2.5 hover:bg-white/[0.04]"
className="hud-card flex items-center justify-between p-2.5"
>
<span className="truncate pr-2 text-xs text-[#d0d6e0]">
<span className="truncate pr-2 text-xs text-ink-soft">
{r.content || "[Media/Attachment]"}
</span>
<span className="font-mono text-xs font-semibold text-[#7170ff] shrink-0">
<span className="font-mono text-xs font-semibold text-signal shrink-0">
{formatNumber(r.reaction_count)} reactions
</span>
</div>
@@ -227,23 +223,23 @@ export function DashboardView({
<div className="mt-2 space-y-1.5">
<Link
href="/moderation"
className="flex items-center justify-between rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-2.5 text-xs text-[#d0d6e0] transition-colors hover:border-white/[0.12] hover:bg-white/[0.04] hover:text-[#f7f8f8]"
className="hud-card flex items-center justify-between p-2.5 text-xs text-ink-soft transition-colors hover:text-ink"
>
<span className="flex items-center gap-2">
<Shield className="size-3.5 text-[#7170ff]" />
<Shield className="size-3.5 text-signal" />
Review Live Moderation Queue
</span>
<ChevronRight className="size-3.5 text-[#8a8f98]" />
<ChevronRight className="size-3.5 text-ink-muted" />
</Link>
<Link
href="/voice"
className="flex items-center justify-between rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-2.5 text-xs text-[#d0d6e0] transition-colors hover:border-white/[0.12] hover:bg-white/[0.04] hover:text-[#f7f8f8]"
className="hud-card flex items-center justify-between p-2.5 text-xs text-ink-soft transition-colors hover:text-ink"
>
<span className="flex items-center gap-2">
<AudioWaveform className="size-3.5 text-[#10b981]" />
<AudioWaveform className="size-3.5 text-success" />
Inspect Active Voice Stages
</span>
<ChevronRight className="size-3.5 text-[#8a8f98]" />
<ChevronRight className="size-3.5 text-ink-muted" />
</Link>
</div>
</div>
services/frontend/src/app/(dashboard)/media/view.tsx
+16 -18
View File
@@ -98,26 +98,26 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
<PageTransition>
<div ref={mediaRef} className="space-y-4">
{/* Precision Sub-Header Bar */}
<div className="media-tile flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] pb-3">
<div className="media-tile flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
<div className="flex items-center gap-2.5">
<span
className={`h-2 w-2 rounded-full ${
playing
? "bg-[#7170ff] shadow-[0_0_8px_#7170ff]"
: "bg-[#8a8f98]"
? "bg-signal shadow-[0_0_8px_var(--color-signal-glow)]"
: "bg-ink-muted"
}`}
/>
<h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase">
<h1 className="font-mono text-xs font-semibold tracking-wide text-ink uppercase">
Audio Engine · Media Gateway
</h1>
</div>
<div className="flex items-center gap-2 font-mono text-[11px]">
<span className="text-[#8a8f98]">ENGINE:</span>
<span className="text-ink-muted">ENGINE:</span>
<span
className={`rounded px-1.5 py-0.5 font-medium border ${
playing
? "border-[#7170ff]/30 bg-[#7170ff]/10 text-[#7170ff]"
: "border-white/[0.06] bg-white/[0.02] text-[#8a8f98]"
? "border-signal/30 bg-signal/10 text-signal"
: "border-hairline bg-surface-2 text-ink-muted"
}`}
>
{playing ? "STREAMING" : "IDLE"}
@@ -130,16 +130,16 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
<GlassPanel className="p-5">
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
<div className="flex items-center gap-3.5">
<div className="flex size-11 items-center justify-center rounded-[8px] border border-white/[0.08] bg-white/[0.03] text-[#7170ff]">
<div className="flex size-11 items-center justify-center rounded-[8px] border border-hairline bg-surface-2 text-signal">
<Disc
className={`size-6 ${playing ? "animate-spin-disc text-[#7170ff]" : "text-[#8a8f98]"}`}
className={`size-6 ${playing ? "animate-spin-disc text-signal" : "text-ink-muted"}`}
/>
</div>
<div>
<div className="text-sm font-semibold tracking-tight text-[#f7f8f8]">
<div className="text-sm font-semibold tracking-tight text-ink">
{current?.title ?? "No Active Media Stream"}
</div>
<div className="font-mono text-[11px] text-[#8a8f98]">
<div className="font-mono text-[11px] text-ink-muted">
{current
? `${formatDuration(current.durationMs ?? 0)} · High Fidelity Stream`
: "Queue a track via URL below"}
@@ -153,9 +153,7 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
variant="ghost"
size="sm"
onClick={() => loop.mutateAsync()}
className={
media?.loop ? "border-[#7170ff] text-[#7170ff]" : ""
}
className={media?.loop ? "border-signal text-signal" : ""}
>
<Repeat className="size-3.5" />
</Button>
@@ -177,7 +175,7 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
</div>
{/* Quick URL Input */}
<div className="mt-4 flex gap-2 border-t border-white/[0.06] pt-4">
<div className="mt-4 flex gap-2 border-t border-hairline pt-4">
<Input
placeholder="Paste YouTube, SoundCloud, or Direct Stream URL..."
value={url}
@@ -211,19 +209,19 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
/>
<div className="mt-3 space-y-2">
{queueList.length === 0 ? (
<div className="py-8 text-center font-mono text-xs text-[#8a8f98]">
<div className="py-8 text-center font-mono text-xs text-ink-muted">
QUEUE EMPTY
</div>
) : (
queueList.map((item, idx) => (
<div
key={item.id ?? idx}
className="flex items-center justify-between rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-2.5 text-xs text-[#d0d6e0]"
className="flex items-center justify-between rounded-[6px] border border-hairline bg-surface-2 p-2.5 text-xs text-ink-soft"
>
<span className="truncate pr-2 font-medium">
{item.title}
</span>
<span className="font-mono text-[10px] text-[#8a8f98] shrink-0">
<span className="font-mono text-[10px] text-ink-muted shrink-0">
{formatDuration(item.durationMs ?? 0)}
</span>
</div>
services/frontend/src/app/(dashboard)/messages/view.tsx
+38 -38
View File
@@ -227,16 +227,16 @@ export function MessagesView({
return (
<div className="space-y-4">
{/* Tactical HUD Header Bar */}
<div className="flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] pb-3">
<div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
<div className="flex items-center gap-2.5">
<span className="h-2 w-2 rounded-full bg-[#7170ff] shadow-[0_0_8px_#7170ff]" />
<h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase">
<span className="h-2 w-2 rounded-full bg-signal shadow-[0_0_8px_var(--color-signal-glow)]" />
<h1 className="font-mono text-xs font-semibold tracking-wide text-ink uppercase">
Chat Log Stream · Ingestion Stream
</h1>
</div>
<div className="flex items-center gap-2 font-mono text-[11px] text-[#8a8f98]">
<div className="flex items-center gap-2 font-mono text-[11px] text-ink-muted">
<span>MODE:</span>
<span className="rounded bg-white/[0.04] px-1.5 py-0.5 font-medium text-[#7170ff] border border-white/[0.06]">
<span className="rounded bg-signal/15 px-2 py-0.5 font-medium text-signal border border-signal/30">
{searching ? "SEARCH_ACTIVE" : viewMode.toUpperCase()}
</span>
</div>
@@ -266,14 +266,14 @@ export function MessagesView({
onChange={(e) => setQuery(e.target.value)}
/>
</div>
<div className="flex items-center gap-1.5 rounded-[6px] border border-white/[0.08] bg-white/[0.02] p-0.5">
<div className="flex items-center gap-1.5 rounded-[6px] border border-hairline bg-surface-2 p-0.5">
<button
type="button"
onClick={() => setSemanticMode(false)}
className={`rounded-[4px] px-2.5 py-1 font-mono text-[10px] font-medium transition-all ${
!semanticMode
? "bg-white/[0.08] text-white border border-white/[0.12]"
: "text-[#8a8f98] hover:text-[#d0d6e0]"
? "bg-surface text-ink border border-hairline-focus shadow-xs"
: "text-ink-muted hover:text-ink"
}`}
>
EXACT
@@ -283,8 +283,8 @@ export function MessagesView({
onClick={() => setSemanticMode(true)}
className={`flex items-center gap-1 rounded-[4px] px-2.5 py-1 font-mono text-[10px] font-medium transition-all ${
semanticMode
? "bg-[#7170ff]/20 text-[#7170ff] border border-[#7170ff]/30"
: "text-[#8a8f98] hover:text-[#d0d6e0]"
? "bg-signal/20 text-signal border border-signal/40 shadow-xs"
: "text-ink-muted hover:text-ink"
}`}
>
<Sparkles className="size-3" />
@@ -292,14 +292,14 @@ export function MessagesView({
</button>
</div>
<div className="flex items-center gap-1.5 rounded-[6px] border border-white/[0.08] bg-white/[0.02] p-0.5">
<div className="flex items-center gap-1.5 rounded-[6px] border border-hairline bg-surface-2 p-0.5">
<button
type="button"
onClick={() => setViewMode("feed")}
className={`rounded-[4px] px-2.5 py-1 font-mono text-[10px] font-medium transition-all ${
viewMode === "feed"
? "bg-white/[0.08] text-white border border-white/[0.12]"
: "text-[#8a8f98] hover:text-[#d0d6e0]"
? "bg-surface text-ink border border-hairline-focus shadow-xs"
: "text-ink-muted hover:text-ink"
}`}
>
FEED
@@ -309,8 +309,8 @@ export function MessagesView({
onClick={() => setViewMode("timeline")}
className={`rounded-[4px] px-2.5 py-1 font-mono text-[10px] font-medium transition-all ${
viewMode === "timeline"
? "bg-white/[0.08] text-white border border-white/[0.12]"
: "text-[#8a8f98] hover:text-[#d0d6e0]"
? "bg-surface text-ink border border-hairline-focus shadow-xs"
: "text-ink-muted hover:text-ink"
}`}
>
TIMELINE
@@ -337,18 +337,18 @@ export function MessagesView({
{semantic.data.map((r, i) => (
<div
key={r.message_id ?? i}
className="flex items-start gap-3 rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-3 hover:border-white/[0.12] hover:bg-white/[0.04]"
className="hud-card flex items-start gap-3 p-3"
>
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2">
<span className="font-mono text-[10px] font-semibold text-[#7170ff]">
<span className="font-mono text-[10px] font-semibold text-signal">
{(r.score * 100).toFixed(0)}% RELEVANCE
</span>
<span className="ml-auto font-mono text-[10px] text-[#8a8f98]">
<span className="ml-auto font-mono text-[10px] text-ink-muted">
{formatRelativeTime(r.created_at)}
</span>
</div>
<div className="mt-1 text-xs text-[#d0d6e0] leading-relaxed">
<div className="mt-1 text-xs text-ink-soft leading-relaxed">
{r.content}
</div>
</div>
@@ -391,20 +391,20 @@ export function MessagesView({
{!searching && (
<div className="mb-2 flex items-center justify-center gap-2">
{loadMore.isPending ? (
<span className="flex items-center gap-1.5 font-mono text-xs text-[#8a8f98]">
<Loader2 className="size-3.5 animate-spin" />
<span className="flex items-center gap-1.5 font-mono text-xs text-ink-muted">
<Loader2 className="size-3.5 animate-spin text-signal" />
FETCHING EARLIER PACKETS...
</span>
) : hasMore && loadedPages < MAX_OLDER_PAGES ? (
<button
type="button"
onClick={loadOlder}
className="rounded-[5px] border border-white/[0.08] bg-white/[0.02] px-3 py-1 font-mono text-[10px] text-[#8a8f98] transition-colors hover:bg-white/[0.05] hover:text-[#f7f8f8]"
className="rounded-[5px] border border-hairline bg-surface-2 px-3 py-1 font-mono text-[10px] text-ink-muted transition-colors hover:bg-surface hover:text-ink"
>
↑ LOAD PREVIOUS BATCH
</button>
) : (
<span className="font-mono text-[10px] text-[#62666d]">
<span className="font-mono text-[10px] text-ink-faint">
{loadedPages >= MAX_OLDER_PAGES
? `CAPPED AT ${MAX_OLDER_PAGES} PAGES`
: "STREAM ROOT REACHED"}
@@ -432,9 +432,9 @@ export function MessagesView({
node.type === "date" ? (
<div
key={`date-${node.iso}`}
className="flex items-center gap-2 py-1 font-mono text-[10px] text-[#8a8f98]"
className="flex items-center gap-2 py-1 font-mono text-[10px] text-ink-muted"
>
<Calendar className="size-3 text-[#7170ff]" />
<Calendar className="size-3 text-signal" />
{node.label}
</div>
) : (
@@ -554,7 +554,7 @@ function MessageDetail({
</div>
</div>
<div className="rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-3 text-xs text-[#d0d6e0] leading-relaxed">
<div className="hud-card p-3 text-xs text-ink-soft leading-relaxed">
{renderMessageContent(m.edited_content ?? m.content, m.metadata) ||
"(no text content)"}
</div>
@@ -562,7 +562,7 @@ function MessageDetail({
{m.ai_analysis && (
<div>
<div className="eyebrow mb-1">AI heuristic reasoning</div>
<div className="rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-3 text-xs text-[#8a8f98] leading-relaxed">
<div className="hud-card p-3 text-xs text-ink-muted leading-relaxed">
{m.ai_analysis}
</div>
</div>
@@ -595,11 +595,11 @@ function MessageDetail({
href={a.discord_url ?? a.uploaded_url ?? "#"}
target="_blank"
rel="noreferrer"
className="flex items-center gap-2 rounded-[6px] border border-white/[0.06] bg-white/[0.02] px-3 py-2 text-xs text-[#d0d6e0] hover:border-white/[0.12] hover:text-[#f7f8f8]"
className="hud-card flex items-center gap-2 px-3 py-2 text-xs text-ink-soft hover:text-ink"
>
<ImageIcon className="size-3.5 text-[#7170ff]" />
<ImageIcon className="size-3.5 text-signal" />
<span className="flex-1 truncate">{a.filename}</span>
<span className="mono text-[10px] text-[#8a8f98]">
<span className="mono text-[10px] text-ink-muted">
{formatBytes(a.size)}
</span>
</a>
@@ -626,28 +626,28 @@ function MessageRow({
key={m.id}
type="button"
onClick={() => onSelect(m.id)}
className={`msg-feed-card flex w-full items-start gap-3 rounded-[6px] border p-2.5 text-left transition-all ${
className={`msg-feed-card flex w-full items-start gap-3 rounded-[8px] border p-2.5 text-left transition-all ${
selected === m.id
? "border-[#7170ff]/40 bg-[#7170ff]/10"
: "border-white/[0.06] bg-white/[0.02] hover:border-white/[0.12] hover:bg-white/[0.04]"
? "border-signal/50 bg-signal/10 shadow-xs"
: "border-hairline bg-surface-2 hover:border-hairline-focus hover:bg-surface"
}`}
>
<Avatar src={m.avatar_url} name={m.username} size={32} />
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2">
<span className="truncate text-xs font-semibold text-[#f7f8f8]">
<span className="truncate text-xs font-semibold text-ink">
{m.username}
</span>
<span className="font-mono text-[10px] text-[#8a8f98]">
<span className="font-mono text-[10px] text-ink-muted">
{getMessageChannelLabel(m)}
</span>
<span className="ml-auto font-mono text-[10px] text-[#8a8f98]">
<span className="ml-auto font-mono text-[10px] text-ink-muted">
{formatRelativeTime(m.created_at)}
</span>
</div>
<div className="mt-0.5 line-clamp-2 text-xs text-[#d0d6e0]">
<div className="mt-0.5 line-clamp-2 text-xs text-ink-soft">
{renderMessageContent(m.content, m.metadata) || (
<span className="italic text-[#8a8f98]">(empty / embed)</span>
<span className="italic text-ink-muted">(empty / embed)</span>
)}
</div>
</div>
services/frontend/src/app/(dashboard)/moderation/view.tsx
+8 -8
View File
@@ -91,21 +91,21 @@ export function ModerationView({
return (
<PageTransition>
<div ref={containerRef} className="space-y-4">
{/* Precision Sub-Header Bar */}
<div className="mod-tile flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] pb-3">
{/* Tactical HUD Header Bar */}
<div className="mod-tile flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
<div className="flex items-center gap-2.5">
<span
className={`h-2 w-2 rounded-full ${
failedRatio > 0.1
? "bg-[#f43f5e] shadow-[0_0_8px_#f43f5e]"
: "bg-[#7170ff] shadow-[0_0_8px_#7170ff]"
? "bg-vermilion shadow-[0_0_8px_var(--color-vermilion-glow)]"
: "bg-signal shadow-[0_0_8px_var(--color-signal-glow)]"
}`}
/>
<h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase">
<h1 className="font-mono text-xs font-semibold tracking-wide text-ink uppercase">
Moderation Intelligence Console
</h1>
</div>
<div className="flex items-center gap-1.5 rounded-[5px] border border-white/[0.06] bg-white/[0.02] p-0.5">
<div className="flex items-center gap-1.5 rounded-[6px] border border-hairline bg-surface-2 p-0.5">
{(["all", "flagged", "clean"] as const).map((mode) => (
<button
key={mode}
@@ -113,8 +113,8 @@ export function ModerationView({
onClick={() => setFilterMode(mode)}
className={`rounded-[4px] px-2.5 py-1 font-mono text-[10px] font-medium transition-all ${
filterMode === mode
? "bg-white/[0.08] text-white border border-white/[0.12]"
: "text-[#8a8f98] hover:text-[#d0d6e0]"
? "bg-surface text-ink border border-hairline-focus shadow-xs"
: "text-ink-muted hover:text-ink"
}`}
>
{mode.toUpperCase()}
services/frontend/src/app/(dashboard)/recordings/view.tsx
+16 -16
View File
@@ -92,16 +92,16 @@ export function RecordingsView({
return (
<div className="space-y-4">
{/* Tactical HUD Header Bar */}
<div className="flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] pb-3">
<div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
<div className="flex items-center gap-2.5">
<span className="h-2 w-2 rounded-full bg-[#7170ff] shadow-[0_0_8px_#7170ff]" />
<h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase">
<span className="h-2 w-2 rounded-full bg-signal shadow-[0_0_8px_var(--color-signal-glow)]" />
<h1 className="font-mono text-xs font-semibold tracking-wide text-ink uppercase">
Tape Deck · Captured Audio Archive
</h1>
</div>
<div className="flex items-center gap-2 font-mono text-[11px] text-[#8a8f98]">
<div className="flex items-center gap-2 font-mono text-[11px] text-ink-muted">
<span>STATUS:</span>
<span className="rounded bg-white/[0.04] px-1.5 py-0.5 font-medium text-[#7170ff] border border-white/[0.06]">
<span className="rounded bg-signal/15 px-2 py-0.5 font-medium text-signal border border-signal/30">
{totalRecordings} CLIPS_ONLINE
</span>
</div>
@@ -134,22 +134,22 @@ export function RecordingsView({
return (
<div
key={r.id}
className={`recording-deck-card flex flex-col justify-between rounded-[8px] border bg-white/[0.02] p-4 transition-all duration-200 hover:border-white/[0.14] hover:bg-white/[0.04] ${
className={`recording-deck-card hud-card flex flex-col justify-between p-4 transition-all duration-200 ${
isPlaying
? "border-[#7170ff]/50 bg-[#7170ff]/5 shadow-[0_0_24px_-10px_rgba(113,112,255,0.3)]"
: "border-white/[0.06]"
? "border-signal/50 bg-signal/10 shadow-[0_0_24px_-10px_var(--color-signal-glow)]"
: ""
}`}
>
<div>
{/* Header info */}
<div className="flex items-center gap-3 border-b border-white/[0.05] pb-3">
<div className="flex items-center gap-3 border-b border-hairline pb-3">
<Avatar src={r.avatar_url} name={r.username} size={36} />
<div className="min-w-0 flex-1">
<div className="truncate text-xs font-semibold text-ink">
{r.username}
</div>
<div className="flex items-center gap-1.5 font-mono text-[10px] text-ink-faint">
<Hash className="size-2.5 text-[#7170ff]" />
<Hash className="size-2.5 text-signal" />
<span className="truncate">
{r.channel_name ?? "voice"}
</span>
@@ -179,8 +179,8 @@ export function RecordingsView({
}
/>
) : (
<div className="flex items-center gap-1.5 rounded-[6px] border border-white/[0.06] bg-white/[0.02] px-3 py-2 font-mono text-[11px] text-[#8a8f98]">
<Loader2 className="size-3.5 animate-spin text-[#7170ff]" />
<div className="flex items-center gap-1.5 rounded-[6px] border border-hairline bg-surface-2 px-3 py-2 font-mono text-[11px] text-ink-muted">
<Loader2 className="size-3.5 animate-spin text-signal" />
{r.upload_status === "pending"
? "UPLOAD_PENDING..."
: r.upload_error
@@ -192,7 +192,7 @@ export function RecordingsView({
</div>
{/* Actions & File Stats */}
<div className="flex items-center justify-between border-t border-white/[0.04] pt-2.5">
<div className="flex items-center justify-between border-t border-hairline pt-2.5">
<span className="font-mono text-[10px] text-ink-faint">
SIZE: {formatBytes(r.size_bytes)}
</span>
@@ -202,16 +202,16 @@ export function RecordingsView({
href={r.download_url}
target="_blank"
rel="noreferrer"
className="inline-flex items-center gap-1 rounded-[5px] border border-white/[0.08] bg-white/[0.02] px-2 py-1 font-mono text-[10px] text-ink-soft transition-colors hover:border-white/[0.16] hover:bg-white/[0.05] hover:text-ink"
className="inline-flex items-center gap-1 rounded-[5px] border border-hairline bg-surface-2 px-2 py-1 font-mono text-[10px] text-ink-soft transition-colors hover:bg-surface hover:text-ink"
>
<Download className="size-3 text-[#7170ff]" /> RAW
<Download className="size-3 text-signal" /> RAW
</a>
)}
<button
type="button"
onClick={() => onDelete(r.id)}
disabled={del.isPending}
className="inline-flex items-center gap-1 rounded-[5px] border border-white/[0.08] bg-white/[0.02] px-2 py-1 font-mono text-[10px] text-[#f43f5e] transition-colors hover:border-[#f43f5e]/30 hover:bg-[#f43f5e]/10"
className="inline-flex items-center gap-1 rounded-[5px] border border-vermilion/30 bg-vermilion/10 px-2 py-1 font-mono text-[10px] text-vermilion transition-colors hover:bg-vermilion/20"
>
<Trash2 className="size-3" /> PURGE
</button>
services/frontend/src/app/(dashboard)/voice/view.tsx
+17 -17
View File
@@ -116,26 +116,26 @@ export function VoiceView({
<PageTransition>
<div ref={containerRef} className="space-y-4">
{/* Precision Sub-Header Bar */}
<div className="voice-tile flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] pb-3">
<div className="voice-tile flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
<div className="flex items-center gap-2.5">
<span
className={`h-2 w-2 rounded-full ${
connected
? "bg-[#10b981] shadow-[0_0_8px_#10b981]"
: "bg-[#8a8f98]"
? "bg-success shadow-[0_0_8px_var(--color-status-success)]"
: "bg-ink-muted"
}`}
/>
<h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase">
<h1 className="font-mono text-xs font-semibold tracking-wide text-ink uppercase">
Voice Spectrum & Stage Controls
</h1>
</div>
<div className="flex items-center gap-2 font-mono text-[11px]">
<span className="text-[#8a8f98]">STAGE:</span>
<span className="text-ink-muted">STAGE:</span>
<span
className={`rounded px-1.5 py-0.5 font-medium border ${
connected
? "border-[#10b981]/30 bg-[#10b981]/10 text-[#10b981]"
: "border-white/[0.06] bg-white/[0.02] text-[#8a8f98]"
? "border-success/30 bg-success/10 text-success"
: "border-hairline bg-surface-2 text-ink-muted"
}`}
>
{connected ? "LIVE_BRIDGE" : "OFFLINE"}
@@ -203,12 +203,12 @@ export function VoiceView({
<SectionHeader eyebrow="Telemetry" title="Input / Output Mix" />
<div className="mt-4 space-y-4">
<div>
<div className="flex justify-between text-xs font-medium text-[#d0d6e0]">
<div className="flex justify-between text-xs font-medium text-ink-soft">
<span className="flex items-center gap-1.5">
<Mic className="size-3.5 text-[#7170ff]" />
<Mic className="size-3.5 text-signal" />
Mic Sensitivity
</span>
<span className="font-mono text-[11px] text-[#8a8f98]">
<span className="font-mono text-[11px] text-ink-muted">
{micVol}%
</span>
</div>
@@ -222,17 +222,17 @@ export function VoiceView({
setMicVol(v);
mic.setVolume(v / 100);
}}
className="mt-2 h-1.5 w-full appearance-none rounded-full bg-white/[0.08] accent-[#7170ff]"
className="mt-2 h-1.5 w-full appearance-none rounded-full bg-surface-2 accent-signal"
/>
</div>
<div>
<div className="flex justify-between text-xs font-medium text-[#d0d6e0]">
<div className="flex justify-between text-xs font-medium text-ink-soft">
<span className="flex items-center gap-1.5">
<Volume2 className="size-3.5 text-[#10b981]" />
<Volume2 className="size-3.5 text-success" />
Monitor Output
</span>
<span className="font-mono text-[11px] text-[#8a8f98]">
<span className="font-mono text-[11px] text-ink-muted">
{listenVol}%
</span>
</div>
@@ -246,14 +246,14 @@ export function VoiceView({
setListenVol(v);
listen.setVolume(v / 100);
}}
className="mt-2 h-1.5 w-full appearance-none rounded-full bg-white/[0.08] accent-[#10b981]"
className="mt-2 h-1.5 w-full appearance-none rounded-full bg-surface-2 accent-success"
/>
</div>
</div>
</div>
<div className="mt-6 border-t border-white/[0.06] pt-3">
<div className="font-mono text-[10px] text-[#8a8f98]">
<div className="mt-6 border-t border-hairline pt-3">
<div className="font-mono text-[10px] text-ink-muted">
CODEC: OPUS 48KHZ · LOW_LATENCY
</div>
</div>