chore: remove db files from git and update gitignore

fix(setup): add logging and error details for setup debugging
2026-02-11 21:54:15 +03:00 · 2026-02-11 21:53:53 +03:00
43 changed files with 565 additions and 3384 deletions
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -3761,6 +3761,7 @@ dependencies = [
 "struct-patch",
 "thiserror 2.0.18",
 "tokio",
 "tracing",
 "utoipa",
 ]
--- a/backend/src/main.rs
+++ b/backend/src/main.rs
@@ -52,22 +52,18 @@ async fn auth_middleware(
    request: Request<Body>,
    next: Next,
 ) -> Result<Response, StatusCode> {
-    // Skip auth for public server functions
+    // Skip auth for public paths
    let path = request.uri().path();
-    if path.starts_with("/api/server_fns/Login") 
+    if path.starts_with("/api/server_fns/Login") // Login server fn
       || path.starts_with("/api/server_fns/login")
       || path.starts_with("/api/server_fns/GetSetupStatus")
       || path.starts_with("/api/server_fns/get_setup_status")
       || path.starts_with("/api/server_fns/Setup")
       || path.starts_with("/api/server_fns/setup")
       || path.starts_with("/swagger-ui")
       || path.starts_with("/api-docs")
-       || !path.starts_with("/api/") 
+       || !path.starts_with("/api/") // Allow static files (frontend)
    {
        return Ok(next.run(request).await);
    }
    // Check token
    if let Some(token) = jar.get("auth_token") {
        use jsonwebtoken::{decode, Validation, DecodingKey};
@@ -225,18 +221,6 @@ async fn main() {
    tracing::info!("Socket: {}", args.socket);
    tracing::info!("Port: {}", args.port);
    // Force linking of server functions from shared crate for registration on Mac
    {
        use shared::server_fns::auth::*;
        let _ = get_setup_status;
        let _ = setup;
        let _ = login;
        let _ = logout;
        let _ = get_user;
        tracing::info!("Server functions linked successfully.");
    }
    // ... rest of the main function ...
    // Startup Health Check
    let socket_path = std::path::Path::new(&args.socket);
--- a/frontend/Cargo.toml
+++ b/frontend/Cargo.toml
@@ -7,7 +7,7 @@ edition = "2021"
 crate-type = ["cdylib", "rlib"]
 [dependencies]
-leptos = { version = "0.8.15", features = ["csr", "msgpack", "nightly"] }
+leptos = { version = "0.8.15", features = ["csr", "msgpack"] }
 leptos_router = { version = "0.8.11" }
 console_error_panic_hook = "0.1"
@@ -39,7 +39,6 @@ struct-patch = "0.5"
 leptos_ui = "0.3"
 tw_merge = "0.1"
 strum = { version = "0.26", features = ["derive"] }
 icons = { version = "0.18.0", features = ["leptos"] }
 [package.metadata.leptos]
-tailwind-input-file = "input.css"
+tailwind-input-file = "input.css"
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -25,8 +25,6 @@
    <link data-trunk rel="copy-file" href="manifest.json" />
    <link data-trunk rel="copy-file" href="icon-192.png" />
    <link data-trunk rel="copy-file" href="icon-512.png" />
    <link data-trunk rel="copy-file" href="public/lock_scroll.js" />
    <script src="/lock_scroll.js"></script>
    <link data-trunk rel="copy-file" href="sw.js" />
    <script>
        (function () {
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -13,8 +13,7 @@
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
        "tailwind-merge": "^3.4.0",
-        "tailwindcss-animate": "^1.0.7",
+        "tailwindcss-animate": "^1.0.7"
        "tw-animate-css": "^1.4.0"
      },
      "devDependencies": {
        "@tailwindcss/postcss": "^4.1.18",
@@ -3738,15 +3737,6 @@
        "node": ">=8.0"
      }
    },
    "node_modules/tw-animate-css": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.4.0.tgz",
      "integrity": "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==",
      "license": "MIT",
      "funding": {
        "url": "https://github.com/sponsors/Wombosvideo"
      }
    },
    "node_modules/universalify": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -5,8 +5,7 @@
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "tailwind-merge": "^3.4.0",
-    "tailwindcss-animate": "^1.0.7",
+    "tailwindcss-animate": "^1.0.7"
    "tw-animate-css": "^1.4.0"
  },
  "description": "",
  "devDependencies": {
@@ -26,4 +25,4 @@
  },
  "type": "module",
  "version": "1.0.0"
-}
+}
--- a/frontend/public/lock_scroll.js
+++ b/frontend/public/lock_scroll.js
@@ -1,253 +0,0 @@
 /**
 * Scroll Lock Utility
 * Handles locking and unlocking scroll for both window and all scrollable containers
 * Similar to react-remove-scroll but in vanilla JavaScript
 */
 (() => {
  // Prevent multiple initializations
  if (window.ScrollLock) {
    return;
  }
  class ScrollLock {
    constructor() {
      this.locked = false;
      this.scrollableElements = [];
      this.scrollPositions = new Map();
      this.originalStyles = new Map();
      this.fixedElements = [];
    }
    /**
     * Find all scrollable elements in the DOM (optimized)
     * Uses more targeted selectors instead of querying all elements
     */
    findScrollableElements() {
      const scrollables = [];
      // More targeted query - only look for elements with overflow properties
      const candidates = document.querySelectorAll(
        '[style*="overflow"], [class*="overflow"], [class*="scroll"], main, aside, section, div',
      );
      // Batch all style reads first to minimize reflows
      const elementsToCheck = [];
      for (const el of candidates) {
        // Skip the element itself or if it's inside these containers
        const dataName = el.getAttribute("data-name");
        const isExcludedElement =
          dataName === "ScrollArea" ||
          dataName === "CommandList" ||
          dataName === "SelectContent" ||
          dataName === "MultiSelectContent" ||
          dataName === "DropdownMenuContent" ||
          dataName === "ContextMenuContent";
        if (
          el !== document.body &&
          el !== document.documentElement &&
          !isExcludedElement &&
          !el.closest('[data-name="ScrollArea"]') &&
          !el.closest('[data-name="CommandList"]') &&
          !el.closest('[data-name="SelectContent"]') &&
          !el.closest('[data-name="MultiSelectContent"]') &&
          !el.closest('[data-name="DropdownMenuContent"]') &&
          !el.closest('[data-name="ContextMenuContent"]')
        ) {
          elementsToCheck.push(el);
        }
      }
      // Now batch read all computed styles and dimensions
      elementsToCheck.forEach((el) => {
        const style = window.getComputedStyle(el);
        const hasOverflow =
          style.overflow === "auto" ||
          style.overflow === "scroll" ||
          style.overflowY === "auto" ||
          style.overflowY === "scroll";
        // Only check scrollHeight if overflow is set
        if (hasOverflow && el.scrollHeight > el.clientHeight) {
          scrollables.push(el);
        }
      });
      return scrollables;
    }
    /**
     * Lock scrolling on all scrollable elements (optimized)
     * Batches all DOM reads before DOM writes to prevent forced reflows
     */
    lock() {
      if (this.locked) return;
      this.locked = true;
      // Find all scrollable elements
      this.scrollableElements = this.findScrollableElements();
      // ===== BATCH 1: READ PHASE - Read all layout properties first =====
      const windowScrollY = window.scrollY;
      const scrollbarWidth = window.innerWidth - document.body.clientWidth;
      // Store window scroll position
      this.scrollPositions.set("window", windowScrollY);
      // Store original body styles
      this.originalStyles.set("body", {
        position: document.body.style.position,
        top: document.body.style.top,
        width: document.body.style.width,
        overflow: document.body.style.overflow,
        paddingRight: document.body.style.paddingRight,
      });
      // Read all fixed-position elements and their padding (only if we have scrollbar)
      if (scrollbarWidth > 0) {
        // Use more targeted query for fixed elements
        const fixedCandidates = document.querySelectorAll(
          '[style*="fixed"], [class*="fixed"], header, nav, aside, [role="dialog"], [role="alertdialog"]',
        );
        this.fixedElements = Array.from(fixedCandidates).filter((el) => {
          const style = window.getComputedStyle(el);
          return (
            style.position === "fixed" &&
            !el.closest('[data-name="DropdownMenuContent"]') &&
            !el.closest('[data-name="MultiSelectContent"]') &&
            !el.closest('[data-name="ContextMenuContent"]')
          );
        });
        // Batch read all padding values
        this.fixedElements.forEach((el) => {
          const computedStyle = window.getComputedStyle(el);
          const currentPadding = Number.parseInt(computedStyle.paddingRight, 10) || 0;
          this.originalStyles.set(el, {
            paddingRight: el.style.paddingRight,
            computedPadding: currentPadding,
          });
        });
      }
      // Read scrollable elements info
      const scrollableInfo = this.scrollableElements.map((el) => {
        const scrollTop = el.scrollTop;
        const elementScrollbarWidth = el.offsetWidth - el.clientWidth;
        const computedStyle = window.getComputedStyle(el);
        const currentPadding = Number.parseInt(computedStyle.paddingRight, 10) || 0;
        this.scrollPositions.set(el, scrollTop);
        this.originalStyles.set(el, {
          overflow: el.style.overflow,
          overflowY: el.style.overflowY,
          paddingRight: el.style.paddingRight,
        });
        return { el, elementScrollbarWidth, currentPadding };
      });
      // ===== BATCH 2: WRITE PHASE - Apply all styles at once =====
      // Apply body lock
      document.body.style.position = "fixed";
      document.body.style.top = `-${windowScrollY}px`;
      document.body.style.width = "100%";
      document.body.style.overflow = "hidden";
      if (scrollbarWidth > 0) {
        document.body.style.paddingRight = `${scrollbarWidth}px`;
        // Apply padding compensation to fixed elements
        this.fixedElements.forEach((el) => {
          const stored = this.originalStyles.get(el);
          if (stored) {
            el.style.paddingRight = `${stored.computedPadding + scrollbarWidth}px`;
          }
        });
      }
      // Lock all scrollable containers
      scrollableInfo.forEach(({ el, elementScrollbarWidth, currentPadding }) => {
        el.style.overflow = "hidden";
        if (elementScrollbarWidth > 0) {
          el.style.paddingRight = `${currentPadding + elementScrollbarWidth}px`;
        }
      });
    }
    /**
     * Unlock scrolling on all elements (optimized)
     * @param {number} delay - Delay in milliseconds before unlocking (for animations)
     */
    unlock(delay = 0) {
      if (!this.locked) return;
      const performUnlock = () => {
        // Restore body scroll
        const bodyStyles = this.originalStyles.get("body");
        if (bodyStyles) {
          document.body.style.position = bodyStyles.position;
          document.body.style.top = bodyStyles.top;
          document.body.style.width = bodyStyles.width;
          document.body.style.overflow = bodyStyles.overflow;
          document.body.style.paddingRight = bodyStyles.paddingRight;
        }
        // Restore window scroll position
        const windowScrollY = this.scrollPositions.get("window") || 0;
        window.scrollTo(0, windowScrollY);
        // Restore all scrollable containers
        this.scrollableElements.forEach((el) => {
          const originalStyles = this.originalStyles.get(el);
          if (originalStyles) {
            el.style.overflow = originalStyles.overflow;
            el.style.overflowY = originalStyles.overflowY;
            el.style.paddingRight = originalStyles.paddingRight;
          }
          // Restore scroll position
          const scrollPosition = this.scrollPositions.get(el) || 0;
          el.scrollTop = scrollPosition;
        });
        // Restore fixed-position elements padding
        this.fixedElements.forEach((el) => {
          const styles = this.originalStyles.get(el);
          if (styles && styles.paddingRight !== undefined) {
            el.style.paddingRight = styles.paddingRight;
          }
        });
        // Clear storage
        this.scrollableElements = [];
        this.fixedElements = [];
        this.scrollPositions.clear();
        this.originalStyles.clear();
        this.locked = false;
      };
      if (delay > 0) {
        setTimeout(performUnlock, delay);
      } else {
        performUnlock();
      }
    }
    /**
     * Check if scrolling is currently locked
     */
    isLocked() {
      return this.locked;
    }
  }
  // Export as singleton
  window.ScrollLock = new ScrollLock();
 })();
--- a/frontend/src/app.rs
+++ b/frontend/src/app.rs
@@ -7,27 +7,10 @@ use leptos::task::spawn_local;
 use leptos_router::components::{Router, Routes, Route};
 use leptos_router::hooks::use_navigate;
 use crate::components::ui::toast::Toaster;
 use crate::components::hooks::use_theme_mode::ThemeMode;
 #[component]
 pub fn App() -> impl IntoView {
    crate::components::ui::toast::provide_toaster();
    let theme_mode = ThemeMode::init();
    // Sync theme with document
    Effect::new(move |_| {
        let is_dark = theme_mode.get();
        if let Some(doc) = document().document_element() {
            if is_dark {
                let _ = doc.class_list().add_1("dark");
                let _ = doc.set_attribute("data-theme", "dark");
            } else {
                let _ = doc.class_list().remove_1("dark");
                let _ = doc.set_attribute("data-theme", "light");
            }
        }
    });
    view! {
        <Toaster />
        <InnerApp />
--- a/frontend/src/components/auth/login.rs
+++ b/frontend/src/components/auth/login.rs
@@ -3,8 +3,6 @@ use leptos::task::spawn_local;
 use crate::components::ui::card::{Card, CardHeader, CardContent};
 use crate::components::ui::input::{Input, InputType};
 use crate::components::ui::button::Button;
 #[component]
 pub fn Login() -> impl IntoView {
    let username = RwSignal::new(String::new());
@@ -76,16 +74,15 @@ pub fn Login() -> impl IntoView {
                        </Show>
                        <div class="pt-2">
-                            <Button
+                            <button
-                                class="w-full"
+                                class="inline-flex items-center justify-center w-full h-9 px-4 py-2 rounded-md text-sm font-medium bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 transition-all disabled:pointer-events-none disabled:opacity-50"
-                                attr:r#type="submit"
+                                disabled=move || loading.0.get()
                                attr:disabled=move || loading.0.get()
                            >
-                                <Show when=move || loading.0.get() fallback=|| view! { "Giriş Yap" }.into_any()>
+                                <Show when=move || loading.0.get() fallback=|| "Giriş Yap">
                                    <span class="animate-spin mr-2 h-4 w-4 border-2 border-current border-t-transparent rounded-full"></span>
                                    "Giriş Yapılıyor..."
                                </Show>
-                            </Button>
+                            </button>
                        </div>
                    </form>
                </CardContent>
--- a/frontend/src/components/auth/setup.rs
+++ b/frontend/src/components/auth/setup.rs
@@ -3,8 +3,6 @@ use leptos::task::spawn_local;
 use crate::components::ui::card::{Card, CardHeader, CardContent};
 use crate::components::ui::input::{Input, InputType};
 use crate::components::ui::button::Button;
 #[component]
 pub fn Setup() -> impl IntoView {
    let username = RwSignal::new(String::new());
@@ -43,7 +41,8 @@ pub fn Setup() -> impl IntoView {
                }
                Err(e) => {
                    log::error!("Setup failed: {:?}", e);
-                    error.1.set(Some("Kurulum sırasında bir hata oluştu".to_string()));
+                    // Hatanın sadece mesaj kısmını almaya çalışalım, yoksa full struct basılabilir
                    error.1.set(Some(format!("Hata: {}", e)));
                    loading.1.set(false);
                }
            }
@@ -100,16 +99,15 @@ pub fn Setup() -> impl IntoView {
                        </Show>
                        <div class="pt-2">
-                            <Button
+                            <button
-                                class="w-full"
+                                class="inline-flex items-center justify-center w-full h-9 px-4 py-2 rounded-md text-sm font-medium bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 transition-all disabled:pointer-events-none disabled:opacity-50"
-                                attr:r#type="submit"
+                                disabled=move || loading.0.get()
                                attr:disabled=move || loading.0.get()
                            >
-                                <Show when=move || loading.0.get() fallback=|| view! { "Kurulumu Tamamla" }.into_any()>
+                                <Show when=move || loading.0.get() fallback=|| "Kurulumu Tamamla">
                                    <span class="animate-spin mr-2 h-4 w-4 border-2 border-current border-t-transparent rounded-full"></span>
                                    "Kuruluyor..."
                                </Show>
-                            </Button>
+                            </button>
                        </div>
                    </form>
                </CardContent>
--- a/frontend/src/components/context_menu.rs
+++ b/frontend/src/components/context_menu.rs
@@ -1,5 +1,12 @@
 use leptos::prelude::*;
-use crate::components::ui::context_menu::*;
+use web_sys::MouseEvent;
 use wasm_bindgen::prelude::*;
 use wasm_bindgen::JsCast;
 // ── Kendi reaktif Context Menu implementasyonumuz ──
 // leptos-shadcn-context-menu v0.8.1'de ContextMenuContent'te
 // `if open.get()` statik kontrolü reaktif değil. Aşağıda
 // `Show` bileşeni ile düzgün reaktif versiyon yer alıyor.
 #[component]
 pub fn TorrentContextMenu(
@@ -8,71 +15,144 @@ pub fn TorrentContextMenu(
    on_action: Callback<(String, String)>,
 ) -> impl IntoView {
    let hash = StoredValue::new(torrent_hash);
-    
+    let on_action = StoredValue::new(on_action);
    let open = RwSignal::new(false);
    let position = RwSignal::new((0i32, 0i32));
    // Sağ tıklama handler
    let on_contextmenu = move |e: MouseEvent| {
        e.prevent_default();
        e.stop_propagation();
        position.set((e.client_x(), e.client_y()));
        open.set(true);
    };
    // Menü dışına tıklandığında kapanma
    Effect::new(move |_| {
        if open.get() {
            let cb = Closure::wrap(Box::new(move |_: MouseEvent| {
                open.set(false);
            }) as Box<dyn Fn(MouseEvent)>);
            let window = web_sys::window().unwrap();
            let document = window.document().unwrap();
            let _ = document.add_event_listener_with_callback(
                "click",
                cb.as_ref().unchecked_ref(),
            );
            // Cleanup: tek sefer dinleyici — click yakalandığında otomatik kapanıp listener kalıyor
            // ama open=false olduğunda effect tekrar çalışmaz, böylece sorun yok.
            cb.forget();
        }
    });
    let menu_action = move |action: &'static str| {
-        on_action.run((action.to_string(), hash.get_value()));
+        open.set(false);
        on_action.get_value().run((action.to_string(), hash.get_value()));
    };
    view! {
-        <ContextMenu>
+        <div
-            <ContextMenuTrigger>
+            class="w-full"
-                {children()}
+            on:contextmenu=on_contextmenu
-            </ContextMenuTrigger>
+        >
-            
+            {children()}
-            <ContextMenuContent class="w-56">
+        </div>
                <ContextMenuAction 
                    class="px-2 py-1.5 hover:bg-accent hover:text-accent-foreground rounded-sm"
                    on:click=move |_| menu_action("start")
                >
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 h-4 w-4 opacity-70">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z" />
                    </svg>
                    "Start"
                </ContextMenuAction>
-                <ContextMenuAction 
+        <Show when=move || open.get()>
-                    class="px-2 py-1.5 hover:bg-accent hover:text-accent-foreground rounded-sm"
+            {
-                    on:click=move |_| menu_action("stop")
+                    let (x, y) = position.get();
-                >
+                    // Menü yaklaşık boyutları
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 h-4 w-4 opacity-70">
+                    let menu_width = 200;
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25v13.5m-7.5-13.5v13.5" />
+                    let menu_height = 220;
-                    </svg>
+                    let window = web_sys::window().unwrap();
-                    "Stop"
+                    let vw = window.inner_width().unwrap().as_f64().unwrap() as i32;
-                </ContextMenuAction>
+                    let vh = window.inner_height().unwrap().as_f64().unwrap() as i32;
                    // Sağa taşarsa sola aç, alta taşarsa yukarı aç
                    let final_x = if x + menu_width > vw { x - menu_width } else { x };
                    let final_y = if y + menu_height > vh { y - menu_height } else { y };
                    let final_x = final_x.max(0);
                    let final_y = final_y.max(0);
                    view! {
                        <div
                            class="fixed inset-0 z-[99]"
                            on:click=move |e: MouseEvent| {
                                e.stop_propagation();
                                open.set(false);
                            }
                            on:contextmenu=move |e: MouseEvent| {
                                e.prevent_default();
                                e.stop_propagation();
                                open.set(false);
                            }
                        />
                        <div
                            class="fixed z-[100] min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95"
                            style=format!("left: {}px; top: {}px;", final_x, final_y)
                            on:click=move |e: MouseEvent| e.stop_propagation()
                    >
                        // Start
                        <div
                            class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground"
                            on:click=move |_| menu_action("start")
                        >
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 h-4 w-4 opacity-70">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z" />
                            </svg>
                            "Start"
                        </div>
-                <ContextMenuAction 
+                        // Stop
-                    class="px-2 py-1.5 hover:bg-accent hover:text-accent-foreground rounded-sm"
+                        <div
-                    on:click=move |_| menu_action("recheck")
+                            class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground"
-                >
+                            on:click=move |_| menu_action("stop")
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 h-4 w-4 opacity-70">
+                        >
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 h-4 w-4 opacity-70">
-                    </svg>
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25v13.5m-7.5-13.5v13.5" />
-                    "Recheck"
+                            </svg>
-                </ContextMenuAction>
+                            "Stop"
                        </div>
-                <div class="-mx-1 my-1 h-px bg-border" />
+                        // Recheck
                        <div
                            class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground"
                            on:click=move |_| menu_action("recheck")
                        >
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 h-4 w-4 opacity-70">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
                            </svg>
                            "Recheck"
                        </div>
-                <ContextMenuAction 
+                        // Separator
-                    class="px-2 py-1.5 text-destructive hover:bg-destructive/10 hover:text-destructive rounded-sm"
+                        <div class="-mx-1 my-1 h-px bg-border" />
                    on:click=move |_| menu_action("delete")
                >
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 h-4 w-4 opacity-70">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.164h-2.34c-1.18 0-2.09.984-2.09 2.164v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                    </svg>
                    "Remove"
                </ContextMenuAction>
-                <ContextMenuHoldAction 
+                        // Remove
-                    class="text-destructive hover:bg-destructive/10 hover:text-destructive"
+                        <div
-                    on_hold_complete=move |_| menu_action("delete_with_data")
+                            class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors text-destructive hover:bg-destructive hover:text-destructive-foreground"
-                >
+                            on:click=move |_| menu_action("delete")
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 h-4 w-4 opacity-70">
+                        >
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5m6 4.125l2.25 2.25m0 0l2.25 2.25M12 13.875l2.25-2.25M12 13.875l-2.25-2.25M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 h-4 w-4 opacity-70">
-                    </svg>
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.164h-2.34c-1.18 0-2.09.984-2.09 2.164v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
-                    "Remove with Data"
+                            </svg>
-                    <span class="ml-auto text-[10px] opacity-50">"Hold"</span>
+                            "Remove"
-                </ContextMenuHoldAction>
+                        </div>
-            </ContextMenuContent>
+
-        </ContextMenu>
+                        // Remove with Data
                        <div
                            class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors text-destructive hover:bg-destructive hover:text-destructive-foreground"
                            on:click=move |_| menu_action("delete_with_data")
                        >
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 h-4 w-4 opacity-70">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5m6 4.125l2.25 2.25m0 0l2.25 2.25M12 13.875l2.25-2.25M12 13.875l-2.25-2.25M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
                            </svg>
                            "Remove with Data"
                        </div>
                    </div>
                }
            }
        </Show>
    }
 }
--- a/frontend/src/components/hooks/mod.rs
+++ b/frontend/src/components/hooks/mod.rs
@@ -1,3 +0,0 @@
 pub mod use_random;
 pub mod use_theme_mode;
 pub mod use_can_scroll_vertical;
--- a/frontend/src/components/hooks/use_can_scroll_vertical.rs
+++ b/frontend/src/components/hooks/use_can_scroll_vertical.rs
@@ -1,25 +0,0 @@
 use leptos::prelude::*;
 use wasm_bindgen::JsCast;
 /// Hook to determine if an element can scroll vertically.
 ///
 /// Returns (on_scroll_callback, can_scroll_up_signal, can_scroll_down_signal)
 pub fn use_can_scroll_vertical() -> (Callback<web_sys::Event>, ReadSignal<bool>, ReadSignal<bool>) {
    let can_scroll_up = RwSignal::new(false);
    let can_scroll_down = RwSignal::new(false);
    let on_scroll = Callback::new(move |ev: web_sys::Event| {
        if let Some(target) = ev.target() {
            if let Some(el) = target.dyn_ref::<web_sys::HtmlElement>() {
                let scroll_top = el.scroll_top();
                let scroll_height = el.scroll_height();
                let client_height = el.client_height();
                can_scroll_up.set(scroll_top > 0);
                can_scroll_down.set(scroll_top + client_height < scroll_height - 1);
            }
        }
    });
    (on_scroll, can_scroll_up.read_only(), can_scroll_down.read_only())
 }
--- a/frontend/src/components/hooks/use_random.rs
+++ b/frontend/src/components/hooks/use_random.rs
@@ -1,31 +0,0 @@
 use std::collections::hash_map::DefaultHasher;
 use std::hash::{Hash, Hasher};
 use std::sync::atomic::{AtomicUsize, Ordering};
 const PREFIX: &str = "rust_ui"; // Must NOT contain "/" or "-"
 pub fn use_random_id() -> String {
    format!("_{PREFIX}_{}", generate_hash())
 }
 pub fn use_random_id_for(element: &str) -> String {
    format!("{}_{PREFIX}_{}", element, generate_hash())
 }
 pub fn use_random_transition_name() -> String {
    let random_id = use_random_id();
    format!("view-transition-name: {random_id}")
 }
 /* ========================================================== */
 /*                     ✨ FUNCTIONS ✨                        */
 /* ========================================================== */
 static COUNTER: AtomicUsize = AtomicUsize::new(1);
 fn generate_hash() -> u64 {
    let mut hasher = DefaultHasher::new();
    let counter = COUNTER.fetch_add(1, Ordering::SeqCst);
    counter.hash(&mut hasher);
    hasher.finish()
 }
--- a/frontend/src/components/hooks/use_theme_mode.rs
+++ b/frontend/src/components/hooks/use_theme_mode.rs
@@ -1,108 +0,0 @@
 use leptos::prelude::*;
 use web_sys::Storage;
 #[derive(Debug, Clone, Copy)]
 pub struct ThemeMode {
    state: RwSignal<bool>,
 }
 const LOCALSTORAGE_KEY: &str = "darkmode";
 /// Hook to access the dark mode context
 ///
 /// Returns the ThemeMode instance from context for easy access
 pub fn use_theme_mode() -> ThemeMode {
    expect_context::<ThemeMode>()
 }
 /* ========================================================== */
 /*                     ✨ FUNCTIONS ✨                        */
 /* ========================================================== */
 impl ThemeMode {
    #[must_use]
    /// Initializes a new ThemeMode instance.
    pub fn init() -> Self {
        let theme_mode = Self { state: RwSignal::new(false) };
        provide_context(theme_mode);
        // Use Effect to handle browser-only initialization
        Effect::new(move |_| {
            let initial = Self::get_storage_state().unwrap_or(Self::prefers_dark_mode());
            theme_mode.state.set(initial);
        });
        theme_mode
    }
    pub fn toggle(&self) {
        self.state.update(|state| {
            *state = !*state;
            Self::set_storage_state(*state);
        });
    }
    pub fn set_dark(&self) {
        self.set(true);
    }
    pub fn set_light(&self) {
        self.set(false);
    }
    /// - `dark`: Set to `true` for dark mode, and `false` for light mode.
    pub fn set(&self, dark: bool) {
        self.state.set(dark);
        Self::set_storage_state(dark);
    }
    #[must_use]
    pub fn get(&self) -> bool {
        self.state.get()
    }
    #[must_use]
    pub fn is_dark(&self) -> bool {
        self.state.get()
    }
    #[must_use]
    pub fn is_light(&self) -> bool {
        !self.state.get()
    }
    /* ========================================================== */
    /*                     ✨ FUNCTIONS ✨                        */
    /* ========================================================== */
    /// Retrieves the local storage object, if available.
    fn get_storage() -> Option<Storage> {
        window().local_storage().ok().flatten()
    }
    /// Retrieves the dark mode state from local storage, if available.
    fn get_storage_state() -> Option<bool> {
        Self::get_storage()
            .and_then(|storage| storage.get(LOCALSTORAGE_KEY).ok())
            .flatten()
            .and_then(|entry| entry.parse::<bool>().ok())
    }
    /// Checks whether the user's system prefers dark mode based on media queries.
    fn prefers_dark_mode() -> bool {
        window()
            .match_media("(prefers-color-scheme: dark)")
            .ok()
            .flatten()
            .map(|media| media.matches())
            .unwrap_or_default()
    }
    /// Stores the dark mode state in local storage.
    fn set_storage_state(state: bool) {
        if let Some(storage) = Self::get_storage() {
            storage.set(LOCALSTORAGE_KEY, state.to_string().as_str()).ok();
        }
    }
 }
--- a/frontend/src/components/layout/sidebar.rs
+++ b/frontend/src/components/layout/sidebar.rs
@@ -1,6 +1,8 @@
 use leptos::prelude::*;
 use leptos::task::spawn_local;
-use crate::components::ui::button::{Button, ButtonVariant, ButtonSize};
+
 use leptos_use::storage::use_local_storage;
 use ::codee::string::FromToStringCodec;
 #[component]
 pub fn Sidebar() -> impl IntoView {
@@ -65,6 +67,34 @@ pub fn Sidebar() -> impl IntoView {
        username().chars().next().unwrap_or('?').to_uppercase().to_string()
    };
    // --- THEME LOGIC START ---
    let (current_theme, set_current_theme, _) = use_local_storage::<String, FromToStringCodec>("vibetorrent_theme");
    // Initialize with default if empty
    let current_theme_val = current_theme.get();
    if current_theme_val.is_empty() {
        set_current_theme.set("dark".to_string());
    }
    // Automatically sync theme to document attribute
    Effect::new(move |_| {
        let theme = current_theme.get().to_lowercase();
        if let Some(doc) = document().document_element() {
            let _ = doc.set_attribute("data-theme", &theme);
            if theme == "dark" || theme == "dracula" || theme == "dim" || theme == "abyss" || theme == "sunset" || theme == "cyberpunk" || theme == "nord" || theme == "business" || theme == "night" || theme == "black" || theme == "luxury" || theme == "coffee" || theme == "forest" || theme == "halloween" || theme == "synthwave" {
                let _ = doc.class_list().add_1("dark");
            } else {
                let _ = doc.class_list().remove_1("dark");
            }
        }
    });
    let toggle_theme = move |_| {
        let new_theme = if current_theme.get() == "dark" { "light" } else { "dark" };
        set_current_theme.set(new_theme.to_string());
    };
    // --- THEME LOGIC END ---
    view! {
        <div class="w-full h-full flex flex-col bg-card" style="padding-top: env(safe-area-inset-top);">
            <div class="p-4 flex-1 overflow-y-auto">
@@ -134,15 +164,23 @@ pub fn Sidebar() -> impl IntoView {
                    </div>
                    // Theme toggle button
-                    <div class="inline-flex items-center justify-center size-8 rounded-md hover:bg-accent hover:text-accent-foreground text-muted-foreground hover:text-foreground transition-colors">
+                    <button
-                        <crate::components::ui::theme_toggle::ThemeToggle />
+                        class="inline-flex items-center justify-center size-8 rounded-md hover:bg-accent hover:text-accent-foreground text-muted-foreground hover:text-foreground transition-colors"
-                    </div>
+                        on:click=toggle_theme
                    >
                        <Show when=move || current_theme.get() == "dark" fallback=|| view! {
                             <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="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
                            </svg>
                        }>
                            <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="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
                            </svg>
                        </Show>
                    </button>
                    // Logout button
-                    <Button
+                    <button
-                        variant=ButtonVariant::Ghost
+                        class="inline-flex items-center justify-center size-8 rounded-md hover:bg-accent text-destructive transition-colors"
                        size=ButtonSize::Icon
                        class="text-destructive hover:bg-destructive/10"
                        attr:disabled=move || false
                        on:click=move |_| {
                            spawn_local(async move {
                                if shared::server_fns::auth::logout().await.is_ok() {
@@ -155,7 +193,7 @@ pub fn Sidebar() -> impl IntoView {
                        <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="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
                        </svg>
-                    </Button>
+                    </button>
                </div>
            </div>
        </div>
@@ -170,12 +208,13 @@ fn SidebarButton(
    #[prop(into)] label: &'static str,
    count: Signal<usize>,
 ) -> impl IntoView {
    let variant = move || if active.get() { ButtonVariant::Secondary } else { ButtonVariant::Ghost };
    view! {
-        <Button
+        <button
-            variant=Signal::derive(variant)
+            class=move || if active.get() {
-            class="justify-start gap-2 w-full h-8 px-3"
+                "inline-flex items-center justify-start gap-2 w-full h-8 rounded-md px-3 text-sm font-medium bg-secondary text-secondary-foreground transition-colors"
            } else {
                "inline-flex items-center justify-start gap-2 w-full h-8 rounded-md px-3 text-sm font-medium hover:bg-accent hover:text-accent-foreground transition-colors"
            }
            on:click=on_click
        >
            <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">
@@ -183,6 +222,6 @@ fn SidebarButton(
            </svg>
            {label}
            <span class="ml-auto text-xs font-mono opacity-70">{count}</span>
-        </Button>
+        </button>
    }
 }
--- a/frontend/src/components/layout/toolbar.rs
+++ b/frontend/src/components/layout/toolbar.rs
@@ -1,12 +1,20 @@
 use leptos::prelude::*;
 use crate::components::torrent::add_torrent::AddTorrentDialog;
 use crate::components::ui::button::{Button};
 #[component]
 pub fn Toolbar() -> impl IntoView {
    let show_add_modal = signal(false);
    let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
    let is_mobile_menu_open = use_context::<RwSignal<bool>>().expect("mobile menu state not provided");
    let search_value = RwSignal::new(String::new());
    // Sync search_value to store
    Effect::new(move |_| {
        let val = search_value.get();
        store.search_query.set(val);
    });
    view! {
        <div class="flex min-h-14 h-auto items-center border-b border-border bg-background px-4" style="padding-top: env(safe-area-inset-top);">
            // Sol kısım: Menü butonu + Add Torrent
@@ -19,20 +27,33 @@ pub fn Toolbar() -> impl IntoView {
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-5 h-5 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
                </button>
-                <Button
+                <button
                    class="inline-flex items-center justify-center gap-2 h-9 px-4 py-2 rounded-md text-sm font-medium bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 transition-all active:scale-[0.98]"
                    on:click=move |_| show_add_modal.1.set(true)
                    class="gap-2"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 md:w-5 md:h-5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                    </svg>
                    <span class="hidden sm:inline">"Add Torrent"</span>
                    <span class="sm:hidden">"Add"</span>
-                </Button>
+                </button>
            </div>
-            // Sağ kısım boşaltıldı (arama kutusu kaldırıldı)
+            // Sağ kısım: Search kutusu
            <div class="flex flex-1 items-center justify-end gap-2">
                <div class="hidden md:flex items-center gap-2 w-full max-w-xs">
                    <div class="relative flex-1">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
                        </svg>
                        <input
                            type="search"
                            placeholder="Search..."
                            class="file:text-foreground placeholder:text-muted-foreground border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-2 md:text-sm pl-8"
                            bind:value=search_value
                        />
                    </div>
                </div>
            </div>
            <Show when=move || show_add_modal.0.get()>
@@ -40,4 +61,4 @@ pub fn Toolbar() -> impl IntoView {
            </Show>
        </div>
    }
-}
+}
--- a/frontend/src/components/mod.rs
+++ b/frontend/src/components/mod.rs
@@ -1,4 +1,3 @@
 pub mod hooks;
 pub mod context_menu;
 pub mod layout;
 pub mod torrent;
--- a/frontend/src/components/torrent/add_torrent.rs
+++ b/frontend/src/components/torrent/add_torrent.rs
@@ -4,8 +4,6 @@ use crate::components::ui::input::{Input, InputType};
 use crate::store::TorrentStore;
 use crate::api;
 use crate::components::ui::button::{Button, ButtonVariant};
 #[component]
 pub fn AddTorrentDialog(
    on_close: Callback<()>,
@@ -82,16 +80,17 @@ pub fn AddTorrentDialog(
                })}
                <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
-                    <Button
+                    <button
-                        variant=ButtonVariant::Ghost
+                        type="button"
-                        attr:r#type="button"
+                        class="inline-flex items-center justify-center h-9 px-4 py-2 rounded-md text-sm font-medium hover:bg-accent hover:text-accent-foreground transition-colors"
                        on:click=move |_| on_close.run(())
                    >
                        "Cancel"
-                    </Button>
+                    </button>
-                    <Button
+                    <button
-                        attr:r#type="submit"
+                        type="submit"
-                        attr:disabled=move || is_loading.0.get()
+                        class="inline-flex items-center justify-center h-9 px-4 py-2 rounded-md text-sm font-medium bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 transition-all disabled:pointer-events-none disabled:opacity-50"
                        disabled=move || is_loading.0.get()
                    >
                        {move || if is_loading.0.get() {
                            leptos::either::Either::Left(view! { 
@@ -101,14 +100,13 @@ pub fn AddTorrentDialog(
                        } else {
                            leptos::either::Either::Right(view! { "Add" })
                        }}
-                    </Button>
+                    </button>
                </div>
            </form>
            // Close button (X)
-            <Button 
+            <button 
-                variant=ButtonVariant::Ghost
+                class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none"
                class="absolute right-2 top-2 size-8 p-0 opacity-70 hover:opacity-100"
                on:click=move |_| on_close.run(())
            >
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
@@ -116,7 +114,7 @@ pub fn AddTorrentDialog(
                    <path d="m6 6 12 12"></path>
                </svg>
                <span class="sr-only">"Close"</span>
-            </Button>
+            </button>
        </div>
    }
 }
--- a/frontend/src/components/torrent/table.rs
+++ b/frontend/src/components/torrent/table.rs
@@ -1,31 +1,10 @@
 use leptos::prelude::*;
 use leptos::task::spawn_local;
 use std::collections::HashSet;
 use icons::{ArrowUpDown, Inbox, Settings2, Play, Square, Trash2, Ellipsis};
 use crate::store::{get_action_messages, show_toast};
 use crate::api;
 use shared::NotificationLevel;
 use crate::components::context_menu::TorrentContextMenu;
-use crate::components::ui::card::{Card, CardHeader, CardTitle, CardContent as CardBody};
+use crate::components::ui::card::{Card, CardHeader, CardTitle, CardContent};
 use crate::components::ui::data_table::*;
 use crate::components::ui::checkbox::Checkbox;
 use crate::components::ui::button::{Button, ButtonVariant, ButtonSize};
 use crate::components::ui::empty::*;
 use crate::components::ui::input::Input;
 use crate::components::ui::multi_select::*;
 use crate::components::ui::dropdown_menu::*;
 use crate::components::ui::alert_dialog::*;
 const ALL_COLUMNS: [(&str, &str); 8] = [
    ("Name", "Name"),
    ("Size", "Size"),
    ("Progress", "Progress"),
    ("Status", "Status"),
    ("DownSpeed", "DL Speed"),
    ("UpSpeed", "UP Speed"),
    ("ETA", "ETA"),
    ("AddedDate", "Date"),
 ];
 fn format_bytes(bytes: i64) -> String {
    const UNITS: [&str; 6] = ["B", "KB", "MB", "GB", "TB", "PB"];
@@ -70,16 +49,8 @@ pub fn TorrentTable() -> impl IntoView {
    let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
    let sort_col = signal(SortColumn::AddedDate);
    let sort_dir = signal(SortDirection::Descending);
    let selected_hashes = RwSignal::new(HashSet::<String>::new());
    let visible_columns = RwSignal::new(HashSet::from([
        "Name".to_string(), "Size".to_string(), "Progress".to_string(), 
        "Status".to_string(), "DownSpeed".to_string(), "UpSpeed".to_string(),
        "ETA".to_string(), "AddedDate".to_string()
    ]));
-    let sorted_hashes_data = Memo::new(move |_| {
+    let filtered_hashes = Memo::new(move |_| {
        let torrents_map = store.torrents.get();
        let filter = store.filter.get();
        let search = store.search_query.get();
@@ -118,30 +89,7 @@ pub fn TorrentTable() -> impl IntoView {
            };
            if dir == SortDirection::Descending { cmp.reverse() } else { cmp }
        });
-        torrents
+        torrents.into_iter().map(|t| t.hash.clone()).collect::<Vec<String>>()
    });
    let filtered_hashes = Memo::new(move |_| {
        sorted_hashes_data.get().into_iter().map(|t| t.hash.clone()).collect::<Vec<String>>()
    });
    let selected_count = Signal::derive(move || {
        let current_hashes: HashSet<String> = filtered_hashes.get().into_iter().collect();
        selected_hashes.with(|selected| {
            selected.iter().filter(|h| current_hashes.contains(*h)).count()
        })
    });
    let has_selection = Signal::derive(move || selected_count.get() > 0);
    let handle_select_all = Callback::new(move |checked: bool| {
        selected_hashes.update(|selected| {
            let hashes = filtered_hashes.get_untracked();
            for h in hashes {
                if checked { selected.insert(h); } 
                else { selected.remove(&h); }
            }
        });
    });
    let handle_sort = move |col: SortColumn| {
@@ -155,35 +103,13 @@ pub fn TorrentTable() -> impl IntoView {
        }
    };
-    let sort_icon = move |col: SortColumn| {
+    let sort_arrow = move |col: SortColumn| {
-        let is_active = sort_col.0.get() == col;
+        if sort_col.0.get() == col {
-        let class = if is_active { "size-3 text-primary" } else { "size-3 opacity-30 group-hover:opacity-100 transition-opacity" };
+            match sort_dir.0.get() {
-        view! { <ArrowUpDown class=class.to_string() /> }.into_any()
+                SortDirection::Ascending => view! { <span class="ml-1 text-xs">"▲"</span> }.into_any(),
-    };
+                SortDirection::Descending => view! { <span class="ml-1 text-xs">"▼"</span> }.into_any(),
    let bulk_action = move |action: &'static str| {
        let hashes: Vec<String> = selected_hashes.get().into_iter().collect();
        if hashes.is_empty() { return; }
        spawn_local(async move {
            let mut success = true;
            for hash in hashes {
                let res = match action {
                    "start" => api::torrent::start(&hash).await,
                    "stop" => api::torrent::stop(&hash).await,
                    "delete" => api::torrent::delete(&hash).await,
                    "delete_with_data" => api::torrent::delete_with_data(&hash).await,
                    _ => Ok(()),
                };
                if res.is_err() { success = false; }
            }
-            if success {
+        } else { view! { <span class="ml-1 text-xs opacity-0 group-hover:opacity-50">"▲"</span> }.into_any() }
                show_toast(NotificationLevel::Success, format!("Toplu işlem başarıyla tamamlandı: {}", action));
                selected_hashes.update(|s| s.clear());
            } else {
                show_toast(NotificationLevel::Error, "Bazı işlemler başarısız oldu.");
            }
        });
    };
    let on_action = Callback::new(move |(action, hash): (String, String)| {
@@ -206,229 +132,78 @@ pub fn TorrentTable() -> impl IntoView {
    });
    view! {
-        <div class="h-full bg-background relative flex flex-col overflow-hidden px-4 py-4 gap-4">
+        <div class="h-full bg-background relative flex flex-col overflow-hidden">
-            // --- TOPBAR ---
+            // --- DESKTOP VIEW ---
-            <div class="flex items-center justify-between gap-4">
+            <div class="hidden md:flex flex-col h-full overflow-hidden">
-                <div class="flex items-center gap-2 flex-1 max-w-md">
+                // Header
-                    <Input
+                <div class="flex items-center text-xs uppercase text-muted-foreground border-b border-border bg-muted/50 h-9 shrink-0 px-2 font-medium">
-                        class="h-9"
+                    <div class="flex-1 px-2 cursor-pointer hover:text-foreground group select-none flex items-center" on:click=move |_| handle_sort(SortColumn::Name)>
-                        placeholder="Torrent ara..."
+                        "Name" {move || sort_arrow(SortColumn::Name)}
                        bind_value=store.search_query
                    />
                </div>
                <div class="flex items-center gap-2">
                    <Show when=move || has_selection.get()>
                        <DropdownMenu>
                            <DropdownMenuTrigger class="gap-2 bg-secondary text-secondary-foreground border-none hover:bg-secondary/80">
                                <Ellipsis class="size-4" />
                                {move || format!("Toplu İşlem ({})", selected_count.get())}
                            </DropdownMenuTrigger>
                            <DropdownMenuContent class="w-48">
                                <DropdownMenuLabel>"Seçili Torrentler"</DropdownMenuLabel>
                                <DropdownMenuGroup class="mt-2">
                                    <DropdownMenuItem on:click=move |_| bulk_action("start")>
                                        <Play class="mr-2 size-4" /> "Başlat"
                                    </DropdownMenuItem>
                                    <DropdownMenuItem on:click=move |_| bulk_action("stop")>
                                        <Square class="mr-2 size-4" /> "Durdur"
                                    </DropdownMenuItem>
                                    <div class="my-1 h-px bg-border" />
                                    <AlertDialog>
                                        <AlertDialogTrigger class="w-full text-left">
                                            <div class="inline-flex gap-2 items-center w-full rounded-sm px-2 py-1.5 text-sm transition-colors text-destructive hover:bg-destructive/10 focus:bg-destructive/10">
                                                <Trash2 class="size-4" /> "Toplu Sil"
                                            </div>
                                        </AlertDialogTrigger>
                                        <AlertDialogContent>
                                            <AlertDialogHeader>
                                                <AlertDialogTitle>"Toplu Silme Onayı"</AlertDialogTitle>
                                                <AlertDialogDescription>
                                                    {move || format!("Seçili {} torrent silinecek. Bu işlem geri alınamaz.", selected_count.get())}
                                                </AlertDialogDescription>
                                            </AlertDialogHeader>
                                            <AlertDialogFooter>
                                                <AlertDialogClose>"İptal"</AlertDialogClose>
                                                <Button variant=ButtonVariant::Destructive on:click=move |_| bulk_action("delete")>
                                                    "Sil"
                                                </Button>
                                            </AlertDialogFooter>
                                        </AlertDialogContent>
                                    </AlertDialog>
                                </DropdownMenuGroup>
                            </DropdownMenuContent>
                        </DropdownMenu>
                    </Show>
                    <MultiSelect values=visible_columns>
                        <MultiSelectTrigger class="w-[140px] h-9">
                            <div class="flex items-center gap-2 text-xs">
                                <Settings2 class="size-4" />
                                "Sütunlar"
                            </div>
                        </MultiSelectTrigger>
                        <MultiSelectContent>
                            <MultiSelectGroup>
                                {ALL_COLUMNS.into_iter().map(|(id, label)| {
                                    let id_val = id.to_string();
                                    view! {
                                        <MultiSelectItem>
                                            <MultiSelectOption value=id_val.clone() attr:disabled=move || id_val == "Name">
                                                {label}
                                            </MultiSelectOption>
                                        </MultiSelectItem>
                                    }.into_any()
                                }).collect_view()}
                            </MultiSelectGroup>
                        </MultiSelectContent>
                    </MultiSelect>
                </div>
            </div>
            // --- MAIN TABLE ---
            <div class="flex-1 min-h-0 overflow-hidden">
                <DataTableWrapper class="h-full bg-card/50">
                    <div class="h-full overflow-auto">
                        <DataTable>
                            <DataTableHeader class="sticky top-0 bg-muted/80 backdrop-blur-sm z-10">
                                <DataTableRow class="hover:bg-transparent">
                                    <DataTableHead class="w-12 px-4">
                                        <Checkbox
                                            checked=Signal::derive(move || {
                                                let hashes = filtered_hashes.get();
                                                !hashes.is_empty() && selected_count.get() == hashes.len()
                                            })
                                            on_checked_change=handle_select_all
                                        />
                                    </DataTableHead>
                                    {move || visible_columns.get().contains("Name").then(|| view! {
                                        <DataTableHead class="cursor-pointer group select-none" on:click=move |_| handle_sort(SortColumn::Name)>
                                            <div class="flex items-center gap-2">"Name" {move || sort_icon(SortColumn::Name)}</div>
                                        </DataTableHead>
                                    }).into_any()}
                                    {move || visible_columns.get().contains("Size").then(|| view! {
                                        <DataTableHead class="w-24 cursor-pointer group select-none" on:click=move |_| handle_sort(SortColumn::Size)>
                                            <div class="flex items-center gap-2">"Size" {move || sort_icon(SortColumn::Size)}</div>
                                        </DataTableHead>
                                    }).into_any()}
                                    {move || visible_columns.get().contains("Progress").then(|| view! {
                                        <DataTableHead class="w-48 cursor-pointer group select-none" on:click=move |_| handle_sort(SortColumn::Progress)>
                                            <div class="flex items-center gap-2">"Progress" {move || sort_icon(SortColumn::Progress)}</div>
                                        </DataTableHead>
                                    }).into_any()}
                                    {move || visible_columns.get().contains("Status").then(|| view! {
                                        <DataTableHead class="w-24 cursor-pointer group select-none" on:click=move |_| handle_sort(SortColumn::Status)>
                                            <div class="flex items-center gap-2">"Status" {move || sort_icon(SortColumn::Status)}</div>
                                        </DataTableHead>
                                    }).into_any()}
                                    {move || visible_columns.get().contains("DownSpeed").then(|| view! {
                                        <DataTableHead class="w-24 cursor-pointer group select-none text-right" on:click=move |_| handle_sort(SortColumn::DownSpeed)>
                                            <div class="flex items-center justify-end gap-2">"DL Speed" {move || sort_icon(SortColumn::DownSpeed)}</div>
                                        </DataTableHead>
                                    }).into_any()}
                                    {move || visible_columns.get().contains("UpSpeed").then(|| view! {
                                        <DataTableHead class="w-24 cursor-pointer group select-none text-right" on:click=move |_| handle_sort(SortColumn::UpSpeed)>
                                            <div class="flex items-center justify-end gap-2">"UP Speed" {move || sort_icon(SortColumn::UpSpeed)}</div>
                                        </DataTableHead>
                                    }).into_any()}
                                    {move || visible_columns.get().contains("ETA").then(|| view! {
                                        <DataTableHead class="w-24 cursor-pointer group select-none text-right" on:click=move |_| handle_sort(SortColumn::ETA)>
                                            <div class="flex items-center justify-end gap-2">"ETA" {move || sort_icon(SortColumn::ETA)}</div>
                                        </DataTableHead>
                                    }).into_any()}
                                    {move || visible_columns.get().contains("AddedDate").then(|| view! {
                                        <DataTableHead class="w-32 cursor-pointer group select-none text-right" on:click=move |_| handle_sort(SortColumn::AddedDate)>
                                            <div class="flex items-center justify-end gap-2">"Date" {move || sort_icon(SortColumn::AddedDate)}</div>
                                        </DataTableHead>
                                    }).into_any()}
                                </DataTableRow>
                            </DataTableHeader>
                            <DataTableBody>
                                <Show
                                    when=move || !filtered_hashes.get().is_empty()
                                    fallback=move || view! {
                                        <DataTableRow class="hover:bg-transparent">
                                            <DataTableCell attr:colspan="10" class="h-[400px]">
                                                <Empty class="h-full">
                                                    <EmptyHeader>
                                                        <EmptyMedia variant=EmptyMediaVariant::Icon>
                                                            <Inbox class="size-10 text-muted-foreground" />
                                                        </EmptyMedia>
                                                        <EmptyTitle>"Torrent Bulunamadı"</EmptyTitle>
                                                        <EmptyDescription>
                                                            {move || {
                                                                let query = store.search_query.get();
                                                                if query.is_empty() { "Henüz torrent bulunmuyor.".to_string() }
                                                                else { "Arama kriterlerinize uygun sonuç bulunamadı.".to_string() }
                                                            }}
                                                        </EmptyDescription>
                                                    </EmptyHeader>
                                                </Empty>
                                            </DataTableCell>
                                        </DataTableRow>
                                    }.into_any()
                                >
                                    <For each=move || filtered_hashes.get() key=|hash| hash.clone() children={
                                        let on_action = on_action.clone();
                                        move |hash| {
                                            let h = hash.clone();
                                            let is_selected = Signal::derive(move || {
                                                selected_hashes.with(|selected| selected.contains(&h))
                                            });
                                            let h_for_change = hash.clone();
                                            view! { 
                                                <TorrentRow 
                                                    hash=hash.clone() 
                                                    on_action=on_action.clone() 
                                                    is_selected=is_selected
                                                    visible_columns=visible_columns
                                                    on_select=Callback::new(move |checked| {
                                                        selected_hashes.update(|selected| {
                                                            if checked { selected.insert(h_for_change.clone()); }
                                                            else { selected.remove(&h_for_change); }
                                                        });
                                                    })
                                                /> 
                                            }
                                        }
                                    } />
                                </Show>
                            </DataTableBody>
                        </DataTable>
                    </div>
-                </DataTableWrapper>
+                    <div class="w-24 px-2 cursor-pointer hover:text-foreground group select-none flex items-center" on:click=move |_| handle_sort(SortColumn::Size)>
                        "Size" {move || sort_arrow(SortColumn::Size)}
                    </div>
                    <div class="w-48 px-2 cursor-pointer hover:text-foreground group select-none flex items-center" on:click=move |_| handle_sort(SortColumn::Progress)>
                        "Progress" {move || sort_arrow(SortColumn::Progress)}
                    </div>
                    <div class="w-24 px-2 cursor-pointer hover:text-foreground group select-none flex items-center" on:click=move |_| handle_sort(SortColumn::Status)>
                        "Status" {move || sort_arrow(SortColumn::Status)}
                    </div>
                    <div class="w-24 px-2 cursor-pointer hover:text-foreground group select-none flex items-center" on:click=move |_| handle_sort(SortColumn::DownSpeed)>
                        "DL Speed" {move || sort_arrow(SortColumn::DownSpeed)}
                    </div>
                    <div class="w-24 px-2 cursor-pointer hover:text-foreground group select-none flex items-center" on:click=move |_| handle_sort(SortColumn::UpSpeed)>
                        "Up Speed" {move || sort_arrow(SortColumn::UpSpeed)}
                    </div>
                    <div class="w-24 px-2 cursor-pointer hover:text-foreground group select-none flex items-center" on:click=move |_| handle_sort(SortColumn::ETA)>
                        "ETA" {move || sort_arrow(SortColumn::ETA)}
                    </div>
                    <div class="w-32 px-2 cursor-pointer hover:text-foreground group select-none flex items-center" on:click=move |_| handle_sort(SortColumn::AddedDate)>
                        "Date" {move || sort_arrow(SortColumn::AddedDate)}
                    </div>
                </div>
                // Regular List
                <div class="flex-1 overflow-y-auto min-h-0">
                    <For each=move || filtered_hashes.get() key=|hash| hash.clone() children={
                        let on_action = on_action.clone();
                        move |hash| {
                            let h = hash.clone();
                            view! { 
                                <TorrentContextMenu torrent_hash=h on_action=on_action.clone()>
                                    <TorrentRow hash=hash.clone() /> 
                                </TorrentContextMenu>
                            }
                        }
                    } />
                </div>
            </div>
-            <div class="hidden md:flex items-center justify-between px-2 py-1 text-[11px] text-muted-foreground bg-muted/20 border rounded-md">
+            // --- MOBILE VIEW ---
-                <div class="flex gap-4">
+            <div class="md:hidden flex flex-col h-full bg-muted/10 relative overflow-hidden">
-                    <span>{move || format!("Toplam: {} torrent", filtered_hashes.get().len())}</span>
+                <div class="flex-1 overflow-y-auto p-3 min-h-0">
-                    <Show when=move || has_selection.get()>
+                    <For each=move || filtered_hashes.get() key=|hash| hash.clone() children={
-                        <span class="text-primary font-medium">{move || format!("{} torrent seçili", selected_count.get())}</span>
+                        let on_action = on_action.clone();
-                    </Show>
+                        move |hash| {
                            let h = hash.clone();
                            view! { 
                                 <div class="pb-3">
                                    <TorrentContextMenu torrent_hash=h on_action=on_action.clone()>
                                        <TorrentCard hash=hash.clone() /> 
                                    </TorrentContextMenu>
                                </div>
                            }
                        }
                    } />
                </div>
                <div>"VibeTorrent v3"</div>
            </div>
        </div>
-    }.into_any()
+    }
 }
 #[component]
 fn TorrentRow(
    hash: String,
    on_action: Callback<(String, String)>,
    is_selected: Signal<bool>,
    visible_columns: RwSignal<HashSet<String>>,
    on_select: Callback<bool>,
 ) -> impl IntoView {
    let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
    let h = hash.clone();
@@ -439,114 +214,50 @@ fn TorrentRow(
    view! {
        <Show when=move || torrent.get().is_some() fallback=|| ()>
            {
                let on_action = on_action.clone();
                move || {
                    let t = torrent.get().unwrap();
                    let t_name = t.name.clone();
                    let status_color = match t.status { shared::TorrentStatus::Seeding => "text-green-500", shared::TorrentStatus::Downloading => "text-blue-500", shared::TorrentStatus::Paused => "text-yellow-500", shared::TorrentStatus::Error => "text-red-500", _ => "text-muted-foreground" };
                    let is_active_selection = Memo::new(move |_| {
                        let selected = store.selected_torrent.get();
                        selected.as_deref() == Some(stored_hash.get_value().as_str())
                    });
                    let t_name_stored = StoredValue::new(t_name.clone());
                    let h_for_menu = stored_hash.get_value();
                    view! {
-                        <TorrentContextMenu torrent_hash=h_for_menu on_action=on_action.clone()>
+                        <div 
-                            <DataTableRow 
+                            class=move || {
-                                class="cursor-pointer group h-10"
+                                let selected = store.selected_torrent.get();
-                                attr:data-state=move || if is_selected.get() || is_active_selection.get() { "selected" } else { "" }
+                                let is_selected = selected.as_deref() == Some(stored_hash.get_value().as_str());
-                                on:click=move |_| store.selected_torrent.set(Some(stored_hash.get_value()))
+                                if is_selected {
-                            >
+                                    "flex items-center text-sm bg-primary/10 border-b border-border h-[48px] px-2 select-none cursor-pointer transition-colors w-full"
-                                <DataTableCell class="w-12 px-4">
+                                } else {
-                                    <Checkbox 
+                                    "flex items-center text-sm hover:bg-muted/50 border-b border-border h-[48px] px-2 select-none cursor-pointer transition-colors w-full"
-                                        checked=is_selected 
+                                }
-                                        on_checked_change=on_select 
+                            }
-                                    />
+                            on:click=move |_| store.selected_torrent.set(Some(stored_hash.get_value()))
-                                </DataTableCell>
+                        >
-                                
+                            <div class="flex-1 min-w-0 px-2 font-medium truncate" title=t_name.clone()>{t_name.clone()}</div>
-                                {move || visible_columns.get().contains("Name").then({
+                            <div class="w-24 px-2 font-mono text-xs text-muted-foreground">{format_bytes(t.size)}</div>
-                                    move || view! {
+                            <div class="w-48 px-2">
-                                        <DataTableCell class="font-medium truncate max-w-[200px] lg:max-w-md" attr:title=t_name_stored.get_value()>
+                                <div class="flex items-center gap-2">
-                                            {t_name_stored.get_value()}
+                                    <div class="h-2 w-full bg-secondary rounded-full overflow-hidden">
-                                        </DataTableCell>
+                                        <div class="h-full bg-primary transition-all duration-500" style=format!("width: {}%", t.percent_complete)></div>
-                                    }
+                                    </div>
-                                }).into_any()}
+                                    <span class="text-[10px] text-muted-foreground w-10 text-right">{format!("{:.1}%", t.percent_complete)}</span>
-
+                                </div>
-                                {move || visible_columns.get().contains("Size").then({
+                            </div>
-                                    let size_bytes = t.size;
+                            <div class={format!("w-24 px-2 text-xs font-medium {}", status_color)}>{format!("{:?}", t.status)}</div>
-                                    move || {
+                            <div class="w-24 px-2 text-right font-mono text-xs text-green-600 dark:text-green-500">{format_speed(t.down_rate)}</div>
-                                        let size_str = format_bytes(size_bytes);
+                            <div class="w-24 px-2 text-right font-mono text-xs text-blue-600 dark:text-blue-500">{format_speed(t.up_rate)}</div>
-                                        view! { <DataTableCell class="font-mono text-xs text-muted-foreground whitespace-nowrap">{size_str}</DataTableCell> }
+                            <div class="w-24 px-2 text-right font-mono text-xs text-muted-foreground">{format_duration(t.eta)}</div>
-                                    }
+                            <div class="w-32 px-2 text-right font-mono text-xs text-muted-foreground">{format_date(t.added_date)}</div>
-                                }).into_any()}
+                        </div>
-
+                    }
                                {move || visible_columns.get().contains("Progress").then({
                                    let percent = t.percent_complete;
                                    move || view! {
                                        <DataTableCell>
                                            <div class="flex items-center gap-2">
                                                <div class="h-1.5 w-full bg-secondary rounded-full overflow-hidden min-w-[80px]">
                                                    <div class="h-full bg-primary transition-all duration-500" style=format!("width: {}%", percent)></div>
                                                </div>
                                                <span class="text-[10px] text-muted-foreground w-10 text-right">{format!("{:.1}%", percent)}</span>
                                            </div>
                                        </DataTableCell>
                                    }
                                }).into_any()}
                                {move || visible_columns.get().contains("Status").then({
                                    let status_text = format!("{:?}", t.status);
                                    let color = status_color;
                                    move || view! { <DataTableCell class={format!("text-xs font-semibold whitespace-nowrap {}", color)}>{status_text.clone()}</DataTableCell> }
                                }).into_any()}
                                {move || visible_columns.get().contains("DownSpeed").then({
                                    let rate = t.down_rate;
                                    move || {
                                        let speed_str = format_speed(rate);
                                        view! { <DataTableCell class="text-right font-mono text-xs text-green-600 dark:text-green-500 whitespace-nowrap">{speed_str}</DataTableCell> }
                                    }
                                }).into_any()}
                                {move || visible_columns.get().contains("UpSpeed").then({
                                    let rate = t.up_rate;
                                    move || {
                                        let speed_str = format_speed(rate);
                                        view! { <DataTableCell class="text-right font-mono text-xs text-blue-600 dark:text-blue-500 whitespace-nowrap">{speed_str}</DataTableCell> }
                                    }
                                }).into_any()}
                                {move || visible_columns.get().contains("ETA").then({
                                    let eta = t.eta;
                                    move || {
                                        let eta_str = format_duration(eta);
                                        view! { <DataTableCell class="text-right font-mono text-xs text-muted-foreground whitespace-nowrap">{eta_str}</DataTableCell> }
                                    }
                                }).into_any()}
                                {move || visible_columns.get().contains("AddedDate").then({
                                    let date = t.added_date;
                                    move || {
                                        let date_str = format_date(date);
                                        view! { <DataTableCell class="text-right font-mono text-xs text-muted-foreground whitespace-nowrap">{date_str}</DataTableCell> }
                                    }
                                }).into_any()}
                            </DataTableRow>
                        </TorrentContextMenu>
                    }.into_any()
                }
            }
        </Show>
-    }.into_any()
+    }
 }
 #[component]
 fn TorrentCard(
    hash: String,
    on_action: Callback<(String, String)>,
 ) -> impl IntoView {
    let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
    let h = hash.clone();
@@ -557,57 +268,53 @@ fn TorrentCard(
    view! {
        <Show when=move || torrent.get().is_some() fallback=|| ()>
            {
                let on_action = on_action.clone();
                move || {
                    let t = torrent.get().unwrap();
                    let t_name = t.name.clone();
                    let status_badge_class = match t.status { shared::TorrentStatus::Seeding => "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 border-green-200 dark:border-green-800", shared::TorrentStatus::Downloading => "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 border-blue-200 dark:border-blue-800", shared::TorrentStatus::Paused => "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400 border-yellow-200 dark:border-yellow-800", shared::TorrentStatus::Error => "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400 border-red-200 dark:border-red-800", _ => "bg-muted text-muted-foreground" };
                    let h_for_menu = stored_hash.get_value();
                    view! {
-                        <TorrentContextMenu torrent_hash=h_for_menu on_action=on_action.clone()>
+                        <div
-                            <div
+                            class=move || {
-                                class=move || {
+                                let selected = store.selected_torrent.get();
-                                    let selected = store.selected_torrent.get();
+                                let is_selected = selected.as_deref() == Some(stored_hash.get_value().as_str());
-                                    let is_selected = selected.as_deref() == Some(stored_hash.get_value().as_str());
+                                if is_selected {
-                                    if is_selected {
+                                    "ring-2 ring-primary rounded-lg transition-all"
-                                        "ring-2 ring-primary rounded-lg transition-all"
+                                } else {
-                                    } else {
+                                    "transition-all"
                                        "transition-all"
                                    }
                                }
-                                on:click=move |_| store.selected_torrent.set(Some(stored_hash.get_value()))
+                            }
-                            >
+                            on:click=move |_| store.selected_torrent.set(Some(stored_hash.get_value()))
-                            <Card class="h-full select-none cursor-pointer hover:border-primary transition-colors">
+                        >
-                                <CardHeader class="p-3 pb-0">
+                        <Card class="h-full select-none cursor-pointer hover:border-primary transition-colors">
-                                    <div class="flex justify-between items-start gap-2">
+                            <CardHeader class="p-3 pb-0">
-                                        <CardTitle class="text-sm font-medium leading-tight line-clamp-2">{t_name.clone()}</CardTitle>
+                                <div class="flex justify-between items-start gap-2">
-                                        <div class={format!("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 {}", status_badge_class)}>{format!("{:?}", t.status)}</div>
+                                    <CardTitle class="text-sm font-medium leading-tight line-clamp-2">{t_name.clone()}</CardTitle>
                                    <div class={format!("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 {}", status_badge_class)}>{format!("{:?}", t.status)}</div>
                                </div>
                            </CardHeader>
                            <CardContent class="p-3 pt-2 gap-3 flex flex-col">
                                <div class="flex flex-col gap-1">
                                    <div class="flex justify-between text-[10px] text-muted-foreground">
                                        <span>{format_bytes(t.size)}</span>
                                        <span>{format!("{:.1}%", t.percent_complete)}</span>
                                    </div>
-                                </CardHeader>
+                                    <div class="h-1.5 w-full bg-secondary rounded-full overflow-hidden">
-                                <CardBody class="p-3 pt-2 gap-3 flex flex-col">
+                                        <div class="h-full bg-primary transition-all duration-500" style=format!("width: {}%", t.percent_complete)></div>
                                    <div class="flex flex-col gap-1">
                                        <div class="flex justify-between text-[10px] text-muted-foreground">
                                            <span>{format_bytes(t.size)}</span>
                                            <span>{format!("{:.1}%", t.percent_complete)}</span>
                                        </div>
                                        <div class="h-1.5 w-full bg-secondary rounded-full overflow-hidden">
                                            <div class="h-full bg-primary transition-all duration-500" style=format!("width: {}%", t.percent_complete)></div>
                                        </div>
                                    </div>
-                                    <div class="grid grid-cols-4 gap-2 text-[10px] font-mono text-muted-foreground pt-1 border-t border-border/50">
+                                </div>
-                                        <div class="flex flex-col text-blue-600 dark:text-blue-500"><span>"DL"</span><span>{format_speed(t.down_rate)}</span></div>
+                                <div class="grid grid-cols-4 gap-2 text-[10px] font-mono text-muted-foreground pt-1 border-t border-border/50">
-                                        <div class="flex flex-col text-green-600 dark:text-green-500"><span>"UP"</span><span>{format_speed(t.up_rate)}</span></div>
+                                    <div class="flex flex-col text-blue-600 dark:text-blue-500"><span>"DL"</span><span>{format_speed(t.down_rate)}</span></div>
-                                        <div class="flex flex-col"><span>"ETA"</span><span>{format_duration(t.eta)}</span></div>
+                                    <div class="flex flex-col text-green-600 dark:text-green-500"><span>"UP"</span><span>{format_speed(t.up_rate)}</span></div>
-                                        <div class="flex flex-col text-right"><span>"DATE"</span><span>{format_date(t.added_date)}</span></div>
+                                    <div class="flex flex-col"><span>"ETA"</span><span>{format_duration(t.eta)}</span></div>
-                                    </div>
+                                    <div class="flex flex-col text-right"><span>"DATE"</span><span>{format_date(t.added_date)}</span></div>
-                                </CardBody>
+                                </div>
-                            </Card>
+                            </CardContent>
-                            </div>
+                        </Card>
-                        </TorrentContextMenu>
+                        </div>
-                    }.into_any()
+                    }
                }
            }
        </Show>
-    }.into_any()
+    }
-}
+}
--- a/frontend/src/components/ui/alert_dialog.rs
+++ b/frontend/src/components/ui/alert_dialog.rs
@@ -1,94 +0,0 @@
 use leptos::prelude::*;
 use crate::components::ui::button::{ButtonSize, ButtonVariant};
 use crate::components::ui::dialog::{
    Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,
    DialogTrigger,
 };
 #[component]
 pub fn AlertDialog(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
    view! { <Dialog class=class>{children()}</Dialog> }
 }
 #[component]
 pub fn AlertDialogTrigger(
    children: Children,
    #[prop(optional, into)] class: String,
    #[prop(default = ButtonVariant::Outline)] variant: ButtonVariant,
    #[prop(default = ButtonSize::Default)] size: ButtonSize,
 ) -> impl IntoView {
    view! {
        <DialogTrigger class=class variant=variant size=size>
            {children()}
        </DialogTrigger>
    }
 }
 #[component]
 pub fn AlertDialogContent(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
    view! {
        <DialogContent class=class close_on_backdrop_click=false data_name_prefix="AlertDialog">
            {children()}
        </DialogContent>
    }
 }
 #[component]
 pub fn AlertDialogBody(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
    view! {
        <DialogBody class=class attr:data-name="AlertDialogBody">
            {children()}
        </DialogBody>
    }
 }
 #[component]
 pub fn AlertDialogHeader(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
    view! {
        <DialogHeader class=class attr:data-name="AlertDialogHeader">
            {children()}
        </DialogHeader>
    }
 }
 #[component]
 pub fn AlertDialogTitle(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
    view! {
        <DialogTitle class=class attr:data-name="AlertDialogTitle">
            {children()}
        </DialogTitle>
    }
 }
 #[component]
 pub fn AlertDialogDescription(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
    view! {
        <DialogDescription class=class attr:data-name="AlertDialogDescription">
            {children()}
        </DialogDescription>
    }
 }
 #[component]
 pub fn AlertDialogFooter(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
    view! {
        <DialogFooter class=class attr:data-name="AlertDialogFooter">
            {children()}
        </DialogFooter>
    }
 }
 #[component]
 pub fn AlertDialogClose(
    children: Children,
    #[prop(optional, into)] class: String,
    #[prop(default = ButtonVariant::Outline)] variant: ButtonVariant,
    #[prop(default = ButtonSize::Default)] size: ButtonSize,
 ) -> impl IntoView {
    view! {
        <DialogClose class=class variant=variant size=size>
            {children()}
        </DialogClose>
    }
 }
--- a/frontend/src/components/ui/button.rs
+++ b/frontend/src/components/ui/button.rs
@@ -1,11 +1,9 @@
 use leptos::prelude::*;
 use leptos_ui::variants;
 // TODO 💪 Loading state (demo_use_timeout_fn.rs and demo_button.rs)
 variants! {
    Button {
-        base: "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive  w-fit  hover:cursor-pointer active:scale-[0.98] active:opacity-100 touch-manipulation [-webkit-tap-highlight-color:transparent] select-none [-webkit-touch-callout:none]", // Using hover:cursor-pointer as workaround for href_support.
+        base: "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive w-fit hover:cursor-pointer active:scale-[0.98] active:opacity-100 touch-manipulation [-webkit-tap-highlight-color:transparent] select-none [-webkit-touch-callout:none]",
        variants: {
            variant: {
                Default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
@@ -13,21 +11,13 @@ variants! {
                Outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/5",
                Secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
                Ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
                Accent: "bg-accent text-accent-foreground hover:bg-accent/80",
                Link: "text-primary underline-offset-4 hover:underline",
                //
                Warning: "bg-warning text-warning-foreground hover:bg-warning/90",
                Success: "bg-success text-success-foreground hover:bg-success/90",
                Bordered: "bg-transparent border border-zinc-200 text-muted-foreground",
            },
            size: {
                Default: "h-9 px-4 py-2 has-[>svg]:px-3",
                Sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
                Lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
                Icon: "size-9",
                //
                Mobile: "px-6 py-3 rounded-[24px]",
                Badge: "px-2.5 py-0.5 text-xs"
            }
        },
        component: {
@@ -36,4 +26,4 @@ variants! {
            support_aria_current: true
        }
    }
-}
+}
--- a/frontend/src/components/ui/checkbox.rs
+++ b/frontend/src/components/ui/checkbox.rs
@@ -1,43 +0,0 @@
 use icons::Check;
 use leptos::prelude::*;
 use tw_merge::tw_merge;
 #[component]
 pub fn Checkbox(
    #[prop(into, optional)] class: String,
    #[prop(into, optional)] checked: Signal<bool>,
    #[prop(into, optional)] disabled: Signal<bool>,
    #[prop(into, optional)] on_checked_change: Option<Callback<bool>>,
    #[prop(into, optional, default = "Checkbox".to_string())] aria_label: String,
 ) -> impl IntoView {
    let checked_state = move || if checked.get() { "checked" } else { "unchecked" };
    let checkbox_class = tw_merge!(
        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
        class
    );
    view! {
        <button
            data-name="Checkbox"
            class=checkbox_class
            data-state=checked_state
            type="button"
            role="checkbox"
            aria-checked=move || checked.get().to_string()
            aria-label=aria_label
            disabled=move || disabled.get()
            on:click=move |_| {
                if !disabled.get() {
                    if let Some(callback) = on_checked_change {
                        callback.run(!checked.get());
                    }
                }
            }
        >
            <span data-name="CheckboxIndicator" class="flex justify-center items-center text-current transition-none">
                {move || { checked.get().then(|| view! { <Check class="size-3.5".to_string() /> }) }}
            </span>
        </button>
    }
 }
--- a/frontend/src/components/ui/context_menu.rs
+++ b/frontend/src/components/ui/context_menu.rs
@@ -1,434 +0,0 @@
 use icons::ChevronRight;
 use leptos::context::Provider;
 use leptos::prelude::*;
 use leptos_ui::clx;
 use tw_merge::*;
 use wasm_bindgen::JsCast;
 use crate::components::hooks::use_random::use_random_id_for;
 /// Programmatically close any open context menu.
 pub fn close_context_menu() {
    let Some(document) = window().document() else {
        return;
    };
    let Some(menu) = document.query_selector("[data-target='target__context'][data-state='open']").ok().flatten()
    else {
        return;
    };
    let _ = menu.set_attribute("data-state", "closed");
    if let Some(el) = menu.dyn_ref::<web_sys::HtmlElement>() {
        let _ = el.style().set_property("pointer-events", "none");
    }
 }
 mod components {
    use super::*;
    clx! {ContextMenuLabel, span, "px-2 py-1.5 text-sm font-medium data-inset:pl-8", "mb-1"}
    clx! {ContextMenuGroup, ul, "group"}
    clx! {ContextMenuItem, li, "inline-flex gap-2 items-center w-full rounded-sm px-2 py-1.5 text-sm no-underline transition-colors duration-200 text-popover-foreground hover:bg-accent hover:text-accent-foreground [&_svg:not([class*='size-'])]:size-4"}
    clx! {ContextMenuSubContent, ul, "context__menu_sub_content", "rounded-md border bg-card shadow-lg p-1 absolute z-[100] min-w-[160px] opacity-0 invisible translate-x-[-8px] transition-all duration-200 ease-out pointer-events-none"}
    clx! {ContextMenuLink, a, "w-full inline-flex gap-2 items-center"}
 }
 pub use components::*;
 #[component]
 pub fn ContextMenuAction(
    children: Children,
    #[prop(optional, into)] class: String,
    #[prop(optional, into)] aria_selected: Option<Signal<bool>>,
    #[prop(optional, into)] href: Option<String>,
 ) -> impl IntoView {
    let _ctx = expect_context::<ContextMenuContext>();
    let class = tw_merge!(
        "inline-flex gap-2 items-center w-full text-sm text-left transition-colors duration-200 focus:outline-none focus-visible:outline-none text-popover-foreground [&_svg:not([class*='size-'])]:size-4",
        class
    );
    let aria_selected_attr = move || aria_selected.map(|s| s.get()).unwrap_or(false).to_string();
    if let Some(href) = href {
        view! {
            <a
                data-name="ContextMenuAction"
                class=class
                href=href
                aria-selected=aria_selected_attr
                data-context-close="true"
            >
                {children()}
            </a>
        }
        .into_any()
    } else {
        view! {
            <button
                type="button"
                data-name="ContextMenuAction"
                class=class
                data-context-close="true"
                aria-selected=aria_selected_attr
            >
                {children()}
            </button>
        }
        .into_any()
    }
 }
 #[component]
 pub fn ContextMenuHoldAction(
    children: Children,
    #[prop(into)] on_hold_complete: Callback<()>,
    #[prop(optional, into)] class: String,
    #[prop(default = 1000)] hold_duration: u64,
 ) -> impl IntoView {
    let is_holding = RwSignal::new(false);
    let progress = RwSignal::new(0.0);
    let on_mousedown = move |_| {
        is_holding.set(true);
        progress.set(0.0);
    };
    let on_mouseup = move |_| {
        is_holding.set(false);
        progress.set(0.0);
    };
    Effect::new(move |_| {
        if is_holding.get() {
            let start_time = js_sys::Date::now();
            let duration = hold_duration as f64;
            leptos::task::spawn_local(async move {
                while is_holding.get_untracked() {
                    let now = js_sys::Date::now();
                    let elapsed = now - start_time;
                    let p = (elapsed / duration).min(1.0);
                    progress.set(p * 100.0);
                    if p >= 1.0 {
                        on_hold_complete.run(());
                        is_holding.set(false);
                        close_context_menu();
                        break;
                    }
                    gloo_timers::future::TimeoutFuture::new(16).await; // ~60fps
                }
            });
        }
    });
    let class = tw_merge!(
        "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors overflow-hidden",
        class
    );
    view! {
        <div
            class=class
            on:mousedown=on_mousedown
            on:mouseup=on_mouseup
            on:mouseleave=on_mouseup
            on:touchstart=move |_| on_mousedown(web_sys::MouseEvent::new("mousedown").unwrap())
            on:touchend=move |_| on_mouseup(web_sys::MouseEvent::new("mouseup").unwrap())
        >
            // Progress background
            <div 
                class="absolute inset-y-0 left-0 bg-destructive/20 transition-all duration-75 ease-linear pointer-events-none"
                style=move || format!("width: {}%;", progress.get())
            />
            <span class="relative z-10 flex items-center gap-2 w-full">
                {children()}
            </span>
        </div>
    }.into_any()
 }
 #[derive(Clone)]
 struct ContextMenuContext {
    target_id: String,
 }
 #[component]
 pub fn ContextMenu(children: Children) -> impl IntoView {
    let context_target_id = use_random_id_for("context");
    let ctx = ContextMenuContext { target_id: context_target_id.clone() };
    view! {
        <Provider value=ctx>
            <style>
                "
                /* Submenu Styles */
                .context__menu_sub_content {
                    position: absolute;
                    inset-inline-start: calc(100% + 8px);
                    inset-block-start: -4px;
                    z-index: 100;
                    min-inline-size: 160px;
                    opacity: 0;
                    visibility: hidden;
                    transform: translateX(-8px);
                    transition: all 0.2s ease-out;
                    pointer-events: none;
                }
                .context__menu_sub_trigger:hover .context__menu_sub_content {
                    opacity: 1;
                    visibility: visible;
                    transform: translateX(0);
                    pointer-events: auto;
                }
                "
            </style>
            <div data-name="ContextMenu" class="contents">
                {children()}
            </div>
        </Provider>
    }
 }
 /// Wrapper that triggers the context menu on right-click.
 /// The `on_open` callback is triggered when the context menu opens (right-click).
 #[component]
 pub fn ContextMenuTrigger(
    children: Children,
    #[prop(optional, into)] class: String,
    #[prop(optional)] on_open: Option<Callback<()>>,
 ) -> impl IntoView {
    let ctx = expect_context::<ContextMenuContext>();
    let trigger_class = tw_merge!("contents", class);
    view! {
        <div
            class=trigger_class
            data-name="ContextMenuTrigger"
            data-context-trigger=ctx.target_id
            on:contextmenu=move |e: web_sys::MouseEvent| {
                if let Some(cb) = on_open {
                    cb.run(());
                }
            }
        >
            {children()}
        </div>
    }
 }
 /// Content of the context menu that appears on right-click.
 /// The `on_close` callback is triggered when the menu closes (click outside, ESC key, or action click).
 #[component]
 pub fn ContextMenuContent(
    children: Children,
    #[prop(optional, into)] class: String,
    #[prop(optional)] on_close: Option<Callback<()>>,
 ) -> impl IntoView {
    let ctx = expect_context::<ContextMenuContext>();
    let base_classes = "fixed z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md transition-all duration-200 data-[state=closed]:opacity-0 data-[state=closed]:scale-95 data-[state=open]:opacity-100 data-[state=open]:scale-100";
    let class = tw_merge!(base_classes, class);
    let target_id_for_script = ctx.target_id.clone();
    view! {
        <div
            data-name="ContextMenuContent"
            class=class
            // Listen for custom 'contextmenuclose' event dispatched by JS when menu closes
            on:contextmenuclose=move |_: web_sys::CustomEvent| {
                if let Some(cb) = on_close {
                    cb.run(());
                }
            }
            id=ctx.target_id
            data-target="target__context"
            data-state="closed"
            style="pointer-events: none;"
        >
            {children()}
        </div>
        <script>
            {format!(
                r#"
                (function() {{
                    const setupContextMenu = () => {{
                        const menu = document.querySelector('#{}');
                        const trigger = document.querySelector('[data-context-trigger="{}"]');
                        if (!menu || !trigger) {{
                            setTimeout(setupContextMenu, 50);
                            return;
                        }}
                        if (menu.hasAttribute('data-initialized')) {{
                            return;
                        }}
                        menu.setAttribute('data-initialized', 'true');
                        let isOpen = false;
                        const updatePosition = (x, y) => {{
                            const menuRect = menu.getBoundingClientRect();
                            const viewportHeight = window.innerHeight;
                            const viewportWidth = window.innerWidth;
                            // Calculate position, ensuring menu stays within viewport
                            let left = x;
                            let top = y;
                            // Adjust if menu would go off right edge
                            if (x + menuRect.width > viewportWidth) {{
                                left = x - menuRect.width;
                            }}
                            // Adjust if menu would go off bottom edge
                            if (y + menuRect.height > viewportHeight) {{
                                top = y - menuRect.height;
                            }}
                            menu.style.left = `${{left}}px`;
                            menu.style.top = `${{top}}px`;
                            menu.style.transformOrigin = 'top left';
                        }};
                        const openMenu = (x, y) => {{
                            isOpen = true;
                            // Close any other open context menus
                            const allMenus = document.querySelectorAll('[data-target="target__context"]');
                            allMenus.forEach(m => {{
                                if (m !== menu && m.getAttribute('data-state') === 'open') {{
                                    m.setAttribute('data-state', 'closed');
                                    m.style.pointerEvents = 'none';
                                }}
                            }});
                            menu.setAttribute('data-state', 'open');
                            menu.style.visibility = 'hidden';
                            menu.style.pointerEvents = 'auto';
                            // Force reflow
                            menu.offsetHeight;
                            updatePosition(x, y);
                            menu.style.visibility = 'visible';
                            // Lock scroll
                            if (window.ScrollLock) {{
                                window.ScrollLock.lock();
                            }}
                            setTimeout(() => {{
                                document.addEventListener('click', handleClickOutside);
                                document.addEventListener('contextmenu', handleContextOutside);
                            }}, 0);
                        }};
                        const closeMenu = () => {{
                            isOpen = false;
                            menu.setAttribute('data-state', 'closed');
                            menu.style.pointerEvents = 'none';
                            document.removeEventListener('click', handleClickOutside);
                            document.removeEventListener('contextmenu', handleContextOutside);
                            // Dispatch custom event for Leptos to listen to
                            menu.dispatchEvent(new CustomEvent('contextmenuclose', {{ bubbles: false }}));
                            if (window.ScrollLock) {{
                                window.ScrollLock.unlock(200);
                            }}
                        }};
                        const handleClickOutside = (e) => {{
                            if (!menu.contains(e.target)) {{
                                closeMenu();
                            }}
                        }};
                        const handleContextOutside = (e) => {{
                            if (!trigger.contains(e.target)) {{
                                closeMenu();
                            }}
                        }};
                        // Right-click on trigger
                        trigger.addEventListener('contextmenu', (e) => {{
                            e.preventDefault();
                            e.stopPropagation();
                            if (isOpen) {{
                                closeMenu();
                            }}
                            openMenu(e.clientX, e.clientY);
                        }});
                        // Close when action is clicked
                        const actions = menu.querySelectorAll('[data-context-close]');
                        actions.forEach(action => {{
                            action.addEventListener('click', () => {{
                                closeMenu();
                            }});
                        }});
                        // Handle ESC key
                        document.addEventListener('keydown', (e) => {{
                            if (e.key === 'Escape' && isOpen) {{
                                e.preventDefault();
                                closeMenu();
                            }}
                        }});
                    }};
                    if (document.readyState === 'loading') {{
                        document.addEventListener('DOMContentLoaded', setupContextMenu);
                    }} else {{
                        setupContextMenu();
                    }}
                }})();
                "#,
                target_id_for_script,
                target_id_for_script,
            )}
        </script>
    }.into_any()
 }
 #[component]
 pub fn ContextMenuSub(children: Children) -> impl IntoView {
    clx! {ContextMenuSubRoot, li, "context__menu_sub_trigger", " relative inline-flex relative gap-2 items-center py-1.5 px-2 w-full text-sm no-underline rounded-sm transition-colors duration-200 cursor-pointer text-popover-foreground [&_svg:not([class*='size-'])]:size-4 hover:bg-accent hover:text-accent-foreground"}
    view! { <ContextMenuSubRoot>{children()}</ContextMenuSubRoot> }
 }
 #[component]
 pub fn ContextMenuSubTrigger(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
    let class = tw_merge!("flex items-center justify-between w-full", class);
    view! {
        <span data-name="ContextMenuSubTrigger" class=class>
            <span class="flex gap-2 items-center">{children()}</span>
            <ChevronRight class="opacity-70 size-4" />
        </span>
    }
 }
 #[component]
 pub fn ContextMenuSubItem(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
    let class = tw_merge!(
        "inline-flex gap-2 items-center w-full rounded-sm px-3 py-2 text-sm transition-all duration-150 ease text-popover-foreground hover:bg-accent hover:text-accent-foreground cursor-pointer hover:translate-x-[2px]",
        class
    );
    view! {
        <li data-name="ContextMenuSubItem" class=class data-context-close="true">
            {children()}
        </li>
    }
 }
--- a/frontend/src/components/ui/data_table.rs
+++ b/frontend/src/components/ui/data_table.rs
@@ -1,6 +0,0 @@
 // * Reuse @table.rs
 pub use crate::components::ui::table::{
    Table as DataTable, TableBody as DataTableBody, TableCaption as DataTableCaption, TableCell as DataTableCell,
    TableFooter as DataTableFooter, TableHead as DataTableHead, TableHeader as DataTableHeader,
    TableRow as DataTableRow, TableWrapper as DataTableWrapper,
 };
--- a/frontend/src/components/ui/dialog.rs
+++ b/frontend/src/components/ui/dialog.rs
@@ -1,251 +0,0 @@
 use icons::X;
 use leptos::context::Provider;
 use leptos::prelude::*;
 use leptos_ui::clx;
 use tw_merge::*;
 use crate::components::hooks::use_random::use_random_id_for;
 use crate::components::ui::button::{Button, ButtonSize, ButtonVariant};
 mod components {
    use super::*;
    clx! {DialogBody, div, "flex flex-col gap-4"}
    clx! {DialogHeader, div, "flex flex-col gap-2 text-center sm:text-left"}
    clx! {DialogTitle, h3, "text-lg leading-none font-semibold"}
    clx! {DialogDescription, p, "text-muted-foreground text-sm"}
    clx! {DialogFooter, footer, "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"}
 }
 pub use components::*;
 /* ========================================================== */
 /*                     ✨ FUNCTIONS ✨                        */
 /* ========================================================== */
 #[derive(Clone)]
 struct DialogContext {
    target_id: String,
 }
 #[component]
 pub fn Dialog(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
    let dialog_target_id = use_random_id_for("dialog");
    let ctx = DialogContext { target_id: dialog_target_id.clone() };
    let merged_class = tw_merge!("w-fit", class);
    view! {
        <Provider value=ctx>
            <div class=merged_class data-name="__Dialog">
                {children()}
            </div>
        </Provider>
    }
 }
 #[component]
 pub fn DialogTrigger(
    children: Children,
    #[prop(optional, into)] class: String,
    #[prop(default = ButtonVariant::Outline)] variant: ButtonVariant,
    #[prop(default = ButtonSize::Default)] size: ButtonSize,
 ) -> impl IntoView {
    let ctx = expect_context::<DialogContext>();
    let trigger_id = format!("trigger_{}", ctx.target_id);
    view! {
        <Button
            class=class
            attr:id=trigger_id
            attr:tabindex="0"
            attr:data-dialog-trigger=ctx.target_id
            variant=variant
            size=size
        >
            {children()}
        </Button>
    }
 }
 #[component]
 pub fn DialogContent(
    children: Children,
    #[prop(optional, into)] class: String,
    #[prop(into, optional)] hide_close_button: Option<bool>,
    #[prop(default = true)] close_on_backdrop_click: bool,
    #[prop(default = "Dialog")] data_name_prefix: &'static str,
 ) -> impl IntoView {
    let ctx = expect_context::<DialogContext>();
    let merged_class = tw_merge!(
        // "flex flex-col gap-4", // TODO 🐛 Bug when I try to have this.. Using DialogBody instead.
        "relative bg-background border rounded-2xl shadow-lg p-6 w-full max-w-[calc(100%-2rem)] max-h-[85vh] fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] z-100 transition-all duration-200 data-[state=closed]:opacity-0 data-[state=closed]:scale-95 data-[state=open]:opacity-100 data-[state=open]:scale-100",
        class
    );
    let backdrop_data_name = format!("{}Backdrop", data_name_prefix);
    let content_data_name = format!("{}Content", data_name_prefix);
    let target_id_clone = ctx.target_id.clone();
    let backdrop_id = format!("{}_backdrop", ctx.target_id);
    let target_id_for_script = ctx.target_id.clone();
    let backdrop_id_for_script = backdrop_id.clone();
    let backdrop_behavior = if close_on_backdrop_click { "auto" } else { "manual" };
    view! {
        <script src="/hooks/lock_scroll.js"></script>
        <div
            data-name=backdrop_data_name
            id=backdrop_id
            class="fixed inset-0 transition-opacity duration-200 pointer-events-none z-60 bg-black/50 data-[state=closed]:opacity-0 data-[state=open]:opacity-100"
            data-state="closed"
        />
        <div
            data-name=content_data_name
            class=merged_class
            id=ctx.target_id
            data-target="target__dialog"
            data-state="closed"
            data-backdrop=backdrop_behavior
            style="pointer-events: none;"
        >
            <button
                type="button"
                class=format!(
                    "absolute top-4 right-4 p-1 rounded-sm focus:ring-2 focus:ring-offset-2 focus:outline-none [&_svg:not([class*='size-'])]:size-4 focus:ring-ring{}",
                    if hide_close_button.unwrap_or(false) { " hidden" } else { "" },
                )
                data-dialog-close=target_id_clone.clone()
                aria-label="Close dialog"
            >
                <span class="hidden">"Close Dialog"</span>
                <X />
            </button>
            {children()}
        </div>
        <script>
            {format!(
                r#"
                (function() {{
                    const setupDialog = () => {{
                        const dialog = document.querySelector('#{}');
                        const backdrop = document.querySelector('#{}');
                        const trigger = document.querySelector('[data-dialog-trigger="{}"]');
                        if (!dialog || !backdrop || !trigger) {{
                            setTimeout(setupDialog, 50);
                            return;
                        }}
                        if (dialog.hasAttribute('data-initialized')) {{
                            return;
                        }}
                        dialog.setAttribute('data-initialized', 'true');
                        const openDialog = () => {{
                            // Lock scrolling
                            window.ScrollLock.lock();
                            dialog.setAttribute('data-state', 'open');
                            backdrop.setAttribute('data-state', 'open');
                            dialog.style.pointerEvents = 'auto';
                            backdrop.style.pointerEvents = 'auto';
                        }};
                        const closeDialog = () => {{
                            dialog.setAttribute('data-state', 'closed');
                            backdrop.setAttribute('data-state', 'closed');
                            dialog.style.pointerEvents = 'none';
                            backdrop.style.pointerEvents = 'none';
                            // Unlock scrolling after animation
                            window.ScrollLock.unlock(200);
                        }};
                        // Open dialog when trigger is clicked
                        trigger.addEventListener('click', openDialog);
                        // Close buttons
                        const closeButtons = dialog.querySelectorAll('[data-dialog-close]');
                        closeButtons.forEach(btn => {{
                            btn.addEventListener('click', closeDialog);
                        }});
                        // Close on backdrop click (if data-backdrop="auto")
                        backdrop.addEventListener('click', () => {{
                            if (dialog.getAttribute('data-backdrop') === 'auto') {{
                                closeDialog();
                            }}
                        }});
                        // Handle ESC key to close
                        document.addEventListener('keydown', (e) => {{
                            if (e.key === 'Escape' && dialog.getAttribute('data-state') === 'open') {{
                                e.preventDefault();
                                closeDialog();
                            }}
                        }});
                    }};
                    if (document.readyState === 'loading') {{
                        document.addEventListener('DOMContentLoaded', setupDialog);
                    }} else {{
                        setupDialog();
                    }}
                }})();
                "#,
                target_id_for_script,
                backdrop_id_for_script,
                target_id_for_script,
            )}
        </script>
    }
 }
 #[component]
 pub fn DialogClose(
    children: Children,
    #[prop(optional, into)] class: String,
    #[prop(default = ButtonVariant::Outline)] variant: ButtonVariant,
    #[prop(default = ButtonSize::Default)] size: ButtonSize,
 ) -> impl IntoView {
    let ctx = expect_context::<DialogContext>();
    view! {
        <Button
            class=class
            attr:data-dialog-close=ctx.target_id
            attr:aria-label="Close dialog"
            variant=variant
            size=size
        >
            {children()}
        </Button>
    }
 }
 #[component]
 pub fn DialogAction(
    children: Children,
    #[prop(optional, into)] class: String,
    #[prop(default = ButtonVariant::Default)] variant: ButtonVariant,
    #[prop(default = ButtonSize::Default)] size: ButtonSize,
 ) -> impl IntoView {
    let ctx = expect_context::<DialogContext>();
    view! {
        <Button
            class=class
            attr:data-dialog-close=ctx.target_id
            attr:aria-label="Close dialog"
            variant=variant
            size=size
        >
            {children()}
        </Button>
    }
 }
--- a/frontend/src/components/ui/dropdown_menu.rs
+++ b/frontend/src/components/ui/dropdown_menu.rs
@@ -1,536 +0,0 @@
 use icons::{Check, ChevronRight};
 use leptos::context::Provider;
 use leptos::prelude::*;
 use leptos_ui::clx;
 use tw_merge::*;
 use crate::components::hooks::use_random::use_random_id_for;
 pub use crate::components::ui::separator::Separator as DropdownMenuSeparator;
 mod components {
    use super::*;
    clx! {DropdownMenuLabel, span, "px-2 py-1.5 text-sm font-medium data-inset:pl-8", "mb-1"}
    clx! {DropdownMenuGroup, ul, "group"}
    clx! {DropdownMenuItem, li, "inline-flex gap-2 items-center w-full rounded-sm px-2 py-1.5 text-sm no-underline transition-colors duration-200 text-popover-foreground hover:bg-accent hover:text-accent-foreground [&_svg:not([class*='size-'])]:size-4"}
    clx! {DropdownMenuSubContent, ul, "dropdown__menu_sub_content", "rounded-md border bg-card shadow-lg p-1 absolute z-[100] min-w-[160px] opacity-0 invisible translate-x-[-8px] transition-all duration-200 ease-out pointer-events-none"}
    clx! {DropdownMenuLink, a, "w-full inline-flex gap-2 items-center"}
 }
 pub use components::*;
 /* ========================================================== */
 /*                     RADIO GROUP                            */
 /* ========================================================== */
 #[derive(Clone)]
 struct DropdownMenuRadioContext<T: Clone + PartialEq + Send + Sync + 'static> {
    value_signal: RwSignal<T>,
 }
 /// A group of radio items where only one can be selected at a time.
 #[component]
 pub fn DropdownMenuRadioGroup<T>(
    children: Children,
    /// The signal holding the current selected value
    value: RwSignal<T>,
 ) -> impl IntoView
 where
    T: Clone + PartialEq + Send + Sync + 'static,
 {
    let ctx = DropdownMenuRadioContext { value_signal: value };
    view! {
        <Provider value=ctx>
            <ul data-name="DropdownMenuRadioGroup" role="group" class="group">
                {children()}
            </ul>
        </Provider>
    }
 }
 /// A radio item that shows a checkmark when selected.
 #[component]
 pub fn DropdownMenuRadioItem<T>(
    children: Children,
    /// The value this item represents
    value: T,
    #[prop(optional, into)] class: String,
 ) -> impl IntoView
 where
    T: Clone + PartialEq + Send + Sync + 'static,
 {
    let ctx = expect_context::<DropdownMenuRadioContext<T>>();
    let value_for_check = value.clone();
    let value_for_click = value.clone();
    let is_selected = move || ctx.value_signal.get() == value_for_check;
    let merged_class = tw_merge!(
        "group inline-flex gap-2 items-center w-full rounded-sm pl-2 pr-2 py-1.5 text-sm cursor-pointer no-underline transition-colors duration-200 text-popover-foreground hover:bg-accent hover:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
        class
    );
    view! {
        <li
            data-name="DropdownMenuRadioItem"
            class=merged_class
            role="menuitemradio"
            aria-checked=move || is_selected().to_string()
            data-dropdown-close="true"
            on:click=move |_| {
                ctx.value_signal.set(value_for_click.clone());
            }
        >
            {children()}
            <Check class="ml-auto opacity-0 size-4 text-muted-foreground group-aria-checked:opacity-100" />
        </li>
    }
 }
 /// An action item in a dropdown menu (no checkmark, just triggers an action).
 #[component]
 pub fn DropdownMenuAction(
    children: Children,
    #[prop(optional, into)] class: String,
    #[prop(optional, into)] href: Option<String>,
 ) -> impl IntoView {
    let _ctx = expect_context::<DropdownMenuContext>();
    let class = tw_merge!(
        "inline-flex gap-2 items-center w-full text-sm text-left transition-colors duration-200 focus:outline-none focus-visible:outline-none text-popover-foreground [&_svg:not([class*='size-'])]:size-4 hover:bg-accent hover:text-accent-foreground",
        class
    );
    if let Some(href) = href {
        // Render as <a> tag when href is provided
        view! {
            <a data-name="DropdownMenuAction" class=class href=href data-dropdown-close="true">
                {children()}
            </a>
            <script>
                {r#"
                (function() {
                const link = document.currentScript.previousElementSibling;
                if (!link) return;
                link.addEventListener('click', function() {
                // Close dropdown on route change after navigation
                let currentPath = window.location.pathname;
                const checkRouteChange = () => {
                if (window.location.pathname !== currentPath) {
                currentPath = window.location.pathname;
                // Find and close the dropdown
                const dropdown = link.closest('[data-target="target__dropdown"]');
                if (dropdown) {
                dropdown.setAttribute('data-state', 'closed');
                dropdown.style.pointerEvents = 'none';
                // Unlock scroll
                if (window.ScrollLock) {
                window.ScrollLock.unlock(200);
                }
                }
                clearInterval(routeCheckInterval);
                }
                };
                const routeCheckInterval = setInterval(checkRouteChange, 50);
                // Clear interval after 2 seconds to prevent memory leaks
                setTimeout(() => clearInterval(routeCheckInterval), 2000);
                });
                })();
                "#}
            </script>
        }
        .into_any()
    } else {
        // Render as <button> tag when no href
        view! {
            <button type="button" data-name="DropdownMenuAction" class=class data-dropdown-close="true">
                {children()}
            </button>
        }
        .into_any()
    }
 }
 /* ========================================================== */
 /*                     ✨ FUNCTIONS ✨                        */
 /* ========================================================== */
 #[derive(Clone, Copy, PartialEq, Eq, Default)]
 pub enum DropdownMenuAlign {
    #[default]
    Start,
    StartOuter,
    End,
    EndOuter,
    Center,
 }
 #[derive(Clone)]
 struct DropdownMenuContext {
    target_id: String,
    align: DropdownMenuAlign,
 }
 #[component]
 pub fn DropdownMenu(
    children: Children,
    #[prop(default = DropdownMenuAlign::default())] align: DropdownMenuAlign,
 ) -> impl IntoView {
    let dropdown_target_id = use_random_id_for("dropdown");
    let ctx = DropdownMenuContext { target_id: dropdown_target_id.clone(), align };
    view! {
        <Provider value=ctx>
            <style>
                "
                /* Submenu Styles */
                .dropdown__menu_sub_content {
                    position: absolute;
                    inset-inline-start: calc(100% + 8px);
                    inset-block-start: -4px;
                    z-index: 100;
                    min-inline-size: 160px;
                    opacity: 0;
                    visibility: hidden;
                    transform: translateX(-8px);
                    transition: all 0.2s ease-out;
                    pointer-events: none;
                }
                .dropdown__menu_sub_trigger:hover .dropdown__menu_sub_content {
                    opacity: 1;
                    visibility: visible;
                    transform: translateX(0);
                    pointer-events: auto;
                }
                "
            </style>
            <div data-name="DropdownMenu">{children()}</div>
        </Provider>
    }
 }
 #[component]
 pub fn DropdownMenuTrigger(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
    let ctx = expect_context::<DropdownMenuContext>();
    let button_class = tw_merge!(
        "px-4 py-2 h-9 inline-flex justify-center items-center text-sm font-medium whitespace-nowrap rounded-md transition-colors w-fit focus:outline-none focus:ring-1 focus:ring-ring focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4  border bg-background border-input hover:bg-accent hover:text-accent-foreground",
        class
    );
    view! {
        <button
            type="button"
            class=button_class
            data-name="DropdownMenuTrigger"
            data-dropdown-trigger=ctx.target_id
            tabindex="0"
        >
            {children()}
        </button>
    }
 }
 #[derive(Clone, Copy, PartialEq, Eq, Default)]
 pub enum DropdownMenuPosition {
    #[default]
    Auto,
    Top,
    Bottom,
 }
 #[component]
 pub fn DropdownMenuContent(
    children: Children,
    #[prop(optional, into)] class: String,
    #[prop(default = DropdownMenuPosition::default())] position: DropdownMenuPosition,
 ) -> impl IntoView {
    let ctx = expect_context::<DropdownMenuContext>();
    let base_classes = "z-50 p-1 rounded-md border bg-card shadow-md h-fit fixed transition-all duration-200 data-[state=closed]:opacity-0 data-[state=closed]:scale-95 data-[state=open]:opacity-100 data-[state=open]:scale-100";
    let width_class = match ctx.align {
        DropdownMenuAlign::Center => "min-w-full",
        _ => "w-[180px]",
    };
    let class = tw_merge!(width_class, base_classes, class);
    let target_id_for_script = ctx.target_id.clone();
    let align_for_script = match ctx.align {
        DropdownMenuAlign::Start => "start",
        DropdownMenuAlign::StartOuter => "start-outer",
        DropdownMenuAlign::End => "end",
        DropdownMenuAlign::EndOuter => "end-outer",
        DropdownMenuAlign::Center => "center",
    };
    let position_for_script = match position {
        DropdownMenuPosition::Auto => "auto",
        DropdownMenuPosition::Top => "top",
        DropdownMenuPosition::Bottom => "bottom",
    };
    view! {
        <div
            data-name="DropdownMenuContent"
            class=class
            id=ctx.target_id
            data-target="target__dropdown"
            data-state="closed"
            data-align=align_for_script
            data-position=position_for_script
            style="pointer-events: none;"
        >
            {children()}
        </div>
        <script>
            {format!(
                r#"
                (function() {{
                    const setupDropdown = () => {{
                        const dropdown = document.querySelector('#{}');
                        const trigger = document.querySelector('[data-dropdown-trigger="{}"]');
                        if (!dropdown || !trigger) {{
                            setTimeout(setupDropdown, 50);
                            return;
                        }}
                        if (dropdown.hasAttribute('data-initialized')) {{
                            return;
                        }}
                        dropdown.setAttribute('data-initialized', 'true');
                        let isOpen = false;
                        const updatePosition = () => {{
                            const triggerRect = trigger.getBoundingClientRect();
                            const dropdownRect = dropdown.getBoundingClientRect();
                            const viewportHeight = window.innerHeight;
                            const viewportWidth = window.innerWidth;
                            const spaceBelow = viewportHeight - triggerRect.bottom;
                            const spaceAbove = triggerRect.top;
                            const align = dropdown.getAttribute('data-align') || 'start';
                            const position = dropdown.getAttribute('data-position') || 'auto';
                            // Determine if we should position above
                            let shouldPositionAbove = false;
                            if (position === 'top') {{
                                shouldPositionAbove = true;
                            }} else if (position === 'bottom') {{
                                shouldPositionAbove = false;
                            }} else {{
                                // Auto: position above if there's space above AND not enough space below
                                shouldPositionAbove = spaceAbove >= dropdownRect.height && spaceBelow < dropdownRect.height;
                            }}
                            switch (align) {{
                                case 'start':
                                    if (shouldPositionAbove) {{
                                        dropdown.style.top = `${{triggerRect.top - dropdownRect.height - 6}}px`;
                                        dropdown.style.transformOrigin = 'left bottom';
                                    }} else {{
                                        dropdown.style.top = `${{triggerRect.bottom + 6}}px`;
                                        dropdown.style.transformOrigin = 'left top';
                                    }}
                                    dropdown.style.left = `${{triggerRect.left}}px`;
                                    break;
                                case 'end':
                                    if (shouldPositionAbove) {{
                                        dropdown.style.top = `${{triggerRect.top - dropdownRect.height - 6}}px`;
                                        dropdown.style.transformOrigin = 'right bottom';
                                    }} else {{
                                        dropdown.style.top = `${{triggerRect.bottom + 6}}px`;
                                        dropdown.style.transformOrigin = 'right top';
                                    }}
                                    dropdown.style.left = `${{triggerRect.right - dropdownRect.width}}px`;
                                    break;
                                case 'start-outer':
                                    if (shouldPositionAbove) {{
                                        dropdown.style.top = `${{triggerRect.top - dropdownRect.height - 6}}px`;
                                        dropdown.style.transformOrigin = 'right bottom';
                                    }} else {{
                                        dropdown.style.top = `${{triggerRect.top}}px`;
                                        dropdown.style.transformOrigin = 'right top';
                                    }}
                                    dropdown.style.left = `${{triggerRect.left - dropdownRect.width - 16}}px`;
                                    break;
                                case 'end-outer':
                                    if (shouldPositionAbove) {{
                                        dropdown.style.top = `${{triggerRect.top - dropdownRect.height - 6}}px`;
                                        dropdown.style.transformOrigin = 'left bottom';
                                    }} else {{
                                        dropdown.style.top = `${{triggerRect.top}}px`;
                                        dropdown.style.transformOrigin = 'left top';
                                    }}
                                    dropdown.style.left = `${{triggerRect.right + 8}}px`;
                                    break;
                                case 'center':
                                    if (shouldPositionAbove) {{
                                        dropdown.style.top = `${{triggerRect.top - dropdownRect.height - 6}}px`;
                                        dropdown.style.transformOrigin = 'center bottom';
                                    }} else {{
                                        dropdown.style.top = `${{triggerRect.bottom + 6}}px`;
                                        dropdown.style.transformOrigin = 'center top';
                                    }}
                                    dropdown.style.left = `${{triggerRect.left}}px`;
                                    dropdown.style.minWidth = `${{triggerRect.width}}px`;
                                    break;
                            }}
                        }};
                        const openDropdown = () => {{
                            isOpen = true;
                            // Set state to open first to remove scale transform for accurate measurements
                            dropdown.setAttribute('data-state', 'open');
                            // Make dropdown invisible but rendered to measure true height
                            dropdown.style.visibility = 'hidden';
                            dropdown.style.pointerEvents = 'auto';
                            // Force reflow to ensure height is calculated
                            dropdown.offsetHeight;
                            // Calculate position with accurate height
                            updatePosition();
                            // Now make it visible
                            dropdown.style.visibility = 'visible';
                            // Lock all scrollable elements
                            window.ScrollLock.lock();
                            // Close on click outside
                            setTimeout(() => {{
                                document.addEventListener('click', handleClickOutside);
                            }}, 0);
                        }};
                        const closeDropdown = () => {{
                            isOpen = false;
                            dropdown.setAttribute('data-state', 'closed');
                            dropdown.style.pointerEvents = 'none';
                            document.removeEventListener('click', handleClickOutside);
                            // Unlock scroll after animation (200ms delay)
                            window.ScrollLock.unlock(200);
                        }};
                        const handleClickOutside = (e) => {{
                            if (!dropdown.contains(e.target) && !trigger.contains(e.target)) {{
                                closeDropdown();
                            }}
                        }};
                        // Toggle dropdown when trigger is clicked
                        trigger.addEventListener('click', (e) => {{
                            e.stopPropagation();
                            // Check if any other dropdown is open
                            const allDropdowns = document.querySelectorAll('[data-target=\"target__dropdown\"]');
                            let otherDropdownOpen = false;
                            allDropdowns.forEach(dd => {{
                                if (dd !== dropdown && dd.getAttribute('data-state') === 'open') {{
                                    otherDropdownOpen = true;
                                    dd.setAttribute('data-state', 'closed');
                                    dd.style.pointerEvents = 'none';
                                    // Unlock scroll
                                    if (window.ScrollLock) {{
                                        window.ScrollLock.unlock(200);
                                    }}
                                }}
                            }});
                            // If another dropdown was open, just close it and don't open this one
                            if (otherDropdownOpen) {{
                                return;
                            }}
                            // Normal toggle behavior
                            if (isOpen) {{
                                closeDropdown();
                            }} else {{
                                openDropdown();
                            }}
                        }});
                        // Close when action is clicked
                        const actions = dropdown.querySelectorAll('[data-dropdown-close]');
                        actions.forEach(action => {{
                            action.addEventListener('click', () => {{
                                closeDropdown();
                            }});
                        }});
                        // Handle ESC key to close
                        document.addEventListener('keydown', (e) => {{
                            if (e.key === 'Escape' && isOpen) {{
                                e.preventDefault();
                                closeDropdown();
                            }}
                        }});
                    }};
                    if (document.readyState === 'loading') {{
                        document.addEventListener('DOMContentLoaded', setupDropdown);
                    }} else {{
                        setupDropdown();
                    }}
                }})();
                "#,
                target_id_for_script,
                target_id_for_script,
            )}
        </script>
    }
 }
 #[component]
 pub fn DropdownMenuSub(children: Children) -> impl IntoView {
    // TODO. Find a better way for dropdown__menu_sub_trigger.
    clx! {DropdownMenuSubRoot, li, "dropdown__menu_sub_trigger", " relative inline-flex relative gap-2 items-center py-1.5 px-2 w-full text-sm no-underline rounded-sm transition-colors duration-200 cursor-pointer text-popover-foreground [&_svg:not([class*='size-'])]:size-4 hover:bg-accent hover:text-accent-foreground"}
    view! { <DropdownMenuSubRoot>{children()}</DropdownMenuSubRoot> }
 }
 #[component]
 pub fn DropdownMenuSubTrigger(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
    let class = tw_merge!("flex items-center justify-between w-full", class);
    view! {
        <span attr:data-name="DropdownMenuSubTrigger" class=class>
            <span class="flex gap-2 items-center">{children()}</span>
            <ChevronRight class="opacity-70 size-4" />
        </span>
    }
 }
 #[component]
 pub fn DropdownMenuSubItem(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
    let class = tw_merge!(
        "inline-flex gap-2 items-center w-full rounded-sm px-3 py-2 text-sm transition-all duration-150 ease text-popover-foreground hover:bg-accent hover:text-accent-foreground cursor-pointer hover:translate-x-[2px]",
        class
    );
    view! {
        <li data-name="DropdownMenuSubItem" class=class data-dropdown-close="true">
            {children()}
        </li>
    }
 }
--- a/frontend/src/components/ui/empty.rs
+++ b/frontend/src/components/ui/empty.rs
@@ -1,35 +0,0 @@
 use leptos::prelude::*;
 use leptos_ui::{clx, variants};
 mod components {
    use super::*;
    clx! {Empty, div, "flex flex-col items-center justify-center gap-4 rounded-lg border border-dashed p-8 text-center"}
    clx! {EmptyHeader, div, "flex flex-col items-center gap-2"}
    clx! {EmptyTitle, h3, "text-lg font-semibold leading-none"}
    clx! {EmptyDescription, p, "text-muted-foreground text-sm"}
    clx! {EmptyContent, div, "flex items-center justify-center gap-2"}
 }
 pub use components::*;
 /* ========================================================== */
 /*                     ✨ FUNCTIONS ✨                        */
 /* ========================================================== */
 variants! {
    EmptyMedia {
        base: "flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
        variants: {
            variant: {
                Default: "bg-transparent",
                Icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
            },
            size: {
                Default: "",
            }
        },
        component: {
            element: div
        }
    }
 }
--- a/frontend/src/components/ui/input.rs
+++ b/frontend/src/components/ui/input.rs
@@ -5,7 +5,6 @@ use tw_merge::tw_merge;
 #[derive(Default, Clone, Copy, PartialEq, Eq, AsRefStr)]
 #[strum(serialize_all = "lowercase")]
 #[allow(dead_code)]
 pub enum InputType {
    #[default]
    Text,
--- a/frontend/src/components/ui/mod.rs
+++ b/frontend/src/components/ui/mod.rs
@@ -1,17 +1,4 @@
 pub mod alert_dialog;
 pub mod button;
 pub mod card;
 pub mod checkbox;
 pub mod context_menu;
 pub mod data_table;
 pub mod dialog;
 pub mod dropdown_menu;
 pub mod empty;
 pub mod input;
-pub mod multi_select;
+pub mod toast;
 pub mod select;
 pub mod separator;
 pub mod svg_icon;
 pub mod table;
 pub mod theme_toggle;
 pub mod toast;
--- a/frontend/src/components/ui/multi_select.rs
+++ b/frontend/src/components/ui/multi_select.rs
@@ -1,294 +0,0 @@
 use std::collections::HashSet;
 use icons::{Check, ChevronDown, ChevronUp};
 use leptos::context::Provider;
 use leptos::prelude::*;
 use tw_merge::*;
 use crate::components::hooks::use_can_scroll_vertical::use_can_scroll_vertical;
 use crate::components::hooks::use_random::use_random_id_for;
 // * Reuse @select.rs
 pub use crate::components::ui::select::{
    SelectGroup as MultiSelectGroup, SelectItem as MultiSelectItem, SelectLabel as MultiSelectLabel,
 };
 #[derive(Clone, Copy, PartialEq, Eq, Default)]
 pub enum MultiSelectAlign {
    Start,
    #[default]
    Center,
    End,
 }
 /* ========================================================== */
 /*                     ✨ FUNCTIONS ✨                        */
 /* ========================================================== */
 #[component]
 pub fn MultiSelectValue(#[prop(optional, into)] placeholder: String) -> impl IntoView {
    let multi_select_ctx = expect_context::<MultiSelectContext>();
    view! {
        <span data-name="MultiSelectValue" class="text-sm text-muted-foreground truncate">
            {move || {
                let values = multi_select_ctx.values_signal.get();
                if values.is_empty() {
                    placeholder.clone()
                } else {
                    let count = values.len();
                    if count == 1 { "1 selected".to_string() } else { format!("{} selected", count) }
                }
            }}
        </span>
    }
 }
 #[component]
 pub fn MultiSelectOption(
    children: Children,
    #[prop(optional, into)] class: String,
    #[prop(optional, into)] value: Option<String>,
 ) -> impl IntoView {
    let multi_select_ctx = expect_context::<MultiSelectContext>();
    let value_clone = value.clone();
    let is_selected = Signal::derive(move || {
        if let Some(ref val) = value_clone {
            multi_select_ctx.values_signal.with(|values| values.contains(val))
        } else {
            false
        }
    });
    let class = tw_merge!(
        "group inline-flex gap-2 items-center w-full text-sm text-left transition-colors duration-200 focus:outline-none focus-visible:outline-none text-popover-foreground [&_svg:not([class*='size-'])]:size-4 hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-50",
        class
    );
    view! {
        <button
            type="button"
            data-name="MultiSelectOption"
            class=class
            role="option"
            aria-selected=move || is_selected.get().to_string()
            on:click=move |ev: web_sys::MouseEvent| {
                ev.prevent_default();
                ev.stop_propagation();
                if let Some(val) = value.clone() {
                    multi_select_ctx
                        .values_signal
                        .update(|values| {
                            if values.contains(&val) {
                                values.remove(&val);
                            } else {
                                values.insert(val);
                            }
                        });
                }
            }
        >
            {children()}
            <Check class="ml-auto opacity-0 size-4 text-muted-foreground group-aria-selected:opacity-100" />
        </button>
    }
 }
 /* ========================================================== */
 /*                     ✨ FUNCTIONS ✨                        */
 /* ========================================================== */
 #[derive(Clone)]
 struct MultiSelectContext {
    target_id: String,
    values_signal: RwSignal<HashSet<String>>,
    align: MultiSelectAlign,
 }
 #[component]
 pub fn MultiSelect(
    children: Children,
    #[prop(optional, into)] values: Option<RwSignal<HashSet<String>>>,
    #[prop(default = MultiSelectAlign::default())] align: MultiSelectAlign,
 ) -> impl IntoView {
    let multi_select_target_id = use_random_id_for("multi_select");
    let values_signal = values.unwrap_or_else(|| RwSignal::new(HashSet::<String>::new()));
    let multi_select_ctx = MultiSelectContext { target_id: multi_select_target_id.clone(), values_signal, align };
    view! {
        <Provider value=multi_select_ctx>
            <div data-name="MultiSelect" class="relative w-fit">
                {children()}
            </div>
        </Provider>
    }
 }
 #[component]
 pub fn MultiSelectTrigger(
    children: Children,
    #[prop(optional, into)] class: String,
    #[prop(optional, into)] id: String,
 ) -> impl IntoView {
    let multi_select_ctx = expect_context::<MultiSelectContext>();
    let peer_class = if !id.is_empty() { format!("peer/{}", id) } else { String::new() };
    let button_class = tw_merge!(
        "w-full p-2 h-9 inline-flex items-center justify-between text-sm font-medium whitespace-nowrap rounded-md transition-colors focus:outline-none focus:ring-1 focus:ring-ring focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&_svg:not(:last-child)]:mr-2 [&_svg:not(:first-child)]:ml-2 [&_svg:not([class*='size-'])]:size-4  border bg-background border-input hover:bg-accent hover:text-accent-foreground",
        &peer_class,
        class
    );
    let button_id = if !id.is_empty() { id } else { format!("trigger_{}", multi_select_ctx.target_id) };
    view! {
        <button
            type="button"
            data-name="MultiSelectTrigger"
            class=button_class
            id=button_id
            tabindex="0"
            data-multi-select-trigger=multi_select_ctx.target_id
        >
            {children()}
            <ChevronDown class="text-muted-foreground" />
        </button>
    }
 }
 #[component]
 pub fn MultiSelectContent(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
    let multi_select_ctx = expect_context::<MultiSelectContext>();
    let align_str = match multi_select_ctx.align {
        MultiSelectAlign::Start => "start",
        MultiSelectAlign::Center => "center",
        MultiSelectAlign::End => "end",
    };
    let class = tw_merge!(
        "w-[150px] overflow-auto z-50 p-1 rounded-md border bg-card shadow-md h-fit max-h-[300px] absolute top-[calc(100%+4px)] transition-all duration-200 data-[state=closed]:opacity-0 data-[state=closed]:scale-95 data-[state=open]:opacity-100 data-[state=open]:scale-100 data-[align=start]:left-0 data-[align=center]:left-1/2 data-[align=center]:-translate-x-1/2 data-[align=end]:right-0 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
        class
    );
    let target_id_for_script = multi_select_ctx.target_id.clone();
    let target_id_for_script_2 = multi_select_ctx.target_id.clone();
    // Scroll indicator signals
    let (on_scroll, can_scroll_up_signal, can_scroll_down_signal) = use_can_scroll_vertical();
    view! {
        <div
            data-name="MultiSelectContent"
            class=class
            id=multi_select_ctx.target_id
            data-target="target__multi_select"
            data-state="closed"
            data-align=align_str
            style="pointer-events: none;"
            on:scroll=move |ev| on_scroll.run(ev)
        >
            <div
                data-scroll-up="true"
                class=move || {
                    let is_up: bool = can_scroll_up_signal.get();
                    if is_up {
                        "sticky -top-1 z-10 flex items-center justify-center py-1 bg-card"
                    } else {
                        "hidden"
                    }
                }
            >
                <ChevronUp class="size-4 text-muted-foreground" />
            </div>
            {children()}
            <div
                data-scroll-down="true"
                class=move || {
                    let is_down: bool = can_scroll_down_signal.get();
                    if is_down {
                        "sticky -bottom-1 z-10 flex items-center justify-center py-1 bg-card"
                    } else {
                        "hidden"
                    }
                }
            >
                <ChevronDown class="size-4 text-muted-foreground" />
            </div>
        </div>
        <script>
            {format!(
                r#"
                (function() {{
                    const setupMultiSelect = () => {{
                        const multiSelect = document.querySelector('#{}');
                        const trigger = document.querySelector('[data-multi-select-trigger="{}"]');
                        if (!multiSelect || !trigger) {{
                            setTimeout(setupMultiSelect, 50);
                            return;
                        }}
                        if (multiSelect.hasAttribute('data-initialized')) {{
                            return;
                        }}
                        multiSelect.setAttribute('data-initialized', 'true');
                        let isOpen = false;
                        const openMultiSelect = () => {{
                            isOpen = true;
                            if (window.ScrollLock) window.ScrollLock.lock();
                            multiSelect.setAttribute('data-state', 'open');
                            multiSelect.style.pointerEvents = 'auto';
                            const triggerRect = trigger.getBoundingClientRect();
                            multiSelect.style.minWidth = `${{triggerRect.width}}px`;
                            multiSelect.dispatchEvent(new Event('scroll'));
                            setTimeout(() => {{
                                document.addEventListener('click', handleClickOutside);
                            }}, 0);
                        }};
                        const closeMultiSelect = () => {{
                            isOpen = false;
                            multiSelect.setAttribute('data-state', 'closed');
                            multiSelect.style.pointerEvents = 'none';
                            document.removeEventListener('click', handleClickOutside);
                            if (window.ScrollLock) window.ScrollLock.unlock(200);
                        }};
                        const handleClickOutside = (e) => {{
                            if (!multiSelect.contains(e.target) && !trigger.contains(e.target)) {{
                                closeMultiSelect();
                            }}
                        }};
                        trigger.addEventListener('click', (e) => {{
                            e.stopPropagation();
                            if (isOpen) closeMultiSelect(); else openMultiSelect();
                        }});
                        document.addEventListener('keydown', (e) => {{
                            if (e.key === 'Escape' && isOpen) {{
                                e.preventDefault();
                                closeMultiSelect();
                            }}
                        }});
                    }};
                    if (document.readyState === 'loading') {{
                        document.addEventListener('DOMContentLoaded', setupMultiSelect);
                    }} else {{
                        setupMultiSelect();
                    }}
                }})();
                "#,
                target_id_for_script,
                target_id_for_script_2,
            )}
        </script>
    }.into_any()
 }
--- a/frontend/src/components/ui/select.rs
+++ b/frontend/src/components/ui/select.rs
@@ -1,311 +0,0 @@
 use icons::{Check, ChevronDown, ChevronUp};
 use leptos::context::Provider;
 use leptos::prelude::*;
 use leptos_ui::clx;
 use strum::{AsRefStr, Display};
 use tw_merge::*;
 use crate::components::hooks::use_can_scroll_vertical::use_can_scroll_vertical;
 use crate::components::hooks::use_random::use_random_id_for;
 #[derive(Debug, Clone, Copy, PartialEq, Eq, Default, Display, AsRefStr)]
 pub enum SelectPosition {
    #[default]
    Below,
    Above,
 }
 mod components {
    use super::*;
    clx! {SelectLabel, span, "px-2 py-1.5 text-sm font-medium data-inset:pl-8", "mb-1"}
    clx! {SelectItem, li, "inline-flex gap-2 items-center w-full rounded-sm px-2 py-1.5 text-sm no-underline transition-colors duration-200 text-popover-foreground hover:bg-accent hover:text-accent-foreground [&_svg:not([class*='size-'])]:size-4"}
 }
 pub use components::*;
 #[component]
 pub fn SelectGroup(
    children: Children,
    #[prop(optional, into)] class: String,
    #[prop(default = "Select options".into(), into)] aria_label: String,
 ) -> impl IntoView {
    let merged_class = tw_merge!("group", class);
    view! {
        <ul data-name="SelectGroup" role="listbox" aria-label=aria_label class=merged_class>
            {children()}
        </ul>
    }
 }
 #[component]
 pub fn SelectValue(#[prop(optional, into)] placeholder: String) -> impl IntoView {
    let select_ctx = expect_context::<SelectContext>();
    view! {
        <span data-name="SelectValue" class="text-sm text-muted-foreground truncate">
            {move || { select_ctx.value_signal.get().unwrap_or_else(|| placeholder.clone()) }}
        </span>
    }
 }
 #[component]
 pub fn SelectOption(
    children: Children,
    #[prop(optional, into)] class: String,
    #[prop(default = false.into(), into)] aria_selected: Signal<bool>,
    #[prop(optional, into)] value: Option<String>,
 ) -> impl IntoView {
    let ctx = expect_context::<SelectContext>();
    let merged_class = tw_merge!(
        "group inline-flex gap-2 items-center w-full rounded-sm px-2 py-1.5 text-sm cursor-pointer no-underline transition-colors duration-200 text-popover-foreground hover:bg-accent hover:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
        class
    );
    let value_for_check = value.clone();
    let is_selected = move || aria_selected.get() || ctx.value_signal.get() == value_for_check;
    view! {
        <li
            data-name="SelectOption"
            class=merged_class
            role="option"
            tabindex="0"
            aria-selected=move || is_selected().to_string()
            data-select-option="true"
            on:click=move |_| {
                let val = value.clone();
                ctx.value_signal.set(val.clone());
                if let Some(on_change) = ctx.on_change {
                    on_change.run(val);
                }
            }
        >
            {children()}
            <Check class="ml-auto opacity-0 size-4 text-muted-foreground group-aria-selected:opacity-100" />
        </li>
    }
 }
 #[derive(Clone)]
 struct SelectContext {
    target_id: String,
    value_signal: RwSignal<Option<String>>,
    on_change: Option<Callback<Option<String>>>,
 }
 #[component]
 pub fn Select(
    children: Children,
    #[prop(optional, into)] class: String,
    #[prop(optional, into)] default_value: Option<String>,
    #[prop(optional)] on_change: Option<Callback<Option<String>>>,
 ) -> impl IntoView {
    let select_target_id = use_random_id_for("select");
    let value_signal = RwSignal::new(default_value);
    let ctx = SelectContext { target_id: select_target_id.clone(), value_signal, on_change };
    let merged_class = tw_merge!("relative w-fit", class);
    view! {
        <Provider value=ctx>
            <div data-name="Select" class=merged_class>
                {children()}
            </div>
        </Provider>
    }
 }
 #[component]
 pub fn SelectTrigger(
    children: Children,
    #[prop(optional, into)] class: String,
    #[prop(optional, into)] id: String,
 ) -> impl IntoView {
    let ctx = expect_context::<SelectContext>();
    let peer_class = if !id.is_empty() { format!("peer/{}", id) } else { String::new() };
    let button_class = tw_merge!(
        "w-full p-2 h-9 inline-flex items-center justify-between text-sm font-medium whitespace-nowrap rounded-md transition-colors focus:outline-none focus:ring-1 focus:ring-ring focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&_svg:not(:last-child)]:mr-2 [&_svg:not(:first-child)]:ml-2 [&_svg:not([class*='size-'])]:size-4 border bg-background border-input hover:bg-accent hover:text-accent-foreground",
        &peer_class,
        class
    );
    let button_id = if !id.is_empty() { id } else { format!("trigger_{}", ctx.target_id) };
    view! {
        <button
            type="button"
            data-name="SelectTrigger"
            class=button_class
            id=button_id
            tabindex="0"
            data-select-trigger=ctx.target_id
        >
            {children()}
            <ChevronDown class="text-muted-foreground" />
        </button>
    }
 }
 #[component]
 pub fn SelectContent(
    children: Children,
    #[prop(optional, into)] class: String,
    #[prop(default = SelectPosition::default())] position: SelectPosition,
    #[prop(optional)] on_close: Option<Callback<()>>,
 ) -> impl IntoView {
    let ctx = expect_context::<SelectContext>();
    let merged_class = tw_merge!(
        "w-[150px] overflow-auto z-50 p-1 rounded-md border bg-card shadow-md h-fit max-h-[300px] absolute top-[calc(100%+4px)] left-0 data-[position=Above]:top-auto data-[position=Above]:bottom-[calc(100%+4px)] transition-all duration-200 data-[state=closed]:opacity-0 data-[state=closed]:scale-95 data-[state=open]:opacity-100 data-[state=open]:scale-100 data-[state=closed]:data-[position=Below]:origin-top data-[state=open]:data-[position=Below]:origin-top data-[state=closed]:data-[position=Above]:origin-bottom data-[state=open]:data-[position=Above]:origin-bottom [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
        class
    );
    let target_id_for_script = ctx.target_id.clone();
    let target_id_for_script_2 = ctx.target_id.clone();
    // Scroll indicator signals
    let (on_scroll, can_scroll_up_signal, can_scroll_down_signal) = use_can_scroll_vertical();
    view! {
        <div
            data-name="SelectContent"
            class=merged_class
            on:selectclose=move |_: web_sys::CustomEvent| {
                if let Some(cb) = on_close {
                    cb.run(());
                }
            }
            id=ctx.target_id
            data-target="target__select"
            data-state="closed"
            data-position=position.to_string()
            style="pointer-events: none;"
            on:scroll=move |ev| on_scroll.run(ev)
        >
            <div
                data-scroll-up="true"
                class=move || {
                    let is_up: bool = can_scroll_up_signal.get();
                    if is_up {
                        "sticky -top-1 z-10 flex items-center justify-center py-1 bg-card"
                    } else {
                        "hidden"
                    }
                }
            >
                <ChevronUp class="size-4 text-muted-foreground" />
            </div>
            {children()}
            <div
                data-scroll-down="true"
                class=move || {
                    let is_down: bool = can_scroll_down_signal.get();
                    if is_down {
                        "sticky -bottom-1 z-10 flex items-center justify-center py-1 bg-card"
                    } else {
                        "hidden"
                    }
                }
            >
                <ChevronDown class="size-4 text-muted-foreground" />
            </div>
        </div>
        <script>
            {format!(
                r#"
                (function() {{
                    const setupSelect = () => {{
                        const select = document.querySelector('#{}');
                        const trigger = document.querySelector('[data-select-trigger="{}"]');
                        if (!select || !trigger) {{
                            setTimeout(setupSelect, 50);
                            return;
                        }}
                        if (select.hasAttribute('data-initialized')) {{
                            return;
                        }}
                        select.setAttribute('data-initialized', 'true');
                        let isOpen = false;
                        const updatePosition = () => {{
                            const triggerRect = trigger.getBoundingClientRect();
                            const viewportHeight = window.innerHeight;
                            const spaceBelow = viewportHeight - triggerRect.bottom;
                            const spaceAbove = triggerRect.top;
                            if (spaceBelow < 200 && spaceAbove > spaceBelow) {{
                                select.setAttribute('data-position', 'Above');
                            }} else {{
                                select.setAttribute('data-position', 'Below');
                            }}
                            select.style.minWidth = `${{triggerRect.width}}px`;
                        }};
                        const openSelect = () => {{
                            isOpen = true;
                            if (window.ScrollLock) window.ScrollLock.lock();
                            updatePosition();
                            select.setAttribute('data-state', 'open');
                            select.style.pointerEvents = 'auto';
                            select.dispatchEvent(new Event('scroll'));
                            setTimeout(() => {{
                                document.addEventListener('click', handleClickOutside);
                            }}, 0);
                        }};
                        const closeSelect = () => {{
                            isOpen = false;
                            select.setAttribute('data-state', 'closed');
                            select.style.pointerEvents = 'none';
                            document.removeEventListener('click', handleClickOutside);
                            select.dispatchEvent(new CustomEvent('selectclose', {{ bubbles: false }}));
                            if (window.ScrollLock) window.ScrollLock.unlock(200);
                        }};
                        const handleClickOutside = (e) => {{
                            if (!select.contains(e.target) && !trigger.contains(e.target)) {{
                                closeSelect();
                            }}
                        }};
                        trigger.addEventListener('click', (e) => {{
                            e.stopPropagation();
                            if (isOpen) closeSelect(); else openSelect();
                        }});
                        const options = select.querySelectorAll('[data-select-option]');
                        options.forEach(option => {{
                            option.addEventListener('click', () => closeSelect());
                        }});
                        document.addEventListener('keydown', (e) => {{
                            if (e.key === 'Escape' && isOpen) {{
                                e.preventDefault();
                                closeSelect();
                            }}
                        }});
                    }};
                    if (document.readyState === 'loading') {{
                        document.addEventListener('DOMContentLoaded', setupSelect);
                    }} else {{
                        setupSelect();
                    }}
                }})();
                "#,
                target_id_for_script,
                target_id_for_script_2,
            )}
        </script>
    }.into_any()
 }
--- a/frontend/src/components/ui/separator.rs
+++ b/frontend/src/components/ui/separator.rs
@@ -1,35 +0,0 @@
 use leptos::prelude::*;
 use tw_merge::*;
 #[component]
 pub fn Separator(
    #[prop(into, optional)] orientation: Signal<SeparatorOrientation>,
    #[prop(into, optional)] class: String,
    // children: Children,
 ) -> impl IntoView {
    let merged_class = Memo::new(move |_| {
        let orientation = orientation.get();
        let separator = SeparatorClass { orientation };
        separator.with_class(class.clone())
    });
    view! { <div class=merged_class role="separator" /> }
 }
 /* ========================================================== */
 /*                       🧬 STRUCT 🧬                         */
 /* ========================================================== */
 #[derive(TwClass, Default)]
 #[tw(class = "shrink-0 bg-border")]
 pub struct SeparatorClass {
    orientation: SeparatorOrientation,
 }
 #[derive(TwVariant)]
 pub enum SeparatorOrientation {
    #[tw(default, class = "w-full h-[1px]")]
    Default,
    #[tw(class = "h-full w-[1px]")]
    Vertical,
 }
--- a/frontend/src/components/ui/svg_icon.rs
+++ b/frontend/src/components/ui/svg_icon.rs
@@ -1,25 +0,0 @@
 use leptos::prelude::*;
 use tw_merge::tw_merge;
 #[component]
 pub fn SvgIcon(
    children: Children,
    #[prop(optional, into)] class: String,
 ) -> impl IntoView {
    let class = tw_merge!("size-4", class);
    view! {
        <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class=class
        >
            {children()}
        </svg>
    }
 }
--- a/frontend/src/components/ui/table.rs
+++ b/frontend/src/components/ui/table.rs
@@ -1,56 +0,0 @@
 use leptos::prelude::*;
 use tw_merge::tw_merge;
 #[component]
 pub fn TableWrapper(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
    let class = tw_merge!("overflow-hidden rounded-md border w-full", class);
    view! { <div class=class>{children()}</div> }
 }
 #[component]
 pub fn Table(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
    let class = tw_merge!("w-full text-sm border-collapse", class);
    view! { <table class=class>{children()}</table> }
 }
 #[component]
 pub fn TableCaption(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
    let class = tw_merge!("mt-4 text-sm text-muted-foreground", class);
    view! { <caption class=class>{children()}</caption> }
 }
 #[component]
 pub fn TableHeader(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
    let class = tw_merge!("[&_tr]:border-b bg-muted/50", class);
    view! { <thead class=class>{children()}</thead> }
 }
 #[component]
 pub fn TableRow(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
    let class = tw_merge!("border-b transition-colors data-[state=selected]:bg-muted hover:bg-muted/50", class);
    view! { <tr class=class>{children()}</tr> }
 }
 #[component]
 pub fn TableHead(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
    let class = tw_merge!("h-10 px-4 text-left align-middle font-medium text-muted-foreground whitespace-nowrap", class);
    view! { <th class=class>{children()}</th> }
 }
 #[component]
 pub fn TableBody(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
    let class = tw_merge!("[&_tr:last-child]:border-0", class);
    view! { <tbody class=class>{children()}</tbody> }
 }
 #[component]
 pub fn TableCell(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
    let class = tw_merge!("p-2 px-4 align-middle", class);
    view! { <td class=class>{children()}</td> }
 }
 #[component]
 pub fn TableFooter(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
    let class = tw_merge!("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", class);
    view! { <tfoot class=class>{children()}</tfoot> }
 }
--- a/frontend/src/components/ui/theme_toggle.rs
+++ b/frontend/src/components/ui/theme_toggle.rs
@@ -1,76 +0,0 @@
 use crate::components::ui::svg_icon::SvgIcon;
 use leptos::prelude::*;
 use crate::components::hooks::use_theme_mode::use_theme_mode;
 #[component]
 pub fn ThemeToggle() -> impl IntoView {
    let theme_mode = use_theme_mode();
    view! {
        <style>
            {"
            .theme__toggle_transition {
            -webkit-tap-highlight-color: transparent;
            svg path {
            transform-origin: center;
            transition: all .6s ease;
            transform: translate3d(0,0,0);
            backface-visibility: hidden;
            &.sun {
            transform: scale(.4) rotate(60deg);
            opacity: 0;
            }
            &.moon {
            opacity: 1;
            }
            }
            &.switch {
            svg path {
            &.sun {
            transform: scale(1) rotate(0);
            opacity: 1;
            }
            &.moon {
            transform: scale(.4) rotate(-60deg);
            opacity: 0;
            }
            }
            }
            }
            "}
        </style>
        <button
            type="button"
            aria-label="Toggle theme"
            class=move || {
                let base_class = "theme__toggle_transition";
                if theme_mode.get() { format!("{base_class} switch") } else { base_class.to_string() }
            }
            on:click=move |_| theme_mode.toggle()
        >
            <SvgIcon class="size-4">
                <path
                    d="M12 1.75V3.25M12 20.75V22.25M1.75 12H3.25M20.75 12H22.25M4.75216 4.75216L5.81282 5.81282M18.1872 18.1872L19.2478 19.2478M4.75216 19.2478L5.81282 18.1872M18.1872 5.81282L19.2478 4.75216M16.25 12C16.25 14.3472 14.3472 16.25 12 16.25C9.65279 16.25 7.75 14.3472 7.75 12C7.75 9.65279 9.65279 7.75 12 7.75C14.3472 7.75 16.25 9.65279 16.25 12Z"
                    stroke="currentColor"
                    stroke-width="1.5"
                    stroke-linecap="round"
                    class="sun text-neutral-300"
                />
                <path
                    d="M2.75 12C2.75 17.1086 6.89137 21.25 12 21.25C16.7154 21.25 20.6068 17.7216 21.1778 13.161C20.1198 13.8498 18.8566 14.25 17.5 14.25C13.7721 14.25 10.75 11.2279 10.75 7.5C10.75 5.66012 11.4861 3.99217 12.6799 2.77461C12.4554 2.7583 12.2287 2.75 12 2.75C6.89137 2.75 2.75 6.89137 2.75 12Z"
                    stroke="currentColor"
                    stroke-width="1.5"
                    stroke-linejoin="round"
                    class="moon text-neutral-700"
                />
            </SvgIcon>
        </button>
    }
 }
--- a/frontend/src/components/ui/toast.rs
+++ b/frontend/src/components/ui/toast.rs
@@ -2,7 +2,6 @@ use leptos::prelude::*;
 use tw_merge::*;
 #[derive(Clone, Copy, PartialEq, Eq, Default, strum::Display, Debug)]
 #[allow(dead_code)]
 pub enum ToastType {
    #[default]
    Default,
@@ -14,7 +13,6 @@ pub enum ToastType {
 }
 #[derive(Clone, Copy, PartialEq, Eq, Default, strum::Display, Debug)]
 #[allow(dead_code)]
 pub enum SonnerPosition {
    TopLeft,
    TopCenter,
@@ -25,6 +23,13 @@ pub enum SonnerPosition {
    BottomLeft,
 }
 #[derive(Clone, Copy, PartialEq, Eq, Default, strum::Display, Debug)]
 pub enum SonnerDirection {
    TopDown,
    #[default]
    BottomUp,
 }
 #[derive(Clone, Debug, PartialEq)]
 pub struct ToastData {
    pub id: u64,
@@ -41,163 +46,160 @@ pub struct ToasterStore {
 #[component]
 pub fn SonnerTrigger(
-    toast: ToastData,
+    #[prop(into, optional)] class: String,
-    index: usize,
+    #[prop(optional, default = ToastType::default())] variant: ToastType,
-    total: usize,
+    #[prop(into)] title: String,
-    position: SonnerPosition,
+    description: Option<String>,
-    is_expanded: Signal<bool>,
+    #[prop(into, optional)] position: String,
-    #[prop(optional)] on_dismiss: Option<Callback<()>>,
+    on_dismiss: Option<Callback<()>>,
 ) -> impl IntoView {
-    let variant_classes = match toast.variant {
+    let variant_classes = match variant {
-        ToastType::Default => "bg-background text-foreground border-border",
+        ToastType::Default => "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-        ToastType::Success => "bg-background text-foreground border-border [&_.icon]:text-green-500",
+        ToastType::Success => "bg-green-500 text-white hover:bg-green-600",
-        ToastType::Error => "bg-background text-foreground border-border [&_.icon]:text-destructive",
+        ToastType::Error => "bg-red-500 text-white shadow-xs hover:bg-red-600",
-        ToastType::Warning => "bg-background text-foreground border-border [&_.icon]:text-yellow-500",
+        ToastType::Warning => "bg-yellow-500 text-white hover:bg-yellow-600",
-        ToastType::Info => "bg-background text-foreground border-border [&_.icon]:text-blue-500",
+        ToastType::Info => "bg-blue-500 text-white shadow-xs hover:bg-blue-600",
-        ToastType::Loading => "bg-background text-foreground border-border",
+        ToastType::Loading => "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
    };
-    let bar_color = match toast.variant {
+    let merged_class = tw_merge!(
-        ToastType::Success => "bg-green-500",
+        "inline-flex flex-col items-start justify-center gap-1 min-w-[300px] rounded-md text-sm font-medium transition-all shadow-lg p-4 cursor-pointer pointer-events-auto border border-border/50",
-        ToastType::Error => "bg-destructive",
+        variant_classes,
-        ToastType::Warning => "bg-yellow-500",
+        class
-        ToastType::Info => "bg-blue-500",
+    );
        _ => "bg-primary",
    };
-    // Stacking & Expansion Logic
+    // Only set position attribute if not empty
-    let style = move || {
+    let position_attr = if position.is_empty() { None } else { Some(position) };
        let is_bottom = position.to_string().contains("Bottom");
        let y_direction = if is_bottom { -1.0 } else { 1.0 };
        let (translate_y, scale, opacity) = if is_expanded.get() {
            // Expanded state: Full list layout
            let y = index as f64 * 70.0; // height + gap
            (y * y_direction, 1.0, 1.0)
        } else {
            // Stacked state: Sonner look
            let y = index as f64 * 10.0; 
            let s = 1.0 - (index as f64 * 0.05);
            let o = if index > 2 { 0.0 } else { 1.0 - (index as f64 * 0.2) };
            (y * y_direction, s, o)
        };
-        format!(
+    // Clone title for data attribute usage, original moved into view
-            "z-index: {}; transform: translateY({}px) scale({}); opacity: {};",
+    let title_clone = title.clone();
            total - index,
            translate_y,
            scale,
            opacity
        )
    };
    let icon = match toast.variant {
        ToastType::Success => Some(view! { <span class="icon font-bold">"✓"</span> }.into_any()),
        ToastType::Error => Some(view! { <span class="icon font-bold">"✕"</span> }.into_any()),
        ToastType::Warning => Some(view! { <span class="icon font-bold">"⚠"</span> }.into_any()),
        ToastType::Info => Some(view! { <span class="icon font-bold">"ℹ"</span> }.into_any()),
        _ => None,
    };
    view! {
        <div
-            class=tw_merge!(
+            class=merged_class
-                "absolute transition-all duration-300 ease-in-out cursor-pointer pointer-events-auto overflow-hidden",
+            data-name="SonnerTrigger"
-                "flex items-center gap-3 w-full max-w-[calc(100vw-2rem)] sm:max-w-[380px] p-4 rounded-lg border shadow-lg bg-card",
+            data-variant=variant.to_string()
-                if position.to_string().contains("Bottom") { "bottom-0" } else { "top-0" },
+            data-toast-title=title_clone
-                variant_classes
+            data-toast-position=position_attr
            )
            style=style
            on:click=move |_| {
                if let Some(cb) = on_dismiss {
                    cb.run(());
                }
            }
        >
-            {icon}
+            <div class="font-semibold">{title}</div>
-            <div class="flex flex-col gap-0.5 overflow-hidden flex-1">
+            {move || description.as_ref().map(|d| view! { <div class="text-xs opacity-90">{d.clone()}</div> })}
                <div class="text-sm font-semibold truncate leading-tight">{toast.title}</div>
                {move || toast.description.as_ref().map(|d| view! { <div class="text-xs opacity-70 truncate">{d.clone()}</div> })}
            </div>
            // Progress Bar
            <div 
                class=tw_merge!("absolute bottom-0 left-0 h-1 w-full opacity-20", bar_color)
                style=format!(
                    "animation: sonner-progress {}ms linear forwards; transform-origin: left;",
                    toast.duration
                )
            />
        </div>
-    }.into_any()
+    }
 }
 #[component]
 pub fn SonnerContainer(
    children: Children,
    #[prop(into, optional)] class: String,
    #[prop(optional, default = SonnerPosition::default())] position: SonnerPosition,
 ) -> impl IntoView {
    let merged_class = tw_merge!("toast__container fixed z-[9999] flex flex-col gap-2 p-4 outline-none pointer-events-none", class);
    view! {
        <div class=merged_class data-position=position.to_string()>
            {children()}
        </div>
    }
 }
 #[component]
 pub fn SonnerList(
    children: Children,
    #[prop(into, optional)] class: String,
    #[prop(optional, default = SonnerPosition::default())] position: SonnerPosition,
    #[prop(optional, default = SonnerDirection::default())] direction: SonnerDirection,
    #[prop(into, default = "false".to_string())] expanded: String,
    #[prop(into, optional)] style: String,
 ) -> impl IntoView {
    let merged_class = tw_merge!(
        "contents",
        class
    );
    view! {
        <div
            class=merged_class
            data-name="SonnerList"
            data-sonner-toaster="true"
            data-sonner-theme="light"
            data-position=position.to_string()
            data-expanded=expanded
            data-direction=direction.to_string()
            style=style
        >
            {children()}
        </div>
    }
 }
 // Thread local storage for global access without Context
 thread_local! {
    static TOASTS: std::cell::RefCell<Option<RwSignal<Vec<ToastData>>>> = std::cell::RefCell::new(None);
 }
 pub fn provide_toaster() {
    let toasts = RwSignal::new(Vec::<ToastData>::new());
    // Set global thread_local
    TOASTS.with(|t| *t.borrow_mut() = Some(toasts));
    // Also provide context for components
    provide_context(ToasterStore { toasts });
 }
 #[component]
 pub fn Toaster(#[prop(default = SonnerPosition::default())] position: SonnerPosition) -> impl IntoView {
-    let store = use_context::<ToasterStore>().expect("Toaster context not found");
+    // Global store'u al
    let store = use_context::<ToasterStore>().expect("Toaster context not found. Call provide_toaster() in App root.");
    let toasts = store.toasts;
-    let is_hovered = RwSignal::new(false);
+
    // Auto-derive direction from position
    let direction = match position {
        SonnerPosition::TopLeft | SonnerPosition::TopCenter | SonnerPosition::TopRight => SonnerDirection::TopDown,
        _ => SonnerDirection::BottomUp,
    };
    let container_class = match position {
-        SonnerPosition::TopLeft => "left-6 top-6 items-start",
+        SonnerPosition::TopLeft => "left-0 top-0 items-start",
-        SonnerPosition::TopRight => "right-6 top-6 items-end",
+        SonnerPosition::TopRight => "right-0 top-0 items-end",
-        SonnerPosition::TopCenter => "left-1/2 -translate-x-1/2 top-6 items-center",
+        SonnerPosition::TopCenter => "left-1/2 -translate-x-1/2 top-0 items-center",
-        SonnerPosition::BottomCenter => "left-1/2 -translate-x-1/2 bottom-6 items-center",
+        SonnerPosition::BottomCenter => "left-1/2 -translate-x-1/2 bottom-0 items-center",
-        SonnerPosition::BottomLeft => "left-6 bottom-6 items-start",
+        SonnerPosition::BottomLeft => "left-0 bottom-0 items-start",
-        SonnerPosition::BottomRight => "right-6 bottom-6 items-end",
+        SonnerPosition::BottomRight => "right-0 bottom-0 items-end",
    };
    view! {
-        <style>
+        <SonnerContainer class=container_class position=position>
-            "@keyframes sonner-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }"
+            <SonnerList position=position direction=direction>
-        </style>
+                <For
-        <div 
+                    each=move || toasts.get()
-            class=tw_merge!(
+                    key=|toast| toast.id
-                "fixed z-[100] flex flex-col pointer-events-none min-h-[100px] w-full sm:w-[400px]",
+                    children=move |toast| {
-                container_class,
+                        let id = toast.id;
-                "pb-[env(safe-area-inset-bottom)] pt-[env(safe-area-inset-top)] px-4 sm:px-0"
+                        view! {
-            )
+                            <SonnerTrigger
-            on:mouseenter=move |_| is_hovered.set(true)
+                                variant=toast.variant
-            on:mouseleave=move |_| is_hovered.set(false)
+                                title=toast.title
-        >
+                                description=toast.description
-            <For
+                                on_dismiss=Some(Callback::new(move |_| {
-                each=move || {
+                                    toasts.update(|vec| vec.retain(|t| t.id != id));
-                    let list = toasts.get();
+                                }))
-                    list.into_iter().rev().enumerate().collect::<Vec<_>>()
+                            />
-                }
+                        }
                key=|(_, toast)| toast.id
                children=move |(index, toast)| {
                    let id = toast.id;
                    let total = toasts.with(|t| t.len());
                    view! {
                        <SonnerTrigger
                            toast=toast
                            index=index
                            total=total
                            position=position
                            is_expanded=is_hovered.into()
                            on_dismiss=Callback::new(move |_| {
                                toasts.update(|vec| vec.retain(|t| t.id != id));
                            })
                        />
                    }
-                }
+                />
-            />
+            </SonnerList>
-        </div>
+        </SonnerContainer>
-    }.into_any()
+    }
 }
 // Global Helper Functions
 pub fn toast(title: impl Into<String>, variant: ToastType) {
    let signal_opt = TOASTS.with(|t| *t.borrow());
@@ -211,26 +213,20 @@ pub fn toast(title: impl Into<String>, variant: ToastType) {
            duration: 4000,
        };
-        toasts.update(|t| {
+        toasts.update(|t| t.push(new_toast.clone()));
            t.push(new_toast.clone());
            if t.len() > 5 {
                t.remove(0);
            }
        });
        // Auto remove after duration
        let duration = new_toast.duration;
        leptos::task::spawn_local(async move {
            gloo_timers::future::TimeoutFuture::new(duration as u32).await;
            toasts.update(|vec| vec.retain(|t| t.id != id));
        });
    } else {
        gloo_console::warn!("ToasterStore not found (global static). Make sure provide_toaster() is called.");
    }
 }
 #[allow(dead_code)]
 pub fn toast_success(title: impl Into<String>) { toast(title, ToastType::Success); }
 #[allow(dead_code)]
 pub fn toast_error(title: impl Into<String>) { toast(title, ToastType::Error); }
 #[allow(dead_code)]
 pub fn toast_warning(title: impl Into<String>) { toast(title, ToastType::Warning); }
 #[allow(dead_code)]
 pub fn toast_info(title: impl Into<String>) { toast(title, ToastType::Info); }
--- a/shared/Cargo.toml
+++ b/shared/Cargo.toml
@@ -10,6 +10,7 @@ struct-patch = "0.5"
 rmp-serde = "1.3"
 bytes = "1"
 http = "1"
 tracing = "0.1"
 # Leptos 0.8.7
 leptos = { version = "0.8.15", features = ["nightly", "msgpack"] }
--- a/shared/src/db.rs
+++ b/shared/src/db.rs
@@ -28,8 +28,17 @@ impl Db {
    }
    async fn run_migrations(&self) -> Result<()> {
-        sqlx::migrate!("./migrations").run(&self.pool).await?;
+        tracing::info!("Starting database migrations...");
-        Ok(())
+        match sqlx::migrate!("./migrations").run(&self.pool).await {
            Ok(_) => {
                tracing::info!("Database migrations completed successfully.");
                Ok(())
            }
            Err(e) => {
                tracing::error!("Database migration failed: {}", e);
                Err(e.into())
            }
        }
    }
    // --- User Operations ---
--- a/shared/src/server_fns/auth.rs
+++ b/shared/src/server_fns/auth.rs
@@ -20,42 +20,64 @@ pub struct SetupStatus {
    pub completed: bool,
 }
-#[server(GetSetupStatus, "/api/server_fns", input = MsgPack, output = MsgPack)]
+#[server(GetSetupStatus, "/api/server_fns/GetSetupStatus", input = MsgPack, output = MsgPack)]
 pub async fn get_setup_status() -> Result<SetupStatus, ServerFnError> {
    use crate::DbContext;
-    let db_context = use_context::<DbContext>().ok_or_else(|| ServerFnError::new("DB Context missing"))?;
+    tracing::info!("Checking setup status...");
    let db_context = use_context::<DbContext>().ok_or_else(|| {
        tracing::error!("DB Context missing in GetSetupStatus");
        ServerFnError::new("DB Context missing")
    })?;
    let has_users = db_context.db.has_users().await
-        .map_err(|e| ServerFnError::new(format!("DB error: {}", e)))?;
+        .map_err(|e| {
            tracing::error!("DB error in GetSetupStatus: {}", e);
            ServerFnError::new(format!("DB error: {}", e))
        })?;
    tracing::info!("Setup status: completed={}", has_users);
    Ok(SetupStatus {
        completed: has_users,
    })
 }
-#[server(Setup, "/api/server_fns", input = MsgPack, output = MsgPack)]
+#[server(Setup, "/api/server_fns/Setup", input = MsgPack, output = MsgPack)]
 pub async fn setup(username: String, password: String) -> Result<(), ServerFnError> {
    use crate::DbContext;
-    let db_context = use_context::<DbContext>().ok_or_else(|| ServerFnError::new("DB Context missing"))?;
+    tracing::info!("Attempting setup for user: {}", username);
    let db_context = use_context::<DbContext>().ok_or_else(|| {
        tracing::error!("DB Context missing in Setup");
        ServerFnError::new("DB Context missing")
    })?;
    // Check if setup is already done
    let has_users = db_context.db.has_users().await.unwrap_or(false);
    if has_users {
        tracing::warn!("Setup attempt blocked: Setup already completed");
        return Err(ServerFnError::new("Setup already completed"));
    }
    // Hash password (low cost for MIPS)
    let password_hash = bcrypt::hash(&password, 6)
-        .map_err(|_| ServerFnError::new("Hashing error"))?;
+        .map_err(|e| {
            tracing::error!("Hashing error: {}", e);
            ServerFnError::new("Hashing error")
        })?;
    db_context.db.create_user(&username, &password_hash).await
-        .map_err(|e| ServerFnError::new(format!("DB error: {}", e)))?;
+        .map_err(|e| {
            tracing::error!("Failed to create user: {}", e);
            ServerFnError::new(format!("DB error: {}", e))
        })?;
    tracing::info!("Setup completed successfully for user: {}", username);
    Ok(())
 }
-#[server(Login, "/api/server_fns", input = MsgPack, output = MsgPack)]
+#[server(Login, "/api/server_fns/Login", input = MsgPack, output = MsgPack)]
 pub async fn login(username: String, password: String) -> Result<UserResponse, ServerFnError> {
    use crate::DbContext;
    use leptos_axum::ResponseOptions;
@@ -111,7 +133,7 @@ pub async fn login(username: String, password: String) -> Result<UserResponse, S
    }
 }
-#[server(Logout, "/api/server_fns", input = MsgPack, output = MsgPack)]
+#[server(Logout, "/api/server_fns/Logout", input = MsgPack, output = MsgPack)]
 pub async fn logout() -> Result<(), ServerFnError> {
    use leptos_axum::ResponseOptions;
    use cookie::{Cookie, SameSite};
@@ -132,7 +154,7 @@ pub async fn logout() -> Result<(), ServerFnError> {
    Ok(())
 }
-#[server(GetUser, "/api/server_fns", input = MsgPack, output = MsgPack)]
+#[server(GetUser, "/api/server_fns/GetUser", input = MsgPack, output = MsgPack)]
 pub async fn get_user() -> Result<Option<UserResponse>, ServerFnError> {
    use axum::http::HeaderMap;
    use leptos_axum::extract;
--- a/vibetorrent.db
+++ b/vibetorrent.db
--- a/vibetorrent.db-shm
+++ b/vibetorrent.db-shm
--- a/vibetorrent.db-wal
+++ b/vibetorrent.db-wal
Author	SHA1	Message	Date
spinline	a877e0c393	chore: remove db files from git and update gitignore All checks were successful Build MIPS Binary / build (push) Successful in 5m13s Details	2026-02-11 21:54:15 +03:00
spinline	fd65df2962	fix(setup): add logging and error details for setup debugging Some checks failed Build MIPS Binary / build (push) Has been cancelled Details	2026-02-11 21:53:53 +03:00