feat: refactor torrent table to use DataTable components and fix context menu bugs

frontend/src/components/ui/context_menu.rs

@@ -100,12 +100,12 @@ pub fn ContextMenuHoldAction(
 
     Effect::new(move |_| {
         if is_holding.get() {
-            let start_time = web_sys::window().unwrap().performance().unwrap().now();
+            let start_time = js_sys::Date::now();
             let duration = hold_duration as f64;
             
             leptos::task::spawn_local(async move {
                 while is_holding.get_untracked() {
-                    let now = web_sys::window().unwrap().performance().unwrap().now();
+                    let now = js_sys::Date::now();
                     let elapsed = now - start_time;
                     let p = (elapsed / duration).min(1.0);
                     progress.set(p * 100.0);
@@ -133,8 +133,8 @@ pub fn ContextMenuHoldAction(
             on:mousedown=on_mousedown
             on:mouseup=on_mouseup
             on:mouseleave=on_mouseup
-            on:touchstart=on_mousedown
-            on:touchend=on_mouseup
+            on:touchstart=move |_| on_mousedown(web_sys::MouseEvent::new("mousedown").unwrap())
+            on:touchend=move |_| on_mouseup(web_sys::MouseEvent::new("mouseup").unwrap())
         >
             // Progress background
             <div 

frontend/src/components/ui/table.rs

@@ -0,0 +1,19 @@
+use leptos::prelude::*;
+use leptos_ui::clx;
+
+mod components {
+    use super::*;
+    clx! {TableWrapper, div, "overflow-hidden rounded-md border"}
+    clx! {Table, table, "w-full max-w-7xl text-sm caption-bottom"}
+    clx! {TableCaption, caption, "mt-4 text-sm text-muted-foreground"}
+    clx! {TableHeader, thead, "[&_tr]:border-b"}
+    clx! {TableRow, tr, "border-b transition-colors data-[state=selected]:bg-muted hover:bg-muted/50"}
+    clx! {TableHead, th, "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]"}
+    clx! {TableBody, tbody, "[&_tr:last-child]:border-0"}
+    clx! {TableCell, td, "p-4 align-middle [&:has([role=checkbox])]:pr-0  &:has([role=checkbox])]:pl-3"}
+    clx! {TableFooter, tfoot, "font-medium border border-t bg-muted/50 [&>tr]:last:border-b-0"}
+    clx! {CardContent, div, "pt-4"}
+    clx! {CardFooter, div, "mt-4", "flex items-center justify-end"}
+}
+
+pub use components::*;