From c0fd7e3a757ea54e248909d630e12d7e5d53628b Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Sat, 2 May 2026 22:12:18 +0200
Subject: [PATCH] feat(web): home tile uses primary purple when active/hovered,
grey when idle
Replaces the full-bleed black-bg logo badge in the top-left @me tile with a
white logo mark on the primary purple (matching toggle switches) when active
or hovered, and `--interactive-muted` grey when idle. Logo bumped to 25px.
---
packages/web/public/icons/logo-mark.svg | 16 ++++++++++++++++
.../web/src/components/layout/SpaceSidebar.tsx | 13 ++++---------
2 files changed, 20 insertions(+), 9 deletions(-)
create mode 100644 packages/web/public/icons/logo-mark.svg
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 = (