fix: redesign activity cards with glass-pill material and accent borders

Replace bg-surface-elevated cards and inline text badges with glass-pill
rows featuring colored left borders (mint=playing, sky=listening,
lavender=watching, rose=streaming). Identical treatment in both
ActivityPanel and MemberSidebar — no more compact/full distinction.
Members with rich activities get the frosted glass row; others stay plain.

packages/web/src/components/layout/ActivityPanel.tsx

@@ -4,7 +4,7 @@ import { useUIStore } from '../../stores/uiStore';
 import { useActivityStore } from '../../stores/activityStore';
 import { Avatar } from '../ui/Avatar';
 import { Username } from '../ui/Username';
-import { ActivityCard } from '../ui/ActivityCard';
+import { ActivityCard, hasRichActivity, getActivityAccentClass } from '../ui/ActivityCard';
 import type { Friend } from '@backspace/shared';
 import { getPrimaryActivity } from '@backspace/shared/src/activities.js';
 import { parseFederatedUsername } from '../../utils/identity';
@@ -73,15 +73,23 @@ export function ActivityPanel() {
     );
   };
 
-  const renderFriend = (friend: Friend, isOffline = false, isCompact = true) => {
+  const renderFriend = (friend: Friend, isOffline = false) => {
     const { baseName, domain } = parseFederatedUsername(friend.username);
     const friendDisplayName = friend.displayName ?? baseName;
     const activities = userActivities.get(friend.homeUserId ?? friend.id) ?? [];
+    const isRichActivity = !isOffline && hasRichActivity(activities);
+    const primary = getPrimaryActivity(activities);
+    const accentClass = primary ? getActivityAccentClass(primary.type) : '';
+
+    const rowClass = isRichActivity
+      ? `flex items-center gap-2.5 px-2.5 py-2 rounded-[10px] mb-1 cursor-pointer transition-colors glass-pill border-l-2 ${accentClass}`
+      : 'flex items-center gap-2.5 px-2 py-1.5 rounded-[4px] hover:bg-interactive-hover cursor-pointer group transition-colors';
+
     return (
       <div
         key={friend.id}
         onClick={(e) => handleFriendClick(e, friend)}
-        className="flex items-center gap-2.5 px-2 py-1.5 rounded-[4px] hover:bg-interactive-hover cursor-pointer group transition-colors"
+        className={rowClass}
       >
         <Avatar
           src={friend.avatar}
@@ -103,7 +111,6 @@ export function ActivityPanel() {
           {!isOffline && (
             <ActivityCard
               activities={activities}
-              compact={isCompact}
               fallbackCustomStatus={friend.customStatus}
             />
           )}
@@ -128,7 +135,7 @@ export function ActivityPanel() {
           <>
             {activeFriends.length > 0 && (
               <div className="mb-4">
-                {activeFriends.map(f => renderFriend(f, false, false))}
+                {activeFriends.map(f => renderFriend(f))}
               </div>
             )}
             {onlineFriends.length > 0 && (

packages/web/src/components/layout/MemberSidebar.tsx

@@ -5,7 +5,8 @@ import { useUIStore } from '../../stores/uiStore';
 import { useActivityStore } from '../../stores/activityStore';
 import { Avatar } from '../ui/Avatar';
 import { Username } from '../ui/Username';
-import { ActivityCard } from '../ui/ActivityCard';
+import { ActivityCard, hasRichActivity, getActivityAccentClass } from '../ui/ActivityCard';
+import { getPrimaryActivity } from '@backspace/shared/src/activities.js';
 import { parseFederatedUsername } from '../../utils/identity';
 
 /**
@@ -102,11 +103,20 @@ export function MemberSidebar() {
     const { baseName, domain } = parseFederatedUsername(member.user.username);
     const displayName = member.user.displayName ?? baseName;
     const colorStyle = isOffline ? undefined : getMemberColor(member);
+    const activities = userActivities.get(member.userId) ?? [];
+    const isRichActivity = !isOffline && hasRichActivity(activities);
+    const primary = getPrimaryActivity(activities);
+    const accentClass = primary ? getActivityAccentClass(primary.type) : '';
+
+    const rowClass = isRichActivity
+      ? `flex items-center gap-2.5 px-2.5 py-2 rounded-[10px] mb-1 cursor-pointer transition-colors glass-pill border-l-2 ${accentClass}`
+      : 'flex items-center gap-2.5 px-2 py-1.5 rounded-[4px] hover:bg-interactive-hover cursor-pointer group transition-colors';
+
     return (
       <div
         key={member.userId}
         onClick={(e) => handleMemberClick(e, member.user)}
-        className="flex items-center gap-2.5 px-2 py-1.5 rounded-[4px] hover:bg-interactive-hover cursor-pointer group transition-colors"
+        className={rowClass}
       >
         <Avatar
           src={member.user.avatar}
@@ -127,8 +137,7 @@ export function MemberSidebar() {
           )}
           {!isOffline && (
             <ActivityCard
-              activities={userActivities.get(member.userId) ?? []}
+              activities={activities}
-              compact={true}
               fallbackCustomStatus={member.user.customStatus}
             />
           )}

packages/web/src/components/ui/ActivityCard.tsx

@@ -3,7 +3,6 @@ import { getPrimaryActivity } from '@backspace/shared/src/activities.js';
 
 interface ActivityCardProps {
   activities: Activity[];
-  compact?: boolean;
   fallbackCustomStatus?: string | null;
 }
 
@@ -15,96 +14,28 @@ function formatElapsed(startMs: number): string {
   return `${minutes}m`;
 }
 
-function ActivityIcon({ type }: { type: Activity['type'] }) {
+/** Returns the accent border color class for an activity type */
+export function getActivityAccentClass(type: Activity['type']): string {
   switch (type) {
-    case 'playing':
+    case 'playing': return 'border-l-accent-mint';
-      return <span className="text-[10px] text-accent-mint mr-1 font-medium">PLAYING</span>;
+    case 'listening': return 'border-l-accent-sky';
-    case 'listening':
+    case 'watching': return 'border-l-accent-lavender';
-      return <span className="text-[10px] text-accent-sky mr-1 font-medium">LISTENING</span>;
+    case 'streaming': return 'border-l-accent-rose';
-    case 'watching':
+    default: return '';
-      return <span className="text-[10px] text-accent-lavender mr-1 font-medium">WATCHING</span>;
-    case 'streaming':
-      return <span className="text-[8px] font-bold mr-1 px-1 py-px rounded bg-red-500/80 text-white leading-tight">LIVE</span>;
-    default:
-      return null;
   }
 }
 
-function CompactActivity({ activity }: { activity: Activity }) {
+/** Returns whether an activity should get the glass card row treatment */
-  const label = activity.type === 'custom'
+export function hasRichActivity(activities: Activity[]): boolean {
-    ? activity.name
+  const primary = getPrimaryActivity(activities);
-    : activity.type === 'playing'
+  return !!primary && primary.type !== 'custom';
-      ? `Playing ${activity.name}`
-      : activity.type === 'listening'
-        ? activity.details ?? activity.name
-        : activity.type === 'watching'
-          ? `Watching ${activity.name}`
-          : activity.name;
-
-  return (
-    <div className="flex items-center text-[11px] leading-[1.3] text-txt-tertiary truncate">
-      <ActivityIcon type={activity.type} />
-      <span className="truncate">{label}</span>
-    </div>
-  );
 }
 
-function FullActivity({ activity }: { activity: Activity }) {
+/**
-  if (activity.type === 'custom') {
+ * Renders activity details (app name + elapsed time).
-    return (
+ * The glass card wrapper is applied by the parent row container.
-      <div className="text-[11px] leading-[1.3] text-txt-tertiary truncate">
+ */
-        {activity.name}
+export function ActivityCard({ activities, fallbackCustomStatus }: ActivityCardProps) {
-      </div>
-    );
-  }
-
-  const typeLabel = activity.type === 'playing' ? 'Playing'
-    : activity.type === 'listening' ? 'Listening to'
-    : activity.type === 'watching' ? 'Watching'
-    : 'Streaming';
-
-  return (
-    <div className="mt-1.5 rounded-lg bg-surface-elevated p-2.5">
-      <div className="text-[10px] font-semibold text-txt-tertiary uppercase tracking-wide mb-1.5">
-        {typeLabel}
-      </div>
-      <div className="flex gap-2.5">
-        {activity.assets?.largeImage && (
-          <img
-            src={activity.assets.largeImage}
-            alt={activity.assets.largeText ?? activity.name}
-            className="w-[50px] h-[50px] rounded-md object-cover flex-shrink-0"
-          />
-        )}
-        <div className="min-w-0 flex-1">
-          <div className="text-[13px] font-semibold text-txt-primary truncate">
-            {activity.name}
-          </div>
-          {activity.details && (
-            <div className="text-[11px] text-txt-secondary truncate">{activity.details}</div>
-          )}
-          {activity.state && (
-            <div className="text-[11px] text-txt-tertiary truncate">{activity.state}</div>
-          )}
-          {activity.timestamps?.start && (
-            <div className="text-[10px] text-txt-tertiary mt-0.5">
-              {formatElapsed(activity.timestamps.start)} elapsed
-            </div>
-          )}
-        </div>
-        {activity.assets?.smallImage && (
-          <img
-            src={activity.assets.smallImage}
-            alt={activity.assets.smallText ?? ''}
-            className="w-5 h-5 rounded-full flex-shrink-0 self-start"
-          />
-        )}
-      </div>
-    </div>
-  );
-}
-
-export function ActivityCard({ activities, compact = false, fallbackCustomStatus }: ActivityCardProps) {
   const primary = getPrimaryActivity(activities);
 
   if (!primary) {
@@ -114,9 +45,22 @@ export function ActivityCard({ activities, compact = false, fallbackCustomStatus
     return null;
   }
 
-  if (compact) {
+  // Custom status — plain text, no card treatment
-    return <CompactActivity activity={primary} />;
+  if (primary.type === 'custom') {
+    return <div className="text-[11px] leading-[1.3] text-txt-tertiary truncate">{primary.name}</div>;
   }
 
-  return <FullActivity activity={primary} />;
+  // Rich activity — app name + elapsed (card wrapper is on the parent row)
+  return (
+    <>
+      <div className="text-[11px] leading-[1.3] text-txt-secondary truncate">
+        {primary.name}
+      </div>
+      {primary.timestamps?.start && (
+        <div className="text-[10px] leading-[1.3] text-txt-tertiary">
+          {formatElapsed(primary.timestamps.start)} elapsed
+        </div>
+      )}
+    </>
+  );
 }