Add settings page and store with UI customization options

- Implement SettingsView with appearance, data, notifications, and
advanced tabs - Add settings store (Pinia) for theme, navigation,
notifications, and app config - Integrate settings store into HomeView
and BottomNav for theme and navigation mode - Add room management modal
and store methods for adding/removing rooms - Update
SensorManagementView with room management button and modal - Support
exporting/importing settings and resetting to defaults - Enable dark
mode via Tailwind config

src/views/SensorManagementView.vue

@@ -23,12 +23,24 @@
     <div class="flex flex-col lg:flex-row gap-4">
       <!-- Filters -->
       <div class="flex flex-col sm:flex-row gap-4 flex-1">
-        <select v-model="selectedRoom" class="px-4 py-2 border border-gray-200 rounded-lg bg-white">
-          <option value="">All Rooms</option>
-          <option v-for="room in energyStore.availableRooms" :key="room" :value="room">
-            {{ room }}
-          </option>
-        </select>
+        <div class="flex gap-2">
+          <select v-model="selectedRoom" class="px-4 py-2 border border-gray-200 rounded-lg bg-white flex-1">
+            <option value="">All Rooms</option>
+            <option v-for="room in energyStore.availableRooms" :key="room" :value="room">
+              {{ room }}
+            </option>
+          </select>
+          <button
+            @click="showRoomManagementModal = true"
+            class="px-3 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium transition-colors flex items-center gap-1"
+            title="Manage Rooms"
+          >
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+            </svg>
+            <span class="hidden sm:inline">Rooms</span>
+          </button>
+        </div>
 
         <select v-model="selectedType" class="px-4 py-2 border border-gray-200 rounded-lg bg-white">
           <option value="">All Types</option>
@@ -187,6 +199,12 @@
       @execute="handleActionExecute"
       @close="closeActionModal"
     />
+
+    <!-- Room Management Modal -->
+    <RoomManagementModal
+      v-if="showRoomManagementModal"
+      @close="showRoomManagementModal = false"
+    />
   </div>
 </template>
 
@@ -194,6 +212,7 @@
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useEnergyStore } from '@/stores/energy'
 import ActionModal from '@/components/modals/ActionModal.vue'
+import RoomManagementModal from '@/components/modals/RoomManagementModal.vue'
 import SimpleSensorCard from '@/components/cards/SimpleSensorCard.vue'
 import DetailedSensorCard from '@/components/cards/DetailedSensorCard.vue'
 
@@ -213,6 +232,9 @@ const selectedSensor = ref<any>(null)
 const selectedAction = ref<any>(null)
 const isExecutingAction = ref(false)
 
+// Room management modal
+const showRoomManagementModal = ref(false)
+
 const sensorList = computed(() => {
   return Array.from(energyStore.sensorDevices.values()).sort((a, b) => a.name.localeCompare(b.name))
 })