mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-09-14 14:52:26 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update RoomView.tsx to accomodate restructuring of Room, RoomView and CallView

Browse source
This commit is contained in:
Gimle Larpes 2025-07-31 20:52:01 +02:00
parent fb9ca31a43
commit e504a9ef4c
1 changed files with 64 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

116
src/app/features/room/RoomView.tsx
View file

@ -1,5 +1,5 @@
import React, { useCallback, useRef } from 'react'; import React, { useCallback, useRef } from 'react';
import { Box, Text, config } from 'folds'; // Assuming 'folds' is a UI library import { Box, Text, config, toRem } from 'folds';
import { EventType, Room } from 'matrix-js-sdk'; import { EventType, Room } from 'matrix-js-sdk';
import { ReactEditor } from 'slate-react'; import { ReactEditor } from 'slate-react';
import { isKeyHotkey } from 'is-hotkey'; import { isKeyHotkey } from 'is-hotkey';
@ -15,7 +15,6 @@ import { RoomTombstone } from './RoomTombstone';
import { RoomInput } from './RoomInput'; import { RoomInput } from './RoomInput';
import { RoomViewFollowing, RoomViewFollowingPlaceholder } from './RoomViewFollowing'; import { RoomViewFollowing, RoomViewFollowingPlaceholder } from './RoomViewFollowing';
import { Page } from '../../components/page'; import { Page } from '../../components/page';
import { RoomViewHeader } from './RoomViewHeader';
import { useKeyDown } from '../../hooks/useKeyDown'; import { useKeyDown } from '../../hooks/useKeyDown';
import { editableActiveElement } from '../../utils/dom'; import { editableActiveElement } from '../../utils/dom';
import navigation from '../../../client/state/navigation'; import navigation from '../../../client/state/navigation';
@ -23,6 +22,8 @@ import { settingsAtom } from '../../state/settings';
import { useSetting } from '../../state/hooks/settings'; import { useSetting } from '../../state/hooks/settings';
import { useAccessibleTagColors, usePowerLevelTags } from '../../hooks/usePowerLevelTags'; import { useAccessibleTagColors, usePowerLevelTags } from '../../hooks/usePowerLevelTags';
import { useTheme } from '../../hooks/useTheme'; import { useTheme } from '../../hooks/useTheme';
import { useCallState } from '../../pages/client/call/CallProvider';
import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
const FN_KEYS_REGEX = /^F\d+$/; const FN_KEYS_REGEX = /^F\d+$/;
@ -64,6 +65,8 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
const roomInputRef = useRef<HTMLDivElement>(null); const roomInputRef = useRef<HTMLDivElement>(null);
const roomViewRef = useRef<HTMLDivElement>(null); const roomViewRef = useRef<HTMLDivElement>(null);
const [hideActivity] = useSetting(settingsAtom, 'hideActivity'); const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
const screenSize = useScreenSizeContext();
const { isChatOpen } = useCallState();
const { roomId } = room; const { roomId } = room;
const editor = useEditor(); const editor = useEditor();
const mx = useMatrixClient(); const mx = useMatrixClient();
@ -98,55 +101,64 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
); );
return ( return (
<Page ref={roomViewRef}> (!room.isCallRoom() || isChatOpen) && (
{!room.isCallRoom() && <RoomViewHeader />} <Page
<Box grow="Yes" direction="Column" style={{ flex: 1, overflow: 'hidden', minHeight: 0 }}> ref={roomViewRef}
<RoomTimeline style={
key={roomId} room.isCallRoom() && screenSize === ScreenSize.Desktop
room={room} ? { maxWidth: toRem(399), minWidth: toRem(399) }
eventId={eventId} : {}
roomInputRef={roomInputRef} }
editor={editor} >
getPowerLevelTag={getPowerLevelTag} <Box grow="Yes" direction="Column">
accessibleTagColors={accessibleTagColors} <RoomTimeline
/> key={roomId}
<RoomViewTyping room={room} /> room={room}
</Box> eventId={eventId}
<Box shrink="No" direction="Column"> roomInputRef={roomInputRef}
<div style={{ padding: `0 ${config.space.S400}` }}> editor={editor}
{' '} getPowerLevelTag={getPowerLevelTag}
{tombstoneEvent ? ( accessibleTagColors={accessibleTagColors}
<RoomTombstone />
roomId={roomId} <RoomViewTyping room={room} />
body={tombstoneEvent.getContent().body} </Box>
replacementRoomId={tombstoneEvent.getContent().replacement_room} <Box shrink="No" direction="Column">
/> <div style={{ padding: `0 ${config.space.S400}` }}>
) : ( {' '}
<> {tombstoneEvent ? (
{canMessage ? ( <RoomTombstone
<RoomInput roomId={roomId}
room={room} body={tombstoneEvent.getContent().body}
editor={editor} replacementRoomId={tombstoneEvent.getContent().replacement_room}
roomId={roomId} />
fileDropContainerRef={roomViewRef} ) : (
ref={roomInputRef} /* eslint-disable-next-line react/jsx-no-useless-fragment */
getPowerLevelTag={getPowerLevelTag} <>
accessibleTagColors={accessibleTagColors} {canMessage ? (
/> <RoomInput
) : ( room={room}
<RoomInputPlaceholder editor={editor}
style={{ padding: config.space.S200 }} roomId={roomId}
alignItems="Center" fileDropContainerRef={roomViewRef}
justifyContent="Center" ref={roomInputRef}
> getPowerLevelTag={getPowerLevelTag}
<Text align="Center">You do not have permission to post in this room</Text> accessibleTagColors={accessibleTagColors}
</RoomInputPlaceholder> />
)} ) : (
</> <RoomInputPlaceholder
)} style={{ padding: config.space.S200 }}
</div> alignItems="Center"
{hideActivity ? <RoomViewFollowingPlaceholder /> : <RoomViewFollowing room={room} />} justifyContent="Center"
</Box> >
</Page> <Text align="Center">You do not have permission to post in this room</Text>
</RoomInputPlaceholder>
)}
</>
)}
</div>
{hideActivity ? <RoomViewFollowingPlaceholder /> : <RoomViewFollowing room={room} />}
</Box>
</Page>
)
); );
} }