feat: enhance UI components with new widgets and improved command handling

Author: HsiangNianian

apps/egui_ui/Cargo.toml

@@ -9,7 +9,6 @@ path = "src/main.rs"
 
 [dependencies]
 rysyn_ffi_bridge = { path = "../../crates/ffi_bridge" }
-rysyn_project = { path = "../../crates/project" }
 
 eframe.workspace = true
 egui.workspace = true
@@ -20,6 +19,9 @@ serde_json.workspace = true
 log.workspace = true
 env_logger.workspace = true
 
+# For browser panel
+dirs = "5"
+
 # For audio file preview/waveform (optional)
 # hound = "3.5"
 

apps/egui_ui/src/app.rs

@@ -2,6 +2,7 @@
 
 use eframe::egui;
 use rysyn_ffi_bridge::{init_bridge, get_bridge, Command, StateSnapshot};
+use std::sync::mpsc::{channel, Sender, Receiver};
 
 use crate::panels::{
     transport::TransportPanel,
@@ -17,6 +18,10 @@ pub struct RysynApp {
     /// Current state from audio core
     state: StateSnapshot,
 
+    /// Command sender for UI -> Audio Core
+    cmd_tx: Sender<Command>,
+    cmd_rx: Receiver<Command>,
+    
     /// Panel states
     transport: TransportPanel,
     timeline: TimelinePanel,
@@ -40,8 +45,12 @@ impl RysynApp {
         // Initialize FFI bridge
         init_bridge();
 
+        let (cmd_tx, cmd_rx) = channel();
+        
         Self {
             state: StateSnapshot::new(),
+            cmd_tx,
+            cmd_rx,
             transport: TransportPanel::default(),
             timeline: TimelinePanel::default(),
             track_list: TrackListPanel::default(),
@@ -56,9 +65,11 @@ impl RysynApp {
         }
     }
 
-    fn send_command(&self, cmd: Command) {
+    fn process_commands(&self) {
         if let Some(bridge) = get_bridge() {
-            let _ = bridge.send_command(cmd);
+            while let Ok(cmd) = self.cmd_rx.try_recv() {
+                let _ = bridge.send_command(cmd);
+            }
         }
     }
 
@@ -74,23 +85,30 @@ impl eframe::App for RysynApp {
         // Refresh state from audio core
         self.refresh_state();
 
+        // Process any pending commands
+        self.process_commands();
+        
         // Request continuous repaint for smooth animation
         ctx.request_repaint();
 
+        // Clone cmd_tx for use in closures
+        let cmd_tx = self.cmd_tx.clone();
+        
         // === Menu Bar ===
         egui::TopBottomPanel::top("menu_bar").show(ctx, |ui| {
+            let cmd_tx = cmd_tx.clone();
             egui::menu::bar(ui, |ui| {
                 ui.menu_button("File", |ui| {
                     if ui.button("New Project").clicked() {
-                        self.send_command(Command::NewProject);
+                        let _ = cmd_tx.send(Command::NewProject);
                         ui.close_menu();
                     }
                     if ui.button("Open Project...").clicked() {
                         // TODO: File dialog
                         ui.close_menu();
                     }
                     if ui.button("Save Project").clicked() {
-                        self.send_command(Command::SaveProject { path: None });
+                        let _ = cmd_tx.send(Command::SaveProject { path: None });
                         ui.close_menu();
                     }
                     ui.separator();
@@ -101,32 +119,32 @@ impl eframe::App for RysynApp {
 
                 ui.menu_button("Edit", |ui| {
                     if ui.button("Undo").clicked() {
-                        self.send_command(Command::Undo);
+                        let _ = cmd_tx.send(Command::Undo);
                         ui.close_menu();
                     }
                     if ui.button("Redo").clicked() {
-                        self.send_command(Command::Redo);
+                        let _ = cmd_tx.send(Command::Redo);
                         ui.close_menu();
                     }
                 });
 
                 ui.menu_button("Track", |ui| {
                     if ui.button("Add Audio Track").clicked() {
-                        self.send_command(Command::CreateTrack { 
+                        let _ = cmd_tx.send(Command::CreateTrack { 
                             name: "Audio".to_string(),
                             is_midi: false 
                         });
                         ui.close_menu();
                     }
                     if ui.button("Add MIDI Track").clicked() {
-                        self.send_command(Command::CreateTrack { 
+                        let _ = cmd_tx.send(Command::CreateTrack { 
                             name: "MIDI".to_string(),
                             is_midi: true 
                         });
                         ui.close_menu();
                     }
                     if ui.button("Add Instrument Track").clicked() {
-                        self.send_command(Command::CreateTrack { 
+                        let _ = cmd_tx.send(Command::CreateTrack { 
                             name: "Instrument".to_string(),
                             is_midi: true 
                         });
@@ -159,67 +177,76 @@ impl eframe::App for RysynApp {
             });
         });
 
+        // Clone state for panels (to avoid borrow issues)
+        let state = self.state.clone();
+        
         // === Transport Bar ===
+        let cmd_tx2 = cmd_tx.clone();
         egui::TopBottomPanel::top("transport_bar")
             .min_height(60.0)
             .show(ctx, |ui| {
-                self.transport.show(ui, &self.state, |cmd| self.send_command(cmd));
+                self.transport.show(ui, &state, |cmd| { let _ = cmd_tx2.send(cmd); });
             });
 
         // === Bottom Panel (Mixer) ===
         if self.show_mixer {
+            let cmd_tx2 = cmd_tx.clone();
             egui::TopBottomPanel::bottom("mixer_panel")
                 .resizable(true)
                 .default_height(200.0)
                 .min_height(100.0)
                 .show(ctx, |ui| {
-                    self.mixer.show(ui, &self.state, |cmd| self.send_command(cmd));
+                    self.mixer.show(ui, &state, |cmd| { let _ = cmd_tx2.send(cmd); });
                 });
         }
 
         // === Left Panel (Browser) ===
         if self.show_browser {
+            let cmd_tx2 = cmd_tx.clone();
             egui::SidePanel::left("browser_panel")
                 .resizable(true)
                 .default_width(200.0)
                 .min_width(150.0)
                 .show(ctx, |ui| {
-                    self.browser.show(ui, &self.state, |cmd| self.send_command(cmd));
+                    self.browser.show(ui, &state, |cmd| { let _ = cmd_tx2.send(cmd); });
                 });
         }
 
         // === Right Panel (Inspector) ===
         if self.show_inspector {
+            let cmd_tx2 = cmd_tx.clone();
             egui::SidePanel::right("inspector_panel")
                 .resizable(true)
                 .default_width(250.0)
                 .min_width(200.0)
                 .show(ctx, |ui| {
-                    self.inspector.show(ui, &self.state, |cmd| self.send_command(cmd));
+                    self.inspector.show(ui, &state, |cmd| { let _ = cmd_tx2.send(cmd); });
                 });
         }
 
         // === Central Area (Track List + Timeline) ===
+        let cmd_tx2 = cmd_tx.clone();
+        let cmd_tx3 = cmd_tx.clone();
         egui::CentralPanel::default().show(ctx, |ui| {
             ui.horizontal(|ui| {
                 // Track list (left side, fixed width)
-                egui::Frame::none()
+                egui::Frame::new()
                     .fill(ui.visuals().extreme_bg_color)
                     .show(ui, |ui| {
                         ui.set_width(200.0);
                         self.track_list.show(
                             ui, 
-                            &self.state, 
-                            |cmd| self.send_command(cmd)
+                            &state, 
+                            |cmd| { let _ = cmd_tx2.send(cmd); }
                         );
                     });
 
                 // Timeline (right side, fills remaining space)
                 ui.with_layout(egui::Layout::left_to_right(egui::Align::Min).with_main_wrap(false), |ui| {
                     self.timeline.show(
                         ui, 
-                        &self.state, 
-                        |cmd| self.send_command(cmd),
+                        &state, 
+                        |cmd| { let _ = cmd_tx3.send(cmd); },
                         &mut self.timeline_zoom,
                         &mut self.timeline_scroll
                     );

apps/egui_ui/src/panels/browser.rs

@@ -2,7 +2,7 @@
 //!
 //! File browser for audio files and VST plugins
 
-use eframe::egui::{self, Color32, RichText, Sense, Vec2};
+use eframe::egui::{self, Color32, RichText};
 use rysyn_ffi_bridge::{Command, StateSnapshot};
 use std::path::PathBuf;
 

apps/egui_ui/src/panels/inspector.rs

@@ -2,7 +2,7 @@
 //!
 //! Shows properties of selected items (tracks, clips, plugins)
 
-use eframe::egui::{self, Color32, RichText, Vec2};
+use eframe::egui::{self, Color32, RichText};
 use rysyn_ffi_bridge::{Command, StateSnapshot, TrackState, ClipState};
 
 #[derive(Default)]
@@ -243,7 +243,7 @@ impl InspectorPanel {
                     egui::DragValue::new(&mut length)
                         .speed(0.1)
                         .suffix(" beats")
-                        .clamp_range(0.1..=1000.0)
+                        .range(0.1..=1000.0)
                 ).changed() {
                     send_cmd(Command::ResizeClip {
                         clip_id: clip.id,
@@ -349,7 +349,7 @@ impl InspectorPanel {
                 if ui.add(
                     egui::DragValue::new(&mut bpm)
                         .speed(0.1)
-                        .clamp_range(20.0..=300.0)
+                        .range(20.0..=300.0)
                 ).changed() {
                     send_cmd(Command::SetTempo { bpm });
                 }
@@ -361,10 +361,10 @@ impl InspectorPanel {
                 ui.horizontal(|ui| {
                     if ui.add(
                         egui::DragValue::new(&mut num)
-                            .clamp_range(1..=16)
+                            .range(1..=16)
                     ).changed() || ui.add(
                         egui::DragValue::new(&mut denom)
-                            .clamp_range(1..=16)
+                            .range(1..=16)
                     ).changed() {
                         send_cmd(Command::SetTimeSignature {
                             numerator: num,

apps/egui_ui/src/panels/mixer.rs

@@ -44,10 +44,10 @@ impl MixerPanel {
     ) {
         let available_height = ui.available_height();
 
-        egui::Frame::none()
+        egui::Frame::new()
             .fill(Color32::from_rgb(40, 40, 45))
             .stroke(Stroke::new(1.0, Color32::from_rgb(60, 60, 65)))
-            .rounding(4.0)
+            .corner_radius(4.0)
             .show(ui, |ui| {
                 ui.allocate_ui(Vec2::new(CHANNEL_WIDTH, available_height), |ui| {
                     ui.vertical(|ui| {
@@ -215,10 +215,10 @@ impl MixerPanel {
     ) {
         let available_height = ui.available_height();
 
-        egui::Frame::none()
+        egui::Frame::new()
             .fill(Color32::from_rgb(50, 45, 45))
             .stroke(Stroke::new(1.0, Color32::from_rgb(80, 70, 70)))
-            .rounding(4.0)
+            .corner_radius(4.0)
             .show(ui, |ui| {
                 ui.allocate_ui(Vec2::new(CHANNEL_WIDTH + 20.0, available_height), |ui| {
                     ui.vertical(|ui| {

apps/egui_ui/src/panels/timeline.rs

@@ -282,7 +282,8 @@ impl TimelinePanel {
             painter.rect_stroke(
                 clip_rect.expand(2.0),
                 4.0,
-                Stroke::new(2.0, Color32::WHITE)
+                Stroke::new(2.0, Color32::WHITE),
+                egui::StrokeKind::Outside
             );
         }
 
@@ -293,7 +294,8 @@ impl TimelinePanel {
         painter.rect_stroke(
             clip_rect,
             4.0,
-            Stroke::new(1.0, color.linear_multiply(0.7))
+            Stroke::new(1.0, color.linear_multiply(0.7)),
+            egui::StrokeKind::Outside
         );
 
         // Clip name

apps/egui_ui/src/panels/track_list.rs

@@ -75,7 +75,8 @@ impl TrackListPanel {
         ui.painter().rect_stroke(
             rect,
             4.0,
-            Stroke::new(1.0, Color32::from_rgb(60, 60, 65))
+            Stroke::new(1.0, Color32::from_rgb(60, 60, 65)),
+            egui::StrokeKind::Outside
         );
 
         // Track color indicator

apps/egui_ui/src/panels/transport.rs

@@ -2,7 +2,7 @@
 //!
 //! Play/Pause/Stop, Record, Loop, BPM, Time Display
 
-use eframe::egui::{self, Color32, RichText, Sense, Vec2};
+use eframe::egui::{self, Color32, RichText, Vec2};
 use rysyn_ffi_bridge::{Command, StateSnapshot};
 
 #[derive(Default)]
@@ -91,18 +91,20 @@ impl TransportPanel {
 
             // Editable BPM field
             let bpm_text = self.bpm_edit.clone()
-                .unwrap_or_else(|| format!("{:.1}", state.transport.bpm));
+                .unwrap_or_else(|| format!("{:.1}", state.transport.tempo));
 
+            let mut edit_text = self.bpm_edit.get_or_insert(bpm_text).clone();
             let response = ui.add(
-                egui::TextEdit::singleline(&mut self.bpm_edit.get_or_insert(bpm_text))
+                egui::TextEdit::singleline(&mut edit_text)
                     .desired_width(60.0)
                     .font(egui::TextStyle::Monospace)
             );
+            self.bpm_edit = Some(edit_text);
 
             if response.lost_focus() {
                 if let Some(ref text) = self.bpm_edit {
                     if let Ok(new_bpm) = text.parse::<f64>() {
-                        send_cmd(Command::SetBpm { bpm: new_bpm });
+                        send_cmd(Command::SetTempo { bpm: new_bpm });
                     }
                 }
                 self.bpm_edit = None;
@@ -160,7 +162,7 @@ fn transport_button_colored(
     ).on_hover_text(tooltip)
 }
 
-fn format_position(beats: f64, beats_per_bar: u8) -> String {
+fn format_position(beats: f64, beats_per_bar: u32) -> String {
     let beats_per_bar = beats_per_bar.max(1) as f64;
     let bar = (beats / beats_per_bar) as i32 + 1;
     let beat_in_bar = (beats % beats_per_bar) + 1.0;