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

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, toRem,
} from 'folds'; } from 'folds';
import { useVirtualizer } from '@tanstack/react-virtual'; 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 { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
import FocusTrap from 'focus-trap-react'; import FocusTrap from 'focus-trap-react';
import { logger } from 'matrix-js-sdk/lib/logger'; import { logger } from 'matrix-js-sdk/lib/logger';
@ -38,7 +38,7 @@ import {
NavLink, NavLink,
} from '../../../components/nav'; } from '../../../components/nav';
import { getSpaceLobbyPath, getSpaceRoomPath, getSpaceSearchPath } from '../../pathUtils'; 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 { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
import { import {
useSpaceLobbySelected, useSpaceLobbySelected,
@ -80,7 +80,10 @@ import {
import { useOpenSpaceSettings } from '../../../state/hooks/spaceSettings'; import { useOpenSpaceSettings } from '../../../state/hooks/spaceSettings';
import { useCallState } from '../CallProvider'; import { useCallState } from '../CallProvider';
import { CallNavBottom } from '../../call/CallNavBottom'; 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 * Processes the raw hierarchy from useSpaceJoinedHierarchy into a flat list
@ -175,7 +178,6 @@ const processHierarchyForVirtualizer = (
key: event.event_id, key: event.event_id,
room, room,
}); });
logger.warn(event);
} }
} }
}); });
@ -390,13 +392,14 @@ export function Space() {
const allRooms = useAtomValue(allRoomsAtom); const allRooms = useAtomValue(allRoomsAtom);
const allJoinedRooms = useMemo(() => new Set(allRooms), [allRooms]); const allJoinedRooms = useMemo(() => new Set(allRooms), [allRooms]);
const notificationPreferences = useRoomsNotificationPreferencesContext(); const notificationPreferences = useRoomsNotificationPreferencesContext();
const selectedRoomId = useSelectedRoom(); const selectedRoomId = useSelectedRoom();
const lobbySelected = useSpaceLobbySelected(spaceIdOrAlias); const lobbySelected = useSpaceLobbySelected(spaceIdOrAlias);
const searchSelected = useSpaceSearchSelected(spaceIdOrAlias); const searchSelected = useSpaceSearchSelected(spaceIdOrAlias);
const [closedCategories, setClosedCategories] = useAtom(useClosedNavCategoriesAtom()); const [closedCategories, setClosedCategories] = useAtom(useClosedNavCategoriesAtom());
const useAuthentication = useMediaAuthentication();
const getRoom = useCallback( const getRoom = useCallback(
(rId: string): Room | undefined => { (rId: string): Room | undefined => {
if (allJoinedRooms.has(rId)) { if (allJoinedRooms.has(rId)) {
@ -428,6 +431,9 @@ export function Space() {
) )
); );
const members = useRoomMembers(mx, space.roomId);
//.getMxcAvatarUrl()
const processedHierarchy = useMemo( const processedHierarchy = useMemo(
() => processHierarchyForVirtualizer(hierarchy, mx, space.roomId, closedCategories), () => processHierarchyForVirtualizer(hierarchy, mx, space.roomId, closedCategories),
[hierarchy, mx, space.roomId, closedCategories] [hierarchy, mx, space.roomId, closedCategories]
@ -555,8 +561,44 @@ export function Space() {
); );
} }
case 'user': { case 'user': {
const { sender } = item; const { sender, room } = item;
return <NavItem>{sender}</NavItem>; 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: default:
logger.error('Unknown item type in virtualized list:', item); logger.error('Unknown item type in virtualized list:', item);