From f0b3db9caf0f3f7984daef8845ec190f47479018 Mon Sep 17 00:00:00 2001
From: spinline <bilal.karatatr.@gmail.com>
Date: Wed, 4 Feb 2026 17:53:22 +0300
Subject: [PATCH] fix(ui): finalize iOS dropdown interactions and add selection
 checkmark

---
 frontend/src/components/layout/statusbar.rs | 43 ++++++++++-----------
 1 file changed, 20 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/layout/statusbar.rs b/frontend/src/components/layout/statusbar.rs
index 1fa4f19..e10607f 100644
--- a/frontend/src/components/layout/statusbar.rs
+++ b/frontend/src/components/layout/statusbar.rs
@@ -115,12 +115,11 @@ pub fn StatusBar() -> impl IntoView {
                 </div>
 
                 <Show when=move || down_menu_open.get() fallback=|| ()>
-                    <div
-                        class="fixed inset-0 z-[99] bg-black opacity-0 cursor-pointer"
-                        role="button"
-                        tabindex="0"
+                    <button
+                        type="button"
+                        class="fixed inset-0 z-[99] bg-black opacity-0 cursor-default w-full h-full border-0 outline-none"
                         on:click=move |e| { e.stop_propagation(); set_down_menu_open.set(false); }
-                    ></div>
+                    ></button>
                 </Show>
 
                 <ul tabindex="0" class="dropdown-content z-[100] menu p-2 shadow bg-base-200 rounded-box w-40 mb-2 border border-base-300">
@@ -128,21 +127,18 @@ pub fn StatusBar() -> impl IntoView {
                         limits.clone().into_iter().map(|(val, label)| {
                             let is_active = move || {
                                 let current = stats.get().down_limit.unwrap_or(0);
-                                logging::error!("Down Active Check: current={} (i64), val={} (i64), diff={}, match={}", 
-                                    current, 
-                                    val, 
-                                    (current - val).abs(),
-                                    (current - val).abs() < 1024
-                                );
                                 (current - val).abs() < 1024
                             };
                             view! {
                                 <li>
                                     <button
-                                        class=move || if is_active() { "active text-xs" } else { "text-xs" }
+                                        class=move || if is_active() { "active text-xs flex justify-between" } else { "text-xs flex justify-between" }
                                         on:click=move |_| set_limit("down", val)
                                     >
                                         {label}
+                                        <Show when=is_active fallback=|| ()>
+                                            <span>"✓"</span>
+                                        </Show>
                                     </button>
                                 </li>
                             }
@@ -175,12 +171,11 @@ pub fn StatusBar() -> impl IntoView {
                 </div>
 
                 <Show when=move || up_menu_open.get() fallback=|| ()>
-                    <div
-                        class="fixed inset-0 z-[99] bg-black opacity-0 cursor-pointer"
-                        role="button"
-                        tabindex="0"
+                    <button
+                        type="button"
+                        class="fixed inset-0 z-[99] bg-black opacity-0 cursor-default w-full h-full border-0 outline-none"
                         on:click=move |e| { e.stop_propagation(); set_up_menu_open.set(false); }
-                    ></div>
+                    ></button>
                 </Show>
 
                 <ul tabindex="0" class="dropdown-content z-[100] menu p-2 shadow bg-base-200 rounded-box w-40 mb-2 border border-base-300">
@@ -193,10 +188,13 @@ pub fn StatusBar() -> impl IntoView {
                             view! {
                                 <li>
                                     <button
-                                        class=move || if is_active() { "active text-xs" } else { "text-xs" }
+                                        class=move || if is_active() { "active text-xs flex justify-between" } else { "text-xs flex justify-between" }
                                         on:click=move |_| set_limit("up", val)
                                     >
                                         {label}
+                                        <Show when=is_active fallback=|| ()>
+                                            <span>"✓"</span>
+                                        </Show>
                                     </button>
                                 </li>
                             }
@@ -227,12 +225,11 @@ pub fn StatusBar() -> impl IntoView {
                     </div>
 
                     <Show when=move || theme_open.get() fallback=|| ()>
-                        <div
-                            class="fixed inset-0 z-[99] bg-black opacity-0 cursor-pointer"
-                            role="button"
-                            tabindex="0"
+                        <button
+                            type="button"
+                            class="fixed inset-0 z-[99] bg-black opacity-0 cursor-default w-full h-full border-0 outline-none"
                             on:click=move |e| { e.stop_propagation(); set_theme_open.set(false); }
-                        ></div>
+                        ></button>
                     </Show>
 
                     <ul tabindex="0" class="dropdown-content z-[100] menu p-2 shadow bg-base-200 rounded-box w-52 mb-2 border border-base-300 max-h-96 overflow-y-auto block">