fix: iOS WASM Notification Crash

- frontend/src/utils/notification.rs: Notification API kullanımı is_notification_supported() ile sarmalandı - frontend/src/utils/notification.rs: leptos_use::use_web_notification yerine güvenli manuel implementasyon yapıldı - task.md: iOS WASM hatası giderildi olarak işaretlendi
feat: Tema Butonu Sidebar'a Taşındı
2026-02-11 01:12:04 +03:00 · 2026-02-11 01:08:18 +03:00 · 2026-02-11 01:00:04 +03:00 · 2026-02-11 00:54:44 +03:00 · 2026-02-11 00:43:05 +03:00 · 2026-02-11 00:40:39 +03:00
16 changed files with 6914 additions and 1854 deletions
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1274,6 +1274,7 @@ dependencies = [
 "leptos-shadcn-scroll-area",
 "leptos-shadcn-separator",
 "leptos-shadcn-sheet",
 "leptos-shadcn-skeleton",
 "leptos-shadcn-tabs",
 "leptos-shadcn-toast",
 "leptos-shadcn-tooltip",
@@ -2390,6 +2391,21 @@ dependencies = [
 "thiserror 1.0.69",
 ]
 [[package]]
 name = "leptos-shadcn-skeleton"
 version = "0.8.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6c14b6bd0f2fe191e3e114a34cee889fc983546ad488e76e76511e3d75ea3f86"
 dependencies = [
 "leptos",
 "leptos-node-ref",
 "leptos-shadcn-signal-management",
 "leptos-struct-component",
 "leptos-style",
 "tailwind_fuse",
 "web-sys",
 ]
 [[package]]
 name = "leptos-shadcn-tabs"
 version = "0.8.1"
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1 @@
 node_modules/
--- a/frontend/Cargo.toml
+++ b/frontend/Cargo.toml
@@ -52,3 +52,4 @@ leptos-shadcn-alert = "0.8"
 leptos-shadcn-toast = "0.8"
 leptos-shadcn-dropdown-menu = "0.8"
 leptos-shadcn-tooltip = "0.8"
 leptos-shadcn-skeleton = "0.8"
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,11 +1,10 @@
 <!doctype html>
 <html>
 <head>
    <meta charset="utf-8" />
-        <meta
+    <meta name="viewport"
-            name="viewport"
+        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
        />
    <title>VibeTorrent</title>
    <!-- PWA & Mobile Capable -->
@@ -37,6 +36,13 @@
            var theme = t.toLowerCase();
            document.documentElement.setAttribute("data-theme", theme);
            // Shadcn dark mode CSS değişkenleri .dark class ile çalışıyor
            var darkThemes = ["dark", "black", "night", "coffee", "luxury", "business", "dracula", "halloween", "forest", "synthwave", "dim", "nord", "sunset", "cyberpunk", "abyss"];
            if (darkThemes.indexOf(theme) !== -1) {
                document.documentElement.classList.add("dark");
            } else {
                document.documentElement.classList.remove("dark");
            }
            if (!localTheme) {
                localStorage.setItem("vibetorrent_theme", "dark");
            }
@@ -82,20 +88,15 @@
 </head>
 <body style="cursor: pointer;">
-        <div
+    <div id="app-loading" style="
            id="app-loading"
            style="
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                height: 100vh;
                font-family: sans-serif;
-            "
+            ">
-        >
+        <div id="app-loading-spinner" style="
            <div
                id="app-loading-spinner"
                style="
                    width: 40px;
                    height: 40px;
                    border: 3px solid currentColor;
@@ -103,21 +104,15 @@
                    border-radius: 50%;
                    animation: spin 0.8s linear infinite;
                    opacity: 0.5;
-                "
+                "></div>
-            ></div>
+        <div id="app-loading-error" style="display: none; text-align: center; margin-top: 20px; padding: 0 20px">
            <div
                id="app-loading-error"
                style="display: none; text-align: center; margin-top: 20px; padding: 0 20px"
            >
            <p style="color: #ef4444; font-weight: bold; margin-bottom: 8px">
                Uygulama yüklenemedi
            </p>
            <p style="font-size: 14px; opacity: 0.7">
                Bağlantınız yavaş olabilir veya bir sistem hatası oluşmuş olabilir.
            </p>
-                <button
+            <button onclick="location.reload()" style="
                    onclick="location.reload()"
                    style="
                        margin-top: 16px;
                        padding: 8px 16px;
                        background: #3b82f6;
@@ -126,8 +121,7 @@
                        border-radius: 6px;
                        cursor: pointer;
                        font-weight: 500;
-                    "
+                    ">
                >
                Sayfayı Yenile
            </button>
        </div>
@@ -152,6 +146,7 @@
        summary {
            list-style: none;
        }
        summary::-webkit-details-marker {
            display: none;
        }
@@ -226,4 +221,5 @@
        }
    </script>
 </body>
 </html>
--- a/frontend/input.css
+++ b/frontend/input.css
@@ -1,5 +1,7 @@
@import "tailwindcss";
@config "./tailwind.config.js";
@source "../src/**/*.rs";
@source "/Users/bilal/.cargo/registry/src/index.crates.io-1949cf8c6b5b557f/leptos-shadcn-*/src/**/*.rs";
@theme {
    /* Shadcn Colors */
@@ -41,14 +43,17 @@
        from {
            height: 0;
        }
        to {
            height: var(--radix-accordion-content-height);
        }
    }
    @keyframes accordion-up {
        from {
            height: var(--radix-accordion-content-height);
        }
        to {
            height: 0;
        }
@@ -123,17 +128,35 @@
    * {
        @apply border-border;
    }
    body {
        @apply bg-background text-foreground;
    }
    /* Ensure Shadcn Utilities are always available */
-    .bg-popover { background-color: hsl(var(--popover)); }
+    .bg-popover {
-    .text-popover-foreground { color: hsl(var(--popover-foreground)); }
+        background-color: hsl(var(--popover));
-    .border-border { border-color: hsl(var(--border)); }
+    }
-    .shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
+
-    .z-50 { z-index: 50; }
+    .text-popover-foreground {
-    .z-100 { z-index: 100; }
+        color: hsl(var(--popover-foreground));
    }
    .border-border {
        border-color: hsl(var(--border));
    }
    .shadow-md {
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    }
    .z-50 {
        z-index: 50;
    }
    .z-100 {
        z-index: 100;
    }
 }
 /* Fix for iOS click/blur events */
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,8 +10,11 @@
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.18",
    "autoprefixer": "^10.4.23",
    "postcss": "^8.5.6",
    "postcss-cli": "^11.0.1",
    "postcss-preset-env": "^11.1.3",
    "tailwindcss": "^4.1.18"
  },
  "dependencies": {
--- a/frontend/postcss.config.cjs
+++ b/frontend/postcss.config.cjs
@@ -0,0 +1,15 @@
 module.exports = {
    plugins: {
        "@tailwindcss/postcss": {},
        "postcss-preset-env": {
            features: {
                "nesting-rules": true,
            },
            browsers: [
                "last 2 versions",
                "iOS >= 15",
                "Safari >= 15",
            ],
        },
    },
 };
--- a/frontend/public/tailwind.css
+++ b/frontend/public/tailwind.css
--- a/frontend/src/app.rs
+++ b/frontend/src/app.rs
@@ -8,6 +8,7 @@ use leptos::prelude::*;
 use leptos::task::spawn_local;
 use leptos_router::components::{Router, Routes, Route};
 use leptos_router::hooks::use_navigate;
 use leptos_shadcn_skeleton::Skeleton;
 #[component]
 pub fn App() -> impl IntoView {
@@ -116,10 +117,40 @@ pub fn App() -> impl IntoView {
                        view! {
                            <Show when=move || !is_loading.0.get() fallback=|| view! {
-                                <div class="flex items-center justify-center h-screen bg-background">
+                                <div class="flex h-screen bg-background">
-                                    <div class="flex flex-col items-center gap-4">
+                                    // Sidebar skeleton
-                                        <div class="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full"></div>
+                                    <div class="w-56 border-r border-border p-4 space-y-4">
-                                        <p class="text-sm text-muted-foreground">"Yükleniyor..."</p>
+                                        <Skeleton class="h-8 w-3/4" />
                                        <div class="space-y-2">
                                            <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">
                                        // Header skeleton
                                        <div class="border-b border-border p-4 flex items-center gap-4">
                                            <Skeleton class="h-8 w-48" />
                                            <Skeleton class="h-8 w-64" />
                                            <div class="ml-auto"><Skeleton class="h-8 w-24" /></div>
                                        </div>
                                        // Table skeleton rows
                                        <div class="flex-1 p-4 space-y-3">
                                            <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>
                                        // Status bar skeleton
                                        <div class="border-t border-border p-3">
                                            <Skeleton class="h-5 w-96" />
                                        </div>
                                    </div>
                                </div>
                            }.into_any()>
--- a/frontend/src/components/context_menu.rs
+++ b/frontend/src/components/context_menu.rs
@@ -64,6 +64,17 @@ pub fn TorrentContextMenu(
        <Show when=move || open.get()>
            {
                    let (x, y) = position.get();
                    // Menü yaklaşık boyutları
                    let menu_width = 200;
                    let menu_height = 220;
                    let window = web_sys::window().unwrap();
                    let vw = window.inner_width().unwrap().as_f64().unwrap() as i32;
                    let vh = window.inner_height().unwrap().as_f64().unwrap() as i32;
                    // Sağa taşarsa sola aç, alta taşarsa yukarı aç
                    let final_x = if x + menu_width > vw { x - menu_width } else { x };
                    let final_y = if y + menu_height > vh { y - menu_height } else { y };
                    let final_x = final_x.max(0);
                    let final_y = final_y.max(0);
                    view! {
                        <div
                            class="fixed inset-0 z-[99]"
@@ -79,7 +90,7 @@ pub fn TorrentContextMenu(
                        />
                        <div
                            class="fixed z-[100] min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95"
-                        style=format!("left: {}px; top: {}px;", x, y)
+                            style=format!("left: {}px; top: {}px;", final_x, final_y)
                            on:click=move |e: MouseEvent| e.stop_propagation()
                    >
                        // Start
--- a/frontend/src/components/layout/sidebar.rs
+++ b/frontend/src/components/layout/sidebar.rs
@@ -3,6 +3,9 @@ use leptos::task::spawn_local;
 use leptos_shadcn_button::{Button, ButtonVariant, ButtonSize};
 use leptos_shadcn_avatar::{Avatar, AvatarFallback};
 use leptos_shadcn_separator::Separator;
 use leptos::html;
 use leptos_use::storage::use_local_storage;
 use ::codee::string::FromToStringCodec;
 #[component]
 pub fn Sidebar() -> impl IntoView {
@@ -67,6 +70,37 @@ pub fn Sidebar() -> impl IntoView {
        username().chars().next().unwrap_or('?').to_uppercase().to_string()
    };
    // --- THEME LOGIC START ---
    let (current_theme, set_current_theme, _) = use_local_storage::<String, FromToStringCodec>("vibetorrent_theme");
    // Initialize with default if empty
    let current_theme_val = current_theme.get();
    if current_theme_val.is_empty() {
        set_current_theme.set("dark".to_string());
    }
    // Automatically sync theme to document attribute
    Effect::new(move |_| {
        let theme = current_theme.get().to_lowercase();
        if let Some(doc) = document().document_element() {
            let _ = doc.set_attribute("data-theme", &theme);
            // Also set class for Shadcn dark mode support
            if theme == "dark" || theme == "dracula" || theme == "dim" || theme == "abyss" || theme == "sunset" || theme == "cyberpunk" || theme == "nord" || theme == "business" || theme == "night" || theme == "black" || theme == "luxury" || theme == "coffee" || theme == "forest" || theme == "halloween" || theme == "synthwave" {
                let _ = doc.class_list().add_1("dark");
            } else {
                let _ = doc.class_list().remove_1("dark");
            }
        }
    });
    let theme_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);
        }
    };
    // --- THEME LOGIC END ---
    view! {
        <div class="w-full h-full flex flex-col bg-card" style="padding-top: env(safe-area-inset-top);">
            <div class="p-4 flex-1 overflow-y-auto">
@@ -169,6 +203,52 @@ pub fn Sidebar() -> impl IntoView {
                        <div class="font-medium text-sm truncate text-foreground">{username}</div>
                        <div class="text-[10px] text-muted-foreground truncate">"Online"</div>
                    </div>
                    // --- THEME BUTTON ---
                    <details class="group relative" node_ref=theme_details_ref>
                        <summary 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-8 w-8 cursor-pointer outline-none list-none [&::-webkit-details-marker]:hidden">
                            <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.53 16.122a3 3 0 0 0-5.78 1.128 2.25 2.25 0 0 1-2.4 2.245 4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128Zm0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.763m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42" />
                            </svg>
                        </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 max-h-64 overflow-y-auto">
                            <ul class="w-full">
                                {
                                    let themes = vec![
                                        "light", "dark", "dim", "nord", "cupcake", "dracula", "cyberpunk", "emerald", "sunset", "abyss"
                                    ];
                                    themes.into_iter().map(|theme| {
                                        let theme_name = theme.to_string();
                                        let theme_name_for_class = theme_name.clone();
                                        let theme_name_for_onclick = theme_name.clone();
                                        let is_active = move || current_theme.get() == theme_name_for_class;
                                        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 capitalize";
                                                        if is_active() { format!("{} bg-accent text-accent-foreground font-medium", base) } else { base.to_string() }
                                                    }
                                                    on:click=move |_| {
                                                        set_current_theme.set(theme_name_for_onclick.clone());
                                                        close_details(theme_details_ref);
                                                    }
                                                >
                                                    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
                                                        <Show when=is_active.clone() fallback=|| ()>
                                                            <span>"✓"</span>
                                                        </Show>
                                                    </span>
                                                    {theme_name}
                                                </button>
                                            </li>
                                        }
                                    }).collect::<Vec<_>>()
                                }
                            </ul>
                        </div>
                    </details>
                    <Button
                        variant=ButtonVariant::Ghost
                        size=ButtonSize::Icon
--- a/frontend/src/components/layout/statusbar.rs
+++ b/frontend/src/components/layout/statusbar.rs
@@ -1,7 +1,5 @@
 use leptos::prelude::*;
 use leptos::html;
 use leptos_use::storage::use_local_storage;
 use ::codee::string::FromToStringCodec;
 use shared::GlobalLimitRequest;
 use crate::api;
@@ -30,27 +28,7 @@ pub fn StatusBar() -> impl IntoView {
    let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
    let stats = store.global_stats;
    let (current_theme, set_current_theme, _) = use_local_storage::<String, FromToStringCodec>("vibetorrent_theme");
    // Initialize with default if empty
    let current_theme_val = current_theme.get();
    if current_theme_val.is_empty() {
        set_current_theme.set("dark".to_string());
    }
    // Automatically sync theme to document attribute
    Effect::new(move |_| {
        let theme = current_theme.get().to_lowercase();
        if let Some(doc) = document().document_element() {
            let _ = doc.set_attribute("data-theme", &theme);
            // Also set class for Shadcn dark mode support
            if theme == "dark" || theme == "dracula" || theme == "dim" || theme == "abyss" {
                let _ = doc.class_list().add_1("dark");
            } else {
                let _ = doc.class_list().remove_1("dark");
            }
        }
    });
    // Preset limits in bytes/s
    let limits: Vec<(i64, &str)> = vec!(
@@ -91,7 +69,6 @@ pub fn StatusBar() -> impl IntoView {
        let down_details_ref = NodeRef::<html::Details>::new();
        let up_details_ref = NodeRef::<html::Details>::new();
        let theme_details_ref = NodeRef::<html::Details>::new();
        let close_details = move |node_ref: NodeRef<html::Details>| {
            if let Some(el) = node_ref.get_untracked() {
@@ -201,49 +178,6 @@ pub fn StatusBar() -> impl IntoView {
                </details>
                <div class="ml-auto flex items-center gap-4">
                    <details class="group relative" node_ref=theme_details_ref>
                        <summary 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 cursor-pointer outline-none list-none [&::-webkit-details-marker]:hidden">
                            <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.53 16.122a3 3 0 0 0-5.78 1.128 2.25 2.25 0 0 1-2.4 2.245 4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128Zm0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.763m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42" />
                            </svg>
                        </summary>
                        <div class="absolute bottom-full right-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 max-h-96 overflow-y-auto">
                            <ul class="w-full">
                                {
                                    let themes = vec![
                                        "light", "dark", "dim", "nord", "cupcake", "dracula", "cyberpunk", "emerald", "sunset", "abyss"
                                    ];
                                    themes.into_iter().map(|theme| {
                                        let theme_name = theme.to_string();
                                        let theme_name_for_class = theme_name.clone();
                                        let theme_name_for_onclick = theme_name.clone();
                                        let is_active = move || current_theme.get() == theme_name_for_class;
                                        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 capitalize";
                                                        if is_active() { format!("{} bg-accent text-accent-foreground font-medium", base) } else { base.to_string() }
                                                    }
                                                                                                    on:click=move |_| {
                                                                                                        set_current_theme.set(theme_name_for_onclick.clone());
                                                                                                        close_details(theme_details_ref);
                                                                                                    }
                                                                                                >
                                                                                                    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
                                                                                                        <Show when=is_active.clone() fallback=|| ()>
                                                                                                            <span>"✓"</span>
                                                                                                        </Show>
                                                                                                    </span>
                                                                                                    {theme_name}
                                                                                                </button>                                            </li>
                                        }
                                    }).collect::<Vec<_>>()
                                }
                            </ul>
                        </div>
                    </details>
                <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"
--- a/frontend/src/components/torrent/add_torrent.rs
+++ b/frontend/src/components/torrent/add_torrent.rs
@@ -1,6 +1,5 @@
 use leptos::prelude::*;
 use leptos::task::spawn_local;
 use leptos_shadcn_dialog::{Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter};
 use leptos_shadcn_input::Input;
 use leptos_shadcn_button::{Button, ButtonVariant};
 use leptos_shadcn_alert::{Alert, AlertDescription, AlertVariant};
@@ -17,7 +16,6 @@ pub fn AddTorrentDialog(
    let uri = signal(String::new());
    let is_loading = signal(false);
    let error_msg = signal(Option::<String>::None);
    let is_open = signal(true);
    let handle_submit = move |ev: web_sys::SubmitEvent| {
        ev.prevent_default();
@@ -41,7 +39,6 @@ pub fn AddTorrentDialog(
                        shared::NotificationLevel::Success, 
                        "Torrent başarıyla eklendi"
                    );
                    is_open.1.set(false);
                    on_close.run(());
                }
                Err(e) => {
@@ -53,22 +50,27 @@ pub fn AddTorrentDialog(
        });
    };
-
+    let handle_backdrop = {
-    view! {
+        let on_close = on_close.clone();
-        <Dialog
+        move |e: web_sys::MouseEvent| {
-            open=Signal::derive(move || is_open.0.get())
+            e.stop_propagation();
            on_open_change=Callback::new(move |open: bool| {
                is_open.1.set(open);
                if !open {
            on_close.run(());
        }
-            })
+    };
-        >
+
-            <DialogContent class="sm:max-w-[425px]">
+    view! {
-                <DialogHeader>
+        // Backdrop overlay
-                    <DialogTitle>"Add Torrent"</DialogTitle>
+        <div
-                    <DialogDescription>"Enter a Magnet link or a .torrent file URL."</DialogDescription>
+            class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm"
-                </DialogHeader>
+            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>
            <form on:submit=handle_submit class="space-y-4">
                <Input
@@ -85,11 +87,10 @@ pub fn AddTorrentDialog(
                    </Alert>
                })}
-                    <DialogFooter>
+                <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
                    <Button
                        variant=ButtonVariant::Ghost
                        on_click=Callback::new(move |()| {
                                is_open.1.set(false);
                            on_close.run(());
                        })
                    >
@@ -97,14 +98,28 @@ pub fn AddTorrentDialog(
                    </Button>
                    <Button disabled=Signal::derive(move || is_loading.0.get())>
                        {move || if is_loading.0.get() {
-                                leptos::either::Either::Left(view! { <span class="loading loading-spinner"></span> "Adding..." })
+                            leptos::either::Either::Left(view! { 
                                <span class="animate-spin mr-2 h-4 w-4 border-2 border-current border-t-transparent rounded-full"></span> 
                                "Adding..." 
                            })
                        } else {
                            leptos::either::Either::Right(view! { "Add" })
                        }}
                    </Button>
-                    </DialogFooter>
+                </div>
            </form>
-            </DialogContent>
+
-        </Dialog>
+            // Close button (X)
            <button 
                class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none"
                on:click=move |_| on_close.run(())
            >
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
                    <path d="M18 6 6 18"></path>
                    <path d="m6 6 12 12"></path>
                </svg>
                <span class="sr-only">"Close"</span>
            </button>
        </div>
    }
 }
--- a/frontend/src/utils/notification.rs
+++ b/frontend/src/utils/notification.rs
@@ -1,10 +1,12 @@
 use wasm_bindgen::prelude::*;
 use web_sys::{Notification, NotificationOptions};
 use leptos::prelude::*;
 use leptos_use::{use_web_notification, UseWebNotificationReturn, NotificationPermission};
 /// Request browser notification permission from user
 pub async fn request_notification_permission() -> bool {
    if !is_notification_supported() {
        return false;
    }
    if let Ok(promise) = Notification::request_permission() {
        if let Ok(result) = wasm_bindgen_futures::JsFuture::from(promise).await {
            return result.as_string().unwrap_or_default() == "granted";
@@ -21,6 +23,9 @@ pub fn is_notification_supported() -> bool {
 /// Get current notification permission status
 pub fn get_notification_permission() -> String {
    if !is_notification_supported() {
        return "denied".to_string();
    }
    match Notification::permission() {
        web_sys::NotificationPermission::Granted => "granted".to_string(),
        web_sys::NotificationPermission::Denied => "denied".to_string(),
@@ -32,8 +37,6 @@ pub fn get_notification_permission() -> String {
 /// Hook for using browser notifications within Leptos components or effects.
 /// This uses leptos-use for reactive permission tracking.
 pub fn use_app_notification() -> impl Fn(&str, &str) + Clone {
    let UseWebNotificationReturn { permission, .. } = use_web_notification();
    move |title: &str, body: &str| {
        // Check user preference from localStorage
        let window = web_sys::window().expect("no global window");
@@ -42,8 +45,8 @@ pub fn use_app_notification() -> impl Fn(&str, &str) + Clone {
            .and_then(|s| s.get_item("vibetorrent_browser_notifications").ok().flatten())
            .unwrap_or_else(|| "true".to_string());
-        // Use the reactive permission signal from leptos-use
+        // Check platform support and permission
-        if enabled == "true" && permission.get() == NotificationPermission::Granted {
+        if enabled == "true" && is_notification_supported() && get_notification_permission() == "granted" {
            show_browser_notification(title, body);
        }
    }
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,6 +1,20 @@
 const path = require("path");
 const os = require("os");
 // Cargo registry'deki leptos-shadcn crate'lerini Tailwind'e taratmak için
 const cargoRegistry = path.join(
  os.homedir(),
  ".cargo/registry/src/*/leptos-shadcn-*/src/**/*.rs"
 );
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./index.html", "./src/**/*.{rs,html}"],
+  darkMode: "class",
  content: [
    "./index.html",
    "./src/**/*.{rs,html}",
    cargoRegistry,
  ],
  theme: {
    extend: {
      colors: {
Author	SHA1	Message	Date
spinline	5b016aca58	fix: iOS WASM Notification Crash All checks were successful Build MIPS Binary / build (push) Successful in 5m21s Details - frontend/src/utils/notification.rs: Notification API kullanımı is_notification_supported() ile sarmalandı - frontend/src/utils/notification.rs: leptos_use::use_web_notification yerine güvenli manuel implementasyon yapıldı - task.md: iOS WASM hatası giderildi olarak işaretlendi	2026-02-11 01:12:04 +03:00
spinline	5bd3d31dd6	feat: Tema Butonu Sidebar'a Taşındı Some checks failed Build MIPS Binary / build (push) Has been cancelled Details - sidebar.rs: Tema state yönetimi ve UI butonu eklendi (profil alanının yanına) - statusbar.rs: Tema ile ilgili eski kodlar ve UI kaldırıldı - implementation_plan.md: Plan dosyası oluşturuldu - task.md: Görev tamamlandı olarak işaretlendi	2026-02-11 01:08:18 +03:00
spinline	87ddd3bb93	fix: iOS Dark Mode ve Tema Değişimi Düzeltildi All checks were successful Build MIPS Binary / build (push) Successful in 5m17s Details - tailwind.config.js: darkMode: 'class' olarak ayarlandı (iOS sistem tercihi yerine .dark class kullanımı için) - statusbar.rs: Tema değişiminde .dark class ekleme mantığı tüm dark temaları kapsayacak şekilde genişletildi - index.html: Sayfa yüklenirken .dark class ekleyen inline script güncellendi - public/tailwind.css: PostCSS ile yeniden derlendi (nesting düzleştirildi + .dark seçiciler eklendi)	2026-02-11 01:00:04 +03:00
spinline	463249982c	fix: iOS Safari uyumluluk - CSS nesting düzleştirildi All checks were successful Build MIPS Binary / build (push) Successful in 5m16s Details - PostCSS tabanlı build'e geçildi (@tailwindcss/postcss + postcss-preset-env) - CSS native nesting (&) düzleştirilerek eski Safari desteği sağlandı - iOS 15+ ve Safari 15+ desteği eklendi	2026-02-11 00:54:44 +03:00
spinline	9447a66cc1	feat: loading ekranı shadcn Skeleton ile değiştirildi All checks were successful Build MIPS Binary / build (push) Successful in 5m16s Details - Yükleniyor... spinner yerine uygulamanın layout'unu simüle eden skeleton UI - Sidebar, header, tablo satırları ve statusbar skeleton'ları	2026-02-11 00:43:05 +03:00
spinline	45247a020e	fix: AddTorrent dialog stili düzeltildi, skeleton crate eklendi Some checks failed Build MIPS Binary / build (push) Has been cancelled Details - Dialog buggy leptos-shadcn-dialog yerine doğrudan shadcn HTML markup ile yeniden yazıldı - Backdrop overlay, card panel, X close butonu eklendi - leptos-shadcn-skeleton dependency eklendi - Tailwind CSS rebuild edildi	2026-02-11 00:40:39 +03:00
spinline	77b77c7775	fix: Tailwind CSS rebuild - shadcn crate class'ları @source ile dahil edildi All checks were successful Build MIPS Binary / build (push) Successful in 5m15s Details - input.css'e @source directive eklendi (cargo registry leptos-shadcn path'i) - public/tailwind.css yeniden build edildi (1800 → 2940 satır) - backdrop-blur, data-[state], focus-visible, peer-disabled vb. class'lar artık mevcut	2026-02-11 00:30:35 +03:00
spinline	8ef3008cb8	fix: context menu viewport sınır kontrolü - alta/sağa taşma düzeltildi All checks were successful Build MIPS Binary / build (push) Successful in 5m14s Details	2026-02-11 00:24:42 +03:00