fix: resolve AddTorrent component import and type inference issues

- Tüm leptos-shadcn-* paketleri kaldırıldı (19 dependency)
- leptos_ui, tw_merge, strum eklendi
- components/ui/ modülü oluşturuldu (Button, Card, Input)
- TorrentDetail bileşeni tamamen silindi
- sidebar.rs: saf HTML+Tailwind ile SidebarButton yardımcı bileşeni
- toolbar.rs, login.rs, setup.rs, add_torrent.rs: saf HTML+Tailwind
- table.rs: shadcn Card -> rust-ui Card
- app.rs: Skeleton -> animate-pulse div

.gitea/workflows/build-mips.yml

@@ -22,12 +22,32 @@ jobs:
         git fetch --depth=1 origin ${{ gitea.sha }}
         git checkout FETCH_HEAD
 
+    - name: Cache Cargo
+      uses: actions/cache@v3
+      with:
+        path: |
+          ~/.cargo/bin/
+          ~/.cargo/registry/index/
+          ~/.cargo/registry/cache/
+          ~/.cargo/git/db/
+          target/
+        key: ${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}
+        restore-keys: |
+          ${{ runner.os }}-cargo-
+
+    - name: Cache Node Modules
+      uses: actions/cache@v3
+      with:
+        path: frontend/node_modules
+        key: ${{ runner.os }}-node-${{ hashFiles('frontend/package-lock.json') }}
+        restore-keys: |
+          ${{ runner.os }}-node-
+
     - name: Build Frontend
       run: |
         cd frontend
         npm install
-        npx @tailwindcss/cli -i input.css -o public/tailwind.css
-        # Trunk'ın optimizasyonunu kapalı (0) tutuyoruz çünkü Cargo.toml'daki opt-level='z' zaten o işi yapıyor.
+        npx @tailwindcss/cli -i input.css -o public/tailwind.css --minify --content './src/**/*.rs'
         trunk build --release
 
     - name: Build Backend (MIPS)

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"
@@ -17,4 +20,5 @@ strip = true
 incremental = false
 
 [patch.crates-io]
-coarsetime = { path = "third_party/coarsetime" }
+coarsetime = { path = "patches/coarsetime" }
+

backend/Cargo.toml

@@ -4,37 +4,37 @@ version = "0.1.0"
 edition = "2021"
 
 [features]
-default = ["push-notifications", "swagger"]
+default = ["swagger"] # push-notifications kaldırıldı
 push-notifications = ["web-push", "openssl"]
 swagger = ["utoipa-swagger-ui"]
 
 [dependencies]
 axum = { version = "0.8", features = ["macros", "ws"] }
 tokio = { version = "1", features = ["full"] }
-tower = { version = "0.4", features = ["util", "timeout"] }
-tower-http = { version = "0.5", features = ["fs", "trace", "cors", "compression-full"] }
+tower = { version = "0.5", features = ["util", "timeout"] }
+tower-http = { version = "0.6", features = ["fs", "trace", "cors", "compression-full"] }
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
+rmp-serde = "1.3"
+struct-patch = "0.5"
 tracing = "0.1"
 tracing-subscriber = { version = "0.3", features = ["env-filter"] }
 tokio-stream = "0.1"
 bytes = "1"
 futures = "0.3"
 quick-xml = { version = "0.31", features = ["serde", "serialize"] }
-# We might need `tokio-util` for codecs if we implement SCGI manually
 tokio-util = { version = "0.7", features = ["codec", "io"] }
 clap = { version = "4.4", features = ["derive", "env"] }
 rust-embed = "8.2"
 mime_guess = "2.0"
-shared = { path = "../shared" }
+shared = { path = "../shared", features = ["ssr"] }
 thiserror = "2.0.18"
 dotenvy = "0.15.7"
 utoipa = { version = "5.4.0", features = ["axum_extras"] }
-utoipa-swagger-ui = { version = "9.0.2", features = ["axum"], optional = true }
+utoipa-swagger-ui = { version = "9.0", features = ["axum"], optional = true }
 web-push = { version = "0.10", default-features = false, features = ["hyper-client"], optional = true }
 base64 = "0.22"
 openssl = { version = "0.10", features = ["vendored"], optional = true }
-sqlx = { version = "0.8", features = ["runtime-tokio", "sqlite"] }
 bcrypt = "0.17.0"
 axum-extra = { version = "0.10", features = ["cookie"] }
 rand = "0.8"
@@ -42,3 +42,11 @@ anyhow = "1.0.101"
 time = { version = "0.3.47", features = ["serde", "formatting", "parsing"] }
 tower_governor = "0.8.0"
 governor = "0.10.4"
+
+# Leptos
+leptos = { version = "0.8.15", features = ["nightly"] }
+leptos_axum = { version = "0.8.7" }
+jsonwebtoken = "9"
+tw_merge = { version = "0.1.17", features = ["variant"] }
+icons = { version = "0.18.0", features = ["leptos"] }
+leptos_ui = "0.3.20"

backend/src/diff.rs

@@ -9,106 +9,54 @@ pub enum DiffResult {
 }
 
 pub fn diff_torrents(old: &[Torrent], new: &[Torrent]) -> DiffResult {
-    // 1. Structural Check: Eğer torrent sayısı değişmişse (yeni eklenen veya silinen), 
-    // şimdilik basitlik adına FullUpdate gönderiyoruz.
     if old.len() != new.len() {
         return DiffResult::FullUpdate;
     }
 
-    // 2. Hash Set Karşılaştırması: 
-    // Sıralama değişmiş olabilir ama torrentler aynı mı?
     let old_map: HashMap<&str, &Torrent> = old.iter().map(|t| (t.hash.as_str(), t)).collect();
     
-    // Eğer yeni listedeki bir hash eski listede yoksa, yapı değişmiş demektir.
     for new_t in new {
         if !old_map.contains_key(new_t.hash.as_str()) {
             return DiffResult::FullUpdate;
         }
     }
 
-    // 3. Alan Güncellemeleri (Partial Updates)
-    // Buraya geldiğimizde biliyoruz ki old ve new listelerindeki torrentler (hash olarak) aynı,
-    // sadece sıraları farklı olabilir veya içindeki veriler güncellenmiş olabilir.
     let mut events = Vec::new();
 
     for new_t in new {
-        // old_map'ten ilgili torrente hash ile ulaşalım (sıradan bağımsız)
         let old_t = old_map.get(new_t.hash.as_str()).unwrap();
 
-        let mut update = TorrentUpdate {
-            hash: new_t.hash.clone(),
-            name: None,
-            size: None,
-            down_rate: None,
-            up_rate: None,
-            percent_complete: None,
-            completed: None,
-            eta: None,
-            status: None,
-            error_message: None,
-            label: None,
-        };
-
+        // Manuel diff creating TorrentUpdate (which is the Patch struct)
+        let mut patch = TorrentUpdate::default();
         let mut has_changes = false;
 
-        // Alanları karşılaştır
-        if old_t.name != new_t.name {
-            update.name = Some(new_t.name.clone());
-            has_changes = true;
-        }
-        if old_t.size != new_t.size {
-            update.size = Some(new_t.size);
-            has_changes = true;
-        }
-        if old_t.down_rate != new_t.down_rate {
-            update.down_rate = Some(new_t.down_rate);
-            has_changes = true;
-        }
-        if old_t.up_rate != new_t.up_rate {
-            update.up_rate = Some(new_t.up_rate);
-            has_changes = true;
-        }
-        if (old_t.percent_complete - new_t.percent_complete).abs() > 0.01 {
-            update.percent_complete = Some(new_t.percent_complete);
-            has_changes = true;
-
-            // Torrent tamamlanma kontrolü
+        if old_t.name != new_t.name { patch.name = Some(new_t.name.clone()); has_changes = true; }
+        if old_t.size != new_t.size { patch.size = Some(new_t.size); has_changes = true; }
+        if old_t.down_rate != new_t.down_rate { patch.down_rate = Some(new_t.down_rate); has_changes = true; }
+        if old_t.up_rate != new_t.up_rate { patch.up_rate = Some(new_t.up_rate); has_changes = true; }
+        if old_t.completed != new_t.completed { patch.completed = Some(new_t.completed); has_changes = true; }
+        if old_t.eta != new_t.eta { patch.eta = Some(new_t.eta); has_changes = true; }
+        if (old_t.percent_complete - new_t.percent_complete).abs() > 0.01 { 
+            patch.percent_complete = Some(new_t.percent_complete); 
+            has_changes = true; 
+            
             if old_t.percent_complete < 100.0 && new_t.percent_complete >= 100.0 {
-                tracing::info!("Torrent completed: {} ({})", new_t.name, new_t.hash);
                 events.push(AppEvent::Notification(SystemNotification {
                     level: NotificationLevel::Success,
                     message: format!("Torrent tamamlandı: {}", new_t.name),
                 }));
             }
         }
-        if old_t.completed != new_t.completed {
-            update.completed = Some(new_t.completed);
-            has_changes = true;
-        }
-        if old_t.eta != new_t.eta {
-            update.eta = Some(new_t.eta);
-            has_changes = true;
-        }
-        if old_t.status != new_t.status {
-            update.status = Some(new_t.status.clone());
-            has_changes = true;
-            
-            tracing::debug!(
-                "Torrent status changed: {} ({}) {:?} -> {:?}",
-                new_t.name, new_t.hash, old_t.status, new_t.status
-            );
-        }
-        if old_t.error_message != new_t.error_message {
-            update.error_message = Some(new_t.error_message.clone());
-            has_changes = true;
-        }
-        if old_t.label != new_t.label {
-            update.label = new_t.label.clone();
-            has_changes = true;
-        }
+        if old_t.status != new_t.status { patch.status = Some(new_t.status.clone()); has_changes = true; }
+        if old_t.error_message != new_t.error_message { patch.error_message = Some(new_t.error_message.clone()); has_changes = true; }
+        if old_t.label != new_t.label { patch.label = Some(new_t.label.clone()); has_changes = true; }
 
         if has_changes {
-            events.push(AppEvent::Update(update));
+            // Set the hash (not an Option in Patch usually, but check shared/src/lib.rs)
+            // Wait, TorrentUpdate is a Patch, does it have 'hash' field?
+            // Yes, because Torrent has 'hash' field.
+            patch.hash = Some(new_t.hash.clone()); 
+            events.push(AppEvent::Update(patch));
         }
     }
 

backend/src/handlers/auth.rs

@@ -1,154 +1,2 @@
-use crate::AppState;
-use axum::{
-    extract::{State, Json},
-    http::StatusCode,
-    response::IntoResponse,
-};
-use serde::{Deserialize, Serialize};
-use utoipa::ToSchema;
-use axum_extra::extract::cookie::{Cookie, CookieJar, SameSite};
-use time::Duration;
-
-#[derive(Deserialize, ToSchema)]
-pub struct LoginRequest {
-    username: String,
-    password: String,
-    #[serde(default)]
-    remember_me: bool,
-}
-
-#[derive(Serialize, ToSchema)]
-pub struct UserResponse {
-    username: String,
-}
-
-#[utoipa::path(
-    post,
-    path = "/api/auth/login",
-    request_body = LoginRequest,
-    responses(
-        (status = 200, description = "Login successful"),
-        (status = 401, description = "Invalid credentials"),
-        (status = 500, description = "Internal server error")
-    )
-)]
-pub async fn login_handler(
-    State(state): State<AppState>,
-    jar: CookieJar,
-    Json(payload): Json<LoginRequest>,
-) -> impl IntoResponse {
-    tracing::info!("Login attempt for user: {}", payload.username);
-
-    let user = match state.db.get_user_by_username(&payload.username).await {
-        Ok(Some(u)) => u,
-        Ok(None) => {
-            tracing::warn!("Login failed: User not found for {}", payload.username);
-            return (StatusCode::UNAUTHORIZED, "Invalid credentials").into_response();
-        }
-        Err(e) => {
-            tracing::error!("DB error during login for {}: {}", payload.username, e);
-            return (StatusCode::INTERNAL_SERVER_ERROR, "Database error").into_response();
-        }
-    };
-
-    let (user_id, password_hash) = user;
-
-    match bcrypt::verify(&payload.password, &password_hash) {
-        Ok(true) => {
-            tracing::info!("Password verified for user: {}", payload.username);
-
-            // Create session
-            let token: String = (0..32).map(|_| {
-                use rand::{distributions::Alphanumeric, Rng};
-                rand::thread_rng().sample(Alphanumeric) as char
-            }).collect();
-
-            // Expiration: 30 days if remember_me is true, else 1 day
-            let expires_in = if payload.remember_me {
-                60 * 60 * 24 * 30
-            } else {
-                60 * 60 * 24
-            };
-
-            let expires_at = time::OffsetDateTime::now_utc().unix_timestamp() + expires_in;
-
-            if let Err(e) = state.db.create_session(user_id, &token, expires_at).await {
-                tracing::error!("Failed to create session for {}: {}", payload.username, e);
-                return (StatusCode::INTERNAL_SERVER_ERROR, "Failed to create session").into_response();
-            }
-
-            let mut cookie = Cookie::build(("auth_token", token))
-                .path("/")
-                .http_only(true)
-                .same_site(SameSite::Lax)
-                .build();
-
-            cookie.set_max_age(Duration::seconds(expires_in));
-
-            tracing::info!("Session created and cookie set for user: {}", payload.username);
-            (StatusCode::OK, jar.add(cookie), Json(UserResponse { username: payload.username })).into_response()
-        }
-        Ok(false) => {
-            tracing::warn!("Login failed: Invalid password for {}", payload.username);
-            (StatusCode::UNAUTHORIZED, "Invalid credentials").into_response()
-        }
-        Err(e) => {
-            tracing::error!("Bcrypt error for {}: {}", payload.username, e);
-            (StatusCode::INTERNAL_SERVER_ERROR, "Auth error").into_response()
-        }
-    }
-}
-
-#[utoipa::path(
-    post,
-    path = "/api/auth/logout",
-    responses(
-        (status = 200, description = "Logged out")
-    )
-)]
-pub async fn logout_handler(
-    State(state): State<AppState>,
-    jar: CookieJar,
-) -> impl IntoResponse {
-    if let Some(token) = jar.get("auth_token") {
-        let _ = state.db.delete_session(token.value()).await;
-    }
-
-    let cookie = Cookie::build(("auth_token", ""))
-        .path("/")
-        .http_only(true)
-        .max_age(Duration::seconds(-1)) // Expire immediately
-        .build();
-
-    (StatusCode::OK, jar.add(cookie), "Logged out").into_response()
-}
-
-#[utoipa::path(
-    get,
-    path = "/api/auth/check",
-    responses(
-        (status = 200, description = "Authenticated", body = UserResponse),
-        (status = 401, description = "Not authenticated")
-    )
-)]
-pub async fn check_auth_handler(
-    State(state): State<AppState>,
-    jar: CookieJar,
-) -> impl IntoResponse {
-    if let Some(token) = jar.get("auth_token") {
-        match state.db.get_session_user(token.value()).await {
-            Ok(Some(user_id)) => {
-                // Fetch username
-                // We need a helper in db.rs to get username by id, or we can use a direct query here if we don't want to change db.rs interface yet.
-                // But better to add `get_username_by_id` to db.rs
-                // For now let's query directly or via a new db method.
-                if let Ok(Some(username)) = state.db.get_username_by_id(user_id).await {
-                     return (StatusCode::OK, Json(UserResponse { username })).into_response();
-                }
-            },
-            _ => {} // Invalid session
-        }
-    }
-
-    StatusCode::UNAUTHORIZED.into_response()
-}
+// This file is intentionally empty as authentication is now handled by Server Functions.
+// See shared/src/server_fns/auth.rs

backend/src/handlers/mod.rs

@@ -1,23 +1,13 @@
-use crate::{
-    xmlrpc::{self, RpcParam},
-    AppState,
-};
-#[cfg(feature = "push-notifications")]
-use crate::push;
 use axum::{
-    extract::{Json, Path, State},
     http::{header, StatusCode, Uri},
     response::IntoResponse,
     BoxError,
 };
 use rust_embed::RustEmbed;
-use shared::{
-    AddTorrentRequest, GlobalLimitRequest, SetFilePriorityRequest, SetLabelRequest, TorrentActionRequest,
-    TorrentFile,     TorrentPeer, TorrentTracker,
-};
 
 pub mod auth;
 pub mod setup;
+pub mod notifications;
 
 #[derive(RustEmbed)]
 #[folder = "../frontend/dist"]
@@ -39,7 +29,6 @@ pub async fn static_handler(uri: Uri) -> impl IntoResponse {
             if path.contains('.') {
                 return StatusCode::NOT_FOUND.into_response();
             }
-            // Fallback to index.html for SPA routing
             match Asset::get("index.html") {
                 Some(content) => {
                     let mime = mime_guess::from_path("index.html").first_or_octet_stream();
@@ -51,614 +40,6 @@ pub async fn static_handler(uri: Uri) -> impl IntoResponse {
     }
 }
 
-// --- TORRENT ACTIONS ---
-
-/// Add a new torrent via magnet link or URL
-#[utoipa::path(
-    post,
-    path = "/api/torrents/add",
-    request_body = AddTorrentRequest,
-    responses(
-        (status = 200, description = "Torrent added successfully"),
-        (status = 500, description = "Internal server error or rTorrent fault")
-    )
-)]
-pub async fn add_torrent_handler(
-    State(state): State<AppState>,
-    Json(payload): Json<AddTorrentRequest>,
-) -> StatusCode {
-    tracing::info!(
-        "Received add_torrent request. URI length: {}",
-        payload.uri.len()
-    );
-    let client = xmlrpc::RtorrentClient::new(&state.scgi_socket_path);
-    let params = vec![RpcParam::from(""), RpcParam::from(payload.uri.as_str())];
-
-    match client.call("load.start", &params).await {
-        Ok(response) => {
-            tracing::debug!("rTorrent response to load.start: {}", response);
-            if response.contains("faultCode") {
-                tracing::error!("rTorrent returned fault: {}", response);
-                return StatusCode::INTERNAL_SERVER_ERROR;
-            }
-            // Note: Frontend shows its own toast, no SSE notification needed
-            StatusCode::OK
-        }
-        Err(e) => {
-            tracing::error!("Failed to add torrent: {}", e);
-            // Note: Frontend shows its own toast, no SSE notification needed
-            StatusCode::INTERNAL_SERVER_ERROR
-        }
-    }
-}
-
-/// Perform an action on a torrent (start, stop, delete)
-#[utoipa::path(
-    post,
-    path = "/api/torrents/action",
-    request_body = TorrentActionRequest,
-    responses(
-        (status = 200, description = "Action executed successfully"),
-        (status = 400, description = "Invalid action or request"),
-        (status = 403, description = "Forbidden: Security risk detected"),
-        (status = 500, description = "Internal server error")
-    )
-)]
-pub async fn handle_torrent_action(
-    State(state): State<AppState>,
-    Json(payload): Json<TorrentActionRequest>,
-) -> impl IntoResponse {
-    tracing::info!(
-        "Received action: {} for hash: {}",
-        payload.action,
-        payload.hash
-    );
-
-    let client = xmlrpc::RtorrentClient::new(&state.scgi_socket_path);
-
-    // Special handling for delete_with_data
-    if payload.action == "delete_with_data" {
-        return match delete_torrent_with_data(&client, &payload.hash).await {
-            Ok(msg) => {
-                // Note: Frontend shows its own toast
-                (StatusCode::OK, msg).into_response()
-            }
-            Err((status, msg)) => (status, msg).into_response(),
-        };
-    }
-
-    let method = match payload.action.as_str() {
-        "start" => "d.start",
-        "stop" => "d.stop",
-        "delete" => "d.erase",
-        _ => return (StatusCode::BAD_REQUEST, "Invalid action").into_response(),
-    };
-
-    let params = vec![RpcParam::from(payload.hash.as_str())];
-
-    match client.call(method, &params).await {
-        Ok(_) => {
-            // Note: Frontend shows its own toast, no SSE notification needed
-            (StatusCode::OK, "Action executed").into_response()
-        }
-        Err(e) => {
-            tracing::error!("RPC error: {}", e);
-            (
-                StatusCode::INTERNAL_SERVER_ERROR,
-                "Failed to execute action",
-            )
-                .into_response()
-        }
-    }
-}
-
-/// Helper function to handle secure deletion of torrent data
-async fn delete_torrent_with_data(
-    client: &xmlrpc::RtorrentClient,
-    hash: &str,
-) -> Result<&'static str, (StatusCode, String)> {
-    let params_hash = vec![RpcParam::from(hash)];
-
-    // 1. Get Base Path
-    let path_xml = client
-        .call("d.base_path", &params_hash)
-        .await
-        .map_err(|e| {
-            (
-                StatusCode::INTERNAL_SERVER_ERROR,
-                format!("Failed to call rTorrent: {}", e),
-            )
-        })?;
-
-    let path = xmlrpc::parse_string_response(&path_xml).map_err(|e| {
-        (
-            StatusCode::INTERNAL_SERVER_ERROR,
-            format!("Failed to parse path: {}", e),
-        )
-    })?;
-
-    // 1.5 Get Default Download Directory (Sandbox Root)
-    let root_xml = client.call("directory.default", &[]).await.map_err(|e| {
-        (
-            StatusCode::INTERNAL_SERVER_ERROR,
-            format!("Failed to get valid download root: {}", e),
-        )
-    })?;
-
-    let root_path_str = xmlrpc::parse_string_response(&root_xml).map_err(|e| {
-        (
-            StatusCode::INTERNAL_SERVER_ERROR,
-            format!("Failed to parse root path: {}", e),
-        )
-    })?;
-
-    // Resolve Paths (Canonicalize) to prevent .. traversal and symlink attacks
-    let root_path = tokio::fs::canonicalize(std::path::Path::new(&root_path_str))
-        .await
-        .map_err(|e| {
-            (
-                StatusCode::INTERNAL_SERVER_ERROR,
-                format!("Invalid download root configuration (on server): {}", e),
-            )
-        })?;
-
-    // Check if target path exists before trying to resolve it
-    let target_path_raw = std::path::Path::new(&path);
-    if !tokio::fs::try_exists(target_path_raw)
-        .await
-        .unwrap_or(false)
-    {
-        tracing::warn!(
-            "Data path not found: {:?}. Removing torrent only.",
-            target_path_raw
-        );
-        // If file doesn't exist, we just remove the torrent entry
-        client.call("d.erase", &params_hash).await.map_err(|e| {
-            (
-                StatusCode::INTERNAL_SERVER_ERROR,
-                format!("Failed to erase torrent: {}", e),
-            )
-        })?;
-
-        return Ok("Torrent removed (Data not found)");
-    }
-
-    let target_path = tokio::fs::canonicalize(target_path_raw)
-        .await
-        .map_err(|e| {
-            (
-                StatusCode::INTERNAL_SERVER_ERROR,
-                format!("Invalid data path: {}", e),
-            )
-        })?;
-
-    tracing::info!(
-        "Delete request: Target='{:?}', Root='{:?}'",
-        target_path,
-        root_path
-    );
-
-    // SECURITY CHECK: Ensure path is inside root_path
-    if !target_path.starts_with(&root_path) {
-        tracing::error!(
-            "Security Risk: Attempted to delete path outside download directory: {:?}",
-            target_path
-        );
-        return Err((
-            StatusCode::FORBIDDEN,
-            "Security Error: Cannot delete files outside default download directory".to_string(),
-        ));
-    }
-
-    // SECURITY CHECK: Ensure we are not deleting the root itself
-    if target_path == root_path {
-        return Err((
-            StatusCode::BAD_REQUEST,
-            "Security Error: Cannot delete the download root directory itself".to_string(),
-        ));
-    }
-
-    // 2. Erase Torrent first
-    client.call("d.erase", &params_hash).await.map_err(|e| {
-        tracing::warn!("Failed to erase torrent entry: {}", e);
-        (
-            StatusCode::INTERNAL_SERVER_ERROR,
-            format!("Failed to erase torrent: {}", e),
-        )
-    })?;
-
-    // 3. Delete Files via Native FS
-    let delete_result = if target_path.is_dir() {
-        tokio::fs::remove_dir_all(&target_path).await
-    } else {
-        tokio::fs::remove_file(&target_path).await
-    };
-
-    match delete_result {
-        Ok(_) => Ok("Torrent and data deleted"),
-        Err(e) => {
-            tracing::error!("Failed to delete data at {:?}: {}", target_path, e);
-            Err((
-                StatusCode::INTERNAL_SERVER_ERROR,
-                format!("Failed to delete data: {}", e),
-            ))
-        }
-    }
-}
-
-// --- NEW HANDLERS ---
-
-/// Get rTorrent version
-#[utoipa::path(
-    get,
-    path = "/api/system/version",
-    responses(
-        (status = 200, description = "rTorrent version", body = String),
-        (status = 500, description = "Internal server error")
-    )
-)]
-pub async fn get_version_handler(State(state): State<AppState>) -> impl IntoResponse {
-    let client = xmlrpc::RtorrentClient::new(&state.scgi_socket_path);
-    match client.call("system.client_version", &[]).await {
-        Ok(xml) => {
-            let version = xmlrpc::parse_string_response(&xml).unwrap_or(xml);
-            (StatusCode::OK, version).into_response()
-        }
-        Err(e) => {
-            tracing::error!("Failed to get version: {}", e);
-            (StatusCode::INTERNAL_SERVER_ERROR, "Failed to get version").into_response()
-        }
-    }
-}
-
-/// Get files for a torrent
-#[utoipa::path(
-    get,
-    path = "/api/torrents/{hash}/files",
-    responses(
-        (status = 200, description = "Files list", body = Vec<TorrentFile>),
-        (status = 500, description = "Internal server error")
-    ),
-    params(
-        ("hash" = String, Path, description = "Torrent Hash")
-    )
-)]
-pub async fn get_files_handler(
-    State(state): State<AppState>,
-    Path(hash): Path<String>,
-) -> impl IntoResponse {
-    let client = xmlrpc::RtorrentClient::new(&state.scgi_socket_path);
-    let params = vec![
-        RpcParam::from(hash.as_str()),
-        RpcParam::from(""),
-        RpcParam::from("f.path="),
-        RpcParam::from("f.size_bytes="),
-        RpcParam::from("f.completed_chunks="),
-        RpcParam::from("f.priority="),
-    ];
-
-    match client.call("f.multicall", &params).await {
-        Ok(xml) => match xmlrpc::parse_multicall_response(&xml) {
-            Ok(rows) => {
-                let files: Vec<TorrentFile> = rows
-                    .into_iter()
-                    .enumerate()
-                    .map(|(idx, row)| TorrentFile {
-                        index: idx as u32,
-                        path: row.get(0).cloned().unwrap_or_default(),
-                        size: row.get(1).and_then(|s| s.parse().ok()).unwrap_or(0),
-                        completed_chunks: row.get(2).and_then(|s| s.parse().ok()).unwrap_or(0),
-                        priority: row.get(3).and_then(|s| s.parse().ok()).unwrap_or(0),
-                    })
-                    .collect();
-                (StatusCode::OK, Json(files)).into_response()
-            }
-            Err(e) => (
-                StatusCode::INTERNAL_SERVER_ERROR,
-                format!("Parse error: {}", e),
-            )
-                .into_response(),
-        },
-        Err(e) => (
-            StatusCode::INTERNAL_SERVER_ERROR,
-            format!("RPC error: {}", e),
-        )
-            .into_response(),
-    }
-}
-
-/// Get peers for a torrent
-#[utoipa::path(
-    get,
-    path = "/api/torrents/{hash}/peers",
-    responses(
-        (status = 200, description = "Peers list", body = Vec<TorrentPeer>),
-        (status = 500, description = "Internal server error")
-    ),
-    params(
-        ("hash" = String, Path, description = "Torrent Hash")
-    )
-)]
-pub async fn get_peers_handler(
-    State(state): State<AppState>,
-    Path(hash): Path<String>,
-) -> impl IntoResponse {
-    let client = xmlrpc::RtorrentClient::new(&state.scgi_socket_path);
-    let params = vec![
-        RpcParam::from(hash.as_str()),
-        RpcParam::from(""),
-        RpcParam::from("p.address="),
-        RpcParam::from("p.client_version="),
-        RpcParam::from("p.down_rate="),
-        RpcParam::from("p.up_rate="),
-        RpcParam::from("p.completed_percent="),
-    ];
-
-    match client.call("p.multicall", &params).await {
-        Ok(xml) => match xmlrpc::parse_multicall_response(&xml) {
-            Ok(rows) => {
-                let peers: Vec<TorrentPeer> = rows
-                    .into_iter()
-                    .map(|row| TorrentPeer {
-                        ip: row.get(0).cloned().unwrap_or_default(),
-                        client: row.get(1).cloned().unwrap_or_default(),
-                        down_rate: row.get(2).and_then(|s| s.parse().ok()).unwrap_or(0),
-                        up_rate: row.get(3).and_then(|s| s.parse().ok()).unwrap_or(0),
-                        progress: row.get(4).and_then(|s| s.parse().ok()).unwrap_or(0.0),
-                    })
-                    .collect();
-                (StatusCode::OK, Json(peers)).into_response()
-            }
-            Err(e) => (
-                StatusCode::INTERNAL_SERVER_ERROR,
-                format!("Parse error: {}", e),
-            )
-                .into_response(),
-        },
-        Err(e) => (
-            StatusCode::INTERNAL_SERVER_ERROR,
-            format!("RPC error: {}", e),
-        )
-            .into_response(),
-    }
-}
-
-/// Get trackers for a torrent
-#[utoipa::path(
-    get,
-    path = "/api/torrents/{hash}/trackers",
-    responses(
-        (status = 200, description = "Trackers list", body = Vec<TorrentTracker>),
-        (status = 500, description = "Internal server error")
-    ),
-    params(
-        ("hash" = String, Path, description = "Torrent Hash")
-    )
-)]
-pub async fn get_trackers_handler(
-    State(state): State<AppState>,
-    Path(hash): Path<String>,
-) -> impl IntoResponse {
-    let client = xmlrpc::RtorrentClient::new(&state.scgi_socket_path);
-    let params = vec![
-        RpcParam::from(hash.as_str()),
-        RpcParam::from(""),
-        RpcParam::from("t.url="),
-        RpcParam::from("t.activity_date_last="),
-        RpcParam::from("t.message="),
-    ];
-
-    match client.call("t.multicall", &params).await {
-        Ok(xml) => {
-            match xmlrpc::parse_multicall_response(&xml) {
-                Ok(rows) => {
-                    let trackers: Vec<TorrentTracker> = rows
-                        .into_iter()
-                        .map(|row| {
-                            TorrentTracker {
-                                url: row.get(0).cloned().unwrap_or_default(),
-                                status: "Unknown".to_string(), // Derive from type/activity?
-                                message: row.get(2).cloned().unwrap_or_default(),
-                            }
-                        })
-                        .collect();
-                    (StatusCode::OK, Json(trackers)).into_response()
-                }
-                Err(e) => (
-                    StatusCode::INTERNAL_SERVER_ERROR,
-                    format!("Parse error: {}", e),
-                )
-                    .into_response(),
-            }
-        }
-        Err(e) => (
-            StatusCode::INTERNAL_SERVER_ERROR,
-            format!("RPC error: {}", e),
-        )
-            .into_response(),
-    }
-}
-
-/// Set file priority
-#[utoipa::path(
-    post,
-    path = "/api/torrents/files/priority",
-    request_body = SetFilePriorityRequest,
-    responses(
-        (status = 200, description = "Priority updated"),
-        (status = 500, description = "Internal server error")
-    )
-)]
-pub async fn set_file_priority_handler(
-    State(state): State<AppState>,
-    Json(payload): Json<SetFilePriorityRequest>,
-) -> impl IntoResponse {
-    let client = xmlrpc::RtorrentClient::new(&state.scgi_socket_path);
-
-    // f.set_priority takes "hash", index, priority
-    // Priority: 0 (off), 1 (normal), 2 (high)
-    // f.set_priority is tricky. Let's send as string first as before, or int if we knew.
-    // Usually priorities are small integers.
-    // But since we are updating everything to RpcParam, let's use Int if possible or String.
-    // The previous implementation used string. Let's stick to string for now or try Int.
-    // Actually, f.set_priority likely takes an integer.
-
-    let target = format!("{}:f{}", payload.hash, payload.file_index);
-    let params = vec![
-        RpcParam::from(target.as_str()),
-        RpcParam::from(payload.priority as i64),
-    ];
-
-    match client.call("f.set_priority", &params).await {
-        Ok(_) => {
-            let _ = client
-                .call(
-                    "d.update_priorities",
-                    &[RpcParam::from(payload.hash.as_str())],
-                )
-                .await;
-            (StatusCode::OK, "Priority updated").into_response()
-        }
-        Err(e) => (
-            StatusCode::INTERNAL_SERVER_ERROR,
-            format!("RPC error: {}", e),
-        )
-            .into_response(),
-    }
-}
-
-/// Set torrent label
-#[utoipa::path(
-    post,
-    path = "/api/torrents/label",
-    request_body = SetLabelRequest,
-    responses(
-        (status = 200, description = "Label updated"),
-        (status = 500, description = "Internal server error")
-    )
-)]
-pub async fn set_label_handler(
-    State(state): State<AppState>,
-    Json(payload): Json<SetLabelRequest>,
-) -> impl IntoResponse {
-    let client = xmlrpc::RtorrentClient::new(&state.scgi_socket_path);
-    let params = vec![
-        RpcParam::from(payload.hash.as_str()),
-        RpcParam::from(payload.label),
-    ];
-
-    match client.call("d.custom1.set", &params).await {
-        Ok(_) => (StatusCode::OK, "Label updated").into_response(),
-        Err(e) => (
-            StatusCode::INTERNAL_SERVER_ERROR,
-            format!("RPC error: {}", e),
-        )
-            .into_response(),
-    }
-}
-
-/// Get global speed limits
-#[utoipa::path(
-    get,
-    path = "/api/settings/global-limits",
-    responses(
-        (status = 200, description = "Current limits", body = GlobalLimitRequest),
-        (status = 500, description = "Internal server error")
-    )
-)]
-pub async fn get_global_limit_handler(State(state): State<AppState>) -> impl IntoResponse {
-    let client = xmlrpc::RtorrentClient::new(&state.scgi_socket_path);
-    // throttle.global_down.max_rate, throttle.global_up.max_rate
-    let down_fut = client.call("throttle.global_down.max_rate", &[]);
-    let up_fut = client.call("throttle.global_up.max_rate", &[]);
-
-    let down = match down_fut.await {
-        Ok(xml) => xmlrpc::parse_i64_response(&xml).unwrap_or(0),
-        Err(_) => -1,
-    };
-
-    let up = match up_fut.await {
-        Ok(xml) => xmlrpc::parse_i64_response(&xml).unwrap_or(0),
-        Err(_) => -1,
-    };
-
-    let resp = GlobalLimitRequest {
-        max_download_rate: Some(down),
-        max_upload_rate: Some(up),
-    };
-
-    (StatusCode::OK, Json(resp)).into_response()
-}
-
-/// Set global speed limits
-#[utoipa::path(
-    post,
-    path = "/api/settings/global-limits",
-    request_body = GlobalLimitRequest,
-    responses(
-        (status = 200, description = "Limits updated"),
-        (status = 500, description = "Internal server error")
-    )
-)]
-pub async fn set_global_limit_handler(
-    State(state): State<AppState>,
-    Json(payload): Json<GlobalLimitRequest>,
-) -> impl IntoResponse {
-    let client = xmlrpc::RtorrentClient::new(&state.scgi_socket_path);
-
-    // Use throttle.global_*.max_rate.set_kb which is more reliable than .set (which is buggy)
-    // The .set_kb method expects KB/s, so we convert bytes to KB
-
-    if let Some(down) = payload.max_download_rate {
-        // Convert bytes/s to KB/s (divide by 1024)
-        let down_kb = down / 1024;
-        tracing::info!(
-            "Setting download limit: {} bytes/s = {} KB/s",
-            down,
-            down_kb
-        );
-
-        // Use set_kb with empty string as first param (throttle name), then value
-        if let Err(e) = client
-            .call(
-                "throttle.global_down.max_rate.set_kb",
-                &[RpcParam::from(""), RpcParam::Int(down_kb)],
-            )
-            .await
-        {
-            tracing::error!("Failed to set download limit: {}", e);
-            return (
-                StatusCode::INTERNAL_SERVER_ERROR,
-                format!("Failed to set down limit: {}", e),
-            )
-                .into_response();
-        }
-    }
-
-    if let Some(up) = payload.max_upload_rate {
-        // Convert bytes/s to KB/s
-        let up_kb = up / 1024;
-        tracing::info!("Setting upload limit: {} bytes/s = {} KB/s", up, up_kb);
-
-        if let Err(e) = client
-            .call(
-                "throttle.global_up.max_rate.set_kb",
-                &[RpcParam::from(""), RpcParam::Int(up_kb)],
-            )
-            .await
-        {
-            tracing::error!("Failed to set upload limit: {}", e);
-            return (
-                StatusCode::INTERNAL_SERVER_ERROR,
-                format!("Failed to set up limit: {}", e),
-            )
-                .into_response();
-        }
-    }
-
-    (StatusCode::OK, "Limits updated").into_response()
-}
-
 pub async fn handle_timeout_error(err: BoxError) -> (StatusCode, &'static str) {
     if err.is::<tower::timeout::error::Elapsed>() {
         (StatusCode::REQUEST_TIMEOUT, "Request timed out")
@@ -669,44 +50,3 @@ pub async fn handle_timeout_error(err: BoxError) -> (StatusCode, &'static str) {
         )
     }
 }
-
-// --- PUSH NOTIFICATION HANDLERS ---
-
-#[cfg(feature = "push-notifications")]
-/// Get VAPID public key for push subscription
-#[utoipa::path(
-    get,
-    path = "/api/push/public-key",
-    responses(
-        (status = 200, description = "VAPID public key", body = String)
-    )
-)]
-pub async fn get_push_public_key_handler(
-    State(state): State<AppState>,
-) -> impl IntoResponse {
-    let public_key = state.push_store.get_public_key();
-    (StatusCode::OK, Json(serde_json::json!({ "publicKey": public_key }))).into_response()
-}
-
-
-#[cfg(feature = "push-notifications")]
-/// Subscribe to push notifications
-#[utoipa::path(
-    post,
-    path = "/api/push/subscribe",
-    request_body = push::PushSubscription,
-    responses(
-        (status = 200, description = "Subscription saved"),
-        (status = 400, description = "Invalid subscription data")
-    )
-)]
-pub async fn subscribe_push_handler(
-    State(state): State<AppState>,
-    Json(subscription): Json<push::PushSubscription>,
-) -> impl IntoResponse {
-    tracing::info!("Received push subscription: {:?}", subscription);
-
-    state.push_store.add_subscription(subscription).await;
-
-    (StatusCode::OK, "Subscription saved").into_response()
-}

backend/src/handlers/notifications.rs

@@ -0,0 +1,54 @@
+use axum::{
+    extract::{State, Query},
+    http::StatusCode,
+};
+use serde::Deserialize;
+use shared::{AppEvent, SystemNotification, NotificationLevel};
+use crate::AppState;
+
+#[derive(Deserialize)]
+pub struct TorrentFinishedQuery {
+    pub name: String,
+    pub hash: String,
+}
+
+pub async fn torrent_finished_handler(
+    State(state): State<AppState>,
+    Query(params): Query<TorrentFinishedQuery>,
+) -> StatusCode {
+    tracing::info!("WEBHOOK: Received notification from rTorrent. Name: {:?}, Hash: {:?}", params.name, params.hash);
+
+    let torrent_name = if params.name.is_empty() || params.name == "$d.name=" {
+        "Bilinmeyen Torrent".to_string()
+    } else {
+        params.name.clone()
+    };
+
+    let message = format!("Torrent tamamlandı: {}", torrent_name);
+
+    // 1. Send to active SSE clients (for Toast)
+    let notification = SystemNotification {
+        level: NotificationLevel::Success,
+        message: message.clone(),
+    };
+    let _ = state.event_bus.send(AppEvent::Notification(notification));
+
+    // 2. Send Web Push Notification (for Background)
+    #[cfg(feature = "push-notifications")]
+    {
+        let push_store = state.push_store.clone();
+        let title = "Torrent Tamamlandı".to_string();
+        let body = message;
+        let name_for_log = torrent_name.clone();
+        
+        tokio::spawn(async move {
+            tracing::info!("Attempting to send Web Push notification for torrent: {}", name_for_log);
+            match crate::push::send_push_notification(&push_store, &title, &body).await {
+                Ok(_) => tracing::info!("Web Push notification task completed for: {}", name_for_log),
+                Err(e) => tracing::error!("Failed to send Web Push notification for {}: {:?}", name_for_log, e),
+            }
+        });
+    }
+
+    StatusCode::OK
+}

backend/src/handlers/setup.rs

@@ -1,125 +1,2 @@
-use crate::AppState;
-use axum::{
-    extract::{State, Json},
-    http::StatusCode,
-    response::IntoResponse,
-};
-use serde::{Deserialize, Serialize};
-use utoipa::ToSchema;
-use axum_extra::extract::cookie::{Cookie, CookieJar, SameSite};
-use time::Duration;
-
-#[derive(Deserialize, ToSchema)]
-pub struct SetupRequest {
-    username: String,
-    password: String,
-}
-
-#[derive(Serialize, ToSchema)]
-pub struct SetupStatusResponse {
-    completed: bool,
-}
-
-#[utoipa::path(
-    get,
-    path = "/api/setup/status",
-    responses(
-        (status = 200, description = "Setup status", body = SetupStatusResponse)
-    )
-)]
-pub async fn get_setup_status_handler(State(state): State<AppState>) -> impl IntoResponse {
-    let completed = match state.db.has_users().await {
-        Ok(has) => has,
-        Err(e) => {
-            tracing::error!("DB error checking users: {}", e);
-            false
-        }
-    };
-    Json(SetupStatusResponse { completed }).into_response()
-}
-
-#[utoipa::path(
-    post,
-    path = "/api/setup",
-    request_body = SetupRequest,
-    responses(
-        (status = 200, description = "Setup completed and logged in"),
-        (status = 400, description = "Invalid request"),
-        (status = 403, description = "Setup already completed"),
-        (status = 500, description = "Internal server error")
-    )
-)]
-pub async fn setup_handler(
-    State(state): State<AppState>,
-    jar: CookieJar,
-    Json(payload): Json<SetupRequest>,
-) -> impl IntoResponse {
-    // 1. Check if setup is already completed (i.e., users exist)
-    match state.db.has_users().await {
-        Ok(true) => return (StatusCode::FORBIDDEN, "Setup already completed").into_response(),
-        Err(e) => {
-            tracing::error!("DB error checking users: {}", e);
-            return (StatusCode::INTERNAL_SERVER_ERROR, "Database error").into_response();
-        }
-        Ok(false) => {} // Proceed
-    }
-
-    // 2. Validate input
-    if payload.username.len() < 3 || payload.password.len() < 6 {
-        return (StatusCode::BAD_REQUEST, "Username must be at least 3 chars, password at least 6").into_response();
-    }
-
-    // 3. Create User
-    // Lower cost for faster login on low-power devices (MIPS routers etc.)
-    let password_hash = match bcrypt::hash(&payload.password, 6) {
-        Ok(h) => h,
-        Err(e) => {
-            tracing::error!("Failed to hash password: {}", e);
-            return (StatusCode::INTERNAL_SERVER_ERROR, "Failed to process password").into_response();
-        }
-    };
-
-    if let Err(e) = state.db.create_user(&payload.username, &password_hash).await {
-        tracing::error!("Failed to create user: {}", e);
-        return (StatusCode::INTERNAL_SERVER_ERROR, "Failed to create user").into_response();
-    }
-
-    // 4. Auto-Login (Create Session)
-    // Get the created user's ID
-    let user = match state.db.get_user_by_username(&payload.username).await {
-        Ok(Some(u)) => u,
-        Ok(None) => return (StatusCode::INTERNAL_SERVER_ERROR, "User created but not found").into_response(),
-        Err(e) => {
-            tracing::error!("DB error fetching new user: {}", e);
-            return (StatusCode::INTERNAL_SERVER_ERROR, "Database error").into_response();
-        }
-    };
-    let (user_id, _) = user;
-
-    // Create session token
-    let token: String = (0..32).map(|_| {
-        use rand::{distributions::Alphanumeric, Rng};
-        rand::thread_rng().sample(Alphanumeric) as char
-    }).collect();
-
-    // Default expiration: 1 day (since it's not "remember me")
-    let expires_in = 60 * 60 * 24;
-    let expires_at = time::OffsetDateTime::now_utc().unix_timestamp() + expires_in;
-
-    if let Err(e) = state.db.create_session(user_id, &token, expires_at).await {
-        tracing::error!("Failed to create session for new user: {}", e);
-        // Even if session fails, setup is technically complete, but login failed.
-        // We return OK but user will have to login manually.
-        return (StatusCode::OK, "Setup completed, please login").into_response();
-    }
-
-    let mut cookie = Cookie::build(("auth_token", token))
-        .path("/")
-        .http_only(true)
-        .same_site(SameSite::Lax)
-        .build();
-
-    cookie.set_max_age(Duration::seconds(expires_in));
-
-    (StatusCode::OK, jar.add(cookie), "Setup completed and logged in").into_response()
-}
+// This file is intentionally empty as setup is now handled by Server Functions.
+// See shared/src/server_fns/auth.rs

backend/src/main.rs

@@ -1,12 +1,11 @@
-mod db;
 mod diff;
 mod handlers;
 #[cfg(feature = "push-notifications")]
 mod push;
 mod rate_limit;
-mod scgi;
 mod sse;
-mod xmlrpc;
+
+use shared::xmlrpc;
 
 use axum::error_handling::HandleErrorLayer;
 use axum::{
@@ -26,7 +25,6 @@ use std::sync::Arc;
 use std::time::Duration;
 use tokio::sync::{broadcast, watch};
 use tower::ServiceBuilder;
-use tower_governor::GovernorLayer;
 use tower_http::{
     compression::{CompressionLayer, CompressionLevel},
     cors::CorsLayer,
@@ -42,34 +40,50 @@ pub struct AppState {
     pub tx: Arc<watch::Sender<Vec<Torrent>>>,
     pub event_bus: broadcast::Sender<AppEvent>,
     pub scgi_socket_path: String,
-    pub db: db::Db,
+    pub db: shared::db::Db,
     #[cfg(feature = "push-notifications")]
     pub push_store: push::PushSubscriptionStore,
+    pub notify_poll: Arc<tokio::sync::Notify>,
 }
 
 async fn auth_middleware(
-    state: axum::extract::State<AppState>,
+    _state: axum::extract::State<AppState>,
     jar: CookieJar,
     request: Request<Body>,
     next: Next,
 ) -> Result<Response, StatusCode> {
-    // Skip auth for public paths
+    // Skip auth for public server functions
     let path = request.uri().path();
-    if path.starts_with("/api/auth/login")
-       || path.starts_with("/api/auth/check") // Used by frontend to decide where to go
-       || path.starts_with("/api/setup")
+    if path.starts_with("/api/server_fns/Login") 
+       || path.starts_with("/api/server_fns/login")
+       || path.starts_with("/api/server_fns/GetSetupStatus")
+       || path.starts_with("/api/server_fns/get_setup_status")
+       || path.starts_with("/api/server_fns/Setup")
+       || path.starts_with("/api/server_fns/setup")
+       || path.starts_with("/api/internal/")
        || path.starts_with("/swagger-ui")
        || path.starts_with("/api-docs")
-       || !path.starts_with("/api/") // Allow static files (frontend)
+       || !path.starts_with("/api/") 
     {
         return Ok(next.run(request).await);
     }
 
+
     // Check token
     if let Some(token) = jar.get("auth_token") {
-        match state.db.get_session_user(token.value()).await {
-            Ok(Some(_)) => return Ok(next.run(request).await),
-            _ => {} // Invalid
+        use jsonwebtoken::{decode, Validation, DecodingKey};
+        use shared::server_fns::auth::Claims;
+
+        let secret = std::env::var("JWT_SECRET").unwrap_or_else(|_| "secret".to_string());
+        let validation = Validation::default();
+        
+        match decode::<Claims>(
+            token.value(),
+            &DecodingKey::from_secret(secret.as_bytes()),
+            &validation,
+        ) {
+            Ok(_) => return Ok(next.run(request).await),
+            Err(_) => {} // Invalid token
         }
     }
 
@@ -101,28 +115,8 @@ struct Args {
 }
 
 #[cfg(feature = "swagger")]
-#[cfg(feature = "push-notifications")]
 #[derive(OpenApi)]
 #[openapi(
-    paths(
-        handlers::add_torrent_handler,
-        handlers::handle_torrent_action,
-        handlers::get_version_handler,
-        handlers::get_files_handler,
-        handlers::get_peers_handler,
-        handlers::get_trackers_handler,
-        handlers::set_file_priority_handler,
-        handlers::set_label_handler,
-        handlers::get_global_limit_handler,
-        handlers::set_global_limit_handler,
-        handlers::get_push_public_key_handler,
-        handlers::subscribe_push_handler,
-        handlers::auth::login_handler,
-        handlers::auth::logout_handler,
-        handlers::auth::check_auth_handler,
-        handlers::setup::setup_handler,
-        handlers::setup::get_setup_status_handler
-    ),
     components(
         schemas(
             shared::AddTorrentRequest,
@@ -135,12 +129,6 @@ struct Args {
             shared::SetFilePriorityRequest,
             shared::SetLabelRequest,
             shared::GlobalLimitRequest,
-            push::PushSubscription,
-            push::PushKeys,
-            handlers::auth::LoginRequest,
-            handlers::setup::SetupRequest,
-            handlers::setup::SetupStatusResponse,
-            handlers::auth::UserResponse
         )
     ),
     tags(
@@ -149,50 +137,6 @@ struct Args {
 )]
 struct ApiDoc;
 
-#[cfg(feature = "swagger")]
-#[cfg(not(feature = "push-notifications"))]
-#[derive(OpenApi)]
-#[openapi(
-    paths(
-        handlers::add_torrent_handler,
-        handlers::handle_torrent_action,
-        handlers::get_version_handler,
-        handlers::get_files_handler,
-        handlers::get_peers_handler,
-        handlers::get_trackers_handler,
-        handlers::set_file_priority_handler,
-        handlers::set_label_handler,
-        handlers::get_global_limit_handler,
-        handlers::set_global_limit_handler,
-        handlers::auth::login_handler,
-        handlers::auth::logout_handler,
-        handlers::auth::check_auth_handler,
-        handlers::setup::setup_handler,
-        handlers::setup::get_setup_status_handler
-    ),
-    components(
-        schemas(
-            shared::AddTorrentRequest,
-            shared::TorrentActionRequest,
-            shared::Torrent,
-            shared::TorrentStatus,
-            shared::TorrentFile,
-            shared::TorrentPeer,
-            shared::TorrentTracker,
-            shared::SetFilePriorityRequest,
-            shared::SetLabelRequest,
-            shared::GlobalLimitRequest,
-            handlers::auth::LoginRequest,
-            handlers::setup::SetupRequest,
-            handlers::setup::SetupStatusResponse,
-            handlers::auth::UserResponse
-        )
-    ),
-    tags(
-        (name = "vibetorrent", description = "VibeTorrent API")
-    )
-)]
-struct ApiDoc;
 
 #[tokio::main]
 async fn main() {
@@ -212,19 +156,9 @@ async fn main() {
 
     // Initialize Database
     tracing::info!("Connecting to database: {}", args.db_url);
-    // Ensure the db file exists if it's sqlite
-    if args.db_url.starts_with("sqlite:") {
-        let path = args.db_url.trim_start_matches("sqlite:");
-        if !std::path::Path::new(path).exists() {
-            tracing::info!("Database file not found, creating: {}", path);
-            match std::fs::File::create(path) {
-                Ok(_) => tracing::info!("Created empty database file"),
-                Err(e) => tracing::error!("Failed to create database file: {}", e),
-            }
-        }
-    }
+    // Redundant manual creation removed, shared::db handles it
 
-    let db: db::Db = match db::Db::new(&args.db_url).await {
+    let db: shared::db::Db = match shared::db::Db::new(&args.db_url).await {
         Ok(db) => db,
         Err(e) => {
             tracing::error!("Failed to connect to database: {}", e);
@@ -292,6 +226,18 @@ async fn main() {
     tracing::info!("Socket: {}", args.socket);
     tracing::info!("Port: {}", args.port);
 
+    // Force linking of server functions from shared crate for registration on Mac
+    {
+        use shared::server_fns::auth::*;
+        let _ = get_setup_status;
+        let _ = setup;
+        let _ = login;
+        let _ = logout;
+        let _ = get_user;
+        tracing::info!("Server functions linked successfully.");
+    }
+
+
     // ... rest of the main function ...
     // Startup Health Check
     let socket_path = std::path::Path::new(&args.socket);
@@ -334,7 +280,9 @@ async fn main() {
     };
 
     #[cfg(not(feature = "push-notifications"))]
-    let push_store = ();
+    let _push_store = ();
+
+    let notify_poll = Arc::new(tokio::sync::Notify::new());
 
     let app_state = AppState {
         tx: tx.clone(),
@@ -343,6 +291,7 @@ async fn main() {
         db: db.clone(),
         #[cfg(feature = "push-notifications")]
         push_store,
+        notify_poll: notify_poll.clone(),
     };
 
     // Spawn background task to poll rTorrent
@@ -351,6 +300,7 @@ async fn main() {
     let socket_path = args.socket.clone(); // Clone for background task
     #[cfg(feature = "push-notifications")]
     let push_store_clone = app_state.push_store.clone();
+    let notify_poll_clone = notify_poll.clone();
 
     tokio::spawn(async move {
         let client = xmlrpc::RtorrentClient::new(&socket_path);
@@ -364,7 +314,7 @@ async fn main() {
             let loop_interval = if active_clients > 0 {
                 Duration::from_secs(1)
             } else {
-                Duration::from_secs(30)
+                Duration::from_secs(60)
             };
 
             // 1. Fetch Torrents
@@ -402,10 +352,7 @@ async fn main() {
 
                     match diff::diff_torrents(&previous_torrents, &new_torrents) {
                         diff::DiffResult::FullUpdate => {
-                            let _ = event_bus_tx.send(AppEvent::FullList {
-                                torrents: new_torrents.clone(),
-                                timestamp: now,
-                            });
+                            let _ = event_bus_tx.send(AppEvent::FullList(new_torrents.clone(), now));
                         }
                         diff::DiffResult::Partial(updates) => {
                             for update in updates {
@@ -438,8 +385,13 @@ async fn main() {
 
                     previous_torrents = new_torrents;
 
-                    // Success case: sleep for the determined interval
-                    tokio::time::sleep(loop_interval).await;
+                    // Success case: wait for the determined interval OR a wakeup notification
+                    tokio::select! {
+                        _ = tokio::time::sleep(loop_interval) => {},
+                        _ = notify_poll_clone.notified() => {
+                            tracing::debug!("Background loop awakened by new client connection");
+                        }
+                    }
                 }
                 Err(e) => {
                     tracing::error!("Error fetching torrents in background: {}", e);
@@ -477,53 +429,33 @@ async fn main() {
     #[cfg(feature = "swagger")]
     let app = app.merge(SwaggerUi::new("/swagger-ui").url("/api-docs/openapi.json", ApiDoc::openapi()));
 
-    // Setup & Auth Routes
+    // Setup & Auth Routes (cookie-based, stay as REST)
+    // Setup & Auth Routes (cookie-based, stay as REST)
+    let scgi_path_for_ctx = args.socket.clone();
+    let db_for_ctx = db.clone();
     let app = app
-        .route("/api/setup/status", get(handlers::setup::get_setup_status_handler))
-        .route("/api/setup", post(handlers::setup::setup_handler))
-        .route(
-            "/api/auth/login",
-            post(handlers::auth::login_handler).layer(GovernorLayer::new(Arc::new(
-                rate_limit::get_login_rate_limit_config(),
-            ))),
-        )
-        .route("/api/auth/logout", post(handlers::auth::logout_handler))
-        .route("/api/auth/check", get(handlers::auth::check_auth_handler))
-        // App Routes
         .route("/api/events", get(sse::sse_handler))
-        .route("/api/torrents/add", post(handlers::add_torrent_handler))
-        .route(
-            "/api/torrents/action",
-            post(handlers::handle_torrent_action),
-        )
-        .route("/api/system/version", get(handlers::get_version_handler))
-        .route(
-            "/api/torrents/{hash}/files",
-            get(handlers::get_files_handler),
-        )
-        .route(
-            "/api/torrents/{hash}/peers",
-            get(handlers::get_peers_handler),
-        )
-        .route(
-            "/api/torrents/{hash}/trackers",
-            get(handlers::get_trackers_handler),
-        )
-        .route(
-            "/api/torrents/files/priority",
-            post(handlers::set_file_priority_handler),
-        )
-        .route("/api/torrents/label", post(handlers::set_label_handler))
-        .route(
-            "/api/settings/global-limits",
-            get(handlers::get_global_limit_handler).post(handlers::set_global_limit_handler),
-        )
-        .fallback(handlers::static_handler); // Serve static files for everything else
-
-    #[cfg(feature = "push-notifications")]
-    let app = app
-        .route("/api/push/public-key", get(handlers::get_push_public_key_handler))
-        .route("/api/push/subscribe", post(handlers::subscribe_push_handler));
+        .route("/api/internal/torrent-finished", post(handlers::notifications::torrent_finished_handler))
+        .route("/api/server_fns/{*fn_name}", post({
+            let scgi_path = scgi_path_for_ctx.clone();
+            let db = db_for_ctx.clone();
+            move |req: Request<Body>| {
+                let scgi_path = scgi_path.clone();
+                let db = db.clone();
+                leptos_axum::handle_server_fns_with_context(
+                    move || {
+                        leptos::context::provide_context(shared::ServerContext {
+                            scgi_socket_path: scgi_path.clone(),
+                        });
+                        leptos::context::provide_context(shared::DbContext {
+                            db: db.clone(),
+                        });
+                    },
+                    req,
+                )
+            }
+        }))
+        .fallback(handlers::static_handler);
 
     let app = app
         .layer(middleware::from_fn_with_state(app_state.clone(), auth_middleware))

backend/src/push.rs

@@ -7,7 +7,7 @@ use web_push::{
 };
 use futures::StreamExt;
 
-use crate::db::Db;
+use shared::db::Db;
 
 #[derive(Debug, Clone, Serialize, Deserialize, ToSchema)]
 pub struct PushSubscription {
@@ -191,11 +191,21 @@ pub async fn send_push_notification(
                                                 tracing::debug!("Push notification sent to: {}", subscription.endpoint);
                                             }
                                             Err(e) => {
-                                                tracing::error!("Failed to send push notification to {}: {}", subscription.endpoint, e);
+                                                let err_msg = format!("{:?}", e);
+                                                tracing::error!("Delivery failed for {}: {}", subscription.endpoint, err_msg);
+                                                // Always remove on delivery failure (Gone, Unauthorized, etc.)
+                                                tracing::info!("Removing problematic subscription after delivery failure: {}", subscription.endpoint);
+                                                let _ = store.remove_subscription(&subscription.endpoint).await;
                                             }
                                         }
                                     }
-                                    Err(e) => tracing::error!("Failed to build push message: {}", e),
+                                    Err(e) => {
+                                        let err_msg = format!("{:?}", e);
+                                        tracing::error!("Encryption/Build failed for {}: {}", subscription.endpoint, err_msg);
+                                        // Always remove on encryption failure
+                                        tracing::info!("Removing problematic subscription after encryption failure: {}", subscription.endpoint);
+                                        let _ = store.remove_subscription(&subscription.endpoint).await;
+                                    }
                                 }
                             }
                             Err(e) => tracing::error!("Failed to build VAPID signature: {}", e),

backend/src/rate_limit.rs

@@ -1,16 +1,3 @@
-use governor::clock::QuantaInstant;
-use governor::middleware::NoOpMiddleware;
-use tower_governor::governor::GovernorConfig;
-use tower_governor::governor::GovernorConfigBuilder;
-use tower_governor::key_extractor::SmartIpKeyExtractor;
-
-pub fn get_login_rate_limit_config() -> GovernorConfig<SmartIpKeyExtractor, NoOpMiddleware<QuantaInstant>> {
-    // 5 yanlış denemeden sonra bloklanır.
-    // Her yeni hak için 60 saniye (1 dakika) bekleme süresi.
-    GovernorConfigBuilder::default()
-        .key_extractor(SmartIpKeyExtractor)
-        .per_second(60) 
-        .burst_size(5)
-        .finish()
-        .unwrap()
-}
+// This file can be removed or repurposed if rate limiting is needed for other endpoints.
+// Login rate limiting is now handled within the server function or needs to be reimplemented
+// as a middleware for the server function endpoint.

backend/src/sse.rs

@@ -1,13 +1,15 @@
-use crate::xmlrpc::{
+use shared::xmlrpc::{
     parse_i64_response, parse_multicall_response, RpcParam, RtorrentClient, XmlRpcError,
 };
 use crate::AppState;
 use axum::extract::State;
 use axum::response::sse::{Event, Sse};
-use futures::stream::{self, Stream};
+use futures::stream::{self};
 use shared::{AppEvent, GlobalStats, Torrent, TorrentStatus};
 use std::convert::Infallible;
 use tokio_stream::StreamExt;
+use axum::response::IntoResponse;
+use base64::{Engine as _, engine::general_purpose::STANDARD as BASE64};
 
 // Field definitions to keep query and parser in sync
 mod fields {
@@ -194,7 +196,10 @@ pub async fn fetch_global_stats(client: &RtorrentClient) -> Result<GlobalStats,
 
 pub async fn sse_handler(
     State(state): State<AppState>,
-) -> Sse<impl Stream<Item = Result<Event, Infallible>>> {
+) -> impl IntoResponse {
+    // Notify background worker to wake up and poll immediately
+    state.notify_poll.notify_one();
+
     // Get initial value synchronously (from the watch channel's current state)
     let initial_rx = state.tx.subscribe();
     let initial_torrents = initial_rx.borrow().clone();
@@ -205,13 +210,10 @@ pub async fn sse_handler(
             .unwrap()
             .as_secs();
 
-        let event_data = AppEvent::FullList {
-            torrents: initial_torrents,
-            timestamp,
-        };
+        let event_data = AppEvent::FullList(initial_torrents, timestamp);
 
-        match serde_json::to_string(&event_data) {
-            Ok(json) => Event::default().data(json),
+        match rmp_serde::to_vec(&event_data) {
+            Ok(bytes) => Event::default().data(BASE64.encode(bytes)),
             Err(_) => Event::default().comment("init_error"),
         }
     };
@@ -223,10 +225,10 @@ pub async fn sse_handler(
     let rx = state.event_bus.subscribe();
     let update_stream = stream::unfold(rx, |mut rx| async move {
         match rx.recv().await {
-            Ok(event) => match serde_json::to_string(&event) {
-                Ok(json) => Some((Ok::<Event, Infallible>(Event::default().data(json)), rx)),
+            Ok(event) => match rmp_serde::to_vec(&event) {
+                Ok(bytes) => Some((Ok::<Event, Infallible>(Event::default().data(BASE64.encode(bytes))), rx)),
                 Err(e) => {
-                    tracing::warn!("Failed to serialize SSE event: {}", e);
+                    tracing::warn!("Failed to serialize SSE event (MessagePack): {}", e);
                     Some((
                         Ok::<Event, Infallible>(Event::default().comment("error")),
                         rx,
@@ -241,6 +243,11 @@ pub async fn sse_handler(
         }
     });
 
-    Sse::new(initial_stream.chain(update_stream))
-        .keep_alive(axum::response::sse::KeepAlive::default())
-}
+    let sse = Sse::new(initial_stream.chain(update_stream))
+        .keep_alive(axum::response::sse::KeepAlive::default());
+
+    (
+        [("content-type", "text/event-stream")],
+        sse
+    )
+}

frontend/.gitignore

@@ -0,0 +1 @@
+node_modules/

frontend/Cargo.toml

@@ -7,27 +7,39 @@ edition = "2021"
 crate-type = ["cdylib", "rlib"]
 
 [dependencies]
-leptos = { version = "0.6", features = ["csr"] }
-leptos_router = { version = "0.6", features = ["csr"] }
+leptos = { version = "0.8.15", features = ["csr", "msgpack", "nightly"] }
+leptos_router = { version = "0.8.11" }
 
 console_error_panic_hook = "0.1"
 console_log = "1"
 log = "0.4"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
-gloo-net = "0.5"
+gloo-net = "0.6"
 gloo-timers = { version = "0.3", features = ["futures"] }
+gloo-console = "0.3"
 wasm-bindgen = "0.2"
 wasm-bindgen-futures = "0.4"
 uuid = { version = "1", features = ["v4", "js"] }
 futures = "0.3"
 chrono = { version = "0.4", features = ["serde", "wasm-bindgen"] }
-web-sys = { version = "0.3", features = ["HtmlDivElement", "HtmlUListElement", "HtmlLiElement", "HtmlAnchorElement", "MouseEvent", "Event", "Window", "Document", "Element", "DomTokenList", "CssStyleDeclaration", "Storage", "TouchEvent", "TouchList", "Touch", "Navigator", "Notification", "NotificationOptions", "NotificationPermission", "ServiceWorkerContainer", "ServiceWorkerRegistration", "PushManager", "PushSubscription", "PushSubscriptionOptions", "PushSubscriptionOptionsInit", "HtmlDetailsElement"] }
-shared = { path = "../shared" }
+web-sys = { version = "0.3", features = ["HtmlDivElement", "HtmlUListElement", "HtmlLiElement", "HtmlAnchorElement", "MouseEvent", "Event", "Window", "Document", "Element", "DomTokenList", "CssStyleDeclaration", "Storage", "TouchEvent", "TouchList", "Touch", "Navigator", "Notification", "NotificationOptions", "NotificationPermission", "ServiceWorkerContainer", "ServiceWorkerRegistration", "PushManager", "PushSubscription", "PushSubscriptionOptions", "PushSubscriptionOptionsInit", "HtmlDetailsElement", "HtmlInputElement", "HtmlFormElement", "HtmlDialogElement", "ProgressEvent"] }
+shared = { path = "../shared", features = ["hydrate"] }
 tailwind_fuse = "0.3.2"
 js-sys = "0.3.85"
 base64 = "0.22.1"
 serde-wasm-bindgen = "0.6.5"
-leptos-use = "0.13"
-codee = "0.2"
+leptos-use = { version = "0.16", features = ["storage"] }
+codee = "0.3"
 thiserror = "2.0"
+rmp-serde = "1.3"
+struct-patch = "0.5"
+
+# Rust/UI Components
+leptos_ui = "0.3"
+tw_merge = "0.1"
+strum = { version = "0.26", features = ["derive"] }
+icons = { version = "0.18.0", features = ["leptos"] }
+
+[package.metadata.leptos]
+tailwind-input-file = "input.css"

frontend/index.html

@@ -1,101 +1,103 @@
 <!doctype html>
 <html>
-    <head>
-        <meta charset="utf-8" />
-        <meta
-            name="viewport"
-            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
-        />
-        <title>VibeTorrent</title>
 
-        <!-- PWA & Mobile Capable -->
-        <meta name="mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-        <meta name="apple-mobile-web-app-title" content="VibeTorrent" />
-        <meta name="theme-color" content="#111827" />
-        <link rel="manifest" href="manifest.json" />
-        <link rel="icon" type="image/png" href="icon-192.png" />
-        <link rel="apple-touch-icon" href="icon-192.png" />
-        <link rel="apple-touch-icon" sizes="192x192" href="icon-192.png" />
-        <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport"
+        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
+    <title>VibeTorrent</title>
 
-        <!-- Trunk Assets -->
-        <link data-trunk rel="rust" href="Cargo.toml" data-wasm-opt="0" />
-        <link data-trunk rel="css" href="public/tailwind.css" />
-        <link data-trunk rel="copy-file" href="manifest.json" />
-        <link data-trunk rel="copy-file" href="icon-192.png" />
-        <link data-trunk rel="copy-file" href="icon-512.png" />
-        <link data-trunk rel="copy-file" href="sw.js" />
-        <script>
-            (function () {
-                var localTheme = localStorage.getItem("vibetorrent_theme");
-                var t = localTheme || "dark";
-                if (t === "Amoled") t = "black";
-                if (t === "Light") t = "light";
-                if (t === "Dark" || t === "Midnight") t = "dark";
+    <!-- PWA & Mobile Capable -->
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="apple-mobile-web-app-title" content="VibeTorrent" />
+    <meta name="theme-color" content="#111827" />
+    <link rel="manifest" href="manifest.json" />
+    <link rel="icon" type="image/png" href="icon-192.png" />
+    <link rel="apple-touch-icon" href="icon-192.png" />
+    <link rel="apple-touch-icon" sizes="192x192" href="icon-192.png" />
+    <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
 
-                var theme = t.toLowerCase();
-                document.documentElement.setAttribute("data-theme", theme);
-                if (!localTheme) {
-                    localStorage.setItem("vibetorrent_theme", "dark");
-                }
+    <!-- Trunk Assets -->
+    <script data-trunk rel="rust" src="Cargo.toml" data-wasm-opt="0" data-preload="false"></script>
+    <link data-trunk rel="css" href="public/tailwind.css" />
+    <link data-trunk rel="copy-file" href="manifest.json" />
+    <link data-trunk rel="copy-file" href="icon-192.png" />
+    <link data-trunk rel="copy-file" href="icon-512.png" />
+    <link data-trunk rel="copy-file" href="public/lock_scroll.js" />
+    <link data-trunk rel="copy-file" href="sw.js" />
+    <script>
+        (function () {
+            var localTheme = localStorage.getItem("vibetorrent_theme");
+            var t = localTheme || "dark";
+            if (t === "Amoled") t = "black";
+            if (t === "Light") t = "light";
+            if (t === "Dark" || t === "Midnight") t = "dark";
 
-                var meta = document.querySelector('meta[name="theme-color"]');
-                if (meta) {
-                    var colorMap = {
-                        light: "#ffffff",
-                        cupcake: "#faf7f5",
-                        bumblebee: "#ffffff",
-                        emerald: "#ffffff",
-                        corporate: "#ffffff",
-                        synthwave: "#2d1b69",
-                        retro: "#ece3ca",
-                        cyberpunk: "#ffee00",
-                        valentine: "#f0d6e8",
-                        halloween: "#212121",
-                        garden: "#e9e7e7",
-                        forest: "#171212",
-                        aqua: "#345da7",
-                        lofi: "#ffffff",
-                        pastel: "#ffffff",
-                        fantasy: "#ffffff",
-                        wireframe: "#ffffff",
-                        black: "#000000",
-                        luxury: "#09090b",
-                        dracula: "#282a36",
-                        cmyk: "#ffffff",
-                        autumn: "#8C0327",
-                        business: "#202020",
-                        acid: "#fafafa",
-                        lemonade: "#F1F8E8",
-                        night: "#0f1729",
-                        coffee: "#20161f",
-                        winter: "#ffffff",
-                        dark: "#1d232a",
-                    };
-                    var color = colorMap[theme] || "#1d232a";
-                    meta.setAttribute("content", color);
-                }
-            })();
-        </script>
-    </head>
+            var theme = t.toLowerCase();
+            document.documentElement.setAttribute("data-theme", theme);
+            // Shadcn dark mode CSS değişkenleri .dark class ile çalışıyor
+            var darkThemes = ["dark", "black", "night", "coffee", "luxury", "business", "dracula", "halloween", "forest", "synthwave", "dim", "nord", "sunset", "cyberpunk", "abyss"];
+            if (darkThemes.indexOf(theme) !== -1) {
+                document.documentElement.classList.add("dark");
+            } else {
+                document.documentElement.classList.remove("dark");
+            }
+            if (!localTheme) {
+                localStorage.setItem("vibetorrent_theme", "dark");
+            }
 
-    <body style="cursor: pointer;">
-        <div
-            id="app-loading"
-            style="
+            var meta = document.querySelector('meta[name="theme-color"]');
+            if (meta) {
+                var colorMap = {
+                    light: "#ffffff",
+                    cupcake: "#faf7f5",
+                    bumblebee: "#ffffff",
+                    emerald: "#ffffff",
+                    corporate: "#ffffff",
+                    synthwave: "#2d1b69",
+                    retro: "#ece3ca",
+                    cyberpunk: "#ffee00",
+                    valentine: "#f0d6e8",
+                    halloween: "#212121",
+                    garden: "#e9e7e7",
+                    forest: "#171212",
+                    aqua: "#345da7",
+                    lofi: "#ffffff",
+                    pastel: "#ffffff",
+                    fantasy: "#ffffff",
+                    wireframe: "#ffffff",
+                    black: "#000000",
+                    luxury: "#09090b",
+                    dracula: "#282a36",
+                    cmyk: "#ffffff",
+                    autumn: "#8C0327",
+                    business: "#202020",
+                    acid: "#fafafa",
+                    lemonade: "#F1F8E8",
+                    night: "#0f1729",
+                    coffee: "#20161f",
+                    winter: "#ffffff",
+                    dark: "#1d232a",
+                };
+                var color = colorMap[theme] || "#1d232a";
+                meta.setAttribute("content", color);
+            }
+        })();
+    </script>
+</head>
+
+<body style="cursor: pointer;">
+    <div id="app-loading" style="
                 display: flex;
                 flex-direction: column;
                 justify-content: center;
                 align-items: center;
                 height: 100vh;
                 font-family: sans-serif;
-            "
-        >
-            <div
-                id="app-loading-spinner"
-                style="
+            ">
+        <div id="app-loading-spinner" style="
                     width: 40px;
                     height: 40px;
                     border: 3px solid currentColor;
@@ -103,21 +105,15 @@
                     border-radius: 50%;
                     animation: spin 0.8s linear infinite;
                     opacity: 0.5;
-                "
-            ></div>
-            <div
-                id="app-loading-error"
-                style="display: none; text-align: center; margin-top: 20px; padding: 0 20px"
-            >
-                <p style="color: #ef4444; font-weight: bold; margin-bottom: 8px">
-                    Uygulama yüklenemedi
-                </p>
-                <p style="font-size: 14px; opacity: 0.7">
-                    Bağlantınız yavaş olabilir veya bir sistem hatası oluşmuş olabilir.
-                </p>
-                <button
-                    onclick="location.reload()"
-                    style="
+                "></div>
+        <div id="app-loading-error" style="display: none; text-align: center; margin-top: 20px; padding: 0 20px">
+            <p style="color: #ef4444; font-weight: bold; margin-bottom: 8px">
+                Uygulama yüklenemedi
+            </p>
+            <p style="font-size: 14px; opacity: 0.7">
+                Bağlantınız yavaş olabilir veya bir sistem hatası oluşmuş olabilir.
+            </p>
+            <button onclick="location.reload()" style="
                         margin-top: 16px;
                         padding: 8px 16px;
                         background: #3b82f6;
@@ -126,104 +122,105 @@
                         border-radius: 6px;
                         cursor: pointer;
                         font-weight: 500;
-                    "
-                >
-                    Sayfayı Yenile
-                </button>
-            </div>
+                    ">
+                Sayfayı Yenile
+            </button>
         </div>
-        <style>
-            @keyframes spin {
-                to {
-                    transform: rotate(360deg);
+    </div>
+    <style>
+        @keyframes spin {
+            to {
+                transform: rotate(360deg);
+            }
+        }
+
+        body.app-loaded #app-loading {
+            display: none !important;
+        }
+
+        /* iOS Safari Click Fixes */
+        body {
+            cursor: pointer;
+            -webkit-tap-highlight-color: transparent;
+        }
+
+        summary {
+            list-style: none;
+        }
+
+        summary::-webkit-details-marker {
+            display: none;
+        }
+    </style>
+
+    <script>
+        // App loading timeout handler
+        (function () {
+            var timeout = setTimeout(function () {
+                if (!document.body.classList.contains("app-loaded")) {
+                    var spinner = document.getElementById("app-loading-spinner");
+                    var error = document.getElementById("app-loading-error");
+                    if (spinner) spinner.style.display = "none";
+                    if (error) error.style.display = "block";
                 }
-            }
+            }, 15000); // 15 seconds timeout
 
-            body.app-loaded #app-loading {
-                display: none !important;
-            }
-
-            /* iOS Safari Click Fixes */
-            body {
-                cursor: pointer;
-                -webkit-tap-highlight-color: transparent;
-            }
-
-            summary {
-                list-style: none;
-            }
-            summary::-webkit-details-marker {
-                display: none;
-            }
-        </style>
-
-        <script>
-            // App loading timeout handler
-            (function () {
-                var timeout = setTimeout(function () {
-                    if (!document.body.classList.contains("app-loaded")) {
-                        var spinner = document.getElementById("app-loading-spinner");
-                        var error = document.getElementById("app-loading-error");
-                        if (spinner) spinner.style.display = "none";
-                        if (error) error.style.display = "block";
-                    }
-                }, 15000); // 15 seconds timeout
-
-                // Clean up timeout if app loads
-                var observer = new MutationObserver(function (mutations) {
-                    mutations.forEach(function (mutation) {
-                        if (
-                            mutation.attributeName === "class" &&
-                            document.body.classList.contains("app-loaded")
-                        ) {
-                            clearTimeout(timeout);
-                            observer.disconnect();
-                        }
-                    });
-                });
-                observer.observe(document.body, { attributes: true });
-            })();
-        </script>
-        
-        <!-- Service Worker Registration & PWA Setup -->
-        <script>
-            // Global Dropdown Closer for iOS/Mobile
-            document.addEventListener('click', function(event) {
-                const details = document.querySelectorAll('details[open]');
-                details.forEach(detail => {
-                    // Eğer tıklanan yer bu details'in içinde değilse kapat
-                    if (!detail.contains(event.target)) {
-                        detail.removeAttribute('open');
+            // Clean up timeout if app loads
+            var observer = new MutationObserver(function (mutations) {
+                mutations.forEach(function (mutation) {
+                    if (
+                        mutation.attributeName === "class" &&
+                        document.body.classList.contains("app-loaded")
+                    ) {
+                        clearTimeout(timeout);
+                        observer.disconnect();
                     }
                 });
-            }, true); // Use capture phase for better mobile support
+            });
+            observer.observe(document.body, { attributes: true });
+        })();
+    </script>
 
-            if ("serviceWorker" in navigator) {
-                window.addEventListener("load", () => {
-                    navigator.serviceWorker
-                        .register("/sw.js")
-                        .then((registration) => {
-                            console.log("✅ Service Worker registered:", registration);
-                            
-                            // Request notification permission after a delay (better UX)
-                            setTimeout(() => {
-                                if ("Notification" in window && Notification.permission === "default") {
-                                    // Only request if user hasn't decided yet
-                                    const shouldRequest = localStorage.getItem("vibetorrent_notification_prompt_shown");
-                                    if (!shouldRequest) {
-                                        Notification.requestPermission().then((permission) => {
-                                            console.log("Notification permission:", permission);
-                                            localStorage.setItem("vibetorrent_notification_prompt_shown", "true");
-                                        });
-                                    }
+    <!-- Service Worker Registration & PWA Setup -->
+    <script>
+        // Global Dropdown Closer for iOS/Mobile
+        document.addEventListener('click', function (event) {
+            const details = document.querySelectorAll('details[open]');
+            details.forEach(detail => {
+                // Eğer tıklanan yer bu details'in içinde değilse kapat
+                if (!detail.contains(event.target)) {
+                    detail.removeAttribute('open');
+                }
+            });
+        }, true); // Use capture phase for better mobile support
+
+        if ("serviceWorker" in navigator) {
+            window.addEventListener("load", () => {
+                navigator.serviceWorker
+                    .register("/sw.js")
+                    .then((registration) => {
+                        console.log("✅ Service Worker registered:", registration);
+
+                        // Request notification permission after a delay (better UX)
+                        setTimeout(() => {
+                            if ("Notification" in window && Notification.permission === "default") {
+                                // Only request if user hasn't decided yet
+                                const shouldRequest = localStorage.getItem("vibetorrent_notification_prompt_shown");
+                                if (!shouldRequest) {
+                                    Notification.requestPermission().then((permission) => {
+                                        console.log("Notification permission:", permission);
+                                        localStorage.setItem("vibetorrent_notification_prompt_shown", "true");
+                                    });
                                 }
-                            }, 3000); // Wait 3 seconds before asking
-                        })
-                        .catch((error) => {
-                            console.warn("⚠️ Service Worker registration failed:", error);
-                        });
-                });
-            }
-        </script>
-    </body>
-</html>
+                            }
+                        }, 3000); // Wait 3 seconds before asking
+                    })
+                    .catch((error) => {
+                        console.warn("⚠️ Service Worker registration failed:", error);
+                    });
+            });
+        }
+    </script>
+</body>
+
+</html>

frontend/input.css

@@ -1,32 +1,91 @@
 @import "tailwindcss";
-@config "./tailwind.config.js";
+@import "tw-animate-css";
 
-@plugin "daisyui" {
-    themes:
-        light, dark, dim, nord, cupcake, dracula, cyberpunk, emerald, sunset,
-        abyss;
+
+:root {
+  --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: 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: 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);
+  --radius-xl: calc(var(--radius) + 4px);
 }
 
 @layer base {
-    html,
-    body {
-        @apply min-h-dvh w-full overflow-hidden bg-base-100 text-base-content overscroll-y-none;
-    }
-}
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
 
-/* Fix for iOS click/blur events */
-@media (hover: none) {
-    body {
-        cursor: pointer;
-    }
-}
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
 
-/* Remove default focus outline/tap highlight */
-* {
-    -webkit-tap-highlight-color: transparent;
-    outline: none !important;
-}
-
-:focus {
-    outline: none !important;
+  dialog {
+    margin: auto;
+  }
 }

frontend/package.json

@@ -1,21 +1,29 @@
 {
-  "name": "frontend",
-  "version": "1.0.0",
+  "author": "",
+  "dependencies": {
+    "@tailwindcss/cli": "^4.1.18",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss-animate": "^1.0.7",
+    "tw-animate-css": "^1.4.0"
+  },
   "description": "",
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.18",
+    "autoprefixer": "^10.4.23",
+    "postcss": "^8.5.6",
+    "postcss-cli": "^11.0.1",
+    "postcss-preset-env": "^10.1.3",
+    "tailwindcss": "^4.1.18"
+  },
+  "keywords": [],
+  "license": "ISC",
   "main": "tailwind.config.js",
+  "name": "frontend",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "autoprefixer": "^10.4.23",
-    "daisyui": "^5.5.1-beta.2",
-    "postcss": "^8.5.6",
-    "tailwindcss": "^4.1.18"
-  },
-  "dependencies": {
-    "@tailwindcss/cli": "^4.1.18"
-  }
+  "type": "module",
+  "version": "1.0.0"
 }

frontend/postcss.config.cjs

@@ -0,0 +1,15 @@
+module.exports = {
+    plugins: {
+        "@tailwindcss/postcss": {},
+        "postcss-preset-env": {
+            features: {
+                "nesting-rules": true,
+            },
+            browsers: [
+                "last 2 versions",
+                "iOS >= 15",
+                "Safari >= 15",
+            ],
+        },
+    },
+};

frontend/public/lock_scroll.js

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

frontend/src/api/mod.rs

@@ -1,5 +1,4 @@
 use gloo_net::http::Request;
-use shared::{AddTorrentRequest, TorrentActionRequest};
 use thiserror::Error;
 
 #[derive(Debug, Error)]
@@ -14,6 +13,8 @@ pub enum ApiError {
     Unauthorized,
     #[error("Too many requests")]
     RateLimited,
+    #[error("Server function error: {0}")]
+    ServerFn(String),
 }
 
 fn base_url() -> String {
@@ -130,37 +131,32 @@ pub mod settings {
     use shared::GlobalLimitRequest;
 
     pub async fn set_global_limits(req: &GlobalLimitRequest) -> Result<(), ApiError> {
-        Request::post(&format!("{}/settings/global-limits", base_url()))
-            .json(req)
-            .map_err(|_| ApiError::Network)?
-            .send()
-            .await
-            .map_err(|_| ApiError::Network)?;
-        Ok(())
+        shared::server_fns::settings::set_global_limits(
+            req.max_download_rate,
+            req.max_upload_rate,
+        )
+        .await
+        .map_err(|e| ApiError::ServerFn(e.to_string()))
     }
 }
 
 pub mod push {
     use super::*;
-    use crate::store::PushSubscriptionData;
 
     pub async fn get_public_key() -> Result<String, ApiError> {
-        let resp = Request::get(&format!("{}/push/public-key", base_url()))
-            .send()
+        shared::server_fns::push::get_public_key()
             .await
-            .map_err(|_| ApiError::Network)?;
-        let key = resp.text().await.map_err(|_| ApiError::Network)?;
-        Ok(key)
+            .map_err(|e| ApiError::ServerFn(e.to_string()))
     }
 
-    pub async fn subscribe(req: &PushSubscriptionData) -> Result<(), ApiError> {
-        Request::post(&format!("{}/push/subscribe", base_url()))
-            .json(req)
-            .map_err(|_| ApiError::Network)?
-            .send()
-            .await
-            .map_err(|_| ApiError::Network)?;
-        Ok(())
+    pub async fn subscribe(endpoint: &str, p256dh: &str, auth: &str) -> Result<(), ApiError> {
+        shared::server_fns::push::subscribe_push(
+            endpoint.to_string(),
+            p256dh.to_string(),
+            auth.to_string(),
+        )
+        .await
+        .map_err(|e| ApiError::ServerFn(e.to_string()))
     }
 }
 
@@ -168,30 +164,16 @@ pub mod torrent {
     use super::*;
 
     pub async fn add(uri: &str) -> Result<(), ApiError> {
-        let req = AddTorrentRequest {
-            uri: uri.to_string(),
-        };
-        Request::post(&format!("{}/torrents/add", base_url()))
-            .json(&req)
-            .map_err(|_| ApiError::Network)?
-            .send()
+        shared::server_fns::torrent::add_torrent(uri.to_string())
             .await
-            .map_err(|_| ApiError::Network)?;
-        Ok(())
+            .map_err(|e| ApiError::ServerFn(e.to_string()))
     }
 
     pub async fn action(hash: &str, action: &str) -> Result<(), ApiError> {
-        let req = TorrentActionRequest {
-            hash: hash.to_string(),
-            action: action.to_string(),
-        };
-        Request::post(&format!("{}/torrents/action", base_url()))
-            .json(&req)
-            .map_err(|_| ApiError::Network)?
-            .send()
+        shared::server_fns::torrent::torrent_action(hash.to_string(), action.to_string())
             .await
-            .map_err(|_| ApiError::Network)?;
-        Ok(())
+            .map(|_| ())
+            .map_err(|e| ApiError::ServerFn(e.to_string()))
     }
 
     pub async fn delete(hash: &str) -> Result<(), ApiError> {
@@ -211,33 +193,18 @@ pub mod torrent {
     }
 
     pub async fn set_label(hash: &str, label: &str) -> Result<(), ApiError> {
-        use shared::SetLabelRequest;
-        let req = SetLabelRequest {
-            hash: hash.to_string(),
-            label: label.to_string(),
-        };
-        Request::post(&format!("{}/torrents/set_label", base_url()))
-            .json(&req)
-            .map_err(|_| ApiError::Network)?
-            .send()
+        shared::server_fns::torrent::set_label(hash.to_string(), label.to_string())
             .await
-            .map_err(|_| ApiError::Network)?;
-        Ok(())
+            .map_err(|e| ApiError::ServerFn(e.to_string()))
     }
 
     pub async fn set_priority(hash: &str, file_index: u32, priority: u8) -> Result<(), ApiError> {
-        use shared::SetFilePriorityRequest;
-        let req = SetFilePriorityRequest {
-            hash: hash.to_string(),
+        shared::server_fns::torrent::set_file_priority(
+            hash.to_string(),
             file_index,
             priority,
-        };
-        Request::post(&format!("{}/torrents/set_priority", base_url()))
-            .json(&req)
-            .map_err(|_| ApiError::Network)?
-            .send()
-            .await
-            .map_err(|_| ApiError::Network)?;
-        Ok(())
+        )
+        .await
+        .map_err(|e| ApiError::ServerFn(e.to_string()))
     }
 }

frontend/src/app.rs

@@ -1,81 +1,90 @@
-use crate::components::layout::protected::Protected;
-use crate::components::toast::ToastContainer;
+use crate::components::layout::protected::ProtectedLayout;
+use crate::components::ui::skeleton::Skeleton;
 use crate::components::torrent::table::TorrentTable;
 use crate::components::auth::login::Login;
 use crate::components::auth::setup::Setup;
-use crate::api;
-use leptos::*;
-use leptos_router::*;
+use leptos::prelude::*;
+use leptos::task::spawn_local;
+use leptos_router::components::{Router, Routes, Route};
+use leptos_router::hooks::{use_navigate, use_location};
+use crate::components::ui::toast::Toaster;
+use crate::components::hooks::use_theme_mode::ThemeMode;
 
 #[component]
 pub fn App() -> impl IntoView {
+    crate::components::ui::toast::provide_toaster();
+    let theme_mode = ThemeMode::init();
+
+    // Sync theme with document
+    Effect::new(move |_| {
+        let is_dark = theme_mode.get();
+        if let Some(doc) = document().document_element() {
+            if is_dark {
+                let _ = doc.class_list().add_1("dark");
+                let _ = doc.set_attribute("data-theme", "dark");
+            } else {
+                let _ = doc.class_list().remove_1("dark");
+                let _ = doc.set_attribute("data-theme", "light");
+            }
+        }
+    });
+
+    view! {
+        <Toaster />
+        <Router>
+            <InnerApp />
+        </Router>
+    }
+}
+
+#[component]
+fn InnerApp() -> impl IntoView {
     crate::store::provide_torrent_store();
+    let store = use_context::<crate::store::TorrentStore>();
+    let _loc = use_location();
 
-    let (is_loading, set_is_loading) = create_signal(true);
-    let (is_authenticated, set_is_authenticated) = create_signal(false);
+    let is_loading = signal(true);
+    let is_authenticated = signal(false);
+    let needs_setup = signal(false);
 
-    create_effect(move |_| {
+    Effect::new(move |_| {
         spawn_local(async move {
-            logging::log!("App initialization started...");
-
-            let setup_res = api::setup::get_status().await;
-
-            match setup_res {
+            log::info!("App initialization started...");
+            
+            // Check if setup is needed via Server Function
+            match shared::server_fns::auth::get_setup_status().await {
                 Ok(status) => {
                     if !status.completed {
-                        logging::log!("Setup not completed, redirecting to /setup");
-                        let navigate = use_navigate();
-                        navigate("/setup", Default::default());
-                        set_is_loading.set(false);
+                        needs_setup.1.set(true);
+                        is_loading.1.set(false);
                         return;
                     }
                 }
-                Err(e) => logging::error!("Failed to get setup status: {:?}", e),
+                Err(e) => log::error!("Failed to get setup status: {:?}", e),
             }
 
-            let auth_res = api::auth::check_auth().await;
-
-            match auth_res {
-                Ok(true) => {
-                    logging::log!("Authenticated!");
-
-                    if let Ok(user_info) = api::auth::get_user().await {
-                        if let Some(store) = use_context::<crate::store::TorrentStore>() {
-                            store.user.set(Some(user_info.username));
-                        }
-                    }
-
-                    set_is_authenticated.set(true);
-
-                    let pathname = window().location().pathname().unwrap_or_default();
-                    if pathname == "/login" || pathname == "/setup" {
-                        logging::log!("Already authenticated, redirecting to home");
-                        let navigate = use_navigate();
-                        navigate("/", Default::default());
+            // Check authentication via GetUser Server Function
+            match shared::server_fns::auth::get_user().await {
+                Ok(Some(user_info)) => {
+                    if let Some(s) = store {
+                        s.user.set(Some(user_info.username));
                     }
+                    is_authenticated.1.set(true);
                 }
-                Ok(false) => {
-                    logging::log!("Not authenticated");
-
-                    let pathname = window().location().pathname().unwrap_or_default();
-                    if pathname != "/login" && pathname != "/setup" {
-                        let navigate = use_navigate();
-                        navigate("/login", Default::default());
-                    }
+                Ok(None) => {
+                    log::info!("Not authenticated");
                 }
                 Err(e) => {
-                    logging::error!("Auth check failed: {:?}", e);
-                    let navigate = use_navigate();
-                    navigate("/login", Default::default());
+                    log::error!("Auth check failed: {:?}", e);
                 }
             }
 
-            set_is_loading.set(false);
+            is_loading.1.set(false);
         });
     });
 
-    create_effect(move |_| {
-        if is_authenticated.get() {
+    Effect::new(move |_| {
+        if is_authenticated.0.get() {
             spawn_local(async {
                 gloo_timers::future::TimeoutFuture::new(2000).await;
 
@@ -86,44 +95,108 @@ pub fn App() -> impl IntoView {
         }
     });
 
+    let is_loading_val = move || is_loading.0.get();
+    let authenticated_val = move || is_authenticated.0.get();
+
     view! {
         <div class="relative w-full h-screen" style="height: 100dvh;">
-            <Router>
-                <Routes>
-                    <Route path="/login" view=move || view! { <Login /> } />
-                    <Route path="/setup" view=move || view! { <Setup /> } />
+            <Routes fallback=|| view! { <div class="p-4">"404 Not Found"</div> }.into_any()>
+                <Route path=leptos_router::path!("/login") view=move || {
+                    let authenticated = authenticated_val();
+                    let setup_needed = needs_setup.0.get();
+                    
+                    Effect::new(move |_| {
+                        if setup_needed {
+                            let navigate = use_navigate();
+                            navigate("/setup", Default::default());
+                        } else if authenticated {
+                            let navigate = use_navigate();
+                            navigate("/", Default::default());
+                        }
+                    });
+                    
+                    view! { <Login /> }.into_any()
+                } />
+                <Route path=leptos_router::path!("/setup") view=move || {
+                    Effect::new(move |_| {
+                        if authenticated_val() {
+                            let navigate = use_navigate();
+                            navigate("/", Default::default());
+                        }
+                    });
+                    
+                    view! { <Setup /> }.into_any()
+                } />
 
-                    <Route path="/" view=move || {
-                        view! {
-                            <Show when=move || !is_loading.get() fallback=|| view! {
-                                <div class="flex items-center justify-center h-screen bg-base-100">
-                                    <span class="loading loading-spinner loading-lg"></span>
+                <Route path=leptos_router::path!("/") view=move || {
+                    let navigate = use_navigate();
+                    Effect::new(move |_| {
+                        if !is_loading_val() {
+                            if needs_setup.0.get() {
+                                navigate("/setup", Default::default());
+                            } else if !authenticated_val() {
+                                navigate("/login", Default::default());
+                            }
+                        }
+                    });
+                    
+                    view! {
+                        <Show when=move || !is_loading_val() fallback=|| {
+                            view! {
+                                <div class="flex h-screen bg-background text-foreground overflow-hidden">
+                                    <div class="w-56 border-r border-border p-4 space-y-4">
+                                        <Skeleton class="h-8 w-3/4" />
+                                        <div class="space-y-2">
+                                            <Skeleton class="h-6 w-full" />
+                                            <Skeleton class="h-6 w-full" />
+                                            <Skeleton class="h-6 w-4/5" />
+                                        </div>
+                                    </div>
+                                    <div class="flex-1 flex flex-col min-w-0">
+                                        <div class="border-b border-border p-4 flex items-center gap-4">
+                                            <Skeleton class="h-8 w-48" />
+                                        </div>
+                                        <div class="flex-1 p-4 space-y-3">
+                                            <Skeleton class="h-10 w-full" />
+                                            <Skeleton class="h-10 w-full" />
+                                        </div>
+                                    </div>
                                 </div>
-                            }>
-                                <Show when=move || is_authenticated.get() fallback=|| ()>
-                                    <Protected>
-                                        <TorrentTable />
-                                    </Protected>
-                                </Show>
+                            }.into_any()
+                        }>
+                            <Show when=move || authenticated_val() fallback=|| ()>
+                                <ProtectedLayout>
+                                    <div class="flex flex-col h-full overflow-hidden">
+                                        <div class="flex-1 overflow-hidden">
+                                            <TorrentTable />
+                                        </div>
+                                    </div>
+                                </ProtectedLayout>
                             </Show>
-                        }
-                    }/>
+                        </Show>
+                    }.into_any()
+                }/>
 
-                    <Route path="/settings" view=move || {
-                        view! {
-                            <Show when=move || !is_loading.get() fallback=|| ()>
-                                <Show when=move || is_authenticated.get() fallback=|| ()>
-                                    <Protected>
-                                        <div class="p-4">"Settings Page (Coming Soon)"</div>
-                                    </Protected>
-                                </Show>
+                <Route path=leptos_router::path!("/settings") view=move || {
+                    let authenticated = authenticated_val();
+                    Effect::new(move |_| {
+                        if !authenticated {
+                            let navigate = use_navigate();
+                            navigate("/login", Default::default());
+                        }
+                    });
+                    
+                    view! {
+                        <Show when=move || !is_loading_val() fallback=|| ()>
+                            <Show when=move || authenticated fallback=|| ()>
+                                <ProtectedLayout>
+                                    <div class="p-4">"Settings Page (Coming Soon)"</div>
+                                </ProtectedLayout>
                             </Show>
-                        }
-                    }/>
-                </Routes>
-            </Router>
-
-            <ToastContainer />
+                        </Show>
+                    }.into_any()
+                }/>
+            </Routes>
         </div>
     }
 }

frontend/src/components/auth/login.rs

@@ -1,122 +1,95 @@
-use leptos::*;
-use crate::api;
+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;
 
 #[component]
 pub fn Login() -> impl IntoView {
-    let (username, set_username) = create_signal(String::new());
-    let (password, set_password) = create_signal(String::new());
-    let (remember_me, set_remember_me) = create_signal(false);
-    let (error, set_error) = create_signal(Option::<String>::None);
-    let (loading, set_loading) = create_signal(false);
+    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();
-        set_loading.set(true);
-        set_error.set(None);
+        loading.1.set(true);
+        error.1.set(None);
 
-        logging::log!("Attempting login for user: {}", username.get());
-
-        let username = username.get();
-        let password = password.get();
-        let remember_me = remember_me.get();
+        let user = username.get();
+        let pass = password.get();
 
         spawn_local(async move {
-            match api::auth::login(&username, &password, remember_me).await {
+            match shared::server_fns::auth::login(user, pass).await {
                 Ok(_) => {
-                    logging::log!("Login successful, redirecting...");
-                    let _ = window().location().set_href("/");
+                    let window = web_sys::window().expect("window should exist");
+                    let _ = window.location().set_href("/");
                 }
-                Err(e) => {
-                    logging::error!("Login failed: {:?}", e);
-                    let msg = match e {
-                        crate::api::ApiError::RateLimited => {
-                            "Çok fazla başarısız deneme yaptınız. Lütfen bir süre bekleyip tekrar deneyin.".to_string()
-                        }
-                        crate::api::ApiError::Unauthorized | crate::api::ApiError::LoginFailed => {
-                            "Kullanıcı adı veya şifre hatalı".to_string()
-                        }
-                        crate::api::ApiError::Network => {
-                            "Bağlantı hatası".to_string()
-                        }
-                        _ => "Bir hata oluştu".to_string()
-                    };
-                    set_error.set(Some(msg));
+                Err(_) => {
+                    error.1.set(Some("Geçersiz kullanıcı adı veya şifre".to_string()));
+                    loading.1.set(false);
                 }
             }
-            set_loading.set(false);
         });
     };
 
     view! {
-        <div class="flex items-center justify-center min-h-screen bg-base-200">
-            <div class="card w-full max-w-sm shadow-xl bg-base-100">
-                <div class="card-body">
-                    <h2 class="card-title justify-center mb-4">"VibeTorrent Giriş"</h2>
-
-                    <form on:submit=handle_login>
-                        <div class="form-control w-full">
-                            <label class="label">
-                                <span class="label-text">"Kullanıcı Adı"</span>
-                            </label>
-                            <input
-                                type="text"
+        <div class="flex items-center justify-center min-h-screen bg-muted/40 px-4">
+            <Card class="w-full max-w-sm shadow-lg">
+                <CardHeader class="pb-2 items-center">
+                    <div class="w-12 h-12 bg-primary rounded-xl flex items-center justify-center text-primary-foreground shadow-sm mb-4">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.048 8.287 8.287 0 009 9.6a8.983 8.983 0 013.361-6.867 8.21 8.25 0 003 2.48z" />
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 18a3.75 3.75 0 00.495-7.467 5.99 5.99 0 00-1.925 3.546 5.974 5.974 0 01-2.133-1A3.75 3.75 0 0012 18z" />
+                        </svg>
+                    </div>
+                    <h3 class="font-semibold tracking-tight text-2xl">"VibeTorrent"</h3>
+                    <p class="text-sm text-muted-foreground">"Hesabınıza giriş yapın"</p>
+                </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"
-                                class="input input-bordered w-full"
-                                prop:value=username
-                                on:input=move |ev| set_username.set(event_target_value(&ev))
-                                disabled=move || loading.get()
+                                bind_value=username
+                                disabled=loading.0.get()
                             />
                         </div>
-
-                        <div class="form-control w-full mt-4">
-                            <label class="label">
-                                <span class="label-text">"Şifre"</span>
-                            </label>
-                            <input
-                                type="password"
+                        <div class="space-y-2">
+                            <label class="text-sm font-medium leading-none">"Şifre"</label>
+                            <Input
+                                r#type=InputType::Password
                                 placeholder="******"
-                                class="input input-bordered w-full"
-                                prop:value=password
-                                on:input=move |ev| set_password.set(event_target_value(&ev))
-                                disabled=move || loading.get()
+                                bind_value=password
+                                disabled=loading.0.get()
                             />
                         </div>
 
-                        <div class="form-control mt-4">
-                            <label class="label cursor-pointer justify-start gap-3">
-                                <input
-                                    type="checkbox"
-                                    class="checkbox checkbox-primary checkbox-sm"
-                                    prop:checked=remember_me
-                                    on:change=move |ev| set_remember_me.set(event_target_checked(&ev))
-                                    disabled=move || loading.get()
-                                />
-                                <span class="label-text">"Beni Hatırla"</span>
-                            </label>
-                        </div>
-
-                        <Show when=move || error.get().is_some()>
-                            <div class="alert alert-error mt-4 text-sm py-2">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
-                                <span>{move || error.get()}</span>
+                        <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="card-actions justify-end mt-6">
-                            <button
-                                class="btn btn-primary w-full"
-                                type="submit"
-                                disabled=move || loading.get()
+                        <div class="pt-2">
+                            <Button
+                                class="w-full"
+                                attr:r#type="submit"
+                                attr:disabled=move || loading.0.get()
                             >
-                                <Show when=move || loading.get() fallback=|| "Giriş Yap">
-                                    <span class="loading loading-spinner"></span>
+                                <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>
+                            </Button>
                         </div>
                     </form>
-                </div>
-            </div>
+                </CardContent>
+            </Card>
         </div>
     }
-}
+}

frontend/src/components/auth/setup.rs

@@ -1,127 +1,119 @@
-use leptos::*;
-use crate::api;
+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;
 
 #[component]
 pub fn Setup() -> impl IntoView {
-    let (username, set_username) = create_signal(String::new());
-    let (password, set_password) = create_signal(String::new());
-    let (confirm_password, set_confirm_password) = create_signal(String::new());
-    let (error, set_error) = create_signal(Option::<String>::None);
-    let (loading, set_loading) = create_signal(false);
+    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();
-        set_loading.set(true);
-        set_error.set(None);
-
+        
         let pass = password.get();
         let confirm = confirm_password.get();
-
+        
         if pass != confirm {
-            set_error.set(Some("Şifreler eşleşmiyor".to_string()));
-            set_loading.set(false);
+            error.1.set(Some("Şifreler eşleşmiyor".to_string()));
             return;
         }
 
         if pass.len() < 6 {
-            set_error.set(Some("Şifre en az 6 karakter olmalıdır".to_string()));
-            set_loading.set(false);
+            error.1.set(Some("Şifre en az 6 karakter olmalıdır".to_string()));
             return;
         }
 
-        let username = username.get();
-        let password = pass;
+        loading.1.set(true);
+        error.1.set(None);
+
+        let user = username.get();
 
         spawn_local(async move {
-            match api::setup::setup(&username, &password).await {
+            match shared::server_fns::auth::setup(user, pass).await {
                 Ok(_) => {
-                    logging::log!("Setup completed successfully, redirecting...");
-                    let _ = window().location().set_href("/");
+                    log::info!("Setup completed successfully, redirecting...");
+                    let window = web_sys::window().expect("window should exist");
+                    let _ = window.location().set_href("/");
                 }
                 Err(e) => {
-                    logging::error!("Setup failed: {:?}", e);
-                    set_error.set(Some("Kurulum başarısız oldu".to_string()));
+                    log::error!("Setup failed: {:?}", e);
+                    error.1.set(Some("Kurulum sırasında bir hata oluştu".to_string()));
+                    loading.1.set(false);
                 }
             }
-            set_loading.set(false);
         });
     };
 
     view! {
-        <div class="flex items-center justify-center min-h-screen bg-base-200">
-            <div class="card w-full max-w-md shadow-xl bg-base-100">
-                <div class="card-body">
-                    <h2 class="card-title justify-center mb-2">"VibeTorrent Kurulumu"</h2>
-                    <p class="text-center text-sm opacity-70 mb-4">"Yönetici hesabınızı oluşturun"</p>
+        <div class="flex items-center justify-center min-h-screen bg-muted/40 px-4">
+            <Card class="w-full max-w-md shadow-lg overflow-hidden">
+                <CardHeader class="pb-2 items-center text-center">
+                    <div class="w-12 h-12 bg-primary rounded-xl flex items-center justify-center text-primary-foreground shadow-sm mb-4">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M11.42 15.17L17.25 21A2.652 2.652 0 0021 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 11-3.586-3.586l6.837-5.63m5.108-3.497a2.548 2.548 0 113.586 3.586l-6.837 5.63m-5.108 3.497l2.496-3.03c.317-.384.74-.626 1.208-.766M15.75 9.25a2.548 2.548 0 11-5.096 0 2.548 2.548 0 015.096 0z" />
+                        </svg>
+                    </div>
+                    <h3 class="font-semibold tracking-tight text-2xl">"VibeTorrent Kurulumu"</h3>
+                    <p class="text-sm text-muted-foreground">"Yönetici hesabınızı oluşturun"</p>
+                </CardHeader>
 
-                    <form on:submit=handle_setup>
-                        <div class="form-control w-full">
-                            <label class="label">
-                                <span class="label-text">"Kullanıcı Adı"</span>
-                            </label>
-                            <input
-                                type="text"
+                <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"
-                                class="input input-bordered w-full"
-                                prop:value=username
-                                on:input=move |ev| set_username.set(event_target_value(&ev))
-                                disabled=move || loading.get()
-                                required
+                                bind_value=username
+                                disabled=loading.0.get()
                             />
                         </div>
-
-                        <div class="form-control w-full mt-4">
-                            <label class="label">
-                                <span class="label-text">"Şifre"</span>
-                            </label>
-                            <input
-                                type="password"
+                        <div class="space-y-2">
+                            <label class="text-sm font-medium leading-none">"Şifre"</label>
+                            <Input
+                                r#type=InputType::Password
                                 placeholder="******"
-                                class="input input-bordered w-full"
-                                prop:value=password
-                                on:input=move |ev| set_password.set(event_target_value(&ev))
-                                disabled=move || loading.get()
-                                required
+                                bind_value=password
+                                disabled=loading.0.get()
                             />
                         </div>
-
-                        <div class="form-control w-full mt-4">
-                            <label class="label">
-                                <span class="label-text">"Şifre Tekrar"</span>
-                            </label>
-                            <input
-                                type="password"
+                        <div class="space-y-2">
+                            <label class="text-sm font-medium leading-none">"Şifre Onay"</label>
+                            <Input
+                                r#type=InputType::Password
                                 placeholder="******"
-                                class="input input-bordered w-full"
-                                prop:value=confirm_password
-                                on:input=move |ev| set_confirm_password.set(event_target_value(&ev))
-                                disabled=move || loading.get()
-                                required
+                                bind_value=confirm_password
+                                disabled=loading.0.get()
                             />
                         </div>
 
-                        <Show when=move || error.get().is_some()>
-                            <div class="alert alert-error mt-4 text-sm py-2">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
-                                <span>{move || error.get()}</span>
+                        <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="card-actions justify-end mt-6">
-                            <button
-                                class="btn btn-primary w-full"
-                                type="submit"
-                                disabled=move || loading.get()
+                        <div class="pt-2">
+                            <Button
+                                class="w-full"
+                                attr:r#type="submit"
+                                attr:disabled=move || loading.0.get()
                             >
-                                <Show when=move || loading.get() fallback=|| "Kurulumu Tamamla">
-                                    <span class="loading loading-spinner"></span>
-                                    "İşleniyor..."
+                                <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>
+                            </Button>
                         </div>
                     </form>
-                </div>
-            </div>
+                </CardContent>
+            </Card>
         </div>
     }
 }

frontend/src/components/context_menu.rs

@@ -1,95 +1,71 @@
-use leptos::*;
-use leptos_use::on_click_outside;
+use leptos::prelude::*;
+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 ContextMenu(
-    position: (i32, i32),
-    visible: bool,
+pub fn TorrentContextMenu(
+    children: Children,
     torrent_hash: String,
-    on_close: Callback<()>,
-    on_action: Callback<(String, String)>, // (Action, Hash)
+    on_action: Callback<(String, String)>,
 ) -> impl IntoView {
-    let container_ref = create_node_ref::<html::Div>();
+    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 _ = on_click_outside(container_ref, move |_| on_close.call(()));
-
-    let handle_action = move |action: &str| {
-        let hash = torrent_hash.clone();
-        let action_str = action.to_string();
-        
-        logging::log!("ContextMenu: Action '{}' for hash '{}'", action_str, hash);
-        on_action.call((action_str, hash)); // Delegate FIRST
-        on_close.call(()); // Close menu AFTER
-    };
-
-    if !visible {
-        return view! {}.into_view();
-    }
+    let on_action_stored = StoredValue::new(on_action);
 
     view! {
-        <div 
-            node_ref=container_ref
-            class="fixed z-[100] min-w-[200px] animate-in fade-in zoom-in-95 duration-100"
-            style=format!("left: {}px; top: {}px", position.0, position.1)
-            on:contextmenu=move |e| e.prevent_default()
-        >
-            <ul class="menu bg-base-200 text-base-content rounded-box shadow-xl border border-white/5 p-2 gap-1">
+        <ContextMenu>
+            <ContextMenuTrigger>
+                {children()}
+            </ContextMenuTrigger>
+            <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>
 
-                
-                <li>
-                    <button 
-                        class="gap-3 active:bg-primary active:text-primary-content"
-                        on:click={
-                            let handle_action = handle_action.clone();
-                            move |_| handle_action("start")
-                        }
+                    <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();
+                        }}
                     >
-                        <svg class="w-4 h-4 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
-                        "Resume"
-                    </button>
-                </li>
-
-                <li>    
-                    <button 
-                        class="gap-3 active:bg-primary active:text-primary-content"
-                        on:click={
-                            let handle_action = handle_action.clone();
-                            move |_| handle_action("stop")
-                        }
-                    >
-                        <svg class="w-4 h-4 text-warning" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
-                        "Pause"
-                    </button>
-                </li>
-                
-                <div class="divider my-0 h-px p-0 opacity-10"></div>
-                
-                <li>
-                    <button 
-                        class="gap-3 text-error hover:bg-error/10 active:bg-error active:text-error-content"
-                        on:click={
-                            let handle_action = handle_action.clone();
-                            move |_| handle_action("delete")
-                        }
-                    >
-                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
-                        "Delete"
-                    </button>
-                </li>
-                
-                <li>
-                    <button 
-                        class="gap-3 text-error hover:bg-error/10 active:bg-error active:text-error-content text-xs"
-                        on:click={
-                            let handle_action = handle_action.clone();
-                            move |_| handle_action("delete_with_data")
-                        }
-                    >
-                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
-                        <span>"Delete with Data"</span>
-                    </button>
-                </li>
-            </ul>
-        </div>
-    }.into_view()
+                        "Verilerle Sil (Basılı Tut)"
+                    </ButtonAction>
+                </div>
+            </ContextMenuContent>
+        </ContextMenu>
+    }
 }

frontend/src/components/hooks/mod.rs

@@ -0,0 +1,3 @@
+pub mod use_random;
+pub mod use_theme_mode;
+pub mod use_can_scroll_vertical;

frontend/src/components/hooks/use_can_scroll_vertical.rs

@@ -0,0 +1,25 @@
+use leptos::prelude::*;
+use wasm_bindgen::JsCast;
+
+/// Hook to determine if an element can scroll vertically.
+///
+/// Returns (on_scroll_callback, can_scroll_up_signal, can_scroll_down_signal)
+pub fn use_can_scroll_vertical() -> (Callback<web_sys::Event>, ReadSignal<bool>, ReadSignal<bool>) {
+    let can_scroll_up = RwSignal::new(false);
+    let can_scroll_down = RwSignal::new(false);
+
+    let on_scroll = Callback::new(move |ev: web_sys::Event| {
+        if let Some(target) = ev.target() {
+            if let Some(el) = target.dyn_ref::<web_sys::HtmlElement>() {
+                let scroll_top = el.scroll_top();
+                let scroll_height = el.scroll_height();
+                let client_height = el.client_height();
+
+                can_scroll_up.set(scroll_top > 0);
+                can_scroll_down.set(scroll_top + client_height < scroll_height - 1);
+            }
+        }
+    });
+
+    (on_scroll, can_scroll_up.read_only(), can_scroll_down.read_only())
+}

frontend/src/components/hooks/use_random.rs

@@ -0,0 +1,5 @@
+use leptos::prelude::*;
+
+pub fn use_random_id_for(prefix: &str) -> String {
+    format!("{}_{}", prefix, js_sys::Math::random().to_string().replace(".", ""))
+}

frontend/src/components/hooks/use_theme_mode.rs

@@ -0,0 +1,108 @@
+use leptos::prelude::*;
+use web_sys::Storage;
+
+#[derive(Debug, Clone, Copy)]
+pub struct ThemeMode {
+    state: RwSignal<bool>,
+}
+
+const LOCALSTORAGE_KEY: &str = "darkmode";
+
+/// Hook to access the dark mode context
+///
+/// Returns the ThemeMode instance from context for easy access
+pub fn use_theme_mode() -> ThemeMode {
+    expect_context::<ThemeMode>()
+}
+
+/* ========================================================== */
+/*                     ✨ FUNCTIONS ✨                        */
+/* ========================================================== */
+
+impl ThemeMode {
+    #[must_use]
+    /// Initializes a new ThemeMode instance.
+    pub fn init() -> Self {
+        let theme_mode = Self { state: RwSignal::new(false) };
+
+        provide_context(theme_mode);
+
+        // Use Effect to handle browser-only initialization
+        Effect::new(move |_| {
+            let initial = Self::get_storage_state().unwrap_or(Self::prefers_dark_mode());
+            theme_mode.state.set(initial);
+        });
+
+        theme_mode
+    }
+
+    pub fn toggle(&self) {
+        self.state.update(|state| {
+            *state = !*state;
+            Self::set_storage_state(*state);
+        });
+    }
+
+    pub fn set_dark(&self) {
+        self.set(true);
+    }
+
+    pub fn set_light(&self) {
+        self.set(false);
+    }
+
+    /// - `dark`: Set to `true` for dark mode, and `false` for light mode.
+    pub fn set(&self, dark: bool) {
+        self.state.set(dark);
+        Self::set_storage_state(dark);
+    }
+
+    #[must_use]
+    pub fn get(&self) -> bool {
+        self.state.get()
+    }
+
+    #[must_use]
+    pub fn is_dark(&self) -> bool {
+        self.state.get()
+    }
+
+    #[must_use]
+    pub fn is_light(&self) -> bool {
+        !self.state.get()
+    }
+
+    /* ========================================================== */
+    /*                     ✨ FUNCTIONS ✨                        */
+    /* ========================================================== */
+
+    /// Retrieves the local storage object, if available.
+    fn get_storage() -> Option<Storage> {
+        window().local_storage().ok().flatten()
+    }
+
+    /// Retrieves the dark mode state from local storage, if available.
+    fn get_storage_state() -> Option<bool> {
+        Self::get_storage()
+            .and_then(|storage| storage.get(LOCALSTORAGE_KEY).ok())
+            .flatten()
+            .and_then(|entry| entry.parse::<bool>().ok())
+    }
+
+    /// Checks whether the user's system prefers dark mode based on media queries.
+    fn prefers_dark_mode() -> bool {
+        window()
+            .match_media("(prefers-color-scheme: dark)")
+            .ok()
+            .flatten()
+            .map(|media| media.matches())
+            .unwrap_or_default()
+    }
+
+    /// Stores the dark mode state in local storage.
+    fn set_storage_state(state: bool) {
+        if let Some(storage) = Self::get_storage() {
+            storage.set(LOCALSTORAGE_KEY, state.to_string().as_str()).ok();
+        }
+    }
+}

frontend/src/components/layout/footer.rs

@@ -0,0 +1,18 @@
+use leptos::prelude::*;
+use crate::components::ui::separator::Separator;
+
+#[component]
+pub fn Footer() -> impl IntoView {
+    let year = chrono::Local::now().format("%Y").to_string();
+    
+    view! {
+        <footer class="mt-auto 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/mod.rs

@@ -1,4 +1,4 @@
 pub mod sidebar;
-pub mod statusbar;
 pub mod toolbar;
+pub mod footer;
 pub mod protected;

frontend/src/components/layout/protected.rs

@@ -1,30 +1,24 @@
-use leptos::*;
+use leptos::prelude::*;
 use crate::components::layout::sidebar::Sidebar;
-use crate::components::layout::statusbar::StatusBar;
 use crate::components::layout::toolbar::Toolbar;
+use crate::components::ui::sidenav::{SidenavWrapper, Sidenav, SidenavInset, SidenavState};
 
 #[component]
-pub fn Protected(children: Children) -> impl IntoView {
+pub fn ProtectedLayout(children: Children) -> impl IntoView {
+    let sidenav_state = RwSignal::new(SidenavState::Expanded);
+
     view! {
-        <div class="drawer lg:drawer-open h-full w-full">
-            <input id="my-drawer" type="checkbox" class="drawer-toggle" />
-
-            <div class="drawer-content flex flex-col h-full overflow-hidden bg-base-100 text-base-content text-sm select-none">
-                <Toolbar />
-
-                <main class="flex-1 flex flex-col min-w-0 bg-base-100 overflow-hidden pb-8">
+        <SidenavWrapper attr:style="--sidenav-width:16rem; --sidenav-width-icon:3rem;">
+            <Sidenav data_state=Signal::from(sidenav_state)>
+                <Sidebar />
+            </Sidenav>
+            
+            <SidenavInset class="flex flex-col h-screen overflow-hidden">
+                <Toolbar sidenav_state=sidenav_state />
+                <main class="flex-1 overflow-auto bg-muted/30">
                     {children()}
                 </main>
-
-                <StatusBar />
-            </div>
-
-            <div class="drawer-side z-40 transition-none duration-0">
-                <label for="my-drawer" aria-label="close sidebar" class="drawer-overlay transition-none duration-0"></label>
-                <div class="menu p-0 min-h-full bg-base-200 text-base-content border-r border-base-300 transition-none duration-0">
-                    <Sidebar />
-                </div>
-            </div>
-        </div>
+            </SidenavInset>
+        </SidenavWrapper>
     }
 }

frontend/src/components/layout/sidebar.rs

@@ -1,6 +1,9 @@
-use leptos::wasm_bindgen::JsCast;
-use leptos::*;
-use crate::api;
+use leptos::prelude::*;
+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 {
@@ -49,219 +52,174 @@ pub fn Sidebar() -> impl IntoView {
         })
     };
 
-    let close_drawer = move || {
-        if let Some(element) = document().get_element_by_id("my-drawer") {
-            if let Ok(input) = element.dyn_into::<web_sys::HtmlInputElement>() {
-                input.set_checked(false);
-            }
-        }
-    };
-
     let set_filter = move |f: crate::store::FilterStatus| {
         store.filter.set(f);
-        close_drawer();
     };
 
-    let filter_class = move |f: crate::store::FilterStatus| {
-        if store.filter.get() == f {
-            "active"
-        } else {
-            ""
-        }
+    let is_active = move |f: crate::store::FilterStatus| store.filter.get() == f;
+
+    let username = move || {
+        store.user.get().unwrap_or_else(|| "User".to_string())
     };
 
-    let handle_logout = move |_| {
+    let first_letter = move || {
+        username().chars().next().unwrap_or('?').to_uppercase().to_string()
+    };
+
+    let on_push_toggle = move |checked: bool| {
         spawn_local(async move {
-            if api::auth::logout().await.is_ok() {
-                let _ = window().location().set_href("/login");
+            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);
             }
         });
     };
 
-                let username = move || {
-
-                    store.user.get().unwrap_or_else(|| "User".to_string())
-
-                };
-
-
-
-                let first_letter = move || {
-
-                    username().chars().next().unwrap_or('?').to_uppercase().to_string()
-
-                };
-
-
-
-                view! {
-
-                    <div class="w-64 min-h-[100dvh] flex flex-col bg-base-200 border-r border-base-300 pb-8" style="padding-top: env(safe-area-inset-top);">
-
-                        <div class="p-2 flex-1 overflow-y-auto">
-
-                            <ul class="menu w-full rounded-box gap-1">
-
-                                <li class="menu-title text-primary uppercase font-bold px-4">"Filters"</li>
-
-                                <li>
-
-                                    <button class={move || format!("cursor-pointer {}", filter_class(crate::store::FilterStatus::All))} on:click=move |_| set_filter(crate::store::FilterStatus::All)>
-
-                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
-
-                                            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
-
-                                        </svg>
-
-                                        "All"
-
-                                        <span class="badge badge-sm badge-ghost ml-auto">{total_count}</span>
-
-                                    </button>
-
-                                </li>
-
-                                <li>
-
-                                    <button class={move || format!("cursor-pointer {}", filter_class(crate::store::FilterStatus::Downloading))} on:click=move |_| set_filter(crate::store::FilterStatus::Downloading)>
-
-                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
-
-                                            <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
-
-                                        </svg>
-
-                                        "Downloading"
-
-                                        <span class="badge badge-sm badge-ghost ml-auto">{downloading_count}</span>
-
-                                    </button>
-
-                                </li>
-
-                                <li>
-
-                                    <button class={move || format!("cursor-pointer {}", filter_class(crate::store::FilterStatus::Seeding))} on:click=move |_| set_filter(crate::store::FilterStatus::Seeding)>
-
-                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
-
-                                            <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
-
-                                        </svg>
-
-                                        "Seeding"
-
-                                        <span class="badge badge-sm badge-ghost ml-auto">{seeding_count}</span>
-
-                                    </button>
-
-                                </li>
-
-                                <li>
-
-                                    <button class={move || format!("cursor-pointer {}", filter_class(crate::store::FilterStatus::Completed))} on:click=move |_| set_filter(crate::store::FilterStatus::Completed)>
-
-                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
-
-                                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-
-                                        </svg>
-
-                                        "Completed"
-
-                                        <span class="badge badge-sm badge-ghost ml-auto">{completed_count}</span>
-
-                                    </button>
-
-                                </li>
-
-                                <li>
-
-                                    <button class={move || format!("cursor-pointer {}", filter_class(crate::store::FilterStatus::Paused))} on:click=move |_| set_filter(crate::store::FilterStatus::Paused)>
-
-                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
-
-                                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25v13.5m-7.5-13.5v13.5" />
-
-                                        </svg>
-
-                                        "Paused"
-
-                                        <span class="badge badge-sm badge-ghost ml-auto">{paused_count}</span>
-
-                                    </button>
-
-                                </li>
-
-                                <li>
-
-                                    <button class={move || format!("cursor-pointer {}", filter_class(crate::store::FilterStatus::Inactive))} on:click=move |_| set_filter(crate::store::FilterStatus::Inactive)>
-
-                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
-
-                                            <path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
-
-                                        </svg>
-
-                                        "Inactive"
-
-                                         <span class="badge badge-sm badge-ghost ml-auto">{inactive_count}</span>
-
-                                    </button>
-
-                                </li>
-
-                            </ul>
-
-                        </div>
-
-
-
-                        <div class="p-4 border-t border-base-300 bg-base-200/50">
-
-                            <div class="flex items-center gap-3">
-
-                                <div class="avatar">
-
-                                    <div class="w-8 rounded-full bg-neutral text-neutral-content ring ring-primary ring-offset-base-100 ring-offset-1">
-
-                                        <span class="text-sm font-bold flex items-center justify-center h-full">{first_letter}</span>
-
-                                    </div>
-
-                                </div>
-
-                                <div class="flex-1 overflow-hidden">
-
-                                    <div class="font-bold text-sm truncate">{username}</div>
-
-                                    <div class="text-[10px] text-base-content/60 truncate">"Online"</div>
-
-                                </div>
-
-                                <button
-
-                                    class="btn btn-ghost btn-xs btn-square text-error hover:bg-error/10"
-
-                                    title="Logout"
-
-                                    on:click=handle_logout
-
-                                >
-
-                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-
-                                        <path stroke-linecap="round" stroke-linejoin="round" d="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>
-
+    view! {
+        <SidenavHeader>
+            <div class="flex items-center gap-2 px-2 py-4">
+                <div class="flex size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-sm">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.048 8.287 8.287 0 009 9.6a8.983 8.983 0 013.361-6.867 8.21 8.25 0 003 2.48z" />
+                    </svg>
+                </div>
+                <div class="grid flex-1 text-left text-sm leading-tight overflow-hidden">
+                    <span class="truncate font-semibold text-foreground text-base">"VibeTorrent"</span>
+                    <span class="truncate text-[10px] text-muted-foreground opacity-70">"v3.0.0"</span>
+                </div>
+            </div>
+        </SidenavHeader>
+
+        <SidenavContent>
+            <SidenavGroup>
+                <SidenavGroupLabel>"Filtreler"</SidenavGroupLabel>
+                <SidenavGroupContent>
+                    <SidenavMenu>
+                        <SidebarItem 
+                            active=Signal::derive(move || is_active(crate::store::FilterStatus::All))
+                            on_click=move |_| set_filter(crate::store::FilterStatus::All)
+                            icon="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+                            label="Tümü"
+                            count=Signal::derive(total_count)
+                        />
+                        <SidebarItem 
+                            active=Signal::derive(move || is_active(crate::store::FilterStatus::Downloading))
+                            on_click=move |_| set_filter(crate::store::FilterStatus::Downloading)
+                            icon="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"
+                            label="İndirilenler"
+                            count=Signal::derive(downloading_count)
+                        />
+                        <SidebarItem 
+                            active=Signal::derive(move || is_active(crate::store::FilterStatus::Seeding))
+                            on_click=move |_| set_filter(crate::store::FilterStatus::Seeding)
+                            icon="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
+                            label="Gönderilenler"
+                            count=Signal::derive(seeding_count)
+                        />
+                        <SidebarItem 
+                            active=Signal::derive(move || is_active(crate::store::FilterStatus::Completed))
+                            on_click=move |_| set_filter(crate::store::FilterStatus::Completed)
+                            icon="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                            label="Tamamlananlar"
+                            count=Signal::derive(completed_count)
+                        />
+                        <SidebarItem 
+                            active=Signal::derive(move || is_active(crate::store::FilterStatus::Paused))
+                            on_click=move |_| set_filter(crate::store::FilterStatus::Paused)
+                            icon="M15.75 5.25v13.5m-7.5-13.5v13.5"
+                            label="Durdurulanlar"
+                            count=Signal::derive(paused_count)
+                        />
+                        <SidebarItem 
+                            active=Signal::derive(move || is_active(crate::store::FilterStatus::Inactive))
+                            on_click=move |_| set_filter(crate::store::FilterStatus::Inactive)
+                            icon="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
+                            label="Pasif"
+                            count=Signal::derive(inactive_count)
+                        />
+                    </SidenavMenu>
+                </SidenavGroupContent>
+            </SidenavGroup>
+        </SidenavContent>
+
+        <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>
 
-                }}
+                <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 />
+                        
+                        <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>
+    }
+}
+
+#[component]
+fn SidebarItem(
+    active: Signal<bool>,
+    on_click: impl Fn(web_sys::MouseEvent) + 'static + Send,
+    #[prop(into)] icon: String,
+    #[prop(into)] label: &'static str,
+    count: Signal<usize>,
+) -> impl IntoView {
+    let variant = move || if active.get() { SidenavMenuButtonVariant::Outline } else { SidenavMenuButtonVariant::Default };
+    let class = move || if active.get() { "bg-accent/50 border-accent text-foreground".to_string() } else { "text-muted-foreground hover:text-foreground".to_string() };
+
+    view! {
+        <SidenavMenuItem>
+            <SidenavMenuButton
+                variant=Signal::derive(variant)
+                class=Signal::derive(class)
+                on:click=on_click
+            >
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 shrink-0">
+                    <path stroke-linecap="round" stroke-linejoin="round" d=icon.clone() />
+                </svg>
+                <span class="flex-1 truncate">{label}</span>
+                <span class="text-[10px] font-mono opacity-50">{count}</span>
+            </SidenavMenuButton>
+        </SidenavMenuItem>
+    }
+}

frontend/src/components/layout/statusbar.rs

@@ -1,272 +0,0 @@
-use leptos::*;
-use leptos_use::storage::use_local_storage;
-use codee::string::FromToStringCodec;
-use shared::GlobalLimitRequest;
-use crate::api;
-
-fn format_bytes(bytes: i64) -> String {
-    const UNITS: [&str; 6] = ["B", "KB", "MB", "GB", "TB", "PB"];
-    if bytes < 1024 {
-        return format!("{} B", bytes);
-    }
-    let i = (bytes as f64).log2().div_euclid(10.0) as usize;
-    format!(
-        "{:.1} {}",
-        (bytes as f64) / 1024_f64.powi(i as i32),
-        UNITS[i]
-    )
-}
-
-fn format_speed(bytes_per_sec: i64) -> String {
-    if bytes_per_sec == 0 {
-        return "0 B/s".to_string();
-    }
-    format!("{}/s", format_bytes(bytes_per_sec))
-}
-
-#[component]
-pub fn StatusBar() -> impl IntoView {
-    let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
-    let stats = store.global_stats;
-
-    // Use leptos-use for reactive localStorage management
-    let (current_theme, set_current_theme, _) = use_local_storage::<String, FromToStringCodec>("vibetorrent_theme");
-
-    // Initialize with default if empty
-    if current_theme.get_untracked().is_empty() {
-        set_current_theme.set("dark".to_string());
-    }
-
-    // Automatically sync theme to document attribute
-    create_effect(move |_| {
-        let theme = current_theme.get().to_lowercase();
-        if let Some(doc) = document().document_element() {
-            let _ = doc.set_attribute("data-theme", &theme);
-        }
-    });
-
-    // Preset limits in bytes/s
-    let limits: Vec<(i64, &str)> = vec![
-        (0, "Unlimited"),
-        (100 * 1024, "100 KB/s"),
-        (500 * 1024, "500 KB/s"),
-        (1024 * 1024, "1 MB/s"),
-        (2 * 1024 * 1024, "2 MB/s"),
-        (5 * 1024 * 1024, "5 MB/s"),
-        (10 * 1024 * 1024, "10 MB/s"),
-        (20 * 1024 * 1024, "20 MB/s"),
-    ];
-
-    let set_limit = move |limit_type: &str, val: i64| {
-        let limit_type = limit_type.to_string();
-        logging::log!("Setting {} limit to {}", limit_type, val);
-
-        let req = if limit_type == "down" {
-            GlobalLimitRequest {
-                max_download_rate: Some(val),
-                max_upload_rate: None,
-            }
-        } else {
-            GlobalLimitRequest {
-                max_download_rate: None,
-                max_upload_rate: Some(val),
-            }
-        };
-
-        spawn_local(async move {
-            if let Err(e) = api::settings::set_global_limits(&req).await {
-                logging::error!("Failed to set limit: {:?}", e);
-            } else {
-                logging::log!("Limit set successfully");
-            }
-        });
-    };
-
-        // Refs for click outside detection (Handled globally via JS in index.html for better iOS support)
-        let down_details_ref = create_node_ref::<html::Details>();
-        let up_details_ref = create_node_ref::<html::Details>();
-        let theme_details_ref = create_node_ref::<html::Details>();
-
-        // Helper to close a details element
-        let close_details = |node_ref: NodeRef<html::Details>| {
-            if let Some(el) = node_ref.get_untracked() {
-                el.set_open(false);
-            }
-        };
-
-        view! {
-            <div class="fixed bottom-0 left-0 right-0 h-8 min-h-8 bg-base-200 border-t border-base-300 flex items-center px-4 text-xs gap-4 text-base-content/70 z-[99] cursor-pointer">
-
-                // --- DOWNLOAD SPEED DROPDOWN ---
-                <details class="dropdown dropdown-top" node_ref=down_details_ref>
-                    <summary class="flex items-center gap-2 cursor-pointer hover:text-primary transition-colors select-none list-none [&::-webkit-details-marker]:hidden outline-none">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3" />
-                        </svg>
-                        <span class="font-mono">{move || format_speed(stats.get().down_rate)}</span>
-                        <Show when=move || { stats.get().down_limit.unwrap_or(0) > 0 } fallback=|| ()>
-                            <span class="text-[10px] opacity-60">
-                                {move || format!("(Limit: {})", format_speed(stats.get().down_limit.unwrap_or(0)))}
-                            </span>
-                        </Show>
-                    </summary>
-
-                    <ul class="dropdown-content z-[100] menu p-2 shadow bg-base-200 rounded-box w-40 mb-2 border border-base-300">
-                        {
-                            limits.clone().into_iter().map(|(val, label)| {
-                                let is_active = move || {
-                                    let current = stats.get().down_limit.unwrap_or(0);
-                                    (current - val).abs() < 1024
-                                };
-                                view! {
-                                    <li>
-                                        <button
-                                            class=move || if is_active() { "bg-primary/10 text-primary font-bold text-xs flex justify-between" } else { "text-xs flex justify-between" }
-                                            on:click=move |_| {
-                                                set_limit("down", val);
-                                                close_details(down_details_ref);
-                                            }
-                                        >
-                                            {label}
-                                            <Show when=is_active fallback=|| ()>
-                                                <span>"✓"</span>
-                                            </Show>
-                                        </button>
-                                    </li>
-                                }
-                            }).collect::<Vec<_>>()
-                        }
-                    </ul>
-                </details>
-
-                // --- UPLOAD SPEED DROPDOWN ---
-                <details class="dropdown dropdown-top" node_ref=up_details_ref>
-                    <summary class="flex items-center gap-2 cursor-pointer hover:text-primary transition-colors select-none list-none [&::-webkit-details-marker]:hidden outline-none">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18" />
-                        </svg>
-                        <span class="font-mono">{move || format_speed(stats.get().up_rate)}</span>
-                        <Show when=move || { stats.get().up_limit.unwrap_or(0) > 0 } fallback=|| ()>
-                            <span class="text-[10px] opacity-60">
-                                {move || format!("(Limit: {})", format_speed(stats.get().up_limit.unwrap_or(0)))}
-                            </span>
-                        </Show>
-                    </summary>
-
-                    <ul class="dropdown-content z-[100] menu p-2 shadow bg-base-200 rounded-box w-40 mb-2 border border-base-300">
-                        {
-                            limits.clone().into_iter().map(|(val, label)| {
-                                let is_active = move || {
-                                    let current = stats.get().up_limit.unwrap_or(0);
-                                    (current - val).abs() < 1024
-                                };
-                                view! {
-                                    <li>
-                                        <button
-                                            class=move || if is_active() { "bg-primary/10 text-primary font-bold text-xs flex justify-between" } else { "text-xs flex justify-between" }
-                                            on:click=move |_| {
-                                                set_limit("up", val);
-                                                close_details(up_details_ref);
-                                            }
-                                        >
-                                            {label}
-                                            <Show when=is_active fallback=|| ()>
-                                                <span>"✓"</span>
-                                            </Show>
-                                        </button>
-                                    </li>
-                                }
-                            }).collect::<Vec<_>>()
-                        }
-                    </ul>
-                </details>
-
-                <div class="ml-auto flex items-center gap-4">
-                    <details class="dropdown dropdown-top dropdown-end" node_ref=theme_details_ref>
-                        <summary class="btn btn-ghost btn-xs btn-square cursor-pointer outline-none list-none [&::-webkit-details-marker]:hidden">
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 0 0-5.78 1.128 2.25 2.25 0 0 1-2.4 2.245 4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128Zm0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.763m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42" />
-                            </svg>
-                        </summary>
-
-                        <ul class="dropdown-content z-[100] menu p-2 shadow bg-base-200 rounded-box w-52 mb-2 border border-base-300 max-h-96 overflow-y-auto">
-                            {
-                                let themes = vec![
-                                    "light", "dark", "dim", "nord", "cupcake", "dracula", "cyberpunk", "emerald", "sunset", "abyss"
-                                ];
-                                themes.into_iter().map(|theme| {
-                                    view! {
-                                        <li>
-                                            <button
-                                                class=move || if current_theme.get() == theme { "bg-primary/10 text-primary font-bold text-xs capitalize" } else { "text-xs capitalize" }
-                                                on:click=move |_| {
-                                                    set_current_theme.set(theme.to_string());
-                                                    close_details(theme_details_ref);
-                                                }
-                                            >
-                                                {theme}
-                                            </button>
-                                        </li>
-                                    }
-                                }).collect::<Vec<_>>()
-                            }
-                        </ul>
-                    </details>
-                <button
-                    class="btn btn-ghost btn-xs btn-square"
-                    title="Settings & Notification Permissions"
-                    on:click=move |_| {
-                        // Request push notification permission when settings button is clicked
-                        spawn_local(async {
-                            log::info!("Settings button clicked - requesting push notification permission");
-
-                            // Check current permission state before requesting
-                            let window = web_sys::window().expect("window should exist");
-                            let _current_perm = js_sys::Reflect::get(&window, &"Notification".into())
-                                .ok()
-                                .and_then(|n| js_sys::Reflect::get(&n, &"permission".into()).ok())
-                                .and_then(|p| p.as_string())
-                                .unwrap_or_default();
-
-                            crate::store::subscribe_to_push_notifications().await;
-
-                            // Check permission after request
-                            let new_perm = js_sys::Reflect::get(&window, &"Notification".into())
-                                .ok()
-                                .and_then(|n| js_sys::Reflect::get(&n, &"permission".into()).ok())
-                                .and_then(|p| p.as_string())
-                                .unwrap_or_default();
-
-                            if let Some(store) = use_context::<crate::store::TorrentStore>() {
-                                if new_perm == "granted" {
-                                    crate::store::show_toast_with_signal(
-                                        store.notifications,
-                                        shared::NotificationLevel::Success,
-                                        "Bildirimler etkinleştirildi! Torrent tamamlandığında bildirim alacaksınız.".to_string(),
-                                    );
-                                } else if new_perm == "denied" {
-                                    crate::store::show_toast_with_signal(
-                                        store.notifications,
-                                        shared::NotificationLevel::Error,
-                                        "Bildirim izni reddedildi. Tarayıcı ayarlarından izin verebilirsiniz.".to_string(),
-                                    );
-                                } else {
-                                    crate::store::show_toast_with_signal(
-                                        store.notifications,
-                                        shared::NotificationLevel::Warning,
-                                        "Bildirim izni verilemedi. Açılan izin penceresinde 'İzin Ver' seçeneğini seçin.".to_string(),
-                                    );
-                                }
-                            }
-                        });
-                    }
-                >
-                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.212 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                    </svg>
-                </button>
-            </div>
-        </div>
-    }
-}

frontend/src/components/layout/toolbar.rs

@@ -1,64 +1,24 @@
-use leptos::*;
+use leptos::prelude::*;
+use crate::components::ui::sidenav::{SidenavTrigger, SidenavState};
+use crate::components::torrent::add_torrent::AddTorrent;
 
 #[component]
-pub fn Toolbar() -> impl IntoView {
-    let (show_add_modal, set_show_add_modal) = create_signal(false);
-    let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
-
-    view! {
-        <div class="navbar min-h-14 h-auto bg-base-100 p-0" style="padding-top: env(safe-area-inset-top);">
-            <div class="navbar-start gap-4 px-4">
-                <label for="my-drawer" class="btn btn-square btn-ghost lg:hidden drawer-button">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
-                </label>
-
-                <div class="flex gap-2">
-                    <button
-                        class="btn btn-sm btn-primary gap-2 font-normal"
-                        title="Add Magnet Link"
-                        on:click=move |_| set_show_add_modal.set(true)
-                    >
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-                        </svg>
-                         "Add Torrent"
-                    </button>
-                </div>
-
-
+pub fn Toolbar(
+    sidenav_state: RwSignal<SidenavState>
+) -> impl IntoView {
+    let header_view = view! {
+        <header class="h-14 border-b bg-background/95 backdrop-blur-sm flex items-center justify-between px-4 sticky top-0 z-30">
+            <div class="flex items-center gap-4">
+                <SidenavTrigger data_state=sidenav_state />
+                <div class="h-4 w-px bg-border hidden md:block"></div>
+                <h2 class="text-sm font-semibold tracking-tight">"Torrents"</h2>
             </div>
 
-            <div class="navbar-end gap-2 px-4">
-                 <div class="join">
-                    <input
-                        type="text"
-                        placeholder="Search..."
-                        class="input input-sm input-bordered join-item w-full max-w-xs focus:outline-none"
-                        prop:value=move || store.search_query.get()
-                        on:input=move |ev| store.search_query.set(event_target_value(&ev))
-                        on:keydown=move |ev: web_sys::KeyboardEvent| {
-                            if ev.key() == "Escape" {
-                                store.search_query.set(String::new());
-                            }
-                        }
-                    />
-                    <Show when=move || !store.search_query.get().is_empty()>
-                        <button
-                            class="btn btn-sm btn-ghost join-item border-base-content/20 border-l-0 px-2"
-                            title="Clear Search"
-                            on:click=move |_| store.search_query.set(String::new())
-                        >
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 opacity-70">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-                            </svg>
-                        </button>
-                    </Show>
-                 </div>
+            <div class="flex items-center gap-2">
+                <AddTorrent />
             </div>
-
-            <Show when=move || show_add_modal.get()>
-                <crate::components::torrent::add_torrent::AddTorrentModal on_close=move |_| set_show_add_modal.set(false) />
-            </Show>
-        </div>
-    }
+        </header>
+    };
+    
+    header_view
 }

frontend/src/components/mod.rs

@@ -1,6 +1,7 @@
+pub mod hooks;
 pub mod context_menu;
 pub mod layout;
-pub mod modal;
-pub mod toast;
 pub mod torrent;
 pub mod auth;
+// pub mod toast; (Removed)
+pub mod ui;

frontend/src/components/modal.rs

@@ -1,56 +0,0 @@
-use leptos::*;
-
-#[component]
-pub fn Modal(
-    #[prop(into)] title: String,
-    children: Children,
-    #[prop(into)] on_confirm: Callback<()>,
-    #[prop(into)] on_cancel: Callback<()>,
-    #[prop(into)] visible: Signal<bool>,
-    #[prop(into, default = "Confirm".to_string())] confirm_text: String,
-    #[prop(into, default = "Cancel".to_string())] cancel_text: String,
-    #[prop(into, default = false)] is_danger: bool,
-) -> impl IntoView {
-    let title = store_value(title);
-    // Eagerly render children to a Fragment, which is Clone
-    let child_view = store_value(children());
-    let on_confirm = store_value(on_confirm);
-    let on_cancel = store_value(on_cancel);
-    let confirm_text = store_value(confirm_text);
-    let cancel_text = store_value(cancel_text);
-    
-    view! {
-        <Show when=move || visible.get() fallback=|| ()>
-            <div class="fixed inset-0 bg-background/80 backdrop-blur-sm flex items-end md:items-center justify-center z-[200] animate-in fade-in duration-200 sm:p-4">
-                <div class="bg-card p-6 rounded-t-2xl md:rounded-lg w-full max-w-sm shadow-xl border border-border ring-0 transform transition-all animate-in slide-in-from-bottom-10 md:slide-in-from-bottom-0 md:zoom-in-95">
-                    <h3 class="text-lg font-semibold text-card-foreground mb-4">{title.get_value()}</h3>
-                    
-                    <div class="text-muted-foreground mb-6 text-sm">
-                        {child_view.with_value(|c| c.clone())}
-                    </div>
-                    
-                    <div class="flex justify-end gap-3">
-                        <button 
-                            class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2"
-                            on:click=move |_| on_cancel.with_value(|cb| cb.call(()))
-                        >
-                            {cancel_text.get_value()}
-                        </button>
-                        <button 
-                            class=move || crate::utils::cn(format!("inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2 {}", 
-                                if is_danger { "bg-destructive text-destructive-foreground hover:bg-destructive/90" } 
-                                else { "bg-primary text-primary-foreground hover:bg-primary/90" }
-                            ))
-                            on:click=move |_| {
-                                logging::log!("Modal: Confirm clicked");
-                                on_confirm.with_value(|cb| cb.call(()))
-                            }
-                        >
-                            {confirm_text.get_value()}
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </Show>
-    }
-}

frontend/src/components/toast.rs

@@ -1,83 +1,111 @@
-use leptos::*;
+use leptos::prelude::*;
+use std::collections::HashMap;
+use uuid::Uuid;
 use shared::NotificationLevel;
 
-// ============================================================================
-// Toast Components - DaisyUI Alert Style
-// ============================================================================
-
-/// Returns the DaisyUI alert class for the notification level
-fn get_alert_class(level: &NotificationLevel) -> &'static str {
-    match level {
-        NotificationLevel::Info => "alert alert-info",
-        NotificationLevel::Success => "alert alert-success",
-        NotificationLevel::Warning => "alert alert-warning",
-        NotificationLevel::Error => "alert alert-error",
-    }
+#[derive(Clone, Debug, PartialEq)]
+pub struct Toast {
+    pub id: String,
+    pub message: String,
+    pub level: NotificationLevel,
+    pub visible: RwSignal<bool>,
 }
 
-/// Individual toast item component
-#[component]
-fn ToastItem(
-    level: NotificationLevel,
-    message: String,
-) -> impl IntoView {
-    let alert_class = get_alert_class(&level);
-    
-    // DaisyUI SVG icons
-    let icon_svg = match level {
-        NotificationLevel::Info => view! {
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-            </svg>
-        }.into_view(),
-        NotificationLevel::Success => view! {
-            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-            </svg>
-        }.into_view(),
-        NotificationLevel::Warning => view! {
-            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
-            </svg>
-        }.into_view(),
-        NotificationLevel::Error => view! {
-            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-            </svg>
-        }.into_view(),
-    };
-    
-    view! {
-        <div class=alert_class>
-            {icon_svg}
-            <span>{message}</span>
-        </div>
-    }
+#[derive(Clone, Copy)]
+pub struct ToastContext {
+    pub toasts: RwSignal<HashMap<String, Toast>>,
 }
 
-/// Main toast container - renders all active notifications
-#[component]
-pub fn ToastContainer() -> impl IntoView {
-    let store = use_context::<crate::store::TorrentStore>().expect("TorrentStore not provided");
-    let notifications = store.notifications;
+impl ToastContext {
+    pub fn add(&self, message: impl Into<String>, level: NotificationLevel) {
+        let id = Uuid::new_v4().to_string();
+        let message = message.into();
+        let toast = Toast {
+            id: id.clone(),
+            message,
+            level,
+            visible: RwSignal::new(true),
+        };
 
-    view! {
-        <div 
-            class="toast toast-end toast-bottom"
-            style="position: fixed; bottom: 20px; right: 20px; z-index: 99999;"
-        >
-            <For
-                each=move || notifications.get()
-                key=|item| item.id
-                children=move |item| {
-                    view! {
-                        <ToastItem
-                            level=item.notification.level
-                            message=item.notification.message
-                        />
-                    }
+        self.toasts.update(|m| {
+            m.insert(id.clone(), toast);
+        });
+
+        // Auto remove after 5 seconds
+        let toasts = self.toasts;
+        let id_clone = id.clone();
+        leptos::task::spawn_local(async move {
+            gloo_timers::future::TimeoutFuture::new(5000).await;
+            toasts.update(|m| {
+                if let Some(t) = m.get(&id_clone) {
+                    t.visible.set(false);
                 }
-            />
+            });
+            // Wait for animation
+            gloo_timers::future::TimeoutFuture::new(300).await;
+            toasts.update(|m| {
+                m.remove(&id_clone);
+            });
+        });
+    }
+}
+
+pub fn provide_toast_context() {
+    let toasts = RwSignal::new(HashMap::new());
+    provide_context(ToastContext { toasts });
+}
+
+#[component]
+pub fn Toaster() -> impl IntoView {
+    let context = expect_context::<ToastContext>();
+    
+    view! {
+        <div class="fixed top-4 right-4 z-[100] flex flex-col gap-2 w-full max-w-sm pointer-events-none">
+            {move || {
+                context.toasts.get().into_values().map(|toast| {
+                    view! { <ToastItem toast=toast /> }
+                }).collect::<Vec<_>>()
+            }}
+        </div>
+    }
+}
+
+#[component]
+fn ToastItem(toast: Toast) -> impl IntoView {
+    let (visible, set_visible) = (toast.visible, toast.visible.write_only());
+    
+    let base_classes = "pointer-events-auto relative w-full rounded-lg border p-4 shadow-lg transition-all duration-300 ease-in-out";
+    let color_classes = match toast.level {
+        NotificationLevel::Success => "bg-green-50 text-green-900 border-green-200 dark:bg-green-900 dark:text-green-100 dark:border-green-800",
+        NotificationLevel::Error => "bg-red-50 text-red-900 border-red-200 dark:bg-red-900 dark:text-red-100 dark:border-red-800",
+        NotificationLevel::Warning => "bg-yellow-50 text-yellow-900 border-yellow-200 dark:bg-yellow-900 dark:text-yellow-100 dark:border-yellow-800",
+        NotificationLevel::Info => "bg-blue-50 text-blue-900 border-blue-200 dark:bg-blue-900 dark:text-blue-100 dark:border-blue-800",
+    };
+
+    view! {
+        <div
+            class=move || format!("{} {} {}", 
+                base_classes, 
+                color_classes,
+                if visible.get() { "opacity-100 translate-x-0" } else { "opacity-0 translate-x-full" }
+            )
+            role="alert"
+        >
+            <div class="flex items-start gap-4">
+                <div class="flex-1">
+                    <p class="text-sm font-medium">{toast.message.clone()}</p>
+                </div>
+                <button
+                    class="inline-flex shrink-0 opacity-50 hover:opacity-100 focus:opacity-100 focus:outline-none"
+                    on:click=move |_| set_visible.set(false)
+                >
+                    <span class="sr-only">"Kapat"</span>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
+                        <line x1="18" x2="6" y1="6" y2="18"></line>
+                        <line x1="6" x2="18" y1="6" y2="18"></line>
+                    </svg>
+                </button>
+            </div>
         </div>
     }
 }

frontend/src/components/torrent/add_torrent.rs

@@ -1,104 +1,116 @@
-use leptos::*;
-use leptos::html::Dialog;
-use crate::store::{show_toast_with_signal, TorrentStore};
+use leptos::prelude::*;
+use leptos::task::spawn_local;
+use wasm_bindgen::JsCast;
+use crate::components::ui::input::{Input, InputType};
 use crate::api;
-use shared::NotificationLevel;
-
+use crate::components::ui::button::{Button, ButtonVariant};
+use crate::components::ui::dialog::{
+    Dialog, DialogTrigger, DialogContent, DialogBody, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose
+};
+use icons::Play;
 
 #[component]
-pub fn AddTorrentModal(
-    #[prop(into)]
-    on_close: Callback<()>,
-) -> impl IntoView {
-    let store = use_context::<TorrentStore>().expect("TorrentStore not provided");
-    let notifications = store.notifications;
-    
-    let dialog_ref = create_node_ref::<Dialog>();
-    let (uri, set_uri) = create_signal(String::new());
-    let (is_loading, set_loading) = create_signal(false);
-    let (error_msg, set_error_msg) = create_signal(Option::<String>::None);
+pub fn AddTorrent() -> impl IntoView {
+    view! {
+        <Dialog>
+            <DialogTrigger variant=ButtonVariant::Default class="gap-2">
+                <Play class="size-4" />
+                <span class="hidden sm:inline">"Add Torrent"</span>
+            </DialogTrigger>
+            <DialogContent id="add-torrent-dialog">
+                <AddTorrentDialogContent />
+            </DialogContent>
+        </Dialog>
+    }
+}
 
-    create_effect(move |_| {
-        if let Some(dialog) = dialog_ref.get() {
-            let _ = dialog.show_modal();
-        }
-    });
+#[component]
+pub fn AddTorrentDialogContent() -> impl IntoView {
+    let uri = RwSignal::new(String::new());
+    let is_loading = signal(false);
+    let error_msg = signal(Option::<String>::None);
 
-    let handle_submit = move |_| {
+    let handle_submit = move |ev: web_sys::SubmitEvent| {
+        ev.prevent_default();
         let uri_val = uri.get();
+        
         if uri_val.is_empty() {
-            show_toast_with_signal(notifications, NotificationLevel::Warning, "Lütfen bir Magnet URI veya URL girin");
-            set_error_msg.set(Some("Please enter a Magnet URI or URL".to_string()));
+            error_msg.1.set(Some("Lütfen bir Magnet URI veya URL girin".to_string()));
             return;
         }
 
-        set_loading.set(true);
-        set_error_msg.set(None);
+        is_loading.1.set(true);
+        error_msg.1.set(None);
 
-        let uri_val = uri_val;
         spawn_local(async move {
             match api::torrent::add(&uri_val).await {
                 Ok(_) => {
-                    logging::log!("Torrent added successfully");
-                    show_toast_with_signal(notifications, NotificationLevel::Success, "Torrent eklendi");
-                    set_loading.set(false);
-                    if let Some(dialog) = dialog_ref.get() {
-                        dialog.close();
+                    log::info!("Torrent added successfully");
+                    crate::store::toast_success("Torrent başarıyla eklendi");
+                    
+                    // Programmatically close the dialog by triggering the close button
+                    if let Some(doc) = web_sys::window().and_then(|w| w.document()) {
+                        if let Some(el) = doc.get_element_by_id("add-torrent-dialog") {
+                            if let Some(close_btn) = el.query_selector("[data-dialog-close]").ok().flatten() {
+                                let _ = close_btn.dyn_into::<web_sys::HtmlElement>().map(|btn| btn.click());
+                            }
+                        }
                     }
-                    on_close.call(());
+                    
+                    uri.set(String::new());
+                    is_loading.1.set(false);
                 }
                 Err(e) => {
-                    logging::error!("Failed to add torrent: {:?}", e);
-                    show_toast_with_signal(notifications, NotificationLevel::Error, "Torrent eklenemedi");
-                    set_error_msg.set(Some(format!("Error: {:?}", e)));
-                    set_loading.set(false);
+                    log::error!("Failed to add torrent: {:?}", e);
+                    error_msg.1.set(Some(format!("Hata: {:?}", e)));
+                    is_loading.1.set(false);
                 }
             }
         });
     };
 
-    let handle_close = move |_| {
-        if let Some(dialog) = dialog_ref.get() {
-            dialog.close();
-        }
-        on_close.call(());
-    };
-
     view! {
-        <dialog node_ref=dialog_ref class="modal modal-bottom sm:modal-middle">
-            <div class="modal-box">
-                <h3 class="font-bold text-lg">"Add Torrent"</h3>
-                <p class="py-4">"Enter a Magnet URI or direct URL to a .torrent file."</p>
+        <DialogBody>
+            <DialogHeader>
+                <DialogTitle>"Add Torrent"</DialogTitle>
+                <DialogDescription>
+                    "Enter a Magnet link or a .torrent file URL."
+                </DialogDescription>
+            </DialogHeader>
+            
+            <form on:submit=handle_submit class="space-y-4 pt-4">
+                <Input
+                    r#type=InputType::Text
+                    placeholder="magnet:?xt=urn:btih:..."
+                    bind_value=uri
+                    disabled=is_loading.0.get()
+                />
                 
-                <div class="form-control w-full">
-                    <input 
-                        type="text" 
-                        placeholder="magnet:?xt=urn:btih:..." 
-                        class="input input-bordered w-full" 
-                        prop:value=uri
-                        on:input=move |ev| set_uri.set(event_target_value(&ev))
-                        disabled=is_loading
-                    />
-                </div>
-
-                <div class="modal-action">
-                    <button class="btn" on:click=handle_close disabled=is_loading>"Cancel"</button>
-                    <button class="btn btn-primary" on:click=handle_submit disabled=is_loading>
-                        {move || if is_loading.get() {
-                            view! { <span class="loading loading-spinner"></span> "Adding..." }.into_view()
-                        } else {
-                            view! { "Add" }.into_view()
-                        }}
-                    </button>
-                </div>
-                
-                {move || error_msg.get().map(|msg| view! {
-                    <div class="text-error text-sm mt-2">{msg}</div>
+                {move || error_msg.0.get().map(|msg| view! {
+                    <div class="rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
+                        {msg}
+                    </div>
                 })}
-            </div>
-            <form method="dialog" class="modal-backdrop">
-                <button type="button" on:click=handle_close>"close"</button>
+
+                <DialogFooter class="pt-2">
+                    <DialogClose>
+                        "Cancel"
+                    </DialogClose>
+                    <Button
+                        attr:r#type="submit"
+                        attr:disabled=move || is_loading.0.get()
+                    >
+                        {move || if is_loading.0.get() {
+                            leptos::either::Either::Left(view! { 
+                                <span class="animate-spin mr-2 h-4 w-4 border-2 border-current border-t-transparent rounded-full"></span> 
+                                "Adding..." 
+                            })
+                        } else {
+                            leptos::either::Either::Right(view! { "Add" })
+                        }}
+                    </Button>
+                </DialogFooter>
             </form>
-        </dialog>
+        </DialogBody>
     }
 }

frontend/src/components/ui/accordion.rs

@@ -0,0 +1,39 @@
+use leptos::prelude::*;
+use tw_merge::tw_merge;
+
+#[component]
+pub fn Accordion(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!("w-full", class);
+    view! { <div class=class>{children()}</div> }
+}
+
+#[component]
+pub fn AccordionItem(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!("border-b", class);
+    view! { <div class=class>{children()}</div> }
+}
+
+#[component]
+pub fn AccordionHeader(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!("flex", class);
+    view! { <div class=class>{children()}</div> }
+}
+
+#[component]
+pub fn AccordionTrigger(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        class
+    );
+    view! {
+        <button type="button" class=class>
+            {children()}
+        </button>
+    }
+}
+
+#[component]
+pub fn AccordionContent(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!("overflow-hidden text-sm transition-all", class);
+    view! { <div class=class>{children()}</div> }
+}

frontend/src/components/ui/alert_dialog.rs

@@ -0,0 +1,94 @@
+use leptos::prelude::*;
+
+use crate::components::ui::button::{ButtonSize, ButtonVariant};
+use crate::components::ui::dialog::{
+    Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,
+    DialogTrigger,
+};
+
+#[component]
+pub fn AlertDialog(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    view! { <Dialog class=class>{children()}</Dialog> }
+}
+
+#[component]
+pub fn AlertDialogTrigger(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(default = ButtonVariant::Outline)] variant: ButtonVariant,
+    #[prop(default = ButtonSize::Default)] size: ButtonSize,
+) -> impl IntoView {
+    view! {
+        <DialogTrigger class=class variant=variant size=size>
+            {children()}
+        </DialogTrigger>
+    }
+}
+
+#[component]
+pub fn AlertDialogContent(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    view! {
+        <DialogContent class=class close_on_backdrop_click=false data_name_prefix="AlertDialog">
+            {children()}
+        </DialogContent>
+    }
+}
+
+#[component]
+pub fn AlertDialogBody(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    view! {
+        <DialogBody class=class attr:data-name="AlertDialogBody">
+            {children()}
+        </DialogBody>
+    }
+}
+
+#[component]
+pub fn AlertDialogHeader(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    view! {
+        <DialogHeader class=class attr:data-name="AlertDialogHeader">
+            {children()}
+        </DialogHeader>
+    }
+}
+
+#[component]
+pub fn AlertDialogTitle(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    view! {
+        <DialogTitle class=class attr:data-name="AlertDialogTitle">
+            {children()}
+        </DialogTitle>
+    }
+}
+
+#[component]
+pub fn AlertDialogDescription(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    view! {
+        <DialogDescription class=class attr:data-name="AlertDialogDescription">
+            {children()}
+        </DialogDescription>
+    }
+}
+
+#[component]
+pub fn AlertDialogFooter(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    view! {
+        <DialogFooter class=class attr:data-name="AlertDialogFooter">
+            {children()}
+        </DialogFooter>
+    }
+}
+
+#[component]
+pub fn AlertDialogClose(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(default = ButtonVariant::Outline)] variant: ButtonVariant,
+    #[prop(default = ButtonSize::Default)] size: ButtonSize,
+) -> impl IntoView {
+    view! {
+        <DialogClose class=class variant=variant size=size>
+            {children()}
+        </DialogClose>
+    }
+}

frontend/src/components/ui/badge.rs

@@ -0,0 +1,43 @@
+use leptos::prelude::*;
+use tailwind_fuse::tw_merge;
+
+#[derive(Clone, Copy, PartialEq, Eq, Default, strum::Display)]
+pub enum BadgeVariant {
+    #[default]
+    Default,
+    Secondary,
+    Outline,
+    Destructive,
+    Success,
+    Warning,
+    Info,
+}
+
+#[component]
+pub fn Badge(
+    children: Children,
+    #[prop(optional, default = BadgeVariant::Default)] variant: BadgeVariant,
+    #[prop(optional, into)] class: String,
+) -> impl IntoView {
+    let variant_classes = match variant {
+        BadgeVariant::Default => "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        BadgeVariant::Secondary => "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        BadgeVariant::Outline => "text-foreground",
+        BadgeVariant::Destructive => "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        BadgeVariant::Success => "border-transparent bg-green-500/10 text-green-600 dark:text-green-400 border-green-500/20",
+        BadgeVariant::Warning => "border-transparent bg-yellow-500/10 text-yellow-600 dark:text-yellow-400 border-yellow-500/20",
+        BadgeVariant::Info => "border-transparent bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20",
+    };
+
+    let class = tw_merge!(
+        "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+        variant_classes,
+        class
+    );
+
+    view! {
+        <div class=class>
+            {children()}
+        </div>
+    }
+}

frontend/src/components/ui/button.rs

@@ -0,0 +1,39 @@
+use leptos::prelude::*;
+use leptos_ui::variants;
+
+// TODO 💪 Loading state (demo_use_timeout_fn.rs and demo_button.rs)
+
+variants! {
+    Button {
+        base: "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive  w-fit  hover:cursor-pointer active:scale-[0.98] active:opacity-100 touch-manipulation [-webkit-tap-highlight-color:transparent] select-none [-webkit-touch-callout:none]", // Using hover:cursor-pointer as workaround for href_support.
+        variants: {
+            variant: {
+                Default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+                Destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+                Outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/5",
+                Secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+                Ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+                Accent: "bg-accent text-accent-foreground hover:bg-accent/80",
+                Link: "text-primary underline-offset-4 hover:underline",
+                //
+                Warning: "bg-warning text-warning-foreground hover:bg-warning/90",
+                Success: "bg-success text-success-foreground hover:bg-success/90",
+                Bordered: "bg-transparent border border-zinc-200 text-muted-foreground",
+            },
+            size: {
+                Default: "h-9 px-4 py-2 has-[>svg]:px-3",
+                Sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+                Lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+                Icon: "size-9",
+                //
+                Mobile: "px-6 py-3 rounded-[24px]",
+                Badge: "px-2.5 py-0.5 text-xs"
+            }
+        },
+        component: {
+            element: button,
+            support_href: true,
+            support_aria_current: true
+        }
+    }
+}

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

@@ -0,0 +1,15 @@
+use leptos::prelude::*;
+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"}
+    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"}
+}
+
+pub use components::*;

frontend/src/components/ui/checkbox.rs

@@ -0,0 +1,43 @@
+use icons::Check;
+use leptos::prelude::*;
+use tw_merge::tw_merge;
+
+#[component]
+pub fn Checkbox(
+    #[prop(into, optional)] class: String,
+    #[prop(into, optional)] checked: Signal<bool>,
+    #[prop(into, optional)] disabled: Signal<bool>,
+    #[prop(into, optional)] on_checked_change: Option<Callback<bool>>,
+    #[prop(into, optional, default = "Checkbox".to_string())] aria_label: String,
+) -> impl IntoView {
+    let checked_state = move || if checked.get() { "checked" } else { "unchecked" };
+
+    let checkbox_class = tw_merge!(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        class
+    );
+
+    view! {
+        <button
+            data-name="Checkbox"
+            class=checkbox_class
+            data-state=checked_state
+            type="button"
+            role="checkbox"
+            aria-checked=move || checked.get().to_string()
+            aria-label=aria_label
+            disabled=move || disabled.get()
+            on:click=move |_| {
+                if !disabled.get() {
+                    if let Some(callback) = on_checked_change {
+                        callback.run(!checked.get());
+                    }
+                }
+            }
+        >
+            <span data-name="CheckboxIndicator" class="flex justify-center items-center text-current transition-none">
+                {move || { checked.get().then(|| view! { <Check class="size-3.5".to_string() /> }) }}
+            </span>
+        </button>
+    }
+}

frontend/src/components/ui/context_menu.rs

@@ -0,0 +1,364 @@
+use icons::ChevronRight;
+use leptos::context::Provider;
+use leptos::prelude::*;
+use leptos_ui::clx;
+use tw_merge::*;
+use wasm_bindgen::JsCast;
+
+use crate::components::hooks::use_random::use_random_id_for;
+
+/// Programmatically close any open context menu.
+pub fn close_context_menu() {
+    let Some(document) = window().document() else {
+        return;
+    };
+    let Some(menu) = document.query_selector("[data-target='target__context'][data-state='open']").ok().flatten()
+    else {
+        return;
+    };
+    let _ = menu.set_attribute("data-state", "closed");
+    if let Some(el) = menu.dyn_ref::<web_sys::HtmlElement>() {
+        let _ = el.style().set_property("pointer-events", "none");
+    }
+}
+
+mod components {
+    use super::*;
+    clx! {ContextMenuLabel, span, "px-2 py-1.5 text-sm font-medium data-inset:pl-8", "mb-1"}
+    clx! {ContextMenuGroup, ul, "group"}
+    clx! {ContextMenuItem, li, "inline-flex gap-2 items-center w-full rounded-sm px-2 py-1.5 text-sm no-underline transition-colors duration-200 text-popover-foreground hover:bg-accent hover:text-accent-foreground [&_svg:not([class*='size-'])]:size-4"}
+    clx! {ContextMenuSubContent, ul, "context__menu_sub_content", "rounded-md border bg-card shadow-lg p-1 absolute z-[100] min-w-[160px] opacity-0 invisible translate-x-[-8px] transition-all duration-200 ease-out pointer-events-none"}
+    clx! {ContextMenuLink, a, "w-full inline-flex gap-2 items-center"}
+}
+
+pub use components::*;
+
+#[component]
+pub fn ContextMenuAction(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(optional, into)] aria_selected: Option<Signal<bool>>,
+    #[prop(optional, into)] href: Option<String>,
+) -> impl IntoView {
+    let _ctx = expect_context::<ContextMenuContext>();
+
+    let class = tw_merge!(
+        "inline-flex gap-2 items-center w-full text-sm text-left transition-colors duration-200 focus:outline-none focus-visible:outline-none text-popover-foreground [&_svg:not([class*='size-'])]:size-4",
+        class
+    );
+
+    let aria_selected_attr = move || aria_selected.map(|s| s.get()).unwrap_or(false).to_string();
+
+    if let Some(href) = href {
+        view! {
+            <a
+                data-name="ContextMenuAction"
+                class=class
+                href=href
+                aria-selected=aria_selected_attr
+                data-context-close="true"
+            >
+                {children()}
+            </a>
+        }
+        .into_any()
+    } else {
+        view! {
+            <button
+                type="button"
+                data-name="ContextMenuAction"
+                class=class
+                data-context-close="true"
+                aria-selected=aria_selected_attr
+            >
+                {children()}
+            </button>
+        }
+        .into_any()
+    }
+}
+
+#[derive(Clone)]
+struct ContextMenuContext {
+    target_id: String,
+}
+
+#[component]
+pub fn ContextMenu(children: Children) -> impl IntoView {
+    let context_target_id = use_random_id_for("context");
+
+    let ctx = ContextMenuContext { target_id: context_target_id.clone() };
+
+    view! {
+        <Provider value=ctx>
+            <style>
+                "
+                /* Submenu Styles */
+                .context__menu_sub_content {
+                    position: absolute;
+                    inset-inline-start: calc(100% + 8px);
+                    inset-block-start: -4px;
+                    z-index: 100;
+                    min-inline-size: 160px;
+                    opacity: 0;
+                    visibility: hidden;
+                    transform: translateX(-8px);
+                    transition: all 0.2s ease-out;
+                    pointer-events: none;
+                }
+                
+                .context__menu_sub_trigger:hover .context__menu_sub_content {
+                    opacity: 1;
+                    visibility: visible;
+                    transform: translateX(0);
+                    pointer-events: auto;
+                }
+                "
+            </style>
+
+            <div data-name="ContextMenu" class="contents">
+                {children()}
+            </div>
+        </Provider>
+    }
+}
+
+/// Wrapper that triggers the context menu on right-click.
+/// The `on_open` callback is triggered when the context menu opens (right-click).
+#[component]
+pub fn ContextMenuTrigger(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(optional)] on_open: Option<Callback<()>>,
+) -> impl IntoView {
+    let ctx = expect_context::<ContextMenuContext>();
+    let trigger_class = tw_merge!("contents", class);
+
+    view! {
+        <div
+            class=trigger_class
+            data-name="ContextMenuTrigger"
+            data-context-trigger=ctx.target_id
+            on:contextmenu=move |_e: web_sys::MouseEvent| {
+                if let Some(cb) = on_open {
+                    cb.run(());
+                }
+            }
+        >
+            {children()}
+        </div>
+    }
+}
+
+/// Content of the context menu that appears on right-click.
+/// The `on_close` callback is triggered when the menu closes (click outside, ESC key, or action click).
+#[component]
+pub fn ContextMenuContent(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(optional)] on_close: Option<Callback<()>>,
+) -> impl IntoView {
+    let ctx = expect_context::<ContextMenuContext>();
+
+    let base_classes = "fixed z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md transition-all duration-200 data-[state=closed]:opacity-0 data-[state=closed]:scale-95 data-[state=open]:opacity-100 data-[state=open]:scale-100";
+
+    let class = tw_merge!(base_classes, class);
+
+    let target_id_for_script = ctx.target_id.clone();
+
+    view! {
+        <div
+            data-name="ContextMenuContent"
+            class=class
+            // Listen for custom 'contextmenuclose' event dispatched by JS when menu closes
+            on:contextmenuclose=move |_: web_sys::CustomEvent| {
+                if let Some(cb) = on_close {
+                    cb.run(());
+                }
+            }
+            id=ctx.target_id
+            data-target="target__context"
+            data-state="closed"
+            style="pointer-events: none;"
+        >
+            {children()}
+        </div>
+
+        <script>
+            {format!(
+                r#"
+                (function() {{
+                    const setupContextMenu = () => {{
+                        const menu = document.querySelector('#{}');
+                        const trigger = document.querySelector('[data-context-trigger="{}"]');
+
+                        if (!menu || !trigger) {{
+                            setTimeout(setupContextMenu, 50);
+                            return;
+                        }}
+
+                        if (menu.hasAttribute('data-initialized')) {{
+                            return;
+                        }}
+                        menu.setAttribute('data-initialized', 'true');
+
+                        let isOpen = false;
+
+                        const updatePosition = (x, y) => {{
+                            const menuRect = menu.getBoundingClientRect();
+                            const viewportHeight = window.innerHeight;
+                            const viewportWidth = window.innerWidth;
+
+                            // Calculate position, ensuring menu stays within viewport
+                            let left = x;
+                            let top = y;
+
+                            // Adjust if menu would go off right edge
+                            if (x + menuRect.width > viewportWidth) {{
+                                left = x - menuRect.width;
+                            }}
+
+                            // Adjust if menu would go off bottom edge
+                            if (y + menuRect.height > viewportHeight) {{
+                                top = y - menuRect.height;
+                            }}
+
+                            menu.style.left = `${{left}}px`;
+                            menu.style.top = `${{top}}px`;
+                            menu.style.transformOrigin = 'top left';
+                        }};
+
+                        const openMenu = (x, y) => {{
+                            isOpen = true;
+
+                            // Close any other open context menus
+                            const allMenus = document.querySelectorAll('[data-target="target__context"]');
+                            allMenus.forEach(m => {{
+                                if (m !== menu && m.getAttribute('data-state') === 'open') {{
+                                    m.setAttribute('data-state', 'closed');
+                                    m.style.pointerEvents = 'none';
+                                }}
+                            }});
+
+                            menu.setAttribute('data-state', 'open');
+                            menu.style.visibility = 'hidden';
+                            menu.style.pointerEvents = 'auto';
+
+                            // Force reflow
+                            menu.offsetHeight;
+
+                            updatePosition(x, y);
+                            menu.style.visibility = 'visible';
+
+                            // Lock scroll
+                            if (window.ScrollLock) {{
+                                window.ScrollLock.lock();
+                            }}
+
+                            setTimeout(() => {{
+                                document.addEventListener('click', handleClickOutside);
+                                document.addEventListener('contextmenu', handleContextOutside);
+                            }}, 0);
+                        }};
+
+                        const closeMenu = () => {{
+                            isOpen = false;
+                            menu.setAttribute('data-state', 'closed');
+                            menu.style.pointerEvents = 'none';
+                            document.removeEventListener('click', handleClickOutside);
+                            document.removeEventListener('contextmenu', handleContextOutside);
+
+                            // Dispatch custom event for Leptos to listen to
+                            menu.dispatchEvent(new CustomEvent('contextmenuclose', {{ bubbles: false }}));
+
+                            if (window.ScrollLock) {{
+                                window.ScrollLock.unlock(200);
+                            }}
+                        }};
+
+                        const handleClickOutside = (e) => {{
+                            if (!menu.contains(e.target)) {{
+                                closeMenu();
+                            }}
+                        }};
+
+                        const handleContextOutside = (e) => {{
+                            if (!trigger.contains(e.target)) {{
+                                closeMenu();
+                            }}
+                        }};
+
+                        // Right-click on trigger
+                        trigger.addEventListener('contextmenu', (e) => {{
+                            e.preventDefault();
+                            e.stopPropagation();
+
+                            if (isOpen) {{
+                                closeMenu();
+                            }}
+                            openMenu(e.clientX, e.clientY);
+                        }});
+
+                        // Close when action is clicked
+                        const actions = menu.querySelectorAll('[data-context-close]');
+                        actions.forEach(action => {{
+                            action.addEventListener('click', () => {{
+                                closeMenu();
+                            }});
+                        }});
+
+                        // Handle ESC key
+                        document.addEventListener('keydown', (e) => {{
+                            if (e.key === 'Escape' && isOpen) {{
+                                e.preventDefault();
+                                closeMenu();
+                            }}
+                        }});
+                    }};
+
+                    if (document.readyState === 'loading') {{
+                        document.addEventListener('DOMContentLoaded', setupContextMenu);
+                    }} else {{
+                        setupContextMenu();
+                    }}
+                }})();
+                "#,
+                target_id_for_script,
+                target_id_for_script,
+            )}
+        </script>
+    }
+}
+
+#[component]
+pub fn ContextMenuSub(children: Children) -> impl IntoView {
+    clx! {ContextMenuSubRoot, li, "context__menu_sub_trigger", " relative inline-flex relative gap-2 items-center py-1.5 px-2 w-full text-sm no-underline rounded-sm transition-colors duration-200 cursor-pointer text-popover-foreground [&_svg:not([class*='size-'])]:size-4 hover:bg-accent hover:text-accent-foreground"}
+
+    view! { <ContextMenuSubRoot>{children()}</ContextMenuSubRoot> }
+}
+
+#[component]
+pub fn ContextMenuSubTrigger(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!("flex items-center justify-between w-full", class);
+
+    view! {
+        <span data-name="ContextMenuSubTrigger" class=class>
+            <span class="flex gap-2 items-center">{children()}</span>
+            <ChevronRight class="opacity-70 size-4" />
+        </span>
+    }
+}
+
+#[component]
+pub fn ContextMenuSubItem(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!(
+        "inline-flex gap-2 items-center w-full rounded-sm px-3 py-2 text-sm transition-all duration-150 ease text-popover-foreground hover:bg-accent hover:text-accent-foreground cursor-pointer hover:translate-x-[2px]",
+        class
+    );
+
+    view! {
+        <li data-name="ContextMenuSubItem" class=class data-context-close="true">
+            {children()}
+        </li>
+    }
+}

frontend/src/components/ui/data_table.rs

@@ -0,0 +1,6 @@
+// * Reuse @table.rs
+pub use crate::components::ui::table::{
+    Table as DataTable, TableBody as DataTableBody, TableCaption as DataTableCaption, TableCell as DataTableCell,
+    TableFooter as DataTableFooter, TableHead as DataTableHead, TableHeader as DataTableHeader,
+    TableRow as DataTableRow, TableWrapper as DataTableWrapper,
+};

frontend/src/components/ui/dialog.rs

@@ -0,0 +1,238 @@
+use icons::X;
+use leptos::context::Provider;
+use leptos::prelude::*;
+use leptos_ui::clx;
+use tw_merge::*;
+
+use crate::components::hooks::use_random::use_random_id_for;
+use crate::components::ui::button::{Button, ButtonSize, ButtonVariant};
+
+mod components {
+    use super::*;
+    clx! {DialogBody, div, "flex flex-col gap-4"}
+    clx! {DialogHeader, div, "flex flex-col gap-2 text-center sm:text-left"}
+    clx! {DialogTitle, h3, "text-lg leading-none font-semibold"}
+    clx! {DialogDescription, p, "text-muted-foreground text-sm"}
+    clx! {DialogFooter, footer, "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"}
+}
+
+pub use components::*;
+
+/* ========================================================== */
+/*                     ✨ FUNCTIONS ✨                        */
+/* ========================================================== */
+
+#[derive(Clone)]
+struct DialogContext {
+    target_id: String,
+}
+
+#[component]
+pub fn Dialog(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let dialog_target_id = use_random_id_for("dialog");
+
+    let ctx = DialogContext { target_id: dialog_target_id.clone() };
+
+    let merged_class = tw_merge!("w-fit", class);
+
+    view! {
+        <Provider value=ctx>
+            <div class=merged_class data-name="__Dialog">
+                {children()}
+            </div>
+        </Provider>
+    }
+}
+
+#[component]
+pub fn DialogTrigger(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(default = ButtonVariant::Outline)] variant: ButtonVariant,
+    #[prop(default = ButtonSize::Default)] size: ButtonSize,
+) -> impl IntoView {
+    let ctx = expect_context::<DialogContext>();
+    let trigger_id = format!("trigger_{}", ctx.target_id);
+
+    view! {
+        <Button
+            class=class
+            attr:id=trigger_id
+            attr:tabindex="0"
+            attr:data-dialog-trigger=ctx.target_id
+            variant=variant
+            size=size
+        >
+            {children()}
+        </Button>
+    }
+}
+
+#[component]
+pub fn DialogContent(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(optional, into)] id: Option<String>,
+    #[prop(into, optional)] hide_close_button: Option<bool>,
+    #[prop(default = true)] close_on_backdrop_click: bool,
+    #[prop(default = "Dialog")] data_name_prefix: &'static str,
+) -> impl IntoView {
+    let ctx = expect_context::<DialogContext>();
+    let merged_class = tw_merge!(
+        "relative bg-background border rounded-2xl shadow-lg p-6 w-full max-w-[calc(100%-2rem)] max-h-[85vh] fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] z-100 transition-all duration-200 data-[state=closed]:opacity-0 data-[state=closed]:scale-95 data-[state=open]:opacity-100 data-[state=open]:scale-100",
+        class
+    );
+
+    let backdrop_data_name = format!("{}Backdrop", data_name_prefix);
+    let content_data_name = format!("{}Content", data_name_prefix);
+
+    let target_id_clone = ctx.target_id.clone();
+    let backdrop_id = format!("{}_backdrop", ctx.target_id);
+    let backdrop_id_for_script = backdrop_id.clone();
+    let backdrop_behavior = if close_on_backdrop_click { "auto" } else { "manual" };
+
+    // Use provided id or fallback to random target_id
+    let final_id = id.unwrap_or_else(|| ctx.target_id.clone());
+    let final_id_for_script = final_id.clone();
+    let trigger_id_for_script = ctx.target_id.clone();
+
+    view! {
+        <script src="/lock_scroll.js"></script>
+
+        <div
+            data-name=backdrop_data_name
+            id=backdrop_id
+            class="fixed inset-0 transition-opacity duration-200 pointer-events-none z-60 bg-black/50 data-[state=closed]:opacity-0 data-[state=open]:opacity-100"
+            data-state="closed"
+        />
+
+        <div
+            data-name=content_data_name
+            class=merged_class
+            id=final_id
+            data-target="target__dialog"
+            data-state="closed"
+            data-backdrop=backdrop_behavior
+            style="pointer-events: none;"
+        >
+            <button
+                type="button"
+                class=format!(
+                    "absolute top-4 right-4 p-1 rounded-sm focus:ring-2 focus:ring-offset-2 focus:outline-none [&_svg:not([class*='size-'])]:size-4 focus:ring-ring{}",
+                    if hide_close_button.unwrap_or(false) { " hidden" } else { "" },
+                )
+                data-dialog-close=target_id_clone.clone()
+                aria-label="Close dialog"
+            >
+                <span class="hidden">"Close Dialog"</span>
+                <X />
+            </button>
+
+            {children()}
+        </div>
+
+        <script>
+            {format!(
+                r#"
+                (function() {{
+                    const setupDialog = () => {{
+                        const dialog = document.querySelector('#{}');
+                        const backdrop = document.querySelector('#{}');
+                        const trigger = document.querySelector('[data-dialog-trigger="{}"]');
+
+                        if (!dialog || !backdrop || !trigger) {{
+                            setTimeout(setupDialog, 50);
+                            return;
+                        }}
+
+                        if (dialog.hasAttribute('data-initialized')) {{
+                            return;
+                        }}
+                        dialog.setAttribute('data-initialized', 'true');
+
+                        const openDialog = () => {{
+                            if (window.ScrollLock) window.ScrollLock.lock();
+                            dialog.setAttribute('data-state', 'open');
+                            backdrop.setAttribute('data-state', 'open');
+                            dialog.style.pointerEvents = 'auto';
+                            backdrop.style.pointerEvents = 'auto';
+                        }};
+
+                        const closeDialog = () => {{
+                            dialog.setAttribute('data-state', 'closed');
+                            backdrop.setAttribute('data-state', 'closed');
+                            dialog.style.pointerEvents = 'none';
+                            backdrop.style.pointerEvents = 'none';
+                            window.ScrollLock.unlock(200);
+                        }};
+
+                        trigger.addEventListener('click', openDialog);
+                        dialog.querySelectorAll('[data-dialog-close]').forEach(btn => {{
+                            btn.addEventListener('click', closeDialog);
+                        }});
+                        backdrop.addEventListener('click', () => {{
+                            if (dialog.getAttribute('data-backdrop') === 'auto') {{
+                                closeDialog();
+                            }}
+                        }});
+                        document.addEventListener('keydown', (e) => {{
+                            if (e.key === 'Escape' && dialog.getAttribute('data-state') === 'open') {{
+                                e.preventDefault();
+                                closeDialog();
+                            }}
+                        }});
+                    }};
+                    setupDialog();
+                }})();
+                "#,
+                final_id_for_script,
+                backdrop_id_for_script,
+                trigger_id_for_script,
+            )}
+        </script>
+    }
+}
+
+#[component]
+pub fn DialogClose(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(default = ButtonVariant::Outline)] variant: ButtonVariant,
+    #[prop(default = ButtonSize::Default)] size: ButtonSize,
+) -> impl IntoView {
+    let ctx = expect_context::<DialogContext>();
+
+    view! {
+        <Button
+            class=class
+            attr:data-dialog-close=ctx.target_id
+            attr:aria-label="Close dialog"
+            variant=variant
+            size=size
+        >
+            {children()}
+        </Button>
+    }
+}
+
+#[component]
+pub fn DialogAction(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(default = ButtonVariant::Default)] variant: ButtonVariant,
+    #[prop(default = ButtonSize::Default)] size: ButtonSize,
+) -> impl IntoView {
+    let ctx = expect_context::<DialogContext>();
+
+    view! {
+        <Button
+            class=class
+            attr:data-dialog-close=ctx.target_id
+            attr:aria-label="Close dialog"
+            variant=variant
+            size=size
+        >
+            {children()}
+        </Button>
+    }
+}

frontend/src/components/ui/dropdown_menu.rs

@@ -0,0 +1,536 @@
+use icons::{Check, ChevronRight};
+use leptos::context::Provider;
+use leptos::prelude::*;
+use leptos_ui::clx;
+use tw_merge::*;
+
+use crate::components::hooks::use_random::use_random_id_for;
+pub use crate::components::ui::separator::Separator as DropdownMenuSeparator;
+
+mod components {
+    use super::*;
+    clx! {DropdownMenuLabel, span, "px-2 py-1.5 text-sm font-medium data-inset:pl-8", "mb-1"}
+    clx! {DropdownMenuGroup, ul, "group"}
+    clx! {DropdownMenuItem, li, "inline-flex gap-2 items-center w-full rounded-sm px-2 py-1.5 text-sm no-underline transition-colors duration-200 text-popover-foreground hover:bg-accent hover:text-accent-foreground [&_svg:not([class*='size-'])]:size-4"}
+    clx! {DropdownMenuSubContent, ul, "dropdown__menu_sub_content", "rounded-md border bg-card shadow-lg p-1 absolute z-[100] min-w-[160px] opacity-0 invisible translate-x-[-8px] transition-all duration-200 ease-out pointer-events-none"}
+    clx! {DropdownMenuLink, a, "w-full inline-flex gap-2 items-center"}
+}
+
+pub use components::*;
+
+/* ========================================================== */
+/*                     RADIO GROUP                            */
+/* ========================================================== */
+
+#[derive(Clone)]
+struct DropdownMenuRadioContext<T: Clone + PartialEq + Send + Sync + 'static> {
+    value_signal: RwSignal<T>,
+}
+
+/// A group of radio items where only one can be selected at a time.
+#[component]
+pub fn DropdownMenuRadioGroup<T>(
+    children: Children,
+    /// The signal holding the current selected value
+    value: RwSignal<T>,
+) -> impl IntoView
+where
+    T: Clone + PartialEq + Send + Sync + 'static,
+{
+    let ctx = DropdownMenuRadioContext { value_signal: value };
+
+    view! {
+        <Provider value=ctx>
+            <ul data-name="DropdownMenuRadioGroup" role="group" class="group">
+                {children()}
+            </ul>
+        </Provider>
+    }
+}
+
+/// A radio item that shows a checkmark when selected.
+#[component]
+pub fn DropdownMenuRadioItem<T>(
+    children: Children,
+    /// The value this item represents
+    value: T,
+    #[prop(optional, into)] class: String,
+) -> impl IntoView
+where
+    T: Clone + PartialEq + Send + Sync + 'static,
+{
+    let ctx = expect_context::<DropdownMenuRadioContext<T>>();
+
+    let value_for_check = value.clone();
+    let value_for_click = value.clone();
+    let is_selected = move || ctx.value_signal.get() == value_for_check;
+
+    let merged_class = tw_merge!(
+        "group inline-flex gap-2 items-center w-full rounded-sm pl-2 pr-2 py-1.5 text-sm cursor-pointer no-underline transition-colors duration-200 text-popover-foreground hover:bg-accent hover:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
+        class
+    );
+
+    view! {
+        <li
+            data-name="DropdownMenuRadioItem"
+            class=merged_class
+            role="menuitemradio"
+            aria-checked=move || is_selected().to_string()
+            data-dropdown-close="true"
+            on:click=move |_| {
+                ctx.value_signal.set(value_for_click.clone());
+            }
+        >
+            {children()}
+            <Check class="ml-auto opacity-0 size-4 text-muted-foreground group-aria-checked:opacity-100" />
+        </li>
+    }
+}
+
+/// An action item in a dropdown menu (no checkmark, just triggers an action).
+#[component]
+pub fn DropdownMenuAction(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(optional, into)] href: Option<String>,
+) -> impl IntoView {
+    let _ctx = expect_context::<DropdownMenuContext>();
+
+    let class = tw_merge!(
+        "inline-flex gap-2 items-center w-full text-sm text-left transition-colors duration-200 focus:outline-none focus-visible:outline-none text-popover-foreground [&_svg:not([class*='size-'])]:size-4 hover:bg-accent hover:text-accent-foreground",
+        class
+    );
+
+    if let Some(href) = href {
+        // Render as <a> tag when href is provided
+        view! {
+            <a data-name="DropdownMenuAction" class=class href=href data-dropdown-close="true">
+                {children()}
+            </a>
+
+            <script>
+                {r#"
+                (function() {
+                const link = document.currentScript.previousElementSibling;
+                if (!link) return;
+                
+                link.addEventListener('click', function() {
+                // Close dropdown on route change after navigation
+                let currentPath = window.location.pathname;
+                const checkRouteChange = () => {
+                if (window.location.pathname !== currentPath) {
+                currentPath = window.location.pathname;
+                
+                // Find and close the dropdown
+                const dropdown = link.closest('[data-target="target__dropdown"]');
+                if (dropdown) {
+                dropdown.setAttribute('data-state', 'closed');
+                dropdown.style.pointerEvents = 'none';
+                
+                // Unlock scroll
+                if (window.ScrollLock) {
+                window.ScrollLock.unlock(200);
+                }
+                }
+                
+                clearInterval(routeCheckInterval);
+                }
+                };
+                
+                const routeCheckInterval = setInterval(checkRouteChange, 50);
+                
+                // Clear interval after 2 seconds to prevent memory leaks
+                setTimeout(() => clearInterval(routeCheckInterval), 2000);
+                });
+                })();
+                "#}
+            </script>
+        }
+        .into_any()
+    } else {
+        // Render as <button> tag when no href
+        view! {
+            <button type="button" data-name="DropdownMenuAction" class=class data-dropdown-close="true">
+                {children()}
+            </button>
+        }
+        .into_any()
+    }
+}
+
+/* ========================================================== */
+/*                     ✨ FUNCTIONS ✨                        */
+/* ========================================================== */
+
+#[derive(Clone, Copy, PartialEq, Eq, Default)]
+pub enum DropdownMenuAlign {
+    #[default]
+    Start,
+    StartOuter,
+    End,
+    EndOuter,
+    Center,
+}
+
+#[derive(Clone)]
+struct DropdownMenuContext {
+    target_id: String,
+    align: DropdownMenuAlign,
+}
+
+#[component]
+pub fn DropdownMenu(
+    children: Children,
+    #[prop(default = DropdownMenuAlign::default())] align: DropdownMenuAlign,
+) -> impl IntoView {
+    let dropdown_target_id = use_random_id_for("dropdown");
+
+    let ctx = DropdownMenuContext { target_id: dropdown_target_id.clone(), align };
+
+    view! {
+        <Provider value=ctx>
+            <style>
+                "
+                /* Submenu Styles */
+                .dropdown__menu_sub_content {
+                    position: absolute;
+                    inset-inline-start: calc(100% + 8px);
+                    inset-block-start: -4px;
+                    z-index: 100;
+                    min-inline-size: 160px;
+                    opacity: 0;
+                    visibility: hidden;
+                    transform: translateX(-8px);
+                    transition: all 0.2s ease-out;
+                    pointer-events: none;
+                }
+                
+                .dropdown__menu_sub_trigger:hover .dropdown__menu_sub_content {
+                    opacity: 1;
+                    visibility: visible;
+                    transform: translateX(0);
+                    pointer-events: auto;
+                }
+                "
+            </style>
+
+            <div data-name="DropdownMenu">{children()}</div>
+        </Provider>
+    }
+}
+
+#[component]
+pub fn DropdownMenuTrigger(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let ctx = expect_context::<DropdownMenuContext>();
+    let button_class = tw_merge!(
+        "px-4 py-2 h-9 inline-flex justify-center items-center text-sm font-medium whitespace-nowrap rounded-md transition-colors w-fit focus:outline-none focus:ring-1 focus:ring-ring focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4  border bg-background border-input hover:bg-accent hover:text-accent-foreground",
+        class
+    );
+
+    view! {
+        <button
+            type="button"
+            class=button_class
+            data-name="DropdownMenuTrigger"
+            data-dropdown-trigger=ctx.target_id
+            tabindex="0"
+        >
+            {children()}
+        </button>
+    }
+}
+
+#[derive(Clone, Copy, PartialEq, Eq, Default)]
+pub enum DropdownMenuPosition {
+    #[default]
+    Auto,
+    Top,
+    Bottom,
+}
+
+#[component]
+pub fn DropdownMenuContent(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(default = DropdownMenuPosition::default())] position: DropdownMenuPosition,
+) -> impl IntoView {
+    let ctx = expect_context::<DropdownMenuContext>();
+
+    let base_classes = "z-50 p-1 rounded-md border bg-card shadow-md h-fit fixed transition-all duration-200 data-[state=closed]:opacity-0 data-[state=closed]:scale-95 data-[state=open]:opacity-100 data-[state=open]:scale-100";
+    let width_class = match ctx.align {
+        DropdownMenuAlign::Center => "min-w-full",
+        _ => "w-[180px]",
+    };
+
+    let class = tw_merge!(width_class, base_classes, class);
+
+    let target_id_for_script = ctx.target_id.clone();
+    let align_for_script = match ctx.align {
+        DropdownMenuAlign::Start => "start",
+        DropdownMenuAlign::StartOuter => "start-outer",
+        DropdownMenuAlign::End => "end",
+        DropdownMenuAlign::EndOuter => "end-outer",
+        DropdownMenuAlign::Center => "center",
+    };
+
+    let position_for_script = match position {
+        DropdownMenuPosition::Auto => "auto",
+        DropdownMenuPosition::Top => "top",
+        DropdownMenuPosition::Bottom => "bottom",
+    };
+
+    view! {
+        <div
+            data-name="DropdownMenuContent"
+            class=class
+            id=ctx.target_id
+            data-target="target__dropdown"
+            data-state="closed"
+            data-align=align_for_script
+            data-position=position_for_script
+            style="pointer-events: none;"
+        >
+            {children()}
+        </div>
+
+        <script>
+            {format!(
+                r#"
+                (function() {{
+                    const setupDropdown = () => {{
+                        const dropdown = document.querySelector('#{}');
+                        const trigger = document.querySelector('[data-dropdown-trigger="{}"]');
+
+                        if (!dropdown || !trigger) {{
+                            setTimeout(setupDropdown, 50);
+                            return;
+                        }}
+
+                        if (dropdown.hasAttribute('data-initialized')) {{
+                            return;
+                        }}
+                        dropdown.setAttribute('data-initialized', 'true');
+
+                        let isOpen = false;
+
+                        const updatePosition = () => {{
+                            const triggerRect = trigger.getBoundingClientRect();
+                            const dropdownRect = dropdown.getBoundingClientRect();
+                            const viewportHeight = window.innerHeight;
+                            const viewportWidth = window.innerWidth;
+                            const spaceBelow = viewportHeight - triggerRect.bottom;
+                            const spaceAbove = triggerRect.top;
+
+                            const align = dropdown.getAttribute('data-align') || 'start';
+                            const position = dropdown.getAttribute('data-position') || 'auto';
+
+                            // Determine if we should position above
+                            let shouldPositionAbove = false;
+                            if (position === 'top') {{
+                                shouldPositionAbove = true;
+                            }} else if (position === 'bottom') {{
+                                shouldPositionAbove = false;
+                            }} else {{
+                                // Auto: position above if there's space above AND not enough space below
+                                shouldPositionAbove = spaceAbove >= dropdownRect.height && spaceBelow < dropdownRect.height;
+                            }}
+
+                            switch (align) {{
+                                case 'start':
+                                    if (shouldPositionAbove) {{
+                                        dropdown.style.top = `${{triggerRect.top - dropdownRect.height - 6}}px`;
+                                        dropdown.style.transformOrigin = 'left bottom';
+                                    }} else {{
+                                        dropdown.style.top = `${{triggerRect.bottom + 6}}px`;
+                                        dropdown.style.transformOrigin = 'left top';
+                                    }}
+                                    dropdown.style.left = `${{triggerRect.left}}px`;
+                                    break;
+
+                                case 'end':
+                                    if (shouldPositionAbove) {{
+                                        dropdown.style.top = `${{triggerRect.top - dropdownRect.height - 6}}px`;
+                                        dropdown.style.transformOrigin = 'right bottom';
+                                    }} else {{
+                                        dropdown.style.top = `${{triggerRect.bottom + 6}}px`;
+                                        dropdown.style.transformOrigin = 'right top';
+                                    }}
+                                    dropdown.style.left = `${{triggerRect.right - dropdownRect.width}}px`;
+                                    break;
+
+                                case 'start-outer':
+                                    if (shouldPositionAbove) {{
+                                        dropdown.style.top = `${{triggerRect.top - dropdownRect.height - 6}}px`;
+                                        dropdown.style.transformOrigin = 'right bottom';
+                                    }} else {{
+                                        dropdown.style.top = `${{triggerRect.top}}px`;
+                                        dropdown.style.transformOrigin = 'right top';
+                                    }}
+                                    dropdown.style.left = `${{triggerRect.left - dropdownRect.width - 16}}px`;
+                                    break;
+
+                                case 'end-outer':
+                                    if (shouldPositionAbove) {{
+                                        dropdown.style.top = `${{triggerRect.top - dropdownRect.height - 6}}px`;
+                                        dropdown.style.transformOrigin = 'left bottom';
+                                    }} else {{
+                                        dropdown.style.top = `${{triggerRect.top}}px`;
+                                        dropdown.style.transformOrigin = 'left top';
+                                    }}
+                                    dropdown.style.left = `${{triggerRect.right + 8}}px`;
+                                    break;
+
+                                case 'center':
+                                    if (shouldPositionAbove) {{
+                                        dropdown.style.top = `${{triggerRect.top - dropdownRect.height - 6}}px`;
+                                        dropdown.style.transformOrigin = 'center bottom';
+                                    }} else {{
+                                        dropdown.style.top = `${{triggerRect.bottom + 6}}px`;
+                                        dropdown.style.transformOrigin = 'center top';
+                                    }}
+                                    dropdown.style.left = `${{triggerRect.left}}px`;
+                                    dropdown.style.minWidth = `${{triggerRect.width}}px`;
+                                    break;
+                            }}
+                        }};
+
+                        const openDropdown = () => {{
+                            isOpen = true;
+
+                            // Set state to open first to remove scale transform for accurate measurements
+                            dropdown.setAttribute('data-state', 'open');
+
+                            // Make dropdown invisible but rendered to measure true height
+                            dropdown.style.visibility = 'hidden';
+                            dropdown.style.pointerEvents = 'auto';
+
+                            // Force reflow to ensure height is calculated
+                            dropdown.offsetHeight;
+
+                            // Calculate position with accurate height
+                            updatePosition();
+
+                            // Now make it visible
+                            dropdown.style.visibility = 'visible';
+
+                            // Lock all scrollable elements
+                            window.ScrollLock.lock();
+
+                            // Close on click outside
+                            setTimeout(() => {{
+                                document.addEventListener('click', handleClickOutside);
+                            }}, 0);
+                        }};
+
+                        const closeDropdown = () => {{
+                            isOpen = false;
+                            dropdown.setAttribute('data-state', 'closed');
+                            dropdown.style.pointerEvents = 'none';
+                            document.removeEventListener('click', handleClickOutside);
+
+                            // Unlock scroll after animation (200ms delay)
+                            window.ScrollLock.unlock(200);
+                        }};
+
+                        const handleClickOutside = (e) => {{
+                            if (!dropdown.contains(e.target) && !trigger.contains(e.target)) {{
+                                closeDropdown();
+                            }}
+                        }};
+
+                        // Toggle dropdown when trigger is clicked
+                        trigger.addEventListener('click', (e) => {{
+                            e.stopPropagation();
+
+                            // Check if any other dropdown is open
+                            const allDropdowns = document.querySelectorAll('[data-target=\"target__dropdown\"]');
+                            let otherDropdownOpen = false;
+                            allDropdowns.forEach(dd => {{
+                                if (dd !== dropdown && dd.getAttribute('data-state') === 'open') {{
+                                    otherDropdownOpen = true;
+                                    dd.setAttribute('data-state', 'closed');
+                                    dd.style.pointerEvents = 'none';
+                                    // Unlock scroll
+                                    if (window.ScrollLock) {{
+                                        window.ScrollLock.unlock(200);
+                                    }}
+                                }}
+                            }});
+
+                            // If another dropdown was open, just close it and don't open this one
+                            if (otherDropdownOpen) {{
+                                return;
+                            }}
+
+                            // Normal toggle behavior
+                            if (isOpen) {{
+                                closeDropdown();
+                            }} else {{
+                                openDropdown();
+                            }}
+                        }});
+
+                        // Close when action is clicked
+                        const actions = dropdown.querySelectorAll('[data-dropdown-close]');
+                        actions.forEach(action => {{
+                            action.addEventListener('click', () => {{
+                                closeDropdown();
+                            }});
+                        }});
+
+                        // Handle ESC key to close
+                        document.addEventListener('keydown', (e) => {{
+                            if (e.key === 'Escape' && isOpen) {{
+                                e.preventDefault();
+                                closeDropdown();
+                            }}
+                        }});
+                    }};
+
+                    if (document.readyState === 'loading') {{
+                        document.addEventListener('DOMContentLoaded', setupDropdown);
+                    }} else {{
+                        setupDropdown();
+                    }}
+                }})();
+                "#,
+                target_id_for_script,
+                target_id_for_script,
+            )}
+        </script>
+    }
+}
+
+#[component]
+pub fn DropdownMenuSub(children: Children) -> impl IntoView {
+    // TODO. Find a better way for dropdown__menu_sub_trigger.
+    clx! {DropdownMenuSubRoot, li, "dropdown__menu_sub_trigger", " relative inline-flex relative gap-2 items-center py-1.5 px-2 w-full text-sm no-underline rounded-sm transition-colors duration-200 cursor-pointer text-popover-foreground [&_svg:not([class*='size-'])]:size-4 hover:bg-accent hover:text-accent-foreground"}
+
+    view! { <DropdownMenuSubRoot>{children()}</DropdownMenuSubRoot> }
+}
+
+#[component]
+pub fn DropdownMenuSubTrigger(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!("flex items-center justify-between w-full", class);
+
+    view! {
+        <span attr:data-name="DropdownMenuSubTrigger" class=class>
+            <span class="flex gap-2 items-center">{children()}</span>
+            <ChevronRight class="opacity-70 size-4" />
+        </span>
+    }
+}
+
+#[component]
+pub fn DropdownMenuSubItem(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!(
+        "inline-flex gap-2 items-center w-full rounded-sm px-3 py-2 text-sm transition-all duration-150 ease text-popover-foreground hover:bg-accent hover:text-accent-foreground cursor-pointer hover:translate-x-[2px]",
+        class
+    );
+
+    view! {
+        <li data-name="DropdownMenuSubItem" class=class data-dropdown-close="true">
+            {children()}
+        </li>
+    }
+}

frontend/src/components/ui/empty.rs

@@ -0,0 +1,35 @@
+use leptos::prelude::*;
+use leptos_ui::{clx, variants};
+
+mod components {
+    use super::*;
+    clx! {Empty, div, "flex flex-col items-center justify-center gap-4 rounded-lg border border-dashed p-8 text-center"}
+    clx! {EmptyHeader, div, "flex flex-col items-center gap-2"}
+    clx! {EmptyTitle, h3, "text-lg font-semibold leading-none"}
+    clx! {EmptyDescription, p, "text-muted-foreground text-sm"}
+    clx! {EmptyContent, div, "flex items-center justify-center gap-2"}
+}
+
+pub use components::*;
+
+/* ========================================================== */
+/*                     ✨ FUNCTIONS ✨                        */
+/* ========================================================== */
+
+variants! {
+    EmptyMedia {
+        base: "flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        variants: {
+            variant: {
+                Default: "bg-transparent",
+                Icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+            },
+            size: {
+                Default: "",
+            }
+        },
+        component: {
+            element: div
+        }
+    }
+}

frontend/src/components/ui/input.rs

@@ -0,0 +1,99 @@
+use leptos::html;
+use leptos::prelude::*;
+use strum::AsRefStr;
+use tw_merge::tw_merge;
+
+#[derive(Default, Clone, Copy, PartialEq, Eq, AsRefStr)]
+#[strum(serialize_all = "lowercase")]
+#[allow(dead_code)]
+pub enum InputType {
+    #[default]
+    Text,
+    Email,
+    Password,
+    Number,
+    Tel,
+    Url,
+    Search,
+    Date,
+    Time,
+    #[strum(serialize = "datetime-local")]
+    DatetimeLocal,
+    Month,
+    Week,
+    Color,
+    File,
+    Hidden,
+}
+
+#[component]
+pub fn Input(
+    #[prop(into, optional)] class: String,
+    #[prop(default = InputType::default())] r#type: InputType,
+    #[prop(into, optional)] placeholder: Option<String>,
+    #[prop(into, optional)] name: Option<String>,
+    #[prop(into, optional)] id: Option<String>,
+    #[prop(into, optional)] title: Option<String>,
+    #[prop(optional)] disabled: bool,
+    #[prop(optional)] readonly: bool,
+    #[prop(optional)] required: bool,
+    #[prop(optional)] autofocus: bool,
+    #[prop(into, optional)] min: Option<String>,
+    #[prop(into, optional)] max: Option<String>,
+    #[prop(into, optional)] step: Option<String>,
+    #[prop(into, optional)] bind_value: Option<RwSignal<String>>,
+    #[prop(optional)] node_ref: NodeRef<html::Input>,
+) -> impl IntoView {
+    let merged_class = tw_merge!(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50",
+        "focus-visible:ring-2",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        "read-only:bg-muted",
+        class
+    );
+
+    let type_str = r#type.as_ref();
+
+    match bind_value {
+        Some(signal) => view! {
+            <input
+                data-name="Input"
+                type=type_str
+                class=merged_class
+                placeholder=placeholder
+                name=name
+                id=id
+                title=title
+                disabled=disabled
+                readonly=readonly
+                required=required
+                autofocus=autofocus
+                min=min
+                max=max
+                step=step
+                bind:value=signal
+                node_ref=node_ref
+            />
+        }.into_any(),
+        None => view! {
+            <input
+                data-name="Input"
+                type=type_str
+                class=merged_class
+                placeholder=placeholder
+                name=name
+                id=id
+                title=title
+                disabled=disabled
+                readonly=readonly
+                required=required
+                autofocus=autofocus
+                min=min
+                max=max
+                step=step
+                node_ref=node_ref
+            />
+        }.into_any(),
+    }
+}

frontend/src/components/ui/mod.rs

@@ -0,0 +1,24 @@
+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;
+pub mod data_table;
+pub mod dialog;
+pub mod dropdown_menu;
+pub mod empty;
+pub mod input;
+pub mod multi_select;
+pub mod select;
+pub mod separator;
+pub mod sheet;
+pub mod sidenav;
+pub mod skeleton;
+pub mod svg_icon;
+pub mod switch;
+pub mod table;
+pub mod theme_toggle;
+pub mod toast;

frontend/src/components/ui/multi_select.rs

@@ -0,0 +1,294 @@
+use std::collections::HashSet;
+
+use icons::{Check, ChevronDown, ChevronUp};
+use leptos::context::Provider;
+use leptos::prelude::*;
+use tw_merge::*;
+
+use crate::components::hooks::use_can_scroll_vertical::use_can_scroll_vertical;
+use crate::components::hooks::use_random::use_random_id_for;
+// * Reuse @select.rs
+pub use crate::components::ui::select::{
+    SelectGroup as MultiSelectGroup, SelectItem as MultiSelectItem, SelectLabel as MultiSelectLabel,
+};
+
+#[derive(Clone, Copy, PartialEq, Eq, Default)]
+pub enum MultiSelectAlign {
+    Start,
+    #[default]
+    Center,
+    End,
+}
+
+/* ========================================================== */
+/*                     ✨ FUNCTIONS ✨                        */
+/* ========================================================== */
+
+#[component]
+pub fn MultiSelectValue(#[prop(optional, into)] placeholder: String) -> impl IntoView {
+    let multi_select_ctx = expect_context::<MultiSelectContext>();
+
+    view! {
+        <span data-name="MultiSelectValue" class="text-sm text-muted-foreground truncate">
+            {move || {
+                let values = multi_select_ctx.values_signal.get();
+                if values.is_empty() {
+                    placeholder.clone()
+                } else {
+                    let count = values.len();
+                    if count == 1 { "1 selected".to_string() } else { format!("{} selected", count) }
+                }
+            }}
+        </span>
+    }
+}
+
+#[component]
+pub fn MultiSelectOption(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(optional, into)] value: Option<String>,
+) -> impl IntoView {
+    let multi_select_ctx = expect_context::<MultiSelectContext>();
+
+    let value_clone = value.clone();
+    let is_selected = Signal::derive(move || {
+        if let Some(ref val) = value_clone {
+            multi_select_ctx.values_signal.with(|values| values.contains(val))
+        } else {
+            false
+        }
+    });
+
+    let class = tw_merge!(
+        "group inline-flex gap-2 items-center w-full text-sm text-left transition-colors duration-200 focus:outline-none focus-visible:outline-none text-popover-foreground [&_svg:not([class*='size-'])]:size-4 hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        class
+    );
+
+    view! {
+        <button
+            type="button"
+            data-name="MultiSelectOption"
+            class=class
+            role="option"
+            aria-selected=move || is_selected.get().to_string()
+            on:click=move |ev: web_sys::MouseEvent| {
+                ev.prevent_default();
+                ev.stop_propagation();
+                if let Some(val) = value.clone() {
+                    multi_select_ctx
+                        .values_signal
+                        .update(|values| {
+                            if values.contains(&val) {
+                                values.remove(&val);
+                            } else {
+                                values.insert(val);
+                            }
+                        });
+                }
+            }
+        >
+            {children()}
+            <Check class="ml-auto opacity-0 size-4 text-muted-foreground group-aria-selected:opacity-100" />
+        </button>
+    }
+}
+
+/* ========================================================== */
+/*                     ✨ FUNCTIONS ✨                        */
+/* ========================================================== */
+
+#[derive(Clone)]
+struct MultiSelectContext {
+    target_id: String,
+    values_signal: RwSignal<HashSet<String>>,
+    align: MultiSelectAlign,
+}
+
+#[component]
+pub fn MultiSelect(
+    children: Children,
+    #[prop(optional, into)] values: Option<RwSignal<HashSet<String>>>,
+    #[prop(default = MultiSelectAlign::default())] align: MultiSelectAlign,
+) -> impl IntoView {
+    let multi_select_target_id = use_random_id_for("multi_select");
+    let values_signal = values.unwrap_or_else(|| RwSignal::new(HashSet::<String>::new()));
+
+    let multi_select_ctx = MultiSelectContext { target_id: multi_select_target_id.clone(), values_signal, align };
+
+    view! {
+        <Provider value=multi_select_ctx>
+            <div data-name="MultiSelect" class="relative w-fit">
+                {children()}
+            </div>
+        </Provider>
+    }
+}
+
+#[component]
+pub fn MultiSelectTrigger(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(optional, into)] id: String,
+) -> impl IntoView {
+    let multi_select_ctx = expect_context::<MultiSelectContext>();
+
+    let peer_class = if !id.is_empty() { format!("peer/{}", id) } else { String::new() };
+
+    let button_class = tw_merge!(
+        "w-full p-2 h-9 inline-flex items-center justify-between text-sm font-medium whitespace-nowrap rounded-md transition-colors focus:outline-none focus:ring-1 focus:ring-ring focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&_svg:not(:last-child)]:mr-2 [&_svg:not(:first-child)]:ml-2 [&_svg:not([class*='size-'])]:size-4  border bg-background border-input hover:bg-accent hover:text-accent-foreground",
+        &peer_class,
+        class
+    );
+
+    let button_id = if !id.is_empty() { id } else { format!("trigger_{}", multi_select_ctx.target_id) };
+
+    view! {
+        <button
+            type="button"
+            data-name="MultiSelectTrigger"
+            class=button_class
+            id=button_id
+            tabindex="0"
+            data-multi-select-trigger=multi_select_ctx.target_id
+        >
+            {children()}
+            <ChevronDown class="text-muted-foreground" />
+        </button>
+    }
+}
+
+#[component]
+pub fn MultiSelectContent(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let multi_select_ctx = expect_context::<MultiSelectContext>();
+
+    let align_str = match multi_select_ctx.align {
+        MultiSelectAlign::Start => "start",
+        MultiSelectAlign::Center => "center",
+        MultiSelectAlign::End => "end",
+    };
+
+    let class = tw_merge!(
+        "w-[150px] overflow-auto z-50 p-1 rounded-md border bg-card shadow-md h-fit max-h-[300px] absolute top-[calc(100%+4px)] transition-all duration-200 data-[state=closed]:opacity-0 data-[state=closed]:scale-95 data-[state=open]:opacity-100 data-[state=open]:scale-100 data-[align=start]:left-0 data-[align=center]:left-1/2 data-[align=center]:-translate-x-1/2 data-[align=end]:right-0 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+        class
+    );
+
+    let target_id_for_script = multi_select_ctx.target_id.clone();
+    let target_id_for_script_2 = multi_select_ctx.target_id.clone();
+
+    // Scroll indicator signals
+    let (on_scroll, can_scroll_up_signal, can_scroll_down_signal) = use_can_scroll_vertical();
+
+    view! {
+        <div
+            data-name="MultiSelectContent"
+            class=class
+            id=multi_select_ctx.target_id
+            data-target="target__multi_select"
+            data-state="closed"
+            data-align=align_str
+            style="pointer-events: none;"
+            on:scroll=move |ev| on_scroll.run(ev)
+        >
+            <div
+                data-scroll-up="true"
+                class=move || {
+                    let is_up: bool = can_scroll_up_signal.get();
+                    if is_up {
+                        "sticky -top-1 z-10 flex items-center justify-center py-1 bg-card"
+                    } else {
+                        "hidden"
+                    }
+                }
+            >
+                <ChevronUp class="size-4 text-muted-foreground" />
+            </div>
+            {children()}
+            <div
+                data-scroll-down="true"
+                class=move || {
+                    let is_down: bool = can_scroll_down_signal.get();
+                    if is_down {
+                        "sticky -bottom-1 z-10 flex items-center justify-center py-1 bg-card"
+                    } else {
+                        "hidden"
+                    }
+                }
+            >
+                <ChevronDown class="size-4 text-muted-foreground" />
+            </div>
+        </div>
+
+        <script>
+            {format!(
+                r#"
+                (function() {{
+                    const setupMultiSelect = () => {{
+                        const multiSelect = document.querySelector('#{}');
+                        const trigger = document.querySelector('[data-multi-select-trigger="{}"]');
+
+                        if (!multiSelect || !trigger) {{
+                            setTimeout(setupMultiSelect, 50);
+                            return;
+                        }}
+
+                        if (multiSelect.hasAttribute('data-initialized')) {{
+                            return;
+                        }}
+                        multiSelect.setAttribute('data-initialized', 'true');
+
+                        let isOpen = false;
+
+                        const openMultiSelect = () => {{
+                            isOpen = true;
+                            if (window.ScrollLock) window.ScrollLock.lock();
+                            multiSelect.setAttribute('data-state', 'open');
+                            multiSelect.style.pointerEvents = 'auto';
+                            const triggerRect = trigger.getBoundingClientRect();
+                            multiSelect.style.minWidth = `${{triggerRect.width}}px`;
+                            multiSelect.dispatchEvent(new Event('scroll'));
+                            setTimeout(() => {{
+                                document.addEventListener('click', handleClickOutside);
+                            }}, 0);
+                        }};
+
+                        const closeMultiSelect = () => {{
+                            isOpen = false;
+                            multiSelect.setAttribute('data-state', 'closed');
+                            multiSelect.style.pointerEvents = 'none';
+                            document.removeEventListener('click', handleClickOutside);
+                            if (window.ScrollLock) window.ScrollLock.unlock(200);
+                        }};
+
+                        const handleClickOutside = (e) => {{
+                            if (!multiSelect.contains(e.target) && !trigger.contains(e.target)) {{
+                                closeMultiSelect();
+                            }}
+                        }};
+
+                        trigger.addEventListener('click', (e) => {{
+                            e.stopPropagation();
+                            if (isOpen) closeMultiSelect(); else openMultiSelect();
+                        }});
+
+                        document.addEventListener('keydown', (e) => {{
+                            if (e.key === 'Escape' && isOpen) {{
+                                e.preventDefault();
+                                closeMultiSelect();
+                            }}
+                        }});
+                    }};
+
+                    if (document.readyState === 'loading') {{
+                        document.addEventListener('DOMContentLoaded', setupMultiSelect);
+                    }} else {{
+                        setupMultiSelect();
+                    }}
+                }})();
+                "#,
+                target_id_for_script,
+                target_id_for_script_2,
+            )}
+        </script>
+    }.into_any()
+}

frontend/src/components/ui/select.rs

@@ -0,0 +1,311 @@
+use icons::{Check, ChevronDown, ChevronUp};
+use leptos::context::Provider;
+use leptos::prelude::*;
+use leptos_ui::clx;
+use strum::{AsRefStr, Display};
+use tw_merge::*;
+
+use crate::components::hooks::use_can_scroll_vertical::use_can_scroll_vertical;
+use crate::components::hooks::use_random::use_random_id_for;
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Default, Display, AsRefStr)]
+pub enum SelectPosition {
+    #[default]
+    Below,
+    Above,
+}
+
+mod components {
+    use super::*;
+    clx! {SelectLabel, span, "px-2 py-1.5 text-sm font-medium data-inset:pl-8", "mb-1"}
+    clx! {SelectItem, li, "inline-flex gap-2 items-center w-full rounded-sm px-2 py-1.5 text-sm no-underline transition-colors duration-200 text-popover-foreground hover:bg-accent hover:text-accent-foreground [&_svg:not([class*='size-'])]:size-4"}
+}
+
+pub use components::*;
+
+#[component]
+pub fn SelectGroup(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(default = "Select options".into(), into)] aria_label: String,
+) -> impl IntoView {
+    let merged_class = tw_merge!("group", class);
+
+    view! {
+        <ul data-name="SelectGroup" role="listbox" aria-label=aria_label class=merged_class>
+            {children()}
+        </ul>
+    }
+}
+
+#[component]
+pub fn SelectValue(#[prop(optional, into)] placeholder: String) -> impl IntoView {
+    let select_ctx = expect_context::<SelectContext>();
+
+    view! {
+        <span data-name="SelectValue" class="text-sm text-muted-foreground truncate">
+            {move || { select_ctx.value_signal.get().unwrap_or_else(|| placeholder.clone()) }}
+        </span>
+    }
+}
+
+#[component]
+pub fn SelectOption(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(default = false.into(), into)] aria_selected: Signal<bool>,
+    #[prop(optional, into)] value: Option<String>,
+) -> impl IntoView {
+    let ctx = expect_context::<SelectContext>();
+
+    let merged_class = tw_merge!(
+        "group inline-flex gap-2 items-center w-full rounded-sm px-2 py-1.5 text-sm cursor-pointer no-underline transition-colors duration-200 text-popover-foreground hover:bg-accent hover:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
+        class
+    );
+
+    let value_for_check = value.clone();
+    let is_selected = move || aria_selected.get() || ctx.value_signal.get() == value_for_check;
+
+    view! {
+        <li
+            data-name="SelectOption"
+            class=merged_class
+            role="option"
+            tabindex="0"
+            aria-selected=move || is_selected().to_string()
+            data-select-option="true"
+            on:click=move |_| {
+                let val = value.clone();
+                ctx.value_signal.set(val.clone());
+                if let Some(on_change) = ctx.on_change {
+                    on_change.run(val);
+                }
+            }
+        >
+            {children()}
+            <Check class="ml-auto opacity-0 size-4 text-muted-foreground group-aria-selected:opacity-100" />
+        </li>
+    }
+}
+
+#[derive(Clone)]
+struct SelectContext {
+    target_id: String,
+    value_signal: RwSignal<Option<String>>,
+    on_change: Option<Callback<Option<String>>>,
+}
+
+#[component]
+pub fn Select(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(optional, into)] default_value: Option<String>,
+    #[prop(optional)] on_change: Option<Callback<Option<String>>>,
+) -> impl IntoView {
+    let select_target_id = use_random_id_for("select");
+    let value_signal = RwSignal::new(default_value);
+
+    let ctx = SelectContext { target_id: select_target_id.clone(), value_signal, on_change };
+
+    let merged_class = tw_merge!("relative w-fit", class);
+
+    view! {
+        <Provider value=ctx>
+            <div data-name="Select" class=merged_class>
+                {children()}
+            </div>
+        </Provider>
+    }
+}
+
+#[component]
+pub fn SelectTrigger(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(optional, into)] id: String,
+) -> impl IntoView {
+    let ctx = expect_context::<SelectContext>();
+
+    let peer_class = if !id.is_empty() { format!("peer/{}", id) } else { String::new() };
+
+    let button_class = tw_merge!(
+        "w-full p-2 h-9 inline-flex items-center justify-between text-sm font-medium whitespace-nowrap rounded-md transition-colors focus:outline-none focus:ring-1 focus:ring-ring focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&_svg:not(:last-child)]:mr-2 [&_svg:not(:first-child)]:ml-2 [&_svg:not([class*='size-'])]:size-4 border bg-background border-input hover:bg-accent hover:text-accent-foreground",
+        &peer_class,
+        class
+    );
+
+    let button_id = if !id.is_empty() { id } else { format!("trigger_{}", ctx.target_id) };
+
+    view! {
+        <button
+            type="button"
+            data-name="SelectTrigger"
+            class=button_class
+            id=button_id
+            tabindex="0"
+            data-select-trigger=ctx.target_id
+        >
+            {children()}
+            <ChevronDown class="text-muted-foreground" />
+        </button>
+    }
+}
+
+#[component]
+pub fn SelectContent(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(default = SelectPosition::default())] position: SelectPosition,
+    #[prop(optional)] on_close: Option<Callback<()>>,
+) -> impl IntoView {
+    let ctx = expect_context::<SelectContext>();
+
+    let merged_class = tw_merge!(
+        "w-[150px] overflow-auto z-50 p-1 rounded-md border bg-card shadow-md h-fit max-h-[300px] absolute top-[calc(100%+4px)] left-0 data-[position=Above]:top-auto data-[position=Above]:bottom-[calc(100%+4px)] transition-all duration-200 data-[state=closed]:opacity-0 data-[state=closed]:scale-95 data-[state=open]:opacity-100 data-[state=open]:scale-100 data-[state=closed]:data-[position=Below]:origin-top data-[state=open]:data-[position=Below]:origin-top data-[state=closed]:data-[position=Above]:origin-bottom data-[state=open]:data-[position=Above]:origin-bottom [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+        class
+    );
+
+    let target_id_for_script = ctx.target_id.clone();
+    let target_id_for_script_2 = ctx.target_id.clone();
+
+    // Scroll indicator signals
+    let (on_scroll, can_scroll_up_signal, can_scroll_down_signal) = use_can_scroll_vertical();
+
+    view! {
+        <div
+            data-name="SelectContent"
+            class=merged_class
+            on:selectclose=move |_: web_sys::CustomEvent| {
+                if let Some(cb) = on_close {
+                    cb.run(());
+                }
+            }
+            id=ctx.target_id
+            data-target="target__select"
+            data-state="closed"
+            data-position=position.to_string()
+            style="pointer-events: none;"
+            on:scroll=move |ev| on_scroll.run(ev)
+        >
+            <div
+                data-scroll-up="true"
+                class=move || {
+                    let is_up: bool = can_scroll_up_signal.get();
+                    if is_up {
+                        "sticky -top-1 z-10 flex items-center justify-center py-1 bg-card"
+                    } else {
+                        "hidden"
+                    }
+                }
+            >
+                <ChevronUp class="size-4 text-muted-foreground" />
+            </div>
+            {children()}
+            <div
+                data-scroll-down="true"
+                class=move || {
+                    let is_down: bool = can_scroll_down_signal.get();
+                    if is_down {
+                        "sticky -bottom-1 z-10 flex items-center justify-center py-1 bg-card"
+                    } else {
+                        "hidden"
+                    }
+                }
+            >
+                <ChevronDown class="size-4 text-muted-foreground" />
+            </div>
+        </div>
+
+        <script>
+            {format!(
+                r#"
+                (function() {{
+                    const setupSelect = () => {{
+                        const select = document.querySelector('#{}');
+                        const trigger = document.querySelector('[data-select-trigger="{}"]');
+
+                        if (!select || !trigger) {{
+                            setTimeout(setupSelect, 50);
+                            return;
+                        }}
+
+                        if (select.hasAttribute('data-initialized')) {{
+                            return;
+                        }}
+                        select.setAttribute('data-initialized', 'true');
+
+                        let isOpen = false;
+
+                        const updatePosition = () => {{
+                            const triggerRect = trigger.getBoundingClientRect();
+                            const viewportHeight = window.innerHeight;
+                            const spaceBelow = viewportHeight - triggerRect.bottom;
+                            const spaceAbove = triggerRect.top;
+
+                            if (spaceBelow < 200 && spaceAbove > spaceBelow) {{
+                                select.setAttribute('data-position', 'Above');
+                            }} else {{
+                                select.setAttribute('data-position', 'Below');
+                            }}
+
+                            select.style.minWidth = `${{triggerRect.width}}px`;
+                        }};
+
+                        const openSelect = () => {{
+                            isOpen = true;
+                            if (window.ScrollLock) window.ScrollLock.lock();
+                            updatePosition();
+                            select.setAttribute('data-state', 'open');
+                            select.style.pointerEvents = 'auto';
+                            select.dispatchEvent(new Event('scroll'));
+                            setTimeout(() => {{
+                                document.addEventListener('click', handleClickOutside);
+                            }}, 0);
+                        }};
+
+                        const closeSelect = () => {{
+                            isOpen = false;
+                            select.setAttribute('data-state', 'closed');
+                            select.style.pointerEvents = 'none';
+                            document.removeEventListener('click', handleClickOutside);
+                            select.dispatchEvent(new CustomEvent('selectclose', {{ bubbles: false }}));
+                            if (window.ScrollLock) window.ScrollLock.unlock(200);
+                        }};
+
+                        const handleClickOutside = (e) => {{
+                            if (!select.contains(e.target) && !trigger.contains(e.target)) {{
+                                closeSelect();
+                            }}
+                        }};
+
+                        trigger.addEventListener('click', (e) => {{
+                            e.stopPropagation();
+                            if (isOpen) closeSelect(); else openSelect();
+                        }});
+
+                        const options = select.querySelectorAll('[data-select-option]');
+                        options.forEach(option => {{
+                            option.addEventListener('click', () => closeSelect());
+                        }});
+
+                        document.addEventListener('keydown', (e) => {{
+                            if (e.key === 'Escape' && isOpen) {{
+                                e.preventDefault();
+                                closeSelect();
+                            }}
+                        }});
+                    }};
+
+                    if (document.readyState === 'loading') {{
+                        document.addEventListener('DOMContentLoaded', setupSelect);
+                    }} else {{
+                        setupSelect();
+                    }}
+                }})();
+                "#,
+                target_id_for_script,
+                target_id_for_script_2,
+            )}
+        </script>
+    }.into_any()
+}

frontend/src/components/ui/separator.rs

@@ -0,0 +1,35 @@
+use leptos::prelude::*;
+use tw_merge::*;
+
+#[component]
+pub fn Separator(
+    #[prop(into, optional)] orientation: Signal<SeparatorOrientation>,
+    #[prop(into, optional)] class: String,
+    // children: Children,
+) -> impl IntoView {
+    let merged_class = Memo::new(move |_| {
+        let orientation = orientation.get();
+        let separator = SeparatorClass { orientation };
+        separator.with_class(class.clone())
+    });
+
+    view! { <div class=merged_class role="separator" /> }
+}
+
+/* ========================================================== */
+/*                       🧬 STRUCT 🧬                         */
+/* ========================================================== */
+
+#[derive(TwClass, Default)]
+#[tw(class = "shrink-0 bg-border")]
+pub struct SeparatorClass {
+    orientation: SeparatorOrientation,
+}
+
+#[derive(TwVariant)]
+pub enum SeparatorOrientation {
+    #[tw(default, class = "w-full h-[1px]")]
+    Default,
+    #[tw(class = "h-full w-[1px]")]
+    Vertical,
+}

frontend/src/components/ui/sheet.rs

@@ -0,0 +1,239 @@
+use icons::X;
+use leptos::context::Provider;
+use leptos::prelude::*;
+use leptos_ui::clx;
+use tw_merge::*;
+
+use super::button::ButtonSize;
+use crate::components::hooks::use_random::use_random_id_for;
+use crate::components::ui::button::{Button, ButtonVariant};
+
+mod components {
+    use super::*;
+    clx! {SheetTitle, h2, "font-bold text-2xl"}
+    clx! {SheetDescription, p, "text-muted-foreground"}
+    clx! {SheetBody, div, "flex flex-col gap-4"}
+    clx! {SheetFooter, footer, "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"}
+}
+
+pub use components::*;
+
+/* ========================================================== */
+/*                     ✨ CONTEXT ✨                          */
+/* ========================================================== */
+
+#[derive(Clone)]
+pub struct SheetContext {
+    pub target_id: String,
+}
+
+/* ========================================================== */
+/*                     ✨ FUNCTIONS ✨                        */
+/* ========================================================== */
+
+pub type SheetVariant = ButtonVariant;
+pub type SheetSize = ButtonSize;
+
+#[component]
+pub fn Sheet(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let sheet_target_id = use_random_id_for("sheet");
+    let ctx = SheetContext { target_id: sheet_target_id };
+
+    let merged_class = tw_merge!("", class);
+
+    view! {
+        <Provider value=ctx>
+            <div data-name="Sheet" class=merged_class>
+                {children()}
+            </div>
+        </Provider>
+    }
+}
+
+#[component]
+pub fn SheetTrigger(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(default = ButtonVariant::Outline)] variant: ButtonVariant,
+    #[prop(default = ButtonSize::Default)] size: ButtonSize,
+) -> impl IntoView {
+    let ctx = expect_context::<SheetContext>();
+    let trigger_id = format!("trigger_{}", ctx.target_id);
+
+    view! {
+        <Button class=class attr:id=trigger_id attr:data-sheet-trigger=ctx.target_id variant=variant size=size>
+            {children()}
+        </Button>
+    }
+}
+
+#[component]
+pub fn SheetClose(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(default = ButtonVariant::Outline)] variant: ButtonVariant,
+    #[prop(default = ButtonSize::Default)] size: ButtonSize,
+) -> impl IntoView {
+    let ctx = expect_context::<SheetContext>();
+
+    view! {
+        <Button class=class attr:data-sheet-close=ctx.target_id attr:aria-label="Close sheet" variant=variant size=size>
+            {children()}
+        </Button>
+    }
+}
+
+#[component]
+pub fn SheetContent(
+    children: Children,
+    #[prop(optional, into)] class: String,
+    #[prop(default = SheetDirection::Right)] direction: SheetDirection,
+    #[prop(into, optional)] hide_close_button: Option<bool>,
+) -> impl IntoView {
+    let ctx = expect_context::<SheetContext>();
+
+    let backdrop_id = format!("{}_backdrop", ctx.target_id);
+    let target_id_for_script = ctx.target_id.clone();
+    let backdrop_id_for_script = backdrop_id.clone();
+
+    let merged_class = tw_merge!(
+        "fixed z-100 bg-card shadow-lg p-6 transition-transform duration-300 overflow-y-auto overscroll-y-contain",
+        direction.initial_position(),
+        direction.closed_class(),
+        class
+    );
+
+    view! {
+        <div
+            data-name="SheetBackdrop"
+            id=backdrop_id
+            class="fixed inset-0 transition-opacity duration-200 pointer-events-none z-60 bg-black/50 data-[state=closed]:opacity-0 data-[state=open]:opacity-100"
+            data-state="closed"
+        />
+
+        <div
+            data-name="SheetContent"
+            class=merged_class
+            id=ctx.target_id
+            data-direction=direction.to_string()
+            data-state="closed"
+            style="pointer-events: none;"
+        >
+            <button
+                type="button"
+                class=format!(
+                    "absolute top-4 right-4 p-1 rounded-sm focus:ring-2 focus:ring-offset-2 focus:outline-none [&_svg:not([class*='size-'])]:size-4 focus:ring-ring{}",
+                    if hide_close_button.unwrap_or(false) { " hidden" } else { "" },
+                )
+                data-sheet-close=ctx.target_id.clone()
+                aria-label="Close sheet"
+            >
+                <span class="hidden">"Close Sheet"</span>
+                <X />
+            </button>
+
+            {children()}
+        </div>
+
+        <script>
+            {format!(
+                r#"
+                (function() {{
+                    const setupSheet = () => {{
+                        const sheet = document.querySelector('#{}');
+                        const backdrop = document.querySelector('#{}');
+                        const trigger = document.querySelector('[data-sheet-trigger="{}"]');
+
+                        if (!sheet || !backdrop || !trigger) {{
+                            setTimeout(setupSheet, 50);
+                            return;
+                        }}
+
+                        if (sheet.hasAttribute('data-initialized')) {{
+                            return;
+                        }}
+                        sheet.setAttribute('data-initialized', 'true');
+
+                        const openSheet = () => {{
+                            if (window.ScrollLock) window.ScrollLock.lock();
+                            sheet.setAttribute('data-state', 'open');
+                            backdrop.setAttribute('data-state', 'open');
+                            sheet.style.pointerEvents = 'auto';
+                            backdrop.style.pointerEvents = 'auto';
+                            const direction = sheet.getAttribute('data-direction');
+                            sheet.classList.remove('translate-x-full', '-translate-x-full', 'translate-y-full', '-translate-y-full');
+                            sheet.classList.add('translate-x-0', 'translate-y-0');
+                        }};
+
+                        const closeSheet = () => {{
+                            sheet.setAttribute('data-state', 'closed');
+                            backdrop.setAttribute('data-state', 'closed');
+                            sheet.style.pointerEvents = 'none';
+                            backdrop.style.pointerEvents = 'none';
+                            const direction = sheet.getAttribute('data-direction');
+                            sheet.classList.remove('translate-x-0', 'translate-y-0');
+                            if (direction === 'Right') sheet.classList.add('translate-x-full');
+                            else if (direction === 'Left') sheet.classList.add('-translate-x-full');
+                            else if (direction === 'Top') sheet.classList.add('-translate-y-full');
+                            else if (direction === 'Bottom') sheet.classList.add('translate-y-full');
+                            if (window.ScrollLock) window.ScrollLock.unlock(300);
+                        }};
+
+                        trigger.addEventListener('click', openSheet);
+                        const closeButtons = sheet.querySelectorAll('[data-sheet-close]');
+                        closeButtons.forEach(btn => btn.addEventListener('click', closeSheet));
+                        backdrop.addEventListener('click', closeSheet);
+                        document.addEventListener('keydown', (e) => {{
+                            if (e.key === 'Escape' && sheet.getAttribute('data-state') === 'open') {{
+                                e.preventDefault();
+                                closeSheet();
+                            }}
+                        }});
+                    }};
+
+                    if (document.readyState === 'loading') {{
+                        document.addEventListener('DOMContentLoaded', setupSheet);
+                    }} else {{
+                        setupSheet();
+                    }}
+                }})();
+                "#,
+                target_id_for_script,
+                backdrop_id_for_script,
+                target_id_for_script,
+            )}
+        </script>
+    }.into_any()
+}
+
+/* ========================================================== */
+/*                     ✨ ENUM ✨                             */
+/* ========================================================== */
+
+#[derive(Clone, Copy, strum::AsRefStr, strum::Display)]
+pub enum SheetDirection {
+    Right,
+    Left,
+    Top,
+    Bottom,
+}
+
+impl SheetDirection {
+    fn closed_class(self) -> &'static str {
+        match self {
+            SheetDirection::Right => "translate-x-full",
+            SheetDirection::Left => "-translate-x-full",
+            SheetDirection::Top => "-translate-y-full",
+            SheetDirection::Bottom => "translate-y-full",
+        }
+    }
+
+    fn initial_position(self) -> &'static str {
+        match self {
+            SheetDirection::Right => "top-0 right-0 h-full w-[400px]",
+            SheetDirection::Left => "top-0 left-0 h-full w-[400px]",
+            SheetDirection::Top => "top-0 left-0 w-full h-[400px]",
+            SheetDirection::Bottom => "bottom-0 left-0 w-full h-[400px]",
+        }
+    }
+}

frontend/src/components/ui/sidenav.rs

@@ -0,0 +1,152 @@
+use leptos::prelude::*;
+use leptos_ui::{clx, variants, void};
+
+mod components {
+    use super::*;
+    clx! {SidenavWrapper, div, "group/sidenav-wrapper has-data-[variant=Inset]:bg-sidenav flex h-full w-full"}
+    clx! {SidenavInset, div, "bg-background relative flex w-full flex-1 flex-col data-[variant=Inset]:rounded-lg data-[variant=Inset]:border data-[variant=Inset]:border-sidenav-border data-[variant=Inset]:shadow-sm data-[variant=Inset]:m-2"}
+    clx! {SidenavInner, div, "flex flex-col w-full h-full bg-sidenav data-[variant=Floating]:rounded-lg data-[variant=Floating]:border data-[variant=Floating]:border-sidenav-border data-[variant=Floating]:shadow-sm"}
+    clx! {SidenavHeader, div, "flex flex-col gap-2 p-2"}
+    clx! {SidenavMenu, ul, "flex flex-col gap-1 w-full min-w-0"}
+    clx! {SidenavMenuSub, ul, "border-sidenav-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=Icon]:hidden"}
+    clx! {SidenavMenuItem, li, "relative group/menu-item"}
+    clx! {SidenavContent, div, "scrollbar__on_hover", "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=Icon]:overflow-hidden"}
+    clx! {SidenavGroup, div, "flex relative flex-col p-2 w-full min-w-0"}
+    clx! {SidenavGroupContent, div, "w-full text-sm"}
+    clx! {SidenavGroupLabel, div, "text-sidenav-foreground/70 ring-sidenav-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0 group-data-[collapsible=Icon]:-mt-8 group-data-[collapsible=Icon]:opacity-0"}
+    clx! {SidenavFooter, footer, "flex flex-col gap-2 p-2"}
+    clx! {DropdownMenuTriggerEllipsis, button, "text-sidenav-foreground ring-sidenav-ring hover:bg-sidenav-accent hover:text-sidenav-accent-foreground peer-hover/menu-button:text-sidenav-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden peer-data-[size=sm]/menu-button:top-1 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 group-data-[collapsible=Icon]:hidden peer-data-[active=true]/menu-button:text-sidenav-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0"}
+
+    void! {SidenavInput, input,
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50",
+        "focus-visible:ring-2",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        "read-only:bg-muted",
+        "w-full h-8 shadow-none bg-background"
+    }
+}
+
+pub use components::*;
+
+#[derive(Clone, Copy, PartialEq, Eq, Default, strum::Display, strum::IntoStaticStr)]
+pub enum SidenavVariant {
+    #[default]
+    Sidenav,
+    Floating,
+    Inset,
+}
+
+#[derive(Clone, Copy, PartialEq, Eq, Default, strum::Display)]
+pub enum SidenavSide {
+    #[default]
+    Left,
+    Right,
+}
+
+#[derive(Default, Clone, Copy, PartialEq, Eq, strum::Display)]
+pub enum SidenavCollapsible {
+    #[default]
+    Offcanvas,
+    None,
+    Icon,
+}
+
+#[derive(Clone, Copy, PartialEq, Eq, Default, strum::Display)]
+pub enum SidenavState {
+    #[default]
+    Expanded,
+    Collapsed,
+}
+
+#[component]
+pub fn Sidenav(
+    #[prop(into, optional)] class: String,
+    #[prop(default = SidenavVariant::default())] variant: SidenavVariant,
+    #[prop(into)] data_state: Signal<SidenavState>,
+    #[prop(default = SidenavSide::default())] data_side: SidenavSide,
+    #[prop(default = SidenavCollapsible::default())] data_collapsible: SidenavCollapsible,
+    children: Children,
+) -> impl IntoView {
+    view! {
+        <aside
+            data-name="Sidenav"
+            data-state=move || data_state.get().to_string()
+            data-side=data_side.to_string()
+            data-collapsible=data_collapsible.to_string()
+            class="hidden md:block group peer text-sidenav-foreground h-full"
+        >
+            <div
+                data-name="SidenavGap"
+                class=tw_merge!(
+                    "relative w-(--sidenav-width) bg-transparent transition-[width] duration-200 ease-linear",
+                    "group-data-[collapsible=Offcanvas]:w-0",
+                    "group-data-[state=Collapsed]:w-(--sidenav-width-icon)",
+                    match variant {
+                        SidenavVariant::Sidenav => "group-data-[collapsible=Icon]:w-(--sidenav-width-icon)",
+                        SidenavVariant::Floating | SidenavVariant::Inset =>
+                            "group-data-[collapsible=Icon]:w-[calc(var(--sidenav-width-icon)+(--spacing(4)))]",
+                    }
+                )
+            />
+            <div
+                data-name="SidenavContainer"
+                class=tw_merge!(
+                    "fixed inset-y-0 z-10 hidden h-svh w-(--sidenav-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+                    class,
+                    match data_side {
+                        SidenavSide::Left => "left-0 group-data-[collapsible=Offcanvas]:left-[calc(var(--sidenav-width)*-1)]",
+                        SidenavSide::Right => "right-0 group-data-[collapsible=Offcanvas]:right-[calc(var(--sidenav-width)*-1)]"
+                    },
+                    "group-data-[state=Collapsed]:w-(--sidenav-width-icon)",
+                    match variant {
+                         SidenavVariant::Sidenav => "group-data-[side=Left]:border-r group-data-[side=Right]:border-l",
+                         SidenavVariant::Floating | SidenavVariant::Inset => "p-2",
+                    },
+                )
+            >
+                <SidenavInner attr:data-sidenav="Sidenav" attr:data-variant=variant.to_string()>
+                    {children()}
+                </SidenavInner>
+            </div>
+        </aside>
+    }
+}
+
+variants! {
+    SidenavMenuButton {
+        base: "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidenav-ring transition-[width,height,padding] hover:bg-sidenav-accent hover:text-sidenav-accent-foreground focus-visible:ring-2 active:bg-sidenav-accent active:text-sidenav-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidenav=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-[current=page]:bg-sidenav-accent aria-[current=page]:font-medium aria-[current=page]:text-sidenav-accent-foreground data-[state=open]:hover:bg-sidenav-accent data-[state=open]:hover:text-sidenav-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 group-data-[state=Collapsed]:size-8! group-data-[state=Collapsed]:p-0! [&>svg]:stroke-2 aria-[current=page]:[&>svg]:stroke-[2.7]",
+        variants: {
+            variant: {
+                Default: "hover:bg-sidenav-accent hover:text-sidenav-accent-foreground",
+                Outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidenav-border))] hover:bg-sidenav-accent hover:text-sidenav-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidenav-accent))]",
+            },
+            size: {
+                Default: "h-8 text-sm",
+                Sm: "h-7 text-xs",
+                Lg: "h-12",
+            }
+        },
+        component: {
+            element: button,
+            support_href: true,
+            support_aria_current: true
+        }
+    }
+}
+
+#[component]
+pub fn SidenavTrigger(
+    #[prop(into)] data_state: RwSignal<SidenavState>,
+    #[prop(optional, into)] class: String,
+) -> impl IntoView {
+    view! {
+        <button
+            on:click=move |_| data_state.update(|s| *s = match s { SidenavState::Expanded => SidenavState::Collapsed, SidenavState::Collapsed => SidenavState::Expanded })
+            data-name="SidenavTrigger"
+            class=tw_merge!("inline-flex gap-2 justify-center items-center text-sm font-medium whitespace-nowrap rounded-md transition-all outline-none size-7 hover:bg-accent hover:text-accent-foreground focus-visible:ring-2", class)
+        >
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-panel-left"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/></svg>
+        </button>
+    }
+}

frontend/src/components/ui/skeleton.rs

@@ -0,0 +1,13 @@
+use leptos::prelude::*;
+use tw_merge::tw_merge;
+
+#[component]
+pub fn Skeleton(
+    #[prop(optional, into)] class: String,
+) -> impl IntoView {
+    let class = tw_merge!(
+        "animate-pulse rounded-md bg-muted",
+        class
+    );
+    view! { <div class=class /> }
+}

frontend/src/components/ui/svg_icon.rs

@@ -0,0 +1,25 @@
+use leptos::prelude::*;
+use tw_merge::tw_merge;
+
+#[component]
+pub fn SvgIcon(
+    children: Children,
+    #[prop(optional, into)] class: String,
+) -> impl IntoView {
+    let class = tw_merge!("size-4", class);
+    
+    view! {
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class=class
+        >
+            {children()}
+        </svg>
+    }
+}

frontend/src/components/ui/switch.rs

@@ -0,0 +1,42 @@
+use leptos::prelude::*;
+use tailwind_fuse::tw_merge;
+
+#[component]
+pub fn Switch(
+    #[prop(into)] checked: Signal<bool>,
+    #[prop(into, optional)] on_checked_change: Option<Callback<bool>>,
+    #[prop(into, optional)] class: String,
+    #[prop(into, optional)] disabled: Signal<bool>,
+) -> impl IntoView {
+    let checked_val = move || checked.get();
+    let disabled_val = move || disabled.get();
+
+    let track_class = move || tw_merge!(
+        "inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
+        if checked_val() { "bg-primary" } else { "bg-input" },
+        class.clone()
+    );
+
+    let thumb_class = move || tw_merge!(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform",
+        if checked_val() { "translate-x-4" } else { "translate-x-0" }
+    );
+
+    view! {
+        <button
+            type="button"
+            role="switch"
+            aria-checked=move || checked_val().to_string()
+            disabled=disabled_val
+            class=track_class
+            on:click=move |e| {
+                e.prevent_default();
+                if let Some(cb) = on_checked_change {
+                    cb.run(!checked_val());
+                }
+            }
+        >
+            <span class=thumb_class />
+        </button>
+    }
+}

frontend/src/components/ui/table.rs

@@ -0,0 +1,60 @@
+use leptos::prelude::*;
+use tw_merge::tw_merge;
+
+#[component]
+pub fn TableWrapper(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!("overflow-hidden rounded-md border w-full", class);
+    view! { <div class=class>{children()}</div> }
+}
+
+#[component]
+pub fn Table(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!("w-full text-sm border-collapse", class);
+    view! { <table class=class>{children()}</table> }
+}
+
+#[component]
+pub fn TableCaption(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!("mt-4 text-sm text-muted-foreground", class);
+    view! { <caption class=class>{children()}</caption> }
+}
+
+#[component]
+pub fn TableHeader(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!("[&_tr]:border-b bg-muted/50", class);
+    view! { <thead class=class>{children()}</thead> }
+}
+
+#[component]
+pub fn TableRow(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!("border-b transition-colors data-[state=selected]:bg-muted hover:bg-muted/50", class);
+    view! { <tr class=class>{children()}</tr> }
+}
+
+#[component]
+pub fn TableHead(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!(
+        "h-10 px-4 text-left align-middle font-medium text-muted-foreground whitespace-nowrap",
+        "transition-all duration-100 active:scale-[0.98] cursor-pointer select-none hover:bg-muted/30 hover:text-foreground",
+        class
+    );
+    view! { <th class=class>{children()}</th> }
+}
+
+#[component]
+pub fn TableBody(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!("[&_tr:last-child]:border-0", class);
+    view! { <tbody class=class>{children()}</tbody> }
+}
+
+#[component]
+pub fn TableCell(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!("p-2 px-4 align-middle", class);
+    view! { <td class=class>{children()}</td> }
+}
+
+#[component]
+pub fn TableFooter(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let class = tw_merge!("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", class);
+    view! { <tfoot class=class>{children()}</tfoot> }
+}

frontend/src/components/ui/theme_toggle.rs

@@ -0,0 +1,76 @@
+use crate::components::ui::svg_icon::SvgIcon;
+use leptos::prelude::*;
+
+use crate::components::hooks::use_theme_mode::use_theme_mode;
+
+#[component]
+pub fn ThemeToggle() -> impl IntoView {
+    let theme_mode = use_theme_mode();
+
+    view! {
+        <style>
+            {"
+            .theme__toggle_transition {
+            -webkit-tap-highlight-color: transparent;
+            
+            svg path {
+            transform-origin: center;
+            transition: all .6s ease;
+            transform: translate3d(0,0,0);
+            backface-visibility: hidden;
+            
+            &.sun {
+            transform: scale(.4) rotate(60deg);
+            opacity: 0;
+            }
+            
+            &.moon {
+            opacity: 1;
+            }
+            }
+            
+            &.switch {
+            svg path {
+            &.sun {
+            transform: scale(1) rotate(0);
+            opacity: 1;
+            }
+            
+            &.moon {
+            transform: scale(.4) rotate(-60deg);
+            opacity: 0;
+            }
+            }
+            }
+            }
+            "}
+        </style>
+
+        <button
+            type="button"
+            aria-label="Toggle theme"
+            class=move || {
+                let base_class = "theme__toggle_transition";
+                if theme_mode.get() { format!("{base_class} switch") } else { base_class.to_string() }
+            }
+            on:click=move |_| theme_mode.toggle()
+        >
+            <SvgIcon class="size-4">
+                <path
+                    d="M12 1.75V3.25M12 20.75V22.25M1.75 12H3.25M20.75 12H22.25M4.75216 4.75216L5.81282 5.81282M18.1872 18.1872L19.2478 19.2478M4.75216 19.2478L5.81282 18.1872M18.1872 5.81282L19.2478 4.75216M16.25 12C16.25 14.3472 14.3472 16.25 12 16.25C9.65279 16.25 7.75 14.3472 7.75 12C7.75 9.65279 9.65279 7.75 12 7.75C14.3472 7.75 16.25 9.65279 16.25 12Z"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    class="sun text-neutral-300"
+                />
+                <path
+                    d="M2.75 12C2.75 17.1086 6.89137 21.25 12 21.25C16.7154 21.25 20.6068 17.7216 21.1778 13.161C20.1198 13.8498 18.8566 14.25 17.5 14.25C13.7721 14.25 10.75 11.2279 10.75 7.5C10.75 5.66012 11.4861 3.99217 12.6799 2.77461C12.4554 2.7583 12.2287 2.75 12 2.75C6.89137 2.75 2.75 6.89137 2.75 12Z"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    stroke-linejoin="round"
+                    class="moon text-neutral-700"
+                />
+            </SvgIcon>
+        </button>
+    }
+}

frontend/src/components/ui/toast.rs

@@ -0,0 +1,251 @@
+use leptos::prelude::*;
+use tw_merge::*;
+
+#[derive(Clone, Copy, PartialEq, Eq, Default, strum::Display, Debug)]
+#[allow(dead_code)]
+pub enum ToastType {
+    #[default]
+    Default,
+    Success,
+    Error,
+    Warning,
+    Info,
+    Loading,
+}
+
+#[derive(Clone, Copy, PartialEq, Eq, Default, strum::Display, Debug)]
+#[allow(dead_code)]
+pub enum SonnerPosition {
+    TopLeft,
+    TopCenter,
+    TopRight,
+    #[default]
+    BottomRight,
+    BottomCenter,
+    BottomLeft,
+}
+
+#[derive(Clone, Debug, PartialEq)]
+pub struct ToastData {
+    pub id: u64,
+    pub title: String,
+    pub description: Option<String>,
+    pub variant: ToastType,
+    pub duration: u64, // ms
+    pub is_exiting: RwSignal<bool>,
+}
+
+#[derive(Clone, Copy)]
+pub struct ToasterStore {
+    pub toasts: RwSignal<Vec<ToastData>>,
+}
+
+#[component]
+pub fn SonnerTrigger(
+    toast: ToastData,
+    index: usize,
+    total: usize,
+    position: SonnerPosition,
+    is_expanded: Signal<bool>,
+    #[prop(optional)] on_dismiss: Option<Callback<()>>,
+) -> impl IntoView {
+    let _ = is_expanded; // Silence unused warning while keeping prop name intact for builder
+    let variant_classes = match toast.variant {
+        ToastType::Default => "bg-background text-foreground border-border",
+        ToastType::Success => "bg-background text-foreground border-border [&_.icon]:text-green-500",
+        ToastType::Error => "bg-background text-foreground border-border [&_.icon]:text-destructive",
+        ToastType::Warning => "bg-background text-foreground border-border [&_.icon]:text-yellow-500",
+        ToastType::Info => "bg-background text-foreground border-border [&_.icon]:text-blue-500",
+        ToastType::Loading => "bg-background text-foreground border-border",
+    };
+
+    let bar_color = match toast.variant {
+        ToastType::Success => "bg-green-500",
+        ToastType::Error => "bg-destructive",
+        ToastType::Warning => "bg-yellow-500",
+        ToastType::Info => "bg-blue-500",
+        _ => "bg-primary",
+    };
+
+    // Simplified Style (No manual translateY needed with Flexbox)
+    let style = move || {
+        format!(
+            "z-index: {}; opacity: 1; transition: all 0.3s ease;",
+            total - index
+        )
+    };
+
+    let animation_class = move || {
+        let pos = position.to_string();
+        let is_left = pos.contains("Left");
+        let is_exiting = toast.is_exiting.get();
+        
+        match (is_left, is_exiting) {
+            (true, false) => "animate-sonner-in-left",
+            (true, true) => "animate-sonner-out-left",
+            (false, false) => "animate-sonner-in-right",
+            (false, true) => "animate-sonner-out-right",
+        }
+    };
+
+    let icon = match toast.variant {
+        ToastType::Success => Some(view! { <span class="icon font-bold text-lg">"✓"</span> }.into_any()),
+        ToastType::Error => Some(view! { <span class="icon font-bold text-lg">"✕"</span> }.into_any()),
+        ToastType::Warning => Some(view! { <span class="icon font-bold text-lg">"⚠"</span> }.into_any()),
+        ToastType::Info => Some(view! { <span class="icon font-bold text-lg">"ℹ"</span> }.into_any()),
+        _ => None,
+    };
+
+    view! {
+        <div
+            class=move || tw_merge!(
+                "relative transition-all duration-300 ease-in-out cursor-pointer pointer-events-auto",
+                "flex items-center gap-3 w-full max-w-[calc(100vw-2rem)] sm:max-w-[380px] p-4 rounded-lg border shadow-xl bg-card",
+                variant_classes,
+                animation_class()
+            )
+            style=style
+            on:click=move |_| {
+                if let Some(cb) = on_dismiss {
+                    cb.run(());
+                }
+            }
+        >
+            {icon}
+            <div class="flex flex-col gap-0.5 overflow-hidden flex-1">
+                <div class="text-sm font-bold truncate leading-tight">{toast.title}</div>
+                {move || toast.description.as_ref().map(|d| view! { <div class="text-xs opacity-80 truncate">{d.clone()}</div> })}
+            </div>
+
+            // Progress Bar
+            <div 
+                class=tw_merge!("absolute bottom-0 left-0 h-1 w-full opacity-30", bar_color)
+                style=format!(
+                    "animation: sonner-progress {}ms linear forwards; transform-origin: left;",
+                    toast.duration
+                )
+            />
+        </div>
+    }.into_any()
+}
+
+thread_local! {
+    static TOASTS: std::cell::RefCell<Option<RwSignal<Vec<ToastData>>>> = std::cell::RefCell::new(None);
+}
+
+pub fn provide_toaster() {
+    let toasts = RwSignal::new(Vec::<ToastData>::new());
+    TOASTS.with(|t| *t.borrow_mut() = Some(toasts));
+    provide_context(ToasterStore { toasts });
+}
+
+#[component]
+pub fn Toaster(#[prop(default = SonnerPosition::default())] position: SonnerPosition) -> impl IntoView {
+    let store = use_context::<ToasterStore>().expect("Toaster context not found");
+    let toasts = store.toasts;
+
+    let is_bottom = position.to_string().contains("Bottom");
+
+    let container_class = match position {
+        SonnerPosition::TopLeft => "left-6 top-6 items-start",
+        SonnerPosition::TopRight => "right-6 top-6 items-end",
+        SonnerPosition::TopCenter => "left-1/2 -translate-x-1/2 top-6 items-center",
+        SonnerPosition::BottomCenter => "left-1/2 -translate-x-1/2 bottom-6 items-center",
+        SonnerPosition::BottomLeft => "left-6 bottom-6 items-start",
+        SonnerPosition::BottomRight => "right-6 bottom-6 items-end",
+    };
+
+    view! {
+        <style>
+            "@keyframes sonner-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
+             @keyframes sonner-in-right { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
+             @keyframes sonner-out-right { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }
+             @keyframes sonner-in-left { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
+             @keyframes sonner-out-left { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-100%); opacity: 0; } }
+             .animate-sonner-in-right { animation: sonner-in-right 0.3s ease-out forwards; }
+             .animate-sonner-out-right { animation: sonner-out-right 0.3s ease-in forwards; }
+             .animate-sonner-in-left { animation: sonner-in-left 0.3s ease-out forwards; }
+             .animate-sonner-out-left { animation: sonner-out-left 0.3s ease-in forwards; }"
+        </style>
+        <div 
+            class=tw_merge!(
+                "fixed z-[100] flex gap-3 pointer-events-none w-full sm:w-[400px]",
+                "left-1/2 -translate-x-1/2 sm:left-auto sm:translate-x-0 px-4 sm:px-0", // Mobile centering fix
+                if is_bottom { "flex-col-reverse" } else { "flex-col" },
+                container_class,
+                "pb-[env(safe-area-inset-bottom)] pt-[env(safe-area-inset-top)]"
+            )
+        >
+            <For
+                each=move || {
+                    let list = toasts.get();
+                    list.into_iter().enumerate().collect::<Vec<_>>()
+                }
+                key=|(_, toast)| toast.id
+                children=move |(index, toast)| {
+                    let id = toast.id;
+                    let total = toasts.with(|t| t.len());
+                    let is_exiting = toast.is_exiting;
+                    
+                    view! {
+                        <SonnerTrigger
+                            toast=toast
+                            index=index
+                            total=total
+                            position=position
+                            is_expanded=Signal::derive(move || true)
+                            on_dismiss=Callback::new(move |_| {
+                                is_exiting.set(true);
+                                leptos::task::spawn_local(async move {
+                                    gloo_timers::future::TimeoutFuture::new(300).await;
+                                    toasts.update(|vec| vec.retain(|t| t.id != id));
+                                });
+                            })
+                        />
+                    }
+                }
+            />
+        </div>
+    }.into_any()
+}
+
+pub fn toast(title: impl Into<String>, variant: ToastType) {
+    let signal_opt = TOASTS.with(|t| *t.borrow());
+    
+    if let Some(toasts) = signal_opt {
+        let id = js_sys::Math::random().to_bits();
+        let new_toast = ToastData {
+            id,
+            title: title.into(),
+            description: None,
+            variant,
+            duration: 4000,
+            is_exiting: RwSignal::new(false),
+        };
+        
+        toasts.update(|t| {
+            t.push(new_toast.clone());
+            if t.len() > 5 {
+                t.remove(0);
+            }
+        });
+
+        let duration = new_toast.duration;
+        let is_exiting = new_toast.is_exiting;
+        leptos::task::spawn_local(async move {
+            gloo_timers::future::TimeoutFuture::new(duration as u32).await;
+            is_exiting.set(true);
+            gloo_timers::future::TimeoutFuture::new(300).await;
+            toasts.update(|vec| vec.retain(|t| t.id != id));
+        });
+    }
+}
+
+#[allow(dead_code)]
+pub fn toast_success(title: impl Into<String>) { toast(title, ToastType::Success); }
+#[allow(dead_code)]
+pub fn toast_error(title: impl Into<String>) { toast(title, ToastType::Error); }
+#[allow(dead_code)]
+pub fn toast_warning(title: impl Into<String>) { toast(title, ToastType::Warning); }
+#[allow(dead_code)]
+pub fn toast_info(title: impl Into<String>) { toast(title, ToastType::Info); }

frontend/src/lib.rs

@@ -1,10 +1,12 @@
+#![recursion_limit = "256"]
 mod app;
 mod components;
 pub mod utils;
 pub mod store;
 pub mod api;
 
-use leptos::*;
+use leptos::prelude::*;
+use leptos::mount::mount_to_body;
 use wasm_bindgen::prelude::*;
 use app::App;
 

frontend/src/store.rs

@@ -1,79 +1,34 @@
 use futures::StreamExt;
 use gloo_net::eventsource::futures::EventSource;
-use leptos::*;
-use shared::{AppEvent, GlobalStats, NotificationLevel, SystemNotification, Torrent};
+use leptos::prelude::*;
+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;
 
-#[derive(Clone, Debug, PartialEq)]
-pub struct NotificationItem {
-    pub id: u64,
-    pub notification: SystemNotification,
-}
+use crate::components::ui::toast::{ToastType, toast};
 
-// ============================================================================
-// Toast Helper Functions (Clean Code: Single Responsibility)
-// ============================================================================
-
-/// Shows a toast notification using a direct signal reference.
-/// Use this version inside async blocks (spawn_local) where use_context is unavailable.
-/// Auto-removes after 5 seconds.
-pub fn show_toast_with_signal(
-    notifications: RwSignal<Vec<NotificationItem>>,
-    level: NotificationLevel,
-    message: impl Into<String>,
-) {
-    let id = js_sys::Date::now() as u64;
-    let notification = SystemNotification {
-        level,
-        message: message.into(),
-    };
-    let item = NotificationItem { id, notification };
-
-    notifications.update(|list| list.push(item));
-
-    // Auto-remove after 5 seconds
-    let _ = set_timeout(
-        move || {
-            notifications.update(|list| list.retain(|i| i.id != id));
-        },
-        std::time::Duration::from_secs(5),
-    );
-}
-
-/// Shows a toast notification with the given level and message.
-/// Only works within reactive scope (components, effects). For async, use show_toast_with_signal.
-/// Auto-removes after 5 seconds.
 pub fn show_toast(level: NotificationLevel, message: impl Into<String>) {
-    if let Some(store) = use_context::<TorrentStore>() {
-        show_toast_with_signal(store.notifications, level, message);
-    }
+    let msg = message.into();
+    gloo_console::log!("TOAST CALL:", &msg, format!("{:?}", level));
+    log::info!("Displaying toast: [{:?}] {}", level, msg);
+    
+    let variant = match level {
+        NotificationLevel::Success => ToastType::Success,
+        NotificationLevel::Error => ToastType::Error,
+        NotificationLevel::Warning => ToastType::Warning,
+        NotificationLevel::Info => ToastType::Info,
+    };
+    
+    toast(msg, variant);
 }
 
-/// Convenience function for success toasts (reactive scope only)
-pub fn toast_success(message: impl Into<String>) {
-    show_toast(NotificationLevel::Success, message);
-}
+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); }
 
-/// Convenience function for error toasts (reactive scope only)
-pub fn toast_error(message: impl Into<String>) {
-    show_toast(NotificationLevel::Error, message);
-}
-
-/// Convenience function for info toasts (reactive scope only)
-pub fn toast_info(message: impl Into<String>) {
-    show_toast(NotificationLevel::Info, message);
-}
-
-/// Convenience function for warning toasts (reactive scope only)
-pub fn toast_warning(message: impl Into<String>) {
-    show_toast(NotificationLevel::Warning, message);
-}
-
-// ============================================================================
-// Action Message Mapping (Clean Code: DRY Principle)
-// ============================================================================
-
-/// Maps torrent action strings to user-friendly Turkish messages.
-/// Returns (success_message, error_message)
 pub fn get_action_messages(action: &str) -> (&'static str, &'static str) {
     match action {
         "start" => ("Torrent başlatıldı", "Torrent başlatılamadı"),
@@ -88,416 +43,208 @@ pub fn get_action_messages(action: &str) -> (&'static str, &'static str) {
 
 #[derive(Clone, Copy, Debug, PartialEq, Eq)]
 pub enum FilterStatus {
-    All,
-    Downloading,
-    Seeding,
-    Completed,
-    Paused,
-    Inactive,
-    Active,
-    Error,
+    All, Downloading, Seeding, Completed, Paused, Inactive, Active, Error,
 }
 
-impl FilterStatus {
-    pub fn as_str(&self) -> &'static str {
-        match self {
-            FilterStatus::All => "All",
-            FilterStatus::Downloading => "Downloading",
-            FilterStatus::Seeding => "Seeding",
-            FilterStatus::Completed => "Completed",
-            FilterStatus::Paused => "Paused",
-            FilterStatus::Inactive => "Inactive",
-            FilterStatus::Active => "Active",
-            FilterStatus::Error => "Error",
-        }
-    }
-}
-
-use std::collections::HashMap;
-
 #[derive(Clone, Copy, Debug)]
 pub struct TorrentStore {
     pub torrents: RwSignal<HashMap<String, Torrent>>,
     pub filter: RwSignal<FilterStatus>,
     pub search_query: RwSignal<String>,
     pub global_stats: RwSignal<GlobalStats>,
-    pub notifications: RwSignal<Vec<NotificationItem>>,
     pub user: RwSignal<Option<String>>,
+    pub selected_torrent: RwSignal<Option<String>>,
+    pub push_enabled: RwSignal<bool>,
 }
 
 pub fn provide_torrent_store() {
-    let torrents = create_rw_signal(HashMap::new());
-    let filter = create_rw_signal(FilterStatus::All);
-    let search_query = create_rw_signal(String::new());
-    let global_stats = create_rw_signal(GlobalStats::default());
-    let notifications = create_rw_signal(Vec::<NotificationItem>::new());
-    let user = create_rw_signal(Option::<String>::None);
+    let torrents = RwSignal::new(HashMap::new());
+    let filter = RwSignal::new(FilterStatus::All);
+    let search_query = RwSignal::new(String::new());
+    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);
 
-    // Browser notification hook
     let show_browser_notification = crate::utils::notification::use_app_notification();
 
-    let store = TorrentStore {
-        torrents,
-        filter,
-        search_query,
-        global_stats,
-        notifications,
-        user,
-    };
+    let store = TorrentStore { torrents, filter, search_query, global_stats, user, selected_torrent, push_enabled };
     provide_context(store);
 
-    // Initialize SSE connection with auto-reconnect
-    create_effect(move |_| {
-        // Sadece kullanıcı giriş yapmışsa bağlantıyı başlat
-        if user.get().is_none() {
-            logging::log!("SSE: User not authenticated, skipping connection.");
-            return;
+    // Initial check for push status
+    spawn_local(async move {
+        if let Ok(enabled) = is_push_subscribed().await {
+            push_enabled.set(enabled);
         }
+    });
 
-        let show_browser_notification = show_browser_notification.clone();
-        spawn_local(async move {
-            let mut backoff_ms: u32 = 1000; // Start with 1 second
-            let max_backoff_ms: u32 = 30000; // Max 30 seconds
-            let mut was_connected = false;
-            let mut disconnect_notified = false; // Track if we already showed disconnect toast
-            let mut got_first_message; // Only count as "connected" after receiving data
+    let global_stats_for_sse = global_stats;
+    let torrents_for_sse = torrents;
+    let show_browser_notification = show_browser_notification.clone();
 
-            loop {
-                let es_result = EventSource::new("/api/events");
+    spawn_local(async move {
+        let mut backoff_ms: u32 = 1000;
+        let mut was_connected = false;
+        let mut disconnect_notified = false;
 
-                match es_result {
-                    Ok(mut es) => {
-                        match es.subscribe("message") {
-                            Ok(mut stream) => {
-                                // Don't show "connected" toast yet - wait for first real message
-                                got_first_message = false;
+        loop {
+            let es_result = EventSource::new("/api/events");
+            match es_result {
+                Ok(mut es) => {
+                    if let Ok(mut stream) = es.subscribe("message") {
+                        let mut got_first_message = false;
+                        while let Some(Ok((_, msg))) = stream.next().await {
+                            if !got_first_message {
+                                got_first_message = true;
+                                backoff_ms = 1000;
+                                if was_connected && disconnect_notified {
+                                    show_toast(NotificationLevel::Success, "Sunucu bağlantısı yeniden kuruldu");
+                                    disconnect_notified = false;
+                                }
+                                was_connected = true;
+                            }
 
-                                // Process messages
-                                while let Some(Ok((_, msg))) = stream.next().await {
-                                    // First successful message = truly connected
-                                    if !got_first_message {
-                                        got_first_message = true;
-                                        backoff_ms = 1000; // Reset backoff on real data
-
-                                        if was_connected && disconnect_notified {
-                                            // We were previously connected, lost connection, and now truly reconnected
-                                            show_toast_with_signal(
-                                                notifications,
-                                                NotificationLevel::Success,
-                                                "Sunucu bağlantısı yeniden kuruldu",
-                                            );
-                                            disconnect_notified = false;
-                                        }
-                                        was_connected = true;
-                                    }
-
-                                    if let Some(data_str) = msg.data().as_string() {
-                                        if let Ok(event) = serde_json::from_str::<AppEvent>(&data_str) {
-                                            match event {
-                                                AppEvent::FullList { torrents: list, .. } => {
-                                                    let map: HashMap<String, Torrent> = list
-                                                        .into_iter()
-                                                        .map(|t| (t.hash.clone(), t))
-                                                        .collect();
-                                                    torrents.set(map);
+                            if let Some(data_str) = msg.data().as_string() {
+                                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::Update(update) => {
-                                                    torrents.update(|map| {
-                                                        if let Some(t) = map.get_mut(&update.hash) {
-                                                            if let Some(name) = update.name {
-                                                                t.name = name;
-                                                            }
-                                                            if let Some(size) = update.size {
-                                                                t.size = size;
-                                                            }
-                                                            if let Some(down_rate) = update.down_rate {
-                                                                t.down_rate = down_rate;
-                                                            }
-                                                            if let Some(up_rate) = update.up_rate {
-                                                                t.up_rate = up_rate;
-                                                            }
-                                                            if let Some(percent_complete) = update.percent_complete {
-                                                                t.percent_complete = percent_complete;
-                                                            }
-                                                            if let Some(completed) = update.completed {
-                                                                t.completed = completed;
-                                                            }
-                                                            if let Some(eta) = update.eta {
-                                                                t.eta = eta;
-                                                            }
-                                                            if let Some(status) = update.status {
-                                                                t.status = status;
-                                                            }
-                                                            if let Some(error_message) = update.error_message {
-                                                                t.error_message = error_message;
-                                                            }
-                                                            if let Some(label) = update.label {
-                                                                t.label = Some(label);
-                                                            }
-                                                        }
-                                                    });
-                                                }
-                                                AppEvent::Stats(stats) => {
-                                                    global_stats.set(stats);
-                                                }
-                                                AppEvent::Notification(n) => {
-                                                    // Show toast notification
-                                                    show_toast_with_signal(notifications, n.level.clone(), n.message.clone());
-
-                                                    // Show browser notification for critical events
-                                                    let is_critical = n.message.contains("tamamlandı")
-                                                        || n.level == shared::NotificationLevel::Error;
-
-                                                    if is_critical {
-                                                        let title = match n.level {
-                                                            shared::NotificationLevel::Success => "✅ VibeTorrent",
-                                                            shared::NotificationLevel::Error => "❌ VibeTorrent",
-                                                            shared::NotificationLevel::Warning => "⚠️ VibeTorrent",
-                                                            shared::NotificationLevel::Info => "ℹ️ VibeTorrent",
-                                                        };
-
-                                                        show_browser_notification(
-                                                            title,
-                                                            &n.message
-                                                        );
-                                                    }
+                                            }
+                                            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);
                                                 }
                                             }
                                         }
                                     }
                                 }
-
-                                // Stream ended - connection lost
-                                if was_connected && !disconnect_notified {
-                                    show_toast_with_signal(
-                                        notifications,
-                                        NotificationLevel::Warning,
-                                        "Sunucu bağlantısı kesildi, yeniden bağlanılıyor...",
-                                    );
-                                    disconnect_notified = true;
-                                }
-                            }
-                            Err(_) => {
-                                // Failed to subscribe - only notify once
-                                if was_connected && !disconnect_notified {
-                                    show_toast_with_signal(
-                                        notifications,
-                                        NotificationLevel::Warning,
-                                        "Sunucu bağlantısı kesildi, yeniden bağlanılıyor...",
-                                    );
-                                    disconnect_notified = true;
-                                }
                             }
                         }
-                    }
-                    Err(_) => {
-                        // Failed to create EventSource - only notify once
                         if was_connected && !disconnect_notified {
-                            show_toast_with_signal(
-                                notifications,
-                                NotificationLevel::Warning,
-                                "Sunucu bağlantısı kesildi, yeniden bağlanılıyor...",
-                            );
+                            show_toast(NotificationLevel::Warning, "Sunucu bağlantısı kesildi, yeniden bağlanılıyor...");
                             disconnect_notified = true;
                         }
                     }
                 }
-
-                // Wait before reconnecting (exponential backoff)
-                gloo_timers::future::TimeoutFuture::new(backoff_ms).await;
-                backoff_ms = std::cmp::min(backoff_ms * 2, max_backoff_ms);
+                Err(_) => {
+                    if was_connected && !disconnect_notified {
+                        show_toast(NotificationLevel::Warning, "Sunucu bağlantısı kurulamıyor...");
+                        disconnect_notified = true;
+                    }
+                }
             }
-        });
+            gloo_timers::future::TimeoutFuture::new(backoff_ms).await;
+            backoff_ms = std::cmp::min(backoff_ms * 2, 30000);
+        }
     });
 }
 
-// ============================================================================
-// Push Notification Subscription
-// ============================================================================
-
-use serde::{Deserialize, Serialize};
-use wasm_bindgen::prelude::*;
-
-#[derive(Serialize, Deserialize, Debug)]
-pub struct PushSubscriptionData {
-    pub endpoint: String,
-    pub keys: PushKeys,
-}
-
-#[derive(Serialize, Deserialize, Debug)]
-pub struct PushKeys {
-    pub p256dh: String,
-    pub auth: String,
-}
-
-/// Subscribe user to push notifications
-/// Requests notification permission if needed, then subscribes to push
-pub async fn subscribe_to_push_notifications() {
-    use crate::api;
-
-    // First, request notification permission if not already granted
-    let window = web_sys::window().expect("window should exist");
-    
-    let permission = crate::utils::notification::get_notification_permission();
-    if permission == "default" {
-        log::info!("Requesting notification permission...");
-        if !crate::utils::notification::request_notification_permission().await {
-            log::warn!("Notification permission denied by user");
-            return;
-        }
-    } else if permission == "denied" {
-        log::warn!("Notification permission was denied");
-        return;
-    }
-
-    log::info!("Notification permission granted! Proceeding with push subscription...");
-
-    // Get VAPID public key from backend
-    let public_key = match api::push::get_public_key().await {
-        Ok(key) => key,
-        Err(e) => {
-            log::error!("Failed to get VAPID public key: {:?}", e);
-            return;
-        }
-    };
-
-    log::info!("VAPID public key from backend: {} (len: {})", public_key, public_key.len());
-
-    // Convert VAPID public key to Uint8Array
-    let public_key_array = match url_base64_to_uint8array(&public_key) {
-        Ok(arr) => {
-            log::info!("VAPID key converted to Uint8Array (length: {})", arr.length());
-            arr
-        }
-        Err(e) => {
-            log::error!("Failed to convert VAPID key: {:?}", e);
-            return;
-        }
-    };
-
-    // Get service worker registration
+pub async fn is_push_subscribed() -> Result<bool, String> {
+    let window = web_sys::window().ok_or("no window")?;
     let navigator = window.navigator();
-    let service_worker = navigator.service_worker();
-
-    let registration_promise = match service_worker.ready() {
-        Ok(promise) => promise,
-        Err(e) => {
-            log::error!("Failed to get ready promise: {:?}", e);
-            return;
-        }
-    };
-
-    let registration_future = wasm_bindgen_futures::JsFuture::from(registration_promise);
-
-    let registration = match registration_future.await {
-        Ok(reg) => reg,
-        Err(e) => {
-            log::error!("Failed to get service worker registration: {:?}", e);
-            return;
-        }
-    };
-
-    let service_worker_registration = registration
+    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>()
-        .expect("should be ServiceWorkerRegistration");
+        .map_err(|_| "not a registration")?;
 
-    // Subscribe to push
-    let push_manager = match service_worker_registration.push_manager() {
-        Ok(pm) => pm,
-        Err(e) => {
-            log::error!("Failed to get push manager: {:?}", e);
-            return;
-        }
+    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; }
     };
 
-    let subscribe_options = web_sys::PushSubscriptionOptionsInit::new();
-    subscribe_options.set_user_visible_only(true);
-    subscribe_options.set_application_server_key(&public_key_array);
-
-    let subscribe_promise = match push_manager.subscribe_with_options(&subscribe_options) {
-        Ok(promise) => promise,
-        Err(e) => {
-            log::error!("Failed to subscribe to push: {:?}", 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; }
     };
 
-    let subscription_future = wasm_bindgen_futures::JsFuture::from(subscribe_promise);
+    // 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[..]);
 
-    let subscription = match subscription_future.await {
-        Ok(sub) => sub,
-        Err(e) => {
-            log::error!("Failed to get push subscription: {:?}", e);
-            return;
-        }
-    };
+    // 3. Prepare Options
+    let mut options = web_sys::PushSubscriptionOptionsInit::new();
+    options.set_user_visible_only(true);
+    options.set_application_server_key(&key_array.into());
 
-    let push_subscription = subscription
-        .dyn_into::<web_sys::PushSubscription>()
-        .expect("should be PushSubscription");
+    // 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();
 
-    // PushSubscription objects can be serialized directly via JSON.stringify which calls their toJSON method internally.
-    // Or we can use Reflect to call toJSON if we want the object directly.
-    // Let's use the robust way: call toJSON via Reflect but handle it gracefully.
-    let json_val = match js_sys::Reflect::get(&push_subscription, &"toJSON".into()) {
-        Ok(func) if func.is_function() => {
-             let json_func = js_sys::Function::from(func);
-             match json_func.call0(&push_subscription) {
-                 Ok(res) => res,
-                 Err(e) => {
-                     log::error!("Failed to call toJSON: {:?}", e);
-                     return;
-                 }
-             }
-        }
-        _ => {
-            // Fallback: try to stringify the object directly
-            // log::warn!("toJSON not found, trying JSON.stringify");
-            let json_str = match js_sys::JSON::stringify(&push_subscription) {
-                Ok(s) => s,
-                Err(e) => {
-                    log::error!("Failed to stringify subscription: {:?}", e);
-                    return;
-                }
-            };
-            // Parse back to object to match our expected flow (slightly inefficient but safe)
-            match js_sys::JSON::parse(&String::from(json_str)) {
-                Ok(v) => v,
-                Err(e) => {
-                    log::error!("Failed to parse stringified subscription: {:?}", e);
-                    return;
+            // 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),
             }
         }
-    };
-    
-    // Convert JsValue (JSON object) to PushSubscriptionJSON struct via serde
-    // Note: web_sys::PushSubscriptionJSON is not a struct we can directly use with serde_json usually,
-    // but we can use serde-wasm-bindgen to convert JsValue -> Rust Struct
-    let subscription_data: PushSubscriptionData = match serde_wasm_bindgen::from_value(json_val) {
-        Ok(data) => data,
-        Err(e) => {
-            log::error!("Failed to parse subscription JSON: {:?}", e);
-            return;
-        }
-    };
-
-    // Send to backend (subscription_data is already the struct we need)
-    if let Err(e) = api::push::subscribe(&subscription_data).await {
-        log::error!("Failed to send subscription to backend: {:?}", e);
+        Err(e) => log::error!("Subscription Error: {:?}", e),
     }
 }
 
-/// Helper to convert URL-safe base64 string to Uint8Array
-/// Uses pure Rust base64 crate for better safety and performance
-fn url_base64_to_uint8array(base64_string: &str) -> Result<js_sys::Uint8Array, JsValue> {
-    use base64::{engine::general_purpose, Engine as _};
+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();
 
-    // VAPID keys are URL-safe base64. Try both NO_PAD and padded for robustness.
-    let bytes = general_purpose::URL_SAFE_NO_PAD
-        .decode(base64_string)
-        .or_else(|_| general_purpose::URL_SAFE.decode(base64_string))
-        .map_err(|e| JsValue::from_str(&format!("Base64 decode error: {}", e)))?;
-
-    Ok(js_sys::Uint8Array::from(&bytes[..]))
+    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ı");
+            }
+        }
+    }
 }

frontend/src/utils/notification.rs

@@ -1,10 +1,12 @@
 use wasm_bindgen::prelude::*;
 use web_sys::{Notification, NotificationOptions};
-use leptos::*;
-use leptos_use::{use_web_notification, UseWebNotificationReturn, NotificationPermission};
+
 
 /// Request browser notification permission from user
 pub async fn request_notification_permission() -> bool {
+    if !is_notification_supported() {
+        return false;
+    }
     if let Ok(promise) = Notification::request_permission() {
         if let Ok(result) = wasm_bindgen_futures::JsFuture::from(promise).await {
             return result.as_string().unwrap_or_default() == "granted";
@@ -21,6 +23,9 @@ pub fn is_notification_supported() -> bool {
 
 /// Get current notification permission status
 pub fn get_notification_permission() -> String {
+    if !is_notification_supported() {
+        return "denied".to_string();
+    }
     match Notification::permission() {
         web_sys::NotificationPermission::Granted => "granted".to_string(),
         web_sys::NotificationPermission::Denied => "denied".to_string(),
@@ -32,8 +37,6 @@ pub fn get_notification_permission() -> String {
 /// Hook for using browser notifications within Leptos components or effects.
 /// This uses leptos-use for reactive permission tracking.
 pub fn use_app_notification() -> impl Fn(&str, &str) + Clone {
-    let UseWebNotificationReturn { permission, .. } = use_web_notification();
-    
     move |title: &str, body: &str| {
         // Check user preference from localStorage
         let window = web_sys::window().expect("no global window");
@@ -42,8 +45,8 @@ pub fn use_app_notification() -> impl Fn(&str, &str) + Clone {
             .and_then(|s| s.get_item("vibetorrent_browser_notifications").ok().flatten())
             .unwrap_or_else(|| "true".to_string());
 
-        // Use the reactive permission signal from leptos-use
-        if enabled == "true" && permission.get() == NotificationPermission::Granted {
+        // Check platform support and permission
+        if enabled == "true" && is_notification_supported() && get_notification_permission() == "granted" {
             show_browser_notification(title, body);
         }
     }
@@ -79,4 +82,4 @@ pub fn show_notification_if_enabled(title: &str, body: &str) -> bool {
     }
     
     false
-}
+}

frontend/tailwind.config.js

@@ -1,6 +1,20 @@
+const path = require("path");
+const os = require("os");
+
+// Cargo registry'deki leptos-shadcn crate'lerini Tailwind'e taratmak için
+const cargoRegistry = path.join(
+  os.homedir(),
+  ".cargo/registry/src/*/leptos-shadcn-*/src/**/*.rs"
+);
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./index.html", "./src/**/*.{rs,html}"],
+  darkMode: "class",
+  content: [
+    "./index.html",
+    "./src/**/*.{rs,html}",
+    cargoRegistry,
+  ],
   theme: {
     extend: {
       colors: {
@@ -12,4 +26,7 @@ module.exports = {
       },
     },
   },
+  plugins: [
+    require("tailwindcss-animate"),
+  ],
 };

frontend/ui_config.toml

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

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

package.json

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

patches/coarsetime/Cargo.toml

@@ -0,0 +1,30 @@
+[package]
+edition = "2018"
+name = "coarsetime"
+version = "0.1.37"
+description = "Time and duration crate optimized for speed (patched for MIPS)"
+license = "BSD-2-Clause"
+
+[features]
+wasi-abi2 = ["dep:wasi-abi2"]
+
+[lib]
+name = "coarsetime"
+path = "src/lib.rs"
+
+[dependencies]
+portable-atomic = { version = "1", default-features = false, features = ["fallback"] }
+
+[target.'cfg(all(any(target_arch = "wasm32", target_arch = "wasm64"), target_os = "unknown"))'.dependencies.wasm-bindgen]
+version = "0.2"
+
+[target.'cfg(any(target_os = "wasix", target_os = "wasi"))'.dependencies.wasix]
+version = "0.13"
+
+[target.'cfg(not(any(target_os = "wasix", target_os = "wasi")))'.dependencies.libc]
+version = "0.2"
+
+[target.'cfg(target_os = "wasi")'.dependencies.wasi-abi2]
+version = "0.14.7"
+optional = true
+package = "wasi"

patches/coarsetime/src/clock.rs

@@ -4,9 +4,6 @@
 )))]
 use std::time;
 
-#[cfg(target_has_atomic = "64")]
-use std::sync::atomic::{AtomicU64, Ordering};
-#[cfg(not(target_has_atomic = "64"))]
 use portable_atomic::{AtomicU64, Ordering};
 
 use super::Duration;

patches/coarsetime/src/instant.rs

@@ -3,9 +3,6 @@ use std::mem::MaybeUninit;
 use std::ops::*;
 #[allow(unused_imports)]
 use std::ptr::*;
-#[cfg(target_has_atomic = "64")]
-use std::sync::atomic::{AtomicU64, Ordering};
-#[cfg(not(target_has_atomic = "64"))]
 use portable_atomic::{AtomicU64, Ordering};
 
 use super::duration::*;

shared/Cargo.toml

@@ -1,8 +1,50 @@
 [package]
 name = "shared"
 version = "0.1.0"
-edition = "2024"
+edition = "2021"
 
 [dependencies]
-serde = { version = "1.0.228", features = ["derive"] }
+serde = { version = "1.0", features = ["derive"] }
 utoipa = { version = "5.4.0", features = ["axum_extras"] }
+struct-patch = "0.5"
+rmp-serde = "1.3"
+bytes = "1"
+http = "1"
+
+# Leptos 0.8.7
+leptos = { version = "0.8.15", features = ["nightly", "msgpack"] }
+leptos_router = { version = "0.8.7", features = ["nightly"] }
+leptos_axum = { version = "0.8.7", optional = true }
+axum = { version = "0.8", features = ["macros"], optional = true }
+
+# SSR Dependencies (XML-RPC & SCGI)
+tokio = { version = "1", features = ["full"], optional = true }
+thiserror = { version = "2", optional = true }
+quick-xml = { version = "0.31", features = ["serde", "serialize"], optional = true }
+
+# Database
+sqlx = { version = "0.8", features = ["runtime-tokio", "sqlite"], optional = true }
+anyhow = { version = "1.0", optional = true }
+
+# Auth (SSR)
+jsonwebtoken = { version = "9", optional = true }
+cookie = { version = "0.18", features = ["percent-encode"], optional = true }
+bcrypt = { version = "0.17", optional = true }
+
+[features]
+default = []
+ssr = [
+    "dep:tokio",
+    "dep:thiserror",
+    "dep:quick-xml",
+    "dep:leptos_axum",
+    "dep:sqlx",
+    "dep:anyhow",
+    "dep:jsonwebtoken",
+    "dep:cookie",
+    "dep:bcrypt",
+    "dep:axum",
+    "leptos/ssr",
+    "leptos_router/ssr",
+]
+hydrate = ["leptos/hydrate"]

shared/src/codec.rs

@@ -0,0 +1 @@
+pub use leptos::server_fn::codec::MsgPack;

shared/src/lib.rs

@@ -1,7 +1,34 @@
 use serde::{Deserialize, Serialize};
+use struct_patch::Patch;
 use utoipa::ToSchema;
 
-#[derive(Debug, Serialize, Deserialize, Clone, PartialEq, ToSchema)]
+#[cfg(feature = "ssr")]
+pub mod scgi;
+
+#[cfg(feature = "ssr")]
+pub mod xmlrpc;
+
+#[cfg(feature = "ssr")]
+pub mod db;
+
+pub mod codec;
+
+pub mod server_fns;
+
+#[derive(Clone, Debug)]
+pub struct ServerContext {
+    pub scgi_socket_path: String,
+}
+
+#[cfg(feature = "ssr")]
+#[derive(Clone)]
+pub struct DbContext {
+    pub db: db::Db,
+}
+
+#[derive(Debug, Serialize, Deserialize, Clone, PartialEq, ToSchema, Patch)]
+#[patch_derive(Debug, Serialize, Deserialize, Clone, PartialEq, ToSchema, Default)]
+#[patch_name = "TorrentUpdate"]
 pub struct Torrent {
     pub hash: String,
     pub name: String,
@@ -28,12 +55,8 @@ pub enum TorrentStatus {
 }
 
 #[derive(Debug, Serialize, Deserialize, Clone, ToSchema)]
-#[serde(tag = "type", content = "data")]
 pub enum AppEvent {
-    FullList {
-        torrents: Vec<Torrent>,
-        timestamp: u64,
-    },
+    FullList(Vec<Torrent>, u64),
     Update(TorrentUpdate),
     Stats(GlobalStats),
     Notification(SystemNotification),
@@ -62,20 +85,8 @@ pub struct GlobalStats {
     pub free_space: Option<i64>,
 }
 
-#[derive(Debug, Serialize, Deserialize, Clone, ToSchema)]
-pub struct TorrentUpdate {
-    pub hash: String,
-    pub name: Option<String>,
-    pub size: Option<i64>,
-    pub down_rate: Option<i64>,
-    pub up_rate: Option<i64>,
-    pub percent_complete: Option<f64>,
-    pub completed: Option<i64>,
-    pub eta: Option<i64>,
-    pub status: Option<TorrentStatus>,
-    pub error_message: Option<String>,
-    pub label: Option<String>,
-}
+// REMOVED: Manual TorrentUpdate struct definition as it's now generated by Patch macro
+
 
 #[derive(Debug, Serialize, Deserialize, Clone, ToSchema)]
 pub struct TorrentActionRequest {
@@ -135,4 +146,4 @@ pub struct SetLabelRequest {
 pub struct AddTorrentRequest {
     #[schema(example = "magnet:?xt=urn:btih:...")]
     pub uri: String,
-}
+}

shared/src/scgi.rs

@@ -1,3 +1,5 @@
+#![cfg(feature = "ssr")]
+
 use bytes::Bytes;
 use std::collections::HashMap;
 use thiserror::Error;
@@ -11,6 +13,8 @@ pub enum ScgiError {
     #[allow(dead_code)]
     #[error("Protocol Error: {0}")]
     Protocol(String),
+    #[error("Timeout: SCGI request took too long")]
+    Timeout,
 }
 
 pub struct ScgiRequest {
@@ -78,20 +82,48 @@ impl ScgiRequest {
 }
 
 pub async fn send_request(socket_path: &str, request: ScgiRequest) -> Result<Bytes, ScgiError> {
-    let mut stream = UnixStream::connect(socket_path).await?;
-    let data = request.encode();
-    stream.write_all(&data).await?;
+    let perform_request = async {
+        let mut stream = UnixStream::connect(socket_path).await?;
+        let data = request.encode();
+        stream.write_all(&data).await?;
 
-    let mut response = Vec::new();
-    stream.read_to_end(&mut response).await?;
+        let mut response = Vec::new();
+        stream.read_to_end(&mut response).await?;
+        Ok::<Vec<u8>, std::io::Error>(response)
+    };
 
-    let double_newline = b"\r\n\r\n";
-    if let Some(pos) = response
-        .windows(double_newline.len())
-        .position(|window| window == double_newline)
-    {
-        Ok(Bytes::from(response.split_off(pos + double_newline.len())))
-    } else {
-        Ok(Bytes::from(response))
+    let response = tokio::time::timeout(std::time::Duration::from_secs(10), perform_request)
+        .await
+        .map_err(|_| ScgiError::Timeout)??;
+
+    let mut response_vec = response;
+    
+    // Improved header stripping: find the first occurrence of "<?xml" OR double newline
+    let patterns = [
+        &b"\r\n\r\n"[..],
+        &b"\n\n"[..],
+        &b"<?xml"[..] // If headers are missing or weird, find start of XML
+    ];
+
+    let mut found_pos = None;
+    for (i, pattern) in patterns.iter().enumerate() {
+        if let Some(pos) = response_vec
+            .windows(pattern.len())
+            .position(|window| window == *pattern)
+        {
+            // For XML pattern, we keep it. For newlines, we skip them.
+            if i == 2 {
+                found_pos = Some(pos);
+            } else {
+                found_pos = Some(pos + pattern.len());
+            }
+            break;
+        }
     }
-}
+
+    if let Some(pos) = found_pos {
+        Ok(Bytes::from(response_vec.split_off(pos)))
+    } else {
+        Ok(Bytes::from(response_vec))
+    }
+}

shared/src/server_fns/auth.rs

@@ -0,0 +1,169 @@
+use leptos::prelude::*;
+use serde::{Deserialize, Serialize};
+use crate::codec::MsgPack;
+
+#[derive(Clone, Debug, Serialize, Deserialize)]
+pub struct UserResponse {
+    pub id: i64,
+    pub username: String,
+}
+
+#[derive(Clone, Debug, Serialize, Deserialize)]
+pub struct Claims {
+    pub sub: String, // username
+    pub uid: i64,    // user id
+    pub exp: usize,
+}
+
+#[derive(Clone, Debug, Serialize, Deserialize)]
+pub struct SetupStatus {
+    pub completed: bool,
+}
+
+#[server(GetSetupStatus, "/api/server_fns", input = MsgPack, output = MsgPack)]
+pub async fn get_setup_status() -> Result<SetupStatus, ServerFnError> {
+    use crate::DbContext;
+
+    let db_context = use_context::<DbContext>().ok_or_else(|| ServerFnError::new("DB Context missing"))?;
+    let has_users = db_context.db.has_users().await
+        .map_err(|e| ServerFnError::new(format!("DB error: {}", e)))?;
+
+    Ok(SetupStatus {
+        completed: has_users,
+    })
+}
+
+#[server(Setup, "/api/server_fns", input = MsgPack, output = MsgPack)]
+pub async fn setup(username: String, password: String) -> Result<(), ServerFnError> {
+    use crate::DbContext;
+
+    let db_context = use_context::<DbContext>().ok_or_else(|| ServerFnError::new("DB Context missing"))?;
+    
+    // Check if setup is already done
+    let has_users = db_context.db.has_users().await.unwrap_or(false);
+    if has_users {
+        return Err(ServerFnError::new("Setup already completed"));
+    }
+
+    // Hash password (low cost for MIPS)
+    let password_hash = bcrypt::hash(&password, 6)
+        .map_err(|_| ServerFnError::new("Hashing error"))?;
+
+    db_context.db.create_user(&username, &password_hash).await
+        .map_err(|e| ServerFnError::new(format!("DB error: {}", e)))?;
+
+    Ok(())
+}
+
+#[server(Login, "/api/server_fns", input = MsgPack, output = MsgPack)]
+pub async fn login(username: String, password: String) -> Result<UserResponse, ServerFnError> {
+    use crate::DbContext;
+    use leptos_axum::ResponseOptions;
+    use jsonwebtoken::{encode, Header, EncodingKey};
+    use cookie::{Cookie, SameSite};
+    use std::time::{SystemTime, UNIX_EPOCH};
+
+    let db_context = use_context::<DbContext>().ok_or_else(|| ServerFnError::new("DB Context missing"))?;
+    
+    let user_opt = db_context.db.get_user_by_username(&username).await
+        .map_err(|e| ServerFnError::new(format!("DB error: {}", e)))?;
+
+    if let Some((uid, password_hash)) = user_opt {
+        let valid = bcrypt::verify(&password, &password_hash).unwrap_or(false);
+        if !valid {
+             return Err(ServerFnError::new("Invalid credentials"));
+        }
+
+        let expiration = SystemTime::now()
+            .duration_since(UNIX_EPOCH)
+            .unwrap()
+            .as_secs() as usize + 24 * 3600; // 24 hours
+
+        let claims = Claims {
+            sub: username.clone(),
+            uid,
+            exp: expiration,
+        };
+
+        let secret = std::env::var("JWT_SECRET").unwrap_or_else(|_| "secret".to_string());
+        let token = encode(&Header::default(), &claims, &EncodingKey::from_secret(secret.as_bytes()))
+            .map_err(|e| ServerFnError::new(format!("Token error: {}", e)))?;
+
+        let cookie = Cookie::build(("auth_token", token))
+            .path("/")
+            .http_only(true)
+            .same_site(SameSite::Strict)
+            .build();
+
+        if let Some(options) = use_context::<ResponseOptions>() {
+            options.insert_header(
+                axum::http::header::SET_COOKIE,
+                axum::http::HeaderValue::from_str(&cookie.to_string()).unwrap(),
+            );
+        }
+
+        Ok(UserResponse {
+            id: uid,
+            username,
+        })
+    } else {
+        Err(ServerFnError::new("Invalid credentials"))
+    }
+}
+
+#[server(Logout, "/api/server_fns", input = MsgPack, output = MsgPack)]
+pub async fn logout() -> Result<(), ServerFnError> {
+    use leptos_axum::ResponseOptions;
+    use cookie::{Cookie, SameSite};
+
+    let cookie = Cookie::build(("auth_token", ""))
+        .path("/")
+        .http_only(true)
+        .same_site(SameSite::Strict)
+        .max_age(cookie::time::Duration::seconds(0))
+        .build();
+
+    if let Some(options) = use_context::<ResponseOptions>() {
+        options.insert_header(
+            axum::http::header::SET_COOKIE,
+            axum::http::HeaderValue::from_str(&cookie.to_string()).unwrap(),
+        );
+    }
+    Ok(())
+}
+
+#[server(GetUser, "/api/server_fns", input = MsgPack, output = MsgPack)]
+pub async fn get_user() -> Result<Option<UserResponse>, ServerFnError> {
+    use axum::http::HeaderMap;
+    use leptos_axum::extract;
+    use jsonwebtoken::{decode, Validation, DecodingKey};
+
+    let headers: HeaderMap = extract().await.map_err(|e| ServerFnError::new(format!("Extract error: {}", e)))?;
+    let cookie_header = headers.get(axum::http::header::COOKIE)
+        .and_then(|h| h.to_str().ok());
+
+    if let Some(cookie_str) = cookie_header {
+        for c_str in cookie_str.split(';') {
+            if let Ok(c) = cookie::Cookie::parse(c_str.trim()) {
+                if c.name() == "auth_token" {
+                    let token = c.value();
+                    let secret = std::env::var("JWT_SECRET").unwrap_or_else(|_| "secret".to_string());
+                    let token_data = decode::<Claims>(
+                        token,
+                        &DecodingKey::from_secret(secret.as_bytes()),
+                        &Validation::default(),
+                    );
+
+                    if let Ok(data) = token_data {
+                        return Ok(Some(UserResponse {
+                            id: data.claims.uid,
+                            username: data.claims.sub,
+                        }));
+                    }
+                }
+            }
+        }
+    }
+
+    Ok(None)
+}

shared/src/server_fns/mod.rs

@@ -0,0 +1,4 @@
+pub mod torrent;
+pub mod settings;
+pub mod push;
+pub mod auth;

shared/src/server_fns/push.rs

@@ -0,0 +1,32 @@
+use leptos::prelude::*;
+
+#[server(GetPushPublicKey, "/api/server_fns")]
+pub async fn get_public_key() -> Result<String, ServerFnError> {
+    let key = std::env::var("VAPID_PUBLIC_KEY")
+        .map_err(|_| ServerFnError::new("VAPID_PUBLIC_KEY not configured"))?;
+    Ok(key)
+}
+
+#[server(SubscribePush, "/api/server_fns")]
+pub async fn subscribe_push(
+    endpoint: String,
+    p256dh: String,
+    auth: String,
+) -> Result<(), ServerFnError> {
+    let db_ctx = expect_context::<crate::DbContext>();
+    db_ctx
+        .db
+        .save_push_subscription(&endpoint, &p256dh, &auth)
+        .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)))
+}

shared/src/server_fns/settings.rs

@@ -0,0 +1,58 @@
+use leptos::prelude::*;
+use crate::GlobalLimitRequest;
+
+#[server(GetGlobalLimits, "/api/server_fns")]
+pub async fn get_global_limits() -> Result<GlobalLimitRequest, ServerFnError> {
+    use crate::xmlrpc::{self, RtorrentClient};
+    let ctx = expect_context::<crate::ServerContext>();
+    let client = RtorrentClient::new(&ctx.scgi_socket_path);
+
+    let down = match client.call("throttle.global_down.max_rate", &[]).await {
+        Ok(xml) => xmlrpc::parse_i64_response(&xml).unwrap_or(0),
+        Err(_) => -1,
+    };
+
+    let up = match client.call("throttle.global_up.max_rate", &[]).await {
+        Ok(xml) => xmlrpc::parse_i64_response(&xml).unwrap_or(0),
+        Err(_) => -1,
+    };
+
+    Ok(GlobalLimitRequest {
+        max_download_rate: Some(down),
+        max_upload_rate: Some(up),
+    })
+}
+
+#[server(SetGlobalLimits, "/api/server_fns")]
+pub async fn set_global_limits(
+    max_download_rate: Option<i64>,
+    max_upload_rate: Option<i64>,
+) -> Result<(), ServerFnError> {
+    use crate::xmlrpc::{RpcParam, RtorrentClient};
+    let ctx = expect_context::<crate::ServerContext>();
+    let client = RtorrentClient::new(&ctx.scgi_socket_path);
+
+    if let Some(down) = max_download_rate {
+        let down_kb = down / 1024;
+        client
+            .call(
+                "throttle.global_down.max_rate.set_kb",
+                &[RpcParam::from(""), RpcParam::Int(down_kb)],
+            )
+            .await
+            .map_err(|e| ServerFnError::new(format!("Failed to set down limit: {}", e)))?;
+    }
+
+    if let Some(up) = max_upload_rate {
+        let up_kb = up / 1024;
+        client
+            .call(
+                "throttle.global_up.max_rate.set_kb",
+                &[RpcParam::from(""), RpcParam::Int(up_kb)],
+            )
+            .await
+            .map_err(|e| ServerFnError::new(format!("Failed to set up limit: {}", e)))?;
+    }
+
+    Ok(())
+}

shared/src/server_fns/torrent.rs

@@ -0,0 +1,274 @@
+use leptos::prelude::*;
+use crate::{TorrentFile, TorrentPeer, TorrentTracker};
+
+#[server(AddTorrent, "/api/server_fns")]
+pub async fn add_torrent(uri: String) -> Result<(), ServerFnError> {
+    use crate::xmlrpc::{RpcParam, RtorrentClient};
+    let ctx = expect_context::<crate::ServerContext>();
+    let client = RtorrentClient::new(&ctx.scgi_socket_path);
+    let params = vec![RpcParam::from(""), RpcParam::from(uri.as_str())];
+
+    match client.call("load.start", &params).await {
+        Ok(response) => {
+            if response.contains("faultCode") {
+                return Err(ServerFnError::new("rTorrent returned fault"));
+            }
+            Ok(())
+        }
+        Err(e) => Err(ServerFnError::new(format!("Failed to add torrent: {}", e))),
+    }
+}
+
+#[server(TorrentAction, "/api/server_fns")]
+pub async fn torrent_action(hash: String, action: String) -> Result<String, ServerFnError> {
+    use crate::xmlrpc::{RpcParam, RtorrentClient};
+    let ctx = expect_context::<crate::ServerContext>();
+    let client = RtorrentClient::new(&ctx.scgi_socket_path);
+
+    if action == "delete_with_data" {
+        return delete_torrent_with_data_inner(&client, &hash).await;
+    }
+
+    let method = match action.as_str() {
+        "start" => "d.start",
+        "stop" => "d.stop",
+        "delete" => "d.erase",
+        _ => return Err(ServerFnError::new("Invalid action")),
+    };
+
+    let params = vec![RpcParam::from(hash.as_str())];
+    match client.call(method, &params).await {
+        Ok(_) => Ok("Action executed".to_string()),
+        Err(e) => Err(ServerFnError::new(format!("RPC error: {}", e))),
+    }
+}
+
+#[cfg(feature = "ssr")]
+async fn delete_torrent_with_data_inner(
+    client: &crate::xmlrpc::RtorrentClient,
+    hash: &str,
+) -> Result<String, ServerFnError> {
+    use crate::xmlrpc::{parse_string_response, RpcParam};
+
+    let params_hash = vec![RpcParam::from(hash)];
+
+    let path_xml = client
+        .call("d.base_path", &params_hash)
+        .await
+        .map_err(|e| ServerFnError::new(format!("Failed to call rTorrent: {}", e)))?;
+
+    let path = parse_string_response(&path_xml)
+        .map_err(|e| ServerFnError::new(format!("Failed to parse path: {}", e)))?;
+
+    let root_xml = client
+        .call("directory.default", &[])
+        .await
+        .map_err(|e| ServerFnError::new(format!("Failed to get download root: {}", e)))?;
+
+    let root_path_str = parse_string_response(&root_xml)
+        .map_err(|e| ServerFnError::new(format!("Failed to parse root path: {}", e)))?;
+
+    let root_path = tokio::fs::canonicalize(std::path::Path::new(&root_path_str))
+        .await
+        .map_err(|e| ServerFnError::new(format!("Invalid download root: {}", e)))?;
+
+    let target_path_raw = std::path::Path::new(&path);
+    if !tokio::fs::try_exists(target_path_raw).await.unwrap_or(false) {
+        client
+            .call("d.erase", &params_hash)
+            .await
+            .map_err(|e| ServerFnError::new(format!("Failed to erase torrent: {}", e)))?;
+        return Ok("Torrent removed (Data not found)".to_string());
+    }
+
+    let target_path = tokio::fs::canonicalize(target_path_raw)
+        .await
+        .map_err(|e| ServerFnError::new(format!("Invalid data path: {}", e)))?;
+
+    if !target_path.starts_with(&root_path) {
+        return Err(ServerFnError::new(
+            "Security Error: Cannot delete files outside download directory",
+        ));
+    }
+
+    if target_path == root_path {
+        return Err(ServerFnError::new(
+            "Security Error: Cannot delete the download root directory",
+        ));
+    }
+
+    client
+        .call("d.erase", &params_hash)
+        .await
+        .map_err(|e| ServerFnError::new(format!("Failed to erase torrent: {}", e)))?;
+
+    let delete_result = if target_path.is_dir() {
+        tokio::fs::remove_dir_all(&target_path).await
+    } else {
+        tokio::fs::remove_file(&target_path).await
+    };
+
+    match delete_result {
+        Ok(_) => Ok("Torrent and data deleted".to_string()),
+        Err(e) => Err(ServerFnError::new(format!("Failed to delete data: {}", e))),
+    }
+}
+
+#[server(GetFiles, "/api/server_fns")]
+pub async fn get_files(hash: String) -> Result<Vec<TorrentFile>, ServerFnError> {
+    use crate::xmlrpc::{parse_multicall_response, RpcParam, RtorrentClient};
+    let ctx = expect_context::<crate::ServerContext>();
+    let client = RtorrentClient::new(&ctx.scgi_socket_path);
+    let params = vec![
+        RpcParam::from(hash.as_str()),
+        RpcParam::from(""),
+        RpcParam::from("f.path="),
+        RpcParam::from("f.size_bytes="),
+        RpcParam::from("f.completed_chunks="),
+        RpcParam::from("f.priority="),
+    ];
+
+    let xml = client
+        .call("f.multicall", &params)
+        .await
+        .map_err(|e| ServerFnError::new(format!("RPC error: {}", e)))?;
+
+    let rows = parse_multicall_response(&xml)
+        .map_err(|e| ServerFnError::new(format!("Parse error: {}", e)))?;
+
+    Ok(rows
+        .into_iter()
+        .enumerate()
+        .map(|(idx, row)| TorrentFile {
+            index: idx as u32,
+            path: row.get(0).cloned().unwrap_or_default(),
+            size: row.get(1).and_then(|s| s.parse().ok()).unwrap_or(0),
+            completed_chunks: row.get(2).and_then(|s| s.parse().ok()).unwrap_or(0),
+            priority: row.get(3).and_then(|s| s.parse().ok()).unwrap_or(0),
+        })
+        .collect())
+}
+
+#[server(GetPeers, "/api/server_fns")]
+pub async fn get_peers(hash: String) -> Result<Vec<TorrentPeer>, ServerFnError> {
+    use crate::xmlrpc::{parse_multicall_response, RpcParam, RtorrentClient};
+    let ctx = expect_context::<crate::ServerContext>();
+    let client = RtorrentClient::new(&ctx.scgi_socket_path);
+    let params = vec![
+        RpcParam::from(hash.as_str()),
+        RpcParam::from(""),
+        RpcParam::from("p.address="),
+        RpcParam::from("p.client_version="),
+        RpcParam::from("p.down_rate="),
+        RpcParam::from("p.up_rate="),
+        RpcParam::from("p.completed_percent="),
+    ];
+
+    let xml = client
+        .call("p.multicall", &params)
+        .await
+        .map_err(|e| ServerFnError::new(format!("RPC error: {}", e)))?;
+
+    let rows = parse_multicall_response(&xml)
+        .map_err(|e| ServerFnError::new(format!("Parse error: {}", e)))?;
+
+    Ok(rows
+        .into_iter()
+        .map(|row| TorrentPeer {
+            ip: row.get(0).cloned().unwrap_or_default(),
+            client: row.get(1).cloned().unwrap_or_default(),
+            down_rate: row.get(2).and_then(|s| s.parse().ok()).unwrap_or(0),
+            up_rate: row.get(3).and_then(|s| s.parse().ok()).unwrap_or(0),
+            progress: row.get(4).and_then(|s| s.parse().ok()).unwrap_or(0.0),
+        })
+        .collect())
+}
+
+#[server(GetTrackers, "/api/server_fns")]
+pub async fn get_trackers(hash: String) -> Result<Vec<TorrentTracker>, ServerFnError> {
+    use crate::xmlrpc::{parse_multicall_response, RpcParam, RtorrentClient};
+    let ctx = expect_context::<crate::ServerContext>();
+    let client = RtorrentClient::new(&ctx.scgi_socket_path);
+    let params = vec![
+        RpcParam::from(hash.as_str()),
+        RpcParam::from(""),
+        RpcParam::from("t.url="),
+        RpcParam::from("t.activity_date_last="),
+        RpcParam::from("t.message="),
+    ];
+
+    let xml = client
+        .call("t.multicall", &params)
+        .await
+        .map_err(|e| ServerFnError::new(format!("RPC error: {}", e)))?;
+
+    let rows = parse_multicall_response(&xml)
+        .map_err(|e| ServerFnError::new(format!("Parse error: {}", e)))?;
+
+    Ok(rows
+        .into_iter()
+        .map(|row| TorrentTracker {
+            url: row.get(0).cloned().unwrap_or_default(),
+            status: "Unknown".to_string(),
+            message: row.get(2).cloned().unwrap_or_default(),
+        })
+        .collect())
+}
+
+#[server(SetFilePriority, "/api/server_fns")]
+pub async fn set_file_priority(
+    hash: String,
+    file_index: u32,
+    priority: u8,
+) -> Result<(), ServerFnError> {
+    use crate::xmlrpc::{RpcParam, RtorrentClient};
+    let ctx = expect_context::<crate::ServerContext>();
+    let client = RtorrentClient::new(&ctx.scgi_socket_path);
+
+    let target = format!("{}:f{}", hash, file_index);
+    let params = vec![
+        RpcParam::from(target.as_str()),
+        RpcParam::from(priority as i64),
+    ];
+
+    client
+        .call("f.set_priority", &params)
+        .await
+        .map_err(|e| ServerFnError::new(format!("RPC error: {}", e)))?;
+
+    let _ = client
+        .call("d.update_priorities", &[RpcParam::from(hash.as_str())])
+        .await;
+
+    Ok(())
+}
+
+#[server(SetLabel, "/api/server_fns")]
+pub async fn set_label(hash: String, label: String) -> Result<(), ServerFnError> {
+    use crate::xmlrpc::{RpcParam, RtorrentClient};
+    let ctx = expect_context::<crate::ServerContext>();
+    let client = RtorrentClient::new(&ctx.scgi_socket_path);
+    let params = vec![RpcParam::from(hash.as_str()), RpcParam::from(label)];
+
+    client
+        .call("d.custom1.set", &params)
+        .await
+        .map_err(|e| ServerFnError::new(format!("RPC error: {}", e)))?;
+
+    Ok(())
+}
+
+#[server(GetVersion, "/api/server_fns")]
+pub async fn get_version() -> Result<String, ServerFnError> {
+    use crate::xmlrpc::{parse_string_response, RtorrentClient};
+    let ctx = expect_context::<crate::ServerContext>();
+    let client = RtorrentClient::new(&ctx.scgi_socket_path);
+
+    match client.call("system.client_version", &[]).await {
+        Ok(xml) => {
+            let version = parse_string_response(&xml).unwrap_or(xml);
+            Ok(version)
+        }
+        Err(e) => Err(ServerFnError::new(format!("Failed to get version: {}", e))),
+    }
+}

shared/src/xmlrpc.rs

@@ -1,3 +1,5 @@
+#![cfg(feature = "ssr")]
+
 use crate::scgi::{send_request, ScgiError, ScgiRequest};
 use quick_xml::de::from_str;
 use quick_xml::se::to_string;

third_party/coarsetime/.cargo-ok

@@ -1 +0,0 @@
-{"v":1}

third_party/coarsetime/.cargo_vcs_info.json

@@ -1,6 +0,0 @@
-{
-  "git": {
-    "sha1": "831c97016aa3d8f7851999aa1deea8407e7cbd42"
-  },
-  "path_in_vcs": ""
-}

third_party/coarsetime/.github/dependabot.yml

@@ -1,8 +0,0 @@
-version: 2
-updates:
-- package-ecosystem: cargo
-  directory: "/"
-  schedule:
-    interval: daily
-    time: "04:00"
-  open-pull-requests-limit: 10

third_party/coarsetime/.github/workflows/issues.yml

@@ -1,17 +0,0 @@
-name: Close inactive issues
-on:
-  schedule:
-    - cron: "30 1 * * *"
-
-jobs:
-  close-issues:
-    runs-on: ubuntu-latest
-    permissions:
-      issues: write
-      pull-requests: write
-    steps:
-      - uses: actions/stale@v9
-        with:
-          stale-issue-message: "This issue is stale because it has been open for 30 days with no activity."
-          close-issue-message: "This issue was closed because it has been inactive for 14 days since being marked as stale."
-          repo-token: ${{ secrets.GITHUB_TOKEN }}

third_party/coarsetime/.gitignore

@@ -1,4 +0,0 @@
-target
-Cargo.lock
-.vscode
-zig-cache