style: restore official rust-ui OKLCH color scheme and Tailwind v4 theme configuration

backend/src/main.rs

@@ -1,3 +1,4 @@
+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 -->
-    <script data-trunk rel="rust" src="Cargo.toml" data-wasm-opt="0" data-preload="false"></script>
+    <link data-trunk rel="rust" href="Cargo.toml" data-wasm-opt="0" data-preload="false" />
     <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,7 +1,6 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 
-
 :root {
   --radius: 0.625rem;
   --background: oklch(1 0 0);
@@ -45,7 +44,6 @@
   --ring: oklch(0.556 0 0);
 }
 
-
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
@@ -82,10 +80,10 @@
 
   button:not(:disabled),
   [role="button"]:not(:disabled) {
-    cursor: pointer;
+    @apply cursor-pointer;
   }
 
   dialog {
-    margin: auto;
+    @apply m-auto;
   }
 }

frontend/src/app.rs

@@ -1,4 +1,4 @@
-use crate::components::layout::protected::ProtectedLayout;
+use crate::components::layout::protected::Protected;
 use crate::components::ui::skeleton::Skeleton;
 use crate::components::torrent::table::TorrentTable;
 use crate::components::auth::login::Login;
@@ -50,11 +50,13 @@ fn InnerApp() -> impl IntoView {
     Effect::new(move |_| {
         spawn_local(async move {
             log::info!("App initialization started...");
-            
+            gloo_console::log!("APP INIT: Checking setup status...");
+
             // Check if setup is needed via Server Function
             match shared::server_fns::auth::get_setup_status().await {
                 Ok(status) => {
                     if !status.completed {
+                        log::info!("Setup not completed");
                         needs_setup.1.set(true);
                         is_loading.1.set(false);
                         return;
@@ -66,6 +68,7 @@ fn InnerApp() -> impl IntoView {
             // Check authentication via GetUser Server Function
             match shared::server_fns::auth::get_user().await {
                 Ok(Some(user_info)) => {
+                    log::info!("Authenticated as {}", user_info.username);
                     if let Some(s) = store {
                         s.user.set(Some(user_info.username));
                     }
@@ -80,6 +83,7 @@ fn InnerApp() -> impl IntoView {
             }
 
             is_loading.1.set(false);
+            crate::store::toast_success("VibeTorrent'e Hoşgeldiniz");
         });
     });
 
@@ -95,14 +99,11 @@ fn InnerApp() -> impl IntoView {
         }
     });
 
-    let is_loading_val = move || is_loading.0.get();
-    let authenticated_val = move || is_authenticated.0.get();
-
     view! {
         <div class="relative w-full h-screen" style="height: 100dvh;">
-            <Routes fallback=|| view! { <div class="p-4">"404 Not Found"</div> }.into_any()>
+            <Routes fallback=|| view! { <div class="p-4">"404 Not Found"</div> }>
                 <Route path=leptos_router::path!("/login") view=move || {
-                    let authenticated = authenticated_val();
+                    let authenticated = is_authenticated.0.get();
                     let setup_needed = needs_setup.0.get();
                     
                     Effect::new(move |_| {
@@ -110,75 +111,93 @@ fn InnerApp() -> impl IntoView {
                             let navigate = use_navigate();
                             navigate("/setup", Default::default());
                         } else if authenticated {
+                            log::info!("Already authenticated, redirecting to home");
                             let navigate = use_navigate();
                             navigate("/", Default::default());
                         }
                     });
                     
-                    view! { <Login /> }.into_any()
+                    view! { <Login /> }
                 } />
                 <Route path=leptos_router::path!("/setup") view=move || {
                     Effect::new(move |_| {
-                        if authenticated_val() {
+                        if is_authenticated.0.get() {
                             let navigate = use_navigate();
                             navigate("/", Default::default());
                         }
                     });
                     
-                    view! { <Setup /> }.into_any()
+                    view! { <Setup /> }
                 } />
 
                 <Route path=leptos_router::path!("/") view=move || {
                     let navigate = use_navigate();
                     Effect::new(move |_| {
-                        if !is_loading_val() {
+                        if !is_loading.0.get() {
                             if needs_setup.0.get() {
+                                log::info!("Setup not completed, redirecting to setup");
                                 navigate("/setup", Default::default());
-                            } else if !authenticated_val() {
+                            } else if !is_authenticated.0.get() {
+                                log::info!("Not authenticated, redirecting to login");
                                 navigate("/login", Default::default());
                             }
                         }
                     });
                     
                     view! {
-                        <Show when=move || !is_loading_val() fallback=|| {
+                        <Show when=move || !is_loading.0.get() fallback=|| {
+                            // Standard 1: Always show Dashboard Skeleton
                             view! {
                                 <div class="flex h-screen bg-background text-foreground overflow-hidden">
+                                    // Sidebar skeleton
                                     <div class="w-56 border-r border-border p-4 space-y-4">
                                         <Skeleton class="h-8 w-3/4" />
                                         <div class="space-y-2">
                                             <Skeleton class="h-6 w-full" />
                                             <Skeleton class="h-6 w-full" />
                                             <Skeleton class="h-6 w-4/5" />
+                                            <Skeleton class="h-6 w-full" />
+                                            <Skeleton class="h-6 w-3/5" />
+                                            <Skeleton class="h-6 w-full" />
                                         </div>
                                     </div>
+                                    // Main content skeleton
                                     <div class="flex-1 flex flex-col min-w-0">
                                         <div class="border-b border-border p-4 flex items-center gap-4">
                                             <Skeleton class="h-8 w-48" />
+                                            <Skeleton class="h-8 w-64" />
+                                            <div class="ml-auto"><Skeleton class="h-8 w-24" /></div>
                                         </div>
                                         <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>
+                                        <div class="border-t border-border p-3">
+                                            <Skeleton class="h-5 w-96" />
                                         </div>
                                     </div>
                                 </div>
                             }.into_any()
                         }>
-                            <Show when=move || authenticated_val() fallback=|| ()>
+                            <Show when=move || is_authenticated.0.get() fallback=|| ()>
-                                <ProtectedLayout>
+                                <Protected>
                                     <div class="flex flex-col h-full overflow-hidden">
                                         <div class="flex-1 overflow-hidden">
                                             <TorrentTable />
                                         </div>
                                     </div>
-                                </ProtectedLayout>
+                                </Protected>
                             </Show>
                         </Show>
                     }.into_any()
                 }/>
 
                 <Route path=leptos_router::path!("/settings") view=move || {
-                    let authenticated = authenticated_val();
+                    let authenticated = is_authenticated.0.get();
                     Effect::new(move |_| {
                         if !authenticated {
                             let navigate = use_navigate();
@@ -187,14 +206,14 @@ fn InnerApp() -> impl IntoView {
                     });
                     
                     view! {
-                        <Show when=move || !is_loading_val() fallback=|| ()>
+                        <Show when=move || !is_loading.0.get() fallback=|| ()>
                             <Show when=move || authenticated fallback=|| ()>
-                                <ProtectedLayout>
+                                <Protected>
                                     <div class="p-4">"Settings Page (Coming Soon)"</div>
-                                </ProtectedLayout>
+                                </Protected>
                             </Show>
                         </Show>
-                    }.into_any()
+                    }
                 }/>
             </Routes>
         </div>

frontend/src/components/auth/login.rs

@@ -1,24 +1,34 @@
 use leptos::prelude::*;
 use leptos::task::spawn_local;
 use crate::components::ui::card::{Card, CardHeader, CardContent};
-use crate::components::ui::input::{Input, InputType};
+use crate::components::ui::auto_form::{AutoForm, AutoFormField};
-
-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 handle_login = move |ev: web_sys::SubmitEvent| {
+    let fields = vec![
-        ev.prevent_default();
+        AutoFormField::Text {
+            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 = username.get();
+        let user = data.get("username").cloned().unwrap_or_default();
-        let pass = password.get();
+        let pass = data.get("password").cloned().unwrap_or_default();
 
         spawn_local(async move {
             match shared::server_fns::auth::login(user, pass).await {
@@ -49,47 +59,20 @@ pub fn Login() -> impl IntoView {
                 </CardHeader>
                 
                 <CardContent class="pt-4">
-                    <form on:submit=handle_login class="space-y-4">
+                    <AutoForm 
-                        <div class="space-y-2">
+                        fields=fields
-                            <label class="text-sm font-medium leading-none">"Kullanıcı Adı"</label>
+                        submit_label="Giriş Yap"
-                            <Input
+                        on_submit=on_submit
-                                r#type=InputType::Text
+                        loading=loading.0.into()
-                                placeholder="Kullanıcı adınız"
+                    />
-                                bind_value=username
-                                disabled=loading.0.get()
-                            />
-                        </div>
-                        <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()>
+                    <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">
+                        <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()}
+                            {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>
+                    </Show>
                 </CardContent>
             </Card>
         </div>
     }
-}
+}

frontend/src/components/auth/setup.rs

@@ -1,23 +1,38 @@
 use leptos::prelude::*;
 use leptos::task::spawn_local;
 use crate::components::ui::card::{Card, CardHeader, CardContent};
-use crate::components::ui::input::{Input, InputType};
+use crate::components::ui::auto_form::{AutoForm, AutoFormField};
-
-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 handle_setup = move |ev: web_sys::SubmitEvent| {
+    let fields = vec![
-        ev.prevent_default();
+        AutoFormField::Text {
-        
+            name: "username".to_string(),
-        let pass = password.get();
+            label: "Yönetici Kullanıcı Adı".to_string(),
-        let confirm = confirm_password.get();
+            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 user = data.get("username").cloned().unwrap_or_default();
+        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()));
@@ -32,8 +47,6 @@ 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(_) => {
@@ -64,54 +77,18 @@ pub fn Setup() -> impl IntoView {
                 </CardHeader>
 
                 <CardContent class="pt-4">
-                    <form on:submit=handle_setup class="space-y-4">
+                    <AutoForm 
-                        <div class="space-y-2">
+                        fields=fields
-                            <label class="text-sm font-medium leading-none">"Yönetici Kullanıcı Adı"</label>
+                        submit_label="Kurulumu Tamamla"
-                            <Input
+                        on_submit=on_submit
-                                r#type=InputType::Text
+                        loading=loading.0.into()
-                                placeholder="admin"
+                    />
-                                bind_value=username
-                                disabled=loading.0.get()
-                            />
-                        </div>
-                        <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=|| ()>
+                    <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">
+                        <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>
+                            <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>
+                    </Show>
                 </CardContent>
             </Card>
         </div>

frontend/src/components/context_menu.rs

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

frontend/src/components/layout/protected.rs

@@ -1,22 +1,29 @@
 use leptos::prelude::*;
 use crate::components::layout::sidebar::Sidebar;
 use crate::components::layout::toolbar::Toolbar;
-use crate::components::ui::sidenav::{SidenavWrapper, Sidenav, SidenavInset, SidenavState};
+use crate::components::layout::footer::Footer;
+use crate::components::ui::sidenav::{SidenavWrapper, Sidenav, SidenavInset};
 
 #[component]
-pub fn ProtectedLayout(children: Children) -> impl IntoView {
+pub fn Protected(children: Children) -> impl IntoView {
-    let sidenav_state = RwSignal::new(SidenavState::Expanded);
-
     view! {
         <SidenavWrapper attr:style="--sidenav-width:16rem; --sidenav-width-icon:3rem;">
-            <Sidenav data_state=Signal::from(sidenav_state)>
+            // Masaüstü Sidenav
+            <Sidenav>
                 <Sidebar />
             </Sidenav>
-            
+
+            // İçerik Alanı
             <SidenavInset class="flex flex-col h-screen overflow-hidden">
-                <Toolbar sidenav_state=sidenav_state />
+                // Toolbar (Üst Bar)
-                <main class="flex-1 overflow-auto bg-muted/30">
+                <Toolbar />
-                    {children()}
+                
+                // Ana İçerik
+                <main class="flex-1 overflow-y-auto relative bg-background flex flex-col">
+                    <div class="flex-1">
+                        {children()}
+                    </div>
+                    <Footer />
                 </main>
             </SidenavInset>
         </SidenavWrapper>

frontend/src/components/layout/toolbar.rs

@@ -1,24 +1,55 @@
 use leptos::prelude::*;
-use crate::components::ui::sidenav::{SidenavTrigger, SidenavState};
+use icons::{PanelLeft, Plus};
-use crate::components::torrent::add_torrent::AddTorrent;
+use crate::components::torrent::add_torrent::AddTorrentDialogContent;
+use crate::components::ui::button::{ButtonVariant, ButtonSize};
+use crate::components::ui::sheet::{Sheet, SheetContent, SheetTrigger, SheetDirection};
+use crate::components::ui::dialog::{Dialog, DialogContent, DialogTrigger};
+use crate::components::layout::sidebar::Sidebar;
 
 #[component]
-pub fn Toolbar(
+pub fn Toolbar() -> impl IntoView {
-    sidenav_state: RwSignal<SidenavState>
+    view! {
-) -> impl IntoView {
+        <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);">
-    let header_view = view! {
+            // Sol kısım: Menü butonu (Mobil) + Add Torrent
-        <header class="h-14 border-b bg-background/95 backdrop-blur-sm flex items-center justify-between px-4 sticky top-0 z-30">
+            <div class="flex items-center gap-3">
-            <div class="flex items-center gap-4">
+                
-                <SidenavTrigger data_state=sidenav_state />
+                // --- MOBILE SHEET (SIDEBAR) ---
-                <div class="h-4 w-px bg-border hidden md:block"></div>
+                <div class="lg:hidden">
-                <h2 class="text-sm font-semibold tracking-tight">"Torrents"</h2>
+                    <Sheet>
+                        <SheetTrigger variant=ButtonVariant::Ghost size=ButtonSize::Icon class="size-9">
+                            <PanelLeft class="size-5" />
+                            <span class="hidden">"Menüyü Aç"</span>
+                        </SheetTrigger>
+                        <SheetContent 
+                            direction=SheetDirection::Left 
+                            class="p-0 w-[18rem] bg-card border-r border-border"
+                            hide_close_button=true
+                        >
+                            <div class="flex flex-col h-full overflow-hidden">
+                                <Sidebar />
+                            </div>
+                        </SheetContent>
+                    </Sheet>
+                </div>
+                
+                <Dialog>
+                    <DialogTrigger 
+                        variant=ButtonVariant::Default 
+                        class="gap-2"
+                    >
+                        <Plus class="w-4 h-4 md:w-5 md:h-5" />
+                        <span class="hidden sm:inline">"Add Torrent"</span>
+                        <span class="sm:hidden">"Add"</span>
+                    </DialogTrigger>
+                    <DialogContent id="add-torrent-dialog" class="sm:max-w-[425px]">
+                        <AddTorrentDialogContent />
+                    </DialogContent>
+                </Dialog>
             </div>
 
-            <div class="flex items-center gap-2">
+            // Sağ kısım boş
-                <AddTorrent />
+            <div class="flex flex-1 items-center justify-end gap-2">
             </div>
-        </header>
+        </div>
-    };
+    }
-    
-    header_view
 }

frontend/src/components/torrent/add_torrent.rs

@@ -3,26 +3,10 @@ use leptos::task::spawn_local;
 use wasm_bindgen::JsCast;
 use crate::components::ui::input::{Input, InputType};
 use crate::api;
-use crate::components::ui::button::{Button, ButtonVariant};
+use crate::components::ui::button::Button;
 use crate::components::ui::dialog::{
-    Dialog, DialogTrigger, DialogContent, DialogBody, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose
+    DialogBody, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose
 };
-use icons::Play;
-
-#[component]
-pub fn AddTorrent() -> impl IntoView {
-    view! {
-        <Dialog>
-            <DialogTrigger variant=ButtonVariant::Default class="gap-2">
-                <Play class="size-4" />
-                <span class="hidden sm:inline">"Add Torrent"</span>
-            </DialogTrigger>
-            <DialogContent id="add-torrent-dialog">
-                <AddTorrentDialogContent />
-            </DialogContent>
-        </Dialog>
-    }
-}
 
 #[component]
 pub fn AddTorrentDialogContent() -> impl IntoView {

frontend/src/components/ui/auto_form.rs

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

@@ -139,7 +139,7 @@ pub fn ContextMenuTrigger(
             class=trigger_class
             data-name="ContextMenuTrigger"
             data-context-trigger=ctx.target_id
-            on:contextmenu=move |_e: web_sys::MouseEvent| {
+            on:contextmenu=move |e: web_sys::MouseEvent| {
                 if let Some(cb) = on_open {
                     cb.run(());
                 }

frontend/src/components/ui/mod.rs

@@ -1,5 +1,6 @@
 pub mod accordion;
 pub mod alert_dialog;
+pub mod auto_form;
 pub mod badge;
 pub mod button;
 pub mod button_action;

frontend/src/components/ui/progress.rs

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

@@ -1,10 +1,13 @@
 use leptos::prelude::*;
+use leptos_router::hooks::use_location;
 use leptos_ui::{clx, variants, void};
 
 mod components {
     use super::*;
     clx! {SidenavWrapper, div, "group/sidenav-wrapper has-data-[variant=Inset]:bg-sidenav flex h-full w-full"}
+    // clx! {SidenavInset, div, "bg-background relative flex w-full flex-1 flex-col md:peer-data-[variant=Inset]:m-2 md:peer-data-[variant=Inset]:ml-0 md:peer-data-[variant=Inset]:rounded-xl md:peer-data-[variant=Inset]:shadow-sm md:peer-data-[variant=Inset]:peer-data-[state=Collapsed]:ml-2"}
     clx! {SidenavInset, div, "bg-background relative flex w-full flex-1 flex-col data-[variant=Inset]:rounded-lg data-[variant=Inset]:border data-[variant=Inset]:border-sidenav-border data-[variant=Inset]:shadow-sm data-[variant=Inset]:m-2"}
+    // * data-[], not group-data-[]
     clx! {SidenavInner, div, "flex flex-col w-full h-full bg-sidenav data-[variant=Floating]:rounded-lg data-[variant=Floating]:border data-[variant=Floating]:border-sidenav-border data-[variant=Floating]:shadow-sm"}
     clx! {SidenavHeader, div, "flex flex-col gap-2 p-2"}
     clx! {SidenavMenu, ul, "flex flex-col gap-1 w-full min-w-0"}
@@ -15,20 +18,82 @@ mod components {
     clx! {SidenavGroupContent, div, "w-full text-sm"}
     clx! {SidenavGroupLabel, div, "text-sidenav-foreground/70 ring-sidenav-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0 group-data-[collapsible=Icon]:-mt-8 group-data-[collapsible=Icon]:opacity-0"}
     clx! {SidenavFooter, footer, "flex flex-col gap-2 p-2"}
+    // Button "More"
     clx! {DropdownMenuTriggerEllipsis, button, "text-sidenav-foreground ring-sidenav-ring hover:bg-sidenav-accent hover:text-sidenav-accent-foreground peer-hover/menu-button:text-sidenav-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden peer-data-[size=sm]/menu-button:top-1 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 group-data-[collapsible=Icon]:hidden peer-data-[active=true]/menu-button:text-sidenav-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0"}
 
     void! {SidenavInput, input,
         "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",
+        "focus-visible:ring-2", // TODO. Port tw_merge to Tailwind V4.
+     // "focus-visible:ring-[3px]", // TODO. Port tw_merge to Tailwind V4.
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         "read-only:bg-muted",
+        // Specific to Sidenav
         "w-full h-8 shadow-none bg-background"
     }
 }
 
 pub use components::*;
 
+/* ========================================================== */
+/*                     ✨ FUNCTIONS ✨                        */
+/* ========================================================== */
+
+#[component]
+pub fn SidenavLink(
+    children: Children,
+    #[prop(into)] href: String,
+    #[prop(optional, into)] class: String,
+) -> impl IntoView {
+    let merged_class = tw_merge!(
+        "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left outline-hidden ring-sidenav-ring transition-[width,height,padding] focus-visible:ring-2 active:bg-sidenav-accent active:text-sidenav-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidenav=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-[current=page]:bg-sidenav-accent aria-[current=page]:font-semibold aria-[current=page]:text-sidenav-accent-foreground data-[state=open]:hover:bg-sidenav-accent data-[state=open]:hover:text-sidenav-accent-foreground group-data-[collapsible=Icon]:size-8! group-data-[collapsible=Icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 hover:bg-sidenav-accent hover:text-sidenav-accent-foreground h-8 text-sm",
+        class
+    );
+
+    let location = use_location();
+
+    // Check if the link is active based on current path
+    let href_clone = href.clone();
+    let is_active = move || {
+        let path = location.pathname.get();
+        path == href_clone || path.starts_with(&format!("{}/", href_clone))
+    };
+
+    let aria_current = move || if is_active() { "page" } else { "false" };
+
+    view! {
+        <a data-name="SidenavLink" class=merged_class href=href aria-current=aria_current>
+            {children()}
+        </a>
+    }
+}
+
+variants! {
+    SidenavMenuButton {
+        base: "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidenav-ring transition-[width,height,padding] hover:bg-sidenav-accent hover:text-sidenav-accent-foreground focus-visible:ring-2 active:bg-sidenav-accent active:text-sidenav-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidenav=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-[current=page]:bg-sidenav-accent aria-[current=page]:font-medium aria-[current=page]:text-sidenav-accent-foreground data-[state=open]:hover:bg-sidenav-accent data-[state=open]:hover:text-sidenav-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0   group-data-[collapsible=Icon]:size-8! group-data-[collapsible=Icon]:p-0!   [&>svg]:stroke-2 aria-[current=page]:[&>svg]:stroke-[2.7]",
+        variants: {
+            variant: {
+                Default: "hover:bg-sidenav-accent hover:text-sidenav-accent-foreground", // Already in base
+                Outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidenav-border))] hover:bg-sidenav-accent hover:text-sidenav-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidenav-accent))]",
+            },
+            size: {
+                Default: "h-8 text-sm",
+                Sm: "h-7 text-xs",
+                Lg: "h-12",
+            }
+        },
+        component: {
+            element: button,
+            support_href: true,
+            support_aria_current: true
+        }
+    }
+}
+
+/* ========================================================== */
+/*                     ✨ FUNCTIONS ✨                        */
+/* ========================================================== */
+
 #[derive(Clone, Copy, PartialEq, Eq, Default, strum::Display, strum::IntoStaticStr)]
 pub enum SidenavVariant {
     #[default]
@@ -52,6 +117,83 @@ pub enum SidenavCollapsible {
     Icon,
 }
 
+#[component]
+pub fn Sidenav(
+    #[prop(into, optional)] class: String,
+    #[prop(default = SidenavVariant::default())] variant: SidenavVariant,
+    #[prop(default = SidenavState::default())] data_state: SidenavState,
+    #[prop(default = SidenavSide::default())] data_side: SidenavSide,
+    #[prop(default = SidenavCollapsible::default())] data_collapsible: SidenavCollapsible,
+    children: Children,
+) -> impl IntoView {
+    view! {
+        {if data_collapsible == SidenavCollapsible::None {
+            view! {
+                <aside
+                    data-name="Sidenav"
+                    class=tw_merge!(
+                        "flex flex-col h-full bg-sidenav text-sidenav-foreground w-(--sidenav-width)", class.clone()
+                    )
+                >
+                    {children()}
+                </aside>
+            }
+                .into_any()
+        } else {
+            view! {
+                <aside
+                    data-name="Sidenav"
+                    data-sidenav=data_state.to_string()
+                    data-side=data_side.to_string()
+                    class="hidden md:block group peer text-sidenav-foreground data-[state=Collapsed]:hidden"
+                >
+                    // * SidenavGap: This is what handles the sidenav gap on desktop
+                    <div
+                        data-name="SidenavGap"
+                        class=tw_merge!(
+                            "relative w-(--sidenav-width) bg-transparent transition-[width] duration-200 ease-linear",
+                            "group-data-[collapsible=Offcanvas]:w-0",
+                            "group-data-[side=Right]:rotate-180",
+                            match variant {
+                                SidenavVariant::Sidenav => "group-data-[collapsible=Icon]:w-(--sidenav-width-icon)",
+                                SidenavVariant::Floating | SidenavVariant::Inset =>
+                                    "group-data-[collapsible=Icon]:w-[calc(var(--sidenav-width-icon)+(--spacing(4)))]",
+                            }
+                        )
+                    />
+                    <div
+                        data-name="SidenavContainer"
+                        class=tw_merge!(
+                            "fixed inset-y-0 z-10 hidden h-svh w-(--sidenav-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+                            class,
+                            match data_side {
+                                SidenavSide::Left => "left-0 group-data-[collapsible=Offcanvas]:left-[calc(var(--sidenav-width)*-1)]",
+                                SidenavSide::Right => "right-0 group-data-[collapsible=Offcanvas]:right-[calc(var(--sidenav-width)*-1)]"
+                            },
+                            match variant {
+                                 SidenavVariant::Sidenav => "group-data-[collapsible=Icon]:w-(--sidenav-width-icon) group-data-[side=Left]:border-r group-data-[side=Right]:border-l",
+                                SidenavVariant::Floating | SidenavVariant::Inset =>
+                                    "p-2 group-data-[collapsible=Icon]:w-[calc(var(--sidenav-width-icon)+(--spacing(4))+2px)]",
+                            },
+                        )
+                    >
+                        // * Act as a Sidenav for the onclick trigger to work with nested Sidenavs.
+                        <SidenavInner attr:data-sidenav="Sidenav" attr:data-variant=variant.to_string()>
+                            {children()}
+                            <SidenavToggleRail />
+                        </SidenavInner>
+                    </div>
+                </aside>
+            }
+                .into_any()
+        }}
+    }
+}
+
+/* ========================================================== */
+/*                     ✨ FUNCTIONS ✨                        */
+/* ========================================================== */
+
 #[derive(Clone, Copy, PartialEq, Eq, Default, strum::Display)]
 pub enum SidenavState {
     #[default]
@@ -59,94 +201,32 @@ pub enum SidenavState {
     Collapsed,
 }
 
-#[component]
+const ONCLICK_TRIGGER: &str = "document.querySelector('[data-name=\"Sidenav\"]').setAttribute('data-state', document.querySelector('[data-name=\"Sidenav\"]').getAttribute('data-state') === 'Collapsed' ? 'Expanded' : 'Collapsed')";
-pub fn Sidenav(
-    #[prop(into, optional)] class: String,
-    #[prop(default = SidenavVariant::default())] variant: SidenavVariant,
-    #[prop(into)] data_state: Signal<SidenavState>,
-    #[prop(default = SidenavSide::default())] data_side: SidenavSide,
-    #[prop(default = SidenavCollapsible::default())] data_collapsible: SidenavCollapsible,
-    children: Children,
-) -> impl IntoView {
-    view! {
-        <aside
-            data-name="Sidenav"
-            data-state=move || data_state.get().to_string()
-            data-side=data_side.to_string()
-            data-collapsible=data_collapsible.to_string()
-            class="hidden md:block group peer text-sidenav-foreground h-full"
-        >
-            <div
-                data-name="SidenavGap"
-                class=tw_merge!(
-                    "relative w-(--sidenav-width) bg-transparent transition-[width] duration-200 ease-linear",
-                    "group-data-[collapsible=Offcanvas]:w-0",
-                    "group-data-[state=Collapsed]:w-(--sidenav-width-icon)",
-                    match variant {
-                        SidenavVariant::Sidenav => "group-data-[collapsible=Icon]:w-(--sidenav-width-icon)",
-                        SidenavVariant::Floating | SidenavVariant::Inset =>
-                            "group-data-[collapsible=Icon]:w-[calc(var(--sidenav-width-icon)+(--spacing(4)))]",
-                    }
-                )
-            />
-            <div
-                data-name="SidenavContainer"
-                class=tw_merge!(
-                    "fixed inset-y-0 z-10 hidden h-svh w-(--sidenav-width) transition-[left,right,width] duration-200 ease-linear md:flex",
-                    class,
-                    match data_side {
-                        SidenavSide::Left => "left-0 group-data-[collapsible=Offcanvas]:left-[calc(var(--sidenav-width)*-1)]",
-                        SidenavSide::Right => "right-0 group-data-[collapsible=Offcanvas]:right-[calc(var(--sidenav-width)*-1)]"
-                    },
-                    "group-data-[state=Collapsed]:w-(--sidenav-width-icon)",
-                    match variant {
-                         SidenavVariant::Sidenav => "group-data-[side=Left]:border-r group-data-[side=Right]:border-l",
-                         SidenavVariant::Floating | SidenavVariant::Inset => "p-2",
-                    },
-                )
-            >
-                <SidenavInner attr:data-sidenav="Sidenav" attr:data-variant=variant.to_string()>
-                    {children()}
-                </SidenavInner>
-            </div>
-        </aside>
-    }
-}
-
-variants! {
-    SidenavMenuButton {
-        base: "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidenav-ring transition-[width,height,padding] hover:bg-sidenav-accent hover:text-sidenav-accent-foreground focus-visible:ring-2 active:bg-sidenav-accent active:text-sidenav-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidenav=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-[current=page]:bg-sidenav-accent aria-[current=page]:font-medium aria-[current=page]:text-sidenav-accent-foreground data-[state=open]:hover:bg-sidenav-accent data-[state=open]:hover:text-sidenav-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 group-data-[state=Collapsed]:size-8! group-data-[state=Collapsed]:p-0! [&>svg]:stroke-2 aria-[current=page]:[&>svg]:stroke-[2.7]",
-        variants: {
-            variant: {
-                Default: "hover:bg-sidenav-accent hover:text-sidenav-accent-foreground",
-                Outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidenav-border))] hover:bg-sidenav-accent hover:text-sidenav-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidenav-accent))]",
-            },
-            size: {
-                Default: "h-8 text-sm",
-                Sm: "h-7 text-xs",
-                Lg: "h-12",
-            }
-        },
-        component: {
-            element: button,
-            support_href: true,
-            support_aria_current: true
-        }
-    }
-}
 
 #[component]
-pub fn SidenavTrigger(
+pub fn SidenavTrigger(children: Children) -> impl IntoView {
-    #[prop(into)] data_state: RwSignal<SidenavState>,
-    #[prop(optional, into)] class: String,
-) -> impl IntoView {
     view! {
+        // TODO. Use Button.
+
         <button
-            on:click=move |_| data_state.update(|s| *s = match s { SidenavState::Expanded => SidenavState::Collapsed, SidenavState::Collapsed => SidenavState::Expanded })
+            onclick=ONCLICK_TRIGGER
             data-name="SidenavTrigger"
-            class=tw_merge!("inline-flex gap-2 justify-center items-center text-sm font-medium whitespace-nowrap rounded-md transition-all outline-none size-7 hover:bg-accent hover:text-accent-foreground focus-visible:ring-2", class)
+            class="inline-flex gap-2 justify-center items-center -ml-1 text-sm font-medium whitespace-nowrap rounded-md transition-all outline-none disabled:opacity-50 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 aria-invalid:ring-destructive/20 aria-invalid:border-destructive size-7 dark:aria-invalid:ring-destructive/40 dark:hover:bg-accent/50 hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]"
         >
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-panel-left"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/></svg>
+            {children()}
         </button>
     }
 }
+
+#[component]
+fn SidenavToggleRail() -> impl IntoView {
+    view! {
+        <button
+            data-name="SidenavToggleRail"
+            aria-label="Toggle Sidenav"
+            tabindex="-1"
+            onclick=ONCLICK_TRIGGER
+            class="hidden absolute inset-y-0 z-20 w-4 transition-all ease-linear -translate-x-1/2 sm:flex group-data-[side=Left]:-right-4 group-data-[side=Right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] in-data-[side=Left]:cursor-w-resize in-data-[side=Right]:cursor-e-resize [[data-side=Left][data-state=Collapsed]_&]:cursor-e-resize [[data-side=Right][data-state=Collapsed]_&]:cursor-w-resize group-data-[collapsible=Offcanvas]:translate-x-0 group-data-[collapsible=Offcanvas]:after:left-full [[data-side=Left][data-collapsible=Offcanvas]_&]:-right-2 [[data-side=Right][data-collapsible=Offcanvas]_&]:-left-0eft-2 hover:after:bg-sidenav-border hover:group-data-[collapsible=Offcanvas]:bg-sidenav"
+        />
+    }
+}

package.json

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