chore: silence unused Icon variant warning in SidenavCollapsible

frontend/input.css

@@ -45,15 +45,8 @@
   --ring: oklch(0.556 0 0);
 }
 
+
 @theme inline {
-  --animate-shimmer: shimmer 2s infinite;
-
-  @keyframes shimmer {
-    100% {
-      transform: translateX(100%);
-    }
-  }
-
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
@@ -83,7 +76,6 @@
   * {
     @apply border-border outline-ring/50;
   }
-
   body {
     @apply bg-background text-foreground;
   }
@@ -96,4 +88,4 @@
   dialog {
     margin: auto;
   }
-}
+}

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,5 @@
-use std::collections::hash_map::DefaultHasher;
+use leptos::prelude::*;
-use std::hash::{Hash, Hasher};
-use std::sync::atomic::{AtomicUsize, Ordering};
 
-const PREFIX: &str = "rust_ui"; // Must NOT contain "/" or "-"
+pub fn use_random_id_for(prefix: &str) -> String {
-
+    format!("{}_{}", prefix, js_sys::Math::random().to_string().replace(".", ""))
-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/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/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

@@ -553,8 +553,6 @@ pub fn TorrentTable() -> impl IntoView {
                 </div>
                 <div class="opacity-50">"VibeTorrent v3"</div>
             </div>
-            
-            <crate::components::torrent::details::TorrentDetailsSheet />
         </div>
     }.into_any()
 }

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

@@ -17,10 +17,8 @@ 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/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

@@ -114,6 +114,7 @@ pub enum SidenavCollapsible {
     #[default]
     Offcanvas,
     None,
+    #[allow(dead_code)]
     Icon,
 }
 

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