fix(mobile): fix sort dropdown button events

- Sort torrents by added date (newest first) by default
- Add Date column to desktop table (after ETA)
- Add Date to mobile card view (grid-cols-3 -> grid-cols-4)
- Add Date option to mobile sort dropdown
- Display dates in DD/MM/YYYY HH:mm format
- Add chrono wasm-bindgen feature

frontend/Cargo.toml

@@ -21,7 +21,7 @@ wasm-bindgen = "0.2"
 wasm-bindgen-futures = "0.4"
 uuid = { version = "1", features = ["v4", "js"] }
 futures = "0.3"
-chrono = { version = "0.4", features = ["serde"] }
+chrono = { version = "0.4", features = ["serde", "wasm-bindgen"] }
 web-sys = { version = "0.3", features = [
     "HtmlDivElement",
     "HtmlUListElement",

frontend/src/components/torrent/table.rs

@@ -46,19 +46,11 @@ fn format_duration(seconds: i64) -> String {
 }
 
 fn format_date(timestamp: i64) -> String {
-    if timestamp <= 0 {
-        return "-".to_string();
+    let dt = chrono::DateTime::from_timestamp(timestamp, 0);
+    match dt {
+        Some(dt) => dt.format("%d/%m/%Y %H:%M").to_string(),
+        None => "N/A".to_string(),
     }
-    let date = js_sys::Date::new(&wasm_bindgen::JsValue::from_f64((timestamp * 1000) as f64));
-
-    // Simple formatting: YYYY-MM-DD HH:mm
-    let year = date.get_full_year();
-    let month = date.get_month() + 1; // 0-based
-    let day = date.get_date();
-    let hours = date.get_hours();
-    let minutes = date.get_minutes();
-
-    format!("{:04}-{:02}-{:02} {:02}:{:02}", year, month, day, hours, minutes)
 }
 
 #[derive(Clone, Copy, Debug, PartialEq, Eq)]
@@ -70,7 +62,7 @@ enum SortColumn {
     DownSpeed,
     UpSpeed,
     ETA,
-    Added,
+    AddedDate,
 }
 
 #[derive(Clone, Copy, Debug, PartialEq, Eq)]
@@ -83,7 +75,7 @@ enum SortDirection {
 pub fn TorrentTable() -> impl IntoView {
     let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
 
-    let sort_col = create_rw_signal(SortColumn::Added);
+    let sort_col = create_rw_signal(SortColumn::AddedDate);
     let sort_dir = create_rw_signal(SortDirection::Descending);
 
     let filtered_torrents = move || {
@@ -144,7 +136,7 @@ pub fn TorrentTable() -> impl IntoView {
                     let b_eta = if b.eta <= 0 { i64::MAX } else { b.eta };
                     a_eta.cmp(&b_eta)
                 }
-                SortColumn::Added => a.added_date.cmp(&b.added_date),
+                SortColumn::AddedDate => a.added_date.cmp(&b.added_date),
             };
             if dir == SortDirection::Descending {
                 cmp.reverse()
@@ -282,8 +274,8 @@ pub fn TorrentTable() -> impl IntoView {
                             <th class="w-24 cursor-pointer hover:bg-base-300 group select-none" on:click=move |_| handle_sort(SortColumn::ETA)>
                                  <div class="flex items-center">"ETA" {move || sort_arrow(SortColumn::ETA)}</div>
                             </th>
-                            <th class="w-32 cursor-pointer hover:bg-base-300 group select-none" on:click=move |_| handle_sort(SortColumn::Added)>
-                                 <div class="flex items-center">"Added" {move || sort_arrow(SortColumn::Added)}</div>
+                            <th class="w-32 cursor-pointer hover:bg-base-300 group select-none" on:click=move |_| handle_sort(SortColumn::AddedDate)>
+                                 <div class="flex items-center">"Date" {move || sort_arrow(SortColumn::AddedDate)}</div>
                             </th>
                         </tr>
                     </thead>
@@ -338,7 +330,7 @@ pub fn TorrentTable() -> impl IntoView {
                                     <td class="text-right font-mono text-[11px] opacity-80 text-success">{format_speed(t.down_rate)}</td>
                                     <td class="text-right font-mono text-[11px] opacity-80 text-primary">{format_speed(t.up_rate)}</td>
                                     <td class="text-right font-mono text-[11px] opacity-80">{format_duration(t.eta)}</td>
-                                    <td class="text-right font-mono text-[11px] opacity-60 whitespace-nowrap">{format_date(t.added_date)}</td>
+                                    <td class="text-right font-mono text-[11px] opacity-80 whitespace-nowrap">{format_date(t.added_date)}</td>
                                 </tr>
                             }
                         }).collect::<Vec<_>>()}
@@ -376,12 +368,10 @@ pub fn TorrentTable() -> impl IntoView {
                                     <ul
                                         class="absolute top-full right-0 z-[100] menu p-2 shadow bg-base-100 rounded-box w-48 mt-1 border border-base-200 text-xs"
                                         style=move || if sort_open.get() { "display: block" } else { "display: none" }
-                            on:pointerdown=move |e| e.stop_propagation()
                                     >
                                          <li class="menu-title px-2 py-1 opacity-50 text-[10px] uppercase font-bold">"Sort By"</li>
                                          {
                                               let columns = vec![
-                                     (SortColumn::Added, "Date Added"),
                                                   (SortColumn::Name, "Name"),
                                                   (SortColumn::Size, "Size"),
                                                   (SortColumn::Progress, "Progress"),
@@ -389,6 +379,7 @@ pub fn TorrentTable() -> impl IntoView {
                                                   (SortColumn::DownSpeed, "Down Speed"),
                                                   (SortColumn::UpSpeed, "Up Speed"),
                                                   (SortColumn::ETA, "ETA"),
+                                                  (SortColumn::AddedDate, "Date"),
                                               ];
 
                                               columns.into_iter().map(|(col, label)| {
@@ -399,7 +390,8 @@ pub fn TorrentTable() -> impl IntoView {
                                                       <li>
                                                           <button
                                                               class=move || if is_active() { "bg-primary/10 text-primary font-bold flex justify-between" } else { "flex justify-between" }
-                                                 on:pointerdown=move |e| {
+                                                              on:click=move |e| {
+                                                                  e.prevent_default();
                                                                   e.stop_propagation();
                                                                   handle_sort(col);
                                                                   set_sort_open.set(false);
@@ -423,8 +415,7 @@ pub fn TorrentTable() -> impl IntoView {
                                 </div>
                             </div>
 
-                <div class="overflow-y-auto p-3 pb-20 flex-1 grid grid-cols-1 content-start gap-3">
-                {move || filtered_torrents().into_iter().map(|t| {
+                            <div class="overflow-y-auto p-3 pb-20 flex-1 grid grid-cols-1 content-start gap-3">                {move || filtered_torrents().into_iter().map(|t| {
                     let progress_class = if t.percent_complete >= 100.0 { "progress-success" } else { "progress-primary" };
                     let status_str = format!("{:?}", t.status);
                     let status_badge_class = match t.status {
@@ -524,7 +515,7 @@ pub fn TorrentTable() -> impl IntoView {
                                     <progress class={format!("progress w-full h-1.5 {}", progress_class)} value={t.percent_complete} max="100"></progress>
                                 </div>
 
-                                <div class="grid grid-cols-3 gap-2 text-[10px] font-mono opacity-80 pt-1 border-t border-base-200/50">
+                                <div class="grid grid-cols-4 gap-2 text-[10px] font-mono opacity-80 pt-1 border-t border-base-200/50">
                                     <div class="flex flex-col">
                                         <span class="text-[9px] opacity-60 uppercase">"Down"</span>
                                         <span class="text-success">{format_speed(t.down_rate)}</span>
@@ -533,10 +524,14 @@ pub fn TorrentTable() -> impl IntoView {
                                         <span class="text-[9px] opacity-60 uppercase">"Up"</span>
                                         <span class="text-primary">{format_speed(t.up_rate)}</span>
                                     </div>
-                                    <div class="flex flex-col text-right">
+                                    <div class="flex flex-col text-center border-r border-base-200/50">
                                         <span class="text-[9px] opacity-60 uppercase">"ETA"</span>
                                         <span>{format_duration(t.eta)}</span>
                                     </div>
+                                    <div class="flex flex-col text-right">
+                                        <span class="text-[9px] opacity-60 uppercase">"Date"</span>
+                                        <span>{format_date(t.added_date)}</span>
+                                    </div>
                                 </div>
                             </div>
                         </div>