devsyncwrld/backspace
1
0
Fork 0
Code Issues Pull Requests Actions 26 Packages Projects Releases Wiki Activity

feat: Phase 2 Aether Drift — chat component token migration + scroll fix

Browse Source 
Migrate all 8 chat rendering components from Discord tokens to Aether Drift
design system: Message, MarkdownRenderer, MentionBadge, MentionPopover,
FriendsPage, TypingIndicator, Embed, ImagePreview. Eliminates ~83 discord-*
class references and ~24 hardcoded hex values from components/chat/.

Fix critical scroll regression from Phase 1 grid migration by adding explicit
grid-rows-[minmax(0,1fr)] and min-h-0 to AppLayout's grid container, restoring
the height constraint chain to MessageList's overflow-y-auto.
This commit is contained in:
Jannis Braun
2026-03-01 23:23:46 +01:00
parent 79252fe54a
commit 662eb8abc5
9 changed files with 102 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/chat/MentionPopover.tsx
+5 -5
View File
@@ -42,14 +42,14 @@ export function MentionPopover({ query, selectedIndex, onSelect }: MentionPopove
const sorted = [...member.roles].sort((a, b) => b.position - a.position);
return sorted[0]!.color;
}
if (ownerId && member.userId === ownerId) return '#f23f43';
if (ownerId && member.userId === ownerId) return '#fda4af';
return undefined;
};
return (
<div className="absolute bottom-full left-0 w-[280px] mb-1 z-50">
<div className="bg-[#2b2d31] rounded-lg shadow-[0_0_0_1px_rgba(0,0,0,0.15),0_8px_16px_rgba(0,0,0,0.24)] overflow-hidden max-h-[320px] overflow-y-auto scrollbar-thin">
<div className="px-2 py-1.5 text-[11px] font-bold text-discord-text-muted uppercase tracking-wider">
<div className="bg-surface-elevated rounded-lg shadow-[0_0_0_1px_rgba(0,0,0,0.15),0_8px_16px_rgba(0,0,0,0.24)] overflow-hidden max-h-[320px] overflow-y-auto scrollbar-thin">
<div className="px-2 py-1.5 text-[11px] font-bold text-txt-tertiary uppercase tracking-wider">
Members
</div>
{filtered.map((member, i) => {
@@ -63,7 +63,7 @@ export function MentionPopover({ query, selectedIndex, onSelect }: MentionPopove
ref={isSelected ? selectedRef : undefined}
onClick={() => onSelect(member)}
className={`flex items-center gap-2.5 px-2 py-1.5 mx-1 rounded cursor-pointer transition-colors ${
isSelected ? 'bg-[#404249]' : 'hover:bg-[#35373c]'
isSelected ? 'bg-interactive-selected' : 'hover:bg-interactive-hover'
}`}
>
<Avatar
@@ -79,7 +79,7 @@ export function MentionPopover({ query, selectedIndex, onSelect }: MentionPopove
{displayName}
</span>
{member.user.displayName && (
<span className="text-[12px] text-discord-text-muted truncate">
<span className="text-[12px] text-txt-tertiary truncate">
@{member.user.username}
</span>
)}