From a7e6b7f8eadd2dc607355555e88465cfbaaae059 Mon Sep 17 00:00:00 2001
From: tianma-if <yingwaizhiying@gmail.com>
Date: Fri, 4 Sep 2026 01:20:17 +0800
Subject: [PATCH] feat(settings): add beta badge to paw mode in sidebar and
 card header

---
 apps/web/src/components/SettingsPane.tsx      | 21 ++++++++++++++++++-
 .../CompanionDiscoverySettingsCard.tsx        |  3 +++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/SettingsPane.tsx b/apps/web/src/components/SettingsPane.tsx
index b5203628..6085aedd 100644
--- a/apps/web/src/components/SettingsPane.tsx
+++ b/apps/web/src/components/SettingsPane.tsx
@@ -78,6 +78,7 @@ type TabKey = "general" | "paw" | "users" | "data" | "ai" | "advanced" | "accoun
 interface TabItem {
   key: TabKey;
   label: string;
+  badge?: string;
   icon: React.ComponentType<{ className?: string }>;
   colorClass: string;
   bgColorClass: string;
@@ -157,6 +158,7 @@ export const SettingsPane = ({
     {
       key: "paw",
       label: t("settings.tabs.paw"),
+      badge: "Beta",
       icon: PawPrint,
       colorClass: "text-emerald-700",
       bgColorClass: "bg-emerald-50/80",
@@ -343,7 +345,19 @@ export const SettingsPane = ({
                   )}
                 >
                   <Icon className={cn("h-4 w-4 shrink-0 transition-colors", isSelected ? item.colorClass : "text-slate-400")} />
-                  {item.label}
+                  <span className="flex-1 truncate">{item.label}</span>
+                  {item.badge ? (
+                    <span
+                      className={cn(
+                        "rounded-full px-1.5 py-0.5 text-[10px] font-semibold leading-none",
+                        isSelected
+                          ? "bg-emerald-600/15 text-emerald-800"
+                          : "bg-slate-200/80 text-slate-600"
+                      )}
+                    >
+                      {item.badge}
+                    </span>
+                  ) : null}
                 </button>
               );
             })}
@@ -405,6 +419,11 @@ export const SettingsPane = ({
                           <Icon className={cn("h-4 w-4", item.iconColorClass)} />
                         </div>
                         <span className="text-sm font-semibold text-slate-800">{item.label}</span>
+                        {item.badge ? (
+                          <span className="rounded-full border border-emerald-200/80 bg-emerald-50 px-1.5 py-0.5 text-[10px] font-semibold text-emerald-700">
+                            {item.badge}
+                          </span>
+                        ) : null}
                       </div>
                       <ChevronRight className="h-4 w-4 text-slate-400" />
                     </button>
diff --git a/apps/web/src/components/settings/CompanionDiscoverySettingsCard.tsx b/apps/web/src/components/settings/CompanionDiscoverySettingsCard.tsx
index 4785ae83..bc49328b 100644
--- a/apps/web/src/components/settings/CompanionDiscoverySettingsCard.tsx
+++ b/apps/web/src/components/settings/CompanionDiscoverySettingsCard.tsx
@@ -54,6 +54,9 @@ export function CompanionDiscoverySettingsCard({ scope, onOpenCompanion }: {
             <div className="flex items-center gap-2">
               <Sparkles className="h-4 w-4 text-emerald-600 dark:text-emerald-400" />
               <CardTitle className="text-sm font-semibold sm:text-base">{t("companion.discovery.settingsTitle")}</CardTitle>
+              <span className="inline-flex items-center rounded-full border border-emerald-200/80 bg-emerald-50 px-2 py-0.5 text-[10px] font-semibold tracking-wide text-emerald-700 dark:border-emerald-800/60 dark:bg-emerald-950/50 dark:text-emerald-300">
+                Beta
+              </span>
             </div>
             <CardDescription className="text-xs leading-relaxed text-slate-600 sm:text-sm dark:text-slate-400">
               {t("companion.discovery.description")}