fix(sidebar): give home tile visible hover/active feedback

The home/DM tile previously set backgroundStyle to undefined — the
button had no fill, so the existing rounded-[20px] → rounded-[13px]
corner-radius transition had nothing to morph and produced zero
hover/active feedback. The regression became visible after the icon
rebrand: the old logo.png shipped a #1d1d1b rounded-square that
filled the tile and gave it a de-facto background; the new bare-mark
logo is centred with transparent padding, exposing the missing
button bg.

Apply the same pattern as the existing 'action' tile: a translucent
white surface that brightens through three states (rest/hover/active)
so both the corner morph and the fill change are visible. Active
state (rgba 0.10) is the strongest because it signals 'you are on
the home page right now', complementing the existing pill indicator
on the left edge.
This commit is contained in:
Jannis Braun
2026-04-27 15:27:27 +02:00
parent 7a8d0ce0e2
commit 695f699ddf
@@ -79,7 +79,18 @@ function SidebarItem({ id, name, icon, avatarColor, active, onClick, onContextMe
}
if (type === 'dm') {
return undefined;
// Home tile uses a translucent white surface so the squircle→square
// corner-radius transition has something visible to morph. The bare
// mark in logo.png is centred with internal padding (transparent
// outside ~75% scale), so without a button background there is no
// visible hover/active feedback at all.
return {
background: active
? 'rgba(255, 255, 255, 0.10)'
: isHovered
? 'rgba(255, 255, 255, 0.07)'
: 'rgba(255, 255, 255, 0.04)',
};
}
// Space type — if it has a custom icon image, no gradient needed
@@ -87,7 +98,7 @@ function SidebarItem({ id, name, icon, avatarColor, active, onClick, onContextMe
const spaceGrad = getSpaceGradient(id, name, avatarColor);
return { background: spaceGrad.gradient };
}, [type, id, name, icon, avatarColor, isHovered]);
}, [type, id, name, icon, avatarColor, isHovered, active]);
const getButtonClasses = () => {
const base = 'w-10 h-10 flex items-center justify-center duration-200 overflow-hidden [transition:border-radius_0.2s,background_0.2s,color_0.2s]';