feat(frontend): rewrite frontend with minimal Transmission-like design using DaisyUI
This commit is contained in:
spinline
3
frontend/src/components/layout/mod.rs
Normal file
3
frontend/src/components/layout/mod.rs
Normal file
@@ -0,0 +1,3 @@
|
||||
pub mod sidebar;
|
||||
pub mod toolbar;
|
||||
pub mod statusbar;
|
||||
65
frontend/src/components/layout/sidebar.rs
Normal file
65
frontend/src/components/layout/sidebar.rs
Normal file
@@ -0,0 +1,65 @@
|
||||
use leptos::*;
|
||||
|
||||
#[component]
|
||||
pub fn Sidebar() -> impl IntoView {
|
||||
view! {
|
||||
<aside class="w-64 bg-base-200 h-full flex flex-col border-r border-base-300">
|
||||
<div class="p-4">
|
||||
<h2 class="text-xl font-bold px-4 mb-2 text-primary">"Filters"</h2>
|
||||
<ul class="menu w-full rounded-box gap-1">
|
||||
<li>
|
||||
<a class="active">
|
||||
<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>
|
||||
"All"
|
||||
<span class="badge badge-sm badge-ghost ml-auto">"12"</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<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>
|
||||
"Downloading"
|
||||
<span class="badge badge-sm badge-ghost ml-auto">"4"</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<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>
|
||||
"Seeding"
|
||||
<span class="badge badge-sm badge-ghost ml-auto">"8"</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<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>
|
||||
"Completed"
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<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>
|
||||
"Inactive"
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mt-auto p-4 border-t border-base-300">
|
||||
<h3 class="text-xs font-bold text-base-content/50 uppercase mb-2 px-4">"Trackers"</h3>
|
||||
<ul class="menu w-full rounded-box gap-1 text-sm">
|
||||
<li><a>"All Trackers"</a></li>
|
||||
<li><a>"Error"</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
}
|
||||
}
|
||||
35
frontend/src/components/layout/statusbar.rs
Normal file
35
frontend/src/components/layout/statusbar.rs
Normal file
@@ -0,0 +1,35 @@
|
||||
use leptos::*;
|
||||
|
||||
#[component]
|
||||
pub fn StatusBar() -> impl IntoView {
|
||||
view! {
|
||||
<div class="h-8 min-h-8 bg-base-200 border-t border-base-300 flex items-center px-4 text-xs gap-4 text-base-content/70">
|
||||
<div class="flex items-center gap-2 cursor-pointer hover:text-primary transition-colors">
|
||||
<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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75l3 3m0 0l3-3m-3 3v-7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span class="font-mono">"0 KB/s"</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 cursor-pointer hover:text-primary transition-colors">
|
||||
<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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 11.25l-3-3m0 0l-3 3m3-3v7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span class="font-mono">"0 KB/s"</span>
|
||||
</div>
|
||||
|
||||
<div class="ml-auto flex items-center gap-4">
|
||||
<button class="btn btn-ghost btn-xs btn-square" title="Alt Speed Limits">
|
||||
<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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="btn btn-ghost btn-xs btn-square" title="Settings">
|
||||
<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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.212 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
48
frontend/src/components/layout/toolbar.rs
Normal file
48
frontend/src/components/layout/toolbar.rs
Normal file
@@ -0,0 +1,48 @@
|
||||
use leptos::*;
|
||||
|
||||
#[component]
|
||||
pub fn Toolbar() -> impl IntoView {
|
||||
view! {
|
||||
<div class="h-14 min-h-14 flex items-center px-4 border-b border-base-300 bg-base-100 gap-4">
|
||||
<div class="join">
|
||||
<button class="join-item btn btn-sm btn-outline gap-2" title="Open Torrent">
|
||||
<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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||||
</svg>
|
||||
"Open"
|
||||
</button>
|
||||
<button class="join-item btn btn-sm btn-outline gap-2" title="Magnet Link">
|
||||
<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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
|
||||
</svg>
|
||||
"URL"
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="join">
|
||||
<button class="join-item btn btn-sm btn-ghost" title="Start">
|
||||
<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 text-success">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="join-item btn btn-sm btn-ghost" title="Pause">
|
||||
<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 text-warning">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25v13.5m-7.5-13.5v13.5" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="join">
|
||||
<button class="join-item btn btn-sm btn-ghost text-error" title="Remove">
|
||||
<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="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="ml-auto flex items-center gap-2">
|
||||
<input type="text" placeholder="Filter..." class="input input-sm input-bordered w-full max-w-xs" />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,4 @@
|
||||
pub mod modal;
|
||||
pub mod context_menu;
|
||||
pub mod toolbar;
|
||||
pub mod sidebar;
|
||||
pub mod status_bar;
|
||||
pub mod torrent_table;
|
||||
|
||||
pub mod layout;
|
||||
pub mod torrent;
|
||||
|
||||
@@ -6,7 +6,7 @@ pub fn Modal(
|
||||
children: Children,
|
||||
#[prop(into)] on_confirm: Callback<()>,
|
||||
#[prop(into)] on_cancel: Callback<()>,
|
||||
#[prop(into)] is_open: MaybeSignal<bool>,
|
||||
#[prop(into)] visible: Signal<bool>,
|
||||
#[prop(into, default = "Confirm".to_string())] confirm_text: String,
|
||||
#[prop(into, default = "Cancel".to_string())] cancel_text: String,
|
||||
#[prop(into, default = false)] is_danger: bool,
|
||||
@@ -20,7 +20,7 @@ pub fn Modal(
|
||||
let cancel_text = store_value(cancel_text);
|
||||
|
||||
view! {
|
||||
<Show when=move || is_open.get() fallback=|| ()>
|
||||
<Show when=move || visible.get() fallback=|| ()>
|
||||
<div class="fixed inset-0 bg-background/80 backdrop-blur-sm flex items-end md:items-center justify-center z-[200] animate-in fade-in duration-200 sm:p-4">
|
||||
<div class="bg-card p-6 rounded-t-2xl md:rounded-lg w-full max-w-sm shadow-xl border border-border ring-0 transform transition-all animate-in slide-in-from-bottom-10 md:slide-in-from-bottom-0 md:zoom-in-95">
|
||||
<h3 class="text-lg font-semibold text-card-foreground mb-4">{title.get_value()}</h3>
|
||||
|
||||
@@ -1,52 +0,0 @@
|
||||
use leptos::*;
|
||||
use thaw::*;
|
||||
use shared::TorrentStatus;
|
||||
|
||||
#[component]
|
||||
pub fn Sidebar(
|
||||
#[prop(into)] active_filter: Signal<Option<TorrentStatus>>,
|
||||
#[prop(into)] on_filter_change: Callback<Option<TorrentStatus>>,
|
||||
) -> impl IntoView {
|
||||
view! {
|
||||
<div class="w-64 border-r border-border bg-card/30 flex flex-col">
|
||||
<div class="p-4 font-bold text-lg">"Groups"</div>
|
||||
<div class="flex-1 overflow-y-auto p-2 space-y-1">
|
||||
<Button
|
||||
variant=if active_filter.get().is_none() { ButtonVariant::Primary } else { ButtonVariant::Text }
|
||||
class="w-full justify-start text-left"
|
||||
on_click=move |_| on_filter_change.call(None)
|
||||
>
|
||||
"All"
|
||||
</Button>
|
||||
<Button
|
||||
variant=if active_filter.get() == Some(TorrentStatus::Downloading) { ButtonVariant::Primary } else { ButtonVariant::Text }
|
||||
class="w-full justify-start text-left"
|
||||
on_click=move |_| on_filter_change.call(Some(TorrentStatus::Downloading))
|
||||
>
|
||||
"Downloading"
|
||||
</Button>
|
||||
<Button
|
||||
variant=if active_filter.get() == Some(TorrentStatus::Seeding) { ButtonVariant::Primary } else { ButtonVariant::Text }
|
||||
class="w-full justify-start text-left"
|
||||
on_click=move |_| on_filter_change.call(Some(TorrentStatus::Seeding))
|
||||
>
|
||||
"Seeding"
|
||||
</Button>
|
||||
<Button
|
||||
variant=if active_filter.get() == Some(TorrentStatus::Paused) { ButtonVariant::Primary } else { ButtonVariant::Text }
|
||||
class="w-full justify-start text-left"
|
||||
on_click=move |_| on_filter_change.call(Some(TorrentStatus::Paused))
|
||||
>
|
||||
"Paused"
|
||||
</Button>
|
||||
<Button
|
||||
variant=if active_filter.get() == Some(TorrentStatus::Error) { ButtonVariant::Primary } else { ButtonVariant::Text }
|
||||
class="w-full justify-start text-left"
|
||||
on_click=move |_| on_filter_change.call(Some(TorrentStatus::Error))
|
||||
>
|
||||
"Errors"
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
use leptos::*;
|
||||
use thaw::*;
|
||||
|
||||
#[component]
|
||||
pub fn StatusBar() -> impl IntoView {
|
||||
view! {
|
||||
<div class="h-8 border-t border-border bg-card/30 flex items-center px-4 text-xs space-x-4">
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="i-mdi-arrow-down text-green-500"></span>
|
||||
"0 KB/s"
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="i-mdi-arrow-up text-blue-500"></span>
|
||||
"0 KB/s"
|
||||
</div>
|
||||
<div class="flex-1"></div>
|
||||
<div>"Free Space: 700 GB"</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
use leptos::*;
|
||||
use thaw::*;
|
||||
|
||||
#[component]
|
||||
pub fn Toolbar(
|
||||
#[prop(into)] on_add: Callback<()>,
|
||||
#[prop(into)] on_start: Callback<()>,
|
||||
#[prop(into)] on_pause: Callback<()>,
|
||||
#[prop(into)] on_delete: Callback<()>,
|
||||
#[prop(into)] on_settings: Callback<()>,
|
||||
) -> impl IntoView {
|
||||
view! {
|
||||
<div class="flex items-center gap-2 p-2 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
||||
<Button variant=ButtonVariant::Text on_click=move |_| on_add.call(())>
|
||||
<span class="i-mdi-plus mr-2"/> "Add"
|
||||
</Button>
|
||||
<div class="h-4 w-px bg-border mx-2"></div>
|
||||
<Button variant=ButtonVariant::Text on_click=move |_| on_start.call(())>
|
||||
<span class="i-mdi-play mr-2"/> "Start"
|
||||
</Button>
|
||||
<Button variant=ButtonVariant::Text on_click=move |_| on_pause.call(())>
|
||||
<span class="i-mdi-pause mr-2"/> "Pause"
|
||||
</Button>
|
||||
<Button variant=ButtonVariant::Text color=ButtonColor::Error on_click=move |_| on_delete.call(())>
|
||||
<span class="i-mdi-delete mr-2"/> "Delete"
|
||||
</Button>
|
||||
<div class="flex-1"></div>
|
||||
<Input placeholder="Filter..." class="w-48" />
|
||||
<Button variant=ButtonVariant::Text on_click=move |_| on_settings.call(())>
|
||||
<span class="i-mdi-cog mr-2"/> "Settings"
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
1
frontend/src/components/torrent/mod.rs
Normal file
1
frontend/src/components/torrent/mod.rs
Normal file
@@ -0,0 +1 @@
|
||||
pub mod table;
|
||||
124
frontend/src/components/torrent/table.rs
Normal file
124
frontend/src/components/torrent/table.rs
Normal file
@@ -0,0 +1,124 @@
|
||||
use leptos::*;
|
||||
|
||||
#[derive(Clone)]
|
||||
struct Torrent {
|
||||
id: u32,
|
||||
name: String,
|
||||
size: String,
|
||||
progress: f32,
|
||||
status: String,
|
||||
seeds: u32,
|
||||
peers: u32,
|
||||
down_speed: String,
|
||||
up_speed: String,
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn TorrentTable() -> impl IntoView {
|
||||
let torrents = vec![
|
||||
Torrent {
|
||||
id: 1,
|
||||
name: "Ubuntu 22.04.3 LTS".to_string(),
|
||||
size: "4.7 GB".to_string(),
|
||||
progress: 100.0,
|
||||
status: "Seeding".to_string(),
|
||||
seeds: 452,
|
||||
peers: 12,
|
||||
down_speed: "0 KB/s".to_string(),
|
||||
up_speed: "1.2 MB/s".to_string(),
|
||||
},
|
||||
Torrent {
|
||||
id: 2,
|
||||
name: "Debian 12.1.0 DVD".to_string(),
|
||||
size: "3.9 GB".to_string(),
|
||||
progress: 45.5,
|
||||
status: "Downloading".to_string(),
|
||||
seeds: 120,
|
||||
peers: 45,
|
||||
down_speed: "4.5 MB/s".to_string(),
|
||||
up_speed: "50 KB/s".to_string(),
|
||||
},
|
||||
Torrent {
|
||||
id: 3,
|
||||
name: "Arch Linux 2023.09.01".to_string(),
|
||||
size: "800 MB".to_string(),
|
||||
progress: 12.0,
|
||||
status: "Downloading".to_string(),
|
||||
seeds: 85,
|
||||
peers: 20,
|
||||
down_speed: "2.1 MB/s".to_string(),
|
||||
up_speed: "10 KB/s".to_string(),
|
||||
},
|
||||
Torrent {
|
||||
id: 4,
|
||||
name: "Fedora Workstation 39".to_string(),
|
||||
size: "2.1 GB".to_string(),
|
||||
progress: 0.0,
|
||||
status: "Paused".to_string(),
|
||||
seeds: 0,
|
||||
peers: 0,
|
||||
down_speed: "0 KB/s".to_string(),
|
||||
up_speed: "0 KB/s".to_string(),
|
||||
},
|
||||
];
|
||||
|
||||
view! {
|
||||
<div class="overflow-x-auto h-full bg-base-100">
|
||||
<table class="table table-xs table-pin-rows w-full max-w-full">
|
||||
<thead>
|
||||
<tr class="bg-base-200 text-base-content/70">
|
||||
<th class="w-8">
|
||||
<label>
|
||||
<input type="checkbox" class="checkbox checkbox-xs rounded-none" />
|
||||
</label>
|
||||
</th>
|
||||
<th>"Name"</th>
|
||||
<th class="w-24">"Size"</th>
|
||||
<th class="w-48">"Progress"</th>
|
||||
<th class="w-24">"Status"</th>
|
||||
<th class="w-20">"Seeds"</th>
|
||||
<th class="w-20">"Peers"</th>
|
||||
<th class="w-24">"Down Speed"</th>
|
||||
<th class="w-24">"Up Speed"</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{torrents.into_iter().map(|t| {
|
||||
let progress_class = if t.progress == 100.0 { "progress-success" } else { "progress-primary" };
|
||||
let status_class = match t.status.as_str() {
|
||||
"Seeding" => "text-success",
|
||||
"Downloading" => "text-primary",
|
||||
"Paused" => "text-warning",
|
||||
_ => "text-base-content/50"
|
||||
};
|
||||
|
||||
view! {
|
||||
<tr class="hover group border-b border-base-200">
|
||||
<th>
|
||||
<label>
|
||||
<input type="checkbox" class="checkbox checkbox-xs rounded-none" />
|
||||
</label>
|
||||
</th>
|
||||
<td class="font-medium truncate max-w-xs" title={t.name.clone()}>
|
||||
{t.name}
|
||||
</td>
|
||||
<td class="opacity-80 font-mono text-[11px]">{t.size}</td>
|
||||
<td>
|
||||
<div class="flex items-center gap-2">
|
||||
<progress class={format!("progress w-24 {}", progress_class)} value={t.progress} max="100"></progress>
|
||||
<span class="text-[10px] opacity-70">{format!("{:.1}%", t.progress)}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class={format!("text-[11px] font-medium {}", status_class)}>{t.status}</td>
|
||||
<td class="text-right font-mono text-[11px] opacity-80">{t.seeds}</td>
|
||||
<td class="text-right font-mono text-[11px] opacity-80">{t.peers}</td>
|
||||
<td class="text-right font-mono text-[11px] opacity-80 text-success">{t.down_speed}</td>
|
||||
<td class="text-right font-mono text-[11px] opacity-80 text-primary">{t.up_speed}</td>
|
||||
</tr>
|
||||
}
|
||||
}).collect::<Vec<_>>()}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@@ -1,51 +0,0 @@
|
||||
use leptos::*;
|
||||
use thaw::*;
|
||||
use shared::Torrent;
|
||||
|
||||
#[component]
|
||||
pub fn TorrentTable(
|
||||
#[prop(into)] torrents: Signal<Vec<Torrent>>
|
||||
) -> impl IntoView {
|
||||
view! {
|
||||
<div class="flex-1 overflow-auto bg-background">
|
||||
<table class="w-full text-left text-xs">
|
||||
<thead class="bg-muted/50 border-b border-border text-muted-foreground font-medium sticky top-0 bg-background z-10">
|
||||
<tr>
|
||||
<th class="px-2 py-1.5 font-medium">"Name"</th>
|
||||
<th class="px-2 py-1.5 font-medium w-20 text-right">"Size"</th>
|
||||
<th class="px-2 py-1.5 font-medium w-24">"Progress"</th>
|
||||
<th class="px-2 py-1.5 font-medium w-20 text-center">"Status"</th>
|
||||
<th class="px-2 py-1.5 font-medium w-20 text-right">"Down"</th>
|
||||
<th class="px-2 py-1.5 font-medium w-20 text-right">"Up"</th>
|
||||
<th class="px-2 py-1.5 font-medium w-20 text-right">"ETA"</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-border">
|
||||
<For
|
||||
each=move || torrents.get()
|
||||
key=|t| t.hash.clone()
|
||||
children=move |torrent| {
|
||||
view! {
|
||||
<tr class="hover:bg-muted/50 group transition-colors">
|
||||
<td class="px-2 py-1.5 truncate max-w-[200px]">{torrent.name}</td>
|
||||
<td class="px-2 py-1.5 text-right whitespace-nowrap text-muted-foreground">{torrent.size}</td>
|
||||
<td class="px-2 py-1.5">
|
||||
<Progress percentage=torrent.percent_complete as f32 />
|
||||
</td>
|
||||
<td class="px-2 py-1.5 text-center">
|
||||
<span class="text-[10px] px-1.5 py-0.5 rounded-full border border-border bg-background">
|
||||
{format!("{:?}", torrent.status)}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-2 py-1.5 text-right whitespace-nowrap text-blue-500">{torrent.down_rate}</td>
|
||||
<td class="px-2 py-1.5 text-right whitespace-nowrap text-green-500">{torrent.up_rate}</td>
|
||||
<td class="px-2 py-1.5 text-right whitespace-nowrap text-muted-foreground">{torrent.eta}</td>
|
||||
</tr>
|
||||
}
|
||||
}
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user