feat: add refresh button to reload latest data from Supabase

src/views/LiveView.vue

@@ -6,6 +6,14 @@
         <AssetTabs v-model="asset" :ordered-assets="orderedAssets" />
       </div>
       <div class="toolbar__right">
+        <button 
+          class="refresh-btn" 
+          @click="refreshData" 
+          :disabled="refreshing"
+          title="Refresh data from database"
+        >
+          <i class="pi pi-refresh" :class="{ 'spinning': refreshing }"></i>
+        </button>
         <div class="mode">
           <button class="mode__btn" :class="{ 'is-active': mode==='usd' }" @click="mode='usd'">$</button>
           <button class="mode__btn" :class="{ 'is-active': mode==='pct' }" @click="mode='pct'">%</button>
@@ -124,6 +132,7 @@ const ASSET_CUTOFF = { BTC: '2025-08-01' }
 const mode = ref('usd')
 const asset = ref('BTC')
 const rowsRef = ref([])
+const refreshing = ref(false)
 let allDecisions = []
 const cards = shallowRef([])
 
@@ -146,6 +155,23 @@ onMounted(async () => {
   }
 })
 
+/* ---------- refresh data ---------- */
+async function refreshData() {
+  if (refreshing.value) return
+  refreshing.value = true
+  try {
+    console.log('[Live] Force refreshing data from Supabase...')
+    await dataService.forceRefresh()
+    rowsRef.value = Array.isArray(dataService.tableRows) ? dataService.tableRows : []
+    allDecisions = getAllDecisions() || []
+    console.log('[Live] Data refreshed successfully')
+  } catch (e) {
+    console.error('[Live] Error refreshing data:', e)
+  } finally {
+    refreshing.value = false
+  }
+}
+
 /* ---------- helpers ---------- */
 const fmtUSD = (n) => (n ?? 0).toLocaleString(undefined, { style: 'currency', currency: 'USD', maximumFractionDigits: 2 })
 const signedMoney = (n) => `${n >= 0 ? '+' : '−'}${fmtUSD(Math.abs(n))}`
@@ -335,6 +361,35 @@ watch(
 
 /* toolbar */
 .toolbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0 10px; background: #ffffff; color: #0f172a; border-bottom: 1px solid #E7ECF3; }
+.toolbar__right { display: flex; align-items: center; gap: 12px; }
+.refresh-btn { 
+  height: 30px; 
+  width: 30px; 
+  border-radius: 10px; 
+  border: 1px solid #D7DDE7; 
+  background: #ffffff; 
+  color: #0f172a; 
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+}
+.refresh-btn:hover:not(:disabled) { 
+  background: #f8f9fa; 
+  border-color: #0f172a;
+}
+.refresh-btn:disabled { 
+  opacity: 0.5; 
+  cursor: not-allowed; 
+}
+.refresh-btn i.spinning {
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
 .mode__btn { height: 30px; min-width: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid #D7DDE7; background: #ffffff; font-weight: 700; color: #0f172a; }
 .mode__btn.is-active { background: #0f172a; color: #ffffff; border-color: #0f172a; }