fix: toast notifications context issue by wrapping app in SonnerProvider

- frontend/src/components/layout/sidebar.rs: Replaced theme selector with simple dark/light toggle button.
- Cleaned up profile section layout and added safe-area padding.

frontend/src/app.rs

@@ -1,5 +1,4 @@
 use crate::components::layout::protected::Protected;
-use crate::components::toast::ToastContainer;
 use crate::components::torrent::table::TorrentTable;
 use crate::components::torrent::detail::TorrentDetail;
 use crate::components::auth::login::Login;
@@ -9,9 +8,19 @@ use leptos::task::spawn_local;
 use leptos_router::components::{Router, Routes, Route};
 use leptos_router::hooks::use_navigate;
 use leptos_shadcn_skeleton::Skeleton;
+use leptos_shadcn_toast::SonnerProvider;
 
 #[component]
 pub fn App() -> impl IntoView {
+    view! {
+        <SonnerProvider>
+            <InnerApp />
+        </SonnerProvider>
+    }
+}
+
+#[component]
+fn InnerApp() -> impl IntoView {
     crate::store::provide_torrent_store();
     let store = use_context::<crate::store::TorrentStore>();
 
@@ -188,8 +197,6 @@ pub fn App() -> impl IntoView {
                     }/>
                 </Routes>
             </Router>
-
-            <ToastContainer />
         </div>
     }
 }

frontend/src/components/layout/sidebar.rs

@@ -4,6 +4,9 @@ use leptos_shadcn_button::{Button, ButtonVariant, ButtonSize};
 use leptos_shadcn_avatar::{Avatar, AvatarFallback};
 use leptos_shadcn_separator::Separator;
 
+use leptos_use::storage::use_local_storage;
+use ::codee::string::FromToStringCodec;
+
 #[component]
 pub fn Sidebar() -> impl IntoView {
     let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
@@ -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 toggle_theme = move |_| {
+        let new_theme = if current_theme.get() == "dark" { "light" } else { "dark" };
+        set_current_theme.set(new_theme.to_string());
+    };
+    // --- THEME LOGIC END ---
+
     view! {
         <div class="w-full h-full flex flex-col bg-card" style="padding-top: env(safe-area-inset-top);">
             <div class="p-4 flex-1 overflow-y-auto">
@@ -158,7 +192,7 @@ pub fn Sidebar() -> impl IntoView {
 
             <Separator />
 
-            <div class="p-4 bg-card">
+            <div class="p-4 bg-card" style="padding-bottom: calc(1rem + env(safe-area-inset-bottom));">
                 <div class="flex items-center gap-3">
                     <Avatar class="h-8 w-8">
                         <AvatarFallback class="bg-primary text-primary-foreground text-xs font-medium">
@@ -169,6 +203,27 @@ 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 ---
+                    <Button
+                        variant=ButtonVariant::Ghost
+                        size=ButtonSize::Icon
+                        class="h-8 w-8 text-muted-foreground hover:text-foreground"
+                        on_click=Callback::new(toggle_theme)
+                    >
+                        // Sun icon for dark mode (to switch to light), Moon for light (to switch to dark)
+                        // Actually show current state or action? Usually action.
+                        // If dark, show Sun. If light, show Moon.
+                        <Show when=move || current_theme.get() == "dark" fallback=|| view! {
+                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
+                            </svg>
+                        }>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
+                            </svg>
+                        </Show>
+                    </Button>
                     <Button
                         variant=ButtonVariant::Ghost
                         size=ButtonSize::Icon

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" || 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");
-            }
-        }
-    });
 
     // 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"

frontend/src/components/mod.rs

@@ -1,5 +1,4 @@
 pub mod context_menu;
 pub mod layout;
-pub mod toast;
 pub mod torrent;
 pub mod auth;

frontend/src/components/toast.rs

@@ -1,86 +0,0 @@
-use leptos::prelude::*;
-use shared::NotificationLevel;
-use leptos_shadcn_alert::{Alert, AlertVariant};
-
-// ============================================================================
-// Toast Components - Using ShadCN Alert
-// ============================================================================
-
-fn level_to_variant(level: &NotificationLevel) -> AlertVariant {
-    match level {
-        NotificationLevel::Info => AlertVariant::Default,
-        NotificationLevel::Success => AlertVariant::Success,
-        NotificationLevel::Warning => AlertVariant::Warning,
-        NotificationLevel::Error => AlertVariant::Destructive,
-    }
-}
-
-fn level_icon(level: &NotificationLevel) -> impl IntoView {
-    match level {
-        NotificationLevel::Info => view! {
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 opacity-90">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
-            </svg>
-        }.into_any(),
-        NotificationLevel::Success => view! {
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 opacity-90">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-            </svg>
-        }.into_any(),
-        NotificationLevel::Warning => view! {
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 opacity-90">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
-            </svg>
-        }.into_any(),
-        NotificationLevel::Error => view! {
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 opacity-90">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
-            </svg>
-        }.into_any(),
-    }
-}
-
-/// Individual toast item component
-#[component]
-fn ToastItem(
-    level: NotificationLevel,
-    message: String,
-) -> impl IntoView {
-    let variant = level_to_variant(&level);
-    let icon = level_icon(&level);
-    
-    view! {
-        <Alert variant=variant class="pointer-events-auto shadow-lg">
-            <div class="flex items-center gap-3">
-                {icon}
-                <div class="text-sm font-medium">{message}</div>
-            </div>
-        </Alert>
-    }
-}
-
-/// Main toast container - renders all active notifications
-#[component]
-pub fn ToastContainer() -> impl IntoView {
-    let store = use_context::<crate::store::TorrentStore>().expect("TorrentStore not provided");
-    let notifications = store.notifications;
-
-    view! {
-        <div 
-            class="fixed bottom-0 right-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px] gap-2"
-        >
-            <For
-                each=move || notifications.get()
-                key=|item| item.id
-                children=move |item| {
-                    view! {
-                        <ToastItem
-                            level=item.notification.level
-                            message=item.notification.message
-                        />
-                    }
-                }
-            />
-        </div>
-    }
-}

frontend/src/components/torrent/add_torrent.rs

@@ -11,7 +11,6 @@ pub fn AddTorrentDialog(
     on_close: Callback<()>,
 ) -> impl IntoView {
     let store = use_context::<TorrentStore>().expect("TorrentStore not provided");
-    let notifications = store.notifications;
 
     let uri = signal(String::new());
     let is_loading = signal(false);
@@ -34,11 +33,7 @@ pub fn AddTorrentDialog(
             match api::torrent::add(&uri_val).await {
                 Ok(_) => {
                     log::info!("Torrent added successfully");
-                    crate::store::show_toast_with_signal(
+                    crate::store::toast_success("Torrent başarıyla eklendi");
-                        notifications, 
-                        shared::NotificationLevel::Success, 
-                        "Torrent başarıyla eklendi"
-                    );
                     on_close.run(());
                 }
                 Err(e) => {

frontend/src/components/torrent/table.rs

@@ -1,6 +1,6 @@
 use leptos::prelude::*;
 use leptos::task::spawn_local;
-use crate::store::{get_action_messages, show_toast_with_signal};
+use crate::store::{get_action_messages, show_toast};
 use crate::api;
 use shared::NotificationLevel;
 use crate::components::context_menu::TorrentContextMenu;
@@ -116,7 +116,6 @@ pub fn TorrentTable() -> impl IntoView {
         let (success_msg_str, error_msg_str): (&'static str, &'static str) = get_action_messages(&action);
         let success_msg = success_msg_str.to_string();
         let error_msg = error_msg_str.to_string();
-        let notifications = store.notifications;
         spawn_local(async move {
             let result = match action.as_str() {
                 "delete" => api::torrent::delete(&hash).await,
@@ -126,8 +125,8 @@ pub fn TorrentTable() -> impl IntoView {
                 _ => api::torrent::action(&hash, &action).await,
             };
             match result {
-                Ok(_) => show_toast_with_signal(notifications, NotificationLevel::Success, success_msg),
+                Ok(_) => show_toast(NotificationLevel::Success, success_msg),
-                Err(e) => show_toast_with_signal(notifications, NotificationLevel::Error, format!("{}: {:?}", error_msg, e)),
+                Err(e) => show_toast(NotificationLevel::Error, format!("{}: {:?}", error_msg, e)),
             }
         });
     });

frontend/src/store.rs

@@ -7,40 +7,18 @@ use std::collections::HashMap;
 use struct_patch::traits::Patch;
 use base64::{Engine as _, engine::general_purpose::STANDARD as BASE64};
 
-#[derive(Clone, Debug, PartialEq)]
-pub struct NotificationItem {
-    pub id: u64,
-    pub notification: SystemNotification,
-}
-
-pub fn show_toast_with_signal(
-    notifications: RwSignal<Vec<NotificationItem>>,
-    level: NotificationLevel,
-    message: impl Into<String>,
-) {
-    let id = js_sys::Date::now() as u64;
-    let notification = SystemNotification {
-        level,
-        message: message.into(),
-    };
-    let item = NotificationItem { id, notification };
-
-    notifications.update(|list| list.push(item));
-
-    leptos::prelude::set_timeout(
-        move || {
-            notifications.update(|list| list.retain(|i| i.id != id));
-        },
-        std::time::Duration::from_secs(5),
-    );
-}
-
 pub fn show_toast(level: NotificationLevel, message: impl Into<String>) {
-    if let Some(store) = use_context::<TorrentStore>() {
+    let msg = message.into();
-        show_toast_with_signal(store.notifications, level, message);
+    match level {
+        NotificationLevel::Info => { leptos_shadcn_toast::toast::info(&msg).show(); },
+        NotificationLevel::Success => { leptos_shadcn_toast::toast::success(&msg).show(); },
+        NotificationLevel::Warning => { leptos_shadcn_toast::toast::warning(&msg).show(); },
+        NotificationLevel::Error => { leptos_shadcn_toast::toast::error(&msg).show(); },
     }
 }
 
+
+
 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); }
 
@@ -67,7 +45,6 @@ pub struct TorrentStore {
     pub filter: RwSignal<FilterStatus>,
     pub search_query: RwSignal<String>,
     pub global_stats: RwSignal<GlobalStats>,
-    pub notifications: RwSignal<Vec<NotificationItem>>,
     pub user: RwSignal<Option<String>>,
     pub selected_torrent: RwSignal<Option<String>>,
 }
@@ -77,16 +54,14 @@ pub fn provide_torrent_store() {
     let filter = RwSignal::new(FilterStatus::All);
     let search_query = RwSignal::new(String::new());
     let global_stats = RwSignal::new(GlobalStats::default());
-    let notifications = RwSignal::new(Vec::<NotificationItem>::new());
     let user = RwSignal::new(Option::<String>::None);
     let selected_torrent = RwSignal::new(Option::<String>::None);
 
     let show_browser_notification = crate::utils::notification::use_app_notification();
 
-    let store = TorrentStore { torrents, filter, search_query, global_stats, notifications, user, selected_torrent };
+    let store = TorrentStore { torrents, filter, search_query, global_stats, user, selected_torrent };
     provide_context(store);
 
-    let notifications_for_sse = notifications;
     let global_stats_for_sse = global_stats;
     let torrents_for_sse = torrents;
     let show_browser_notification = show_browser_notification.clone();
@@ -112,7 +87,7 @@ pub fn provide_torrent_store() {
                                 got_first_message = true;
                                 backoff_ms = 1000;
                                 if was_connected && disconnect_notified {
-                                    show_toast_with_signal(notifications_for_sse, NotificationLevel::Success, "Sunucu bağlantısı yeniden kuruldu");
+                                    show_toast(NotificationLevel::Success, "Sunucu bağlantısı yeniden kuruldu");
                                     disconnect_notified = false;
                                 }
                                 was_connected = true;
@@ -149,7 +124,7 @@ pub fn provide_torrent_store() {
                                                     }
                                                     AppEvent::Stats(stats) => { global_stats_for_sse.set(stats); }
                                                     AppEvent::Notification(n) => {
-                                                        show_toast_with_signal(notifications_for_sse, n.level.clone(), n.message.clone());
+                                                        show_toast(n.level.clone(), n.message.clone());
                                                         if n.message.contains("tamamlandı") || n.level == shared::NotificationLevel::Error {
                                                             show_browser_notification("VibeTorrent", &n.message);
                                                         }
@@ -164,14 +139,14 @@ pub fn provide_torrent_store() {
                             }
                         }
                         if was_connected && !disconnect_notified {
-                            show_toast_with_signal(notifications_for_sse, NotificationLevel::Warning, "Sunucu bağlantısı kesildi, yeniden bağlanılıyor...");
+                            show_toast(NotificationLevel::Warning, "Sunucu bağlantısı kesildi, yeniden bağlanılıyor...");
                             disconnect_notified = true;
                         }
                     }
                 }
                 Err(_) => {
                     if was_connected && !disconnect_notified {
-                        show_toast_with_signal(notifications_for_sse, NotificationLevel::Warning, "Sunucu bağlantısı kurulamıyor...");
+                        show_toast(NotificationLevel::Warning, "Sunucu bağlantısı kurulamıyor...");
                         disconnect_notified = true;
                     }
                 }

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);
         }
     }