feat(web): inline toolbar with label sort, compact time, icon search

reaction_board/web/static/style.css

@@ -516,13 +516,15 @@ h1, h2, h3, p { margin: 0; }
 
 .rank-toolbar {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
+  overflow-x: auto;
+  scrollbar-width: none;
+  padding-bottom: 2px;
 }
-.rank-search { display: flex; flex: 0 0 auto; width: 230px; gap: 6px; }
-.rank-search .search-input { flex: 1 1 auto; min-width: 0; }
-.select-label {
+.rank-toolbar::-webkit-scrollbar { display: none; }
+.rank-toolbar .select-label {
   display: inline-flex;
   align-items: center;
   gap: 6px;
@@ -530,11 +532,38 @@ h1, h2, h3, p { margin: 0; }
   font-size: 12.5px;
   white-space: nowrap;
 }
-.rank-toolbar .select { max-width: 220px; width: auto; }
-@media (max-width: 619px) {
-  .rank-search { width: 230px; }
-  .rank-toolbar .select { max-width: 100%; }
+.rank-toolbar .select { max-width: 150px; min-width: 0; width: auto; }
+.rank-toolbar #rank-time { max-width: 128px; }
+.rank-search {
+  display: flex;
+  flex: 1 1 120px;
+  min-width: 96px;
+  margin-left: auto;
 }
+.search-box { position: relative; display: flex; align-items: center; width: 100%; }
+.search-box .search-input { width: 100%; padding-right: 34px; }
+.search-box .search-input::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  appearance: none;
+}
+.search-button {
+  position: absolute;
+  right: 2px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 34px;
+  height: 34px;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+}
+.search-button svg { width: 18px; height: 18px; }
+.search-button:hover { color: var(--accent); }
 .search-input, .select {
   min-height: 38px;
   padding: 8px 11px;

reaction_board/web/static/views/rankings.js

@@ -67,27 +67,27 @@ function timeOptions(within, year, years) {
   return base + yearOptions;
 }
 
-function controls({ scope, sort, within, year, growthDays, q, minVideos, years }) {
+function controls({ scope, sort, within, year, growthDays, q, years }) {
   return `
     <div class="rank-toolbar">
-      <form class="rank-search" id="rank-filter">
-        <input class="search-input" type="search" name="q" value="${escapeAttr(q || "")}"
-          placeholder="${scope === "up" ? "搜索 UP 名" : "搜索标题或 UP"}" autocomplete="off">
-        <button class="button" type="submit">搜索</button>
-      </form>
       <label class="select-label">排序
         <select class="select" id="rank-sort">${sortOptions(scope, sort)}</select>
       </label>
-      <label class="select-label">时间
-        <select class="select" id="rank-time">${timeOptions(within, year, years)}</select>
-      </label>
-      ${scope === "up" ? `<label class="select-label">视频数
-        <select class="select" id="min-videos">
-          <option value="1" ${String(minVideos) === "1" ? "selected" : ""}>全部 UP</option>
-          <option value="2" ${String(minVideos) === "2" ? "selected" : ""}>≥ 2 条</option>
-          <option value="5" ${String(minVideos) === "5" ? "selected" : ""}>≥ 5 条</option>
-        </select>
-      </label>` : ""}
+      <select class="select" id="rank-time" aria-label="时间范围" title="时间范围">
+        ${timeOptions(within, year, years)}
+      </select>
+      <form class="rank-search" id="rank-filter">
+        <span class="search-box">
+          <input class="search-input" type="search" name="q" value="${escapeAttr(q || "")}"
+            placeholder="${scope === "up" ? "搜索 UP 名" : "搜索标题或 UP"}" autocomplete="off">
+          <button class="search-button" type="submit" aria-label="搜索" title="搜索">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+              stroke-linecap="round" aria-hidden="true">
+              <circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.2-3.2"></path>
+            </svg>
+          </button>
+        </span>
+      </form>
     </div>
     ${scope === "video" && (sort === "growth" || sort === "growth_rate") ? `
       <div class="chip-row growth-days">
@@ -184,9 +184,6 @@ function bindControls(root) {
   root.querySelectorAll("[data-growth-days]").forEach((button) => button.addEventListener("click", () => {
     replaceQuery({ growth_days: button.dataset.growthDays, page: null });
   }));
-  root.querySelector("#min-videos")?.addEventListener("change", (event) => {
-    replaceQuery({ min_videos: event.target.value, page: null });
-  });
   root.querySelector("#rank-filter")?.addEventListener("submit", (event) => {
     event.preventDefault();
     const value = new FormData(event.target).get("q") || "";
@@ -205,7 +202,6 @@ async function renderScope(root, { query }, scope) {
   const year = query.get("year") || "";
   const growthDays = query.get("growth_days") || "7";
   const q = query.get("q") || "";
-  const minVideos = query.get("min_videos") || "1";
   const page = Math.max(1, Number(query.get("page") || 1));
 
   const overview = await getOverview();
@@ -222,7 +218,7 @@ async function renderScope(root, { query }, scope) {
   };
   let data;
   if (scope === "up") {
-    data = await api("/api/ups", { ...params, min_videos: minVideos });
+    data = await api("/api/ups", params);
   } else {
     data = await api("/api/videos", params);
   }
@@ -235,7 +231,7 @@ async function renderScope(root, { query }, scope) {
     <header class="page-head">
       <h1>${title} <span class="page-sub">共 ${formatCount(data.total)} ${unit}</span></h1>
     </header>
-    ${controls({ scope, sort, within, year, growthDays, q, minVideos, years })}
+    ${controls({ scope, sort, within, year, growthDays, q, years })}
     ${durationNote(data)}
     ${data.available === false ? `<div class="notice-row warning">
       <strong>${sort.startsWith("growth") ? "增长数据尚不可用" : "榜单筛选后为空"}</strong>