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') && (
-
)} -