From 14f811fd79a59c20f912be9fb5cfabaff97515c6 Mon Sep 17 00:00:00 2001
From: spinline <bilal.karatatr.@gmail.com>
Date: Fri, 6 Feb 2026 17:19:47 +0300
Subject: [PATCH] fix: convert sort dropdown to signal-based for iOS Safari

---
 frontend/public/tailwind.css             | 34 +++--------------
 frontend/src/components/torrent/table.rs | 47 +++++++++++++++---------
 2 files changed, 36 insertions(+), 45 deletions(-)

diff --git a/frontend/public/tailwind.css b/frontend/public/tailwind.css
index 585cb49..623eb0d 100644
--- a/frontend/public/tailwind.css
+++ b/frontend/public/tailwind.css
@@ -1328,34 +1328,6 @@
       --toast-x: 0;
     }
   }
-  .dropdown-end {
-    @layer daisyui.l1.l2 {
-      --anchor-h: span-left;
-      :where(.dropdown-content) {
-        inset-inline-end: calc(0.25rem * 0);
-        translate: 0 0;
-        [dir="rtl"] & {
-          translate: 0 0;
-        }
-      }
-      &.dropdown-left {
-        --anchor-h: left;
-        --anchor-v: span-top;
-        .dropdown-content {
-          top: auto;
-          bottom: calc(0.25rem * 0);
-        }
-      }
-      &.dropdown-right {
-        --anchor-h: right;
-        --anchor-v: span-top;
-        .dropdown-content {
-          top: auto;
-          bottom: calc(0.25rem * 0);
-        }
-      }
-    }
-  }
   .toast-bottom {
     @layer daisyui.l1.l2 {
       top: auto;
@@ -1363,6 +1335,9 @@
       --toast-y: 0;
     }
   }
+  .top-full {
+    top: 100%;
+  }
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
@@ -1596,6 +1571,9 @@
       gap: calc(0.25rem * 2);
     }
   }
+  .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
diff --git a/frontend/src/components/torrent/table.rs b/frontend/src/components/torrent/table.rs
index b8bce12..03a8918 100644
--- a/frontend/src/components/torrent/table.rs
+++ b/frontend/src/components/torrent/table.rs
@@ -152,6 +152,17 @@ pub fn TorrentTable() -> impl IntoView {
         }
     };
 
+    // Signal-based sort dropdown for mobile
+    let (sort_open, set_sort_open) = create_signal(false);
+    let sort_skip_close = store_value(false);
+    let _ = window_event_listener(ev::click, move |_| {
+        if sort_skip_close.get_value() {
+            sort_skip_close.set_value(false);
+            return;
+        }
+        set_sort_open.set(false);
+    });
+
     let sort_arrow = move |col: SortColumn| {
         if sort_col.get() == col {
             match sort_dir.get() {
@@ -325,21 +336,31 @@ pub fn TorrentTable() -> impl IntoView {
                 <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>
 
-                    <div
-                        class="dropdown dropdown-end"
-                        on:touchstart=move |e| e.stop_propagation()
-                    >
+                    <div class="relative">
                         <div
-                            tabindex="0"
                             role="button"
                             class="btn btn-ghost btn-xs gap-1 opacity-70 font-normal"
+                            on:pointerdown=move |e| {
+                                e.stop_propagation();
+                                let cur = sort_open.get_untracked();
+                                if cur {
+                                    set_sort_open.set(false);
+                                } else {
+                                    set_sort_open.set(true);
+                                    sort_skip_close.set_value(true);
+                                }
+                            }
                         >
                             <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="M3 7.5L7.5 3m0 0L12 7.5M7.5 3v13.5m13.5 0L16.5 21m0 0L12 16.5m4.5 4.5V7.5" />
                             </svg>
                             "Sort"
                         </div>
-                        <ul tabindex="0" class="dropdown-content z-[100] menu p-2 shadow bg-base-100 rounded-box w-48 border border-base-200 text-xs">
+                        <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![
@@ -352,26 +373,18 @@ pub fn TorrentTable() -> impl IntoView {
                                      (SortColumn::ETA, "ETA"),
                                  ];
 
-                                 let close_dropdown = move || {
-                                     if let Some(doc) = web_sys::window().and_then(|w| w.document()) {
-                                         if let Some(active) = doc.active_element() {
-                                             let _ = active.dyn_into::<web_sys::HtmlElement>().map(|el| el.blur());
-                                         }
-                                     }
-                                 };
-
                                  columns.into_iter().map(|(col, label)| {
                                      let is_active = move || sort_col.get() == col;
                                      let current_dir = move || sort_dir.get();
-                                     let close = close_dropdown.clone();
 
                                      view! {
                                          <li>
                                              <button
                                                  class=move || if is_active() { "bg-primary/10 text-primary font-bold flex justify-between" } else { "flex justify-between" }
-                                                 on:click=move |_| {
+                                                 on:pointerdown=move |e| {
+                                                     e.stop_propagation();
                                                      handle_sort(col);
-                                                     close();
+                                                     set_sort_open.set(false);
                                                  }
                                              >
                                                  {label}