fix: resolve all compilation errors in push notification logic and stabilize UI components

.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)

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,13 +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" />
-    <script src="/lock_scroll.js"></script>
     <link data-trunk rel="copy-file" href="sw.js" />
     <script>
         (function () {

frontend/public/hooks/lock_scroll.js

@@ -1,253 +0,0 @@
-/**
- * Scroll Lock Utility
- * Handles locking and unlocking scroll for both window and all scrollable containers
- * Similar to react-remove-scroll but in vanilla JavaScript
- */
-
-(() => {
-  // Prevent multiple initializations
-  if (window.ScrollLock) {
-    return;
-  }
-
-  class ScrollLock {
-    constructor() {
-      this.locked = false;
-      this.scrollableElements = [];
-      this.scrollPositions = new Map();
-      this.originalStyles = new Map();
-      this.fixedElements = [];
-    }
-
-    /**
-     * Find all scrollable elements in the DOM (optimized)
-     * Uses more targeted selectors instead of querying all elements
-     */
-    findScrollableElements() {
-      const scrollables = [];
-
-      // More targeted query - only look for elements with overflow properties
-      const candidates = document.querySelectorAll(
-        '[style*="overflow"], [class*="overflow"], [class*="scroll"], main, aside, section, div',
-      );
-
-      // Batch all style reads first to minimize reflows
-      const elementsToCheck = [];
-      for (const el of candidates) {
-        // Skip the element itself or if it's inside these containers
-        const dataName = el.getAttribute("data-name");
-        const isExcludedElement =
-          dataName === "ScrollArea" ||
-          dataName === "CommandList" ||
-          dataName === "SelectContent" ||
-          dataName === "MultiSelectContent" ||
-          dataName === "DropdownMenuContent" ||
-          dataName === "ContextMenuContent";
-
-        if (
-          el !== document.body &&
-          el !== document.documentElement &&
-          !isExcludedElement &&
-          !el.closest('[data-name="ScrollArea"]') &&
-          !el.closest('[data-name="CommandList"]') &&
-          !el.closest('[data-name="SelectContent"]') &&
-          !el.closest('[data-name="MultiSelectContent"]') &&
-          !el.closest('[data-name="DropdownMenuContent"]') &&
-          !el.closest('[data-name="ContextMenuContent"]')
-        ) {
-          elementsToCheck.push(el);
-        }
-      }
-
-      // Now batch read all computed styles and dimensions
-      elementsToCheck.forEach((el) => {
-        const style = window.getComputedStyle(el);
-        const hasOverflow =
-          style.overflow === "auto" ||
-          style.overflow === "scroll" ||
-          style.overflowY === "auto" ||
-          style.overflowY === "scroll";
-
-        // Only check scrollHeight if overflow is set
-        if (hasOverflow && el.scrollHeight > el.clientHeight) {
-          scrollables.push(el);
-        }
-      });
-
-      return scrollables;
-    }
-
-    /**
-     * Lock scrolling on all scrollable elements (optimized)
-     * Batches all DOM reads before DOM writes to prevent forced reflows
-     */
-    lock() {
-      if (this.locked) return;
-
-      this.locked = true;
-
-      // Find all scrollable elements
-      this.scrollableElements = this.findScrollableElements();
-
-      // ===== BATCH 1: READ PHASE - Read all layout properties first =====
-      const windowScrollY = window.scrollY;
-      const scrollbarWidth = window.innerWidth - document.body.clientWidth;
-
-      // Store window scroll position
-      this.scrollPositions.set("window", windowScrollY);
-
-      // Store original body styles
-      this.originalStyles.set("body", {
-        position: document.body.style.position,
-        top: document.body.style.top,
-        width: document.body.style.width,
-        overflow: document.body.style.overflow,
-        paddingRight: document.body.style.paddingRight,
-      });
-
-      // Read all fixed-position elements and their padding (only if we have scrollbar)
-      if (scrollbarWidth > 0) {
-        // Use more targeted query for fixed elements
-        const fixedCandidates = document.querySelectorAll(
-          '[style*="fixed"], [class*="fixed"], header, nav, aside, [role="dialog"], [role="alertdialog"]',
-        );
-
-        this.fixedElements = Array.from(fixedCandidates).filter((el) => {
-          const style = window.getComputedStyle(el);
-          return (
-            style.position === "fixed" &&
-            !el.closest('[data-name="DropdownMenuContent"]') &&
-            !el.closest('[data-name="MultiSelectContent"]') &&
-            !el.closest('[data-name="ContextMenuContent"]')
-          );
-        });
-
-        // Batch read all padding values
-        this.fixedElements.forEach((el) => {
-          const computedStyle = window.getComputedStyle(el);
-          const currentPadding = Number.parseInt(computedStyle.paddingRight, 10) || 0;
-
-          this.originalStyles.set(el, {
-            paddingRight: el.style.paddingRight,
-            computedPadding: currentPadding,
-          });
-        });
-      }
-
-      // Read scrollable elements info
-      const scrollableInfo = this.scrollableElements.map((el) => {
-        const scrollTop = el.scrollTop;
-        const elementScrollbarWidth = el.offsetWidth - el.clientWidth;
-        const computedStyle = window.getComputedStyle(el);
-        const currentPadding = Number.parseInt(computedStyle.paddingRight, 10) || 0;
-
-        this.scrollPositions.set(el, scrollTop);
-        this.originalStyles.set(el, {
-          overflow: el.style.overflow,
-          overflowY: el.style.overflowY,
-          paddingRight: el.style.paddingRight,
-        });
-
-        return { el, elementScrollbarWidth, currentPadding };
-      });
-
-      // ===== BATCH 2: WRITE PHASE - Apply all styles at once =====
-
-      // Apply body lock
-      document.body.style.position = "fixed";
-      document.body.style.top = `-${windowScrollY}px`;
-      document.body.style.width = "100%";
-      document.body.style.overflow = "hidden";
-
-      if (scrollbarWidth > 0) {
-        document.body.style.paddingRight = `${scrollbarWidth}px`;
-
-        // Apply padding compensation to fixed elements
-        this.fixedElements.forEach((el) => {
-          const stored = this.originalStyles.get(el);
-          if (stored) {
-            el.style.paddingRight = `${stored.computedPadding + scrollbarWidth}px`;
-          }
-        });
-      }
-
-      // Lock all scrollable containers
-      scrollableInfo.forEach(({ el, elementScrollbarWidth, currentPadding }) => {
-        el.style.overflow = "hidden";
-
-        if (elementScrollbarWidth > 0) {
-          el.style.paddingRight = `${currentPadding + elementScrollbarWidth}px`;
-        }
-      });
-    }
-
-    /**
-     * Unlock scrolling on all elements (optimized)
-     * @param {number} delay - Delay in milliseconds before unlocking (for animations)
-     */
-    unlock(delay = 0) {
-      if (!this.locked) return;
-
-      const performUnlock = () => {
-        // Restore body scroll
-        const bodyStyles = this.originalStyles.get("body");
-        if (bodyStyles) {
-          document.body.style.position = bodyStyles.position;
-          document.body.style.top = bodyStyles.top;
-          document.body.style.width = bodyStyles.width;
-          document.body.style.overflow = bodyStyles.overflow;
-          document.body.style.paddingRight = bodyStyles.paddingRight;
-        }
-
-        // Restore window scroll position
-        const windowScrollY = this.scrollPositions.get("window") || 0;
-        window.scrollTo(0, windowScrollY);
-
-        // Restore all scrollable containers
-        this.scrollableElements.forEach((el) => {
-          const originalStyles = this.originalStyles.get(el);
-          if (originalStyles) {
-            el.style.overflow = originalStyles.overflow;
-            el.style.overflowY = originalStyles.overflowY;
-            el.style.paddingRight = originalStyles.paddingRight;
-          }
-
-          // Restore scroll position
-          const scrollPosition = this.scrollPositions.get(el) || 0;
-          el.scrollTop = scrollPosition;
-        });
-
-        // Restore fixed-position elements padding
-        this.fixedElements.forEach((el) => {
-          const styles = this.originalStyles.get(el);
-          if (styles && styles.paddingRight !== undefined) {
-            el.style.paddingRight = styles.paddingRight;
-          }
-        });
-
-        // Clear storage
-        this.scrollableElements = [];
-        this.fixedElements = [];
-        this.scrollPositions.clear();
-        this.originalStyles.clear();
-        this.locked = false;
-      };
-
-      if (delay > 0) {
-        setTimeout(performUnlock, delay);
-      } else {
-        performUnlock();
-      }
-    }
-
-    /**
-     * Check if scrolling is currently locked
-     */
-    isLocked() {
-      return this.locked;
-    }
-  }
-
-  // Export as singleton
-  window.ScrollLock = new ScrollLock();
-})();

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/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,7 +1,7 @@
 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]
@@ -19,12 +19,12 @@ pub fn Protected(children: Children) -> impl IntoView {
                 <Toolbar />
                 
                 // Ana İçerik
-                <main class="flex-1 overflow-hidden relative bg-background">
-                    {children()}
+                <main class="flex-1 overflow-y-auto relative bg-background flex flex-col">
+                    <div class="flex-1">
+                        {children()}
+                    </div>
+                    <Footer />
                 </main>
-
-                // Alt Bar
-                <StatusBar />
             </SidenavInset>
         </SidenavWrapper>
     }

frontend/src/components/layout/sidebar.rs

@@ -3,6 +3,7 @@ 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 {
@@ -65,6 +66,19 @@ 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! {
         <SidenavHeader>
             <div class="flex items-center gap-2 px-2 py-4">
@@ -133,35 +147,49 @@ pub fn Sidebar() -> impl IntoView {
         </SidenavContent>
 
         <SidenavFooter>
-            <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 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-1 overflow-hidden">
-                    <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>
-                
-                <div class="flex items-center gap-1">
-                    <ThemeToggle />
+
+                <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-[11px] truncate text-foreground leading-tight">{username}</div>
+                        <div class="text-[9px] text-muted-foreground truncate opacity-70">"Yönetici"</div>
+                    </div>
                     
-                    <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 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>
                 </div>
             </div>
         </SidenavFooter>

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,14 +1,13 @@
 use leptos::prelude::*;
-use icons::PanelLeft;
-use crate::components::torrent::add_torrent::AddTorrentDialog;
-use crate::components::ui::button::{Button, ButtonVariant, ButtonSize};
+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);
-
     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 (Mobil) + Add Torrent
@@ -33,25 +32,24 @@ pub fn Toolbar() -> impl IntoView {
                     </Sheet>
                 </div>
                 
-                <Button
-                    on:click=move |_| show_add_modal.1.set(true)
-                    class="gap-2"
-                >
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 md:w-5 md:h-5">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-                    </svg>
-                    <span class="hidden sm:inline">"Add Torrent"</span>
-                    <span class="sm:hidden">"Add"</span>
-                </Button>
+                <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>
 
             // Sağ kısım boş
             <div class="flex flex-1 items-center justify-end gap-2">
             </div>
-
-            <Show when=move || show_add_modal.0.get()>
-                <AddTorrentDialog on_close=Callback::new(move |()| show_add_modal.1.set(false)) />
-            </Show>
         </div>
     }
-}
+}

frontend/src/components/torrent/add_torrent.rs

@@ -1,17 +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, ButtonVariant};
+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);
@@ -21,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);
@@ -45,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:..."
@@ -81,14 +76,10 @@ pub fn AddTorrentDialog(
                     </div>
                 })}
 
-                <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
-                    <Button
-                        variant=ButtonVariant::Ghost
-                        attr:r#type="button"
-                        on:click=move |_| on_close.run(())
-                    >
+                <DialogFooter class="pt-2">
+                    <DialogClose>
                         "Cancel"
-                    </Button>
+                    </DialogClose>
                     <Button
                         attr:r#type="submit"
                         attr:disabled=move || is_loading.0.get()
@@ -102,21 +93,8 @@ pub fn AddTorrentDialog(
                             leptos::either::Either::Right(view! { "Add" })
                         }}
                     </Button>
-                </div>
+                </DialogFooter>
             </form>
-
-            // Close button (X)
-            <Button 
-                variant=ButtonVariant::Ghost
-                class="absolute right-2 top-2 size-8 p-0 opacity-70 hover:opacity-100"
-                on:click=move |_| on_close.run(())
-            >
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
-                    <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,20 +1,32 @@
 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};
+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::data_table::*;
 use crate::components::ui::checkbox::Checkbox;
-use crate::components::ui::button::{Button, ButtonVariant, ButtonSize};
+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::*;
+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"),
@@ -219,77 +231,162 @@ pub fn TorrentTable() -> impl IntoView {
 
                 <div class="flex items-center gap-2">
                     <Show when=move || has_selection.get()>
-                        <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" />
-                                    
-                                    <AlertDialog>
-                                        <AlertDialogTrigger class="w-full text-left">
-                                            <div class="inline-flex gap-2 items-center w-full rounded-sm px-2 py-1.5 text-sm transition-colors text-destructive hover:bg-destructive/10 focus:bg-destructive/10">
-                                                <Trash2 class="size-4" /> "Toplu Sil"
+                        <div 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>
-                                        </AlertDialogTrigger>
-                                        <AlertDialogContent>
-                                            <AlertDialogHeader>
-                                                <AlertDialogTitle>"Toplu Silme Onayı"</AlertDialogTitle>
-                                                <AlertDialogDescription>
-                                                    {move || format!("Seçili {} torrent silinecek. Bu işlem geri alınamaz.", selected_count.get())}
-                                                </AlertDialogDescription>
-                                            </AlertDialogHeader>
-                                            <AlertDialogFooter>
-                                                <AlertDialogClose>"İptal"</AlertDialogClose>
-                                                <Button variant=ButtonVariant::Destructive on:click=move |_| bulk_action("delete")>
-                                                    "Sil"
-                                                </Button>
-                                            </AlertDialogFooter>
-                                        </AlertDialogContent>
-                                    </AlertDialog>
+                                        </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>
-                    </Show>
+                    </div>
 
-                    <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>
+                    // 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>
 
-            // --- MAIN TABLE ---
+            // --- MAIN CONTENT ---
             <div class="flex-1 min-h-0 overflow-hidden">
-                <DataTableWrapper class="h-full bg-card/50">
+                // 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">
@@ -305,49 +402,49 @@ pub fn TorrentTable() -> impl IntoView {
                                     </DataTableHead>
                                     
                                     {move || visible_columns.get().contains("Name").then(|| view! {
-                                        <DataTableHead class="cursor-pointer group select-none" on:click=move |_| handle_sort(SortColumn::Name)>
+                                        <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" on:click=move |_| handle_sort(SortColumn::Size)>
+                                        <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" on:click=move |_| handle_sort(SortColumn::Progress)>
+                                        <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" on:click=move |_| handle_sort(SortColumn::Status)>
+                                        <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 text-right" on:click=move |_| handle_sort(SortColumn::DownSpeed)>
+                                        <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 text-right" on:click=move |_| handle_sort(SortColumn::UpSpeed)>
+                                        <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 text-right" on:click=move |_| handle_sort(SortColumn::ETA)>
+                                        <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 text-right" on:click=move |_| handle_sort(SortColumn::AddedDate)>
+                                        <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()}
@@ -407,6 +504,44 @@ pub fn TorrentTable() -> impl IntoView {
                         </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">
@@ -443,7 +578,6 @@ fn TorrentRow(
                 move || {
                     let t = torrent.get().unwrap();
                     let t_name = t.name.clone();
-                    let status_color = match t.status { shared::TorrentStatus::Seeding => "text-green-500", shared::TorrentStatus::Downloading => "text-blue-500", shared::TorrentStatus::Paused => "text-yellow-500", shared::TorrentStatus::Error => "text-red-500", _ => "text-muted-foreground" };
                     
                     let is_active_selection = Memo::new(move |_| {
                         let selected = store.selected_torrent.get();
@@ -499,8 +633,18 @@ fn TorrentRow(
 
                                 {move || visible_columns.get().contains("Status").then({
                                     let status_text = format!("{:?}", t.status);
-                                    let color = status_color;
-                                    move || view! { <DataTableCell class={format!("text-xs font-semibold whitespace-nowrap {}", color)}>{status_text.clone()}</DataTableCell> }
+                                    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({
@@ -547,6 +691,8 @@ fn TorrentRow(
 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();
@@ -561,48 +707,73 @@ fn TorrentCard(
                 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! {
                         <TorrentContextMenu torrent_hash=h_for_menu on_action=on_action.clone()>
                             <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"
+                                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>
-                                        <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>
+                                        <Badge variant=status_variant class="uppercase tracking-wider text-[10px]">
+                                            {format!("{:?}", t.status)}
+                                        </Badge>
+                                    </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-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 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>
-                                </CardBody>
-                            </Card>
+                                </div>
                             </div>
                         </TorrentContextMenu>
                     }.into_any()

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/dialog.rs

@@ -72,13 +72,13 @@ pub fn DialogTrigger(
 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!(
-        // "flex flex-col gap-4", // TODO 🐛 Bug when I try to have this.. Using DialogBody instead.
         "relative bg-background border rounded-2xl shadow-lg p-6 w-full max-w-[calc(100%-2rem)] max-h-[85vh] fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] z-100 transition-all duration-200 data-[state=closed]:opacity-0 data-[state=closed]:scale-95 data-[state=open]:opacity-100 data-[state=open]:scale-100",
         class
     );
@@ -88,12 +88,16 @@ pub fn DialogContent(
 
     let target_id_clone = ctx.target_id.clone();
     let backdrop_id = format!("{}_backdrop", ctx.target_id);
-    let target_id_for_script = ctx.target_id.clone();
     let backdrop_id_for_script = backdrop_id.clone();
     let backdrop_behavior = if close_on_backdrop_click { "auto" } else { "manual" };
 
+    // 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="/hooks/lock_scroll.js"></script>
+        <script src="/lock_scroll.js"></script>
 
         <div
             data-name=backdrop_data_name
@@ -105,7 +109,7 @@ pub fn DialogContent(
         <div
             data-name=content_data_name
             class=merged_class
-            id=ctx.target_id
+            id=final_id
             data-target="target__dialog"
             data-state="closed"
             data-backdrop=backdrop_behavior
@@ -147,9 +151,7 @@ pub fn DialogContent(
                         dialog.setAttribute('data-initialized', 'true');
 
                         const openDialog = () => {{
-                            // Lock scrolling
-                            window.ScrollLock.lock();
-
+                            if (window.ScrollLock) window.ScrollLock.lock();
                             dialog.setAttribute('data-state', 'open');
                             backdrop.setAttribute('data-state', 'open');
                             dialog.style.pointerEvents = 'auto';
@@ -161,28 +163,18 @@ pub fn DialogContent(
                             backdrop.setAttribute('data-state', 'closed');
                             dialog.style.pointerEvents = 'none';
                             backdrop.style.pointerEvents = 'none';
-
-                            // Unlock scrolling after animation
                             window.ScrollLock.unlock(200);
                         }};
 
-                        // Open dialog when trigger is clicked
                         trigger.addEventListener('click', openDialog);
-
-                        // Close buttons
-                        const closeButtons = dialog.querySelectorAll('[data-dialog-close]');
-                        closeButtons.forEach(btn => {{
+                        dialog.querySelectorAll('[data-dialog-close]').forEach(btn => {{
                             btn.addEventListener('click', closeDialog);
                         }});
-
-                        // Close on backdrop click (if data-backdrop="auto")
                         backdrop.addEventListener('click', () => {{
                             if (dialog.getAttribute('data-backdrop') === 'auto') {{
                                 closeDialog();
                             }}
                         }});
-
-                        // Handle ESC key to close
                         document.addEventListener('keydown', (e) => {{
                             if (e.key === 'Escape' && dialog.getAttribute('data-state') === 'open') {{
                                 e.preventDefault();
@@ -190,17 +182,12 @@ pub fn DialogContent(
                             }}
                         }});
                     }};
-
-                    if (document.readyState === 'loading') {{
-                        document.addEventListener('DOMContentLoaded', setupDialog);
-                    }} else {{
-                        setupDialog();
-                    }}
+                    setupDialog();
                 }})();
                 "#,
-                target_id_for_script,
+                final_id_for_script,
                 backdrop_id_for_script,
-                target_id_for_script,
+                trigger_id_for_script,
             )}
         </script>
     }

frontend/src/components/ui/drag_and_drop.rs

@@ -1,25 +0,0 @@
-use leptos::prelude::*;
-use leptos_ui::clx;
-
-mod components {
-    use super::*;
-    clx! {Draggable, div, "flex flex-col gap-4 w-full max-w-4xl"}
-    clx! {DraggableZone, div, "dragabble__container", "bg-neutral-600 p-4 mt-4"}
-
-    // TODO. ItemRoot (needs `draggable` as clx attribute).
-}
-
-pub use components::*;
-
-/* ========================================================== */
-/*                     ✨ FUNCTIONS ✨                        */
-/* ========================================================== */
-
-#[component]
-pub fn DraggableItem(#[prop(into)] text: String) -> impl IntoView {
-    view! {
-        <div class="p-4 border cursor-move border-input bg-card draggable" draggable="true">
-            {text}
-        </div>
-    }
-}

frontend/src/components/ui/mod.rs

@@ -1,5 +1,6 @@
 pub mod accordion;
 pub mod alert_dialog;
+pub mod badge;
 pub mod button;
 pub mod card;
 pub mod checkbox;
@@ -14,7 +15,9 @@ pub mod select;
 pub mod separator;
 pub mod sheet;
 pub mod sidenav;
+pub mod skeleton;
 pub mod svg_icon;
+pub mod switch;
 pub mod table;
 pub mod theme_toggle;
 pub mod toast;

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/sonner.rs

@@ -1,145 +0,0 @@
-use leptos::prelude::*;
-use tw_merge::*;
-
-#[derive(Clone, Copy, PartialEq, Eq, Default, strum::Display)]
-pub enum ToastType {
-    #[default]
-    Default,
-    Success,
-    Error,
-    Warning,
-    Info,
-    Loading,
-}
-
-#[derive(Clone, Copy, PartialEq, Eq, Default, strum::Display)]
-pub enum SonnerPosition {
-    TopLeft,
-    TopCenter,
-    TopRight,
-    #[default]
-    BottomRight,
-    BottomCenter,
-    BottomLeft,
-}
-
-#[derive(Clone, Copy, PartialEq, Eq, Default, strum::Display)]
-pub enum SonnerDirection {
-    TopDown,
-    #[default]
-    BottomUp,
-}
-
-#[component]
-pub fn SonnerTrigger(
-    children: Children,
-    #[prop(into, optional)] class: String,
-    #[prop(optional, default = ToastType::default())] variant: ToastType,
-    #[prop(into)] title: String,
-    #[prop(into)] description: String,
-    #[prop(into, optional)] position: String,
-) -> impl IntoView {
-    let variant_classes = match variant {
-        ToastType::Default => "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-        ToastType::Success => "bg-success text-success-foreground hover:bg-success/90",
-        ToastType::Error => "bg-destructive text-white shadow-xs hover:bg-destructive/90 dark:bg-destructive/60",
-        ToastType::Warning => "bg-warning text-warning-foreground hover:bg-warning/90",
-        ToastType::Info => "bg-info text-info-foreground shadow-xs hover:bg-info/90",
-        ToastType::Loading => "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-    };
-
-    let merged_class = tw_merge!(
-        "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 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] w-fit cursor-pointer h-9 px-4 py-2",
-        variant_classes,
-        class
-    );
-
-    // Only set position attribute if not empty
-    let position_attr = if position.is_empty() { None } else { Some(position) };
-
-    view! {
-        <button
-            class=merged_class
-            data-name="SonnerTrigger"
-            data-variant=variant.to_string()
-            data-toast-title=title
-            data-toast-description=description
-            data-toast-position=position_attr
-        >
-            {children()}
-        </button>
-    }
-}
-
-#[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-50", 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 {
-    // pointer-events-none: container doesn't block clicks when empty
-    // [&>*]:pointer-events-auto: toast items still receive clicks
-    let merged_class = tw_merge!(
-        "flex relative flex-col opacity-100 gap-[15px] h-[100px] w-[400px] pointer-events-none [&>*]:pointer-events-auto",
-        class
-    );
-
-    view! {
-        <ol
-            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()}
-        </ol>
-    }
-}
-
-#[component]
-pub fn SonnerToaster(#[prop(default = SonnerPosition::default())] position: SonnerPosition) -> impl IntoView {
-    // Auto-derive direction from position
-    let direction = match position {
-        SonnerPosition::TopLeft | SonnerPosition::TopCenter | SonnerPosition::TopRight => SonnerDirection::TopDown,
-        _ => SonnerDirection::BottomUp,
-    };
-
-    let container_class = match position {
-        SonnerPosition::TopLeft => "left-6 top-6",
-        SonnerPosition::TopRight => "right-6 top-6",
-        SonnerPosition::TopCenter => "left-1/2 -translate-x-1/2 top-6",
-        SonnerPosition::BottomCenter => "left-1/2 -translate-x-1/2 bottom-6",
-        SonnerPosition::BottomLeft => "left-6 bottom-6",
-        SonnerPosition::BottomRight => "right-6 bottom-6",
-    };
-
-    view! {
-        <SonnerContainer class=container_class position=position>
-            <SonnerList position=position direction=direction>
-                ""
-            </SonnerList>
-        </SonnerContainer>
-    }
-}

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

@@ -33,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-4 text-left align-middle font-medium text-muted-foreground whitespace-nowrap", 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> }
 }
 

frontend/src/components/ui/toast.rs

@@ -49,6 +49,7 @@ pub fn SonnerTrigger(
     is_expanded: Signal<bool>,
     #[prop(optional)] on_dismiss: Option<Callback<()>>,
 ) -> impl IntoView {
+    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",
@@ -66,29 +67,11 @@ pub fn SonnerTrigger(
         _ => "bg-primary",
     };
 
-    // Stacking & Expansion Logic
+    // Simplified Style (No manual translateY needed with Flexbox)
     let style = move || {
-        let is_bottom = position.to_string().contains("Bottom");
-        let y_direction = if is_bottom { -1.0 } else { 1.0 };
-        
-        let (translate_y, scale, opacity) = if is_expanded.get() {
-            // Expanded state: Full list layout
-            let y = index as f64 * 80.0; // Increased height + gap
-            (y * y_direction, 1.0, 1.0)
-        } else {
-            // Stacked state: Sonner look
-            let y = index as f64 * 12.0; 
-            let s = 1.0 - (index as f64 * 0.05);
-            let o = if index > 3 { 0.0 } else { 1.0 - (index as f64 * 0.1) };
-            (y * y_direction, s, o)
-        };
-
         format!(
-            "z-index: {}; transform: translateY({}px) scale({}); opacity: {};",
-            total - index,
-            translate_y,
-            scale,
-            opacity
+            "z-index: {}; opacity: 1; transition: all 0.3s ease;",
+            total - index
         )
     };
 
@@ -116,9 +99,8 @@ pub fn SonnerTrigger(
     view! {
         <div
             class=move || tw_merge!(
-                "absolute transition-all duration-300 ease-in-out cursor-pointer pointer-events-auto overflow-hidden",
+                "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",
-                if position.to_string().contains("Bottom") { "bottom-0" } else { "top-0" },
                 variant_classes,
                 animation_class()
             )
@@ -161,7 +143,8 @@ pub fn provide_toaster() {
 pub fn Toaster(#[prop(default = SonnerPosition::default())] position: SonnerPosition) -> impl IntoView {
     let store = use_context::<ToasterStore>().expect("Toaster context not found");
     let toasts = store.toasts;
-    let is_hovered = RwSignal::new(false);
+
+    let is_bottom = position.to_string().contains("Bottom");
 
     let container_class = match position {
         SonnerPosition::TopLeft => "left-6 top-6 items-start",
@@ -186,17 +169,17 @@ pub fn Toaster(#[prop(default = SonnerPosition::default())] position: SonnerPosi
         </style>
         <div 
             class=tw_merge!(
-                "fixed z-[100] flex flex-col pointer-events-none min-h-[100px] w-full sm:w-[400px]",
+                "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)] px-4 sm:px-0"
+                "pb-[env(safe-area-inset-bottom)] pt-[env(safe-area-inset-top)]"
             )
-            on:mouseenter=move |_| is_hovered.set(true)
-            on:mouseleave=move |_| is_hovered.set(false)
         >
             <For
                 each=move || {
                     let list = toasts.get();
-                    list.into_iter().rev().enumerate().collect::<Vec<_>>()
+                    list.into_iter().enumerate().collect::<Vec<_>>()
                 }
                 key=|(_, toast)| toast.id
                 children=move |(index, toast)| {
@@ -210,7 +193,7 @@ pub fn Toaster(#[prop(default = SonnerPosition::default())] position: SonnerPosi
                             index=index
                             total=total
                             position=position
-                            is_expanded=is_hovered.into()
+                            is_expanded=Signal::derive(move || true)
                             on_dismiss=Callback::new(move |_| {
                                 is_exiting.set(true);
                                 leptos::task::spawn_local(async move {

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,106 @@ 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 navigator = window.navigator();
+    let sw_container = 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 navigator = window.navigator();
+    let sw_container = 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_res: Result<String, _> = shared::server_fns::push::get_public_key().await;
+    let public_key = match public_key_res {
+        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)))
+}