From d65dc11c73a884c02439139e5339822f80af6115 Mon Sep 17 00:00:00 2001
From: asepharyana <superaseph@gmail.com>
Date: Fri, 14 Aug 2026 11:28:08 +0700
Subject: [PATCH] fix(frontend): restore voice guild/channel picker + media URL
 queue input

- voice/view: add Select for guild + voice channels + Connect/Disconnect bar
- media/view: restore URL queue input + Screen toggle + Queue button
(tsc clean, next build green)
---
 .../src/app/(dashboard)/media/view.tsx        |  85 +++++---
 .../src/app/(dashboard)/voice/view.tsx        | 206 ++++++++++--------
 2 files changed, 164 insertions(+), 127 deletions(-)

diff --git a/services/frontend/src/app/(dashboard)/media/view.tsx b/services/frontend/src/app/(dashboard)/media/view.tsx
index e1fc536..c95f090 100644
--- a/services/frontend/src/app/(dashboard)/media/view.tsx
+++ b/services/frontend/src/app/(dashboard)/media/view.tsx
@@ -1,30 +1,23 @@
 "use client";
 
-import {
-  Pause,
-  Play,
-  Repeat2,
-  SkipForward,
-  Square,
-  Volume2,
-} from "lucide-react";
+import { Pause, Play, Repeat2, SkipForward, Square, Volume2 } from "lucide-react";
 import { motion } from "motion/react";
-import { useEffect } from "react";
+import { useState } from "react";
 import { Waveform } from "@/components/charts/waveform";
 import { StaggerGroup, StaggerItem } from "@/components/motion/stagger";
-import { Avatar } from "@/components/primitives/avatar";
 import { Badge } from "@/components/primitives/badge";
 import { Button } from "@/components/primitives/button";
+import { Input } from "@/components/primitives/input";
 import { Progress } from "@/components/primitives/progress";
 import {
   useMediaLoop,
+  useMediaQueue,
   useMediaSkip,
   useMediaState,
   useMediaStop,
   useMediaWsSync,
 } from "@/hooks";
 import type { MediaState } from "@/lib/types";
-import { cn } from "@/lib/utils";
 import { useWebSocket } from "@/lib/ws/context";
 
 export default function MediaView({
@@ -33,7 +26,8 @@ export default function MediaView({
   initialStatus?: MediaState;
 }) {
   const ws = useWebSocket();
-  const { data: state, mutate } = useMediaState(initialStatus);
+  const { data: state } = useMediaState(initialStatus);
+  const queueMut = useMediaQueue();
   const skip = useMediaSkip();
   const stop = useMediaStop();
   const loopMut = useMediaLoop();
@@ -45,23 +39,55 @@ export default function MediaView({
   const loop = state?.loop ?? false;
 
   const duration = current?.durationMs ?? 0;
-  const [seed] = useWaveformSeed();
+  const [queueUrl, setQueueUrl] = useState("");
+  const [screenMode, setScreenMode] = useState(false);
+
+  const handleQueue = () => {
+    if (!queueUrl.trim()) return;
+    queueMut.mutate({ url: queueUrl.trim(), mode: screenMode ? "screen" : "music" });
+    setQueueUrl("");
+  };
 
   return (
     <div className="flex flex-col gap-5">
+      {/* URL queue input */}
+      <div className="flex gap-2">
+        <Input
+          placeholder="Queue a URL (YouTube, audio file…)"
+          value={queueUrl}
+          onChange={(e) => setQueueUrl(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && handleQueue()}
+          className="flex-1 h-9"
+        />
+        <Button
+          size="sm"
+          variant={screenMode ? "primary" : "ghost"}
+          onClick={() => setScreenMode((v) => !v)}
+          title="Queue as Discord GoLive screenshare instead of audio playback"
+        >
+          Screen
+        </Button>
+        <Button
+          size="sm"
+          onClick={handleQueue}
+          disabled={!queueUrl.trim() || queueMut.isPending}
+        >
+          <Play className="size-4 mr-1.5" />
+          Queue
+        </Button>
+      </div>
+
       {/* Turntable hero */}
       <div className="flex items-center gap-6 surface scan-tick flex-wrap p-5">
         {current && (
           <motion.div
-            className={cn(
-              "relative mx-auto size-[160px] rounded-full",
-              playing && "animate-spin-disc",
-              !playing && "animate-spin-disc paused",
-            )}
+            className={`relative mx-auto size-[160px] rounded-full ${
+              playing ? "animate-spin-disc" : "animate-spin-disc paused"
+            }`}
           >
             <img
               src={current.thumbnailUrl ?? "/favicon.ico"}
-              alt={current.title}
+              alt={current.title ?? "cover"}
               className="size-full rounded-full object-cover ring-4 ring-[var(--color-signal)]/20"
               style={{ animationPlayState: playing ? "running" : "paused" }}
             />
@@ -97,11 +123,7 @@ export default function MediaView({
             variant="primary"
             onClick={() => loopMut.mutate(!loop)}
           >
-            {playing ? (
-              <Pause className="size-5" />
-            ) : (
-              <Play className="size-5" />
-            )}
+            {playing ? <Pause className="size-5" /> : <Play className="size-5" />}
           </Button>
         </StaggerItem>
         <StaggerItem>
@@ -131,9 +153,9 @@ export default function MediaView({
             <Badge tone="neutral">{loop ? "loop" : "queue"}</Badge>
           </div>
           <div className="flex flex-col gap-1">
-            {queue.map((item, i) => (
+            {queue.map((item) => (
               <motion.div
-                key={item.id ?? i}
+                key={item.id ?? item.source}
                 layout
                 initial={{ opacity: 0, x: 20 }}
                 animate={{ opacity: 1, x: 0 }}
@@ -141,7 +163,7 @@ export default function MediaView({
                 className="flex items-center gap-2.5 rounded-[var(--radius-r-control)] px-2 py-1.5 text-sm hover:bg-[var(--color-surface-2)]"
               >
                 <Waveform
-                  seed={item.id ?? String(i)}
+                  seed={item.id ?? item.source}
                   bars={12}
                   height={20}
                   className="w-16"
@@ -161,12 +183,3 @@ function formatMs(ms: number): string {
   const s = Math.floor((ms % 60000) / 1000);
   return `${m}:${s.toString().padStart(2, "0")}`;
 }
-
-function useWaveformSeed() {
-  const [seed] = useStateValue();
-  return [seed];
-}
-function useStateValue(): [string] {
-  // lightweight deterministic seed so waveform shape is stable per session
-  return ["media-waveform"];
-}
diff --git a/services/frontend/src/app/(dashboard)/voice/view.tsx b/services/frontend/src/app/(dashboard)/voice/view.tsx
index 6f8fb2c..f7ccdb1 100644
--- a/services/frontend/src/app/(dashboard)/voice/view.tsx
+++ b/services/frontend/src/app/(dashboard)/voice/view.tsx
@@ -1,52 +1,42 @@
 "use client";
 
-import {
-  Activity,
-  Headphones,
-  Mic,
-  MicOff,
-  Pause,
-  Play,
-  Settings,
-  Wifi,
-} from "lucide-react";
+import { Headphones, Loader2, Radio, RadioOff } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
-import { SessionRibbon } from "@/components/charts/session-ribbon";
-import { StaggerGroup, StaggerItem } from "@/components/motion/stagger";
-import { Badge } from "@/components/primitives/badge";
-import { Button } from "@/components/primitives/button";
 import { SignalField } from "@/components/three";
-import { StaticFallback } from "@/components/three/static-fallback";
 import { WebGLGuard } from "@/components/three/webgl-guard";
-import { ActiveSpeakersPanel } from "@/components/voice/active-speakers-panel";
-import { ListenControl } from "@/components/voice/listen-control";
-import { MicControl } from "@/components/voice/mic-control";
+import { StaticFallback } from "@/components/three/static-fallback";
+import { StaggerGroup, StaggerItem } from "@/components/motion/stagger";
+import { Button } from "@/components/primitives/button";
+import { Badge } from "@/components/primitives/badge";
+import { Select } from "@/components/primitives/select";
 import { SpeakerWaveform } from "@/components/voice/speaker-waveform";
+import { SessionRibbon } from "@/components/charts/session-ribbon";
+import { ActiveSpeakersPanel } from "@/components/voice/active-speakers-panel";
+import { MicControl } from "@/components/voice/mic-control";
+import { ListenControl } from "@/components/voice/listen-control";
 import {
+  useGuilds,
   useSpeakers,
+  useVoiceChannels,
   useVoiceConnect,
   useVoiceDisconnect,
   useVoiceListen,
 } from "@/hooks";
-import type { ActiveSpeaker, VoiceStatus } from "@/lib/types";
-import { cn } from "@/lib/utils";
+import type { VoiceStatus } from "@/lib/types";
 import { useWebSocket } from "@/lib/ws/context";
 
-type VoiceTab = "stage" | "activity";
-
-export default function VoiceView({
-  initialStatus,
-}: {
-  initialStatus?: VoiceStatus;
-}) {
+export default function VoiceView({ initialStatus }: { initialStatus?: VoiceStatus }) {
   const ws = useWebSocket();
-  const [tab, setTab] = useState<VoiceTab>("stage");
+  const [selectedGuild, setSelectedGuild] = useState("");
+  const [selectedChannel, setSelectedChannel] = useState("");
 
   const initialSpeakers = useMemo(
     () => initialStatus?.activeSpeakers ?? [],
     [initialStatus],
   );
   const { speakers, subscribe } = useSpeakers(initialSpeakers);
+  const { data: guilds = [] } = useGuilds();
+  const { data: voiceChannels = [] } = useVoiceChannels(selectedGuild);
   const connect = useVoiceConnect();
   const disconnect = useVoiceDisconnect();
   const listen = useVoiceListen(ws);
@@ -57,45 +47,101 @@ export default function VoiceView({
   }, [subscribe, ws]);
 
   const active = speakers.filter((s) => s.speaking);
+  const connected = initialStatus?.connected ?? false;
+
+  const handleGuildChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const g = e.target.value;
+    setSelectedGuild(g);
+    setSelectedChannel("");
+  };
 
   return (
     <div className="flex flex-col gap-5">
-      {/* Connection bar */}
-      <div className="flex items-center gap-3">
-        <Badge tone={initialStatus?.connected ? "signal" : "neutral"} dot>
-          {initialStatus?.connected ? "Connected" : "Disconnected"}
-        </Badge>
-        {initialStatus?.activeChannelName && (
-          <span className="text-sm text-[var(--color-ink-soft)]">
-            #{initialStatus.activeChannelName}
-          </span>
-        )}
-        {initialStatus?.connected ? (
-          <Button
-            size="sm"
-            variant="outline"
-            onClick={() => disconnect.mutate()}
-          >
-            Disconnect
-          </Button>
+      {/* Connection bar with guild + voice channel pickers */}
+      <div className="surface flex flex-col gap-3 p-4">
+        <div className="flex items-center gap-3">
+          <Badge tone={connected ? "signal" : "neutral"} dot>
+            {connected ? "Connected" : "Disconnected"}
+          </Badge>
+          {connected && initialStatus?.activeChannelName && (
+            <span className="hidden items-center gap-1.5 text-xs text-[var(--color-ink-soft)] sm:flex">
+              <Headphones className="size-3.5" />
+              {initialStatus.activeChannelName}
+            </span>
+          )}
+        </div>
+
+        {!connected ? (
+          <div className="flex flex-wrap gap-2">
+            <Select
+              value={selectedGuild}
+              onChange={handleGuildChange}
+              className="flex-1 min-w-[140px] h-9"
+            >
+              <option value="" disabled>
+                Select guild…
+              </option>
+              {guilds.map((g) => (
+                <option key={g.id} value={g.id}>
+                  {g.name}
+                </option>
+              ))}
+            </Select>
+
+            <Select
+              value={selectedChannel}
+              onChange={(e) => setSelectedChannel(e.target.value)}
+              disabled={!selectedGuild}
+              className="flex-1 min-w-[140px] h-9"
+            >
+              <option value="" disabled>
+                Select channel…
+              </option>
+              {(voiceChannels ?? []).map((c) => (
+                <option key={c.id} value={c.id}>
+                  {c.name}
+                </option>
+              ))}
+            </Select>
+
+            <Button
+              size="sm"
+              variant="primary"
+              onClick={() =>
+                void connect.mutate({
+                  guildId: selectedGuild,
+                  channelId: selectedChannel,
+                })
+              }
+              disabled={connect.isPending || !selectedGuild || !selectedChannel}
+            >
+              {connect.isPending ? (
+                <Loader2 className="size-3.5 animate-spin mr-1.5" />
+              ) : (
+                <Radio className="size-3.5 mr-1.5" />
+              )}
+              Connect
+            </Button>
+          </div>
         ) : (
           <Button
             size="sm"
-            variant="primary"
-            onClick={() =>
-              connect.mutate({
-                guildId: initialStatus?.activeGuildId ?? "",
-                channelId: initialStatus?.activeChannelId ?? "",
-              })
-            }
+            variant="danger"
+            onClick={() => void disconnect.mutate(undefined)}
+            disabled={disconnect.isPending}
           >
-            Connect
+            {disconnect.isPending ? (
+              <Loader2 className="size-3.5 animate-spin mr-1.5" />
+            ) : (
+              <RadioOff className="size-3.5 mr-1.5" />
+            )}
+            Disconnect
           </Button>
         )}
       </div>
 
       {/* Stage hero */}
-      <div className="surface relative flex h-[280px] items-end justify-center overflow-hidden rounded-[var(--radius-r)] p-5">
+      <div className="relative surface h-[280px] items-end justify-center overflow-hidden rounded-[var(--radius-r)] p-5">
         <WebGLGuard
           fallback={
             <StaticFallback
@@ -133,44 +179,22 @@ export default function VoiceView({
         </StaggerItem>
       </StaggerGroup>
 
-      {/* Tabs */}
-      <div className="flex gap-1 rounded-[var(--radius-r)] bg-[var(--color-surface-2)] p-1">
-        {(["stage", "activity"] as const).map((t) => (
-          <button
-            key={t}
-            type="button"
-            onClick={() => setTab(t)}
-            className={cn(
-              "flex items-center gap-1.5 rounded-[var(--radius-r-control)] px-3 py-1.5 text-xs font-medium transition-colors",
-              tab === t
-                ? "bg-[var(--color-signal)] text-[var(--color-signal-ink)]"
-                : "text-[var(--color-ink-soft)] hover:text-[var(--color-ink)]",
-            )}
-          >
-            {t === "stage" ? (
-              <Activity className="size-3.5" />
-            ) : (
-              <Headphones className="size-3.5" />
-            )}
-            {t === "stage" ? "Stage" : "Activity"}
-          </button>
-        ))}
+      {/* Activity timeline */}
+      <div className="surface p-4">
+        <h3 className="mb-3 text-sm font-semibold">
+          Live session timeline
+        </h3>
+        <SessionRibbon
+          segments={speakers.map((s) => ({
+            id: s.userId,
+            label: s.username,
+            value: s.speaking ? 3 : 1,
+            tone: s.speaking ? "signal" : "neutral",
+          }))}
+        />
       </div>
 
-      {tab === "stage" && <ActiveSpeakersPanel speakers={speakers} />}
-      {tab === "activity" && (
-        <div className="surface p-4">
-          <h3 className="mb-3 text-sm font-semibold">Live session timeline</h3>
-          <SessionRibbon
-            segments={speakers.map((s) => ({
-              id: s.userId,
-              label: s.username,
-              value: s.speaking ? 3 : 1,
-              tone: s.speaking ? "signal" : "neutral",
-            }))}
-          />
-        </div>
-      )}
+      <ActiveSpeakersPanel speakers={speakers} />
     </div>
   );
 }