style: refine dense task views

frontend/src/App.vue

@@ -76,6 +76,7 @@ let listHandlePending: { id: string; pointer: ListDragPointer } | undefined
 let suppressListClickId = ''
 const query = ref('')
 const searchInput = ref<HTMLInputElement | null>(null)
+const taskSearchToggle = ref<HTMLButtonElement | null>(null)
 const mobileSearchOpen = ref(false)
 const searchPullDistance = ref(0)
 let searchTouchStartY: number | null = null
@@ -1344,6 +1345,21 @@ function openTaskSearch() {
   searchPullDistance.value = 0
   void nextTick(() => searchInput.value?.focus())
 }
+function closeTaskSearch() {
+  if (!isMobileSearchLayout()) return
+  mobileSearchOpen.value = false
+  searchPullDistance.value = 0
+  void nextTick(() => taskSearchToggle.value?.focus())
+}
+function toggleTaskSearch() {
+  if (mobileSearchOpen.value) closeTaskSearch()
+  else openTaskSearch()
+}
+function handleTaskSearchKeydown(event: KeyboardEvent) {
+  if (event.key !== 'Escape' || !isMobileSearchLayout()) return
+  event.preventDefault()
+  closeTaskSearch()
+}
 function startSearchPull(event: TouchEvent) {
   if (!taskSearchAvailable.value || !isMobileSearchLayout()) return
   const target = event.target as Element | null
@@ -1509,9 +1525,10 @@ onUnmounted(() => {
           <CompletedFilterPill v-model="showCompleted" class="topbar-filter" />
           <button class="icon topbar-refresh" :class="{spinning:refreshing}" type="button" aria-label="刷新当前页面" title="刷新" :disabled="refreshing || loading" @click="refreshCurrentView"><RefreshCw /></button>
         </div>
-        <div v-if="taskSearchAvailable" class="search-reveal" :class="{'mobile-search-open':mobileSearchOpen || Boolean(query),'mobile-search-pulling':searchPullDistance>0}" :style="searchRevealStyle">
+        <div v-if="taskSearchAvailable" class="search-reveal" :class="{'mobile-search-open':mobileSearchOpen,'mobile-search-pulling':searchPullDistance>0}" :style="searchRevealStyle">
+          <button ref="taskSearchToggle" class="task-search-toggle" type="button" :aria-label="mobileSearchOpen ? '收起搜索任务' : '展开搜索任务'" :aria-expanded="mobileSearchOpen" aria-controls="task-search-panel" @click="toggleTaskSearch"><Search/></button>
           <span class="search-pull-hint" aria-hidden="true">{{searchPullDistance >= 56 ? '松开搜索' : '下拉搜索'}}</span>
-          <label class="search"><Search/><input ref="searchInput" v-model="query" placeholder="搜索任务…" aria-label="搜索任务" @blur="handleSearchBlur"><kbd>⌘ K</kbd></label>
+          <label id="task-search-panel" class="search"><Search/><input ref="searchInput" v-model="query" placeholder="搜索任务…" aria-label="搜索任务" @keydown="handleTaskSearchKeydown"><kbd>⌘ K</kbd></label>
         </div>
       </header>
       <template v-if="['habits','settings'].includes(activeView)">