From 210bc70481fac861a2bb150ee0bfcee322aefbcc Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Wed, 5 Feb 2025 17:40:39 +0800
Subject: [PATCH] Add folder tag toggle and feedback button; refactor theme
 toggle

---
 static/css/style.css         | 71 ++++++++++++++++++++++++++++++++----
 static/js/main.js            | 17 ++++++++-
 static/js/utils/uiHelpers.js | 24 ++++++++++++
 templates/loras.html         | 12 +++++-
 4 files changed, 114 insertions(+), 10 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 517d14c2..e1cfaceb 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -441,13 +441,23 @@ body.modal-open {
 
 /* 主题切换按钮 */
 .theme-toggle {
-    position: fixed;
-    top: 20px;
-    right: 20px;
-    cursor: pointer;
-    padding: 8px;
-    border-radius: 50%;
-    background: var(--card-bg);
+    position: static;  /* Override the fixed positioning */
+    width: 36px;      /* Match the size of other buttons */
+    height: 36px;     /* Match the size of other buttons */
+    display: flex;    /* Center the image */
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--border-color);
+}
+
+.theme-toggle:hover {
+    background: var(--lora-accent);
+    transform: translateY(-2px);
+}
+
+.theme-toggle img {
+    width: 20px;
+    height: 20px;
 }
 
 .base-model-label {
@@ -928,4 +938,51 @@ body.modal-open {
         order: -1; /* 在移动端将搜索框移到顶部 */
         margin-left: 0;
     }
+}
+
+/* ...existing code... */
+
+.corner-controls {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    display: flex;
+    gap: 10px;
+    z-index: var(--z-overlay);
+}
+
+.control-button {
+    cursor: pointer;
+    padding: 8px;
+    border-radius: 50%;
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    color: var(--text-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    transition: all 0.2s ease;
+}
+
+.control-button:hover {
+    background: var(--lora-accent);
+    color: white;
+    transform: translateY(-2px);
+}
+
+/* Add responsive adjustments */
+@media (max-width: 768px) {
+    .corner-controls {
+        top: 10px;
+        right: 10px;
+        gap: 8px;
+    }
+    
+    .control-button,
+    .theme-toggle {
+        width: 32px;
+        height: 32px;
+    }
 }
\ No newline at end of file
diff --git a/static/js/main.js b/static/js/main.js
index f6a9e10e..f009a7ab 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -4,7 +4,19 @@ import { modalManager } from './managers/ModalManager.js';
 import { state } from './state/index.js';
 import { showLoraModal } from './components/LoraCard.js';
 import { loadMoreLoras, fetchCivitai, deleteModel, replacePreview, resetAndReload, refreshLoras } from './api/loraApi.js';
-import { showToast, lazyLoadImages, restoreFolderFilter, initTheme, toggleTheme, toggleFolder, copyTriggerWord, openCivitai } from './utils/uiHelpers.js';
+import { 
+    showToast, 
+    lazyLoadImages, 
+    restoreFolderFilter, 
+    initTheme,
+    toggleTheme,
+    toggleFolder,
+    copyTriggerWord,
+    openCivitai,
+    toggleFolderTags,
+    openFeedback,
+    initFolderTagsVisibility 
+} from './utils/uiHelpers.js';
 import { initializeInfiniteScroll } from './utils/infiniteScroll.js';
 import { showDeleteModal, confirmDelete, closeDeleteModal } from './utils/modalUtils.js';
 import { SearchManager } from './utils/search.js';
@@ -25,6 +37,8 @@ window.closeDeleteModal = closeDeleteModal;
 window.refreshLoras = refreshLoras;
 window.openCivitai = openCivitai;
 window.showToast = showToast
+window.toggleFolderTags = toggleFolderTags;
+window.openFeedback = openFeedback;
 
 // Initialize everything when DOM is ready
 document.addEventListener('DOMContentLoaded', () => {
@@ -35,6 +49,7 @@ document.addEventListener('DOMContentLoaded', () => {
     lazyLoadImages();
     restoreFolderFilter();
     initTheme();
+    initFolderTagsVisibility();
     window.searchManager = new SearchManager();
 });
 
diff --git a/static/js/utils/uiHelpers.js b/static/js/utils/uiHelpers.js
index f8539069..202c025b 100644
--- a/static/js/utils/uiHelpers.js
+++ b/static/js/utils/uiHelpers.js
@@ -96,4 +96,28 @@ export function openCivitai(modelName) {
         // 如果没有ID，尝试使用名称搜索
         window.open(`https://civitai.com/models?query=${encodeURIComponent(modelName)}`, '_blank');
     }
+}
+
+export function toggleFolderTags() {
+    const folderTags = document.querySelector('.folder-tags');
+    if (!folderTags) return;
+    
+    const isHidden = folderTags.style.display === 'none';
+    folderTags.style.display = isHidden ? 'flex' : 'none';
+    
+    // Save preference
+    localStorage.setItem('folderTagsVisible', isHidden ? 'true' : 'false');
+}
+
+export function openFeedback() {
+    window.open('https://github.com/willmiao/ComfyUI-Lora-Manager/issues/new', '_blank');
+}
+
+// Add this to your existing initialization code
+export function initFolderTagsVisibility() {
+    const folderTags = document.querySelector('.folder-tags');
+    if (!folderTags) return;
+    
+    const isVisible = localStorage.getItem('folderTagsVisible') !== 'false';
+    folderTags.style.display = isVisible ? 'flex' : 'none';
 }
\ No newline at end of file
diff --git a/templates/loras.html b/templates/loras.html
index fd1f4a9d..f9127553 100644
--- a/templates/loras.html
+++ b/templates/loras.html
@@ -34,8 +34,16 @@
     <link rel="preconnect" href="https://cdnjs.cloudflare.com">
 </head>
 <body>
-    <div class="theme-toggle" onclick="toggleTheme()">
-        <img src="/loras_static/images/theme-toggle.svg" alt="Theme">
+    <div class="corner-controls">
+        <button class="control-button" onclick="toggleFolderTags()" title="Toggle folder tags">
+            <i class="fas fa-tags"></i>
+        </button>
+        <button class="control-button" onclick="openFeedback()" title="Report issues or request features">
+            <i class="fas fa-bug"></i>
+        </button>
+        <div class="theme-toggle" onclick="toggleTheme()" title="Toggle theme">
+            <img src="/loras_static/images/theme-toggle.svg" alt="Theme">
+        </div>
     </div>
     
     {% include 'components/modals.html' %}