refactor(frontend): finish shadcn→custom primitive migration (green build)

- Remove tw-animate-css import + dead src/components/ui shadcn tree - Convert 7 orphaned components (moderation, analysis, guild-selector, voice/activity-timeline, shared/empty+error) to new primitives - Add missing moderation/view.tsx; analysis uses SearchPanel directly - globals.css now uses new signal-driven ops-console tokens - tsc --noEmit clean, next build green (11 routes), local smoke 200
2026-08-14 10:49:44 +07:00
parent 5816e94a63
commit 5bbf75a65b
130 changed files with 4431 additions and 12978 deletions
@@ -0,0 +1,86 @@
+"use client";
+
+import { Avatar } from "@/components/primitives/avatar";
+import { renderMessageContent } from "@/lib/format";
+import type { AiSeverity, MessageRecord } from "@/lib/types";
+import { cn } from "@/lib/utils";
+import { AiStatusBadge, SeverityTick } from "./ai-status-badge";
+
+function fmtTime(ts?: number): string {
+  if (!ts) return "";
+  return new Date(ts * 1000).toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  });
+}
+
+const severityColor: Record<NonNullable<AiSeverity>, string> = {
+  none: "text-[var(--color-ink-soft)]",
+  low: "text-[var(--color-amber)]",
+  medium: "text-[var(--color-amber)]",
+  high: "text-orange-500",
+  critical: "text-[var(--color-vermilion)]",
+};
+
+export interface MessageEntryProps {
+  message: MessageRecord;
+  selected: boolean;
+  onSelect: () => void;
+  onAvatarClick?: () => void;
+}
+
+export function MessageEntry({
+  message: msg,
+  selected,
+  onSelect,
+}: MessageEntryProps) {
+  const severity = (msg.ai_severity ?? "none") as AiSeverity;
+  const status = msg.ai_status ?? null;
+
+  return (
+    <div
+      data-selected={selected}
+      onClick={onSelect}
+      className={cn(
+        "group relative mb-1.5 flex items-start gap-2.5 rounded-[var(--radius-r)] p-2.5 cursor-pointer",
+        "transition-all hover:bg-[var(--color-surface-2)]",
+        selected && "bg-[var(--color-signal)]/6",
+      )}
+    >
+      <SeverityTick severity={severity} />
+      <Avatar src={msg.avatar_url} name={msg.username} size={32} />
+      <div className="min-w-0 flex-1 space-y-1">
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="text-sm font-medium">{msg.username}</span>
+          <span className="text-xs text-[var(--color-ink-soft)] mono">
+            {fmtTime(msg.created_at)}
+          </span>
+          {status && <AiStatusBadge status={status} />}
+          {severity !== "none" && (
+            <span
+              className={cn(
+                "text-[10px] font-bold uppercase",
+                severityColor[severity],
+              )}
+            >
+              {severity}
+            </span>
+          )}
+        </div>
+        <div className="text-sm leading-relaxed">
+          {msg.deleted_at ? (
+            <span className="italic text-[var(--color-ink-soft)]">
+              message deleted
+            </span>
+          ) : (
+            renderMessageContent(
+              msg.edited_content ?? msg.content,
+              msg.metadata,
+            )
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}