diff --git a/packages/web/public/icons/logo-mark.svg b/packages/web/public/icons/logo-mark.svg new file mode 100644 index 00000000..e24ab4f0 --- /dev/null +++ b/packages/web/public/icons/logo-mark.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/web/src/components/layout/SpaceSidebar.tsx b/packages/web/src/components/layout/SpaceSidebar.tsx index b3a2ae20..659a3c26 100644 --- a/packages/web/src/components/layout/SpaceSidebar.tsx +++ b/packages/web/src/components/layout/SpaceSidebar.tsx @@ -79,13 +79,8 @@ function SidebarItem({ id, name, icon, avatarColor, active, onClick, onContextMe } if (type === 'dm') { - // Home tile renders logo.png (full Element 1 badge with #000 bg) - // via object-cover; the badge IS the visible tile fill, so no - // separate button background is needed. The button's overflow-hidden - // + rounded-[20px → 13px] morph clips the opaque badge cleanly, - // giving the same hover/active feedback shape as space tiles with - // custom icons. - return undefined; + const lit = active || isHovered; + return { background: lit ? 'rgb(var(--accent-primary))' : 'rgb(var(--interactive-muted))' }; } // Space type — if it has a custom icon image, no gradient needed @@ -93,7 +88,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]'; @@ -116,7 +111,7 @@ function SidebarItem({ id, name, icon, avatarColor, active, onClick, onContextMe const buttonContent = (