fix: DM avatar color and reactions in federation + explore/server discovery
- Fix DM welcome header avatar using home identity for correct gradient color - Register DM channel IDs in channelOriginMap so federated DM operations (reactions, messages, typing) route to the correct instance - Pass origin when creating DM channels from friends list and WS events - Add server discovery/explore page with public server listings - Add server visibility and description fields
This commit is contained in:
Jannis Braun
@@ -0,0 +1,300 @@
|
||||
import React, { useEffect, useRef, useState, useCallback } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useExploreStore, type TaggedExploreServer } from '../../stores/exploreStore';
|
||||
import { useServerStore } from '../../stores/serverStore';
|
||||
import { useUIStore } from '../../stores/uiStore';
|
||||
import { LoadingSpinner } from '../ui/LoadingSpinner';
|
||||
import { getServerGradient } from '../../utils/gradients';
|
||||
|
||||
export function ExplorePage() {
|
||||
const navigate = useNavigate();
|
||||
const setCurrentServer = useServerStore((s) => s.setCurrentServer);
|
||||
const setShowExplore = useUIStore((s) => s.setShowExplore);
|
||||
|
||||
const servers = useExploreStore((s) => s.servers);
|
||||
const myRequests = useExploreStore((s) => s.myRequests);
|
||||
const isLoading = useExploreStore((s) => s.isLoading);
|
||||
const discoveryEnabled = useExploreStore((s) => s.discoveryEnabled);
|
||||
const error = useExploreStore((s) => s.error);
|
||||
const searchQuery = useExploreStore((s) => s.searchQuery);
|
||||
const setSearchQuery = useExploreStore((s) => s.setSearchQuery);
|
||||
const fetchServers = useExploreStore((s) => s.fetchServers);
|
||||
const fetchMyRequests = useExploreStore((s) => s.fetchMyRequests);
|
||||
|
||||
const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
// Fetch on mount
|
||||
useEffect(() => {
|
||||
fetchServers();
|
||||
fetchMyRequests();
|
||||
}, [fetchServers, fetchMyRequests]);
|
||||
|
||||
// Debounced search
|
||||
const handleSearchChange = useCallback((value: string) => {
|
||||
setSearchQuery(value);
|
||||
if (debounceRef.current) clearTimeout(debounceRef.current);
|
||||
debounceRef.current = setTimeout(() => {
|
||||
fetchServers(value || undefined);
|
||||
}, 300);
|
||||
}, [setSearchQuery, fetchServers]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (debounceRef.current) clearTimeout(debounceRef.current);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleJoinSuccess = (serverId: string) => {
|
||||
setShowExplore(false);
|
||||
setCurrentServer(serverId);
|
||||
navigate(`/channels/${serverId}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex-1 flex flex-col bg-surface-chat h-full">
|
||||
{/* Header */}
|
||||
<div className="h-12 px-4 flex items-center shadow-header flex-shrink-0 z-10 bg-surface-chat">
|
||||
<div className="flex items-center gap-2 mr-4">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" className="text-txt-tertiary">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z" />
|
||||
</svg>
|
||||
<span className="font-bold text-txt-primary">Explore</span>
|
||||
</div>
|
||||
|
||||
<div className="w-[1px] h-6 bg-surface-elevated mx-2" />
|
||||
|
||||
<div className="relative flex-1 max-w-xs ml-2">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search servers..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => handleSearchChange(e.target.value)}
|
||||
className="w-full bg-surface-base text-txt-primary text-sm px-3 py-1.5 rounded-[4px] outline-none placeholder:text-txt-tertiary/50 focus:ring-1 focus:ring-accent-primary transition-all"
|
||||
/>
|
||||
{searchQuery && (
|
||||
<button
|
||||
onClick={() => handleSearchChange('')}
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2 text-txt-tertiary hover:text-txt-secondary"
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{!discoveryEnabled && (
|
||||
<div className="mx-6 mt-4 p-2.5 bg-accent-amber/10 border border-accent-amber/30 rounded text-[13px] text-accent-amber">
|
||||
Server discovery is disabled by the instance administrator.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLoading && servers.length === 0 ? (
|
||||
<div className="flex-1 flex items-center justify-center h-64">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="mx-6 mt-4 p-3 bg-accent-rose/10 border border-accent-rose/30 rounded text-sm text-txt-danger">
|
||||
{error}
|
||||
</div>
|
||||
) : servers.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center h-64 opacity-60">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor" className="text-txt-tertiary mb-3">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z" />
|
||||
</svg>
|
||||
<p className="text-txt-tertiary text-sm">
|
||||
{searchQuery ? 'No servers match your search.' : 'No discoverable servers found.'}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 p-6">
|
||||
{servers.map((server) => (
|
||||
<ServerCard
|
||||
key={`${server.id}:${server._instanceOrigin}`}
|
||||
server={server}
|
||||
isPending={myRequests.some(r => r.serverId === server.id && r.status === 'pending')}
|
||||
onJoinSuccess={handleJoinSuccess}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ServerCard({
|
||||
server,
|
||||
isPending,
|
||||
onJoinSuccess,
|
||||
}: {
|
||||
server: TaggedExploreServer;
|
||||
isPending: boolean;
|
||||
onJoinSuccess: (serverId: string) => void;
|
||||
}) {
|
||||
const publicJoin = useExploreStore((s) => s.publicJoin);
|
||||
const requestJoin = useExploreStore((s) => s.requestJoin);
|
||||
|
||||
const [joining, setJoining] = useState(false);
|
||||
const [showRequestForm, setShowRequestForm] = useState(false);
|
||||
const [requestMessage, setRequestMessage] = useState('');
|
||||
const [requestSent, setRequestSent] = useState(isPending);
|
||||
const [joinError, setJoinError] = useState('');
|
||||
|
||||
const gradient = getServerGradient(server.id, server.name);
|
||||
const isPublic = server.visibility === 'public';
|
||||
const originLabel = server._instanceOrigin
|
||||
? (() => { try { return new URL(server._instanceOrigin).host; } catch { return server._instanceOrigin; } })()
|
||||
: null;
|
||||
|
||||
const handlePublicJoin = async () => {
|
||||
setJoining(true);
|
||||
setJoinError('');
|
||||
try {
|
||||
const fullServer = await publicJoin(server);
|
||||
onJoinSuccess(fullServer.id);
|
||||
} catch (err) {
|
||||
setJoinError(err instanceof Error ? err.message : 'Failed to join');
|
||||
setJoining(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRequestJoin = async () => {
|
||||
setJoining(true);
|
||||
setJoinError('');
|
||||
try {
|
||||
await requestJoin(server, requestMessage.trim() || undefined);
|
||||
setRequestSent(true);
|
||||
setShowRequestForm(false);
|
||||
} catch (err) {
|
||||
setJoinError(err instanceof Error ? err.message : 'Failed to send request');
|
||||
} finally {
|
||||
setJoining(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-surface-sidebar rounded-lg border border-border-soft overflow-hidden flex flex-col transition-colors hover:border-border-hard">
|
||||
{/* Banner / Icon area */}
|
||||
<div className="h-32 relative flex items-center justify-center" style={{ background: gradient.gradient }}>
|
||||
{server.icon ? (
|
||||
<img
|
||||
src={server.icon.startsWith('http') ? server.icon : `/api/uploads/${server.icon}`}
|
||||
alt={server.name}
|
||||
className="w-16 h-16 rounded-2xl object-cover shadow-lg"
|
||||
/>
|
||||
) : (
|
||||
<span className="text-3xl font-bold text-white/90 drop-shadow-md">
|
||||
{server.name.charAt(0).toUpperCase()}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Visibility badge */}
|
||||
<div className="absolute top-2 right-2">
|
||||
<span className={`px-2 py-0.5 rounded-full text-[10px] font-semibold uppercase tracking-wider ${
|
||||
isPublic
|
||||
? 'bg-accent-mint/20 text-accent-mint'
|
||||
: 'bg-accent-amber/20 text-accent-amber'
|
||||
}`}>
|
||||
{isPublic ? 'Public' : 'Request'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Instance origin */}
|
||||
{originLabel && (
|
||||
<div className="absolute bottom-2 left-2">
|
||||
<span className="px-1.5 py-0.5 rounded bg-black/40 text-[10px] text-white/80 font-medium backdrop-blur-sm">
|
||||
{originLabel}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-4 flex flex-col flex-1">
|
||||
<h3 className="text-[15px] font-bold text-txt-primary truncate mb-1">{server.name}</h3>
|
||||
|
||||
{server.description ? (
|
||||
<p className="text-[13px] text-txt-secondary line-clamp-2 mb-3 flex-1">
|
||||
{server.description}
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-[13px] text-txt-tertiary italic mb-3 flex-1">No description</p>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-3 text-[12px] text-txt-tertiary mb-3">
|
||||
<span className="flex items-center gap-1">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" className="opacity-60">
|
||||
<path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z" />
|
||||
</svg>
|
||||
{server.memberCount} {server.memberCount === 1 ? 'member' : 'members'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Action area */}
|
||||
{joinError && (
|
||||
<div className="text-[12px] text-txt-danger mb-2">{joinError}</div>
|
||||
)}
|
||||
|
||||
{isPublic ? (
|
||||
<button
|
||||
onClick={handlePublicJoin}
|
||||
disabled={joining}
|
||||
className="w-full py-2 bg-accent-primary hover:bg-accent-primary-hover text-white text-sm font-medium rounded transition-colors disabled:opacity-50"
|
||||
>
|
||||
{joining ? (
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
<LoadingSpinner />
|
||||
Joining...
|
||||
</span>
|
||||
) : (
|
||||
'Join Server'
|
||||
)}
|
||||
</button>
|
||||
) : requestSent ? (
|
||||
<button
|
||||
disabled
|
||||
className="w-full py-2 bg-interactive-muted text-txt-tertiary text-sm font-medium rounded cursor-default"
|
||||
>
|
||||
Request Pending
|
||||
</button>
|
||||
) : showRequestForm ? (
|
||||
<div className="space-y-2">
|
||||
<textarea
|
||||
value={requestMessage}
|
||||
onChange={(e) => setRequestMessage(e.target.value.slice(0, 200))}
|
||||
placeholder="Why do you want to join? (optional)"
|
||||
rows={2}
|
||||
className="w-full px-3 py-2 bg-surface-input rounded text-sm text-txt-primary outline-none focus:ring-1 focus:ring-accent-primary resize-none placeholder:text-txt-tertiary"
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={handleRequestJoin}
|
||||
disabled={joining}
|
||||
className="flex-1 py-1.5 bg-accent-amber hover:bg-accent-amber/80 text-[#13131a] text-sm font-medium rounded transition-colors disabled:opacity-50"
|
||||
>
|
||||
{joining ? 'Sending...' : 'Send Request'}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowRequestForm(false)}
|
||||
className="px-3 py-1.5 text-sm text-txt-tertiary hover:text-txt-secondary transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => setShowRequestForm(true)}
|
||||
className="w-full py-2 bg-accent-amber/20 hover:bg-accent-amber/30 text-accent-amber text-sm font-medium rounded transition-colors"
|
||||
>
|
||||
Request to Join
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -59,7 +59,7 @@ export function FriendsPage() {
|
||||
if (instance?.api) client = instance.api;
|
||||
}
|
||||
const dmChannel = await client.dm.create({ userId: friendId });
|
||||
addDmChannel(dmChannel);
|
||||
addDmChannel(dmChannel, instanceOrigin);
|
||||
navigate(`/channels/@me/${dmChannel.id}`);
|
||||
} catch (err) {
|
||||
console.error('Failed to open DM:', err);
|
||||
|
||||
@@ -185,7 +185,7 @@ function WelcomeHeader({ channelId }: { channelId: string }) {
|
||||
return (
|
||||
<div className="px-4 pt-8 pb-4">
|
||||
<div className="mb-2">
|
||||
<Avatar src={otherUser?.avatar} name={displayName} size={80} userId={otherUser?.id} />
|
||||
<Avatar src={otherUser?.avatar} name={displayName} size={80} user={otherUser ?? undefined} />
|
||||
</div>
|
||||
<h3 className="text-[32px] leading-10 font-bold text-txt-primary">{displayName}</h3>
|
||||
<p className="text-txt-secondary text-[14px] mt-1">
|
||||
|
||||
@@ -2,7 +2,9 @@ import React, { useEffect, useMemo } from 'react';
|
||||
import { useSocialStore } from '../../stores/socialStore';
|
||||
import { useUIStore } from '../../stores/uiStore';
|
||||
import { Avatar } from '../ui/Avatar';
|
||||
import { Username } from '../ui/Username';
|
||||
import type { Friend } from '@backspace/shared';
|
||||
import { parseFederatedUsername } from '../../utils/identity';
|
||||
|
||||
export function ActivityPanel() {
|
||||
const friends = useSocialStore((s) => s.friends);
|
||||
@@ -34,7 +36,11 @@ export function ActivityPanel() {
|
||||
status: friend.status,
|
||||
customStatus: friend.customStatus,
|
||||
createdAt: friend.createdAt,
|
||||
} as any,
|
||||
homeUserId: friend.homeUserId,
|
||||
homeInstance: friend.homeInstance,
|
||||
isAdmin: false,
|
||||
replicatedInstances: [],
|
||||
},
|
||||
{
|
||||
top: Math.min(rect.top, window.innerHeight - 450),
|
||||
left: rect.left - 316,
|
||||
@@ -42,30 +48,38 @@ export function ActivityPanel() {
|
||||
);
|
||||
};
|
||||
|
||||
const renderFriend = (friend: Friend, isOffline = false) => (
|
||||
<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"
|
||||
>
|
||||
<Avatar
|
||||
src={friend.avatar}
|
||||
name={friend.displayName ?? friend.username}
|
||||
size={32}
|
||||
status={isOffline ? 'offline' : friend.status}
|
||||
className={isOffline ? 'opacity-60' : undefined}
|
||||
userId={friend.id}
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className={`text-[13.5px] leading-[1.2] font-medium truncate ${isOffline ? 'text-txt-tertiary' : 'text-txt-primary'}`}>
|
||||
{friend.displayName ?? friend.username}
|
||||
const renderFriend = (friend: Friend, isOffline = false) => {
|
||||
const { baseName, domain } = parseFederatedUsername(friend.username);
|
||||
const friendDisplayName = friend.displayName ?? baseName;
|
||||
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"
|
||||
>
|
||||
<Avatar
|
||||
src={friend.avatar}
|
||||
name={friendDisplayName}
|
||||
size={32}
|
||||
status={isOffline ? 'offline' : friend.status}
|
||||
className={isOffline ? 'opacity-60' : undefined}
|
||||
userId={friend.homeUserId ?? friend.id}
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<Username
|
||||
username={friendDisplayName}
|
||||
className={`text-[13.5px] leading-[1.2] font-medium truncate ${isOffline ? 'text-txt-tertiary' : 'text-txt-primary'}`}
|
||||
/>
|
||||
{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>
|
||||
)}
|
||||
</div>
|
||||
{!isOffline && friend.customStatus && (
|
||||
<div className="text-[11px] leading-[1.3] text-txt-tertiary truncate">{friend.customStatus}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-60 bg-surface-channel flex-shrink-0 overflow-y-auto select-none no-scrollbar hidden md:block border-l border-border-hard">
|
||||
|
||||
@@ -9,10 +9,12 @@ import { VoiceChannel } from '../voice/VoiceChannel';
|
||||
import { VoiceControls } from '../voice/VoiceControls';
|
||||
import { useVoiceStore } from '../../stores/voiceStore';
|
||||
import { Avatar } from '../ui/Avatar';
|
||||
import { Username } from '../ui/Username';
|
||||
import { wsSend } from '../../hooks/useWebSocket';
|
||||
import { getActiveRoom } from '../../hooks/useLiveKit';
|
||||
import { AudioManager } from '../../audio/AudioManager';
|
||||
import { hasPermissionBit, PermissionBits } from '../../utils/permissions';
|
||||
import { parseFederatedUsername } from '../../utils/identity';
|
||||
|
||||
export function ChannelSidebar() {
|
||||
const servers = useServerStore((s) => s.servers);
|
||||
@@ -193,7 +195,7 @@ export function ChannelSidebar() {
|
||||
const isDmUnread = unreadChannels.has(dm.id) && currentChannelId !== dm.id;
|
||||
|
||||
const dmDisplayName = isGroup
|
||||
? otherMembers.map(m => m.displayName ?? m.username).join(', ')
|
||||
? otherMembers.map(m => m.displayName ?? parseFederatedUsername(m.username).baseName).join(', ')
|
||||
: otherMembers[0]?.displayName ?? otherMembers[0]?.username;
|
||||
|
||||
return (
|
||||
@@ -224,21 +226,22 @@ export function ChannelSidebar() {
|
||||
zIndex: 2 - i,
|
||||
}}
|
||||
>
|
||||
<Avatar src={m.avatar} name={m.displayName ?? m.username} size={22} userId={m.id} />
|
||||
<Avatar src={m.avatar} name={m.displayName ?? parseFederatedUsername(m.username).baseName} size={22} userId={m.homeUserId ?? m.id} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<Avatar src={otherMembers[0]?.avatar} name={otherMembers[0]?.displayName ?? otherMembers[0]?.username ?? ''} size={32} status={otherMembers[0]?.status as any} userId={otherMembers[0]?.id} />
|
||||
<Avatar src={otherMembers[0]?.avatar} name={otherMembers[0]?.displayName ?? parseFederatedUsername(otherMembers[0]?.username ?? '').baseName} size={32} status={otherMembers[0]?.status as any} userId={otherMembers[0]?.homeUserId ?? otherMembers[0]?.id} />
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className={`text-[15px] truncate leading-tight ${
|
||||
currentChannelId === dm.id ? 'text-white font-medium'
|
||||
: isDmUnread ? 'text-white font-bold'
|
||||
: 'text-txt-tertiary group-hover:text-txt-secondary font-medium'
|
||||
}`}>
|
||||
{dmDisplayName}
|
||||
</div>
|
||||
<Username
|
||||
username={dmDisplayName ?? ''}
|
||||
className={`text-[15px] truncate leading-tight block ${
|
||||
currentChannelId === dm.id ? 'text-white font-medium'
|
||||
: isDmUnread ? 'text-white font-bold'
|
||||
: 'text-txt-tertiary group-hover:text-txt-secondary font-medium'
|
||||
}`}
|
||||
/>
|
||||
{isGroup ? (
|
||||
<div className="text-[12px] text-txt-tertiary truncate leading-tight mt-0.5">
|
||||
{dm.members.length} Members
|
||||
|
||||
@@ -9,6 +9,7 @@ import { VoiceGrid } from '../voice/VoiceGrid';
|
||||
import { VoiceControlBar } from '../voice/VoiceControlBar';
|
||||
import { VoiceChatPanel } from '../voice/VoiceChatPanel';
|
||||
import { FriendsPage } from '../chat/FriendsPage';
|
||||
import { ExplorePage } from '../chat/ExplorePage';
|
||||
import { Avatar } from '../ui/Avatar';
|
||||
import { useVoiceStore } from '../../stores/voiceStore';
|
||||
import { wsSend } from '../../hooks/useWebSocket';
|
||||
@@ -27,6 +28,7 @@ export function MainContent() {
|
||||
const isLiveKitConnected = useVoiceStore((s) => s.isLiveKitConnected);
|
||||
const connectionError = useVoiceStore((s) => s.connectionError);
|
||||
const showDms = useUIStore((s) => s.showDms);
|
||||
const showExplore = useUIStore((s) => s.showExplore);
|
||||
const activeDmCall = useVoiceStore((s) => s.activeDmCall);
|
||||
const outgoingCall = useVoiceStore((s) => s.outgoingCall);
|
||||
const dmChannels = useServerStore((s) => s.dmChannels);
|
||||
@@ -58,8 +60,9 @@ export function MainContent() {
|
||||
const channel = channels.find(c => c.id === currentChannelId);
|
||||
const isVoiceChannel = channel?.type === 'voice' || channel?.type === 'video';
|
||||
|
||||
if (showDms || !currentServerId) {
|
||||
if (showDms || showExplore || !currentServerId) {
|
||||
if (!currentChannelId) {
|
||||
if (showExplore) return <ExplorePage />;
|
||||
return <FriendsPage />;
|
||||
}
|
||||
|
||||
|
||||
@@ -4,6 +4,7 @@ import { useServerStore } from '../../stores/serverStore';
|
||||
import { useUIStore } from '../../stores/uiStore';
|
||||
import { Avatar } from '../ui/Avatar';
|
||||
import { Username } from '../ui/Username';
|
||||
import { parseFederatedUsername } from '../../utils/identity';
|
||||
|
||||
/**
|
||||
* Derives the display group for a member based on their highest-positioned role
|
||||
@@ -95,7 +96,8 @@ export function MemberSidebar() {
|
||||
};
|
||||
|
||||
const renderMember = (member: MemberWithUser, isOffline = false) => {
|
||||
const displayName = member.user.displayName ?? member.user.username;
|
||||
const { baseName, domain } = parseFederatedUsername(member.user.username);
|
||||
const displayName = member.user.displayName ?? baseName;
|
||||
const colorStyle = isOffline ? undefined : getMemberColor(member);
|
||||
return (
|
||||
<div
|
||||
@@ -117,6 +119,9 @@ export function MemberSidebar() {
|
||||
className={`text-[13.5px] leading-[1.2] font-medium truncate ${isOffline ? 'text-txt-tertiary' : (!colorStyle ? 'text-txt-primary' : '')}`}
|
||||
style={colorStyle}
|
||||
/>
|
||||
{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>
|
||||
)}
|
||||
|
||||
@@ -14,7 +14,7 @@ interface SidebarItemProps {
|
||||
active: boolean;
|
||||
onClick: () => void;
|
||||
type?: 'server' | 'dm' | 'action';
|
||||
actionType?: 'add' | 'join';
|
||||
actionType?: 'add' | 'join' | 'explore';
|
||||
hasUnread?: boolean;
|
||||
dimmed?: boolean;
|
||||
}
|
||||
@@ -89,6 +89,10 @@ function SidebarItem({ id, name, icon, active, onClick, type = 'server', actionT
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" />
|
||||
</svg>
|
||||
) : actionType === 'explore' ? (
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2L4.5 20.29l.71.71L12 18l6.79 3 .71-.71z" />
|
||||
@@ -116,6 +120,8 @@ export function ServerSidebar() {
|
||||
const dmChannels = useServerStore((s) => s.dmChannels);
|
||||
const showDms = useUIStore((s) => s.showDms);
|
||||
const setShowDms = useUIStore((s) => s.setShowDms);
|
||||
const showExplore = useUIStore((s) => s.showExplore);
|
||||
const setShowExplore = useUIStore((s) => s.setShowExplore);
|
||||
const openModal = useUIStore((s) => s.openModal);
|
||||
const addToast = useUIStore((s) => s.addToast);
|
||||
const unreadChannels = useChatStore((s) => s.unreadChannels);
|
||||
@@ -175,6 +181,7 @@ export function ServerSidebar() {
|
||||
}
|
||||
setCurrentServer(serverId);
|
||||
setShowDms(false);
|
||||
setShowExplore(false);
|
||||
navigate(`/channels/${serverId}`);
|
||||
};
|
||||
|
||||
@@ -184,6 +191,12 @@ export function ServerSidebar() {
|
||||
navigate('/channels/@me');
|
||||
};
|
||||
|
||||
const handleExploreClick = () => {
|
||||
setShowExplore(true);
|
||||
setCurrentServer(null);
|
||||
navigate('/channels/@me');
|
||||
};
|
||||
|
||||
return (
|
||||
<nav data-pip-obstacle="left" className="w-[72px] bg-surface-base flex flex-col items-center py-3 overflow-y-auto flex-shrink-0 no-scrollbar select-none md:fixed md:inset-y-0 md:left-0 md:z-[100] md:glass-strip">
|
||||
<SidebarItem
|
||||
@@ -257,6 +270,15 @@ export function ServerSidebar() {
|
||||
actionType="join"
|
||||
/>
|
||||
|
||||
<SidebarItem
|
||||
id="explore"
|
||||
name="Explore Servers"
|
||||
active={showExplore}
|
||||
onClick={handleExploreClick}
|
||||
type="action"
|
||||
actionType="explore"
|
||||
/>
|
||||
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@ import { Avatar } from '../ui/Avatar';
|
||||
import { api } from '../../api/client';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { hasPermissionBit, PermissionBits } from '../../utils/permissions';
|
||||
import type { InstanceStreamingLimits } from '@backspace/shared';
|
||||
import type { InstanceStreamingLimits, ServerVisibility, JoinRequest } from '@backspace/shared';
|
||||
|
||||
const VALID_RESOLUTIONS = [540, 720, 1080] as const;
|
||||
const VALID_FRAMERATES = [30, 45, 60] as const;
|
||||
@@ -215,6 +215,250 @@ function StreamingLimitsPanel() {
|
||||
);
|
||||
}
|
||||
|
||||
function DiscoveryPanel({ serverId }: { serverId: string }) {
|
||||
const servers = useServerStore((s) => s.servers);
|
||||
const updateServer = useServerStore((s) => s.updateServer);
|
||||
const discoveryEnabled = useSettingsStore((s) => s.streamingLimits?.discoveryEnabled ?? true);
|
||||
|
||||
const server = servers.find(s => s.id === serverId);
|
||||
|
||||
const [visibility, setVisibility] = useState<ServerVisibility>(
|
||||
(server?.visibility as ServerVisibility) ?? 'private'
|
||||
);
|
||||
const [description, setDescription] = useState(server?.description ?? '');
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [saveError, setSaveError] = useState('');
|
||||
const [saveSuccess, setSaveSuccess] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (server) {
|
||||
setVisibility((server.visibility as ServerVisibility) ?? 'private');
|
||||
setDescription(server.description ?? '');
|
||||
}
|
||||
}, [server]);
|
||||
|
||||
if (!server) return null;
|
||||
|
||||
const hasChanges =
|
||||
visibility !== ((server.visibility as ServerVisibility) ?? 'private') ||
|
||||
description !== (server.description ?? '');
|
||||
|
||||
const handleSave = async () => {
|
||||
setSaving(true);
|
||||
setSaveError('');
|
||||
setSaveSuccess(false);
|
||||
try {
|
||||
await api.servers.update(serverId, { visibility, description: description.trim() });
|
||||
setSaveSuccess(true);
|
||||
setTimeout(() => setSaveSuccess(false), 2000);
|
||||
} catch (err) {
|
||||
setSaveError(err instanceof Error ? err.message : 'Failed to save');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setVisibility((server.visibility as ServerVisibility) ?? 'private');
|
||||
setDescription(server.description ?? '');
|
||||
setSaveError('');
|
||||
};
|
||||
|
||||
const visibilityOptions: { value: ServerVisibility; label: string; desc: string }[] = [
|
||||
{ value: 'private', label: 'Private', desc: 'Only people with an invite link can join' },
|
||||
{ value: 'request', label: 'Request to Join', desc: 'Visible in Explore — people can request to join' },
|
||||
{ value: 'public', label: 'Public', desc: 'Visible in Explore — anyone can join instantly' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{!discoveryEnabled && (
|
||||
<div className="p-2.5 bg-accent-amber/10 border border-accent-amber/30 rounded text-[13px] text-accent-amber">
|
||||
Server discovery is disabled by the instance administrator. Changing visibility will have no effect until discovery is re-enabled.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<div className="text-[11px] text-txt-tertiary font-semibold uppercase tracking-wider mb-2">
|
||||
Visibility
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
{visibilityOptions.map((opt) => (
|
||||
<label
|
||||
key={opt.value}
|
||||
className={`flex items-start gap-3 p-2.5 rounded cursor-pointer transition-colors ${
|
||||
visibility === opt.value
|
||||
? 'bg-interactive-selected'
|
||||
: 'hover:bg-interactive-hover'
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="visibility"
|
||||
value={opt.value}
|
||||
checked={visibility === opt.value}
|
||||
onChange={() => setVisibility(opt.value)}
|
||||
className="mt-0.5 accent-accent-primary"
|
||||
/>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-txt-primary">{opt.label}</div>
|
||||
<div className="text-xs text-txt-tertiary">{opt.desc}</div>
|
||||
</div>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="text-[11px] text-txt-tertiary font-semibold uppercase tracking-wider mb-1.5">
|
||||
Description
|
||||
</div>
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value.slice(0, 200))}
|
||||
placeholder="A short description for the Explore page..."
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 bg-surface-input rounded text-sm text-txt-primary outline-none focus:ring-1 focus:ring-accent-primary resize-none placeholder:text-txt-tertiary"
|
||||
/>
|
||||
<div className="text-[11px] text-txt-tertiary text-right">{description.length}/200</div>
|
||||
</div>
|
||||
|
||||
{saveError && (
|
||||
<div className="p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm">{saveError}</div>
|
||||
)}
|
||||
{saveSuccess && (
|
||||
<div className="p-2 bg-status-online/10 border border-status-online/30 rounded text-status-online text-sm">Settings saved</div>
|
||||
)}
|
||||
{hasChanges && (
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={saving}
|
||||
className="px-4 py-1.5 bg-accent-primary hover:bg-accent-primary/80 text-white text-sm font-medium rounded transition-colors disabled:opacity-50"
|
||||
>
|
||||
{saving ? 'Saving...' : 'Save'}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleReset}
|
||||
className="px-4 py-1.5 text-sm text-txt-tertiary hover:text-txt-secondary transition-colors"
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pending Join Requests — only shown when visibility is 'request' */}
|
||||
{(visibility === 'request' || (server.visibility as ServerVisibility) === 'request') && (
|
||||
<JoinRequestsSection serverId={serverId} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function JoinRequestsSection({ serverId }: { serverId: string }) {
|
||||
const [requests, setRequests] = useState<JoinRequest[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [actionError, setActionError] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
setLoading(true);
|
||||
api.explore.getJoinRequests(serverId, 'pending')
|
||||
.then(({ requests: reqs }) => {
|
||||
if (!cancelled) {
|
||||
setRequests(reqs);
|
||||
setLoading(false);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
if (!cancelled) setLoading(false);
|
||||
});
|
||||
return () => { cancelled = true; };
|
||||
}, [serverId]);
|
||||
|
||||
const handleDecide = async (requestId: string, action: 'accept' | 'decline') => {
|
||||
setActionError('');
|
||||
try {
|
||||
await api.explore.decideJoinRequest(serverId, requestId, action);
|
||||
setRequests(prev => prev.filter(r => r.id !== requestId));
|
||||
} catch (err) {
|
||||
setActionError(err instanceof Error ? err.message : 'Action failed');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="pt-4 border-t border-border-soft">
|
||||
<div className="text-[11px] text-txt-tertiary font-semibold uppercase tracking-wider mb-2">
|
||||
Pending Join Requests
|
||||
</div>
|
||||
|
||||
{actionError && (
|
||||
<div className="mb-2 p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-xs">
|
||||
{actionError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<div className="text-sm text-txt-tertiary">Loading...</div>
|
||||
) : requests.length === 0 ? (
|
||||
<div className="text-sm text-txt-tertiary">No pending join requests</div>
|
||||
) : (
|
||||
<div className="space-y-2 max-h-[240px] overflow-y-auto scrollbar-thin">
|
||||
{requests.map((req) => {
|
||||
const user = req.user;
|
||||
const displayName = user?.displayName ?? user?.username ?? 'Unknown';
|
||||
|
||||
return (
|
||||
<div key={req.id} className="flex items-start gap-3 p-2.5 rounded bg-surface-base">
|
||||
<Avatar
|
||||
src={user?.avatar}
|
||||
name={displayName}
|
||||
size={32}
|
||||
userId={user?.id}
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-sm font-medium text-txt-primary truncate">{displayName}</span>
|
||||
{user?.username && (
|
||||
<span className="text-xs text-txt-tertiary">@{user.username}</span>
|
||||
)}
|
||||
</div>
|
||||
{req.message && (
|
||||
<p className="text-xs text-txt-secondary mt-0.5 line-clamp-2">{req.message}</p>
|
||||
)}
|
||||
<span className="text-[10px] text-txt-tertiary">
|
||||
{new Date(req.createdAt).toLocaleDateString()}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 flex-shrink-0">
|
||||
<button
|
||||
onClick={() => handleDecide(req.id, 'accept')}
|
||||
className="p-1.5 rounded text-status-online hover:bg-status-online/20 transition-colors"
|
||||
title="Accept"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDecide(req.id, 'decline')}
|
||||
className="p-1.5 rounded text-txt-danger hover:bg-accent-rose/20 transition-colors"
|
||||
title="Decline"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ServerSettingsModal() {
|
||||
const activeModal = useUIStore((s) => s.activeModal);
|
||||
const closeModal = useUIStore((s) => s.closeModal);
|
||||
@@ -229,7 +473,7 @@ export function ServerSettingsModal() {
|
||||
const isAdmin = useSettingsStore((s) => s.isAdmin);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [tab, setTab] = useState<'overview' | 'members' | 'streaming'>('overview');
|
||||
const [tab, setTab] = useState<'overview' | 'discovery' | 'members' | 'streaming'>('overview');
|
||||
const [serverName, setServerName] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
@@ -346,6 +590,16 @@ export function ServerSettingsModal() {
|
||||
>
|
||||
Overview
|
||||
</button>
|
||||
{canManageServer && (
|
||||
<button
|
||||
onClick={() => setTab('discovery')}
|
||||
className={`w-full text-left px-3 py-1.5 rounded text-sm transition-colors ${
|
||||
tab === 'discovery' ? 'bg-interactive-selected text-txt-primary' : 'text-txt-tertiary hover:text-txt-secondary hover:bg-interactive-hover'
|
||||
}`}
|
||||
>
|
||||
Discovery
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => setTab('members')}
|
||||
className={`w-full text-left px-3 py-1.5 rounded text-sm transition-colors ${
|
||||
@@ -411,6 +665,10 @@ export function ServerSettingsModal() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{tab === 'discovery' && canManageServer && currentServerId && (
|
||||
<DiscoveryPanel serverId={currentServerId} />
|
||||
)}
|
||||
|
||||
{tab === 'members' && (
|
||||
<div className="space-y-2 max-h-[400px] overflow-y-auto scrollbar-thin">
|
||||
{members.map((member) => {
|
||||
|
||||
@@ -7,6 +7,7 @@ import { api } from '../../api/client';
|
||||
import { useServerStore } from '../../stores/serverStore';
|
||||
import { useUIStore } from '../../stores/uiStore';
|
||||
import { getAvatarGradient } from '../../utils/gradients';
|
||||
import { parseFederatedUsername } from '../../utils/identity';
|
||||
|
||||
interface UserProfilePopoutProps {
|
||||
user: User;
|
||||
@@ -17,7 +18,8 @@ interface UserProfilePopoutProps {
|
||||
export function UserProfilePopout({ user, onClose, position }: UserProfilePopoutProps) {
|
||||
const navigate = useNavigate();
|
||||
const addDmChannel = useServerStore((s) => s.addDmChannel);
|
||||
const displayName = user.displayName ?? user.username;
|
||||
const { baseName, domain } = parseFederatedUsername(user.username);
|
||||
const displayName = user.displayName ?? baseName;
|
||||
|
||||
const top = position
|
||||
? Math.min(Math.max(8, position.top), window.innerHeight - 360)
|
||||
@@ -72,21 +74,23 @@ export function UserProfilePopout({ user, onClose, position }: UserProfilePopout
|
||||
name={displayName}
|
||||
size={56}
|
||||
status={user.status as 'online' | 'idle' | 'dnd' | 'offline' | null}
|
||||
userId={user.id}
|
||||
userId={user.homeUserId ?? user.id}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Name & info — flows naturally after avatar */}
|
||||
<div>
|
||||
<Username
|
||||
username={displayName}
|
||||
username={user.displayName ?? baseName}
|
||||
className="text-[16px] font-semibold text-txt-primary leading-tight"
|
||||
/>
|
||||
{user.username.includes('@') ? (
|
||||
<Username username={user.username} className="text-[13px] text-txt-tertiary" />
|
||||
) : (
|
||||
<div className="text-[13px] text-txt-tertiary">@{user.username}</div>
|
||||
)}
|
||||
<div className="text-[13px] text-txt-tertiary">
|
||||
{domain ? (
|
||||
<Username username={user.username} className="text-[13px] text-txt-tertiary" />
|
||||
) : (
|
||||
<span>@{baseName}</span>
|
||||
)}
|
||||
</div>
|
||||
{user.customStatus && (
|
||||
<div className="text-[13px] text-txt-secondary italic mt-1">
|
||||
{user.customStatus}
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { useVoiceStore } from '../../stores/voiceStore';
|
||||
import { useServerStore } from '../../stores/serverStore';
|
||||
import { wsSend } from '../../hooks/useWebSocket';
|
||||
import { getAvatarGradient } from '../../utils/gradients';
|
||||
import { parseFederatedUsername } from '../../utils/identity';
|
||||
|
||||
export function IncomingCallModal() {
|
||||
const incomingCall = useVoiceStore((s) => s.incomingCall);
|
||||
@@ -25,8 +27,16 @@ export function IncomingCallModal() {
|
||||
};
|
||||
}, [incomingCall, setIncomingCall]);
|
||||
|
||||
const dmChannels = useServerStore((s) => s.dmChannels);
|
||||
|
||||
if (!incomingCall) return null;
|
||||
|
||||
// Look up the caller in DM channel members for homeUserId
|
||||
const dmChannel = dmChannels.find(d => d.id === incomingCall.dmChannelId);
|
||||
const callerMember = dmChannel?.members.find(m => m.id === incomingCall.callerId);
|
||||
const callerAvatarId = callerMember?.homeUserId ?? incomingCall.callerId;
|
||||
const { baseName: callerBaseName } = parseFederatedUsername(incomingCall.callerName);
|
||||
|
||||
const handleAccept = () => {
|
||||
if (timerRef.current) clearTimeout(timerRef.current);
|
||||
wsSend({ type: 'dm_call_accept', dmChannelId: incomingCall.dmChannelId });
|
||||
@@ -55,8 +65,8 @@ export function IncomingCallModal() {
|
||||
<div className="relative p-8 flex flex-col items-center gap-4">
|
||||
{/* Caller avatar */}
|
||||
<div className="relative">
|
||||
<div className="w-20 h-20 rounded-full flex items-center justify-center text-white text-3xl font-bold" style={{ background: getAvatarGradient(incomingCall.callerId, incomingCall.callerName).gradient }}>
|
||||
{incomingCall.callerName.charAt(0).toUpperCase()}
|
||||
<div className="w-20 h-20 rounded-full flex items-center justify-center text-white text-3xl font-bold" style={{ background: getAvatarGradient(callerAvatarId, callerBaseName).gradient }}>
|
||||
{callerBaseName.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
{/* Ringing phone icon */}
|
||||
<div className="absolute -bottom-1 -right-1 w-7 h-7 rounded-full bg-status-online flex items-center justify-center">
|
||||
@@ -68,7 +78,7 @@ export function IncomingCallModal() {
|
||||
|
||||
{/* Caller info */}
|
||||
<div className="text-center">
|
||||
<h3 className="text-[20px] font-bold text-txt-primary">{incomingCall.callerName}</h3>
|
||||
<h3 className="text-[20px] font-bold text-txt-primary">{callerBaseName}</h3>
|
||||
<p className="text-[14px] text-txt-tertiary mt-1">Incoming Voice Call...</p>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -351,7 +351,7 @@ export function PictureInPicture() {
|
||||
<Avatar
|
||||
name={displayParticipant.username}
|
||||
size={64}
|
||||
userId={displayParticipant.userId}
|
||||
userId={displayParticipant.homeUserId ?? displayParticipant.userId}
|
||||
/>
|
||||
{speakingParticipantIds.has(displayParticipant.identity) && (
|
||||
<div className="absolute -inset-1 rounded-full ring-2 ring-status-online animate-pulse" />
|
||||
|
||||
Reference in New Issue
Block a user