feat: styling with tailwind

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 />
-        </main>
+            </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,30 +77,39 @@ pub fn Popup() -> impl IntoView {
     });
 
     view! {
-        <main class="window-shell rounded-container">
-            <input
-                class="dark-input"
-                type="text"
-                node_ref=prompt_input_ref
-                placeholder="Prompt..."
-                autofocus
-                on:input=move |ev| set_prompt_text.set(event_target_value(&ev))
-                on:keydown=move |ev| {
-                    if ev.key() == "Enter" {
-                        prompt_action.dispatch(prompt_text.get());
-                        set_prompt_text.update(|s| *s = "".to_string());
-                    }
-                }
-                prop:value=prompt_text
-                />
-            <div class="response-area">
-                <For each=move || messages.get()
-                key=|msg| msg.id
-                let(msg)
-                >
-                <div class=if msg.is_user {"msg msg-user"} else {"msg msg-model"}>{msg.text}</div>
-                </For>
-            </div>
-        </main>
+        <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="flex-none p-3 mb-5 rounded-lg bg-zinc-200 dark:bg-zinc-950"
+                        type="text"
+                        node_ref=prompt_input_ref
+                        placeholder="Prompt..."
+                        autofocus
+                        on:input=move |ev| set_prompt_text.set(event_target_value(&ev))
+                        on:keydown=move |ev| {
+                            if ev.key() == "Enter" {
+                                prompt_action.dispatch(prompt_text.get());
+                                set_prompt_text.update(|s| *s = "".to_string());
+                            }
+                        }
+                        prop:value=prompt_text
+                        />
+                    <div class="flex-auto overflow-y-auto">
+                        <div class="flex flex-col">
+                            <For each=move || messages.get()
+                            key=|msg| msg.id
+                            let(msg)
+                            >
+                            <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>
     }
 }