feat: modernize UI, add mobile card layout, and fix iOS sidebar interactions

frontend/public/tailwind.css

@@ -1374,6 +1374,15 @@
       }
     }
   }
+  .join-item {
+    &:where(*:not(:first-child, :disabled, [disabled], .btn-disabled)) {
+      margin-inline-start: calc(var(--border, 1px) * -1);
+      margin-block-start: 0;
+    }
+    &:where(*:is(:disabled, [disabled], .btn-disabled)) {
+      border-width: var(--border, 1px) 0 var(--border, 1px) var(--border, 1px);
+    }
+  }
   .modal-action {
     @layer daisyui.l1.l2.l3 {
       margin-top: calc(0.25rem * 6);
@@ -1479,6 +1488,68 @@
       }
     }
   }
+  .join {
+    display: inline-flex;
+    align-items: stretch;
+    --join-ss: 0;
+    --join-se: 0;
+    --join-es: 0;
+    --join-ee: 0;
+    :where(.join-item) {
+      border-start-start-radius: var(--join-ss, 0);
+      border-start-end-radius: var(--join-se, 0);
+      border-end-start-radius: var(--join-es, 0);
+      border-end-end-radius: var(--join-ee, 0);
+      * {
+        --join-ss: var(--radius-field);
+        --join-se: var(--radius-field);
+        --join-es: var(--radius-field);
+        --join-ee: var(--radius-field);
+      }
+    }
+    > .join-item:where(:first-child) {
+      --join-ss: var(--radius-field);
+      --join-se: 0;
+      --join-es: var(--radius-field);
+      --join-ee: 0;
+    }
+    :first-child:not(:last-child) {
+      :where(.join-item) {
+        --join-ss: var(--radius-field);
+        --join-se: 0;
+        --join-es: var(--radius-field);
+        --join-ee: 0;
+      }
+    }
+    > .join-item:where(:last-child) {
+      --join-ss: 0;
+      --join-se: var(--radius-field);
+      --join-es: 0;
+      --join-ee: var(--radius-field);
+    }
+    :last-child:not(:first-child) {
+      :where(.join-item) {
+        --join-ss: 0;
+        --join-se: var(--radius-field);
+        --join-es: 0;
+        --join-ee: var(--radius-field);
+      }
+    }
+    > .join-item:where(:only-child) {
+      --join-ss: var(--radius-field);
+      --join-se: var(--radius-field);
+      --join-es: var(--radius-field);
+      --join-ee: var(--radius-field);
+    }
+    :only-child {
+      :where(.join-item) {
+        --join-ss: var(--radius-field);
+        --join-se: var(--radius-field);
+        --join-es: var(--radius-field);
+        --join-ee: var(--radius-field);
+      }
+    }
+  }
   .line-clamp-2 {
     overflow: hidden;
     display: -webkit-box;
@@ -1701,6 +1772,10 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
+  .border-l-0 {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 0px;
+  }
   .badge-ghost {
     @layer daisyui.l1.l2 {
       border-color: var(--color-base-200);
@@ -1735,6 +1810,12 @@
   .border-base-300 {
     border-color: var(--color-base-300);
   }
+  .border-base-content\/20 {
+    border-color: var(--color-base-content);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
+    }
+  }
   .border-white\/5 {
     border-color: color-mix(in srgb, #fff 5%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1816,6 +1897,9 @@
       padding-inline: calc(0.25rem * 2 - var(--border));
     }
   }
+  .px-2 {
+    padding-inline: calc(var(--spacing) * 2);
+  }
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
@@ -2128,6 +2212,12 @@
       }
     }
   }
+  .focus\:outline-none {
+    &:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  }
   .focus-visible\:ring-2 {
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);

frontend/src/components/layout/sidebar.rs

@@ -1,4 +1,5 @@
 use leptos::*;
+use leptos::wasm_bindgen::JsCast;
 
 #[component]
 pub fn Sidebar() -> impl IntoView {
@@ -10,8 +11,17 @@ pub fn Sidebar() -> impl IntoView {
     let completed_count = move || store.torrents.get().iter().filter(|t| t.status == shared::TorrentStatus::Seeding || t.status == shared::TorrentStatus::Paused).count();
     let inactive_count = move || store.torrents.get().iter().filter(|t| t.status == shared::TorrentStatus::Paused || t.status == shared::TorrentStatus::Error).count();
 
+    let close_drawer = move || {
+        if let Some(element) = document().get_element_by_id("my-drawer") {
+            if let Ok(input) = element.dyn_into::<web_sys::HtmlInputElement>() {
+                input.set_checked(false);
+            }
+        }
+    };
+
     let set_filter = move |f: crate::store::FilterStatus| {
         store.filter.set(f);
+        close_drawer();
     };
 
     let filter_class = move |f: crate::store::FilterStatus| {
@@ -24,7 +34,7 @@ pub fn Sidebar() -> impl IntoView {
                 <ul class="menu w-full rounded-box gap-1">
                     <li class="menu-title text-primary uppercase font-bold px-4">"Filters"</li>
                     <li>
-                        <a class={move || filter_class(crate::store::FilterStatus::All)} on:click=move |_| set_filter(crate::store::FilterStatus::All)>
+                        <a class={move || format!("cursor-pointer {}", filter_class(crate::store::FilterStatus::All))} on:click=move |_| set_filter(crate::store::FilterStatus::All)>
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                 <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
                             </svg>
@@ -33,7 +43,7 @@ pub fn Sidebar() -> impl IntoView {
                         </a>
                     </li>
                     <li>
-                        <a class={move || filter_class(crate::store::FilterStatus::Downloading)} on:click=move |_| set_filter(crate::store::FilterStatus::Downloading)>
+                        <a class={move || format!("cursor-pointer {}", filter_class(crate::store::FilterStatus::Downloading))} on:click=move |_| set_filter(crate::store::FilterStatus::Downloading)>
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                 <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
                             </svg>
@@ -42,7 +52,7 @@ pub fn Sidebar() -> impl IntoView {
                         </a>
                     </li>
                     <li>
-                        <a class={move || filter_class(crate::store::FilterStatus::Seeding)} on:click=move |_| set_filter(crate::store::FilterStatus::Seeding)>
+                        <a class={move || format!("cursor-pointer {}", filter_class(crate::store::FilterStatus::Seeding))} on:click=move |_| set_filter(crate::store::FilterStatus::Seeding)>
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                 <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
                             </svg>
@@ -51,7 +61,7 @@ pub fn Sidebar() -> impl IntoView {
                         </a>
                     </li>
                     <li>
-                        <a class={move || filter_class(crate::store::FilterStatus::Completed)} on:click=move |_| set_filter(crate::store::FilterStatus::Completed)>
+                        <a class={move || format!("cursor-pointer {}", filter_class(crate::store::FilterStatus::Completed))} on:click=move |_| set_filter(crate::store::FilterStatus::Completed)>
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                 <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                             </svg>
@@ -60,7 +70,7 @@ pub fn Sidebar() -> impl IntoView {
                         </a>
                     </li>
                     <li>
-                        <a class={move || filter_class(crate::store::FilterStatus::Inactive)} on:click=move |_| set_filter(crate::store::FilterStatus::Inactive)>
+                        <a class={move || format!("cursor-pointer {}", filter_class(crate::store::FilterStatus::Inactive))} on:click=move |_| set_filter(crate::store::FilterStatus::Inactive)>
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                 <path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
                             </svg>

frontend/src/components/layout/toolbar.rs

@@ -3,6 +3,7 @@ use leptos::*;
 #[component]
 pub fn Toolbar() -> impl IntoView {
     let (show_add_modal, set_show_add_modal) = create_signal(false);
+    let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
 
     view! {
         <div class="navbar min-h-14 h-14 bg-base-100 p-0">
@@ -28,7 +29,31 @@ pub fn Toolbar() -> impl IntoView {
             </div>
 
             <div class="navbar-end gap-2 px-4">
-                 <input type="text" placeholder="Filter..." class="input input-sm input-bordered w-full max-w-xs" />
+                 <div class="join">
+                    <input 
+                        type="text" 
+                        placeholder="Search..." 
+                        class="input input-sm input-bordered join-item w-full max-w-xs focus:outline-none" 
+                        prop:value=move || store.search_query.get()
+                        on:input=move |ev| store.search_query.set(event_target_value(&ev))
+                        on:keydown=move |ev: web_sys::KeyboardEvent| {
+                            if ev.key() == "Escape" {
+                                store.search_query.set(String::new());
+                            }
+                        }
+                    />
+                    <Show when=move || !store.search_query.get().is_empty()>
+                        <button 
+                            class="btn btn-sm btn-ghost join-item border-base-content/20 border-l-0 px-2"
+                            title="Clear Search"
+                            on:click=move |_| store.search_query.set(String::new())
+                        >
+                            <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 opacity-70">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                            </svg>
+                        </button>
+                    </Show>
+                 </div>
             </div>
 
             <Show when=move || show_add_modal.get()>

frontend/src/components/torrent/table.rs

@@ -46,14 +46,24 @@ pub fn TorrentTable() -> impl IntoView {
     let filtered_torrents = move || {
         let mut torrents = store.torrents.get().into_iter().filter(|t| {
             let filter = store.filter.get();
-            match filter {
+            let search = store.search_query.get().to_lowercase();
+            
+            let matches_filter = match filter {
                 crate::store::FilterStatus::All => true,
                 crate::store::FilterStatus::Downloading => t.status == shared::TorrentStatus::Downloading,
                 crate::store::FilterStatus::Seeding => t.status == shared::TorrentStatus::Seeding,
                 crate::store::FilterStatus::Completed => t.status == shared::TorrentStatus::Seeding || t.status == shared::TorrentStatus::Paused, // Approximate
                 crate::store::FilterStatus::Inactive => t.status == shared::TorrentStatus::Paused || t.status == shared::TorrentStatus::Error,
-                 _ => true
+                _ => true
-            }
+            };
+
+            let matches_search = if search.is_empty() {
+                true
+            } else {
+                t.name.to_lowercase().contains(&search)
+            };
+
+            matches_filter && matches_search
         }).collect::<Vec<_>>();
 
         torrents.sort_by(|a, b| {

frontend/src/store.rs

@@ -33,13 +33,15 @@ impl FilterStatus {
 pub struct TorrentStore {
     pub torrents: RwSignal<Vec<Torrent>>,
     pub filter: RwSignal<FilterStatus>,
+    pub search_query: RwSignal<String>,
 }
 
 pub fn provide_torrent_store() {
     let torrents = create_rw_signal(Vec::<Torrent>::new());
     let filter = create_rw_signal(FilterStatus::All);
+    let search_query = create_rw_signal(String::new());
 
-    let store = TorrentStore { torrents, filter };
+    let store = TorrentStore { torrents, filter, search_query };
     provide_context(store);
 
     // Initialize SSE connection