From 52d53fc7f75fc5ce5f49f222e408fe5e897dd911 Mon Sep 17 00:00:00 2001
From: asepharyana <superaseph@gmail.com>
Date: Fri, 3 Jul 2026 22:06:40 +0700
Subject: [PATCH] feat(leptos): Phase 4 Task 7 - LivePanel composition + app.rs
 wiring

---
 services/frontend-leptos/frontend/src/app.rs  |  3 +-
 .../frontend/src/features/live/mod.rs         | 63 ++++++++++++++++---
 2 files changed, 55 insertions(+), 11 deletions(-)

diff --git a/services/frontend-leptos/frontend/src/app.rs b/services/frontend-leptos/frontend/src/app.rs
index c5e9bec..5fd6570 100644
--- a/services/frontend-leptos/frontend/src/app.rs
+++ b/services/frontend-leptos/frontend/src/app.rs
@@ -3,6 +3,7 @@ use shared_types::ui_state::Tab;
 use crate::auth::AuthOverlay;
 use crate::ws::context::WsContext;
 use crate::features::messages::MessagesPanel;
+use crate::features::live::LivePanel;
 
 #[derive(Clone)]
 pub struct AppConfig {
@@ -93,7 +94,7 @@ pub fn App() -> impl IntoView {
                     <div style="flex: 1; overflow: auto; padding: 1.5rem;">
                         {move || match ui.active_tab.get() {
                             Tab::Messages => view! { <MessagesPanel /> }.into_any(),
-                            Tab::Live => view! { <div>"Live Panel"</div> }.into_any(),
+                            Tab::Live => view! { <LivePanel /> }.into_any(),
                             Tab::Dashboard => view! { <div>"Dashboard Panel"</div> }.into_any(),
                         }}
                     </div>
diff --git a/services/frontend-leptos/frontend/src/features/live/mod.rs b/services/frontend-leptos/frontend/src/features/live/mod.rs
index ac2d4d8..8c5c039 100644
--- a/services/frontend-leptos/frontend/src/features/live/mod.rs
+++ b/services/frontend-leptos/frontend/src/features/live/mod.rs
@@ -3,20 +3,63 @@ pub mod hooks;
 pub mod audio;
 
 use leptos::prelude::*;
-use crate::ui::card::Card;
+use crate::ws::context::WsContext;
+use components::{
+    VoiceConnectionCard, ActiveSpeakers, AudioVisualizer,
+    NowPlaying, MusicSubPanel, ScreenSubPanel, RecordingsSubPanel,
+};
 
-/// Placeholder LivePanel component for Phase 4 Task 1
-/// Will be expanded with voice connection, music player, and recordings components
+/// LivePanel — Composition shell for all voice and media components
 #[component]
 pub fn LivePanel() -> impl IntoView {
+    let ws = use_context::<WsContext>();
+
     view! {
-        <Card class="p-6">
-            <div class="space-y-4">
-                <h2 class="text-xl font-bold">Live Monitoring</h2>
-                <p class="text-gray-600 dark:text-gray-400">
-                    Live panel components coming in Phase 4
-                </p>
+        <div class="live-panel space-y-6">
+            <div class="flex items-center justify-between">
+                <div>
+                    <h2 class="text-2xl font-bold tracking-tight">"Voice & Media"</h2>
+                    <p class="text-sm text-muted-foreground mt-1">
+                        "Monitor voice channels, play music, share your screen, and browse recordings."
+                    </p>
+                </div>
             </div>
-        </Card>
+
+            {/* Top row: Voice connection + speakers + visualizer */}
+            <div class="grid gap-6 lg:grid-cols-3">
+                <div class="lg:col-span-2">
+                    <VoiceConnectionCard />
+                </div>
+                <div>
+                    <ActiveSpeakers />
+                </div>
+            </div>
+
+            {/* Audio visualization */}
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">"Audio Visualization"</div>
+                </div>
+                <div class="card-content">
+                    <AudioVisualizer />
+                </div>
+            </div>
+
+            {/* Media controls: Now Playing + Music + Screen */}
+            <div class="grid gap-6 lg:grid-cols-3">
+                <div>
+                    <NowPlaying />
+                </div>
+                <div>
+                    <MusicSubPanel />
+                </div>
+                <div>
+                    <ScreenSubPanel />
+                </div>
+            </div>
+
+            {/* Recordings */}
+            <RecordingsSubPanel />
+        </div>
     }
 }