add auto play on boot, fix UI loading performance issue

main.py

@@ -70,6 +70,25 @@ async def lifespan(app: FastAPI):
         connection_manager.connect_device()
     except Exception as e:
         logger.warning(f"Failed to auto-connect to serial port: {str(e)}")
+    
+    # Check if auto_play mode is enabled and auto-play playlist (right after connection attempt)
+    if state.auto_play_enabled and state.auto_play_playlist:
+        logger.info(f"auto_play mode enabled, checking for connection before auto-playing playlist: {state.auto_play_playlist}")
+        try:
+            # Check if we have a valid connection before starting playlist
+            if state.conn and hasattr(state.conn, 'is_connected') and state.conn.is_connected():
+                logger.info(f"Connection available, starting auto-play playlist: {state.auto_play_playlist} with options: run_mode={state.auto_play_run_mode}, pause_time={state.auto_play_pause_time}, clear_pattern={state.auto_play_clear_pattern}, shuffle={state.auto_play_shuffle}")
+                asyncio.create_task(playlist_manager.run_playlist(
+                    state.auto_play_playlist,
+                    pause_time=state.auto_play_pause_time,
+                    clear_pattern=state.auto_play_clear_pattern,
+                    run_mode=state.auto_play_run_mode,
+                    shuffle=state.auto_play_shuffle
+                ))
+            else:
+                logger.warning("No hardware connection available, skipping auto_play mode auto-play")
+        except Exception as e:
+            logger.error(f"Failed to auto-play auto_play playlist: {str(e)}")
         
     try:
         mqtt_handler = mqtt.init_mqtt()
@@ -98,6 +117,14 @@ app.mount("/static", StaticFiles(directory="static"), name="static")
 class ConnectRequest(BaseModel):
     port: Optional[str] = None
 
+class auto_playModeRequest(BaseModel):
+    enabled: bool
+    playlist: Optional[str] = None
+    run_mode: Optional[str] = "loop"
+    pause_time: Optional[float] = 5.0
+    clear_pattern: Optional[str] = "adaptive"
+    shuffle: Optional[bool] = False
+
 class CoordinateRequest(BaseModel):
     theta: float
     rho: float
@@ -217,6 +244,37 @@ async def index(request: Request):
 async def settings(request: Request):
     return templates.TemplateResponse("settings.html", {"request": request, "app_name": state.app_name})
 
+@app.get("/api/auto_play-mode")
+async def get_auto_play_mode():
+    """Get current auto_play mode settings."""
+    return {
+        "enabled": state.auto_play_enabled,
+        "playlist": state.auto_play_playlist,
+        "run_mode": state.auto_play_run_mode,
+        "pause_time": state.auto_play_pause_time,
+        "clear_pattern": state.auto_play_clear_pattern,
+        "shuffle": state.auto_play_shuffle
+    }
+
+@app.post("/api/auto_play-mode")
+async def set_auto_play_mode(request: auto_playModeRequest):
+    """Update auto_play mode settings."""
+    state.auto_play_enabled = request.enabled
+    if request.playlist is not None:
+        state.auto_play_playlist = request.playlist
+    if request.run_mode is not None:
+        state.auto_play_run_mode = request.run_mode
+    if request.pause_time is not None:
+        state.auto_play_pause_time = request.pause_time
+    if request.clear_pattern is not None:
+        state.auto_play_clear_pattern = request.clear_pattern
+    if request.shuffle is not None:
+        state.auto_play_shuffle = request.shuffle
+    state.save()
+    
+    logger.info(f"auto_play mode {'enabled' if request.enabled else 'disabled'}, playlist: {request.playlist}")
+    return {"success": True, "message": "auto_play mode settings updated"}
+
 @app.get("/list_serial_ports")
 async def list_ports():
     logger.debug("Listing available serial ports")
@@ -271,20 +329,29 @@ async def list_theta_rho_files():
 
 @app.get("/list_theta_rho_files_with_metadata")
 async def list_theta_rho_files_with_metadata():
-    """Get list of theta-rho files with metadata for sorting and filtering."""
+    """Get list of theta-rho files with metadata for sorting and filtering.
+    
+    Optimized to process files asynchronously and support request cancellation.
+    """
     from modules.core.cache_manager import get_pattern_metadata
+    import asyncio
+    from concurrent.futures import ThreadPoolExecutor
     
     files = pattern_manager.list_theta_rho_files()
     files_with_metadata = []
     
-    for file_path in files:
+    # Use ThreadPoolExecutor for I/O-bound operations
+    executor = ThreadPoolExecutor(max_workers=4)
+    
+    def process_file(file_path):
+        """Process a single file and return its metadata."""
         try:
             full_path = os.path.join(pattern_manager.THETA_RHO_DIR, file_path)
             
             # Get file stats
             file_stat = os.stat(full_path)
             
-            # Get cached metadata
+            # Get cached metadata (this should be fast if cached)
             metadata = get_pattern_metadata(file_path)
             
             # Extract full folder path from file path
@@ -301,7 +368,7 @@ async def list_theta_rho_files_with_metadata():
             # Use modification time (mtime) for "date modified"
             date_modified = file_stat.st_mtime
             
-            file_info = {
+            return {
                 'path': file_path,
                 'name': file_name,
                 'category': category,
@@ -309,8 +376,6 @@ async def list_theta_rho_files_with_metadata():
                 'coordinates_count': metadata.get('total_coordinates', 0) if metadata else 0
             }
             
-            files_with_metadata.append(file_info)
-            
         except Exception as e:
             logger.warning(f"Error getting metadata for {file_path}: {str(e)}")
             # Include file with minimal info if metadata fails
@@ -319,13 +384,25 @@ async def list_theta_rho_files_with_metadata():
                 category = '/'.join(path_parts[:-1])
             else:
                 category = 'root'
-            files_with_metadata.append({
+            return {
                 'path': file_path,
                 'name': os.path.splitext(os.path.basename(file_path))[0],
                 'category': category,
                 'date_modified': 0,
                 'coordinates_count': 0
-            })
+            }
+    
+    # Process files in parallel using asyncio
+    loop = asyncio.get_event_loop()
+    tasks = [loop.run_in_executor(executor, process_file, file_path) for file_path in files]
+    
+    # Process results as they complete
+    for task in asyncio.as_completed(tasks):
+        try:
+            result = await task
+            files_with_metadata.append(result)
+        except Exception as e:
+            logger.error(f"Error processing file: {str(e)}")
     
     return files_with_metadata
 

modules/core/state.py

@@ -53,6 +53,14 @@ class AppState:
         # Application name setting
         self.app_name = "Dune Weaver"  # Default app name
         
+        # auto_play mode settings
+        self.auto_play_enabled = False
+        self.auto_play_playlist = None  # Playlist to auto-play in auto_play mode
+        self.auto_play_run_mode = "loop"  # "single" or "loop" 
+        self.auto_play_pause_time = 5.0  # Pause between patterns in seconds
+        self.auto_play_clear_pattern = "adaptive"  # Clear pattern option
+        self.auto_play_shuffle = False  # Shuffle playlist
+        
         self.load()
 
     @property
@@ -178,6 +186,12 @@ class AppState:
             "port": self.port,
             "wled_ip": self.wled_ip,
             "app_name": self.app_name,
+            "auto_play_enabled": self.auto_play_enabled,
+            "auto_play_playlist": self.auto_play_playlist,
+            "auto_play_run_mode": self.auto_play_run_mode,
+            "auto_play_pause_time": self.auto_play_pause_time,
+            "auto_play_clear_pattern": self.auto_play_clear_pattern,
+            "auto_play_shuffle": self.auto_play_shuffle,
         }
 
     def from_dict(self, data):
@@ -208,6 +222,12 @@ class AppState:
         self.port = data.get("port", None)
         self.wled_ip = data.get('wled_ip', None)
         self.app_name = data.get("app_name", "Dune Weaver")
+        self.auto_play_enabled = data.get("auto_play_enabled", False)
+        self.auto_play_playlist = data.get("auto_play_playlist", None)
+        self.auto_play_run_mode = data.get("auto_play_run_mode", "loop")
+        self.auto_play_pause_time = data.get("auto_play_pause_time", 5.0)
+        self.auto_play_clear_pattern = data.get("auto_play_clear_pattern", "adaptive")
+        self.auto_play_shuffle = data.get("auto_play_shuffle", False)
 
     def save(self):
         """Save the current state to a JSON file."""

static/js/index.js

@@ -4,6 +4,9 @@ let allPatternsWithMetadata = []; // Enhanced pattern data with metadata
 let currentSort = { field: 'name', direction: 'asc' };
 let currentFilters = { category: 'all' };
 
+// AbortController for cancelling in-flight requests when navigating away
+let metadataAbortController = null;
+
 // Helper function to normalize file paths for cross-platform compatibility
 function normalizeFilePath(filePath) {
     if (!filePath) return '';
@@ -666,23 +669,41 @@ async function loadPatterns(forceRefresh = false) {
         // Load metadata in background for enhanced features
         setTimeout(async () => {
             try {
-            logMessage('Loading enhanced metadata...', LOG_TYPE.DEBUG);
-            const metadataResponse = await fetch('/list_theta_rho_files_with_metadata');
-            const patternsWithMetadata = await metadataResponse.json();
-            
-            // Store enhanced patterns data
-            allPatternsWithMetadata = [...patternsWithMetadata];
-            
-            // Update category filter dropdown now that we have metadata
-            updateBrowseCategoryFilter();
-            
-            // Enable sort controls and display patterns consistently
-            enableSortControls();
-            
-            logMessage(`Enhanced metadata loaded for ${patternsWithMetadata.length} patterns`, LOG_TYPE.SUCCESS);
+                // Cancel any previous metadata loading request
+                if (metadataAbortController) {
+                    metadataAbortController.abort();
+                }
+                
+                // Create new AbortController for this request
+                metadataAbortController = new AbortController();
+                
+                logMessage('Loading enhanced metadata...', LOG_TYPE.DEBUG);
+                const metadataResponse = await fetch('/list_theta_rho_files_with_metadata', {
+                    signal: metadataAbortController.signal
+                });
+                const patternsWithMetadata = await metadataResponse.json();
+                
+                // Store enhanced patterns data
+                allPatternsWithMetadata = [...patternsWithMetadata];
+                
+                // Update category filter dropdown now that we have metadata
+                updateBrowseCategoryFilter();
+                
+                // Enable sort controls and display patterns consistently
+                enableSortControls();
+                
+                logMessage(`Enhanced metadata loaded for ${patternsWithMetadata.length} patterns`, LOG_TYPE.SUCCESS);
+                
+                // Clear the controller reference since request completed
+                metadataAbortController = null;
             } catch (metadataError) {
-                logMessage(`Failed to load enhanced metadata: ${metadataError.message}`, LOG_TYPE.WARNING);
+                if (metadataError.name === 'AbortError') {
+                    logMessage('Metadata loading cancelled (navigating away)', LOG_TYPE.DEBUG);
+                } else {
+                    logMessage(`Failed to load enhanced metadata: ${metadataError.message}`, LOG_TYPE.WARNING);
+                }
                 // No fallback needed - basic patterns already displayed
+                metadataAbortController = null;
             }
         }, 100); // Small delay to let initial render complete
         if (forceRefresh) {
@@ -1505,6 +1526,25 @@ document.addEventListener('DOMContentLoaded', async () => {
     }
 });
 
+// Cancel any pending requests when navigating away from the page
+window.addEventListener('beforeunload', () => {
+    if (metadataAbortController) {
+        metadataAbortController.abort();
+        metadataAbortController = null;
+        logMessage('Cancelled pending metadata request due to navigation', LOG_TYPE.DEBUG);
+    }
+});
+
+// Also handle page visibility changes (switching tabs, minimizing, etc.)
+document.addEventListener('visibilitychange', () => {
+    if (document.hidden && metadataAbortController) {
+        // Cancel long-running requests when page is hidden
+        metadataAbortController.abort();
+        metadataAbortController = null;
+        logMessage('Cancelled pending metadata request due to page hidden', LOG_TYPE.DEBUG);
+    }
+});
+
 function updateCurrentlyPlayingUI(status) {
     // Get all required DOM elements once
     const container = document.getElementById('currently-playing-container');

static/js/playlists.js

@@ -1551,34 +1551,48 @@ function setupEventListeners() {
     });
 
     // Add patterns button
-    document.getElementById('addPatternsBtn').addEventListener('click', async () => {
-        // Load current playlist patterns first
-        if (currentPlaylist) {
-            const response = await fetch(`/get_playlist?name=${encodeURIComponent(currentPlaylist)}`);
-            if (response.ok) {
-                const playlistData = await response.json();
-                const currentFiles = playlistData.files || [];
-                // Pre-select current patterns
-                selectedPatterns.clear();
-                currentFiles.forEach(pattern => selectedPatterns.add(pattern));
-            }
-        }
-        
-        await loadAvailablePatterns();
-        updatePatternSelection();
-        updateSelectionCount();
-        
-        // Update modal title
+    document.getElementById('addPatternsBtn').addEventListener('click', () => {
+        // Update modal title immediately
         const modalTitle = document.getElementById('modalTitle');
         if (modalTitle) {
             modalTitle.textContent = currentPlaylist ? `Edit Patterns for "${currentPlaylist}"` : 'Add Patterns to Playlist';
         }
         
+        // Show modal immediately for better responsiveness
         document.getElementById('addPatternsModal').classList.remove('hidden');
+        
         // Focus search input when modal opens
         setTimeout(() => {
             document.getElementById('patternSearchInput').focus();
         }, 100);
+        
+        // Load data asynchronously after modal is visible
+        const loadModalData = async () => {
+            try {
+                // Load current playlist patterns first if editing
+                if (currentPlaylist) {
+                    const response = await fetch(`/get_playlist?name=${encodeURIComponent(currentPlaylist)}`);
+                    if (response.ok) {
+                        const playlistData = await response.json();
+                        const currentFiles = playlistData.files || [];
+                        // Pre-select current patterns
+                        selectedPatterns.clear();
+                        currentFiles.forEach(pattern => selectedPatterns.add(pattern));
+                    }
+                }
+                
+                // Load available patterns
+                await loadAvailablePatterns();
+                updatePatternSelection();
+                updateSelectionCount();
+            } catch (error) {
+                console.error('Failed to load modal data:', error);
+                showStatusMessage('Failed to load patterns', 'error');
+            }
+        };
+        
+        // Start loading data without blocking
+        loadModalData();
     });
 
     // Search functionality
@@ -1646,15 +1660,10 @@ function setupEventListeners() {
 }
 
 // Initialize playlists page
-document.addEventListener('DOMContentLoaded', async () => {
+document.addEventListener('DOMContentLoaded', () => {
     try {
-        // Initialize intersection observer for lazy loading
+        // Initialize UI immediately for fast page load
         initializeIntersectionObserver();
-        
-        // Initialize IndexedDB preview cache
-        await initPreviewCacheDB();
-        
-        // Setup event listeners
         setupEventListeners();
         
         // Initialize mobile view state
@@ -1672,13 +1681,46 @@ document.addEventListener('DOMContentLoaded', async () => {
         restorePlaybackSettings();
         setupPlaybackSettingsPersistence();
         
-        // Load playlists
-        await loadPlaylists();
+        // Show loading indicator for playlists
+        const playlistsNav = document.getElementById('playlistsNav');
+        if (playlistsNav) {
+            playlistsNav.innerHTML = `
+                <div class="flex items-center justify-center py-8 text-gray-500 dark:text-gray-400">
+                    <div class="flex items-center gap-2">
+                        <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-gray-500"></div>
+                        <span class="text-sm">Loading playlists...</span>
+                    </div>
+                </div>
+            `;
+        }
         
-        // Check serial connection status
-        await checkSerialStatus();
+        // Load data asynchronously without blocking page render
+        Promise.all([
+            // Initialize IndexedDB preview cache
+            initPreviewCacheDB().catch(err => {
+                console.error('Failed to init preview cache:', err);
+                return null;
+            }),
+            
+            // Load playlists
+            loadPlaylists().catch(err => {
+                console.error('Failed to load playlists:', err);
+                showStatusMessage('Failed to load playlists', 'error');
+                return null;
+            }),
+            
+            // Check serial connection status
+            checkSerialStatus().catch(err => {
+                console.error('Failed to check serial status:', err);
+                return null;
+            })
+        ]).then(() => {
+            logMessage('Playlists page initialized successfully', LOG_TYPE.SUCCESS);
+        }).catch(error => {
+            logMessage(`Error during initialization: ${error.message}`, LOG_TYPE.ERROR);
+            showStatusMessage('Failed to initialize playlists page', 'error');
+        });
         
-        logMessage('Playlists page initialized successfully', LOG_TYPE.SUCCESS);
     } catch (error) {
         logMessage(`Error during initialization: ${error.message}`, LOG_TYPE.ERROR);
         showStatusMessage('Failed to initialize playlists page', 'error');

static/js/settings.js

@@ -931,4 +931,93 @@ function initializeAutocomplete(inputId, suggestionsId, clearButtonId, patterns)
     
     // Initialize clear button visibility
     updateClearButton();
-} 
+} 
+
+// auto_play Mode Functions
+async function initializeauto_playMode() {
+    const auto_playToggle = document.getElementById('auto_playModeToggle');
+    const auto_playSettings = document.getElementById('auto_playSettings');
+    const auto_playPlaylistSelect = document.getElementById('auto_playPlaylistSelect');
+    const auto_playRunModeSelect = document.getElementById('auto_playRunModeSelect');
+    const auto_playPauseTimeInput = document.getElementById('auto_playPauseTimeInput');
+    const auto_playClearPatternSelect = document.getElementById('auto_playClearPatternSelect');
+    const auto_playShuffleToggle = document.getElementById('auto_playShuffleToggle');
+    
+    // Load current auto_play settings
+    try {
+        const response = await fetch('/api/auto_play-mode');
+        const data = await response.json();
+        
+        auto_playToggle.checked = data.enabled;
+        if (data.enabled) {
+            auto_playSettings.style.display = 'block';
+        }
+        
+        // Set current values
+        auto_playRunModeSelect.value = data.run_mode || 'loop';
+        auto_playPauseTimeInput.value = data.pause_time || 5.0;
+        auto_playClearPatternSelect.value = data.clear_pattern || 'adaptive';
+        auto_playShuffleToggle.checked = data.shuffle || false;
+        
+        // Load playlists for selection
+        const playlistsResponse = await fetch('/list_all_playlists');
+        const playlists = await playlistsResponse.json();
+        
+        // Clear and populate playlist select
+        auto_playPlaylistSelect.innerHTML = '<option value="">Select a playlist...</option>';
+        playlists.forEach(playlist => {
+            const option = document.createElement('option');
+            option.value = playlist;
+            option.textContent = playlist;
+            if (playlist === data.playlist) {
+                option.selected = true;
+            }
+            auto_playPlaylistSelect.appendChild(option);
+        });
+    } catch (error) {
+        logMessage(`Error loading auto_play settings: ${error.message}`, LOG_TYPE.ERROR);
+    }
+    
+    // Function to save settings
+    async function saveSettings() {
+        try {
+            const response = await fetch('/api/auto_play-mode', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    enabled: auto_playToggle.checked,
+                    playlist: auto_playPlaylistSelect.value || null,
+                    run_mode: auto_playRunModeSelect.value,
+                    pause_time: parseFloat(auto_playPauseTimeInput.value) || 0,
+                    clear_pattern: auto_playClearPatternSelect.value,
+                    shuffle: auto_playShuffleToggle.checked
+                })
+            });
+            
+            if (!response.ok) {
+                throw new Error('Failed to save settings');
+            }
+        } catch (error) {
+            logMessage(`Error saving auto_play settings: ${error.message}`, LOG_TYPE.ERROR);
+        }
+    }
+    
+    // Toggle auto_play settings visibility and save
+    auto_playToggle.addEventListener('change', async () => {
+        auto_playSettings.style.display = auto_playToggle.checked ? 'block' : 'none';
+        await saveSettings();
+    });
+    
+    // Save when any setting changes
+    auto_playPlaylistSelect.addEventListener('change', saveSettings);
+    auto_playRunModeSelect.addEventListener('change', saveSettings);
+    auto_playPauseTimeInput.addEventListener('change', saveSettings);
+    auto_playPauseTimeInput.addEventListener('input', saveSettings); // Save as user types
+    auto_playClearPatternSelect.addEventListener('change', saveSettings);
+    auto_playShuffleToggle.addEventListener('change', saveSettings);
+}
+
+// Initialize auto_play mode when DOM is ready
+document.addEventListener('DOMContentLoaded', function() {
+    initializeauto_playMode();
+});

templates/settings.html

@@ -388,6 +388,106 @@ endblock %}
       </label>
     </div>
   </section>
+  <section class="bg-white rounded-xl shadow-sm overflow-hidden">
+    <h2
+      class="text-slate-800 text-xl sm:text-2xl font-semibold leading-tight tracking-[-0.01em] px-6 py-4 border-b border-slate-200"
+    >
+      Auto-play on Boot
+    </h2>
+    <div class="px-6 py-5 space-y-6">
+      <div class="flex items-center justify-between">
+        <div class="flex-1">
+          <h3 class="text-slate-700 text-base font-medium leading-normal">Enable Auto-play on Boot</h3>
+          <p class="text-xs text-slate-500 mt-1">
+            Automatically start playing a selected playlist when the system boots up.
+          </p>
+        </div>
+        <label class="switch">
+          <input type="checkbox" id="auto_playModeToggle">
+          <span class="slider round"></span>
+        </label>
+      </div>
+      
+      <div id="auto_playSettings" class="space-y-4" style="display: none;">
+        <label class="flex flex-col gap-1.5">
+          <span class="text-slate-700 text-sm font-medium leading-normal">Startup Playlist</span>
+          <select
+            id="auto_playPlaylistSelect"
+            class="form-select flex-1 resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 placeholder:text-slate-400 px-4 text-base font-medium leading-normal transition-colors"
+          >
+            <option value="">Select a playlist...</option>
+          </select>
+          <p class="text-xs text-slate-500 mt-1">
+            Choose which playlist to automatically play when the system starts.
+          </p>
+        </label>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <label class="flex flex-col gap-1.5">
+            <span class="text-slate-700 text-sm font-medium leading-normal">Run Mode</span>
+            <select
+              id="auto_playRunModeSelect"
+              class="form-select resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 placeholder:text-slate-400 px-4 text-base font-medium leading-normal transition-colors"
+            >
+              <option value="single">Single (play once)</option>
+              <option value="loop">Loop (repeat forever)</option>
+            </select>
+            <p class="text-xs text-slate-500 mt-1">
+              How to run the playlist when it finishes.
+            </p>
+          </label>
+
+          <label class="flex flex-col gap-1.5">
+            <span class="text-slate-700 text-sm font-medium leading-normal">Pause Between Patterns (seconds)</span>
+            <input
+              id="auto_playPauseTimeInput"
+              type="number"
+              min="0"
+              step="0.5"
+              class="form-input resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 placeholder:text-slate-400 px-4 text-base font-normal leading-normal transition-colors"
+              placeholder="5.0"
+            />
+            <p class="text-xs text-slate-500 mt-1">
+              Time to wait between each pattern (0 or more seconds).
+            </p>
+          </label>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <label class="flex flex-col gap-1.5">
+            <span class="text-slate-700 text-sm font-medium leading-normal">Clear Pattern</span>
+            <select
+              id="auto_playClearPatternSelect"
+              class="form-select resize-none overflow-hidden rounded-lg text-slate-900 focus:outline-0 focus:ring-2 focus:ring-sky-500 border border-slate-300 bg-white focus:border-sky-500 h-10 placeholder:text-slate-400 px-4 text-base font-medium leading-normal transition-colors"
+            >
+              <option value="none">None</option>
+              <option value="adaptive">Adaptive</option>
+              <option value="clear_from_in">Clear From Center</option>
+              <option value="clear_from_out">Clear From Perimeter</option>
+              <option value="clear_sideway">Clear Sideway</option>
+              <option value="random">Random</option>
+            </select>
+            <p class="text-xs text-slate-500 mt-1">
+              Pattern to run before each main pattern.
+            </p>
+          </label>
+
+          <div class="flex items-center justify-between">
+            <div class="flex-1">
+              <h4 class="text-slate-700 text-sm font-medium leading-normal">Shuffle Playlist</h4>
+              <p class="text-xs text-slate-500 mt-1">
+                Randomize the order of patterns in the playlist.
+              </p>
+            </div>
+            <label class="switch">
+              <input type="checkbox" id="auto_playShuffleToggle">
+              <span class="slider round"></span>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
   <section class="bg-white rounded-xl shadow-sm overflow-hidden">
     <h2
       class="text-slate-800 text-xl sm:text-2xl font-semibold leading-tight tracking-[-0.01em] px-6 py-4 border-b border-slate-200"