mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-02-22 21:23:09 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix unread room menu ref

Browse source
This commit is contained in:
Ajay Bura 2024-02-07 11:41:04 +05:30
parent fd09f8c30a
commit caf67b9889
1 changed files with 83 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

164
src/app/pages/client/sidebar/NotificationBadge.tsx
View file

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { forwardRef, useState } from 'react';
import { useAtomValue } from 'jotai';
import { PopOut, Menu, Box, toRem, config, Text, Header, Scroll, Avatar } from 'folds';
import FocusTrap from 'focus-trap-react';
@ -17,92 +17,94 @@ import { getHomeRoomPath } from '../../pathUtils';
import { getCanonicalAliasOrRoomId } from '../../../utils/matrix';
import { useSelectedRoom } from '../../../hooks/useSelectedRoom';
function UnreadMenu({ rooms, requestClose }: { rooms: string[]; requestClose: () => void }) {
const mx = useMatrixClient();
const mDirects = useAtomValue(mDirectAtom);
const roomToUnread = useAtomValue(roomToUnreadAtom);
const selectedRoomId = useSelectedRoom();
const UnreadMenu = forwardRef<HTMLDivElement, { rooms: string[]; requestClose: () => void }>(
({ rooms, requestClose }, ref) => {
const mx = useMatrixClient();
const mDirects = useAtomValue(mDirectAtom);
const roomToUnread = useAtomValue(roomToUnreadAtom);
const selectedRoomId = useSelectedRoom();
return (
<Menu style={{ width: toRem(250) }}>
<Box direction="Column" style={{ maxHeight: '70vh', maxWidth: toRem(300) }}>
<Header
size="300"
style={{
padding: `0 ${config.space.S200}`,
flexShrink: 0,
borderBottomWidth: config.borderWidth.B300,
}}
>
<Text size="L400">Unread Rooms</Text>
</Header>
<Scroll size="300" hideTrack>
<Box direction="Column" style={{ padding: config.space.S200, paddingRight: 0 }}>
{rooms
.sort(factoryRoomIdByActivity(mx))
.sort(factoryRoomIdByUnreadCount((rId) => roomToUnread.get(rId)?.total ?? 0))
.map((roomId) => {
const room = mx.getRoom(roomId);
if (!room) return null;
const avatarSrc = getRoomAvatarUrl(mx, room, 32);
return (
<Menu ref={ref} style={{ width: toRem(250) }}>
<Box direction="Column" style={{ maxHeight: '70vh', maxWidth: toRem(300) }}>
<Header
size="300"
style={{
padding: `0 ${config.space.S200}`,
flexShrink: 0,
borderBottomWidth: config.borderWidth.B300,
}}
>
<Text size="L400">Unread Rooms</Text>
</Header>
<Scroll size="300" hideTrack>
<Box direction="Column" style={{ padding: config.space.S200, paddingRight: 0 }}>
{rooms
.sort(factoryRoomIdByActivity(mx))
.sort(factoryRoomIdByUnreadCount((rId) => roomToUnread.get(rId)?.total ?? 0))
.map((roomId) => {
const room = mx.getRoom(roomId);
if (!room) return null;
const avatarSrc = getRoomAvatarUrl(mx, room, 32);
const roomUnread = roomToUnread.get(roomId);
if (!roomUnread) return null;
const roomUnread = roomToUnread.get(roomId);
if (!roomUnread) return null;
return (
<NavItem
key={roomId}
variant="Surface"
radii="400"
highlight={!!roomUnread || selectedRoomId === roomId}
aria-selected={selectedRoomId === roomId}
>
<NavLink
onClick={requestClose}
to={getHomeRoomPath(getCanonicalAliasOrRoomId(mx, roomId))}
return (
<NavItem
key={roomId}
variant="Surface"
radii="400"
highlight={!!roomUnread || selectedRoomId === roomId}
aria-selected={selectedRoomId === roomId}
>
<NavItemContent size="T300">
<Box as="span" grow="Yes" alignItems="Center" gap="200">
<Avatar size="200">
{mDirects.has(roomId) ? (
<RoomAvatar
src={avatarSrc}
alt={room.name}
renderInitials={() => (
<Text as="span" size="H6">
{nameInitials(room.name)}
</Text>
)}
/>
) : (
<RoomIcon size="50" joinRule={room.getJoinRule()} />
<NavLink
onClick={requestClose}
to={getHomeRoomPath(getCanonicalAliasOrRoomId(mx, roomId))}
>
<NavItemContent size="T300">
<Box as="span" grow="Yes" alignItems="Center" gap="200">
<Avatar size="200">
{mDirects.has(roomId) ? (
<RoomAvatar
src={avatarSrc}
alt={room.name}
renderInitials={() => (
<Text as="span" size="H6">
{nameInitials(room.name)}
</Text>
)}
/>
) : (
<RoomIcon size="50" joinRule={room.getJoinRule()} />
)}
</Avatar>
<Box as="span" grow="Yes">
<Text as="span" size="Inherit" truncate>
{room.name}
</Text>
</Box>
{roomUnread && (
<UnreadBadgeCenter>
<UnreadBadge
highlight={roomUnread.highlight > 0}
count={roomUnread.total}
/>
</UnreadBadgeCenter>
)}
</Avatar>
<Box as="span" grow="Yes">
<Text as="span" size="Inherit" truncate>
{room.name}
</Text>
</Box>
{roomUnread && (
<UnreadBadgeCenter>
<UnreadBadge
highlight={roomUnread.highlight > 0}
count={roomUnread.total}
/>
</UnreadBadgeCenter>
)}
</Box>
</NavItemContent>
</NavLink>
</NavItem>
);
})}
</Box>
</Scroll>
</Box>
</Menu>
);
}
</NavItemContent>
</NavLink>
</NavItem>
);
})}
</Box>
</Scroll>
</Box>
</Menu>
);
}
);
export function NotificationBadge({ unread }: { unread: Unread }) {
const unreadRooms = [...(unread.from ?? [])];