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

feat: add frontend Rich Presence — activityStore, ActivityCard, sidebar upgrades, settings toggle

Browse Source 
- Task 7: Create activityStore (Zustand) with Map<userId, Activity[]>, showActivity toggle,
  debounced pushActivities, and reset on logout
- Task 8: Wire WS integration — presence_update propagates activities to store,
  ready payload initializes userActivities and showActivity (via setState to avoid side effects)
- Task 9: Create ActivityCard component with compact/full modes, type-colored labels,
  elapsed time display, asset images, and fallback to customStatus
- Task 10: Upgrade ActivityPanel to three groups — active friends (full cards, no header),
  online friends (compact), offline friends — using getPrimaryActivity for grouping
- Task 11: Upgrade MemberSidebar to show compact ActivityCards instead of raw customStatus
- Task 12: Add showActivity toggle in AccountPanel settings (Activity Status section)
  with API persistence and store sync
This commit is contained in:
Jannis Braun
2026-03-21 01:55:17 +01:00
parent 9403ded8da
commit 1f4e149ee1
7 changed files with 285 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/layout/ActivityPanel.tsx
+40 -9
View File
@@ -1,9 +1,12 @@
import React, { useEffect, useMemo } from 'react';
import { useSocialStore } from '../../stores/socialStore';
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 type { Friend } from '@backspace/shared';
import { getPrimaryActivity } from '@backspace/shared/src/activities.js';
import { parseFederatedUsername } from '../../utils/identity';
export function ActivityPanel() {
@@ -11,16 +14,34 @@ export function ActivityPanel() {
const loadFriends = useSocialStore((s) => s.loadFriends);
const memberListOpen = useUIStore((s) => s.memberListOpen);
const openUserProfile = useUIStore((s) => s.openUserProfile);
const userActivities = useActivityStore((s) => s.userActivities);
useEffect(() => {
loadFriends();
}, [loadFriends]);
const { onlineFriends, offlineFriends } = useMemo(() => {
const online = friends.filter(f => f.status !== 'offline');
const offline = friends.filter(f => f.status === 'offline');
return { onlineFriends: online, offlineFriends: offline };
}, [friends]);
const { activeFriends, onlineFriends, offlineFriends } = useMemo(() => {
const active: Friend[] = [];
const online: Friend[] = [];
const offline: Friend[] = [];
for (const f of friends) {
if (f.status === 'offline') {
offline.push(f);
continue;
}
const activities = userActivities.get(f.homeUserId ?? f.id) ?? [];
const primary = getPrimaryActivity(activities);
// Active = has a non-custom activity (playing, listening, watching, streaming)
if (primary && primary.type !== 'custom') {
active.push(f);
} else {
online.push(f);
}
}
return { activeFriends: active, onlineFriends: online, offlineFriends: offline };
}, [friends, userActivities]);
if (!memberListOpen) return null;
@@ -52,9 +73,10 @@ export function ActivityPanel() {
);
};
const renderFriend = (friend: Friend, isOffline = false) => {
const renderFriend = (friend: Friend, isOffline = false, isCompact = true) => {
const { baseName, domain } = parseFederatedUsername(friend.username);
const friendDisplayName = friend.displayName ?? baseName;
const activities = userActivities.get(friend.homeUserId ?? friend.id) ?? [];
return (
<div
key={friend.id}
@@ -78,8 +100,12 @@ export function ActivityPanel() {
{domain && !isOffline && (
<div className="text-[10px] leading-[1.3] text-txt-tertiary truncate opacity-60">@{domain}</div>
)}
{!isOffline && friend.customStatus && (
<div className="text-[11px] leading-[1.3] text-txt-tertiary truncate">{friend.customStatus}</div>
{!isOffline && (
<ActivityCard
activities={activities}
compact={isCompact}
fallbackCustomStatus={friend.customStatus}
/>
)}
</div>
</div>
@@ -91,7 +117,7 @@ export function ActivityPanel() {
<div className="p-3">
<h3 className="text-[20px] font-bold text-txt-primary mb-4 px-2">Active Now</h3>
{onlineFriends.length === 0 && offlineFriends.length === 0 ? (
{activeFriends.length === 0 && onlineFriends.length === 0 && offlineFriends.length === 0 ? (
<div className="text-center py-8">
<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">
@@ -100,6 +126,11 @@ export function ActivityPanel() {
</div>
) : (
<>
{activeFriends.length > 0 && (
<div className="mb-4">
{activeFriends.map(f => renderFriend(f, false, false))}
</div>
)}
{onlineFriends.length > 0 && (
<div className="mb-4">
<h3 className="text-[10.5px] font-bold text-txt-tertiary uppercase tracking-[0.06em] px-2 mb-1">
packages/web/src/components/layout/MemberSidebar.tsx
+9 -2
View File
@@ -2,8 +2,10 @@ import React, { useMemo } from 'react';
import type { MemberWithUser } from '@backspace/shared';
import { useSpaceStore } from '../../stores/spaceStore';
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 { parseFederatedUsername } from '../../utils/identity';
/**
@@ -47,6 +49,7 @@ export function MemberSidebar() {
const currentSpaceId = useSpaceStore((s) => s.currentSpaceId);
const memberListOpen = useUIStore((s) => s.memberListOpen);
const openUserProfile = useUIStore((s) => s.openUserProfile);
const userActivities = useActivityStore((s) => s.userActivities);
const space = spaces.find(s => s.id === currentSpaceId);
const ownerId = space?.ownerId;
@@ -122,8 +125,12 @@ export function MemberSidebar() {
{domain && !isOffline && (
<div className="text-[10px] leading-[1.3] text-txt-tertiary truncate opacity-60">@{domain}</div>
)}
{!isOffline && member.user.customStatus && (
<div className="text-[11px] leading-[1.3] text-txt-tertiary truncate">{member.user.customStatus}</div>
{!isOffline && (
<ActivityCard
activities={userActivities.get(member.userId) ?? []}
compact={true}
fallbackCustomStatus={member.user.customStatus}
/>
)}
</div>
</div>
packages/web/src/components/modals/settingsPanels/AccountPanel.tsx
+26
View File
@@ -11,6 +11,7 @@ import type { User, UserStatus, AvatarColor } from '@backspace/shared';
import type { FederationOpResult } from '../../../utils/federationOps';
import { isElectron } from '../../../platform/platform';
import { Toggle } from '../../ui/Toggle';
import { useActivityStore } from '../../../stores/activityStore';
function AutoLaunchSettings() {
@@ -139,6 +140,7 @@ export function AccountPanel() {
const instances = useInstanceStore((s) => s.instances);
const changePassword = useAuthStore((s) => s.changePassword);
const showActivity = useActivityStore((s) => s.showActivity);
if (!user) return null;
@@ -775,6 +777,30 @@ export function AccountPanel() {
</div>
)}
{/* ── Activity Status ── */}
<div>
<div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">Activity Status</div>
<div className="rounded-lg bg-white/[0.03] border border-white/[0.04] p-3.5">
<div className="flex items-center justify-between py-1">
<div>
<div className="text-[14px] text-txt-primary">Share Activity Status</div>
<div className="text-[12px] text-txt-tertiary mt-0.5">Allow others to see what you're up to</div>
</div>
<Toggle
enabled={showActivity}
onChange={async (enabled) => {
try {
await api.users.update({ showActivity: enabled });
useActivityStore.getState().setShowActivity(enabled);
} catch (err) {
console.error('Failed to update activity visibility:', err);
}
}}
/>
</div>
</div>
</div>
{/* ── Danger Zone ── */}
<div>
<div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-1.5">Danger Zone</div>
packages/web/src/components/ui/ActivityCard.tsx
+122
View File
@@ -0,0 +1,122 @@
import type { Activity } from '@backspace/shared';
import { getPrimaryActivity } from '@backspace/shared/src/activities.js';
interface ActivityCardProps {
activities: Activity[];
compact?: boolean;
fallbackCustomStatus?: string | null;
}
function formatElapsed(startMs: number): string {
const elapsed = Date.now() - startMs;
const minutes = Math.floor(elapsed / 60000);
const hours = Math.floor(minutes / 60);
if (hours > 0) return `${hours}h ${minutes % 60}m`;
return `${minutes}m`;
}
function ActivityIcon({ type }: { type: Activity['type'] }) {
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;
}
}
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>
);
}
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) {
const primary = getPrimaryActivity(activities);
if (!primary) {
if (fallbackCustomStatus) {
return <div className="text-[11px] leading-[1.3] text-txt-tertiary truncate">{fallbackCustomStatus}</div>;
}
return null;
}
if (compact) {
return <CompactActivity activity={primary} />;
}
return <FullActivity activity={primary} />;
}