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
@@ -5,9 +5,66 @@ import { useActivityStore } from '../../stores/activityStore';
|
||||
import { Avatar } from '../ui/Avatar';
|
||||
import { Username } from '../ui/Username';
|
||||
import { ActivityCard, hasRichActivity, getActivityAccentClass } from '../ui/ActivityCard';
|
||||
import type { Friend } from '@backspace/shared';
|
||||
import type { Friend, Activity, User } from '@backspace/shared';
|
||||
import { getPrimaryActivity } from '@backspace/shared/src/activities.js';
|
||||
import { parseFederatedUsername } from '../../utils/identity';
|
||||
import { parseFederatedUsername, isFederationGlobeApplicable } from '../../utils/identity';
|
||||
import { useCanonicalUserView } from '../../utils/userViewLookup';
|
||||
|
||||
function ActivityFriendRow({
|
||||
friend,
|
||||
isOffline,
|
||||
activities,
|
||||
isRichActivity,
|
||||
accentClass,
|
||||
onClickFriend,
|
||||
}: {
|
||||
friend: Friend;
|
||||
isOffline: boolean;
|
||||
activities: Activity[];
|
||||
isRichActivity: boolean;
|
||||
accentClass: string;
|
||||
onClickFriend: (e: React.MouseEvent, friend: Friend) => void;
|
||||
}) {
|
||||
const canonical = useCanonicalUserView(friend as unknown as User);
|
||||
const { baseName } = parseFederatedUsername(canonical.username);
|
||||
const friendDisplayName = canonical.displayName ?? baseName;
|
||||
|
||||
const rowClass = isRichActivity
|
||||
? `flex items-center gap-2.5 px-2.5 py-2 rounded-[10px] mb-1 cursor-pointer transition-colors glass-pill border-l-2 ${accentClass}`
|
||||
: 'flex items-center gap-2.5 px-2 py-1.5 rounded-[4px] hover:bg-interactive-hover cursor-pointer group transition-colors';
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={(e) => onClickFriend(e, friend)}
|
||||
className={rowClass}
|
||||
>
|
||||
<Avatar
|
||||
src={canonical.avatar}
|
||||
name={friendDisplayName}
|
||||
size={32}
|
||||
status={isOffline ? 'offline' : canonical.status}
|
||||
className={isOffline ? 'opacity-60' : undefined}
|
||||
userId={canonical.homeUserId ?? canonical.id}
|
||||
avatarColor={canonical.avatarColor}
|
||||
/>
|
||||
<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'}`}
|
||||
/>
|
||||
{!isOffline && isFederationGlobeApplicable(canonical) && (
|
||||
<div className="text-[10px] leading-[1.3] text-txt-tertiary truncate opacity-60">@{parseFederatedUsername(canonical.username).domain}</div>
|
||||
)}
|
||||
{!isOffline && (
|
||||
<ActivityCard
|
||||
activities={activities}
|
||||
fallbackCustomStatus={canonical.customStatus}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ActivityPanel() {
|
||||
const friends = useSocialStore((s) => s.friends);
|
||||
@@ -74,48 +131,20 @@ export function ActivityPanel() {
|
||||
};
|
||||
|
||||
const renderFriend = (friend: Friend, isOffline = false) => {
|
||||
const { baseName, domain } = parseFederatedUsername(friend.username);
|
||||
const friendDisplayName = friend.displayName ?? baseName;
|
||||
const activities = userActivities.get(friend.homeUserId ?? friend.id) ?? [];
|
||||
const isRichActivity = !isOffline && hasRichActivity(activities);
|
||||
const primary = getPrimaryActivity(activities);
|
||||
const accentClass = primary ? getActivityAccentClass(primary.type) : '';
|
||||
|
||||
const rowClass = isRichActivity
|
||||
? `flex items-center gap-2.5 px-2.5 py-2 rounded-[10px] mb-1 cursor-pointer transition-colors glass-pill border-l-2 ${accentClass}`
|
||||
: 'flex items-center gap-2.5 px-2 py-1.5 rounded-[4px] hover:bg-interactive-hover cursor-pointer group transition-colors';
|
||||
|
||||
return (
|
||||
<div
|
||||
<ActivityFriendRow
|
||||
key={friend.id}
|
||||
onClick={(e) => handleFriendClick(e, friend)}
|
||||
className={rowClass}
|
||||
>
|
||||
<Avatar
|
||||
src={friend.avatar}
|
||||
name={friendDisplayName}
|
||||
size={32}
|
||||
status={isOffline ? 'offline' : friend.status}
|
||||
className={isOffline ? 'opacity-60' : undefined}
|
||||
userId={friend.homeUserId ?? friend.id}
|
||||
avatarColor={friend.avatarColor}
|
||||
/>
|
||||
<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 && (
|
||||
<ActivityCard
|
||||
activities={activities}
|
||||
fallbackCustomStatus={friend.customStatus}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
friend={friend}
|
||||
isOffline={isOffline}
|
||||
activities={activities}
|
||||
isRichActivity={isRichActivity}
|
||||
accentClass={accentClass}
|
||||
onClickFriend={handleFriendClick}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,10 +1,34 @@
|
||||
import type { DmChannel, User } from '@backspace/shared';
|
||||
import { Avatar } from '../ui/Avatar';
|
||||
import { Tooltip } from '../ui/Tooltip';
|
||||
import { parseFederatedUsername, isSelf } from '../../utils/identity';
|
||||
import { parseFederatedUsername, isSelf, isFederationGlobeApplicable } from '../../utils/identity';
|
||||
import { useCanonicalUserView } from '../../utils/userViewLookup';
|
||||
import { formatDmTimestamp, formatDmSidebarPreview } from '../../utils/dmFormatters';
|
||||
import { getRejectedPeerOrigins, getAwaitingApprovalPeerOrigins } from '../../hooks/useWebSocket';
|
||||
|
||||
/**
|
||||
* Renders a single avatar slot in the group DM avatar pair.
|
||||
* Extracted as a component so useCanonicalUserView can be called per-slot
|
||||
* (hooks must not be called inside a variable-length .map()).
|
||||
*/
|
||||
function DmGroupAvatarSlot({ member, index }: { member: User; index: number }) {
|
||||
const canonical = useCanonicalUserView(member);
|
||||
const displayName = canonical.displayName ?? parseFederatedUsername(canonical.username).baseName;
|
||||
return (
|
||||
<div
|
||||
className="absolute rounded-full overflow-hidden border-2 border-surface-channel"
|
||||
style={{
|
||||
width: 22, height: 22,
|
||||
left: index * 10,
|
||||
top: index * 6,
|
||||
zIndex: 2 - index,
|
||||
}}
|
||||
>
|
||||
<Avatar src={canonical.avatar} name={displayName} size={22} userId={canonical.homeUserId ?? canonical.id} user={canonical} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function isMemberUnreachable(homeInstance: string | null | undefined): boolean {
|
||||
if (!homeInstance) return false;
|
||||
const normalized = homeInstance.startsWith('http') ? homeInstance : `https://${homeInstance}`;
|
||||
@@ -33,8 +57,15 @@ export function DmListItem({ dm, isActive, isUnread, user, onSelect, onClose, on
|
||||
const isGroup = !!dm.ownerId;
|
||||
if (otherMembers.length === 0 && !isGroup) return null;
|
||||
|
||||
const firstOther = isGroup ? null : otherMembers[0];
|
||||
const { baseName, domain } = parseFederatedUsername(firstOther?.username ?? '');
|
||||
// Route the 1-on-1 partner through the canonical view cache. Group member
|
||||
// avatars are handled per-slot in DmGroupAvatarSlot (hook-in-loop safety).
|
||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||
const rawFirstOther = isGroup ? null : (otherMembers[0] ?? null);
|
||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||
const firstOtherCanonical = useCanonicalUserView(rawFirstOther ?? user);
|
||||
const firstOther = rawFirstOther ? firstOtherCanonical : null;
|
||||
|
||||
const { baseName } = parseFederatedUsername(firstOther?.username ?? '');
|
||||
const displayName = isGroup
|
||||
? (otherMembers.length > 0
|
||||
? otherMembers.map(m => m.displayName ?? parseFederatedUsername(m.username).baseName).join(', ')
|
||||
@@ -126,22 +157,11 @@ export function DmListItem({ dm, isActive, isUnread, user, onSelect, onClose, on
|
||||
{isGroup ? (
|
||||
<div className="relative w-8 h-8 flex-shrink-0">
|
||||
{otherMembers.slice(0, 2).map((m, i) => (
|
||||
<div
|
||||
key={m.id}
|
||||
className="absolute rounded-full overflow-hidden border-2 border-surface-channel"
|
||||
style={{
|
||||
width: 22, height: 22,
|
||||
left: i * 10,
|
||||
top: i * 6,
|
||||
zIndex: 2 - i,
|
||||
}}
|
||||
>
|
||||
<Avatar src={m.avatar} name={m.displayName ?? parseFederatedUsername(m.username).baseName} size={22} userId={m.homeUserId ?? m.id} user={m} />
|
||||
</div>
|
||||
<DmGroupAvatarSlot key={m.id} member={m} index={i} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<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} user={otherMembers[0]} />
|
||||
<Avatar src={firstOther?.avatar} name={firstOther?.displayName ?? parseFederatedUsername(firstOther?.username ?? '').baseName} size={32} status={firstOther?.status as any} userId={firstOther?.homeUserId ?? firstOther?.id} user={firstOther ?? undefined} />
|
||||
)}
|
||||
|
||||
{/* Content */}
|
||||
@@ -150,8 +170,8 @@ export function DmListItem({ dm, isActive, isUnread, user, onSelect, onClose, on
|
||||
<span className={nameClass}>
|
||||
{displayName}
|
||||
</span>
|
||||
{!isGroup && domain && (
|
||||
<Tooltip content={firstOther?.username ?? ''} position="top">
|
||||
{!isGroup && firstOther && isFederationGlobeApplicable(firstOther) && (
|
||||
<Tooltip content={firstOther.username} position="top">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" className={fedBadgeClass}>
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" />
|
||||
</svg>
|
||||
|
||||
@@ -8,8 +8,123 @@ import { useAuthStore } from '../../stores/authStore';
|
||||
import { useUIStore } from '../../stores/uiStore';
|
||||
import { api } from '../../api/client';
|
||||
import { isSelf, parseFederatedUsername } from '../../utils/identity';
|
||||
import { useCanonicalUserView } from '../../utils/userViewLookup';
|
||||
import { useFloatingPosition } from '../../hooks/useFloatingPosition';
|
||||
|
||||
/**
|
||||
* Single slot in the group-avatar stack for the DM search bar dropdown.
|
||||
* Extracted as a component so useCanonicalUserView is called per-slot (hooks
|
||||
* must not be called inside a variable-length .map()).
|
||||
*/
|
||||
function DmSearchGroupAvatarSlot({ member, index }: { member: User; index: number }) {
|
||||
const canonical = useCanonicalUserView(member);
|
||||
const displayName = canonical.displayName ?? parseFederatedUsername(canonical.username).baseName;
|
||||
return (
|
||||
<div
|
||||
className="absolute rounded-full overflow-hidden border-[1.5px] border-surface-channel"
|
||||
style={{
|
||||
width: 18, height: 18,
|
||||
left: index * 8,
|
||||
top: index * 4,
|
||||
zIndex: 2 - index,
|
||||
}}
|
||||
>
|
||||
<Avatar src={canonical.avatar} name={displayName} size={18} userId={canonical.homeUserId ?? canonical.id} user={canonical} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Avatar + display-name row for a user result in the DM search bar.
|
||||
* Extracted as a component so useCanonicalUserView can be called at the top
|
||||
* of a stable component rather than inside a variable-length .map().
|
||||
*/
|
||||
function DmSearchUserRow({ user, isSelected, selectedRef, onClick }: {
|
||||
user: User;
|
||||
isSelected: boolean;
|
||||
selectedRef?: React.Ref<HTMLDivElement>;
|
||||
onClick: () => void;
|
||||
}) {
|
||||
const canonical = useCanonicalUserView(user);
|
||||
const displayName = canonical.displayName ?? canonical.username;
|
||||
return (
|
||||
<div
|
||||
ref={isSelected ? selectedRef : undefined}
|
||||
onClick={onClick}
|
||||
className={`flex items-center gap-2.5 px-2 py-1.5 mx-1 rounded cursor-pointer transition-colors ${
|
||||
isSelected ? 'bg-interactive-selected' : 'hover:bg-interactive-hover'
|
||||
}`}
|
||||
>
|
||||
<Avatar
|
||||
src={canonical.avatar}
|
||||
name={displayName}
|
||||
size={24}
|
||||
status={canonical.status as 'online' | 'idle' | 'dnd' | 'offline' | undefined}
|
||||
userId={canonical.homeUserId ?? canonical.id}
|
||||
/>
|
||||
<div className="flex-1 min-w-0 flex items-center gap-1.5">
|
||||
<span className="text-[14px] text-txt-primary truncate">
|
||||
{displayName}
|
||||
</span>
|
||||
{canonical.displayName && (
|
||||
<span className="text-[12px] text-txt-tertiary truncate">
|
||||
@{canonical.username}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Full row for a DM conversation item in the DM search bar dropdown.
|
||||
* For 1-on-1 DMs, routes the partner through useCanonicalUserView.
|
||||
* For group DMs, delegates per-slot to DmSearchGroupAvatarSlot.
|
||||
*/
|
||||
function DmSearchDmRow({ item, isSelected, selectedRef, onClick }: {
|
||||
item: DmItem;
|
||||
isSelected: boolean;
|
||||
selectedRef?: React.Ref<HTMLDivElement>;
|
||||
onClick: () => void;
|
||||
}) {
|
||||
// For 1-on-1 DMs: canonicalize the single partner. For groups: pass through
|
||||
// unchanged (DmSearchGroupAvatarSlot handles per-slot canonicalization).
|
||||
const rawPartner = !item.isGroup ? (item.otherMembers[0] ?? null) : null;
|
||||
// Call the hook unconditionally — pass a stable fallback (empty User shape)
|
||||
// for group DMs so hooks are always called the same number of times.
|
||||
const FALLBACK_USER = { id: '', username: '', createdAt: 0, isAdmin: false, replicatedInstances: [] } as unknown as User;
|
||||
const canonicalPartner = useCanonicalUserView(rawPartner ?? FALLBACK_USER);
|
||||
const partner = rawPartner ? canonicalPartner : null;
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={isSelected ? selectedRef : undefined}
|
||||
onClick={onClick}
|
||||
className={`flex items-center gap-2.5 px-2 py-1.5 mx-1 rounded cursor-pointer transition-colors ${
|
||||
isSelected ? 'bg-interactive-selected' : 'hover:bg-interactive-hover'
|
||||
}`}
|
||||
>
|
||||
{item.isGroup ? (
|
||||
<div className="relative w-6 h-6 flex-shrink-0">
|
||||
{item.otherMembers.slice(0, 2).map((m, idx) => (
|
||||
<DmSearchGroupAvatarSlot key={m.id} member={m} index={idx} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<Avatar
|
||||
src={partner?.avatar}
|
||||
name={partner?.displayName ?? parseFederatedUsername(partner?.username ?? '').baseName}
|
||||
size={24}
|
||||
status={partner?.status as 'online' | 'idle' | 'dnd' | 'offline' | undefined}
|
||||
userId={partner?.homeUserId ?? partner?.id}
|
||||
user={partner ?? undefined}
|
||||
/>
|
||||
)}
|
||||
<span className="text-[14px] text-txt-primary truncate">{item.displayName}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const MAX_RECENT = 8;
|
||||
const SEARCH_DEBOUNCE = 300;
|
||||
|
||||
@@ -265,43 +380,13 @@ export function DmSearchBar() {
|
||||
const globalIndex = i;
|
||||
const isSelected = globalIndex === selectedIndex;
|
||||
return (
|
||||
<div
|
||||
<DmSearchDmRow
|
||||
key={item.dm.id}
|
||||
ref={isSelected ? selectedRef : undefined}
|
||||
item={item}
|
||||
isSelected={isSelected}
|
||||
selectedRef={isSelected ? selectedRef : undefined}
|
||||
onClick={() => selectItem(item)}
|
||||
className={`flex items-center gap-2.5 px-2 py-1.5 mx-1 rounded cursor-pointer transition-colors ${
|
||||
isSelected ? 'bg-interactive-selected' : 'hover:bg-interactive-hover'
|
||||
}`}
|
||||
>
|
||||
{item.isGroup ? (
|
||||
<div className="relative w-6 h-6 flex-shrink-0">
|
||||
{item.otherMembers.slice(0, 2).map((m, idx) => (
|
||||
<div
|
||||
key={m.id}
|
||||
className="absolute rounded-full overflow-hidden border-[1.5px] border-surface-channel"
|
||||
style={{
|
||||
width: 18, height: 18,
|
||||
left: idx * 8,
|
||||
top: idx * 4,
|
||||
zIndex: 2 - idx,
|
||||
}}
|
||||
>
|
||||
<Avatar src={m.avatar} name={m.displayName ?? parseFederatedUsername(m.username).baseName} size={18} userId={m.homeUserId ?? m.id} user={m} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<Avatar
|
||||
src={item.otherMembers[0]?.avatar}
|
||||
name={item.otherMembers[0]?.displayName ?? parseFederatedUsername(item.otherMembers[0]?.username ?? '').baseName}
|
||||
size={24}
|
||||
status={item.otherMembers[0]?.status as 'online' | 'idle' | 'dnd' | 'offline' | undefined}
|
||||
userId={item.otherMembers[0]?.homeUserId ?? item.otherMembers[0]?.id}
|
||||
user={item.otherMembers[0]}
|
||||
/>
|
||||
)}
|
||||
<span className="text-[14px] text-txt-primary truncate">{item.displayName}</span>
|
||||
</div>
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
@@ -320,32 +405,13 @@ export function DmSearchBar() {
|
||||
const globalIndex = dmItems.length + i;
|
||||
const isSelected = globalIndex === selectedIndex;
|
||||
return (
|
||||
<div
|
||||
<DmSearchUserRow
|
||||
key={item.user.id}
|
||||
ref={isSelected ? selectedRef : undefined}
|
||||
user={item.user}
|
||||
isSelected={isSelected}
|
||||
selectedRef={isSelected ? selectedRef : undefined}
|
||||
onClick={() => selectItem(item)}
|
||||
className={`flex items-center gap-2.5 px-2 py-1.5 mx-1 rounded cursor-pointer transition-colors ${
|
||||
isSelected ? 'bg-interactive-selected' : 'hover:bg-interactive-hover'
|
||||
}`}
|
||||
>
|
||||
<Avatar
|
||||
src={item.user.avatar}
|
||||
name={item.user.displayName ?? item.user.username}
|
||||
size={24}
|
||||
status={item.user.status as 'online' | 'idle' | 'dnd' | 'offline' | undefined}
|
||||
userId={item.user.homeUserId ?? item.user.id}
|
||||
/>
|
||||
<div className="flex-1 min-w-0 flex items-center gap-1.5">
|
||||
<span className="text-[14px] text-txt-primary truncate">
|
||||
{item.user.displayName ?? item.user.username}
|
||||
</span>
|
||||
{item.user.displayName && (
|
||||
<span className="text-[12px] text-txt-tertiary truncate">
|
||||
@{item.user.username}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
|
||||
@@ -16,7 +16,9 @@ import { useVoiceStore } from '../../stores/voiceStore';
|
||||
import { wsSend } from '../../hooks/useWebSocket';
|
||||
import { MemberListToggleButton } from './MemberListToggleButton';
|
||||
import { TransferIndicator } from './TransferIndicator';
|
||||
import { isSelf, parseFederatedUsername } from '../../utils/identity';
|
||||
import { isSelf, parseFederatedUsername, isFederationGlobeApplicable } from '../../utils/identity';
|
||||
import { useCanonicalUserView } from '../../utils/userViewLookup';
|
||||
import type { User } from '@backspace/shared';
|
||||
import { Tooltip } from '../ui/Tooltip';
|
||||
import { joinVoiceChannel } from '../../utils/voice';
|
||||
import { SearchPopover } from '../chat/SearchPopover';
|
||||
@@ -48,6 +50,14 @@ export function MainContent() {
|
||||
const [searchOpen, setSearchOpen] = useState(false);
|
||||
const [jumpToMessageId, setJumpToMessageId] = useState<string | null>(null);
|
||||
|
||||
// Resolve the DM header's "first other" member through the canonical view
|
||||
// cache. The hook must be called unconditionally at the component top, so we
|
||||
// pass a fallback when there is no current DM channel or 1-on-1 partner.
|
||||
const _dmChannel = dmChannels.find(dm => dm.id === currentChannelId);
|
||||
const _rawFirstOther = _dmChannel?.members.filter(m => !isSelf(m, authUser))[0] ?? null;
|
||||
const _FALLBACK_USER = { id: '', username: '', createdAt: 0, isAdmin: false, replicatedInstances: [] } as unknown as User;
|
||||
const _canonicalFirstOther = useCanonicalUserView(_rawFirstOther ?? _FALLBACK_USER);
|
||||
|
||||
// Reset search when channel changes
|
||||
useEffect(() => {
|
||||
setSearchOpen(false);
|
||||
@@ -85,8 +95,10 @@ export function MainContent() {
|
||||
const dmChannel = dmChannels.find(dm => dm.id === currentChannelId);
|
||||
const otherMembers = dmChannel?.members.filter(m => !isSelf(m, authUser)) ?? [];
|
||||
const isGroupDm = !!dmChannel?.ownerId;
|
||||
const firstOther = otherMembers[0];
|
||||
const { baseName: firstBaseName, domain: firstDomain } = parseFederatedUsername(firstOther?.username ?? '');
|
||||
// Use the canonicalized view of the 1-on-1 partner (resolved above the
|
||||
// conditional so the hook is called unconditionally).
|
||||
const firstOther = _rawFirstOther ? _canonicalFirstOther : (otherMembers[0] ?? null);
|
||||
const { baseName: firstBaseName } = parseFederatedUsername(firstOther?.username ?? '');
|
||||
const dmName = isGroupDm
|
||||
? otherMembers.map(m => m.displayName ?? parseFederatedUsername(m.username).baseName).join(', ')
|
||||
: firstOther?.displayName ?? (firstBaseName || 'Direct Message');
|
||||
@@ -173,8 +185,8 @@ export function MainContent() {
|
||||
<path d="M12.5 2A6.5 6.5 0 0 0 6 8.5c0 1.82.75 3.47 1.95 4.65A10.02 10.02 0 0 0 2 22h2c0-4.42 3.58-8 8-8 .35 0 .69.03 1.03.07A6.49 6.49 0 0 0 19 8.5 6.5 6.5 0 0 0 12.5 2Zm0 11A4.5 4.5 0 1 1 17 8.5a4.5 4.5 0 0 1-4.5 4.5Z" />
|
||||
</svg>
|
||||
<span className="font-bold text-[15px] tracking-[-0.02em] text-txt-primary truncate">{dmName}</span>
|
||||
{!isGroupDm && firstDomain && (
|
||||
<Tooltip content={firstOther?.username ?? ''} position="bottom">
|
||||
{!isGroupDm && firstOther && isFederationGlobeApplicable(firstOther) && (
|
||||
<Tooltip content={firstOther.username} position="bottom">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" className="text-txt-tertiary/80 flex-shrink-0">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" />
|
||||
</svg>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import type { MemberWithUser } from '@backspace/shared';
|
||||
import type { MemberWithUser, Activity } from '@backspace/shared';
|
||||
import { useSpaceStore } from '../../stores/spaceStore';
|
||||
import { useUIStore } from '../../stores/uiStore';
|
||||
import { useActivityStore } from '../../stores/activityStore';
|
||||
@@ -7,7 +7,8 @@ import { Avatar } from '../ui/Avatar';
|
||||
import { Username } from '../ui/Username';
|
||||
import { ActivityCard, hasRichActivity, getActivityAccentClass } from '../ui/ActivityCard';
|
||||
import { getPrimaryActivity } from '@backspace/shared/src/activities.js';
|
||||
import { parseFederatedUsername } from '../../utils/identity';
|
||||
import { parseFederatedUsername, isFederationGlobeApplicable } from '../../utils/identity';
|
||||
import { useCanonicalUserView } from '../../utils/userViewLookup';
|
||||
import { useDelayedLoading } from '../../hooks/useDelayedLoading';
|
||||
|
||||
/**
|
||||
@@ -45,6 +46,65 @@ function getMemberGroup(member: MemberWithUser, ownerId: string | undefined) {
|
||||
};
|
||||
}
|
||||
|
||||
function MemberSidebarRow({
|
||||
member,
|
||||
isOffline,
|
||||
colorStyle,
|
||||
activities,
|
||||
isRichActivity,
|
||||
accentClass,
|
||||
onClickMember,
|
||||
}: {
|
||||
member: MemberWithUser;
|
||||
isOffline: boolean;
|
||||
colorStyle: React.CSSProperties | undefined;
|
||||
activities: Activity[];
|
||||
isRichActivity: boolean;
|
||||
accentClass: string;
|
||||
onClickMember: (e: React.MouseEvent, user: MemberWithUser['user']) => void;
|
||||
}) {
|
||||
const canonical = useCanonicalUserView(member.user);
|
||||
const { baseName } = parseFederatedUsername(canonical.username);
|
||||
const displayName = canonical.displayName ?? baseName;
|
||||
|
||||
const rowClass = isRichActivity
|
||||
? `flex items-center gap-2.5 px-2.5 py-2 rounded-[10px] mb-1 cursor-pointer transition-colors glass-pill border-l-2 ${accentClass}`
|
||||
: 'flex items-center gap-2.5 px-2 py-1.5 rounded-[4px] hover:bg-interactive-hover cursor-pointer group transition-colors';
|
||||
|
||||
return (
|
||||
<div
|
||||
key={member.userId}
|
||||
onClick={(e) => onClickMember(e, canonical)}
|
||||
className={rowClass}
|
||||
>
|
||||
<Avatar
|
||||
src={canonical.avatar}
|
||||
name={displayName}
|
||||
size={32}
|
||||
status={isOffline ? 'offline' : canonical.status}
|
||||
className={isOffline ? 'opacity-60' : undefined}
|
||||
user={canonical}
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<Username
|
||||
username={displayName}
|
||||
className={`text-[13.5px] leading-[1.2] font-medium truncate ${isOffline ? 'text-txt-tertiary' : (!colorStyle ? 'text-txt-primary' : '')}`}
|
||||
style={colorStyle}
|
||||
/>
|
||||
{!isOffline && isFederationGlobeApplicable(canonical) && (
|
||||
<div className="text-[10px] leading-[1.3] text-txt-tertiary truncate opacity-60">@{parseFederatedUsername(canonical.username).domain}</div>
|
||||
)}
|
||||
{!isOffline && (
|
||||
<ActivityCard
|
||||
activities={activities}
|
||||
fallbackCustomStatus={canonical.customStatus}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function MemberSidebar() {
|
||||
const members = useSpaceStore((s) => s.members);
|
||||
const spaces = useSpaceStore((s) => s.spaces);
|
||||
@@ -105,49 +165,22 @@ export function MemberSidebar() {
|
||||
};
|
||||
|
||||
const renderMember = (member: MemberWithUser, isOffline = false) => {
|
||||
const { baseName, domain } = parseFederatedUsername(member.user.username);
|
||||
const displayName = member.user.displayName ?? baseName;
|
||||
const colorStyle = isOffline ? undefined : getMemberColor(member);
|
||||
const activities = userActivities.get(member.userId) ?? [];
|
||||
const isRichActivity = !isOffline && hasRichActivity(activities);
|
||||
const primary = getPrimaryActivity(activities);
|
||||
const accentClass = primary ? getActivityAccentClass(primary.type) : '';
|
||||
|
||||
const rowClass = isRichActivity
|
||||
? `flex items-center gap-2.5 px-2.5 py-2 rounded-[10px] mb-1 cursor-pointer transition-colors glass-pill border-l-2 ${accentClass}`
|
||||
: 'flex items-center gap-2.5 px-2 py-1.5 rounded-[4px] hover:bg-interactive-hover cursor-pointer group transition-colors';
|
||||
|
||||
return (
|
||||
<div
|
||||
<MemberSidebarRow
|
||||
key={member.userId}
|
||||
onClick={(e) => handleMemberClick(e, member.user)}
|
||||
className={rowClass}
|
||||
>
|
||||
<Avatar
|
||||
src={member.user.avatar}
|
||||
name={displayName}
|
||||
size={32}
|
||||
status={isOffline ? 'offline' : member.user.status}
|
||||
className={isOffline ? 'opacity-60' : undefined}
|
||||
user={member.user}
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<Username
|
||||
username={displayName}
|
||||
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 && (
|
||||
<ActivityCard
|
||||
activities={activities}
|
||||
fallbackCustomStatus={member.user.customStatus}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
member={member}
|
||||
isOffline={isOffline}
|
||||
colorStyle={colorStyle}
|
||||
activities={activities}
|
||||
isRichActivity={isRichActivity}
|
||||
accentClass={accentClass}
|
||||
onClickMember={handleMemberClick}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -9,8 +9,147 @@ import { Avatar } from '../ui/Avatar';
|
||||
import { Mascot } from '../ui/Mascot';
|
||||
import { resolveAssetUrl } from '../../utils/assetUrls';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { parseFederatedUsername } from '../../utils/identity';
|
||||
import { parseFederatedUsername, isFederationGlobeApplicable, isSelf } from '../../utils/identity';
|
||||
import { useCanonicalUserView } from '../../utils/userViewLookup';
|
||||
import { formatDmSidebarPreview } from '../../utils/dmFormatters';
|
||||
import type { DmChannel, User } from '@backspace/shared';
|
||||
import type { TaggedFriend } from '../../stores/socialStore';
|
||||
|
||||
const FALLBACK_USER = { id: '', username: '', createdAt: 0, isAdmin: false, replicatedInstances: [] } as unknown as User;
|
||||
|
||||
function MobileFriendBubble({
|
||||
friend,
|
||||
dmChannels,
|
||||
onTap,
|
||||
}: {
|
||||
friend: TaggedFriend;
|
||||
dmChannels: DmChannel[];
|
||||
onTap: (dmId: string) => void;
|
||||
}) {
|
||||
const canonical = useCanonicalUserView(friend as unknown as User);
|
||||
// _instanceOrigin lives on TaggedFriend, not on the canonical User. Use the
|
||||
// canonical avatar value but source the origin from the original friend.
|
||||
const avatarUrl = canonical.avatar
|
||||
? resolveAssetUrl(canonical.avatar, friend._instanceOrigin) ?? `/api/uploads/${canonical.avatar}`
|
||||
: null;
|
||||
const displayName = canonical.displayName ?? parseFederatedUsername(canonical.username).baseName;
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={() => {
|
||||
const existingDm = dmChannels.find(dm =>
|
||||
!dm.ownerId && dm.members.some(m => m.id === friend.id)
|
||||
);
|
||||
if (existingDm) {
|
||||
onTap(existingDm.id);
|
||||
}
|
||||
}}
|
||||
className="flex flex-col items-center gap-1 shrink-0 w-14"
|
||||
>
|
||||
<div className="relative">
|
||||
<Avatar
|
||||
src={avatarUrl}
|
||||
name={displayName}
|
||||
avatarColor={canonical.avatarColor}
|
||||
size={40}
|
||||
/>
|
||||
<span className={`absolute bottom-0 right-0 w-3 h-3 rounded-full border-2 border-surface-base ${
|
||||
friend.status === 'online' ? 'bg-status-online' :
|
||||
friend.status === 'idle' ? 'bg-status-idle' :
|
||||
'bg-status-dnd'
|
||||
}`} />
|
||||
</div>
|
||||
<span className="text-[10px] text-txt-secondary truncate w-full text-center">
|
||||
{displayName}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function MobileDmRow({
|
||||
dm,
|
||||
authUser,
|
||||
readStates,
|
||||
onTap,
|
||||
onContextMenu,
|
||||
formatTimestamp,
|
||||
}: {
|
||||
dm: DmChannel;
|
||||
authUser: User | null;
|
||||
readStates: Map<string, string>;
|
||||
onTap: (id: string) => void;
|
||||
onContextMenu: (e: React.MouseEvent, id: string, isGroup: boolean) => void;
|
||||
formatTimestamp: (ts: number) => string;
|
||||
}) {
|
||||
const otherMembers = dm.members.filter(m => authUser ? !isSelf(m, authUser) : m.id !== authUser);
|
||||
const isGroup = !!dm.ownerId;
|
||||
const rawMainUser = otherMembers[0] ?? null;
|
||||
const canonicalMainUser = useCanonicalUserView(rawMainUser ?? FALLBACK_USER);
|
||||
const mainUser = rawMainUser ? canonicalMainUser : null;
|
||||
|
||||
const name = isGroup
|
||||
? otherMembers.map(m => m.displayName ?? parseFederatedUsername(m.username).baseName).join(', ')
|
||||
: mainUser?.displayName ?? (parseFederatedUsername(mainUser?.username ?? '').baseName || 'Unknown');
|
||||
|
||||
const lastMsgId = dm.lastMessage?.id;
|
||||
const readState = readStates.get(dm.id);
|
||||
const isUnread = lastMsgId && (!readState || readState < lastMsgId);
|
||||
|
||||
const preview = formatDmSidebarPreview(dm, authUser ?? null);
|
||||
const previewTime = dm.lastMessage?.createdAt;
|
||||
|
||||
const avatarUrl = mainUser?.avatar ? `/api/uploads/${mainUser.avatar}` : null;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={dm.id}
|
||||
data-context-menu
|
||||
onClick={() => onTap(dm.id)}
|
||||
onContextMenu={(e) => onContextMenu(e, dm.id, isGroup)}
|
||||
className="w-full flex items-center gap-3 px-4 py-3 hover:bg-interactive-hover text-left transition-colors"
|
||||
>
|
||||
<div className="relative shrink-0">
|
||||
{isGroup ? (
|
||||
<div className="w-10 h-10 rounded-full bg-surface-elevated flex items-center justify-center">
|
||||
<svg className="w-5 h-5 text-txt-secondary" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
) : (
|
||||
<Avatar
|
||||
src={avatarUrl}
|
||||
name={name}
|
||||
avatarColor={mainUser?.avatarColor}
|
||||
size={40}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className={`text-sm truncate ${isUnread ? 'font-semibold text-txt-primary' : 'text-txt-primary'}`}>
|
||||
{name}
|
||||
</span>
|
||||
{previewTime && (
|
||||
<span className="text-[11px] text-txt-tertiary shrink-0">
|
||||
{formatTimestamp(previewTime)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{!isGroup && mainUser && isFederationGlobeApplicable(mainUser) && (
|
||||
<div className="text-[10px] leading-[1.3] text-txt-tertiary truncate opacity-60">
|
||||
@{parseFederatedUsername(mainUser.username).domain}
|
||||
</div>
|
||||
)}
|
||||
{preview && (
|
||||
<p className={`text-xs truncate mt-0.5 ${isUnread ? 'text-txt-secondary font-medium' : 'text-txt-tertiary'}`}>
|
||||
{preview}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{isUnread && <span className="w-2.5 h-2.5 rounded-full bg-accent-primary shrink-0" />}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export function MobileDmsScreen() {
|
||||
const pushMobileScreen = useUIStore((s) => s.pushMobileScreen);
|
||||
@@ -98,122 +237,31 @@ export function MobileDmsScreen() {
|
||||
{onlineFriends.length > 0 && (
|
||||
<div className="px-4 py-3 border-b border-border-soft">
|
||||
<div className="flex gap-3 overflow-x-auto no-scrollbar">
|
||||
{onlineFriends.map(friend => {
|
||||
const avatarUrl = friend.avatar
|
||||
? resolveAssetUrl(friend.avatar, friend._instanceOrigin) ?? `/api/uploads/${friend.avatar}`
|
||||
: null;
|
||||
return (
|
||||
<button
|
||||
key={friend.id}
|
||||
onClick={() => {
|
||||
// Find or create DM with this friend
|
||||
const existingDm = dmChannels.find(dm =>
|
||||
!dm.ownerId && dm.members.some(m => m.id === friend.id)
|
||||
);
|
||||
if (existingDm) {
|
||||
handleDmTap(existingDm.id);
|
||||
}
|
||||
}}
|
||||
className="flex flex-col items-center gap-1 shrink-0 w-14"
|
||||
>
|
||||
<div className="relative">
|
||||
<Avatar
|
||||
src={avatarUrl}
|
||||
name={friend.displayName ?? parseFederatedUsername(friend.username).baseName}
|
||||
avatarColor={friend.avatarColor}
|
||||
size={40}
|
||||
/>
|
||||
<span className={`absolute bottom-0 right-0 w-3 h-3 rounded-full border-2 border-surface-base ${
|
||||
friend.status === 'online' ? 'bg-status-online' :
|
||||
friend.status === 'idle' ? 'bg-status-idle' :
|
||||
'bg-status-dnd'
|
||||
}`} />
|
||||
</div>
|
||||
<span className="text-[10px] text-txt-secondary truncate w-full text-center">
|
||||
{friend.displayName ?? parseFederatedUsername(friend.username).baseName}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
{onlineFriends.map(friend => (
|
||||
<MobileFriendBubble
|
||||
key={friend.id}
|
||||
friend={friend}
|
||||
dmChannels={dmChannels}
|
||||
onTap={handleDmTap}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* DM list */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{sortedDms.map(dm => {
|
||||
const otherMembers = dm.members.filter(m => m.id !== authUser?.id);
|
||||
const isGroup = !!dm.ownerId;
|
||||
const name = isGroup
|
||||
? otherMembers.map(m => m.displayName ?? parseFederatedUsername(m.username).baseName).join(', ')
|
||||
: otherMembers[0]?.displayName ?? (parseFederatedUsername(otherMembers[0]?.username ?? '').baseName || 'Unknown');
|
||||
|
||||
const lastMsgId = dm.lastMessage?.id;
|
||||
const readState = readStates.get(dm.id);
|
||||
const isUnread = lastMsgId && (!readState || readState < lastMsgId);
|
||||
|
||||
// formatDmSidebarPreview returns the full preview line (system messages
|
||||
// get human-readable text; group user-messages get the "Sender: " prefix).
|
||||
const preview = formatDmSidebarPreview(dm, authUser ?? null);
|
||||
const previewTime = dm.lastMessage?.createdAt;
|
||||
|
||||
const mainUser = otherMembers[0];
|
||||
const avatarUrl = mainUser?.avatar
|
||||
? `/api/uploads/${mainUser.avatar}`
|
||||
: null;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={dm.id}
|
||||
data-context-menu
|
||||
onClick={() => handleDmTap(dm.id)}
|
||||
onContextMenu={(e) => handleDmContextMenu(e, dm.id, isGroup)}
|
||||
className="w-full flex items-center gap-3 px-4 py-3 hover:bg-interactive-hover text-left transition-colors"
|
||||
>
|
||||
<div className="relative shrink-0">
|
||||
{isGroup ? (
|
||||
<div className="w-10 h-10 rounded-full bg-surface-elevated flex items-center justify-center">
|
||||
<svg className="w-5 h-5 text-txt-secondary" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
) : (
|
||||
<Avatar
|
||||
src={avatarUrl}
|
||||
name={name}
|
||||
avatarColor={mainUser?.avatarColor}
|
||||
size={40}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className={`text-sm truncate ${isUnread ? 'font-semibold text-txt-primary' : 'text-txt-primary'}`}>
|
||||
{name}
|
||||
</span>
|
||||
{previewTime && (
|
||||
<span className="text-[11px] text-txt-tertiary shrink-0">
|
||||
{formatTimestamp(previewTime)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{(() => {
|
||||
const mainUser = otherMembers[0];
|
||||
if (!mainUser) return null;
|
||||
const { domain } = parseFederatedUsername(mainUser.username);
|
||||
if (!domain) return null;
|
||||
return <div className="text-[10px] leading-[1.3] text-txt-tertiary truncate opacity-60">@{domain}</div>;
|
||||
})()}
|
||||
{preview && (
|
||||
<p className={`text-xs truncate mt-0.5 ${isUnread ? 'text-txt-secondary font-medium' : 'text-txt-tertiary'}`}>
|
||||
{preview}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{isUnread && <span className="w-2.5 h-2.5 rounded-full bg-accent-primary shrink-0" />}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
{sortedDms.map(dm => (
|
||||
<MobileDmRow
|
||||
key={dm.id}
|
||||
dm={dm}
|
||||
authUser={authUser ?? null}
|
||||
readStates={readStates}
|
||||
onTap={handleDmTap}
|
||||
onContextMenu={handleDmContextMenu}
|
||||
formatTimestamp={formatTimestamp}
|
||||
/>
|
||||
))}
|
||||
|
||||
{sortedDms.length === 0 && (
|
||||
<div className="flex flex-col items-center justify-center h-40 opacity-80">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import type { MemberWithUser } from '@backspace/shared';
|
||||
import type { MemberWithUser, Activity } from '@backspace/shared';
|
||||
import { useSpaceStore } from '../../stores/spaceStore';
|
||||
import { useActivityStore } from '../../stores/activityStore';
|
||||
import { useUIStore } from '../../stores/uiStore';
|
||||
@@ -7,7 +7,8 @@ import { Avatar } from '../ui/Avatar';
|
||||
import { Username } from '../ui/Username';
|
||||
import { ActivityCard, hasRichActivity, getActivityAccentClass } from '../ui/ActivityCard';
|
||||
import { getPrimaryActivity } from '@backspace/shared/src/activities.js';
|
||||
import { parseFederatedUsername } from '../../utils/identity';
|
||||
import { parseFederatedUsername, isFederationGlobeApplicable } from '../../utils/identity';
|
||||
import { useCanonicalUserView } from '../../utils/userViewLookup';
|
||||
import { MobileScreenHeader } from './MobileScreenHeader';
|
||||
|
||||
/**
|
||||
@@ -42,6 +43,64 @@ function getMemberGroup(member: MemberWithUser, ownerId: string | undefined) {
|
||||
};
|
||||
}
|
||||
|
||||
function MobileMemberRow({
|
||||
member,
|
||||
isOffline,
|
||||
colorStyle,
|
||||
activities,
|
||||
isRichActivity,
|
||||
accentClass,
|
||||
onClickMember,
|
||||
}: {
|
||||
member: MemberWithUser;
|
||||
isOffline: boolean;
|
||||
colorStyle: React.CSSProperties | undefined;
|
||||
activities: Activity[];
|
||||
isRichActivity: boolean;
|
||||
accentClass: string;
|
||||
onClickMember: (userId: string) => void;
|
||||
}) {
|
||||
const canonical = useCanonicalUserView(member.user);
|
||||
const { baseName } = parseFederatedUsername(canonical.username);
|
||||
const displayName = canonical.displayName ?? baseName;
|
||||
|
||||
const rowClass = isRichActivity
|
||||
? `flex items-center gap-2.5 px-4 py-2.5 rounded-[10px] mb-1 cursor-pointer transition-colors glass-pill border-l-2 ${accentClass} active:bg-interactive-hover`
|
||||
: 'flex items-center gap-2.5 px-4 py-2.5 rounded-[4px] cursor-pointer transition-colors active:bg-interactive-hover';
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={() => onClickMember(member.userId)}
|
||||
className={rowClass}
|
||||
>
|
||||
<Avatar
|
||||
src={canonical.avatar}
|
||||
name={displayName}
|
||||
size={36}
|
||||
status={isOffline ? 'offline' : canonical.status}
|
||||
className={isOffline ? 'opacity-60' : undefined}
|
||||
user={canonical}
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<Username
|
||||
username={displayName}
|
||||
className={`text-[13.5px] leading-[1.2] font-medium truncate ${isOffline ? 'text-txt-tertiary' : (!colorStyle ? 'text-txt-primary' : '')}`}
|
||||
style={colorStyle}
|
||||
/>
|
||||
{!isOffline && isFederationGlobeApplicable(canonical) && (
|
||||
<div className="text-[10px] leading-[1.3] text-txt-tertiary truncate opacity-60">@{parseFederatedUsername(canonical.username).domain}</div>
|
||||
)}
|
||||
{!isOffline && (
|
||||
<ActivityCard
|
||||
activities={activities}
|
||||
fallbackCustomStatus={canonical.customStatus}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface MobileMembersScreenProps {
|
||||
params?: Record<string, string>;
|
||||
}
|
||||
@@ -95,49 +154,22 @@ export function MobileMembersScreen({ params }: MobileMembersScreenProps) {
|
||||
};
|
||||
|
||||
const renderMember = (member: MemberWithUser, isOffline = false) => {
|
||||
const { baseName, domain } = parseFederatedUsername(member.user.username);
|
||||
const displayName = member.user.displayName ?? baseName;
|
||||
const colorStyle = isOffline ? undefined : getMemberColor(member);
|
||||
const activities = userActivities.get(member.userId) ?? [];
|
||||
const isRichActivity = !isOffline && hasRichActivity(activities);
|
||||
const primary = getPrimaryActivity(activities);
|
||||
const accentClass = primary ? getActivityAccentClass(primary.type) : '';
|
||||
|
||||
const rowClass = isRichActivity
|
||||
? `flex items-center gap-2.5 px-4 py-2.5 rounded-[10px] mb-1 cursor-pointer transition-colors glass-pill border-l-2 ${accentClass} active:bg-interactive-hover`
|
||||
: 'flex items-center gap-2.5 px-4 py-2.5 rounded-[4px] cursor-pointer transition-colors active:bg-interactive-hover';
|
||||
|
||||
return (
|
||||
<div
|
||||
<MobileMemberRow
|
||||
key={member.userId}
|
||||
onClick={() => handleMemberClick(member.userId)}
|
||||
className={rowClass}
|
||||
>
|
||||
<Avatar
|
||||
src={member.user.avatar}
|
||||
name={displayName}
|
||||
size={36}
|
||||
status={isOffline ? 'offline' : member.user.status}
|
||||
className={isOffline ? 'opacity-60' : undefined}
|
||||
user={member.user}
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<Username
|
||||
username={displayName}
|
||||
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 && (
|
||||
<ActivityCard
|
||||
activities={activities}
|
||||
fallbackCustomStatus={member.user.customStatus}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
member={member}
|
||||
isOffline={isOffline}
|
||||
colorStyle={colorStyle}
|
||||
activities={activities}
|
||||
isRichActivity={isRichActivity}
|
||||
accentClass={accentClass}
|
||||
onClickMember={handleMemberClick}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user