feat(ui): refine account pages

app/(account)/notifications/page.tsx

@@ -2,14 +2,15 @@
 
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
-import { Card, CardContent } from "@/components/ui/card"
+import { EmptyState } from "@/components/ui/empty-state"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { requestWithAuth } from "@/lib/api/client"
 import { listNotifications, markAllNotificationsAsRead } from "@/lib/api/notifications"
 import { toApiError } from "@/lib/errors"
 import { notifyInfo } from "@/lib/toast"
 import type { Notification } from "@/lib/types"
-import { Bell, CheckCheck, MessageSquare, ShoppingBag } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { Bell, CheckCheck, Loader2, MessageSquare, ShoppingBag } from "lucide-react"
 import Link from "next/link"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 
@@ -25,36 +26,69 @@ const typeLabels: Record<Notification["type"], string> = {
   system: "系统",
 }
 
+const typeVariants: Record<Notification["type"], "info" | "neutral" | "default" | "secondary"> = {
+  order: "info",
+  community: "neutral",
+  system: "neutral",
+}
+
 function NotificationItem({ notification }: { notification: Notification }) {
   const Icon = typeIcons[notification.type]
+
   const content = (
-    <Card className="p-0 hover:bg-muted/50 transition-colors">
+    <div
-      <CardContent className="flex items-start gap-3 p-4">
+      className={cn(
-        <div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center shrink-0 mt-0.5">
+        "flex items-start gap-4 p-4 transition-colors group relative",
-          <Icon className="h-4 w-4" />
+        notification.read ? "hover:bg-muted/10" : "bg-primary/5 hover:bg-primary/10",
+      )}
+    >
+      <div
+        className={cn(
+          "h-10 w-10 rounded-full border border-border/40 flex items-center justify-center shrink-0",
+          notification.read ? "bg-muted/40" : "bg-background",
+        )}
+      >
+        <Icon
+          className={cn("h-4 w-4", notification.read ? "text-muted-foreground" : "text-primary")}
+        />
       </div>
-        <div className="flex-1 min-w-0">
+      <div className="flex-1 min-w-0 space-y-1">
         <div className="flex items-center gap-2">
-            <span className="text-sm font-medium">{notification.title}</span>
+          <span
-            {!notification.read && <span className="h-2 w-2 rounded-full bg-primary shrink-0" />}
+            className={cn(
+              "text-sm",
+              notification.read ? "text-foreground font-medium" : "text-foreground font-bold",
+            )}
+          >
+            {notification.title}
+          </span>
+          {!notification.read && (
+            <span className="h-1.5 w-1.5 rounded-full bg-primary shrink-0 ml-1" />
+          )}
         </div>
-          <p className="text-sm text-muted-foreground mt-0.5">{notification.content}</p>
+        <p className="text-sm text-muted-foreground leading-relaxed">{notification.content}</p>
-          <p className="text-xs text-muted-foreground mt-1">
+        <p className="text-xs text-muted-foreground/70">
           {new Date(notification.createdAt).toLocaleString("zh-CN")}
         </p>
       </div>
-        <Badge variant="outline" className="text-[10px] shrink-0">
+      <Badge
+        variant={typeVariants[notification.type] || "neutral"}
+        className="text-[10px] px-1.5 py-0 leading-tight shrink-0 mt-1"
+      >
         {typeLabels[notification.type]}
       </Badge>
-      </CardContent>
+    </div>
-    </Card>
   )
+
   return notification.link ? (
-    <Link className="block" href={notification.link}>
+    <Link
+      className="block border-b border-border/60 last:border-0 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"
+      href={notification.link}
+    >
       {content}
     </Link>
   ) : (
-    content
+    <div className="border-b border-border/60 last:border-0">{content}</div>
   )
 }
 
@@ -148,75 +182,110 @@ export default function NotificationsPage() {
     (items: Notification[], emptyText: string) => {
       if (loading) {
         return (
-          <Card>
+          <EmptyState
-            <CardContent className="py-8 text-center text-sm text-muted-foreground">
+            title="加载中"
-              加载中...
+            description="正在获取您的通知记录..."
-            </CardContent>
+            icon={Loader2}
-          </Card>
+            className="[&>div>svg]:animate-spin my-4 border-dashed"
+          />
         )
       }
 
       if (loadingError) {
         return (
-          <Card>
+          <EmptyState
-            <CardContent className="py-8 text-center text-sm text-muted-foreground">
+            title="加载失败"
-              {loadingError}
+            description={loadingError}
-            </CardContent>
+            className="my-4 border-destructive/20 bg-destructive/5"
-          </Card>
+          />
         )
       }
 
       if (items.length === 0) {
         return (
-          <Card>
+          <EmptyState
-            <CardContent className="py-8 text-center text-sm text-muted-foreground">
+            title={emptyText}
-              {emptyText}
+            description="您的所有相关通知将显示在这里。"
-            </CardContent>
+            className="my-4 border-dashed"
-          </Card>
+          />
         )
       }
 
-      return items.map((notification) => (
+      return (
+        <div className="rounded-xl border border-border/60 bg-card overflow-hidden my-4 shadow-sm">
+          {items.map((notification) => (
             <NotificationItem key={notification.id} notification={notification} />
-      ))
+          ))}
+        </div>
+      )
     },
     [loading, loadingError],
   )
 
   return (
     <div className="container mx-auto max-w-2xl px-4 py-8 space-y-6">
-      <div className="flex items-center justify-between">
+      <div className="flex items-center justify-between pb-2 border-b border-border/40">
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-3">
-          <h1 className="text-2xl font-bold">通知中心</h1>
+          <h1 className="text-2xl font-bold tracking-tight">通知中心</h1>
-          {unreadCount > 0 && <Badge>{unreadCount} 条未读</Badge>}
+          {unreadCount > 0 && (
+            <Badge variant="default" className="rounded-full px-2 py-0 h-5">
+              {unreadCount}
+            </Badge>
+          )}
         </div>
-        <Button variant="outline" size="sm" onClick={markAllAsRead} disabled={markingAll}>
+        <Button
-          <CheckCheck className="mr-1 h-4 w-4" />
+          variant="outline"
+          size="sm"
+          onClick={markAllAsRead}
+          disabled={markingAll || unreadCount === 0}
+          className="border-border/60"
+        >
+          <CheckCheck className="mr-1.5 h-4 w-4" />
           全部已读
         </Button>
       </div>
 
-      <Tabs defaultValue="all">
+      <Tabs defaultValue="all" className="w-full">
-        <TabsList>
+        <TabsList className="bg-transparent border-b border-border/40 w-full justify-start rounded-none p-0 h-10 space-x-6">
-          <TabsTrigger value="all">全部</TabsTrigger>
+          <TabsTrigger
-          <TabsTrigger value="order">订单</TabsTrigger>
+            value="all"
-          <TabsTrigger value="community">社区</TabsTrigger>
+            className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-0 h-10"
-          <TabsTrigger value="system">系统</TabsTrigger>
+          >
+            全部
+          </TabsTrigger>
+          <TabsTrigger
+            value="order"
+            className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-0 h-10"
+          >
+            订单
+          </TabsTrigger>
+          <TabsTrigger
+            value="community"
+            className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-0 h-10"
+          >
+            社区
+          </TabsTrigger>
+          <TabsTrigger
+            value="system"
+            className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-0 h-10"
+          >
+            系统
+          </TabsTrigger>
         </TabsList>
 
-        <TabsContent value="all" className="flex flex-col gap-3 mt-4">
+        <TabsContent value="all" className="outline-none">
           {renderTab(notifications, "暂无通知")}
         </TabsContent>
 
-        <TabsContent value="order" className="flex flex-col gap-3 mt-4">
+        <TabsContent value="order" className="outline-none">
           {renderTab(orderNotifs, "暂无订单通知")}
         </TabsContent>
 
-        <TabsContent value="community" className="flex flex-col gap-3 mt-4">
+        <TabsContent value="community" className="outline-none">
           {renderTab(communityNotifs, "暂无社区通知")}
         </TabsContent>
 
-        <TabsContent value="system" className="flex flex-col gap-3 mt-4">
+        <TabsContent value="system" className="outline-none">
           {renderTab(systemNotifs, "暂无系统通知")}
         </TabsContent>
       </Tabs>

app/(account)/verify/page.tsx

@@ -11,6 +11,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
+import { StatusBadge } from "@/components/ui/status-badge"
 import {
   applyCurrentUserVerification,
   getCurrentUserForLogin,
@@ -21,7 +22,7 @@ import { toApiError } from "@/lib/errors"
 import { notifyInfo, notifySuccess } from "@/lib/toast"
 import type { UserRole } from "@/lib/types"
 import { useAuthStore } from "@/store/auth"
-import { CheckCircle, Clock, ShieldCheck, Upload } from "lucide-react"
+import { CheckCircle, ShieldCheck, Upload } from "lucide-react"
 import { useEffect, useState } from "react"
 
 type MaterialKey = "idCardFront" | "idCardBack" | "gameScreenshot"
@@ -38,7 +39,7 @@ function MaterialUpload({
   onSelect: (file: File) => Promise<void>
 }) {
   return (
-    <label className="h-24 w-24 rounded-md border-2 border-dashed border-muted-foreground/25 flex flex-col items-center justify-center gap-1 text-muted-foreground cursor-pointer hover:border-muted-foreground/50 transition-colors">
+    <label className="h-24 w-24 rounded-lg border border-border/60 bg-muted/20 flex flex-col items-center justify-center gap-1.5 text-muted-foreground cursor-pointer hover:bg-accent/50 hover:border-border transition-colors">
       <input
         type="file"
         accept="image/*"
@@ -52,10 +53,10 @@ function MaterialUpload({
           target.value = ""
         }}
       />
-      <Upload className="h-5 w-5" />
+      <Upload className="h-5 w-5 opacity-70" />
-      <span className="text-[10px]">{uploading ? "上传中..." : label}</span>
+      <span className="text-[10px] font-medium">{uploading ? "上传中..." : label}</span>
       {value && (
-        <Badge variant="secondary" className="text-[10px] px-1.5 py-0">
+        <Badge variant="success" className="text-[10px] px-1.5 py-0 mt-0.5">
           已上传
         </Badge>
       )}
@@ -155,14 +156,12 @@ export default function VerifyPage() {
   }
 
   return (
-    <div className="container mx-auto max-w-2xl px-4 py-8 space-y-6">
+    <div className="container mx-auto max-w-2xl px-4 py-8 space-y-8">
       <h1 className="text-2xl font-bold">身份认证</h1>
 
-      <Card>
+      <section className="space-y-4">
-        <CardHeader>
+        <h2 className="text-base font-semibold">认证说明</h2>
-          <CardTitle className="text-base">认证说明</CardTitle>
+        <div className="rounded-xl border border-border/60 bg-muted/10 p-4 space-y-3 text-sm text-muted-foreground">
-        </CardHeader>
-        <CardContent className="space-y-3 text-sm text-muted-foreground">
           <div className="flex items-start gap-2">
             <ShieldCheck className="h-4 w-4 shrink-0 mt-0.5 text-primary" />
             <span>通过身份认证后，你可以成为打手或店主，开始接单或经营店铺</span>
@@ -171,64 +170,51 @@ export default function VerifyPage() {
             <CheckCircle className="h-4 w-4 shrink-0 mt-0.5 text-primary" />
             <span>认证信息仅用于平台审核，不会对外展示</span>
           </div>
-        </CardContent>
+        </div>
-      </Card>
+      </section>
 
-      <Card>
+      <section className="space-y-4">
-        <CardHeader>
+        <h2 className="text-base font-semibold">认证状态</h2>
-          <CardTitle className="text-base">认证状态</CardTitle>
+        <div className="rounded-xl border border-border/60 divide-y divide-border/60">
-        </CardHeader>
-        <CardContent className="space-y-3">
           {roleMeta.map((item) => {
             const status = statusFor(item.role)
             const reason = reasonFor(item.role)
 
             return (
-              <Card key={item.role} className="p-3 space-y-2 shadow-none">
+              <div key={item.role} className="flex flex-col gap-2 p-4">
                 <div className="flex items-center justify-between">
                   <span className="text-sm font-medium">{item.label}</span>
                   {status === "approved" || verifiedRoles.includes(item.role) ? (
-                    <Badge
+                    <StatusBadge status="success">已通过</StatusBadge>
-                      variant="outline"
-                      className="text-green-700 border-green-200 bg-green-50"
-                    >
-                      已通过
-                    </Badge>
                   ) : status === "pending" ? (
-                    <Badge variant="outline">
+                    <StatusBadge status="info">审核中</StatusBadge>
-                      <Clock className="mr-1 h-3.5 w-3.5" />
-                      审核中
-                    </Badge>
                   ) : status === "rejected" ? (
-                    <Badge variant="outline" className="text-red-700 border-red-200 bg-red-50">
+                    <StatusBadge status="destructive">未通过</StatusBadge>
-                      未通过
-                    </Badge>
                   ) : (
-                    <Badge variant="secondary">未申请</Badge>
+                    <StatusBadge status="neutral">未申请</StatusBadge>
                   )}
                 </div>
 
                 {status === "rejected" && (
+                  <div className="flex items-center justify-between mt-2">
                     <p className="text-xs text-muted-foreground">驳回原因：{reason}</p>
-                )}
-
-                {status === "rejected" && (
                     <Button variant="outline" size="sm" onClick={() => setVerifyRole(item.role)}>
                       重新填写
                     </Button>
+                  </div>
                 )}
-              </Card>
+              </div>
             )
           })}
-        </CardContent>
+        </div>
-      </Card>
+      </section>
 
-      <Card>
+      <Card className="border-border/60 shadow-sm">
         <CardHeader>
           <CardTitle className="text-base">申请认证</CardTitle>
         </CardHeader>
         <CardContent className="space-y-6">
-          <div className="space-y-2">
+          <div className="space-y-3">
             <Label>认证类型</Label>
             <Select value={verifyRole} onValueChange={(value) => setVerifyRole(value as UserRole)}>
               <SelectTrigger>
@@ -241,9 +227,9 @@ export default function VerifyPage() {
             </Select>
           </div>
 
-          <div className="space-y-2">
+          <div className="space-y-3">
             <Label>证明材料</Label>
-            <div className="flex gap-2">
+            <div className="flex flex-wrap gap-3">
               <MaterialUpload
                 label="身份证正面"
                 value={idCardFront}

app/(account)/wallet/page.tsx

@@ -3,6 +3,7 @@
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { EmptyState } from "@/components/ui/empty-state"
 import { Input } from "@/components/ui/input"
 import { Separator } from "@/components/ui/separator"
 import { requestWithAuth } from "@/lib/api"
@@ -42,6 +43,14 @@ const typeIcons: Record<string, typeof ArrowUpRight> = {
   refund: ArrowDownLeft,
 }
 
+const typeVariants: Record<string, "success" | "info" | "warning" | "neutral" | "destructive"> = {
+  topup: "success",
+  income: "success",
+  refund: "info",
+  payment: "neutral",
+  withdrawal: "neutral",
+}
+
 export default function WalletPage() {
   const { currentRole } = useAuthStore()
   const isConsumer = currentRole === "consumer"
@@ -196,25 +205,25 @@ export default function WalletPage() {
     <div className="container mx-auto max-w-2xl px-4 py-8 space-y-6">
       <h1 className="text-2xl font-bold">钱包</h1>
 
-      <Card>
+      <Card className="border-border/60 shadow-sm">
         <CardContent className="pt-6">
           <div className="flex items-center justify-between">
             <div>
               <p className="text-sm text-muted-foreground">
                 {isConsumer ? "账户余额" : "收入余额"}
               </p>
-              <p className="text-3xl font-bold mt-1">
+              <p className="text-3xl font-bold mt-1 tracking-tight">
                 {balance === null ? (
-                  <span className="text-muted-foreground">--</span>
+                  <span className="text-muted-foreground opacity-50">--</span>
                 ) : (
                   <>¥{balance.toFixed(2)}</>
                 )}
               </p>
               {loadError && <p className="text-xs text-destructive mt-2">{loadError}</p>}
             </div>
-            <Wallet className="h-10 w-10 text-muted-foreground" />
+            <Wallet className="h-10 w-10 text-muted-foreground/30" />
           </div>
-          <div className="flex gap-2 mt-4">
+          <div className="flex gap-2 mt-6">
             {isConsumer ? (
               <Button
                 disabled={isMutating}
@@ -234,7 +243,7 @@ export default function WalletPage() {
       </Card>
 
       {isConsumer ? (
-        <Card>
+        <Card className="border-border/60 shadow-sm">
           <CardHeader>
             <CardTitle className="text-base">快捷充值</CardTitle>
           </CardHeader>
@@ -244,7 +253,7 @@ export default function WalletPage() {
                 <Button
                   key={`amount-${amount}`}
                   variant={selectedAmount === amount ? "default" : "outline"}
-                  className="h-12"
+                  className="h-12 border-border/60"
                   onClick={() => {
                     setSelectedAmount(amount)
                     setCustomAmount(amount.toString())
@@ -254,12 +263,13 @@ export default function WalletPage() {
                 </Button>
               ))}
             </div>
-            <Separator />
+            <Separator className="bg-border/60" />
             <div className="flex gap-2">
               <Input
                 placeholder="自定义金额"
                 type="number"
                 value={customAmount}
+                className="border-border/60 focus-visible:ring-primary/20"
                 onChange={(event) => {
                   setCustomAmount(event.target.value)
                   setSelectedAmount(null)
@@ -272,31 +282,32 @@ export default function WalletPage() {
           </CardContent>
         </Card>
       ) : (
-        <Card>
+        <Card className="border-border/60 shadow-sm">
           <CardHeader>
             <CardTitle className="text-base">收入概览</CardTitle>
           </CardHeader>
           <CardContent>
             <div className="grid grid-cols-3 gap-4 text-center">
-              <div>
+              <div className="space-y-1">
                 <p className="text-xs text-muted-foreground">累计收入</p>
                 <p className="text-lg font-bold">¥{incomeSummary.income.toFixed(2)}</p>
               </div>
-              <div>
+              <div className="space-y-1">
                 <p className="text-xs text-muted-foreground">可提现</p>
                 <p className="text-lg font-bold">¥{incomeSummary.available.toFixed(2)}</p>
               </div>
-              <div>
+              <div className="space-y-1">
                 <p className="text-xs text-muted-foreground">已提现</p>
                 <p className="text-lg font-bold">¥{incomeSummary.withdrawn.toFixed(2)}</p>
               </div>
             </div>
-            <Separator className="my-4" />
+            <Separator className="my-6 bg-border/60" />
             <div className="flex gap-2">
               <Input
                 placeholder="提现金额"
                 type="number"
                 value={customAmount}
+                className="border-border/60 focus-visible:ring-primary/20"
                 onChange={(event) => setCustomAmount(event.target.value)}
               />
               <Button variant="outline" disabled={isMutating} onClick={() => void handleWithdraw()}>
@@ -307,9 +318,14 @@ export default function WalletPage() {
         </Card>
       )}
 
-      <Card>
+      <Card className="border-border/60 shadow-sm overflow-hidden">
-        <CardHeader className="flex flex-row items-center justify-between">
+        <CardHeader className="flex flex-row items-center justify-between border-b border-border/60 bg-muted/10 py-4">
+          <div className="space-y-1">
             <CardTitle className="text-base">交易记录</CardTitle>
+            {lastRefreshedAt && (
+              <p className="text-xs text-muted-foreground">最近刷新：{lastRefreshedAt}</p>
+            )}
+          </div>
           <Button
             variant="ghost"
             size="sm"
@@ -323,42 +339,62 @@ export default function WalletPage() {
             刷新
           </Button>
         </CardHeader>
-        <CardContent className="space-y-3">
+        <CardContent className="p-0">
-          {lastRefreshedAt && (
-            <p className="text-xs text-muted-foreground">最近刷新：{lastRefreshedAt}</p>
-          )}
           {isLoading ? (
-            <div className="text-center py-8 text-muted-foreground text-sm">加载中...</div>
+            <EmptyState
+              title="加载中"
+              description="正在获取交易记录..."
+              icon={RefreshCw}
+              className="border-0"
+            />
           ) : filteredTransactions.length > 0 ? (
-            filteredTransactions.map((tx) => {
+            <div className="divide-y divide-border/60">
+              {filteredTransactions.map((tx) => {
                 const Icon = typeIcons[tx.type]
                 const isIncome = tx.type === "topup" || tx.type === "income" || tx.type === "refund"
                 return (
-                <div key={tx.id} className="flex items-center justify-between">
+                  <div
+                    key={tx.id}
+                    className="flex items-center justify-between p-4 hover:bg-muted/10 transition-colors"
+                  >
                     <div className="flex items-center gap-3">
-                    <div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center">
+                      <div className="h-10 w-10 rounded-full bg-muted/40 flex items-center justify-center border border-border/60">
-                      {Icon ? <Icon className="h-4 w-4" /> : <ArrowUpRight className="h-4 w-4" />}
+                        {Icon ? (
+                          <Icon className="h-4 w-4 text-foreground/70" />
+                        ) : (
+                          <ArrowUpRight className="h-4 w-4 text-foreground/70" />
+                        )}
                       </div>
-                    <div>
+                      <div className="space-y-0.5">
                         <p className="text-sm font-medium">{tx.description}</p>
-                      <p className="text-xs text-muted-foreground">
+                        <p className="text-[11px] text-muted-foreground">
                           {new Date(tx.createdAt).toLocaleString("zh-CN")}
                         </p>
                       </div>
                     </div>
-                  <div className="text-right">
+                    <div className="text-right space-y-1">
-                    <p className={`text-sm font-medium ${isIncome ? "text-green-600" : ""}`}>
+                      <p
+                        className={`text-sm font-bold ${isIncome ? "text-success" : "text-foreground"}`}
+                      >
                         {isIncome ? "+" : ""}¥{Math.abs(Number(tx.amount)).toFixed(2)}
                       </p>
-                    <Badge variant="outline" className="text-[10px]">
+                      <Badge
+                        variant={typeVariants[tx.type] || "neutral"}
+                        className="text-[10px] px-1.5 py-0 leading-tight"
+                      >
                         {typeLabels[tx.type]}
                       </Badge>
                     </div>
                   </div>
                 )
-            })
+              })}
+            </div>
           ) : (
-            <div className="text-center py-8 text-muted-foreground text-sm">暂无交易记录</div>
+            <EmptyState
+              title="暂无交易记录"
+              description="你的所有收支记录将显示在这里。"
+              className="border-0"
+            />
           )}
         </CardContent>
       </Card>

components/account-sidebar.tsx

@@ -17,21 +17,28 @@ export function AccountSidebar() {
   const pathname = usePathname()
 
   return (
-    <aside className="w-56 shrink-0 border-r bg-muted/30">
+    <aside className="w-56 shrink-0 border-r border-border/60">
-      <div className="flex h-14 items-center border-b px-4 font-semibold">账号设置</div>
+      <div className="flex h-14 items-center border-b border-border/60 px-6 font-semibold">
-      <nav className="p-2 space-y-1">
+        账号设置
+      </div>
+      <nav className="p-3 space-y-1">
         {links.map((link) => {
           const Icon = link.icon
           const isActive = pathname === link.href
           return (
             <Button
               key={link.href}
-              variant={isActive ? "secondary" : "ghost"}
+              variant="ghost"
-              className={cn("w-full justify-start", !isActive && "text-muted-foreground")}
+              className={cn(
+                "w-full justify-start rounded-md border-l-2 transition-colors h-10",
+                isActive
+                  ? "border-primary bg-primary/5 text-foreground font-medium"
+                  : "border-transparent text-muted-foreground hover:bg-accent/50 hover:text-foreground",
+              )}
               asChild
             >
               <Link href={link.href}>
-                <Icon className="h-4 w-4" />
+                <Icon className="mr-2 h-4 w-4" />
                 {link.label}
               </Link>
             </Button>