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

90
frontend/public/tailwind.css
View File

@@ -1374,6 +1374,15 @@
}
}
}
.join-item {
&:where(*:not(:first-child, :disabled, [disabled], .btn-disabled)) {
margin-inline-start: calc(var(--border, 1px) * -1);
margin-block-start: 0;
}
&:where(*:is(:disabled, [disabled], .btn-disabled)) {
border-width: var(--border, 1px) 0 var(--border, 1px) var(--border, 1px);
}
}
.modal-action {
@layer daisyui.l1.l2.l3 {
margin-top: calc(0.25rem * 6);
@@ -1479,6 +1488,68 @@
}
}
}
.join {
display: inline-flex;
align-items: stretch;
--join-ss: 0;
--join-se: 0;
--join-es: 0;
--join-ee: 0;
:where(.join-item) {
border-start-start-radius: var(--join-ss, 0);
border-start-end-radius: var(--join-se, 0);
border-end-start-radius: var(--join-es, 0);
border-end-end-radius: var(--join-ee, 0);
* {
--join-ss: var(--radius-field);
--join-se: var(--radius-field);
--join-es: var(--radius-field);
--join-ee: var(--radius-field);
}
}
> .join-item:where(:first-child) {
--join-ss: var(--radius-field);
--join-se: 0;
--join-es: var(--radius-field);
--join-ee: 0;
}
:first-child:not(:last-child) {
:where(.join-item) {
--join-ss: var(--radius-field);
--join-se: 0;
--join-es: var(--radius-field);
--join-ee: 0;
}
}
> .join-item:where(:last-child) {
--join-ss: 0;
--join-se: var(--radius-field);
--join-es: 0;
--join-ee: var(--radius-field);
}
:last-child:not(:first-child) {
:where(.join-item) {
--join-ss: 0;
--join-se: var(--radius-field);
--join-es: 0;
--join-ee: var(--radius-field);
}
}
> .join-item:where(:only-child) {
--join-ss: var(--radius-field);
--join-se: var(--radius-field);
--join-es: var(--radius-field);
--join-ee: var(--radius-field);
}
:only-child {
:where(.join-item) {
--join-ss: var(--radius-field);
--join-se: var(--radius-field);
--join-es: var(--radius-field);
--join-ee: var(--radius-field);
}
}
}
.line-clamp-2 {
overflow: hidden;
display: -webkit-box;
@@ -1701,6 +1772,10 @@
border-left-style: var(--tw-border-style);
border-left-width: 1px;
}
.border-l-0 {
border-left-style: var(--tw-border-style);
border-left-width: 0px;
}
.badge-ghost {
@layer daisyui.l1.l2 {
border-color: var(--color-base-200);
@@ -1735,6 +1810,12 @@
.border-base-300 {
border-color: var(--color-base-300);
}
.border-base-content\/20 {
border-color: var(--color-base-content);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
}
}
.border-white\/5 {
border-color: color-mix(in srgb, #fff 5%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@@ -1816,6 +1897,9 @@
padding-inline: calc(0.25rem * 2 - var(--border));
}
}
.px-2 {
padding-inline: calc(var(--spacing) * 2);
}
.px-4 {
padding-inline: calc(var(--spacing) * 4);
}
@@ -2128,6 +2212,12 @@
}
}
}
.focus\:outline-none {
&:focus {
--tw-outline-style: none;
outline-style: none;
}
}
.focus-visible\:ring-2 {
&:focus-visible {
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);

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()>

14
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
}
};
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