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

feat: Phase 1 Aether Drift — mobile-first grid layout and token migration

Browse Source 
Replace Discord flex layout with CSS Grid on desktop (312px sidebar +
1fr main) and overlay drawer on mobile. Migrate all discord-* class
references to Aether Drift design tokens across 15 files (~200 refs).

Layout: ServerSidebar becomes a fixed glass strip (md:glass-strip),
ChannelSidebar gets pl-[72px] offset, bottom bar is a glass-bubble
(z-105), MessageInput floats as absolute glass pill on desktop (z-110).
MemberSidebar/ActivityPanel hidden on mobile via hidden md:block.

Z-index stack: MobileNav backdrop z-35, sidebar z-40, glass strip z-100,
bottom bar z-105, input bubble z-110, hamburger z-120, profile popout
z-145, device panels z-150, modals z-200.
This commit is contained in:
Jannis Braun
2026-03-01 22:46:27 +01:00
parent e219229b63
commit 79252fe54a
15 changed files with 412 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/layout/ActivityPanel.tsx
+9 -9
View File
@@ -46,7 +46,7 @@ export function ActivityPanel() {
<div
key={friend.id}
onClick={(e) => handleFriendClick(e, friend)}
className="flex items-center gap-3 px-2 py-1.5 rounded-[4px] hover:bg-discord-modifier-hover cursor-pointer group transition-colors"
className="flex items-center gap-3 px-2 py-1.5 rounded-[4px] hover:bg-interactive-hover cursor-pointer group transition-colors"
>
<Avatar
src={friend.avatar}
@@ -56,25 +56,25 @@ export function ActivityPanel() {
className={isOffline ? 'opacity-60' : undefined}
/>
<div className="flex-1 min-w-0">
<div className={`text-[15px] font-medium truncate ${isOffline ? 'text-discord-text-muted' : 'text-discord-text-primary'}`}>
<div className={`text-[15px] font-medium truncate ${isOffline ? 'text-txt-tertiary' : 'text-txt-primary'}`}>
{friend.displayName ?? friend.username}
</div>
{!isOffline && friend.customStatus && (
<div className="text-[12px] text-discord-text-muted truncate">{friend.customStatus}</div>
<div className="text-[12px] text-txt-tertiary truncate">{friend.customStatus}</div>
)}
</div>
</div>
);
return (
<div className="w-60 bg-discord-bg-secondary flex-shrink-0 overflow-y-auto select-none no-scrollbar">
<div className="w-60 bg-surface-channel flex-shrink-0 overflow-y-auto select-none no-scrollbar hidden md:block">
<div className="p-3">
<h3 className="text-[20px] font-bold text-discord-text-header mb-4 px-2">Active Now</h3>
<h3 className="text-[20px] font-bold text-txt-primary mb-4 px-2">Active Now</h3>
{onlineFriends.length === 0 && offlineFriends.length === 0 ? (
<div className="text-center py-8">
<div className="text-[16px] font-bold text-discord-text-header mb-1">It's quiet for now...</div>
<div className="text-[14px] text-discord-text-muted max-w-[200px] mx-auto">
<div className="text-[16px] font-bold text-txt-primary mb-1">It's quiet for now...</div>
<div className="text-[14px] text-txt-tertiary max-w-[200px] mx-auto">
When a friend starts an activity&#8212;like playing a game or hanging out on voice&#8212;we'll show it here!
</div>
</div>
@@ -82,7 +82,7 @@ export function ActivityPanel() {
<>
{onlineFriends.length > 0 && (
<div className="mb-4">
<h3 className="text-[12px] font-bold text-discord-text-muted uppercase tracking-wider px-2 mb-1">
<h3 className="text-[12px] font-bold text-txt-tertiary uppercase tracking-wider px-2 mb-1">
ONLINE — {onlineFriends.length}
</h3>
{onlineFriends.map(f => renderFriend(f))}
@@ -90,7 +90,7 @@ export function ActivityPanel() {
)}
{offlineFriends.length > 0 && (
<div>
<h3 className="text-[12px] font-bold text-discord-text-muted uppercase tracking-wider px-2 mb-1">
<h3 className="text-[12px] font-bold text-txt-tertiary uppercase tracking-wider px-2 mb-1">
OFFLINE — {offlineFriends.length}
</h3>
{offlineFriends.map(f => renderFriend(f, true))}