fix: resolve compilation errors, fix lock_scroll path, and enhance DataTable attributes

frontend/src/components/torrent/table.rs

@@ -204,7 +204,7 @@ pub fn TorrentTable() -> impl IntoView {
                 </div>
             </div>
         </div>
-    }
+    }.into_any()
 }
 
 #[component]
@@ -269,7 +269,7 @@ fn TorrentRow(
                                 {format_date(t.added_date)}
                             </TableCell>
                         </TableRow>
-                    }
+                    }.into_any()
                 }
             }
         </Show>

frontend/src/components/ui/context_menu.rs

@@ -145,7 +145,7 @@ pub fn ContextMenuHoldAction(
                 {children()}
             </span>
         </div>
-    }
+    }.into_any()
 }
 
 #[derive(Clone)]
@@ -237,7 +237,7 @@ pub fn ContextMenuContent(
     let target_id_for_script = ctx.target_id.clone();
 
     view! {
-        <script src="/hooks/lock_scroll.js"></script>
+        <script src="/lock_scroll.js"></script>
 
         <div
             data-name="ContextMenuContent"
@@ -399,7 +399,7 @@ pub fn ContextMenuContent(
                 target_id_for_script,
             )}
         </script>
-    }
+    }.into_any()
 }
 
 #[component]

frontend/src/components/ui/mod.rs

@@ -5,3 +5,4 @@ pub mod toast;
 pub mod context_menu;
 pub mod theme_toggle;
 pub mod svg_icon;
+pub mod table;

frontend/src/components/ui/table.rs

@@ -1,19 +1,44 @@
 use leptos::prelude::*;
-use leptos_ui::clx;
+use tw_merge::tw_merge;
 
-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"}
+#[component]
+pub fn TableWrapper(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!("overflow-hidden rounded-md border", class);
+    view! { <div class=class>{children()}</div> }
 }
 
-pub use components::*;
+#[component]
+pub fn Table(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!("w-full text-sm caption-bottom", class);
+    view! { <table class=class>{children()}</table> }
+}
+
+#[component]
+pub fn TableHeader(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!("[&_tr]:border-b", class);
+    view! { <thead class=class>{children()}</thead> }
+}
+
+#[component]
+pub fn TableRow(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!("border-b transition-colors data-[state=selected]:bg-muted hover:bg-muted/50", class);
+    view! { <tr class=class>{children()}</tr> }
+}
+
+#[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);
+    view! { <th class=class>{children()}</th> }
+}
+
+#[component]
+pub fn TableBody(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!("[&_tr:last-child]:border-0", class);
+    view! { <tbody class=class>{children()}</tbody> }
+}
+
+#[component]
+pub fn TableCell(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!("p-2 align-middle", class);
+    view! { <td class=class>{children()}</td> }
+}