Optimize homepage UI and search bar styling and interactions. (#1446)

Author: ZeddYu

.gitignore

@@ -222,3 +222,11 @@ pnpm-debug.log*
 
 # These are backup files generated by rustfmt
 **/*.rs.bk
+.monkeycode
+AGENTS.md
+.codex
+.claude
+.aider*
+.cursor/
+.env
+.env.*

extensions/chrome/popup.css

@@ -139,6 +139,64 @@ button {
   margin-top: 8px;
 }
 
+.search-input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.search-icon {
+  position: absolute;
+  left: 10px;
+  width: 16px;
+  height: 16px;
+  color: var(--muted);
+  pointer-events: none;
+}
+
+.search-input-wrapper input {
+  width: 100%;
+  padding-left: 34px;
+  padding-right: 34px;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.search-input-wrapper input:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
+}
+
+.search-clear {
+  position: absolute;
+  right: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  background: var(--muted);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.search-clear svg {
+  width: 12px;
+  height: 12px;
+  color: #fff;
+}
+
+.search-clear:hover {
+  background: var(--text);
+}
+
+.search-clear[hidden] {
+  display: none;
+}
+
 .import-hint {
   margin-top: 6px;
   font-size: 12px;

extensions/chrome/popup.html

@@ -62,7 +62,23 @@ <h2 data-i18n="import_section">从 CCFDDL 导入</h2>
       </div>
       <label class="search-label">
         <span data-i18n="search_label">搜索会议</span>
-        <input id="ccfddl-search" type="text" placeholder="例如：ICML / SIGMOD" data-i18n-placeholder="search_placeholder" />
+        <div class="search-input-wrapper">
+          <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+            <circle cx="11" cy="11" r="8" />
+            <path d="m21 21-4.35-4.35" />
+          </svg>
+          <input
+            id="ccfddl-search"
+            type="text"
+            placeholder="例如：ICML / SIGMOD"
+            data-i18n-placeholder="search_placeholder"
+          />
+          <button id="ccfddl-clear" type="button" class="search-clear" aria-label="清除搜索" hidden>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+              <path d="M18 6 6 18M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
       </label>
       <ul id="ccfddl-list" class="import-list"></ul>
       <p id="ccfddl-empty" class="empty" data-i18n="import_empty">

extensions/chrome/popup.js

@@ -11,6 +11,7 @@ const emptyEl = document.getElementById("empty-state");
 const countEl = document.getElementById("count");
 const loadCcfddlBtn = document.getElementById("load-ccfddl");
 const ccfddlSearchInput = document.getElementById("ccfddl-search");
+const ccfddlClearBtn = document.getElementById("ccfddl-clear");
 const ccfddlList = document.getElementById("ccfddl-list");
 const ccfddlEmpty = document.getElementById("ccfddl-empty");
 const langToggle = document.getElementById("lang-toggle");
@@ -554,5 +555,14 @@ chrome.storage.local.get({ [LANG_STORAGE_KEY]: "zh" }, (result) => {
 });
 
 loadCcfddlBtn.addEventListener("click", loadCcfddlData);
-ccfddlSearchInput.addEventListener("input", filterCcfddlList);
+ccfddlSearchInput.addEventListener("input", () => {
+  filterCcfddlList();
+  ccfddlClearBtn.hidden = !ccfddlSearchInput.value.trim();
+});
+ccfddlClearBtn.addEventListener("click", () => {
+  ccfddlSearchInput.value = "";
+  ccfddlClearBtn.hidden = true;
+  filterCcfddlList();
+  ccfddlSearchInput.focus();
+});
 refreshDeadlinesBtn.addEventListener("click", loadDeadlines);