From 5f9cc828b3dd1a4e22ce6a63f7cd4440503e0958 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sun, 22 Jun 2025 22:10:14 +0200
Subject: [PATCH] Refine DCA dashboard display: Simplify text and enhance
 active stacking indicator with a new badge and spinner for improved user
 feedback when conditions are met.

---
 templates/satmachineclient/index.html | 34 ++++++++++++++++-----------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/templates/satmachineclient/index.html b/templates/satmachineclient/index.html
index 4ef5b0f..5c391cd 100644
--- a/templates/satmachineclient/index.html
+++ b/templates/satmachineclient/index.html
@@ -33,26 +33,32 @@
         <q-card-section class="text-center">
           <div class="row items-center">
             <div class="col-12 col-md-8">
-              <div class="text-h4 text-orange-8 q-mb-sm">
+              <div class="text-h4 text-orange-8">
                 ⚡ ${formatSats(dashboardData.total_sats_accumulated)}
-                <q-spinner-gears 
-                  v-if="dashboardData.current_fiat_balance > 0 && dashboardData.dca_status === 'active'"
-                  color="orange-7" 
-                  size="1.2em" 
-                  class="q-ml-sm"
-                />
               </div>
               <div class="text-h6 text-grey-7 q-mb-xs">
-                stacked and growing!
-                <span v-if="dashboardData.current_fiat_balance > 0 && dashboardData.dca_status === 'active'" class="text-orange-7 q-ml-xs">
-                  • actively stacking
-                </span>
+                stacked!
               </div>
               <div class="text-caption text-grey-6">
                 ${dashboardData.total_transactions} DCA ${dashboardData.total_transactions === 1 ? 'purchase' : 'purchases'} • <span class="text-weight-bold text-blue-8">${dashboardData.dca_mode}</span> mode
               </div>
-            </div>
-            <div class="col-12 col-md-4 q-mt-md">
+              <div v-if="dashboardData.current_fiat_balance > 0 && dashboardData.dca_status === 'active'" class="q-mt-xs column items-center">
+                    <div>
+                  <q-spinner-hearts 
+                    color="orange-7" 
+                    size="2.5em"
+                  />
+                  </div>
+                  <q-badge
+                  color="orange-9"
+                  text-color="white"
+                  style="font-size: 11px; padding: 4px 8px; font-weight: bold;"
+                  >
+                      currently stacking
+                  </q-badge>
+                 </div>
+              </div>
+            <div class="col-12 col-md-4">
               <q-circular-progress
                 show-value
                 font-size="12px"
@@ -61,7 +67,7 @@
                 :thickness="0.25"
                 color="orange-7"
                 track-color="orange-1"
-                class="q-ma-md text-orange-8"
+                class="q-mx-md q-ma-md text-orange-8"
               >
                 ${(getMilestoneProgress() || 0).toFixed(2)}%
               </q-circular-progress>