feat: add branding, community links, GitHub star badge, and About settings tab

This commit is contained in:
simosmik
2026-04-10 13:06:16 +00:00
parent a8dab0edcf
commit 2207d05c1c
52 changed files with 654 additions and 86 deletions

View File

@@ -1,7 +1,11 @@
import { Settings, ArrowUpCircle } from 'lucide-react';
import { Settings, ArrowUpCircle, Bug } from 'lucide-react';
import type { TFunction } from 'i18next';
import { IS_PLATFORM } from '../../../../constants/config';
import type { ReleaseInfo } from '../../../../types/sharedTypes';
const GITHUB_ISSUES_URL = 'https://github.com/siteboon/claudecodeui/issues/new';
const GITHUB_REPO_URL = 'https://github.com/siteboon/claudecodeui';
const DISCORD_INVITE_URL = 'https://discord.gg/buxwujPNRE';
function DiscordIcon({ className }: { className?: string }) {
@@ -16,6 +20,7 @@ type SidebarFooterProps = {
updateAvailable: boolean;
releaseInfo: ReleaseInfo | null;
latestVersion: string | null;
currentVersion: string;
onShowVersionModal: () => void;
onShowSettings: () => void;
t: TFunction;
@@ -25,6 +30,7 @@ export default function SidebarFooter({
updateAvailable,
releaseInfo,
latestVersion,
currentVersion,
onShowVersionModal,
onShowSettings,
t,
@@ -79,11 +85,24 @@ export default function SidebarFooter({
</>
)}
{/* Discord + Settings */}
{/* Community + Settings */}
<div className="nav-divider" />
{/* Desktop Discord */}
{/* Desktop Report Issue */}
<div className="hidden px-2 pt-1.5 md:block">
<a
href={GITHUB_ISSUES_URL}
target="_blank"
rel="noopener noreferrer"
className="flex w-full items-center gap-2 rounded-lg px-2.5 py-1.5 text-muted-foreground transition-colors hover:bg-accent/60 hover:text-foreground"
>
<Bug className="h-3.5 w-3.5" />
<span className="text-sm">{t('actions.reportIssue')}</span>
</a>
</div>
{/* Desktop Discord */}
<div className="hidden px-2 md:block">
<a
href={DISCORD_INVITE_URL}
target="_blank"
@@ -106,8 +125,37 @@ export default function SidebarFooter({
</button>
</div>
{/* Mobile Discord */}
{/* Desktop version brand line (OSS mode only) */}
{!IS_PLATFORM && (
<div className="hidden px-3 py-2 text-center md:block">
<a
href={GITHUB_REPO_URL}
target="_blank"
rel="noopener noreferrer"
className="text-[10px] text-muted-foreground/40 transition-colors hover:text-muted-foreground"
>
CloudCLI v{currentVersion} {t('branding.openSource')}
</a>
</div>
)}
{/* Mobile Report Issue */}
<div className="px-3 pt-3 md:hidden">
<a
href={GITHUB_ISSUES_URL}
target="_blank"
rel="noopener noreferrer"
className="flex h-12 w-full items-center gap-3.5 rounded-xl bg-muted/40 px-4 transition-all hover:bg-muted/60 active:scale-[0.98]"
>
<div className="flex h-8 w-8 items-center justify-center rounded-xl bg-background/80">
<Bug className="w-4.5 h-4.5 text-muted-foreground" />
</div>
<span className="text-base font-medium text-foreground">{t('actions.reportIssue')}</span>
</a>
</div>
{/* Mobile Discord */}
<div className="px-3 pt-2 md:hidden">
<a
href={DISCORD_INVITE_URL}
target="_blank"