From f90e404efc1e93cd4df864a97b158faf88929858 Mon Sep 17 00:00:00 2001
From: yun-zhi-ztl <yunzhi@yunzhideMac-mini.local>
Date: Sat, 14 Mar 2026 20:23:36 +0800
Subject: [PATCH] fix(skill): refine starred and rating visual states

---
 web/src/features/skill/skill-card.tsx   | 14 ++++++++------
 web/src/features/social/star-button.tsx |  5 +++--
 web/src/features/social/use-star.ts     |  4 ++--
 web/src/i18n/locales/en.json            |  5 +----
 web/src/i18n/locales/zh.json            |  5 +----
 5 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/web/src/features/skill/skill-card.tsx b/web/src/features/skill/skill-card.tsx
index 7c20e776..8cd1e162 100644
--- a/web/src/features/skill/skill-card.tsx
+++ b/web/src/features/skill/skill-card.tsx
@@ -4,6 +4,7 @@ import { useAuth } from '@/features/auth/use-auth'
 import { useStar } from '@/features/social/use-star'
 import { Card } from '@/shared/ui/card'
 import { NamespaceBadge } from '@/shared/components/namespace-badge'
+import { Bookmark } from 'lucide-react'
 
 interface SkillCardProps {
   skill: SkillSummary
@@ -11,10 +12,10 @@ interface SkillCardProps {
   highlightStarred?: boolean
 }
 
-export function SkillCard({ skill, onClick, highlightStarred = false }: SkillCardProps) {
+export function SkillCard({ skill, onClick, highlightStarred = true }: SkillCardProps) {
   const { t } = useTranslation()
   const { isAuthenticated } = useAuth()
-  const { data: starStatus } = useStar(skill.id)
+  const { data: starStatus } = useStar(skill.id, highlightStarred && isAuthenticated)
   const showStarredBadge = highlightStarred && isAuthenticated && starStatus?.starred
 
   return (
@@ -32,7 +33,8 @@ export function SkillCard({ skill, onClick, highlightStarred = false }: SkillCar
               {skill.displayName}
             </h3>
             {showStarredBadge ? (
-              <span className="inline-flex items-center rounded-full border border-primary/20 bg-primary/10 px-2.5 py-1 text-[11px] font-medium text-primary">
+              <span className="inline-flex items-center gap-1 rounded-full border border-primary/20 bg-primary/10 px-2 py-1 text-[11px] font-medium text-primary">
+                <Bookmark className="h-3 w-3 fill-current" />
                 {t('skillCard.starred')}
               </span>
             ) : null}
@@ -56,20 +58,20 @@ export function SkillCard({ skill, onClick, highlightStarred = false }: SkillCar
             <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
             </svg>
-            {t('skillCard.downloads', { count: skill.downloadCount })}
+            {skill.downloadCount}
           </span>
           <span className="flex items-center gap-1">
             <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-4-7 4V5z" />
             </svg>
-            {t('skillCard.stars', { count: skill.starCount })}
+            {skill.starCount}
           </span>
           {skill.ratingAvg !== undefined && skill.ratingCount > 0 && (
             <span className="flex items-center gap-1">
               <svg className="w-3.5 h-3.5 text-primary" fill="currentColor" viewBox="0 0 20 20">
                 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
               </svg>
-              {t('skillCard.rating', { score: skill.ratingAvg.toFixed(1), count: skill.ratingCount })}
+              {skill.ratingAvg.toFixed(1)}
             </span>
           )}
         </div>
diff --git a/web/src/features/social/star-button.tsx b/web/src/features/social/star-button.tsx
index 0d6c06fd..f72ac481 100644
--- a/web/src/features/social/star-button.tsx
+++ b/web/src/features/social/star-button.tsx
@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/shared/ui/button'
 import { useStar, useToggleStar } from './use-star'
-import { Star } from 'lucide-react'
+import { Bookmark } from 'lucide-react'
 import { useAuth } from '@/features/auth/use-auth'
 
 interface StarButtonProps {
@@ -34,10 +34,11 @@ export function StarButton({ skillId, starCount, onRequireLogin }: StarButtonPro
     <Button
       variant={starStatus.starred ? 'default' : 'outline'}
       size="sm"
+      className="justify-between"
       onClick={handleToggle}
       disabled={toggleMutation.isPending}
     >
-      <Star className={`w-4 h-4 mr-2 ${starStatus.starred ? 'fill-current' : ''}`} />
+      <Bookmark className={`w-4 h-4 mr-2 ${starStatus.starred ? 'fill-current' : ''}`} />
       {starStatus.starred ? t('starButton.starred') : t('starButton.star')} ({starCount})
     </Button>
   )
diff --git a/web/src/features/social/use-star.ts b/web/src/features/social/use-star.ts
index f5ab55e1..d12331b6 100644
--- a/web/src/features/social/use-star.ts
+++ b/web/src/features/social/use-star.ts
@@ -31,11 +31,11 @@ async function toggleStar(skillId: number, starred: boolean): Promise<void> {
   }
 }
 
-export function useStar(skillId: number) {
+export function useStar(skillId: number, enabled = true) {
   return useQuery({
     queryKey: ['skills', skillId, 'star'],
     queryFn: () => getStarStatus(skillId),
-    enabled: !!skillId,
+    enabled: !!skillId && enabled,
   })
 }
 
diff --git a/web/src/i18n/locales/en.json b/web/src/i18n/locales/en.json
index ee124489..1f4cf42b 100644
--- a/web/src/i18n/locales/en.json
+++ b/web/src/i18n/locales/en.json
@@ -416,10 +416,7 @@
     "star": "Star"
   },
   "skillCard": {
-    "starred": "Starred",
-    "downloads": "{{count}} downloads",
-    "stars": "{{count}} stars",
-    "rating": "Rating {{score}} ({{count}})"
+    "starred": "Starred"
   },
   "copyButton": {
     "copied": "Copied",
diff --git a/web/src/i18n/locales/zh.json b/web/src/i18n/locales/zh.json
index 69057f8d..9e71b83e 100644
--- a/web/src/i18n/locales/zh.json
+++ b/web/src/i18n/locales/zh.json
@@ -416,10 +416,7 @@
     "star": "收藏"
   },
   "skillCard": {
-    "starred": "已收藏",
-    "downloads": "下载 {{count}}",
-    "stars": "收藏 {{count}}",
-    "rating": "评分 {{score}} ({{count}})"
+    "starred": "已收藏"
   },
   "copyButton": {
     "copied": "已复制",