mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-11-06 23:30:28 +03:00
add call button for DMs and try to setup for spreading across header for when in call menu (not working yet)
This commit is contained in:
Gigiaj
parent
f39a262eb5
commit
3403adeb61
1 changed files with 90 additions and 69 deletions
|
|
@ -21,11 +21,12 @@ import {
|
|||
RectCords,
|
||||
Badge,
|
||||
Spinner,
|
||||
} from 'folds';
|
||||
} from 'folds'; // Assuming 'folds' is your UI library
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { JoinRule, Room } from 'matrix-js-sdk';
|
||||
import { useAtomValue } from 'jotai';
|
||||
|
||||
// --- Required Imports (Adjust paths as needed) ---
|
||||
import { useStateEvent } from '../../hooks/useStateEvent';
|
||||
import { PageHeader } from '../../components/page';
|
||||
import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
|
||||
|
|
@ -40,7 +41,7 @@ import { useSpaceOptionally } from '../../hooks/useSpace';
|
|||
import { getHomeSearchPath, getSpaceSearchPath, withSearchParam } from '../../pages/pathUtils';
|
||||
import { getCanonicalAliasOrRoomId, isRoomAlias, mxcUrlToHttp } from '../../utils/matrix';
|
||||
import { _SearchPathSearchParams } from '../../pages/paths';
|
||||
import * as css from './RoomViewHeader.css';
|
||||
import * as css from './RoomViewHeader.css'; // Assuming CSS Modules
|
||||
import { useRoomUnread } from '../../state/hooks/unread';
|
||||
import { usePowerLevelsAPI, usePowerLevelsContext } from '../../hooks/usePowerLevels';
|
||||
import { markAsRead } from '../../../client/action/notifications';
|
||||
|
|
@ -66,11 +67,14 @@ import {
|
|||
useRoomsNotificationPreferencesContext,
|
||||
} 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 = {
|
||||
room: Room;
|
||||
requestClose: () => void;
|
||||
};
|
||||
const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose }, ref) => {
|
||||
// ... (RoomMenu implementation from previous snippet) ...
|
||||
const mx = useMatrixClient();
|
||||
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
|
||||
const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
|
||||
|
|
@ -209,7 +213,9 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
|
|||
);
|
||||
});
|
||||
|
||||
// --- RoomViewHeader Component ---
|
||||
export function RoomViewHeader() {
|
||||
// --- Hooks ---
|
||||
const navigate = useNavigate();
|
||||
const mx = useMatrixClient();
|
||||
const useAuthentication = useMediaAuthentication();
|
||||
|
|
@ -232,19 +238,22 @@ export function RoomViewHeader() {
|
|||
|
||||
const setPeopleDrawer = useSetSetting(settingsAtom, 'isPeopleDrawer');
|
||||
|
||||
// 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
|
||||
// --- Event Handlers ---
|
||||
const isDirectMessage = () => {
|
||||
// Simplified check - consider optimizing if performance is an issue
|
||||
const mDirectsEvent = mx.getAccountData('m.direct');
|
||||
const { roomId } = room;
|
||||
return (
|
||||
Object.values(mDirectsEvent?.event.content).filter((e) => {
|
||||
if (e.indexOf(roomId) === 0) return true;
|
||||
}).length !== 0
|
||||
!!mDirectsEvent?.event.content &&
|
||||
Object.values(mDirectsEvent.event.content).flat().includes(roomId)
|
||||
);
|
||||
};
|
||||
|
||||
const handleCall: MouseEventHandler<HTMLButtonElement> = (evt) => {
|
||||
setMenuAnchor(evt.currentTarget.getBoundingClientRect());
|
||||
// Placeholder for call initiation logic
|
||||
console.log('Initiate call');
|
||||
// Potentially set anchor for a call menu if needed, similar to other menus
|
||||
// setMenuAnchor(evt.currentTarget.getBoundingClientRect());
|
||||
};
|
||||
|
||||
const handleSearchClick = () => {
|
||||
|
|
@ -265,21 +274,29 @@ export function RoomViewHeader() {
|
|||
setPinMenuAnchor(evt.currentTarget.getBoundingClientRect());
|
||||
};
|
||||
|
||||
// --- Render ---
|
||||
return (
|
||||
// Use PageHeader component for consistent header styling
|
||||
<PageHeader balance={screenSize === ScreenSize.Mobile}>
|
||||
<Box grow="Yes" gap="300">
|
||||
{/* Main container Box: Uses Flexbox (row), aligns items vertically centered */}
|
||||
<Box grow="Yes" alignItems="Center" gap="300">
|
||||
{' '}
|
||||
{/* Adjust gap as needed */}
|
||||
{/* --- LEFT GROUP --- */}
|
||||
{/* 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) => (
|
||||
<Box shrink="No" alignItems="Center">
|
||||
<IconButton onClick={onBack}>
|
||||
<Icon src={Icons.ArrowLeft} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
)}
|
||||
</BackRouteHandler>
|
||||
)}
|
||||
<Box grow="Yes" alignItems="Center" gap="300">
|
||||
{/* Avatar shown only on desktop */}
|
||||
{screenSize !== ScreenSize.Mobile && (
|
||||
<Avatar size="300">
|
||||
<RoomAvatar
|
||||
|
|
@ -296,14 +313,17 @@ export function RoomViewHeader() {
|
|||
/>
|
||||
</Avatar>
|
||||
)}
|
||||
{/* Room name and topic */}
|
||||
<Box direction="Column">
|
||||
<Text size={topic ? 'H5' : 'H3'} truncate>
|
||||
{name}
|
||||
</Text>
|
||||
{/* Topic is conditionally rendered and includes logic for an overlay */}
|
||||
{topic && (
|
||||
<UseStateProvider initial={false}>
|
||||
{(viewTopic, setViewTopic) => (
|
||||
<>
|
||||
{/* Overlay for viewing full topic */}
|
||||
<Overlay open={viewTopic} backdrop={<OverlayBackdrop />}>
|
||||
<OverlayCenter>
|
||||
<FocusTrap
|
||||
|
|
@ -322,11 +342,12 @@ export function RoomViewHeader() {
|
|||
</FocusTrap>
|
||||
</OverlayCenter>
|
||||
</Overlay>
|
||||
{/* Clickable truncated topic text */}
|
||||
<Text
|
||||
as="button"
|
||||
type="button"
|
||||
onClick={() => setViewTopic(true)}
|
||||
className={css.HeaderTopic}
|
||||
className={css.HeaderTopic} // Apply specific styles if needed
|
||||
size="T200"
|
||||
priority="300"
|
||||
truncate
|
||||
|
|
@ -338,8 +359,18 @@ export function RoomViewHeader() {
|
|||
</UseStateProvider>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
<Box shrink="No">
|
||||
</Box>{' '}
|
||||
{/* --- END OF LEFT GROUP --- */}
|
||||
{/* --- 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() && (
|
||||
<TooltipProvider
|
||||
position="Bottom"
|
||||
|
|
@ -358,6 +389,7 @@ export function RoomViewHeader() {
|
|||
)}
|
||||
</TooltipProvider>
|
||||
)}
|
||||
{/* Search button, hidden for encrypted rooms */}
|
||||
{!ecryptedRoom && (
|
||||
<TooltipProvider
|
||||
position="Bottom"
|
||||
|
|
@ -375,6 +407,7 @@ export function RoomViewHeader() {
|
|||
)}
|
||||
</TooltipProvider>
|
||||
)}
|
||||
{/* Pinned Messages button */}
|
||||
<TooltipProvider
|
||||
position="Bottom"
|
||||
offset={4}
|
||||
|
|
@ -386,18 +419,15 @@ export function RoomViewHeader() {
|
|||
>
|
||||
{(triggerRef) => (
|
||||
<IconButton
|
||||
style={{ position: 'relative' }}
|
||||
style={{ position: 'relative' }} // Needed for Badge positioning
|
||||
onClick={handleOpenPinMenu}
|
||||
ref={triggerRef}
|
||||
aria-pressed={!!pinMenuAnchor}
|
||||
aria-pressed={!!pinMenuAnchor} // Indicate state when menu is open
|
||||
>
|
||||
{/* Badge showing pin count */}
|
||||
{pinnedEvents.length > 0 && (
|
||||
<Badge
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: toRem(3),
|
||||
top: toRem(3),
|
||||
}}
|
||||
style={{ position: 'absolute', left: toRem(3), top: toRem(3) }}
|
||||
variant="Secondary"
|
||||
size="400"
|
||||
fill="Solid"
|
||||
|
|
@ -412,26 +442,7 @@ export function RoomViewHeader() {
|
|||
</IconButton>
|
||||
)}
|
||||
</TooltipProvider>
|
||||
<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>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Members button, shown only on desktop */}
|
||||
{screenSize === ScreenSize.Desktop && (
|
||||
<TooltipProvider
|
||||
position="Bottom"
|
||||
|
|
@ -449,6 +460,7 @@ export function RoomViewHeader() {
|
|||
)}
|
||||
</TooltipProvider>
|
||||
)}
|
||||
{/* More Options button */}
|
||||
<TooltipProvider
|
||||
position="Bottom"
|
||||
align="End"
|
||||
|
|
@ -465,28 +477,37 @@ export function RoomViewHeader() {
|
|||
</IconButton>
|
||||
)}
|
||||
</TooltipProvider>
|
||||
</Box>{' '}
|
||||
{/* --- END OF RIGHT GROUP --- */}
|
||||
{/* PopOuts render their content outside the normal flow (usually via React Portals) */}
|
||||
{/* They are placed here logically near their trigger buttons */}
|
||||
<PopOut
|
||||
anchor={menuAnchor}
|
||||
anchor={pinMenuAnchor} // Anchored to the pin button's position
|
||||
position="Bottom"
|
||||
content={
|
||||
// FocusTrap manages keyboard focus within the menu
|
||||
<FocusTrap
|
||||
focusTrapOptions={{ /* ... focus options ... */ escapeDeactivates: stopPropagation }}
|
||||
>
|
||||
<RoomPinMenu room={room} requestClose={() => setPinMenuAnchor(undefined)} />
|
||||
</FocusTrap>
|
||||
}
|
||||
/>
|
||||
<PopOut
|
||||
anchor={menuAnchor} // Anchored to the 'more options' button's position
|
||||
position="Bottom"
|
||||
align="End"
|
||||
content={
|
||||
// FocusTrap manages keyboard focus within the menu
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: false,
|
||||
returnFocusOnDeactivate: false,
|
||||
onDeactivate: () => setMenuAnchor(undefined),
|
||||
clickOutsideDeactivates: true,
|
||||
isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
|
||||
isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
|
||||
escapeDeactivates: stopPropagation,
|
||||
}}
|
||||
focusTrapOptions={{ /* ... focus options ... */ escapeDeactivates: stopPropagation }}
|
||||
>
|
||||
<RoomMenu room={room} requestClose={() => setMenuAnchor(undefined)} />
|
||||
</FocusTrap>
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>{' '}
|
||||
{/* --- END OF MAIN CONTAINER BOX --- */}
|
||||
</PageHeader>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue