From d8ec0c4088acea31e38844cb25068e4443091b70 Mon Sep 17 00:00:00 2001
From: yun-zhi-ztl <yunzhi@yunzhideMac-mini.local>
Date: Sat, 14 Mar 2026 20:38:22 +0800
Subject: [PATCH] fix(search): separate starred filter from sort controls

---
 web/src/i18n/locales/en.json |  3 ++
 web/src/i18n/locales/zh.json |  3 ++
 web/src/pages/search.tsx     | 82 +++++++++++++++++++-----------------
 3 files changed, 50 insertions(+), 38 deletions(-)

diff --git a/web/src/i18n/locales/en.json b/web/src/i18n/locales/en.json
index 8003e48b..7304dd9b 100644
--- a/web/src/i18n/locales/en.json
+++ b/web/src/i18n/locales/en.json
@@ -85,6 +85,9 @@
   "search": {
     "title": "Search Skills",
     "placeholder": "Search skills...",
+    "filters": {
+      "label": "Filter:"
+    },
     "sort": {
       "label": "Sort:",
       "relevance": "Relevance",
diff --git a/web/src/i18n/locales/zh.json b/web/src/i18n/locales/zh.json
index 4aec07c1..e45b549b 100644
--- a/web/src/i18n/locales/zh.json
+++ b/web/src/i18n/locales/zh.json
@@ -85,6 +85,9 @@
   "search": {
     "title": "搜索技能",
     "placeholder": "搜索技能...",
+    "filters": {
+      "label": "筛选:"
+    },
     "sort": {
       "label": "排序:",
       "relevance": "相关性",
diff --git a/web/src/pages/search.tsx b/web/src/pages/search.tsx
index 50db12b3..053669b9 100644
--- a/web/src/pages/search.tsx
+++ b/web/src/pages/search.tsx
@@ -140,47 +140,53 @@ export function SearchPage() {
         <SearchBar value={queryInput} onChange={setQueryInput} onSearch={handleSearch} />
       </div>
 
-      {/* Sort Selector */}
-      <div className="flex items-center justify-between flex-wrap gap-4">
-        <div className="flex items-center gap-3">
-          <span className="text-sm font-medium text-muted-foreground">{t('search.sort.label')}</span>
-          <div className="flex gap-2">
-            <Button
-              variant={sort === 'relevance' ? 'default' : 'outline'}
-              size="sm"
-              onClick={() => handleSortChange('relevance')}
-            >
-              {t('search.sort.relevance')}
-            </Button>
-            <Button
-              variant={sort === 'downloads' ? 'default' : 'outline'}
-              size="sm"
-              onClick={() => handleSortChange('downloads')}
-            >
-              {t('search.sort.downloads')}
-            </Button>
-            <Button
-              variant={sort === 'newest' ? 'default' : 'outline'}
-              size="sm"
-              onClick={() => handleSortChange('newest')}
-            >
-              {t('search.sort.newest')}
-            </Button>
-            <Button
-              variant={starredOnly ? 'default' : 'outline'}
-              size="sm"
-              onClick={handleStarredToggle}
-            >
-              {t('search.filterStarred')}
-            </Button>
+      {/* Sort And Filters */}
+      <div className="space-y-4">
+        <div className="flex items-center justify-between flex-wrap gap-4">
+          <div className="flex items-center gap-3">
+            <span className="text-sm font-medium text-muted-foreground">{t('search.sort.label')}</span>
+            <div className="flex gap-2">
+              <Button
+                variant={sort === 'relevance' ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => handleSortChange('relevance')}
+              >
+                {t('search.sort.relevance')}
+              </Button>
+              <Button
+                variant={sort === 'downloads' ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => handleSortChange('downloads')}
+              >
+                {t('search.sort.downloads')}
+              </Button>
+              <Button
+                variant={sort === 'newest' ? 'default' : 'outline'}
+                size="sm"
+                onClick={() => handleSortChange('newest')}
+              >
+                {t('search.sort.newest')}
+              </Button>
+            </div>
           </div>
+
+          {resultCount > 0 && (
+            <div className="text-sm text-muted-foreground">
+              {t('search.results', { count: resultCount })}
+            </div>
+          )}
         </div>
 
-        {resultCount > 0 && (
-          <div className="text-sm text-muted-foreground">
-            {t('search.results', { count: resultCount })}
-          </div>
-        )}
+        <div className="flex items-center gap-3">
+          <span className="text-sm font-medium text-muted-foreground">{t('search.filters.label')}</span>
+          <Button
+            variant={starredOnly ? 'default' : 'outline'}
+            size="sm"
+            onClick={handleStarredToggle}
+          >
+            {t('search.filterStarred')}
+          </Button>
+        </div>
       </div>
 
       {/* Results */}