feat(mobile): 優化手機版時間軸與搜尋欄交互體驗

- 調整手機版底部時間軸的位置與高度，避免被系統導覽條遮擋
- 在時間軸黃色指標上方新增動態年份氣泡，並優化文字大小與清晰度
- 在搜尋框右側新增獨立的書本篩選按鈕，避免點選篩選時強制喚醒虛擬鍵盤
- 實作點選外部自動關閉搜尋/篩選面板的機制，取代原先的延時失焦邏輯

Author: raybird

webapp/src/app/app.component.css

@@ -86,10 +86,10 @@
 
 @media (max-width: 1024px) {
   .bottom-overlay {
-    bottom: 12px;
+    bottom: 16px;
     left: 12px;
     right: 12px;
-    height: 90px;
+    height: 95px;
   }
 }
 
@@ -98,15 +98,16 @@
     top: 12px;
   }
   .bottom-overlay {
-    height: 100px;
+    bottom: 24px;
+    height: 110px;
   }
 }
 
 @media (max-width: 480px) {
   .bottom-overlay {
-    height: 90px;
-    left: 8px;
-    right: 8px;
-    bottom: 8px;
+    height: 115px;
+    left: 12px;
+    right: 12px;
+    bottom: 24px;
   }
 }

webapp/src/app/search-bar/search-bar.component.css

@@ -287,4 +287,40 @@
   .search-results-container {
     max-height: 45vh;
   }
+}
+
+/* 篩選切換按鈕樣式 */
+.filter-toggle-btn {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-brown, #8b7355);
+  border-radius: 50%;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  margin-left: auto;
+}
+
+.filter-toggle-btn:hover {
+  background: rgba(200, 164, 39, 0.12);
+  color: #7a5c00;
+}
+
+.filter-toggle-btn.active {
+  background: rgba(200, 164, 39, 0.2);
+  color: #7a5c00;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.book-icon {
+  width: 18px;
+  height: 18px;
+  transition: transform 0.2s ease;
+}
+
+.filter-toggle-btn:hover .book-icon {
+  transform: scale(1.08);
 }

webapp/src/app/search-bar/search-bar.component.html

@@ -16,12 +16,24 @@
       type="text"
       class="search-input"
       id="search-input"
-      [placeholder]="selectedTextbooks.length > 0 ? '輸入關鍵字進一步篩選...' : '選擇課本或輸入關鍵字...'"
+      [placeholder]="selectedTextbooks.length > 0 ? '輸入關鍵字進一步篩選...' : '輸入關鍵字搜尋事件...'"
       (input)="onSearch($event)"
       (focus)="onFocus()"
-      (blur)="onBlur()"
       autocomplete="off"
     />
+
+    <button
+      type="button"
+      class="filter-toggle-btn"
+      [class.active]="showFilterPanel"
+      (mousedown)="$event.preventDefault()"
+      (click)="toggleFilterPanel($event)"
+      title="課本範圍篩選">
+      <svg class="book-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M4 19.5C4 18.837 4.26339 18.2011 4.73223 17.7322C5.20107 17.2634 5.83696 17 6.5 17H20M4 19.5C4 20.163 4.26339 20.7989 4.73223 21.2678C5.20107 21.7366 5.83696 22 6.5 22H20M4 19.5V4.5C4 3.83696 4.26339 3.20107 4.73223 2.73223C5.20107 2.26339 5.83696 2 6.5 2H20V17H6.5C5.83696 17 5.20107 17.2634 4.73223 17.7322C4.26339 18.2011 4 18.837 4 19.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    </button>
+
     @if (searchResults.length > 0 || queryText || selectedTextbooks.length > 0) {
       <button class="clear-button" (click)="clearSearch()">×</button>
     }

webapp/src/app/search-bar/search-bar.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, HostListener, ElementRef } from '@angular/core';
 import { AsyncPipe } from '@angular/common';
 import { Store } from '@ngrx/store';
 import { AppState } from '../store/app.state';
@@ -34,14 +34,18 @@ export class SearchBarComponent implements OnInit, OnDestroy {
   fuse!: Fuse<any>;
   isFocused = false;
   queryText = '';
+  showFilterPanel = false;
 
   textbookOptions = TEXTBOOK_OPTIONS;
   selectedTextbooks: string[] = [];
 
   private allEvents: any[] = [];
   private subscriptions: Subscription[] = [];
 
-  constructor(private store: Store<AppState>) {}
+  constructor(
+    private store: Store<AppState>,
+    private elementRef: ElementRef
+  ) {}
 
   ngOnInit(): void {
     this.events$ = this.store.select(EventSelectors.selectEvents);
@@ -61,10 +65,6 @@ export class SearchBarComponent implements OnInit, OnDestroy {
     this.subscriptions.forEach(sub => sub.unsubscribe());
   }
 
-  get showFilterPanel(): boolean {
-    return this.isFocused && !this.queryText;
-  }
-
   get showResults(): boolean {
     return this.isFocused && this.searchResults.length > 0;
   }
@@ -83,10 +83,23 @@ export class SearchBarComponent implements OnInit, OnDestroy {
 
   onFocus(): void {
     this.isFocused = true;
+    this.showFilterPanel = false;
+  }
+
+  toggleFilterPanel(event: Event): void {
+    event.stopPropagation();
+    this.showFilterPanel = !this.showFilterPanel;
+    if (this.showFilterPanel) {
+      this.isFocused = false;
+    }
   }
 
-  onBlur(): void {
-    setTimeout(() => { this.isFocused = false; }, 200);
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: MouseEvent): void {
+    if (!this.elementRef.nativeElement.contains(event.target)) {
+      this.isFocused = false;
+      this.showFilterPanel = false;
+    }
   }
 
   toggleTextbook(value: string): void {

webapp/src/app/timeline/timeline.component.css

@@ -8,19 +8,6 @@
   pointer-events: auto !important;
 }
 
-.year-indicator {
-  position: absolute;
-  top: 2px;
-  right: 10px;
-  z-index: 30;
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: rgba(44, 36, 27, 0.8);
-  font-family: var(--font-heading, serif);
-  pointer-events: none;
-  letter-spacing: 0.5px;
-}
-
 .center-needle {
   position: absolute;
   left: 50%;
@@ -39,17 +26,24 @@
   pointer-events: none;
 }
 
-.center-needle::before {
-  content: '';
+.needle-year-bubble {
   position: absolute;
-  top: 6px;
+  top: 4px;
   left: 50%;
   transform: translateX(-50%);
-  width: 0;
-  height: 0;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-top: 7px solid rgba(200, 164, 39, 0.8);
+  background: linear-gradient(135deg, rgba(235, 195, 85, 0.98), rgba(200, 164, 39, 0.98));
+  color: #2c241b;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 0.78rem;
+  font-weight: 800;
+  white-space: nowrap;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  border: 1px solid #fff;
+  font-family: var(--font-heading, serif);
+  z-index: 30;
+  letter-spacing: 0.5px;
+  text-shadow: 0 1px 0px rgba(255, 255, 255, 0.4);
 }
 
 .center-needle::after {
@@ -75,7 +69,7 @@
   pointer-events: auto !important;
   user-select: none;
   box-sizing: border-box;
-  padding-bottom: 10px;
+  padding-bottom: 16px;
 }
 
 .timeline-container.dragging {
@@ -155,15 +149,15 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  font-size: 0.85rem;
-  font-weight: 600;
+  font-size: 0.95rem;
+  font-weight: 700;
   font-family: var(--font-heading);
-  color: rgba(44, 36, 27, 0.9);
+  color: rgba(44, 36, 27, 0.98);
   white-space: nowrap;
-  letter-spacing: 0.5px;
+  letter-spacing: 0.8px;
   pointer-events: none;
   text-align: center;
-  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
+  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
 }
 
 .dynasty-years {
@@ -250,16 +244,17 @@
   top: 13px;
   left: 50%;
   transform: translateX(-50%);
-  font-size: 0.7rem;
-  color: rgba(44, 36, 27, 0.8);
+  font-size: 0.82rem;
+  color: rgba(44, 36, 27, 0.95);
   white-space: nowrap;
-  font-weight: 600;
-  letter-spacing: 0.2px;
+  font-weight: 700;
+  letter-spacing: 0.3px;
 }
 
 @media (max-width: 768px) {
-  .dynasty-bands { height: 30px; }
-  .event-dots { margin-top: 8px; }
-  .dynasty-label { font-size: 0.7rem; }
+  .dynasty-bands { height: 32px; }
+  .event-dots { margin-top: 10px; }
+  .dynasty-label { font-size: 0.85rem; font-weight: 700; }
+  .year-label { font-size: 0.75rem; font-weight: 700; }
   .dynasty-years { display: none; }
 }

webapp/src/app/timeline/timeline.component.html

@@ -1,11 +1,11 @@
 <div class="timeline-wrapper">
-  @if (currentCenterYear !== 0) {
-    <div class="year-indicator">
-      {{ currentCenterYear < 0 ? '公元前' + (-currentCenterYear) : currentCenterYear + ' 年' }}
-    </div>
-  }
-
-  <div class="center-needle"></div>
+  <div class="center-needle">
+    @if (currentCenterYear !== 0) {
+      <div class="needle-year-bubble">
+        {{ currentCenterYear < 0 ? '前 ' + (-currentCenterYear) : currentCenterYear }}
+      </div>
+    }
+  </div>
 
   <div class="timeline-container" #scrollContainer
     [class.dragging]="isDragging"

webapp/src/app/timeline/timeline.component.ts

@@ -86,6 +86,10 @@ export class TimelineComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   ngAfterViewInit(): void {
+    setTimeout(() => {
+      this.onScroll();
+    }, 100);
+
     const selectedSub = this.store.select(selectSelectedEvent).pipe(
       filter(event => !!event)
     ).subscribe(event => {