feat(ui): add configurable model card footer action, fixes #249

static/js/components/shared/ModelCard.js

@@ -491,7 +491,13 @@ export function createModelCard(model, modelType) {
     // Generate UI text with i18n support
     const toggleBlurTitle = translate('modelCard.actions.toggleBlur', {}, 'Toggle blur');
     const showButtonText = translate('modelCard.actions.show', {}, 'Show');
-    const openExampleImagesTitle = translate('modelCard.actions.openExampleImages', {}, 'Open Example Images Folder');
+    const footerActionSetting = state.global.settings.model_card_footer_action || 'example_images';
+    const footerActionTitle = footerActionSetting === 'replace_preview'
+        ? translate('modelCard.actions.replacePreview', {}, 'Replace Preview')
+        : translate('modelCard.actions.openExampleImages', {}, 'Open Example Images Folder');
+    const footerActionIcon = footerActionSetting === 'replace_preview'
+        ? 'fas fa-image'
+        : 'fas fa-folder-open';
 
     card.innerHTML = `
         <div class="card-preview ${shouldBlur ? 'blurred' : ''}">
@@ -525,8 +531,8 @@ export function createModelCard(model, modelType) {
                     ${model.civitai?.name ? `<span class="version-name">${model.civitai.name}</span>` : ''}
                 </div>
                 <div class="card-actions">
-                    <i class="fas fa-folder-open" 
-                       title="${openExampleImagesTitle}">
+                    <i class="${footerActionIcon}" 
+                       title="${footerActionTitle}">
                     </i>
                 </div>
             </div>

static/js/managers/SettingsManager.js

@@ -290,6 +290,12 @@ export class SettingsManager {
             cardInfoDisplaySelect.value = state.global.settings.card_info_display || 'always';
         }
 
+        // Set model card footer action
+        const modelCardFooterActionSelect = document.getElementById('modelCardFooterAction');
+        if (modelCardFooterActionSelect) {
+            modelCardFooterActionSelect.value = state.global.settings.model_card_footer_action || 'example_images';
+        }
+
         // Set model name display setting
         const modelNameDisplaySelect = document.getElementById('modelNameDisplay');
         if (modelNameDisplaySelect) {
@@ -1221,6 +1227,10 @@ export class SettingsManager {
             if (settingKey === 'model_name_display') {
                 this.reloadContent();
             }
+
+            if (settingKey === 'model_card_footer_action') {
+                this.reloadContent();
+            }
         } catch (error) {
             showToast('toast.settings.settingSaveFailed', { message: error.message }, 'error');
         }

static/js/state/index.js

@@ -27,6 +27,7 @@ const DEFAULT_SETTINGS_BASE = Object.freeze({
     display_density: 'default',
     card_info_display: 'always',
     model_name_display: 'model_name',
+    model_card_footer_action: 'example_images',
     include_trigger_words: false,
     compact_mode: false,
     priority_tags: { ...DEFAULT_PRIORITY_TAG_CONFIG },