checkpoint

static/css/style.css

@@ -886,7 +886,6 @@ body.modal-open {
     z-index: var(--z-overlay);
 }
 
-.control-button,
 .theme-toggle {
     width: 36px;
     height: 36px;
@@ -901,26 +900,16 @@ body.modal-open {
     transition: all 0.2s ease;
 }
 
-.control-button:hover,
 .theme-toggle:hover {
     background: var(--lora-accent);
     color: white;
     transform: translateY(-2px);
 }
 
-/* Add responsive adjustments */
-@media (max-width: 1024px) {
-    .search-container {
-        width: 200px; /* 减小搜索框宽度 */
-    }
-}
-
 @media (max-width: 768px) {
     .actions {
         flex-wrap: wrap;
         gap: var(--space-1);
-        position: relative;
-        padding-right: 130px; /* 为corner-controls预留空间 */
     }
     
     .search-container {
@@ -929,10 +918,97 @@ body.modal-open {
         margin-left: 0;
     }
     
+    /* Remove the previous corner-controls mobile styles */
     .corner-controls {
-        position: static; 
+        /* Keep the fixed positioning even on mobile */
-        top: 20px;       /* 保持与桌面端一致的顶部间距 */
+        position: fixed;
-        right: 20px;     /* 保持与桌面端一致的右侧间距 */
+        top: 20px;
-        transform: none; /* 移除之前的位移变换 */
+        right: 20px;
+    }
+}
+
+/* Folder Tags Container - New */
+.folder-tags-container {
+    position: relative;
+    width: 100%;
+}
+
+.folder-tags {
+    transition: max-height 0.3s ease, opacity 0.2s ease;
+    max-height: 200px; /* 调整为合适的最大高度 */
+    opacity: 1;
+    overflow: hidden;
+}
+
+.folder-tags.collapsed {
+    max-height: 0;
+    opacity: 0;
+    margin: 0;
+}
+
+/* Toggle Folders Button - New */
+.toggle-folders-btn {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 36px;
+    height: 36px;
+    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;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    z-index: 2;
+}
+
+.toggle-folders-btn:hover {
+    background: var(--lora-accent);
+    color: white;
+    transform: translateY(-2px);
+}
+
+.toggle-folders-btn i {
+    transition: transform 0.3s ease;
+}
+
+/* 折叠状态样式 */
+.folder-tags.collapsed + .toggle-folders-btn {
+    position: static;
+    margin-right: auto; /* 确保按钮在左侧 */
+    transform: translateY(0);
+}
+
+.folder-tags.collapsed + .toggle-folders-btn i {
+    transform: rotate(180deg);
+}
+
+/* Update corner controls */
+.corner-controls {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    display: flex;
+    gap: 10px;
+    z-index: var(--z-overlay);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .folder-tags-container {
+        order: -1; /* 确保在移动端位于顶部 */
+    }
+    
+    .toggle-folders-btn {
+        top: 50%;
+        transform: translateY(-50%);
+    }
+    
+    .folder-tags.collapsed + .toggle-folders-btn {
+        position: static;
+        transform: translateY(0);
     }
 }

static/js/main.js

@@ -14,7 +14,6 @@ import {
     copyTriggerWord,
     openCivitai,
     toggleFolderTags,
-    openFeedback,
     initFolderTagsVisibility 
 } from './utils/uiHelpers.js';
 import { initializeInfiniteScroll } from './utils/infiniteScroll.js';
@@ -38,7 +37,6 @@ window.refreshLoras = refreshLoras;
 window.openCivitai = openCivitai;
 window.showToast = showToast
 window.toggleFolderTags = toggleFolderTags;
-window.openFeedback = openFeedback;
 
 // Initialize everything when DOM is ready
 document.addEventListener('DOMContentLoaded', () => {

static/js/utils/uiHelpers.js

@@ -100,24 +100,23 @@ export function openCivitai(modelName) {
 
 export function toggleFolderTags() {
     const folderTags = document.querySelector('.folder-tags');
-    if (!folderTags) return;
+    const btn = document.querySelector('.toggle-folders-btn');
+    const isCollapsed = folderTags.classList.toggle('collapsed');
     
-    const isHidden = folderTags.style.display === 'none';
+    // 更新按钮提示文本
-    folderTags.style.display = isHidden ? 'flex' : 'none';
+    btn.title = isCollapsed ? 'Expand folder tags' : 'Collapse folder tags';
     
-    // Save preference
+    // 保存状态到 localStorage
-    localStorage.setItem('folderTagsVisible', isHidden ? 'true' : 'false');
+    localStorage.setItem('folderTagsCollapsed', isCollapsed);
-}
-
-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');
+    const isCollapsed = localStorage.getItem('folderTagsCollapsed') === 'true';
-    if (!folderTags) return;
+    if (isCollapsed) {
-    
+        const folderTags = document.querySelector('.folder-tags');
-    const isVisible = localStorage.getItem('folderTagsVisible') !== 'false';
+        const btn = document.querySelector('.toggle-folders-btn');
-    folderTags.style.display = isVisible ? 'flex' : 'none';
+        folderTags.classList.add('collapsed');
+        btn.title = 'Expand folder tags';
+    }
 }

templates/components/controls.html

@@ -1,8 +1,13 @@
 <div class="controls">
-    <div class="folder-tags">
+    <div class="folder-tags-container">
-        {% for folder in folders %}
+        <div class="folder-tags">
-        <div class="tag" data-folder="{{ folder }}">{{ folder }}</div>
+            {% for folder in folders %}
-        {% endfor %}
+            <div class="tag" data-folder="{{ folder }}">{{ folder }}</div>
+            {% endfor %}
+        </div>
+        <button class="toggle-folders-btn" onclick="toggleFolderTags()" title="Collapse folder tags">
+            <i class="fas fa-chevron-up"></i>
+        </button>
     </div>
     
     <div class="actions">

templates/loras.html

@@ -35,12 +35,6 @@
 </head>
 <body>
     <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-light.svg" alt="Theme" class="theme-icon light-icon">
             <img src="/loras_static/images/theme-toggle-dark.svg" alt="Theme" class="theme-icon dark-icon">