d8dfun/claudecodeui
1
0
Fork 0
mirror of https://github.com/siteboon/claudecodeui.git synced 2026-04-13 17:11:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/sidebar/view/subcomponents/GitHubStarBadge.tsx Normal file
View File

@@ -0,0 +1,48 @@
import { Star, X } from 'lucide-react';
import { useGitHubStars } from '../../../../hooks/useGitHubStars';
import { IS_PLATFORM } from '../../../../constants/config';
const GITHUB_REPO_URL = 'https://github.com/siteboon/claudecodeui';
function GitHubIcon({ className }: { className?: string }) {
return (
<svg className={className} fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" />
</svg>
);
}
export default function GitHubStarBadge() {
const { formattedCount, isDismissed, dismiss } = useGitHubStars('siteboon', 'claudecodeui');
if (IS_PLATFORM || isDismissed) return null;
return (
<div className="group/star relative hidden md:block">
<a
href={GITHUB_REPO_URL}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-1.5 rounded-lg border border-border/50 bg-muted/30 px-2.5 py-1 text-xs text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground"
>
<GitHubIcon className="h-3.5 w-3.5" />
<Star className="h-3 w-3" />
<span className="font-medium">Star</span>
{formattedCount && (
<span className="border-l border-border/50 pl-1.5 tabular-nums">{formattedCount}</span>
)}
</a>
<button
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
dismiss();
}}
className="absolute -right-1.5 -top-1.5 hidden h-4 w-4 items-center justify-center rounded-full border border-border/50 bg-muted text-muted-foreground transition-colors hover:text-foreground group-hover/star:flex"
aria-label="Dismiss"
>
<X className="h-2.5 w-2.5" />
</button>
</div>
);
}

15
src/components/sidebar/view/subcomponents/SidebarCollapsed.tsx
View File

@@ -1,7 +1,8 @@
import { Settings, Sparkles, PanelLeftOpen } from 'lucide-react';
import { Settings, Sparkles, PanelLeftOpen, Bug } from 'lucide-react';
import type { TFunction } from 'i18next';
const DISCORD_INVITE_URL = 'https://discord.gg/buxwujPNRE';
const GITHUB_ISSUES_URL = 'https://github.com/siteboon/claudecodeui/issues/new';
function DiscordIcon({ className }: { className?: string }) {
return (
@@ -50,6 +51,18 @@ export default function SidebarCollapsed({
<Settings className="h-4 w-4 text-muted-foreground transition-colors group-hover:text-foreground" />
</button>
{/* Report Issue */}
<a
href={GITHUB_ISSUES_URL}
target="_blank"
rel="noopener noreferrer"
className="group flex h-8 w-8 items-center justify-center rounded-lg transition-colors hover:bg-accent/80"
aria-label={t('actions.reportIssue')}
title={t('actions.reportIssue')}
>
<Bug className="h-4 w-4 text-muted-foreground transition-colors group-hover:text-foreground" />
</a>
{/* Discord */}
<a
href={DISCORD_INVITE_URL}

3
src/components/sidebar/view/subcomponents/SidebarContent.tsx
View File

@@ -56,6 +56,7 @@ type SidebarContentProps = {
updateAvailable: boolean;
releaseInfo: ReleaseInfo | null;
latestVersion: string | null;
currentVersion: string;
onShowVersionModal: () => void;
onShowSettings: () => void;
projectListProps: SidebarProjectListProps;
@@ -83,6 +84,7 @@ export default function SidebarContent({
updateAvailable,
releaseInfo,
latestVersion,
currentVersion,
onShowVersionModal,
onShowSettings,
projectListProps,
@@ -217,6 +219,7 @@ export default function SidebarContent({
updateAvailable={updateAvailable}
releaseInfo={releaseInfo}
latestVersion={latestVersion}
currentVersion={currentVersion}
onShowVersionModal={onShowVersionModal}
onShowSettings={onShowSettings}
t={t}

56
src/components/sidebar/view/subcomponents/SidebarFooter.tsx
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"

3
src/components/sidebar/view/subcomponents/SidebarHeader.tsx
View File

@@ -3,6 +3,7 @@ import type { TFunction } from 'i18next';
import { Button, Input } from '../../../../shared/view/ui';
import { IS_PLATFORM } from '../../../../constants/config';
import { cn } from '../../../../lib/utils';
import GitHubStarBadge from './GitHubStarBadge';
type SearchMode = 'projects' | 'conversations';
@@ -106,6 +107,8 @@ export default function SidebarHeader({
</div>
</div>
<GitHubStarBadge />
{/* Search bar */}
{projectsCount > 0 && !isLoading && (
<div className="mt-2.5 space-y-2">