feat: add frontend Rich Presence — activityStore, ActivityCard, sidebar upgrades, settings toggle
- 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
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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} />;
|
||||
}
|
||||
@@ -11,6 +11,7 @@ import { broadcastVoiceStatus, broadcastDeafenViaLiveKit } from '../utils/voice'
|
||||
import { registerSelfId } from '../utils/identity';
|
||||
import { getActiveRoom } from './useLiveKit';
|
||||
import { useUIStore } from '../stores/uiStore';
|
||||
import { useActivityStore } from '../stores/activityStore';
|
||||
|
||||
// ─── Connection state ─────────────────────────────────────────────────────────
|
||||
|
||||
@@ -205,6 +206,14 @@ function handleEvent(origin: string, event: ServerEvent): void {
|
||||
setVoiceUsers(channelId, userIds);
|
||||
}
|
||||
}
|
||||
// Initialize activity data from ready payload
|
||||
if (event.userActivities) {
|
||||
useActivityStore.getState().initActivities(event.userActivities);
|
||||
}
|
||||
if (event.user.showActivity !== undefined) {
|
||||
useActivityStore.setState({ showActivity: event.user.showActivity });
|
||||
}
|
||||
|
||||
// Populate voice user statuses (mute/deafen/camera/screenshare) from server
|
||||
if (event.voiceUserStates) {
|
||||
for (const [uid, status] of Object.entries(event.voiceUserStates)) {
|
||||
@@ -369,6 +378,9 @@ function handleEvent(origin: string, event: ServerEvent): void {
|
||||
case 'presence_update':
|
||||
updateMemberPresence(event.userId, event.status);
|
||||
useSocialStore.getState().updateFriendPresence(event.userId, event.status);
|
||||
if (event.activities) {
|
||||
useActivityStore.getState().setUserActivities(event.userId, event.activities);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'user_updated': {
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
import { create } from 'zustand';
|
||||
import type { Activity } from '@backspace/shared';
|
||||
import { wsSend } from '../hooks/useWebSocket';
|
||||
|
||||
let pushTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
interface ActivityState {
|
||||
userActivities: Map<string, Activity[]>;
|
||||
showActivity: boolean;
|
||||
|
||||
setUserActivities: (userId: string, activities: Activity[]) => void;
|
||||
clearUserActivities: (userId: string) => void;
|
||||
initActivities: (activityMap: Record<string, Activity[]>) => void;
|
||||
setShowActivity: (show: boolean) => void;
|
||||
pushActivities: (activities: Activity[]) => void;
|
||||
reset: () => void;
|
||||
}
|
||||
|
||||
export const useActivityStore = create<ActivityState>((set, get) => ({
|
||||
userActivities: new Map(),
|
||||
showActivity: true,
|
||||
|
||||
setUserActivities: (userId, activities) => {
|
||||
set((state) => {
|
||||
const next = new Map(state.userActivities);
|
||||
if (activities.length === 0) {
|
||||
next.delete(userId);
|
||||
} else {
|
||||
next.set(userId, activities);
|
||||
}
|
||||
return { userActivities: next };
|
||||
});
|
||||
},
|
||||
|
||||
clearUserActivities: (userId) => {
|
||||
set((state) => {
|
||||
const next = new Map(state.userActivities);
|
||||
next.delete(userId);
|
||||
return { userActivities: next };
|
||||
});
|
||||
},
|
||||
|
||||
initActivities: (activityMap) => {
|
||||
const next = new Map<string, Activity[]>();
|
||||
for (const [userId, activities] of Object.entries(activityMap)) {
|
||||
if (activities.length > 0) {
|
||||
next.set(userId, activities);
|
||||
}
|
||||
}
|
||||
set({ userActivities: next });
|
||||
},
|
||||
|
||||
setShowActivity: (show) => {
|
||||
set({ showActivity: show });
|
||||
if (!show) {
|
||||
if (pushTimer) { clearTimeout(pushTimer); pushTimer = null; }
|
||||
wsSend({ type: 'activity_update', activities: [] });
|
||||
}
|
||||
},
|
||||
|
||||
pushActivities: (activities) => {
|
||||
if (!get().showActivity) return;
|
||||
if (pushTimer) clearTimeout(pushTimer);
|
||||
pushTimer = setTimeout(() => {
|
||||
wsSend({ type: 'activity_update', activities });
|
||||
pushTimer = null;
|
||||
}, 5000);
|
||||
},
|
||||
|
||||
reset: () => {
|
||||
if (pushTimer) { clearTimeout(pushTimer); pushTimer = null; }
|
||||
set({ userActivities: new Map(), showActivity: true });
|
||||
},
|
||||
}));
|
||||
@@ -6,6 +6,7 @@ import { useSpaceStore } from './spaceStore';
|
||||
import { useSocialStore } from './socialStore';
|
||||
import { useVoiceStore } from './voiceStore';
|
||||
import { useInstanceStore } from './instanceStore';
|
||||
import { useActivityStore } from './activityStore';
|
||||
import { syncProfileUpdateToRemotes } from '../utils/profileSync';
|
||||
import { changePasswordOnRemotes, deleteAccountOnRemotes, type FederationOpResult } from '../utils/federationOps';
|
||||
import { clearSelfIds } from '../utils/identity';
|
||||
@@ -35,6 +36,7 @@ function resetUserStores() {
|
||||
useSocialStore.getState().reset();
|
||||
useVoiceStore.getState().resetSession();
|
||||
useInstanceStore.getState().reset();
|
||||
useActivityStore.getState().reset();
|
||||
}
|
||||
|
||||
export const useAuthStore = create<AuthState>((set, get) => ({
|
||||
|
||||
Reference in New Issue
Block a user