admin/vibetorrent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

feat(frontend): improve speed limit dropdown ui and ux

Browse Source
This commit is contained in:
spinline
2026-02-04 00:14:03 +03:00
parent b12f65ef00
commit a2c5c34744
1 changed files with 40 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
frontend/src/components/layout/statusbar.rs
View File

@@ -40,10 +40,13 @@ pub fn StatusBar() -> impl IntoView {
(2 * 1024 * 1024, "2 MB/s"), (2 * 1024 * 1024, "2 MB/s"),
(5 * 1024 * 1024, "5 MB/s"), (5 * 1024 * 1024, "5 MB/s"),
(10 * 1024 * 1024, "10 MB/s"), (10 * 1024 * 1024, "10 MB/s"),
(20 * 1024 * 1024, "20 MB/s"),
]; ];
let set_limit = move |limit_type: &str, val: i64| { let set_limit = move |limit_type: &str, val: i64| {
let limit_type = limit_type.to_string(); let limit_type = limit_type.to_string();
logging::log!("Setting {} limit to {}", limit_type, val);
spawn_local(async move { spawn_local(async move {
let req_body = if limit_type == "down" { let req_body = if limit_type == "down" {
GlobalLimitRequest { GlobalLimitRequest {
@@ -60,10 +63,22 @@ pub fn StatusBar() -> impl IntoView {
let client = let client =
gloo_net::http::Request::post("/api/settings/global-limits").json(&req_body); gloo_net::http::Request::post("/api/settings/global-limits").json(&req_body);
if let Ok(req) = client { match client {
if let Err(e) = req.send().await { Ok(req) => match req.send().await {
logging::error!("Failed to set limit: {}", e); Ok(resp) => {
} if !resp.ok() {
logging::error!(
"Failed to set limit: {} {}",
resp.status(),
resp.status_text()
);
} else {
logging::log!("Limit set successfully");
}
}
Err(e) => logging::error!("Network error setting limit: {}", e),
},
Err(e) => logging::error!("Failed to create request: {}", e),
} }
}); });
set_down_menu_open.set(false); set_down_menu_open.set(false);
@@ -75,13 +90,13 @@ pub fn StatusBar() -> impl IntoView {
// --- DOWNLOAD SPEED DROPDOWN --- // --- DOWNLOAD SPEED DROPDOWN ---
<div class=move || { <div class=move || {
let base = "dropdown dropdown-top dropdown-start"; // dropdown-start aligns left let base = "dropdown dropdown-top dropdown-start";
if down_menu_open.get() { format!("{} dropdown-open", base) } else { base.to_string() } if down_menu_open.get() { format!("{} dropdown-open", base) } else { base.to_string() }
}> }>
<div <div
tabindex="0" tabindex="0"
role="button" role="button"
class="flex items-center gap-2 cursor-pointer hover:text-primary transition-colors" class="flex items-center gap-2 cursor-pointer hover:text-primary transition-colors select-none"
title="Global Download Speed - Click to Set Limit" title="Global Download Speed - Click to Set Limit"
on:click=move |_| set_down_menu_open.update(|v| *v = !*v) on:click=move |_| set_down_menu_open.update(|v| *v = !*v)
> >
@@ -101,17 +116,22 @@ pub fn StatusBar() -> impl IntoView {
</Show> </Show>
<ul tabindex="0" class="dropdown-content z-[100] menu p-2 shadow bg-base-200 rounded-box w-40 mb-2 border border-base-300"> <ul tabindex="0" class="dropdown-content z-[100] menu p-2 shadow bg-base-200 rounded-box w-40 mb-2 border border-base-300">
<li class="menu-title px-2 py-1 text-[10px] opacity-50 uppercase tracking-wider">"Download Limit"</li>
{ {
limits.clone().into_iter().map(|(val, label)| { limits.clone().into_iter().map(|(val, label)| {
let is_active = move || stats.get().down_limit.unwrap_or(0) == val; let is_active = move || {
let current = stats.get().down_limit.unwrap_or(0);
current == val
};
view! { view! {
<li> <li>
<button <button
class=move || if is_active() { "active text-xs" } else { "text-xs" } class=move || if is_active() { "active text-xs flex justify-between" } else { "text-xs flex justify-between" }
on:click=move |_| set_limit("down", val) on:click=move |_| set_limit("down", val)
> >
{label} <span>{label}</span>
<Show when=is_active fallback=|| ()>
<span>"✓"</span>
</Show>
</button> </button>
</li> </li>
} }
@@ -128,7 +148,7 @@ pub fn StatusBar() -> impl IntoView {
<div <div
tabindex="0" tabindex="0"
role="button" role="button"
class="flex items-center gap-2 cursor-pointer hover:text-primary transition-colors" class="flex items-center gap-2 cursor-pointer hover:text-primary transition-colors select-none"
title="Global Upload Speed - Click to Set Limit" title="Global Upload Speed - Click to Set Limit"
on:click=move |_| set_up_menu_open.update(|v| *v = !*v) on:click=move |_| set_up_menu_open.update(|v| *v = !*v)
> >
@@ -148,17 +168,22 @@ pub fn StatusBar() -> impl IntoView {
</Show> </Show>
<ul tabindex="0" class="dropdown-content z-[100] menu p-2 shadow bg-base-200 rounded-box w-40 mb-2 border border-base-300"> <ul tabindex="0" class="dropdown-content z-[100] menu p-2 shadow bg-base-200 rounded-box w-40 mb-2 border border-base-300">
<li class="menu-title px-2 py-1 text-[10px] opacity-50 uppercase tracking-wider">"Upload Limit"</li>
{ {
limits.clone().into_iter().map(|(val, label)| { limits.clone().into_iter().map(|(val, label)| {
let is_active = move || stats.get().up_limit.unwrap_or(0) == val; let is_active = move || {
let current = stats.get().up_limit.unwrap_or(0);
current == val
};
view! { view! {
<li> <li>
<button <button
class=move || if is_active() { "active text-xs" } else { "text-xs" } class=move || if is_active() { "active text-xs flex justify-between" } else { "text-xs flex justify-between" }
on:click=move |_| set_limit("up", val) on:click=move |_| set_limit("up", val)
> >
{label} <span>{label}</span>
<Show when=is_active fallback=|| ()>
<span>"✓"</span>
</Show>
</button> </button>
</li> </li>
} }