fix: add missing files.rs and resolve Show type inference

fix: resolve E0282 type inference on CI and clear warnings
feat(ui): add files tab and priority context menu
2026-02-21 01:05:58 +03:00 · 2026-02-21 01:04:00 +03:00 · 2026-02-21 00:58:35 +03:00 · 2026-02-21 00:50:26 +03:00 · 2026-02-21 00:44:50 +03:00 · 2026-02-21 00:42:42 +03:00
29 changed files with 1376 additions and 292 deletions
--- a/Cargo.lock
+++ b/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",
--- a/Cargo.toml
+++ b/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"
--- a/backend/Cargo.toml
+++ b/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"
--- a/backend/src/main.rs
+++ b/backend/src/main.rs
@@ -243,12 +243,14 @@ async fn main() {
    let socket_path = std::path::Path::new(&args.socket);
    if !socket_path.exists() {
        tracing::error!("CRITICAL: rTorrent socket not found at {:?}.", socket_path);
-        tracing::warn!(
+        tracing::error!(
            "HINT: Make sure rTorrent is running and the SCGI socket is enabled in .rtorrent.rc"
        );
-        tracing::warn!(
+        tracing::error!(
            "HINT: You can configure the socket path via --socket ARG or RTORRENT_SOCKET ENV."
        );
+        tracing::error!("FATAL: VibeTorrent cannot start without a running rTorrent instance. Exiting.");
+        std::process::exit(1);
    } else {
        tracing::info!("Socket file exists. Testing connection...");
        let client = xmlrpc::RtorrentClient::new(&args.socket);
@@ -259,7 +261,11 @@ async fn main() {
                let version = xmlrpc::parse_string_response(&xml).unwrap_or(xml);
                tracing::info!("Connected to rTorrent successfully. Version: {}", version);
            }
-            Err(e) => tracing::error!("Socket exists but failed to connect to rTorrent: {}", e),
+            Err(e) => {
+                tracing::error!("CRITICAL: Socket exists but failed to connect to rTorrent: {}", e);
+                tracing::error!("FATAL: Ensure rTorrent is fully started and the socket has correct permissions. Exiting.");
+                std::process::exit(1);
+            }
        }
    }

--- a/frontend/input.css
+++ b/frontend/input.css
@@ -3,70 +3,76 @@


 :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));
+  --animate-shimmer: shimmer 2s infinite;
+
+  @keyframes shimmer {
+    100% {
+      transform: translateX(100%);
+    }
+  }
+
+  --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);
@@ -77,6 +83,7 @@
  * {
    @apply border-border outline-ring/50;
  }
+
  body {
    @apply bg-background text-foreground;
  }
@@ -89,4 +96,4 @@
  dialog {
    margin: auto;
  }
-}
+}
--- a/frontend/src/components/context_menu.rs
+++ b/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,61 @@ 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()));
+                    crate::components::ui::context_menu::close_context_menu();
+                }}>
+                    "Başlat"
+                </ContextMenuItem>
+                <ContextMenuItem on:click={let h = hash_c2; move |_| {
+                    on_action_stored.get_value().run(("stop".to_string(), h.clone()));
+                    crate::components::ui::context_menu::close_context_menu();
+                }}>
+                    "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>
    }
-}
+}
--- a/frontend/src/components/demos/demo_shimmer.rs
+++ b/frontend/src/components/demos/demo_shimmer.rs
@@ -0,0 +1,91 @@
+use leptos::prelude::*;
+use leptos::task::spawn_local;
+use serde::{Deserialize, Serialize};
+
+use crate::components::ui::button::{Button, ButtonVariant};
+use crate::components::ui::card::{Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle};
+use crate::components::ui::shimmer::Shimmer;
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct CardData {
+    pub title: String,
+    pub description: String,
+}
+
+/// Simulates a database fetch with 1 second delay
+#[server]
+pub async fn fetch_card_data() -> Result<CardData, ServerFnError> {
+    // Simulate network/database latency (only on server)
+    #[cfg(feature = "ssr")]
+    tokio::time::sleep(std::time::Duration::from_secs(1)).await;
+
+    Ok(CardData {
+        title: "Fetched Title".to_string(),
+        description: "This content was fetched from the server after a 1 second simulated delay. The shimmer effect automatically showed during the loading period.".to_string(),
+    })
+}
+
+#[component]
+pub fn DemoShimmer() -> impl IntoView {
+    // Loading state
+    let loading = RwSignal::new(false);
+
+    // Store fetched data
+    let card_data = RwSignal::new(None::<CardData>);
+
+    // Fetch handler using spawn_local for reliable repeated calls
+    let on_fetch = move |_| {
+        spawn_local(async move {
+            loading.set(true);
+            let result = fetch_card_data().await;
+            if let Ok(data) = result {
+                card_data.set(Some(data));
+            }
+            loading.set(false);
+        });
+    };
+
+    view! {
+        <div class="flex flex-col gap-4">
+            <div class="flex gap-2">
+                <Button variant=ButtonVariant::Outline on:click=move |_| loading.set(!loading.get())>
+                    "Toggle Loading"
+                </Button>
+                <Button variant=ButtonVariant::Default on:click=on_fetch>
+                    "Fetch Data (1s)"
+                </Button>
+            </div>
+
+            <Shimmer loading=Signal::from(loading)>
+                <Card class="max-w-lg lg:max-w-2xl">
+                    <CardHeader>
+                        <CardTitle>
+                            {move || {
+                                card_data.get().map(|data| data.title).unwrap_or_else(|| "Card Title".to_string())
+                            }}
+                        </CardTitle>
+                    </CardHeader>
+
+                    <CardContent>
+                        <CardDescription>
+                            {move || {
+                                card_data
+                                    .get()
+                                    .map(|data| data.description)
+                                    .unwrap_or_else(|| {
+                                        "Click 'Toggle Loading' for manual control, or 'Fetch Data' to simulate a real server call with 1 second delay."
+                                            .to_string()
+                                    })
+                            }}
+                        </CardDescription>
+                    </CardContent>
+
+                    <CardFooter class="justify-end">
+                        <Button variant=ButtonVariant::Outline>"Cancel"</Button>
+                        <Button>"Confirm"</Button>
+                    </CardFooter>
+                </Card>
+            </Shimmer>
+        </div>
+    }
+}
--- a/frontend/src/components/demos/mod.rs
+++ b/frontend/src/components/demos/mod.rs
@@ -0,0 +1 @@
+pub mod demo_shimmer;
--- a/frontend/src/components/hooks/use_random.rs
+++ b/frontend/src/components/hooks/use_random.rs
@@ -1,5 +1,31 @@
-use leptos::prelude::*;
+use std::collections::hash_map::DefaultHasher;
+use std::hash::{Hash, Hasher};
+use std::sync::atomic::{AtomicUsize, Ordering};

-pub fn use_random_id_for(prefix: &str) -> String {
-    format!("{}_{}", prefix, js_sys::Math::random().to_string().replace(".", ""))
+const PREFIX: &str = "rust_ui"; // Must NOT contain "/" or "-"
+
+pub fn use_random_id() -> String {
+    format!("_{PREFIX}_{}", generate_hash())
 }
+
+pub fn use_random_id_for(element: &str) -> String {
+    format!("{}_{PREFIX}_{}", element, generate_hash())
+}
+
+pub fn use_random_transition_name() -> String {
+    let random_id = use_random_id();
+    format!("view-transition-name: {random_id}")
+}
+
+/* ========================================================== */
+/*                     ✨ FUNCTIONS ✨                        */
+/* ========================================================== */
+
+static COUNTER: AtomicUsize = AtomicUsize::new(1);
+
+fn generate_hash() -> u64 {
+    let mut hasher = DefaultHasher::new();
+    let counter = COUNTER.fetch_add(1, Ordering::SeqCst);
+    counter.hash(&mut hasher);
+    hasher.finish()
+}
--- a/frontend/src/components/layout/footer.rs
+++ b/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>
    }
--- a/frontend/src/components/layout/sidebar.rs
+++ b/frontend/src/components/layout/sidebar.rs
@@ -146,48 +146,50 @@ pub fn Sidebar() -> impl IntoView {
            </SidenavGroup>
        </SidenavContent>

-        <SidenavFooter class="p-4 space-y-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>
+        <SidenavFooter>
+            <div class="flex flex-col gap-4 p-4">
+                // Push Notification Toggle
+                <div class="flex items-center justify-between px-2 py-1 bg-muted/20 rounded-md border border-border/50">
+                    <div class="flex flex-col gap-0.5">
+                        <span class="text-[10px] font-bold uppercase tracking-wider text-foreground/70">"Bildirimler"</span>
+                        <span class="text-[9px] text-muted-foreground">"Web Push"</span>
+                    </div>
+                    <Switch 
+                        checked=Signal::from(store.push_enabled) 
+                        on_checked_change=Callback::new(on_push_toggle)
+                    />
                </div>
-                <Switch 
-                    checked=store.push_enabled.into() 
-                    on_checked_change=Callback::new(on_push_toggle)
-                />
-            </div>

-            <div class="flex items-center gap-3 p-2 rounded-lg border bg-muted/30 shadow-xs overflow-hidden">
-                <div class="h-8 w-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-xs font-medium shrink-0 border border-primary-foreground/10">
-                    {first_letter}
-                </div>
-                <div class="flex-1 overflow-hidden">
-                    <div class="font-medium text-[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>
--- a/frontend/src/components/mod.rs
+++ b/frontend/src/components/mod.rs
@@ -5,3 +5,4 @@ pub mod torrent;
 pub mod auth;
 // pub mod toast; (Removed)
 pub mod ui;
+pub mod demos;
--- a/frontend/src/components/torrent/details.rs
+++ b/frontend/src/components/torrent/details.rs
@@ -0,0 +1,187 @@
+use leptos::prelude::*;
+use crate::components::ui::sheet::*;
+use crate::components::ui::tabs::*;
+use crate::components::ui::skeleton::*;
+use shared::Torrent;
+
+#[component]
+pub fn TorrentDetailsSheet() -> impl IntoView {
+    let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
+
+    // Setup an effect to open the sheet when a torrent is selected
+    Effect::new(move |_| {
+        if store.selected_torrent.get().is_some() {
+            if let Some(trigger) = document().get_element_by_id("torrent-details-trigger") {
+                use wasm_bindgen::JsCast;
+                let _ = trigger.dyn_into::<web_sys::HtmlElement>().map(|el| el.click());
+            }
+        }
+    });
+
+    let selected_torrent = Memo::new(move |_| {
+        let hash = store.selected_torrent.get()?;
+        store.torrents.with(|map| map.get(&hash).cloned())
+    });
+
+    view! {
+        <Sheet>
+            <SheetTrigger attr:id="torrent-details-trigger" class="hidden">""</SheetTrigger>
+            <SheetContent 
+                direction=SheetDirection::Bottom 
+                class="h-[80vh] sm:h-[60vh] rounded-t-xl sm:rounded-t-2xl p-0 flex flex-col gap-0 border-t border-border shadow-2xl" 
+                hide_close_button=true
+            >
+                <div class="px-6 py-4 border-b flex items-center justify-between sticky top-0 bg-card z-10">
+                    <div class="flex flex-col gap-1 min-w-0">
+                        <Show when=move || selected_torrent.get().is_some() fallback=move || view! { <Skeleton class="h-6 w-48" /> }>
+                            <h2 class="font-bold text-lg truncate">
+                                {move || selected_torrent.get().map(|t| t.name).unwrap_or_default()}
+                            </h2>
+                        </Show>
+                        <Show when=move || selected_torrent.get().is_some() fallback=move || view! { <Skeleton class="h-4 w-24" /> }>
+                            <p class="text-xs text-muted-foreground uppercase tracking-widest font-semibold flex items-center gap-2">
+                                {move || selected_torrent.get().map(|t| format!("{:?}", t.status)).unwrap_or_default()}
+                                <span class="bg-primary/20 text-primary px-1.5 py-0.5 rounded text-[10px] lowercase">{move || selected_torrent.get().map(|t| format!("{:.1}%", t.percent_complete)).unwrap_or_default()}</span>
+                            </p>
+                        </Show>
+                    </div>
+                    // Custom close button that also resets store.selected_torrent
+                    <SheetClose class="rounded-full p-2 hover:bg-muted transition-colors border-none shadow-none cursor-pointer">
+                        <icons::X class="size-5 opacity-70" on:click=move |_| store.selected_torrent.set(None) />
+                    </SheetClose>
+                </div>
+
+                <div class="flex-1 overflow-hidden p-6">
+                    <Tabs default_value="general" class="h-full flex flex-col">
+                        <TabsList class="w-full justify-start rounded-none border-b bg-transparent p-0">
+                            <TabsTrigger value="general" class="data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:border-b-2 data-[state=active]:border-primary rounded-none">
+                                "Genel"
+                            </TabsTrigger>
+                            <TabsTrigger value="files" class="data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:border-b-2 data-[state=active]:border-primary rounded-none">
+                                "Dosyalar"
+                            </TabsTrigger>
+                            <TabsTrigger value="trackers" class="data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:border-b-2 data-[state=active]:border-primary rounded-none">
+                                "İzleyiciler"
+                            </TabsTrigger>
+                            <TabsTrigger value="peers" class="data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:border-b-2 data-[state=active]:border-primary rounded-none">
+                                "Eşler"
+                            </TabsTrigger>
+                        </TabsList>
+
+                        <div class="flex-1 overflow-y-auto mt-4 pb-12">
+                            <TabsContent value="general" class="space-y-6 animate-in fade-in slide-in-from-bottom-2 duration-300">
+                                <crate::components::ui::shimmer::Shimmer 
+                                    loading=Signal::derive(move || selected_torrent.get().is_none())
+                                    shimmer_color="rgba(0,0,0,0.06)"
+                                    background_color="rgba(0,0,0,0.04)"
+                                >
+                                    {move || {
+                                        let t = selected_torrent.get().unwrap_or_else(|| shared::Torrent {
+                                            hash: "----------------------------------------".to_string(),
+                                            name: "Yükleniyor...".to_string(),
+                                            size: 0,
+                                            completed: 0,
+                                            down_rate: 0,
+                                            up_rate: 0,
+                                            eta: 0,
+                                            percent_complete: 0.0,
+                                            status: shared::TorrentStatus::Downloading,
+                                            error_message: "".to_string(),
+                                            added_date: 0,
+                                            label: None,
+                                        });
+
+                                        view! {
+                                            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
+                                                <InfoItem label="İndirilen / Toplam" value=format!("{} / {}", format_bytes(t.completed), format_bytes(t.size)) />
+                                                <InfoItem label="İndirme Hızı" value=format_speed(t.down_rate) class="text-blue-500" />
+                                                <InfoItem label="Gönderme Hızı" value=format_speed(t.up_rate) class="text-green-500" />
+                                                <InfoItem label="Eklenme Tarihi" value=format_date(t.added_date) />
+                                                <InfoItem label="Kalan Süre" value=format_duration(t.eta) />
+                                                <InfoItem label="Hash" value=t.hash class="col-span-2 md:col-span-4 break-all font-mono text-xs" />
+                                            </div>
+                                        }
+                                    }}
+                                </crate::components::ui::shimmer::Shimmer>
+                            </TabsContent>
+
+                            <TabsContent value="files" class="h-full">
+                                {move || match selected_torrent.get() {
+                                    Some(t) => leptos::either::Either::Left(view! {
+                                        <div class="h-full overflow-y-auto pr-2 pb-8">
+                                            <crate::components::torrent::files::TorrentFilesTab hash=t.hash />
+                                        </div>
+                                    }),
+                                    None => leptos::either::Either::Right(view! {
+                                        <div class="flex flex-col items-center justify-center h-48 opacity-60">
+                                            <icons::File class="size-12 mb-3 text-muted-foreground" />
+                                            <p class="text-sm font-medium">"Dosya yükleniyor..."</p>
+                                        </div>
+                                    }),
+                                }}
+                            </TabsContent>
+
+                            <TabsContent value="trackers" class="h-full">
+                                <div class="flex flex-col items-center justify-center h-48 opacity-60">
+                                    <icons::Settings2 class="size-12 mb-3 text-muted-foreground" />
+                                    <p class="text-sm font-medium">"İzleyici listesi yakında eklenecek"</p>
+                                </div>
+                            </TabsContent>
+
+                            <TabsContent value="peers" class="h-full">
+                                <div class="flex flex-col items-center justify-center h-48 opacity-60">
+                                    <icons::Users class="size-12 mb-3 text-muted-foreground" />
+                                    <p class="text-sm font-medium">"Eş listesi yakında eklenecek"</p>
+                                </div>
+                            </TabsContent>
+                        </div>
+                    </Tabs>
+                </div>
+            </SheetContent>
+        </Sheet>
+    }
+}
+
+#[component]
+fn InfoItem(
+    label: &'static str, 
+    value: String, 
+    #[prop(optional)] class: &'static str
+) -> impl IntoView {
+    view! {
+        <div class=tailwind_fuse::tw_merge!("flex flex-col gap-1", class)>
+            <span class="text-xs font-semibold text-muted-foreground uppercase opacity-80">{label}</span>
+            <span class="text-sm font-medium">{value}</span>
+        </div>
+    }
+}
+
+fn format_bytes(bytes: i64) -> String {
+    const UNITS: [&str; 6] = ["B", "KB", "MB", "GB", "TB", "PB"];
+    if bytes < 1024 { return format!("{} B", bytes); }
+    let i = (bytes as f64).log2().div_euclid(10.0) as usize;
+    format!("{:.1} {}", (bytes as f64) / 1024_f64.powi(i as i32), UNITS[i])
+}
+
+fn format_speed(bytes_per_sec: i64) -> String {
+    if bytes_per_sec == 0 { return "0 B/s".to_string(); }
+    format!("{}/s", format_bytes(bytes_per_sec))
+}
+
+fn format_duration(seconds: i64) -> String {
+    if seconds <= 0 { return "∞".to_string(); }
+    let days = seconds / 86400;
+    let hours = (seconds % 86400) / 3600;
+    let minutes = (seconds % 3600) / 60;
+    let secs = seconds % 60;
+    if days > 0 { format!("{}g {}s", days, hours) }
+    else if hours > 0 { format!("{}s {}d", hours, minutes) }
+    else if minutes > 0 { format!("{}d {}sn", minutes, secs) }
+    else { format!("{}sn", secs) }
+}
+
+fn format_date(timestamp: i64) -> String {
+    if timestamp <= 0 { return "N/A".to_string(); }
+    let dt = chrono::DateTime::from_timestamp(timestamp, 0);
+    match dt { Some(dt) => dt.format("%d/%m/%Y %H:%M").to_string(), None => "N/A".to_string() }
+}
--- a/frontend/src/components/torrent/files.rs
+++ b/frontend/src/components/torrent/files.rs
@@ -0,0 +1,195 @@
+use leptos::prelude::*;
+use crate::components::ui::table::*;
+use crate::components::ui::badge::*;
+use crate::components::ui::shimmer::*;
+use crate::components::ui::context_menu::*;
+use shared::TorrentFile;
+
+#[component]
+pub fn TorrentFilesTab(hash: String) -> impl IntoView {
+    let hash_clone = hash.clone();
+    
+    // Fetch files resource
+    let files_resource = Resource::new(
+        move || hash_clone.clone(),
+        |h| async move { shared::server_fns::torrent::get_files(h).await.unwrap_or_default() }
+    );
+
+    // Refresh action
+    let refresh_files = Action::new(|h: &String| {
+        let h = h.clone();
+        async move { shared::server_fns::torrent::get_files(h).await.unwrap_or_default() }
+    });
+
+    let stored_hash = StoredValue::new(hash);
+
+    view! {
+        <Suspense fallback=move || view! { <FilesFallback /> }>
+            {move || {
+                let files = match refresh_files.value().get() {
+                    Some(f) => f,
+                    None => files_resource.get().unwrap_or_default(),
+                };
+
+                if files.is_empty() {
+                    return view! {
+                        <div class="flex flex-col items-center justify-center h-48 opacity-60">
+                            <icons::File class="size-12 mb-3 text-muted-foreground" />
+                            <p class="text-sm font-medium">"Bu torrent için dosya bulunamadı."</p>
+                        </div>
+                    }.into_any();
+                }
+
+                let files_len = files.len();
+
+                view! {
+                    <div class="space-y-4">
+                        <TableWrapper class="bg-card/50">
+                            <Table>
+                                <TableHeader class="sticky top-0 bg-muted/80 backdrop-blur-sm z-10">
+                                    <TableRow class="hover:bg-transparent">
+                                        <TableHead class="w-12 text-center text-xs">"#"</TableHead>
+                                        <TableHead class="text-xs">"Dosya Adı"</TableHead>
+                                        <TableHead class="w-24 text-right text-xs">"Boyut"</TableHead>
+                                        <TableHead class="w-24 text-right text-xs">"Tamamlanan"</TableHead>
+                                        <TableHead class="w-24 text-center text-xs">"Öncelik"</TableHead>
+                                    </TableRow>
+                                </TableHeader>
+                                <TableBody>
+                                    <For 
+                                        each=move || files.clone()
+                                        key=|f| f.index
+                                        children={move |f| {
+                                            let p_hash = stored_hash.get_value();
+                                            let r_files = refresh_files.clone();
+                                            view! {
+                                                <FileRow 
+                                                    file=f 
+                                                    hash=p_hash
+                                                    refresh_action=r_files
+                                                />
+                                            }
+                                        }}
+                                    />
+                                </TableBody>
+                            </Table>
+                        </TableWrapper>
+                        
+                        <div class="flex items-center justify-between text-xs text-muted-foreground px-1">
+                            <span>{format!("Toplam {} dosya", files_len)}</span>
+                        </div>
+                    </div>
+                }.into_any()
+            }}
+        </Suspense>
+    }
+}
+
+#[component]
+fn FileRow(file: TorrentFile, hash: String, refresh_action: Action<String, Vec<TorrentFile>>) -> impl IntoView {
+    let f_idx = file.index;
+    let context_id = format!("file-context-{}-{}", hash, f_idx);
+    let path_clone = file.path.clone();
+
+    let set_priority = Action::new(|req: &(String, u32, u8)| {
+        let (h, idx, p) = req.clone();
+        async move {
+            let res = shared::server_fns::torrent::set_file_priority(h, idx, p).await;
+            if let Err(e) = &res {
+                crate::store::show_toast(shared::NotificationLevel::Error, format!("Öncelik değiştirilemedi: {:?}", e));
+            } else {
+                crate::store::show_toast(shared::NotificationLevel::Success, "Dosya önceliği güncellendi.".to_string());
+            }
+            res
+        }
+    });
+
+    view! {
+        <ContextMenu>
+            <ContextMenuTrigger attr:id=context_id.clone()>
+                <TableRow class="hover:bg-muted/50 transition-colors group">
+                    <TableCell class="text-center text-xs text-muted-foreground">{file.index}</TableCell>
+                    <TableCell class="font-medium text-xs break-all max-w-[200px] md:max-w-md" attr:title=move || path_clone.clone()>
+                        {file.path.clone()}
+                    </TableCell>
+                    <TableCell class="text-right text-xs text-muted-foreground whitespace-nowrap">
+                        {format_bytes(file.size)}
+                    </TableCell>
+                    <TableCell class="text-right text-xs whitespace-nowrap">
+                        <span class="text-primary font-medium">{format_bytes(file.completed_chunks)}</span>
+                    </TableCell>
+                    <TableCell class="text-center">
+                        {
+                            let (variant, label) = match file.priority {
+                                0 => (BadgeVariant::Destructive, "İndirme"),
+                                2 => (BadgeVariant::Success, "Yüksek"),
+                                _ => (BadgeVariant::Secondary, "Normal"),
+                            };
+                            view! { <Badge variant=variant class="text-[10px] uppercase">{label}</Badge> }
+                        }
+                    </TableCell>
+                </TableRow>
+            </ContextMenuTrigger>
+
+            <ContextMenuContent class="w-48">
+                <ContextMenuLabel>"Dosya Önceliği"</ContextMenuLabel>
+                <ContextMenuGroup>
+                    <ContextMenuItem on:click={
+                        let h = hash.clone();
+                        let ra = refresh_action.clone();
+                        move |_| {
+                            set_priority.dispatch((h.clone(), f_idx, 2));
+                            ra.dispatch(h.clone());
+                        }
+                    }>
+                        <icons::ChevronsUp class="text-green-500" />
+                        <span>"Yüksek"</span>
+                    </ContextMenuItem>
+                    
+                    <ContextMenuItem on:click={
+                        let h = hash.clone();
+                        let ra = refresh_action.clone();
+                        move |_| {
+                            set_priority.dispatch((h.clone(), f_idx, 1));
+                            ra.dispatch(h.clone());
+                        }
+                    }>
+                        <icons::Minus class="text-blue-500" />
+                        <span>"Normal"</span>
+                    </ContextMenuItem>
+                    
+                    <ContextMenuItem class="text-destructive focus:bg-destructive/10" on:click={
+                        let h = hash.clone();
+                        let ra = refresh_action.clone();
+                        move |_| {
+                            set_priority.dispatch((h.clone(), f_idx, 0));
+                            ra.dispatch(h.clone());
+                        }
+                    }>
+                        <icons::X />
+                        <span>"İndirme (Kapalı)"</span>
+                    </ContextMenuItem>
+                </ContextMenuGroup>
+            </ContextMenuContent>
+        </ContextMenu>
+    }
+}
+
+#[component]
+fn FilesFallback() -> impl IntoView {
+    view! {
+        <Shimmer loading=Signal::derive(|| true) class="space-y-2">
+            <div class="h-10 w-full bg-muted/20 rounded-md"></div>
+            <div class="h-10 w-full bg-muted/20 rounded-md"></div>
+            <div class="h-10 w-full bg-muted/20 rounded-md"></div>
+            <div class="h-10 w-full bg-muted/20 rounded-md"></div>
+        </Shimmer>
+    }
+}
+
+fn format_bytes(bytes: i64) -> String {
+    const UNITS: [&str; 6] = ["B", "KB", "MB", "GB", "TB", "PB"];
+    if bytes < 1024 { return format!("{} B", bytes); }
+    let i = (bytes as f64).log2().div_euclid(10.0) as usize;
+    format!("{:.1} {}", (bytes as f64) / 1024_f64.powi(i as i32), UNITS[i])
+}
--- a/frontend/src/components/torrent/mod.rs
+++ b/frontend/src/components/torrent/mod.rs
@@ -1,2 +1,4 @@
 pub mod table;
 pub mod add_torrent;
+pub mod details;
+pub mod files;
--- a/frontend/src/components/torrent/table.rs
+++ b/frontend/src/components/torrent/table.rs
@@ -544,15 +544,17 @@ 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>
+            
+            <crate::components::torrent::details::TorrentDetailsSheet />
        </div>
    }.into_any()
 }
@@ -595,10 +597,12 @@ fn TorrentRow(
                                on:click=move |_| store.selected_torrent.set(Some(stored_hash.get_value()))
                            >
                                <DataTableCell class="w-12 px-4">
-                                    <Checkbox 
-                                        checked=is_selected 
-                                        on_checked_change=on_select 
-                                    />
+                                    <div on:click=move |e| e.stop_propagation()>
+                                        <Checkbox 
+                                            checked=is_selected 
+                                            on_checked_change=on_select 
+                                        />
+                                    </div>
                                </DataTableCell>
                                
                                {move || visible_columns.get().contains("Name").then({
@@ -728,17 +732,23 @@ fn TorrentCard(
                                    }
                                )
                                on:click=move |_| {
-                                    let current = is_selected.get();
-                                    on_select.run(!current);
                                    store.selected_torrent.set(Some(stored_hash.get_value()));
                                }
                            >
                                <div class="p-4 space-y-3">
                                    <div class="flex justify-between items-start gap-3">
-                                        <div class="flex-1 min-w-0">
-                                            <h3 class="text-sm font-bold leading-tight line-clamp-2 break-all">{t_name.clone()}</h3>
+                                        <div class="flex items-start gap-3 flex-1 min-w-0">
+                                            <div on:click=move |e| e.stop_propagation() class="mt-0.5">
+                                                <Checkbox 
+                                                    checked=is_selected 
+                                                    on_checked_change=on_select 
+                                                />
+                                            </div>
+                                            <div class="flex-1 min-w-0">
+                                                <h3 class="text-sm font-bold leading-tight line-clamp-2 break-all">{t_name.clone()}</h3>
+                                            </div>
                                        </div>
-                                        <Badge variant=status_variant class="uppercase tracking-wider text-[10px]">
+                                        <Badge variant=status_variant class="uppercase tracking-wider text-[10px] shrink-0">
                                            {format!("{:?}", t.status)}
                                        </Badge>
                                    </div>
--- a/frontend/src/components/ui/button_action.rs
+++ b/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>
+    }
+}
--- a/frontend/src/components/ui/card.rs
+++ b/frontend/src/components/ui/card.rs
@@ -3,13 +3,17 @@ use leptos_ui::clx;

 mod components {
    use super::*;
-
    clx! {Card, div, "bg-card text-card-foreground flex flex-col gap-4 rounded-xl border py-6 shadow-sm"}
-    clx! {CardHeader, div, "@container/card-header flex flex-col items-start gap-1.5 px-6 [.border-b]:pb-6"}
+    // TODO. Change data-slot=card-action by data-name="CardAction".
+    clx! {CardHeader, div, "@container/card-header flex flex-col items-start gap-1.5 px-6 [.border-b]:pb-6 sm:grid sm:auto-rows-min sm:grid-rows-[auto_auto] has-data-[slot=card-action]:sm:grid-cols-[1fr_auto]"}
    clx! {CardTitle, h2, "leading-none font-semibold"}
    clx! {CardContent, div, "px-6"}
    clx! {CardDescription, p, "text-muted-foreground text-sm"}
    clx! {CardFooter, footer, "flex items-center px-6 [.border-t]:pt-6", "gap-2"}
+
+    clx! {CardAction, div, "self-start sm:col-start-2 sm:row-span-2 sm:row-start-1 sm:justify-self-end"}
+    clx! {CardList, ul, "flex flex-col gap-4"}
+    clx! {CardItem, li, "flex items-center [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0"}
 }

-pub use components::*;
+pub use components::*;
--- a/frontend/src/components/ui/context_menu.rs
+++ b/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,
@@ -209,7 +139,7 @@ pub fn ContextMenuTrigger(
            class=trigger_class
            data-name="ContextMenuTrigger"
            data-context-trigger=ctx.target_id
-            on:contextmenu=move |e: web_sys::MouseEvent| {
+            on:contextmenu=move |_e: web_sys::MouseEvent| {
                if let Some(cb) = on_open {
                    cb.run(());
                }
@@ -397,7 +327,7 @@ pub fn ContextMenuContent(
                target_id_for_script,
            )}
        </script>
-    }.into_any()
+    }
 }

 #[component]
--- a/frontend/src/components/ui/mod.rs
+++ b/frontend/src/components/ui/mod.rs
@@ -2,6 +2,7 @@ pub mod accordion;
 pub mod alert_dialog;
 pub mod badge;
 pub mod button;
+pub mod button_action;
 pub mod card;
 pub mod checkbox;
 pub mod context_menu;
@@ -16,8 +17,10 @@ pub mod separator;
 pub mod sheet;
 pub mod sidenav;
 pub mod skeleton;
+pub mod shimmer;
 pub mod svg_icon;
 pub mod switch;
 pub mod table;
+pub mod tabs;
 pub mod theme_toggle;
 pub mod toast;
--- a/frontend/src/components/ui/sheet.rs
+++ b/frontend/src/components/ui/sheet.rs
@@ -16,8 +16,6 @@ mod components {
    clx! {SheetFooter, footer, "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"}
 }

-pub use components::*;
-
 /* ========================================================== */
 /*                     ✨ CONTEXT ✨                          */
 /* ========================================================== */
--- a/frontend/src/components/ui/shimmer.rs
+++ b/frontend/src/components/ui/shimmer.rs
@@ -0,0 +1,52 @@
+use leptos::prelude::*;
+use tw_merge::*;
+
+use crate::components::hooks::use_random::use_random_id_for;
+
+#[component]
+pub fn Shimmer(
+    /// Controls shimmer visibility (works with any bool signal)
+    #[prop(into)]
+    loading: Signal<bool>,
+
+    /// Color of the shimmer wave (default: "rgba(255,255,255,0.15)")
+    #[prop(into, optional)]
+    shimmer_color: Option<String>,
+
+    /// Background color of shimmer blocks (default: "rgba(255,255,255,0.08)")
+    #[prop(into, optional)]
+    background_color: Option<String>,
+
+    /// Animation duration in seconds (default: 1.5)
+    #[prop(optional)]
+    duration: Option<f64>,
+
+    /// Fallback border-radius for text elements in px (default: 4)
+    #[prop(optional)]
+    fallback_border_radius: Option<f64>,
+
+    /// Additional classes
+    #[prop(into, optional)]
+    class: String,
+
+    /// Children to wrap
+    children: Children,
+) -> impl IntoView {
+    let shimmer_id = use_random_id_for("Shimmer");
+    let merged_class = tw_merge!("relative", class);
+
+    view! {
+        <div
+            id=shimmer_id
+            class=merged_class
+            data-name="Shimmer"
+            data-shimmer-loading=move || loading.get().to_string()
+            data-shimmer-color=shimmer_color
+            data-shimmer-bg-color=background_color
+            data-shimmer-duration=duration.map(|d| d.to_string())
+            data-shimmer-fallback-radius=fallback_border_radius.map(|r| r.to_string())
+        >
+            {children()}
+        </div>
+    }
+}
--- a/frontend/src/components/ui/tabs.rs
+++ b/frontend/src/components/ui/tabs.rs
@@ -0,0 +1,108 @@
+use leptos::context::Provider;
+use leptos::prelude::*;
+use tw_merge::tw_merge;
+
+#[derive(Clone)]
+pub struct TabsContext {
+    pub active_tab: RwSignal<String>,
+}
+
+#[component]
+pub fn Tabs(
+    #[prop(into)] default_value: String,
+    children: Children,
+    #[prop(optional, into)] class: String,
+) -> impl IntoView {
+    let active_tab = RwSignal::new(default_value);
+    let ctx = TabsContext { active_tab };
+
+    let merged_class = tw_merge!("w-full", &class);
+
+    view! {
+        <Provider value=ctx>
+            <div data-name="Tabs" class=merged_class>
+                {children()}
+            </div>
+        </Provider>
+    }
+}
+
+#[component]
+pub fn TabsList(
+    children: Children,
+    #[prop(optional, into)] class: String,
+) -> impl IntoView {
+    let merged_class = tw_merge!(
+        "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+        &class
+    );
+
+    view! {
+        <div data-name="TabsList" class=merged_class>
+            {children()}
+        </div>
+    }
+}
+
+#[component]
+pub fn TabsTrigger(
+    #[prop(into)] value: String,
+    children: Children,
+    #[prop(optional, into)] class: String,
+) -> impl IntoView {
+    let ctx = expect_context::<TabsContext>();
+    let v_clone = value.clone();
+    
+    let is_active = Memo::new(move |_| ctx.active_tab.get() == v_clone);
+
+    let merged_class = move || tw_merge!(
+        "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer select-none",
+        if is_active.get() {
+            "bg-background text-foreground shadow-sm"
+        } else {
+            "hover:bg-background/50 hover:text-foreground"
+        },
+        &class
+    );
+
+    view! {
+        <button
+            data-name="TabsTrigger"
+            type="button"
+            class=merged_class
+            data-state=move || if is_active.get() { "active" } else { "inactive" }
+            on:click=move |_| ctx.active_tab.set(value.clone())
+        >
+            {children()}
+        </button>
+    }
+}
+
+#[component]
+pub fn TabsContent(
+    #[prop(into)] value: String,
+    children: Children,
+    #[prop(optional, into)] class: String,
+) -> impl IntoView {
+    let ctx = expect_context::<TabsContext>();
+    let v_clone = value.clone();
+    
+    let is_active = Memo::new(move |_| ctx.active_tab.get() == v_clone);
+
+    let merged_class = move || tw_merge!(
+        "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        if !is_active.get() { "hidden" } else { "" },
+        &class
+    );
+
+    view! {
+        <div
+            data-name="TabsContent"
+            class=merged_class
+            data-state=move || if is_active.get() { "active" } else { "inactive" }
+            tabindex=move || if is_active.get() { "0" } else { "-1" }
+        >
+            {children()}
+        </div>
+    }
+}
--- a/frontend/src/store.rs
+++ b/frontend/src/store.rs
@@ -5,8 +5,7 @@ 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 base64::{Engine as _, engine::general_purpose::{URL_SAFE_NO_PAD as BASE64_URL, STANDARD as BASE64}};
 use wasm_bindgen::JsCast;

 use crate::components::ui::toast::{ToastType, toast};
@@ -162,7 +161,7 @@ pub async fn is_push_subscribed() -> Result<bool, String> {
        .dyn_into::<web_sys::ServiceWorkerRegistration>()
        .map_err(|_| "not a registration")?;

-    let push_manager = registration.push_manager();
+    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))?;
@@ -181,7 +180,8 @@ pub async fn subscribe_to_push_notifications() {
    };

    // 1. Get Public Key from Backend
-    let public_key = match shared::server_fns::push::get_push_public_key().await {
+    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; }
    };
@@ -191,26 +191,26 @@ pub async fn subscribe_to_push_notifications() {
    let key_array = js_sys::Uint8Array::from(&decoded_key[..]);

    // 3. Prepare Options
-    let mut options = web_sys::PushSubscriptionOptionsInit::new();
-    options.user_visible_only(true);
-    options.application_server_key(Some(&key_array.into()));
+    let 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();
+    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 = subscription.dyn_into::<web_sys::PushSubscription>().expect("not a sub");
-            let json = sub.to_json().expect("sub to json failed");
+            let sub_js = subscription.clone();
            
-            // Extract keys from JSON
-            let sub_obj: serde_json::Value = serde_wasm_bindgen::from_value(json).expect("serde from value failed");
+            // 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::save_push_subscription(endpoint, p256dh, auth).await {
+            match shared::server_fns::push::subscribe_push(endpoint, p256dh, auth).await {
                Ok(_) => {
                    log::info!("Push subscription saved successfully");
                    toast_success("Bildirimler aktif edildi");
@@ -229,7 +229,7 @@ pub async fn unsubscribe_from_push_notifications() {
    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();
+    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() {
@@ -240,7 +240,7 @@ pub async fn unsubscribe_from_push_notifications() {
                let _ = wasm_bindgen_futures::JsFuture::from(sub.unsubscribe().unwrap()).await;
                
                // 2. Remove from Backend
-                let _ = shared::server_fns::push::remove_push_subscription(endpoint).await;
+                let _ = shared::server_fns::push::unsubscribe_push(endpoint).await;
                log::info!("Push subscription removed");
                show_toast(NotificationLevel::Info, "Bildirimler kapatıldı");
            }
--- a/frontend/sw.js
+++ b/frontend/sw.js
@@ -1,4 +1,4 @@
-const CACHE_NAME = "vibetorrent-v2";
+const CACHE_NAME = "vibetorrent-v3";
 const ASSETS_TO_CACHE = [
  "/",
  "/index.html",
@@ -51,6 +51,11 @@ self.addEventListener("activate", (event) => {
 self.addEventListener("fetch", (event) => {
  const url = new URL(event.request.url);

+  // Skip unsupported schemes (like chrome-extension://)
+  if (!url.protocol.startsWith("http")) {
+    return;
+  }
+
  // Network-first strategy for API calls
  if (url.pathname.startsWith("/api/")) {
    event.respondWith(
@@ -75,10 +80,12 @@ self.addEventListener("fetch", (event) => {
      fetch(event.request)
        .then((response) => {
          // Cache the latest version of the HTML
-          const responseToCache = response.clone();
-          caches.open(CACHE_NAME).then((cache) => {
-            cache.put(event.request, responseToCache);
-          });
+          if (response && response.status === 200) {
+            const responseToCache = response.clone();
+            caches.open(CACHE_NAME).then((cache) => {
+              cache.put(event.request, responseToCache);
+            });
+          }
          return response;
        })
        .catch(() => {
--- a/package-lock.json
+++ b/package-lock.json
@@ -0,0 +1,372 @@
+{
+	"name": "vibetorrent-v3",
+	"lockfileVersion": 3,
+	"requires": true,
+	"packages": {
+		"": {
+			"dependencies": {
+				"@tailwindcss/cli": "^4.1.18",
+				"tailwindcss": "^4.1.18",
+				"tw-animate-css": "^1.4.0"
+			}
+		},
+		"node_modules/@jridgewell/gen-mapping": {
+			"version": "0.3.13",
+			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+			"integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/sourcemap-codec": "^1.5.0",
+				"@jridgewell/trace-mapping": "^0.3.24"
+			}
+		},
+		"node_modules/@jridgewell/remapping": {
+			"version": "2.3.5",
+			"resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+			"integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/gen-mapping": "^0.3.5",
+				"@jridgewell/trace-mapping": "^0.3.24"
+			}
+		},
+		"node_modules/@jridgewell/resolve-uri": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+			"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.0.0"
+			}
+		},
+		"node_modules/@jridgewell/sourcemap-codec": {
+			"version": "1.5.5",
+			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+			"integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+			"license": "MIT"
+		},
+		"node_modules/@jridgewell/trace-mapping": {
+			"version": "0.3.31",
+			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+			"integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/resolve-uri": "^3.1.0",
+				"@jridgewell/sourcemap-codec": "^1.4.14"
+			}
+		},
+		"node_modules/@parcel/watcher": {
+			"version": "2.5.6",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.6.tgz",
+			"integrity": "sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==",
+			"hasInstallScript": true,
+			"license": "MIT",
+			"dependencies": {
+				"detect-libc": "^2.0.3",
+				"is-glob": "^4.0.3",
+				"node-addon-api": "^7.0.0",
+				"picomatch": "^4.0.3"
+			},
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			},
+			"optionalDependencies": {
+				"@parcel/watcher-android-arm64": "2.5.6",
+				"@parcel/watcher-darwin-arm64": "2.5.6",
+				"@parcel/watcher-darwin-x64": "2.5.6",
+				"@parcel/watcher-freebsd-x64": "2.5.6",
+				"@parcel/watcher-linux-arm-glibc": "2.5.6",
+				"@parcel/watcher-linux-arm-musl": "2.5.6",
+				"@parcel/watcher-linux-arm64-glibc": "2.5.6",
+				"@parcel/watcher-linux-arm64-musl": "2.5.6",
+				"@parcel/watcher-linux-x64-glibc": "2.5.6",
+				"@parcel/watcher-linux-x64-musl": "2.5.6",
+				"@parcel/watcher-win32-arm64": "2.5.6",
+				"@parcel/watcher-win32-ia32": "2.5.6",
+				"@parcel/watcher-win32-x64": "2.5.6"
+			}
+		},
+		"node_modules/@parcel/watcher-darwin-arm64": {
+			"version": "2.5.6",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.6.tgz",
+			"integrity": "sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@tailwindcss/cli": {
+			"version": "4.1.18",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/cli/-/cli-4.1.18.tgz",
+			"integrity": "sha512-sMZ+lZbDyxwjD2E0L7oRUjJ01Ffjtme5OtjvvnC+cV4CEDcbqzbp25TCpxHj6kWLU9+DlqJOiNgSOgctC2aZmg==",
+			"license": "MIT",
+			"dependencies": {
+				"@parcel/watcher": "^2.5.1",
+				"@tailwindcss/node": "4.1.18",
+				"@tailwindcss/oxide": "4.1.18",
+				"enhanced-resolve": "^5.18.3",
+				"mri": "^1.2.0",
+				"picocolors": "^1.1.1",
+				"tailwindcss": "4.1.18"
+			},
+			"bin": {
+				"tailwindcss": "dist/index.mjs"
+			}
+		},
+		"node_modules/@tailwindcss/node": {
+			"version": "4.1.18",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.18.tgz",
+			"integrity": "sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/remapping": "^2.3.4",
+				"enhanced-resolve": "^5.18.3",
+				"jiti": "^2.6.1",
+				"lightningcss": "1.30.2",
+				"magic-string": "^0.30.21",
+				"source-map-js": "^1.2.1",
+				"tailwindcss": "4.1.18"
+			}
+		},
+		"node_modules/@tailwindcss/oxide": {
+			"version": "4.1.18",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.18.tgz",
+			"integrity": "sha512-EgCR5tTS5bUSKQgzeMClT6iCY3ToqE1y+ZB0AKldj809QXk1Y+3jB0upOYZrn9aGIzPtUsP7sX4QQ4XtjBB95A==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 10"
+			},
+			"optionalDependencies": {
+				"@tailwindcss/oxide-android-arm64": "4.1.18",
+				"@tailwindcss/oxide-darwin-arm64": "4.1.18",
+				"@tailwindcss/oxide-darwin-x64": "4.1.18",
+				"@tailwindcss/oxide-freebsd-x64": "4.1.18",
+				"@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.18",
+				"@tailwindcss/oxide-linux-arm64-gnu": "4.1.18",
+				"@tailwindcss/oxide-linux-arm64-musl": "4.1.18",
+				"@tailwindcss/oxide-linux-x64-gnu": "4.1.18",
+				"@tailwindcss/oxide-linux-x64-musl": "4.1.18",
+				"@tailwindcss/oxide-wasm32-wasi": "4.1.18",
+				"@tailwindcss/oxide-win32-arm64-msvc": "4.1.18",
+				"@tailwindcss/oxide-win32-x64-msvc": "4.1.18"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-darwin-arm64": {
+			"version": "4.1.18",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.18.tgz",
+			"integrity": "sha512-Gc2q4Qhs660bhjyBSKgq6BYvwDz4G+BuyJ5H1xfhmDR3D8HnHCmT/BSkvSL0vQLy/nkMLY20PQ2OoYMO15Jd0A==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/detect-libc": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+			"integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+			"license": "Apache-2.0",
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/enhanced-resolve": {
+			"version": "5.19.0",
+			"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.19.0.tgz",
+			"integrity": "sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg==",
+			"license": "MIT",
+			"dependencies": {
+				"graceful-fs": "^4.2.4",
+				"tapable": "^2.3.0"
+			},
+			"engines": {
+				"node": ">=10.13.0"
+			}
+		},
+		"node_modules/graceful-fs": {
+			"version": "4.2.11",
+			"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+			"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+			"license": "ISC"
+		},
+		"node_modules/is-extglob": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+			"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/is-glob": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+			"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+			"license": "MIT",
+			"dependencies": {
+				"is-extglob": "^2.1.1"
+			},
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/jiti": {
+			"version": "2.6.1",
+			"resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+			"integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+			"license": "MIT",
+			"bin": {
+				"jiti": "lib/jiti-cli.mjs"
+			}
+		},
+		"node_modules/lightningcss": {
+			"version": "1.30.2",
+			"resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
+			"integrity": "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==",
+			"license": "MPL-2.0",
+			"dependencies": {
+				"detect-libc": "^2.0.3"
+			},
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			},
+			"optionalDependencies": {
+				"lightningcss-android-arm64": "1.30.2",
+				"lightningcss-darwin-arm64": "1.30.2",
+				"lightningcss-darwin-x64": "1.30.2",
+				"lightningcss-freebsd-x64": "1.30.2",
+				"lightningcss-linux-arm-gnueabihf": "1.30.2",
+				"lightningcss-linux-arm64-gnu": "1.30.2",
+				"lightningcss-linux-arm64-musl": "1.30.2",
+				"lightningcss-linux-x64-gnu": "1.30.2",
+				"lightningcss-linux-x64-musl": "1.30.2",
+				"lightningcss-win32-arm64-msvc": "1.30.2",
+				"lightningcss-win32-x64-msvc": "1.30.2"
+			}
+		},
+		"node_modules/lightningcss-darwin-arm64": {
+			"version": "1.30.2",
+			"resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz",
+			"integrity": "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/magic-string": {
+			"version": "0.30.21",
+			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+			"integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/sourcemap-codec": "^1.5.5"
+			}
+		},
+		"node_modules/mri": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
+			"integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/node-addon-api": {
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+			"integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+			"license": "MIT"
+		},
+		"node_modules/picocolors": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+			"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+			"license": "ISC"
+		},
+		"node_modules/picomatch": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+			"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/jonschlinkert"
+			}
+		},
+		"node_modules/source-map-js": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+			"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+			"license": "BSD-3-Clause",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/tailwindcss": {
+			"version": "4.1.18",
+			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
+			"integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
+			"license": "MIT"
+		},
+		"node_modules/tapable": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+			"integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			}
+		},
+		"node_modules/tw-animate-css": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.4.0.tgz",
+			"integrity": "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==",
+			"license": "MIT",
+			"funding": {
+				"url": "https://github.com/sponsors/Wombosvideo"
+			}
+		}
+	}
+}
--- a/package.json
+++ b/package.json
@@ -0,0 +1,8 @@
+{
+	"type": "module",
+	"dependencies": {
+		"@tailwindcss/cli": "^4.1.18",
+		"tailwindcss": "^4.1.18",
+		"tw-animate-css": "^1.4.0"
+	}
+}
--- a/shared/src/server_fns/push.rs
+++ b/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)))
+}
--- a/ui_config.toml
+++ b/ui_config.toml
@@ -0,0 +1,2 @@
+base_color = "neutral"
+base_path_components = "backend/src/components"
Author	SHA1	Message	Date
spinline	45271b5060	fix: add missing files.rs and resolve Show type inference All checks were successful Build MIPS Binary / build (push) Successful in 2m0s Details	2026-02-21 01:05:58 +03:00
spinline	4d02bc655d	fix: resolve E0282 type inference on CI and clear warnings Some checks failed Build MIPS Binary / build (push) Failing after 35s Details	2026-02-21 01:04:00 +03:00
spinline	3c2ba477f5	feat(ui): add files tab and priority context menu Some checks failed Build MIPS Binary / build (push) Failing after 36s Details	2026-02-21 00:58:35 +03:00
spinline	6106d1cd22	fix(ui): prevent selection checkboxes from opening torrent details sheet All checks were successful Build MIPS Binary / build (push) Successful in 1m56s Details	2026-02-21 00:50:26 +03:00
spinline	50b83ebacf	chore(ui): remove debugging logs for sse connection All checks were successful Build MIPS Binary / build (push) Successful in 1m56s Details	2026-02-21 00:44:50 +03:00
spinline	566308d889	feat(backend): require rTorrent to be running for backend to start All checks were successful Build MIPS Binary / build (push) Successful in 1m54s Details	2026-02-21 00:42:42 +03:00
spinline	e878d1fe33	chore(ui): add debug logs for SSE connection lifecycle All checks were successful Build MIPS Binary / build (push) Successful in 1m56s Details	2026-02-21 00:29:27 +03:00
spinline	d88084fb9a	fix(ui): fix service worker crashes for chrome extensions and bump cache version All checks were successful Build MIPS Binary / build (push) Successful in 1m57s Details	2026-02-21 00:25:28 +03:00
spinline	f8639f2967	chore(ui): add debug logs for SSE deserialization errors All checks were successful Build MIPS Binary / build (push) Successful in 1m56s Details	2026-02-21 00:23:23 +03:00
spinline	7129c9a8eb	fix(ui): prevent panic on unwrap when selected torrent is None All checks were successful Build MIPS Binary / build (push) Successful in 1m57s Details	2026-02-21 00:19:14 +03:00
spinline	91202e7cf8	refactor(ui): wrap torrent details content with official RustUI Shimmer All checks were successful Build MIPS Binary / build (push) Successful in 2m7s Details	2026-02-21 00:02:27 +03:00
spinline	3c2fec8b8c	feat(ui): use official rustui shimmer component for torrent details	2026-02-20 23:57:59 +03:00
spinline	ec23285a6a	feat(ui): add shimmer component and integrate into torrent details	2026-02-20 23:53:37 +03:00
spinline	f075a87668	feat(ui): add bottom sheet and tabs for torrent details	2026-02-20 23:50:23 +03:00
spinline	3ce980239c	fix: ensure context menu closes after triggering start or stop actions All checks were successful Build MIPS Binary / build (push) Successful in 1m51s Details	2026-02-14 01:25:47 +03:00
spinline	d00fc41010	style: update CSS configuration and theme variables All checks were successful Build MIPS Binary / build (push) Successful in 1m55s Details	2026-02-13 20:11:02 +03:00
spinline	0636020a86	chore: re-add Leptos metadata to Cargo.toml for ui-cli compatibility All checks were successful Build MIPS Binary / build (push) Successful in 1m52s Details	2026-02-13 20:03:01 +03:00
spinline	322e0ab4a3	fix: make torrent status bar visible on mobile All checks were successful Build MIPS Binary / build (push) Successful in 1m52s Details	2026-02-13 14:05:07 +03:00
spinline	89f0a5423d	style: make footer even more minimal and elegant Some checks failed Build MIPS Binary / build (push) Has been cancelled Details	2026-02-13 14:03:54 +03:00
spinline	80f9e5cda2	fix: resolve race condition in ButtonAction using a generation counter for safety All checks were successful Build MIPS Binary / build (push) Successful in 1m52s Details	2026-02-13 13:50:47 +03:00
spinline	a12265573c	fix: resolve type mismatch between Mouse and Touch events in ButtonAction All checks were successful Build MIPS Binary / build (push) Successful in 1m51s Details	2026-02-13 13:44:15 +03:00
spinline	e45ec46793	feat: replace legacy hold-to-delete logic with modern ButtonAction component Some checks failed Build MIPS Binary / build (push) Failing after 34s Details	2026-02-13 13:41:46 +03:00
spinline	0e075d6092	feat: implement high-performance CSS-based ButtonAction component Some checks failed Build MIPS Binary / build (push) Failing after 34s Details	2026-02-13 13:39:53 +03:00
spinline	dbbc722f50	perf: refactor hold-to-action animation using CSS for silky-smooth performance Some checks failed Build MIPS Binary / build (push) Failing after 35s Details	2026-02-13 13:32:40 +03:00
spinline	dd3b3f3504	fix: resolve all compilation errors in push notification logic and stabilize UI components All checks were successful Build MIPS Binary / build (push) Successful in 1m51s Details	2026-02-13 13:26:22 +03:00