Upload 4 files

static/app.js

@@ -1,13 +1,3 @@
-/**
- * VoiceOfML Search — Frontend Application
- * MD3 Design System | SPA Router | Debounced Search | Keyboard Navigation
- * Left Sidebar: enter/exit browser navigation
- */
-
-/* ═══════════════════════════════════════════════════════════
-   Constants
-   ═══════════════════════════════════════════════════════════ */
-
 const ORDERED_EXTENSIONS = [
   "pdf", "txt",
   "epub", "mobi", "azw3", "fb2", "djvu", "chm", "caj",
@@ -60,13 +50,8 @@ const ICONS = {
   file: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="18" height="18"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>',
   database: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="18" height="18"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>',
 };
-
 const MIRROR_HOST = "hf-mirror.com";
 
-/* ═══════════════════════════════════════════════════════════
-   State
-   ═══════════════════════════════════════════════════════════ */
-
 const STATE = {
   mode: "global",
   repo: null,
@@ -106,7 +91,6 @@ const STATE = {
   _pageCache: {},
   _deferredAppendWhileDragging: false,
 };
-
 let searchAbortController = null;
 let searchRequestId = 0;
 let scrollTicking = false;
@@ -125,10 +109,6 @@ const VSCROLL = {
   isDraggingThumb: false,
 };
 
-/* ═══════════════════════════════════════════════════════════
-   Size helpers (global — used by syncURLToState + syncStateToURL)
-   ═══════════════════════════════════════════════════════════ */
-
 function bytesToDisplay(bytes) {
   if (bytes === null || bytes === undefined || bytes === 0) return { value: "", unit: "MB" };
   if (bytes >= 1073741824) return { value: (bytes / 1073741824).toFixed(2).replace(/\.?0+$/, ""), unit: "GB" };
@@ -154,11 +134,6 @@ function parseSizeStr(str) {
   else if (unit === "KB") val *= 1024;
   return Math.round(val);
 }
-
-/* ═══════════════════════════════════════════════════════════
-   Search History (localStorage)
-   ═══════════════════════════════════════════════════════════ */
-
 var HISTORY_KEY = "voml_search_history";
 var HISTORY_MAX = 20;
 
@@ -205,7 +180,6 @@ function removeHistoryItem(q) {
   saveHistory(list);
   renderDropdown();
 }
-
 var selectedIndices = {};
 var lastSelectedIndex = -1;
 
@@ -236,11 +210,8 @@ function updateSelectionUI() {
   }
 }
 
-/* ═══════════════════════════════════════════════════════════
-   DOM References
-   ═══════════════════════════════════════════════════════════ */
-
 const $ = (sel) => document.querySelector(sel);
+
 const DOM = {};
 
 function cacheDOM() {
@@ -309,16 +280,13 @@ function cacheDOM() {
   DOM.multiDeselect = $("#multi-deselect");
 }
 
-/* ═══════════════════════════════════════════════════════════
-   Utilities
-   ═══════════════════════════════════════════════════════════ */
-
 const HTML_ESCAPE_MAP = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" };
+
 function escapeHTML(str) {
   return String(str).replace(/[&<>"']/g, (ch) => HTML_ESCAPE_MAP[ch]);
 }
-
 const sizeCache = {};
+
 function formatSize(bytes) {
   if (!bytes && bytes !== 0) return "";
   if (sizeCache[bytes] !== undefined) return sizeCache[bytes];
@@ -442,10 +410,6 @@ function getRecordPath(rec) {
   return `https://huggingface.co/datasets/${rec.Repo || ""}/blob/main/${encodeRecordPath(buildRecordRelativePath(rec))}`;
 }
 
-/* ═══════════════════════════════════════════════════════════
-   API Client
-   ═══════════════════════════════════════════════════════════ */
-
 const API = {
   async search(params = {}) {
       const q = params.q || "";
@@ -472,14 +436,12 @@ const API = {
       body.sort = DOM.sortSelect.value;
       if (!STATE.searchFolders) body.search_folders = false;
       if (STATE.exact) body.exact = true;
-
       const fetchOptions = {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(body),
       };
       if (params.signal) fetchOptions.signal = params.signal;
-
       const resp = await fetch(base, fetchOptions);
       if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
       return resp.json();
@@ -542,10 +504,6 @@ function scheduleBrowserRootPrefetch(repos) {
   else setTimeout(run, 200);
 }
 
-/* ═══════════════════════════════════════════════════════════
-   Router
-   ═══════════════════════════════════════════════════════════ */
-
 const ROUTER = {
   parse() {
     const path = window.location.pathname.replace(/\/+$/, "");
@@ -581,7 +539,6 @@ const ROUTER = {
     STATE.mode = route.mode;
     STATE.repo = route.repo;
     STATE.repoFull = route.repo ? `VoiceOfML/${route.repo}` : null;
-
     if (prevMode !== STATE.mode || prevRepo !== STATE.repo) {
       STATE.page = 1;
       STATE.results = [];
@@ -595,9 +552,7 @@ const ROUTER = {
       API._extCache = null;
       syncURLToState();
     }
-
     this.updateUI();
-
     if (prevMode !== STATE.mode || prevRepo !== STATE.repo) {
       const wasWide = new URLSearchParams(window.location.search).get("wide") === "1";
       this.onModeChanged();
@@ -607,7 +562,6 @@ const ROUTER = {
         syncStateToURL(true);
       }
     } else {
-      // 模式没变但 URL 参数变了（前进/后退）
       syncURLToState();
       renderSidebar();
       renderFilters();
@@ -628,7 +582,6 @@ const ROUTER = {
     }
   },
   onModeChanged() {
-    // 清除展开状态
     DOM.leftSidebar.classList.remove("expanded-wide");
     DOM.sidebarExpandBtn.textContent = "↔";
     if (!STATE.isMobile) {
@@ -643,11 +596,8 @@ const ROUTER = {
   },
 };
 
-// ── URL 同步 ──────────────────────────────────────────
-
 function syncStateToURL(replace = true) {
   const params = new URLSearchParams();
-
   if (STATE.query) params.set("q", STATE.query);
   if (STATE.mode === "global") {
     STATE.filterRepos.forEach(r => {
@@ -674,11 +624,9 @@ function syncStateToURL(replace = true) {
   if (!STATE.searchFolders) params.set("search_folders", "false");
   if (!STATE.exact) params.set("exact", "0");
   if (!STATE.recordHistory) params.set("history", "0");
-
   const qs = params.toString();
   const path = STATE.mode === "global" ? "/" : `/${STATE.repo}`;
   const url = qs ? `${path}?${qs}` : path;
-
   if (replace) {
     history.replaceState(null, "", url);
   } else {
@@ -688,20 +636,14 @@ function syncStateToURL(replace = true) {
 
 function syncURLToState() {
   const params = new URLSearchParams(window.location.search);
-
   STATE.query = params.get("q") || "";
   DOM.searchInput.value = STATE.query;
-
   STATE.filterRepos = params.getAll("repo").map(r => `VoiceOfML/${r}`);
-
   const extStr = params.get("ext") || "";
   STATE.filterExtensions = extStr ? extStr.split(",").filter(Boolean) : [];
-
   STATE.browserPath = params.get("path") || "";
-
   const sort = params.get("sort") || "relevance";
   DOM.sortSelect.value = sort;
-
   const minSize = params.get("min_size");
   if (minSize) {
     var parsed = parseSizeStr(minSize);
@@ -714,7 +656,6 @@ function syncURLToState() {
     DOM.filterMinSize.value = "";
     DOM.filterMinUnit.value = "MB";
   }
-
   const maxSize = params.get("max_size");
   if (maxSize) {
     var parsedMx = parseSizeStr(maxSize);
@@ -727,39 +668,28 @@ function syncURLToState() {
     DOM.filterMaxSize.value = "";
     DOM.filterMaxUnit.value = "MB";
   }
-
   const searchFolders = params.get("search_folders");
   STATE.searchFolders = searchFolders !== "false";
   DOM.searchFoldersToggle.checked = STATE.searchFolders;
-
   STATE.exact = params.get("exact") !== "0";
   DOM.exactSearchToggle.checked = STATE.exact;
-
   STATE.recordHistory = params.get("history") !== "0";
   if (DOM.historyToggle) DOM.historyToggle.checked = STATE.recordHistory;
   STATE.useMirrorLinks = params.get("mirror") !== "0";
   if (DOM.mirrorLinksToggle) DOM.mirrorLinksToggle.checked = STATE.useMirrorLinks;
-
   if (params.get("wide") === "1") {
     DOM.leftSidebar.classList.add("expanded-wide");
     DOM.sidebarExpandBtn.textContent = "→";
   }
-
   if (params.get("sidebar") === "0") {
     STATE.leftSidebarOpen = false;
     updateSidebarVisibility();
   }
   STATE.rightSidebarOpen = params.get("filters") === "1";
   updateSidebarVisibility();
-
   STATE.page = 1;
   STATE.results = [];
 }
-
-/* ═══════════════════════════════════════════════════════════
-   Debounce & Search
-   ═══════════════════════════════════════════════════════════ */
-
 let searchTimer = null;
 
 async function renderSidebar() {
@@ -902,10 +832,6 @@ function animateResultsReveal() {
   }, 180);
 }
 
-/* ═══════════════════════════════════════════════════════════
-   Results Rendering
-   ═══════════════════════════════════════════════════════════ */
-
 function renderResults() {
   clearResultsSkeleton();
   if (STATE.results.length === 0) {
@@ -917,7 +843,6 @@ function renderResults() {
     DOM.multiActionBar.style.display = "none";
     return;
   }
-
   DOM.emptyState.style.display = "none";
   DOM.multiToggleLabel.style.display = "";
   const cacheKey = getResultsHTMLCacheKey();
@@ -925,11 +850,9 @@ function renderResults() {
     VSCROLL.htmlCache = [];
     VSCROLL.htmlCacheKey = cacheKey;
   }
-
   ensureVirtualHeights(STATE.results.length);
   VSCROLL.renderStart = 0;
   VSCROLL.renderEnd = 0;
-
   if (STATE.resultsSkeletonActive) animateResultsReveal();
   renderVisible();
 }
@@ -946,7 +869,6 @@ function buildResultHTML(rec, idx) {
     const folderDisplay = STATE.searchFolders ? highlightText(f, STATE.query) : escapeHTML(f);
     return `<span class="path-sep">/</span><span class="path-folder" data-folder="${escapeHTML(accum)}" data-repo="${repoShort}">${folderDisplay}</span>`;
   }).join("");
-
   return `
     <input type="checkbox" class="result-checkbox" data-index="${idx}">
     <div class="result-file-icon">${ICONS[iconType] || ICONS.file}</div>
@@ -1007,7 +929,6 @@ function renderVisible() {
     updateScrollTrack();
     return;
   }
-
   const container = DOM.resultsContainer;
   const scrollTop = container.scrollTop;
   const viewH = container.clientHeight;
@@ -1015,19 +936,14 @@ function renderVisible() {
   const overscanItems = Math.max(10, Math.floor(viewH / (est || 60)));
   const overscanPx = overscanItems * (est || 60);
   ensurePrefixHeights();
-
   let start = findVirtualIndex(Math.max(0, scrollTop - overscanPx));
   let end = Math.min(len, findVirtualIndex(scrollTop + viewH + overscanPx) + 1);
   if (end - start < 10 && len > 10) end = Math.min(start + 30, len);
-
   if (start === VSCROLL.renderStart && end === VSCROLL.renderEnd) return;
-
   VSCROLL.renderStart = start;
   VSCROLL.renderEnd = end;
-
   const totalH = getVirtualTotalHeight();
   const topH = getVirtualOffset(start);
-
   let html = "";
   if (topH > 0) html += '<div style="height:' + topH + 'px;flex-shrink:0"></div>';
   for (let ri = start; ri < end; ri++) {
@@ -1036,13 +952,10 @@ function renderVisible() {
   }
   const bottomH = Math.max(0, totalH - getVirtualOffset(end));
   if (bottomH > 0) html += '<div style="height:' + bottomH + 'px;flex-shrink:0"></div>';
-
   const tpl = document.createElement("template");
   tpl.innerHTML = html;
   DOM.resultsList.replaceChildren(tpl.content);
-
   if (DOM.multiSelectToggle && DOM.multiSelectToggle.checked) updateSelectionUI();
-
   requestAnimationFrame(() => {
     if (measureHeights()) {
       VSCROLL.renderStart = -1;
@@ -1204,16 +1117,11 @@ function updateLoadInfo() {
   requestAnimationFrame(updateScrollTrack);
 }
 
-/* ═══════════════════════════════════════════════════════════
-   Prefetch next page (background, fire-and-forget)
-   ═══════════════════════════════════════════════════════════ */
-
 function prefetchNextPage() {
   var nextPage = STATE._loadedPage + 1;
   var totalPages = Math.ceil(STATE.total / STATE.pageSize);
   if (nextPage > totalPages) return;
   if (STATE._pageCache[nextPage]) return;
-
   var reqId = searchRequestId;
   var q = STATE.query || "";
   var isRepo = !!STATE.repo;
@@ -1237,7 +1145,6 @@ function prefetchNextPage() {
   body.sort = DOM.sortSelect.value;
   if (!STATE.searchFolders) body.search_folders = false;
   if (STATE.exact) body.exact = true;
-
   fetch(base, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
@@ -1280,13 +1187,7 @@ function consumeCachedAppendPage() {
   return true;
 }
 
-/* ═══════════════════════════════════════════════════════════
-   Sidebar — Browser (Enter/Exit Navigation)
-   ═══════════════════════════════════════════════════════════ */
-
 async function doSearch(append = false) {
-  // ── 1. 竞态控制 + 防重 ─────────────────────────
-  // 新搜索时取消旧请求
   if (!append) {
     selectedIndices = {};
     lastSelectedIndex = -1;
@@ -1304,11 +1205,7 @@ async function doSearch(append = false) {
       scrollLoadTimer = null;
     }
   }
-
-  // 防止同一页重复请求
   if (append && STATE._pendingPage === STATE.page) return;
-
-  // Cache hit: consume prefetched page directly, skip network
   if (append && STATE._pageCache[STATE.page]) {
     if (VSCROLL.isDraggingThumb) {
       STATE._deferredAppendWhileDragging = true;
@@ -1319,7 +1216,6 @@ async function doSearch(append = false) {
     consumeCachedAppendPage();
     return;
   }
-
   STATE.isLoading = true;
   if (!append) setSearchVisualLoading(true);
   STATE._pendingPage = STATE.page;
@@ -1345,7 +1241,6 @@ async function doSearch(append = false) {
   if (STATE.filterMaxSize !== null) requestBody.max_size = STATE.filterMaxSize;
   if (!STATE.searchFolders) requestBody.search_folders = false;
   if (STATE.exact) requestBody.exact = true;
-
   STATE.resultsSkeletonActive = shouldShowResultsSkeleton(append);
   DOM.resultsLoading.style.display = (!append && !STATE.resultsSkeletonActive) ? 'flex' : 'none';
   if (!append) {
@@ -1358,16 +1253,12 @@ async function doSearch(append = false) {
       clearResultsSkeleton();
     }
   }
-
   try {
     const data = await API.search(requestBody);
-    // 如果不是最新请求，直接丢弃
     if (currentRequestId !== searchRequestId) return;
-
     STATE.total = data.total;
     STATE.didYouMean = data.did_you_mean || null;
     const newItems = data.results;
-
     if (append) {
       if (VSCROLL.isDraggingThumb) {
         STATE._pageCache[data.page] = newItems;
@@ -1377,10 +1268,8 @@ async function doSearch(append = false) {
         DOM.resultsLoading.style.display = 'none';
         return;
       }
-      // ── 按序缓存 + 拼接 ──────────────────────
       STATE._pageCache[data.page] = newItems;
       let nextPage = STATE._loadedPage + 1;
-
       while (STATE._pageCache[nextPage]) {
         const pageItems = STATE._pageCache[nextPage];
         STATE.results = STATE.results.concat(pageItems);
@@ -1393,7 +1282,6 @@ async function doSearch(append = false) {
       VSCROLL.renderEnd = 0;
       requestAnimationFrame(renderVisible);
     } else {
-      // 新搜索
       STATE.results = newItems;
       STATE._loadedPage = 1;
       STATE._pageCache = {};
@@ -1401,19 +1289,15 @@ async function doSearch(append = false) {
       resetVirtualScrollState();
       renderResults();
     }
-
     STATE.hasMore = STATE.results.length < STATE.total;
     updateStatusBar();
     updateLoadInfo();
-
     if (STATE.didYouMean) {
       DOM.didYouMean.textContent = `你是不是想找: ${STATE.didYouMean}`;
       DOM.didYouMean.style.display = 'inline';
     }
-
     syncStateToURL(true);
     prefetchNextPage();
-
   } catch (err) {
     if (err.name === 'AbortError') return;
     if (append && currentRequestId === searchRequestId) {
@@ -1433,12 +1317,7 @@ async function doSearch(append = false) {
   }
 }
 
-/* ═══════════════════════════════════════════════════════════
-   Filters (Right Sidebar)
-   ═══════════════════════════════════════════════════════════ */
-
 async function renderFilters() {
-  // Repo filter
   if (STATE.mode === "global") {
     DOM.filterRepoSection.style.display = "";
     if (!STATE.repoList || STATE.repoList.length === 0) try { STATE.repoList = await API.getRepos(); } catch (e) { }
@@ -1446,7 +1325,6 @@ async function renderFilters() {
   } else {
     DOM.filterRepoSection.style.display = "none";
   }
-  // Folder tree
   if (STATE.mode === "repo") {
     DOM.filterFolderSection.style.display = "";
     if (!STATE.folderTree) try {
@@ -1459,7 +1337,6 @@ async function renderFilters() {
   } else {
     DOM.filterFolderSection.style.display = "none";
   }
-  // Extensions
   try {
     STATE.extensionList = await API.getExtensions(STATE.repo);
   } catch (e) {
@@ -1470,8 +1347,6 @@ async function renderFilters() {
 
 function renderExtensionFilter() {
   const allExt = STATE.extensionList || [];
-
-  // Clean up extensions that don't exist in current repo
   if (STATE.filterExtensions.length > 0 && allExt.length > 0) {
     var availNames = {};
     for (var axe = 0; axe < allExt.length; axe++) { availNames[allExt[axe].name] = true; }
@@ -1483,12 +1358,10 @@ function renderExtensionFilter() {
       doSearch();
     }
   }
-
   if (!Array.isArray(allExt) || allExt.length === 0) {
     DOM.filterExtList.innerHTML = '<div style="font-size:12px;color:var(--on-surface-variant);opacity:0.6;padding:4px 0">暂无</div>';
     return;
   }
-
   const ordered = [];
   const rest = [];
   for (const e of allExt) {
@@ -1501,13 +1374,11 @@ function renderExtensionFilter() {
     }
   }
   ordered.sort((a, b) => a._idx - b._idx);
-
   const items = ordered.map(e => ({ key: e.key, label: e.label, count: e.count }));
   if (rest.length > 0) {
     const total = rest.reduce((s, e) => s + (e.count || 0), 0);
     items.push({ key: "__OTHER__", label: `其他 (${rest.length}种)`, count: total });
   }
-
   renderCheckboxList(DOM.filterExtList, items, STATE.filterExtensions, (vals) => {
     STATE.filterExtensions = vals.filter(v => v !== "__OTHER__");
     if (vals.includes("__OTHER__")) {
@@ -1577,7 +1448,6 @@ function toggleFolderChildrenAnimated(childContainer, toggle, expanding) {
   toggle.getAnimations().forEach((animation) => animation.cancel());
   const glyph = toggle.querySelector(".tree-toggle-glyph");
   if (glyph) glyph.getAnimations().forEach((animation) => animation.cancel());
-
   const resetChildStyles = () => {
     childContainer.style.height = "";
     childContainer.style.opacity = "";
@@ -1585,7 +1455,6 @@ function toggleFolderChildrenAnimated(childContainer, toggle, expanding) {
     childContainer.style.overflow = "";
     childContainer.style.transition = "";
   };
-
   const stopTransition = () => {
     if (childContainer._transitionCleanup) {
       childContainer.removeEventListener("transitionend", childContainer._transitionCleanup);
@@ -1596,10 +1465,8 @@ function toggleFolderChildrenAnimated(childContainer, toggle, expanding) {
       childContainer._transitionTimer = null;
     }
   };
-
   stopTransition();
   resetChildStyles();
-
   if (expanding) {
     childContainer.style.display = "block";
     const targetHeight = childContainer.scrollHeight;
@@ -1635,7 +1502,6 @@ function toggleFolderChildrenAnimated(childContainer, toggle, expanding) {
     }
     return;
   }
-
   childContainer.style.display = "block";
   const startHeight = childContainer.scrollHeight;
   childContainer.style.height = `${startHeight}px`;
@@ -1756,12 +1622,10 @@ function setNodeSubtreeSelection(node, enabled, subtreeSet, selfSet) {
 function persistFolderSelection(subtreeSet, selfSet) {
   STATE.filterFolderSubtrees = Array.from(subtreeSet);
   STATE.filterFolderSelfs = Array.from(selfSet);
-
   const merged = [];
   selfSet.forEach(path => { if (path) merged.push(path); });
   subtreeSet.forEach(path => { if (path && !merged.includes(path)) merged.push(path); });
   STATE.filterFolders = merged;
-
   STATE.page = 1;
   STATE.results = [];
   doSearch();
@@ -1785,7 +1649,6 @@ function applyFolderSelectionToNode(node, row, subtreeSet, selfSet) {
   const partial = isNodePartiallySelected(node, subtreeSet, selfSet);
   cb.checked = full;
   cb.indeterminate = !full && partial;
-
   const selfBtn = row.querySelector(".folder-self-toggle");
   if (selfBtn) {
     const selfOn = selfSet.has(node.path);
@@ -1857,10 +1720,6 @@ function handleFolderSelfToggle(node) {
   renderFilterFolderTree();
 }
 
-/* ═══════════════════════════════════════════════════════════
-   Hitokoto
-   ═══════════════════════════════════════════════════════════ */
-
 async function fetchHitokoto() {
   try {
     const resp = await fetch("https://vomebook-hitokoto.hf.space/");
@@ -1881,10 +1740,6 @@ function typewriter(el, text, speed = 60) {
   }, speed);
 }
 
-/* ═══════════════════════════════════════════════════════════
-   Random Book
-   ═══════════════════════════════════════════════════════════ */
-
 async function randomBook() {
   try {
     const rec = await API.getRandom(STATE.repo);
@@ -1900,12 +1755,8 @@ async function randomBook() {
     showToast("获取失败");
   }
 }
-
-/* ═══════════════════════════════════════════════════════════
-   Toast
-   ═══════════════════════════════════════════════════════════ */
-
 let toastTimer;
+
 function showToast(msg, dur = 2000) {
   DOM.toast.textContent = msg;
   DOM.toast.style.display = "";
@@ -1915,12 +1766,8 @@ function showToast(msg, dur = 2000) {
   clearTimeout(toastTimer);
   toastTimer = setTimeout(() => { DOM.toast.style.display = "none"; }, dur);
 }
-
-/* ════════════════════════════════���══════════════════════════
-   Infinite Scroll & Quick Scroll
-   ═══════════════════════════════════════════════════════════ */
-
 scrollTicking = false;
+
 function maybeLoadNextPage() {
   if (VSCROLL.isDraggingThumb) return;
   if (STATE.isLoading || !STATE.hasMore) return;
@@ -1987,7 +1834,6 @@ function updateScrollThumb() {
 function setupQuickScroll() {
   let dragging = false, startY, startST;
   let dragTicking = false;
-
   function setResultScrollTop(value) {
     DOM.resultsContainer.scrollTop = value;
     if (!dragTicking) {
@@ -1998,7 +1844,6 @@ function setupQuickScroll() {
       });
     }
   }
-
   function onMouseMove(e) {
     const delta = e.clientY - startY;
     const dragRange = Math.max(1, DOM.scrollTrack.clientHeight - DOM.scrollThumb.clientHeight);
@@ -2006,7 +1851,6 @@ function setupQuickScroll() {
     const scrollEl = DOM.resultsContainer;
     setResultScrollTop(startST + ratio * Math.max(1, scrollEl.scrollHeight - scrollEl.clientHeight));
   }
-
   function onMouseUp() {
     dragging = false;
     VSCROLL.isDraggingThumb = false;
@@ -2018,14 +1862,12 @@ function setupQuickScroll() {
     }
     maybeLoadNextPage();
   }
-
   DOM.scrollThumb.addEventListener("mousedown", (e) => {
     if (dragging) return;
     dragging = true; VSCROLL.isDraggingThumb = true; startY = e.clientY; startST = DOM.resultsContainer.scrollTop; e.preventDefault(); e.stopPropagation();
     document.addEventListener("mousemove", onMouseMove);
     document.addEventListener("mouseup", onMouseUp);
   });
-
   function onTouchMove(e) {
     e.preventDefault();
     const delta = e.touches[0].clientY - startY;
@@ -2034,7 +1876,6 @@ function setupQuickScroll() {
     const scrollEl = DOM.resultsContainer;
     setResultScrollTop(startST + ratio * Math.max(1, scrollEl.scrollHeight - scrollEl.clientHeight));
   }
-
   function onTouchEnd() {
     dragging = false;
     VSCROLL.isDraggingThumb = false;
@@ -2047,7 +1888,6 @@ function setupQuickScroll() {
     }
     maybeLoadNextPage();
   }
-
   DOM.scrollThumb.addEventListener("touchstart", (e) => {
     dragging = true; VSCROLL.isDraggingThumb = true; startY = e.touches[0].clientY; startST = DOM.resultsContainer.scrollTop; e.stopPropagation();
     document.addEventListener("touchmove", onTouchMove, { passive: false });
@@ -2056,10 +1896,6 @@ function setupQuickScroll() {
   });
 }
 
-/* ═══════════════════════════════════════════════════════════
-   Theme & Mobile
-   ═══════════════════════════════════════════════════════════ */
-
 function toggleTheme() {
   const btn = DOM.themeBtn;
   const rect = btn.getBoundingClientRect();
@@ -2072,21 +1908,22 @@ function toggleTheme() {
   ripple.style.marginTop = "-0px";
   document.body.appendChild(ripple);
   document.body.classList.add("theme-transitioning");
-
   STATE.isDark = !STATE.isDark;
   applyTheme();
   localStorage.setItem("theme", STATE.isDark ? "dark" : "light");
-
   ripple.addEventListener("animationend", () => {
     ripple.remove();
     document.body.classList.remove("theme-transitioning");
   });
 }
+
 function applyTheme() {
   if (STATE.isDark) { document.body.classList.remove("light"); DOM.themeIconLight.style.display = "none"; DOM.themeIconDark.style.display = ""; }
   else { document.body.classList.add("light"); DOM.themeIconLight.style.display = ""; DOM.themeIconDark.style.display = "none"; }
 }
+
 function toggleMobile() { STATE.isMobile = !STATE.isMobile; applyMobileMode(); localStorage.setItem("mobileMode", STATE.isMobile ? "mobile" : "desktop"); }
+
 function applyMobileMode() {
   if (STATE.isMobile) {
     document.body.classList.add("mobile"); document.body.classList.remove("force-desktop");
@@ -2102,11 +1939,8 @@ function applyMobileMode() {
   updateSelectionUI();
   requestAnimationFrame(updateScrollTrack);
 }
-function autoDetectMobile() { return window.innerWidth <= 768; }
 
-/* ═══════════════════════════════════════════════════════════
-   Sidebar Visibility
-   ═══════════════════════════════════════════════════════════ */
+function autoDetectMobile() { return window.innerWidth <= 768; }
 
 function toggleLeftSidebar() {
   STATE.leftSidebarOpen = !STATE.leftSidebarOpen;
@@ -2118,12 +1952,14 @@ function toggleLeftSidebar() {
   if (STATE.isMobile && STATE.leftSidebarOpen && STATE.rightSidebarOpen) STATE.rightSidebarOpen = false;
   updateSidebarVisibility();
 }
+
 function toggleRightSidebar() {
   STATE.rightSidebarOpen = !STATE.rightSidebarOpen;
   if (STATE.rightSidebarOpen && STATE.leftSidebarOpen && STATE.isMobile) STATE.leftSidebarOpen = false;
   updateSidebarVisibility();
   syncStateToURL(true);
 }
+
 function updateSidebarVisibility() {
   DOM.leftSidebar.classList.toggle("collapsed", !STATE.leftSidebarOpen);
   DOM.leftSidebar.classList.toggle("open", STATE.leftSidebarOpen);
@@ -2131,12 +1967,8 @@ function updateSidebarVisibility() {
   DOM.rightSidebar.classList.toggle("open", STATE.rightSidebarOpen);
   DOM.overlay.style.display = (STATE.isMobile && (STATE.leftSidebarOpen || STATE.rightSidebarOpen)) ? "" : "none";
 }
-
-/* ═══════════════════════════════════════════════════════════
-   Keyboard
-   ═══════════════════════════════════════════════════════════ */
-
 let keyboardResultIndex = -1;
+
 function focusKeyboardResult(index) {
   keyboardResultIndex = Math.max(0, Math.min(index, STATE.results.length - 1));
   const top = getVirtualOffset(keyboardResultIndex);
@@ -2195,10 +2027,6 @@ function setupKeyboard() {
   });
 }
 
-/* ═══════════════════════════════════════════════════════════
-   Clear Filters
-   ═══════════════════════════════════════════════════════════ */
-
 function clearAllFilters() {
   STATE.filterRepos = []; STATE.filterExtensions = []; STATE.filterFolders = []; STATE.filterFolderSubtrees = []; STATE.filterFolderSelfs = [];
   STATE.filterMinSize = null; STATE.filterMaxSize = null;
@@ -2209,10 +2037,6 @@ function clearAllFilters() {
   syncStateToURL(true);
 }
 
-/* ═══════════════════════════════════════════════════════════
-   Event Delegation
-   ═══════════════════════════════════════════════════════════ */
-
 function setupResultDelegation() {
   DOM.resultsList.addEventListener("click", async (e) => {
     const actionBtn = e.target.closest("[data-action]");
@@ -2268,10 +2092,6 @@ function setupResultDelegation() {
   });
 }
 
-/* ═══════════════════════════════════════════════════════════
-   Init
-   ═══════════════════════════════════════════════════════════ */
-
 async function init() {
   cacheDOM();
   STATE.isDark = localStorage.getItem("theme") !== "light";
@@ -2281,9 +2101,7 @@ async function init() {
   else if (savedMobile === "desktop") STATE.isMobile = false;
   else STATE.isMobile = autoDetectMobile();
   applyMobileMode();
-
   DOM.searchInput.addEventListener("input", debouncedSearch);
-
   const renderDropdown = () => {
     var list = getHistory();
     if (list.length === 0) { DOM.historyDropdown.style.display = "none"; return; }
@@ -2305,7 +2123,6 @@ async function init() {
   var dropdownActive = false;
   DOM.searchInput.addEventListener("focus", () => { renderDropdown(); });
   DOM.searchInput.addEventListener("blur", hideDropdown);
-
   var longPressTimer = null;
   DOM.historyDropdown.addEventListener("mouseenter", () => { dropdownActive = true; });
   DOM.historyDropdown.addEventListener("mouseleave", () => { dropdownActive = false; });
@@ -2348,10 +2165,7 @@ async function init() {
     syncStateToURL(true);
     if (STATE.results.length > 0) renderResults();
   });
-
-  // Multi-select
   if (DOM.multiSelectToggle) DOM.multiSelectToggle.addEventListener("change", updateSelectionUI);
-
   DOM.resultsList.addEventListener("click", (e) => {
     if (!DOM.multiSelectToggle || !DOM.multiSelectToggle.checked) return;
     var cb = e.target.closest(".result-checkbox");
@@ -2370,7 +2184,6 @@ async function init() {
     lastSelectedIndex = idx;
     updateSelectionUI();
   });
-
   if (DOM.multiCopyLinks) DOM.multiCopyLinks.addEventListener("click", () => {
     var indices = Object.keys(selectedIndices).map(Number);
     var links = [];
@@ -2381,7 +2194,6 @@ async function init() {
     if (links.length === 0) { showToast("未选中任何文件"); return; }
     navigator.clipboard.writeText(links.join("\n")).then(() => showToast("已复制 " + links.length + " 条链接")).catch(() => showToast("复制失败"));
   });
-
   if (DOM.multiBatchDownload) DOM.multiBatchDownload.addEventListener("click", () => {
     var indices = Object.keys(selectedIndices).map(Number);
     if (indices.length === 0) { showToast("未选中任何文件"); return; }
@@ -2392,29 +2204,24 @@ async function init() {
     }
     showToast("正在下载 " + indices.length + " 个文件");
   });
-
   if (DOM.multiDeselect) DOM.multiDeselect.addEventListener("click", () => {
     selectedIndices = {};
     lastSelectedIndex = -1;
     updateSelectionUI();
   });
-
   if (DOM.multiSelectAll) DOM.multiSelectAll.addEventListener("click", () => {
     for (var si = 0; si < STATE.results.length; si++) selectedIndices[si] = true;
     lastSelectedIndex = STATE.results.length > 0 ? STATE.results.length - 1 : -1;
     updateSelectionUI();
   });
-
   DOM.hamburgerBtn.addEventListener("click", toggleLeftSidebar);
   DOM.settingsBtn.addEventListener("click", toggleRightSidebar);
   DOM.closeFiltersBtn.addEventListener("click", () => { STATE.rightSidebarOpen = false; updateSidebarVisibility(); syncStateToURL(true); });
-    
   DOM.sidebarExpandBtn.addEventListener("click", () => {
     DOM.leftSidebar.classList.toggle("expanded-wide");
     DOM.sidebarExpandBtn.textContent = DOM.leftSidebar.classList.contains("expanded-wide") ? "→" : "↔";
     syncStateToURL(true);
   });
-
   DOM.themeBtn.addEventListener("click", toggleTheme);
   DOM.mobileToggleBtn.addEventListener("click", toggleMobile);
   DOM.clearFiltersBtn.addEventListener("click", clearAllFilters);
@@ -2439,7 +2246,6 @@ async function init() {
   DOM.overlay.addEventListener("click", () => { STATE.leftSidebarOpen = false; STATE.rightSidebarOpen = false; updateSidebarVisibility(); syncStateToURL(true); });
   DOM.randomBookBtn.addEventListener('click', randomBook);
   DOM.emptyRandomBtn.addEventListener('click', randomBook);
-
   let sizeTimer;
   const sizeInputToBytes = (input, unitSelect) => {
     var val = parseFloat(input.value);
@@ -2455,12 +2261,10 @@ async function init() {
   DOM.filterMaxSize.addEventListener("input", applySizeFilter);
   DOM.filterMinUnit.addEventListener("change", applySizeFilter);
   DOM.filterMaxUnit.addEventListener("change", applySizeFilter);
-
   DOM.extSelectAll.addEventListener("click", () => { STATE.filterExtensions = (STATE.extensionList || []).map(e => e.name); STATE.page = 1; STATE.results = []; doSearch(); renderExtensionFilter(); });
   DOM.extDeselectAll.addEventListener("click", () => {
       const allExtNames = (STATE.extensionList || []).map(e => e.name);
       const currentSet = new Set(STATE.filterExtensions);
-      // 反选：当前选中的取消，未选中的选中
       STATE.filterExtensions = allExtNames.filter(e => !currentSet.has(e));
       STATE.page = 1;
       STATE.results = [];
@@ -2484,7 +2288,6 @@ async function init() {
       const allSubtreePaths = [];
       const allSelfPaths = [];
       collectFolderNodePaths(STATE.folderTree, allSubtreePaths, allSelfPaths);
-
       const nextSubtreeSet = new Set();
       const nextSelfSet = new Set();
       for (let i = 0; i < allSubtreePaths.length; i++) {
@@ -2493,24 +2296,18 @@ async function init() {
       for (let i = 0; i < allSelfPaths.length; i++) {
         if (!selfSet.has(allSelfPaths[i])) nextSelfSet.add(allSelfPaths[i]);
       }
-
       persistFolderSelection(nextSubtreeSet, nextSelfSet);
       renderFilterFolderTree();
   });
-
   DOM.didYouMean.addEventListener("click", () => { if (STATE.didYouMean) { DOM.searchInput.value = STATE.didYouMean; STATE.query = STATE.didYouMean; STATE.page = 1; STATE.results = []; addHistoryItem(STATE.query); doSearch(); } });
-
   setupInfiniteScroll();
   setupQuickScroll();
   setupKeyboard();
   setupResultDelegation();
-  
   window.addEventListener("popstate", () => ROUTER.apply());
   window.addEventListener("resize", () => { if (!localStorage.getItem("mobileMode")) { const wm = STATE.isMobile; STATE.isMobile = autoDetectMobile(); if (wm !== STATE.isMobile) applyMobileMode(); } });
-
   ROUTER.apply();
   fetchHitokoto();
   setInterval(fetchHitokoto, 30000);
 }
-
 document.addEventListener("DOMContentLoaded", init);

static/index.html

@@ -4,8 +4,6 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>VoiceOfML Search</title>
-
-<!-- PWA -->
 <link rel="manifest" href="/manifest.json">
 <meta name="theme-color" content="#1a1c1e">
 <meta name="mobile-web-app-capable" content="yes">
@@ -16,12 +14,10 @@
 <link rel="icon" type="image/png" sizes="192x192" href="/icons/icon-192.png">
 <link rel="icon" type="image/png" sizes="512x512" href="/icons/icon-512.png">
 <link rel="icon" type="image/svg+xml" href="/icons/icon.svg">
-
 <link rel="stylesheet" href="/static/style.css">
 </head>
 <body class="dark">
 
-<!-- ═══════════ Header ═══════════ -->
 <header id="header">
   <div class="header-left">
     <button id="hamburger-btn" class="icon-btn" aria-label="菜单" title="侧边栏 (Ctrl+B)">
@@ -37,7 +33,6 @@
       <span id="header-title">VoiceOfML</span>
     </a>
   </div>
-
   <div class="header-center">
     <div class="search-box" id="search-box">
       <svg class="search-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -51,7 +46,6 @@
       <div id="search-history-dropdown" class="search-history-dropdown" style="display:none"></div>
     </div>
   </div>
-
   <div class="header-right">
     <button id="settings-btn" class="icon-btn" aria-label="搜索设置" title="搜索过滤">
       <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -85,12 +79,10 @@
       </svg>
     </button>
   </div>
-</header>
 
-<!-- ═══════════ Layout Body ═══════════ -->
+</header>
 <div id="app-body" class="app-body">
 
-  <!-- Left Sidebar -->
   <aside id="left-sidebar" class="sidebar left-sidebar">
     <div class="sidebar-header">
       <span id="sidebar-title">仓库列表</span>
@@ -99,12 +91,10 @@
     <div id="sidebar-content" class="sidebar-content">
       <div class="sidebar-loading">加载中...</div>
     </div>
+
   </aside>
 
-  <!-- Main Content -->
   <main id="main-content" class="main-content">
-
-    <!-- Status Bar -->
     <div id="status-bar" class="status-bar">
       <div class="status-left">
         <span id="result-count" class="result-count"></span>
@@ -126,7 +116,6 @@
         </div>
       </div>
     </div>
-
     <div id="multi-action-bar" class="multi-action-bar" style="display:none">
       <button id="multi-select-all" class="multi-action-btn">全选</button>
       <button id="multi-deselect" class="multi-action-btn">取消选择</button>
@@ -134,8 +123,6 @@
       <button id="multi-batch-download" class="multi-action-btn primary">批量下载</button>
       <span id="multi-selected-count" class="multi-selected-count"></span>
     </div>
-
-    <!-- Results -->
     <div id="results-container" class="results-container">
       <div id="results-list" class="results-list"></div>
       <div id="results-loading" class="loading-spinner" style="display:none">
@@ -157,21 +144,16 @@
         </button>
       </div>
     </div>
-
-    <!-- Load Info -->
     <div id="load-info" class="load-info" style="display:none">
       <span id="mobile-selected-count" class="mobile-selected-count" style="display:none"></span>
       已加载 <span id="loaded-count">0</span> / <span id="total-count">0</span> 条
     </div>
-
-    <!-- Quick Scroll -->
     <div id="scroll-track" class="scroll-track">
       <div id="scroll-thumb" class="scroll-thumb"></div>
     </div>
 
   </main>
 
-  <!-- Right Sidebar (Filters) -->
   <aside id="right-sidebar" class="sidebar right-sidebar">
     <div class="sidebar-header">
       <span>搜索过滤</span>
@@ -185,7 +167,6 @@
           <span class="toggle-switch"></span>
         </label>
       </div>
-      <!-- 记录搜索历史开关 -->
       <div class="filter-section" id="history-toggle-section">
         <label class="toggle-row">
           <span class="toggle-label">记录搜索历史</span>
@@ -193,7 +174,6 @@
           <span class="toggle-switch"></span>
         </label>
       </div>
-      <!-- 搜索文件夹名开关 -->
       <div class="filter-section" id="search-folders-section">
         <label class="toggle-row">
           <span class="toggle-label">搜索文件夹名</span>
@@ -201,7 +181,6 @@
           <span class="toggle-switch"></span>
         </label>
       </div>
-      <!-- 精准搜索开关：开启后跳过模糊匹配，直接子串搜索 -->
       <div class="filter-section" id="exact-search-section">
         <label class="toggle-row">
           <span class="toggle-label">精准搜索(支持通配符*和?)</span>
@@ -209,14 +188,10 @@
           <span class="toggle-switch"></span>
         </label>
       </div>
-      
-      <!-- Repo Filter -->
       <div id="filter-repo-section" class="filter-section">
         <div class="filter-section-title">仓库过滤</div>
         <div id="filter-repo-list" class="filter-checkbox-list"></div>
       </div>
-
-      <!-- Folder Tree Filter -->
       <div id="filter-folder-section" class="filter-section">
         <div class="filter-section-title">
           <span>路径过滤</span>
@@ -227,8 +202,6 @@
         </div>
         <div id="filter-folder-tree" class="filter-folder-tree"></div>
       </div>
-
-      <!-- Extension Filter -->
       <div class="filter-section">
         <div class="filter-section-title">
           <span>文件类型</span>
@@ -239,8 +212,6 @@
         </div>
         <div id="filter-ext-list" class="filter-checkbox-list"></div>
       </div>
-
-      <!-- Size Filter -->
       <div class="filter-section">
         <div class="filter-section-title">文件大小</div>
         <div class="filter-size-row">
@@ -262,10 +233,10 @@
         </div>
       </div>
     </div>
+
   </aside>
 </div>
 
-<!-- ═══════════ Footer ═══════════ -->
 <footer id="footer" class="footer">
   <div id="hitokoto" class="hitokoto"></div>
   <button id="random-book-btn" class="random-book-btn" title="随机来本书">
@@ -275,12 +246,9 @@
     </svg>
     随机来本书
   </button>
-</footer>
 
-<!-- Overlay (mobile) -->
+</footer>
 <div id="overlay" class="overlay" style="display:none"></div>
-
-<!-- Toast -->
 <div id="toast" class="toast" style="display:none"></div>
 
 <script>
@@ -288,6 +256,7 @@ if ("serviceWorker" in navigator) {
   navigator.serviceWorker.register("/sw.js", { scope: "/" });
 }
 </script>
+
 <script src="/static/app.js"></script>
 </body>
 </html>

static/style.css

@@ -1,85 +1,61 @@
-    /* ═══════════════════════════════════════════════════════════
-   VoiceOfML Search — MD3 Design System
-   ═══════════════════════════════════════════════════════════ */
-
-/* ── CSS Variables (Dark Theme — Default) ────────────── */
 :root {
   --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
   --font-mono: "SF Mono", "Cascadia Code", "Consolas", "Menlo", monospace;
-
   --header-h: 48px;
-
   --surface: #1a1c1e;
   --surface-variant: #282a2d;
   --surface-container: #1e2022;
   --on-surface: #e2e2e6;
   --on-surface-variant: #c4c6cf;
-
   --primary: #8ab4f8;
   --on-primary: #003258;
   --primary-container: #004a7c;
   --on-primary-container: #d1e4ff;
-
   --secondary: #bcc7db;
   --on-secondary: #263141;
   --secondary-container: #3c4758;
   --on-secondary-container: #d8e3f8;
-
   --outline: #8d9099;
   --outline-variant: #43474e;
-
   --error: #f2b8b5;
   --on-error: #601410;
-
   --radius-sm: 6px;
   --radius-md: 12px;
   --radius-lg: 16px;
   --radius-full: 999px;
-
   --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
   --shadow-md: 0 2px 8px rgba(0,0,0,0.4);
   --shadow-lg: 0 4px 16px rgba(0,0,0,0.5);
-
   --transition: 150ms ease;
-  
   --sidebar-w: 280px;
   --sidebar-expanded-w: 100vw;
-
   color-scheme: dark;
 }
 
-/* ── Light Theme ─────────────────────────────────────── */
 body.light {
   --surface: #fdfbff;
   --surface-variant: #f0eff4;
   --surface-container: #f5f3f7;
   --on-surface: #1a1c1e;
   --on-surface-variant: #44474e;
-
   --primary: #1a6db5;
   --on-primary: #ffffff;
   --primary-container: #d1e4ff;
   --on-primary-container: #001d36;
-
   --secondary: #525f70;
   --on-secondary: #ffffff;
   --secondary-container: #d8e3f8;
   --on-secondary-container: #121c29;
-
   --outline: #74777f;
   --outline-variant: #c4c6cf;
-
   --error: #ba1a1a;
   --on-error: #ffffff;
-
   --shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
   --shadow-md: 0 2px 8px rgba(0,0,0,0.12);
   --shadow-lg: 0 4px 16px rgba(0,0,0,0.16);
-
   color-scheme: light;
 }
 
-/* ── Reset & Base ────────────────────────────────────── */
 *, *::before, *::after {
   box-sizing: border-box;
   margin: 0;
@@ -107,6 +83,7 @@ body {
   outline: 2px solid var(--primary);
   outline-offset: 2px;
 }
+
 .icon-btn:focus-visible,
 .icon-btn-sm:focus-visible,
 .text-btn:focus-visible,
@@ -128,6 +105,7 @@ a {
   color: var(--primary);
   text-decoration: none;
 }
+
 a:hover, a:focus-visible {
   text-decoration: underline;
 }
@@ -154,26 +132,24 @@ ul, li {
   list-style: none;
 }
 
-/* ── Scrollbar ───────────────────────────────────────── */
 ::-webkit-scrollbar {
   width: 6px;
   height: 6px;
 }
+
 ::-webkit-scrollbar-track {
   background: transparent;
 }
+
 ::-webkit-scrollbar-thumb {
   background: var(--outline-variant);
   border-radius: 3px;
 }
+
 ::-webkit-scrollbar-thumb:hover {
   background: var(--outline);
 }
 
-/* ═══════════════════════════════════════════════════════════
-   Header
-   ═══════════════════════════════════════════════════════════ */
-
 #header {
   height: var(--header-h);
   display: flex;
@@ -205,6 +181,7 @@ ul, li {
   transition: background var(--transition);
   text-decoration: none;
 }
+
 .header-logo:hover, .header-logo:focus-visible {
   background: var(--surface-variant);
   text-decoration: none;
@@ -248,6 +225,7 @@ body.light .header-logo-icon-light {
   border-radius: var(--radius-full);
   transition: all var(--transition);
 }
+
 .search-box:focus-within {
   border-color: var(--primary);
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent);
@@ -275,6 +253,7 @@ body.light .header-logo-icon-light {
   background: transparent;
   min-width: 0;
 }
+
 .search-input::placeholder {
   color: var(--on-surface-variant);
   opacity: 0.6;
@@ -307,6 +286,7 @@ body.light .header-logo-icon-light {
   overflow-y: auto;
   padding: 4px 0;
 }
+
 .search-history-dropdown .history-item {
   display: flex;
   align-items: center;
@@ -317,20 +297,24 @@ body.light .header-logo-icon-light {
   color: var(--on-surface);
   transition: background 0.1s;
 }
+
 .search-history-dropdown .history-item:hover {
   background: var(--surface-variant);
 }
+
 .search-history-dropdown .history-icon {
   flex-shrink: 0;
   color: var(--on-surface-variant);
   opacity: 0.5;
 }
+
 .search-history-dropdown .history-text {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
 .search-history-dropdown .history-del {
   flex-shrink: 0;
   background: none;
@@ -341,15 +325,18 @@ body.light .header-logo-icon-light {
   padding: 0 6px;
   opacity: 0.5;
 }
+
 .search-history-dropdown .history-del:hover {
   opacity: 1;
   color: var(--error);
 }
+
 .search-history-dropdown .history-footer {
   padding: 4px 12px;
   border-top: 1px solid var(--outline-variant);
   text-align: center;
 }
+
 .search-history-dropdown .history-clear-all {
   background: none;
   border: none;
@@ -358,6 +345,7 @@ body.light .header-logo-icon-light {
   cursor: pointer;
   opacity: 0.6;
 }
+
 .search-history-dropdown .history-clear-all:hover {
   opacity: 1;
 }
@@ -369,7 +357,6 @@ body.light .header-logo-icon-light {
   flex-shrink: 0;
 }
 
-/* Icon Buttons */
 .icon-btn {
   width: 36px;
   height: 36px;
@@ -380,6 +367,7 @@ body.light .header-logo-icon-light {
   color: var(--on-surface-variant);
   transition: all var(--transition);
 }
+
 .icon-btn:hover, .icon-btn:focus-visible {
   background: var(--surface-variant);
   color: var(--on-surface);
@@ -396,6 +384,7 @@ body.light .header-logo-icon-light {
   font-size: 18px;
   transition: all var(--transition);
 }
+
 .icon-btn-sm:hover, .icon-btn-sm:focus-visible {
   background: var(--surface-variant);
   color: var(--on-surface);
@@ -408,6 +397,7 @@ body.light .header-logo-icon-light {
   border-radius: var(--radius-sm);
   transition: background var(--transition);
 }
+
 .text-btn:hover, .text-btn:focus-visible {
   background: var(--surface-variant);
 }
@@ -419,14 +409,11 @@ body.light .header-logo-icon-light {
   border-radius: 4px;
   transition: background var(--transition);
 }
+
 .text-btn-sm:hover, .text-btn-sm:focus-visible {
   background: var(--surface-variant);
 }
 
-/* ═══════════════════════════════════════════════════════════
-   Layout
-   ═══════════════════════════════════════════════════════════ */
-
 .app-body {
   display: flex;
   flex: 1;
@@ -434,7 +421,6 @@ body.light .header-logo-icon-light {
   overflow: hidden;
 }
 
-/* ── Sidebar ─────────────────────────────────────────── */
 .sidebar {
   width: var(--sidebar-w);
   flex-shrink: 0;
@@ -445,14 +431,17 @@ body.light .header-logo-icon-light {
   transition: width var(--transition), opacity var(--transition);
   overflow: hidden;
 }
+
 .sidebar.collapsed {
   width: 0 !important; 
   border-right: none;
 }
+
 .right-sidebar {
   border-right: none;
   border-left: 1px solid var(--outline-variant);
 }
+
 .right-sidebar.collapsed {
   border-left: none;
 }
@@ -487,11 +476,11 @@ body.light .header-logo-icon-light {
   color: var(--on-surface-variant);
   opacity: 0.7;
 }
+
 .sidebar.expanded-wide {
   width: var(--sidebar-expanded-w) !important;
 }
 
-/* ── Breadcrumb (Left Sidebar) ───────────────────────── */
 .sidebar-breadcrumb {
   display: flex;
   align-items: center;
@@ -512,6 +501,7 @@ body.light .header-logo-icon-light {
   white-space: nowrap;
   transition: background var(--transition);
 }
+
 .sidebar-breadcrumb .crumb-item:hover,
 .sidebar-breadcrumb .crumb-item:focus-visible {
   background: var(--surface-variant);
@@ -522,6 +512,7 @@ body.light .header-logo-icon-light {
   cursor: default;
   font-weight: 500;
 }
+
 .sidebar-breadcrumb .crumb-item.current:hover,
 .sidebar-breadcrumb .crumb-item.current:focus-visible {
   background: none;
@@ -532,7 +523,6 @@ body.light .header-logo-icon-light {
   flex-shrink: 0;
 }
 
-/* Back to global button */
 .back-to-global {
   display: flex;
   align-items: center;
@@ -547,11 +537,11 @@ body.light .header-logo-icon-light {
   flex-shrink: 0;
   box-sizing: border-box;
 }
+
 .back-to-global:hover, .back-to-global:focus-visible {
   background: var(--surface-variant);
 }
 
-/* ── Sidebar Browser Items (Folder + File) ───────────── */
 .browser-list {
   flex: 1;
   overflow-y: auto;
@@ -567,16 +557,15 @@ body.light .header-logo-icon-light {
   font-size: 13px;
   color: var(--on-surface);
 }
+
 .browser-item:hover, .browser-item:focus-visible {
   background: var(--surface-variant);
 }
 
-/* 默认：无条纹 */
 .browser-item:nth-child(even) {
   background: transparent;
 }
 
-/* 展开后：显示条纹 */
 .left-sidebar.expanded-wide .browser-item:nth-child(even) {
   background: rgba(255, 255, 255, 0.04);
 }
@@ -628,13 +617,13 @@ body.light .left-sidebar.expanded-wide .browser-item:nth-child(even) {
   transition: all var(--transition);
   white-space: nowrap;
 }
+
 .browser-item .browser-action:hover,
 .browser-item .browser-action:focus-visible {
   background: var(--primary-container);
   color: var(--on-primary-container);
 }
 
-/* ── Main Content ────────────────────────────────────── */
 .main-content {
   flex: 1;
   display: flex;
@@ -644,10 +633,6 @@ body.light .left-sidebar.expanded-wide .browser-item:nth-child(even) {
   overflow: hidden;
 }
 
-/* ═══════════════════════════════════════════════════════════
-   Repo List (Left Sidebar — Global Mode)
-   ═══════════════════════════════════════════════════════════ */
-
 .repo-list-item {
   display: flex;
   align-items: center;
@@ -656,9 +641,11 @@ body.light .left-sidebar.expanded-wide .browser-item:nth-child(even) {
   cursor: pointer;
   transition: background var(--transition);
 }
+
 .repo-list-item:hover, .repo-list-item:focus-visible {
   background: var(--surface-variant);
 }
+
 .repo-list-item.active {
   background: var(--secondary-container);
 }
@@ -687,10 +674,6 @@ body.light .left-sidebar.expanded-wide .browser-item:nth-child(even) {
   flex-shrink: 0;
 }
 
-/* ═══════════════════════════════════════════════════════════
-   Status Bar
-   ═══════════════════════════════════════════════════════════ */
-
 .status-bar {
   display: flex;
   align-items: center;
@@ -720,8 +703,11 @@ body.mobile .status-bar {
   padding: 4px 8px;
   gap: 4px;
 }
+
 body.mobile .status-left { gap: 4px; }
+
 body.mobile .status-right { gap: 4px; }
+
 body.mobile .multi-toggle { padding: 1px 4px; font-size: 11px; }
 
 .sort-group {
@@ -747,14 +733,11 @@ body.mobile .multi-toggle { padding: 1px 4px; font-size: 11px; }
   color: var(--primary);
   cursor: pointer;
 }
+
 .did-you-mean:hover, .did-you-mean:focus-visible {
   text-decoration: underline;
 }
 
-/* ═══════════════════════════════════════════════════════════
-   Results
-   ═══════════════════════════════════════════════════════════ */
-
 .results-container {
   flex: 1;
   overflow-y: auto;
@@ -764,7 +747,6 @@ body.mobile .multi-toggle { padding: 1px 4px; font-size: 11px; }
 
 .results-container::-webkit-scrollbar { width: 0; height: 0; }
 
-/* ── Result Item ─────────────────────────────────────── */
 .result-item {
   display: flex;
   gap: 10px;
@@ -772,12 +754,15 @@ body.mobile .multi-toggle { padding: 1px 4px; font-size: 11px; }
   border-bottom: 1px solid var(--outline-variant);
   transition: background var(--transition);
 }
+
 .result-item.is-alt {
   background: var(--surface-variant);
 }
+
 .result-item:hover, .result-item:focus-visible {
   background: var(--secondary-container) !important;
 }
+
 .result-item.keyboard-focus {
   background: var(--secondary-container) !important;
 }
@@ -807,6 +792,7 @@ body.mobile .multi-toggle { padding: 1px 4px; font-size: 11px; }
     opacity: 0;
     transform: translateY(10px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -898,6 +884,7 @@ body.mobile .multi-toggle { padding: 1px 4px; font-size: 11px; }
     opacity: 0.78;
     transform: translateY(3px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -914,6 +901,7 @@ body.mobile .multi-toggle { padding: 1px 4px; font-size: 11px; }
   align-items: center;
   justify-content: center;
 }
+
 .result-file-icon svg {
   width: 22px;
   height: 22px;
@@ -963,6 +951,7 @@ body.mobile .multi-toggle { padding: 1px 4px; font-size: 11px; }
   color: var(--secondary);
   transition: color var(--transition);
 }
+
 .result-path .path-folder:hover,
 .result-path .path-folder:focus-visible {
   color: var(--primary);
@@ -1004,6 +993,7 @@ body.mobile .multi-toggle { padding: 1px 4px; font-size: 11px; }
   font-weight: 500;
   transition: opacity var(--transition);
 }
+
 .result-repo-tag:hover, .result-repo-tag:focus-visible {
   opacity: 0.8;
 }
@@ -1030,14 +1020,17 @@ body.mobile .multi-toggle { padding: 1px 4px; font-size: 11px; }
   white-space: nowrap;
   transition: all var(--transition);
 }
+
 .result-action-btn:hover, .result-action-btn:focus-visible {
   background: var(--surface-variant);
   border-color: var(--outline);
 }
+
 .result-action-btn.primary {
   color: var(--primary);
   border-color: var(--primary);
 }
+
 .result-action-btn.primary:hover,
 .result-action-btn.primary:focus-visible {
   background: var(--primary-container);
@@ -1045,10 +1038,6 @@ body.mobile .multi-toggle { padding: 1px 4px; font-size: 11px; }
   color: var(--on-primary-container);
 }
 
-/* ═══════════════════════════════════════════════════════════
-   Load Info
-   ═══════════════════════════════════════════════════════════ */
-
 .load-info {
   text-align: center;
   padding: 12px;
@@ -1077,10 +1066,6 @@ body.mobile .mobile-selected-count {
   transform: translateY(-50%);
 }
 
-/* ═══════════════════════════════════════════════════════════
-   Quick Scroll Track
-   ═══════════════════════════════════════════════════════════ */
-
 .scroll-track {
   position: absolute;
   right: 2px;
@@ -1092,10 +1077,12 @@ body.mobile .mobile-selected-count {
   pointer-events: none;
   z-index: 40;
 }
+
 .scroll-track.visible {
   opacity: 1;
   pointer-events: auto;
 }
+
 .scroll-thumb {
   position: absolute;
   width: 8px;
@@ -1106,15 +1093,13 @@ body.mobile .mobile-selected-count {
   min-height: 40px;
   transition: background var(--transition);
 }
+
 .scroll-thumb:active { cursor: grabbing; }
+
 .scroll-thumb:hover, .scroll-thumb:focus-visible {
   background: var(--on-surface-variant);
 }
 
-/* ═══════════════════════════════════════════════════════════
-   Footer
-   ═══════════════════════════════════════════════════════════ */
-
 .footer {
   height: 44px;
   display: flex;
@@ -1154,16 +1139,13 @@ body.mobile .mobile-selected-count {
   border: 1px solid var(--outline-variant);
   transition: all var(--transition);
 }
+
 .random-book-btn:hover, .random-book-btn:focus-visible {
   background: var(--surface-variant);
   border-color: var(--outline);
   color: var(--primary);
 }
 
-/* ═══════════════════════════════════════════════════════════
-   Filter Section (Right Sidebar)
-   ═══════════════════════════════════════════════════════════ */
-
 .filter-section {
   border-bottom: 1px solid var(--outline-variant);
   padding: 10px 12px;
@@ -1217,6 +1199,7 @@ body.mobile .mobile-selected-count {
   cursor: pointer;
   transition: color var(--transition);
 }
+
 .filter-checkbox-item:hover, .filter-checkbox-item:focus-visible {
   color: var(--primary);
 }
@@ -1234,7 +1217,6 @@ body.mobile .mobile-selected-count {
   margin-left: auto;
 }
 
-/* ── Folder Tree Filter ──────────────────────────────── */
 .filter-folder-tree {
   max-height: 280px;
   overflow-y: auto;
@@ -1353,7 +1335,6 @@ body.mobile .mobile-selected-count {
   color: var(--primary);
 }
 
-/* ── Size Filter ─────────────────────────────────────── */
 .filter-size-row {
   display: flex;
   align-items: center;
@@ -1370,9 +1351,11 @@ body.mobile .mobile-selected-count {
   color: var(--on-surface);
   min-width: 0;
 }
+
 .size-input:focus {
   border-color: var(--primary);
 }
+
 .size-unit {
   font-size: 12px;
   padding: 6px 4px;
@@ -1389,10 +1372,6 @@ body.mobile .mobile-selected-count {
   flex-shrink: 0;
 }
 
-/* ═══════════════════════════════════════════════════════════
-   Empty State
-   ═══════════════════════════════════════════════════════════ */
-
 .empty-state {
   display: flex;
   flex-direction: column;
@@ -1435,14 +1414,11 @@ body.mobile .mobile-selected-count {
   align-items: center;
   gap: 8px;
 }
+
 .random-big-btn:hover, .random-big-btn:focus-visible {
   opacity: 0.85;
 }
 
-/* ═══════════════════════════════════════════════════════════
-   Loading Spinner
-   ═══════════════════════════════════════════════════════════ */
-
 .loading-spinner {
   display: flex;
   align-items: center;
@@ -1463,10 +1439,6 @@ body.mobile .mobile-selected-count {
   to { transform: rotate(360deg); }
 }
 
-/* ══════════════════════════════════���════════════════════════
-   Overlay
-   ═══════════════════════════════════════════════════════════ */
-
 .overlay {
   position: fixed;
   inset: 0;
@@ -1474,10 +1446,6 @@ body.mobile .mobile-selected-count {
   z-index: 90;
 }
 
-/* ═══════════════════════════════════════════════════════════
-   Toast
-   ═══════════════════════════════════════════════════════════ */
-
 .toast {
   position: fixed;
   bottom: 60px;
@@ -1498,16 +1466,13 @@ body.mobile .mobile-selected-count {
     opacity: 0;
     transform: translateX(-50%) translateY(10px);
   }
+
   to {
     opacity: 1;
     transform: translateX(-50%) translateY(0);
   }
 }
 
-/* ═══════════════════════════════════════════════════════════
-   Mobile
-   ═══════════════════════════════════════════════════════════ */
-
 body.mobile .sidebar:not(.open) {
   width: 0;
   border-right: none;
@@ -1572,10 +1537,6 @@ body.mobile .result-actions {
   align-items: flex-end;
 }
 
-/* ═══════════════════════════════════════════════════════════
-   Responsive (auto-detect)
-   ═══════════════════════════════════════════════════════════ */
-
 @media (max-width: 768px) {
   body:not(.force-desktop) .sidebar:not(.open) {
     width: 0;
@@ -1629,10 +1590,6 @@ body.mobile .result-actions {
   }
 }
 
-/* ═══════════════════════════════════════════════════════════
-   Utility
-   ═══════════════════════════════════════════════════════════ */
-
 .hidden {
   display: none !important;
 }
@@ -1643,7 +1600,6 @@ body.mobile .result-actions {
   white-space: nowrap;
 }
 
-/* ── Toggle Switch ──────────────────────────────────── */
 .toggle-row {
   display: flex;
   align-items: center;
@@ -1693,6 +1649,7 @@ body.mobile .result-actions {
 input[type="checkbox"]:indeterminate {
   accent-color: var(--primary);
 }
+
 body.theme-transitioning,
 body.theme-transitioning #header,
 body.theme-transitioning .sidebar,
@@ -1718,6 +1675,7 @@ body.theme-transitioning .footer {
 
 @keyframes theme-ripple-expand {
   0%   { width: 0; height: 0; opacity: 0.6; }
+
   100% { width: 300vmax; height: 300vmax; opacity: 0; transform: translate(-150vmax, -150vmax); }
 }
 
@@ -1729,10 +1687,6 @@ body.theme-transitioning .footer {
   }
 }
 
-/* ═══════════════════════════════════════════════════════════
-   Multi-Select
-   ═══════════════════════════════════════════════════════════ */
-
 .multi-toggle {
   display: inline-flex;
   align-items: center;
@@ -1745,7 +1699,9 @@ body.theme-transitioning .footer {
   border-radius: var(--radius-sm);
   border: 1px solid transparent;
 }
+
 .multi-toggle:hover { border-color: var(--outline-variant); }
+
 .multi-toggle input { margin: 0; }
 
 .multi-action-bar {
@@ -1759,6 +1715,7 @@ body.theme-transitioning .footer {
   box-sizing: border-box;
   flex-wrap: nowrap;
 }
+
 .multi-action-btn {
   padding: 4px 12px;
   border: 1px solid var(--outline-variant);
@@ -1768,12 +1725,15 @@ body.theme-transitioning .footer {
   font-size: 12px;
   cursor: pointer;
 }
+
 .multi-action-btn.primary {
   background: var(--primary);
   color: var(--on-primary);
   border-color: var(--primary);
 }
+
 .multi-action-btn:hover { opacity: 0.85; }
+
 .multi-selected-count {
   margin-left: auto;
   font-size: 12px;
@@ -1795,8 +1755,11 @@ body.mobile .multi-action-btn {
   align-self: center;
   accent-color: var(--primary);
 }
+
 body.multiselect .result-checkbox { display: block; }
+
 body.multiselect .result-file-icon { display: none; }
+
 .result-item.selected {
   background: color-mix(in srgb, var(--primary) 15%, transparent) !important;
 }

static/sw.js

@@ -11,8 +11,6 @@ const PRECACHE_URLS = [
   "/icons/icon-192.png",
   "/icons/icon-512.png"
 ];
-
-// ── Install: precache app shell ─────────────────────
 self.addEventListener("install", (event) => {
   event.waitUntil(
     caches.open(CACHE_NAME).then((cache) => {
@@ -22,8 +20,6 @@ self.addEventListener("install", (event) => {
     }).then(() => self.skipWaiting())
   );
 });
-
-// ── Activate: clean old caches ──────────────────────
 self.addEventListener("activate", (event) => {
   event.waitUntil(
     caches.keys().then((keys) => {
@@ -33,27 +29,17 @@ self.addEventListener("activate", (event) => {
     }).then(() => self.clients.claim())
   );
 });
-
-// ── Fetch: cache strategies ─────────────────────────
 self.addEventListener("fetch", (event) => {
   const url = new URL(event.request.url);
-
-  // External domains: network only
   if (url.hostname !== self.location.hostname) {
     return;
   }
-
-  // ── API: network first, no caching ────────────────
   if (url.pathname.startsWith("/api/")) {
     return;
   }
-
-  // ── Download proxy: network only ──────────────────
   if (url.pathname.startsWith("/txt/")) {
     return;
   }
-
-  // ── App shell / static: cache first, network update
   event.respondWith(
     caches.match(event.request).then((cached) => {
       const fetchPromise = fetch(event.request).then((response) => {