Refactor display density settings: replace compact mode with display density option and update related UI components

static/js/managers/SettingsManager.js

@@ -31,6 +31,16 @@ export class SettingsManager {
         if (state.global.settings.compactMode === undefined) {
             state.global.settings.compactMode = false;
         }
+        
+        // Convert old boolean compactMode to new displayDensity string
+        if (typeof state.global.settings.displayDensity === 'undefined') {
+            if (state.global.settings.compactMode === true) {
+                state.global.settings.displayDensity = 'compact';
+            } else {
+                state.global.settings.displayDensity = 'default';
+            }
+            // We can delete the old setting, but keeping it for backwards compatibility
+        }
     }
 
     initialize() {
@@ -82,10 +92,10 @@ export class SettingsManager {
             autoplayOnHoverCheckbox.checked = state.global.settings.autoplayOnHover || false;
         }
         
-        // Set compact mode setting
-        const compactModeCheckbox = document.getElementById('compactMode');
-        if (compactModeCheckbox) {
-            compactModeCheckbox.checked = state.global.settings.compactMode || false;
+        // Set display density setting
+        const displayDensitySelect = document.getElementById('displayDensity');
+        if (displayDensitySelect) {
+            displayDensitySelect.value = state.global.settings.displayDensity || 'default';
         }
 
         // Load default lora root
@@ -219,6 +229,11 @@ export class SettingsManager {
         // Update frontend state
         if (settingKey === 'default_lora_root') {
             state.global.settings.default_loras_root = value;
+        } else if (settingKey === 'display_density') {
+            state.global.settings.displayDensity = value;
+            
+            // Also update compactMode for backwards compatibility
+            state.global.settings.compactMode = (value !== 'default');
         } else {
             // For any other settings that might be added in the future
             state.global.settings[settingKey] = value;
@@ -229,22 +244,38 @@ export class SettingsManager {
         
         try {
             // For backend settings, make API call
-            const payload = {};
-            payload[settingKey] = value;
-            
-            const response = await fetch('/api/settings', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(payload)
-            });
+            if (settingKey === 'default_lora_root') {
+                const payload = {};
+                payload[settingKey] = value;
+                
+                const response = await fetch('/api/settings', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(payload)
+                });
 
-            if (!response.ok) {
-                throw new Error('Failed to save setting');
+                if (!response.ok) {
+                    throw new Error('Failed to save setting');
+                }
+                
+                showToast(`Settings updated: ${settingKey.replace(/_/g, ' ')}`, 'success');
             }
             
-            showToast(`Settings updated: ${settingKey.replace(/_/g, ' ')}`, 'success');
+            // Apply frontend settings immediately
+            this.applyFrontendSettings();
+            
+            // Recalculate layout when display density changes
+            if (settingKey === 'display_density' && state.virtualScroller) {
+                state.virtualScroller.calculateLayout();
+                
+                let densityName = "Default";
+                if (value === 'medium') densityName = "Medium";
+                if (value === 'compact') densityName = "Compact";
+                
+                showToast(`Display Density set to ${densityName}`, 'success');
+            }
             
         } catch (error) {
             showToast('Failed to save setting: ' + error.message, 'error');
@@ -419,8 +450,17 @@ export class SettingsManager {
             videoParent.replaceChild(videoClone, video);
         });
         
-        // For show_only_sfw, there's no immediate action needed as it affects content loading
-        // The setting will take effect on next reload
+        // Apply display density class to grid
+        const grid = document.querySelector('.card-grid');
+        if (grid) {
+            const density = state.global.settings.displayDensity || 'default';
+            
+            // Remove all density classes first
+            grid.classList.remove('default-density', 'medium-density', 'compact-density');
+            
+            // Add the appropriate density class
+            grid.classList.add(`${density}-density`);
+        }
     }
 }
 

static/js/utils/VirtualScroller.js

@@ -88,22 +88,40 @@ export class VirtualScroller {
         // Calculate available content width (excluding padding)
         const availableContentWidth = containerWidth - paddingLeft - paddingRight;
         
-        // Get compact mode setting
-        const compactMode = state.global.settings?.compactMode || false;
+        // Get display density setting
+        const displayDensity = state.global.settings?.displayDensity || 'default';
         
         // Set exact column counts and grid widths to match CSS container widths
         let maxColumns, maxGridWidth;
         
-        // Match exact column counts and CSS container width values
+        // Match exact column counts and CSS container width values based on density
         if (window.innerWidth >= 3000) { // 4K
-            maxColumns = compactMode ? 10 : 8;
+            if (displayDensity === 'default') {
+                maxColumns = 8;
+            } else if (displayDensity === 'medium') {
+                maxColumns = 9;
+            } else { // compact
+                maxColumns = 10;
+            }
             maxGridWidth = 2400; // Match exact CSS container width for 4K
         } else if (window.innerWidth >= 2000) { // 2K/1440p
-            maxColumns = compactMode ? 8 : 6;
+            if (displayDensity === 'default') {
+                maxColumns = 6;
+            } else if (displayDensity === 'medium') {
+                maxColumns = 7;
+            } else { // compact
+                maxColumns = 8;
+            }
             maxGridWidth = 1800; // Match exact CSS container width for 2K
         } else {
             // 1080p
-            maxColumns = compactMode ? 7 : 5;
+            if (displayDensity === 'default') {
+                maxColumns = 5;
+            } else if (displayDensity === 'medium') {
+                maxColumns = 6;
+            } else { // compact
+                maxColumns = 7;
+            }
             maxGridWidth = 1400; // Match exact CSS container width for 1080p
         }
         
@@ -145,7 +163,7 @@ export class VirtualScroller {
             leftOffset: this.leftOffset,
             paddingLeft,
             paddingRight,
-            compactMode,
+            displayDensity,
             maxColumns,
             baseCardWidth,
             rowGap: this.rowGap
@@ -154,12 +172,9 @@ export class VirtualScroller {
         // Update grid element max-width to match available width
         this.gridElement.style.maxWidth = `${actualGridWidth}px`;
         
-        // Add or remove compact-mode class for style adjustments
-        if (compactMode) {
-            this.gridElement.classList.add('compact-mode');
-        } else {
-            this.gridElement.classList.remove('compact-mode');
-        }
+        // Add or remove density classes for style adjustments
+        this.gridElement.classList.remove('default-density', 'medium-density', 'compact-density');
+        this.gridElement.classList.add(`${displayDensity}-density`);
         
         // Update spacer height
         this.updateSpacerHeight();