Skip to content

Commit 46b4482

Browse files
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 <[email protected]> * perf: ui * chore: remove githubStars text --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: Rock <[email protected]>
1 parent d9fa1cb commit 46b4482

File tree

1 file changed

+37
-1
lines changed

1 file changed

+37
-1
lines changed

web/src/app/home/components/home-sidebar/HomeSidebar.tsx

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
import { useRouter, usePathname } from 'next/navigation';
1010
import { sidebarConfigList } from '@/app/home/components/home-sidebar/sidbarConfigList';
1111
import langbotIcon from '@/app/assets/langbot-logo.webp';
12-
import { systemInfo } from '@/app/infra/http/HttpClient';
12+
import { systemInfo, spaceClient } from '@/app/infra/http/HttpClient';
1313
import { useTranslation } from 'react-i18next';
1414
import { Moon, Sun, Monitor } from 'lucide-react';
1515
import { useTheme } from 'next-themes';
@@ -22,6 +22,7 @@ import {
2222
import { Button } from '@/components/ui/button';
2323
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
2424
import { LanguageSelector } from '@/components/ui/language-selector';
25+
import { Badge } from '@/components/ui/badge';
2526
import PasswordChangeDialog from '@/app/home/components/password-change-dialog/PasswordChangeDialog';
2627

2728
// TODO 侧边导航栏要加动画
@@ -44,13 +45,24 @@ export default function HomeSidebar({
4445
const [popoverOpen, setPopoverOpen] = useState(false);
4546
const [passwordChangeOpen, setPasswordChangeOpen] = useState(false);
4647
const [languageSelectorOpen, setLanguageSelectorOpen] = useState(false);
48+
const [starCount, setStarCount] = useState<number | null>(null);
4749

4850
useEffect(() => {
4951
initSelect();
5052
if (!localStorage.getItem('token')) {
5153
localStorage.setItem('token', 'test-token');
5254
localStorage.setItem('userEmail', '[email protected]');
5355
}
56+
57+
spaceClient
58+
.get('/api/v1/dist/info/repo')
59+
.then((response) => {
60+
const data = response as { repo: { stargazers_count: number } };
61+
setStarCount(data.repo.stargazers_count);
62+
})
63+
.catch((error) => {
64+
console.error('Failed to fetch GitHub star count:', error);
65+
});
5466
return () => console.log('sidebar.unmounted');
5567
// eslint-disable-next-line react-hooks/exhaustive-deps
5668
}, []);
@@ -150,6 +162,30 @@ export default function HomeSidebar({
150162
</div>
151163

152164
<div className={`${styles.sidebarBottomContainer}`}>
165+
{starCount !== null && (
166+
<div
167+
onClick={() => {
168+
window.open('https://github.com/langbot-app/LangBot', '_blank');
169+
}}
170+
className="flex justify-center cursor-pointer p-2 rounded-lg hover:bg-accent/30 transition-colors"
171+
>
172+
<Badge
173+
variant="outline"
174+
className="hover:bg-secondary/50 px-3 py-1.5 text-sm font-medium transition-colors border-border relative overflow-hidden group"
175+
>
176+
<svg
177+
className="w-4 h-4 mr-2"
178+
viewBox="0 0 24 24"
179+
fill="currentColor"
180+
>
181+
<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" />
182+
</svg>
183+
<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>
184+
{starCount.toLocaleString()}
185+
</Badge>
186+
</div>
187+
)}
188+
153189
<SidebarChild
154190
onClick={() => {
155191
// open docs.langbot.app

0 commit comments

Comments
 (0)