style: restore official rust-ui OKLCH color scheme and Tailwind v4 theme configuration

Cargo.lock

@@ -320,9 +320,11 @@ dependencies = [
  "dotenvy",
  "futures",
  "governor",
+ "icons",
  "jsonwebtoken",
  "leptos",
  "leptos_axum",
+ "leptos_ui",
  "mime_guess",
  "openssl",
  "quick-xml",
@@ -343,6 +345,7 @@ dependencies = [
  "tower_governor",
  "tracing",
  "tracing-subscriber",
+ "tw_merge",
  "utoipa",
  "utoipa-swagger-ui",
  "web-push",

Cargo.toml

@@ -2,6 +2,9 @@
 members = ["backend", "frontend", "shared"]
 resolver = "2"
 
+[[workspace.metadata.leptos]]
+tailwind-input-file = "frontend/input.css"
+
 [profile.release]
 # En küçük binary boyutu
 opt-level = "z"

backend/Cargo.toml

@@ -46,4 +46,7 @@ governor = "0.10.4"
 # Leptos
 leptos = { version = "0.8.15", features = ["nightly"] }
 leptos_axum = { version = "0.8.7" }
-jsonwebtoken = "9"
+jsonwebtoken = "9"
+tw_merge = { version = "0.1.17", features = ["variant"] }
+icons = { version = "0.18.0", features = ["leptos"] }
+leptos_ui = "0.3.20"

backend/src/main.rs

@@ -1,3 +1,4 @@
+mod components;
 mod diff;
 mod handlers;
 #[cfg(feature = "push-notifications")]

backend/src/push.rs

@@ -191,30 +191,20 @@ 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);
-                                                // If subscription is invalid/expired (Gone or Unauthorized), remove it
-                                                if format!("{:?}", e).contains("Unauthorized") || format!("{:?}", e).contains("Gone") {
-                                                    tracing::info!("Removing invalid subscription: {}", subscription.endpoint);
-                                                    let _ = store.remove_subscription(&subscription.endpoint).await;
-                                                }
+                                                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) => {
-                                        let err_debug = format!("{:?}", e);
-                                        let err_display = format!("{}", e);
-                                        tracing::error!("Failed to build push message for {}: (Debug: {}) (Display: {})", subscription.endpoint, err_debug, err_display);
-                                        
-                                        // Broaden error matching to catch various encryption and auth failures
-                                        let is_critical_error = err_debug.to_lowercase().contains("encrypt") 
-                                            || err_debug.to_lowercase().contains("vapid") 
-                                            || err_debug.to_lowercase().contains("unauthorized")
-                                            || err_debug.to_lowercase().contains("unknown error");
-
-                                        if is_critical_error {
-                                            tracing::warn!("Critical push error detected, removing invalid subscription: {}", subscription.endpoint);
-                                            let _ = store.remove_subscription(&subscription.endpoint).await;
-                                        }
+                                        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;
                                     }
                                 }
                             }

frontend/index.html

@@ -20,7 +20,7 @@
     <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
 
     <!-- Trunk Assets -->
-    <script data-trunk rel="rust" src="Cargo.toml" data-wasm-opt="0" data-preload="false"></script>
+    <link data-trunk rel="rust" href="Cargo.toml" data-wasm-opt="0" data-preload="false" />
     <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" />

frontend/input.css

@@ -1,72 +1,69 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 
-
 :root {
-  --background: 0 0% 100%;
-  --foreground: 240 10% 3.9%;
-  --card: 0 0% 100%;
-  --card-foreground: 240 10% 3.9%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 240 10% 3.9%;
-  --primary: 240 5.9% 10%;
-  --primary-foreground: 0 0% 98%;
-  --secondary: 240 4.8% 95.9%;
-  --secondary-foreground: 240 5.9% 10%;
-  --muted: 240 4.8% 95.9%;
-  --muted-foreground: 240 3.8% 46.1%;
-  --accent: 240 4.8% 95.9%;
-  --accent-foreground: 240 5.9% 10%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 240 5.9% 90%;
-  --input: 240 5.9% 90%;
-  --ring: 240 5.9% 10%;
-  --radius: 0.5rem;
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
 }
 
 .dark {
-  --background: 240 10% 3.9%;
-  --foreground: 0 0% 98%;
-  --card: 240 10% 3.9%;
-  --card-foreground: 0 0% 98%;
-  --popover: 240 10% 3.9%;
-  --popover-foreground: 0 0% 98%;
-  --primary: 0 0% 98%;
-  --primary-foreground: 240 5.9% 10%;
-  --secondary: 240 3.7% 15.9%;
-  --secondary-foreground: 0 0% 98%;
-  --muted: 240 3.7% 15.9%;
-  --muted-foreground: 240 5% 64.9%;
-  --accent: 240 3.7% 15.9%;
-  --accent-foreground: 0 0% 98%;
-  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 240 3.7% 15.9%;
-  --input: 240 3.7% 15.9%;
-  --ring: 240 4.9% 83.9%;
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
 }
 
 @theme inline {
-  --color-background: hsl(var(--background));
-  --color-foreground: hsl(var(--foreground));
-  --color-card: hsl(var(--card));
-  --color-card-foreground: hsl(var(--card-foreground));
-  --color-popover: hsl(var(--popover));
-  --color-popover-foreground: hsl(var(--popover-foreground));
-  --color-primary: hsl(var(--primary));
-  --color-primary-foreground: hsl(var(--primary-foreground));
-  --color-secondary: hsl(var(--secondary));
-  --color-secondary-foreground: hsl(var(--secondary-foreground));
-  --color-muted: hsl(var(--muted));
-  --color-muted-foreground: hsl(var(--muted-foreground));
-  --color-accent: hsl(var(--accent));
-  --color-accent-foreground: hsl(var(--accent-foreground));
-  --color-destructive: hsl(var(--destructive));
-  --color-destructive-foreground: hsl(var(--destructive-foreground));
-  --color-border: hsl(var(--border));
-  --color-input: hsl(var(--input));
-  --color-ring: hsl(var(--ring));
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
@@ -83,10 +80,10 @@
 
   button:not(:disabled),
   [role="button"]:not(:disabled) {
-    cursor: pointer;
+    @apply cursor-pointer;
   }
 
   dialog {
-    margin: auto;
+    @apply m-auto;
   }
 }

frontend/src/components/auth/login.rs

@@ -1,24 +1,34 @@
 use leptos::prelude::*;
 use leptos::task::spawn_local;
 use crate::components::ui::card::{Card, CardHeader, CardContent};
-use crate::components::ui::input::{Input, InputType};
-
-use crate::components::ui::button::Button;
+use crate::components::ui::auto_form::{AutoForm, AutoFormField};
 
 #[component]
 pub fn Login() -> impl IntoView {
-    let username = RwSignal::new(String::new());
-    let password = RwSignal::new(String::new());
     let error = signal(Option::<String>::None);
     let loading = signal(false);
 
-    let handle_login = move |ev: web_sys::SubmitEvent| {
-        ev.prevent_default();
+    let fields = vec![
+        AutoFormField::Text {
+            name: "username".to_string(),
+            label: "Kullanıcı Adı".to_string(),
+            placeholder: Some("Kullanıcı adınız".to_string()),
+            required: true,
+        },
+        AutoFormField::Password {
+            name: "password".to_string(),
+            label: "Şifre".to_string(),
+            placeholder: Some("******".to_string()),
+            required: true,
+        },
+    ];
+
+    let on_submit = move |data: std::collections::HashMap<String, String>| {
         loading.1.set(true);
         error.1.set(None);
 
-        let user = username.get();
-        let pass = password.get();
+        let user = data.get("username").cloned().unwrap_or_default();
+        let pass = data.get("password").cloned().unwrap_or_default();
 
         spawn_local(async move {
             match shared::server_fns::auth::login(user, pass).await {
@@ -49,47 +59,20 @@ pub fn Login() -> impl IntoView {
                 </CardHeader>
                 
                 <CardContent class="pt-4">
-                    <form on:submit=handle_login class="space-y-4">
-                        <div class="space-y-2">
-                            <label class="text-sm font-medium leading-none">"Kullanıcı Adı"</label>
-                            <Input
-                                r#type=InputType::Text
-                                placeholder="Kullanıcı adınız"
-                                bind_value=username
-                                disabled=loading.0.get()
-                            />
-                        </div>
-                        <div class="space-y-2">
-                            <label class="text-sm font-medium leading-none">"Şifre"</label>
-                            <Input
-                                r#type=InputType::Password
-                                placeholder="******"
-                                bind_value=password
-                                disabled=loading.0.get()
-                            />
-                        </div>
+                    <AutoForm 
+                        fields=fields
+                        submit_label="Giriş Yap"
+                        on_submit=on_submit
+                        loading=loading.0.into()
+                    />
 
-                        <Show when=move || error.0.get().is_some()>
-                            <div class="rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
-                                {move || error.0.get().unwrap_or_default()}
-                            </div>
-                        </Show>
-
-                        <div class="pt-2">
-                            <Button
-                                class="w-full"
-                                attr:r#type="submit"
-                                attr:disabled=move || loading.0.get()
-                            >
-                                <Show when=move || loading.0.get() fallback=|| view! { "Giriş Yap" }.into_any()>
-                                    <span class="animate-spin mr-2 h-4 w-4 border-2 border-current border-t-transparent rounded-full"></span>
-                                    "Giriş Yapılıyor..."
-                                </Show>
-                            </Button>
+                    <Show when=move || error.0.get().is_some()>
+                        <div class="mt-4 rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
+                            {move || error.0.get().unwrap_or_default()}
                         </div>
-                    </form>
+                    </Show>
                 </CardContent>
             </Card>
         </div>
     }
-}
+}

frontend/src/components/auth/setup.rs

@@ -1,23 +1,38 @@
 use leptos::prelude::*;
 use leptos::task::spawn_local;
 use crate::components::ui::card::{Card, CardHeader, CardContent};
-use crate::components::ui::input::{Input, InputType};
-
-use crate::components::ui::button::Button;
+use crate::components::ui::auto_form::{AutoForm, AutoFormField};
 
 #[component]
 pub fn Setup() -> impl IntoView {
-    let username = RwSignal::new(String::new());
-    let password = RwSignal::new(String::new());
-    let confirm_password = RwSignal::new(String::new());
     let error = signal(Option::<String>::None);
     let loading = signal(false);
 
-    let handle_setup = move |ev: web_sys::SubmitEvent| {
-        ev.prevent_default();
-        
-        let pass = password.get();
-        let confirm = confirm_password.get();
+    let fields = vec![
+        AutoFormField::Text {
+            name: "username".to_string(),
+            label: "Yönetici Kullanıcı Adı".to_string(),
+            placeholder: Some("admin".to_string()),
+            required: true,
+        },
+        AutoFormField::Password {
+            name: "password".to_string(),
+            label: "Şifre".to_string(),
+            placeholder: Some("******".to_string()),
+            required: true,
+        },
+        AutoFormField::Password {
+            name: "confirm_password".to_string(),
+            label: "Şifre Onay".to_string(),
+            placeholder: Some("******".to_string()),
+            required: true,
+        },
+    ];
+
+    let on_submit = move |data: std::collections::HashMap<String, String>| {
+        let user = data.get("username").cloned().unwrap_or_default();
+        let pass = data.get("password").cloned().unwrap_or_default();
+        let confirm = data.get("confirm_password").cloned().unwrap_or_default();
         
         if pass != confirm {
             error.1.set(Some("Şifreler eşleşmiyor".to_string()));
@@ -32,8 +47,6 @@ pub fn Setup() -> impl IntoView {
         loading.1.set(true);
         error.1.set(None);
 
-        let user = username.get();
-
         spawn_local(async move {
             match shared::server_fns::auth::setup(user, pass).await {
                 Ok(_) => {
@@ -64,54 +77,18 @@ pub fn Setup() -> impl IntoView {
                 </CardHeader>
 
                 <CardContent class="pt-4">
-                    <form on:submit=handle_setup class="space-y-4">
-                        <div class="space-y-2">
-                            <label class="text-sm font-medium leading-none">"Yönetici Kullanıcı Adı"</label>
-                            <Input
-                                r#type=InputType::Text
-                                placeholder="admin"
-                                bind_value=username
-                                disabled=loading.0.get()
-                            />
-                        </div>
-                        <div class="space-y-2">
-                            <label class="text-sm font-medium leading-none">"Şifre"</label>
-                            <Input
-                                r#type=InputType::Password
-                                placeholder="******"
-                                bind_value=password
-                                disabled=loading.0.get()
-                            />
-                        </div>
-                        <div class="space-y-2">
-                            <label class="text-sm font-medium leading-none">"Şifre Onay"</label>
-                            <Input
-                                r#type=InputType::Password
-                                placeholder="******"
-                                bind_value=confirm_password
-                                disabled=loading.0.get()
-                            />
-                        </div>
+                    <AutoForm 
+                        fields=fields
+                        submit_label="Kurulumu Tamamla"
+                        on_submit=on_submit
+                        loading=loading.0.into()
+                    />
 
-                        <Show when=move || error.0.get().is_some() fallback=|| ()>
-                            <div class="rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
-                                <span>{move || error.0.get().unwrap_or_default()}</span>
-                            </div>
-                        </Show>
-
-                        <div class="pt-2">
-                            <Button
-                                class="w-full"
-                                attr:r#type="submit"
-                                attr:disabled=move || loading.0.get()
-                            >
-                                <Show when=move || loading.0.get() fallback=|| view! { "Kurulumu Tamamla" }.into_any()>
-                                    <span class="animate-spin mr-2 h-4 w-4 border-2 border-current border-t-transparent rounded-full"></span>
-                                    "Kuruluyor..."
-                                </Show>
-                            </Button>
+                    <Show when=move || error.0.get().is_some() fallback=|| ()>
+                        <div class="mt-4 rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
+                            <span>{move || error.0.get().unwrap_or_default()}</span>
                         </div>
-                    </form>
+                    </Show>
                 </CardContent>
             </Card>
         </div>

frontend/src/components/context_menu.rs

@@ -1,5 +1,9 @@
 use leptos::prelude::*;
-use crate::components::ui::context_menu::*;
+use crate::components::ui::context_menu::{
+    ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger,
+};
+use crate::components::ui::button_action::ButtonAction;
+use crate::components::ui::button::ButtonVariant;
 
 #[component]
 pub fn TorrentContextMenu(
@@ -7,72 +11,55 @@ pub fn TorrentContextMenu(
     torrent_hash: String,
     on_action: Callback<(String, String)>,
 ) -> impl IntoView {
-    let hash = StoredValue::new(torrent_hash);
+    let hash_c1 = torrent_hash.clone();
+    let hash_c2 = torrent_hash.clone();
+    let hash_c3 = torrent_hash.clone();
+    let hash_c4 = torrent_hash.clone();
     
-    let menu_action = move |action: &'static str| {
-        on_action.run((action.to_string(), hash.get_value()));
-    };
+    let on_action_stored = StoredValue::new(on_action);
 
     view! {
         <ContextMenu>
             <ContextMenuTrigger>
                 {children()}
             </ContextMenuTrigger>
-            
-            <ContextMenuContent class="w-56">
-                <ContextMenuAction 
-                    class="px-2 py-1.5 hover:bg-accent hover:text-accent-foreground rounded-sm"
-                    on:click=move |_| menu_action("start")
-                >
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 h-4 w-4 opacity-70">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z" />
-                    </svg>
-                    "Start"
-                </ContextMenuAction>
+            <ContextMenuContent class="w-56 p-1.5">
+                <ContextMenuItem on:click={let h = hash_c1; move |_| on_action_stored.get_value().run(("start".to_string(), h.clone()))}>
+                    "Başlat"
+                </ContextMenuItem>
+                <ContextMenuItem on:click={let h = hash_c2; move |_| on_action_stored.get_value().run(("stop".to_string(), h.clone()))}>
+                    "Durdur"
+                </ContextMenuItem>
+                
+                <div class="my-1.5 h-px bg-border/50" />
+                
+                // --- Modern Hold-to-Action Buttons ---
+                <div class="space-y-1">
+                    <ButtonAction 
+                        variant=ButtonVariant::Ghost
+                        class="w-full justify-start h-8 px-2 text-xs text-destructive hover:bg-destructive/10 hover:text-destructive transition-none"
+                        hold_duration=800
+                        on_action={let h = hash_c3; move || {
+                            on_action_stored.get_value().run(("delete".to_string(), h.clone()));
+                            crate::components::ui::context_menu::close_context_menu();
+                        }}
+                    >
+                        "Sil (Basılı Tut)"
+                    </ButtonAction>
 
-                <ContextMenuAction 
-                    class="px-2 py-1.5 hover:bg-accent hover:text-accent-foreground rounded-sm"
-                    on:click=move |_| menu_action("stop")
-                >
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 h-4 w-4 opacity-70">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25v13.5m-7.5-13.5v13.5" />
-                    </svg>
-                    "Stop"
-                </ContextMenuAction>
-
-                <ContextMenuAction 
-                    class="px-2 py-1.5 hover:bg-accent hover:text-accent-foreground rounded-sm"
-                    on:click=move |_| menu_action("recheck")
-                >
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 h-4 w-4 opacity-70">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
-                    </svg>
-                    "Recheck"
-                </ContextMenuAction>
-
-                <div class="-mx-1 my-1 h-px bg-border" />
-
-                <ContextMenuAction 
-                    class="px-2 py-1.5 text-destructive hover:bg-destructive/10 hover:text-destructive rounded-sm"
-                    on:click=move |_| menu_action("delete")
-                >
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 h-4 w-4 opacity-70">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.164h-2.34c-1.18 0-2.09.984-2.09 2.164v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
-                    </svg>
-                    "Remove"
-                </ContextMenuAction>
-
-                <ContextMenuHoldAction 
-                    class="text-destructive hover:bg-destructive/10 hover:text-destructive"
-                    on_hold_complete=move |_| menu_action("delete_with_data")
-                >
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mr-2 h-4 w-4 opacity-70">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5m6 4.125l2.25 2.25m0 0l2.25 2.25M12 13.875l2.25-2.25M12 13.875l-2.25-2.25M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
-                    </svg>
-                    "Remove with Data"
-                    <span class="ml-auto text-[10px] opacity-50">"Hold"</span>
-                </ContextMenuHoldAction>
+                    <ButtonAction 
+                        variant=ButtonVariant::Destructive
+                        class="w-full justify-start h-8 px-2 text-xs font-bold"
+                        hold_duration=1200
+                        on_action={let h = hash_c4; move || {
+                            on_action_stored.get_value().run(("delete_with_data".to_string(), h.clone()));
+                            crate::components::ui::context_menu::close_context_menu();
+                        }}
+                    >
+                        "Verilerle Sil (Basılı Tut)"
+                    </ButtonAction>
+                </div>
             </ContextMenuContent>
         </ContextMenu>
     }
-}
+}

frontend/src/components/layout/footer.rs

@@ -6,24 +6,12 @@ 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>
+        <footer class="mt-auto pb-6 px-4">
+            <Separator class="mb-4 opacity-30" />
+            <div class="flex items-center justify-center gap-2 text-[10px] uppercase tracking-widest text-muted-foreground/60 font-medium">
+                <span>{format!("© {} VibeTorrent", year)}</span>
+                <span class="size-1 rounded-full bg-muted-foreground/30" />
+                <span>"v3.0.0-beta"</span>
             </div>
         </footer>
     }

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/torrent/table.rs

@@ -544,14 +544,14 @@ pub fn TorrentTable() -> impl IntoView {
                 </div>
             </div>
 
-            <div class="hidden md:flex items-center justify-between px-2 py-1 text-[11px] text-muted-foreground bg-muted/20 border rounded-md">
-                <div class="flex gap-4">
+            <div class="flex items-center justify-between px-2 py-1.5 text-[10px] md:text-[11px] text-muted-foreground bg-muted/20 border rounded-md">
+                <div class="flex gap-3 md:gap-4">
                     <span>{move || format!("Toplam: {} torrent", filtered_hashes.get().len())}</span>
                     <Show when=move || has_selection.get()>
-                        <span class="text-primary font-medium">{move || format!("{} torrent seçili", selected_count.get())}</span>
+                        <span class="text-primary font-bold">{move || format!("{} seçili", selected_count.get())}</span>
                     </Show>
                 </div>
-                <div>"VibeTorrent v3"</div>
+                <div class="opacity-50">"VibeTorrent v3"</div>
             </div>
         </div>
     }.into_any()

frontend/src/components/ui/auto_form.rs

@@ -0,0 +1,93 @@
+use leptos::prelude::*;
+use tailwind_fuse::tw_merge;
+use crate::components::ui::button::Button;
+use crate::components::ui::input::{Input, InputType};
+
+#[derive(Clone, Debug)]
+pub enum AutoFormField {
+    Text {
+        name: String,
+        label: String,
+        placeholder: Option<String>,
+        required: bool,
+    },
+    Password {
+        name: String,
+        label: String,
+        placeholder: Option<String>,
+        required: bool,
+    },
+}
+
+#[component]
+pub fn AutoForm(
+    #[prop(into)] fields: Vec<AutoFormField>,
+    #[prop(into)] submit_label: String,
+    #[prop(into)] on_submit: Callback<std::collections::HashMap<String, String>>,
+    #[prop(optional)] loading: Signal<bool>,
+    #[prop(optional, into)] class: String,
+) -> impl IntoView {
+    let field_values = fields.iter().map(|f| {
+        let name = match f {
+            AutoFormField::Text { name, .. } => name,
+            AutoFormField::Password { name, .. } => name,
+        };
+        (name.clone(), RwSignal::new(String::new()))
+    }).collect::<std::collections::HashMap<String, RwSignal<String>>>();
+
+    let handle_submit = {
+        let field_values = field_values.clone();
+        move |ev: web_sys::SubmitEvent| {
+            ev.prevent_default();
+            let mut data = std::collections::HashMap::new();
+            for (name, signal) in &field_values {
+                data.insert(name.clone(), signal.get());
+            }
+            on_submit.run(data);
+        }
+    };
+
+    view! {
+        <form on:submit=handle_submit class=tw_merge!("space-y-4", class)>
+            {fields.into_iter().map(|field| {
+                let (name, label, placeholder, r#type, required) = match field {
+                    AutoFormField::Text { name, label, placeholder, required } => (name, label, placeholder, InputType::Text, required),
+                    AutoFormField::Password { name, label, placeholder, required } => (name, label, placeholder, InputType::Password, required),
+                };
+                
+                let signal = field_values.get(&name).cloned().unwrap();
+                
+                view! {
+                    <div class="space-y-2">
+                        <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+                            {label}
+                        </label>
+                        <Input
+                            r#type=r#type
+                            placeholder=placeholder.unwrap_or_default()
+                            bind_value=signal
+                            required=required
+                            disabled=loading.get()
+                        />
+                    </div>
+                }
+            }).collect_view()}
+
+            <div class="pt-2">
+                <Button
+                    class="w-full"
+                    attr:r#type="submit"
+                    attr:disabled=move || loading.get()
+                >
+                    <Show when=move || loading.get() fallback=move || {
+                        let label = submit_label.clone();
+                        view! { <span>{label}</span> }.into_any()
+                    }>
+                        <span class="animate-spin mr-2 h-4 w-4 border-2 border-current border-t-transparent rounded-full"></span>
+                        "İşleniyor..."
+                    </Show>
+                </Button>
+            </div>
+        </form>
+    }
+}

frontend/src/components/ui/button_action.rs

@@ -0,0 +1,72 @@
+use leptos::prelude::*;
+use tailwind_fuse::tw_merge;
+use crate::components::ui::button::{Button, ButtonVariant};
+
+#[component]
+pub fn ButtonAction(
+    children: Children,
+    #[prop(into)] on_action: Callback<()>,
+    #[prop(optional, into)] class: String,
+    #[prop(default = 1000)] hold_duration: u64,
+    #[prop(default = ButtonVariant::Default)] variant: ButtonVariant,
+) -> impl IntoView {
+    let is_holding = RwSignal::new(false);
+    let generation = StoredValue::new(0u64);
+    
+    let on_down = move |_| {
+        generation.update_value(|g| *g += 1);
+        is_holding.set(true);
+    };
+    
+    let on_up = move |_| is_holding.set(false);
+
+    Effect::new(move |_| {
+        if is_holding.get() {
+            let current_gen = generation.get_value();
+            leptos::task::spawn_local(async move {
+                gloo_timers::future::TimeoutFuture::new(hold_duration as u32).await;
+                // Double validation: Is user still holding AND is it the SAME hold attempt?
+                if is_holding.get_untracked() && generation.get_value() == current_gen {
+                    on_action.run(());
+                    is_holding.set(false);
+                }
+            });
+        }
+    });
+
+    let merged_class = move || tw_merge!(
+        "relative overflow-hidden transition-all active:scale-[0.98]",
+        class.clone()
+    );
+
+    view! {
+        <style>
+            "@keyframes button-hold-progress {
+                from { width: 0%; }
+                to { width: 100%; }
+            }
+            .animate-button-hold {
+                animation: button-hold-progress var(--button-hold-duration) linear forwards;
+            }"
+        </style>
+        <Button
+            variant=variant
+            class=merged_class()
+            attr:style=format!("--button-hold-duration: {}ms", hold_duration)
+            on:mousedown=on_down
+            on:mouseup=on_up
+            on:mouseleave=on_up
+            on:touchstart=move |_| is_holding.set(true)
+            on:touchend=move |_| is_holding.set(false)
+        >
+            // Progress Overlay
+            <Show when=move || is_holding.get()>
+                <div class="absolute inset-0 bg-white/20 dark:bg-black/20 pointer-events-none animate-button-hold" />
+            </Show>
+            
+            <span class="relative z-10 flex items-center justify-center gap-2">
+                {children()}
+            </span>
+        </Button>
+    }
+}

frontend/src/components/ui/context_menu.rs

@@ -78,76 +78,6 @@ pub fn ContextMenuAction(
     }
 }
 
-#[component]
-pub fn ContextMenuHoldAction(
-    children: Children,
-    #[prop(into)] on_hold_complete: Callback<()>,
-    #[prop(optional, into)] class: String,
-    #[prop(default = 1000)] hold_duration: u64,
-) -> impl IntoView {
-    let is_holding = RwSignal::new(false);
-    let progress = RwSignal::new(0.0);
-    
-    let on_mousedown = move |_| {
-        is_holding.set(true);
-        progress.set(0.0);
-    };
-    
-    let on_mouseup = move |_| {
-        is_holding.set(false);
-        progress.set(0.0);
-    };
-
-    Effect::new(move |_| {
-        if is_holding.get() {
-            let start_time = js_sys::Date::now();
-            let duration = hold_duration as f64;
-            
-            leptos::task::spawn_local(async move {
-                while is_holding.get_untracked() {
-                    let now = js_sys::Date::now();
-                    let elapsed = now - start_time;
-                    let p = (elapsed / duration).min(1.0);
-                    progress.set(p * 100.0);
-                    
-                    if p >= 1.0 {
-                        on_hold_complete.run(());
-                        is_holding.set(false);
-                        close_context_menu();
-                        break;
-                    }
-                    gloo_timers::future::TimeoutFuture::new(16).await; // ~60fps
-                }
-            });
-        }
-    });
-
-    let class = tw_merge!(
-        "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors overflow-hidden",
-        class
-    );
-
-    view! {
-        <div
-            class=class
-            on:mousedown=on_mousedown
-            on:mouseup=on_mouseup
-            on:mouseleave=on_mouseup
-            on:touchstart=move |_| on_mousedown(web_sys::MouseEvent::new("mousedown").unwrap())
-            on:touchend=move |_| on_mouseup(web_sys::MouseEvent::new("mouseup").unwrap())
-        >
-            // Progress background
-            <div 
-                class="absolute inset-y-0 left-0 bg-destructive/20 transition-all duration-75 ease-linear pointer-events-none"
-                style=move || format!("width: {}%;", progress.get())
-            />
-            <span class="relative z-10 flex items-center gap-2 w-full">
-                {children()}
-            </span>
-        </div>
-    }.into_any()
-}
-
 #[derive(Clone)]
 struct ContextMenuContext {
     target_id: String,
@@ -397,7 +327,7 @@ pub fn ContextMenuContent(
                 target_id_for_script,
             )}
         </script>
-    }.into_any()
+    }
 }
 
 #[component]

frontend/src/components/ui/mod.rs

@@ -1,7 +1,9 @@
 pub mod accordion;
 pub mod alert_dialog;
+pub mod auto_form;
 pub mod badge;
 pub mod button;
+pub mod button_action;
 pub mod card;
 pub mod checkbox;
 pub mod context_menu;
@@ -17,6 +19,7 @@ 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/progress.rs

@@ -0,0 +1,26 @@
+use leptos::prelude::*;
+use tailwind_fuse::tw_merge;
+
+#[component]
+pub fn Progress(
+    #[prop(into)] value: Signal<f64>,
+    #[prop(optional, into)] class: String,
+) -> impl IntoView {
+    let progress_style = move || format!("transform: translateX(-{}%);", 100.0 - value.get().clamp(0.0, 100.0));
+
+    view! {
+        <div
+            data-name="Progress"
+            class=tw_merge!(
+                "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+                class
+            )
+        >
+            <div
+                data-name="ProgressIndicator"
+                class="h-full w-full flex-1 bg-primary transition-all duration-500 ease-in-out"
+                style=progress_style
+            />
+        </div>
+    }
+}

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

package.json

@@ -0,0 +1,8 @@
+{
+  "dependencies": {
+    "@tailwindcss/cli": "^4.1.18",
+    "tailwindcss": "^4.1.18",
+    "tw-animate-css": "^1.4.0"
+  },
+  "type": "module"
+}

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

ui_config.toml

@@ -0,0 +1,2 @@
+base_color = "neutral"
+base_path_components = "backend/src/components"