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

feat: modernize UI, add mobile card layout, and fix iOS sidebar interactions

Browse Source
This commit is contained in:
spinline
2026-02-01 14:08:25 +03:00
parent 8f7af0d1f8
commit 5d2c7249eb
5 changed files with 147 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/components/layout/sidebar.rs
View File

@@ -1,4 +1,5 @@
use leptos::*;
use leptos::wasm_bindgen::JsCast;
#[component]
pub fn Sidebar() -> impl IntoView {
@@ -10,8 +11,17 @@ pub fn Sidebar() -> impl IntoView {
let completed_count = move || store.torrents.get().iter().filter(|t| t.status == shared::TorrentStatus::Seeding || t.status == shared::TorrentStatus::Paused).count();
let inactive_count = move || store.torrents.get().iter().filter(|t| t.status == shared::TorrentStatus::Paused || t.status == shared::TorrentStatus::Error).count();
let close_drawer = move || {
if let Some(element) = document().get_element_by_id("my-drawer") {
if let Ok(input) = element.dyn_into::<web_sys::HtmlInputElement>() {
input.set_checked(false);
}
}
};
let set_filter = move |f: crate::store::FilterStatus| {
store.filter.set(f);
close_drawer();
};
let filter_class = move |f: crate::store::FilterStatus| {
@@ -24,7 +34,7 @@ pub fn Sidebar() -> impl IntoView {
<ul class="menu w-full rounded-box gap-1">
<li class="menu-title text-primary uppercase font-bold px-4">"Filters"</li>
<li>
<a class={move || filter_class(crate::store::FilterStatus::All)} on:click=move |_| set_filter(crate::store::FilterStatus::All)>
<a class={move || format!("cursor-pointer {}", filter_class(crate::store::FilterStatus::All))} on:click=move |_| set_filter(crate::store::FilterStatus::All)>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
@@ -33,7 +43,7 @@ pub fn Sidebar() -> impl IntoView {
</a>
</li>
<li>
<a class={move || filter_class(crate::store::FilterStatus::Downloading)} on:click=move |_| set_filter(crate::store::FilterStatus::Downloading)>
<a class={move || format!("cursor-pointer {}", filter_class(crate::store::FilterStatus::Downloading))} on:click=move |_| set_filter(crate::store::FilterStatus::Downloading)>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
</svg>
@@ -42,7 +52,7 @@ pub fn Sidebar() -> impl IntoView {
</a>
</li>
<li>
<a class={move || filter_class(crate::store::FilterStatus::Seeding)} on:click=move |_| set_filter(crate::store::FilterStatus::Seeding)>
<a class={move || format!("cursor-pointer {}", filter_class(crate::store::FilterStatus::Seeding))} on:click=move |_| set_filter(crate::store::FilterStatus::Seeding)>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
</svg>
@@ -51,7 +61,7 @@ pub fn Sidebar() -> impl IntoView {
</a>
</li>
<li>
<a class={move || filter_class(crate::store::FilterStatus::Completed)} on:click=move |_| set_filter(crate::store::FilterStatus::Completed)>
<a class={move || format!("cursor-pointer {}", filter_class(crate::store::FilterStatus::Completed))} on:click=move |_| set_filter(crate::store::FilterStatus::Completed)>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
@@ -60,7 +70,7 @@ pub fn Sidebar() -> impl IntoView {
</a>
</li>
<li>
<a class={move || filter_class(crate::store::FilterStatus::Inactive)} on:click=move |_| set_filter(crate::store::FilterStatus::Inactive)>
<a class={move || format!("cursor-pointer {}", filter_class(crate::store::FilterStatus::Inactive))} on:click=move |_| set_filter(crate::store::FilterStatus::Inactive)>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
</svg>

27
frontend/src/components/layout/toolbar.rs
View File

@@ -3,6 +3,7 @@ use leptos::*;
#[component]
pub fn Toolbar() -> impl IntoView {
let (show_add_modal, set_show_add_modal) = create_signal(false);
let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
view! {
<div class="navbar min-h-14 h-14 bg-base-100 p-0">
@@ -28,7 +29,31 @@ pub fn Toolbar() -> impl IntoView {
</div>
<div class="navbar-end gap-2 px-4">
<input type="text" placeholder="Filter..." class="input input-sm input-bordered w-full max-w-xs" />
<div class="join">
<input
type="text"
placeholder="Search..."
class="input input-sm input-bordered join-item w-full max-w-xs focus:outline-none"
prop:value=move || store.search_query.get()
on:input=move |ev| store.search_query.set(event_target_value(&ev))
on:keydown=move |ev: web_sys::KeyboardEvent| {
if ev.key() == "Escape" {
store.search_query.set(String::new());
}
}
/>
<Show when=move || !store.search_query.get().is_empty()>
<button
class="btn btn-sm btn-ghost join-item border-base-content/20 border-l-0 px-2"
title="Clear Search"
on:click=move |_| store.search_query.set(String::new())
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 opacity-70">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</Show>
</div>
</div>
<Show when=move || show_add_modal.get()>

16
frontend/src/components/torrent/table.rs
View File

@@ -46,14 +46,24 @@ pub fn TorrentTable() -> impl IntoView {
let filtered_torrents = move || {
let mut torrents = store.torrents.get().into_iter().filter(|t| {
let filter = store.filter.get();
match filter {
let search = store.search_query.get().to_lowercase();
let matches_filter = match filter {
crate::store::FilterStatus::All => true,
crate::store::FilterStatus::Downloading => t.status == shared::TorrentStatus::Downloading,
crate::store::FilterStatus::Seeding => t.status == shared::TorrentStatus::Seeding,
crate::store::FilterStatus::Completed => t.status == shared::TorrentStatus::Seeding || t.status == shared::TorrentStatus::Paused, // Approximate
crate::store::FilterStatus::Inactive => t.status == shared::TorrentStatus::Paused || t.status == shared::TorrentStatus::Error,
_ => true
}
_ => true
};
let matches_search = if search.is_empty() {
true
} else {
t.name.to_lowercase().contains(&search)
};
matches_filter && matches_search
}).collect::<Vec<_>>();
torrents.sort_by(|a, b| {

4
frontend/src/store.rs
View File

@@ -33,13 +33,15 @@ impl FilterStatus {
pub struct TorrentStore {
pub torrents: RwSignal<Vec<Torrent>>,
pub filter: RwSignal<FilterStatus>,
pub search_query: RwSignal<String>,
}
pub fn provide_torrent_store() {
let torrents = create_rw_signal(Vec::<Torrent>::new());
let filter = create_rw_signal(FilterStatus::All);
let search_query = create_rw_signal(String::new());
let store = TorrentStore { torrents, filter };
let store = TorrentStore { torrents, filter, search_query };
provide_context(store);
// Initialize SSE connection