mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-11-04 22:40:29 +03:00
threads - WIP
This commit is contained in:
parent
19096c3543
commit
1914606895
9 changed files with 312 additions and 116 deletions
90
src/app/components/thread-selector/ThreadSelector.tsx
Normal file
90
src/app/components/thread-selector/ThreadSelector.tsx
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
import { Avatar, Box, Icon, Icons, Text } from 'folds';
|
||||
import React, { ReactNode } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { IThreadBundledRelationship, Room } from 'matrix-js-sdk';
|
||||
import { ContainerColor } from '../../styles/ContainerColor.css';
|
||||
import * as css from './styles.css';
|
||||
import { UserAvatar } from '../user-avatar';
|
||||
import { getMemberAvatarMxc, getMemberDisplayName } from '../../utils/room';
|
||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
|
||||
import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
|
||||
|
||||
export function ThreadSelectorContainer({ children }: { children: ReactNode }) {
|
||||
return <Box className={css.ThreadSelectorContainer}>{children}</Box>;
|
||||
}
|
||||
|
||||
type ThreadSelectorProps = {
|
||||
room: Room;
|
||||
senderId: string;
|
||||
threadDetail: IThreadBundledRelationship;
|
||||
outlined?: boolean;
|
||||
};
|
||||
|
||||
export function ThreadSelector({ room, senderId, threadDetail, outlined }: ThreadSelectorProps) {
|
||||
const mx = useMatrixClient();
|
||||
const useAuthentication = useMediaAuthentication();
|
||||
const senderAvatarMxc = getMemberAvatarMxc(room, senderId);
|
||||
|
||||
const latestEvent = threadDetail.latest_event;
|
||||
const latestSenderId = latestEvent.sender;
|
||||
const latestSenderAvatarMxc = getMemberAvatarMxc(room, latestSenderId);
|
||||
const latestDisplayName =
|
||||
getMemberDisplayName(room, latestSenderId) ??
|
||||
getMxIdLocalPart(latestSenderId) ??
|
||||
latestSenderId;
|
||||
|
||||
const latestEventTs = latestEvent.origin_server_ts;
|
||||
|
||||
return (
|
||||
<Box
|
||||
className={classNames(
|
||||
css.ThreadSelector,
|
||||
outlined && css.ThreadSectorOutlined,
|
||||
ContainerColor({ variant: 'SurfaceVariant' })
|
||||
)}
|
||||
alignItems="Center"
|
||||
gap="200"
|
||||
>
|
||||
<Box gap="100" alignItems="Inherit">
|
||||
<Avatar size="200" radii="300">
|
||||
<UserAvatar
|
||||
userId={senderId}
|
||||
src={
|
||||
senderAvatarMxc
|
||||
? mxcUrlToHttp(mx, senderAvatarMxc, useAuthentication, 48, 48, 'crop') ?? undefined
|
||||
: undefined
|
||||
}
|
||||
alt={senderId}
|
||||
renderFallback={() => <Icon size="200" src={Icons.User} filled />}
|
||||
/>
|
||||
</Avatar>
|
||||
{latestSenderId && (
|
||||
<Avatar size="200" radii="300">
|
||||
<UserAvatar
|
||||
userId={latestSenderId}
|
||||
src={
|
||||
latestSenderAvatarMxc
|
||||
? mxcUrlToHttp(mx, latestSenderAvatarMxc, useAuthentication, 48, 48, 'crop') ??
|
||||
undefined
|
||||
: undefined
|
||||
}
|
||||
alt={senderId}
|
||||
renderFallback={() => <Icon size="200" src={Icons.User} filled />}
|
||||
/>
|
||||
</Avatar>
|
||||
)}
|
||||
</Box>
|
||||
<Box gap="200" alignItems="Inherit">
|
||||
<Text className={css.ThreadRepliesCount} size="L400">
|
||||
{threadDetail.count} Replies
|
||||
</Text>
|
||||
<Text size="T200" truncate>
|
||||
{/* TODO: date */}
|
||||
Last Reply by <b>{latestDisplayName}</b> at {new Date(latestEventTs).getTime()}
|
||||
</Text>
|
||||
<Icon size="100" src={Icons.ChevronRight} />
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
1
src/app/components/thread-selector/index.ts
Normal file
1
src/app/components/thread-selector/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export * from './ThreadSelector';
|
||||
20
src/app/components/thread-selector/styles.css.ts
Normal file
20
src/app/components/thread-selector/styles.css.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import { style } from '@vanilla-extract/css';
|
||||
import { color, config } from 'folds';
|
||||
|
||||
export const ThreadSelectorContainer = style({
|
||||
paddingTop: config.space.S100,
|
||||
});
|
||||
|
||||
export const ThreadSelector = style({
|
||||
padding: config.space.S200,
|
||||
borderRadius: config.radii.R400,
|
||||
});
|
||||
|
||||
export const ThreadSectorOutlined = style({
|
||||
borderWidth: config.borderWidth.B300,
|
||||
});
|
||||
|
||||
export const ThreadRepliesCount = style({
|
||||
color: color.Primary.Main,
|
||||
flexShrink: 0,
|
||||
});
|
||||
|
|
@ -77,6 +77,7 @@ import {
|
|||
decryptAllTimelineEvent,
|
||||
getEditedEvent,
|
||||
getEventReactions,
|
||||
getEventThreadDetail,
|
||||
getLatestEditableEvt,
|
||||
getMemberDisplayName,
|
||||
getReactionContent,
|
||||
|
|
@ -126,6 +127,7 @@ import { useAccessiblePowerTagColors, useGetMemberPowerTag } from '../../hooks/u
|
|||
import { useTheme } from '../../hooks/useTheme';
|
||||
import { useRoomCreatorsTag } from '../../hooks/useRoomCreatorsTag';
|
||||
import { usePowerLevelTags } from '../../hooks/usePowerLevelTags';
|
||||
import { ThreadSelector, ThreadSelectorContainer } from '../../components/thread-selector';
|
||||
|
||||
const TimelineFloat = as<'div', css.TimelineFloatVariants>(
|
||||
({ position, className, ...props }, ref) => (
|
||||
|
|
@ -1034,6 +1036,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
|
|||
const senderId = mEvent.getSender() ?? '';
|
||||
const senderDisplayName =
|
||||
getMemberDisplayName(room, senderId) ?? getMxIdLocalPart(senderId) ?? senderId;
|
||||
const threadDetail = getEventThreadDetail(mEvent);
|
||||
|
||||
return (
|
||||
<Message
|
||||
|
|
@ -1107,6 +1110,12 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
|
|||
outlineAttachment={messageLayout === MessageLayout.Bubble}
|
||||
/>
|
||||
)}
|
||||
|
||||
{threadDetail && (
|
||||
<ThreadSelectorContainer>
|
||||
<ThreadSelector room={room} senderId={senderId} threadDetail={threadDetail} />
|
||||
</ThreadSelectorContainer>
|
||||
)}
|
||||
</Message>
|
||||
);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -69,6 +69,7 @@ import { useRoomNavigate } from '../../hooks/useRoomNavigate';
|
|||
import { useRoomCreators } from '../../hooks/useRoomCreators';
|
||||
import { useRoomPermissions } from '../../hooks/useRoomPermissions';
|
||||
import { InviteUserPrompt } from '../../components/invite-user-prompt';
|
||||
import { ThreadsMenu } from './threads-menu';
|
||||
|
||||
type RoomMenuProps = {
|
||||
room: Room;
|
||||
|
|
@ -263,6 +264,7 @@ export function RoomViewHeader() {
|
|||
const space = useSpaceOptionally();
|
||||
const [menuAnchor, setMenuAnchor] = useState<RectCords>();
|
||||
const [pinMenuAnchor, setPinMenuAnchor] = useState<RectCords>();
|
||||
const [threadsMenuAnchor, setThreadsMenuAnchor] = useState<RectCords>();
|
||||
const mDirects = useAtomValue(mDirectAtom);
|
||||
|
||||
const pinnedEvents = useRoomPinnedEvents(room);
|
||||
|
|
@ -295,6 +297,10 @@ export function RoomViewHeader() {
|
|||
setPinMenuAnchor(evt.currentTarget.getBoundingClientRect());
|
||||
};
|
||||
|
||||
const handleOpenThreadsMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
|
||||
setThreadsMenuAnchor(evt.currentTarget.getBoundingClientRect());
|
||||
};
|
||||
|
||||
return (
|
||||
<PageHeader balance={screenSize === ScreenSize.Mobile}>
|
||||
<Box grow="Yes" gap="300">
|
||||
|
|
@ -430,35 +436,18 @@ export function RoomViewHeader() {
|
|||
offset={4}
|
||||
tooltip={
|
||||
<Tooltip>
|
||||
<Text>Threads</Text>
|
||||
<Text>My Threads</Text>
|
||||
</Tooltip>
|
||||
}
|
||||
>
|
||||
{(triggerRef) => (
|
||||
<IconButton
|
||||
style={{ position: 'relative' }}
|
||||
onClick={handleOpenPinMenu}
|
||||
onClick={handleOpenThreadsMenu}
|
||||
ref={triggerRef}
|
||||
aria-pressed={!!pinMenuAnchor}
|
||||
aria-pressed={!!threadsMenuAnchor}
|
||||
>
|
||||
{pinnedEvents.length > 0 && (
|
||||
<Badge
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: toRem(3),
|
||||
top: toRem(3),
|
||||
}}
|
||||
variant="Secondary"
|
||||
size="400"
|
||||
fill="Solid"
|
||||
radii="Pill"
|
||||
>
|
||||
<Text as="span" size="L400">
|
||||
{pinnedEvents.length}
|
||||
</Text>
|
||||
</Badge>
|
||||
)}
|
||||
<Icon size="400" src={Icons.Thread} filled={!!pinMenuAnchor} />
|
||||
<Icon size="400" src={Icons.Thread} filled={!!threadsMenuAnchor} />
|
||||
</IconButton>
|
||||
)}
|
||||
</TooltipProvider>
|
||||
|
|
@ -481,6 +470,25 @@ export function RoomViewHeader() {
|
|||
</FocusTrap>
|
||||
}
|
||||
/>
|
||||
<PopOut
|
||||
anchor={threadsMenuAnchor}
|
||||
position="Bottom"
|
||||
content={
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: false,
|
||||
returnFocusOnDeactivate: false,
|
||||
onDeactivate: () => setThreadsMenuAnchor(undefined),
|
||||
clickOutsideDeactivates: true,
|
||||
isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
|
||||
isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
|
||||
escapeDeactivates: stopPropagation,
|
||||
}}
|
||||
>
|
||||
<ThreadsMenu room={room} requestClose={() => setThreadsMenuAnchor(undefined)} />
|
||||
</FocusTrap>
|
||||
}
|
||||
/>
|
||||
{screenSize === ScreenSize.Desktop && (
|
||||
<TooltipProvider
|
||||
position="Bottom"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/* eslint-disable react/destructuring-assignment */
|
||||
import React, { forwardRef, MouseEventHandler, useMemo, useRef } from 'react';
|
||||
import { MatrixEvent, Room } from 'matrix-js-sdk';
|
||||
import { IRoomEvent, MatrixEvent, Room } from 'matrix-js-sdk';
|
||||
import {
|
||||
Avatar,
|
||||
Box,
|
||||
|
|
@ -19,14 +19,11 @@ import {
|
|||
import { Opts as LinkifyOpts } from 'linkifyjs';
|
||||
import { HTMLReactParserOptions } from 'html-react-parser';
|
||||
import { useVirtualizer } from '@tanstack/react-virtual';
|
||||
import { useRoomPinnedEvents } from '../../../hooks/useRoomPinnedEvents';
|
||||
import * as css from './ThreadsMenu.css';
|
||||
import { SequenceCard } from '../../../components/sequence-card';
|
||||
import { useRoomEvent } from '../../../hooks/useRoomEvent';
|
||||
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
|
||||
import {
|
||||
AvatarBase,
|
||||
DefaultPlaceholder,
|
||||
ImageContent,
|
||||
MessageNotDecryptedContent,
|
||||
MessageUnsupportedContent,
|
||||
|
|
@ -41,7 +38,12 @@ import {
|
|||
import { UserAvatar } from '../../../components/user-avatar';
|
||||
import { getMxIdLocalPart, mxcUrlToHttp } from '../../../utils/matrix';
|
||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||
import { getEditedEvent, getMemberAvatarMxc, getMemberDisplayName } from '../../../utils/room';
|
||||
import {
|
||||
getEditedEvent,
|
||||
getEventThreadDetail,
|
||||
getMemberAvatarMxc,
|
||||
getMemberDisplayName,
|
||||
} from '../../../utils/room';
|
||||
import { GetContentCallback, MessageEvent } from '../../../../types/matrix/room';
|
||||
import { useMentionClickHandler } from '../../../hooks/useMentionClickHandler';
|
||||
import { useSpoilerClickHandler } from '../../../hooks/useSpoilerClickHandler';
|
||||
|
|
@ -62,36 +64,48 @@ import { Image } from '../../../components/media';
|
|||
import { ImageViewer } from '../../../components/image-viewer';
|
||||
import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
|
||||
import { VirtualTile } from '../../../components/virtualizer';
|
||||
import { usePowerLevelsAPI, usePowerLevelsContext } from '../../../hooks/usePowerLevels';
|
||||
import { usePowerLevelsContext } from '../../../hooks/usePowerLevels';
|
||||
import { ContainerColor } from '../../../styles/ContainerColor.css';
|
||||
import {
|
||||
getTagIconSrc,
|
||||
useAccessibleTagColors,
|
||||
usePowerLevelTags,
|
||||
} from '../../../hooks/usePowerLevelTags';
|
||||
import { usePowerLevelTags } from '../../../hooks/usePowerLevelTags';
|
||||
import { useTheme } from '../../../hooks/useTheme';
|
||||
import { PowerIcon } from '../../../components/power';
|
||||
import colorMXID from '../../../../util/colorMXID';
|
||||
import { useIsDirectRoom } from '../../../hooks/useRoom';
|
||||
import { useRoomCreators } from '../../../hooks/useRoomCreators';
|
||||
import {
|
||||
GetMemberPowerTag,
|
||||
getPowerTagIconSrc,
|
||||
useAccessiblePowerTagColors,
|
||||
useGetMemberPowerTag,
|
||||
} from '../../../hooks/useMemberPowerTag';
|
||||
import { useRoomCreatorsTag } from '../../../hooks/useRoomCreatorsTag';
|
||||
import { useRoomMyThreads } from '../../../hooks/useRoomThreads';
|
||||
import { ThreadSelector, ThreadSelectorContainer } from '../../../components/thread-selector';
|
||||
|
||||
type ThreadsProps = {
|
||||
type ThreadMessageProps = {
|
||||
room: Room;
|
||||
eventId: string;
|
||||
event: MatrixEvent;
|
||||
renderContent: RenderMatrixEvent<[MatrixEvent, string, GetContentCallback]>;
|
||||
onOpen: (roomId: string, eventId: string) => void;
|
||||
getMemberPowerTag: GetMemberPowerTag;
|
||||
accessibleTagColors: Map<string, string>;
|
||||
legacyUsernameColor: boolean;
|
||||
hour24Clock: boolean;
|
||||
dateFormatString: string;
|
||||
};
|
||||
function Threads({ room, eventId, renderContent, onOpen }: ThreadsProps) {
|
||||
const pinnedEvent = useRoomEvent(room, eventId);
|
||||
function ThreadMessage({
|
||||
room,
|
||||
event,
|
||||
renderContent,
|
||||
onOpen,
|
||||
getMemberPowerTag,
|
||||
accessibleTagColors,
|
||||
legacyUsernameColor,
|
||||
hour24Clock,
|
||||
dateFormatString,
|
||||
}: ThreadMessageProps) {
|
||||
const useAuthentication = useMediaAuthentication();
|
||||
const mx = useMatrixClient();
|
||||
const direct = useIsDirectRoom();
|
||||
const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
|
||||
|
||||
const powerLevels = usePowerLevelsContext();
|
||||
const { getPowerLevel } = usePowerLevelsAPI(powerLevels);
|
||||
const [powerLevelTags, getPowerLevelTag] = usePowerLevelTags(room, powerLevels);
|
||||
const theme = useTheme();
|
||||
const accessibleTagColors = useAccessibleTagColors(theme.kind, powerLevelTags);
|
||||
|
||||
const handleOpenClick: MouseEventHandler = (evt) => {
|
||||
evt.stopPropagation();
|
||||
|
|
@ -102,36 +116,31 @@ function Threads({ room, eventId, renderContent, onOpen }: ThreadsProps) {
|
|||
|
||||
const renderOptions = () => (
|
||||
<Box shrink="No" gap="200" alignItems="Center">
|
||||
<Chip data-event-id={eventId} onClick={handleOpenClick} variant="Secondary" radii="Pill">
|
||||
<Chip
|
||||
data-event-id={event.getId()}
|
||||
onClick={handleOpenClick}
|
||||
variant="Secondary"
|
||||
radii="Pill"
|
||||
>
|
||||
<Text size="T200">Open</Text>
|
||||
</Chip>
|
||||
</Box>
|
||||
);
|
||||
|
||||
if (pinnedEvent === undefined) return <DefaultPlaceholder variant="Secondary" />;
|
||||
if (pinnedEvent === null)
|
||||
return (
|
||||
<Box gap="300" justifyContent="SpaceBetween" alignItems="Center">
|
||||
<Box>
|
||||
<Text style={{ color: color.Critical.Main }}>Failed to load message!</Text>
|
||||
</Box>
|
||||
{renderOptions()}
|
||||
</Box>
|
||||
);
|
||||
|
||||
const sender = pinnedEvent.getSender()!;
|
||||
const sender = event.getSender()!;
|
||||
const displayName = getMemberDisplayName(room, sender) ?? getMxIdLocalPart(sender) ?? sender;
|
||||
const senderAvatarMxc = getMemberAvatarMxc(room, sender);
|
||||
const getContent = (() => pinnedEvent.getContent()) as GetContentCallback;
|
||||
const getContent = (() => event.getContent()) as GetContentCallback;
|
||||
|
||||
const senderPowerLevel = getPowerLevel(sender);
|
||||
const powerLevelTag = getPowerLevelTag(senderPowerLevel);
|
||||
const tagColor = powerLevelTag?.color ? accessibleTagColors?.get(powerLevelTag.color) : undefined;
|
||||
const tagIconSrc = powerLevelTag?.icon
|
||||
? getTagIconSrc(mx, useAuthentication, powerLevelTag.icon)
|
||||
const memberPowerTag = getMemberPowerTag(sender);
|
||||
const tagColor = memberPowerTag?.color
|
||||
? accessibleTagColors?.get(memberPowerTag.color)
|
||||
: undefined;
|
||||
const tagIconSrc = memberPowerTag?.icon
|
||||
? getPowerTagIconSrc(mx, useAuthentication, memberPowerTag.icon)
|
||||
: undefined;
|
||||
|
||||
const usernameColor = legacyUsernameColor || direct ? colorMXID(sender) : tagColor;
|
||||
const usernameColor = legacyUsernameColor ? colorMXID(sender) : tagColor;
|
||||
|
||||
return (
|
||||
<ModernLayout
|
||||
|
|
@ -163,23 +172,22 @@ function Threads({ room, eventId, renderContent, onOpen }: ThreadsProps) {
|
|||
</Username>
|
||||
{tagIconSrc && <PowerIcon size="100" iconSrc={tagIconSrc} />}
|
||||
</Box>
|
||||
<Time ts={pinnedEvent.getTs()} />
|
||||
<Time ts={event.getTs()} hour24Clock={hour24Clock} dateFormatString={dateFormatString} />
|
||||
</Box>
|
||||
{renderOptions()}
|
||||
</Box>
|
||||
{pinnedEvent.replyEventId && (
|
||||
{event.replyEventId && (
|
||||
<Reply
|
||||
room={room}
|
||||
replyEventId={pinnedEvent.replyEventId}
|
||||
threadRootId={pinnedEvent.threadRootId}
|
||||
replyEventId={event.replyEventId}
|
||||
threadRootId={event.threadRootId}
|
||||
onClick={handleOpenClick}
|
||||
getPowerLevel={getPowerLevel}
|
||||
getPowerLevelTag={getPowerLevelTag}
|
||||
getMemberPowerTag={getMemberPowerTag}
|
||||
accessibleTagColors={accessibleTagColors}
|
||||
legacyUsernameColor={legacyUsernameColor}
|
||||
/>
|
||||
)}
|
||||
{renderContent(pinnedEvent.getType(), false, pinnedEvent, displayName, getContent)}
|
||||
{renderContent(event.getType(), false, event, displayName, getContent)}
|
||||
</ModernLayout>
|
||||
);
|
||||
}
|
||||
|
|
@ -191,17 +199,37 @@ type ThreadsMenuProps = {
|
|||
export const ThreadsMenu = forwardRef<HTMLDivElement, ThreadsMenuProps>(
|
||||
({ room, requestClose }, ref) => {
|
||||
const mx = useMatrixClient();
|
||||
const powerLevels = usePowerLevelsContext();
|
||||
const creators = useRoomCreators(room);
|
||||
|
||||
const creatorsTag = useRoomCreatorsTag();
|
||||
const powerLevelTags = usePowerLevelTags(room, powerLevels);
|
||||
const getMemberPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
|
||||
|
||||
const theme = useTheme();
|
||||
const accessibleTagColors = useAccessiblePowerTagColors(
|
||||
theme.kind,
|
||||
creatorsTag,
|
||||
powerLevelTags
|
||||
);
|
||||
|
||||
const pinnedEvents = useRoomPinnedEvents(room);
|
||||
const sortedPinnedEvent = useMemo(() => Array.from(pinnedEvents).reverse(), [pinnedEvents]);
|
||||
const useAuthentication = useMediaAuthentication();
|
||||
const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
|
||||
const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
|
||||
|
||||
const direct = useIsDirectRoom();
|
||||
const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
|
||||
|
||||
const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
|
||||
const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
|
||||
|
||||
const { navigateRoom } = useRoomNavigate();
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const events = useRoomMyThreads(room);
|
||||
|
||||
const virtualizer = useVirtualizer({
|
||||
count: sortedPinnedEvent.length,
|
||||
count: events?.length ?? 0,
|
||||
getScrollElement: () => scrollRef.current,
|
||||
estimateSize: () => 75,
|
||||
overscan: 4,
|
||||
|
|
@ -239,38 +267,39 @@ export const ThreadsMenu = forwardRef<HTMLDivElement, ThreadsMenuProps>(
|
|||
);
|
||||
}
|
||||
|
||||
const threadDetail = getEventThreadDetail(event);
|
||||
|
||||
return (
|
||||
<RenderMessageContent
|
||||
displayName={displayName}
|
||||
msgType={event.getContent().msgtype ?? ''}
|
||||
ts={event.getTs()}
|
||||
getContent={getContent}
|
||||
edited={!!event.replacingEvent()}
|
||||
mediaAutoLoad={mediaAutoLoad}
|
||||
urlPreview={urlPreview}
|
||||
htmlReactParserOptions={htmlReactParserOptions}
|
||||
linkifyOpts={linkifyOpts}
|
||||
outlineAttachment
|
||||
/>
|
||||
<>
|
||||
<RenderMessageContent
|
||||
displayName={displayName}
|
||||
msgType={event.getContent().msgtype ?? ''}
|
||||
ts={event.getTs()}
|
||||
getContent={getContent}
|
||||
edited={!!event.replacingEvent()}
|
||||
mediaAutoLoad={mediaAutoLoad}
|
||||
urlPreview={urlPreview}
|
||||
htmlReactParserOptions={htmlReactParserOptions}
|
||||
linkifyOpts={linkifyOpts}
|
||||
outlineAttachment
|
||||
/>
|
||||
{threadDetail && (
|
||||
<ThreadSelectorContainer>
|
||||
<ThreadSelector
|
||||
room={room}
|
||||
senderId={event.getSender()!}
|
||||
threadDetail={threadDetail}
|
||||
outlined
|
||||
/>
|
||||
</ThreadSelectorContainer>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
},
|
||||
[MessageEvent.RoomMessageEncrypted]: (event, displayName) => {
|
||||
const eventId = event.getId()!;
|
||||
[MessageEvent.RoomMessageEncrypted]: (mEvent, displayName) => {
|
||||
const eventId = mEvent.getId()!;
|
||||
const evtTimeline = room.getTimelineForEvent(eventId);
|
||||
|
||||
const mEvent = evtTimeline?.getEvents().find((e) => e.getId() === eventId);
|
||||
|
||||
if (!mEvent || !evtTimeline) {
|
||||
return (
|
||||
<Box grow="Yes" direction="Column">
|
||||
<Text size="T400" priority="300">
|
||||
<code className={customHtmlCss.Code}>{event.getType()}</code>
|
||||
{' event'}
|
||||
</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<EncryptedContent mEvent={mEvent}>
|
||||
{() => {
|
||||
|
|
@ -290,7 +319,8 @@ export const ThreadsMenu = forwardRef<HTMLDivElement, ThreadsMenuProps>(
|
|||
/>
|
||||
);
|
||||
if (mEvent.getType() === MessageEvent.RoomMessage) {
|
||||
const editedEvent = getEditedEvent(eventId, mEvent, evtTimeline.getTimelineSet());
|
||||
const editedEvent =
|
||||
evtTimeline && getEditedEvent(eventId, mEvent, evtTimeline.getTimelineSet());
|
||||
const getContent = (() =>
|
||||
editedEvent?.getContent()['m.new_content'] ??
|
||||
mEvent.getContent()) as GetContentCallback;
|
||||
|
|
@ -371,7 +401,7 @@ export const ThreadsMenu = forwardRef<HTMLDivElement, ThreadsMenuProps>(
|
|||
<Box grow="Yes" direction="Column">
|
||||
<Header className={css.ThreadsMenuHeader} size="500">
|
||||
<Box grow="Yes">
|
||||
<Text size="H5">Threads</Text>
|
||||
<Text size="H5">My Threads</Text>
|
||||
</Box>
|
||||
<Box shrink="No">
|
||||
<IconButton size="300" onClick={requestClose} radii="300">
|
||||
|
|
@ -382,7 +412,7 @@ export const ThreadsMenu = forwardRef<HTMLDivElement, ThreadsMenuProps>(
|
|||
<Box grow="Yes">
|
||||
<Scroll ref={scrollRef} size="300" hideTrack visibility="Hover">
|
||||
<Box className={css.ThreadsMenuContent} direction="Column" gap="100">
|
||||
{sortedPinnedEvent.length > 0 ? (
|
||||
{events && events.length > 0 ? (
|
||||
<div
|
||||
style={{
|
||||
position: 'relative',
|
||||
|
|
@ -390,8 +420,8 @@ export const ThreadsMenu = forwardRef<HTMLDivElement, ThreadsMenuProps>(
|
|||
}}
|
||||
>
|
||||
{virtualizer.getVirtualItems().map((vItem) => {
|
||||
const eventId = sortedPinnedEvent[vItem.index];
|
||||
if (!eventId) return null;
|
||||
const event = events[vItem.index];
|
||||
if (!event.getId()) return null;
|
||||
|
||||
return (
|
||||
<VirtualTile
|
||||
|
|
@ -405,11 +435,16 @@ export const ThreadsMenu = forwardRef<HTMLDivElement, ThreadsMenuProps>(
|
|||
variant="SurfaceVariant"
|
||||
direction="Column"
|
||||
>
|
||||
<Threads
|
||||
<ThreadMessage
|
||||
room={room}
|
||||
eventId={eventId}
|
||||
event={event}
|
||||
renderContent={renderMatrixEvent}
|
||||
onOpen={handleOpen}
|
||||
getMemberPowerTag={getMemberPowerTag}
|
||||
accessibleTagColors={accessibleTagColors}
|
||||
legacyUsernameColor={legacyUsernameColor || direct}
|
||||
hour24Clock={hour24Clock}
|
||||
dateFormatString={dateFormatString}
|
||||
/>
|
||||
</SequenceCard>
|
||||
</VirtualTile>
|
||||
|
|
@ -441,7 +476,7 @@ export const ThreadsMenu = forwardRef<HTMLDivElement, ThreadsMenuProps>(
|
|||
No Threads
|
||||
</Text>
|
||||
<Text size="T400" align="Center">
|
||||
This room does not have any threads yet.
|
||||
Threads you are participating in will appear here.
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
|
|
|
|||
1
src/app/features/room/threads-menu/index.ts
Normal file
1
src/app/features/room/threads-menu/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export * from './ThreadsMenu';
|
||||
|
|
@ -1,9 +1,29 @@
|
|||
// import { Room } from 'matrix-js-sdk';
|
||||
// import { useMatrixClient } from './useMatrixClient';
|
||||
import { useCallback } from 'react';
|
||||
import { Direction, MatrixEvent, Room, ThreadFilterType } from 'matrix-js-sdk';
|
||||
import { useMatrixClient } from './useMatrixClient';
|
||||
import { AsyncStatus, useAsyncCallbackValue } from './useAsyncCallback';
|
||||
|
||||
// export const useRoomThreads = (room: Room) => {
|
||||
// const mx = useMatrixClient();
|
||||
export const useRoomMyThreads = (room: Room): MatrixEvent[] | undefined => {
|
||||
const mx = useMatrixClient();
|
||||
|
||||
// mx.createThreadListMessagesRequest;
|
||||
// mx.processThreadRoots;
|
||||
// };
|
||||
const [fetchState] = useAsyncCallbackValue(
|
||||
useCallback(
|
||||
() =>
|
||||
mx.createThreadListMessagesRequest(
|
||||
room.roomId,
|
||||
null,
|
||||
30,
|
||||
Direction.Backward,
|
||||
ThreadFilterType.My
|
||||
),
|
||||
[mx, room]
|
||||
)
|
||||
);
|
||||
|
||||
if (fetchState.status === AsyncStatus.Success) {
|
||||
const roomEvents = fetchState.data.chunk;
|
||||
const mEvents = roomEvents.map((event) => new MatrixEvent(event)).reverse();
|
||||
return mEvents;
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import {
|
|||
IPowerLevelsContent,
|
||||
IPushRule,
|
||||
IPushRules,
|
||||
IThreadBundledRelationship,
|
||||
JoinRule,
|
||||
MatrixClient,
|
||||
MatrixEvent,
|
||||
|
|
@ -16,6 +17,7 @@ import {
|
|||
RelationType,
|
||||
Room,
|
||||
RoomMember,
|
||||
THREAD_RELATION_TYPE,
|
||||
} from 'matrix-js-sdk';
|
||||
import { CryptoBackend } from 'matrix-js-sdk/lib/common-crypto/CryptoBackend';
|
||||
import { AccountDataEvent } from '../../types/matrix/accountData';
|
||||
|
|
@ -551,3 +553,13 @@ export const guessPerfectParent = (
|
|||
|
||||
return perfectParent;
|
||||
};
|
||||
|
||||
export const getEventThreadDetail = (
|
||||
mEvent: MatrixEvent
|
||||
): IThreadBundledRelationship | undefined => {
|
||||
const details = mEvent.getServerAggregatedRelation<IThreadBundledRelationship>(
|
||||
THREAD_RELATION_TYPE.name
|
||||
);
|
||||
|
||||
return details;
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue