feat: shadcn -> rust-ui.com migration + TorrentDetail silme

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

frontend/Cargo.toml

@@ -35,22 +35,7 @@ thiserror = "2.0"
 rmp-serde = "1.3"
 struct-patch = "0.5"
 
-# ShadCN UI Components (Individual)
-leptos-shadcn-button = "0.8"
-leptos-shadcn-input = "0.8"
-leptos-shadcn-card = "0.8"
-leptos-shadcn-badge = "0.8"
-leptos-shadcn-context-menu = "0.8"
-leptos-shadcn-separator = "0.8"
-leptos-shadcn-progress = "0.8"
-leptos-shadcn-avatar = "0.8"
-leptos-shadcn-sheet = "0.8"
-leptos-shadcn-tabs = "0.8"
-leptos-shadcn-scroll-area = "0.8"
-leptos-shadcn-dialog = "0.8"
-leptos-shadcn-label = "0.8"
-leptos-shadcn-alert = "0.8"
-
-leptos-shadcn-dropdown-menu = "0.8"
-leptos-shadcn-tooltip = "0.8"
-leptos-shadcn-skeleton = "0.8"
+# Rust/UI Components
+leptos_ui = "0.3"
+tw_merge = "0.1"
+strum = { version = "0.26", features = ["derive"] }

frontend/src/app.rs

@@ -1,13 +1,11 @@
 use crate::components::layout::protected::Protected;
 use crate::components::torrent::table::TorrentTable;
-use crate::components::torrent::detail::TorrentDetail;
 use crate::components::auth::login::Login;
 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 leptos_shadcn_skeleton::Skeleton;
 use crate::components::toast::Toaster;
 
 #[component]
@@ -131,36 +129,33 @@ fn InnerApp() -> impl IntoView {
                                 <div class="flex h-screen bg-background">
                                     // Sidebar skeleton
                                     <div class="w-56 border-r border-border p-4 space-y-4">
-                                        <Skeleton class="h-8 w-3/4" />
+                                        <div class="h-8 w-3/4 animate-pulse rounded-md bg-muted" />
                                         <div class="space-y-2">
-                                            <Skeleton class="h-6 w-full" />
-                                            <Skeleton class="h-6 w-full" />
-                                            <Skeleton class="h-6 w-4/5" />
-                                            <Skeleton class="h-6 w-full" />
-                                            <Skeleton class="h-6 w-3/5" />
-                                            <Skeleton class="h-6 w-full" />
+                                            <div class="h-6 w-full animate-pulse rounded-md bg-muted" />
+                                            <div class="h-6 w-full animate-pulse rounded-md bg-muted" />
+                                            <div class="h-6 w-4/5 animate-pulse rounded-md bg-muted" />
+                                            <div class="h-6 w-full animate-pulse rounded-md bg-muted" />
+                                            <div class="h-6 w-3/5 animate-pulse rounded-md bg-muted" />
+                                            <div class="h-6 w-full animate-pulse rounded-md bg-muted" />
                                         </div>
                                     </div>
                                     // Main content skeleton
                                     <div class="flex-1 flex flex-col">
-                                        // Header skeleton
                                         <div class="border-b border-border p-4 flex items-center gap-4">
-                                            <Skeleton class="h-8 w-48" />
-                                            <Skeleton class="h-8 w-64" />
-                                            <div class="ml-auto"><Skeleton class="h-8 w-24" /></div>
+                                            <div class="h-8 w-48 animate-pulse rounded-md bg-muted" />
+                                            <div class="h-8 w-64 animate-pulse rounded-md bg-muted" />
+                                            <div class="ml-auto"><div class="h-8 w-24 animate-pulse rounded-md bg-muted" /></div>
                                         </div>
-                                        // Table skeleton rows
                                         <div class="flex-1 p-4 space-y-3">
-                                            <Skeleton class="h-10 w-full" />
-                                            <Skeleton class="h-10 w-full" />
-                                            <Skeleton class="h-10 w-full" />
-                                            <Skeleton class="h-10 w-full" />
-                                            <Skeleton class="h-10 w-full" />
-                                            <Skeleton class="h-10 w-3/4" />
+                                            <div class="h-10 w-full animate-pulse rounded-md bg-muted" />
+                                            <div class="h-10 w-full animate-pulse rounded-md bg-muted" />
+                                            <div class="h-10 w-full animate-pulse rounded-md bg-muted" />
+                                            <div class="h-10 w-full animate-pulse rounded-md bg-muted" />
+                                            <div class="h-10 w-full animate-pulse rounded-md bg-muted" />
+                                            <div class="h-10 w-3/4 animate-pulse rounded-md bg-muted" />
                                         </div>
-                                        // Status bar skeleton
                                         <div class="border-t border-border p-3">
-                                            <Skeleton class="h-5 w-96" />
+                                            <div class="h-5 w-96 animate-pulse rounded-md bg-muted" />
                                         </div>
                                     </div>
                                 </div>
@@ -171,7 +166,6 @@ fn InnerApp() -> impl IntoView {
                                             <div class="flex-1 overflow-hidden">
                                                 <TorrentTable />
                                             </div>
-                                            <TorrentDetail />
                                         </div>
                                     </Protected>
                                 </Show>

frontend/src/components/auth/login.rs

@@ -1,15 +1,12 @@
 use leptos::prelude::*;
 use leptos::task::spawn_local;
-use leptos_shadcn_card::{Card, CardHeader, CardContent};
-use leptos_shadcn_input::Input;
-use leptos_shadcn_button::Button;
-use leptos_shadcn_label::Label;
-use leptos_shadcn_alert::{Alert, AlertDescription, AlertVariant};
+use crate::components::ui::card::{Card, CardHeader, CardContent};
+use crate::components::ui::input::{Input, InputType};
 
 #[component]
 pub fn Login() -> impl IntoView {
-    let username = signal(String::new());
-    let password = signal(String::new());
+    let username = RwSignal::new(String::new());
+    let password = RwSignal::new(String::new());
     let error = signal(Option::<String>::None);
     let loading = signal(false);
 
@@ -18,8 +15,8 @@ pub fn Login() -> impl IntoView {
         loading.1.set(true);
         error.1.set(None);
 
-        let user = username.0.get();
-        let pass = password.0.get();
+        let user = username.get();
+        let pass = password.get();
 
         spawn_local(async move {
             match shared::server_fns::auth::login(user, pass).await {
@@ -52,44 +49,40 @@ pub fn Login() -> impl IntoView {
                 <CardContent class="pt-4">
                     <form on:submit=handle_login class="space-y-4">
                         <div class="space-y-2">
-                            <Label>"Kullanıcı Adı"</Label>
+                            <label class="text-sm font-medium leading-none">"Kullanıcı Adı"</label>
                             <Input
-                                input_type="text"
+                                r#type=InputType::Text
                                 placeholder="Kullanıcı adınız"
-                                value=MaybeProp::derive(move || Some(username.0.get()))
-                                on_change=Callback::new(move |val: String| username.1.set(val))
-                                disabled=Signal::derive(move || loading.0.get())
+                                bind_value=username
+                                disabled=loading.0.get()
                             />
                         </div>
                         <div class="space-y-2">
-                            <Label>"Şifre"</Label>
+                            <label class="text-sm font-medium leading-none">"Şifre"</label>
                             <Input
-                                input_type="password"
+                                r#type=InputType::Password
                                 placeholder="******"
-                                value=MaybeProp::derive(move || Some(password.0.get()))
-                                on_change=Callback::new(move |val: String| password.1.set(val))
-                                disabled=Signal::derive(move || loading.0.get())
+                                bind_value=password
+                                disabled=loading.0.get()
                             />
                         </div>
 
                         <Show when=move || error.0.get().is_some()>
-                            <Alert variant=AlertVariant::Destructive>
-                                <AlertDescription>
-                                    {move || error.0.get().unwrap_or_default()}
-                                </AlertDescription>
-                            </Alert>
+                            <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"
-                                disabled=Signal::derive(move || loading.0.get())
+                            <button
+                                class="inline-flex items-center justify-center w-full h-9 px-4 py-2 rounded-md text-sm font-medium bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 transition-all disabled:pointer-events-none disabled:opacity-50"
+                                disabled=move || loading.0.get()
                             >
                                 <Show when=move || loading.0.get() fallback=|| "Giriş Yap">
                                     <span class="animate-spin mr-2 h-4 w-4 border-2 border-current border-t-transparent rounded-full"></span>
                                     "Giriş Yapılıyor..."
                                 </Show>
-                            </Button>
+                            </button>
                         </div>
                     </form>
                 </CardContent>

frontend/src/components/auth/setup.rs

@@ -1,24 +1,21 @@
 use leptos::prelude::*;
 use leptos::task::spawn_local;
-use leptos_shadcn_card::{Card, CardHeader, CardContent};
-use leptos_shadcn_input::Input;
-use leptos_shadcn_button::Button;
-use leptos_shadcn_label::Label;
-use leptos_shadcn_alert::{Alert, AlertDescription, AlertVariant};
+use crate::components::ui::card::{Card, CardHeader, CardContent};
+use crate::components::ui::input::{Input, InputType};
 
 #[component]
 pub fn Setup() -> impl IntoView {
-    let username = signal(String::new());
-    let password = signal(String::new());
-    let confirm_password = signal(String::new());
+    let username = RwSignal::new(String::new());
+    let password = RwSignal::new(String::new());
+    let confirm_password = RwSignal::new(String::new());
     let error = signal(Option::<String>::None);
     let loading = signal(false);
 
     let handle_setup = move |ev: web_sys::SubmitEvent| {
         ev.prevent_default();
         
-        let pass = password.0.get();
-        let confirm = confirm_password.0.get();
+        let pass = password.get();
+        let confirm = confirm_password.get();
         
         if pass != confirm {
             error.1.set(Some("Şifreler eşleşmiyor".to_string()));
@@ -33,7 +30,7 @@ pub fn Setup() -> impl IntoView {
         loading.1.set(true);
         error.1.set(None);
 
-        let user = username.0.get();
+        let user = username.get();
 
         spawn_local(async move {
             match shared::server_fns::auth::setup(user, pass).await {
@@ -67,54 +64,49 @@ pub fn Setup() -> impl IntoView {
                 <CardContent class="pt-4">
                     <form on:submit=handle_setup class="space-y-4">
                         <div class="space-y-2">
-                            <Label>"Yönetici Kullanıcı Adı"</Label>
+                            <label class="text-sm font-medium leading-none">"Yönetici Kullanıcı Adı"</label>
                             <Input
-                                input_type="text"
+                                r#type=InputType::Text
                                 placeholder="admin"
-                                value=MaybeProp::derive(move || Some(username.0.get()))
-                                on_change=Callback::new(move |val: String| username.1.set(val))
-                                disabled=Signal::derive(move || loading.0.get())
+                                bind_value=username
+                                disabled=loading.0.get()
                             />
                         </div>
                         <div class="space-y-2">
-                            <Label>"Şifre"</Label>
+                            <label class="text-sm font-medium leading-none">"Şifre"</label>
                             <Input
-                                input_type="password"
+                                r#type=InputType::Password
                                 placeholder="******"
-                                value=MaybeProp::derive(move || Some(password.0.get()))
-                                on_change=Callback::new(move |val: String| password.1.set(val))
-                                disabled=Signal::derive(move || loading.0.get())
+                                bind_value=password
+                                disabled=loading.0.get()
                             />
                         </div>
                         <div class="space-y-2">
-                            <Label>"Şifre Onay"</Label>
+                            <label class="text-sm font-medium leading-none">"Şifre Onay"</label>
                             <Input
-                                input_type="password"
+                                r#type=InputType::Password
                                 placeholder="******"
-                                value=MaybeProp::derive(move || Some(confirm_password.0.get()))
-                                on_change=Callback::new(move |val: String| confirm_password.1.set(val))
-                                disabled=Signal::derive(move || loading.0.get())
+                                bind_value=confirm_password
+                                disabled=loading.0.get()
                             />
                         </div>
 
                         <Show when=move || error.0.get().is_some() fallback=|| ()>
-                            <Alert variant=AlertVariant::Destructive>
-                                <AlertDescription>
-                                    <span>{move || error.0.get().unwrap_or_default()}</span>
-                                </AlertDescription>
-                            </Alert>
+                            <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"
-                                disabled=Signal::derive(move || loading.0.get())
+                            <button
+                                class="inline-flex items-center justify-center w-full h-9 px-4 py-2 rounded-md text-sm font-medium bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 transition-all disabled:pointer-events-none disabled:opacity-50"
+                                disabled=move || loading.0.get()
                             >
                                 <Show when=move || loading.0.get() fallback=|| "Kurulumu Tamamla">
                                     <span class="animate-spin mr-2 h-4 w-4 border-2 border-current border-t-transparent rounded-full"></span>
                                     "Kuruluyor..."
                                 </Show>
-                            </Button>
+                            </button>
                         </div>
                     </form>
                 </CardContent>

frontend/src/components/layout/sidebar.rs

@@ -1,8 +1,5 @@
 use leptos::prelude::*;
 use leptos::task::spawn_local;
-use leptos_shadcn_button::{Button, ButtonVariant, ButtonSize};
-use leptos_shadcn_avatar::{Avatar, AvatarFallback};
-use leptos_shadcn_separator::Separator;
 
 use leptos_use::storage::use_local_storage;
 use ::codee::string::FromToStringCodec;
@@ -84,7 +81,6 @@ pub fn Sidebar() -> impl IntoView {
         let theme = current_theme.get().to_lowercase();
         if let Some(doc) = document().document_element() {
             let _ = doc.set_attribute("data-theme", &theme);
-            // Also set class for Shadcn dark mode support
             if theme == "dark" || theme == "dracula" || theme == "dim" || theme == "abyss" || theme == "sunset" || theme == "cyberpunk" || theme == "nord" || theme == "business" || theme == "night" || theme == "black" || theme == "luxury" || theme == "coffee" || theme == "forest" || theme == "halloween" || theme == "synthwave" {
                 let _ = doc.class_list().add_1("dark");
             } else {
@@ -93,8 +89,6 @@ pub fn Sidebar() -> impl IntoView {
         }
     });
 
-
-
     let toggle_theme = move |_| {
         let new_theme = if current_theme.get() == "dark" { "light" } else { "dark" };
         set_current_theme.set(new_theme.to_string());
@@ -110,110 +104,70 @@ pub fn Sidebar() -> impl IntoView {
                 <div class="space-y-1">
                     <h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold text-muted-foreground">"Filters"</h4>
                     
-                    <Button 
-                        variant=MaybeProp::derive(move || Some(if is_active(crate::store::FilterStatus::All) { ButtonVariant::Secondary } else { ButtonVariant::Ghost }))
-                        size=ButtonSize::Sm
-                        class="w-full justify-start gap-2"
-                        on_click=Callback::new(move |()| set_filter(crate::store::FilterStatus::All))
-                    >
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
-                        </svg>
-                        "All"
-                        <span class="ml-auto text-xs font-mono opacity-70">{total_count}</span>
-                    </Button>
-
-                    <Button 
-                        variant=MaybeProp::derive(move || Some(if is_active(crate::store::FilterStatus::Downloading) { ButtonVariant::Secondary } else { ButtonVariant::Ghost }))
-                        size=ButtonSize::Sm
-                        class="w-full justify-start gap-2"
-                        on_click=Callback::new(move |()| set_filter(crate::store::FilterStatus::Downloading))
-                    >
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
-                        </svg>
-                        "Downloading"
-                        <span class="ml-auto text-xs font-mono opacity-70">{downloading_count}</span>
-                    </Button>
-
-                    <Button 
-                        variant=MaybeProp::derive(move || Some(if is_active(crate::store::FilterStatus::Seeding) { ButtonVariant::Secondary } else { ButtonVariant::Ghost }))
-                        size=ButtonSize::Sm
-                        class="w-full justify-start gap-2"
-                        on_click=Callback::new(move |()| set_filter(crate::store::FilterStatus::Seeding))
-                    >
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
-                        </svg>
-                        "Seeding"
-                        <span class="ml-auto text-xs font-mono opacity-70">{seeding_count}</span>
-                    </Button>
-
-                    <Button 
-                        variant=MaybeProp::derive(move || Some(if is_active(crate::store::FilterStatus::Completed) { ButtonVariant::Secondary } else { ButtonVariant::Ghost }))
-                        size=ButtonSize::Sm
-                        class="w-full justify-start gap-2"
-                        on_click=Callback::new(move |()| set_filter(crate::store::FilterStatus::Completed))
-                    >
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                        </svg>
-                        "Completed"
-                        <span class="ml-auto text-xs font-mono opacity-70">{completed_count}</span>
-                    </Button>
-
-                    <Button 
-                        variant=MaybeProp::derive(move || Some(if is_active(crate::store::FilterStatus::Paused) { ButtonVariant::Secondary } else { ButtonVariant::Ghost }))
-                        size=ButtonSize::Sm
-                        class="w-full justify-start gap-2"
-                        on_click=Callback::new(move |()| set_filter(crate::store::FilterStatus::Paused))
-                    >
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25v13.5m-7.5-13.5v13.5" />
-                        </svg>
-                        "Paused"
-                        <span class="ml-auto text-xs font-mono opacity-70">{paused_count}</span>
-                    </Button>
-
-                    <Button 
-                        variant=MaybeProp::derive(move || Some(if is_active(crate::store::FilterStatus::Inactive) { ButtonVariant::Secondary } else { ButtonVariant::Ghost }))
-                        size=ButtonSize::Sm
-                        class="w-full justify-start gap-2"
-                        on_click=Callback::new(move |()| set_filter(crate::store::FilterStatus::Inactive))
-                    >
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
-                        </svg>
-                        "Inactive"
-                         <span class="ml-auto text-xs font-mono opacity-70">{inactive_count}</span>
-                    </Button>
+                    <SidebarButton
+                        active=Signal::derive(move || is_active(crate::store::FilterStatus::All))
+                        on_click=move |_| set_filter(crate::store::FilterStatus::All)
+                        icon="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+                        label="All"
+                        count=Signal::derive(total_count)
+                    />
+                    <SidebarButton
+                        active=Signal::derive(move || is_active(crate::store::FilterStatus::Downloading))
+                        on_click=move |_| set_filter(crate::store::FilterStatus::Downloading)
+                        icon="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"
+                        label="Downloading"
+                        count=Signal::derive(downloading_count)
+                    />
+                    <SidebarButton
+                        active=Signal::derive(move || is_active(crate::store::FilterStatus::Seeding))
+                        on_click=move |_| set_filter(crate::store::FilterStatus::Seeding)
+                        icon="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
+                        label="Seeding"
+                        count=Signal::derive(seeding_count)
+                    />
+                    <SidebarButton
+                        active=Signal::derive(move || is_active(crate::store::FilterStatus::Completed))
+                        on_click=move |_| set_filter(crate::store::FilterStatus::Completed)
+                        icon="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                        label="Completed"
+                        count=Signal::derive(completed_count)
+                    />
+                    <SidebarButton
+                        active=Signal::derive(move || is_active(crate::store::FilterStatus::Paused))
+                        on_click=move |_| set_filter(crate::store::FilterStatus::Paused)
+                        icon="M15.75 5.25v13.5m-7.5-13.5v13.5"
+                        label="Paused"
+                        count=Signal::derive(paused_count)
+                    />
+                    <SidebarButton
+                        active=Signal::derive(move || is_active(crate::store::FilterStatus::Inactive))
+                        on_click=move |_| set_filter(crate::store::FilterStatus::Inactive)
+                        icon="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
+                        label="Inactive"
+                        count=Signal::derive(inactive_count)
+                    />
                 </div>
             </div>
 
-            <Separator />
+            // Separator
+            <div class="border-t border-border" />
 
             <div class="p-4 bg-card" style="padding-bottom: calc(1rem + env(safe-area-inset-bottom));">
                 <div class="flex items-center gap-3">
-                    <Avatar class="h-8 w-8">
-                        <AvatarFallback class="bg-primary text-primary-foreground text-xs font-medium">
-                            {first_letter}
-                        </AvatarFallback>
-                    </Avatar>
+                    // Avatar
+                    <div class="h-8 w-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-xs font-medium shrink-0">
+                        {first_letter}
+                    </div>
                     <div class="flex-1 overflow-hidden">
                         <div class="font-medium text-sm truncate text-foreground">{username}</div>
                         <div class="text-[10px] text-muted-foreground truncate">"Online"</div>
                     </div>
 
-                    // --- THEME BUTTON ---
-                    <Button
-                        variant=ButtonVariant::Ghost
-                        size=ButtonSize::Icon
-                        class="h-8 w-8 text-muted-foreground hover:text-foreground"
-                        on_click=Callback::new(toggle_theme)
+                    // Theme toggle button
+                    <button
+                        class="inline-flex items-center justify-center size-8 rounded-md hover:bg-accent hover:text-accent-foreground text-muted-foreground hover:text-foreground transition-colors"
+                        on:click=toggle_theme
                     >
-                        // Sun icon for dark mode (to switch to light), Moon for light (to switch to dark)
-                        // Actually show current state or action? Usually action.
-                        // If dark, show Sun. If light, show Moon.
                         <Show when=move || current_theme.get() == "dark" fallback=|| view! {
                              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                                 <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
@@ -223,26 +177,51 @@ pub fn Sidebar() -> impl IntoView {
                                 <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
                             </svg>
                         </Show>
-                    </Button>
-                    <Button
-                        variant=ButtonVariant::Ghost
-                        size=ButtonSize::Icon
-                        class="text-destructive h-8 w-8"
-                        on_click=Callback::new(move |()| {
+                    </button>
+                    // Logout button
+                    <button
+                        class="inline-flex items-center justify-center size-8 rounded-md hover:bg-accent text-destructive transition-colors"
+                        on:click=move |_| {
                             spawn_local(async move {
                                 if shared::server_fns::auth::logout().await.is_ok() {
                                     let window = web_sys::window().expect("window should exist");
                                     let _ = window.location().set_href("/login");
                                 }
                             });
-                        })
+                        }
                     >
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
                         </svg>
-                    </Button>
+                    </button>
                 </div>
             </div>
         </div>
     }
 }
+
+#[component]
+fn SidebarButton(
+    active: Signal<bool>,
+    on_click: impl Fn(web_sys::MouseEvent) + 'static,
+    #[prop(into)] icon: String,
+    #[prop(into)] label: &'static str,
+    count: Signal<usize>,
+) -> impl IntoView {
+    view! {
+        <button
+            class=move || if active.get() {
+                "inline-flex items-center justify-start gap-2 w-full h-8 rounded-md px-3 text-sm font-medium bg-secondary text-secondary-foreground transition-colors"
+            } else {
+                "inline-flex items-center justify-start gap-2 w-full h-8 rounded-md px-3 text-sm font-medium hover:bg-accent hover:text-accent-foreground transition-colors"
+            }
+            on:click=on_click
+        >
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
+                <path stroke-linecap="round" stroke-linejoin="round" d=icon.clone() />
+            </svg>
+            {label}
+            <span class="ml-auto text-xs font-mono opacity-70">{count}</span>
+        </button>
+    }
+}

frontend/src/components/layout/toolbar.rs

@@ -1,6 +1,4 @@
 use leptos::prelude::*;
-use leptos_shadcn_input::Input;
-use leptos_shadcn_button::{Button, ButtonVariant, ButtonSize};
 use crate::components::torrent::add_torrent::AddTorrentDialog;
 
 #[component]
@@ -9,30 +7,36 @@ pub fn Toolbar() -> impl IntoView {
     let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
     let is_mobile_menu_open = use_context::<RwSignal<bool>>().expect("mobile menu state not provided");
 
+    let search_value = RwSignal::new(String::new());
+    
+    // Sync search_value to store
+    Effect::new(move |_| {
+        let val = search_value.get();
+        store.search_query.set(val);
+    });
+
     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 + Add Torrent
             <div class="flex items-center gap-3">
                 // Mobile Menu Trigger
-                <Button
-                    variant=ButtonVariant::Ghost
-                    size=ButtonSize::Icon
-                    class="lg:hidden"
-                    on_click=Callback::new(move |()| is_mobile_menu_open.update(|v| *v = !*v))
+                <button
+                    class="inline-flex items-center justify-center size-9 rounded-md hover:bg-accent hover:text-accent-foreground lg:hidden"
+                    on:click=move |_| is_mobile_menu_open.update(|v| *v = !*v)
                 >
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-5 h-5 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
-                </Button>
+                </button>
                 
-                <Button
-                    class="gap-2 shadow"
-                    on_click=Callback::new(move |()| show_add_modal.1.set(true))
+                <button
+                    class="inline-flex items-center justify-center gap-2 h-9 px-4 py-2 rounded-md text-sm font-medium bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 transition-all active:scale-[0.98]"
+                    on:click=move |_| show_add_modal.1.set(true)
                 >
                     <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">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                     </svg>
                     <span class="hidden sm:inline">"Add Torrent"</span>
                     <span class="sm:hidden">"Add"</span>
-                </Button>
+                </button>
             </div>
 
             // Sağ kısım: Search kutusu
@@ -42,12 +46,11 @@ pub fn Toolbar() -> impl IntoView {
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none">
                             <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
                         </svg>
-                        <Input
-                            input_type="search"
+                        <input
+                            type="search"
                             placeholder="Search..."
-                            value=MaybeProp::derive(move || Some(store.search_query.get()))
-                            on_change=Callback::new(move |val: String| store.search_query.set(val))
-                            class="pl-8 h-9"
+                            class="file:text-foreground placeholder:text-muted-foreground border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-2 md:text-sm pl-8"
+                            bind:value=search_value
                         />
                     </div>
                 </div>

frontend/src/components/mod.rs

@@ -3,3 +3,4 @@ pub mod layout;
 pub mod torrent;
 pub mod auth;
 pub mod toast;
+pub mod ui;

frontend/src/components/torrent/add_torrent.rs

@@ -1,8 +1,6 @@
 use leptos::prelude::*;
 use leptos::task::spawn_local;
-use leptos_shadcn_input::Input;
-use leptos_shadcn_button::{Button, ButtonVariant};
-use leptos_shadcn_alert::{Alert, AlertDescription, AlertVariant};
+use crate::components::ui::input::{Input, InputType};
 use crate::store::TorrentStore;
 use crate::api;
 
@@ -12,13 +10,13 @@ pub fn AddTorrentDialog(
 ) -> impl IntoView {
     let _store = use_context::<TorrentStore>().expect("TorrentStore not provided");
 
-    let uri = signal(String::new());
+    let uri = RwSignal::new(String::new());
     let is_loading = signal(false);
     let error_msg = signal(Option::<String>::None);
 
     let handle_submit = move |ev: web_sys::SubmitEvent| {
         ev.prevent_default();
-        let uri_val = uri.0.get();
+        let uri_val = uri.get();
         
         if uri_val.is_empty() {
             error_msg.1.set(Some("Please enter a Magnet URI or URL".to_string()));
@@ -69,29 +67,31 @@ pub fn AddTorrentDialog(
             
             <form on:submit=handle_submit class="space-y-4">
                 <Input
-                    input_type="text"
+                    r#type=InputType::Text
                     placeholder="magnet:?xt=urn:btih:..."
-                    value=MaybeProp::derive(move || Some(uri.0.get()))
-                    on_change=Callback::new(move |val: String| uri.1.set(val))
-                    disabled=Signal::derive(move || is_loading.0.get())
+                    bind_value=uri
+                    disabled=is_loading.0.get()
                 />
                 
                 {move || error_msg.0.get().map(|msg| view! {
-                    <Alert variant=AlertVariant::Destructive>
-                        <AlertDescription>{msg}</AlertDescription>
-                    </Alert>
+                    <div class="rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive">
+                        {msg}
+                    </div>
                 })}
 
                 <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
-                    <Button
-                        variant=ButtonVariant::Ghost
-                        on_click=Callback::new(move |()| {
-                            on_close.run(());
-                        })
+                    <button
+                        type="button"
+                        class="inline-flex items-center justify-center h-9 px-4 py-2 rounded-md text-sm font-medium hover:bg-accent hover:text-accent-foreground transition-colors"
+                        on:click=move |_| on_close.run(())
                     >
                         "Cancel"
-                    </Button>
-                    <Button disabled=Signal::derive(move || is_loading.0.get())>
+                    </button>
+                    <button
+                        type="submit"
+                        class="inline-flex items-center justify-center h-9 px-4 py-2 rounded-md text-sm font-medium bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 transition-all disabled:pointer-events-none disabled:opacity-50"
+                        disabled=move || is_loading.0.get()
+                    >
                         {move || if is_loading.0.get() {
                             leptos::either::Either::Left(view! { 
                                 <span class="animate-spin mr-2 h-4 w-4 border-2 border-current border-t-transparent rounded-full"></span> 
@@ -100,7 +100,7 @@ pub fn AddTorrentDialog(
                         } else {
                             leptos::either::Either::Right(view! { "Add" })
                         }}
-                    </Button>
+                    </button>
                 </div>
             </form>
 

frontend/src/components/torrent/detail.rs

@@ -1,156 +0,0 @@
-use leptos::prelude::*;
-use leptos_shadcn_tabs::{Tabs, TabsList, TabsTrigger, TabsContent};
-
-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_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() }
-}
-
-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!("{}d {}h", days, hours) }
-    else if hours > 0 { format!("{}h {}m", hours, minutes) }
-    else if minutes > 0 { format!("{}m {}s", minutes, secs) }
-    else { format!("{}s", secs) }
-}
-
-#[component]
-pub fn TorrentDetail() -> impl IntoView {
-    let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
-
-    let torrent = Memo::new(move |_| {
-        let hash = store.selected_torrent.get()?;
-        store.torrents.with(|map| map.get(&hash).cloned())
-    });
-
-    let close = move |_| {
-        store.selected_torrent.set(None);
-    };
-
-    view! {
-        <Show when=move || torrent.get().is_some()>
-            {move || {
-                let t = torrent.get().unwrap();
-                let name = t.name.clone();
-                let status_color = match t.status {
-                    shared::TorrentStatus::Seeding => "text-green-500",
-                    shared::TorrentStatus::Downloading => "text-blue-500",
-                    shared::TorrentStatus::Paused => "text-yellow-500",
-                    shared::TorrentStatus::Error => "text-red-500",
-                    _ => "text-muted-foreground",
-                };
-                let status_text = format!("{:?}", t.status);
-
-                view! {
-                    <div class="border-t border-border bg-card flex flex-col" style="height: 280px; min-height: 200px;">
-                        // Header
-                        <div class="flex items-center justify-between px-4 py-2 border-b border-border bg-muted/30">
-                            <div class="flex items-center gap-3 min-w-0 flex-1">
-                                <h3 class="text-sm font-semibold truncate">{name}</h3>
-                                <span class={format!("text-xs font-medium {}", status_color)}>{status_text}</span>
-                            </div>
-                            <button
-                                class="inline-flex items-center justify-center rounded-md text-sm font-medium hover:bg-accent hover:text-accent-foreground h-7 w-7 text-muted-foreground shrink-0"
-                                on:click=close
-                                title="Close"
-                            >
-                                <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">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-                                </svg>
-                            </button>
-                        </div>
-
-                        // Tabs
-                        <Tabs default_value="general" class="flex-1 flex flex-col overflow-hidden">
-                            <div class="px-4 pt-2">
-                                <TabsList class="w-full">
-                                    <TabsTrigger value="general">"General"</TabsTrigger>
-                                    <TabsTrigger value="transfer">"Transfer"</TabsTrigger>
-                                    <TabsTrigger value="files">"Files"</TabsTrigger>
-                                    <TabsTrigger value="peers">"Peers"</TabsTrigger>
-                                </TabsList>
-                            </div>
-
-                            <TabsContent value="general" class="flex-1 overflow-y-auto px-4 pb-3">
-                                <div class="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-2 text-sm">
-                                    <DetailItem label="Size" value=format_bytes(t.size) />
-                                    <DetailItem label="Downloaded" value=format_bytes(t.completed) />
-                                    <DetailItem label="Progress" value=format!("{:.1}%", t.percent_complete) />
-                                    <DetailItem label="Added" value=format_date(t.added_date) />
-                                    <DetailItem label="Hash" value={
-                                        let hash = store.selected_torrent.get().unwrap_or_default();
-                                        format!("{}…", &hash[..std::cmp::min(16, hash.len())])
-                                    } />
-                                    <DetailItem label="Label" value=t.label.clone().unwrap_or_else(|| "—".to_string()) />
-                                    <DetailItem label="Error" value={
-                                        if t.error_message.is_empty() { "None".to_string() } else { t.error_message.clone() }
-                                    } />
-                                </div>
-                            </TabsContent>
-
-                            <TabsContent value="transfer" class="flex-1 overflow-y-auto px-4 pb-3">
-                                <div class="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-2 text-sm">
-                                    <DetailItem label="Download Speed" value=format_speed(t.down_rate) />
-                                    <DetailItem label="Upload Speed" value=format_speed(t.up_rate) />
-                                    <DetailItem label="ETA" value=format_duration(t.eta) />
-                                    <DetailItem label="Downloaded" value=format_bytes(t.completed) />
-                                    <DetailItem label="Total Size" value=format_bytes(t.size) />
-                                    <DetailItem label="Remaining" value=format_bytes(t.size - t.completed) />
-                                </div>
-                            </TabsContent>
-
-                            <TabsContent value="files" class="flex-1 overflow-y-auto px-4 pb-3">
-                                <div class="text-sm text-muted-foreground flex items-center gap-2 py-4">
-                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
-                                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" />
-                                    </svg>
-                                    "File list will be available when file API is connected."
-                                </div>
-                            </TabsContent>
-
-                            <TabsContent value="peers" class="flex-1 overflow-y-auto px-4 pb-3">
-                                <div class="text-sm text-muted-foreground flex items-center gap-2 py-4">
-                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
-                                        <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
-                                    </svg>
-                                    "Peer list will be available when peer API is connected."
-                                </div>
-                            </TabsContent>
-                        </Tabs>
-                    </div>
-                }
-            }}
-        </Show>
-    }
-}
-
-#[component]
-fn DetailItem(
-    #[prop(into)] label: String,
-    #[prop(into)] value: String,
-) -> impl IntoView {
-    let title = value.clone();
-    view! {
-        <div class="flex flex-col gap-0.5 py-1">
-            <span class="text-[10px] uppercase tracking-wider text-muted-foreground font-medium">{label}</span>
-            <span class="text-foreground font-mono text-xs truncate" title=title>{value}</span>
-        </div>
-    }
-}

frontend/src/components/torrent/mod.rs

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

frontend/src/components/torrent/table.rs

@@ -4,7 +4,7 @@ use crate::store::{get_action_messages, show_toast};
 use crate::api;
 use shared::NotificationLevel;
 use crate::components::context_menu::TorrentContextMenu;
-use leptos_shadcn_card::{Card, CardHeader, CardTitle, CardContent};
+use crate::components::ui::card::{Card, CardHeader, CardTitle, CardContent};
 
 fn format_bytes(bytes: i64) -> String {
     const UNITS: [&str; 6] = ["B", "KB", "MB", "GB", "TB", "PB"];

frontend/src/components/ui/button.rs

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

frontend/src/components/ui/card.rs

@@ -0,0 +1,15 @@
+use leptos::prelude::*;
+use leptos_ui::clx;
+
+mod components {
+    use super::*;
+
+    clx! {Card, div, "bg-card text-card-foreground flex flex-col gap-4 rounded-xl border py-6 shadow-sm"}
+    clx! {CardHeader, div, "@container/card-header flex flex-col items-start gap-1.5 px-6 [.border-b]:pb-6"}
+    clx! {CardTitle, h2, "leading-none font-semibold"}
+    clx! {CardContent, div, "px-6"}
+    clx! {CardDescription, p, "text-muted-foreground text-sm"}
+    clx! {CardFooter, footer, "flex items-center px-6 [.border-t]:pt-6", "gap-2"}
+}
+
+pub use components::*;

frontend/src/components/ui/input.rs

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

frontend/src/components/ui/mod.rs

@@ -0,0 +1,3 @@
+pub mod button;
+pub mod card;
+pub mod input;