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

feat: replace Wumpus empty states with Nori mascot on Friends page

Browse Source
This commit is contained in:
Jannis Braun
2026-03-22 23:37:15 +01:00
parent 43eaceadc0
commit a4ebd52900
2 changed files with 57 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/chat/FriendsPage.test.tsx
+47
View File
@@ -7,6 +7,21 @@ import { useSocialStore, type TaggedFriend, type TaggedFriendRequest } from '../
import { useSpaceStore } from '../../stores/spaceStore';
import type { Friend, FriendRequest } from '@backspace/shared';
// Mock the mascot animation hook
vi.mock('../../hooks/useMascotAnimation', () => ({
useMascotAnimation: vi.fn(),
}));
// Stub AudioManager to avoid AudioWorkletNode reference error in jsdom
vi.mock('../../audio/AudioManager', () => ({
AudioManager: {
getInstance: vi.fn().mockReturnValue({
setOutputDevice: vi.fn(),
setVolume: vi.fn(),
}),
},
}));
// Mock the api module
vi.mock('../../api/client', () => ({
api: {
@@ -365,4 +380,36 @@ describe('FriendsPage', () => {
});
});
});
describe('Empty state mascot messages', () => {
it('shows "No one\'s online right now." in online tab when no friends online', () => {
useSocialStore.setState({ friends: [], requests: [] });
renderFriendsPage();
expect(screen.getByText("No one's online right now.")).toBeInTheDocument();
expect(screen.queryByText(/Wumpus/)).not.toBeInTheDocument();
});
it('shows "No friends yet — add someone!" in all tab when no friends', async () => {
const user = userEvent.setup();
useSocialStore.setState({ friends: [], requests: [] });
renderFriendsPage();
await user.click(screen.getByText('All'));
expect(screen.getByText('No friends yet — add someone!')).toBeInTheDocument();
expect(screen.queryByText(/Wumpus/)).not.toBeInTheDocument();
});
it('shows "No pending requests — Nori is napping." in pending tab when empty', async () => {
const user = userEvent.setup();
useSocialStore.setState({ friends: [], requests: [] });
renderFriendsPage();
await user.click(screen.getByText('Pending'));
expect(screen.getByText('No pending requests — Nori is napping.')).toBeInTheDocument();
expect(screen.queryByText(/Wumpus/)).not.toBeInTheDocument();
});
});
});
packages/web/src/components/chat/FriendsPage.tsx
+10 -7
View File
@@ -10,6 +10,7 @@ import { MemberListToggleButton } from '../layout/MemberListToggleButton';
import { LoadingSpinner } from '../ui/LoadingSpinner';
import { getAvatarGradient } from '../../utils/gradients';
import { api } from '../../api/client';
import { Mascot } from '../ui/Mascot';
type Tab = 'online' | 'all' | 'pending' | 'add';
@@ -97,9 +98,9 @@ export function FriendsPage({ mobile }: FriendsPageProps) {
Online — {onlineFriends.length}
</h2>
{onlineFriends.length === 0 ? (
<div className="flex flex-col items-center justify-center h-full opacity-60">
<img src="/friends-empty.svg" alt="" className="w-64 h-64 mb-4" onError={(e) => (e.target as any).style.display='none'} />
<p className="text-txt-tertiary">No one's around to play with Wumpus.</p>
<div className="flex flex-col items-center justify-center h-full opacity-80">
<Mascot state="idle" className="w-32 h-32 mb-4" />
<p className="text-txt-tertiary text-sm">No one's online right now.</p>
</div>
) : (
onlineFriends.map(friend => (
@@ -115,8 +116,9 @@ export function FriendsPage({ mobile }: FriendsPageProps) {
All Friends — {friends.length}
</h2>
{friends.length === 0 ? (
<div className="flex flex-col items-center justify-center h-full opacity-60">
<p className="text-txt-tertiary">Wumpus is waiting on friends. You can add them!</p>
<div className="flex flex-col items-center justify-center h-full opacity-80">
<Mascot state="lonely" className="w-32 h-32 mb-4" />
<p className="text-txt-tertiary text-sm">No friends yet — add someone!</p>
</div>
) : (
friends.map(friend => (
@@ -132,8 +134,9 @@ export function FriendsPage({ mobile }: FriendsPageProps) {
Pending — {pendingIncoming.length + pendingOutgoing.length}
</h2>
{[...pendingIncoming, ...pendingOutgoing].length === 0 ? (
<div className="flex flex-col items-center justify-center h-full opacity-60">
<p className="text-txt-tertiary">There are no pending friend requests. Here's Wumpus for now!</p>
<div className="flex flex-col items-center justify-center h-full opacity-80">
<Mascot state="sleeping" className="w-32 h-32 mb-4" />
<p className="text-txt-tertiary text-sm">No pending requests — Nori is napping.</p>
</div>
) : (
<>