chore: final cleanup of all compiler warnings and unused code across the project

.gitea/workflows/build-mips.yml

@@ -22,12 +22,32 @@ jobs:
         git fetch --depth=1 origin ${{ gitea.sha }}
         git checkout FETCH_HEAD
 
+    - name: Cache Cargo
+      uses: actions/cache@v3
+      with:
+        path: |
+          ~/.cargo/bin/
+          ~/.cargo/registry/index/
+          ~/.cargo/registry/cache/
+          ~/.cargo/git/db/
+          target/
+        key: ${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}
+        restore-keys: |
+          ${{ runner.os }}-cargo-
+
+    - name: Cache Node Modules
+      uses: actions/cache@v3
+      with:
+        path: frontend/node_modules
+        key: ${{ runner.os }}-node-${{ hashFiles('frontend/package-lock.json') }}
+        restore-keys: |
+          ${{ runner.os }}-node-
+
     - name: Build Frontend
       run: |
         cd frontend
         npm install
         npx @tailwindcss/cli -i input.css -o public/tailwind.css --minify --content './src/**/*.rs'
-        # Trunk'ın optimizasyonunu kapalı (0) tutuyoruz çünkü Cargo.toml'daki opt-level='z' zaten o işi yapıyor.
         trunk build --release
 
     - name: Build Backend (MIPS)

Cargo.lock

@@ -1259,6 +1259,7 @@ dependencies = [
  "gloo-console",
  "gloo-net",
  "gloo-timers",
+ "icons",
  "js-sys",
  "leptos",
  "leptos-use",
@@ -1271,7 +1272,7 @@ dependencies = [
  "serde_json",
  "shared",
  "struct-patch",
- "strum",
+ "strum 0.26.3",
  "tailwind_fuse",
  "thiserror 2.0.18",
  "tw_merge",
@@ -1864,6 +1865,17 @@ dependencies = [
  "cc",
 ]
 
+[[package]]
+name = "icons"
+version = "0.18.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "75da3d473e24e0b541bf28cf31e67b262c379a4cbc2149f4865b7d99406711dc"
+dependencies = [
+ "leptos",
+ "strum 0.27.2",
+ "tw_merge",
+]
+
 [[package]]
 name = "icu_collections"
 version = "2.1.1"
@@ -4137,7 +4149,16 @@ version = "0.26.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8fec0f0aef304996cf250b31b5a10dee7980c85da9d759361292b8bca5a18f06"
 dependencies = [
- "strum_macros",
+ "strum_macros 0.26.4",
+]
+
+[[package]]
+name = "strum"
+version = "0.27.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "af23d6f6c1a224baef9d3f61e287d2761385a5b88fdab4eb4c6f11aeb54c4bcf"
+dependencies = [
+ "strum_macros 0.27.2",
 ]
 
 [[package]]
@@ -4153,6 +4174,18 @@ dependencies = [
  "syn 2.0.114",
 ]
 
+[[package]]
+name = "strum_macros"
+version = "0.27.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7695ce3845ea4b33927c055a39dc438a45b059f7c1b3d91d38d10355fb8cbca7"
+dependencies = [
+ "heck",
+ "proc-macro2",
+ "quote",
+ "syn 2.0.114",
+]
+
 [[package]]
 name = "subtle"
 version = "2.6.1"

backend/src/handlers/mod.rs

@@ -7,6 +7,7 @@ use rust_embed::RustEmbed;
 
 pub mod auth;
 pub mod setup;
+pub mod notifications;
 
 #[derive(RustEmbed)]
 #[folder = "../frontend/dist"]

backend/src/handlers/notifications.rs

@@ -0,0 +1,54 @@
+use axum::{
+    extract::{State, Query},
+    http::StatusCode,
+};
+use serde::Deserialize;
+use shared::{AppEvent, SystemNotification, NotificationLevel};
+use crate::AppState;
+
+#[derive(Deserialize)]
+pub struct TorrentFinishedQuery {
+    pub name: String,
+    pub hash: String,
+}
+
+pub async fn torrent_finished_handler(
+    State(state): State<AppState>,
+    Query(params): Query<TorrentFinishedQuery>,
+) -> StatusCode {
+    tracing::info!("WEBHOOK: Received notification from rTorrent. Name: {:?}, Hash: {:?}", params.name, params.hash);
+
+    let torrent_name = if params.name.is_empty() || params.name == "$d.name=" {
+        "Bilinmeyen Torrent".to_string()
+    } else {
+        params.name.clone()
+    };
+
+    let message = format!("Torrent tamamlandı: {}", torrent_name);
+
+    // 1. Send to active SSE clients (for Toast)
+    let notification = SystemNotification {
+        level: NotificationLevel::Success,
+        message: message.clone(),
+    };
+    let _ = state.event_bus.send(AppEvent::Notification(notification));
+
+    // 2. Send Web Push Notification (for Background)
+    #[cfg(feature = "push-notifications")]
+    {
+        let push_store = state.push_store.clone();
+        let title = "Torrent Tamamlandı".to_string();
+        let body = message;
+        let name_for_log = torrent_name.clone();
+        
+        tokio::spawn(async move {
+            tracing::info!("Attempting to send Web Push notification for torrent: {}", name_for_log);
+            match crate::push::send_push_notification(&push_store, &title, &body).await {
+                Ok(_) => tracing::info!("Web Push notification task completed for: {}", name_for_log),
+                Err(e) => tracing::error!("Failed to send Web Push notification for {}: {:?}", name_for_log, e),
+            }
+        });
+    }
+
+    StatusCode::OK
+}

backend/src/main.rs

@@ -60,6 +60,7 @@ async fn auth_middleware(
        || 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("/api/internal/")
        || path.starts_with("/swagger-ui")
        || path.starts_with("/api-docs")
        || !path.starts_with("/api/") 
@@ -313,7 +314,7 @@ async fn main() {
             let loop_interval = if active_clients > 0 {
                 Duration::from_secs(1)
             } else {
-                Duration::from_secs(30)
+                Duration::from_secs(60)
             };
 
             // 1. Fetch Torrents
@@ -434,6 +435,7 @@ async fn main() {
     let db_for_ctx = db.clone();
     let app = app
         .route("/api/events", get(sse::sse_handler))
+        .route("/api/internal/torrent-finished", post(handlers::notifications::torrent_finished_handler))
         .route("/api/server_fns/{*fn_name}", post({
             let scgi_path = scgi_path_for_ctx.clone();
             let db = db_for_ctx.clone();

backend/src/push.rs

@@ -191,11 +191,21 @@ pub async fn send_push_notification(
                                                 tracing::debug!("Push notification sent to: {}", subscription.endpoint);
                                             }
                                             Err(e) => {
-                                                tracing::error!("Failed to send push notification to {}: {}", subscription.endpoint, e);
+                                                let err_msg = format!("{:?}", e);
+                                                tracing::error!("Delivery failed for {}: {}", subscription.endpoint, err_msg);
+                                                // Always remove on delivery failure (Gone, Unauthorized, etc.)
+                                                tracing::info!("Removing problematic subscription after delivery failure: {}", subscription.endpoint);
+                                                let _ = store.remove_subscription(&subscription.endpoint).await;
                                             }
                                         }
                                     }
-                                    Err(e) => tracing::error!("Failed to build push message: {}", e),
+                                    Err(e) => {
+                                        let err_msg = format!("{:?}", e);
+                                        tracing::error!("Encryption/Build failed for {}: {}", subscription.endpoint, err_msg);
+                                        // Always remove on encryption failure
+                                        tracing::info!("Removing problematic subscription after encryption failure: {}", subscription.endpoint);
+                                        let _ = store.remove_subscription(&subscription.endpoint).await;
+                                    }
                                 }
                             }
                             Err(e) => tracing::error!("Failed to build VAPID signature: {}", e),

frontend/index.html

@@ -20,11 +20,12 @@
     <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
 
     <!-- Trunk Assets -->
-    <link data-trunk rel="rust" href="Cargo.toml" data-wasm-opt="0" />
+    <script data-trunk rel="rust" src="Cargo.toml" data-wasm-opt="0" data-preload="false"></script>
     <link data-trunk rel="css" href="public/tailwind.css" />
     <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" />
     <link data-trunk rel="copy-file" href="sw.js" />
     <script>
         (function () {

frontend/input.css

@@ -1,177 +1,92 @@
 @import "tailwindcss";
-@config "./tailwind.config.js";
-@source "../src/**/*.rs";
-@source "/Users/bilal/.cargo/registry/src/index.crates.io-1949cf8c6b5b557f/leptos-shadcn-*/src/**/*.rs";
+@import "tw-animate-css";
 
-@theme {
-    /* Shadcn Colors */
-    --color-border: hsl(var(--border));
-    --color-input: hsl(var(--input));
-    --color-ring: hsl(var(--ring));
-    --color-background: hsl(var(--background));
-    --color-foreground: hsl(var(--foreground));
 
-    --color-primary: hsl(var(--primary));
-    --color-primary-foreground: hsl(var(--primary-foreground));
+:root {
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+  --primary: 240 5.9% 10%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+  --ring: 240 5.9% 10%;
+  --radius: 0.5rem;
+}
 
-    --color-secondary: hsl(var(--secondary));
-    --color-secondary-foreground: hsl(var(--secondary-foreground));
+.dark {
+  --background: 240 10% 3.9%;
+  --foreground: 0 0% 98%;
+  --card: 240 10% 3.9%;
+  --card-foreground: 0 0% 98%;
+  --popover: 240 10% 3.9%;
+  --popover-foreground: 0 0% 98%;
+  --primary: 0 0% 98%;
+  --primary-foreground: 240 5.9% 10%;
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+  --muted: 240 3.7% 15.9%;
+  --muted-foreground: 240 5% 64.9%;
+  --accent: 240 3.7% 15.9%;
+  --accent-foreground: 0 0% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+  --ring: 240 4.9% 83.9%;
+}
 
-    --color-destructive: hsl(var(--destructive));
-    --color-destructive-foreground: hsl(var(--destructive-foreground));
-
-    --color-muted: hsl(var(--muted));
-    --color-muted-foreground: hsl(var(--muted-foreground));
-
-    --color-accent: hsl(var(--accent));
-    --color-accent-foreground: hsl(var(--accent-foreground));
-
-    --color-popover: hsl(var(--popover));
-    --color-popover-foreground: hsl(var(--popover-foreground));
-
-    --color-card: hsl(var(--card));
-    --color-card-foreground: hsl(var(--card-foreground));
-
-    --radius-lg: var(--radius);
-    --radius-md: calc(var(--radius) - 2px);
-    --radius-sm: calc(var(--radius) - 4px);
-
-    --animate-accordion-down: accordion-down 0.2s ease-out;
-    --animate-accordion-up: accordion-up 0.2s ease-out;
-
-    @keyframes accordion-down {
-        from {
-            height: 0;
-        }
-
-        to {
-            height: var(--radix-accordion-content-height);
-        }
-    }
-
-    @keyframes accordion-up {
-        from {
-            height: var(--radix-accordion-content-height);
-        }
-
-        to {
-            height: 0;
-        }
-    }
+@theme inline {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
 }
 
 @layer base {
-    :root {
-        --background: 0 0% 100%;
-        --foreground: 222.2 84% 4.9%;
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
 
-        --card: 0 0% 100%;
-        --card-foreground: 222.2 84% 4.9%;
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
 
-        --popover: 0 0% 100%;
-        --popover-foreground: 222.2 84% 4.9%;
-
-        --primary: 222.2 47.4% 11.2%;
-        --primary-foreground: 210 40% 98%;
-
-        --secondary: 210 40% 96.1%;
-        --secondary-foreground: 222.2 47.4% 11.2%;
-
-        --muted: 210 40% 96.1%;
-        --muted-foreground: 215.4 16.3% 46.9%;
-
-        --accent: 210 40% 96.1%;
-        --accent-foreground: 222.2 47.4% 11.2%;
-
-        --destructive: 0 84.2% 60.2%;
-        --destructive-foreground: 210 40% 98%;
-
-        --border: 214.3 31.8% 91.4%;
-        --input: 214.3 31.8% 91.4%;
-        --ring: 222.2 84% 4.9%;
-
-        --radius: 0.5rem;
-    }
-
-    .dark {
-        --background: 222.2 84% 4.9%;
-        --foreground: 210 40% 98%;
-
-        --card: 222.2 84% 4.9%;
-        --card-foreground: 210 40% 98%;
-
-        --popover: 222.2 84% 4.9%;
-        --popover-foreground: 210 40% 98%;
-
-        --primary: 210 40% 98%;
-        --primary-foreground: 222.2 47.4% 11.2%;
-
-        --secondary: 217.2 32.6% 17.5%;
-        --secondary-foreground: 210 40% 98%;
-
-        --muted: 217.2 32.6% 17.5%;
-        --muted-foreground: 215 20.2% 65.1%;
-
-        --accent: 217.2 32.6% 17.5%;
-        --accent-foreground: 210 40% 98%;
-
-        --destructive: 0 62.8% 30.6%;
-        --destructive-foreground: 210 40% 98%;
-
-        --border: 217.2 32.6% 17.5%;
-        --input: 217.2 32.6% 17.5%;
-        --ring: 212.7 26.8% 83.9%;
-    }
+  dialog {
+    margin: auto;
+  }
 }
-
-@layer base {
-    * {
-        @apply border-border;
-    }
-
-    body {
-        @apply bg-background text-foreground;
-    }
-
-    /* Ensure Shadcn Utilities are always available */
-    .bg-popover {
-        background-color: hsl(var(--popover));
-    }
-
-    .text-popover-foreground {
-        color: hsl(var(--popover-foreground));
-    }
-
-    .border-border {
-        border-color: hsl(var(--border));
-    }
-
-    .shadow-md {
-        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-    }
-
-    .z-50 {
-        z-index: 50;
-    }
-
-    .z-100 {
-        z-index: 100;
-    }
-}
-
-/* Fix for iOS click/blur events */
-@media (hover: none) {
-    body {
-        cursor: pointer;
-    }
-}
-
-/* Remove default focus outline/tap highlight */
-* {
-    -webkit-tap-highlight-color: transparent;
-    outline: none !important;
-}
-
-:focus {
-    outline: none !important;
-}

frontend/src/app.rs

@@ -1,11 +1,12 @@
 use crate::components::layout::protected::Protected;
+use crate::components::ui::skeleton::Skeleton;
 use crate::components::torrent::table::TorrentTable;
 use crate::components::auth::login::Login;
 use crate::components::auth::setup::Setup;
 use leptos::prelude::*;
 use leptos::task::spawn_local;
 use leptos_router::components::{Router, Routes, Route};
-use leptos_router::hooks::use_navigate;
+use leptos_router::hooks::{use_navigate, use_location};
 use crate::components::ui::toast::Toaster;
 use crate::components::hooks::use_theme_mode::ThemeMode;
 
@@ -30,7 +31,9 @@ pub fn App() -> impl IntoView {
 
     view! {
         <Toaster />
-        <InnerApp />
+        <Router>
+            <InnerApp />
+        </Router>
     }
 }
 
@@ -38,6 +41,7 @@ pub fn App() -> impl IntoView {
 fn InnerApp() -> impl IntoView {
     crate::store::provide_torrent_store();
     let store = use_context::<crate::store::TorrentStore>();
+    let _loc = use_location();
 
     let is_loading = signal(true);
     let is_authenticated = signal(false);
@@ -97,119 +101,121 @@ fn InnerApp() -> impl IntoView {
 
     view! {
         <div class="relative w-full h-screen" style="height: 100dvh;">
-            <Router>
-                <Routes fallback=|| view! { <div class="p-4">"404 Not Found"</div> }>
-                    <Route path=leptos_router::path!("/login") view=move || {
-                        let authenticated = is_authenticated.0.get();
-                        let setup_needed = needs_setup.0.get();
-                        
-                        Effect::new(move |_| {
-                            if setup_needed {
-                                let navigate = use_navigate();
-                                navigate("/setup", Default::default());
-                            } else if authenticated {
-                                log::info!("Already authenticated, redirecting to home");
-                                let navigate = use_navigate();
-                                navigate("/", Default::default());
-                            }
-                        });
-                        
-                        view! { <Login /> }
-                    } />
-                    <Route path=leptos_router::path!("/setup") view=move || {
-                        Effect::new(move |_| {
-                            if is_authenticated.0.get() {
-                                let navigate = use_navigate();
-                                navigate("/", Default::default());
-                            }
-                        });
-                        
-                        view! { <Setup /> }
-                    } />
+            <Routes fallback=|| view! { <div class="p-4">"404 Not Found"</div> }>
+                <Route path=leptos_router::path!("/login") view=move || {
+                    let authenticated = is_authenticated.0.get();
+                    let setup_needed = needs_setup.0.get();
+                    
+                    Effect::new(move |_| {
+                        if setup_needed {
+                            let navigate = use_navigate();
+                            navigate("/setup", Default::default());
+                        } else if authenticated {
+                            log::info!("Already authenticated, redirecting to home");
+                            let navigate = use_navigate();
+                            navigate("/", Default::default());
+                        }
+                    });
+                    
+                    view! { <Login /> }
+                } />
+                <Route path=leptos_router::path!("/setup") view=move || {
+                    Effect::new(move |_| {
+                        if is_authenticated.0.get() {
+                            let navigate = use_navigate();
+                            navigate("/", Default::default());
+                        }
+                    });
+                    
+                    view! { <Setup /> }
+                } />
 
-                    <Route path=leptos_router::path!("/") view=move || {
-                        let navigate = use_navigate();
-                        Effect::new(move |_| {
-                            if !is_loading.0.get() {
-                                if needs_setup.0.get() {
-                                    log::info!("Setup not completed, redirecting to setup");
-                                    navigate("/setup", Default::default());
-                                } else if !is_authenticated.0.get() {
-                                    log::info!("Not authenticated, redirecting to login");
-                                    navigate("/login", Default::default());
-                                }
+                <Route path=leptos_router::path!("/") view=move || {
+                    let navigate = use_navigate();
+                    Effect::new(move |_| {
+                        if !is_loading.0.get() {
+                            if needs_setup.0.get() {
+                                log::info!("Setup not completed, redirecting to setup");
+                                navigate("/setup", Default::default());
+                            } else if !is_authenticated.0.get() {
+                                log::info!("Not authenticated, redirecting to login");
+                                navigate("/login", Default::default());
                             }
-                        });
-                        
-                        view! {
-                            <Show when=move || !is_loading.0.get() fallback=|| view! {
-                                <div class="flex h-screen bg-background">
+                        }
+                    });
+                    
+                    view! {
+                        <Show when=move || !is_loading.0.get() fallback=|| {
+                            // Standard 1: Always show Dashboard Skeleton
+                            view! {
+                                <div class="flex h-screen bg-background text-foreground overflow-hidden">
                                     // Sidebar skeleton
                                     <div class="w-56 border-r border-border p-4 space-y-4">
-                                        <div class="h-8 w-3/4 animate-pulse rounded-md bg-muted" />
+                                        <Skeleton class="h-8 w-3/4" />
                                         <div class="space-y-2">
-                                            <div class="h-6 w-full animate-pulse rounded-md bg-muted" />
-                                            <div class="h-6 w-full animate-pulse rounded-md bg-muted" />
-                                            <div class="h-6 w-4/5 animate-pulse rounded-md bg-muted" />
-                                            <div class="h-6 w-full animate-pulse rounded-md bg-muted" />
-                                            <div class="h-6 w-3/5 animate-pulse rounded-md bg-muted" />
-                                            <div class="h-6 w-full animate-pulse rounded-md bg-muted" />
+                                            <Skeleton class="h-6 w-full" />
+                                            <Skeleton class="h-6 w-full" />
+                                            <Skeleton class="h-6 w-4/5" />
+                                            <Skeleton class="h-6 w-full" />
+                                            <Skeleton class="h-6 w-3/5" />
+                                            <Skeleton class="h-6 w-full" />
                                         </div>
                                     </div>
                                     // Main content skeleton
-                                    <div class="flex-1 flex flex-col">
+                                    <div class="flex-1 flex flex-col min-w-0">
                                         <div class="border-b border-border p-4 flex items-center gap-4">
-                                            <div class="h-8 w-48 animate-pulse rounded-md bg-muted" />
-                                            <div class="h-8 w-64 animate-pulse rounded-md bg-muted" />
-                                            <div class="ml-auto"><div class="h-8 w-24 animate-pulse rounded-md bg-muted" /></div>
+                                            <Skeleton class="h-8 w-48" />
+                                            <Skeleton class="h-8 w-64" />
+                                            <div class="ml-auto"><Skeleton class="h-8 w-24" /></div>
                                         </div>
                                         <div class="flex-1 p-4 space-y-3">
-                                            <div class="h-10 w-full animate-pulse rounded-md bg-muted" />
-                                            <div class="h-10 w-full animate-pulse rounded-md bg-muted" />
-                                            <div class="h-10 w-full animate-pulse rounded-md bg-muted" />
-                                            <div class="h-10 w-full animate-pulse rounded-md bg-muted" />
-                                            <div class="h-10 w-full animate-pulse rounded-md bg-muted" />
-                                            <div class="h-10 w-3/4 animate-pulse rounded-md bg-muted" />
+                                            <Skeleton class="h-10 w-full" />
+                                            <Skeleton class="h-10 w-full" />
+                                            <Skeleton class="h-10 w-full" />
+                                            <Skeleton class="h-10 w-full" />
+                                            <Skeleton class="h-10 w-full" />
+                                            <Skeleton class="h-10 w-3/4" />
                                         </div>
                                         <div class="border-t border-border p-3">
-                                            <div class="h-5 w-96 animate-pulse rounded-md bg-muted" />
+                                            <Skeleton class="h-5 w-96" />
                                         </div>
                                     </div>
                                 </div>
-                            }.into_any()>
-                                <Show when=move || is_authenticated.0.get() fallback=|| ()>
-                                    <Protected>
-                                        <div class="flex flex-col h-full overflow-hidden">
-                                            <div class="flex-1 overflow-hidden">
-                                                <TorrentTable />
-                                            </div>
+                            }.into_any()
+                        }>
+                            <Show when=move || is_authenticated.0.get() fallback=|| ()>
+                                <Protected>
+                                    <div class="flex flex-col h-full overflow-hidden">
+                                        <div class="flex-1 overflow-hidden">
+                                            <TorrentTable />
                                         </div>
-                                    </Protected>
-                                </Show>
+                                    </div>
+                                </Protected>
                             </Show>
-                        }.into_any()
-                    }/>
+                        </Show>
+                    }.into_any()
+                }/>
 
-                    <Route path=leptos_router::path!("/settings") view=move || {
-                        Effect::new(move |_| {
-                            if !is_authenticated.0.get() {
-                                let navigate = use_navigate();
-                                navigate("/login", Default::default());
-                            }
-                        });
-                        
-                        view! {
-                            <Show when=move || !is_loading.0.get() fallback=|| ()>
-                                <Show when=move || is_authenticated.0.get() fallback=|| ()>
-                                    <Protected>
-                                        <div class="p-4">"Settings Page (Coming Soon)"</div>
-                                    </Protected>
-                                </Show>
-                            </Show>
+                <Route path=leptos_router::path!("/settings") view=move || {
+                    let authenticated = is_authenticated.0.get();
+                    Effect::new(move |_| {
+                        if !authenticated {
+                            let navigate = use_navigate();
+                            navigate("/login", Default::default());
                         }
-                    }/>
-                </Routes>
-            </Router>
+                    });
+                    
+                    view! {
+                        <Show when=move || !is_loading.0.get() fallback=|| ()>
+                            <Show when=move || authenticated fallback=|| ()>
+                                <Protected>
+                                    <div class="p-4">"Settings Page (Coming Soon)"</div>
+                                </Protected>
+                            </Show>
+                        </Show>
+                    }
+                }/>
+            </Routes>
         </div>
     }
 }

frontend/src/components/auth/login.rs

@@ -3,6 +3,8 @@ 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());
@@ -74,15 +76,16 @@ pub fn Login() -> impl IntoView {
                         </Show>
 
                         <div class="pt-2">
-                            <button
-                                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"
-                                disabled=move || loading.0.get()
+                            <Button
+                                class="w-full"
+                                attr:r#type="submit"
+                                attr:disabled=move || loading.0.get()
                             >
-                                <Show when=move || loading.0.get() fallback=|| "Giriş Yap">
+                                <Show when=move || loading.0.get() fallback=|| view! { "Giriş Yap" }.into_any()>
                                     <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>

frontend/src/components/auth/setup.rs

@@ -3,6 +3,8 @@ 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());
@@ -98,15 +100,16 @@ pub fn Setup() -> impl IntoView {
                         </Show>
 
                         <div class="pt-2">
-                            <button
-                                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"
-                                disabled=move || loading.0.get()
+                            <Button
+                                class="w-full"
+                                attr:r#type="submit"
+                                attr:disabled=move || loading.0.get()
                             >
-                                <Show when=move || loading.0.get() fallback=|| "Kurulumu Tamamla">
+                                <Show when=move || loading.0.get() fallback=|| view! { "Kurulumu Tamamla" }.into_any()>
                                     <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>

frontend/src/components/context_menu.rs

@@ -1,5 +1,7 @@
 use leptos::prelude::*;
-use crate::components::ui::context_menu::*;
+use crate::components::ui::context_menu::{
+    ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger,
+};
 
 #[component]
 pub fn TorrentContextMenu(
@@ -7,72 +9,38 @@ pub fn TorrentContextMenu(
     torrent_hash: String,
     on_action: Callback<(String, String)>,
 ) -> impl IntoView {
-    let hash = StoredValue::new(torrent_hash);
-    
-    let menu_action = move |action: &'static str| {
-        on_action.run((action.to_string(), hash.get_value()));
+    let hash = torrent_hash.clone();
+    let on_action_stored = StoredValue::new(on_action);
+
+    // Define helper to avoid move issues
+    let run_action = move |action: &str| {
+        on_action_stored.get_value().run((action.to_string(), hash.clone()));
     };
 
+    let hash_c1 = torrent_hash.clone();
+    let hash_c2 = torrent_hash.clone();
+    let hash_c3 = torrent_hash.clone();
+    let hash_c4 = torrent_hash.clone();
+
     view! {
         <ContextMenu>
             <ContextMenuTrigger>
                 {children()}
             </ContextMenuTrigger>
-            
-            <ContextMenuContent class="w-56">
-                <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 
-                    class="px-2 py-1.5 hover:bg-accent hover:text-accent-foreground rounded-sm"
-                    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="M15.75 5.25v13.5m-7.5-13.5v13.5" />
-                    </svg>
-                    "Stop"
-                </ContextMenuAction>
-
-                <ContextMenuAction 
-                    class="px-2 py-1.5 hover:bg-accent hover:text-accent-foreground rounded-sm"
-                    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"
-                </ContextMenuAction>
-
-                <div class="-mx-1 my-1 h-px bg-border" />
-
-                <ContextMenuAction 
-                    class="px-2 py-1.5 text-destructive hover:bg-destructive/10 hover:text-destructive rounded-sm"
-                    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 
-                    class="text-destructive hover:bg-destructive/10 hover:text-destructive"
-                    on_hold_complete=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"
-                    <span class="ml-auto text-[10px] opacity-50">"Hold"</span>
-                </ContextMenuHoldAction>
+            <ContextMenuContent class="w-48">
+                <ContextMenuItem on:click={let h = hash_c1; move |_| on_action_stored.get_value().run(("start".to_string(), h.clone()))}>
+                    "Başlat"
+                </ContextMenuItem>
+                <ContextMenuItem on:click={let h = hash_c2; move |_| on_action_stored.get_value().run(("stop".to_string(), h.clone()))}>
+                    "Durdur"
+                </ContextMenuItem>
+                <ContextMenuItem class="text-destructive" on:click={let h = hash_c3; move |_| on_action_stored.get_value().run(("delete".to_string(), h.clone()))}>
+                    "Sil"
+                </ContextMenuItem>
+                <ContextMenuItem class="text-destructive font-bold" on:click={let h = hash_c4; move |_| on_action_stored.get_value().run(("delete_with_data".to_string(), h.clone()))}>
+                    "Verilerle Birlikte Sil"
+                </ContextMenuItem>
             </ContextMenuContent>
         </ContextMenu>
     }
-}
+}

frontend/src/components/hooks/mod.rs

@@ -1,2 +1,3 @@
 pub mod use_random;
 pub mod use_theme_mode;
+pub mod use_can_scroll_vertical;

frontend/src/components/hooks/use_can_scroll_vertical.rs

@@ -0,0 +1,25 @@
+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())
+}

frontend/src/components/hooks/use_random.rs

@@ -1,31 +1,5 @@
-use std::collections::hash_map::DefaultHasher;
-use std::hash::{Hash, Hasher};
-use std::sync::atomic::{AtomicUsize, Ordering};
+use leptos::prelude::*;
 
-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(prefix: &str) -> String {
+    format!("{}_{}", prefix, js_sys::Math::random().to_string().replace(".", ""))
 }
-
-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()
-}

frontend/src/components/layout/footer.rs

@@ -0,0 +1,30 @@
+use leptos::prelude::*;
+use crate::components::ui::separator::Separator;
+
+#[component]
+pub fn Footer() -> impl IntoView {
+    let year = chrono::Local::now().format("%Y").to_string();
+    
+    view! {
+        <footer class="mt-auto px-4 py-6 md:px-8">
+            <Separator class="mb-6 opacity-50" />
+            <div class="flex flex-col items-center justify-between gap-4 md:flex-row">
+                <p class="text-center text-sm leading-loose text-muted-foreground md:text-left">
+                    {format!("© {} VibeTorrent. Tüm hakları saklıdır.", year)}
+                </p>
+                <div class="flex items-center gap-4 text-sm font-medium text-muted-foreground">
+                    <a 
+                        href="https://git.karatatar.com/admin/vibetorrent" 
+                        target="_blank" 
+                        rel="noreferrer" 
+                        class="underline underline-offset-4 hover:text-foreground transition-colors"
+                    >
+                        "Gitea"
+                    </a>
+                    <span class="size-1 rounded-full bg-muted-foreground/30" />
+                    <span class="text-[10px] tracking-widest uppercase opacity-70">"v3.0.0-beta"</span>
+                </div>
+            </div>
+        </footer>
+    }
+}

frontend/src/components/layout/mod.rs

@@ -1,4 +1,4 @@
 pub mod sidebar;
-pub mod statusbar;
 pub mod toolbar;
+pub mod footer;
 pub mod protected;

frontend/src/components/layout/protected.rs

@@ -1,52 +1,31 @@
 use leptos::prelude::*;
 use crate::components::layout::sidebar::Sidebar;
 use crate::components::layout::toolbar::Toolbar;
-use crate::components::layout::statusbar::StatusBar;
+use crate::components::layout::footer::Footer;
+use crate::components::ui::sidenav::{SidenavWrapper, Sidenav, SidenavInset};
 
 #[component]
 pub fn Protected(children: Children) -> impl IntoView {
-    // Mobil menü durumu için bir sinyal oluşturuyoruz (RwSignal for easier passing)
-    let is_mobile_menu_open = RwSignal::new(false);
-    
-    // Sinyali context olarak sağlıyoruz ki Toolbar ve Sidebar buna erişebilsin
-    provide_context(is_mobile_menu_open);
-
     view! {
-        <div class="flex h-screen w-full overflow-hidden bg-background">
-            
-            // --- SIDEBAR (Desktop: Sabit, Mobil: Overlay) ---
-            <aside class=move || {
-                let base = "fixed inset-y-0 left-0 z-50 w-64 transform transition-transform duration-300 ease-in-out border-r border-border bg-card lg:relative lg:translate-x-0";
-                if is_mobile_menu_open.get() {
-                    format!("{} translate-x-0", base)
-                } else {
-                    format!("{} -translate-x-full", base)
-                }
-            }>
+        <SidenavWrapper attr:style="--sidenav-width:16rem; --sidenav-width-icon:3rem;">
+            // Masaüstü Sidenav
+            <Sidenav>
                 <Sidebar />
-            </aside>
+            </Sidenav>
 
-            // Mobil arka plan karartma (Overlay)
-            <Show when=move || is_mobile_menu_open.get()>
-                <div 
-                    class="fixed inset-0 z-40 bg-background/80 backdrop-blur-sm lg:hidden"
-                    on:click=move |_| is_mobile_menu_open.set(false)
-                ></div>
-            </Show>
-            
-            // --- MAIN CONTENT AREA ---
-            <div class="flex flex-1 flex-col overflow-hidden">
-                // --- TOOLBAR (TOP) ---
+            // İçerik Alanı
+            <SidenavInset class="flex flex-col h-screen overflow-hidden">
+                // Toolbar (Üst Bar)
                 <Toolbar />
                 
-                // --- MAIN CONTENT ---
-                <main class="flex-1 overflow-hidden relative bg-background">
-                    {children()}
+                // Ana İçerik
+                <main class="flex-1 overflow-y-auto relative bg-background flex flex-col">
+                    <div class="flex-1">
+                        {children()}
+                    </div>
+                    <Footer />
                 </main>
-
-                // --- STATUS BAR (BOTTOM) ---
-                <StatusBar />
-            </div>
-        </div>
+            </SidenavInset>
+        </SidenavWrapper>
     }
-}
+}

frontend/src/components/layout/sidebar.rs

@@ -1,10 +1,13 @@
 use leptos::prelude::*;
 use leptos::task::spawn_local;
+use crate::components::ui::sidenav::*;
+use crate::components::ui::button::{Button, ButtonVariant, ButtonSize};
+use crate::components::ui::theme_toggle::ThemeToggle;
+use crate::components::ui::switch::Switch;
 
 #[component]
 pub fn Sidebar() -> impl IntoView {
     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 total_count = move || store.torrents.with(|map| map.len());
     let downloading_count = move || {
@@ -51,7 +54,6 @@ pub fn Sidebar() -> impl IntoView {
 
     let set_filter = move |f: crate::store::FilterStatus| {
         store.filter.set(f);
-        is_mobile_menu_open.set(false);
     };
 
     let is_active = move |f: crate::store::FilterStatus| store.filter.get() == f;
@@ -64,122 +66,160 @@ pub fn Sidebar() -> impl IntoView {
         username().chars().next().unwrap_or('?').to_uppercase().to_string()
     };
 
+    let on_push_toggle = move |checked: bool| {
+        spawn_local(async move {
+            if checked {
+                crate::store::subscribe_to_push_notifications().await;
+            } else {
+                crate::store::unsubscribe_from_push_notifications().await;
+            }
+            if let Ok(enabled) = crate::store::is_push_subscribed().await {
+                store.push_enabled.set(enabled);
+            }
+        });
+    };
+
     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">
-                <div class="mb-4 px-2 text-lg font-semibold tracking-tight text-foreground">
-                    "VibeTorrent"
+        <SidenavHeader>
+            <div class="flex items-center gap-2 px-2 py-4">
+                <div class="flex size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-sm">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.048 8.287 8.287 0 009 9.6a8.983 8.983 0 013.361-6.867 8.21 8.25 0 003 2.48z" />
+                    </svg>
                 </div>
-                <div class="space-y-1">
-                    <h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold text-muted-foreground">"Filters"</h4>
-                    
-                    <SidebarButton
-                        active=Signal::derive(move || is_active(crate::store::FilterStatus::All))
-                        on_click=move |_| set_filter(crate::store::FilterStatus::All)
-                        icon="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
-                        label="All"
-                        count=Signal::derive(total_count)
-                    />
-                    <SidebarButton
-                        active=Signal::derive(move || is_active(crate::store::FilterStatus::Downloading))
-                        on_click=move |_| set_filter(crate::store::FilterStatus::Downloading)
-                        icon="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"
-                        label="Downloading"
-                        count=Signal::derive(downloading_count)
-                    />
-                    <SidebarButton
-                        active=Signal::derive(move || is_active(crate::store::FilterStatus::Seeding))
-                        on_click=move |_| set_filter(crate::store::FilterStatus::Seeding)
-                        icon="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
-                        label="Seeding"
-                        count=Signal::derive(seeding_count)
-                    />
-                    <SidebarButton
-                        active=Signal::derive(move || is_active(crate::store::FilterStatus::Completed))
-                        on_click=move |_| set_filter(crate::store::FilterStatus::Completed)
-                        icon="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                        label="Completed"
-                        count=Signal::derive(completed_count)
-                    />
-                    <SidebarButton
-                        active=Signal::derive(move || is_active(crate::store::FilterStatus::Paused))
-                        on_click=move |_| set_filter(crate::store::FilterStatus::Paused)
-                        icon="M15.75 5.25v13.5m-7.5-13.5v13.5"
-                        label="Paused"
-                        count=Signal::derive(paused_count)
-                    />
-                    <SidebarButton
-                        active=Signal::derive(move || is_active(crate::store::FilterStatus::Inactive))
-                        on_click=move |_| set_filter(crate::store::FilterStatus::Inactive)
-                        icon="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
-                        label="Inactive"
-                        count=Signal::derive(inactive_count)
-                    />
+                <div class="grid flex-1 text-left text-sm leading-tight overflow-hidden">
+                    <span class="truncate font-semibold text-foreground text-base">"VibeTorrent"</span>
+                    <span class="truncate text-[10px] text-muted-foreground opacity-70">"v3.0.0"</span>
                 </div>
             </div>
+        </SidenavHeader>
 
-            // Separator
-            <div class="border-t border-border" />
+        <SidenavContent>
+            <SidenavGroup>
+                <SidenavGroupLabel>"Filtreler"</SidenavGroupLabel>
+                <SidenavGroupContent>
+                    <SidenavMenu>
+                        <SidebarItem 
+                            active=Signal::derive(move || is_active(crate::store::FilterStatus::All))
+                            on_click=move |_| set_filter(crate::store::FilterStatus::All)
+                            icon="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+                            label="Tümü"
+                            count=Signal::derive(total_count)
+                        />
+                        <SidebarItem 
+                            active=Signal::derive(move || is_active(crate::store::FilterStatus::Downloading))
+                            on_click=move |_| set_filter(crate::store::FilterStatus::Downloading)
+                            icon="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"
+                            label="İndirilenler"
+                            count=Signal::derive(downloading_count)
+                        />
+                        <SidebarItem 
+                            active=Signal::derive(move || is_active(crate::store::FilterStatus::Seeding))
+                            on_click=move |_| set_filter(crate::store::FilterStatus::Seeding)
+                            icon="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
+                            label="Gönderilenler"
+                            count=Signal::derive(seeding_count)
+                        />
+                        <SidebarItem 
+                            active=Signal::derive(move || is_active(crate::store::FilterStatus::Completed))
+                            on_click=move |_| set_filter(crate::store::FilterStatus::Completed)
+                            icon="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                            label="Tamamlananlar"
+                            count=Signal::derive(completed_count)
+                        />
+                        <SidebarItem 
+                            active=Signal::derive(move || is_active(crate::store::FilterStatus::Paused))
+                            on_click=move |_| set_filter(crate::store::FilterStatus::Paused)
+                            icon="M15.75 5.25v13.5m-7.5-13.5v13.5"
+                            label="Durdurulanlar"
+                            count=Signal::derive(paused_count)
+                        />
+                        <SidebarItem 
+                            active=Signal::derive(move || is_active(crate::store::FilterStatus::Inactive))
+                            on_click=move |_| set_filter(crate::store::FilterStatus::Inactive)
+                            icon="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
+                            label="Pasif"
+                            count=Signal::derive(inactive_count)
+                        />
+                    </SidenavMenu>
+                </SidenavGroupContent>
+            </SidenavGroup>
+        </SidenavContent>
 
-            <div class="p-4 bg-card" style="padding-bottom: calc(1rem + env(safe-area-inset-bottom));">
-                <div class="flex items-center gap-3">
-                    // Avatar
-                    <div class="h-8 w-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-xs font-medium shrink-0">
+        <SidenavFooter>
+            <div class="flex flex-col gap-4 p-4">
+                // Push Notification Toggle
+                <div class="flex items-center justify-between px-2 py-1 bg-muted/20 rounded-md border border-border/50">
+                    <div class="flex flex-col gap-0.5">
+                        <span class="text-[10px] font-bold uppercase tracking-wider text-foreground/70">"Bildirimler"</span>
+                        <span class="text-[9px] text-muted-foreground">"Web Push"</span>
+                    </div>
+                    <Switch 
+                        checked=Signal::from(store.push_enabled)
+                        on_checked_change=Callback::new(on_push_toggle)
+                    />
+                </div>
+
+                <div class="flex items-center gap-3 p-2 rounded-lg border bg-muted/30 shadow-xs overflow-hidden">
+                    <div class="h-8 w-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-xs font-medium shrink-0 border border-primary-foreground/10">
                         {first_letter}
                     </div>
                     <div class="flex-1 overflow-hidden">
-                        <div class="font-medium text-sm truncate text-foreground">{username}</div>
-                        <div class="text-[10px] text-muted-foreground truncate">"Online"</div>
+                        <div class="font-medium text-[11px] truncate text-foreground leading-tight">{username}</div>
+                        <div class="text-[9px] text-muted-foreground truncate opacity-70">"Yönetici"</div>
                     </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">
-                        <crate::components::ui::theme_toggle::ThemeToggle />
+                    
+                    <div class="flex items-center gap-1">
+                        <ThemeToggle />
+                        
+                        <Button
+                            variant=ButtonVariant::Ghost
+                            size=ButtonSize::Icon
+                            class="size-7 text-destructive hover:bg-destructive/10"
+                            on:click=move |_| {
+                                spawn_local(async move {
+                                    if shared::server_fns::auth::logout().await.is_ok() {
+                                        let window = web_sys::window().expect("window should exist");
+                                        let _ = window.location().set_href("/login");
+                                    }
+                                });
+                            }
+                        >
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-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>
                     </div>
-                    // Logout button
-                    <button
-                        class="inline-flex items-center justify-center size-8 rounded-md hover:bg-accent text-destructive transition-colors"
-                        on:click=move |_| {
-                            spawn_local(async move {
-                                if shared::server_fns::auth::logout().await.is_ok() {
-                                    let window = web_sys::window().expect("window should exist");
-                                    let _ = window.location().set_href("/login");
-                                }
-                            });
-                        }
-                    >
-                        <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>
                 </div>
             </div>
-        </div>
+        </SidenavFooter>
     }
 }
 
 #[component]
-fn SidebarButton(
+fn SidebarItem(
     active: Signal<bool>,
-    on_click: impl Fn(web_sys::MouseEvent) + 'static,
+    on_click: impl Fn(web_sys::MouseEvent) + 'static + Send,
     #[prop(into)] icon: String,
     #[prop(into)] label: &'static str,
     count: Signal<usize>,
 ) -> impl IntoView {
+    let variant = move || if active.get() { SidenavMenuButtonVariant::Outline } else { SidenavMenuButtonVariant::Default };
+    let class = move || if active.get() { "bg-accent/50 border-accent text-foreground".to_string() } else { "text-muted-foreground hover:text-foreground".to_string() };
+
     view! {
-        <button
-            class=move || if active.get() {
-                "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">
-                <path stroke-linecap="round" stroke-linejoin="round" d=icon.clone() />
-            </svg>
-            {label}
-            <span class="ml-auto text-xs font-mono opacity-70">{count}</span>
-        </button>
+        <SidenavMenuItem>
+            <SidenavMenuButton
+                variant=Signal::derive(variant)
+                class=Signal::derive(class)
+                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="size-4 shrink-0">
+                    <path stroke-linecap="round" stroke-linejoin="round" d=icon.clone() />
+                </svg>
+                <span class="flex-1 truncate">{label}</span>
+                <span class="text-[10px] font-mono opacity-50">{count}</span>
+            </SidenavMenuButton>
+        </SidenavMenuItem>
     }
 }

frontend/src/components/layout/statusbar.rs

@@ -1,201 +0,0 @@
-use leptos::prelude::*;
-use leptos::html;
-use shared::GlobalLimitRequest;
-use crate::api;
-
-fn format_bytes(bytes: i64) -> String {
-    const UNITS: [&str; 6] = ["B", "KB", "MB", "GB", "TB", "PB"];
-    if bytes < 1024 {
-        return format!("{} B", bytes);
-    }
-    let i = (bytes as f64).log2().div_euclid(10.0) as usize;
-    format!(
-        "{:.1} {}",
-        (bytes as f64) / 1024_f64.powi(i as i32),
-        UNITS[i]
-    )
-}
-
-fn format_speed(bytes_per_sec: i64) -> String {
-    if bytes_per_sec == 0 {
-        return "0 B/s".to_string();
-    }
-    format!("{}/s", format_bytes(bytes_per_sec))
-}
-
-#[component]
-pub fn StatusBar() -> impl IntoView {
-    let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
-    let stats = store.global_stats;
-
-
-
-    // Preset limits in bytes/s
-    let limits: Vec<(i64, &str)> = vec!(
-        (0, "Unlimited"),
-        (100 * 1024, "100 KB/s"),
-        (500 * 1024, "500 KB/s"),
-        (1024 * 1024, "1 MB/s"),
-        (2 * 1024 * 1024, "2 MB/s"),
-        (5 * 1024 * 1024, "5 MB/s"),
-        (10 * 1024 * 1024, "10 MB/s"),
-        (20 * 1024 * 1024, "20 MB/s"),
-    );
-
-    let set_limit = move |limit_type: &str, val: i64| {
-        let limit_type = limit_type.to_string();
-        log::info!("Setting {} limit to {}", limit_type, val);
-
-        let req = if limit_type == "down" {
-            GlobalLimitRequest {
-                max_download_rate: Some(val),
-                max_upload_rate: None,
-            }
-        } else {
-            GlobalLimitRequest {
-                max_download_rate: None,
-                max_upload_rate: Some(val),
-            }
-        };
-
-        leptos::task::spawn_local(async move {
-            if let Err(e) = api::settings::set_global_limits(&req).await {
-                log::error!("Failed to set limit: {:?}", e);
-            } else {
-                log::info!("Limit set successfully");
-            }
-        });
-    };
-
-        let down_details_ref = NodeRef::<html::Details>::new();
-        let up_details_ref = NodeRef::<html::Details>::new();
-
-        let close_details = move |node_ref: NodeRef<html::Details>| {
-            if let Some(el) = node_ref.get_untracked() {
-                el.set_open(false);
-            }
-        };
-
-        view! {
-            <div class="fixed bottom-0 left-0 right-0 h-8 min-h-8 bg-muted border-t border-border flex items-center px-4 text-xs gap-4 text-muted-foreground z-[99] cursor-pointer">
-
-                // --- DOWNLOAD SPEED DROPDOWN ---
-                <details class="group relative" node_ref=down_details_ref>
-                    <summary class="flex items-center gap-2 cursor-pointer hover:text-foreground transition-colors select-none list-none [&::-webkit-details-marker]:hidden outline-none">
-                        <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="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3" />
-                        </svg>
-                        <span class="font-mono">{move || format_speed(stats.get().down_rate)}</span>
-                        <Show when=move || { stats.get().down_limit.unwrap_or(0) > 0 } fallback=|| ()>
-                            <span class="text-[10px] opacity-60">
-                                {move || format!("(Limit: {})", format_speed(stats.get().down_limit.unwrap_or(0)))}
-                            </span>
-                        </Show>
-                    </summary>
-
-                    <div class="absolute bottom-full left-0 mb-2 z-[100] min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md hidden group-open:block animate-in fade-in-0 zoom-in-95 slide-in-from-bottom-2">
-                        <ul class="w-full">
-                            {
-                                limits.clone().into_iter().map(|(val, label)| {
-                                    let is_active = move || {
-                                        let current = stats.get().down_limit.unwrap_or(0);
-                                        (current - val).abs() < 1024
-                                    };
-                                    view! {
-                                        <li>
-                                            <button
-                                                class=move || {
-                                                    let base = "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-xs outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-accent hover:text-accent-foreground";
-                                                    if is_active() { format!("{} bg-accent text-accent-foreground font-medium", base) } else { base.to_string() }
-                                                }
-                                                on:click=move |_| {
-                                                    set_limit("down", val);
-                                                    close_details(down_details_ref);
-                                                }
-                                            >
-                                                <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-                                                    <Show when=is_active fallback=|| ()>
-                                                        <span>"✓"</span>
-                                                    </Show>
-                                                </span>
-                                                {label}
-                                            </button>
-                                        </li>
-                                    }
-                                }).collect::<Vec<_>>()
-                            }
-                        </ul>
-                    </div>
-                </details>
-
-                // --- UPLOAD SPEED DROPDOWN ---
-                <details class="group relative" node_ref=up_details_ref>
-                    <summary class="flex items-center gap-2 cursor-pointer hover:text-foreground transition-colors select-none list-none [&::-webkit-details-marker]:hidden outline-none">
-                        <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="M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18" />
-                        </svg>
-                        <span class="font-mono">{move || format_speed(stats.get().up_rate)}</span>
-                        <Show when=move || { stats.get().up_limit.unwrap_or(0) > 0 } fallback=|| ()>
-                            <span class="text-[10px] opacity-60">
-                                {move || format!("(Limit: {})", format_speed(stats.get().up_limit.unwrap_or(0)))}
-                            </span>
-                        </Show>
-                    </summary>
-
-                    <div class="absolute bottom-full left-0 mb-2 z-[100] min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md hidden group-open:block animate-in fade-in-0 zoom-in-95 slide-in-from-bottom-2">
-                        <ul class="w-full">
-                            {
-                                limits.clone().into_iter().map(|(val, label)| {
-                                    let is_active = move || {
-                                        let current = stats.get().up_limit.unwrap_or(0);
-                                        (current - val).abs() < 1024
-                                    };
-                                    view! {
-                                        <li>
-                                            <button
-                                                class=move || {
-                                                    let base = "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-xs outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-accent hover:text-accent-foreground";
-                                                    if is_active() { format!("{} bg-accent text-accent-foreground font-medium", base) } else { base.to_string() }
-                                                }
-                                                on:click=move |_| {
-                                                    set_limit("up", val);
-                                                    close_details(up_details_ref);
-                                                }
-                                            >
-                                                <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-                                                    <Show when=is_active fallback=|| ()>
-                                                        <span>"✓"</span>
-                                                    </Show>
-                                                </span>
-                                                {label}
-                                            </button>
-                                        </li>
-                                    }
-                                }).collect::<Vec<_>>()
-                            }
-                        </ul>
-                    </div>
-                </details>
-
-                <div class="ml-auto flex items-center gap-4">
-                <button
-                    class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-7 w-7"
-                    title="Settings & Notification Permissions"
-                    on:click=move |_| {
-                        // Request push notification permission
-                        leptos::task::spawn_local(async {
-                            // ... existing logic ...
-                            crate::store::subscribe_to_push_notifications().await;
-                            // ... existing logic ...
-                        });
-                    }
-                >
-                     <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="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.212 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 012.6-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                    </svg>
-                </button>
-            </div>
-        </div>
-    }
-}

frontend/src/components/layout/toolbar.rs

@@ -1,64 +1,55 @@
 use leptos::prelude::*;
-use crate::components::torrent::add_torrent::AddTorrentDialog;
+use icons::{PanelLeft, Plus};
+use crate::components::torrent::add_torrent::AddTorrentDialogContent;
+use crate::components::ui::button::{ButtonVariant, ButtonSize};
+use crate::components::ui::sheet::{Sheet, SheetContent, SheetTrigger, SheetDirection};
+use crate::components::ui::dialog::{Dialog, DialogContent, DialogTrigger};
+use crate::components::layout::sidebar::Sidebar;
 
 #[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
+            // Sol kısım: Menü butonu (Mobil) + Add Torrent
             <div class="flex items-center gap-3">
-                // Mobile Menu Trigger
-                <button
-                    class="inline-flex items-center justify-center size-9 rounded-md hover:bg-accent hover:text-accent-foreground lg:hidden"
-                    on:click=move |_| is_mobile_menu_open.update(|v| *v = !*v)
-                >
-                    <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
-                    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)
-                >
-                    <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>
-            </div>
-
-            // 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>
+                // --- MOBILE SHEET (SIDEBAR) ---
+                <div class="lg:hidden">
+                    <Sheet>
+                        <SheetTrigger variant=ButtonVariant::Ghost size=ButtonSize::Icon class="size-9">
+                            <PanelLeft class="size-5" />
+                            <span class="hidden">"Menüyü Aç"</span>
+                        </SheetTrigger>
+                        <SheetContent 
+                            direction=SheetDirection::Left 
+                            class="p-0 w-[18rem] bg-card border-r border-border"
+                            hide_close_button=true
+                        >
+                            <div class="flex flex-col h-full overflow-hidden">
+                                <Sidebar />
+                            </div>
+                        </SheetContent>
+                    </Sheet>
                 </div>
+                
+                <Dialog>
+                    <DialogTrigger 
+                        variant=ButtonVariant::Default 
+                        class="gap-2"
+                    >
+                        <Plus class="w-4 h-4 md:w-5 md:h-5" />
+                        <span class="hidden sm:inline">"Add Torrent"</span>
+                        <span class="sm:hidden">"Add"</span>
+                    </DialogTrigger>
+                    <DialogContent id="add-torrent-dialog" class="sm:max-w-[425px]">
+                        <AddTorrentDialogContent />
+                    </DialogContent>
+                </Dialog>
             </div>
 
-            <Show when=move || show_add_modal.0.get()>
-                <AddTorrentDialog on_close=Callback::new(move |()| show_add_modal.1.set(false)) />
-            </Show>
+            // Sağ kısım boş
+            <div class="flex flex-1 items-center justify-end gap-2">
+            </div>
         </div>
     }
-}
+}

frontend/src/components/torrent/add_torrent.rs

@@ -1,15 +1,15 @@
 use leptos::prelude::*;
 use leptos::task::spawn_local;
+use wasm_bindgen::JsCast;
 use crate::components::ui::input::{Input, InputType};
-use crate::store::TorrentStore;
 use crate::api;
+use crate::components::ui::button::Button;
+use crate::components::ui::dialog::{
+    DialogBody, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose
+};
 
 #[component]
-pub fn AddTorrentDialog(
-    on_close: Callback<()>,
-) -> impl IntoView {
-    let _store = use_context::<TorrentStore>().expect("TorrentStore not provided");
-
+pub fn AddTorrentDialogContent() -> impl IntoView {
     let uri = RwSignal::new(String::new());
     let is_loading = signal(false);
     let error_msg = signal(Option::<String>::None);
@@ -19,20 +19,30 @@ pub fn AddTorrentDialog(
         let uri_val = uri.get();
         
         if uri_val.is_empty() {
-            error_msg.1.set(Some("Please enter a Magnet URI or URL".to_string()));
+            error_msg.1.set(Some("Lütfen bir Magnet URI veya URL girin".to_string()));
             return;
         }
 
         is_loading.1.set(true);
         error_msg.1.set(None);
 
-        let on_close = on_close.clone();
         spawn_local(async move {
             match api::torrent::add(&uri_val).await {
                 Ok(_) => {
                     log::info!("Torrent added successfully");
                     crate::store::toast_success("Torrent başarıyla eklendi");
-                    on_close.run(());
+                    
+                    // Programmatically close the dialog by triggering the close button
+                    if let Some(doc) = web_sys::window().and_then(|w| w.document()) {
+                        if let Some(el) = doc.get_element_by_id("add-torrent-dialog") {
+                            if let Some(close_btn) = el.query_selector("[data-dialog-close]").ok().flatten() {
+                                let _ = close_btn.dyn_into::<web_sys::HtmlElement>().map(|btn| btn.click());
+                            }
+                        }
+                    }
+                    
+                    uri.set(String::new());
+                    is_loading.1.set(false);
                 }
                 Err(e) => {
                     log::error!("Failed to add torrent: {:?}", e);
@@ -43,29 +53,16 @@ pub fn AddTorrentDialog(
         });
     };
 
-    let handle_backdrop = {
-        let on_close = on_close.clone();
-        move |e: web_sys::MouseEvent| {
-            e.stop_propagation();
-            on_close.run(());
-        }
-    };
-
     view! {
-        // Backdrop overlay
-        <div
-            class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm"
-            on:click=handle_backdrop
-        />
-        // Dialog panel
-        <div class="fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-card p-6 shadow-lg rounded-lg sm:max-w-[425px]">
-            // Header
-            <div class="flex flex-col space-y-1.5 text-center sm:text-left">
-                <h2 class="text-lg font-semibold leading-none tracking-tight">"Add Torrent"</h2>
-                <p class="text-sm text-muted-foreground">"Enter a Magnet link or a .torrent file URL."</p>
-            </div>
+        <DialogBody>
+            <DialogHeader>
+                <DialogTitle>"Add Torrent"</DialogTitle>
+                <DialogDescription>
+                    "Enter a Magnet link or a .torrent file URL."
+                </DialogDescription>
+            </DialogHeader>
             
-            <form on:submit=handle_submit class="space-y-4">
+            <form on:submit=handle_submit class="space-y-4 pt-4">
                 <Input
                     r#type=InputType::Text
                     placeholder="magnet:?xt=urn:btih:..."
@@ -79,18 +76,13 @@ pub fn AddTorrentDialog(
                     </div>
                 })}
 
-                <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
-                    <button
-                        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(())
-                    >
+                <DialogFooter class="pt-2">
+                    <DialogClose>
                         "Cancel"
-                    </button>
-                    <button
-                        type="submit"
-                        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()
+                    </DialogClose>
+                    <Button
+                        attr:r#type="submit"
+                        attr:disabled=move || is_loading.0.get()
                     >
                         {move || if is_loading.0.get() {
                             leptos::either::Either::Left(view! { 
@@ -100,21 +92,9 @@ pub fn AddTorrentDialog(
                         } else {
                             leptos::either::Either::Right(view! { "Add" })
                         }}
-                    </button>
-                </div>
+                    </Button>
+                </DialogFooter>
             </form>
-
-            // Close button (X)
-            <button 
-                class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none"
-                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">
-                    <path d="M18 6 6 18"></path>
-                    <path d="m6 6 12 12"></path>
-                </svg>
-                <span class="sr-only">"Close"</span>
-            </button>
-        </div>
+        </DialogBody>
     }
-}
+}

frontend/src/components/torrent/table.rs

@@ -1,11 +1,43 @@
 use leptos::prelude::*;
 use leptos::task::spawn_local;
+use wasm_bindgen::JsCast;
+use std::collections::HashSet;
+use icons::{ArrowUpDown, Inbox, Settings2, Play, Square, Trash2, Ellipsis, ArrowUp, ArrowDown, Check, ListFilter};
 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::table::*;
+use crate::components::ui::data_table::*;
+use crate::components::ui::checkbox::Checkbox;
+use crate::components::ui::badge::{Badge, BadgeVariant};
+use crate::components::ui::button::{Button, ButtonVariant};
+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::{
+    AlertDialog,
+    AlertDialogBody,
+    AlertDialogClose,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+};
+use tailwind_fuse::tw_merge;
+
+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"];
@@ -50,8 +82,16 @@ 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 filtered_hashes = Memo::new(move |_| {
+    let sorted_hashes_data = Memo::new(move |_| {
         let torrents_map = store.torrents.get();
         let filter = store.filter.get();
         let search = store.search_query.get();
@@ -90,7 +130,30 @@ pub fn TorrentTable() -> impl IntoView {
             };
             if dir == SortDirection::Descending { cmp.reverse() } else { cmp }
         });
-        torrents.into_iter().map(|t| t.hash.clone()).collect::<Vec<String>>()
+        torrents
+    });
+
+    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| {
@@ -104,13 +167,35 @@ pub fn TorrentTable() -> impl IntoView {
         }
     };
 
-    let sort_arrow = move |col: SortColumn| {
-        if sort_col.0.get() == col {
-            match sort_dir.0.get() {
-                SortDirection::Ascending => view! { <span class="ml-1 text-[10px]">"▲"</span> }.into_any(),
-                SortDirection::Descending => view! { <span class="ml-1 text-[10px]">"▼"</span> }.into_any(),
+    let sort_icon = move |col: SortColumn| {
+        let is_active = 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" };
+        view! { <ArrowUpDown class=class.to_string() /> }.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; }
             }
-        } else { view! { <span class="ml-1 text-[10px] opacity-0 group-hover:opacity-50 transition-opacity">"▲"</span> }.into_any() }
+            if success {
+                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)| {
@@ -133,76 +218,341 @@ pub fn TorrentTable() -> impl IntoView {
     });
 
     view! {
-        <div class="h-full bg-background relative flex flex-col overflow-hidden px-4 py-2">
-            // --- DESKTOP VIEW ---
-            <div class="hidden md:flex flex-col h-full overflow-hidden">
-                <TableWrapper class="flex-1 flex flex-col min-h-0 bg-card/50">
-                    <div class="flex-1 overflow-y-auto overflow-x-hidden">
-                        <Table class="w-full">
-                            <TableHeader class="sticky top-0 bg-muted/80 backdrop-blur-sm z-10">
-                                <TableRow class="hover:bg-transparent">
-                                    <TableHead class="cursor-pointer group select-none whitespace-nowrap" on:click=move |_| handle_sort(SortColumn::Name)>
-                                        <div class="flex items-center">"Name" {move || sort_arrow(SortColumn::Name)}</div>
-                                    </TableHead>
-                                    <TableHead class="w-24 cursor-pointer group select-none whitespace-nowrap" on:click=move |_| handle_sort(SortColumn::Size)>
-                                        <div class="flex items-center">"Size" {move || sort_arrow(SortColumn::Size)}</div>
-                                    </TableHead>
-                                    <TableHead class="w-48 cursor-pointer group select-none whitespace-nowrap" on:click=move |_| handle_sort(SortColumn::Progress)>
-                                        <div class="flex items-center">"Progress" {move || sort_arrow(SortColumn::Progress)}</div>
-                                    </TableHead>
-                                    <TableHead class="w-24 cursor-pointer group select-none whitespace-nowrap" on:click=move |_| handle_sort(SortColumn::Status)>
-                                        <div class="flex items-center">"Status" {move || sort_arrow(SortColumn::Status)}</div>
-                                    </TableHead>
-                                    <TableHead class="w-24 cursor-pointer group select-none whitespace-nowrap" on:click=move |_| handle_sort(SortColumn::DownSpeed)>
-                                        <div class="flex items-center">"DL Speed" {move || sort_arrow(SortColumn::DownSpeed)}</div>
-                                    </TableHead>
-                                    <TableHead class="w-24 cursor-pointer group select-none whitespace-nowrap" on:click=move |_| handle_sort(SortColumn::UpSpeed)>
-                                        <div class="flex items-center">"Up Speed" {move || sort_arrow(SortColumn::UpSpeed)}</div>
-                                    </TableHead>
-                                    <TableHead class="w-24 cursor-pointer group select-none whitespace-nowrap" on:click=move |_| handle_sort(SortColumn::ETA)>
-                                        <div class="flex items-center">"ETA" {move || sort_arrow(SortColumn::ETA)}</div>
-                                    </TableHead>
-                                    <TableHead class="w-32 cursor-pointer group select-none whitespace-nowrap" on:click=move |_| handle_sort(SortColumn::AddedDate)>
-                                        <div class="flex items-center">"Date" {move || sort_arrow(SortColumn::AddedDate)}</div>
-                                    </TableHead>
-                                </TableRow>
-                            </TableHeader>
-                            <TableBody>
-                                <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>
-                                        }
-                                    }
-                                } />
-                            </TableBody>
-                        </Table>
+        <div class="h-full bg-background relative flex flex-col overflow-hidden px-4 py-4 gap-4">
+            // --- TOPBAR ---
+            <div class="flex items-center justify-between gap-4">
+                <div class="flex items-center gap-2 flex-1 max-w-md">
+                    <Input
+                        class="h-9"
+                        placeholder="Torrent ara..."
+                        bind_value=store.search_query
+                    />
+                </div>
+
+                <div class="flex items-center gap-2">
+                    <Show when=move || has_selection.get()>
+                        <div class="flex items-center gap-2">
+                            <DropdownMenu>
+                                <DropdownMenuTrigger class="w-[140px] h-9 gap-2">
+                                    <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" />
+                                        
+                                        // Trigger the hidden AlertDialog from this menu item
+                                        <DropdownMenuItem class="text-destructive focus:bg-destructive/10 cursor-pointer" on:click=move |_| {
+                                            if let Some(trigger) = document().get_element_by_id("bulk-delete-trigger") {
+                                                let _ = trigger.dyn_into::<web_sys::HtmlElement>().map(|el: web_sys::HtmlElement| el.click());
+                                            }
+                                        }>
+                                            <Trash2 class="mr-2 size-4" /> "Toplu Sil..."
+                                        </DropdownMenuItem>
+                                    </DropdownMenuGroup>
+                                </DropdownMenuContent>
+                            </DropdownMenu>
+
+                            // Hidden AlertDialog moved outside the DropdownMenuContent to ensure proper centering
+                            <AlertDialog>
+                                <AlertDialogTrigger attr:id="bulk-delete-trigger" class="hidden">""</AlertDialogTrigger>
+                                <AlertDialogContent class="sm:max-w-[425px]">
+                                    <AlertDialogBody>
+                                        <AlertDialogHeader class="space-y-3">
+                                            <AlertDialogTitle class="text-destructive flex items-center gap-2 text-xl">
+                                                <Trash2 class="size-6" />
+                                                "Toplu Silme Onayı"
+                                            </AlertDialogTitle>
+                                            <AlertDialogDescription class="text-sm leading-relaxed text-left">
+                                                {move || format!("Seçili {} adet torrent silinecek. Lütfen silme yöntemini seçin:", selected_count.get())}
+                                                <div class="mt-4 p-4 bg-destructive/5 rounded-lg border border-destructive/10 text-xs text-destructive/80 font-medium">
+                                                    "⚠️ Dikkat: Verilerle birlikte silme işlemi dosyaları diskten de kalıcı olarak kaldıracaktır."
+                                                </div>
+                                            </AlertDialogDescription>
+                                        </AlertDialogHeader>
+                                        <AlertDialogFooter class="mt-6">
+                                            <div class="flex flex-col-reverse sm:flex-row gap-3 w-full sm:justify-end">
+                                                <AlertDialogClose class="sm:flex-1 md:flex-none">"Vazgeç"</AlertDialogClose>
+                                                <div class="flex flex-col sm:flex-row gap-2">
+                                                    <Button 
+                                                        variant=ButtonVariant::Secondary
+                                                        class="w-full sm:w-auto font-medium"
+                                                        on:click=move |_| bulk_action("delete")
+                                                    >
+                                                        "Sadece Sil"
+                                                    </Button>
+                                                    <Button 
+                                                        variant=ButtonVariant::Destructive
+                                                        class="w-full sm:w-auto font-bold"
+                                                        on:click=move |_| bulk_action("delete_with_data")
+                                                    >
+                                                        "Verilerle Sil"
+                                                    </Button>
+                                                </div>
+                                            </div>
+                                        </AlertDialogFooter>
+                                    </AlertDialogBody>
+                                </AlertDialogContent>
+                            </AlertDialog>
+                        </div>
+                    </Show>
+
+                    // Mobile Sort Menu
+                    <div class="block md:hidden">
+                        <DropdownMenu>
+                            <DropdownMenuTrigger class="w-[100px] h-9 gap-2 text-xs">
+                                <ListFilter class="size-4" />
+                                "Sırala"
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent class="w-56">
+                                <DropdownMenuLabel>"Sıralama Ölçütü"</DropdownMenuLabel>
+                                <DropdownMenuGroup class="mt-2">
+                                    {move || {
+                                        let current_col = sort_col.0.get();
+                                        let current_dir = sort_dir.0.get();
+                                        
+                                        let sort_items = vec![
+                                            (SortColumn::Name, "İsim"),
+                                            (SortColumn::Size, "Boyut"),
+                                            (SortColumn::Progress, "İlerleme"),
+                                            (SortColumn::Status, "Durum"),
+                                            (SortColumn::DownSpeed, "DL Hızı"),
+                                            (SortColumn::UpSpeed, "UP Hızı"),
+                                            (SortColumn::ETA, "Kalan Süre"),
+                                            (SortColumn::AddedDate, "Tarih"),
+                                        ];
+
+                                        sort_items.into_iter().map(|(col, label)| {
+                                            let is_active = current_col == col;
+                                            view! {
+                                                <DropdownMenuItem on:click=move |_| handle_sort(col)>
+                                                    <div class="flex items-center justify-between w-full">
+                                                        <div class="flex items-center gap-2">
+                                                            {if is_active { view! { <Check class="size-4 text-primary" /> }.into_any() } else { view! { <div class="size-4" /> }.into_any() }}
+                                                            <span class=if is_active { "font-bold text-primary" } else { "" }>{label}</span>
+                                                        </div>
+                                                        {if is_active {
+                                                            match current_dir {
+                                                                SortDirection::Ascending => view! { <ArrowUp class="size-3 opacity-50" /> }.into_any(),
+                                                                SortDirection::Descending => view! { <ArrowDown class="size-3 opacity-50" /> }.into_any(),
+                                                            }
+                                                        } else { view! { "" }.into_any() }}
+                                                    </div>
+                                                </DropdownMenuItem>
+                                            }.into_any()
+                                        }).collect_view()
+                                    }}
+                                </DropdownMenuGroup>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
                     </div>
-                </TableWrapper>
+
+                    // Desktop Columns Menu
+                    <div class="hidden md:flex">
+                        <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>
             </div>
 
-            // --- MOBILE VIEW ---
-            <div class="md:hidden flex flex-col h-full bg-muted/10 relative overflow-hidden">
-                <div class="flex-1 overflow-y-auto p-3 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! { 
-                                 <div class="pb-3">
-                                    <TorrentContextMenu torrent_hash=h on_action=on_action.clone()>
-                                        <TorrentCard hash=hash.clone() /> 
-                                    </TorrentContextMenu>
-                                </div>
+            // --- MAIN CONTENT ---
+            <div class="flex-1 min-h-0 overflow-hidden">
+                // Desktop Table View
+                <DataTableWrapper class="hidden md:block 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 transition-all duration-100 active:scale-[0.98] hover:bg-muted/30 hover:text-foreground" 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 transition-all duration-100 active:scale-[0.98] hover:bg-muted/30 hover:text-foreground" 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 transition-all duration-100 active:scale-[0.98] hover:bg-muted/30 hover:text-foreground" 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 transition-all duration-100 active:scale-[0.98] hover:bg-muted/30 hover:text-foreground" 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 transition-all duration-100 active:scale-[0.98] hover:bg-muted/30 hover:text-foreground 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 transition-all duration-100 active:scale-[0.98] hover:bg-muted/30 hover:text-foreground 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 transition-all duration-100 active:scale-[0.98] hover:bg-muted/30 hover:text-foreground 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 transition-all duration-100 active:scale-[0.98] hover:bg-muted/30 hover:text-foreground 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>
+
+                // Mobile Card View
+                <div class="block md:hidden h-full overflow-y-auto space-y-4 pb-32 px-1">
+                     <Show
+                        when=move || !filtered_hashes.get().is_empty()
+                        fallback=move || view! {
+                            <div class="flex flex-col items-center justify-center h-64 opacity-50 text-muted-foreground">
+                                <Inbox class="size-12 mb-2" />
+                                <p>"Torrent Bulunamadı"</p>
+                            </div>
+                        }.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! { 
+                                    <TorrentCard 
+                                        hash=hash.clone() 
+                                        on_action=on_action.clone() 
+                                        is_selected=is_selected
+                                        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>
                 </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">
+                <div class="flex gap-4">
+                    <span>{move || format!("Toplam: {} torrent", filtered_hashes.get().len())}</span>
+                    <Show when=move || has_selection.get()>
+                        <span class="text-primary font-medium">{move || format!("{} torrent seçili", selected_count.get())}</span>
+                    </Show>
+                </div>
+                <div>"VibeTorrent v3"</div>
+            </div>
         </div>
     }.into_any()
 }
@@ -210,6 +560,10 @@ pub fn TorrentTable() -> impl IntoView {
 #[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();
@@ -220,65 +574,125 @@ 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_selected = Memo::new(move |_| {
+                    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_for_title = t_name.clone();
-                    let t_name_for_content = t_name.clone();
+                    let t_name_stored = StoredValue::new(t_name.clone());
+                    let h_for_menu = stored_hash.get_value();
 
                     view! {
-                        <TableRow 
-                            class="cursor-pointer h-12"
-                            attr:data-state=move || if is_selected.get() { "selected" } else { "" }
-                            on:click=move |_| store.selected_torrent.set(Some(stored_hash.get_value()))
-                        >
-                            <TableCell class="font-medium truncate max-w-[200px] lg:max-w-md px-2 py-0 h-12 flex items-center border-0" attr:title=t_name_for_title>
-                                {t_name_for_content}
-                            </TableCell>
-                            <TableCell class="font-mono text-xs text-muted-foreground px-2">
-                                {format_bytes(t.size)}
-                            </TableCell>
-                            <TableCell class="px-2">
-                                <div class="flex items-center gap-2">
-                                    <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>
-                                    <span class="text-[10px] text-muted-foreground w-10 text-right">{format!("{:.1}%", t.percent_complete)}</span>
-                                </div>
-                            </TableCell>
-                            <TableCell class={format!("px-2 text-xs font-semibold {}", status_color)}>
-                                {format!("{:?}", t.status)}
-                            </TableCell>
-                            <TableCell class="text-right font-mono text-xs text-green-600 dark:text-green-500 px-2 whitespace-nowrap">
-                                {format_speed(t.down_rate)}
-                            </TableCell>
-                            <TableCell class="text-right font-mono text-xs text-blue-600 dark:text-blue-500 px-2 whitespace-nowrap">
-                                {format_speed(t.up_rate)}
-                            </TableCell>
-                            <TableCell class="text-right font-mono text-xs text-muted-foreground px-2 whitespace-nowrap">
-                                {format_duration(t.eta)}
-                            </TableCell>
-                            <TableCell class="text-right font-mono text-xs text-muted-foreground px-2 whitespace-nowrap">
-                                {format_date(t.added_date)}
-                            </TableCell>
-                        </TableRow>
+                        <TorrentContextMenu torrent_hash=h_for_menu on_action=on_action.clone()>
+                            <DataTableRow 
+                                class="cursor-pointer group h-10"
+                                attr:data-state=move || if is_selected.get() || is_active_selection.get() { "selected" } else { "" }
+                                on:click=move |_| store.selected_torrent.set(Some(stored_hash.get_value()))
+                            >
+                                <DataTableCell class="w-12 px-4">
+                                    <Checkbox 
+                                        checked=is_selected 
+                                        on_checked_change=on_select 
+                                    />
+                                </DataTableCell>
+                                
+                                {move || visible_columns.get().contains("Name").then({
+                                    move || view! {
+                                        <DataTableCell class="font-medium truncate max-w-[200px] lg:max-w-md" attr:title=t_name_stored.get_value()>
+                                            {t_name_stored.get_value()}
+                                        </DataTableCell>
+                                    }
+                                }).into_any()}
+
+                                {move || visible_columns.get().contains("Size").then({
+                                    let size_bytes = t.size;
+                                    move || {
+                                        let size_str = format_bytes(size_bytes);
+                                        view! { <DataTableCell class="font-mono text-xs text-muted-foreground whitespace-nowrap">{size_str}</DataTableCell> }
+                                    }
+                                }).into_any()}
+
+                                {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 variant = match t.status {
+                                        shared::TorrentStatus::Seeding => BadgeVariant::Success,
+                                        shared::TorrentStatus::Downloading => BadgeVariant::Info,
+                                        shared::TorrentStatus::Paused => BadgeVariant::Warning,
+                                        shared::TorrentStatus::Error => BadgeVariant::Destructive,
+                                        _ => BadgeVariant::Secondary,
+                                    };
+                                    move || view! { 
+                                        <DataTableCell class="whitespace-nowrap">
+                                            <Badge variant=variant>{status_text.clone()}</Badge>
+                                        </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)>,
+    is_selected: Signal<bool>,
+    on_select: Callback<bool>,
 ) -> impl IntoView {
     let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
     let h = hash.clone();
@@ -289,53 +703,82 @@ 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 status_variant = match t.status { 
+                        shared::TorrentStatus::Seeding => BadgeVariant::Success, 
+                        shared::TorrentStatus::Downloading => BadgeVariant::Info, 
+                        shared::TorrentStatus::Paused => BadgeVariant::Warning, 
+                        shared::TorrentStatus::Error => BadgeVariant::Destructive, 
+                        _ => BadgeVariant::Secondary 
+                    };
+                    let h_for_menu = stored_hash.get_value();
 
                     view! {
-                        <div
-                            class=move || {
-                                let selected = store.selected_torrent.get();
-                                let is_selected = selected.as_deref() == Some(stored_hash.get_value().as_str());
-                                if is_selected {
-                                    "ring-2 ring-primary rounded-lg transition-all"
-                                } else {
-                                    "transition-all"
+                        <TorrentContextMenu torrent_hash=h_for_menu on_action=on_action.clone()>
+                            <div
+                                class=move || tw_merge!(
+                                    "rounded-lg transition-all duration-200 border cursor-pointer select-none overflow-hidden active:scale-[0.98]",
+                                    if is_selected.get() { 
+                                        "bg-primary/10 border-primary shadow-sm" 
+                                    } else { 
+                                        "bg-card border-border hover:border-primary/50" 
+                                    }
+                                )
+                                on:click=move |_| {
+                                    let current = is_selected.get();
+                                    on_select.run(!current);
+                                    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">
-                                <div class="flex justify-between items-start gap-2">
-                                    <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>
-                            <CardBody 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 class="p-4 space-y-3">
+                                    <div class="flex justify-between items-start gap-3">
+                                        <div class="flex-1 min-w-0">
+                                            <h3 class="text-sm font-bold leading-tight line-clamp-2 break-all">{t_name.clone()}</h3>
+                                        </div>
+                                        <Badge variant=status_variant class="uppercase tracking-wider text-[10px]">
+                                            {format!("{:?}", t.status)}
+                                        </Badge>
                                     </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 class="space-y-1.5">
+                                        <div class="flex justify-between text-[10px] font-medium text-muted-foreground">
+                                            <span class="flex items-center gap-1">
+                                                <span class="opacity-70">"Boyut:"</span> {format_bytes(t.size)}
+                                            </span>
+                                            <span class="font-bold text-primary">{format!("{:.1}%", t.percent_complete)}</span>
+                                        </div>
+                                        <div class="h-2 w-full bg-secondary rounded-full overflow-hidden">
+                                            <div class="h-full bg-primary transition-all duration-500 ease-out" style=format!("width: {}%", t.percent_complete)></div>
+                                        </div>
+                                    </div>
+
+                                    <div class="grid grid-cols-2 gap-y-2 gap-x-4 text-[10px] font-mono pt-2 border-t border-border/40">
+                                        <div class="flex flex-col gap-0.5">
+                                            <span class="text-muted-foreground uppercase text-[8px] tracking-tighter">"İndirme"</span>
+                                            <span class="text-blue-600 dark:text-blue-400 font-bold">{format_speed(t.down_rate)}</span>
+                                        </div>
+                                        <div class="flex flex-col gap-0.5">
+                                            <span class="text-muted-foreground uppercase text-[8px] tracking-tighter">"Gönderme"</span>
+                                            <span class="text-green-600 dark:text-green-400 font-bold">{format_speed(t.up_rate)}</span>
+                                        </div>
+                                        <div class="flex flex-col gap-0.5">
+                                            <span class="text-muted-foreground uppercase text-[8px] tracking-tighter">"Kalan Süre"</span>
+                                            <span class="text-foreground font-medium">{format_duration(t.eta)}</span>
+                                        </div>
+                                        <div class="flex flex-col gap-0.5 items-end text-right">
+                                            <span class="text-muted-foreground uppercase text-[8px] tracking-tighter">"Eklenme"</span>
+                                            <span class="text-foreground/70">{format_date(t.added_date)}</span>
+                                        </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 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 text-green-600 dark:text-green-500"><span>"UP"</span><span>{format_speed(t.up_rate)}</span></div>
-                                    <div class="flex flex-col"><span>"ETA"</span><span>{format_duration(t.eta)}</span></div>
-                                    <div class="flex flex-col text-right"><span>"DATE"</span><span>{format_date(t.added_date)}</span></div>
-                                </div>
-                            </CardBody>
-                        </Card>
-                        </div>
-                    }
+                            </div>
+                        </TorrentContextMenu>
+                    }.into_any()
                 }
             }
         </Show>
-    }
-}
+    }.into_any()
+}

frontend/src/components/ui/accordion.rs

@@ -0,0 +1,39 @@
+use leptos::prelude::*;
+use tw_merge::tw_merge;
+
+#[component]
+pub fn Accordion(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!("w-full", class);
+    view! { <div class=class>{children()}</div> }
+}
+
+#[component]
+pub fn AccordionItem(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!("border-b", class);
+    view! { <div class=class>{children()}</div> }
+}
+
+#[component]
+pub fn AccordionHeader(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!("flex", class);
+    view! { <div class=class>{children()}</div> }
+}
+
+#[component]
+pub fn AccordionTrigger(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        class
+    );
+    view! {
+        <button type="button" class=class>
+            {children()}
+        </button>
+    }
+}
+
+#[component]
+pub fn AccordionContent(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!("overflow-hidden text-sm transition-all", class);
+    view! { <div class=class>{children()}</div> }
+}

frontend/src/components/ui/alert_dialog.rs

@@ -0,0 +1,94 @@
+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>
+    }
+}

frontend/src/components/ui/badge.rs

@@ -0,0 +1,43 @@
+use leptos::prelude::*;
+use tailwind_fuse::tw_merge;
+
+#[derive(Clone, Copy, PartialEq, Eq, Default, strum::Display)]
+pub enum BadgeVariant {
+    #[default]
+    Default,
+    Secondary,
+    Outline,
+    Destructive,
+    Success,
+    Warning,
+    Info,
+}
+
+#[component]
+pub fn Badge(
+    children: Children,
+    #[prop(optional, default = BadgeVariant::Default)] variant: BadgeVariant,
+    #[prop(optional, into)] class: String,
+) -> impl IntoView {
+    let variant_classes = match variant {
+        BadgeVariant::Default => "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        BadgeVariant::Secondary => "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        BadgeVariant::Outline => "text-foreground",
+        BadgeVariant::Destructive => "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        BadgeVariant::Success => "border-transparent bg-green-500/10 text-green-600 dark:text-green-400 border-green-500/20",
+        BadgeVariant::Warning => "border-transparent bg-yellow-500/10 text-yellow-600 dark:text-yellow-400 border-yellow-500/20",
+        BadgeVariant::Info => "border-transparent bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20",
+    };
+
+    let class = tw_merge!(
+        "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",
+        variant_classes,
+        class
+    );
+
+    view! {
+        <div class=class>
+            {children()}
+        </div>
+    }
+}

frontend/src/components/ui/button.rs

@@ -1,9 +1,11 @@
 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]",
+        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.
         variants: {
             variant: {
                 Default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
@@ -11,13 +13,21 @@ 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: {
@@ -26,4 +36,4 @@ variants! {
             support_aria_current: true
         }
     }
-}
+}

frontend/src/components/ui/checkbox.rs

@@ -0,0 +1,43 @@
+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>
+    }
+}

frontend/src/components/ui/context_menu.rs

@@ -209,7 +209,7 @@ pub fn ContextMenuTrigger(
             class=trigger_class
             data-name="ContextMenuTrigger"
             data-context-trigger=ctx.target_id
-            on:contextmenu=move |_| {
+            on:contextmenu=move |e: web_sys::MouseEvent| {
                 if let Some(cb) = on_open {
                     cb.run(());
                 }
@@ -230,15 +230,13 @@ pub fn ContextMenuContent(
 ) -> impl IntoView {
     let ctx = expect_context::<ContextMenuContext>();
 
-    let base_classes = "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 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! {
-        <script src="/lock_scroll.js"></script>
-
         <div
             data-name="ContextMenuContent"
             class=class

frontend/src/components/ui/data_table.rs

@@ -0,0 +1,6 @@
+// * 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,
+};

frontend/src/components/ui/dialog.rs

@@ -0,0 +1,238 @@
+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(optional, into)] id: Option<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!(
+        "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 backdrop_id_for_script = backdrop_id.clone();
+    let backdrop_behavior = if close_on_backdrop_click { "auto" } else { "manual" };
+
+    // Use provided id or fallback to random target_id
+    let final_id = id.unwrap_or_else(|| ctx.target_id.clone());
+    let final_id_for_script = final_id.clone();
+    let trigger_id_for_script = ctx.target_id.clone();
+
+    view! {
+        <script src="/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=final_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 = () => {{
+                            if (window.ScrollLock) 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';
+                            window.ScrollLock.unlock(200);
+                        }};
+
+                        trigger.addEventListener('click', openDialog);
+                        dialog.querySelectorAll('[data-dialog-close]').forEach(btn => {{
+                            btn.addEventListener('click', closeDialog);
+                        }});
+                        backdrop.addEventListener('click', () => {{
+                            if (dialog.getAttribute('data-backdrop') === 'auto') {{
+                                closeDialog();
+                            }}
+                        }});
+                        document.addEventListener('keydown', (e) => {{
+                            if (e.key === 'Escape' && dialog.getAttribute('data-state') === 'open') {{
+                                e.preventDefault();
+                                closeDialog();
+                            }}
+                        }});
+                    }};
+                    setupDialog();
+                }})();
+                "#,
+                final_id_for_script,
+                backdrop_id_for_script,
+                trigger_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>
+    }
+}

frontend/src/components/ui/dropdown_menu.rs

@@ -0,0 +1,536 @@
+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>
+    }
+}

frontend/src/components/ui/empty.rs

@@ -0,0 +1,35 @@
+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
+        }
+    }
+}

frontend/src/components/ui/mod.rs

@@ -1,8 +1,23 @@
+pub mod accordion;
+pub mod alert_dialog;
+pub mod badge;
 pub mod button;
 pub mod card;
-pub mod input;
-pub mod toast;
+pub mod checkbox;
 pub mod context_menu;
-pub mod theme_toggle;
+pub mod data_table;
+pub mod dialog;
+pub mod dropdown_menu;
+pub mod empty;
+pub mod input;
+pub mod multi_select;
+pub mod select;
+pub mod separator;
+pub mod sheet;
+pub mod sidenav;
+pub mod skeleton;
 pub mod svg_icon;
-pub mod table;
+pub mod switch;
+pub mod table;
+pub mod theme_toggle;
+pub mod toast;

frontend/src/components/ui/multi_select.rs

@@ -0,0 +1,294 @@
+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()
+}

frontend/src/components/ui/select.rs

@@ -0,0 +1,311 @@
+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()
+}

frontend/src/components/ui/separator.rs

@@ -0,0 +1,20 @@
+use leptos::prelude::*;
+use tailwind_fuse::tw_merge;
+
+#[derive(Clone, Copy, PartialEq, Eq, Default, Debug)]
+pub enum SeparatorOrientation { #[default] Horizontal, Vertical }
+
+#[component]
+pub fn Separator(
+    #[prop(into, optional)] orientation: Signal<SeparatorOrientation>,
+    #[prop(into, optional)] class: String,
+) -> impl IntoView {
+    let class_signal = move || {
+        let orient_class = match orientation.get() {
+            SeparatorOrientation::Horizontal => "h-[1px] w-full",
+            SeparatorOrientation::Vertical => "h-full w-[1px]",
+        };
+        tw_merge!("shrink-0 bg-border", orient_class, class.clone())
+    };
+    view! { <div class=class_signal role="none" /> }
+}

frontend/src/components/ui/sheet.rs

@@ -0,0 +1,239 @@
+use icons::X;
+use leptos::context::Provider;
+use leptos::prelude::*;
+use leptos_ui::clx;
+use tw_merge::*;
+
+use super::button::ButtonSize;
+use crate::components::hooks::use_random::use_random_id_for;
+use crate::components::ui::button::{Button, ButtonVariant};
+
+mod components {
+    use super::*;
+    clx! {SheetTitle, h2, "font-bold text-2xl"}
+    clx! {SheetDescription, p, "text-muted-foreground"}
+    clx! {SheetBody, div, "flex flex-col gap-4"}
+    clx! {SheetFooter, footer, "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"}
+}
+
+pub use components::*;
+
+/* ========================================================== */
+/*                     ✨ CONTEXT ✨                          */
+/* ========================================================== */
+
+#[derive(Clone)]
+pub struct SheetContext {
+    pub target_id: String,
+}
+
+/* ========================================================== */
+/*                     ✨ FUNCTIONS ✨                        */
+/* ========================================================== */
+
+pub type SheetVariant = ButtonVariant;
+pub type SheetSize = ButtonSize;
+
+#[component]
+pub fn Sheet(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let sheet_target_id = use_random_id_for("sheet");
+    let ctx = SheetContext { target_id: sheet_target_id };
+
+    let merged_class = tw_merge!("", class);
+
+    view! {
+        <Provider value=ctx>
+            <div data-name="Sheet" class=merged_class>
+                {children()}
+            </div>
+        </Provider>
+    }
+}
+
+#[component]
+pub fn SheetTrigger(
+    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::<SheetContext>();
+    let trigger_id = format!("trigger_{}", ctx.target_id);
+
+    view! {
+        <Button class=class attr:id=trigger_id attr:data-sheet-trigger=ctx.target_id variant=variant size=size>
+            {children()}
+        </Button>
+    }
+}
+
+#[component]
+pub fn SheetClose(
+    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::<SheetContext>();
+
+    view! {
+        <Button class=class attr:data-sheet-close=ctx.target_id attr:aria-label="Close sheet" variant=variant size=size>
+            {children()}
+        </Button>
+    }
+}
+
+#[component]
+pub fn SheetContent(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(default = SheetDirection::Right)] direction: SheetDirection,
+    #[prop(into, optional)] hide_close_button: Option<bool>,
+) -> impl IntoView {
+    let ctx = expect_context::<SheetContext>();
+
+    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 merged_class = tw_merge!(
+        "fixed z-100 bg-card shadow-lg p-6 transition-transform duration-300 overflow-y-auto overscroll-y-contain",
+        direction.initial_position(),
+        direction.closed_class(),
+        class
+    );
+
+    view! {
+        <div
+            data-name="SheetBackdrop"
+            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="SheetContent"
+            class=merged_class
+            id=ctx.target_id
+            data-direction=direction.to_string()
+            data-state="closed"
+            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-sheet-close=ctx.target_id.clone()
+                aria-label="Close sheet"
+            >
+                <span class="hidden">"Close Sheet"</span>
+                <X />
+            </button>
+
+            {children()}
+        </div>
+
+        <script>
+            {format!(
+                r#"
+                (function() {{
+                    const setupSheet = () => {{
+                        const sheet = document.querySelector('#{}');
+                        const backdrop = document.querySelector('#{}');
+                        const trigger = document.querySelector('[data-sheet-trigger="{}"]');
+
+                        if (!sheet || !backdrop || !trigger) {{
+                            setTimeout(setupSheet, 50);
+                            return;
+                        }}
+
+                        if (sheet.hasAttribute('data-initialized')) {{
+                            return;
+                        }}
+                        sheet.setAttribute('data-initialized', 'true');
+
+                        const openSheet = () => {{
+                            if (window.ScrollLock) window.ScrollLock.lock();
+                            sheet.setAttribute('data-state', 'open');
+                            backdrop.setAttribute('data-state', 'open');
+                            sheet.style.pointerEvents = 'auto';
+                            backdrop.style.pointerEvents = 'auto';
+                            const direction = sheet.getAttribute('data-direction');
+                            sheet.classList.remove('translate-x-full', '-translate-x-full', 'translate-y-full', '-translate-y-full');
+                            sheet.classList.add('translate-x-0', 'translate-y-0');
+                        }};
+
+                        const closeSheet = () => {{
+                            sheet.setAttribute('data-state', 'closed');
+                            backdrop.setAttribute('data-state', 'closed');
+                            sheet.style.pointerEvents = 'none';
+                            backdrop.style.pointerEvents = 'none';
+                            const direction = sheet.getAttribute('data-direction');
+                            sheet.classList.remove('translate-x-0', 'translate-y-0');
+                            if (direction === 'Right') sheet.classList.add('translate-x-full');
+                            else if (direction === 'Left') sheet.classList.add('-translate-x-full');
+                            else if (direction === 'Top') sheet.classList.add('-translate-y-full');
+                            else if (direction === 'Bottom') sheet.classList.add('translate-y-full');
+                            if (window.ScrollLock) window.ScrollLock.unlock(300);
+                        }};
+
+                        trigger.addEventListener('click', openSheet);
+                        const closeButtons = sheet.querySelectorAll('[data-sheet-close]');
+                        closeButtons.forEach(btn => btn.addEventListener('click', closeSheet));
+                        backdrop.addEventListener('click', closeSheet);
+                        document.addEventListener('keydown', (e) => {{
+                            if (e.key === 'Escape' && sheet.getAttribute('data-state') === 'open') {{
+                                e.preventDefault();
+                                closeSheet();
+                            }}
+                        }});
+                    }};
+
+                    if (document.readyState === 'loading') {{
+                        document.addEventListener('DOMContentLoaded', setupSheet);
+                    }} else {{
+                        setupSheet();
+                    }}
+                }})();
+                "#,
+                target_id_for_script,
+                backdrop_id_for_script,
+                target_id_for_script,
+            )}
+        </script>
+    }.into_any()
+}
+
+/* ========================================================== */
+/*                     ✨ ENUM ✨                             */
+/* ========================================================== */
+
+#[derive(Clone, Copy, strum::AsRefStr, strum::Display)]
+pub enum SheetDirection {
+    Right,
+    Left,
+    Top,
+    Bottom,
+}
+
+impl SheetDirection {
+    fn closed_class(self) -> &'static str {
+        match self {
+            SheetDirection::Right => "translate-x-full",
+            SheetDirection::Left => "-translate-x-full",
+            SheetDirection::Top => "-translate-y-full",
+            SheetDirection::Bottom => "translate-y-full",
+        }
+    }
+
+    fn initial_position(self) -> &'static str {
+        match self {
+            SheetDirection::Right => "top-0 right-0 h-full w-[400px]",
+            SheetDirection::Left => "top-0 left-0 h-full w-[400px]",
+            SheetDirection::Top => "top-0 left-0 w-full h-[400px]",
+            SheetDirection::Bottom => "bottom-0 left-0 w-full h-[400px]",
+        }
+    }
+}

frontend/src/components/ui/sidenav.rs

@@ -0,0 +1,79 @@
+use leptos::prelude::*;
+use tw_merge::tw_merge;
+
+#[derive(Clone, Copy, PartialEq, Eq, Default)]
+#[allow(dead_code)]
+pub enum SidenavState { #[default] Expanded, Collapsed }
+
+#[derive(Clone)]
+pub struct SidenavContext {
+    pub state: RwSignal<SidenavState>,
+}
+
+#[component]
+pub fn SidenavWrapper(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let state = RwSignal::new(SidenavState::Expanded);
+    provide_context(SidenavContext { state });
+    let class = tw_merge!("flex min-h-screen w-full bg-background", class);
+    view! { <div class=class>{children()}</div> }
+}
+
+#[component]
+pub fn Sidenav(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let ctx = expect_context::<SidenavContext>();
+    let class_signal = move || {
+        let width_class = match ctx.state.get() {
+            SidenavState::Expanded => "w-[var(--sidenav-width)]",
+            SidenavState::Collapsed => "w-[var(--sidenav-width-icon)]",
+        };
+        tw_merge!(
+            "hidden md:flex flex-col border-r bg-card transition-all duration-300",
+            width_class,
+            class.clone()
+        )
+    };
+    view! { <aside class=class_signal>{children()}</aside> }
+}
+
+#[component]
+pub fn SidenavInset(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!("flex flex-col flex-1 min-w-0", class);
+    view! { <main class=class>{children()}</main> }
+}
+
+#[component] pub fn SidenavHeader(children: Children) -> impl IntoView { view! { <div class="flex flex-col">{children()}</div> } }
+#[component] pub fn SidenavContent(children: Children) -> impl IntoView { view! { <div class="flex-1 overflow-auto">{children()}</div> } }
+#[component] pub fn SidenavFooter(children: Children) -> impl IntoView { view! { <div class="mt-auto">{children()}</div> } }
+#[component] pub fn SidenavGroup(children: Children) -> impl IntoView { view! { <div class="px-2 py-2">{children()}</div> } }
+#[component] pub fn SidenavGroupLabel(children: Children) -> impl IntoView { view! { <div class="px-2 py-1.5 text-xs font-medium text-muted-foreground">{children()}</div> } }
+#[component] pub fn SidenavGroupContent(children: Children) -> impl IntoView { view! { <div class="space-y-1">{children()}</div> } }
+#[component] pub fn SidenavMenu(children: Children) -> impl IntoView { view! { <nav class="grid gap-1">{children()}</nav> } }
+#[component] pub fn SidenavMenuItem(children: Children) -> impl IntoView { view! { <div>{children()}</div> } }
+
+#[derive(Clone, Copy, PartialEq, Eq, Default)]
+pub enum SidenavMenuButtonVariant { #[default] Default, Outline }
+
+#[component]
+pub fn SidenavMenuButton(
+    children: Children,
+    #[prop(into, optional)] variant: Signal<SidenavMenuButtonVariant>,
+    #[prop(into, optional)] class: Signal<String>,
+) -> impl IntoView {
+    let class_signal = move || {
+        let variant_class = if variant.get() == SidenavMenuButtonVariant::Outline { 
+            "border border-input bg-background shadow-xs" 
+        } else { 
+            "" 
+        };
+        tw_merge!(
+            "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground",
+            variant_class,
+            class.get()
+        )
+    };
+    view! { <button class=class_signal>{children()}</button> }
+}
+
+#[component] pub fn SidenavLink(children: Children, #[prop(into)] href: String) -> impl IntoView {
+    view! { <a href=href class="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium hover:bg-accent">{children()}</a> }
+}

frontend/src/components/ui/skeleton.rs

@@ -0,0 +1,13 @@
+use leptos::prelude::*;
+use tw_merge::tw_merge;
+
+#[component]
+pub fn Skeleton(
+    #[prop(optional, into)] class: String,
+) -> impl IntoView {
+    let class = tw_merge!(
+        "animate-pulse rounded-md bg-muted",
+        class
+    );
+    view! { <div class=class /> }
+}

frontend/src/components/ui/switch.rs

@@ -0,0 +1,42 @@
+use leptos::prelude::*;
+use tailwind_fuse::tw_merge;
+
+#[component]
+pub fn Switch(
+    #[prop(into)] checked: Signal<bool>,
+    #[prop(into, optional)] on_checked_change: Option<Callback<bool>>,
+    #[prop(into, optional)] class: String,
+    #[prop(into, optional)] disabled: Signal<bool>,
+) -> impl IntoView {
+    let checked_val = move || checked.get();
+    let disabled_val = move || disabled.get();
+
+    let track_class = move || tw_merge!(
+        "inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
+        if checked_val() { "bg-primary" } else { "bg-input" },
+        class.clone()
+    );
+
+    let thumb_class = move || tw_merge!(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform",
+        if checked_val() { "translate-x-4" } else { "translate-x-0" }
+    );
+
+    view! {
+        <button
+            type="button"
+            role="switch"
+            aria-checked=move || checked_val().to_string()
+            disabled=disabled_val
+            class=track_class
+            on:click=move |e| {
+                e.prevent_default();
+                if let Some(cb) = on_checked_change {
+                    cb.run(!checked_val());
+                }
+            }
+        >
+            <span class=thumb_class />
+        </button>
+    }
+}

frontend/src/components/ui/table.rs

@@ -3,19 +3,25 @@ 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", class);
+    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 caption-bottom", class);
+    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", class);
+    let class = tw_merge!("[&_tr]:border-b bg-muted/50", class);
     view! { <thead class=class>{children()}</thead> }
 }
 
@@ -27,7 +33,11 @@ pub fn TableRow(children: Children, #[prop(optional, into)] class: String) -> im
 
 #[component]
 pub fn TableHead(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
-    let class = tw_merge!("h-10 px-2 text-left align-middle font-medium text-muted-foreground", class);
+    let class = tw_merge!(
+        "h-10 px-4 text-left align-middle font-medium text-muted-foreground whitespace-nowrap",
+        "transition-all duration-100 active:scale-[0.98] cursor-pointer select-none hover:bg-muted/30 hover:text-foreground",
+        class
+    );
     view! { <th class=class>{children()}</th> }
 }
 
@@ -39,6 +49,12 @@ pub fn TableBody(children: Children, #[prop(optional, into)] class: String) -> i
 
 #[component]
 pub fn TableCell(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
-    let class = tw_merge!("p-2 align-middle", class);
+    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> }
+}

frontend/src/components/ui/toast.rs

@@ -25,13 +25,6 @@ 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,
@@ -39,6 +32,7 @@ pub struct ToastData {
     pub description: Option<String>,
     pub variant: ToastType,
     pub duration: u64, // ms
+    pub is_exiting: RwSignal<bool>,
 }
 
 #[derive(Clone, Copy)]
@@ -48,169 +42,173 @@ pub struct ToasterStore {
 
 #[component]
 pub fn SonnerTrigger(
-    #[prop(into, optional)] class: String,
-    #[prop(optional, default = ToastType::default())] variant: ToastType,
-    #[prop(into)] title: String,
-    description: Option<String>,
-    #[prop(into, optional)] position: String,
-    on_dismiss: Option<Callback<()>>,
+    toast: ToastData,
+    index: usize,
+    total: usize,
+    position: SonnerPosition,
+    is_expanded: Signal<bool>,
+    #[prop(optional)] on_dismiss: Option<Callback<()>>,
 ) -> impl IntoView {
-    let variant_classes = match variant {
-        ToastType::Default => "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-        ToastType::Success => "bg-green-500 text-white hover:bg-green-600",
-        ToastType::Error => "bg-red-500 text-white shadow-xs hover:bg-red-600",
-        ToastType::Warning => "bg-yellow-500 text-white hover:bg-yellow-600",
-        ToastType::Info => "bg-blue-500 text-white shadow-xs hover:bg-blue-600",
-        ToastType::Loading => "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+    let _ = is_expanded; // Silence unused warning while keeping prop name intact for builder
+    let variant_classes = match toast.variant {
+        ToastType::Default => "bg-background text-foreground border-border",
+        ToastType::Success => "bg-background text-foreground border-border [&_.icon]:text-green-500",
+        ToastType::Error => "bg-background text-foreground border-border [&_.icon]:text-destructive",
+        ToastType::Warning => "bg-background text-foreground border-border [&_.icon]:text-yellow-500",
+        ToastType::Info => "bg-background text-foreground border-border [&_.icon]:text-blue-500",
+        ToastType::Loading => "bg-background text-foreground border-border",
     };
 
-    let animation_direction = if position.contains("Top") {
-        "slide-in-from-top-5"
-    } else {
-        "slide-in-from-bottom-5"
+    let bar_color = match toast.variant {
+        ToastType::Success => "bg-green-500",
+        ToastType::Error => "bg-destructive",
+        ToastType::Warning => "bg-yellow-500",
+        ToastType::Info => "bg-blue-500",
+        _ => "bg-primary",
     };
 
-    let merged_class = tw_merge!(
-        "inline-flex flex-col items-start justify-center gap-1 min-w-[300px] rounded-md text-sm font-medium shadow-lg p-4 cursor-pointer pointer-events-auto border border-border/50 transition-all",
-        "animate-in fade-in duration-300 ease-out hover:scale-[1.02] active:scale-[0.98]",
-        animation_direction,
-        variant_classes,
-        class
-    );
+    // Simplified Style (No manual translateY needed with Flexbox)
+    let style = move || {
+        format!(
+            "z-index: {}; opacity: 1; transition: all 0.3s ease;",
+            total - index
+        )
+    };
 
-    // Only set position attribute if not empty
-    let position_attr = if position.is_empty() { None } else { Some(position) };
+    let animation_class = move || {
+        let pos = position.to_string();
+        let is_left = pos.contains("Left");
+        let is_exiting = toast.is_exiting.get();
+        
+        match (is_left, is_exiting) {
+            (true, false) => "animate-sonner-in-left",
+            (true, true) => "animate-sonner-out-left",
+            (false, false) => "animate-sonner-in-right",
+            (false, true) => "animate-sonner-out-right",
+        }
+    };
 
-    // Clone title for data attribute usage, original moved into view
-    let title_clone = title.clone();
+    let icon = match toast.variant {
+        ToastType::Success => Some(view! { <span class="icon font-bold text-lg">"✓"</span> }.into_any()),
+        ToastType::Error => Some(view! { <span class="icon font-bold text-lg">"✕"</span> }.into_any()),
+        ToastType::Warning => Some(view! { <span class="icon font-bold text-lg">"⚠"</span> }.into_any()),
+        ToastType::Info => Some(view! { <span class="icon font-bold text-lg">"ℹ"</span> }.into_any()),
+        _ => None,
+    };
 
     view! {
         <div
-            class=merged_class
-            data-name="SonnerTrigger"
-            data-variant=variant.to_string()
-            data-toast-title=title_clone
-            data-toast-position=position_attr
+            class=move || tw_merge!(
+                "relative transition-all duration-300 ease-in-out cursor-pointer pointer-events-auto",
+                "flex items-center gap-3 w-full max-w-[calc(100vw-2rem)] sm:max-w-[380px] p-4 rounded-lg border shadow-xl bg-card",
+                variant_classes,
+                animation_class()
+            )
+            style=style
             on:click=move |_| {
                 if let Some(cb) = on_dismiss {
                     cb.run(());
                 }
             }
         >
-            <div class="font-semibold">{title}</div>
-            {move || description.as_ref().map(|d| view! { <div class="text-xs opacity-90">{d.clone()}</div> })}
+            {icon}
+            <div class="flex flex-col gap-0.5 overflow-hidden flex-1">
+                <div class="text-sm font-bold truncate leading-tight">{toast.title}</div>
+                {move || toast.description.as_ref().map(|d| view! { <div class="text-xs opacity-80 truncate">{d.clone()}</div> })}
+            </div>
+
+            // Progress Bar
+            <div 
+                class=tw_merge!("absolute bottom-0 left-0 h-1 w-full opacity-30", 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 {
-    // Global store'u al
-    let store = use_context::<ToasterStore>().expect("Toaster context not found. Call provide_toaster() in App root.");
+    let store = use_context::<ToasterStore>().expect("Toaster context not found");
     let toasts = store.toasts;
 
-    // Auto-derive direction from position
-    let direction = match position {
-        SonnerPosition::TopLeft | SonnerPosition::TopCenter | SonnerPosition::TopRight => SonnerDirection::TopDown,
-        _ => SonnerDirection::BottomUp,
-    };
+    let is_bottom = position.to_string().contains("Bottom");
 
     let container_class = match position {
-        SonnerPosition::TopLeft => "left-0 top-0 items-start",
-        SonnerPosition::TopRight => "right-0 top-0 items-end",
-        SonnerPosition::TopCenter => "left-1/2 -translate-x-1/2 top-0 items-center",
-        SonnerPosition::BottomCenter => "left-1/2 -translate-x-1/2 bottom-0 items-center",
-        SonnerPosition::BottomLeft => "left-0 bottom-0 items-start",
-        SonnerPosition::BottomRight => "right-0 bottom-0 items-end",
+        SonnerPosition::TopLeft => "left-6 top-6 items-start",
+        SonnerPosition::TopRight => "right-6 top-6 items-end",
+        SonnerPosition::TopCenter => "left-1/2 -translate-x-1/2 top-6 items-center",
+        SonnerPosition::BottomCenter => "left-1/2 -translate-x-1/2 bottom-6 items-center",
+        SonnerPosition::BottomLeft => "left-6 bottom-6 items-start",
+        SonnerPosition::BottomRight => "right-6 bottom-6 items-end",
     };
 
     view! {
-        <SonnerContainer class=container_class position=position>
-            <SonnerList position=position direction=direction>
-                <For
-                    each=move || toasts.get()
-                    key=|toast| toast.id
-                    children=move |toast| {
-                        let id = toast.id;
-                        view! {
-                            <SonnerTrigger
-                                variant=toast.variant
-                                title=toast.title
-                                description=toast.description
-                                position=position.to_string()
-                                on_dismiss=Some(Callback::new(move |_| {
+        <style>
+            "@keyframes sonner-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
+             @keyframes sonner-in-right { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
+             @keyframes sonner-out-right { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }
+             @keyframes sonner-in-left { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
+             @keyframes sonner-out-left { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-100%); opacity: 0; } }
+             .animate-sonner-in-right { animation: sonner-in-right 0.3s ease-out forwards; }
+             .animate-sonner-out-right { animation: sonner-out-right 0.3s ease-in forwards; }
+             .animate-sonner-in-left { animation: sonner-in-left 0.3s ease-out forwards; }
+             .animate-sonner-out-left { animation: sonner-out-left 0.3s ease-in forwards; }"
+        </style>
+        <div 
+            class=tw_merge!(
+                "fixed z-[100] flex gap-3 pointer-events-none w-full sm:w-[400px]",
+                "left-1/2 -translate-x-1/2 sm:left-auto sm:translate-x-0 px-4 sm:px-0", // Mobile centering fix
+                if is_bottom { "flex-col-reverse" } else { "flex-col" },
+                container_class,
+                "pb-[env(safe-area-inset-bottom)] pt-[env(safe-area-inset-top)]"
+            )
+        >
+            <For
+                each=move || {
+                    let list = toasts.get();
+                    list.into_iter().enumerate().collect::<Vec<_>>()
+                }
+                key=|(_, toast)| toast.id
+                children=move |(index, toast)| {
+                    let id = toast.id;
+                    let total = toasts.with(|t| t.len());
+                    let is_exiting = toast.is_exiting;
+                    
+                    view! {
+                        <SonnerTrigger
+                            toast=toast
+                            index=index
+                            total=total
+                            position=position
+                            is_expanded=Signal::derive(move || true)
+                            on_dismiss=Callback::new(move |_| {
+                                is_exiting.set(true);
+                                leptos::task::spawn_local(async move {
+                                    gloo_timers::future::TimeoutFuture::new(300).await;
                                     toasts.update(|vec| vec.retain(|t| t.id != id));
-                                }))
-                            />
-                        }
+                                });
+                            })
+                        />
                     }
-                />
-            </SonnerList>
-        </SonnerContainer>
-    }
+                }
+            />
+        </div>
+    }.into_any()
 }
 
-// Global Helper Functions
 pub fn toast(title: impl Into<String>, variant: ToastType) {
     let signal_opt = TOASTS.with(|t| *t.borrow());
     
@@ -222,18 +220,24 @@ pub fn toast(title: impl Into<String>, variant: ToastType) {
             description: None,
             variant,
             duration: 4000,
+            is_exiting: RwSignal::new(false),
         };
         
-        toasts.update(|t| t.push(new_toast.clone()));
+        toasts.update(|t| {
+            t.push(new_toast.clone());
+            if t.len() > 5 {
+                t.remove(0);
+            }
+        });
 
-        // Auto remove after duration
         let duration = new_toast.duration;
+        let is_exiting = new_toast.is_exiting;
         leptos::task::spawn_local(async move {
             gloo_timers::future::TimeoutFuture::new(duration as u32).await;
+            is_exiting.set(true);
+            gloo_timers::future::TimeoutFuture::new(300).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.");
     }
 }
 

frontend/src/store.rs

@@ -5,7 +5,9 @@ use leptos::task::spawn_local;
 use shared::{AppEvent, GlobalStats, NotificationLevel, Torrent};
 use std::collections::HashMap;
 use struct_patch::traits::Patch;
+use base64::{Engine as _, engine::general_purpose::URL_SAFE_NO_PAD as BASE64_URL};
 use base64::{Engine as _, engine::general_purpose::STANDARD as BASE64};
+use wasm_bindgen::JsCast;
 
 use crate::components::ui::toast::{ToastType, toast};
 
@@ -24,8 +26,6 @@ pub fn show_toast(level: NotificationLevel, message: impl Into<String>) {
     toast(msg, variant);
 }
 
-
-
 pub fn toast_success(message: impl Into<String>) { show_toast(NotificationLevel::Success, message); }
 pub fn toast_error(message: impl Into<String>) { show_toast(NotificationLevel::Error, message); }
 
@@ -54,6 +54,7 @@ pub struct TorrentStore {
     pub global_stats: RwSignal<GlobalStats>,
     pub user: RwSignal<Option<String>>,
     pub selected_torrent: RwSignal<Option<String>>,
+    pub push_enabled: RwSignal<bool>,
 }
 
 pub fn provide_torrent_store() {
@@ -63,12 +64,20 @@ pub fn provide_torrent_store() {
     let global_stats = RwSignal::new(GlobalStats::default());
     let user = RwSignal::new(Option::<String>::None);
     let selected_torrent = RwSignal::new(Option::<String>::None);
+    let push_enabled = RwSignal::new(false);
 
     let show_browser_notification = crate::utils::notification::use_app_notification();
 
-    let store = TorrentStore { torrents, filter, search_query, global_stats, user, selected_torrent };
+    let store = TorrentStore { torrents, filter, search_query, global_stats, user, selected_torrent, push_enabled };
     provide_context(store);
 
+    // Initial check for push status
+    spawn_local(async move {
+        if let Ok(enabled) = is_push_subscribed().await {
+            push_enabled.set(enabled);
+        }
+    });
+
     let global_stats_for_sse = global_stats;
     let torrents_for_sse = torrents;
     let show_browser_notification = show_browser_notification.clone();
@@ -79,17 +88,12 @@ pub fn provide_torrent_store() {
         let mut disconnect_notified = false;
 
         loop {
-
-            log::debug!("SSE: Creating EventSource...");
             let es_result = EventSource::new("/api/events");
             match es_result {
                 Ok(mut es) => {
-                    log::debug!("SSE: EventSource created, subscribing...");
                     if let Ok(mut stream) = es.subscribe("message") {
-                        log::debug!("SSE: Subscribed to message channel");
                         let mut got_first_message = false;
                         while let Some(Ok((_, msg))) = stream.next().await {
-                            log::debug!("SSE: Received message");
                             if !got_first_message {
                                 got_first_message = true;
                                 backoff_ms = 1000;
@@ -101,47 +105,30 @@ pub fn provide_torrent_store() {
                             }
 
                             if let Some(data_str) = msg.data().as_string() {
-                                // Decode Base64
-                                match BASE64.decode(&data_str) {
-                                    Ok(bytes) => {
-                                        // Deserialize MessagePack
-                                        match rmp_serde::from_slice::<AppEvent>(&bytes) {
-                                            Ok(event) => {
-                                                match event {
-                                                    AppEvent::FullList(list, _) => {
-                                                        log::info!("SSE: Received FullList with {} torrents", list.len());
-                                                        torrents_for_sse.update(|map| {
-                                                            let new_hashes: std::collections::HashSet<String> = list.iter().map(|t| t.hash.clone()).collect();
-                                                            map.retain(|hash, _| new_hashes.contains(hash));
-                                                            for new_torrent in list {
-                                                                map.insert(new_torrent.hash.clone(), new_torrent);
-                                                            }
-                                                        });
-                                                        log::debug!("SSE: torrents map now has {} entries", torrents_for_sse.with(|m| m.len()));
-                                                    }
-                                                    AppEvent::Update(patch) => {
-                                                        let hash_opt = patch.hash.clone();
-                                                        if let Some(hash) = hash_opt {
-                                                            torrents_for_sse.update(|map| {
-                                                                if let Some(t) = map.get_mut(&hash) {
-                                                                    t.apply(patch);
-                                                                }
-                                                            });
-                                                        }
-                                                    }
-                                                    AppEvent::Stats(stats) => { global_stats_for_sse.set(stats); }
-                                                    AppEvent::Notification(n) => {
-                                                        show_toast(n.level.clone(), n.message.clone());
-                                                        if n.message.contains("tamamlandı") || n.level == shared::NotificationLevel::Error {
-                                                            show_browser_notification("VibeTorrent", &n.message);
-                                                        }
-                                                    }
+                                if let Ok(bytes) = BASE64.decode(&data_str) {
+                                    if let Ok(event) = rmp_serde::from_slice::<AppEvent>(&bytes) {
+                                        match event {
+                                            AppEvent::FullList(list, _) => {
+                                                torrents_for_sse.update(|map| {
+                                                    let new_hashes: std::collections::HashSet<String> = list.iter().map(|t| t.hash.clone()).collect();
+                                                    map.retain(|hash, _| new_hashes.contains(hash));
+                                                    for new_torrent in list { map.insert(new_torrent.hash.clone(), new_torrent); }
+                                                });
+                                            }
+                                            AppEvent::Update(patch) => {
+                                                if let Some(hash) = patch.hash.clone() {
+                                                    torrents_for_sse.update(|map| { if let Some(t) = map.get_mut(&hash) { t.apply(patch); } });
+                                                }
+                                            }
+                                            AppEvent::Stats(stats) => { global_stats_for_sse.set(stats); }
+                                            AppEvent::Notification(n) => {
+                                                show_toast(n.level.clone(), n.message.clone());
+                                                if n.message.contains("tamamlandı") || n.level == shared::NotificationLevel::Error {
+                                                    show_browser_notification("VibeTorrent", &n.message);
                                                 }
                                             }
-                                            Err(e) => log::error!("SSE: Failed to deserialize MessagePack: {}", e),
                                         }
                                     }
-                                    Err(e) => log::error!("SSE: Failed to decode Base64: {}", e),
                                 }
                             }
                         }
@@ -158,13 +145,103 @@ pub fn provide_torrent_store() {
                     }
                 }
             }
-            log::debug!("SSE: Reconnecting in {}ms...", backoff_ms);
             gloo_timers::future::TimeoutFuture::new(backoff_ms).await;
             backoff_ms = std::cmp::min(backoff_ms * 2, 30000);
         }
     });
 }
 
-pub async fn subscribe_to_push_notifications() {
-    // ...
+pub async fn is_push_subscribed() -> Result<bool, String> {
+    let window = web_sys::window().ok_or("no window")?;
+    let sw_container = window.navigator().service_worker();
+    
+    let registration = wasm_bindgen_futures::JsFuture::from(sw_container.ready().map_err(|e| format!("{:?}", e))?)
+        .await
+        .map_err(|e| format!("{:?}", e))?
+        .dyn_into::<web_sys::ServiceWorkerRegistration>()
+        .map_err(|_| "not a registration")?;
+
+    let push_manager = registration.push_manager().map_err(|e| format!("{:?}", e))?;
+    let subscription = wasm_bindgen_futures::JsFuture::from(push_manager.get_subscription().map_err(|e| format!("{:?}", e))?)
+        .await
+        .map_err(|e| format!("{:?}", e))?;
+
+    Ok(!subscription.is_null())
+}
+
+pub async fn subscribe_to_push_notifications() {
+    let window = web_sys::window().expect("no window");
+    let sw_container = window.navigator().service_worker();
+
+    let registration = match wasm_bindgen_futures::JsFuture::from(sw_container.ready().expect("sw not ready")).await {
+        Ok(reg) => reg.dyn_into::<web_sys::ServiceWorkerRegistration>().expect("not a reg"),
+        Err(e) => { log::error!("SW Ready Error: {:?}", e); return; }
+    };
+
+    // 1. Get Public Key from Backend
+    let public_key = match shared::server_fns::push::get_public_key().await {
+        Ok(key) => key,
+        Err(e) => { log::error!("Failed to get public key: {:?}", e); return; }
+    };
+
+    // 2. Convert base64 key to Uint8Array
+    let decoded_key = BASE64_URL.decode(public_key.trim()).expect("invalid public key");
+    let key_array = js_sys::Uint8Array::from(&decoded_key[..]);
+
+    // 3. Prepare Options
+    let mut options = web_sys::PushSubscriptionOptionsInit::new();
+    options.set_user_visible_only(true);
+    options.set_application_server_key(&key_array.into());
+
+    // 4. Subscribe
+    let push_manager = registration.push_manager().expect("no push manager");
+    match wasm_bindgen_futures::JsFuture::from(push_manager.subscribe_with_options(&options).expect("subscribe failed")).await {
+        Ok(subscription) => {
+            let sub_js = subscription.clone();
+            
+            // Use JS to extract JSON string representation
+            let json_str = js_sys::JSON::stringify(&sub_js).expect("stringify failed").as_string().expect("not a string");
+            let sub_obj: serde_json::Value = serde_json::from_str(&json_str).expect("serde from str failed");
+            
+            let endpoint = sub_obj["endpoint"].as_str().expect("no endpoint").to_string();
+            let p256dh = sub_obj["keys"]["p256dh"].as_str().expect("no p256dh").to_string();
+            let auth = sub_obj["keys"]["auth"].as_str().expect("no auth").to_string();
+
+            // 5. Save to Backend
+            match shared::server_fns::push::subscribe_push(endpoint, p256dh, auth).await {
+                Ok(_) => {
+                    log::info!("Push subscription saved successfully");
+                    toast_success("Bildirimler aktif edildi");
+                }
+                Err(e) => log::error!("Failed to save subscription: {:?}", e),
+            }
+        }
+        Err(e) => log::error!("Subscription Error: {:?}", e),
+    }
+}
+
+pub async fn unsubscribe_from_push_notifications() {
+    let window = web_sys::window().expect("no window");
+    let sw_container = window.navigator().service_worker();
+    
+    let registration = wasm_bindgen_futures::JsFuture::from(sw_container.ready().expect("sw not ready")).await
+        .unwrap().dyn_into::<web_sys::ServiceWorkerRegistration>().unwrap();
+
+    let push_manager = registration.push_manager().unwrap();
+    if let Ok(sub_future) = push_manager.get_subscription() {
+        if let Ok(subscription) = wasm_bindgen_futures::JsFuture::from(sub_future).await {
+            if !subscription.is_null() {
+                let sub = subscription.dyn_into::<web_sys::PushSubscription>().unwrap();
+                let endpoint = sub.endpoint();
+                
+                // 1. Unsubscribe in Browser
+                let _ = wasm_bindgen_futures::JsFuture::from(sub.unsubscribe().unwrap()).await;
+                
+                // 2. Remove from Backend
+                let _ = shared::server_fns::push::unsubscribe_push(endpoint).await;
+                log::info!("Push subscription removed");
+                show_toast(NotificationLevel::Info, "Bildirimler kapatıldı");
+            }
+        }
+    }
 }

shared/src/server_fns/push.rs

@@ -20,3 +20,13 @@ pub async fn subscribe_push(
         .await
         .map_err(|e| ServerFnError::new(format!("Failed to save subscription: {}", e)))
 }
+
+#[server(UnsubscribePush, "/api/server_fns")]
+pub async fn unsubscribe_push(endpoint: String) -> Result<(), ServerFnError> {
+    let db_ctx = expect_context::<crate::DbContext>();
+    db_ctx
+        .db
+        .remove_push_subscription(&endpoint)
+        .await
+        .map_err(|e| ServerFnError::new(format!("Failed to remove subscription: {}", e)))
+}