fix(mobile): fix sort dropdown event handling

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

frontend/src/components/torrent/table.rs

@@ -339,6 +339,14 @@ pub fn TorrentTable() -> impl IntoView {
             </div>
 
                         <div class="md:hidden flex flex-col h-full bg-base-200 relative">
+                            // Transparent overlay to close sort dropdown
+                            <Show when=move || sort_open.get()>
+                                <div
+                                    class="fixed inset-0 z-[98] cursor-default"
+                                    on:click=move |_| set_sort_open.set(false)
+                                ></div>
+                            </Show>
+
                             <div class="px-3 py-2 border-b border-base-200 flex justify-between items-center bg-base-100/95 backdrop-blur z-10 shrink-0">
                                 <span class="text-xs font-bold opacity-50 uppercase tracking-wider">"Torrents"</span>
 
@@ -346,7 +354,7 @@ pub fn TorrentTable() -> impl IntoView {
                                     <div
                                         role="button"
                                         class="btn btn-ghost btn-xs gap-1 opacity-70 font-normal"
-                                        on:pointerdown=move |e| {
+                                        on:click=move |e| {
                                             e.stop_propagation();
                                             let cur = sort_open.get_untracked();
                                             set_sort_open.set(!cur);
@@ -360,6 +368,7 @@ 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>
                                          {
@@ -381,9 +390,9 @@ pub fn TorrentTable() -> impl IntoView {
                                                   view! {
                                                       <li>
                                                           <button
-                                                              type="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);