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>
     }
 }