feat(client-federation): user-view cache for cross-instance DM render
Fixes a render bug where a federated user (e.g. axel@nova) appeared with the federation globe icon and a broken avatar when viewed on his own home instance. Root cause: `populateFromReady` is first-wins by federatedId and discards the entire skipped DM payload — including its `members` array — so when a sibling instance's ready arrived first, the home instance's view of every shared user was dropped on the floor. Adds a render-only `userViews` cache that mirrors the `dmAlternatives` philosophy: information from skipped ready payloads is preserved for rendering. Every wire surface that delivers a User upserts into the cache regardless of dedup outcome; render sites read through a Zustand selector hook to surface the home view when one is loaded. The DM channel ingestion race is left untouched — the existing no-flapping invariant on origin reconnect is intentional and load-bearing for failover. Layered changes: - `identity.ts`: `normalizeOriginToHost`, `canonicalUserKey`, `isDeliveryFromHome`, `isFederationGlobeApplicable` — single helpers for origin/host normalization and the home/stub tier decision. - `spaceStore.ts`: `userViews` Map, `UserViewEntry` type, `upsertUserView` action with the home-wins preference rule, prune by `deliveredBy` in `removeInstanceSpaces` (mirrors `dmAlternatives` cleanup), `reset` clears. - `userViewLookup.ts`: `useCanonicalUserView` (Zustand selector hook for React) + `getCanonicalUserView` (sync getter for non-React paths). Render reactivity is structural via the selector, not coincidence on legacy update paths. - `populateFromReady` upsert pass runs BEFORE the federatedId dedup so members of skipped DMs still reach the cache. - WS handlers (dm_message_*, message_*, user_updated, member_joined, friend_request_*, dm_channel_created, dm_member_added) and REST hydrators (socialStore, discoverStore, mutuals) feed the cache with their delivering origin. - Render-site routing through `useCanonicalUserView` at every audited user-rendering site (sidebar, header, search, message bubble, reply chips, profile popout/modal, group settings, voice tiles, mention chips, member lists, friends, invites). Self-rendering sites compose alongside via existing `isSelf`/`resolveDisplayIdentity`. - Globe predicate hoisted to `isFederationGlobeApplicable` and applied at three sites, gating on `domain !== window.location.host` so we never show the globe for users whose home IS our own. Tests: 31 new unit tests across `identity`, `userViews` store, and `userViewLookup`. Full suite 276/276. Docs: `client-federation.md` §3 gains a "User View Cache" section parallel to "DM Origin Failover"; `dm-system.md` notes the new store action and WS handler upserts. Bug 3 (federation profile-sync gap — orbit's stale profile data on nova-Axel after a clear/color-change on nova never propagated) remains open. The user-view cache routes around it for the common case (home instance is connected), but the underlying S2S relay gap is its own diagnosis and follows in a separate branch.
This commit is contained in:
Jannis Braun
@@ -3,7 +3,8 @@ import { createPortal } from 'react-dom';
|
||||
import { useFloatingPosition } from '../../hooks/useFloatingPosition';
|
||||
import { isDmChannel, getChannelOrigin, getApiForOrigin } from '../../stores/spaceStore';
|
||||
import { Avatar } from '../ui/Avatar';
|
||||
import type { MessageWithUser, DmMessageWithUser } from '@backspace/shared';
|
||||
import { useCanonicalUserView } from '../../utils/userViewLookup';
|
||||
import type { MessageWithUser, DmMessageWithUser, User } from '@backspace/shared';
|
||||
|
||||
type AnyMessage = MessageWithUser | DmMessageWithUser;
|
||||
|
||||
@@ -40,6 +41,58 @@ function highlightMatch(text: string, query: string): React.ReactNode {
|
||||
);
|
||||
}
|
||||
|
||||
const _FALLBACK_USER = { id: '', username: '', createdAt: 0, isAdmin: false, replicatedInstances: [] } as unknown as User;
|
||||
|
||||
function SearchResultRow({
|
||||
msg,
|
||||
query,
|
||||
onJumpToMessage,
|
||||
}: {
|
||||
msg: AnyMessage;
|
||||
query: string;
|
||||
onJumpToMessage: (id: string) => void;
|
||||
}) {
|
||||
const canonical = useCanonicalUserView(msg.user ?? _FALLBACK_USER);
|
||||
const displayName = canonical.displayName ?? canonical.username ?? '?';
|
||||
const avatar = msg.user ? canonical.avatar : undefined;
|
||||
return (
|
||||
<button
|
||||
onClick={() => onJumpToMessage(msg.id)}
|
||||
className="w-full px-3 py-2.5 hover:bg-interactive-hover transition-colors text-left flex items-start gap-2.5 group/result"
|
||||
>
|
||||
<div className="flex-shrink-0 mt-0.5">
|
||||
<Avatar
|
||||
src={avatar}
|
||||
name={displayName}
|
||||
size={28}
|
||||
user={msg.user ? canonical : undefined}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-baseline gap-1.5">
|
||||
<span className="text-[13px] font-semibold text-txt-primary truncate">
|
||||
{displayName}
|
||||
</span>
|
||||
<span className="text-[10px] text-txt-tertiary flex-shrink-0">
|
||||
{formatTime(msg.createdAt)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-[13px] text-txt-secondary leading-[1.4] line-clamp-2 mt-0.5">
|
||||
{highlightMatch(msg.content ?? '', query)}
|
||||
</div>
|
||||
{msg.attachments && msg.attachments.length > 0 && (
|
||||
<div className="flex items-center gap-1 mt-1 text-[11px] text-txt-tertiary">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H9v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S6 2.79 6 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z" />
|
||||
</svg>
|
||||
{msg.attachments.length} attachment{msg.attachments.length !== 1 ? 's' : ''}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export function SearchPopover({ open, onClose, anchorRef, channelId, isDm, onJumpToMessage }: SearchPopoverProps) {
|
||||
const popoverRef = useRef<HTMLDivElement>(null);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
@@ -277,41 +330,12 @@ export function SearchPopover({ open, onClose, anchorRef, channelId, isDm, onJum
|
||||
{totalCount} result{totalCount !== 1 ? 's' : ''}
|
||||
</div>
|
||||
{results.map((msg) => (
|
||||
<button
|
||||
<SearchResultRow
|
||||
key={msg.id}
|
||||
onClick={() => onJumpToMessage(msg.id)}
|
||||
className="w-full px-3 py-2.5 hover:bg-interactive-hover transition-colors text-left flex items-start gap-2.5 group/result"
|
||||
>
|
||||
<div className="flex-shrink-0 mt-0.5">
|
||||
<Avatar
|
||||
src={msg.user?.avatar}
|
||||
name={msg.user?.displayName ?? msg.user?.username ?? '?'}
|
||||
size={28}
|
||||
user={msg.user ?? undefined}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-baseline gap-1.5">
|
||||
<span className="text-[13px] font-semibold text-txt-primary truncate">
|
||||
{msg.user?.displayName ?? msg.user?.username ?? 'Unknown'}
|
||||
</span>
|
||||
<span className="text-[10px] text-txt-tertiary flex-shrink-0">
|
||||
{formatTime(msg.createdAt)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-[13px] text-txt-secondary leading-[1.4] line-clamp-2 mt-0.5">
|
||||
{highlightMatch(msg.content ?? '', query)}
|
||||
</div>
|
||||
{msg.attachments && msg.attachments.length > 0 && (
|
||||
<div className="flex items-center gap-1 mt-1 text-[11px] text-txt-tertiary">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H9v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S6 2.79 6 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z" />
|
||||
</svg>
|
||||
{msg.attachments.length} attachment{msg.attachments.length !== 1 ? 's' : ''}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
msg={msg}
|
||||
query={query}
|
||||
onJumpToMessage={onJumpToMessage}
|
||||
/>
|
||||
))}
|
||||
{results.length < totalCount && (
|
||||
<div className="px-3 py-2 border-t border-white/[0.07]">
|
||||
|
||||
Reference in New Issue
Block a user