fix: make SidenavMenuButton class prop reactive to resolve compilation error

Cargo.lock

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

Cargo.toml

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

backend/Cargo.toml

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

backend/src/handlers/mod.rs

@@ -7,7 +7,6 @@ use rust_embed::RustEmbed;
 
 pub mod auth;
 pub mod setup;
-pub mod notifications;
 
 #[derive(RustEmbed)]
 #[folder = "../frontend/dist"]

backend/src/handlers/notifications.rs

@@ -1,54 +0,0 @@
-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/main.rs

@@ -60,7 +60,6 @@ async fn auth_middleware(
        || 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/") 
@@ -243,14 +242,12 @@ async fn main() {
     let socket_path = std::path::Path::new(&args.socket);
     if !socket_path.exists() {
         tracing::error!("CRITICAL: rTorrent socket not found at {:?}.", socket_path);
-        tracing::error!(
+        tracing::warn!(
             "HINT: Make sure rTorrent is running and the SCGI socket is enabled in .rtorrent.rc"
         );
-        tracing::error!(
+        tracing::warn!(
             "HINT: You can configure the socket path via --socket ARG or RTORRENT_SOCKET ENV."
         );
-        tracing::error!("FATAL: VibeTorrent cannot start without a running rTorrent instance. Exiting.");
-        std::process::exit(1);
     } else {
         tracing::info!("Socket file exists. Testing connection...");
         let client = xmlrpc::RtorrentClient::new(&args.socket);
@@ -261,11 +258,7 @@ async fn main() {
                 let version = xmlrpc::parse_string_response(&xml).unwrap_or(xml);
                 tracing::info!("Connected to rTorrent successfully. Version: {}", version);
             }
-            Err(e) => {
+            Err(e) => tracing::error!("Socket exists but failed to connect to rTorrent: {}", e),
-                tracing::error!("CRITICAL: Socket exists but failed to connect to rTorrent: {}", e);
-                tracing::error!("FATAL: Ensure rTorrent is fully started and the socket has correct permissions. Exiting.");
-                std::process::exit(1);
-            }
         }
     }
 
@@ -320,7 +313,7 @@ async fn main() {
             let loop_interval = if active_clients > 0 {
                 Duration::from_secs(1)
             } else {
-                Duration::from_secs(60)
+                Duration::from_secs(30)
             };
 
             // 1. Fetch Torrents
@@ -441,7 +434,6 @@ async fn main() {
     let db_for_ctx = db.clone();
     let app = app
         .route("/api/events", get(sse::sse_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();

backend/src/push.rs

@@ -191,21 +191,11 @@ pub async fn send_push_notification(
                                                 tracing::debug!("Push notification sent to: {}", subscription.endpoint);
                                             }
                                             Err(e) => {
-                                                let err_msg = format!("{:?}", e);
+                                                tracing::error!("Failed to send push notification to {}: {}", subscription.endpoint, 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) => {
+                                    Err(e) => tracing::error!("Failed to build push message: {}", 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),

frontend/input.css

@@ -3,76 +3,70 @@
 
 
 :root {
-  --radius: 0.625rem;
+  --background: 0 0% 100%;
-  --background: oklch(1 0 0);
+  --foreground: 240 10% 3.9%;
-  --foreground: oklch(0.145 0 0);
+  --card: 0 0% 100%;
-  --card: oklch(1 0 0);
+  --card-foreground: 240 10% 3.9%;
-  --card-foreground: oklch(0.145 0 0);
+  --popover: 0 0% 100%;
-  --popover: oklch(1 0 0);
+  --popover-foreground: 240 10% 3.9%;
-  --popover-foreground: oklch(0.145 0 0);
+  --primary: 240 5.9% 10%;
-  --primary: oklch(0.205 0 0);
+  --primary-foreground: 0 0% 98%;
-  --primary-foreground: oklch(0.985 0 0);
+  --secondary: 240 4.8% 95.9%;
-  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: 240 5.9% 10%;
-  --secondary-foreground: oklch(0.205 0 0);
+  --muted: 240 4.8% 95.9%;
-  --muted: oklch(0.97 0 0);
+  --muted-foreground: 240 3.8% 46.1%;
-  --muted-foreground: oklch(0.556 0 0);
+  --accent: 240 4.8% 95.9%;
-  --accent: oklch(0.97 0 0);
+  --accent-foreground: 240 5.9% 10%;
-  --accent-foreground: oklch(0.205 0 0);
+  --destructive: 0 84.2% 60.2%;
-  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: 0 0% 98%;
-  --border: oklch(0.922 0 0);
+  --border: 240 5.9% 90%;
-  --input: oklch(0.922 0 0);
+  --input: 240 5.9% 90%;
-  --ring: oklch(0.708 0 0);
+  --ring: 240 5.9% 10%;
+  --radius: 0.5rem;
 }
 
 .dark {
-  --background: oklch(0.145 0 0);
+  --background: 240 10% 3.9%;
-  --foreground: oklch(0.985 0 0);
+  --foreground: 0 0% 98%;
-  --card: oklch(0.205 0 0);
+  --card: 240 10% 3.9%;
-  --card-foreground: oklch(0.985 0 0);
+  --card-foreground: 0 0% 98%;
-  --popover: oklch(0.205 0 0);
+  --popover: 240 10% 3.9%;
-  --popover-foreground: oklch(0.985 0 0);
+  --popover-foreground: 0 0% 98%;
-  --primary: oklch(0.922 0 0);
+  --primary: 0 0% 98%;
-  --primary-foreground: oklch(0.205 0 0);
+  --primary-foreground: 240 5.9% 10%;
-  --secondary: oklch(0.269 0 0);
+  --secondary: 240 3.7% 15.9%;
-  --secondary-foreground: oklch(0.985 0 0);
+  --secondary-foreground: 0 0% 98%;
-  --muted: oklch(0.269 0 0);
+  --muted: 240 3.7% 15.9%;
-  --muted-foreground: oklch(0.708 0 0);
+  --muted-foreground: 240 5% 64.9%;
-  --accent: oklch(0.269 0 0);
+  --accent: 240 3.7% 15.9%;
-  --accent-foreground: oklch(0.985 0 0);
+  --accent-foreground: 0 0% 98%;
-  --destructive: oklch(0.704 0.191 22.216);
+  --destructive: 0 62.8% 30.6%;
-  --border: oklch(1 0 0 / 10%);
+  --destructive-foreground: 0 0% 98%;
-  --input: oklch(1 0 0 / 15%);
+  --border: 240 3.7% 15.9%;
-  --ring: oklch(0.556 0 0);
+  --input: 240 3.7% 15.9%;
+  --ring: 240 4.9% 83.9%;
 }
 
 @theme inline {
-  --animate-shimmer: shimmer 2s infinite;
+  --color-background: hsl(var(--background));
-
+  --color-foreground: hsl(var(--foreground));
-  @keyframes shimmer {
+  --color-card: hsl(var(--card));
-    100% {
+  --color-card-foreground: hsl(var(--card-foreground));
-      transform: translateX(100%);
+  --color-popover: hsl(var(--popover));
-    }
+  --color-popover-foreground: hsl(var(--popover-foreground));
-  }
+  --color-primary: hsl(var(--primary));
-
+  --color-primary-foreground: hsl(var(--primary-foreground));
-  --color-background: var(--background);
+  --color-secondary: hsl(var(--secondary));
-  --color-foreground: var(--foreground);
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
-  --color-card: var(--card);
+  --color-muted: hsl(var(--muted));
-  --color-card-foreground: var(--card-foreground);
+  --color-muted-foreground: hsl(var(--muted-foreground));
-  --color-popover: var(--popover);
+  --color-accent: hsl(var(--accent));
-  --color-popover-foreground: var(--popover-foreground);
+  --color-accent-foreground: hsl(var(--accent-foreground));
-  --color-primary: var(--primary);
+  --color-destructive: hsl(var(--destructive));
-  --color-primary-foreground: var(--primary-foreground);
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
-  --color-secondary: var(--secondary);
+  --color-border: hsl(var(--border));
-  --color-secondary-foreground: var(--secondary-foreground);
+  --color-input: hsl(var(--input));
-  --color-muted: var(--muted);
+  --color-ring: hsl(var(--ring));
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
@@ -83,7 +77,6 @@
   * {
     @apply border-border outline-ring/50;
   }
-
   body {
     @apply bg-background text-foreground;
   }
@@ -96,4 +89,4 @@
   dialog {
     margin: auto;
   }
-}
+}

frontend/src/app.rs

@@ -6,7 +6,7 @@ use crate::components::auth::setup::Setup;
 use leptos::prelude::*;
 use leptos::task::spawn_local;
 use leptos_router::components::{Router, Routes, Route};
-use leptos_router::hooks::{use_navigate, use_location};
+use leptos_router::hooks::use_navigate;
 use crate::components::ui::toast::Toaster;
 use crate::components::hooks::use_theme_mode::ThemeMode;
 
@@ -41,7 +41,6 @@ pub fn App() -> impl IntoView {
 fn InnerApp() -> impl IntoView {
     crate::store::provide_torrent_store();
     let store = use_context::<crate::store::TorrentStore>();
-    let _loc = use_location();
 
     let is_loading = signal(true);
     let is_authenticated = signal(false);

frontend/src/components/context_menu.rs

@@ -2,8 +2,6 @@ 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 TorrentContextMenu(
@@ -11,60 +9,36 @@ pub fn TorrentContextMenu(
     torrent_hash: String,
     on_action: Callback<(String, String)>,
 ) -> impl IntoView {
-    let hash_c1 = torrent_hash.clone();
+    let hash = torrent_hash.clone();
-    let hash_c2 = torrent_hash.clone();
-    let hash_c3 = torrent_hash.clone();
-    let hash_c4 = torrent_hash.clone();
-    
     let on_action_stored = StoredValue::new(on_action);
 
+    let on_click = move |action: &str| {
+        on_action_stored.get_value().run((action.to_string(), hash.clone()));
+    };
+
+    let start_click = { let on_click = on_click.clone(); move |_| on_click("start") };
+    let stop_click = { let on_click = on_click.clone(); move |_| on_click("stop") };
+    let delete_click = { let on_click = on_click.clone(); move |_| on_click("delete") };
+    let delete_data_click = { let on_click = on_click.clone(); move |_| on_click("delete_with_data") };
+
     view! {
         <ContextMenu>
             <ContextMenuTrigger>
                 {children()}
             </ContextMenuTrigger>
-            <ContextMenuContent class="w-56 p-1.5">
+            <ContextMenuContent class="w-48">
-                <ContextMenuItem on:click={let h = hash_c1; move |_| {
+                <ContextMenuItem on:click=start_click>
-                    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 |_| {
+                <ContextMenuItem on:click=stop_click>
-                    on_action_stored.get_value().run(("stop".to_string(), h.clone()));
-                    crate::components::ui::context_menu::close_context_menu();
-                }}>
                     "Durdur"
                 </ContextMenuItem>
-                
+                <ContextMenuItem class="text-destructive" on:click=delete_click>
-                <div class="my-1.5 h-px bg-border/50" />
+                    "Sil"
-                
+                </ContextMenuItem>
-                // --- Modern Hold-to-Action Buttons ---
+                <ContextMenuItem class="text-destructive font-bold" on:click=delete_data_click>
-                <div class="space-y-1">
+                    "Verilerle Birlikte Sil"
-                    <ButtonAction 
+                </ContextMenuItem>
-                        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>
-
-                    <ButtonAction 
-                        variant=ButtonVariant::Destructive
-                        class="w-full justify-start h-8 px-2 text-xs font-bold"
-                        hold_duration=1200
-                        on_action={let h = hash_c4; move || {
-                            on_action_stored.get_value().run(("delete_with_data".to_string(), h.clone()));
-                            crate::components::ui::context_menu::close_context_menu();
-                        }}
-                    >
-                        "Verilerle Sil (Basılı Tut)"
-                    </ButtonAction>
-                </div>
             </ContextMenuContent>
         </ContextMenu>
     }

frontend/src/components/demos/demo_shimmer.rs

@@ -1,91 +0,0 @@
-use leptos::prelude::*;
-use leptos::task::spawn_local;
-use serde::{Deserialize, Serialize};
-
-use crate::components::ui::button::{Button, ButtonVariant};
-use crate::components::ui::card::{Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle};
-use crate::components::ui::shimmer::Shimmer;
-
-#[derive(Debug, Clone, Serialize, Deserialize)]
-pub struct CardData {
-    pub title: String,
-    pub description: String,
-}
-
-/// Simulates a database fetch with 1 second delay
-#[server]
-pub async fn fetch_card_data() -> Result<CardData, ServerFnError> {
-    // Simulate network/database latency (only on server)
-    #[cfg(feature = "ssr")]
-    tokio::time::sleep(std::time::Duration::from_secs(1)).await;
-
-    Ok(CardData {
-        title: "Fetched Title".to_string(),
-        description: "This content was fetched from the server after a 1 second simulated delay. The shimmer effect automatically showed during the loading period.".to_string(),
-    })
-}
-
-#[component]
-pub fn DemoShimmer() -> impl IntoView {
-    // Loading state
-    let loading = RwSignal::new(false);
-
-    // Store fetched data
-    let card_data = RwSignal::new(None::<CardData>);
-
-    // Fetch handler using spawn_local for reliable repeated calls
-    let on_fetch = move |_| {
-        spawn_local(async move {
-            loading.set(true);
-            let result = fetch_card_data().await;
-            if let Ok(data) = result {
-                card_data.set(Some(data));
-            }
-            loading.set(false);
-        });
-    };
-
-    view! {
-        <div class="flex flex-col gap-4">
-            <div class="flex gap-2">
-                <Button variant=ButtonVariant::Outline on:click=move |_| loading.set(!loading.get())>
-                    "Toggle Loading"
-                </Button>
-                <Button variant=ButtonVariant::Default on:click=on_fetch>
-                    "Fetch Data (1s)"
-                </Button>
-            </div>
-
-            <Shimmer loading=Signal::from(loading)>
-                <Card class="max-w-lg lg:max-w-2xl">
-                    <CardHeader>
-                        <CardTitle>
-                            {move || {
-                                card_data.get().map(|data| data.title).unwrap_or_else(|| "Card Title".to_string())
-                            }}
-                        </CardTitle>
-                    </CardHeader>
-
-                    <CardContent>
-                        <CardDescription>
-                            {move || {
-                                card_data
-                                    .get()
-                                    .map(|data| data.description)
-                                    .unwrap_or_else(|| {
-                                        "Click 'Toggle Loading' for manual control, or 'Fetch Data' to simulate a real server call with 1 second delay."
-                                            .to_string()
-                                    })
-                            }}
-                        </CardDescription>
-                    </CardContent>
-
-                    <CardFooter class="justify-end">
-                        <Button variant=ButtonVariant::Outline>"Cancel"</Button>
-                        <Button>"Confirm"</Button>
-                    </CardFooter>
-                </Card>
-            </Shimmer>
-        </div>
-    }
-}

frontend/src/components/demos/mod.rs

@@ -1 +0,0 @@
-pub mod demo_shimmer;

frontend/src/components/hooks/use_random.rs

@@ -1,31 +1,3 @@
-use std::collections::hash_map::DefaultHasher;
+pub fn use_random_id_for(prefix: &str) -> String {
-use std::hash::{Hash, Hasher};
+    format!("{}_{}", prefix, js_sys::Math::random().to_string().replace(".", ""))
-use std::sync::atomic::{AtomicUsize, Ordering};
-
-const PREFIX: &str = "rust_ui"; // Must NOT contain "/" or "-"
-
-pub fn use_random_id() -> String {
-    format!("_{PREFIX}_{}", generate_hash())
 }
-
-pub fn use_random_id_for(element: &str) -> String {
-    format!("{}_{PREFIX}_{}", element, generate_hash())
-}
-
-pub fn use_random_transition_name() -> String {
-    let random_id = use_random_id();
-    format!("view-transition-name: {random_id}")
-}
-
-/* ========================================================== */
-/*                     ✨ FUNCTIONS ✨                        */
-/* ========================================================== */
-
-static COUNTER: AtomicUsize = AtomicUsize::new(1);
-
-fn generate_hash() -> u64 {
-    let mut hasher = DefaultHasher::new();
-    let counter = COUNTER.fetch_add(1, Ordering::SeqCst);
-    counter.hash(&mut hasher);
-    hasher.finish()
-}

frontend/src/components/hooks/use_theme_mode.rs

@@ -8,26 +8,15 @@ pub struct ThemeMode {
 
 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);
@@ -43,45 +32,14 @@ impl ThemeMode {
         });
     }
 
-    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())
@@ -89,7 +47,6 @@ impl ThemeMode {
             .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)")
@@ -99,10 +56,9 @@ impl ThemeMode {
             .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();
+            let _ = storage.set(LOCALSTORAGE_KEY, state.to_string().as_str());
         }
     }
-}
+}

frontend/src/components/layout/footer.rs

@@ -6,12 +6,24 @@ pub fn Footer() -> impl IntoView {
     let year = chrono::Local::now().format("%Y").to_string();
     
     view! {
-        <footer class="mt-auto pb-6 px-4">
+        <footer class="mt-auto px-4 py-6 md:px-8">
-            <Separator class="mb-4 opacity-30" />
+            <Separator class="mb-6 opacity-50" />
-            <div class="flex items-center justify-center gap-2 text-[10px] uppercase tracking-widest text-muted-foreground/60 font-medium">
+            <div class="flex flex-col items-center justify-between gap-4 md:flex-row">
-                <span>{format!("© {} VibeTorrent", year)}</span>
+                <p class="text-center text-sm leading-loose text-muted-foreground md:text-left">
-                <span class="size-1 rounded-full bg-muted-foreground/30" />
+                    {format!("© {} VibeTorrent. Tüm hakları saklıdır.", year)}
-                <span>"v3.0.0-beta"</span>
+                </p>
+                <div class="flex items-center gap-4 text-sm font-medium text-muted-foreground">
+                    <a 
+                        href="https://git.karatatar.com/admin/vibetorrent" 
+                        target="_blank" 
+                        rel="noreferrer" 
+                        class="underline underline-offset-4 hover:text-foreground transition-colors"
+                    >
+                        "Gitea"
+                    </a>
+                    <span class="size-1 rounded-full bg-muted-foreground/30" />
+                    <span class="text-[10px] tracking-widest uppercase opacity-70">"v3.0.0-beta"</span>
+                </div>
             </div>
         </footer>
     }

frontend/src/components/layout/sidebar.rs

@@ -3,7 +3,6 @@ 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 {
@@ -66,19 +65,6 @@ pub fn Sidebar() -> impl IntoView {
         username().chars().next().unwrap_or('?').to_uppercase().to_string()
     };
 
-    let on_push_toggle = move |checked: bool| {
-        spawn_local(async move {
-            if checked {
-                crate::store::subscribe_to_push_notifications().await;
-            } else {
-                crate::store::unsubscribe_from_push_notifications().await;
-            }
-            if let Ok(enabled) = crate::store::is_push_subscribed().await {
-                store.push_enabled.set(enabled);
-            }
-        });
-    };
-
     view! {
         <SidenavHeader>
             <div class="flex items-center gap-2 px-2 py-4">
@@ -147,49 +133,35 @@ pub fn Sidebar() -> impl IntoView {
         </SidenavContent>
 
         <SidenavFooter>
-            <div class="flex flex-col gap-4 p-4">
+            <div class="flex items-center gap-3 p-2 rounded-lg border bg-muted/30 shadow-xs overflow-hidden">
-                // Push Notification Toggle
+                <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">
-                <div class="flex items-center justify-between px-2 py-1 bg-muted/20 rounded-md border border-border/50">
+                    {first_letter}
-                    <div class="flex flex-col gap-0.5">
-                        <span class="text-[10px] font-bold uppercase tracking-wider text-foreground/70">"Bildirimler"</span>
-                        <span class="text-[9px] text-muted-foreground">"Web Push"</span>
-                    </div>
-                    <Switch 
-                        checked=Signal::from(store.push_enabled) 
-                        on_checked_change=Callback::new(on_push_toggle)
-                    />
                 </div>
-
+                <div class="flex-1 overflow-hidden">
-                <div class="flex items-center gap-3 p-2 rounded-lg border bg-muted/30 shadow-xs overflow-hidden">
+                    <div class="font-medium text-[11px] truncate text-foreground leading-tight">{username}</div>
-                    <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">
+                    <div class="text-[9px] text-muted-foreground truncate opacity-70">"Yönetici"</div>
-                        {first_letter}
+                </div>
-                    </div>
+                
-                    <div class="flex-1 overflow-hidden">
+                <div class="flex items-center gap-1">
-                        <div class="font-medium text-[11px] truncate text-foreground leading-tight">{username}</div>
+                    <ThemeToggle />
-                        <div class="text-[9px] text-muted-foreground truncate opacity-70">"Yönetici"</div>
-                    </div>
                     
-                    <div class="flex items-center gap-1">
+                    <Button
-                        <ThemeToggle />
+                        variant=ButtonVariant::Ghost
-                        
+                        size=ButtonSize::Icon
-                        <Button
+                        class="size-7 text-destructive hover:bg-destructive/10"
-                            variant=ButtonVariant::Ghost
+                        on:click=move |_| {
-                            size=ButtonSize::Icon
+                            spawn_local(async move {
-                            class="size-7 text-destructive hover:bg-destructive/10"
+                                if shared::server_fns::auth::logout().await.is_ok() {
-                            on:click=move |_| {
+                                    let window = web_sys::window().expect("window should exist");
-                                spawn_local(async move {
+                                    let _ = window.location().set_href("/login");
-                                    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>
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+                    </Button>
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
-                            </svg>
-                        </Button>
-                    </div>
                 </div>
             </div>
         </SidenavFooter>

frontend/src/components/layout/toolbar.rs

@@ -1,13 +1,14 @@
 use leptos::prelude::*;
-use icons::{PanelLeft, Plus};
+use icons::PanelLeft;
-use crate::components::torrent::add_torrent::AddTorrentDialogContent;
+use crate::components::torrent::add_torrent::AddTorrentDialog;
-use crate::components::ui::button::{ButtonVariant, ButtonSize};
+use crate::components::ui::button::{Button, ButtonVariant, ButtonSize};
 use crate::components::ui::sheet::{Sheet, SheetContent, SheetTrigger, SheetDirection};
-use crate::components::ui::dialog::{Dialog, DialogContent, DialogTrigger};
 use crate::components::layout::sidebar::Sidebar;
 
 #[component]
 pub fn Toolbar() -> impl IntoView {
+    let show_add_modal = signal(false);
+
     view! {
         <div class="flex min-h-14 h-auto items-center border-b border-border bg-background px-4" style="padding-top: env(safe-area-inset-top);">
             // Sol kısım: Menü butonu (Mobil) + Add Torrent
@@ -32,24 +33,25 @@ pub fn Toolbar() -> impl IntoView {
                     </Sheet>
                 </div>
                 
-                <Dialog>
+                <Button
-                    <DialogTrigger 
+                    on:click=move |_| show_add_modal.1.set(true)
-                        variant=ButtonVariant::Default 
+                    class="gap-2"
-                        class="gap-2"
+                >
-                    >
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 md:w-5 md:h-5">
-                        <Plus class="w-4 h-4 md:w-5 md:h-5" />
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-                        <span class="hidden sm:inline">"Add Torrent"</span>
+                    </svg>
-                        <span class="sm:hidden">"Add"</span>
+                    <span class="hidden sm:inline">"Add Torrent"</span>
-                    </DialogTrigger>
+                    <span class="sm:hidden">"Add"</span>
-                    <DialogContent id="add-torrent-dialog" class="sm:max-w-[425px]">
+                </Button>
-                        <AddTorrentDialogContent />
-                    </DialogContent>
-                </Dialog>
             </div>
 
             // Sağ kısım boş
             <div class="flex flex-1 items-center justify-end gap-2">
             </div>
+
+            <Show when=move || show_add_modal.0.get()>
+                <AddTorrentDialog on_close=Callback::new(move |()| show_add_modal.1.set(false)) />
+            </Show>
         </div>
     }
-}
+}

frontend/src/components/mod.rs

@@ -5,4 +5,3 @@ pub mod torrent;
 pub mod auth;
 // pub mod toast; (Removed)
 pub mod ui;
-pub mod demos;

frontend/src/components/torrent/add_torrent.rs

@@ -1,15 +1,17 @@
 use leptos::prelude::*;
 use leptos::task::spawn_local;
-use wasm_bindgen::JsCast;
 use crate::components::ui::input::{Input, InputType};
+use crate::store::TorrentStore;
 use crate::api;
-use crate::components::ui::button::Button;
+
-use crate::components::ui::dialog::{
+use crate::components::ui::button::{Button, ButtonVariant};
-    DialogBody, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose
-};
 
 #[component]
-pub fn AddTorrentDialogContent() -> impl IntoView {
+pub fn AddTorrentDialog(
+    on_close: Callback<()>,
+) -> impl IntoView {
+    let _store = use_context::<TorrentStore>().expect("TorrentStore not provided");
+
     let uri = RwSignal::new(String::new());
     let is_loading = signal(false);
     let error_msg = signal(Option::<String>::None);
@@ -19,30 +21,20 @@ pub fn AddTorrentDialogContent() -> impl IntoView {
         let uri_val = uri.get();
         
         if uri_val.is_empty() {
-            error_msg.1.set(Some("Lütfen bir Magnet URI veya URL girin".to_string()));
+            error_msg.1.set(Some("Please enter a Magnet URI or URL".to_string()));
             return;
         }
 
         is_loading.1.set(true);
         error_msg.1.set(None);
 
+        let on_close = on_close.clone();
         spawn_local(async move {
             match api::torrent::add(&uri_val).await {
                 Ok(_) => {
                     log::info!("Torrent added successfully");
                     crate::store::toast_success("Torrent başarıyla eklendi");
-                    
+                    on_close.run(());
-                    // 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());
-                            }
-                        }
-                    }
-                    
-                    uri.set(String::new());
-                    is_loading.1.set(false);
                 }
                 Err(e) => {
                     log::error!("Failed to add torrent: {:?}", e);
@@ -53,16 +45,29 @@ pub fn AddTorrentDialogContent() -> impl IntoView {
         });
     };
 
+    let handle_backdrop = {
+        let on_close = on_close.clone();
+        move |e: web_sys::MouseEvent| {
+            e.stop_propagation();
+            on_close.run(());
+        }
+    };
+
     view! {
-        <DialogBody>
+        // Backdrop overlay
-            <DialogHeader>
+        <div
-                <DialogTitle>"Add Torrent"</DialogTitle>
+            class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm"
-                <DialogDescription>
+            on:click=handle_backdrop
-                    "Enter a Magnet link or a .torrent file URL."
+        />
-                </DialogDescription>
+        // Dialog panel
-            </DialogHeader>
+        <div class="fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-card p-6 shadow-lg rounded-lg sm:max-w-[425px]">
+            // Header
+            <div class="flex flex-col space-y-1.5 text-center sm:text-left">
+                <h2 class="text-lg font-semibold leading-none tracking-tight">"Add Torrent"</h2>
+                <p class="text-sm text-muted-foreground">"Enter a Magnet link or a .torrent file URL."</p>
+            </div>
             
-            <form on:submit=handle_submit class="space-y-4 pt-4">
+            <form on:submit=handle_submit class="space-y-4">
                 <Input
                     r#type=InputType::Text
                     placeholder="magnet:?xt=urn:btih:..."
@@ -76,10 +81,14 @@ pub fn AddTorrentDialogContent() -> impl IntoView {
                     </div>
                 })}
 
-                <DialogFooter class="pt-2">
+                <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
-                    <DialogClose>
+                    <Button
+                        variant=ButtonVariant::Ghost
+                        attr:r#type="button"
+                        on:click=move |_| on_close.run(())
+                    >
                         "Cancel"
-                    </DialogClose>
+                    </Button>
                     <Button
                         attr:r#type="submit"
                         attr:disabled=move || is_loading.0.get()
@@ -93,8 +102,21 @@ pub fn AddTorrentDialogContent() -> impl IntoView {
                             leptos::either::Either::Right(view! { "Add" })
                         }}
                     </Button>
-                </DialogFooter>
+                </div>
             </form>
-        </DialogBody>
+
+            // Close button (X)
+            <Button 
+                variant=ButtonVariant::Ghost
+                class="absolute right-2 top-2 size-8 p-0 opacity-70 hover:opacity-100"
+                on:click=move |_| on_close.run(())
+            >
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
+                    <path d="M18 6 6 18"></path>
+                    <path d="m6 6 12 12"></path>
+                </svg>
+                <span class="sr-only">"Close"</span>
+            </Button>
+        </div>
     }
-}
+}

frontend/src/components/torrent/details.rs

@@ -1,178 +0,0 @@
-use leptos::prelude::*;
-use crate::components::ui::sheet::*;
-use crate::components::ui::tabs::*;
-use crate::components::ui::skeleton::*;
-use shared::Torrent;
-
-#[component]
-pub fn TorrentDetailsSheet() -> impl IntoView {
-    let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
-
-    // Setup an effect to open the sheet when a torrent is selected
-    Effect::new(move |_| {
-        if store.selected_torrent.get().is_some() {
-            if let Some(trigger) = document().get_element_by_id("torrent-details-trigger") {
-                use wasm_bindgen::JsCast;
-                let _ = trigger.dyn_into::<web_sys::HtmlElement>().map(|el| el.click());
-            }
-        }
-    });
-
-    let selected_torrent = Memo::new(move |_| {
-        let hash = store.selected_torrent.get()?;
-        store.torrents.with(|map| map.get(&hash).cloned())
-    });
-
-    view! {
-        <Sheet>
-            <SheetTrigger attr:id="torrent-details-trigger" class="hidden">""</SheetTrigger>
-            <SheetContent 
-                direction=SheetDirection::Bottom 
-                class="h-[80vh] sm:h-[60vh] rounded-t-xl sm:rounded-t-2xl p-0 flex flex-col gap-0 border-t border-border shadow-2xl" 
-                hide_close_button=true
-            >
-                <div class="px-6 py-4 border-b flex items-center justify-between sticky top-0 bg-card z-10">
-                    <div class="flex flex-col gap-1 min-w-0">
-                        <Show when=move || selected_torrent.get().is_some() fallback=move || view! { <Skeleton class="h-6 w-48" /> }>
-                            <h2 class="font-bold text-lg truncate">
-                                {move || selected_torrent.get().map(|t| t.name).unwrap_or_default()}
-                            </h2>
-                        </Show>
-                        <Show when=move || selected_torrent.get().is_some() fallback=move || view! { <Skeleton class="h-4 w-24" /> }>
-                            <p class="text-xs text-muted-foreground uppercase tracking-widest font-semibold flex items-center gap-2">
-                                {move || selected_torrent.get().map(|t| format!("{:?}", t.status)).unwrap_or_default()}
-                                <span class="bg-primary/20 text-primary px-1.5 py-0.5 rounded text-[10px] lowercase">{move || selected_torrent.get().map(|t| format!("{:.1}%", t.percent_complete)).unwrap_or_default()}</span>
-                            </p>
-                        </Show>
-                    </div>
-                    // Custom close button that also resets store.selected_torrent
-                    <SheetClose class="rounded-full p-2 hover:bg-muted transition-colors border-none shadow-none cursor-pointer">
-                        <icons::X class="size-5 opacity-70" on:click=move |_| store.selected_torrent.set(None) />
-                    </SheetClose>
-                </div>
-
-                <div class="flex-1 overflow-hidden p-6">
-                    <Tabs default_value="general" class="h-full flex flex-col">
-                        <TabsList class="w-full justify-start rounded-none border-b bg-transparent p-0">
-                            <TabsTrigger value="general" class="data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:border-b-2 data-[state=active]:border-primary rounded-none">
-                                "Genel"
-                            </TabsTrigger>
-                            <TabsTrigger value="files" class="data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:border-b-2 data-[state=active]:border-primary rounded-none">
-                                "Dosyalar"
-                            </TabsTrigger>
-                            <TabsTrigger value="trackers" class="data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:border-b-2 data-[state=active]:border-primary rounded-none">
-                                "İzleyiciler"
-                            </TabsTrigger>
-                            <TabsTrigger value="peers" class="data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:border-b-2 data-[state=active]:border-primary rounded-none">
-                                "Eşler"
-                            </TabsTrigger>
-                        </TabsList>
-
-                        <div class="flex-1 overflow-y-auto mt-4 pb-12">
-                            <TabsContent value="general" class="space-y-6 animate-in fade-in slide-in-from-bottom-2 duration-300">
-                                <crate::components::ui::shimmer::Shimmer 
-                                    loading=Signal::derive(move || selected_torrent.get().is_none())
-                                    shimmer_color="rgba(0,0,0,0.06)"
-                                    background_color="rgba(0,0,0,0.04)"
-                                >
-                                    {move || {
-                                        let t = selected_torrent.get().unwrap_or_else(|| shared::Torrent {
-                                            hash: "----------------------------------------".to_string(),
-                                            name: "Yükleniyor...".to_string(),
-                                            size: 0,
-                                            completed: 0,
-                                            down_rate: 0,
-                                            up_rate: 0,
-                                            eta: 0,
-                                            percent_complete: 0.0,
-                                            status: shared::TorrentStatus::Downloading,
-                                            error_message: "".to_string(),
-                                            added_date: 0,
-                                            label: None,
-                                        });
-
-                                        view! {
-                                            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
-                                                <InfoItem label="İndirilen / Toplam" value=format!("{} / {}", format_bytes(t.completed), format_bytes(t.size)) />
-                                                <InfoItem label="İndirme Hızı" value=format_speed(t.down_rate) class="text-blue-500" />
-                                                <InfoItem label="Gönderme Hızı" value=format_speed(t.up_rate) class="text-green-500" />
-                                                <InfoItem label="Eklenme Tarihi" value=format_date(t.added_date) />
-                                                <InfoItem label="Kalan Süre" value=format_duration(t.eta) />
-                                                <InfoItem label="Hash" value=t.hash class="col-span-2 md:col-span-4 break-all font-mono text-xs" />
-                                            </div>
-                                        }
-                                    }}
-                                </crate::components::ui::shimmer::Shimmer>
-                            </TabsContent>
-
-                            <TabsContent value="files" class="h-full">
-                                <div class="flex flex-col items-center justify-center h-48 opacity-60">
-                                    <icons::File class="size-12 mb-3 text-muted-foreground" />
-                                    <p class="text-sm font-medium">"Dosya listesi yakında eklenecek"</p>
-                                </div>
-                            </TabsContent>
-
-                            <TabsContent value="trackers" class="h-full">
-                                <div class="flex flex-col items-center justify-center h-48 opacity-60">
-                                    <icons::Settings2 class="size-12 mb-3 text-muted-foreground" />
-                                    <p class="text-sm font-medium">"İzleyici listesi yakında eklenecek"</p>
-                                </div>
-                            </TabsContent>
-
-                            <TabsContent value="peers" class="h-full">
-                                <div class="flex flex-col items-center justify-center h-48 opacity-60">
-                                    <icons::Users class="size-12 mb-3 text-muted-foreground" />
-                                    <p class="text-sm font-medium">"Eş listesi yakında eklenecek"</p>
-                                </div>
-                            </TabsContent>
-                        </div>
-                    </Tabs>
-                </div>
-            </SheetContent>
-        </Sheet>
-    }
-}
-
-#[component]
-fn InfoItem(
-    label: &'static str, 
-    value: String, 
-    #[prop(optional)] class: &'static str
-) -> impl IntoView {
-    view! {
-        <div class=tailwind_fuse::tw_merge!("flex flex-col gap-1", class)>
-            <span class="text-xs font-semibold text-muted-foreground uppercase opacity-80">{label}</span>
-            <span class="text-sm font-medium">{value}</span>
-        </div>
-    }
-}
-
-fn format_bytes(bytes: i64) -> String {
-    const UNITS: [&str; 6] = ["B", "KB", "MB", "GB", "TB", "PB"];
-    if bytes < 1024 { return format!("{} B", bytes); }
-    let i = (bytes as f64).log2().div_euclid(10.0) as usize;
-    format!("{:.1} {}", (bytes as f64) / 1024_f64.powi(i as i32), UNITS[i])
-}
-
-fn format_speed(bytes_per_sec: i64) -> String {
-    if bytes_per_sec == 0 { return "0 B/s".to_string(); }
-    format!("{}/s", format_bytes(bytes_per_sec))
-}
-
-fn format_duration(seconds: i64) -> String {
-    if seconds <= 0 { return "∞".to_string(); }
-    let days = seconds / 86400;
-    let hours = (seconds % 86400) / 3600;
-    let minutes = (seconds % 3600) / 60;
-    let secs = seconds % 60;
-    if days > 0 { format!("{}g {}s", days, hours) }
-    else if hours > 0 { format!("{}s {}d", hours, minutes) }
-    else if minutes > 0 { format!("{}d {}sn", minutes, secs) }
-    else { format!("{}sn", secs) }
-}
-
-fn format_date(timestamp: i64) -> String {
-    if timestamp <= 0 { return "N/A".to_string(); }
-    let dt = chrono::DateTime::from_timestamp(timestamp, 0);
-    match dt { Some(dt) => dt.format("%d/%m/%Y %H:%M").to_string(), None => "N/A".to_string() }
-}

frontend/src/components/torrent/mod.rs

@@ -1,3 +1,2 @@
 pub mod table;
 pub mod add_torrent;
-pub mod details;

frontend/src/components/torrent/table.rs

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

frontend/src/components/ui/accordion.rs

@@ -1,39 +1,31 @@
 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);
+    let _ = (children, class);
-    view! { <div class=class>{children()}</div> }
+    view! { <div>"Accordion Not Implemented"</div> }
 }
 
 #[component]
 pub fn AccordionItem(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
-    let class = tw_merge!("border-b", class);
+    let _ = (children, class);
-    view! { <div class=class>{children()}</div> }
+    view! { <div>"AccordionItem Not Implemented"</div> }
 }
 
 #[component]
 pub fn AccordionHeader(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
-    let class = tw_merge!("flex", class);
+    let _ = (children, class);
-    view! { <div class=class>{children()}</div> }
+    view! { <div>"AccordionHeader Not Implemented"</div> }
 }
 
 #[component]
 pub fn AccordionTrigger(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
-    let class = tw_merge!(
+    let _ = (children, class);
-        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+    view! { <div>"AccordionTrigger Not Implemented"</div> }
-        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);
+    let _ = (children, class);
-    view! { <div class=class>{children()}</div> }
+    view! { <div>"AccordionContent Not Implemented"</div> }
 }

frontend/src/components/ui/badge.rs

@@ -6,7 +6,6 @@ pub enum BadgeVariant {
     #[default]
     Default,
     Secondary,
-    Outline,
     Destructive,
     Success,
     Warning,
@@ -22,7 +21,6 @@ pub fn Badge(
     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",

frontend/src/components/ui/button_action.rs

@@ -1,72 +0,0 @@
-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

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

frontend/src/components/ui/context_menu.rs

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

frontend/src/components/ui/data_table.rs

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

frontend/src/components/ui/dialog.rs

@@ -18,10 +18,6 @@ mod components {
 
 pub use components::*;
 
-/* ========================================================== */
-/*                     ✨ FUNCTIONS ✨                        */
-/* ========================================================== */
-
 #[derive(Clone)]
 struct DialogContext {
     target_id: String,
@@ -30,11 +26,8 @@ struct DialogContext {
 #[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">
@@ -53,16 +46,8 @@ pub fn DialogTrigger(
 ) -> impl IntoView {
     let ctx = expect_context::<DialogContext>();
     let trigger_id = format!("trigger_{}", ctx.target_id);
-
     view! {
-        <Button
+        <Button class=class attr:id=trigger_id attr:tabindex="0" attr:data-dialog-trigger=ctx.target_id variant=variant size=size>
-            class=class
-            attr:id=trigger_id
-            attr:tabindex="0"
-            attr:data-dialog-trigger=ctx.target_id
-            variant=variant
-            size=size
-        >
             {children()}
         </Button>
     }
@@ -72,7 +57,6 @@ pub fn DialogTrigger(
 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,
@@ -82,74 +66,32 @@ pub fn DialogContent(
         "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 target_id_for_script = ctx.target_id.clone();
     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
+        <div data-name=content_data_name class=merged_class id=ctx.target_id data-target="target__dialog" data-state="closed" data-backdrop=backdrop_behavior style="pointer-events: none;">
-            data-name=backdrop_data_name
+            <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">
-            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!(
+            {format!(r#"
-                r#"
                 (function() {{
                     const setupDialog = () => {{
                         const dialog = document.querySelector('#{}');
                         const backdrop = document.querySelector('#{}');
                         const trigger = document.querySelector('[data-dialog-trigger="{}"]');
-
+                        if (!dialog || !backdrop || !trigger || dialog.hasAttribute('data-initialized')) return;
-                        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');
@@ -157,38 +99,20 @@ pub fn DialogContent(
                             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);
+                            if (window.ScrollLock) window.ScrollLock.unlock(200);
                         }};
-
                         trigger.addEventListener('click', openDialog);
-                        dialog.querySelectorAll('[data-dialog-close]').forEach(btn => {{
+                        dialog.querySelectorAll('[data-dialog-close]').forEach(btn => btn.addEventListener('click', closeDialog));
-                            btn.addEventListener('click', closeDialog);
+                        backdrop.addEventListener('click', () => {{ if (dialog.getAttribute('data-backdrop') === 'auto') 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();
                 }})();
-                "#,
+            "#, target_id_for_script, backdrop_id_for_script, target_id_for_script)}
-                final_id_for_script,
-                backdrop_id_for_script,
-                trigger_id_for_script,
-            )}
         </script>
     }
 }
@@ -201,15 +125,8 @@ pub fn DialogClose(
     #[prop(default = ButtonSize::Default)] size: ButtonSize,
 ) -> impl IntoView {
     let ctx = expect_context::<DialogContext>();
-
     view! {
-        <Button
+        <Button class=class attr:data-dialog-close=ctx.target_id attr:aria-label="Close dialog" variant=variant size=size>
-            class=class
-            attr:data-dialog-close=ctx.target_id
-            attr:aria-label="Close dialog"
-            variant=variant
-            size=size
-        >
             {children()}
         </Button>
     }
@@ -222,17 +139,11 @@ pub fn DialogAction(
     #[prop(default = ButtonVariant::Default)] variant: ButtonVariant,
     #[prop(default = ButtonSize::Default)] size: ButtonSize,
 ) -> impl IntoView {
+    let _ = (class, variant, size);
     let ctx = expect_context::<DialogContext>();
-
     view! {
-        <Button
+        <Button attr:data-dialog-close=ctx.target_id attr:aria-label="Close dialog">
-            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

@@ -1,4 +1,3 @@
-use icons::{Check, ChevronRight};
 use leptos::context::Provider;
 use leptos::prelude::*;
 use leptos_ui::clx;
@@ -18,27 +17,20 @@ mod components {
 
 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">
@@ -48,11 +40,9 @@ where
     }
 }
 
-/// 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
@@ -60,16 +50,13 @@ 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"
@@ -82,138 +69,53 @@ where
             }
         >
             {children()}
-            <Check class="ml-auto opacity-0 size-4 text-muted-foreground group-aria-checked:opacity-100" />
+            <icons::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>
-
+        }.into_any()
-            <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()
-        .into_any()
     }
 }
 
-/* ========================================================== */
-/*                     ✨ FUNCTIONS ✨                        */
-/* ========================================================== */
-
 #[derive(Clone, Copy, PartialEq, Eq, Default)]
+#[allow(dead_code)]
 pub enum DropdownMenuAlign {
-    #[default]
+    #[default] Start, StartOuter, End, EndOuter, Center,
-    Start,
-    StartOuter,
-    End,
-    EndOuter,
-    Center,
 }
 
 #[derive(Clone)]
 struct DropdownMenuContext {
     target_id: String,
-    align: DropdownMenuAlign,
 }
 
 #[component]
-pub fn DropdownMenu(
+pub fn DropdownMenu(children: Children) -> impl IntoView {
-    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() };
-    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>
     }
@@ -223,314 +125,105 @@ pub fn DropdownMenu(
 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",
+        "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
+        <button type="button" class=button_class data-name="DropdownMenuTrigger" data-dropdown-trigger=ctx.target_id tabindex="0">
-            type="button"
-            class=button_class
-            data-name="DropdownMenuTrigger"
-            data-dropdown-trigger=ctx.target_id
-            tabindex="0"
-        >
             {children()}
         </button>
     }
 }
 
 #[derive(Clone, Copy, PartialEq, Eq, Default)]
+#[allow(dead_code)]
 pub enum DropdownMenuPosition {
-    #[default]
+    #[default] Auto, Top, Bottom,
-    Auto,
-    Top,
-    Bottom,
 }
 
 #[component]
 pub fn DropdownMenuContent(
     children: Children,
     #[prop(optional, into)] class: String,
+    #[prop(default = DropdownMenuAlign::default())] align: DropdownMenuAlign,
     #[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 {
+    let width_class = match 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 {
+    let align_for_script = match align {
-        DropdownMenuAlign::Start => "start",
+        DropdownMenuAlign::Start => "start", DropdownMenuAlign::StartOuter => "start-outer",
-        DropdownMenuAlign::StartOuter => "start-outer",
+        DropdownMenuAlign::End => "end", DropdownMenuAlign::EndOuter => "end-outer",
-        DropdownMenuAlign::End => "end",
-        DropdownMenuAlign::EndOuter => "end-outer",
         DropdownMenuAlign::Center => "center",
     };
-
     let position_for_script = match position {
-        DropdownMenuPosition::Auto => "auto",
+        DropdownMenuPosition::Auto => "auto", DropdownMenuPosition::Top => "top", DropdownMenuPosition::Bottom => "bottom",
-        DropdownMenuPosition::Top => "top",
-        DropdownMenuPosition::Bottom => "bottom",
     };
-
     view! {
-        <div
+        <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;">
-            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!(
+            {format!(r#"
-                r#"
                 (function() {{
                     const setupDropdown = () => {{
                         const dropdown = document.querySelector('#{}');
                         const trigger = document.querySelector('[data-dropdown-trigger="{}"]');
-
+                        if (!dropdown || !trigger || dropdown.hasAttribute('data-initialized')) return;
-                        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';
-
+                            if (window.ScrollLock) window.ScrollLock.lock();
-                            // Force reflow to ensure height is calculated
+                            setTimeout(() => {{ document.addEventListener('click', handleClickOutside); }}, 0);
-                            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);
-
+                            if (window.ScrollLock) window.ScrollLock.unlock(200);
-                            // Unlock scroll after animation (200ms delay)
-                            window.ScrollLock.unlock(200);
                         }};
-
+                        const handleClickOutside = (e) => {{ if (!dropdown.contains(e.target) && !trigger.contains(e.target)) closeDropdown(); }};
-                        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();
-
+                            if (isOpen) closeDropdown(); else openDropdown();
-                            // 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();
-                            }}
                         }});
+                        dropdown.querySelectorAll('[data-dropdown-close]').forEach(action => action.addEventListener('click', closeDropdown));
                     }};
-
+                    setupDropdown();
-                    if (document.readyState === 'loading') {{
-                        document.addEventListener('DOMContentLoaded', setupDropdown);
-                    }} else {{
-                        setupDropdown();
-                    }}
                 }})();
-                "#,
+            "#, target_id_for_script, target_id_for_script)}
-                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 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 hover:bg-accent hover:text-accent-foreground"}
-    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" />
+            <icons::ChevronRight class="opacity-70 size-4" />
         </span>
     }
 }
 
 #[component]
 pub fn DropdownMenuSubItem(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
-    let class = tw_merge!(
+    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);
-        "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]",
+    view! { <li data-name="DropdownMenuSubItem" class=class data-dropdown-close="true">{children()}</li> }
-        class
+}
-    );
-
-    view! {
-        <li data-name="DropdownMenuSubItem" class=class data-dropdown-close="true">
-            {children()}
-        </li>
-    }
-}

frontend/src/components/ui/mod.rs

@@ -2,7 +2,6 @@ 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;
@@ -17,10 +16,7 @@ pub mod separator;
 pub mod sheet;
 pub mod sidenav;
 pub mod skeleton;
-pub mod shimmer;
 pub mod svg_icon;
-pub mod switch;
 pub mod table;
-pub mod tabs;
 pub mod theme_toggle;
 pub mod toast;

frontend/src/components/ui/multi_select.rs

@@ -1,43 +1,29 @@
 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,
+    SelectGroup as MultiSelectGroup, SelectItem as MultiSelectItem,
 };
 
 #[derive(Clone, Copy, PartialEq, Eq, Default)]
+#[allow(dead_code)]
 pub enum MultiSelectAlign {
-    Start,
+    Start, #[default] Center, End,
-    #[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() {
+                if values.is_empty() { placeholder.clone() }
-                    placeholder.clone()
+                else { let count = values.len(); if count == 1 { "1 selected".to_string() } else { format!("{} selected", count) } }
-                } else {
-                    let count = values.len();
-                    if count == 1 { "1 selected".to_string() } else { format!("{} selected", count) }
-                }
             }}
         </span>
     }
@@ -50,41 +36,17 @@ pub fn MultiSelectOption(
     #[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 {
+        if let Some(ref val) = value_clone { multi_select_ctx.values_signal.with(|values| values.contains(val)) } else { false }
-            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 hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-50", class);
-    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
+        <button type="button" data-name="MultiSelectOption" class=class role="option" aria-selected=move || is_selected.get().to_string()
-            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.prevent_default(); ev.stop_propagation();
-                ev.stop_propagation();
                 if let Some(val) = value.clone() {
-                    multi_select_ctx
+                    multi_select_ctx.values_signal.update(|values| { if values.contains(&val) { values.remove(&val); } else { values.insert(val); } });
-                        .values_signal
-                        .update(|values| {
-                            if values.contains(&val) {
-                                values.remove(&val);
-                            } else {
-                                values.insert(val);
-                            }
-                        });
                 }
             }
         >
@@ -94,10 +56,6 @@ pub fn MultiSelectOption(
     }
 }
 
-/* ========================================================== */
-/*                     ✨ FUNCTIONS ✨                        */
-/* ========================================================== */
-
 #[derive(Clone)]
 struct MultiSelectContext {
     target_id: String,
@@ -113,9 +71,7 @@ pub fn MultiSelect(
 ) -> 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">
@@ -126,32 +82,12 @@ pub fn MultiSelect(
 }
 
 #[component]
-pub fn MultiSelectTrigger(
+pub fn MultiSelectTrigger(children: Children, #[prop(optional, into)] class: String, #[prop(optional, into)] id: String) -> impl IntoView {
-    children: Children,
+    let ctx = expect_context::<MultiSelectContext>();
-    #[prop(optional, into)] class: String,
+    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 disabled:cursor-not-allowed disabled:opacity-50 border bg-background border-input hover:bg-accent hover:text-accent-foreground", class);
-    #[prop(optional, into)] id: String,
+    let button_id = if !id.is_empty() { id } else { format!("trigger_{}", ctx.target_id) };
-) -> 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
+        <button type="button" data-name="MultiSelectTrigger" class=button_class id=button_id tabindex="0" data-multi-select-trigger=ctx.target_id>
-            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>
@@ -161,134 +97,33 @@ pub fn MultiSelectTrigger(
 #[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 align_str = match multi_select_ctx.align {
+    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);
-        MultiSelectAlign::Start => "start",
+    let target_id = multi_select_ctx.target_id.clone();
-        MultiSelectAlign::Center => "center",
+    let (on_scroll, can_scroll_up, can_scroll_down) = use_can_scroll_vertical();
-        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
+        <div data-name="MultiSelectContent" class=class id=target_id.clone() data-target="target__multi_select" data-state="closed" data-align=align_str style="pointer-events: none;" on:scroll=move |ev| on_scroll.run(ev)>
-            data-name="MultiSelectContent"
+            <div class=move || if can_scroll_up.get() { "sticky -top-1 z-10 flex items-center justify-center py-1 bg-card" } else { "hidden" }><ChevronUp class="size-4 text-muted-foreground" /></div>
-            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
+            <div class=move || if can_scroll_down.get() { "sticky -bottom-1 z-10 flex items-center justify-center py-1 bg-card" } else { "hidden" }><ChevronDown class="size-4 text-muted-foreground" /></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!(
+            {format!(r#"
-                r#"
                 (function() {{
-                    const setupMultiSelect = () => {{
+                    const setup = () => {{
-                        const multiSelect = document.querySelector('#{}');
+                        const ms = document.querySelector('#{}');
-                        const trigger = document.querySelector('[data-multi-select-trigger="{}"]');
+                        const tr = document.querySelector('[data-multi-select-trigger="{}"]');
-
+                        if (!ms || !tr || ms.hasAttribute('data-initialized')) return;
-                        if (!multiSelect || !trigger) {{
+                        ms.setAttribute('data-initialized', 'true');
-                            setTimeout(setupMultiSelect, 50);
-                            return;
-                        }}
-
-                        if (multiSelect.hasAttribute('data-initialized')) {{
-                            return;
-                        }}
-                        multiSelect.setAttribute('data-initialized', 'true');
-
                         let isOpen = false;
-
+                        const open = () => {{ isOpen = true; ms.setAttribute('data-state', 'open'); ms.style.pointerEvents = 'auto'; if (window.ScrollLock) window.ScrollLock.lock(); setTimeout(() => document.addEventListener('click', clickOut), 0); }};
-                        const openMultiSelect = () => {{
+                        const close = () => {{ isOpen = false; ms.setAttribute('data-state', 'closed'); ms.style.pointerEvents = 'none'; document.removeEventListener('click', clickOut); if (window.ScrollLock) window.ScrollLock.unlock(200); }};
-                            isOpen = true;
+                        const clickOut = (e) => {{ if (!ms.contains(e.target) && !tr.contains(e.target)) close(); }};
-                            if (window.ScrollLock) window.ScrollLock.lock();
+                        tr.addEventListener('click', (e) => {{ e.stopPropagation(); if (isOpen) close(); else open(); }});
-                            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();
-                            }}
-                        }});
                     }};
-
+                    setup();
-                    if (document.readyState === 'loading') {{
-                        document.addEventListener('DOMContentLoaded', setupMultiSelect);
-                    }} else {{
-                        setupMultiSelect();
-                    }}
                 }})();
-                "#,
+            "#, target_id, target_id)}
-                target_id_for_script,
-                target_id_for_script_2,
-            )}
         </script>
-    }.into_any()
+    }
 }

frontend/src/components/ui/select.rs

@@ -1,311 +1,34 @@
-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;
+#[component] pub fn SelectGroup(children: Children) -> impl IntoView { view! { <div class="px-1 py-1">{children()}</div> } }
-use crate::components::hooks::use_random::use_random_id_for;
+#[component] pub fn SelectItem(children: Children) -> impl IntoView { view! { <div class="relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground">{children()}</div> } }
 
-#[derive(Debug, Clone, Copy, PartialEq, Eq, Default, Display, AsRefStr)]
+#[derive(Clone, Copy, PartialEq, Eq, Default, Debug)]
-pub enum SelectPosition {
+#[allow(dead_code)]
-    #[default]
+pub enum SelectPosition { #[default] Below, Above }
-    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 class="text-sm text-muted-foreground">{placeholder}</span> }
-
-    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(
+pub fn SelectOption(children: Children, #[prop(optional, into)] value: Option<String>) -> impl IntoView {
-    children: Children,
+    let _ = value;
-    #[prop(optional, into)] class: String,
+    view! { <div role="option">{children()}</div> }
-    #[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(
+pub fn Select(children: Children) -> impl IntoView {
-    children: Children,
+    view! { <div>{children()}</div> }
-    #[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(
+pub fn SelectTrigger(children: Children) -> impl IntoView {
-    children: Children,
+    view! { <button type="button">{children()}</button> }
-    #[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(
+pub fn SelectContent(children: Children) -> impl IntoView {
-    children: Children,
+    view! { <div>{children()}</div> }
-    #[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

@@ -1,35 +1,21 @@
 use leptos::prelude::*;
-use tw_merge::*;
+use tailwind_fuse::tw_merge;
+
+#[derive(Clone, Copy, PartialEq, Eq, Default, Debug)]
+pub enum SeparatorOrientation { #[default] Horizontal, Vertical }
 
 #[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 class_signal = move || tw_merge!(
-        let orientation = orientation.get();
+        "shrink-0 bg-border",
-        let separator = SeparatorClass { orientation };
+        match orientation.get() {
-        separator.with_class(class.clone())
+            SeparatorOrientation::Horizontal => "h-[1px] w-full",
-    });
+            SeparatorOrientation::Vertical => "h-full w-[1px]",
-
+        },
-    view! { <div class=merged_class role="separator" /> }
+        class.clone()
+    );
+    view! { <div class=class_signal role="none" /> }
 }
-
-/* ========================================================== */
-/*                       🧬 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

@@ -18,32 +18,19 @@ mod components {
 
 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 _ = class;
     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>
+            <div data-name="Sheet">
                 {children()}
             </div>
         </Provider>
@@ -59,7 +46,6 @@ pub fn SheetTrigger(
 ) -> 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()}
@@ -75,7 +61,6 @@ pub fn SheetClose(
     #[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()}
@@ -91,131 +76,68 @@ pub fn SheetContent(
     #[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
+        <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" />
-            data-name="SheetBackdrop"
+        <div data-name="SheetContent" class=merged_class id=ctx.target_id data-direction=direction.to_string() data-state="closed" style="pointer-events: none;">
-            id=backdrop_id
+            <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">
-            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!(
+            {format!(r#"
-                r#"
                 (function() {{
                     const setupSheet = () => {{
                         const sheet = document.querySelector('#{}');
                         const backdrop = document.querySelector('#{}');
                         const trigger = document.querySelector('[data-sheet-trigger="{}"]');
-
+                        if (!sheet || !backdrop || !trigger || sheet.hasAttribute('data-initialized')) return;
-                        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');
+                            const direction = sheet.getAttribute('data-direction');
                             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]');
+                        sheet.querySelectorAll('[data-sheet-close]').forEach(btn => btn.addEventListener('click', closeSheet));
-                        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();
-                            }}
-                        }});
                     }};
-
+                    setupSheet();
-                    if (document.readyState === 'loading') {{
-                        document.addEventListener('DOMContentLoaded', setupSheet);
-                    }} else {{
-                        setupSheet();
-                    }}
                 }})();
-                "#,
+            "#, target_id_for_script, backdrop_id_for_script, target_id_for_script)}
-                target_id_for_script,
-                backdrop_id_for_script,
-                target_id_for_script,
-            )}
         </script>
-    }.into_any()
+    }
 }
 
-/* ========================================================== */
-/*                     ✨ ENUM ✨                             */
-/* ========================================================== */
-
 #[derive(Clone, Copy, strum::AsRefStr, strum::Display)]
+#[allow(dead_code)]
 pub enum SheetDirection {
-    Right,
+    Right, Left, Top, Bottom,
-    Left,
-    Top,
-    Bottom,
 }
 
 impl SheetDirection {
@@ -227,7 +149,6 @@ impl SheetDirection {
             SheetDirection::Bottom => "translate-y-full",
         }
     }
-
     fn initial_position(self) -> &'static str {
         match self {
             SheetDirection::Right => "top-0 right-0 h-full w-[400px]",

frontend/src/components/ui/shimmer.rs

@@ -1,52 +0,0 @@
-use leptos::prelude::*;
-use tw_merge::*;
-
-use crate::components::hooks::use_random::use_random_id_for;
-
-#[component]
-pub fn Shimmer(
-    /// Controls shimmer visibility (works with any bool signal)
-    #[prop(into)]
-    loading: Signal<bool>,
-
-    /// Color of the shimmer wave (default: "rgba(255,255,255,0.15)")
-    #[prop(into, optional)]
-    shimmer_color: Option<String>,
-
-    /// Background color of shimmer blocks (default: "rgba(255,255,255,0.08)")
-    #[prop(into, optional)]
-    background_color: Option<String>,
-
-    /// Animation duration in seconds (default: 1.5)
-    #[prop(optional)]
-    duration: Option<f64>,
-
-    /// Fallback border-radius for text elements in px (default: 4)
-    #[prop(optional)]
-    fallback_border_radius: Option<f64>,
-
-    /// Additional classes
-    #[prop(into, optional)]
-    class: String,
-
-    /// Children to wrap
-    children: Children,
-) -> impl IntoView {
-    let shimmer_id = use_random_id_for("Shimmer");
-    let merged_class = tw_merge!("relative", class);
-
-    view! {
-        <div
-            id=shimmer_id
-            class=merged_class
-            data-name="Shimmer"
-            data-shimmer-loading=move || loading.get().to_string()
-            data-shimmer-color=shimmer_color
-            data-shimmer-bg-color=background_color
-            data-shimmer-duration=duration.map(|d| d.to_string())
-            data-shimmer-fallback-radius=fallback_border_radius.map(|r| r.to_string())
-        >
-            {children()}
-        </div>
-    }
-}

frontend/src/components/ui/sidenav.rs

@@ -1,232 +1,69 @@
 use leptos::prelude::*;
-use leptos_router::hooks::use_location;
+use tw_merge::tw_merge;
-use leptos_ui::{clx, variants, void};
 
-mod components {
+#[derive(Clone, Copy, PartialEq, Eq, Default)]
-    use super::*;
+#[allow(dead_code)]
-    clx! {SidenavWrapper, div, "group/sidenav-wrapper has-data-[variant=Inset]:bg-sidenav flex h-full w-full"}
+pub enum SidenavState { #[default] Expanded, Collapsed }
-    // clx! {SidenavInset, div, "bg-background relative flex w-full flex-1 flex-col md:peer-data-[variant=Inset]:m-2 md:peer-data-[variant=Inset]:ml-0 md:peer-data-[variant=Inset]:rounded-xl md:peer-data-[variant=Inset]:shadow-sm md:peer-data-[variant=Inset]:peer-data-[state=Collapsed]:ml-2"}
-    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"}
-    // * data-[], not group-data-[]
-    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"}
-    // Button "More"
-    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,
+#[derive(Clone)]
-        "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",
+pub struct SidenavContext {
-        "focus-visible:border-ring focus-visible:ring-ring/50",
+    pub state: RwSignal<SidenavState>,
-        "focus-visible:ring-2", // TODO. Port tw_merge to Tailwind V4.
-     // "focus-visible:ring-[3px]", // TODO. Port tw_merge to Tailwind V4.
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-        "read-only:bg-muted",
-        // Specific to Sidenav
-        "w-full h-8 shadow-none bg-background"
-    }
 }
 
-pub use components::*;
-
-/* ========================================================== */
-/*                     ✨ FUNCTIONS ✨                        */
-/* ========================================================== */
-
 #[component]
-pub fn SidenavLink(
+pub fn SidenavWrapper(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
-    children: Children,
+    let state = RwSignal::new(SidenavState::Expanded);
-    #[prop(into)] href: String,
+    provide_context(SidenavContext { state });
-    #[prop(optional, into)] class: String,
+    let class = tw_merge!("flex min-h-screen w-full bg-background", class);
-) -> impl IntoView {
+    view! { <div class=class>{children()}</div> }
-    let merged_class = tw_merge!(
-        "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left outline-hidden ring-sidenav-ring transition-[width,height,padding] 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-semibold aria-[current=page]:text-sidenav-accent-foreground data-[state=open]:hover:bg-sidenav-accent data-[state=open]:hover:text-sidenav-accent-foreground group-data-[collapsible=Icon]:size-8! group-data-[collapsible=Icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 hover:bg-sidenav-accent hover:text-sidenav-accent-foreground h-8 text-sm",
-        class
-    );
-
-    let location = use_location();
-
-    // Check if the link is active based on current path
-    let href_clone = href.clone();
-    let is_active = move || {
-        let path = location.pathname.get();
-        path == href_clone || path.starts_with(&format!("{}/", href_clone))
-    };
-
-    let aria_current = move || if is_active() { "page" } else { "false" };
-
-    view! {
-        <a data-name="SidenavLink" class=merged_class href=href aria-current=aria_current>
-            {children()}
-        </a>
-    }
 }
 
-variants! {
+#[component]
-    SidenavMenuButton {
+pub fn Sidenav(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
-        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-[collapsible=Icon]:size-8! group-data-[collapsible=Icon]:p-0!   [&>svg]:stroke-2 aria-[current=page]:[&>svg]:stroke-[2.7]",
+    let ctx = expect_context::<SidenavContext>();
-        variants: {
+    let class_signal = move || tw_merge!(
-            variant: {
+        "hidden md:flex flex-col border-r bg-card transition-all duration-300",
-                Default: "hover:bg-sidenav-accent hover:text-sidenav-accent-foreground", // Already in base
+        match ctx.state.get() {
-                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))]",
+            SidenavState::Expanded => "w-[var(--sidenav-width)]",
-            },
+            SidenavState::Collapsed => "w-[var(--sidenav-width-icon)]",
-            size: {
-                Default: "h-8 text-sm",
-                Sm: "h-7 text-xs",
-                Lg: "h-12",
-            }
         },
-        component: {
+        class.clone()
-            element: button,
+    );
-            support_href: true,
+    view! { <aside class=class_signal>{children()}</aside> }
-            support_aria_current: true
-        }
-    }
-}
-
-/* ========================================================== */
-/*                     ✨ FUNCTIONS ✨                        */
-/* ========================================================== */
-
-#[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,
 }
 
 #[component]
-pub fn Sidenav(
+pub fn SidenavInset(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
-    #[prop(into, optional)] class: String,
+    let class = tw_merge!("flex flex-col flex-1 min-w-0", class);
-    #[prop(default = SidenavVariant::default())] variant: SidenavVariant,
+    view! { <main class=class>{children()}</main> }
-    #[prop(default = SidenavState::default())] data_state: SidenavState,
+}
-    #[prop(default = SidenavSide::default())] data_side: SidenavSide,
+
-    #[prop(default = SidenavCollapsible::default())] data_collapsible: SidenavCollapsible,
+#[component] pub fn SidenavHeader(children: Children) -> impl IntoView { view! { <div class="flex flex-col">{children()}</div> } }
+#[component] pub fn SidenavContent(children: Children) -> impl IntoView { view! { <div class="flex-1 overflow-auto">{children()}</div> } }
+#[component] pub fn SidenavFooter(children: Children) -> impl IntoView { view! { <div class="mt-auto">{children()}</div> } }
+#[component] pub fn SidenavGroup(children: Children) -> impl IntoView { view! { <div class="px-2 py-2">{children()}</div> } }
+#[component] pub fn SidenavGroupLabel(children: Children) -> impl IntoView { view! { <div class="px-2 py-1.5 text-xs font-medium text-muted-foreground">{children()}</div> } }
+#[component] pub fn SidenavGroupContent(children: Children) -> impl IntoView { view! { <div class="space-y-1">{children()}</div> } }
+#[component] pub fn SidenavMenu(children: Children) -> impl IntoView { view! { <nav class="grid gap-1">{children()}</nav> } }
+#[component] pub fn SidenavMenuItem(children: Children) -> impl IntoView { view! { <div>{children()}</div> } }
+
+#[derive(Clone, Copy, PartialEq, Eq, Default)]
+pub enum SidenavMenuButtonVariant { #[default] Default, Outline }
+
+#[component]
+pub fn SidenavMenuButton(
     children: Children,
+    #[prop(into, optional)] variant: Signal<SidenavMenuButtonVariant>,
+    #[prop(into, optional)] class: Signal<String>,
 ) -> impl IntoView {
-    view! {
+    let class_signal = move || tw_merge!(
-        {if data_collapsible == SidenavCollapsible::None {
+        "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground",
-            view! {
+        if variant.get() == SidenavMenuButtonVariant::Outline { "border border-input bg-background shadow-xs" } else { "" },
-                <aside
+        class.get()
-                    data-name="Sidenav"
+    );
-                    class=tw_merge!(
+    view! { <button class=class_signal>{children()}</button> }
-                        "flex flex-col h-full bg-sidenav text-sidenav-foreground w-(--sidenav-width)", class.clone()
-                    )
-                >
-                    {children()}
-                </aside>
-            }
-                .into_any()
-        } else {
-            view! {
-                <aside
-                    data-name="Sidenav"
-                    data-sidenav=data_state.to_string()
-                    data-side=data_side.to_string()
-                    class="hidden md:block group peer text-sidenav-foreground data-[state=Collapsed]:hidden"
-                >
-                    // * SidenavGap: This is what handles the sidenav gap on desktop
-                    <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-[side=Right]:rotate-180",
-                            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)]"
-                            },
-                            match variant {
-                                 SidenavVariant::Sidenav => "group-data-[collapsible=Icon]:w-(--sidenav-width-icon) group-data-[side=Left]:border-r group-data-[side=Right]:border-l",
-                                SidenavVariant::Floating | SidenavVariant::Inset =>
-                                    "p-2 group-data-[collapsible=Icon]:w-[calc(var(--sidenav-width-icon)+(--spacing(4))+2px)]",
-                            },
-                        )
-                    >
-                        // * Act as a Sidenav for the onclick trigger to work with nested Sidenavs.
-                        <SidenavInner attr:data-sidenav="Sidenav" attr:data-variant=variant.to_string()>
-                            {children()}
-                            <SidenavToggleRail />
-                        </SidenavInner>
-                    </div>
-                </aside>
-            }
-                .into_any()
-        }}
-    }
 }
 
-/* ========================================================== */
+#[component] pub fn SidenavLink(children: Children, #[prop(into)] href: String) -> impl IntoView {
-/*                     ✨ FUNCTIONS ✨                        */
+    view! { <a href=href class="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium hover:bg-accent">{children()}</a> }
-/* ========================================================== */
-
-#[derive(Clone, Copy, PartialEq, Eq, Default, strum::Display)]
-pub enum SidenavState {
-    #[default]
-    Expanded,
-    Collapsed,
 }
-
-const ONCLICK_TRIGGER: &str = "document.querySelector('[data-name=\"Sidenav\"]').setAttribute('data-state', document.querySelector('[data-name=\"Sidenav\"]').getAttribute('data-state') === 'Collapsed' ? 'Expanded' : 'Collapsed')";
-
-#[component]
-pub fn SidenavTrigger(children: Children) -> impl IntoView {
-    view! {
-        // TODO. Use Button.
-
-        <button
-            onclick=ONCLICK_TRIGGER
-            data-name="SidenavTrigger"
-            class="inline-flex gap-2 justify-center items-center -ml-1 text-sm font-medium whitespace-nowrap rounded-md transition-all outline-none disabled:opacity-50 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 aria-invalid:ring-destructive/20 aria-invalid:border-destructive size-7 dark:aria-invalid:ring-destructive/40 dark:hover:bg-accent/50 hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]"
-        >
-            {children()}
-        </button>
-    }
-}
-
-#[component]
-fn SidenavToggleRail() -> impl IntoView {
-    view! {
-        <button
-            data-name="SidenavToggleRail"
-            aria-label="Toggle Sidenav"
-            tabindex="-1"
-            onclick=ONCLICK_TRIGGER
-            class="hidden absolute inset-y-0 z-20 w-4 transition-all ease-linear -translate-x-1/2 sm:flex group-data-[side=Left]:-right-4 group-data-[side=Right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] in-data-[side=Left]:cursor-w-resize in-data-[side=Right]:cursor-e-resize [[data-side=Left][data-state=Collapsed]_&]:cursor-e-resize [[data-side=Right][data-state=Collapsed]_&]:cursor-w-resize group-data-[collapsible=Offcanvas]:translate-x-0 group-data-[collapsible=Offcanvas]:after:left-full [[data-side=Left][data-collapsible=Offcanvas]_&]:-right-2 [[data-side=Right][data-collapsible=Offcanvas]_&]:-left-0eft-2 hover:after:bg-sidenav-border hover:group-data-[collapsible=Offcanvas]:bg-sidenav"
-        />
-    }
-}

frontend/src/components/ui/switch.rs

@@ -1,42 +0,0 @@
-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

@@ -15,6 +15,7 @@ pub fn Table(children: Children, #[prop(optional, into)] class: String) -> impl
 
 #[component]
 pub fn TableCaption(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let _ = class;
     let class = tw_merge!("mt-4 text-sm text-muted-foreground", class);
     view! { <caption class=class>{children()}</caption> }
 }
@@ -55,6 +56,7 @@ pub fn TableCell(children: Children, #[prop(optional, into)] class: String) -> i
 
 #[component]
 pub fn TableFooter(children: Children, #[prop(optional, into)] class: String) -> impl IntoView {
+    let _ = class;
     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/tabs.rs

@@ -1,108 +0,0 @@
-use leptos::context::Provider;
-use leptos::prelude::*;
-use tw_merge::tw_merge;
-
-#[derive(Clone)]
-pub struct TabsContext {
-    pub active_tab: RwSignal<String>,
-}
-
-#[component]
-pub fn Tabs(
-    #[prop(into)] default_value: String,
-    children: Children,
-    #[prop(optional, into)] class: String,
-) -> impl IntoView {
-    let active_tab = RwSignal::new(default_value);
-    let ctx = TabsContext { active_tab };
-
-    let merged_class = tw_merge!("w-full", &class);
-
-    view! {
-        <Provider value=ctx>
-            <div data-name="Tabs" class=merged_class>
-                {children()}
-            </div>
-        </Provider>
-    }
-}
-
-#[component]
-pub fn TabsList(
-    children: Children,
-    #[prop(optional, into)] class: String,
-) -> impl IntoView {
-    let merged_class = tw_merge!(
-        "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
-        &class
-    );
-
-    view! {
-        <div data-name="TabsList" class=merged_class>
-            {children()}
-        </div>
-    }
-}
-
-#[component]
-pub fn TabsTrigger(
-    #[prop(into)] value: String,
-    children: Children,
-    #[prop(optional, into)] class: String,
-) -> impl IntoView {
-    let ctx = expect_context::<TabsContext>();
-    let v_clone = value.clone();
-    
-    let is_active = Memo::new(move |_| ctx.active_tab.get() == v_clone);
-
-    let merged_class = move || tw_merge!(
-        "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer select-none",
-        if is_active.get() {
-            "bg-background text-foreground shadow-sm"
-        } else {
-            "hover:bg-background/50 hover:text-foreground"
-        },
-        &class
-    );
-
-    view! {
-        <button
-            data-name="TabsTrigger"
-            type="button"
-            class=merged_class
-            data-state=move || if is_active.get() { "active" } else { "inactive" }
-            on:click=move |_| ctx.active_tab.set(value.clone())
-        >
-            {children()}
-        </button>
-    }
-}
-
-#[component]
-pub fn TabsContent(
-    #[prop(into)] value: String,
-    children: Children,
-    #[prop(optional, into)] class: String,
-) -> impl IntoView {
-    let ctx = expect_context::<TabsContext>();
-    let v_clone = value.clone();
-    
-    let is_active = Memo::new(move |_| ctx.active_tab.get() == v_clone);
-
-    let merged_class = move || tw_merge!(
-        "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-        if !is_active.get() { "hidden" } else { "" },
-        &class
-    );
-
-    view! {
-        <div
-            data-name="TabsContent"
-            class=merged_class
-            data-state=move || if is_active.get() { "active" } else { "inactive" }
-            tabindex=move || if is_active.get() { "0" } else { "-1" }
-        >
-            {children()}
-        </div>
-    }
-}

frontend/src/components/ui/toast.rs

@@ -170,10 +170,9 @@ pub fn Toaster(#[prop(default = SonnerPosition::default())] position: SonnerPosi
         <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)]"
+                "pb-[env(safe-area-inset-bottom)] pt-[env(safe-area-inset-top)] px-4 sm:px-0"
             )
         >
             <For

frontend/src/store.rs

@@ -5,9 +5,7 @@ use leptos::task::spawn_local;
 use shared::{AppEvent, GlobalStats, NotificationLevel, Torrent};
 use std::collections::HashMap;
 use struct_patch::traits::Patch;
-use base64::{Engine as _, engine::general_purpose::URL_SAFE_NO_PAD as BASE64_URL};
 use base64::{Engine as _, engine::general_purpose::STANDARD as BASE64};
-use wasm_bindgen::JsCast;
 
 use crate::components::ui::toast::{ToastType, toast};
 
@@ -26,6 +24,8 @@ pub fn show_toast(level: NotificationLevel, message: impl Into<String>) {
     toast(msg, variant);
 }
 
+
+
 pub fn toast_success(message: impl Into<String>) { show_toast(NotificationLevel::Success, message); }
 pub fn toast_error(message: impl Into<String>) { show_toast(NotificationLevel::Error, message); }
 
@@ -54,7 +54,6 @@ pub struct TorrentStore {
     pub global_stats: RwSignal<GlobalStats>,
     pub user: RwSignal<Option<String>>,
     pub selected_torrent: RwSignal<Option<String>>,
-    pub push_enabled: RwSignal<bool>,
 }
 
 pub fn provide_torrent_store() {
@@ -64,20 +63,12 @@ pub fn provide_torrent_store() {
     let global_stats = RwSignal::new(GlobalStats::default());
     let user = RwSignal::new(Option::<String>::None);
     let selected_torrent = RwSignal::new(Option::<String>::None);
-    let push_enabled = RwSignal::new(false);
 
     let show_browser_notification = crate::utils::notification::use_app_notification();
 
-    let store = TorrentStore { torrents, filter, search_query, global_stats, user, selected_torrent, push_enabled };
+    let store = TorrentStore { torrents, filter, search_query, global_stats, user, selected_torrent };
     provide_context(store);
 
-    // Initial check for push status
-    spawn_local(async move {
-        if let Ok(enabled) = is_push_subscribed().await {
-            push_enabled.set(enabled);
-        }
-    });
-
     let global_stats_for_sse = global_stats;
     let torrents_for_sse = torrents;
     let show_browser_notification = show_browser_notification.clone();
@@ -88,15 +79,17 @@ pub fn provide_torrent_store() {
         let mut disconnect_notified = false;
 
         loop {
-            log::info!("[SSE] Attempting to connect to /api/events...");
+
+            log::debug!("SSE: Creating EventSource...");
             let es_result = EventSource::new("/api/events");
             match es_result {
                 Ok(mut es) => {
-                    log::info!("[SSE] EventSource instantiated successfully.");
+                    log::debug!("SSE: EventSource created, subscribing...");
                     if let Ok(mut stream) = es.subscribe("message") {
-                        log::info!("[SSE] Subscribed to 'message' events.");
+                        log::debug!("SSE: Subscribed to message channel");
                         let mut got_first_message = false;
                         while let Some(Ok((_, msg))) = stream.next().await {
+                            log::debug!("SSE: Received message");
                             if !got_first_message {
                                 got_first_message = true;
                                 backoff_ms = 1000;
@@ -108,22 +101,32 @@ pub fn provide_torrent_store() {
                             }
 
                             if let Some(data_str) = msg.data().as_string() {
-                                log::info!("[SSE] Received message: {:?}", data_str.chars().take(50).collect::<String>());
+                                // Decode Base64
                                 match BASE64.decode(&data_str) {
                                     Ok(bytes) => {
+                                        // Deserialize MessagePack
                                         match rmp_serde::from_slice::<AppEvent>(&bytes) {
                                             Ok(event) => {
                                                 match event {
                                                     AppEvent::FullList(list, _) => {
+                                                        log::info!("SSE: Received FullList with {} torrents", list.len());
                                                         torrents_for_sse.update(|map| {
                                                             let new_hashes: std::collections::HashSet<String> = list.iter().map(|t| t.hash.clone()).collect();
                                                             map.retain(|hash, _| new_hashes.contains(hash));
-                                                            for new_torrent in list { map.insert(new_torrent.hash.clone(), new_torrent); }
+                                                            for new_torrent in list {
+                                                                map.insert(new_torrent.hash.clone(), new_torrent);
+                                                            }
                                                         });
+                                                        log::debug!("SSE: torrents map now has {} entries", torrents_for_sse.with(|m| m.len()));
                                                     }
                                                     AppEvent::Update(patch) => {
-                                                        if let Some(hash) = patch.hash.clone() {
+                                                        let hash_opt = patch.hash.clone();
-                                                            torrents_for_sse.update(|map| { if let Some(t) = map.get_mut(&hash) { t.apply(patch); } });
+                                                        if let Some(hash) = hash_opt {
+                                                            torrents_for_sse.update(|map| {
+                                                                if let Some(t) = map.get_mut(&hash) {
+                                                                    t.apply(patch);
+                                                                }
+                                                            });
                                                         }
                                                     }
                                                     AppEvent::Stats(stats) => { global_stats_for_sse.set(stats); }
@@ -134,15 +137,11 @@ pub fn provide_torrent_store() {
                                                         }
                                                     }
                                                 }
-                                            },
-                                            Err(e) => {
-                                                log::error!("[SSE] Failed to deserialize AppEvent: {:?}", e);
                                             }
+                                            Err(e) => log::error!("SSE: Failed to deserialize MessagePack: {}", e),
                                         }
-                                    },
-                                    Err(e) => {
-                                        log::error!("[SSE] Failed to decode base64: {:?}", e);
                                     }
+                                    Err(e) => log::error!("SSE: Failed to decode Base64: {}", e),
                                 }
                             }
                         }
@@ -159,106 +158,13 @@ pub fn provide_torrent_store() {
                     }
                 }
             }
+            log::debug!("SSE: Reconnecting in {}ms...", backoff_ms);
             gloo_timers::future::TimeoutFuture::new(backoff_ms).await;
             backoff_ms = std::cmp::min(backoff_ms * 2, 30000);
         }
     });
 }
 
-pub async fn is_push_subscribed() -> Result<bool, String> {
-    let window = web_sys::window().ok_or("no window")?;
-    let navigator = window.navigator();
-    let sw_container = navigator.service_worker();
-    
-    let registration = wasm_bindgen_futures::JsFuture::from(sw_container.ready().map_err(|e| format!("{:?}", e))?)
-        .await
-        .map_err(|e| format!("{:?}", e))?
-        .dyn_into::<web_sys::ServiceWorkerRegistration>()
-        .map_err(|_| "not a registration")?;
-
-    let push_manager = registration.push_manager().map_err(|e| format!("{:?}", e))?;
-    let subscription = wasm_bindgen_futures::JsFuture::from(push_manager.get_subscription().map_err(|e| format!("{:?}", e))?)
-        .await
-        .map_err(|e| format!("{:?}", e))?;
-
-    Ok(!subscription.is_null())
-}
-
 pub async fn subscribe_to_push_notifications() {
-    let window = web_sys::window().expect("no window");
+    // ...
-    let navigator = window.navigator();
-    let sw_container = navigator.service_worker();
-
-    let registration = match wasm_bindgen_futures::JsFuture::from(sw_container.ready().expect("sw not ready")).await {
-        Ok(reg) => reg.dyn_into::<web_sys::ServiceWorkerRegistration>().expect("not a reg"),
-        Err(e) => { log::error!("SW Ready Error: {:?}", e); return; }
-    };
-
-    // 1. Get Public Key from Backend
-    let public_key_res: Result<String, _> = shared::server_fns::push::get_public_key().await;
-    let public_key = match public_key_res {
-        Ok(key) => key,
-        Err(e) => { log::error!("Failed to get public key: {:?}", e); return; }
-    };
-
-    // 2. Convert base64 key to Uint8Array
-    let decoded_key = BASE64_URL.decode(public_key.trim()).expect("invalid public key");
-    let key_array = js_sys::Uint8Array::from(&decoded_key[..]);
-
-    // 3. Prepare Options
-    let mut options = web_sys::PushSubscriptionOptionsInit::new();
-    options.set_user_visible_only(true);
-    options.set_application_server_key(&key_array.into());
-
-    // 4. Subscribe
-    let push_manager = registration.push_manager().expect("no push manager");
-    match wasm_bindgen_futures::JsFuture::from(push_manager.subscribe_with_options(&options).expect("subscribe failed")).await {
-        Ok(subscription) => {
-            let sub_js = subscription.clone();
-            
-            // Use JS to extract JSON string representation
-            let json_str = js_sys::JSON::stringify(&sub_js).expect("stringify failed").as_string().expect("not a string");
-            let sub_obj: serde_json::Value = serde_json::from_str(&json_str).expect("serde from str failed");
-            
-            let endpoint = sub_obj["endpoint"].as_str().expect("no endpoint").to_string();
-            let p256dh = sub_obj["keys"]["p256dh"].as_str().expect("no p256dh").to_string();
-            let auth = sub_obj["keys"]["auth"].as_str().expect("no auth").to_string();
-
-            // 5. Save to Backend
-            match shared::server_fns::push::subscribe_push(endpoint, p256dh, auth).await {
-                Ok(_) => {
-                    log::info!("Push subscription saved successfully");
-                    toast_success("Bildirimler aktif edildi");
-                }
-                Err(e) => log::error!("Failed to save subscription: {:?}", e),
-            }
-        }
-        Err(e) => log::error!("Subscription Error: {:?}", e),
-    }
-}
-
-pub async fn unsubscribe_from_push_notifications() {
-    let window = web_sys::window().expect("no window");
-    let sw_container = window.navigator().service_worker();
-    
-    let registration = wasm_bindgen_futures::JsFuture::from(sw_container.ready().expect("sw not ready")).await
-        .unwrap().dyn_into::<web_sys::ServiceWorkerRegistration>().unwrap();
-
-    let push_manager = registration.push_manager().unwrap();
-    if let Ok(sub_future) = push_manager.get_subscription() {
-        if let Ok(subscription) = wasm_bindgen_futures::JsFuture::from(sub_future).await {
-            if !subscription.is_null() {
-                let sub = subscription.dyn_into::<web_sys::PushSubscription>().unwrap();
-                let endpoint = sub.endpoint();
-                
-                // 1. Unsubscribe in Browser
-                let _ = wasm_bindgen_futures::JsFuture::from(sub.unsubscribe().unwrap()).await;
-                
-                // 2. Remove from Backend
-                let _ = shared::server_fns::push::unsubscribe_push(endpoint).await;
-                log::info!("Push subscription removed");
-                show_toast(NotificationLevel::Info, "Bildirimler kapatıldı");
-            }
-        }
-    }
 }

frontend/sw.js

@@ -1,4 +1,4 @@
-const CACHE_NAME = "vibetorrent-v3";
+const CACHE_NAME = "vibetorrent-v2";
 const ASSETS_TO_CACHE = [
   "/",
   "/index.html",
@@ -51,11 +51,6 @@ self.addEventListener("activate", (event) => {
 self.addEventListener("fetch", (event) => {
   const url = new URL(event.request.url);
 
-  // Skip unsupported schemes (like chrome-extension://)
-  if (!url.protocol.startsWith("http")) {
-    return;
-  }
-
   // Network-first strategy for API calls
   if (url.pathname.startsWith("/api/")) {
     event.respondWith(
@@ -80,12 +75,10 @@ self.addEventListener("fetch", (event) => {
       fetch(event.request)
         .then((response) => {
           // Cache the latest version of the HTML
-          if (response && response.status === 200) {
+          const responseToCache = response.clone();
-            const responseToCache = response.clone();
+          caches.open(CACHE_NAME).then((cache) => {
-            caches.open(CACHE_NAME).then((cache) => {
+            cache.put(event.request, responseToCache);
-              cache.put(event.request, responseToCache);
+          });
-            });
-          }
           return response;
         })
         .catch(() => {

package-lock.json

@@ -1,372 +0,0 @@
-{
-	"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

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

shared/src/server_fns/push.rs

@@ -20,13 +20,3 @@ pub async fn subscribe_push(
         .await
         .map_err(|e| ServerFnError::new(format!("Failed to save subscription: {}", e)))
 }
-
-#[server(UnsubscribePush, "/api/server_fns")]
-pub async fn unsubscribe_push(endpoint: String) -> Result<(), ServerFnError> {
-    let db_ctx = expect_context::<crate::DbContext>();
-    db_ctx
-        .db
-        .remove_push_subscription(&endpoint)
-        .await
-        .map_err(|e| ServerFnError::new(format!("Failed to remove subscription: {}", e)))
-}

ui_config.toml

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