skatespots/SkateSpots
1
0
Fork 0
Code Issues Pull requests Projects Releases 11 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>
{/* Status indicator */}
<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>
<DropdownMenuTrigger asChild>
<button
@ -490,15 +488,18 @@ function DesktopStatusButton({ onOpen }: { onOpen: () => void }) {
: null;
const label = preset ? t(preset.labelKey) : status?.status;
const emoji = status?.emoji || preset?.emoji;
const title = status && label
? `${label} — ${t('chromeUi.setYourStatus')}`
: t('chromeUi.setYourStatus');
return (
<Button
variant="ghost"
onClick={onOpen}
title={t('chromeUi.setYourStatus')}
aria-label={t('chromeUi.setYourStatus')}
title={title}
aria-label={title}
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',
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" />
)}
<span className="hidden max-w-[7rem] truncate text-xs font-semibold lg:inline">
{label || t('chromeUi.status')}
</span>
</Button>
);
}