diff --git a/frontend/src/components/layout/statusbar.rs b/frontend/src/components/layout/statusbar.rs index 3856410..d2c9971 100644 --- a/frontend/src/components/layout/statusbar.rs +++ b/frontend/src/components/layout/statusbar.rs @@ -109,172 +109,80 @@ pub fn StatusBar() -> impl IntoView { }); }; - // Signal-based dropdown state: 0=none, 1=download, 2=upload, 3=theme - let (active_dropdown, set_active_dropdown) = create_signal(0u8); + // Signal-based dropdown state: 0=none, 1=download, 2=upload, 3=theme + let (active_dropdown, set_active_dropdown) = create_signal(0u8); - // Toggle a specific dropdown - let toggle = move |id: u8| { - let current = active_dropdown.get_untracked(); - if current == id { + // Toggle a specific dropdown + let toggle = move |id: u8| { + let current = active_dropdown.get_untracked(); + if current == id { + set_active_dropdown.set(0); + } else { + set_active_dropdown.set(id); + } + }; + + // Close all dropdowns + let close_all = move || { set_active_dropdown.set(0); - } else { - set_active_dropdown.set(id); - } - }; + }; - // Close all dropdowns - let close_all = move || { - set_active_dropdown.set(0); - }; - - view! { - // Transparent overlay to close dropdowns when clicking outside - -
- - -
- - // --- DOWNLOAD SPEED DROPDOWN --- -
+ view! { + // Transparent overlay to close dropdowns when clicking outside +
- - - - {move || format_speed(stats.get().down_rate)} - 0 } fallback=|| ()> - - {move || format!("(Limit: {})", format_speed(stats.get().down_limit.unwrap_or(0)))} - - -
+ class="fixed inset-0 z-[98] cursor-default" + on:pointerdown=move |_| close_all() + >
+ - -
+
- // --- UPLOAD SPEED DROPDOWN --- -
-
- - - - {move || format_speed(stats.get().up_rate)} - 0 } fallback=|| ()> - - {move || format!("(Limit: {})", format_speed(stats.get().up_limit.unwrap_or(0)))} - - -
- - -
- -
+ // --- DOWNLOAD SPEED DROPDOWN ---
- + + {move || format_speed(stats.get().down_rate)} + 0 } fallback=|| ()> + + {move || format!("(Limit: {})", format_speed(stats.get().down_limit.unwrap_or(0)))} + +
    { - let themes = vec![ - "light", "dark", "dim", "nord", "cupcake", "dracula", "cyberpunk", "emerald", "sunset", "abyss" - ]; - themes.into_iter().map(|theme| { + limits.clone().into_iter().map(|(val, label)| { + let is_active = move || { + let current = stats.get().down_limit.unwrap_or(0); + (current - val).abs() < 1024 + }; view! {
    • } @@ -283,6 +191,109 @@ pub fn StatusBar() -> impl IntoView {
+ // --- UPLOAD SPEED DROPDOWN --- +
+
+ + + + {move || format_speed(stats.get().up_rate)} + 0 } fallback=|| ()> + + {move || format!("(Limit: {})", format_speed(stats.get().up_limit.unwrap_or(0)))} + + +
+ +
    + { + limits.clone().into_iter().map(|(val, label)| { + let is_active = move || { + let current = stats.get().up_limit.unwrap_or(0); + (current - val).abs() < 1024 + }; + view! { +
  • + +
    • + } + }).collect::>() + } +
+
+ +
+
+
+ + + +
+ +
    + { + let themes = vec![ + "light", "dark", "dim", "nord", "cupcake", "dracula", "cyberpunk", "emerald", "sunset", "abyss" + ]; + themes.into_iter().map(|theme| { + view! { +
  • + +
    • + } + }).collect::>() + } +
+
-
- // Transparent overlay to close sort dropdown - -
- +
+ // Transparent overlay to close sort dropdown + +
+ -
- "Torrents" +
+ "Torrents" -
-
- - - - "Sort" -
-
    -
  • "Sort By"
    • - { - let columns = vec![ - (SortColumn::Name, "Name"), - (SortColumn::Size, "Size"), - (SortColumn::Progress, "Progress"), - (SortColumn::Status, "Status"), - (SortColumn::DownSpeed, "Down Speed"), - (SortColumn::UpSpeed, "Up Speed"), - (SortColumn::ETA, "ETA"), - ]; +
    +
    + + + + "Sort" +
    +
      +
    • "Sort By"
      • + { + let columns = vec![ + (SortColumn::Name, "Name"), + (SortColumn::Size, "Size"), + (SortColumn::Progress, "Progress"), + (SortColumn::Status, "Status"), + (SortColumn::DownSpeed, "Down Speed"), + (SortColumn::UpSpeed, "Up Speed"), + (SortColumn::ETA, "ETA"), + ]; - columns.into_iter().map(|(col, label)| { - let is_active = move || sort_col.get() == col; - let current_dir = move || sort_dir.get(); + columns.into_iter().map(|(col, label)| { + let is_active = move || sort_col.get() == col; + let current_dir = move || sort_dir.get(); - view! { -
    • - +
      • } - > - {label} - - - {move || match current_dir() { - SortDirection::Ascending => "▲", - SortDirection::Descending => "▼", - }} - - - - - } - }).collect::>() - } -
    -
    -
+ }).collect::>() + } + +
+
-
- {move || filtered_torrents().into_iter().map(|t| { +
{move || filtered_torrents().into_iter().map(|t| { let progress_class = if t.percent_complete >= 100.0 { "progress-success" } else { "progress-primary" }; let status_str = format!("{:?}", t.status); let status_badge_class = match t.status {