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/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':
-      return <span className="text-[10px] text-accent-mint mr-1 font-medium">PLAYING</span>;
-    case 'listening':
-      return <span className="text-[10px] text-accent-sky mr-1 font-medium">LISTENING</span>;
-    case 'watching':
-      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;
+    case 'playing': return 'border-l-accent-mint';
+    case 'listening': return 'border-l-accent-sky';
+    case 'watching': return 'border-l-accent-lavender';
+    case 'streaming': return 'border-l-accent-rose';
+    default: return '';
   }
 }
 
-function CompactActivity({ activity }: { activity: Activity }) {
-  const label = activity.type === 'custom'
-    ? activity.name
-    : activity.type === 'playing'
-      ? `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>
-  );
+/** Returns whether an activity should get the glass card row treatment */
+export function hasRichActivity(activities: Activity[]): boolean {
+  const primary = getPrimaryActivity(activities);
+  return !!primary && primary.type !== 'custom';
 }
 
-function FullActivity({ activity }: { activity: Activity }) {
-  if (activity.type === 'custom') {
-    return (
-      <div className="text-[11px] leading-[1.3] text-txt-tertiary truncate">
-        {activity.name}
-      </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) {
+/**
+ * Renders activity details (app name + elapsed time).
+ * The glass card wrapper is applied by the parent row container.
+ */
+export function ActivityCard({ activities, fallbackCustomStatus }: ActivityCardProps) {
   const primary = getPrimaryActivity(activities);
 
   if (!primary) {
@@ -114,9 +45,22 @@ export function ActivityCard({ activities, compact = false, fallbackCustomStatus
     return null;
   }
 
-  if (compact) {
-    return <CompactActivity activity={primary} />;
+  // Custom status — plain text, no card treatment
+  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>
+      )}
+    </>
+  );
 }