Restructure bubble card modules folder

bubble/Main Button Floors/code.js

@@ -0,0 +1,42 @@
+${(() => {
+    const occupancy = hass?.states[this.config?.main_button_floors?.occupancy_entity]?.state || '';
+    const hot = hass?.states[this.config?.main_button_floors?.hot_entity]?.state || '';
+    const cold = hass?.states[this.config?.main_button_floors?.cold_entity]?.state || '';
+
+    let bg_color = 'var(--bubble-main-background-color)';
+    let occupied_color = 'var(--accent-color)';
+    let hot_color = 'var(--error-color)';
+    let cold_color = 'var(--purple-color)';
+
+    // Main button background
+    const mainButton = card?.querySelector('.bubble-button-background');
+    if (mainButton) {
+        mainButton.style.opacity = '1';
+        mainButton.style.backgroundColor = occupancy === 'on' ? occupied_color : bg_color;
+        mainButton.style.transition = 'background-color 1s';
+    }
+
+    // Sub button 1
+    const subButton1 = card?.querySelector('.bubble-sub-button-1');
+    if (subButton1) {
+        if (hot === 'on') {
+            subButton1.style.backgroundColor = hot_color;
+        } else if (cold === 'on') {
+            subButton1.style.backgroundColor = cold_color;
+        } else if (occupancy === 'on') {
+            subButton1.style.backgroundColor = occupied_color;
+        } else {
+            subButton1.style.backgroundColor = bg_color;
+        }
+    }
+
+    // Unavailable state
+    if (mainButton && occupancy === 'unavailable') {
+        mainButton.classList.add('is-unavailable');
+    } else if (mainButton) {
+        mainButton.classList.remove('is-unavailable');
+    }
+
+    // No CSS string needed
+    return '';
+})()}

bubble/Main Button Floors/editor.yaml

@@ -0,0 +1,22 @@
+- type: expandable
+  title: Entity Configuration
+  icon: mdi:format-list-bulleted
+  schema:
+    - name: occupancy_entity
+      label: Occupancy Entity
+      selector:
+        entity:
+          device_class: occupancy
+      required: false
+    - name: hot_entity
+      label: Hot Entity
+      selector:
+        entity:
+          device_class: heat
+      required: false
+    - name: cold_entity
+      label: Cold Entity
+      selector:
+        entity:
+          device_class: cold
+      required: false

bubble/Main Button Outdoors/code.js

@@ -0,0 +1,24 @@
+${(() => {
+    const occupancy = hass?.states[this.config?.main_button_outdoors?.occupancy_entity]?.state || '';
+
+    let bg_color = 'var(--bubble-main-background-color)';
+    let occupied_color = 'var(--accent-color)';
+
+    // Main button background
+    const mainButton = card?.querySelector('.bubble-button-background');
+    if (mainButton) {
+        mainButton.style.opacity = '1';
+        mainButton.style.backgroundColor = occupancy === 'on' ? occupied_color : bg_color;
+        mainButton.style.transition = 'background-color 1s';
+    }
+
+    // Unavailable state
+    if (mainButton && occupancy === 'unavailable') {
+        mainButton.classList.add('is-unavailable');
+    } else if (mainButton) {
+        mainButton.classList.remove('is-unavailable');
+    }
+
+    // No CSS string needed
+    return '';
+})()}

bubble/Main Button Outdoors/editor.yaml

@@ -0,0 +1,10 @@
+- type: expandable
+  title: Entity Configuration
+  icon: mdi:format-list-bulleted
+  schema:
+    - name: occupancy_entity
+      label: Occupancy Entity
+      selector:
+        entity:
+          device_class: occupancy
+      required: false

bubble/Main Button State Red/code.js

@@ -0,0 +1,24 @@
+${(() => {
+    const state = hass?.states[this.config?.entity]?.state || '';
+
+    let bg_color = 'var(--bubble-main-background-color)';
+    let red_color = 'var(--error-color)';
+
+    // Main button background
+    const mainButton = card?.querySelector('.bubble-button-background');
+    if (mainButton) {
+        mainButton.style.opacity = '1';
+        mainButton.style.backgroundColor = state === 'on' ? red_color : bg_color;
+        mainButton.style.transition = 'background-color 1s';
+    }
+
+    // Unavailable state
+    if (mainButton && state === 'unavailable') {
+        mainButton.classList.add('is-unavailable');
+    } else if (mainButton) {
+        mainButton.classList.remove('is-unavailable');
+    }
+
+    // No CSS string needed
+    return '';
+})()}

bubble/Popup Accent Color Button/code.js

@@ -0,0 +1,24 @@
+${(() => {
+    const state = hass?.states[this.config?.entity]?.state || '';
+
+    let bg_color = 'var(--background-color-2)';
+    let accent_color = 'var(--accent-color)';
+
+    // Main button background
+    const mainButton = card?.querySelector('.bubble-button-background');
+    if (mainButton) {
+        mainButton.style.opacity = '1';
+        mainButton.style.backgroundColor = state === 'on' ? accent_color : bg_color;
+        mainButton.style.transition = 'background-color 1s';
+    }
+
+    // Unavailable state
+    if (mainButton && state === 'unavailable') {
+        mainButton.classList.add('is-unavailable');
+    } else if (mainButton) {
+        mainButton.classList.remove('is-unavailable');
+    }
+
+    // No CSS string needed
+    return '';
+})()}

bubble/Popup Security Button/code.js

@@ -0,0 +1,24 @@
+${(() => {
+    const state = hass?.states[this.config?.entity]?.state || '';
+
+    let bg_color = 'var(--background-color-2)';
+    let red_color = 'var(--error-color)';
+
+    // Main button background
+    const mainButton = card?.querySelector('.bubble-button-background');
+    if (mainButton) {
+        mainButton.style.opacity = '1';
+        mainButton.style.backgroundColor = state === 'on' ? red_color : bg_color;
+        mainButton.style.transition = 'background-color 1s';
+    }
+
+    // Unavailable state
+    if (mainButton && state === 'unavailable') {
+        mainButton.classList.add('is-unavailable');
+    } else if (mainButton) {
+        mainButton.classList.remove('is-unavailable');
+    }
+
+    // No CSS string needed
+    return '';
+})()}

bubble/Popup Temperature Button/code.js

@@ -0,0 +1,32 @@
+${(() => {
+    const hot = hass?.states[this.config?.popup_temperature_button?.hot_entity]?.state || '';
+    const cold = hass?.states[this.config?.popup_temperature_button?.cold_entity]?.state || '';
+
+    let bg_color = 'var(--background-color-2)';
+    let hot_color = 'var(--error-color)';
+    let cold_color = 'var(--cyan-color)';
+
+    // Main button background
+    const mainButton = card?.querySelector('.bubble-button-background');
+    if (mainButton) {
+        mainButton.style.opacity = '1';
+        if (hot === 'on') {
+            mainButton.style.backgroundColor = hot_color;
+        } else if (cold === 'on') {
+            mainButton.style.backgroundColor = cold_color;
+        } else {
+            mainButton.style.backgroundColor = bg_color;
+        }
+        mainButton.style.transition = 'background-color 1s';
+    }
+
+    // Unavailable state
+    if (mainButton && state === 'unavailable') {
+        mainButton.classList.add('is-unavailable');
+    } else if (mainButton) {
+        mainButton.classList.remove('is-unavailable');
+    }
+
+    // No CSS string needed
+    return '';
+})()}

bubble/Popup Temperature Button/editor.yaml

@@ -0,0 +1,14 @@
+- type: expandable
+  title: Entity Configuration
+  icon: mdi:format-list-bulleted
+  schema:
+    - name: hot_entity
+      label: Hot Entity
+      selector:
+        entity:
+          device_class: heat
+    - name: cold_entity
+      label: Cold Entity
+      selector:
+        entity:
+          device_class: cold