fix: remove unused sonner module to resolve build errors

frontend/src/components/auth/login.rs

@@ -3,6 +3,8 @@ use leptos::task::spawn_local;
 use crate::components::ui::card::{Card, CardHeader, CardContent};
 use crate::components::ui::input::{Input, InputType};
 
+use crate::components::ui::button::Button;
+
 #[component]
 pub fn Login() -> impl IntoView {
     let username = RwSignal::new(String::new());
@@ -74,15 +76,16 @@ pub fn Login() -> impl IntoView {
                         </Show>
 
                         <div class="pt-2">
-                            <button
+                            <Button
-                                class="inline-flex items-center justify-center w-full h-9 px-4 py-2 rounded-md text-sm font-medium bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 transition-all disabled:pointer-events-none disabled:opacity-50"
+                                class="w-full"
-                                disabled=move || loading.0.get()
+                                attr:r#type="submit"
+                                attr:disabled=move || loading.0.get()
                             >
-                                <Show when=move || loading.0.get() fallback=|| "Giriş Yap">
+                                <Show when=move || loading.0.get() fallback=|| view! { "Giriş Yap" }.into_any()>
                                     <span class="animate-spin mr-2 h-4 w-4 border-2 border-current border-t-transparent rounded-full"></span>
                                     "Giriş Yapılıyor..."
                                 </Show>
-                            </button>
+                            </Button>
                         </div>
                     </form>
                 </CardContent>

frontend/src/components/auth/setup.rs

@@ -3,6 +3,8 @@ use leptos::task::spawn_local;
 use crate::components::ui::card::{Card, CardHeader, CardContent};
 use crate::components::ui::input::{Input, InputType};
 
+use crate::components::ui::button::Button;
+
 #[component]
 pub fn Setup() -> impl IntoView {
     let username = RwSignal::new(String::new());
@@ -98,15 +100,16 @@ pub fn Setup() -> impl IntoView {
                         </Show>
 
                         <div class="pt-2">
-                            <button
+                            <Button
-                                class="inline-flex items-center justify-center w-full h-9 px-4 py-2 rounded-md text-sm font-medium bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 transition-all disabled:pointer-events-none disabled:opacity-50"
+                                class="w-full"
-                                disabled=move || loading.0.get()
+                                attr:r#type="submit"
+                                attr:disabled=move || loading.0.get()
                             >
-                                <Show when=move || loading.0.get() fallback=|| "Kurulumu Tamamla">
+                                <Show when=move || loading.0.get() fallback=|| view! { "Kurulumu Tamamla" }.into_any()>
                                     <span class="animate-spin mr-2 h-4 w-4 border-2 border-current border-t-transparent rounded-full"></span>
                                     "Kuruluyor..."
                                 </Show>
-                            </button>
+                            </Button>
                         </div>
                     </form>
                 </CardContent>

frontend/src/components/layout/sidebar.rs

@@ -1,5 +1,6 @@
 use leptos::prelude::*;
 use leptos::task::spawn_local;
+use crate::components::ui::button::{Button, ButtonVariant, ButtonSize};
 
 #[component]
 pub fn Sidebar() -> impl IntoView {
@@ -137,8 +138,11 @@ pub fn Sidebar() -> impl IntoView {
                         <crate::components::ui::theme_toggle::ThemeToggle />
                     </div>
                     // Logout button
-                    <button
+                    <Button
-                        class="inline-flex items-center justify-center size-8 rounded-md hover:bg-accent text-destructive transition-colors"
+                        variant=ButtonVariant::Ghost
+                        size=ButtonSize::Icon
+                        class="text-destructive hover:bg-destructive/10"
+                        attr:disabled=move || false
                         on:click=move |_| {
                             spawn_local(async move {
                                 if shared::server_fns::auth::logout().await.is_ok() {
@@ -151,7 +155,7 @@ pub fn Sidebar() -> impl IntoView {
                         <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.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
                         </svg>
-                    </button>
+                    </Button>
                 </div>
             </div>
         </div>
@@ -166,13 +170,12 @@ fn SidebarButton(
     #[prop(into)] label: &'static str,
     count: Signal<usize>,
 ) -> impl IntoView {
+    let variant = move || if active.get() { ButtonVariant::Secondary } else { ButtonVariant::Ghost };
+    
     view! {
-        <button
+        <Button
-            class=move || if active.get() {
+            variant=Signal::derive(variant)
-                "inline-flex items-center justify-start gap-2 w-full h-8 rounded-md px-3 text-sm font-medium bg-secondary text-secondary-foreground transition-colors"
+            class="justify-start gap-2 w-full h-8 px-3"
-            } else {
-                "inline-flex items-center justify-start gap-2 w-full h-8 rounded-md px-3 text-sm font-medium hover:bg-accent hover:text-accent-foreground transition-colors"
-            }
             on:click=on_click
         >
             <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">
@@ -180,6 +183,6 @@ fn SidebarButton(
             </svg>
             {label}
             <span class="ml-auto text-xs font-mono opacity-70">{count}</span>
-        </button>
+        </Button>
     }
 }

frontend/src/components/torrent/add_torrent.rs

@@ -4,6 +4,8 @@ use crate::components::ui::input::{Input, InputType};
 use crate::store::TorrentStore;
 use crate::api;
 
+use crate::components::ui::button::{Button, ButtonVariant};
+
 #[component]
 pub fn AddTorrentDialog(
     on_close: Callback<()>,
@@ -80,17 +82,16 @@ pub fn AddTorrentDialog(
                 })}
 
                 <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
-                    <button
+                    <Button
-                        type="button"
+                        variant=ButtonVariant::Ghost
-                        class="inline-flex items-center justify-center h-9 px-4 py-2 rounded-md text-sm font-medium hover:bg-accent hover:text-accent-foreground transition-colors"
+                        attr:r#type="button"
                         on:click=move |_| on_close.run(())
                     >
                         "Cancel"
-                    </button>
+                    </Button>
-                    <button
+                    <Button
-                        type="submit"
+                        attr:r#type="submit"
-                        class="inline-flex items-center justify-center h-9 px-4 py-2 rounded-md text-sm font-medium bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 transition-all disabled:pointer-events-none disabled:opacity-50"
+                        attr:disabled=move || is_loading.0.get()
-                        disabled=move || is_loading.0.get()
                     >
                         {move || if is_loading.0.get() {
                             leptos::either::Either::Left(view! { 
@@ -100,13 +101,14 @@ pub fn AddTorrentDialog(
                         } else {
                             leptos::either::Either::Right(view! { "Add" })
                         }}
-                    </button>
+                    </Button>
                 </div>
             </form>
 
             // Close button (X)
-            <button 
+            <Button 
-                class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none"
+                variant=ButtonVariant::Ghost
+                class="absolute right-2 top-2 size-8 p-0 opacity-70 hover:opacity-100"
                 on:click=move |_| on_close.run(())
             >
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
@@ -114,7 +116,7 @@ pub fn AddTorrentDialog(
                     <path d="m6 6 12 12"></path>
                 </svg>
                 <span class="sr-only">"Close"</span>
-            </button>
+            </Button>
         </div>
     }
 }

frontend/src/components/torrent/table.rs

@@ -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,53 +136,50 @@ 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">
+                <DataTableWrapper class="flex-1 min-h-0 bg-card/50">
-                    <div class="flex-1 overflow-y-auto overflow-x-hidden">
+                    <div class="h-full overflow-auto">
-                        <Table class="w-full">
+                        <DataTable>
-                            <TableHeader class="sticky top-0 bg-muted/80 backdrop-blur-sm z-10">
+                            <DataTableHeader class="sticky top-0 bg-muted/80 backdrop-blur-sm z-10">
-                                <TableRow class="hover:bg-transparent">
+                                <DataTableRow class="hover:bg-transparent">
-                                    <TableHead class="cursor-pointer group select-none whitespace-nowrap" on:click=move |_| handle_sort(SortColumn::Name)>
+                                    <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>
+                                    </DataTableHead>
-                                    <TableHead class="w-24 cursor-pointer group select-none whitespace-nowrap" on:click=move |_| handle_sort(SortColumn::Size)>
+                                    <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>
+                                    </DataTableHead>
-                                    <TableHead class="w-48 cursor-pointer group select-none whitespace-nowrap" on:click=move |_| handle_sort(SortColumn::Progress)>
+                                    <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>
+                                    </DataTableHead>
-                                    <TableHead class="w-24 cursor-pointer group select-none whitespace-nowrap" on:click=move |_| handle_sort(SortColumn::Status)>
+                                    <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>
+                                    </DataTableHead>
-                                    <TableHead class="w-24 cursor-pointer group select-none whitespace-nowrap" on:click=move |_| handle_sort(SortColumn::DownSpeed)>
+                                    <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>
+                                    </DataTableHead>
-                                    <TableHead class="w-24 cursor-pointer group select-none whitespace-nowrap" on:click=move |_| handle_sort(SortColumn::UpSpeed)>
+                                    <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>
+                                    </DataTableHead>
-                                    <TableHead class="w-24 cursor-pointer group select-none whitespace-nowrap" on:click=move |_| handle_sort(SortColumn::ETA)>
+                                    <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>
+                                    </DataTableHead>
-                                    <TableHead class="w-32 cursor-pointer group select-none whitespace-nowrap" on:click=move |_| handle_sort(SortColumn::AddedDate)>
+                                    <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>
+                                    </DataTableHead>
-                                </TableRow>
+                                </DataTableRow>
-                            </TableHeader>
+                            </DataTableHeader>
-                            <TableBody>
+                            <DataTableBody>
                                 <For each=move || filtered_hashes.get() key=|hash| hash.clone() children={
                                     let on_action = on_action.clone();
                                     move |hash| {
-                                        let h = hash.clone();
                                         view! { 
-                                            <TorrentContextMenu torrent_hash=h on_action=on_action.clone()>
+                                            <TorrentRow hash=hash.clone() on_action=on_action.clone() /> 
-                                                <TorrentRow hash=hash.clone() /> 
-                                            </TorrentContextMenu>
                                         }
                                     }
                                 } />
-                            </TableBody>
+                            </DataTableBody>
-                        </Table>
+                        </DataTable>
                     </div>
-                </TableWrapper>
+                </DataTableWrapper>
             </div>
 
             // --- MOBILE VIEW ---
@@ -191,12 +188,9 @@ pub fn TorrentTable() -> impl IntoView {
                     <For each=move || filtered_hashes.get() key=|hash| hash.clone() children={
                         let on_action = on_action.clone();
                         move |hash| {
-                            let h = hash.clone();
                             view! { 
                                  <div class="pb-3">
-                                    <TorrentContextMenu torrent_hash=h on_action=on_action.clone()>
+                                    <TorrentCard hash=hash.clone() on_action=on_action.clone() /> 
-                                        <TorrentCard hash=hash.clone() /> 
-                                    </TorrentContextMenu>
                                 </div>
                             }
                         }
@@ -210,6 +204,7 @@ pub fn TorrentTable() -> impl IntoView {
 #[component]
 fn TorrentRow(
     hash: String,
+    on_action: Callback<(String, String)>,
 ) -> impl IntoView {
     let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
     let h = hash.clone();
@@ -220,6 +215,7 @@ fn TorrentRow(
     view! {
         <Show when=move || torrent.get().is_some() fallback=|| ()>
             {
+                let on_action = on_action.clone();
                 move || {
                     let t = torrent.get().unwrap();
                     let t_name = t.name.clone();
@@ -232,53 +228,57 @@ fn TorrentRow(
 
                     let t_name_for_title = t_name.clone();
                     let t_name_for_content = t_name.clone();
+                    let h_for_menu = stored_hash.get_value();
 
                     view! {
-                        <TableRow 
+                        <TorrentContextMenu torrent_hash=h_for_menu on_action=on_action.clone()>
-                            class="cursor-pointer h-12"
+                            <DataTableRow 
-                            attr:data-state=move || if is_selected.get() { "selected" } else { "" }
+                                class="cursor-pointer group"
-                            on:click=move |_| store.selected_torrent.set(Some(stored_hash.get_value()))
+                                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>
+                            >
-                                {t_name_for_content}
+                                <DataTableCell class="font-medium truncate max-w-[200px] lg:max-w-md" attr:title=t_name_for_title>
-                            </TableCell>
+                                    {t_name_for_content}
-                            <TableCell class="font-mono text-xs text-muted-foreground px-2">
+                                </DataTableCell>
-                                {format_bytes(t.size)}
+                                <DataTableCell class="font-mono text-xs text-muted-foreground">
-                            </TableCell>
+                                    {format_bytes(t.size)}
-                            <TableCell class="px-2">
+                                </DataTableCell>
-                                <div class="flex items-center gap-2">
+                                <DataTableCell>
-                                    <div class="h-1.5 w-full bg-secondary rounded-full overflow-hidden">
+                                    <div class="flex items-center gap-2">
-                                        <div class="h-full bg-primary transition-all duration-500" style=format!("width: {}%", t.percent_complete)></div>
+                                        <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>
-                                    <span class="text-[10px] text-muted-foreground w-10 text-right">{format!("{:.1}%", t.percent_complete)}</span>
+                                </DataTableCell>
-                                </div>
+                                <DataTableCell class={format!("text-xs font-semibold {}", status_color)}>
-                            </TableCell>
+                                    {format!("{:?}", t.status)}
-                            <TableCell class={format!("px-2 text-xs font-semibold {}", status_color)}>
+                                </DataTableCell>
-                                {format!("{:?}", t.status)}
+                                <DataTableCell class="text-right font-mono text-xs text-green-600 dark:text-green-500 whitespace-nowrap">
-                            </TableCell>
+                                    {format_speed(t.down_rate)}
-                            <TableCell class="text-right font-mono text-xs text-green-600 dark:text-green-500 px-2 whitespace-nowrap">
+                                </DataTableCell>
-                                {format_speed(t.down_rate)}
+                                <DataTableCell class="text-right font-mono text-xs text-blue-600 dark:text-blue-500 whitespace-nowrap">
-                            </TableCell>
+                                    {format_speed(t.up_rate)}
-                            <TableCell class="text-right font-mono text-xs text-blue-600 dark:text-blue-500 px-2 whitespace-nowrap">
+                                </DataTableCell>
-                                {format_speed(t.up_rate)}
+                                <DataTableCell class="text-right font-mono text-xs text-muted-foreground whitespace-nowrap">
-                            </TableCell>
+                                    {format_duration(t.eta)}
-                            <TableCell class="text-right font-mono text-xs text-muted-foreground px-2 whitespace-nowrap">
+                                </DataTableCell>
-                                {format_duration(t.eta)}
+                                <DataTableCell class="text-right font-mono text-xs text-muted-foreground whitespace-nowrap">
-                            </TableCell>
+                                    {format_date(t.added_date)}
-                            <TableCell class="text-right font-mono text-xs text-muted-foreground px-2 whitespace-nowrap">
+                                </DataTableCell>
-                                {format_date(t.added_date)}
+                            </DataTableRow>
-                            </TableCell>
+                        </TorrentContextMenu>
-                        </TableRow>
                     }.into_any()
                 }
             }
         </Show>
-    }
+    }.into_any()
 }
 
 #[component]
 fn TorrentCard(
     hash: String,
+    on_action: Callback<(String, String)>,
 ) -> impl IntoView {
     let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
     let h = hash.clone();
@@ -289,53 +289,57 @@ fn TorrentCard(
     view! {
         <Show when=move || torrent.get().is_some() fallback=|| ()>
             {
+                let on_action = on_action.clone();
                 move || {
                     let t = torrent.get().unwrap();
                     let t_name = t.name.clone();
                     let status_badge_class = match t.status { shared::TorrentStatus::Seeding => "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 border-green-200 dark:border-green-800", shared::TorrentStatus::Downloading => "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 border-blue-200 dark:border-blue-800", shared::TorrentStatus::Paused => "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400 border-yellow-200 dark:border-yellow-800", shared::TorrentStatus::Error => "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400 border-red-200 dark:border-red-800", _ => "bg-muted text-muted-foreground" };
+                    let h_for_menu = stored_hash.get_value();
 
                     view! {
-                        <div
+                        <TorrentContextMenu torrent_hash=h_for_menu on_action=on_action.clone()>
-                            class=move || {
+                            <div
-                                let selected = store.selected_torrent.get();
+                                class=move || {
-                                let is_selected = selected.as_deref() == Some(stored_hash.get_value().as_str());
+                                    let selected = store.selected_torrent.get();
-                                if is_selected {
+                                    let is_selected = selected.as_deref() == Some(stored_hash.get_value().as_str());
-                                    "ring-2 ring-primary rounded-lg transition-all"
+                                    if is_selected {
-                                } else {
+                                        "ring-2 ring-primary rounded-lg transition-all"
-                                    "transition-all"
+                                    } else {
+                                        "transition-all"
+                                    }
                                 }
-                            }
+                                on:click=move |_| store.selected_torrent.set(Some(stored_hash.get_value()))
-                            on:click=move |_| store.selected_torrent.set(Some(stored_hash.get_value()))
+                            >
-                        >
+                            <Card class="h-full select-none cursor-pointer hover:border-primary transition-colors">
-                        <Card class="h-full select-none cursor-pointer hover:border-primary transition-colors">
+                                <CardHeader class="p-3 pb-0">
-                            <CardHeader class="p-3 pb-0">
+                                    <div class="flex justify-between items-start gap-2">
-                                <div class="flex justify-between items-start gap-2">
+                                        <CardTitle class="text-sm font-medium leading-tight line-clamp-2">{t_name.clone()}</CardTitle>
-                                    <CardTitle class="text-sm font-medium leading-tight line-clamp-2">{t_name.clone()}</CardTitle>
+                                        <div class={format!("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 {}", status_badge_class)}>{format!("{:?}", t.status)}</div>
-                                    <div class={format!("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 {}", status_badge_class)}>{format!("{:?}", t.status)}</div>
-                                </div>
-                            </CardHeader>
-                            <CardBody class="p-3 pt-2 gap-3 flex flex-col">
-                                <div class="flex flex-col gap-1">
-                                    <div class="flex justify-between text-[10px] text-muted-foreground">
-                                        <span>{format_bytes(t.size)}</span>
-                                        <span>{format!("{:.1}%", t.percent_complete)}</span>
                                     </div>
-                                    <div class="h-1.5 w-full bg-secondary rounded-full overflow-hidden">
+                                </CardHeader>
-                                        <div class="h-full bg-primary transition-all duration-500" style=format!("width: {}%", t.percent_complete)></div>
+                                <CardBody class="p-3 pt-2 gap-3 flex flex-col">
+                                    <div class="flex flex-col gap-1">
+                                        <div class="flex justify-between text-[10px] text-muted-foreground">
+                                            <span>{format_bytes(t.size)}</span>
+                                            <span>{format!("{:.1}%", t.percent_complete)}</span>
+                                        </div>
+                                        <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>
                                     </div>
-                                </div>
+                                    <div class="grid grid-cols-4 gap-2 text-[10px] font-mono text-muted-foreground pt-1 border-t border-border/50">
-                                <div class="grid grid-cols-4 gap-2 text-[10px] font-mono text-muted-foreground pt-1 border-t border-border/50">
+                                        <div class="flex flex-col text-blue-600 dark:text-blue-500"><span>"DL"</span><span>{format_speed(t.down_rate)}</span></div>
-                                    <div class="flex flex-col text-blue-600 dark:text-blue-500"><span>"DL"</span><span>{format_speed(t.down_rate)}</span></div>
+                                        <div class="flex flex-col text-green-600 dark:text-green-500"><span>"UP"</span><span>{format_speed(t.up_rate)}</span></div>
-                                    <div class="flex flex-col text-green-600 dark:text-green-500"><span>"UP"</span><span>{format_speed(t.up_rate)}</span></div>
+                                        <div class="flex flex-col"><span>"ETA"</span><span>{format_duration(t.eta)}</span></div>
-                                    <div class="flex flex-col"><span>"ETA"</span><span>{format_duration(t.eta)}</span></div>
+                                        <div class="flex flex-col text-right"><span>"DATE"</span><span>{format_date(t.added_date)}</span></div>
-                                    <div class="flex flex-col text-right"><span>"DATE"</span><span>{format_date(t.added_date)}</span></div>
+                                    </div>
-                                </div>
+                                </CardBody>
-                            </CardBody>
+                            </Card>
-                        </Card>
+                            </div>
-                        </div>
+                        </TorrentContextMenu>
-                    }
+                    }.into_any()
                 }
             }
         </Show>
-    }
+    }.into_any()
 }

frontend/src/components/ui/button.rs

@@ -1,9 +1,11 @@
 use leptos::prelude::*;
 use leptos_ui::variants;
 
+// TODO 💪 Loading state (demo_use_timeout_fn.rs and demo_button.rs)
+
 variants! {
     Button {
-        base: "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive w-fit hover:cursor-pointer active:scale-[0.98] active:opacity-100 touch-manipulation [-webkit-tap-highlight-color:transparent] select-none [-webkit-touch-callout:none]",
+        base: "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive  w-fit  hover:cursor-pointer active:scale-[0.98] active:opacity-100 touch-manipulation [-webkit-tap-highlight-color:transparent] select-none [-webkit-touch-callout:none]", // Using hover:cursor-pointer as workaround for href_support.
         variants: {
             variant: {
                 Default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
@@ -11,13 +13,21 @@ variants! {
                 Outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/5",
                 Secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
                 Ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+                Accent: "bg-accent text-accent-foreground hover:bg-accent/80",
                 Link: "text-primary underline-offset-4 hover:underline",
+                //
+                Warning: "bg-warning text-warning-foreground hover:bg-warning/90",
+                Success: "bg-success text-success-foreground hover:bg-success/90",
+                Bordered: "bg-transparent border border-zinc-200 text-muted-foreground",
             },
             size: {
                 Default: "h-9 px-4 py-2 has-[>svg]:px-3",
                 Sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
                 Lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
                 Icon: "size-9",
+                //
+                Mobile: "px-6 py-3 rounded-[24px]",
+                Badge: "px-2.5 py-0.5 text-xs"
             }
         },
         component: {
@@ -26,4 +36,4 @@ variants! {
             support_aria_current: true
         }
     }
-}
+}

frontend/src/components/ui/context_menu.rs

@@ -202,14 +202,14 @@ pub fn ContextMenuTrigger(
     #[prop(optional)] on_open: Option<Callback<()>>,
 ) -> impl IntoView {
     let ctx = expect_context::<ContextMenuContext>();
-    let trigger_class = tw_merge!("contents", class);
+    let trigger_class = tw_merge!("block w-full h-full", class);
 
     view! {
         <div
             class=trigger_class
             data-name="ContextMenuTrigger"
             data-context-trigger=ctx.target_id
-            on:contextmenu=move |_| {
+            on:contextmenu=move |e: web_sys::MouseEvent| {
                 if let Some(cb) = on_open {
                     cb.run(());
                 }
@@ -230,7 +230,7 @@ pub fn ContextMenuContent(
 ) -> impl IntoView {
     let ctx = expect_context::<ContextMenuContext>();
 
-    let base_classes = "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md transition-all duration-200 data-[state=closed]:opacity-0 data-[state=closed]:scale-95 data-[state=open]:opacity-100 data-[state=open]:scale-100";
+    let base_classes = "fixed z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md transition-all duration-200 data-[state=closed]:opacity-0 data-[state=closed]:scale-95 data-[state=open]:opacity-100 data-[state=open]:scale-100";
 
     let class = tw_merge!(base_classes, class);
 

frontend/src/components/ui/data_table.rs

@@ -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,
+};

frontend/src/components/ui/mod.rs

@@ -5,4 +5,5 @@ 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;

frontend/src/components/ui/table.rs

@@ -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> }
+}

frontend/src/components/ui/toast.rs

@@ -25,13 +25,6 @@ pub enum SonnerPosition {
     BottomLeft,
 }
 
-#[derive(Clone, Copy, PartialEq, Eq, Default, strum::Display, Debug)]
-pub enum SonnerDirection {
-    TopDown,
-    #[default]
-    BottomUp,
-}
-
 #[derive(Clone, Debug, PartialEq)]
 pub struct ToastData {
     pub id: u64,
@@ -48,166 +41,145 @@ pub struct ToasterStore {
 
 #[component]
 pub fn SonnerTrigger(
-    #[prop(into, optional)] class: String,
+    toast: ToastData,
-    #[prop(optional, default = ToastType::default())] variant: ToastType,
+    index: usize,
-    #[prop(into)] title: String,
+    total: usize,
-    description: Option<String>,
+    position: SonnerPosition,
-    #[prop(into, optional)] position: String,
+    #[prop(optional)] on_dismiss: Option<Callback<()>>,
-    on_dismiss: Option<Callback<()>>,
 ) -> impl IntoView {
-    let variant_classes = match variant {
+    let variant_classes = match toast.variant {
-        ToastType::Default => "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        ToastType::Default => "bg-background text-foreground border-border",
-        ToastType::Success => "bg-green-500 text-white hover:bg-green-600",
+        ToastType::Success => "bg-background text-foreground border-border [&_.icon]:text-success",
-        ToastType::Error => "bg-red-500 text-white shadow-xs hover:bg-red-600",
+        ToastType::Error => "bg-background text-foreground border-border [&_.icon]:text-destructive",
-        ToastType::Warning => "bg-yellow-500 text-white hover:bg-yellow-600",
+        ToastType::Warning => "bg-background text-foreground border-border [&_.icon]:text-warning",
-        ToastType::Info => "bg-blue-500 text-white shadow-xs hover:bg-blue-600",
+        ToastType::Info => "bg-background text-foreground border-border [&_.icon]:text-info",
-        ToastType::Loading => "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ToastType::Loading => "bg-background text-foreground border-border",
     };
 
-    let animation_direction = if position.contains("Top") {
+    // Sonner Stacking Logic
-        "slide-in-from-top-5"
+    // We calculate inverse index: 0 is the newest (top), 1 is older, etc.
-    } else {
+    let inverse_index = index; 
-        "slide-in-from-bottom-5"
+    let offset = inverse_index as f64 * 16.0;
-    };
+    let scale = 1.0 - (inverse_index as f64 * 0.05);
+    let opacity = if inverse_index > 2 { 0.0 } else { 1.0 - (inverse_index as f64 * 0.2) };
+    
+    let is_bottom = !position.to_string().contains("Top");
+    let y_direction = if is_bottom { -1.0 } else { 1.0 };
+    let translate_y = offset * y_direction;
 
-    let merged_class = tw_merge!(
+    let style = format!(
-        "inline-flex flex-col items-start justify-center gap-1 min-w-[300px] rounded-md text-sm font-medium shadow-lg p-4 cursor-pointer pointer-events-auto border border-border/50 transition-all",
+        "z-index: {}; transform: translateY({}px) scale({}); opacity: {};",
-        "animate-in fade-in duration-300 ease-out hover:scale-[1.02] active:scale-[0.98]",
+        total - index,
-        animation_direction,
+        translate_y,
-        variant_classes,
+        scale,
-        class
+        opacity
     );
 
-    // Only set position attribute if not empty
+    let icon = match toast.variant {
-    let position_attr = if position.is_empty() { None } else { Some(position) };
+        ToastType::Success => Some(view! { <span class="icon text-success">"✓"</span> }.into_any()),
-
+        ToastType::Error => Some(view! { <span class="icon text-destructive">"✕"</span> }.into_any()),
-    // Clone title for data attribute usage, original moved into view
+        ToastType::Warning => Some(view! { <span class="icon text-warning">"⚠"</span> }.into_any()),
-    let title_clone = title.clone();
+        ToastType::Info => Some(view! { <span class="icon text-info">"ℹ"</span> }.into_any()),
+        _ => None,
+    };
 
     view! {
         <div
-            class=merged_class
+            class=tw_merge!(
-            data-name="SonnerTrigger"
+                "absolute transition-all duration-300 ease-in-out cursor-pointer pointer-events-auto",
-            data-variant=variant.to_string()
+                "flex items-center gap-3 min-w-[350px] p-4 rounded-lg border shadow-lg bg-card",
-            data-toast-title=title_clone
+                if is_bottom { "bottom-0" } else { "top-0" },
-            data-toast-position=position_attr
+                variant_classes
+            )
+            style=style
             on:click=move |_| {
                 if let Some(cb) = on_dismiss {
                     cb.run(());
                 }
             }
         >
-            <div class="font-semibold">{title}</div>
+            {icon}
-            {move || description.as_ref().map(|d| view! { <div class="text-xs opacity-90">{d.clone()}</div> })}
+            <div class="flex flex-col gap-1">
+                <div class="text-sm font-semibold">{toast.title}</div>
+                {move || toast.description.as_ref().map(|d| view! { <div class="text-xs opacity-70">{d.clone()}</div> })}
+            </div>
         </div>
-    }
+    }.into_any()
 }
 
-#[component]
+// Thread local storage for global access
-pub fn SonnerContainer(
-    children: Children,
-    #[prop(into, optional)] class: String,
-    #[prop(optional, default = SonnerPosition::default())] position: SonnerPosition,
-) -> impl IntoView {
-    let merged_class = tw_merge!("toast__container fixed z-[9999] flex flex-col gap-2 p-4 outline-none pointer-events-none", class);
-
-    view! {
-        <div class=merged_class data-position=position.to_string()>
-            {children()}
-        </div>
-    }
-}
-
-#[component]
-pub fn SonnerList(
-    children: Children,
-    #[prop(into, optional)] class: String,
-    #[prop(optional, default = SonnerPosition::default())] position: SonnerPosition,
-    #[prop(optional, default = SonnerDirection::default())] direction: SonnerDirection,
-    #[prop(into, default = "false".to_string())] expanded: String,
-    #[prop(into, optional)] style: String,
-) -> impl IntoView {
-    let merged_class = tw_merge!(
-        "contents",
-        class
-    );
-
-    view! {
-        <div
-            class=merged_class
-            data-name="SonnerList"
-            data-sonner-toaster="true"
-            data-sonner-theme="light"
-            data-position=position.to_string()
-            data-expanded=expanded
-            data-direction=direction.to_string()
-            style=style
-        >
-            {children()}
-        </div>
-    }
-}
-
-// Thread local storage for global access without Context
 thread_local! {
     static TOASTS: std::cell::RefCell<Option<RwSignal<Vec<ToastData>>>> = std::cell::RefCell::new(None);
 }
 
 pub fn provide_toaster() {
     let toasts = RwSignal::new(Vec::<ToastData>::new());
-    
-    // Set global thread_local
     TOASTS.with(|t| *t.borrow_mut() = Some(toasts));
-    
-    // Also provide context for components
     provide_context(ToasterStore { toasts });
 }
 
 #[component]
 pub fn Toaster(#[prop(default = SonnerPosition::default())] position: SonnerPosition) -> impl IntoView {
-    // Global store'u al
+    let store = use_context::<ToasterStore>().expect("Toaster context not found");
-    let store = use_context::<ToasterStore>().expect("Toaster context not found. Call provide_toaster() in App root.");
     let toasts = store.toasts;
-
+    let is_hovered = RwSignal::new(false);
-    // Auto-derive direction from position
-    let direction = match position {
-        SonnerPosition::TopLeft | SonnerPosition::TopCenter | SonnerPosition::TopRight => SonnerDirection::TopDown,
-        _ => SonnerDirection::BottomUp,
-    };
 
     let container_class = match position {
-        SonnerPosition::TopLeft => "left-0 top-0 items-start",
+        SonnerPosition::TopLeft => "left-6 top-6 items-start",
-        SonnerPosition::TopRight => "right-0 top-0 items-end",
+        SonnerPosition::TopRight => "right-6 top-6 items-end",
-        SonnerPosition::TopCenter => "left-1/2 -translate-x-1/2 top-0 items-center",
+        SonnerPosition::TopCenter => "left-1/2 -translate-x-1/2 top-6 items-center",
-        SonnerPosition::BottomCenter => "left-1/2 -translate-x-1/2 bottom-0 items-center",
+        SonnerPosition::BottomCenter => "left-1/2 -translate-x-1/2 bottom-6 items-center",
-        SonnerPosition::BottomLeft => "left-0 bottom-0 items-start",
+        SonnerPosition::BottomLeft => "left-6 bottom-6 items-start",
-        SonnerPosition::BottomRight => "right-0 bottom-0 items-end",
+        SonnerPosition::BottomRight => "right-6 bottom-6 items-end",
     };
 
     view! {
-        <SonnerContainer class=container_class position=position>
+        <div 
-            <SonnerList position=position direction=direction>
+            class=tw_merge!("fixed z-[100] flex flex-col pointer-events-none min-h-[200px] w-[400px]", container_class)
-                <For
+            on:mouseenter=move |_| is_hovered.set(true)
-                    each=move || toasts.get()
+            on:mouseleave=move |_| is_hovered.set(false)
-                    key=|toast| toast.id
+        >
-                    children=move |toast| {
+            <For
-                        let id = toast.id;
+                each=move || {
-                        view! {
+                    let list = toasts.get();
-                            <SonnerTrigger
+                    // Reverse the list so newest is at the end (for stacking)
-                                variant=toast.variant
+                    // or newest is at the beginning (for display logic)
-                                title=toast.title
+                    list.into_iter().rev().enumerate().collect::<Vec<_>>()
-                                description=toast.description
+                }
-                                position=position.to_string()
+                key=|(_, toast)| toast.id
-                                on_dismiss=Some(Callback::new(move |_| {
+                children=move |(index, toast)| {
-                                    toasts.update(|vec| vec.retain(|t| t.id != id));
+                    let id = toast.id;
-                                }))
+                    let total = toasts.with(|t| t.len());
-                            />
+                    
+                    // If hovered, expand the stack
+                    let expanded_style = move || {
+                        if is_hovered.get() {
+                            let offset = index as f64 * 70.0;
+                            let is_bottom = !position.to_string().contains("Top");
+                            let y_dir = if is_bottom { -1.0 } else { 1.0 };
+                            format!("transform: translateY({}px) scale(1); opacity: 1;", offset * y_dir)
+                        } else {
+                            "".to_string()
                         }
+                    };
+
+                    view! {
+                        <div style=expanded_style>
+                            <SonnerTrigger
+                                toast=toast
+                                index=index
+                                total=total
+                                position=position
+                                on_dismiss=Callback::new(move |_| {
+                                    toasts.update(|vec| vec.retain(|t| t.id != id));
+                                })
+                            />
+                        </div>
                     }
-                />
+                }
-            </SonnerList>
+            />
-        </SonnerContainer>
+        </div>
-    }
+    }.into_any()
 }
 
 // Global Helper Functions
@@ -224,16 +196,18 @@ pub fn toast(title: impl Into<String>, variant: ToastType) {
             duration: 4000,
         };
         
-        toasts.update(|t| t.push(new_toast.clone()));
+        toasts.update(|t| {
+            t.push(new_toast.clone());
+            if t.len() > 5 {
+                t.remove(0);
+            }
+        });
 
-        // Auto remove after duration
         let duration = new_toast.duration;
         leptos::task::spawn_local(async move {
             gloo_timers::future::TimeoutFuture::new(duration as u32).await;
             toasts.update(|vec| vec.retain(|t| t.id != id));
         });
-    } else {
-        gloo_console::warn!("ToasterStore not found (global static). Make sure provide_toaster() is called.");
     }
 }
 
@@ -244,4 +218,4 @@ pub fn toast_error(title: impl Into<String>) { toast(title, ToastType::Error); }
 #[allow(dead_code)]
 pub fn toast_warning(title: impl Into<String>) { toast(title, ToastType::Warning); }
 #[allow(dead_code)]
-pub fn toast_info(title: impl Into<String>) { toast(title, ToastType::Info); }
+pub fn toast_info(title: impl Into<String>) { toast(title, ToastType::Info); }