From 7f7656ed24f019ed095aaf2c3296a10fa5a0d1c3 Mon Sep 17 00:00:00 2001 From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com> Date: Mon, 2 Mar 2026 00:56:34 +0100 Subject: [PATCH] =?UTF-8?q?feat:=20Phase=205+6=20Aether=20Drift=20?= =?UTF-8?q?=E2=80=94=20legacy=20token=20removal,=20colorful=20avatars=20&?= =?UTF-8?q?=20Backspace=20branding?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Phase 5: Remove all 54 legacy Discord token definitions from tailwind.config.js, migrate body classes in index.html to Aether Drift tokens, update ARCHITECTURE_AUDIT.md. Phase 6: Replace flat purple fallback avatars with deterministic colorful gradients (mint, sky, lavender, coral, rose, teal, amber) based on user/server ID hash. Replace Discord logo SVG with Backspace "B" in server strip. Add per-server gradient icons with hover glow. Update profile popout banner and incoming call modal to match. --- packages/web/index.html | 2 +- .../src/components/layout/ServerSidebar.tsx | 43 ++++++++++---- packages/web/src/components/ui/Avatar.tsx | 6 +- .../src/components/ui/UserProfilePopout.tsx | 14 +++-- .../components/voice/IncomingCallModal.tsx | 3 +- packages/web/src/utils/gradients.ts | 58 +++++++++++++++++++ packages/web/tailwind.config.js | 55 ------------------ 7 files changed, 106 insertions(+), 75 deletions(-) create mode 100644 packages/web/src/utils/gradients.ts diff --git a/packages/web/index.html b/packages/web/index.html index 8c0b42a0..f0189099 100644 --- a/packages/web/index.html +++ b/packages/web/index.html @@ -10,7 +10,7 @@ Backspace - +
diff --git a/packages/web/src/components/layout/ServerSidebar.tsx b/packages/web/src/components/layout/ServerSidebar.tsx index 5a8674f2..36ea4a62 100644 --- a/packages/web/src/components/layout/ServerSidebar.tsx +++ b/packages/web/src/components/layout/ServerSidebar.tsx @@ -4,6 +4,7 @@ import { useServerStore } from '../../stores/serverStore'; import { useChatStore } from '../../stores/chatStore'; import { useUIStore } from '../../stores/uiStore'; import { Tooltip } from '../ui/Tooltip'; +import { getServerGradient, HOME_GRADIENT } from '../../utils/gradients'; interface SidebarItemProps { id: string; @@ -16,7 +17,7 @@ interface SidebarItemProps { hasUnread?: boolean; } -function SidebarItem({ name, icon, active, onClick, type = 'server', actionType, hasUnread }: SidebarItemProps) { +function SidebarItem({ id, name, icon, active, onClick, type = 'server', actionType, hasUnread }: SidebarItemProps) { const [isHovered, setIsHovered] = useState(false); const firstLetter = name.charAt(0).toUpperCase(); @@ -27,22 +28,46 @@ function SidebarItem({ name, icon, active, onClick, type = 'server', actionType, return 'h-2 scale-0'; }; + const backgroundStyle = useMemo((): React.CSSProperties | undefined => { + if (type === 'action') return undefined; + + if (type === 'dm') { + return { + background: HOME_GRADIENT.gradient, + ...(isHovered ? { boxShadow: `0 0 12px ${HOME_GRADIENT.glow}40` } : {}), + }; + } + + // Server type — if it has a custom icon image, no gradient needed + if (icon) return undefined; + + const serverGrad = getServerGradient(id, name); + return { + background: serverGrad.gradient, + ...(isHovered ? { boxShadow: `0 0 12px ${serverGrad.glow}40` } : {}), + }; + }, [type, id, name, icon, active, isHovered]); + const getButtonClasses = () => { const base = 'w-12 h-12 flex items-center justify-center transition-all duration-200 overflow-hidden relative group'; - + if (type === 'dm') { - return `${base} ${active ? 'bg-accent-primary rounded-[16px] text-white' : 'bg-surface-chat rounded-[24px] hover:rounded-[16px] text-txt-primary hover:bg-accent-primary-hover hover:text-white'}`; + return `${base} text-white ${active ? 'rounded-[16px]' : 'rounded-[24px] hover:rounded-[16px]'}`; } if (type === 'action') { return `${base} bg-surface-chat rounded-[24px] hover:rounded-[16px] text-status-online hover:bg-status-online hover:text-white`; } - return `${base} ${active ? 'bg-accent-primary rounded-[16px] text-white' : 'bg-surface-chat rounded-[24px] hover:rounded-[16px] text-txt-primary hover:bg-accent-primary-hover hover:text-white'}`; + if (icon) { + return `${base} ${active ? 'rounded-[16px]' : 'rounded-[24px] hover:rounded-[16px]'}`; + } + + return `${base} text-white ${active ? 'rounded-[16px]' : 'rounded-[24px] hover:rounded-[16px]'}`; }; return ( -
setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} @@ -50,18 +75,16 @@ function SidebarItem({ name, icon, active, onClick, type = 'server', actionType, {/* Pill Indicator */} {(type === 'server' || type === 'dm') && (
-
)} -