mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-06 07:20:29 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Add avatar and username for the space (needs to be moved into RoomNavItem proper)

Browse source
This commit is contained in:
Gigiaj 2025-05-04 07:11:40 -05:00
parent 3dcfde4461
commit 2e0218c456
1 changed files with 49 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

56
src/app/pages/client/space/Space.tsx
View file

@ -23,7 +23,7 @@ import {
toRem,
} from 'folds';
import { useVirtualizer } from '@tanstack/react-virtual';
import { JoinRule, Room } from 'matrix-js-sdk';
import { JoinRule, Room, RoomMember } from 'matrix-js-sdk';
import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
import FocusTrap from 'focus-trap-react';
import { logger } from 'matrix-js-sdk/lib/logger';
@ -38,7 +38,7 @@ import {
NavLink,
} from '../../../components/nav';
import { getSpaceLobbyPath, getSpaceRoomPath, getSpaceSearchPath } from '../../pathUtils';
import { getCanonicalAliasOrRoomId, isRoomAlias } from '../../../utils/matrix';
import { getCanonicalAliasOrRoomId, getMxIdLocalPart, isRoomAlias } from '../../../utils/matrix';
import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
import {
useSpaceLobbySelected,
@ -80,7 +80,10 @@ import {
import { useOpenSpaceSettings } from '../../../state/hooks/spaceSettings';
import { useCallState } from '../CallProvider';
import { CallNavBottom } from '../../call/CallNavBottom';
import { getStateEvents } from '../../../utils/room';
import { getMemberDisplayName, getStateEvents } from '../../../utils/room';
import { useRoomMembers } from '../../../hooks/useRoomMembers';
import { UserAvatar } from '../../../components/user-avatar';
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
/**
* Processes the raw hierarchy from useSpaceJoinedHierarchy into a flat list
@ -175,7 +178,6 @@ const processHierarchyForVirtualizer = (
key: event.event_id,
room,
});
logger.warn(event);
}
}
});
@ -390,13 +392,14 @@ export function Space() {
const allRooms = useAtomValue(allRoomsAtom);
const allJoinedRooms = useMemo(() => new Set(allRooms), [allRooms]);
const notificationPreferences = useRoomsNotificationPreferencesContext();
const selectedRoomId = useSelectedRoom();
const lobbySelected = useSpaceLobbySelected(spaceIdOrAlias);
const searchSelected = useSpaceSearchSelected(spaceIdOrAlias);
const [closedCategories, setClosedCategories] = useAtom(useClosedNavCategoriesAtom());
const useAuthentication = useMediaAuthentication();
const getRoom = useCallback(
(rId: string): Room | undefined => {
if (allJoinedRooms.has(rId)) {
@ -428,6 +431,9 @@ export function Space() {
)
);
const members = useRoomMembers(mx, space.roomId);
//.getMxcAvatarUrl()
const processedHierarchy = useMemo(
() => processHierarchyForVirtualizer(hierarchy, mx, space.roomId, closedCategories),
[hierarchy, mx, space.roomId, closedCategories]
@ -555,8 +561,44 @@ export function Space() {
);
}
case 'user': {
const { sender } = item;
return <NavItem>{sender}</NavItem>;
const { sender, room } = item;
const member = members.find((roomMember) => roomMember.userId === sender);
const avatarMxcUrl = member?.getMxcAvatarUrl();
const avatarUrl = avatarMxcUrl
? mx.mxcUrlToHttp(
avatarMxcUrl,
32,
32,
'crop',
undefined,
false,
useAuthentication
)
: undefined;
const getName =
getMemberDisplayName(room, member?.userId ?? '') ??
getMxIdLocalPart(member?.userId ?? '') ??
member?.userId;
return (
<Box>
<NavItem variant="Background" radii="400">
<NavItemContent>
<Box as="span" grow="Yes" alignItems="Center" gap="200">
<Avatar size="200">
<UserAvatar
userId={member?.userId ?? ''}
src={avatarUrl ?? undefined}
alt={getName}
renderFallback={() => <Icon size="50" src={Icons.User} filled />}
/>
</Avatar>
{getName}
</Box>
</NavItemContent>
</NavItem>
</Box>
);
}
default:
logger.error('Unknown item type in virtualized list:', item);