From 46b4482a7d2f253ccb823665f349c2c1b9bc88b3 Mon Sep 17 00:00:00 2001
From: "devin-ai-integration[bot]"
 <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Thu, 28 Aug 2025 21:04:36 +0800
Subject: [PATCH] feat: add GitHub star count component to sidebar (#1636)

* feat: add GitHub star count component to sidebar

- Add GitHub star component to sidebar bottom section
- Fetch star count from space.langbot.app API
- Display star count with proper internationalization
- Open GitHub repository in new tab when clicked
- Follow existing sidebar styling patterns

Co-Authored-By: Rock <rockchinq@gmail.com>

* perf: ui

* chore: remove githubStars text

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Rock <rockchinq@gmail.com>
---
 .../components/home-sidebar/HomeSidebar.tsx   | 38 ++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/web/src/app/home/components/home-sidebar/HomeSidebar.tsx b/web/src/app/home/components/home-sidebar/HomeSidebar.tsx
index 25b3b58f..4009c77a 100644
--- a/web/src/app/home/components/home-sidebar/HomeSidebar.tsx
+++ b/web/src/app/home/components/home-sidebar/HomeSidebar.tsx
@@ -9,7 +9,7 @@ import {
 import { useRouter, usePathname } from 'next/navigation';
 import { sidebarConfigList } from '@/app/home/components/home-sidebar/sidbarConfigList';
 import langbotIcon from '@/app/assets/langbot-logo.webp';
-import { systemInfo } from '@/app/infra/http/HttpClient';
+import { systemInfo, spaceClient } from '@/app/infra/http/HttpClient';
 import { useTranslation } from 'react-i18next';
 import { Moon, Sun, Monitor } from 'lucide-react';
 import { useTheme } from 'next-themes';
@@ -22,6 +22,7 @@ import {
 import { Button } from '@/components/ui/button';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { LanguageSelector } from '@/components/ui/language-selector';
+import { Badge } from '@/components/ui/badge';
 import PasswordChangeDialog from '@/app/home/components/password-change-dialog/PasswordChangeDialog';
 
 // TODO 侧边导航栏要加动画
@@ -44,6 +45,7 @@ export default function HomeSidebar({
   const [popoverOpen, setPopoverOpen] = useState(false);
   const [passwordChangeOpen, setPasswordChangeOpen] = useState(false);
   const [languageSelectorOpen, setLanguageSelectorOpen] = useState(false);
+  const [starCount, setStarCount] = useState<number | null>(null);
 
   useEffect(() => {
     initSelect();
@@ -51,6 +53,16 @@ export default function HomeSidebar({
       localStorage.setItem('token', 'test-token');
       localStorage.setItem('userEmail', 'test@example.com');
     }
+
+    spaceClient
+      .get('/api/v1/dist/info/repo')
+      .then((response) => {
+        const data = response as { repo: { stargazers_count: number } };
+        setStarCount(data.repo.stargazers_count);
+      })
+      .catch((error) => {
+        console.error('Failed to fetch GitHub star count:', error);
+      });
     return () => console.log('sidebar.unmounted');
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -150,6 +162,30 @@ export default function HomeSidebar({
       </div>
 
       <div className={`${styles.sidebarBottomContainer}`}>
+        {starCount !== null && (
+          <div
+            onClick={() => {
+              window.open('https://github.com/langbot-app/LangBot', '_blank');
+            }}
+            className="flex justify-center cursor-pointer p-2 rounded-lg hover:bg-accent/30 transition-colors"
+          >
+            <Badge
+              variant="outline"
+              className="hover:bg-secondary/50 px-3 py-1.5 text-sm font-medium transition-colors border-border relative overflow-hidden group"
+            >
+              <svg
+                className="w-4 h-4 mr-2"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+              >
+                <path d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.604-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.167 22 16.418 22 12c0-5.523-4.477-10-10-10z" />
+              </svg>
+              <div className="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/20 to-transparent group-hover:translate-x-full transition-transform duration-1000 ease-out"></div>
+              {starCount.toLocaleString()}
+            </Badge>
+          </div>
+        )}
+
         <SidebarChild
           onClick={() => {
             // open docs.langbot.app