From 888896c0c06ae3915d00a311c3ba61362db20e59 Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Tue, 24 Jun 2025 17:41:52 +0800
Subject: [PATCH] feat: add card info display setting with options for always
 visible or reveal on hover

---
 static/css/components/card.css        | 12 ++++++++++++
 static/js/core.js                     |  3 +++
 static/js/managers/SettingsManager.js | 17 +++++++++++++++++
 static/js/state/index.js              |  3 ++-
 templates/components/modals.html      | 22 ++++++++++++++++++++++
 5 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/static/css/components/card.css b/static/css/components/card.css
index 6d30437c..f66ca16f 100644
--- a/static/css/components/card.css
+++ b/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;
diff --git a/static/js/core.js b/static/js/core.js
index f71eab59..c5415094 100644
--- a/static/js/core.js
+++ b/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;
diff --git a/static/js/managers/SettingsManager.js b/static/js/managers/SettingsManager.js
index 90dfdcb5..9b6500c8 100644
--- a/static/js/managers/SettingsManager.js
+++ b/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');
     }
 }
 
diff --git a/static/js/state/index.js b/static/js/state/index.js
index e0856de4..8343692d 100644
--- a/static/js/state/index.js
+++ b/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
diff --git a/templates/components/modals.html b/templates/components/modals.html
index 2f3a5c0e..dc6ab262 100644
--- a/templates/components/modals.html
+++ b/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 -->