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

feat: implement official DataTable components and fix row spacing issues
Some checks failed
Build MIPS Binary / build (push) Failing after 1m33s
Details

Browse Source
This commit is contained in:
spinline
2026-02-12 00:32:58 +03:00
parent 04cb7d51cb
commit 56e8cc03d1
4 changed files with 74 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,7 +5,7 @@ use crate::api;
use shared::NotificationLevel;
use crate::components::context_menu::TorrentContextMenu;
use crate::components::ui::card::{Card, CardHeader, CardTitle, CardContent as CardBody};
use crate::components::ui::table::*;
use crate::components::ui::data_table::*;
fn format_bytes(bytes: i64) -> String {
const UNITS: [&str; 6] = ["B", "KB", "MB", "GB", "TB", "PB"];
@@ -136,38 +136,38 @@ pub fn TorrentTable() -> impl IntoView {
<div class="h-full bg-background relative flex flex-col overflow-hidden px-4 py-2">
// --- DESKTOP VIEW ---
<div class="hidden md:flex flex-col h-full overflow-hidden">
<TableWrapper class="flex-1 flex flex-col min-h-0 bg-card/50">
<div class="flex-1 overflow-y-auto overflow-x-hidden">
<Table class="w-full">
<TableHeader class="sticky top-0 bg-muted/80 backdrop-blur-sm z-10">
<TableRow class="hover:bg-transparent">
<TableHead class="cursor-pointer group select-none whitespace-nowrap" on:click=move |_| handle_sort(SortColumn::Name)>
<DataTableWrapper class="flex-1 min-h-0 bg-card/50">
<div class="h-full overflow-auto">
<DataTable>
<DataTableHeader class="sticky top-0 bg-muted/80 backdrop-blur-sm z-10">
<DataTableRow class="hover:bg-transparent">
<DataTableHead class="cursor-pointer group select-none" on:click=move |_| handle_sort(SortColumn::Name)>
<div class="flex items-center">"Name" {move || sort_arrow(SortColumn::Name)}</div>
</TableHead>
<TableHead class="w-24 cursor-pointer group select-none whitespace-nowrap" on:click=move |_| handle_sort(SortColumn::Size)>
</DataTableHead>
<DataTableHead class="w-24 cursor-pointer group select-none" on:click=move |_| handle_sort(SortColumn::Size)>
<div class="flex items-center">"Size" {move || sort_arrow(SortColumn::Size)}</div>
</TableHead>
<TableHead class="w-48 cursor-pointer group select-none whitespace-nowrap" on:click=move |_| handle_sort(SortColumn::Progress)>
</DataTableHead>
<DataTableHead class="w-48 cursor-pointer group select-none" on:click=move |_| handle_sort(SortColumn::Progress)>
<div class="flex items-center">"Progress" {move || sort_arrow(SortColumn::Progress)}</div>
</TableHead>
<TableHead class="w-24 cursor-pointer group select-none whitespace-nowrap" on:click=move |_| handle_sort(SortColumn::Status)>
</DataTableHead>
<DataTableHead class="w-24 cursor-pointer group select-none" on:click=move |_| handle_sort(SortColumn::Status)>
<div class="flex items-center">"Status" {move || sort_arrow(SortColumn::Status)}</div>
</TableHead>
<TableHead class="w-24 cursor-pointer group select-none whitespace-nowrap" on:click=move |_| handle_sort(SortColumn::DownSpeed)>
</DataTableHead>
<DataTableHead class="w-24 cursor-pointer group select-none" on:click=move |_| handle_sort(SortColumn::DownSpeed)>
<div class="flex items-center">"DL Speed" {move || sort_arrow(SortColumn::DownSpeed)}</div>
</TableHead>
<TableHead class="w-24 cursor-pointer group select-none whitespace-nowrap" on:click=move |_| handle_sort(SortColumn::UpSpeed)>
</DataTableHead>
<DataTableHead class="w-24 cursor-pointer group select-none" on:click=move |_| handle_sort(SortColumn::UpSpeed)>
<div class="flex items-center">"Up Speed" {move || sort_arrow(SortColumn::UpSpeed)}</div>
</TableHead>
<TableHead class="w-24 cursor-pointer group select-none whitespace-nowrap" on:click=move |_| handle_sort(SortColumn::ETA)>
</DataTableHead>
<DataTableHead class="w-24 cursor-pointer group select-none" on:click=move |_| handle_sort(SortColumn::ETA)>
<div class="flex items-center">"ETA" {move || sort_arrow(SortColumn::ETA)}</div>
</TableHead>
<TableHead class="w-32 cursor-pointer group select-none whitespace-nowrap" on:click=move |_| handle_sort(SortColumn::AddedDate)>
</DataTableHead>
<DataTableHead class="w-32 cursor-pointer group select-none" on:click=move |_| handle_sort(SortColumn::AddedDate)>
<div class="flex items-center">"Date" {move || sort_arrow(SortColumn::AddedDate)}</div>
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
</DataTableHead>
</DataTableRow>
</DataTableHeader>
<DataTableBody>
<For each=move || filtered_hashes.get() key=|hash| hash.clone() children={
let on_action = on_action.clone();
move |hash| {
@@ -176,10 +176,10 @@ pub fn TorrentTable() -> impl IntoView {
}
}
} />
</TableBody>
</Table>
</DataTableBody>
</DataTable>
</div>
</TableWrapper>
</DataTableWrapper>
</div>
// --- MOBILE VIEW ---
@@ -232,41 +232,41 @@ fn TorrentRow(
view! {
<TorrentContextMenu torrent_hash=h_for_menu on_action=on_action.clone()>
<TableRow
class="cursor-pointer h-12"
<DataTableRow
class="cursor-pointer group"
attr:data-state=move || if is_selected.get() { "selected" } else { "" }
on:click=move |_| store.selected_torrent.set(Some(stored_hash.get_value()))
>
<TableCell class="font-medium truncate max-w-[200px] lg:max-w-md px-2 py-0 h-12 flex items-center border-0" attr:title=t_name_for_title>
<DataTableCell class="font-medium truncate max-w-[200px] lg:max-w-md" attr:title=t_name_for_title>
{t_name_for_content}
</TableCell>
<TableCell class="font-mono text-xs text-muted-foreground px-2">
</DataTableCell>
<DataTableCell class="font-mono text-xs text-muted-foreground">
{format_bytes(t.size)}
</TableCell>
<TableCell class="px-2">
</DataTableCell>
<DataTableCell>
<div class="flex items-center gap-2">
<div class="h-1.5 w-full bg-secondary rounded-full overflow-hidden">
<div class="h-full bg-primary transition-all duration-500" style=format!("width: {}%", t.percent_complete)></div>
</div>
<span class="text-[10px] text-muted-foreground w-10 text-right">{format!("{:.1}%", t.percent_complete)}</span>
</div>
</TableCell>
<TableCell class={format!("px-2 text-xs font-semibold {}", status_color)}>
</DataTableCell>
<DataTableCell class={format!("text-xs font-semibold {}", status_color)}>
{format!("{:?}", t.status)}
</TableCell>
<TableCell class="text-right font-mono text-xs text-green-600 dark:text-green-500 px-2 whitespace-nowrap">
</DataTableCell>
<DataTableCell class="text-right font-mono text-xs text-green-600 dark:text-green-500 whitespace-nowrap">
{format_speed(t.down_rate)}
</TableCell>
<TableCell class="text-right font-mono text-xs text-blue-600 dark:text-blue-500 px-2 whitespace-nowrap">
</DataTableCell>
<DataTableCell class="text-right font-mono text-xs text-blue-600 dark:text-blue-500 whitespace-nowrap">
{format_speed(t.up_rate)}
</TableCell>
<TableCell class="text-right font-mono text-xs text-muted-foreground px-2 whitespace-nowrap">
</DataTableCell>
<DataTableCell class="text-right font-mono text-xs text-muted-foreground whitespace-nowrap">
{format_duration(t.eta)}
</TableCell>
<TableCell class="text-right font-mono text-xs text-muted-foreground px-2 whitespace-nowrap">
</DataTableCell>
<DataTableCell class="text-right font-mono text-xs text-muted-foreground whitespace-nowrap">
{format_date(t.added_date)}
</TableCell>
</TableRow>
</DataTableCell>
</DataTableRow>
</TorrentContextMenu>
}.into_any()
}
@@ -342,4 +342,4 @@ fn TorrentCard(
}
</Show>
}.into_any()
}
}

6
frontend/src/components/ui/data_table.rs Normal file
View File

@@ -0,0 +1,6 @@
// * Reuse @table.rs
pub use crate::components::ui::table::{
Table as DataTable, TableBody as DataTableBody, TableCaption as DataTableCaption, TableCell as DataTableCell,
TableFooter as DataTableFooter, TableHead as DataTableHead, TableHeader as DataTableHeader,
TableRow as DataTableRow, TableWrapper as DataTableWrapper,
};

4
frontend/src/components/ui/mod.rs
View File

@@ -5,4 +5,6 @@ pub mod toast;
pub mod context_menu;
pub mod theme_toggle;
pub mod svg_icon;
pub mod table;
pub mod table;
pub mod data_table;
pub mod sonner;

22
frontend/src/components/ui/table.rs
View File

@@ -3,19 +3,25 @@ use tw_merge::tw_merge;
#[component]
pub fn TableWrapper(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
let class = tw_merge!("overflow-hidden rounded-md border", class);
let class = tw_merge!("overflow-hidden rounded-md border w-full", class);
view! { <div class=class>{children()}</div> }
}
#[component]
pub fn Table(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
let class = tw_merge!("w-full text-sm caption-bottom", class);
let class = tw_merge!("w-full text-sm border-collapse", class);
view! { <table class=class>{children()}</table> }
}
#[component]
pub fn TableCaption(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
let class = tw_merge!("mt-4 text-sm text-muted-foreground", class);
view! { <caption class=class>{children()}</caption> }
}
#[component]
pub fn TableHeader(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
let class = tw_merge!("[&_tr]:border-b", class);
let class = tw_merge!("[&_tr]:border-b bg-muted/50", class);
view! { <thead class=class>{children()}</thead> }
}
@@ -27,7 +33,7 @@ pub fn TableRow(children: Children, #[prop(optional, into)] class: String) -> im
#[component]
pub fn TableHead(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
let class = tw_merge!("h-10 px-2 text-left align-middle font-medium text-muted-foreground", class);
let class = tw_merge!("h-10 px-4 text-left align-middle font-medium text-muted-foreground whitespace-nowrap", class);
view! { <th class=class>{children()}</th> }
}
@@ -39,6 +45,12 @@ pub fn TableBody(children: Children, #[prop(optional, into)] class: String) -> i
#[component]
pub fn TableCell(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
let class = tw_merge!("p-2 align-middle", class);
let class = tw_merge!("p-2 px-4 align-middle", class);
view! { <td class=class>{children()}</td> }
}
#[component]
pub fn TableFooter(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
let class = tw_merge!("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", class);
view! { <tfoot class=class>{children()}</tfoot> }
}