skatespots/SkateSpots
1
0
Fork 0
Code Issues Pull requests Projects Releases 16 Packages Wiki Activity Actions 1

ui: make desktop status compact and non-overlapping

Browse source
This commit is contained in:
SkateSpots 2026-11-01 01:17:45 +07:00
parent 56d318811f
commit f041399fe9
1 changed files with 6 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/Layout.tsx
View file

@ -237,8 +237,6 @@ function MobileHeaderUserMenu({
</Avatar> </Avatar>
{/* Status indicator */} {/* Status indicator */}
<UserStatusIndicator pubkey={pubkey} size="sm" /> <UserStatusIndicator pubkey={pubkey} size="sm" />
{/* Green online indicator dot */}
<span className="absolute -bottom-0.5 -right-0.5 h-2.5 w-2.5 rounded-full border-2 border-black bg-green-500 xs:hidden" />
</Link> </Link>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<button <button
@ -490,15 +488,18 @@ function DesktopStatusButton({ onOpen }: { onOpen: () => void }) {
: null; : null;
const label = preset ? t(preset.labelKey) : status?.status; const label = preset ? t(preset.labelKey) : status?.status;
const emoji = status?.emoji || preset?.emoji; const emoji = status?.emoji || preset?.emoji;
const title = status && label
? `${label} — ${t('chromeUi.setYourStatus')}`
: t('chromeUi.setYourStatus');
return ( return (
<Button <Button
variant="ghost" variant="ghost"
onClick={onOpen} onClick={onOpen}
title={t('chromeUi.setYourStatus')} title={title}
aria-label={t('chromeUi.setYourStatus')} aria-label={title}
className={cn( className={cn(
'h-9 gap-1.5 rounded-full border border-white/10 px-2.5 text-gray-300', 'h-9 w-9 shrink-0 rounded-full border border-white/10 p-0 text-gray-300',
'hover:border-green-500/30 hover:bg-green-500/10 hover:text-green-300', 'hover:border-green-500/30 hover:bg-green-500/10 hover:text-green-300',
status && 'border-green-500/20 bg-green-500/5 text-green-200', status && 'border-green-500/20 bg-green-500/5 text-green-200',
)} )}
@ -508,9 +509,6 @@ function DesktopStatusButton({ onOpen }: { onOpen: () => void }) {
) : ( ) : (
<SmilePlus className="h-4 w-4 text-green-400/80" /> <SmilePlus className="h-4 w-4 text-green-400/80" />
)} )}
<span className="hidden max-w-[7rem] truncate text-xs font-semibold lg:inline">
{label || t('chromeUi.status')}
</span>
</Button> </Button>
); );
} }