From 662eb8abc5afdffc07955e07833885e5ec8ab0db Mon Sep 17 00:00:00 2001 From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com> Date: Sun, 1 Mar 2026 23:23:46 +0100 Subject: [PATCH] =?UTF-8?q?feat:=20Phase=202=20Aether=20Drift=20=E2=80=94?= =?UTF-8?q?=20chat=20component=20token=20migration=20+=20scroll=20fix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- packages/web/src/components/chat/Embed.tsx | 8 +-- .../web/src/components/chat/FriendsPage.tsx | 64 +++++++++---------- .../web/src/components/chat/ImagePreview.tsx | 2 +- .../src/components/chat/MarkdownRenderer.tsx | 40 ++++++------ .../web/src/components/chat/MentionBadge.tsx | 6 +- .../src/components/chat/MentionPopover.tsx | 10 +-- packages/web/src/components/chat/Message.tsx | 60 ++++++++--------- .../src/components/chat/TypingIndicator.tsx | 10 +-- .../web/src/components/layout/AppLayout.tsx | 4 +- 9 files changed, 102 insertions(+), 102 deletions(-) diff --git a/packages/web/src/components/chat/Embed.tsx b/packages/web/src/components/chat/Embed.tsx index 150627e4..2645b823 100644 --- a/packages/web/src/components/chat/Embed.tsx +++ b/packages/web/src/components/chat/Embed.tsx @@ -42,10 +42,10 @@ export function Embed({ url }: EmbedProps) { if (isLoading || !metadata) return null; return ( -
+
{metadata.siteName && ( -
+
{metadata.siteName}
)} @@ -54,13 +54,13 @@ export function Embed({ url }: EmbedProps) { href={url} target="_blank" rel="noopener noreferrer" - className="text-[16px] text-discord-text-link font-semibold hover:underline block mb-2" + className="text-[16px] text-txt-link font-semibold hover:underline block mb-2" > {metadata.title} )} {metadata.description && ( -
+
{metadata.description}
)} diff --git a/packages/web/src/components/chat/FriendsPage.tsx b/packages/web/src/components/chat/FriendsPage.tsx index 078d0d3c..2b3cd0eb 100644 --- a/packages/web/src/components/chat/FriendsPage.tsx +++ b/packages/web/src/components/chat/FriendsPage.tsx @@ -74,13 +74,13 @@ export function FriendsPage() { case 'online': return (
-

+

Online — {onlineFriends.length}

{onlineFriends.length === 0 ? (
(e.target as any).style.display='none'} /> -

No one's around to play with Wumpus.

+

No one's around to play with Wumpus.

) : ( onlineFriends.map(friend => ( @@ -92,12 +92,12 @@ export function FriendsPage() { case 'all': return (
-

+

All Friends — {friends.length}

{friends.length === 0 ? (
-

Wumpus is waiting on friends. You can add them!

+

Wumpus is waiting on friends. You can add them!

) : ( friends.map(friend => ( @@ -109,12 +109,12 @@ export function FriendsPage() { case 'pending': return (
-

+

Pending — {pendingIncoming.length + pendingOutgoing.length}

{[...pendingIncoming, ...pendingOutgoing].length === 0 ? (
-

There are no pending friend requests. Here's Wumpus for now!

+

There are no pending friend requests. Here's Wumpus for now!

) : ( <> @@ -142,26 +142,26 @@ export function FriendsPage() { case 'add': return (
-

Add Friend

-

You can add friends with their Backspace username.

+

Add Friend

+

You can add friends with their Backspace username.

setAddUsername(e.target.value)} - className="w-full bg-discord-bg-tertiary text-discord-text-primary px-4 py-3 rounded-lg border border-transparent focus:border-discord-text-link outline-none transition-all placeholder:text-discord-text-muted/50" + className="w-full bg-surface-base text-txt-primary px-4 py-3 rounded-lg border border-transparent focus:border-txt-link outline-none transition-all placeholder:text-txt-tertiary/50" />
{addStatus && ( -
+
{addStatus.message}
)} @@ -171,17 +171,17 @@ export function FriendsPage() { }; return ( -
+
{/* Header */} -
+
- + - Friends + Friends
-
+
setActiveTab('online')}>Online @@ -189,7 +189,7 @@ export function FriendsPage() { setActiveTab('pending')}> Pending {(pendingIncoming.length > 0) && ( - + {pendingIncoming.length} )} @@ -197,7 +197,7 @@ export function FriendsPage() {
), - thead: ({ children }) => {children}, + thead: ({ children }) => {children}, tbody: ({ children }) => {children}, - tr: ({ children }) => {children}, - th: ({ children }) => {children}, + tr: ({ children }) => {children}, + th: ({ children }) => {children}, td: ({ children }) => {children}, }; } diff --git a/packages/web/src/components/chat/MentionBadge.tsx b/packages/web/src/components/chat/MentionBadge.tsx index f6c01a4f..431fec51 100644 --- a/packages/web/src/components/chat/MentionBadge.tsx +++ b/packages/web/src/components/chat/MentionBadge.tsx @@ -25,13 +25,13 @@ export const MentionBadge = React.memo(function MentionBadge({ userId }: Mention const sorted = [...member.roles].sort((a, b) => b.position - a.position); color = sorted[0]!.color; } else if (ownerId && userId === ownerId) { - color = '#f23f43'; + color = '#fda4af'; } else { - color = '#5865f2'; // blurple default + color = '#7c6cf6'; // accent-primary default } } else { displayName = 'Unknown User'; - color = '#a3a6aa'; // muted fallback + color = '#a0a0aa'; // text-secondary fallback } const handleClick = (e: React.MouseEvent) => { diff --git a/packages/web/src/components/chat/MentionPopover.tsx b/packages/web/src/components/chat/MentionPopover.tsx index fd89a3ef..1b745dc6 100644 --- a/packages/web/src/components/chat/MentionPopover.tsx +++ b/packages/web/src/components/chat/MentionPopover.tsx @@ -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 (
-
-
+
+
Members
{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' }`} > {member.user.displayName && ( - + @{member.user.username} )} diff --git a/packages/web/src/components/chat/Message.tsx b/packages/web/src/components/chat/Message.tsx index d94291b1..660cf3f5 100644 --- a/packages/web/src/components/chat/Message.tsx +++ b/packages/web/src/components/chat/Message.tsx @@ -133,8 +133,8 @@ export function Message({ message, isCompact, isFirstInGroup }: MessageProps) { const sorted = [...member.roles].sort((a, b) => b.position - a.position); return { color: sorted[0]!.color }; } - if (ownerId && userId === ownerId) return { color: '#f23f43' }; - return { color: '#dcdcdf' }; + if (ownerId && userId === ownerId) return { color: '#fda4af' }; + return { color: '#d8d8de' }; }; const roleColor = getMemberDisplayColor(message.userId); @@ -148,15 +148,15 @@ export function Message({ message, isCompact, isFirstInGroup }: MessageProps) {
setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} > {/* Reply Line */} {message.replyTo && ( -
+
)} {/* Avatar or timestamp column */} @@ -172,7 +172,7 @@ export function Message({ message, isCompact, isFirstInGroup }: MessageProps) { />
) : ( - + {formatHoverTime(message.createdAt)} )} @@ -184,12 +184,12 @@ export function Message({ message, isCompact, isFirstInGroup }: MessageProps) {
{message.replyTo.user.displayName ?? message.replyTo.user.username} - + {message.replyTo.content}
@@ -204,7 +204,7 @@ export function Message({ message, isCompact, isFirstInGroup }: MessageProps) { > {displayName} - + {formatTime(message.createdAt)}
@@ -216,27 +216,27 @@ export function Message({ message, isCompact, isFirstInGroup }: MessageProps) { value={editContent} onChange={(e) => setEditContent(e.target.value)} onKeyDown={handleEditSubmit} - className="w-full p-3 bg-discord-bg-input rounded-lg text-discord-text-primary outline-none resize-none text-[16px] leading-[1.375rem] shadow-inner" + className="w-full p-3 bg-surface-input rounded-lg text-txt-primary outline-none resize-none text-[16px] leading-[1.375rem] shadow-inner" rows={2} autoFocus /> -

- escape to +

+ escape to {' '}• enter to + }} className="text-txt-link hover:underline">save

) : (
{message.content && ( -
+
{message.editedAt && ( - (edited) + (edited) )}
)} @@ -249,13 +249,13 @@ export function Message({ message, isCompact, isFirstInGroup }: MessageProps) { key={emoji} onClick={() => toggleReaction(emoji)} className={`flex items-center gap-1.5 px-1.5 py-0.5 rounded-[8px] text-[14px] font-medium border transition-colors ${ - me - ? 'bg-discord-blurple/15 border-discord-blurple text-discord-blurple' - : 'bg-discord-bg-secondary border-transparent text-discord-text-muted hover:border-discord-text-muted/30' + me + ? 'bg-accent-primary/15 border-accent-primary text-accent-primary' + : 'bg-surface-channel border-transparent text-txt-tertiary hover:border-txt-tertiary/30' }`} > {emoji} - {count} + {count} ))}
@@ -271,7 +271,7 @@ export function Message({ message, isCompact, isFirstInGroup }: MessageProps) { const isImage = att.mimetype.startsWith('image/'); if (isImage) { return ( -
+
{att.originalName} -
+
-

{att.originalName}

-

+

{att.originalName}

+

{att.size < 1024 ? `${att.size} B` : att.size < 1048576 ? `${(att.size / 1024).toFixed(1)} KB` : `${(att.size / 1048576).toFixed(1)} MB`} @@ -313,13 +313,13 @@ export function Message({ message, isCompact, isFirstInGroup }: MessageProps) { {/* Action buttons on hover */} {isHovered && !isEditing && ( -

-
+
+
{['👍', '❤️', '😂', '😮'].map(emoji => ( @@ -327,7 +327,7 @@ export function Message({ message, isCompact, isFirstInGroup }: MessageProps) {