feat: launcher-style search UI (Raycast/Spotlight)

- Replace Pagefind UI with cmdk + Pagefind low-level API
- Quick actions when empty: nav (home, blog, tags) + recent posts
- Debounced full-text search with keyboard navigation
- Pass recent posts from layout to SearchModal
- Extract cn utility to lib/utils.ts
- Remove Pagefind UI styles, add Radix overlay styling
- Align blog search bar styling with launcher

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-02-13 23:41:10 +08:00
parent 7d85446ac5
commit fe28262ef4
10 changed files with 738 additions and 217 deletions

View File

@@ -113,10 +113,10 @@ export function PostListWithControls({ posts, pageSize }: Props) {
<input
id="post-search"
type="search"
placeholder="標題、標籤、摘要關鍵字"
placeholder="搜尋文章…"
value={searchTerm}
onChange={(event) => setSearchTerm(event.target.value)}
className="w-full rounded-full border border-slate-200 bg-white py-1.5 pl-9 pr-3 text-sm text-slate-700 shadow-sm transition duration-180 ease-snappy focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:focus:ring-blue-500"
className="w-full rounded-full border border-slate-200 bg-white py-1.5 pl-9 pr-3 text-sm text-slate-700 shadow-sm transition duration-180 ease-snappy focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:focus:border-accent dark:focus:ring-accent/30"
/>
</div>
</div>