feat: add card info display setting with options for always visible or reveal on hover

static/css/components/card.css

@@ -252,6 +252,18 @@
     z-index: 3;
 }
 
+/* New styles for hover reveal mode */
+.hover-reveal .card-header,
+.hover-reveal .card-footer {
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.hover-reveal .lora-card:hover .card-header,
+.hover-reveal .lora-card:hover .card-footer {
+    opacity: 1;
+}
+
 .card-footer {
     position: absolute;
     bottom: 0;

static/js/core.js

@@ -42,6 +42,9 @@ export class AppCore {
         exampleImagesManager.initialize();
         // Initialize the help manager
         helpManager.initialize();
+
+        const cardInfoDisplay = state.global.settings.cardInfoDisplay || 'always';
+        document.body.classList.toggle('hover-reveal', cardInfoDisplay === 'hover');
         
         // Mark as initialized
         this.initialized = true;

static/js/managers/SettingsManager.js

@@ -36,6 +36,11 @@ export class SettingsManager {
         if (state.global.settings.optimizeExampleImages === undefined) {
             state.global.settings.optimizeExampleImages = true;
         }
+        
+        // Set default for cardInfoDisplay if undefined
+        if (state.global.settings.cardInfoDisplay === undefined) {
+            state.global.settings.cardInfoDisplay = 'always';
+        }
 
         // Convert old boolean compactMode to new displayDensity string
         if (typeof state.global.settings.displayDensity === 'undefined') {
@@ -102,6 +107,12 @@ export class SettingsManager {
         if (displayDensitySelect) {
             displayDensitySelect.value = state.global.settings.displayDensity || 'default';
         }
+        
+        // Set card info display setting
+        const cardInfoDisplaySelect = document.getElementById('cardInfoDisplay');
+        if (cardInfoDisplaySelect) {
+            cardInfoDisplaySelect.value = state.global.settings.cardInfoDisplay || 'always';
+        }
 
         // Set optimize example images setting
         const optimizeExampleImagesCheckbox = document.getElementById('optimizeExampleImages');
@@ -245,6 +256,8 @@ export class SettingsManager {
             
             // Also update compactMode for backwards compatibility
             state.global.settings.compactMode = (value !== 'default');
+        } else if (settingKey === 'card_info_display') {
+            state.global.settings.cardInfoDisplay = value;
         } else {
             // For any other settings that might be added in the future
             state.global.settings[settingKey] = value;
@@ -506,6 +519,10 @@ export class SettingsManager {
             // Add the appropriate density class
             grid.classList.add(`${density}-density`);
         }
+        
+        // Apply card info display setting
+        const cardInfoDisplay = state.global.settings.cardInfoDisplay || 'always';
+        document.body.classList.toggle('hover-reveal', cardInfoDisplay === 'hover');
     }
 }
 

static/js/state/index.js

@@ -4,7 +4,8 @@ import { getStorageItem, getMapFromStorage } from '../utils/storageHelpers.js';
 // Load settings from localStorage or use defaults
 const savedSettings = getStorageItem('settings', {
     blurMatureContent: true,
-    show_only_sfw: false
+    show_only_sfw: false,
+    cardInfoDisplay: 'always' // Add default value for card info display
 });
 
 // Load preview versions from localStorage

templates/components/modals.html

@@ -226,6 +226,28 @@
                         <span class="warning-text">Warning: Higher densities may cause performance issues on systems with limited resources.</span>
                     </div>
                 </div>
+                
+                <!-- Add Card Info Display setting -->
+                <div class="setting-item">
+                    <div class="setting-row">
+                        <div class="setting-info">
+                            <label for="cardInfoDisplay">Card Info Display</label>
+                        </div>
+                        <div class="setting-control select-control">
+                            <select id="cardInfoDisplay" onchange="settingsManager.saveSelectSetting('cardInfoDisplay', 'card_info_display')">
+                                <option value="always">Always Visible</option>
+                                <option value="hover">Reveal on Hover</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="input-help">
+                        Choose when to display model information and action buttons:
+                        <ul>
+                            <li><strong>Always Visible:</strong> Headers and footers are always visible</li>
+                            <li><strong>Reveal on Hover:</strong> Headers and footers only appear when hovering over a card</li>
+                        </ul>
+                    </div>
+                </div>
             </div>
             
             <!-- Add Cache Management Section -->