Which direction fits your commit philosophy better?

2026-06-03 03:16:06 +07:00
parent e2003cd9f6
commit 20681ef308
11 changed files with 986 additions and 689 deletions
@@ -35,7 +35,7 @@ export function ActivityChart({ hourly, loading }: ActivityChartProps) {
  });

  return (
-    <Card className="col-span-1 lg:col-span-2 glass border-white/5">
+    <Card className="col-span-1 lg:col-span-2">
      <CardHeader className="pb-2">
        <CardTitle className="text-sm font-semibold">
          Aktivitas per Jam
@@ -46,9 +46,8 @@ export function ActivityChart({ hourly, loading }: ActivityChartProps) {
      </CardHeader>
      <CardContent>
        <div className="space-y-3">
-          <div className="grid grid-cols-4 gap-2 text-[10px] uppercase tracking-wider text-muted-foreground">
+          <div className="grid grid-cols-3 gap-2 text-[10px] uppercase tracking-wider text-muted-foreground">
            <span>Clean</span>
-            <span>Warned</span>
            <span>Flagged</span>
            <span>Error</span>
          </div>
@@ -56,13 +55,12 @@ export function ActivityChart({ hourly, loading }: ActivityChartProps) {
            {data.map((bucket) => {
              const total = Math.max(bucket.total, 1);
              const clean = bucket.clean / total;
-              const warned = bucket.warned / total;
              const flagged = bucket.flagged / total;
              const error = bucket.error / total;
              return (
                <div
                  key={bucket.hour}
-                  className="grid gap-1 rounded-xl border border-border bg-background/50 p-3"
+                  className="grid gap-1 rounded-xl border border-sky-100 bg-white p-3"
                >
                  <div className="flex items-center justify-between text-[11px] text-muted-foreground">
                    <span className="font-medium text-foreground">
@@ -70,21 +68,17 @@ export function ActivityChart({ hourly, loading }: ActivityChartProps) {
                    </span>
                    <span>{bucket.total} pesan</span>
                  </div>
-                  <div className="flex h-3 overflow-hidden rounded-full bg-muted">
+                  <div className="flex h-3 overflow-hidden rounded-full bg-sky-50">
                    <div
-                      className="bg-emerald-500/80"
+                      className="bg-gradient-to-r from-primary to-pink-300"
                      style={{ width: `${clean * 100}%` }}
                    />
                    <div
-                      className="bg-amber-500/80"
-                      style={{ width: `${warned * 100}%` }}
-                    />
-                    <div
-                      className="bg-red-500/80"
+                      className="bg-accent/70"
                      style={{ width: `${flagged * 100}%` }}
                    />
                    <div
-                      className="bg-orange-500/80"
+                      className="bg-orange-300/70"
                      style={{ width: `${error * 100}%` }}
                    />
                  </div>
@@ -100,8 +94,8 @@ export function ActivityChart({ hourly, loading }: ActivityChartProps) {

 function LoadingBox() {
  return (
-    <Card className="col-span-1 flex h-65 items-center justify-center text-sm text-muted-foreground lg:col-span-2 glass border-white/5">
-      <span className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+    <Card className="col-span-1 flex h-65 items-center justify-center text-sm text-muted-foreground lg:col-span-2">
+      <span className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
      <span className="ml-2">Memuat data...</span>
    </Card>
  );
@@ -109,7 +103,7 @@ function LoadingBox() {

 function EmptyBox({ text }: { text: string }) {
  return (
-    <Card className="col-span-1 flex h-65 items-center justify-center text-sm text-muted-foreground lg:col-span-2 glass border-white/5">
+    <Card className="col-span-1 flex h-65 items-center justify-center text-sm text-muted-foreground lg:col-span-2">
      {text}
    </Card>
  );
@@ -38,7 +38,7 @@ export function ControlBar({
    <Card>
      <CardHeader className="pb-3">
        <CardTitle className="flex items-center gap-2 text-lg">
-          <BarChart3 className="h-5 w-5 text-muted-foreground" />
+          <BarChart3 className="h-5 w-5 text-primary" />
          Analisis Moderasi
        </CardTitle>
        <CardDescription>
@@ -46,7 +46,7 @@ export function ControlBar({
            <>
              Pantau statistik, tren topik, dan aktivitas user di seluruh
              channel{" "}
-              <span className="font-medium text-foreground">{guildName}</span>.
+              <span className="font-medium text-primary">{guildName}</span>.
            </>
          ) : (
            "Pantau statistik, tren topik, dan aktivitas user."
@@ -55,16 +55,16 @@ export function ControlBar({
      </CardHeader>
      <CardContent>
        <div className="flex flex-wrap items-center gap-3">
-          <div className="flex items-center gap-1 rounded-md bg-muted p-0.5">
+          <div className="flex items-center gap-1 rounded-xl bg-sky-50 p-0.5 ring-1 ring-sky-200/50">
            {TIME_RANGES.map((tr) => (
              <button
                key={tr.value}
                type="button"
                onClick={() => onHoursChange(tr.value)}
                className={cn(
-                  "rounded-sm px-2.5 py-1 text-xs font-medium transition-colors",
+                  "rounded-lg px-2.5 py-1 text-xs font-medium transition-all",
                  hours === tr.value
-                    ? "bg-background text-foreground shadow-sm"
+                    ? "bg-primary text-white shadow-sm"
                    : "text-muted-foreground hover:text-foreground",
                )}
              >
@@ -77,11 +77,11 @@ export function ControlBar({
            disabled={isFetching}
            variant="outline"
            size="sm"
-            className="ml-auto shrink-0"
+            className="ml-auto shrink-0 rounded-xl border-primary/40 text-primary hover:bg-primary/10 hover:text-primary"
          >
            {isFetching ? (
              <span className="flex items-center gap-1.5">
-                <span className="h-3 w-3 animate-spin rounded-full border-2 border-current border-t-transparent" />
+                <span className="h-3 w-3 animate-spin rounded-full border-2 border-primary border-t-transparent" />
                Memuat...
              </span>
            ) : (
@@ -27,6 +27,16 @@ export function SummaryCards({
      ? Math.round((messages.flagged / messages.total) * 100)
      : 0;

+  const icons: Record<string, string> = {
+    "Total Pesan": "💬",
+    "Rata-rata/jam": "📊",
+    Clean: "✅",
+    Flagged: "🚩",
+    Pending: "⏳",
+    "User Aktif": "👤",
+    Channel: "📡",
+  };
+
  const cards = [
    {
      label: "Total Pesan",
@@ -41,37 +51,42 @@ export function SummaryCards({
    {
      label: "Clean",
      value: cleanPct > 0 ? `${cleanPct}%` : "—",
-      accent: "text-emerald-400",
+      accent: "text-primary",
    },
    {
      label: "Flagged",
      value: flaggedPct > 0 ? `${flaggedPct}%` : "—",
-      accent: "text-red-400",
+      accent: "text-accent",
    },
    {
      label: "Pending",
      value: formatNum(messages?.pending),
-      accent: "text-slate-400",
+      accent: "text-muted-foreground",
    },
    {
      label: "User Aktif",
      value: formatNum(activeUsersCount),
-      accent: "text-violet-400",
+      accent: "text-primary",
    },
    {
      label: "Channel",
      value: formatNum(totalChannels),
-      accent: "text-blue-400",
+      accent: "text-primary",
    },
  ];

  return (
    <div className="grid grid-cols-2 gap-2 sm:grid-cols-4 lg:grid-cols-8">
      {cards.map((card) => (
-        <Card key={card.label} className="overflow-hidden glass border-white/5">
+        <Card key={card.label} className="overflow-hidden">
          <CardContent className="p-3">
-            <div className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
-              {card.label}
+            <div className="flex items-center gap-1.5">
+              <span className="flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-[10px]">
+                {icons[card.label] ?? "📋"}
+              </span>
+              <div className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
+                {card.label}
+              </div>
            </div>
            <div
              className={cn(
@@ -43,10 +43,9 @@ export function TrendChart({ trend, loading }: TrendChartProps) {
      <CardContent>
        <div className="space-y-4">
          <div className="flex flex-wrap gap-3 text-[10px] uppercase tracking-wider text-muted-foreground">
-            <LegendDot color="bg-blue-500" label="Total" />
-            <LegendDot color="bg-emerald-500" label="Clean" />
-            <LegendDot color="bg-amber-500" label="Warned" />
-            <LegendDot color="bg-red-500" label="Flagged" />
+            <LegendDot color="bg-primary" label="Total" />
+            <LegendDot color="bg-emerald-400" label="Clean" />
+            <LegendDot color="bg-accent" label="Flagged" />
          </div>

          <div className="overflow-hidden rounded-2xl border border-border bg-background/50 p-4">
@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { motion } from "framer-motion";
 import { ActivityChart } from "./components/ActivityChart";
 import { ControlBar } from "./components/ControlBar";
 import { Heatmap } from "./components/Heatmap";
@@ -8,6 +9,8 @@ import { TrendChart } from "./components/TrendChart";
 import { UserTable } from "./components/UserTable";
 import { ViolatorTable } from "./components/ViolatorTable";
 import { useAnalytics } from "./hooks/useAnalytics";
+import { cardStagger, cardItem } from "../../shared/hooks/useFramerStagger";
+import { EmptyStateMascot } from "../../widgets/mascot/ChibiMascot";

 interface AnalyticsPanelProps {
  guildId: string;
@@ -43,7 +46,7 @@ export function AnalyticsPanel({ guildId, guildName }: AnalyticsPanelProps) {

  if (error && !analyticsMessages) {
    return (
-      <div className="rounded-lg border border-red-500/30 bg-red-500/5 p-4 text-sm text-red-300">
+      <div className="rounded-2xl border border-red-300/40 bg-red-50/60 p-6 text-sm text-red-600 shadow-sm">
        {error}
      </div>
    );
@@ -51,46 +54,61 @@ export function AnalyticsPanel({ guildId, guildName }: AnalyticsPanelProps) {

  if (!guildId) {
    return (
-      <div className="flex min-h-[300px] flex-col items-center justify-center gap-3 rounded-lg border border-dashed p-8">
-        <p className="text-sm text-muted-foreground">
-          Menunggu konfigurasi guild...
-        </p>
-      </div>
+      <EmptyStateMascot variant="thinking" message="Menunggu konfigurasi guild..." />
    );
  }

  return (
-    <div className="flex flex-col gap-4">
-      <ControlBar
-        guildName={guildName}
-        hours={hours}
-        isFetching={isFetching}
-        onHoursChange={setHours}
-        onRefresh={() => {
-          refresh();
-          refreshViolators();
-        }}
-      />
-      <SummaryCards
-        messages={analyticsMessages}
-        activeUsersCount={activeUsersCount}
-        totalChannels={totalChannels}
-        loading={loading}
-      />
-      <div className="grid grid-cols-3 gap-4">
-        <ActivityChart hourly={hourly} loading={loading} />
-        <div className="col-span-1">
-          <TopicList topics={topics} loading={loading} />
+    <motion.div
+      className="flex flex-col gap-4"
+      variants={cardStagger}
+      initial="initial"
+      animate="animate"
+    >
+      <motion.div variants={cardItem}>
+        <ControlBar
+          guildName={guildName}
+          hours={hours}
+          isFetching={isFetching}
+          onHoursChange={setHours}
+          onRefresh={() => {
+            refresh();
+            refreshViolators();
+          }}
+        />
+      </motion.div>
+      <motion.div variants={cardItem}>
+        <SummaryCards
+          messages={analyticsMessages}
+          activeUsersCount={activeUsersCount}
+          totalChannels={totalChannels}
+          loading={loading}
+        />
+      </motion.div>
+      <motion.div variants={cardItem}>
+        <div className="grid grid-cols-3 gap-4">
+          <ActivityChart hourly={hourly} loading={loading} />
+          <div className="col-span-1">
+            <TopicList topics={topics} loading={loading} />
+          </div>
        </div>
-      </div>
-      {hours >= 48 && <TrendChart trend={trend} loading={loading} />}
-      <div className="grid grid-cols-3 gap-4">
-        <Heatmap cells={heatmap} loading={loading} />
-        <div className="col-span-1">
-          <UserTable users={topUsers} loading={loading} />
+      </motion.div>
+      {hours >= 48 && (
+        <motion.div variants={cardItem}>
+          <TrendChart trend={trend} loading={loading} />
+        </motion.div>
+      )}
+      <motion.div variants={cardItem}>
+        <div className="grid grid-cols-3 gap-4">
+          <Heatmap cells={heatmap} loading={loading} />
+          <div className="col-span-1">
+            <UserTable users={topUsers} loading={loading} />
+          </div>
        </div>
-      </div>
-      <ViolatorTable users={violators} loading={loading} />
-    </div>
+      </motion.div>
+      <motion.div variants={cardItem}>
+        <ViolatorTable users={violators} loading={loading} />
+      </motion.div>
+    </motion.div>
  );
 }
@@ -1,6 +1,7 @@
 import { Lock } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { login } from "../../shared/api/client";
+import { useGsapTransition } from "../../shared/hooks/useGsapTransition";
 import {
  Button,
  Card,
@@ -10,6 +11,7 @@ import {
  CardTitle,
  Input,
 } from "../../shared/ui";
+import { ChibiMascot } from "../../widgets/mascot/ChibiMascot";

 interface AuthOverlayProps {
  onAuthenticated: () => void;
@@ -19,6 +21,11 @@ export function AuthOverlay({ onAuthenticated }: AuthOverlayProps) {
  const [password, setPassword] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
+  const { pageRef, animateIn } = useGsapTransition("auth");
+
+  useEffect(() => {
+    animateIn();
+  }, [animateIn]);

  const handleSubmit = async (e: { preventDefault: () => void }) => {
    e.preventDefault();
@@ -36,11 +43,14 @@ export function AuthOverlay({ onAuthenticated }: AuthOverlayProps) {
  };

  return (
-    <div className="flex items-center justify-center p-4">
-      <Card className="w-full max-w-md">
+    <div ref={pageRef} className="flex items-center justify-center p-4">
+      <Card className="w-full max-w-md border-primary/30 shadow-lg shadow-primary/10">
        <CardHeader className="text-center">
-          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
-            <Lock className="h-6 w-6" />
+          <div className="mx-auto mb-4 flex items-center justify-center gap-3">
+            <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
+              <Lock className="h-6 w-6" />
+            </div>
+            <ChibiMascot variant="peeking" size="sm" />
          </div>
          <CardTitle>Admin Access Required</CardTitle>
          <CardDescription>
@@ -1,5 +1,6 @@
 import type { ActiveSpeaker } from "../../../shared/api/client";
 import { Skeleton } from "../../../shared/ui";
+import { EmptyStateMascot } from "../../../widgets/mascot/ChibiMascot";

 interface ActiveSpeakersProps {
  speakers: ActiveSpeaker[];
@@ -8,9 +9,7 @@ interface ActiveSpeakersProps {
 export function ActiveSpeakers({ speakers }: ActiveSpeakersProps) {
  if (speakers.length === 0) {
    return (
-      <div className="rounded-xl border border-dashed border-border p-6 text-center text-sm text-muted-foreground">
-        No active speakers.
-      </div>
+      <EmptyStateMascot variant="sleeping" message="No active speakers~" />
    );
  }

@@ -22,16 +21,18 @@ export function ActiveSpeakers({ speakers }: ActiveSpeakersProps) {
        return (
          <div
            key={key}
-            className="flex items-center gap-3 rounded-xl border border-border bg-background/60 p-3"
+            className="flex items-center gap-3 rounded-xl border border-sky-200 bg-white p-3"
          >
            <img
              src={s.avatar}
              alt=""
-              className="h-8 w-8 rounded-full object-cover"
+              className="h-8 w-8 rounded-full object-cover ring-2 ring-[#7EC8E3]/40"
            />
            <div className="min-w-0">
              <div className="truncate text-sm font-medium">{s.username}</div>
-              <div className="text-xs text-emerald-300">Speaking</div>
+              <div className="text-xs font-medium text-emerald-700">
+                Speaking
+              </div>
            </div>
          </div>
        );
@@ -21,20 +21,21 @@ export function AudioVisualizer({ levels }: AudioVisualizerProps) {
    const barWidth = width / levels.length;
    const maxBarHeight = height * 0.85;

+    // Sky-blue to pink gradient
+    const gradient = ctx.createLinearGradient(0, 0, 0, height);
+    gradient.addColorStop(0, "#7EC8E3");
+    gradient.addColorStop(1, "#FFB7C5");
+
    for (let i = 0; i < levels.length; i++) {
      const level = levels[i];
      const barHeight = Math.min(maxBarHeight, level * maxBarHeight);
      const x = i * barWidth;
      const y = height - barHeight;

-      // Gradient color based on level
-      const hue = 199 - level * 199;
-      const saturation = 89;
-      const lightness = 48 + level * 20;
-      ctx.fillStyle = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+      ctx.fillStyle = gradient;

-      // Rounded bar
-      const radius = barWidth * 0.3;
+      // More rounded bar
+      const radius = barWidth * 0.4;
      ctx.beginPath();
      ctx.moveTo(x + radius, y);
      ctx.lineTo(x + barWidth - radius, y);
@@ -53,7 +54,7 @@ export function AudioVisualizer({ levels }: AudioVisualizerProps) {
        ref={canvasRef}
        width={512}
        height={128}
-        className="w-full rounded-xl bg-muted/30"
+        className="w-full rounded-xl bg-sky-50/30"
        style={{ height: "128px" }}
      />
    </div>
@@ -36,10 +36,10 @@ export function VoiceConnectionCard({
  onStreamingToggle,
 }: VoiceConnectionCardProps) {
  return (
-    <div className="rounded-2xl border border-border bg-card shadow-sm">
+    <div className="rounded-2xl border border-sky-200 bg-white shadow-md">
      <div className="p-6">
        <h3 className="flex items-center gap-2 text-lg font-semibold tracking-tight">
-          <Radio className="h-5 w-5" /> Voice Bridge
+          <Radio className="h-5 w-5 text-[#7EC8E3]" /> Voice Bridge
        </h3>
        <p className="mt-1 text-sm text-muted-foreground">
          Join a Discord voice channel, listen, and transmit audio.
@@ -47,7 +47,7 @@ export function VoiceConnectionCard({

        <div className="mt-4 grid gap-4 md:grid-cols-2">
          <div className="space-y-2">
-            <label className="text-sm font-medium">Guild</label>
+            <label className="text-sm font-medium text-foreground">Guild</label>
            <Select
              value={selectedGuild}
              onChange={(e) => onGuildChange(e.target.value)}
@@ -56,7 +56,7 @@ export function VoiceConnectionCard({
            />
          </div>
          <div className="space-y-2">
-            <label className="text-sm font-medium">Voice Channel</label>
+            <label className="text-sm font-medium text-foreground">Voice Channel</label>
            <Select
              value={selectedChannel}
              onChange={(e) => onChannelChange(e.target.value)}
@@ -73,6 +73,7 @@ export function VoiceConnectionCard({
          <Button
            disabled={!selectedGuild || !selectedChannel || voiceLoading}
            onClick={onJoin}
+            className="bg-[#7EC8E3] text-white hover:bg-[#7EC8E3]/80"
          >
            {status.connected ? "Reconnect" : "Join Voice"}
          </Button>
@@ -91,7 +92,7 @@ export function VoiceConnectionCard({
            {isListening ? "Stop Listening" : "Listen"}
          </Button>
          <Button
-            variant={isStreaming ? "destructive" : "default"}
+            variant={isStreaming ? "secondary" : "outline"}
            onClick={onStreamingToggle}
          >
            <Radio className="mr-1.5 h-4 w-4" />{" "}
@@ -1,5 +1,6 @@
 // ─── Live Panel — thin composition layer ────────────────────────────────────

+import { motion } from "framer-motion";
 import { Mic, MonitorUp, Music2 } from "lucide-react";
 import type {
  ActiveSpeaker,
@@ -8,6 +9,7 @@ import type {
  MediaState,
  VoiceStatus,
 } from "../../shared/api/client";
+import { cardItem, cardStagger } from "../../shared/hooks/useFramerStagger";
 import {
  Card,
  CardContent,
@@ -78,25 +80,35 @@ export function LivePanel({
  onVolumeChange,
 }: LivePanelProps) {
  return (
-    <div className="grid gap-6">
-      <VoiceConnectionCard
-        guilds={guilds}
-        voiceChannels={voiceChannels}
-        selectedGuild={selectedGuild}
-        selectedChannel={selectedChannel}
-        status={status}
-        voiceLoading={voiceLoading}
-        isListening={isListening}
-        isStreaming={isStreaming}
-        onGuildChange={onGuildChange}
-        onChannelChange={onChannelChange}
-        onJoin={onJoin}
-        onDisconnect={onDisconnect}
-        onListenToggle={onListenToggle}
-        onStreamingToggle={onStreamingToggle}
-      />
+    <motion.div
+      variants={cardStagger}
+      initial="initial"
+      animate="animate"
+      className="grid gap-6"
+    >
+      <motion.div variants={cardItem}>
+        <VoiceConnectionCard
+          guilds={guilds}
+          voiceChannels={voiceChannels}
+          selectedGuild={selectedGuild}
+          selectedChannel={selectedChannel}
+          status={status}
+          voiceLoading={voiceLoading}
+          isListening={isListening}
+          isStreaming={isStreaming}
+          onGuildChange={onGuildChange}
+          onChannelChange={onChannelChange}
+          onJoin={onJoin}
+          onDisconnect={onDisconnect}
+          onListenToggle={onListenToggle}
+          onStreamingToggle={onStreamingToggle}
+        />
+      </motion.div>

-      <div className="grid gap-6 xl:grid-cols-[1fr_320px]">
+      <motion.div
+        variants={cardItem}
+        className="grid gap-6 xl:grid-cols-[1fr_320px]"
+      >
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-base">Live Audio</CardTitle>
@@ -113,44 +125,48 @@ export function LivePanel({
            <ActiveSpeakers speakers={activeSpeakers} />
          </CardContent>
        </Card>
-      </div>
+      </motion.div>

-      <NowPlaying current={mediaState.current} queue={mediaState.queue} />
+      <motion.div variants={cardItem}>
+        <NowPlaying current={mediaState.current} queue={mediaState.queue} />
+      </motion.div>

-      <Tabs defaultValue="music">
-        <TabsList className="grid w-full grid-cols-3">
-          <TabsTrigger value="music">
-            <Music2 className="mr-1.5 h-4 w-4" /> Music
-          </TabsTrigger>
-          <TabsTrigger value="screen">
-            <MonitorUp className="mr-1.5 h-4 w-4" /> Screen Share
-          </TabsTrigger>
-          <TabsTrigger value="recordings">
-            <Mic className="mr-1.5 h-4 w-4" /> Recordings
-          </TabsTrigger>
-        </TabsList>
-        <TabsContent value="music">
-          <MusicSubPanel
-            volume={mediaState.musicVolume}
-            onVolumeChange={onVolumeChange}
-            onQueue={onQueueMusic}
-            onSkip={onSkip}
-            onStop={onStop}
-            loading={mediaLoading}
-          />
-        </TabsContent>
-        <TabsContent value="screen">
-          <ScreenSubPanel
-            onStart={onStartScreen}
-            onSkip={onSkip}
-            onStop={onStop}
-            loading={mediaLoading}
-          />
-        </TabsContent>
-        <TabsContent value="recordings">
-          <RecordingsSubPanel />
-        </TabsContent>
-      </Tabs>
-    </div>
+      <motion.div variants={cardItem}>
+        <Tabs defaultValue="music">
+          <TabsList className="grid w-full grid-cols-3">
+            <TabsTrigger value="music">
+              <Music2 className="mr-1.5 h-4 w-4" /> Music
+            </TabsTrigger>
+            <TabsTrigger value="screen">
+              <MonitorUp className="mr-1.5 h-4 w-4" /> Screen Share
+            </TabsTrigger>
+            <TabsTrigger value="recordings">
+              <Mic className="mr-1.5 h-4 w-4" /> Recordings
+            </TabsTrigger>
+          </TabsList>
+          <TabsContent value="music">
+            <MusicSubPanel
+              volume={mediaState.musicVolume}
+              onVolumeChange={onVolumeChange}
+              onQueue={onQueueMusic}
+              onSkip={onSkip}
+              onStop={onStop}
+              loading={mediaLoading}
+            />
+          </TabsContent>
+          <TabsContent value="screen">
+            <ScreenSubPanel
+              onStart={onStartScreen}
+              onSkip={onSkip}
+              onStop={onStop}
+              loading={mediaLoading}
+            />
+          </TabsContent>
+          <TabsContent value="recordings">
+            <RecordingsSubPanel />
+          </TabsContent>
+        </Tabs>
+      </motion.div>
+    </motion.div>
  );
 }