mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-02-23 13:43:07 +01:00
use room nav item in home and direct room list
This commit is contained in:
Ajay Bura
parent
45a5717560
commit
f07291017e
5 changed files with 30 additions and 95 deletions
|
|
@ -177,7 +177,7 @@ export function RoomNavItem({ room, selected, direct, muted, linkPath }: RoomNav
|
|||
<Avatar size="200" radii="400">
|
||||
{direct ? (
|
||||
<RoomAvatar
|
||||
variant="Background"
|
||||
variant="Secondary"
|
||||
src={getRoomAvatarUrl(mx, room, 96)}
|
||||
alt={room.name}
|
||||
renderInitials={() => <Text size="H6">{nameInitials(room.name)}</Text>}
|
||||
|
|
|
|||
1
src/app/features/room-nav-item/index.ts
Normal file
1
src/app/features/room-nav-item/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export * from './RoomNavItem';
|
||||
|
|
@ -21,16 +21,13 @@ import {
|
|||
NavItemContent,
|
||||
NavLink,
|
||||
} from '../../../components/nav';
|
||||
import { UnreadBadge, UnreadBadgeCenter } from '../../../components/unread-badge';
|
||||
import { RoomAvatar } from '../../../components/room-avatar';
|
||||
import { getDirectCreatePath, getDirectRoomPath } from '../../pathUtils';
|
||||
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 { useDirectCreateSelected } from '../../../hooks/router/useDirectSelected';
|
||||
import { VirtualTile } from '../../../components/virtualizer';
|
||||
import { RoomNavItem } from '../../../features/room-nav-item';
|
||||
import { muteChangesAtom } from '../../../state/room-list/mutedRoomList';
|
||||
|
||||
function DirectEmpty() {
|
||||
return (
|
||||
|
|
@ -64,6 +61,9 @@ export function Direct() {
|
|||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const mDirects = useAtomValue(mDirectAtom);
|
||||
const directs = useDirects(mx, allRoomsAtom, mDirects);
|
||||
const muteChanges = useAtomValue(muteChangesAtom);
|
||||
const mutedRooms = muteChanges.added;
|
||||
|
||||
const selectedRoomId = useSelectedRoom();
|
||||
const createSelected = useDirectCreateSelected();
|
||||
const noRoomToDisplay = directs.length === 0;
|
||||
|
|
@ -131,7 +131,6 @@ export function Direct() {
|
|||
const room = mx.getRoom(roomId);
|
||||
if (!room) return null;
|
||||
const selected = selectedRoomId === roomId;
|
||||
const avatarSrc = getRoomAvatarUrl(mx, room);
|
||||
|
||||
return (
|
||||
<VirtualTile
|
||||
|
|
@ -139,49 +138,13 @@ export function Direct() {
|
|||
key={vItem.index}
|
||||
ref={virtualizer.measureElement}
|
||||
>
|
||||
<RoomUnreadProvider roomId={roomId}>
|
||||
{(unread) => (
|
||||
<NavItem
|
||||
variant="Background"
|
||||
radii="400"
|
||||
highlight={!!unread || selected}
|
||||
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>
|
||||
<RoomNavItem
|
||||
room={room}
|
||||
selected={selected}
|
||||
direct
|
||||
linkPath={getDirectRoomPath(getCanonicalAliasOrRoomId(mx, roomId))}
|
||||
muted={mutedRooms.includes(roomId)}
|
||||
/>
|
||||
</VirtualTile>
|
||||
);
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import React, { useMemo, useRef } from 'react';
|
|||
import { Outlet, useNavigate } from 'react-router-dom';
|
||||
import { Avatar, Box, Button, Icon, Icons, Text } from 'folds';
|
||||
import { useVirtualizer } from '@tanstack/react-virtual';
|
||||
import { useAtomValue } from 'jotai';
|
||||
import { ClientContentLayout } from '../ClientContentLayout';
|
||||
import { ClientDrawerLayout } from '../ClientDrawerLayout';
|
||||
import { ClientDrawerHeaderLayout } from '../ClientDrawerHeaderLayout';
|
||||
|
|
@ -16,8 +17,6 @@ import {
|
|||
NavItemContent,
|
||||
NavLink,
|
||||
} from '../../../components/nav';
|
||||
import { UnreadBadge, UnreadBadgeCenter } from '../../../components/unread-badge';
|
||||
import { RoomIcon } from '../../../components/room-avatar';
|
||||
import {
|
||||
getExplorePath,
|
||||
getHomeCreatePath,
|
||||
|
|
@ -26,7 +25,6 @@ import {
|
|||
getHomeSearchPath,
|
||||
} from '../../pathUtils';
|
||||
import { getCanonicalAliasOrRoomId } from '../../../utils/matrix';
|
||||
import { RoomUnreadProvider } from '../../../components/RoomUnreadProvider';
|
||||
import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
|
||||
import {
|
||||
useHomeCreateSelected,
|
||||
|
|
@ -36,6 +34,8 @@ import {
|
|||
import { useHomeRooms } from './useHomeRooms';
|
||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||
import { VirtualTile } from '../../../components/virtualizer';
|
||||
import { RoomNavItem } from '../../../features/room-nav-item';
|
||||
import { muteChangesAtom } from '../../../state/room-list/mutedRoomList';
|
||||
|
||||
function HomeEmpty() {
|
||||
const navigate = useNavigate();
|
||||
|
|
@ -82,6 +82,9 @@ export function Home() {
|
|||
const mx = useMatrixClient();
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const rooms = useHomeRooms();
|
||||
const muteChanges = useAtomValue(muteChangesAtom);
|
||||
const mutedRooms = muteChanges.added;
|
||||
|
||||
const selectedRoomId = useSelectedRoom();
|
||||
const createSelected = useHomeCreateSelected();
|
||||
const joinSelected = useHomeJoinSelected();
|
||||
|
|
@ -187,45 +190,13 @@ export function Home() {
|
|||
key={vItem.index}
|
||||
ref={virtualizer.measureElement}
|
||||
>
|
||||
<RoomUnreadProvider roomId={roomId}>
|
||||
{(unread) => (
|
||||
<NavItem
|
||||
variant="Background"
|
||||
radii="400"
|
||||
highlight={!!unread || selected}
|
||||
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>
|
||||
<RoomNavItem
|
||||
room={room}
|
||||
selected={selected}
|
||||
direct={false}
|
||||
linkPath={getHomeRoomPath(getCanonicalAliasOrRoomId(mx, roomId))}
|
||||
muted={mutedRooms.includes(roomId)}
|
||||
/>
|
||||
</VirtualTile>
|
||||
);
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ import {
|
|||
import { useSpace } from '../../../hooks/useSpace';
|
||||
import { VirtualTile } from '../../../components/virtualizer';
|
||||
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';
|
||||
|
||||
export function Space() {
|
||||
|
|
@ -151,8 +151,8 @@ export function Space() {
|
|||
<NavCategoryHeader>
|
||||
<Text size="O400" truncate>
|
||||
{lastSpace?.roomId === space.roomId
|
||||
? 'People'
|
||||
: `${lastSpace?.name} - People`}
|
||||
? 'Direct Messages'
|
||||
: `Direct Messages - ${lastSpace?.name}`}
|
||||
</Text>
|
||||
</NavCategoryHeader>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue