feat: styling with tailwind

frontend/src-tauri/src/commands.rs

@@ -102,7 +102,7 @@ pub async fn daemon_state(state: State<'_, AppState>) -> Result<DaemonState, Str
             let status_inner = status.into_inner();
             Ok(DaemonState {
                 is_ok: status_inner.is_ok,
-                message: status_inner.message,
+                message: Some(status_inner.message.unwrap_or(String::from("Daemon OK"))),
                 error: status_inner.error,
             })
         }

frontend/src/app.rs

@@ -11,6 +11,8 @@ use wasm_bindgen::JsValue;
 use crate::bridge::invoke;
 use crate::popup::Popup;
 
+pub const BTN_PRIMARY: &str = "bg-slate-300 hover:bg-slate-400 dark:bg-slate-800 hover:dark-bg-slate-700 px-4 py-2 rounded-md";
+
 #[component]
 pub fn App() -> impl IntoView {
     view! {
@@ -32,16 +34,19 @@ fn Dashboard() -> impl IntoView {
         });
     };
     view! {
-        <main class="window-shell opaque-bg">
-            <h1>"AI Dashboard"</h1>
-            <button on:click=on_click>Open chat</button>
+        <ThemeProvider>
+            <div class="fixed left-4 bottom-4">
             <DaemonStatusIndicator />
+            </div>
+            <main class="min-h-screen w-screen bg-white dark:bg-zinc-900 text-gray-950 dark:text-white p-3">
+                <button class=BTN_PRIMARY on:click=on_click>Open chat</button>
             </main>
+        </ThemeProvider>
     }
 }
 
 #[component]
-fn DaemonStatusIndicator() -> impl IntoView {
+pub fn DaemonStatusIndicator() -> impl IntoView {
     let (poll_count, set_pool_count) = signal(0);
     set_interval(
         move || set_pool_count.update(|v| *v += 1),
@@ -53,15 +58,59 @@ fn DaemonStatusIndicator() -> impl IntoView {
         let s: DaemonState = serde_wasm_bindgen::from_value(val).unwrap();
         s
     });
+
+    let f = |state: Option<DaemonState>| {
+        let color = match state.clone() {
+            Some(s) => match s.is_ok {
+                true => "bg-green-600",
+                false => "bg-red-600",
+            },
+            None => "bg-yellow-600",
+        };
+        let text = match state {
+            Some(s) => match s.error {
+                Some(err) => err,
+                None => s.message.unwrap_or(String::from("")),
+            },
+            None => String::from("Loading..."),
+        };
+        view! {
+            <div class="flex">
+                <div class={format!("mt-1 h-4 w-4 rounded-full flex-none {color}")}></div>
+                <span class="ml-2 flex-none text-gray-400 dark:text-gray-600">{ text }</span>
+            </div>
+        }
+    };
+
     view! {
         <div>
-        {move || match status.get() {
-            Some(state) => match state.is_ok {
-                true => view! { <span>{"OK"}</span>},
-                false => view! { <span>{"DOWN"}</span>},
-            },
-            None => view! { <span>{ "Loading status" }</span> },
-        }}
+        {move || f(status.get())}
+        </div>
+    }
+}
+
+#[component]
+pub fn ThemeProvider(children: Children) -> impl IntoView {
+    let (is_dark, set_dark) = signal(false);
+    Effect::new(move |_| {
+        let el = document()
+            .document_element()
+            .expect("HTML element not found!");
+        if is_dark.get() {
+            let _ = el.set_attribute("class", "dark");
+        } else {
+            let _ = el.set_attribute("class", "");
+        }
+    });
+
+    view! {
+        <div class="min-h-screen transition-colors duration-500">
+            <button
+                on:click=move |_| set_dark.update(|v| *v = !*v)
+                class="fixed top-4 right-4 p-2 bg-slate-200 dark:bg-slate-800 rounded-full">
+                    {move || if is_dark.get() { "🌙" } else { "☀️" }}
+                </button>
+            {children()}
         </div>
     }
 }

frontend/src/popup.rs

@@ -1,4 +1,7 @@
-use crate::bridge::invoke;
+use crate::{
+    app::{DaemonStatusIndicator, ThemeProvider},
+    bridge::invoke,
+};
 use feshared::chatmessage::{Message, MessageHistory};
 use leptos::{ev::keydown, html::Input, prelude::*};
 use wasm_bindgen::{prelude::Closure, JsCast, JsValue};
@@ -74,9 +77,11 @@ pub fn Popup() -> impl IntoView {
     });
 
     view! {
-        <main class="window-shell rounded-container">
+        <ThemeProvider>
+            <main class="rounded-lg bg-white dark:bg-zinc-900 text-zinc-950 dark:text-white">
+                <div class="max-h-screen p-2 flex flex-col">
                     <input
-                class="dark-input"
+                        class="flex-none p-3 mb-5 rounded-lg bg-zinc-200 dark:bg-zinc-950"
                         type="text"
                         node_ref=prompt_input_ref
                         placeholder="Prompt..."
@@ -90,7 +95,8 @@ pub fn Popup() -> impl IntoView {
                         }
                         prop:value=prompt_text
                         />
-            <div class="response-area">
+                    <div class="flex-auto overflow-y-auto">
+                        <div class="flex flex-col">
                             <For each=move || messages.get()
                             key=|msg| msg.id
                             let(msg)
@@ -98,6 +104,12 @@ pub fn Popup() -> impl IntoView {
                             <div class=if msg.is_user {"msg msg-user"} else {"msg msg-model"}>{msg.text}</div>
                             </For>
                         </div>
+                    </div>
+                    <div class="flex-none pt-2">
+                    <DaemonStatusIndicator/>
+                    </div>
+                </div>
             </main>
+        </ThemeProvider>
     }
 }

frontend/styles-input.css

@@ -0,0 +1,52 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@layer components {
+    .msg {
+        @apply rounded-lg px-3 py-2 dark:bg-gray-800 max-w-[75%];
+    }
+
+    .msg-model {
+        @apply self-start bg-blue-200 dark:bg-slate-800;
+    }
+
+    .msg-user {
+        @apply self-end bg-slate-200 dark:bg-zinc-800;
+    }
+}
+
+body {
+    background-color: transparent !important;
+    margin: 0;
+}
+
+.dark-input {
+    padding: 12px 20px;
+    margin: 8px 0;
+
+    /* Colors & Background */
+    background-color: #1e1e1e;
+    color: #ffffff;
+    border: 1px solid #333333;
+    border-radius: 8px; /* Soft rounded corners */
+
+    /* Typography */
+    font-family: "Inter", sans-serif;
+    font-size: 16px;
+
+    /* Smooth Transition */
+    transition: all 0.3s ease;
+    outline: none;
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px) scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}

frontend/tailwind.config.js

@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: "selector",
+  content: ["./src/**/*.rs", "./index.html"],
+  theme: {
+    fontFamily: {
+      sans: ["Inter", "serif"],
+    },
+  },
+};