Merge pull request #7 from opensass/custom

feat: allow users to drag og canvas elements && improve prompts

src/components/dashboard/chat/panel.rs

@@ -11,7 +11,6 @@ use crate::server::og::request::GetOGsForUserRequest;
 use gloo_storage::Storage;
 
 use crate::theme::Theme;
-use crate::theme::THEME;
 use bson::oid::ObjectId;
 use chrono::Utc;
 use dioxus::prelude::*;
@@ -44,6 +43,7 @@ pub fn ChatPanel(conversation_id: Signal<ObjectId>, user_token: Signal<String>)
     let mut ogs = use_signal(Vec::<OG>::new);
     let mut thinking = use_signal(|| false);
     let mut loading = use_signal(|| false);
+    let theme = use_context::<Signal<Theme>>();
 
     let _ = use_resource(move || async move {
         let now = Utc::now().timestamp();
@@ -159,7 +159,7 @@ pub fn ChatPanel(conversation_id: Signal<ObjectId>, user_token: Signal<String>)
         div {
             class: format!(
                 "flex flex-col h-full {}",
-                if *THEME.read() == Theme::Dark { "bg-gray-900 text-white" } else { "bg-white text-gray-900" }
+                if theme() == Theme::Dark { "bg-gray-900 text-white" } else { "bg-white text-gray-900" }
             ),
 
             div {
@@ -168,7 +168,7 @@ pub fn ChatPanel(conversation_id: Signal<ObjectId>, user_token: Signal<String>)
                 select {
                     class: format!(
                         "p-2 rounded-lg mb-2 md:mb-0 flex-grow w-full md:w-auto truncate {}",
-                        if *THEME.read() == Theme::Dark { "bg-gray-700 text-white" } else { "bg-gray-100 text-black" }
+                        if theme() == Theme::Dark { "bg-gray-700 text-white" } else { "bg-gray-100 text-black" }
                     ),
                     onchange: move |evt| handle_og_change(evt.value()),
                     option { value: "", "Select a og" },
@@ -184,7 +184,7 @@ pub fn ChatPanel(conversation_id: Signal<ObjectId>, user_token: Signal<String>)
                 input {
                     class: format!(
                         "flex-1 p-2 rounded-lg border w-full {}",
-                        if *THEME.read() == Theme::Dark { "bg-gray-700 text-white border-gray-600" } else { "border-gray-300" }
+                        if theme() == Theme::Dark { "bg-gray-700 text-white border-gray-600" } else { "border-gray-300" }
                     ),
                     r#type: "text",
                     placeholder: "Type your query here...",

src/components/dashboard/chat/sidebar.rs

@@ -4,7 +4,6 @@ use crate::server::conversation::model::Conversation;
 use crate::server::conversation::request::CreateConversationRequest;
 use crate::server::conversation::request::GetConversationsRequest;
 use crate::theme::Theme;
-use crate::theme::THEME;
 use bson::oid::ObjectId;
 use chrono::Utc;
 
@@ -19,6 +18,7 @@ pub fn ConversationsSidebar(
 ) -> Element {
     let token_clone = token.clone();
     let og_id_clone = og_id.clone();
+    let theme = use_context::<Signal<Theme>>();
 
     use_effect(move || {
         let token = token.clone();
@@ -34,7 +34,7 @@ pub fn ConversationsSidebar(
 
     rsx! {
         div {
-            class: format!("p-4 {}", if *THEME.read() == Theme::Dark { "border-gray-600 bg-gray-900" } else { "border-gray-200" }),
+            class: format!("p-4 {}", if theme() == Theme::Dark { "border-gray-600 bg-gray-900" } else { "border-gray-200" }),
 
             h3 { class: "text-lg font-semibold mb-4 text-blue-500", "Conversations" }
 

src/components/dashboard/fields/input.rs

@@ -1,5 +1,4 @@
 use crate::theme::Theme;
-use crate::theme::THEME;
 use dioxus::prelude::*;
 
 #[component]
@@ -10,7 +9,8 @@ pub fn InputField(
     validate: fn(&str) -> bool,
     required: bool,
 ) -> Element {
-    let dark_mode = *THEME.read() == Theme::Dark;
+    let theme = use_context::<Signal<Theme>>();
+    let dark_mode = theme() == Theme::Dark;
 
     let handle_input = move |e: Event<FormData>| {
         let input_value = e.value().clone();
@@ -20,6 +20,7 @@ pub fn InputField(
 
     rsx! {
         div {
+            class: "flex-grow w-full",
             label {
                 class: format!("block text-sm font-medium {}", if dark_mode { "text-gray-300" } else { "text-gray-700" }),
                 "{label}"

src/components/dashboard/fields/number.rs

@@ -1,10 +1,10 @@
 use crate::theme::Theme;
-use crate::theme::THEME;
 use dioxus::prelude::*;
 
 #[component]
 pub fn NumberField(label: &'static str, value: Signal<u64>, required: bool) -> Element {
-    let dark_mode = *THEME.read() == Theme::Dark;
+    let theme = use_context::<Signal<Theme>>();
+    let dark_mode = theme() == Theme::Dark;
     rsx! {
         div {
             label { class: format!("block text-sm font-medium {}", if dark_mode { "text-gray-300" } else { "text-gray-700" }), "{label}" }

src/components/dashboard/fields/select.rs

@@ -1,5 +1,4 @@
 use crate::theme::Theme;
-use crate::theme::THEME;
 use dioxus::prelude::*;
 
 #[component]
@@ -8,7 +7,8 @@ pub fn SelectField(
     options: Vec<&'static str>,
     selected: Signal<String>,
 ) -> Element {
-    let dark_mode = *THEME.read() == Theme::Dark;
+    let theme = use_context::<Signal<Theme>>();
+    let dark_mode = theme() == Theme::Dark;
     rsx! {
         div {
             label { class: format!("block text-sm font-medium {}", if dark_mode { "text-gray-300" } else { "text-gray-700" }), "{label}" }

src/components/dashboard/navbar.rs

@@ -1,15 +1,18 @@
 use crate::components::spinner::Spinner;
 use crate::components::spinner::SpinnerSize;
-use crate::pages::dashboard::toggle_theme;
+use crate::theme::Theme;
+use crate::theme::ThemeToggle;
 use dioxus::prelude::*;
 use gloo_storage::Storage;
 use gloo_storage::{LocalStorage, SessionStorage};
 
 #[component]
-pub fn Navbar(dark_mode: bool) -> Element {
+pub fn Navbar() -> Element {
     let mut show_dropdown = use_signal(|| false);
     let mut loading = use_signal(|| false);
     let navigator = use_navigator();
+    let theme = use_context::<Signal<Theme>>();
+    let dark_mode = theme() == Theme::Dark;
 
     let handle_logout = move |e: Event<MouseData>| {
         e.stop_propagation();
@@ -25,11 +28,7 @@ pub fn Navbar(dark_mode: bool) -> Element {
             h1 { class: "text-2xl font-semibold", "Dashboard" }
 
             div { class: "flex items-center space-x-4",
-                button {
-                    onclick: |_| toggle_theme(),
-                    class: "p-2 rounded-full text-lg",
-                    if dark_mode { "🌙" } else { "🌞" }
-                }
+                ThemeToggle {}
 
                 div { class: "relative",
                     button {