From 695f699ddfd323177209d490d02ad19bb541bcc6 Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Mon, 27 Apr 2026 15:27:27 +0200
Subject: [PATCH] fix(sidebar): give home tile visible hover/active feedback
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../web/src/components/layout/SpaceSidebar.tsx    | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/web/src/components/layout/SpaceSidebar.tsx b/packages/web/src/components/layout/SpaceSidebar.tsx
index 4b876037..a843cd24 100644
--- a/packages/web/src/components/layout/SpaceSidebar.tsx
+++ b/packages/web/src/components/layout/SpaceSidebar.tsx
@@ -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]';