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/components/common/BottomNav.vue

@@ -1,10 +1,17 @@
 <template>
-  <div class="fixed bottom-0 left-0 right-0 h-16 group md:h-16">
-    <!-- Invisible hover trigger area for desktop -->
-    <div class="absolute inset-0 hidden md:block"></div>
+  <div
+    v-if="settingsStore.settings.ui.navigationMode !== 'hidden'"
+    class="fixed bottom-0 left-0 right-0 h-16 group md:h-16"
+  >
+    <!-- Invisible hover trigger area for desktop (only for hover mode) -->
+    <div
+      v-if="settingsStore.settings.ui.navigationMode === 'hover'"
+      class="absolute inset-0 hidden md:block"
+    ></div>
     <!-- Navigation bar -->
     <nav
-      class="absolute bottom-0 left-0 right-0 transform-none md:transform md:translate-y-full md:group-hover:translate-y-0 md:transition-transform md:duration-300 md:ease-in-out bg-white md:bg-transparent border-t md:border-t-0 border-gray-200 md:shadow-none shadow-lg"
+      class="absolute bottom-0 left-0 right-0 bg-white md:bg-transparent border-t md:border-t-0 border-gray-200 md:shadow-none shadow-lg"
+      :class="getNavigationClasses()"
     >
       <div class="flex justify-center md:pb-4 pb-2">
         <ul
@@ -67,9 +74,12 @@
             </router-link>
           </li>
           <li>
-            <a
-              class="flex flex-col items-center text-gray-400 cursor-not-allowed"
-              aria-disabled="true"
+            <router-link
+              to="/settings"
+              class="flex flex-col items-center font-medium"
+              :class="
+                $route.name === 'settings' ? 'text-green-700' : 'text-gray-600 hover:text-green-700'
+              "
             >
               <svg class="w-6 h-6 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path
@@ -86,7 +96,7 @@
                 />
               </svg>
               <span class="text-xs">Settings</span>
-            </a>
+            </router-link>
           </li>
         </ul>
       </div>
@@ -94,4 +104,32 @@
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+import { useSettingsStore } from '@/stores/settings'
+
+const settingsStore = useSettingsStore()
+
+// Compute navigation classes based on settings
+const getNavigationClasses = () => {
+  const mode = settingsStore.settings.ui.navigationMode
+
+  if (mode === 'always') {
+    // Always visible - no transform on desktop
+    return 'transform-none md:transform-none'
+  } else if (mode === 'hover') {
+    // Hover mode - original behavior
+    return 'transform-none md:transform md:translate-y-full md:group-hover:translate-y-0 md:transition-transform md:duration-300 md:ease-in-out'
+  }
+
+  // Default fallback
+  return 'transform-none md:transform md:translate-y-full md:group-hover:translate-y-0 md:transition-transform md:duration-300 md:ease-in-out'
+}
+
+// Initialize settings store
+onMounted(() => {
+  if (!settingsStore.lastSaved) {
+    settingsStore.initialize()
+  }
+})
+</script>