From f2e1b783b7bae8fb93ff9fb024d7e830fd04cc8a Mon Sep 17 00:00:00 2001
From: Gabriel Viganotti <gabrielviganotti@gmail.com>
Date: Tue, 10 Dec 2024 17:48:31 -0300
Subject: [PATCH] feat: show nodes with a different background color when
 inactive

---
 src/node_actions.rs    |  3 ++-
 src/nodes_list_view.rs | 22 +++++++++++++++-------
 style/tailwind.css     | 24 ++++++++++++++++++++----
 3 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/src/node_actions.rs b/src/node_actions.rs
index 42bea1b..c978dcb 100644
--- a/src/node_actions.rs
+++ b/src/node_actions.rs
@@ -124,7 +124,7 @@ pub fn NodesActionsView() -> impl IntoView {
         context
             .selecting_nodes
             .update(|(_, executing, _)| *executing = true);
-        let selected = context.selecting_nodes.get_untracked().2;
+        let selected = &context.selecting_nodes.read_untracked().2;
         let nodes = context
             .nodes
             .read_untracked()
@@ -178,6 +178,7 @@ pub fn NodesActionsView() -> impl IntoView {
                 <button
                     type="button"
                     on:click=move |_| {
+                        show_actions_menu.set(false);
                         context
                             .selecting_nodes
                             .update(|(f, _, s)| {
diff --git a/src/nodes_list_view.rs b/src/nodes_list_view.rs
index 03f57e8..11e919c 100644
--- a/src/nodes_list_view.rs
+++ b/src/nodes_list_view.rs
@@ -253,8 +253,14 @@ fn NodeInstanceView(
     view! {
         <div
             on:click=move |_| node_card_clicked()
-            class=move || { if is_selected() { "node-card-selected" } else { "node-card" } }
+            class=move || match (is_selected(), info.read().status.is_active()) {
+                (true, true) => "node-card-selected node-card-active",
+                (true, false) => "node-card-selected node-card-inactive",
+                (false, true) => "node-card node-card-active",
+                (false, false) => "node-card node-card-inactive",
+            }
         >
+
             <div class="flex justify-end">
                 <Show when=move || is_selection_on() fallback=move || view! { "" }.into_view()>
                     <NodeSelection info />
@@ -585,12 +591,14 @@ fn ButtonStopStart(info: RwSignal<NodeInstanceInfo>) -> impl IntoView {
     view! {
         <div class="tooltip tooltip-bottom tooltip-info" data-tip=tip>
             <button
-                class=move || {
-                    if is_selecting_nodes() || info.read().status.is_transitioning() {
-                        "btn-disabled-node-action"
-                    } else {
-                        "btn-node-action"
-                    }
+                class=move || match (
+                    is_selecting_nodes() || info.read().status.is_transitioning(),
+                    info.read().status.is_active(),
+                ) {
+                    (true, true) => "btn-disabled-node-action btn-node-action-active",
+                    (true, false) => "btn-disabled-node-action btn-node-action-inactive",
+                    (false, true) => "btn-node-action btn-node-action-active",
+                    (false, false) => "btn-node-action btn-node-action-inactive",
                 }
                 on:click=move |_| spawn_local(async move {
                     if info.read_untracked().status.is_inactive() {
diff --git a/style/tailwind.css b/style/tailwind.css
index df4a324..fe61c76 100644
--- a/style/tailwind.css
+++ b/style/tailwind.css
@@ -7,19 +7,35 @@
 }
 
 .btn-node-action {
-    @apply inline-flex items-center ml-1 px-1 py-1 text-xs font-medium text-gray-900 bg-white border border-gray-200 rounded hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white;
+    @apply inline-flex items-center ml-1 px-1 py-1 text-xs font-medium text-gray-900 border border-gray-200 rounded hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-blue-500 dark:focus:text-white;
 }
 
 .btn-disabled-node-action {
-    @apply btn-disabled inline-flex items-center ml-1 px-1 py-1 text-xs font-medium text-gray-200 bg-white border border-gray-200 rounded hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-700 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white;
+    @apply btn-disabled inline-flex items-center ml-1 px-1 py-1 text-xs font-medium text-gray-200 border border-gray-200 rounded hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-700 dark:text-gray-700 dark:hover:text-white dark:focus:ring-blue-500 dark:focus:text-white;
+}
+
+.btn-node-action-active {
+    @apply bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700;
+}
+
+.btn-node-action-inactive {
+    @apply bg-gray-50 hover:bg-gray-200 dark:bg-gray-900 dark:hover:bg-gray-800;
 }
 
 .node-card {
-    @apply relative max-w-sm m-2 p-4 bg-gray-50 border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700;
+    @apply relative max-w-sm m-2 p-4 border border-gray-200 rounded-lg shadow dark:border-gray-700;
 }
 
 .node-card-selected {
-    @apply relative max-w-sm m-2 p-4 bg-gray-50 border border-blue-700 rounded-lg shadow dark:bg-gray-800 dark:border-blue-400;
+    @apply relative max-w-sm m-2 p-4 border border-blue-700 rounded-lg shadow dark:border-blue-400;
+}
+
+.node-card-active {
+    @apply bg-gray-100 dark:bg-gray-800;
+}
+
+.node-card-inactive {
+    @apply bg-gray-50 dark:bg-gray-900;
 }
 
 .node-info-item {