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
@@ -28,6 +28,8 @@ import type {
|
||||
InstanceStreamingLimits,
|
||||
InstanceInfoResponse,
|
||||
VerifyPasswordResponse,
|
||||
ExploreServer,
|
||||
JoinRequest,
|
||||
} from '@backspace/shared';
|
||||
|
||||
export class BackspaceApiClient {
|
||||
@@ -115,6 +117,15 @@ export class BackspaceApiClient {
|
||||
info: () => Promise<InstanceInfoResponse>;
|
||||
};
|
||||
|
||||
readonly explore: {
|
||||
list: (q?: string, limit?: number, offset?: number) => Promise<{ servers: ExploreServer[]; total: number; discoveryEnabled: boolean }>;
|
||||
publicJoin: (serverId: string) => Promise<ServerWithChannelsAndMembers>;
|
||||
requestJoin: (serverId: string, message?: string) => Promise<JoinRequest>;
|
||||
getJoinRequests: (serverId: string, status?: string) => Promise<{ requests: JoinRequest[] }>;
|
||||
decideJoinRequest: (serverId: string, requestId: string, action: 'accept' | 'decline') => Promise<JoinRequest>;
|
||||
myJoinRequests: (status?: string) => Promise<{ requests: JoinRequest[] }>;
|
||||
};
|
||||
|
||||
constructor(baseUrl: string, getToken: () => string | null) {
|
||||
async function request<T>(
|
||||
method: string,
|
||||
@@ -287,6 +298,34 @@ export class BackspaceApiClient {
|
||||
this.instance = {
|
||||
info: () => request<InstanceInfoResponse>('GET', '/instance/info', undefined, false),
|
||||
};
|
||||
|
||||
this.explore = {
|
||||
list: (q?: string, limit = 50, offset = 0) => {
|
||||
const params = new URLSearchParams();
|
||||
if (q) params.set('q', q);
|
||||
params.set('limit', String(limit));
|
||||
params.set('offset', String(offset));
|
||||
return request<{ servers: ExploreServer[]; total: number; discoveryEnabled: boolean }>(
|
||||
'GET', `/servers/explore?${params}`
|
||||
);
|
||||
},
|
||||
publicJoin: (serverId: string) =>
|
||||
request<ServerWithChannelsAndMembers>('POST', `/servers/${serverId}/public-join`),
|
||||
requestJoin: (serverId: string, message?: string) =>
|
||||
request<JoinRequest>('POST', `/servers/${serverId}/request-join`, message ? { message } : {}),
|
||||
getJoinRequests: (serverId: string, status?: string) => {
|
||||
const params = new URLSearchParams();
|
||||
if (status) params.set('status', status);
|
||||
return request<{ requests: JoinRequest[] }>('GET', `/servers/${serverId}/join-requests?${params}`);
|
||||
},
|
||||
decideJoinRequest: (serverId: string, requestId: string, action: 'accept' | 'decline') =>
|
||||
request<JoinRequest>('PATCH', `/servers/${serverId}/join-requests/${requestId}`, { action }),
|
||||
myJoinRequests: (status?: string) => {
|
||||
const params = new URLSearchParams();
|
||||
if (status) params.set('status', status);
|
||||
return request<{ requests: JoinRequest[] }>('GET', `/users/@me/join-requests?${params}`);
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -268,7 +268,7 @@ function handleEvent(origin: string, event: ServerEvent): void {
|
||||
createdAt: event.message.createdAt,
|
||||
members: event.message.user ? [event.message.user] : [],
|
||||
lastMessage: event.message,
|
||||
});
|
||||
}, origin);
|
||||
} else {
|
||||
const updatedDms = currentDmChannels.map(dm =>
|
||||
dm.id === event.message.dmChannelId
|
||||
@@ -388,7 +388,7 @@ function handleEvent(origin: string, event: ServerEvent): void {
|
||||
|
||||
case 'dm_channel_created':
|
||||
if (!isHome) break;
|
||||
addDmChannel(event.dmChannel);
|
||||
addDmChannel(event.dmChannel, origin);
|
||||
break;
|
||||
|
||||
case 'dm_channel_closed':
|
||||
|
||||
@@ -0,0 +1,144 @@
|
||||
import { create } from 'zustand';
|
||||
import type { ExploreServer, JoinRequest, ServerWithChannelsAndMembers } from '@backspace/shared';
|
||||
import { api } from '../api/client';
|
||||
import { useInstanceStore } from './instanceStore';
|
||||
import { useServerStore } from './serverStore';
|
||||
|
||||
// ─── Types ──────────────────────────────────────────────────────────────────
|
||||
|
||||
export interface TaggedExploreServer extends ExploreServer {
|
||||
_instanceOrigin: string; // '' = home instance
|
||||
}
|
||||
|
||||
interface ExploreState {
|
||||
servers: TaggedExploreServer[];
|
||||
myRequests: JoinRequest[];
|
||||
searchQuery: string;
|
||||
isLoading: boolean;
|
||||
discoveryEnabled: boolean;
|
||||
error: string | null;
|
||||
|
||||
fetchServers: (query?: string) => Promise<void>;
|
||||
fetchMyRequests: () => Promise<void>;
|
||||
publicJoin: (server: TaggedExploreServer) => Promise<ServerWithChannelsAndMembers>;
|
||||
requestJoin: (server: TaggedExploreServer, message?: string) => Promise<JoinRequest>;
|
||||
setSearchQuery: (q: string) => void;
|
||||
reset: () => void;
|
||||
}
|
||||
|
||||
// ─── Helpers ────────────────────────────────────────────────────────────────
|
||||
|
||||
function getApiForOrigin(origin: string) {
|
||||
if (!origin) return api;
|
||||
const instance = useInstanceStore.getState().instances.find(i => i.origin === origin);
|
||||
return instance?.api ?? api;
|
||||
}
|
||||
|
||||
// ─── Store ──────────────────────────────────────────────────────────────────
|
||||
|
||||
export const useExploreStore = create<ExploreState>((set, get) => ({
|
||||
servers: [],
|
||||
myRequests: [],
|
||||
searchQuery: '',
|
||||
isLoading: false,
|
||||
discoveryEnabled: true,
|
||||
error: null,
|
||||
|
||||
fetchServers: async (query?: string) => {
|
||||
set({ isLoading: true, error: null });
|
||||
|
||||
try {
|
||||
const instances = useInstanceStore.getState().instances;
|
||||
const connectedInstances = instances.filter(i => i.status === 'connected');
|
||||
|
||||
// Fetch from home + all connected remote instances in parallel
|
||||
const results = await Promise.allSettled([
|
||||
api.explore.list(query).then(res => ({ ...res, origin: '' })),
|
||||
...connectedInstances.map(inst =>
|
||||
inst.api.explore.list(query).then(res => ({ ...res, origin: inst.origin }))
|
||||
),
|
||||
]);
|
||||
|
||||
const allServers: TaggedExploreServer[] = [];
|
||||
const seen = new Set<string>(); // dedup by serverId+origin
|
||||
let homeDiscoveryEnabled = true;
|
||||
|
||||
for (const result of results) {
|
||||
if (result.status !== 'fulfilled') continue;
|
||||
|
||||
const { servers, discoveryEnabled, origin } = result.value;
|
||||
|
||||
// Track home instance discovery state
|
||||
if (!origin) {
|
||||
homeDiscoveryEnabled = discoveryEnabled;
|
||||
}
|
||||
|
||||
for (const server of servers) {
|
||||
const key = `${server.id}:${origin}`;
|
||||
if (seen.has(key)) continue;
|
||||
seen.add(key);
|
||||
allServers.push({ ...server, _instanceOrigin: origin });
|
||||
}
|
||||
}
|
||||
|
||||
set({
|
||||
servers: allServers,
|
||||
discoveryEnabled: homeDiscoveryEnabled,
|
||||
isLoading: false,
|
||||
});
|
||||
} catch (err) {
|
||||
set({
|
||||
isLoading: false,
|
||||
error: err instanceof Error ? err.message : 'Failed to fetch servers',
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
fetchMyRequests: async () => {
|
||||
try {
|
||||
const { requests } = await api.explore.myJoinRequests('pending');
|
||||
set({ myRequests: requests });
|
||||
} catch {
|
||||
// Non-critical — silently fail
|
||||
}
|
||||
},
|
||||
|
||||
publicJoin: async (server: TaggedExploreServer) => {
|
||||
const client = getApiForOrigin(server._instanceOrigin);
|
||||
const fullServer = await client.explore.publicJoin(server.id);
|
||||
|
||||
// Add to server store
|
||||
useServerStore.getState().addServerFromReady(server._instanceOrigin, fullServer);
|
||||
|
||||
// Remove from explore list
|
||||
set((state) => ({
|
||||
servers: state.servers.filter(s =>
|
||||
!(s.id === server.id && s._instanceOrigin === server._instanceOrigin)
|
||||
),
|
||||
}));
|
||||
|
||||
return fullServer;
|
||||
},
|
||||
|
||||
requestJoin: async (server: TaggedExploreServer, message?: string) => {
|
||||
const client = getApiForOrigin(server._instanceOrigin);
|
||||
const request = await client.explore.requestJoin(server.id, message);
|
||||
|
||||
set((state) => ({
|
||||
myRequests: [...state.myRequests, request],
|
||||
}));
|
||||
|
||||
return request;
|
||||
},
|
||||
|
||||
setSearchQuery: (q: string) => set({ searchQuery: q }),
|
||||
|
||||
reset: () => set({
|
||||
servers: [],
|
||||
myRequests: [],
|
||||
searchQuery: '',
|
||||
isLoading: false,
|
||||
discoveryEnabled: true,
|
||||
error: null,
|
||||
}),
|
||||
}));
|
||||
@@ -140,13 +140,12 @@ export const useInstanceStore = create<InstanceState>((set, get) => ({
|
||||
const tempClient = createApiClient(origin, () => null);
|
||||
|
||||
let response: AuthResponse | null = null;
|
||||
let finalUsername = currentUser.username;
|
||||
let needsLogin = false;
|
||||
const finalUsername = `${currentUser.username}@${homeInstance}`;
|
||||
|
||||
// 2a: Attempt registration with plain username
|
||||
// 2a: Attempt registration with namespaced username
|
||||
try {
|
||||
response = await tempClient.auth.register({
|
||||
username: currentUser.username,
|
||||
username: finalUsername,
|
||||
password,
|
||||
displayName: displayName || currentUser.displayName || undefined,
|
||||
homeInstance,
|
||||
@@ -154,52 +153,29 @@ export const useInstanceStore = create<InstanceState>((set, get) => ({
|
||||
});
|
||||
} catch (err) {
|
||||
const message = (err as Error).message;
|
||||
if (message.includes('already taken') || message.includes('409')) {
|
||||
// Username collision — try domain-qualified username
|
||||
try {
|
||||
finalUsername = `${currentUser.username}@${homeInstance}`;
|
||||
response = await tempClient.auth.register({
|
||||
username: finalUsername,
|
||||
password,
|
||||
displayName: displayName || currentUser.displayName || undefined,
|
||||
homeInstance,
|
||||
homeUserId: currentUser.id,
|
||||
});
|
||||
} catch (err2) {
|
||||
const msg2 = (err2 as Error).message;
|
||||
if (msg2.includes('already taken') || msg2.includes('409')) {
|
||||
// Both usernames exist on remote — fall through to login
|
||||
needsLogin = true;
|
||||
} else {
|
||||
throw err2;
|
||||
}
|
||||
}
|
||||
} else if (message.includes('Registration is currently closed') || message.includes('403')) {
|
||||
// Registration closed on remote — fall through to login
|
||||
needsLogin = true;
|
||||
if (message.includes('already taken') || message.includes('409') ||
|
||||
message.includes('Registration is currently closed') || message.includes('403')) {
|
||||
// Already registered or registration closed — fall through to login
|
||||
} else {
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
// 2b: If registration didn't work, try login with the same password
|
||||
if (needsLogin) {
|
||||
// Try plain username first, then domain-qualified
|
||||
// 2b: If registration didn't work, try login
|
||||
if (!response) {
|
||||
try {
|
||||
response = await tempClient.auth.login({
|
||||
username: currentUser.username,
|
||||
username: finalUsername,
|
||||
password,
|
||||
});
|
||||
finalUsername = currentUser.username;
|
||||
} catch {
|
||||
// Namespaced login failed — try legacy plain username as fallback
|
||||
try {
|
||||
finalUsername = `${currentUser.username}@${homeInstance}`;
|
||||
response = await tempClient.auth.login({
|
||||
username: finalUsername,
|
||||
username: currentUser.username,
|
||||
password,
|
||||
});
|
||||
} catch {
|
||||
// Both login attempts failed — different password scenario
|
||||
throw new DifferentPasswordError(currentUser.username);
|
||||
}
|
||||
}
|
||||
@@ -390,6 +366,12 @@ export const useInstanceStore = create<InstanceState>((set, get) => ({
|
||||
}
|
||||
}
|
||||
|
||||
// Backfill cached username if stale after server-side migration
|
||||
// (e.g. "test" was renamed to "test@nova.ddns.net")
|
||||
if (user.username !== cachedEntry.username) {
|
||||
cachedEntry.username = user.username;
|
||||
}
|
||||
|
||||
const connectedInstance: ConnectedInstance = {
|
||||
origin,
|
||||
label,
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { create } from 'zustand';
|
||||
import type { Server, Channel, MemberWithUser, ServerWithChannelsAndMembers, Role, ServerFolder, DmChannel, User } from '@backspace/shared';
|
||||
import type { Server, Channel, MemberWithUser, ServerWithChannelsAndMembers, Role, ServerFolder, DmChannel, User, UpdateServerRequest } from '@backspace/shared';
|
||||
import { api, BackspaceApiClient } from '../api/client';
|
||||
import { resolveAssetUrl, normalizeUserAssets } from '../utils/assetUrls';
|
||||
|
||||
@@ -39,7 +39,7 @@ interface ServerState {
|
||||
setMembers: (members: MemberWithUser[]) => void;
|
||||
setRoles: (roles: Role[]) => void;
|
||||
setDmChannels: (channels: DmChannel[]) => void;
|
||||
addDmChannel: (channel: DmChannel) => void;
|
||||
addDmChannel: (channel: DmChannel, origin?: string) => void;
|
||||
removeDmChannel: (id: string) => void;
|
||||
addDmMember: (dmChannelId: string, user: User) => void;
|
||||
removeDmMember: (dmChannelId: string, userId: string) => void;
|
||||
@@ -48,7 +48,7 @@ interface ServerState {
|
||||
loadServerDetail: (serverId: string) => Promise<void>;
|
||||
loadDmChannels: () => Promise<void>;
|
||||
createServer: (name: string, icon?: string) => Promise<Server>;
|
||||
updateServer: (serverId: string, data: { name?: string; icon?: string }) => Promise<void>;
|
||||
updateServer: (serverId: string, data: UpdateServerRequest) => Promise<void>;
|
||||
deleteServer: (serverId: string) => Promise<void>;
|
||||
joinServer: (serverId: string, inviteCode: string) => Promise<void>;
|
||||
joinByCode: (inviteCode: string, origin?: string) => Promise<Server>;
|
||||
@@ -61,6 +61,7 @@ interface ServerState {
|
||||
addMember: (member: MemberWithUser) => void;
|
||||
removeMember: (userId: string) => void;
|
||||
populateFromReady: (origin: string, servers: ServerWithChannelsAndMembers[], folders?: ServerFolder[], dmChannels?: DmChannel[]) => void;
|
||||
addServerFromReady: (origin: string, server: ServerWithChannelsAndMembers) => void;
|
||||
removeInstanceServers: (origin: string) => void;
|
||||
}
|
||||
|
||||
@@ -85,9 +86,16 @@ export const useServerStore = create<ServerState>((set, get) => ({
|
||||
setRoles: (roles) => set({ roles }),
|
||||
setDmChannels: (dmChannels) => set({ dmChannels }),
|
||||
|
||||
addDmChannel: (channel) => set((state) => ({
|
||||
dmChannels: [channel, ...state.dmChannels.filter(c => c.id !== channel.id)]
|
||||
})),
|
||||
addDmChannel: (channel, origin?: string) => set((state) => {
|
||||
const channelOriginMap = new Map(state.channelOriginMap);
|
||||
if (origin !== undefined) {
|
||||
channelOriginMap.set(channel.id, origin);
|
||||
}
|
||||
return {
|
||||
dmChannels: [channel, ...state.dmChannels.filter(c => c.id !== channel.id)],
|
||||
channelOriginMap,
|
||||
};
|
||||
}),
|
||||
|
||||
removeDmChannel: (id) => set((state) => ({
|
||||
dmChannels: state.dmChannels.filter(c => c.id !== id)
|
||||
@@ -169,7 +177,7 @@ export const useServerStore = create<ServerState>((set, get) => ({
|
||||
return server;
|
||||
},
|
||||
|
||||
updateServer: async (serverId: string, data: { name?: string; icon?: string }) => {
|
||||
updateServer: async (serverId: string, data: UpdateServerRequest) => {
|
||||
const updated = await api.servers.update(serverId, data);
|
||||
set((state) => ({
|
||||
servers: state.servers.map(s => s.id === serverId ? { ...s, ...updated } : s),
|
||||
@@ -284,6 +292,8 @@ export const useServerStore = create<ServerState>((set, get) => ({
|
||||
icon: s.icon,
|
||||
ownerId: s.ownerId,
|
||||
inviteCode: s.inviteCode,
|
||||
visibility: s.visibility ?? 'private' as const,
|
||||
description: s.description ?? null,
|
||||
createdAt: s.createdAt,
|
||||
_instanceOrigin: origin,
|
||||
}));
|
||||
@@ -353,6 +363,7 @@ export const useServerStore = create<ServerState>((set, get) => ({
|
||||
const dms = isHome ? (dmChannels || []) : get().dmChannels;
|
||||
if (isHome) {
|
||||
for (const dm of dms) {
|
||||
channelOriginMap.set(dm.id, origin);
|
||||
if (dm.lastMessage?.id) {
|
||||
channelLastMessageIds.set(dm.id, dm.lastMessage.id);
|
||||
}
|
||||
@@ -377,6 +388,49 @@ export const useServerStore = create<ServerState>((set, get) => ({
|
||||
set(update as any);
|
||||
},
|
||||
|
||||
addServerFromReady: (origin: string, server: ServerWithChannelsAndMembers) => {
|
||||
const tagged: TaggedServer = {
|
||||
id: server.id,
|
||||
name: server.name,
|
||||
icon: server.icon,
|
||||
ownerId: server.ownerId,
|
||||
inviteCode: server.inviteCode,
|
||||
visibility: server.visibility,
|
||||
description: server.description,
|
||||
createdAt: server.createdAt,
|
||||
_instanceOrigin: origin,
|
||||
};
|
||||
|
||||
const channelToServerMap = new Map(get().channelToServerMap);
|
||||
const channelLastMessageIds = new Map(get().channelLastMessageIds);
|
||||
const serverPermissions = new Map(get().serverPermissions);
|
||||
const channelPermissions = new Map(get().channelPermissions);
|
||||
const channelOriginMap = new Map(get().channelOriginMap);
|
||||
|
||||
if (server.myPermissions) {
|
||||
serverPermissions.set(server.id, server.myPermissions);
|
||||
}
|
||||
for (const ch of server.channels) {
|
||||
channelToServerMap.set(ch.id, server.id);
|
||||
channelOriginMap.set(ch.id, origin);
|
||||
if (ch.lastMessageId) {
|
||||
channelLastMessageIds.set(ch.id, ch.lastMessageId);
|
||||
}
|
||||
if (ch.myPermissions) {
|
||||
channelPermissions.set(ch.id, ch.myPermissions);
|
||||
}
|
||||
}
|
||||
|
||||
set((state) => ({
|
||||
servers: [...state.servers.filter(s => s.id !== server.id), tagged],
|
||||
channelToServerMap,
|
||||
channelLastMessageIds,
|
||||
serverPermissions,
|
||||
channelPermissions,
|
||||
channelOriginMap,
|
||||
}));
|
||||
},
|
||||
|
||||
removeInstanceServers: (origin: string) => {
|
||||
set((state) => {
|
||||
const remainingServers = state.servers.filter(s => s._instanceOrigin !== origin);
|
||||
|
||||
@@ -18,6 +18,7 @@ const DEFAULT_LIMITS: InstanceStreamingLimits = {
|
||||
allowedFramerates: [30, 45, 60],
|
||||
maxResolution: 1080,
|
||||
maxFramerate: 60,
|
||||
discoveryEnabled: true,
|
||||
};
|
||||
|
||||
export function getStreamingLimits(): InstanceStreamingLimits {
|
||||
|
||||
@@ -28,6 +28,7 @@ interface UIState {
|
||||
modalData: Record<string, unknown>;
|
||||
isMobile: boolean;
|
||||
showDms: boolean;
|
||||
showExplore: boolean;
|
||||
imagePreviewUrl: string | null;
|
||||
userProfilePopout: {
|
||||
user: User | null;
|
||||
@@ -40,6 +41,7 @@ interface UIState {
|
||||
closeModal: () => void;
|
||||
setIsMobile: (isMobile: boolean) => void;
|
||||
setShowDms: (show: boolean) => void;
|
||||
setShowExplore: (show: boolean) => void;
|
||||
openImagePreview: (url: string) => void;
|
||||
closeImagePreview: () => void;
|
||||
openUserProfile: (user: User, position: { top: number; left: number }) => void;
|
||||
@@ -64,6 +66,7 @@ export const useUIStore = create<UIState>()(
|
||||
modalData: {},
|
||||
isMobile: false,
|
||||
showDms: false,
|
||||
showExplore: false,
|
||||
imagePreviewUrl: null,
|
||||
userProfilePopout: {
|
||||
user: null,
|
||||
@@ -89,7 +92,8 @@ export const useUIStore = create<UIState>()(
|
||||
}
|
||||
},
|
||||
|
||||
setShowDms: (show) => set({ showDms: show }),
|
||||
setShowDms: (show) => set({ showDms: show, ...(show ? { showExplore: false } : {}) }),
|
||||
setShowExplore: (show) => set({ showExplore: show, ...(show ? { showDms: false } : {}) }),
|
||||
|
||||
openImagePreview: (url) => set({ activeModal: 'imagePreview', imagePreviewUrl: url }),
|
||||
closeImagePreview: () => set({ activeModal: null, imagePreviewUrl: null }),
|
||||
|
||||
@@ -1,5 +1,16 @@
|
||||
import type { User } from '@backspace/shared';
|
||||
|
||||
/**
|
||||
* Splits a potentially federated username into base name and domain.
|
||||
* "youruser@nova.ddns.net" → { baseName: "youruser", domain: "nova.ddns.net" }
|
||||
* "youruser" → { baseName: "youruser", domain: null }
|
||||
*/
|
||||
export function parseFederatedUsername(username: string): { baseName: string; domain: string | null } {
|
||||
const atIndex = username.indexOf('@');
|
||||
if (atIndex === -1) return { baseName: username, domain: null };
|
||||
return { baseName: username.slice(0, atIndex), domain: username.slice(atIndex + 1) };
|
||||
}
|
||||
|
||||
/**
|
||||
* Stateless check: is `user` a replicated alias of `homeUser`?
|
||||
* Uses the immutable (username, homeInstance) composite key —
|
||||
@@ -16,8 +27,8 @@ export function isSelf(
|
||||
if (!user.homeInstance) return false;
|
||||
if (user.homeInstance !== window.location.host) return false;
|
||||
// Username: "youruser" or "youruser@nova.ddns.net" → base must match
|
||||
const baseUsername = user.username.split('@')[0];
|
||||
return baseUsername === homeUser.username;
|
||||
const { baseName } = parseFederatedUsername(user.username);
|
||||
return baseName === homeUser.username;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user