mirror of
https://github.com/langbot-app/LangBot.git
synced 2026-07-22 12:26:08 +00:00
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>
This commit is contained in:
committed by
GitHub
parent
d9fa1cbb06
commit
46b4482a7d
@@ -9,7 +9,7 @@ import {
|
|||||||
import { useRouter, usePathname } from 'next/navigation';
|
import { useRouter, usePathname } from 'next/navigation';
|
||||||
import { sidebarConfigList } from '@/app/home/components/home-sidebar/sidbarConfigList';
|
import { sidebarConfigList } from '@/app/home/components/home-sidebar/sidbarConfigList';
|
||||||
import langbotIcon from '@/app/assets/langbot-logo.webp';
|
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 { useTranslation } from 'react-i18next';
|
||||||
import { Moon, Sun, Monitor } from 'lucide-react';
|
import { Moon, Sun, Monitor } from 'lucide-react';
|
||||||
import { useTheme } from 'next-themes';
|
import { useTheme } from 'next-themes';
|
||||||
@@ -22,6 +22,7 @@ import {
|
|||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
|
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
|
||||||
import { LanguageSelector } from '@/components/ui/language-selector';
|
import { LanguageSelector } from '@/components/ui/language-selector';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
import PasswordChangeDialog from '@/app/home/components/password-change-dialog/PasswordChangeDialog';
|
import PasswordChangeDialog from '@/app/home/components/password-change-dialog/PasswordChangeDialog';
|
||||||
|
|
||||||
// TODO 侧边导航栏要加动画
|
// TODO 侧边导航栏要加动画
|
||||||
@@ -44,6 +45,7 @@ export default function HomeSidebar({
|
|||||||
const [popoverOpen, setPopoverOpen] = useState(false);
|
const [popoverOpen, setPopoverOpen] = useState(false);
|
||||||
const [passwordChangeOpen, setPasswordChangeOpen] = useState(false);
|
const [passwordChangeOpen, setPasswordChangeOpen] = useState(false);
|
||||||
const [languageSelectorOpen, setLanguageSelectorOpen] = useState(false);
|
const [languageSelectorOpen, setLanguageSelectorOpen] = useState(false);
|
||||||
|
const [starCount, setStarCount] = useState<number | null>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
initSelect();
|
initSelect();
|
||||||
@@ -51,6 +53,16 @@ export default function HomeSidebar({
|
|||||||
localStorage.setItem('token', 'test-token');
|
localStorage.setItem('token', 'test-token');
|
||||||
localStorage.setItem('userEmail', 'test@example.com');
|
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');
|
return () => console.log('sidebar.unmounted');
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, []);
|
}, []);
|
||||||
@@ -150,6 +162,30 @@ export default function HomeSidebar({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={`${styles.sidebarBottomContainer}`}>
|
<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
|
<SidebarChild
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
// open docs.langbot.app
|
// open docs.langbot.app
|
||||||
|
|||||||
Reference in New Issue
Block a user