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:
@@ -79,7 +79,18 @@ function SidebarItem({ id, name, icon, avatarColor, active, onClick, onContextMe
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (type === 'dm') {
|
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
|
// 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);
|
const spaceGrad = getSpaceGradient(id, name, avatarColor);
|
||||||
return { background: spaceGrad.gradient };
|
return { background: spaceGrad.gradient };
|
||||||
}, [type, id, name, icon, avatarColor, isHovered]);
|
}, [type, id, name, icon, avatarColor, isHovered, active]);
|
||||||
|
|
||||||
const getButtonClasses = () => {
|
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]';
|
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]';
|
||||||
|
|||||||
Reference in New Issue
Block a user