feat(zones): rename tabs to zones across api, ui, and storage

Made-with: Cursor

src/static/style.css

@@ -203,7 +203,7 @@ body.preset-ui-run .edit-mode-only {
     overflow: hidden;
 }
 
-.tabs-container {
+.zones-container {
     background-color: transparent;
     padding: 0.5rem 0;
     flex: 1;
@@ -213,7 +213,7 @@ body.preset-ui-run .edit-mode-only {
     align-items: center;
 }
 
-.tabs-list {
+.zones-list {
     display: flex;
     gap: 0.5rem;
     overflow-x: auto;
@@ -222,7 +222,7 @@ body.preset-ui-run .edit-mode-only {
     min-width: 0;
 }
 
-.tab-button {
+.zone-button {
     padding: 0.5rem 1rem;
     background-color: #3a3a3a;
     color: white;
@@ -234,16 +234,16 @@ body.preset-ui-run .edit-mode-only {
     transition: background-color 0.2s;
 }
 
-.tab-button:hover {
+.zone-button:hover {
     background-color: #4a4a4a;
 }
 
-.tab-button.active {
+.zone-button.active {
     background-color: #6a5acd;
     color: white;
 }
 
-.tab-content {
+.zone-content {
     flex: 1;
     display: block;
     overflow-y: auto;
@@ -255,7 +255,7 @@ body.preset-ui-run .edit-mode-only {
     align-items: center;
 }
 
-.tab-brightness-group {
+.zone-brightness-group {
     display: flex;
     flex-direction: column;
     align-items: stretch;
@@ -263,7 +263,7 @@ body.preset-ui-run .edit-mode-only {
     margin-left: auto;
 }
 
-.tab-brightness-group label {
+.zone-brightness-group label {
     white-space: nowrap;
     font-size: 0.85rem;
 }
@@ -509,8 +509,8 @@ body.preset-ui-run .edit-mode-only {
     padding: 0;
 }
 
-/* Tab preset selecting area: 3 columns, vertical scroll only */
-#presets-list-tab {
+/* Zone preset selecting area: 3 columns, vertical scroll only */
+#presets-list-zone {
     flex: 1;
     min-height: 0;
     overflow-y: auto;
@@ -750,8 +750,8 @@ body.preset-ui-run .edit-mode-only {
     background-color: #5a4f9f;
 }
 
-/* Preset select buttons inside the tab grid */
-#presets-list-tab .pattern-button {
+/* Preset select buttons inside the zone grid */
+#presets-list-zone .pattern-button {
     display: flex;
 }
 .pattern-button .pattern-button-label {
@@ -966,12 +966,12 @@ body.preset-ui-run .edit-mode-only {
         padding: 0.4rem 0.7rem;
     }
 
-    .tabs-container {
+    .zones-container {
         padding: 0.5rem 0;
         border-bottom: none;
     }
 
-    .tab-content {
+    .zone-content {
         padding: 0.5rem;
     }
 
@@ -1064,24 +1064,24 @@ body.preset-ui-run .edit-mode-only {
     border-radius: 4px;
 }
 
-.tab-modal-create-row {
+.zone-modal-create-row {
     flex-wrap: wrap;
     align-items: center;
 }
 
-.tab-modal-create-row input[type="text"] {
+.zone-modal-create-row input[type="text"] {
     flex: 1;
     min-width: 8rem;
 }
 
-.tab-devices-label {
+.zone-devices-label {
     display: block;
     margin-top: 0.75rem;
     margin-bottom: 0.35rem;
     font-weight: 600;
 }
 
-.tab-devices-editor {
+.zone-devices-editor {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
@@ -1090,12 +1090,12 @@ body.preset-ui-run .edit-mode-only {
     overflow-y: auto;
 }
 
-.tab-device-row-label {
+.zone-device-row-label {
     flex: 1;
     min-width: 0;
 }
 
-.tab-device-add-select {
+.zone-device-add-select {
     flex: 1;
     min-width: 10rem;
     padding: 0.5rem;
@@ -1105,19 +1105,19 @@ body.preset-ui-run .edit-mode-only {
     color: white;
 }
 
-.tab-devices-add {
+.zone-devices-add {
     margin-top: 0;
     flex-wrap: wrap;
 }
 
-.tab-presets-section-label {
+.zone-presets-section-label {
     display: block;
     margin-top: 1rem;
     margin-bottom: 0.35rem;
     font-weight: 600;
 }
 
-.edit-tab-presets-scroll {
+.edit-zone-presets-scroll {
     max-height: 200px;
     overflow-y: auto;
     margin-bottom: 1rem;
@@ -1195,7 +1195,7 @@ body.preset-ui-run .edit-mode-only {
 }
 /* Presets list: 3 columns and vertical scroll (defined above); mobile same */
 @media (max-width: 800px) {
-    #presets-list-tab {
+    #presets-list-zone {
         grid-template-columns: repeat(3, minmax(0, 1fr));
     }
 }
@@ -1234,8 +1234,8 @@ body.preset-ui-run .edit-mode-only {
     font-size: 0.9rem;
 }
 
-/* Tab content placeholder (no tab selected) */
-.tab-content-placeholder {
+/* Zone content placeholder (no zone selected) */
+.zone-content-placeholder {
     padding: 2rem;
     text-align: center;
     color: #aaa;