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

Cargo.lock

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

Cargo.toml

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

backend/Cargo.toml

@@ -47,3 +47,6 @@ governor = "0.10.4"
 leptos = { version = "0.8.15", features = ["nightly"] }
 leptos_axum = { version = "0.8.7" }
 jsonwebtoken = "9"
+tw_merge = { version = "0.1.17", features = ["variant"] }
+icons = { version = "0.18.0", features = ["leptos"] }
+leptos_ui = "0.3.20"

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,72 +1,69 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 
-
 :root {
-  --background: 0 0% 100%;
-  --foreground: 240 10% 3.9%;
-  --card: 0 0% 100%;
-  --card-foreground: 240 10% 3.9%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 240 10% 3.9%;
-  --primary: 240 5.9% 10%;
-  --primary-foreground: 0 0% 98%;
-  --secondary: 240 4.8% 95.9%;
-  --secondary-foreground: 240 5.9% 10%;
-  --muted: 240 4.8% 95.9%;
-  --muted-foreground: 240 3.8% 46.1%;
-  --accent: 240 4.8% 95.9%;
-  --accent-foreground: 240 5.9% 10%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 240 5.9% 90%;
-  --input: 240 5.9% 90%;
-  --ring: 240 5.9% 10%;
-  --radius: 0.5rem;
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
 }
 
 .dark {
-  --background: 240 10% 3.9%;
-  --foreground: 0 0% 98%;
-  --card: 240 10% 3.9%;
-  --card-foreground: 0 0% 98%;
-  --popover: 240 10% 3.9%;
-  --popover-foreground: 0 0% 98%;
-  --primary: 0 0% 98%;
-  --primary-foreground: 240 5.9% 10%;
-  --secondary: 240 3.7% 15.9%;
-  --secondary-foreground: 0 0% 98%;
-  --muted: 240 3.7% 15.9%;
-  --muted-foreground: 240 5% 64.9%;
-  --accent: 240 3.7% 15.9%;
-  --accent-foreground: 0 0% 98%;
-  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 240 3.7% 15.9%;
-  --input: 240 3.7% 15.9%;
-  --ring: 240 4.9% 83.9%;
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
 }
 
 @theme inline {
-  --color-background: hsl(var(--background));
-  --color-foreground: hsl(var(--foreground));
-  --color-card: hsl(var(--card));
-  --color-card-foreground: hsl(var(--card-foreground));
-  --color-popover: hsl(var(--popover));
-  --color-popover-foreground: hsl(var(--popover-foreground));
-  --color-primary: hsl(var(--primary));
-  --color-primary-foreground: hsl(var(--primary-foreground));
-  --color-secondary: hsl(var(--secondary));
-  --color-secondary-foreground: hsl(var(--secondary-foreground));
-  --color-muted: hsl(var(--muted));
-  --color-muted-foreground: hsl(var(--muted-foreground));
-  --color-accent: hsl(var(--accent));
-  --color-accent-foreground: hsl(var(--accent-foreground));
-  --color-destructive: hsl(var(--destructive));
-  --color-destructive-foreground: hsl(var(--destructive-foreground));
-  --color-border: hsl(var(--border));
-  --color-input: hsl(var(--input));
-  --color-ring: hsl(var(--ring));
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
@@ -83,10 +80,10 @@
 
   button:not(:disabled),
   [role="button"]:not(:disabled) {
-    cursor: pointer;
+    @apply cursor-pointer;
   }
 
   dialog {
-    margin: auto;
+    @apply m-auto;
   }
 }

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::button::Button;
+use crate::components::ui::auto_form::{AutoForm, AutoFormField};
 
 #[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| {
-        ev.prevent_default();
+    let fields = vec![
+        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 pass = password.get();
+        let user = data.get("username").cloned().unwrap_or_default();
+        let pass = data.get("password").cloned().unwrap_or_default();
 
         spawn_local(async move {
             match shared::server_fns::auth::login(user, pass).await {
@@ -49,45 +59,18 @@ pub fn Login() -> impl IntoView {
                 </CardHeader>
                 
                 <CardContent class="pt-4">
-                    <form on:submit=handle_login class="space-y-4">
-                        <div class="space-y-2">
-                            <label class="text-sm font-medium leading-none">"Kullanıcı Adı"</label>
-                            <Input
-                                r#type=InputType::Text
-                                placeholder="Kullanıcı adınız"
-                                bind_value=username
-                                disabled=loading.0.get()
+                    <AutoForm 
+                        fields=fields
+                        submit_label="Giriş Yap"
+                        on_submit=on_submit
+                        loading=loading.0.into()
                     />
-                        </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()>
-                            <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()}
                         </div>
                     </Show>
-
-                        <div class="pt-2">
-                            <Button
-                                class="w-full"
-                                attr:r#type="submit"
-                                attr:disabled=move || loading.0.get()
-                            >
-                                <Show when=move || loading.0.get() fallback=|| view! { "Giriş Yap" }.into_any()>
-                                    <span class="animate-spin mr-2 h-4 w-4 border-2 border-current border-t-transparent rounded-full"></span>
-                                    "Giriş Yapılıyor..."
-                                </Show>
-                            </Button>
-                        </div>
-                    </form>
                 </CardContent>
             </Card>
         </div>

frontend/src/components/auth/setup.rs

@@ -1,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::button::Button;
+use crate::components::ui::auto_form::{AutoForm, AutoFormField};
 
 #[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| {
-        ev.prevent_default();
+    let fields = vec![
+        AutoFormField::Text {
+            name: "username".to_string(),
+            label: "Yönetici Kullanıcı Adı".to_string(),
+            placeholder: Some("admin".to_string()),
+            required: true,
+        },
+        AutoFormField::Password {
+            name: "password".to_string(),
+            label: "Şifre".to_string(),
+            placeholder: Some("******".to_string()),
+            required: true,
+        },
+        AutoFormField::Password {
+            name: "confirm_password".to_string(),
+            label: "Şifre Onay".to_string(),
+            placeholder: Some("******".to_string()),
+            required: true,
+        },
+    ];
 
-        let pass = password.get();
-        let confirm = confirm_password.get();
+    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">
-                        <div class="space-y-2">
-                            <label class="text-sm font-medium leading-none">"Yönetici Kullanıcı Adı"</label>
-                            <Input
-                                r#type=InputType::Text
-                                placeholder="admin"
-                                bind_value=username
-                                disabled=loading.0.get()
+                    <AutoForm 
+                        fields=fields
+                        submit_label="Kurulumu Tamamla"
+                        on_submit=on_submit
+                        loading=loading.0.into()
                     />
-                        </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=|| ()>
-                            <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>
                         </div>
                     </Show>
-
-                        <div class="pt-2">
-                            <Button
-                                class="w-full"
-                                attr:r#type="submit"
-                                attr:disabled=move || loading.0.get()
-                            >
-                                <Show when=move || loading.0.get() fallback=|| view! { "Kurulumu Tamamla" }.into_any()>
-                                    <span class="animate-spin mr-2 h-4 w-4 border-2 border-current border-t-transparent rounded-full"></span>
-                                    "Kuruluyor..."
-                                </Show>
-                            </Button>
-                        </div>
-                    </form>
                 </CardContent>
             </Card>
         </div>

frontend/src/components/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/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>
+    }
+}

package.json

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

ui_config.toml

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