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

use room nav item in home and direct room list

Browse source
This commit is contained in:
Ajay Bura 2024-04-09 21:18:57 +05:30
parent 45a5717560
commit f07291017e
5 changed files with 30 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app/features/room-nav-item/RoomNavItem.tsx
View file

@ -177,7 +177,7 @@ export function RoomNavItem({ room, selected, direct, muted, linkPath }: RoomNav
<Avatar size="200" radii="400"> <Avatar size="200" radii="400">
{direct ? ( {direct ? (
<RoomAvatar <RoomAvatar
variant="Background" variant="Secondary"
src={getRoomAvatarUrl(mx, room, 96)} src={getRoomAvatarUrl(mx, room, 96)}
alt={room.name} alt={room.name}
renderInitials={() => <Text size="H6">{nameInitials(room.name)}</Text>} renderInitials={() => <Text size="H6">{nameInitials(room.name)}</Text>}

1
src/app/features/room-nav-item/index.ts Normal file
View file

@ -0,0 +1 @@
export * from './RoomNavItem';

59
src/app/pages/client/direct/Direct.tsx
View file

@ -21,16 +21,13 @@ import {
NavItemContent, NavItemContent,
NavLink, NavLink,
} from '../../../components/nav'; } from '../../../components/nav';
import { UnreadBadge, UnreadBadgeCenter } from '../../../components/unread-badge';
import { RoomAvatar } from '../../../components/room-avatar';
import { getDirectCreatePath, getDirectRoomPath } from '../../pathUtils'; import { getDirectCreatePath, getDirectRoomPath } from '../../pathUtils';
import { getCanonicalAliasOrRoomId } from '../../../utils/matrix'; import { getCanonicalAliasOrRoomId } from '../../../utils/matrix';
import { RoomUnreadProvider } from '../../../components/RoomUnreadProvider';
import { getRoomAvatarUrl } from '../../../utils/room';
import { nameInitials } from '../../../utils/common';
import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom'; import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
import { useDirectCreateSelected } from '../../../hooks/router/useDirectSelected'; import { useDirectCreateSelected } from '../../../hooks/router/useDirectSelected';
import { VirtualTile } from '../../../components/virtualizer'; import { VirtualTile } from '../../../components/virtualizer';
import { RoomNavItem } from '../../../features/room-nav-item';
import { muteChangesAtom } from '../../../state/room-list/mutedRoomList';
function DirectEmpty() { function DirectEmpty() {
return ( return (
@ -64,6 +61,9 @@ export function Direct() {
const scrollRef = useRef<HTMLDivElement>(null); const scrollRef = useRef<HTMLDivElement>(null);
const mDirects = useAtomValue(mDirectAtom); const mDirects = useAtomValue(mDirectAtom);
const directs = useDirects(mx, allRoomsAtom, mDirects); const directs = useDirects(mx, allRoomsAtom, mDirects);
const muteChanges = useAtomValue(muteChangesAtom);
const mutedRooms = muteChanges.added;
const selectedRoomId = useSelectedRoom(); const selectedRoomId = useSelectedRoom();
const createSelected = useDirectCreateSelected(); const createSelected = useDirectCreateSelected();
const noRoomToDisplay = directs.length === 0; const noRoomToDisplay = directs.length === 0;
@ -131,7 +131,6 @@ export function Direct() {
const room = mx.getRoom(roomId); const room = mx.getRoom(roomId);
if (!room) return null; if (!room) return null;
const selected = selectedRoomId === roomId; const selected = selectedRoomId === roomId;
const avatarSrc = getRoomAvatarUrl(mx, room);
return ( return (
<VirtualTile <VirtualTile
@ -139,49 +138,13 @@ export function Direct() {
key={vItem.index} key={vItem.index}
ref={virtualizer.measureElement} ref={virtualizer.measureElement}
> >
<RoomUnreadProvider roomId={roomId}> <RoomNavItem
{(unread) => ( room={room}
<NavItem selected={selected}
variant="Background" direct
radii="400" linkPath={getDirectRoomPath(getCanonicalAliasOrRoomId(mx, roomId))}
highlight={!!unread || selected} muted={mutedRooms.includes(roomId)}
aria-selected={selected}
>
<NavLink
to={getDirectRoomPath(getCanonicalAliasOrRoomId(mx, roomId))}
>
<NavItemContent size="T300">
<Box as="span" grow="Yes" alignItems="Center" gap="200">
<Avatar size="200" radii="400">
<RoomAvatar
src={avatarSrc}
alt={room.name}
renderInitials={() => (
<Text as="span" size="H6">
{nameInitials(room.name)}
</Text>
)}
/> />
</Avatar>
<Box as="span" grow="Yes">
<Text as="span" size="Inherit" truncate>
{room.name}
</Text>
</Box>
{unread && (
<UnreadBadgeCenter>
<UnreadBadge
highlight={unread.highlight > 0}
count={unread.total}
/>
</UnreadBadgeCenter>
)}
</Box>
</NavItemContent>
</NavLink>
</NavItem>
)}
</RoomUnreadProvider>
</VirtualTile> </VirtualTile>
); );
})} })}

53
src/app/pages/client/home/Home.tsx
View file

@ -2,6 +2,7 @@ import React, { useMemo, useRef } from 'react';
import { Outlet, useNavigate } from 'react-router-dom'; import { Outlet, useNavigate } from 'react-router-dom';
import { Avatar, Box, Button, Icon, Icons, Text } from 'folds'; import { Avatar, Box, Button, Icon, Icons, Text } from 'folds';
import { useVirtualizer } from '@tanstack/react-virtual'; import { useVirtualizer } from '@tanstack/react-virtual';
import { useAtomValue } from 'jotai';
import { ClientContentLayout } from '../ClientContentLayout'; import { ClientContentLayout } from '../ClientContentLayout';
import { ClientDrawerLayout } from '../ClientDrawerLayout'; import { ClientDrawerLayout } from '../ClientDrawerLayout';
import { ClientDrawerHeaderLayout } from '../ClientDrawerHeaderLayout'; import { ClientDrawerHeaderLayout } from '../ClientDrawerHeaderLayout';
@ -16,8 +17,6 @@ import {
NavItemContent, NavItemContent,
NavLink, NavLink,
} from '../../../components/nav'; } from '../../../components/nav';
import { UnreadBadge, UnreadBadgeCenter } from '../../../components/unread-badge';
import { RoomIcon } from '../../../components/room-avatar';
import { import {
getExplorePath, getExplorePath,
getHomeCreatePath, getHomeCreatePath,
@ -26,7 +25,6 @@ import {
getHomeSearchPath, getHomeSearchPath,
} from '../../pathUtils'; } from '../../pathUtils';
import { getCanonicalAliasOrRoomId } from '../../../utils/matrix'; import { getCanonicalAliasOrRoomId } from '../../../utils/matrix';
import { RoomUnreadProvider } from '../../../components/RoomUnreadProvider';
import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom'; import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
import { import {
useHomeCreateSelected, useHomeCreateSelected,
@ -36,6 +34,8 @@ import {
import { useHomeRooms } from './useHomeRooms'; import { useHomeRooms } from './useHomeRooms';
import { useMatrixClient } from '../../../hooks/useMatrixClient'; import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { VirtualTile } from '../../../components/virtualizer'; import { VirtualTile } from '../../../components/virtualizer';
import { RoomNavItem } from '../../../features/room-nav-item';
import { muteChangesAtom } from '../../../state/room-list/mutedRoomList';
function HomeEmpty() { function HomeEmpty() {
const navigate = useNavigate(); const navigate = useNavigate();
@ -82,6 +82,9 @@ export function Home() {
const mx = useMatrixClient(); const mx = useMatrixClient();
const scrollRef = useRef<HTMLDivElement>(null); const scrollRef = useRef<HTMLDivElement>(null);
const rooms = useHomeRooms(); const rooms = useHomeRooms();
const muteChanges = useAtomValue(muteChangesAtom);
const mutedRooms = muteChanges.added;
const selectedRoomId = useSelectedRoom(); const selectedRoomId = useSelectedRoom();
const createSelected = useHomeCreateSelected(); const createSelected = useHomeCreateSelected();
const joinSelected = useHomeJoinSelected(); const joinSelected = useHomeJoinSelected();
@ -187,45 +190,13 @@ export function Home() {
key={vItem.index} key={vItem.index}
ref={virtualizer.measureElement} ref={virtualizer.measureElement}
> >
<RoomUnreadProvider roomId={roomId}> <RoomNavItem
{(unread) => ( room={room}
<NavItem selected={selected}
variant="Background" direct={false}
radii="400" linkPath={getHomeRoomPath(getCanonicalAliasOrRoomId(mx, roomId))}
highlight={!!unread || selected} muted={mutedRooms.includes(roomId)}
aria-selected={selected}
>
<NavLink
to={getHomeRoomPath(getCanonicalAliasOrRoomId(mx, roomId))}
>
<NavItemContent size="T300">
<Box as="span" grow="Yes" alignItems="Center" gap="200">
<Avatar size="200" radii="400">
<RoomIcon
filled={selected}
size="100"
joinRule={room.getJoinRule()}
/> />
</Avatar>
<Box as="span" grow="Yes">
<Text as="span" size="Inherit" truncate>
{room.name}
</Text>
</Box>
{unread && (
<UnreadBadgeCenter>
<UnreadBadge
highlight={unread.highlight > 0}
count={unread.total}
/>
</UnreadBadgeCenter>
)}
</Box>
</NavItemContent>
</NavLink>
</NavItem>
)}
</RoomUnreadProvider>
</VirtualTile> </VirtualTile>
); );
})} })}

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

@ -26,7 +26,7 @@ import {
import { useSpace } from '../../../hooks/useSpace'; import { useSpace } from '../../../hooks/useSpace';
import { VirtualTile } from '../../../components/virtualizer'; import { VirtualTile } from '../../../components/virtualizer';
import { useSpaceHierarchy } from './useSpaceHierarchy'; import { useSpaceHierarchy } from './useSpaceHierarchy';
import { RoomNavItem } from '../../../features/room-nav-item/RoomNavItem'; import { RoomNavItem } from '../../../features/room-nav-item';
import { muteChangesAtom } from '../../../state/room-list/mutedRoomList'; import { muteChangesAtom } from '../../../state/room-list/mutedRoomList';
export function Space() { export function Space() {
@ -151,8 +151,8 @@ export function Space() {
<NavCategoryHeader> <NavCategoryHeader>
<Text size="O400" truncate> <Text size="O400" truncate>
{lastSpace?.roomId === space.roomId {lastSpace?.roomId === space.roomId
? 'People' ? 'Direct Messages'
: `${lastSpace?.name} - People`} : `Direct Messages - ${lastSpace?.name}`}
</Text> </Text>
</NavCategoryHeader> </NavCategoryHeader>
</div> </div>