mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-06 23:30:28 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

revert changes on this to b4f67ce

Browse source
This commit is contained in:
Gigiaj 2025-04-17 02:22:40 -05:00
parent 232fbc5c62
commit 8d285d45f7
1 changed files with 69 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

159
src/app/features/room/RoomViewHeader.tsx
View file

@ -21,12 +21,11 @@ import {
RectCords, RectCords,
Badge, Badge,
Spinner, Spinner,
} from 'folds'; // Assuming 'folds' is your UI library } from 'folds';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { JoinRule, Room } from 'matrix-js-sdk'; import { JoinRule, Room } from 'matrix-js-sdk';
import { useAtomValue } from 'jotai'; import { useAtomValue } from 'jotai';
// --- Required Imports (Adjust paths as needed) ---
import { useStateEvent } from '../../hooks/useStateEvent'; import { useStateEvent } from '../../hooks/useStateEvent';
import { PageHeader } from '../../components/page'; import { PageHeader } from '../../components/page';
import { RoomAvatar, RoomIcon } from '../../components/room-avatar'; import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
@ -41,7 +40,7 @@ import { useSpaceOptionally } from '../../hooks/useSpace';
import { getHomeSearchPath, getSpaceSearchPath, withSearchParam } from '../../pages/pathUtils'; import { getHomeSearchPath, getSpaceSearchPath, withSearchParam } from '../../pages/pathUtils';
import { getCanonicalAliasOrRoomId, isRoomAlias, mxcUrlToHttp } from '../../utils/matrix'; import { getCanonicalAliasOrRoomId, isRoomAlias, mxcUrlToHttp } from '../../utils/matrix';
import { _SearchPathSearchParams } from '../../pages/paths'; import { _SearchPathSearchParams } from '../../pages/paths';
import * as css from './RoomViewHeader.css'; // Assuming CSS Modules import * as css from './RoomViewHeader.css';
import { useRoomUnread } from '../../state/hooks/unread'; import { useRoomUnread } from '../../state/hooks/unread';
import { usePowerLevelsAPI, usePowerLevelsContext } from '../../hooks/usePowerLevels'; import { usePowerLevelsAPI, usePowerLevelsContext } from '../../hooks/usePowerLevels';
import { markAsRead } from '../../../client/action/notifications'; import { markAsRead } from '../../../client/action/notifications';
@ -67,14 +66,11 @@ import {
useRoomsNotificationPreferencesContext, useRoomsNotificationPreferencesContext,
} from '../../hooks/useRoomsNotificationPreferences'; } from '../../hooks/useRoomsNotificationPreferences';
// --- RoomMenu Component (Assuming it's defined elsewhere or here) ---
// (Include the RoomMenu component code from the previous snippet here if needed)
type RoomMenuProps = { type RoomMenuProps = {
room: Room; room: Room;
requestClose: () => void; requestClose: () => void;
}; };
const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose }, ref) => { const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose }, ref) => {
// ... (RoomMenu implementation from previous snippet) ...
const mx = useMatrixClient(); const mx = useMatrixClient();
const [hideActivity] = useSetting(settingsAtom, 'hideActivity'); const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
const unread = useRoomUnread(room.roomId, roomToUnreadAtom); const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
@ -213,9 +209,7 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
); );
}); });
// --- RoomViewHeader Component ---
export function RoomViewHeader() { export function RoomViewHeader() {
// --- Hooks ---
const navigate = useNavigate(); const navigate = useNavigate();
const mx = useMatrixClient(); const mx = useMatrixClient();
const useAuthentication = useMediaAuthentication(); const useAuthentication = useMediaAuthentication();
@ -238,22 +232,19 @@ export function RoomViewHeader() {
const setPeopleDrawer = useSetSetting(settingsAtom, 'isPeopleDrawer'); const setPeopleDrawer = useSetSetting(settingsAtom, 'isPeopleDrawer');
// --- Event Handlers --- // I assume there is a global state so I don't have to run this check every time but for now we'll stub this in
const isDirectMessage = () => { const isDirectMessage = () => {
// Simplified check - consider optimizing if performance is an issue
const mDirectsEvent = mx.getAccountData('m.direct'); const mDirectsEvent = mx.getAccountData('m.direct');
const { roomId } = room; const { roomId } = room;
return ( return (
!!mDirectsEvent?.event.content && Object.values(mDirectsEvent?.event.content).filter((e) => {
Object.values(mDirectsEvent.event.content).flat().includes(roomId) if (e.indexOf(roomId) === 0) return true;
}).length !== 0
); );
}; };
const handleCall: MouseEventHandler<HTMLButtonElement> = (evt) => { const handleCall: MouseEventHandler<HTMLButtonElement> = (evt) => {
// Placeholder for call initiation logic setMenuAnchor(evt.currentTarget.getBoundingClientRect());
console.log('Initiate call');
// Potentially set anchor for a call menu if needed, similar to other menus
// setMenuAnchor(evt.currentTarget.getBoundingClientRect());
}; };
const handleSearchClick = () => { const handleSearchClick = () => {
@ -274,29 +265,21 @@ export function RoomViewHeader() {
setPinMenuAnchor(evt.currentTarget.getBoundingClientRect()); setPinMenuAnchor(evt.currentTarget.getBoundingClientRect());
}; };
// --- Render ---
return ( return (
// Use PageHeader component for consistent header styling
<PageHeader balance={screenSize === ScreenSize.Mobile}> <PageHeader balance={screenSize === ScreenSize.Mobile}>
{/* Main container Box: Uses Flexbox (row), aligns items vertically centered */} <Box grow="Yes" gap="300">
<Box grow="Yes" alignItems="Center" gap="300"> {screenSize === ScreenSize.Mobile && (
{' '} <BackRouteHandler>
{/* Adjust gap as needed */} {(onBack) => (
{/* --- LEFT GROUP --- */} <Box shrink="No" alignItems="Center">
{/* This Box groups elements intended for the left side */}
{/* It takes only the width required by its content */}
<Box alignItems="Center" gap="300">
{/* Back button shown only on mobile */}
{screenSize === ScreenSize.Mobile && (
<BackRouteHandler>
{(onBack) => (
<IconButton onClick={onBack}> <IconButton onClick={onBack}>
<Icon src={Icons.ArrowLeft} /> <Icon src={Icons.ArrowLeft} />
</IconButton> </IconButton>
)} </Box>
</BackRouteHandler> )}
)} </BackRouteHandler>
{/* Avatar shown only on desktop */} )}
<Box grow="Yes" alignItems="Center" gap="300">
{screenSize !== ScreenSize.Mobile && ( {screenSize !== ScreenSize.Mobile && (
<Avatar size="300"> <Avatar size="300">
<RoomAvatar <RoomAvatar
@ -313,17 +296,14 @@ export function RoomViewHeader() {
/> />
</Avatar> </Avatar>
)} )}
{/* Room name and topic */}
<Box direction="Column"> <Box direction="Column">
<Text size={topic ? 'H5' : 'H3'} truncate> <Text size={topic ? 'H5' : 'H3'} truncate>
{name} {name}
</Text> </Text>
{/* Topic is conditionally rendered and includes logic for an overlay */}
{topic && ( {topic && (
<UseStateProvider initial={false}> <UseStateProvider initial={false}>
{(viewTopic, setViewTopic) => ( {(viewTopic, setViewTopic) => (
<> <>
{/* Overlay for viewing full topic */}
<Overlay open={viewTopic} backdrop={<OverlayBackdrop />}> <Overlay open={viewTopic} backdrop={<OverlayBackdrop />}>
<OverlayCenter> <OverlayCenter>
<FocusTrap <FocusTrap
@ -342,12 +322,11 @@ export function RoomViewHeader() {
</FocusTrap> </FocusTrap>
</OverlayCenter> </OverlayCenter>
</Overlay> </Overlay>
{/* Clickable truncated topic text */}
<Text <Text
as="button" as="button"
type="button" type="button"
onClick={() => setViewTopic(true)} onClick={() => setViewTopic(true)}
className={css.HeaderTopic} // Apply specific styles if needed className={css.HeaderTopic}
size="T200" size="T200"
priority="300" priority="300"
truncate truncate
@ -359,18 +338,8 @@ export function RoomViewHeader() {
</UseStateProvider> </UseStateProvider>
)} )}
</Box> </Box>
</Box>{' '} </Box>
{/* --- END OF LEFT GROUP --- */} <Box shrink="No">
{/* --- SPACER --- */}
{/* This empty Box has 'grow="Yes"', making it expand */}
{/* It pushes the Left Group and Right Group to opposite ends */}
<Box grow="Yes" />
{/* --- RIGHT GROUP --- */}
{/* This Box groups elements intended for the right side */}
{/* 'shrink="No"' prevents it from collapsing if space is tight */}
{/* Items are vertically centered, gap adjusted for icons */}
<Box shrink="No" alignItems="Center" gap="100">
{/* Call button, shown only for Direct Messages */}
{isDirectMessage() && ( {isDirectMessage() && (
<TooltipProvider <TooltipProvider
position="Bottom" position="Bottom"
@ -389,7 +358,6 @@ export function RoomViewHeader() {
)} )}
</TooltipProvider> </TooltipProvider>
)} )}
{/* Search button, hidden for encrypted rooms */}
{!ecryptedRoom && ( {!ecryptedRoom && (
<TooltipProvider <TooltipProvider
position="Bottom" position="Bottom"
@ -407,7 +375,6 @@ export function RoomViewHeader() {
)} )}
</TooltipProvider> </TooltipProvider>
)} )}
{/* Pinned Messages button */}
<TooltipProvider <TooltipProvider
position="Bottom" position="Bottom"
offset={4} offset={4}
@ -419,15 +386,18 @@ export function RoomViewHeader() {
> >
{(triggerRef) => ( {(triggerRef) => (
<IconButton <IconButton
style={{ position: 'relative' }} // Needed for Badge positioning style={{ position: 'relative' }}
onClick={handleOpenPinMenu} onClick={handleOpenPinMenu}
ref={triggerRef} ref={triggerRef}
aria-pressed={!!pinMenuAnchor} // Indicate state when menu is open aria-pressed={!!pinMenuAnchor}
> >
{/* Badge showing pin count */}
{pinnedEvents.length > 0 && ( {pinnedEvents.length > 0 && (
<Badge <Badge
style={{ position: 'absolute', left: toRem(3), top: toRem(3) }} style={{
position: 'absolute',
left: toRem(3),
top: toRem(3),
}}
variant="Secondary" variant="Secondary"
size="400" size="400"
fill="Solid" fill="Solid"
@ -442,7 +412,26 @@ export function RoomViewHeader() {
</IconButton> </IconButton>
)} )}
</TooltipProvider> </TooltipProvider>
{/* Members button, shown only on desktop */} <PopOut
anchor={pinMenuAnchor}
position="Bottom"
content={
<FocusTrap
focusTrapOptions={{
initialFocus: false,
returnFocusOnDeactivate: false,
onDeactivate: () => setPinMenuAnchor(undefined),
clickOutsideDeactivates: true,
isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
escapeDeactivates: stopPropagation,
}}
>
<RoomPinMenu room={room} requestClose={() => setPinMenuAnchor(undefined)} />
</FocusTrap>
}
/>
{screenSize === ScreenSize.Desktop && ( {screenSize === ScreenSize.Desktop && (
<TooltipProvider <TooltipProvider
position="Bottom" position="Bottom"
@ -460,7 +449,6 @@ export function RoomViewHeader() {
)} )}
</TooltipProvider> </TooltipProvider>
)} )}
{/* More Options button */}
<TooltipProvider <TooltipProvider
position="Bottom" position="Bottom"
align="End" align="End"
@ -477,37 +465,28 @@ export function RoomViewHeader() {
</IconButton> </IconButton>
)} )}
</TooltipProvider> </TooltipProvider>
</Box>{' '} <PopOut
{/* --- END OF RIGHT GROUP --- */} anchor={menuAnchor}
{/* PopOuts render their content outside the normal flow (usually via React Portals) */} position="Bottom"
{/* They are placed here logically near their trigger buttons */} align="End"
<PopOut content={
anchor={pinMenuAnchor} // Anchored to the pin button's position <FocusTrap
position="Bottom" focusTrapOptions={{
content={ initialFocus: false,
// FocusTrap manages keyboard focus within the menu returnFocusOnDeactivate: false,
<FocusTrap onDeactivate: () => setMenuAnchor(undefined),
focusTrapOptions={{ /* ... focus options ... */ escapeDeactivates: stopPropagation }} clickOutsideDeactivates: true,
> isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
<RoomPinMenu room={room} requestClose={() => setPinMenuAnchor(undefined)} /> isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
</FocusTrap> escapeDeactivates: stopPropagation,
} }}
/> >
<PopOut <RoomMenu room={room} requestClose={() => setMenuAnchor(undefined)} />
anchor={menuAnchor} // Anchored to the 'more options' button's position </FocusTrap>
position="Bottom" }
align="End" />
content={ </Box>
// FocusTrap manages keyboard focus within the menu </Box>
<FocusTrap
focusTrapOptions={{ /* ... focus options ... */ escapeDeactivates: stopPropagation }}
>
<RoomMenu room={room} requestClose={() => setMenuAnchor(undefined)} />
</FocusTrap>
}
/>
</Box>{' '}
{/* --- END OF MAIN CONTAINER BOX --- */}
</PageHeader> </PageHeader>
); );
} }