Refactor HomeView to use websocketStore instead of energyStore

src/views/HomeView.vue

@@ -19,14 +19,14 @@
         <MetricCard title="Current Energy" :content="currentEnergyValue" details="kWh" />
         <MetricCard
           title="Connection Status"
-          :content="energyStore.isConnected ? 'Connected' : 'Disconnected'"
+          :content="websocketStore.isConnected ? 'Connected' : 'Disconnected'"
         />
         <MetricCard title="Average Usage" :content="averageEnergyUsage" details="kWh" />
         <GraphMetricCard
           title="Real-time Energy"
           :content="currentEnergyValue"
           details="kWh"
-          :trend-data="energyStore.timeSeriesData.datasets[0].data.slice(-8)"
+          :trend-data="websocketStore.timeSeriesData.datasets[0].data.slice(-8)"
           trend-direction="neutral"
         />
         <GraphMetricCard
@@ -68,32 +68,32 @@ import AirQualityCard from '@/components/cards/AirQualityCard.vue'
 import { useEnergyStore } from '@/stores/energy'
 import { useSettingsStore } from '@/stores/settings'
 import { computed, onMounted, onUnmounted } from 'vue'
+import { useWebSocketStore } from '@/stores/websocket'
 
 const energyStore = useEnergyStore()
+const websocketStore = useWebSocketStore()
 const settingsStore = useSettingsStore()
 
 const currentEnergyValue = computed(() => {
-  return energyStore.latestMessage?.value?.toFixed(2) || '0.00'
+  return websocketStore.latestMessage?.energy?.value.toFixed(2) || '0.00'
 })
 
 const averageEnergyUsage = computed(() => {
-  const data = energyStore.timeSeriesData.datasets[0].data
+  const data = websocketStore.timeSeriesData.datasets[0].data
   if (data.length === 0) return '0.00'
   const sum = data.reduce((acc, val) => acc + val, 0)
   return (sum / data.length).toFixed(2)
 })
 
 onMounted(() => {
-  // Initialize settings
   settingsStore.initialize()
 
-  // Auto-connect based on settings
   if (settingsStore.settings.autoConnect) {
-    energyStore.connect(settingsStore.settings.websocketUrl)
+    websocketStore.connect(settingsStore.settings.websocketUrl)
   }
 })
 
 onUnmounted(() => {
-  energyStore.disconnect()
+  websocketStore.disconnect()
 })
 </script>