import { useTranslation } from '@shared/i18n/react'
import { Link } from 'react-router'
import { useSession } from '@features/auth/session/useSession'
import type { Me } from '../../types'
/** The pixel-heart mark, standalone (no badge background) — same shape as public/favicon.svg. */
function HeartMark({ className = 'size-6' }: { className?: string }) {
return (
)
}
/** The logo mark in the top bar; the in-game watermark's fps counter lives in the ClickGui replica. */
export function Watermark() {
const { t } = useTranslation('common')
return (
LoVisual
)
}
const SLOT = 'h-9 w-[8.5rem] shrink-0 rounded-full'
/** Login link or avatar + nick; a same-size skeleton while the session restores, so nothing jumps. */
export function AccountSlot({ className = '', onNavigate }: { className?: string; onNavigate?: () => void }) {
const { t } = useTranslation('common')
const { status, me } = useSession()
if (status === 'loading') {
return (
)
}
if (!me) {
return (
{t('nav.login')}
)
}
return (
{me.display_nick}
)
}
function Avatar({ me }: { me: Me }) {
if (me.avatar_url) return
return (
{me.display_nick.charAt(0).toUpperCase()}
)
}
export function DownloadIcon({ className = 'size-4' }: { className?: string }) {
return (
)
}
/** Three bars that fold into a cross while the menu is open. */
export function MenuIcon({ open }: { open: boolean }) {
const bar = 'absolute left-0 h-[2px] w-full rounded-full bg-current transition-transform duration-300'
return (
)
}