mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-11-15 03:30:29 +03:00
URL navigation in interface and other improvements (#1633)
* load room on url change * add direct room list * render space room list * fix css syntax error * update scroll virtualizer * render subspaces room list * improve sidebar notification badge perf * add nav category components * add space recursive direct component * use nav category component in home, direct and space room list * add empty home and direct list layout * fix unread room menu ref * add more navigation items in room, direct and space tab * add more navigation * fix unread room menu to links * fix space lobby and search link * add explore navigation section * add notifications navigation menu * redirect to initial path after login * include unsupported room in rooms * move router hooks in hooks/router folder * add featured explore - WIP * load featured room with room summary * fix room card topic line clamp * add react query * load room summary using react query * add join button in room card * add content component * use content component in featured community content * fix content width * add responsive room card grid * fix async callback error status * add room card error button * fix client drawer shrink * add room topic viewer * open room card topic in viewer * fix room topic close btn * add get orphan parent util * add room card error dialog * add view featured room or space btn * refactor orphanParent to orphanParents * WIP - explore server * show space hint in room card * add room type filters * add per page item limit popout * reset scroll on public rooms load * refactor explore ui * refactor public rooms component * reset search on server change * fix typo * add empty featured section info * display user server on top * make server room card view btn clickable * add user server as default redirect for explore path * make home empty btn clickable * add thirdparty instance filter in server explore * remove since param on instance change * add server button in explore menu * rename notifications path to inbox * update react-virtual * Add notification messages inbox - WIP * add scroll top container component * add useInterval hook * add visibility change callback prop to scroll top container component * auto refresh notifications every 10 seconds * make message related component reusable * refactor matrix event renderer hoook * render notification message content * refactor matrix event renderer hook * update sequence card styles * move room navigate hook in global hooks * add open message button in notifications * add mark room as read button in notification group * show error in notification messages * add more featured spaces * render reply in notification messages * make notification message reply clickable * add outline prop for attachments * make old settings dialog viewable * add open featured communities as default config option * add invite count notification badge in sidebar and inbox menu * add element size observer hook * improve element size observer hook props * improve screen size hook * fix room avatar util function * allow Text props in Time component * fix dm room util function * add invitations * add no invites and notification cards * fix inbox tab unread badge visible without invite count * update folds and change inbox icon * memo search param construction * add message search in home * fix default message search order * fix display edited message new content * highlight search text in search messages * fix message search loading * disable log in production * add use space context * add useRoom context * fix space room list * fix inbox tab active state * add hook to get space child room recursive * add search for space * add virtual tile component * virtualize home and directs room list * update nav category component * use virtual tile component in more places * fix message highlight when click on reply twice * virtualize space room list * fix space room list lag issue * update folds * add room nav item component in space room list * use room nav item in home and direct room list * make space categories closable and save it in local storage * show unread room when category is collapsed * make home and direct room list category closable * rename room nav item show avatar prop * fix explore server category text alignment * rename closedRoomCategories to closedNavCategories * add nav category handler hook * save and restore last navigation path on space select * filter space rooms category by activity when it is closed * save and restore home and direct nav path state * save and restore inbox active path on open * save and restore explore tab active path * remove notification badge unread menu * add join room or space before navigate screen * move room component to features folder and add new room header * update folds * add room header menu * fix home room list activity sorting * do not hide selected room item on category closed in home and direct tab * replace old select room/tab call with navigate hook * improve state event hooks * show room card summary for joined rooms * prevent room from opening in wrong tab * only show message sender id on hover in modern layout * revert state event hooks changes * add key prop to room provider components * add welcome page * prevent excessive redirects * fix sidebar style with no spaces * move room settings in popup window * remove invite option from room settings * fix open room list search * add leave room prompt * standardize room and user avatar * fix avatar text size * add new reply layout * rename space hierarchy hook * add room topic hook * add room name hook * add room avatar hook and add direct room avatar util * space lobby - WIP * hide invalid space child event from space hierarchy in lobby * move lobby to features * fix element size observer hook width and height * add lobby header and hero section * add hierarchy room item error and loading state * add first and last child prop in sequence card * redirect to lobby from index path * memo and retry hierarchy room summary error * fix hierarchy room item styles * rename lobby hierarchy item card to room item card * show direct room avatar in space lobby * add hierarchy space item * add space item unknown room join button * fix space hierarchy hook refresh after new space join * change user avatar color and fallback render to user icon * change room avatar fallback to room icon * rename room/user avatar renderInitial prop to renderFallback * add room join and view button in space lobby * make power level api more reusable * fix space hierarchy not updating on child update * add menu to suggest or remove space children * show reply arrow in place of reply bend in message * fix typeerror in search because of wrong js-sdk t.ds * do not refetch hierarchy room summary on window focus * make room/user avatar un-draggable * change welcome page support button copy * drag-and-drop ordering of lobby spaces/rooms - WIP * add ASCIILexicalTable algorithms * fix wrong power level check in lobby items options * fix lobby can drop checks * fix join button error crash * fix reply spacing * fix m direct updated with other account data * add option to open room/space settings from lobby * add option in lobby to add new or existing room/spaces * fix room nav item selected styles * add space children reorder mechanism * fix space child reorder bug * fix hierarchy item sort function * Apply reorder of lobby into room list * add and improve space lobby menu items * add existing spaces menu in lobby * change restricted room allow params when dragging outside space * move featured servers config from homeserver list * removed unused features from space settings * add canonical alias as name fallback in lobby item * fix unreliable unread count update bug * fix after login redirect * fix room card topic hover style * Add dnd and folders in sidebar spaces * fix orphan space not visible in sidebar * fix sso login has mix of icon and button * fix space children not visible in home upon leaving space * recalculate notification on updating any space child * fix user color saturation/lightness * add user color to user avatar * add background colors to room avatar * show 2 length initial in sidebar space avatar * improve link color * add nav button component * open legacy create room and create direct * improve page route structure * handle hash router in path utils * mobile friendly router and navigation * make room header member drawer icon mobile friendly * setup index redirect for inbox and explore server route * add leave space prompt * improve member drawer filter menu * add space context menu * add context menu in home * add leave button in lobby items * render user tab avatar on sidebar * force overwrite netlify - test * netlify test * fix reset-password path without server redirected to login * add message link copy button in message menu * reset unread on sync prepared * fix stuck typing notifications * show typing indication in room nav item * refactor closedNavCategories atom to use userId in store key * refactor closedLobbyCategoriesAtom to include userId in store key * refactor navToActivePathAtom to use userId in storage key * remove unused file * refactor openedSidebarFolderAtom to include userId in storage key * add context menu for sidebar space tab * fix eslint not working * add option to pin/unpin child spaces * add context menu for directs tab * add context menu for direct and home tab * show lock icon for non-public space in header * increase matrix max listener count * wrap lobby add space room in callback hook
This commit is contained in:
Ajay Bura
GitHub
parent
2b7d825694
commit
4c76a7fd18
290 changed files with 17447 additions and 3224 deletions
844
src/app/pages/client/sidebar/SpaceTabs.tsx
Normal file
844
src/app/pages/client/sidebar/SpaceTabs.tsx
Normal file
|
|
@ -0,0 +1,844 @@
|
|||
import React, {
|
||||
MouseEventHandler,
|
||||
ReactNode,
|
||||
RefObject,
|
||||
forwardRef,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
Box,
|
||||
Icon,
|
||||
IconButton,
|
||||
Icons,
|
||||
Line,
|
||||
Menu,
|
||||
MenuItem,
|
||||
PopOut,
|
||||
RectCords,
|
||||
Text,
|
||||
config,
|
||||
toRem,
|
||||
} from 'folds';
|
||||
import { useAtom, useAtomValue } from 'jotai';
|
||||
import { Room } from 'matrix-js-sdk';
|
||||
import {
|
||||
draggable,
|
||||
dropTargetForElements,
|
||||
monitorForElements,
|
||||
} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
|
||||
import {
|
||||
attachInstruction,
|
||||
extractInstruction,
|
||||
Instruction,
|
||||
} from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
|
||||
import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
|
||||
import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
|
||||
import FocusTrap from 'focus-trap-react';
|
||||
import {
|
||||
useOrphanSpaces,
|
||||
useRecursiveChildScopeFactory,
|
||||
useSpaceChildren,
|
||||
} from '../../../state/hooks/roomList';
|
||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||
import { roomToParentsAtom } from '../../../state/room/roomToParents';
|
||||
import { allRoomsAtom } from '../../../state/room-list/roomList';
|
||||
import {
|
||||
getOriginBaseUrl,
|
||||
getSpaceLobbyPath,
|
||||
getSpacePath,
|
||||
joinPathComponent,
|
||||
withOriginBaseUrl,
|
||||
} from '../../pathUtils';
|
||||
import {
|
||||
SidebarAvatar,
|
||||
SidebarItem,
|
||||
SidebarItemBadge,
|
||||
SidebarItemTooltip,
|
||||
SidebarStack,
|
||||
SidebarStackSeparator,
|
||||
SidebarFolder,
|
||||
SidebarFolderDropTarget,
|
||||
} from '../../../components/sidebar';
|
||||
import { RoomUnreadProvider, RoomsUnreadProvider } from '../../../components/RoomUnreadProvider';
|
||||
import { useSelectedSpace } from '../../../hooks/router/useSelectedSpace';
|
||||
import { UnreadBadge } from '../../../components/unread-badge';
|
||||
import { getCanonicalAliasOrRoomId } from '../../../utils/matrix';
|
||||
import { RoomAvatar } from '../../../components/room-avatar';
|
||||
import { nameInitials, randomStr } from '../../../utils/common';
|
||||
import {
|
||||
ISidebarFolder,
|
||||
SidebarItems,
|
||||
TSidebarItem,
|
||||
makeCinnySpacesContent,
|
||||
parseSidebar,
|
||||
sidebarItemWithout,
|
||||
useSidebarItems,
|
||||
} from '../../../hooks/useSidebarItems';
|
||||
import { AccountDataEvent } from '../../../../types/matrix/accountData';
|
||||
import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
|
||||
import { useNavToActivePathAtom } from '../../../state/hooks/navToActivePath';
|
||||
import { useOpenedSidebarFolderAtom } from '../../../state/hooks/openedSidebarFolder';
|
||||
import { useClientConfig } from '../../../hooks/useClientConfig';
|
||||
import { usePowerLevels, usePowerLevelsAPI } from '../../../hooks/usePowerLevels';
|
||||
import { useRoomsUnread } from '../../../state/hooks/unread';
|
||||
import { roomToUnreadAtom } from '../../../state/room/roomToUnread';
|
||||
import { markAsRead } from '../../../../client/action/notifications';
|
||||
import { copyToClipboard } from '../../../utils/dom';
|
||||
import { openInviteUser, openSpaceSettings } from '../../../../client/action/navigation';
|
||||
|
||||
type SpaceMenuProps = {
|
||||
room: Room;
|
||||
requestClose: () => void;
|
||||
onUnpin?: (roomId: string) => void;
|
||||
};
|
||||
const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(
|
||||
({ room, requestClose, onUnpin }, ref) => {
|
||||
const mx = useMatrixClient();
|
||||
const { hashRouter } = useClientConfig();
|
||||
const roomToParents = useAtomValue(roomToParentsAtom);
|
||||
const powerLevels = usePowerLevels(room);
|
||||
const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
|
||||
const canInvite = canDoAction('invite', getPowerLevel(mx.getUserId() ?? ''));
|
||||
|
||||
const allChild = useSpaceChildren(
|
||||
allRoomsAtom,
|
||||
room.roomId,
|
||||
useRecursiveChildScopeFactory(mx, roomToParents)
|
||||
);
|
||||
const unread = useRoomsUnread(allChild, roomToUnreadAtom);
|
||||
|
||||
const handleMarkAsRead = () => {
|
||||
allChild.forEach((childRoomId) => markAsRead(childRoomId));
|
||||
requestClose();
|
||||
};
|
||||
|
||||
const handleUnpin = () => {
|
||||
onUnpin?.(room.roomId);
|
||||
requestClose();
|
||||
};
|
||||
|
||||
const handleCopyLink = () => {
|
||||
const spacePath = getSpacePath(getCanonicalAliasOrRoomId(mx, room.roomId));
|
||||
copyToClipboard(withOriginBaseUrl(getOriginBaseUrl(hashRouter), spacePath));
|
||||
requestClose();
|
||||
};
|
||||
|
||||
const handleInvite = () => {
|
||||
openInviteUser(room.roomId);
|
||||
requestClose();
|
||||
};
|
||||
|
||||
const handleRoomSettings = () => {
|
||||
openSpaceSettings(room.roomId);
|
||||
requestClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
|
||||
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
|
||||
<MenuItem
|
||||
onClick={handleMarkAsRead}
|
||||
size="300"
|
||||
after={<Icon size="100" src={Icons.CheckTwice} />}
|
||||
radii="300"
|
||||
disabled={!unread}
|
||||
>
|
||||
<Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
|
||||
Mark as Read
|
||||
</Text>
|
||||
</MenuItem>
|
||||
{onUnpin && (
|
||||
<MenuItem
|
||||
size="300"
|
||||
radii="300"
|
||||
onClick={handleUnpin}
|
||||
after={<Icon size="100" src={Icons.Pin} />}
|
||||
>
|
||||
<Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
|
||||
Unpin
|
||||
</Text>
|
||||
</MenuItem>
|
||||
)}
|
||||
</Box>
|
||||
<Line variant="Surface" size="300" />
|
||||
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
|
||||
<MenuItem
|
||||
onClick={handleInvite}
|
||||
variant="Primary"
|
||||
fill="None"
|
||||
size="300"
|
||||
after={<Icon size="100" src={Icons.UserPlus} />}
|
||||
radii="300"
|
||||
disabled={!canInvite}
|
||||
>
|
||||
<Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
|
||||
Invite
|
||||
</Text>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={handleCopyLink}
|
||||
size="300"
|
||||
after={<Icon size="100" src={Icons.Link} />}
|
||||
radii="300"
|
||||
>
|
||||
<Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
|
||||
Copy Link
|
||||
</Text>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={handleRoomSettings}
|
||||
size="300"
|
||||
after={<Icon size="100" src={Icons.Setting} />}
|
||||
radii="300"
|
||||
>
|
||||
<Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
|
||||
Space Settings
|
||||
</Text>
|
||||
</MenuItem>
|
||||
</Box>
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
type InstructionType = Instruction['type'];
|
||||
type FolderDraggable = {
|
||||
folder: ISidebarFolder;
|
||||
spaceId?: string;
|
||||
open?: boolean;
|
||||
};
|
||||
type SidebarDraggable = string | FolderDraggable;
|
||||
|
||||
const useDraggableItem = (
|
||||
item: SidebarDraggable,
|
||||
targetRef: RefObject<HTMLElement>,
|
||||
onDragging: (item?: SidebarDraggable) => void,
|
||||
dragHandleRef?: RefObject<HTMLElement>
|
||||
): boolean => {
|
||||
const [dragging, setDragging] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const target = targetRef.current;
|
||||
const dragHandle = dragHandleRef?.current ?? undefined;
|
||||
|
||||
return !target
|
||||
? undefined
|
||||
: draggable({
|
||||
element: target,
|
||||
dragHandle,
|
||||
getInitialData: () => ({ item }),
|
||||
onDragStart: () => {
|
||||
setDragging(true);
|
||||
onDragging?.(item);
|
||||
},
|
||||
onDrop: () => {
|
||||
setDragging(false);
|
||||
onDragging?.(undefined);
|
||||
},
|
||||
});
|
||||
}, [targetRef, dragHandleRef, item, onDragging]);
|
||||
|
||||
return dragging;
|
||||
};
|
||||
|
||||
const useDropTarget = (
|
||||
item: SidebarDraggable,
|
||||
targetRef: RefObject<HTMLElement>
|
||||
): Instruction | undefined => {
|
||||
const [dropState, setDropState] = useState<Instruction>();
|
||||
|
||||
useEffect(() => {
|
||||
const target = targetRef.current;
|
||||
if (!target) return undefined;
|
||||
|
||||
return dropTargetForElements({
|
||||
element: target,
|
||||
canDrop: ({ source }) => {
|
||||
const dragItem = source.data.item as SidebarDraggable;
|
||||
return dragItem !== item;
|
||||
},
|
||||
getData: ({ input, element }) => {
|
||||
const block: Instruction['type'][] = ['reparent'];
|
||||
if (typeof item === 'object' && item.spaceId) block.push('make-child');
|
||||
|
||||
const insData = attachInstruction(
|
||||
{},
|
||||
{
|
||||
input,
|
||||
element,
|
||||
currentLevel: 0,
|
||||
indentPerLevel: 0,
|
||||
mode: 'standard',
|
||||
block,
|
||||
}
|
||||
);
|
||||
|
||||
const instruction: Instruction | null = extractInstruction(insData);
|
||||
setDropState(instruction ?? undefined);
|
||||
|
||||
return {
|
||||
item,
|
||||
instructionType: instruction ? instruction.type : undefined,
|
||||
};
|
||||
},
|
||||
onDragLeave: () => setDropState(undefined),
|
||||
onDrop: () => setDropState(undefined),
|
||||
});
|
||||
}, [item, targetRef]);
|
||||
|
||||
return dropState;
|
||||
};
|
||||
|
||||
function useDropTargetInstruction<T extends InstructionType>(
|
||||
item: SidebarDraggable,
|
||||
targetRef: RefObject<HTMLElement>,
|
||||
instructionType: T
|
||||
): T | undefined {
|
||||
const [dropState, setDropState] = useState<T>();
|
||||
|
||||
useEffect(() => {
|
||||
const target = targetRef.current;
|
||||
if (!target) return undefined;
|
||||
|
||||
return dropTargetForElements({
|
||||
element: target,
|
||||
canDrop: ({ source }) => {
|
||||
const dragItem = source.data.item as SidebarDraggable;
|
||||
return dragItem !== item;
|
||||
},
|
||||
getData: () => {
|
||||
setDropState(instructionType);
|
||||
|
||||
return {
|
||||
item,
|
||||
instructionType,
|
||||
};
|
||||
},
|
||||
onDragLeave: () => setDropState(undefined),
|
||||
onDrop: () => setDropState(undefined),
|
||||
});
|
||||
}, [item, targetRef, instructionType]);
|
||||
|
||||
return dropState;
|
||||
}
|
||||
|
||||
const useDnDMonitor = (
|
||||
scrollRef: RefObject<HTMLElement>,
|
||||
onDragging: (dragItem?: SidebarDraggable) => void,
|
||||
onReorder: (
|
||||
draggable: SidebarDraggable,
|
||||
container: SidebarDraggable,
|
||||
instruction: InstructionType
|
||||
) => void
|
||||
) => {
|
||||
useEffect(() => {
|
||||
const scrollElement = scrollRef.current;
|
||||
if (!scrollElement) {
|
||||
throw Error('Scroll element ref not configured');
|
||||
}
|
||||
|
||||
return combine(
|
||||
monitorForElements({
|
||||
onDrop: ({ source, location }) => {
|
||||
onDragging(undefined);
|
||||
const { dropTargets } = location.current;
|
||||
if (dropTargets.length === 0) return;
|
||||
const item = source.data.item as SidebarDraggable;
|
||||
const containerItem = dropTargets[0].data.item as SidebarDraggable;
|
||||
const instructionType = dropTargets[0].data.instructionType as
|
||||
| InstructionType
|
||||
| undefined;
|
||||
if (!instructionType) return;
|
||||
onReorder(item, containerItem, instructionType);
|
||||
},
|
||||
}),
|
||||
autoScrollForElements({
|
||||
element: scrollElement,
|
||||
})
|
||||
);
|
||||
}, [scrollRef, onDragging, onReorder]);
|
||||
};
|
||||
|
||||
type SpaceTabProps = {
|
||||
space: Room;
|
||||
selected: boolean;
|
||||
onClick: MouseEventHandler<HTMLButtonElement>;
|
||||
folder?: ISidebarFolder;
|
||||
onDragging: (dragItem?: SidebarDraggable) => void;
|
||||
disabled?: boolean;
|
||||
onUnpin?: (roomId: string) => void;
|
||||
};
|
||||
function SpaceTab({
|
||||
space,
|
||||
selected,
|
||||
onClick,
|
||||
folder,
|
||||
onDragging,
|
||||
disabled,
|
||||
onUnpin,
|
||||
}: SpaceTabProps) {
|
||||
const mx = useMatrixClient();
|
||||
const targetRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const spaceDraggable: SidebarDraggable = useMemo(
|
||||
() =>
|
||||
folder
|
||||
? {
|
||||
folder,
|
||||
spaceId: space.roomId,
|
||||
}
|
||||
: space.roomId,
|
||||
[folder, space]
|
||||
);
|
||||
|
||||
useDraggableItem(spaceDraggable, targetRef, onDragging);
|
||||
const dropState = useDropTarget(spaceDraggable, targetRef);
|
||||
const dropType = dropState?.type;
|
||||
|
||||
const [menuAnchor, setMenuAnchor] = useState<RectCords>();
|
||||
|
||||
const handleContextMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
|
||||
evt.preventDefault();
|
||||
const cords = evt.currentTarget.getBoundingClientRect();
|
||||
setMenuAnchor((currentState) => {
|
||||
if (currentState) return undefined;
|
||||
return cords;
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<RoomUnreadProvider roomId={space.roomId}>
|
||||
{(unread) => (
|
||||
<SidebarItem
|
||||
active={selected}
|
||||
ref={targetRef}
|
||||
aria-disabled={disabled}
|
||||
data-drop-child={dropType === 'make-child'}
|
||||
data-drop-above={dropType === 'reorder-above'}
|
||||
data-drop-below={dropType === 'reorder-below'}
|
||||
data-inside-folder={!!folder}
|
||||
>
|
||||
<SidebarItemTooltip tooltip={disabled ? undefined : space.name}>
|
||||
{(triggerRef) => (
|
||||
<SidebarAvatar
|
||||
as="button"
|
||||
data-id={space.roomId}
|
||||
ref={triggerRef}
|
||||
size={folder ? '300' : '400'}
|
||||
onClick={onClick}
|
||||
onContextMenu={handleContextMenu}
|
||||
>
|
||||
<RoomAvatar
|
||||
roomId={space.roomId}
|
||||
src={space.getAvatarUrl(mx.baseUrl, 96, 96, 'crop') ?? undefined}
|
||||
alt={space.name}
|
||||
renderFallback={() => (
|
||||
<Text size={folder ? 'H6' : 'H4'}>{nameInitials(space.name, 2)}</Text>
|
||||
)}
|
||||
/>
|
||||
</SidebarAvatar>
|
||||
)}
|
||||
</SidebarItemTooltip>
|
||||
{unread && (
|
||||
<SidebarItemBadge hasCount={unread.total > 0}>
|
||||
<UnreadBadge highlight={unread.highlight > 0} count={unread.total} />
|
||||
</SidebarItemBadge>
|
||||
)}
|
||||
{menuAnchor && (
|
||||
<PopOut
|
||||
anchor={menuAnchor}
|
||||
position="Right"
|
||||
align="Start"
|
||||
content={
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: false,
|
||||
returnFocusOnDeactivate: false,
|
||||
onDeactivate: () => setMenuAnchor(undefined),
|
||||
clickOutsideDeactivates: true,
|
||||
isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
|
||||
isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
|
||||
}}
|
||||
>
|
||||
<SpaceMenu
|
||||
room={space}
|
||||
requestClose={() => setMenuAnchor(undefined)}
|
||||
onUnpin={onUnpin}
|
||||
/>
|
||||
</FocusTrap>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</SidebarItem>
|
||||
)}
|
||||
</RoomUnreadProvider>
|
||||
);
|
||||
}
|
||||
|
||||
type OpenedSpaceFolderProps = {
|
||||
folder: ISidebarFolder;
|
||||
onClose: MouseEventHandler<HTMLButtonElement>;
|
||||
children?: ReactNode;
|
||||
};
|
||||
function OpenedSpaceFolder({ folder, onClose, children }: OpenedSpaceFolderProps) {
|
||||
const aboveTargetRef = useRef<HTMLDivElement>(null);
|
||||
const belowTargetRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const spaceDraggable: SidebarDraggable = useMemo(() => ({ folder, open: true }), [folder]);
|
||||
|
||||
const orderAbove = useDropTargetInstruction(spaceDraggable, aboveTargetRef, 'reorder-above');
|
||||
const orderBelow = useDropTargetInstruction(spaceDraggable, belowTargetRef, 'reorder-below');
|
||||
|
||||
return (
|
||||
<SidebarFolder
|
||||
state="Open"
|
||||
data-drop-above={orderAbove === 'reorder-above'}
|
||||
data-drop-below={orderBelow === 'reorder-below'}
|
||||
>
|
||||
<SidebarFolderDropTarget ref={aboveTargetRef} position="Top" />
|
||||
<SidebarAvatar size="300">
|
||||
<IconButton data-id={folder.id} size="300" variant="Background" onClick={onClose}>
|
||||
<Icon size="400" src={Icons.ChevronTop} filled />
|
||||
</IconButton>
|
||||
</SidebarAvatar>
|
||||
{children}
|
||||
<SidebarFolderDropTarget ref={belowTargetRef} position="Bottom" />
|
||||
</SidebarFolder>
|
||||
);
|
||||
}
|
||||
|
||||
type ClosedSpaceFolderProps = {
|
||||
folder: ISidebarFolder;
|
||||
selected: boolean;
|
||||
onOpen: MouseEventHandler<HTMLButtonElement>;
|
||||
onDragging: (dragItem?: SidebarDraggable) => void;
|
||||
disabled?: boolean;
|
||||
};
|
||||
function ClosedSpaceFolder({
|
||||
folder,
|
||||
selected,
|
||||
onOpen,
|
||||
onDragging,
|
||||
disabled,
|
||||
}: ClosedSpaceFolderProps) {
|
||||
const mx = useMatrixClient();
|
||||
const handlerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const spaceDraggable: FolderDraggable = useMemo(() => ({ folder }), [folder]);
|
||||
useDraggableItem(spaceDraggable, handlerRef, onDragging);
|
||||
const dropState = useDropTarget(spaceDraggable, handlerRef);
|
||||
const dropType = dropState?.type;
|
||||
|
||||
const tooltipName =
|
||||
folder.name ?? folder.content.map((i) => mx.getRoom(i)?.name ?? '').join(', ') ?? 'Unnamed';
|
||||
|
||||
return (
|
||||
<RoomsUnreadProvider rooms={folder.content}>
|
||||
{(unread) => (
|
||||
<SidebarItem
|
||||
active={selected}
|
||||
ref={handlerRef}
|
||||
aria-disabled={disabled}
|
||||
data-drop-child={dropType === 'make-child'}
|
||||
data-drop-above={dropType === 'reorder-above'}
|
||||
data-drop-below={dropType === 'reorder-below'}
|
||||
>
|
||||
<SidebarItemTooltip tooltip={disabled ? undefined : tooltipName}>
|
||||
{(tooltipRef) => (
|
||||
<SidebarFolder data-id={folder.id} as="button" ref={tooltipRef} onClick={onOpen}>
|
||||
{folder.content.map((sId) => {
|
||||
const space = mx.getRoom(sId);
|
||||
if (!space) return null;
|
||||
|
||||
return (
|
||||
<SidebarAvatar key={sId} size="200" radii="300">
|
||||
<RoomAvatar
|
||||
roomId={space.roomId}
|
||||
src={space.getAvatarUrl(mx.baseUrl, 96, 96, 'crop') ?? undefined}
|
||||
alt={space.name}
|
||||
renderFallback={() => (
|
||||
<Text size="Inherit">
|
||||
<b>{nameInitials(space.name, 2)}</b>
|
||||
</Text>
|
||||
)}
|
||||
/>
|
||||
</SidebarAvatar>
|
||||
);
|
||||
})}
|
||||
</SidebarFolder>
|
||||
)}
|
||||
</SidebarItemTooltip>
|
||||
{unread && (
|
||||
<SidebarItemBadge hasCount={unread.total > 0}>
|
||||
<UnreadBadge highlight={unread.highlight > 0} count={unread.total} />
|
||||
</SidebarItemBadge>
|
||||
)}
|
||||
</SidebarItem>
|
||||
)}
|
||||
</RoomsUnreadProvider>
|
||||
);
|
||||
}
|
||||
|
||||
type SpaceTabsProps = {
|
||||
scrollRef: RefObject<HTMLDivElement>;
|
||||
};
|
||||
export function SpaceTabs({ scrollRef }: SpaceTabsProps) {
|
||||
const navigate = useNavigate();
|
||||
const mx = useMatrixClient();
|
||||
const screenSize = useScreenSizeContext();
|
||||
const roomToParents = useAtomValue(roomToParentsAtom);
|
||||
const orphanSpaces = useOrphanSpaces(mx, allRoomsAtom, roomToParents);
|
||||
const [sidebarItems, localEchoSidebarItem] = useSidebarItems(orphanSpaces);
|
||||
const navToActivePath = useAtomValue(useNavToActivePathAtom());
|
||||
const [openedFolder, setOpenedFolder] = useAtom(useOpenedSidebarFolderAtom());
|
||||
const [draggingItem, setDraggingItem] = useState<SidebarDraggable>();
|
||||
|
||||
useDnDMonitor(
|
||||
scrollRef,
|
||||
setDraggingItem,
|
||||
useCallback(
|
||||
(item, containerItem, instructionType) => {
|
||||
const newItems: SidebarItems = [];
|
||||
|
||||
const matchDest = (sI: TSidebarItem, dI: SidebarDraggable): boolean => {
|
||||
if (typeof sI === 'string' && typeof dI === 'string') {
|
||||
return sI === dI;
|
||||
}
|
||||
if (typeof sI === 'object' && typeof dI === 'object') {
|
||||
return sI.id === dI.folder.id;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
const itemAsFolderContent = (i: SidebarDraggable): string[] => {
|
||||
if (typeof i === 'string') {
|
||||
return [i];
|
||||
}
|
||||
if (i.spaceId) {
|
||||
return [i.spaceId];
|
||||
}
|
||||
return [...i.folder.content];
|
||||
};
|
||||
|
||||
sidebarItems.forEach((i) => {
|
||||
const sameFolders =
|
||||
typeof item === 'object' &&
|
||||
typeof containerItem === 'object' &&
|
||||
item.folder.id === containerItem.folder.id;
|
||||
|
||||
// remove draggable space from current position or folder
|
||||
if (!sameFolders && matchDest(i, item)) {
|
||||
if (typeof item === 'object' && item.spaceId) {
|
||||
const folderContent = item.folder.content.filter((s) => s !== item.spaceId);
|
||||
if (folderContent.length === 0) {
|
||||
// remove open state from local storage
|
||||
setOpenedFolder({ type: 'DELETE', id: item.folder.id });
|
||||
return;
|
||||
}
|
||||
newItems.push({
|
||||
...item.folder,
|
||||
content: folderContent,
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (matchDest(i, containerItem)) {
|
||||
// we can make child only if
|
||||
// container item is space or closed folder
|
||||
if (instructionType === 'make-child') {
|
||||
const child: string[] = itemAsFolderContent(item);
|
||||
if (typeof containerItem === 'string') {
|
||||
const folder: ISidebarFolder = {
|
||||
id: randomStr(),
|
||||
content: [containerItem].concat(child),
|
||||
};
|
||||
newItems.push(folder);
|
||||
return;
|
||||
}
|
||||
newItems.push({
|
||||
...containerItem.folder,
|
||||
content: containerItem.folder.content.concat(child),
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// drop inside opened folder
|
||||
// or reordering inside same folder
|
||||
if (typeof containerItem === 'object' && containerItem.spaceId) {
|
||||
const child = itemAsFolderContent(item);
|
||||
const newContent: string[] = [];
|
||||
containerItem.folder.content
|
||||
.filter((sId) => !child.includes(sId))
|
||||
.forEach((sId) => {
|
||||
if (sId === containerItem.spaceId) {
|
||||
if (instructionType === 'reorder-below') {
|
||||
newContent.push(sId, ...child);
|
||||
}
|
||||
if (instructionType === 'reorder-above') {
|
||||
newContent.push(...child, sId);
|
||||
}
|
||||
return;
|
||||
}
|
||||
newContent.push(sId);
|
||||
});
|
||||
const folder = {
|
||||
...containerItem.folder,
|
||||
content: newContent,
|
||||
};
|
||||
|
||||
newItems.push(folder);
|
||||
return;
|
||||
}
|
||||
|
||||
// drop above or below space or closed/opened folder
|
||||
if (typeof item === 'string') {
|
||||
if (instructionType === 'reorder-below') newItems.push(i);
|
||||
newItems.push(item);
|
||||
if (instructionType === 'reorder-above') newItems.push(i);
|
||||
} else if (item.spaceId) {
|
||||
if (instructionType === 'reorder-above') {
|
||||
newItems.push(item.spaceId);
|
||||
}
|
||||
if (sameFolders && typeof i === 'object') {
|
||||
// remove from folder if placing around itself
|
||||
const newI = { ...i, content: i.content.filter((sId) => sId !== item.spaceId) };
|
||||
if (newI.content.length > 0) newItems.push(newI);
|
||||
} else {
|
||||
newItems.push(i);
|
||||
}
|
||||
if (instructionType === 'reorder-below') {
|
||||
newItems.push(item.spaceId);
|
||||
}
|
||||
} else {
|
||||
if (instructionType === 'reorder-below') newItems.push(i);
|
||||
newItems.push(item.folder);
|
||||
if (instructionType === 'reorder-above') newItems.push(i);
|
||||
}
|
||||
return;
|
||||
}
|
||||
newItems.push(i);
|
||||
});
|
||||
|
||||
const newSpacesContent = makeCinnySpacesContent(mx, newItems);
|
||||
localEchoSidebarItem(parseSidebar(mx, orphanSpaces, newSpacesContent));
|
||||
mx.setAccountData(AccountDataEvent.CinnySpaces, newSpacesContent);
|
||||
},
|
||||
[mx, sidebarItems, setOpenedFolder, localEchoSidebarItem, orphanSpaces]
|
||||
)
|
||||
);
|
||||
|
||||
const selectedSpaceId = useSelectedSpace();
|
||||
|
||||
const handleSpaceClick: MouseEventHandler<HTMLButtonElement> = (evt) => {
|
||||
const target = evt.currentTarget;
|
||||
const targetSpaceId = target.getAttribute('data-id');
|
||||
if (!targetSpaceId) return;
|
||||
|
||||
if (screenSize === ScreenSize.Mobile) {
|
||||
navigate(getSpacePath(getCanonicalAliasOrRoomId(mx, targetSpaceId)));
|
||||
return;
|
||||
}
|
||||
|
||||
const activePath = navToActivePath.get(targetSpaceId);
|
||||
if (activePath) {
|
||||
navigate(joinPathComponent(activePath));
|
||||
return;
|
||||
}
|
||||
|
||||
navigate(getSpaceLobbyPath(getCanonicalAliasOrRoomId(mx, targetSpaceId)));
|
||||
};
|
||||
|
||||
const handleFolderToggle: MouseEventHandler<HTMLButtonElement> = (evt) => {
|
||||
const target = evt.currentTarget;
|
||||
const targetFolderId = target.getAttribute('data-id');
|
||||
if (!targetFolderId) return;
|
||||
|
||||
setOpenedFolder({
|
||||
type: openedFolder.has(targetFolderId) ? 'DELETE' : 'PUT',
|
||||
id: targetFolderId,
|
||||
});
|
||||
};
|
||||
|
||||
const handleUnpin = useCallback(
|
||||
(roomId: string) => {
|
||||
if (orphanSpaces.includes(roomId)) return;
|
||||
const newItems = sidebarItemWithout(sidebarItems, roomId);
|
||||
|
||||
const newSpacesContent = makeCinnySpacesContent(mx, newItems);
|
||||
localEchoSidebarItem(parseSidebar(mx, orphanSpaces, newSpacesContent));
|
||||
mx.setAccountData(AccountDataEvent.CinnySpaces, newSpacesContent);
|
||||
},
|
||||
[mx, sidebarItems, orphanSpaces, localEchoSidebarItem]
|
||||
);
|
||||
|
||||
if (sidebarItems.length === 0) return null;
|
||||
return (
|
||||
<>
|
||||
<SidebarStackSeparator />
|
||||
<SidebarStack>
|
||||
{sidebarItems.map((item) => {
|
||||
if (typeof item === 'object') {
|
||||
if (openedFolder.has(item.id)) {
|
||||
return (
|
||||
<OpenedSpaceFolder key={item.id} folder={item} onClose={handleFolderToggle}>
|
||||
{item.content.map((sId) => {
|
||||
const space = mx.getRoom(sId);
|
||||
if (!space) return null;
|
||||
return (
|
||||
<SpaceTab
|
||||
key={space.roomId}
|
||||
space={space}
|
||||
selected={space.roomId === selectedSpaceId}
|
||||
onClick={handleSpaceClick}
|
||||
folder={item}
|
||||
onDragging={setDraggingItem}
|
||||
disabled={
|
||||
typeof draggingItem === 'object'
|
||||
? draggingItem.spaceId === space.roomId
|
||||
: false
|
||||
}
|
||||
onUnpin={orphanSpaces.includes(space.roomId) ? undefined : handleUnpin}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</OpenedSpaceFolder>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ClosedSpaceFolder
|
||||
key={item.id}
|
||||
folder={item}
|
||||
selected={!!selectedSpaceId && item.content.includes(selectedSpaceId)}
|
||||
onOpen={handleFolderToggle}
|
||||
onDragging={setDraggingItem}
|
||||
disabled={
|
||||
typeof draggingItem === 'object' ? draggingItem.folder.id === item.id : false
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const space = mx.getRoom(item);
|
||||
if (!space) return null;
|
||||
|
||||
return (
|
||||
<SpaceTab
|
||||
key={space.roomId}
|
||||
space={space}
|
||||
selected={space.roomId === selectedSpaceId}
|
||||
onClick={handleSpaceClick}
|
||||
onDragging={setDraggingItem}
|
||||
disabled={typeof draggingItem === 'string' ? draggingItem === space.roomId : false}
|
||||
onUnpin={orphanSpaces.includes(space.roomId) ? undefined : handleUnpin}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</SidebarStack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue