refactor(ui): wrap torrent details content with official RustUI Shimmer

backend/src/main.rs

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

frontend/index.html

@@ -20,7 +20,7 @@
     <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
 
     <!-- Trunk Assets -->
-    <link data-trunk rel="rust" href="Cargo.toml" data-wasm-opt="0" data-preload="false" />
+    <script data-trunk rel="rust" src="Cargo.toml" data-wasm-opt="0" data-preload="false"></script>
     <link data-trunk rel="css" href="public/tailwind.css" />
     <link data-trunk rel="copy-file" href="manifest.json" />
     <link data-trunk rel="copy-file" href="icon-192.png" />

frontend/input.css

@@ -1,6 +1,7 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 
+
 :root {
   --radius: 0.625rem;
   --background: oklch(1 0 0);
@@ -45,6 +46,14 @@
 }
 
 @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);
@@ -74,16 +83,17 @@
   * {
     @apply border-border outline-ring/50;
   }
+
   body {
     @apply bg-background text-foreground;
   }
 
   button:not(:disabled),
   [role="button"]:not(:disabled) {
-    @apply cursor-pointer;
+    cursor: pointer;
   }
 
   dialog {
-    @apply m-auto;
+    margin: auto;
   }
 }

frontend/src/components/auth/login.rs

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

frontend/src/components/auth/setup.rs

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

frontend/src/components/context_menu.rs

@@ -24,10 +24,16 @@ pub fn TorrentContextMenu(
                 {children()}
             </ContextMenuTrigger>
             <ContextMenuContent class="w-56 p-1.5">
-                <ContextMenuItem on:click={let h = hash_c1; move |_| on_action_stored.get_value().run(("start".to_string(), h.clone()))}>
+                <ContextMenuItem on:click={let h = hash_c1; move |_| {
+                    on_action_stored.get_value().run(("start".to_string(), h.clone()));
+                    crate::components::ui::context_menu::close_context_menu();
+                }}>
                     "Başlat"
                 </ContextMenuItem>
-                <ContextMenuItem on:click={let h = hash_c2; move |_| on_action_stored.get_value().run(("stop".to_string(), h.clone()))}>
+                <ContextMenuItem on:click={let h = hash_c2; move |_| {
+                    on_action_stored.get_value().run(("stop".to_string(), h.clone()));
+                    crate::components::ui::context_menu::close_context_menu();
+                }}>
                     "Durdur"
                 </ContextMenuItem>
                 

frontend/src/components/demos/demo_shimmer.rs

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

frontend/src/components/torrent/details.rs

@@ -0,0 +1,178 @@
+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().unwrap().name}
+                            </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 || format!("{:?}", selected_torrent.get().unwrap().status)}
+                                <span class="bg-primary/20 text-primary px-1.5 py-0.5 rounded text-[10px] lowercase">{move || format!("{:.1}%", selected_torrent.get().unwrap().percent_complete)}</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,2 +1,3 @@
 pub mod table;
 pub mod add_torrent;
+pub mod details;

frontend/src/components/torrent/table.rs

@@ -553,6 +553,8 @@ 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/auto_form.rs

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

frontend/src/components/ui/mod.rs

@@ -1,6 +1,5 @@
 pub mod accordion;
 pub mod alert_dialog;
-pub mod auto_form;
 pub mod badge;
 pub mod button;
 pub mod button_action;
@@ -18,8 +17,10 @@ pub mod separator;
 pub mod sheet;
 pub mod sidenav;
 pub mod skeleton;
+pub mod shimmer;
 pub mod svg_icon;
 pub mod switch;
 pub mod table;
+pub mod tabs;
 pub mod theme_toggle;
 pub mod toast;

frontend/src/components/ui/progress.rs

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

frontend/src/components/ui/shimmer.rs

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

frontend/src/components/ui/tabs.rs

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

package.json

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