From bf6da6280cacc75a55784a764af457f44b16c86b Mon Sep 17 00:00:00 2001
From: kyuketski <qt.ireuo@yandex.com>
Date: Sat, 30 Aug 2025 19:11:20 +0300
Subject: [PATCH] refactor(ui): standardize and modularize settings UI
 components

- Replace inline styles with reusable CSS classes for better maintainability.
- Standardize toggle, select, and input components under consistent naming conventions (`wplace-settings-*`).
- Extract icon styling into dedicated CSS rules for consistency.
- Introduce grid layout for block size controls to improve responsiveness.
- Remove redundant styles and consolidate common patterns into shared classes.

Benefits:
- Improves code readability and reduces duplication.
- Enhances theming support by centralizing style definitions.
- Simplifies future updates to the settings UI structure.

Note:
- Ensure all theme variables (`--wplace-*`) are correctly defined in the respective theme files.
---
 Auto-Image.js         | 134 +++++++++++++++--------------------------
 auto-image-styles.css | 137 +++++++++++++++++++++++++++---------------
 2 files changed, 138 insertions(+), 133 deletions(-)

diff --git a/Auto-Image.js b/Auto-Image.js
index 88e5158..88080b8 100644
--- a/Auto-Image.js
+++ b/Auto-Image.js
@@ -3586,12 +3586,12 @@
                 ">
               </div>
               <!-- Blue Marble Toggle -->
-              <label for="enableBlueMarbleToggle" class="wplace-blue-marble-toggle">
+              <label for="enableBlueMarbleToggle" class="wplace-settings-toggle">
                   <div>
-                      <span class="wplace-blue-marble-title" style="color: ${
+                      <span class="wplace-settings-toggle-title" style="color: ${
                         theme.text || 'white'
                       };">Blue Marble Effect</span>
-                      <p class="wplace-blue-marble-description" style="color: ${
+                      <p class="wplace-settings-toggle-description" style="color: ${
                         theme.text ? `${theme.text}BB` : 'rgba(255,255,255,0.7)'
                       };">Renders a dithered "shredded" overlay.</p>
                   </div>
@@ -3632,12 +3632,12 @@
           </label>
           
           <!-- Batch Mode Selection -->
-          <div class="wplace-batch-mode-selection">
-            <label class="wplace-batch-mode-label">
+          <div class="wplace-mode-selection">
+            <label class="wplace-mode-label">
               <i class="fas fa-dice wplace-icon-dice"></i>
               Batch Mode
             </label>
-            <select id="batchModeSelect" class="wplace-batch-mode-select">
+            <select id="batchModeSelect" class="wplace-selector">
               <option value="normal" class="wplace-settings-option">📦 Normal (Fixed Size)</option>
               <option value="random" class="wplace-settings-option">🎲 Random (Range)</option>
             </select>
@@ -3685,121 +3685,87 @@
           </label>
         </div>
         
+        <!-- Todo separate styles of coord to css -->
         <!-- Coordinate Generation Section -->
-        <div style="margin-bottom: 25px;">
-          <label style="display: block; margin-bottom: 12px; color: white; font-weight: 500; font-size: 16px; display: flex; align-items: center; gap: 8px;">
-            <i class="fas fa-route" style="color: #4facfe; font-size: 16px;"></i>
+        <div class="wplace-settings-section">
+          <label class="wplace-settings-section-label">
+            <i class="fas fa-route wplace-icon-route"></i>
             Coordinate Generation
           </label>
           
           <!-- Mode Selection -->
-          <div style="margin-bottom: 15px;">
-            <label style="display: block; margin-bottom: 8px; color: rgba(255,255,255,0.9); font-weight: 500; font-size: 14px;">
-              <i class="fas fa-th" style="color: #f093fb; margin-right: 6px;"></i>
+          <div class="wplace-mode-selection">
+            <label class="wplace-mode-label">
+              <i class="fas fa-th wplace-icon-table"></i>
               Generation Mode
             </label>
-            <select id="coordinateModeSelect" style="
-              width: 100%;
-              padding: 10px 12px;
-              background: rgba(255,255,255,0.15);
-              color: white;
-              border: 1px solid rgba(255,255,255,0.2);
-              border-radius: 8px;
-              font-size: 13px;
-              outline: none;
-              cursor: pointer;
-            ">
-              <option value="rows" style="background: #2d3748; color: white;">📏 Rows (Horizontal Lines)</option>
-              <option value="columns" style="background: #2d3748; color: white;">📐 Columns (Vertical Lines)</option>
-              <option value="circle-out" style="background: #2d3748; color: white;">⭕ Circle Out (Center → Edges)</option>
-              <option value="circle-in" style="background: #2d3748; color: white;">⭕ Circle In (Edges → Center)</option>
-              <option value="blocks" style="background: #2d3748; color: white;">🟫 Blocks (Ordered)</option>
-              <option value="shuffle-blocks" style="background: #2d3748; color: white;">🎲 Shuffle Blocks (Random)</option>
+            <select id="coordinateModeSelect" class="wplace-selector">
+              <option value="rows" class="wplace-settings-option">📏 Rows (Horizontal Lines)</option>
+              <option value="columns" class="wplace-settings-option">📐 Columns (Vertical Lines)</option>
+              <option value="circle-out" class="wplace-settings-option">⭕ Circle Out (Center → Edges)</option>
+              <option value="circle-in" class="wplace-settings-option">⭕ Circle In (Edges → Center)</option>
+              <option value="blocks" class="wplace-settings-option">🟫 Blocks (Ordered)</option>
+              <option value="shuffle-blocks" class="wplace-settings-option">🎲 Shuffle Blocks (Random)</option>
             </select>
           </div>
           
           <!-- Direction Selection (only for rows/columns) -->
-          <div id="directionControls" style="margin-bottom: 15px;">
-            <label style="display: block; margin-bottom: 8px; color: rgba(255,255,255,0.9); font-weight: 500; font-size: 14px;">
-              <i class="fas fa-compass" style="color: #00f2fe; margin-right: 6px;"></i>
+          <div id="directionControls" class="wplace-mode-selection">
+            <label class="wplace-mode-label">
+              <i class="fas fa-compass wplace-icon-compass"></i>
               Starting Direction
             </label>
-            <select id="coordinateDirectionSelect" style="
-              width: 100%;
-              padding: 10px 12px;
-              background: rgba(255,255,255,0.15);
-              color: white;
-              border: 1px solid rgba(255,255,255,0.2);
-              border-radius: 8px;
-              font-size: 13px;
-              outline: none;
-              cursor: pointer;
-            ">
-              <option value="top-left" style="background: #2d3748; color: white;">↖️ Top-Left</option>
-              <option value="top-right" style="background: #2d3748; color: white;">↗️ Top-Right</option>
-              <option value="bottom-left" style="background: #2d3748; color: white;">↙️ Bottom-Left</option>
-              <option value="bottom-right" style="background: #2d3748; color: white;">↘️ Bottom-Right</option>
+            <select id="coordinateDirectionSelect" class="wplace-selector">
+              <option value="top-left" class="wplace-settings-option">↖️ Top-Left</option>
+              <option value="top-right" class="wplace-settings-option">↗️ Top-Right</option>
+              <option value="bottom-left" class="wplace-settings-option">↙️ Bottom-Left</option>
+              <option value="bottom-right" class="wplace-settings-option">↘️ Bottom-Right</option>
             </select>
           </div>
           
           <!-- Snake Pattern Toggle (only for rows/columns) -->
-          <div id="snakeControls" style="background: rgba(255,255,255,0.1); border-radius: 12px; padding: 18px; border: 1px solid rgba(255,255,255,0.1); margin-bottom: 15px;">
-            <label style="display: flex; align-items: center; justify-content: space-between; cursor: pointer;">
+          <div id="snakeControls" class="wplace-snake-pattern-controls wplace-settings-section-wrapper">
+            <label class="wplace-settings-toggle">
               <div>
-                <span style="font-weight: 500; color: white;">Snake Pattern</span>
-                <p style="font-size: 12px; color: rgba(255,255,255,0.7); margin: 4px 0 0 0;">Alternate direction for each row/column (zigzag pattern)</p>
+                <span class="wplace-settings-toggle-title" style="color: ${
+                  theme.text || 'white'
+                };">Snake Pattern</span>
+                <p class="wplace-settings-toggle-description" style="color: ${
+                  theme.text ? `${theme.text}BB` : 'rgba(255,255,255,0.7)'
+                };">Alternate direction for each row/column (zigzag pattern)</p>
               </div>
-              <input type="checkbox" id="coordinateSnakeToggle" style="
-                cursor: pointer; 
-                width: 20px; 
-                height: 20px;
-                accent-color: #4facfe;
-              "/>
+              <input type="checkbox" id="coordinateSnakeToggle" ${
+                state.coordinateSnake ? 'checked' : ''
+              } class="wplace-blue-marble-checkbox" style="
+                    accent-color: ${theme.highlight || '#48dbfb'};
+                  "/>
             </label>
           </div>
           
           <!-- Block Size Controls (only for blocks/shuffle-blocks) -->
-          <div id="blockControls" style="display: none; background: rgba(255,255,255,0.1); border-radius: 12px; padding: 18px; border: 1px solid rgba(255,255,255,0.1); margin-bottom: 15px;">
-            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
+          <div id="blockControls" class="wplace-block-size-controls wplace-settings-section-wrapper wplace-shuffle-block-size-controls">
+            <div class="wplace-block-size-grid">
               <div>
-                <label style="display: block; color: rgba(255,255,255,0.8); font-size: 12px; margin-bottom: 8px;">
-                  <i class="fas fa-arrows-alt-h" style="color: #4facfe; margin-right: 4px;"></i>
+                <label class="wplace-block-size-label">
+                  <i class="fas fa-arrows-alt-h wplace-icon-width"></i>
                   Block Width
                 </label>
-                <input type="number" id="blockWidthInput" min="1" max="50" value="6" style="
-                  width: 100%;
-                  padding: 10px 12px;
-                  background: rgba(255,255,255,0.1);
-                  color: white;
-                  border: 1px solid rgba(255,255,255,0.2);
-                  border-radius: 8px;
-                  font-size: 13px;
-                  outline: none;
-                ">
+                <input type="number" id="blockWidthInput" min="1" max="50" value="6" class="wplace-block-size-input">
               </div>
               <div>
                 <label style="display: block; color: rgba(255,255,255,0.8); font-size: 12px; margin-bottom: 8px;">
-                  <i class="fas fa-arrows-alt-v" style="color: #00f2fe; margin-right: 4px;"></i>
+                  <i class="fas fa-arrows-alt-v wplace-icon-height"></i>
                   Block Height
                 </label>
-                <input type="number" id="blockHeightInput" min="1" max="50" value="2" style="
-                  width: 100%;
-                  padding: 10px 12px;
-                  background: rgba(255,255,255,0.1);
-                  color: white;
-                  border: 1px solid rgba(255,255,255,0.2);
-                  border-radius: 8px;
-                  font-size: 13px;
-                  outline: none;
-                ">
+                <input type="number" id="blockHeightInput" min="1" max="50" value="2" class="wplace-block-size-input">
               </div>
             </div>
-            <p style="font-size: 11px; color: rgba(255,255,255,0.6); margin: 8px 0 0 0; text-align: center;">
+            <p class="wplace-block-size-description">
               🧱 Block dimensions for block-based generation modes
             </p>
           </div>
         </div>
-        <!-- Todo separate styles of coord to css -->
+        
         <!-- Notifications Section -->
         <div class="wplace-settings-section">
           <label class="wplace-settings-section-label">
diff --git a/auto-image-styles.css b/auto-image-styles.css
index 2387556..8315d06 100644
--- a/auto-image-styles.css
+++ b/auto-image-styles.css
@@ -1056,7 +1056,7 @@
   display: none;
   min-width: 400px;
   max-width: 500px;
-  max-height: 80vh;
+  max-height: 100vh;
   overflow-y: auto;
   animation: slideIn 0.3s ease-out;
   border: 1px solid var(--wplace-border-ghost);
@@ -1091,8 +1091,8 @@
 
 /* Settings content container */
 .wplace-settings-content {
-  padding: 25px;
-  max-height: 70vh;
+  padding: 25px 25px 0 25px;
+  max-height: 67vh;
   overflow-y: auto;
 }
 
@@ -1171,36 +1171,6 @@
   margin: 8px 0 0 0;
 }
 
-/* Batch Mode Controls */
-.wplace-batch-mode-selection {
-  margin-bottom: 15px;
-}
-
-.wplace-batch-mode-label {
-  display: block;
-  margin-bottom: 8px;
-  color: var(--wplace-text-secondary);
-  font-weight: 500;
-  font-size: 14px;
-}
-
-.wplace-icon-dice {
-  color: var(--wplace-icon-palette);
-  margin-right: 6px;
-}
-
-.wplace-batch-mode-select {
-  width: 100%;
-  padding: 10px 12px;
-  background: var(--wplace-bg-input);
-  color: var(--wplace-text);
-  border: 1px solid var(--wplace-border-subtle);
-  border-radius: 8px;
-  font-size: 13px;
-  outline: none;
-  cursor: pointer;
-}
-
 /* Batch Controls */
 .wplace-batch-controls {
   padding: 18px;
@@ -1333,18 +1303,18 @@
   cursor: pointer;
 }
 
-.wplace-blue-marble-toggle {
+.wplace-settings-toggle {
   display: flex;
   align-items: center;
   justify-content: space-between;
   cursor: pointer;
 }
 
-.wplace-blue-marble-title {
+.wplace-settings-toggle-title {
   font-weight: 500;
 }
 
-.wplace-blue-marble-description {
+.wplace-settings-toggle-description {
   font-size: 12px;
   margin: 4px 0 0 0;
 }
@@ -1403,7 +1373,6 @@
 .wplace-settings-footer {
   border-top: 1px solid var(--wplace-border-ghost);
   padding: 20px;
-  margin-top: 10px;
   position: sticky;
   bottom: 0;
   background: var(--wplace-secondary);
@@ -1814,12 +1783,6 @@
 /* Settings select option styling moved to theme files */
 /* Settings description styling moved to theme files */
 
-.wplace-settings-footer {
-  border-top: 1px solid var(--wplace-border-ghost);
-  padding-top: 20px;
-  margin-top: 10px;
-}
-
 .wplace-settings-apply-btn {
   width: 100%;
   border: none;
@@ -1897,18 +1860,18 @@
   box-shadow: var(--wplace-shadow-slider-hover);
 }
 
-.wplace-blue-marble-toggle {
+.wplace-settings-toggle {
   display: flex;
   align-items: center;
   justify-content: space-between;
   cursor: pointer;
 }
 
-.wplace-blue-marble-title {
+.wplace-settings-toggle-title {
   font-weight: 500;
 }
 
-.wplace-blue-marble-description {
+.wplace-settings-toggle-description {
   font-size: 12px;
   color: var(--wplace-muted-text);
   margin: 4px 0 0 0;
@@ -1921,12 +1884,88 @@
   accent-color: var(--wplace-highlight);
 }
 
+/* Coordinate Generation Controls */
+.wplace-icon-route {
+  color: var(--wplace-icon-primary);
+  font-size: 16px;
+}
+
+.wplace-icon-table {
+  color: var(--wplace-icon-palette);
+  margin-right: 6px;
+}
+
+.wplace-icon-compass {
+  color: var(--wplace-icon-secondary);
+  margin-right: 6px;
+}
+
+/* Snake Pattern Controls */
+.wplace-snake-pattern-controls {
+  padding: 18px;
+  margin-bottom: 15px;
+  /* Theme-specific styling applied via theme files */
+}
+
+/* Block Size Controls */
+.wplace-block-size-controls {
+  padding: 18px;
+  margin-bottom: 15px;
+  /* Theme-specific styling applied via theme files */
+}
+
+.wplace-block-size-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 15px;
+}
+
+.wplace-block-size-label {
+  display: block;
+  color: var(--wplace-text-faded);
+  font-size: 12px;
+  margin-bottom: 8px;
+}
+
+.wplace-icon-width {
+  color: var(--wplace-icon-primary);
+  margin-right: 4px;
+}
+
+.wplace-icon-height {
+  color: var(--wplace-icon-secondary);
+  margin-right: 4px;
+}
+
+.wplace-block-size-input {
+  width: 100%;
+  padding: 10px 12px;
+  background: var(--wplace-bg-subtle);
+  color: var(--wplace-text);
+  border: 1px solid var(--wplace-border-subtle);
+  border-radius: 8px;
+  font-size: 13px;
+  outline: none;
+}
+
+.wplace-block-size-description {
+  font-size: 11px;
+  color: var(--wplace-text-dim);
+  margin: 8px 0 0 0;
+  text-align: center;
+}
+
+/* Random Block Controls */
+.wplace-shuffle-block-size-controls {
+  display: none;
+}
+
 /* Batch Mode Controls */
-.wplace-batch-mode-selection {
+.wplace-mode-selection {
   margin-bottom: 15px;
 }
 
-.wplace-batch-mode-label {
+.wplace-mode-label {
   display: block;
   margin-bottom: 8px;
   color: var(--wplace-text-secondary);
@@ -1939,7 +1978,7 @@
   margin-right: 6px;
 }
 
-.wplace-batch-mode-select {
+.wplace-selector {
   width: 100%;
   padding: 10px 12px;
   background: var(--wplace-bg-input);