refactor: delete the dead SidebarNav rail and its sidebar tab and primitive subtree
This commit is contained in:
parent
1faffad3e6
commit
8fcb94e956
18 changed files with 3 additions and 1819 deletions
|
|
@ -1,261 +0,0 @@
|
||||||
import { createVar, style } from '@vanilla-extract/css';
|
|
||||||
import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
|
|
||||||
import { color, config, DefaultReset, Disabled, FocusOutline, toRem } from 'folds';
|
|
||||||
import { ContainerColor } from '../../styles/ContainerColor.css';
|
|
||||||
|
|
||||||
export const Sidebar = style([
|
|
||||||
DefaultReset,
|
|
||||||
{
|
|
||||||
width: toRem(66),
|
|
||||||
backgroundColor: color.Background.Container,
|
|
||||||
borderRight: `${config.borderWidth.B300} solid ${color.Background.ContainerLine}`,
|
|
||||||
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
color: color.Background.OnContainer,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
export const SidebarStack = style([
|
|
||||||
DefaultReset,
|
|
||||||
{
|
|
||||||
width: '100%',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
gap: config.space.S300,
|
|
||||||
padding: `${config.space.S300} 0`,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
const DropLineDist = createVar();
|
|
||||||
export const DropTarget = style({
|
|
||||||
vars: {
|
|
||||||
[DropLineDist]: toRem(-8),
|
|
||||||
},
|
|
||||||
|
|
||||||
selectors: {
|
|
||||||
'&[data-inside-folder=true]': {
|
|
||||||
vars: {
|
|
||||||
[DropLineDist]: toRem(-6),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
'&[data-drop-child=true]': {
|
|
||||||
outline: `${config.borderWidth.B700} solid ${color.Success.Main}`,
|
|
||||||
borderRadius: config.radii.R400,
|
|
||||||
},
|
|
||||||
'&[data-drop-above=true]::after, &[data-drop-below=true]::after': {
|
|
||||||
content: '',
|
|
||||||
display: 'block',
|
|
||||||
position: 'absolute',
|
|
||||||
left: toRem(0),
|
|
||||||
width: '100%',
|
|
||||||
height: config.borderWidth.B700,
|
|
||||||
backgroundColor: color.Success.Main,
|
|
||||||
},
|
|
||||||
'&[data-drop-above=true]::after': {
|
|
||||||
top: DropLineDist,
|
|
||||||
},
|
|
||||||
'&[data-drop-below=true]::after': {
|
|
||||||
bottom: DropLineDist,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const PUSH_X = 2;
|
|
||||||
export const SidebarItem = recipe({
|
|
||||||
base: [
|
|
||||||
DefaultReset,
|
|
||||||
{
|
|
||||||
minWidth: toRem(42),
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
position: 'relative',
|
|
||||||
transition: 'transform 200ms cubic-bezier(0, 0.8, 0.67, 0.97)',
|
|
||||||
|
|
||||||
selectors: {
|
|
||||||
'&::before': {
|
|
||||||
content: '',
|
|
||||||
display: 'none',
|
|
||||||
position: 'absolute',
|
|
||||||
left: toRem(-11.5 - PUSH_X),
|
|
||||||
width: toRem(3 + PUSH_X),
|
|
||||||
height: toRem(16),
|
|
||||||
borderRadius: `0 ${toRem(4)} ${toRem(4)} 0`,
|
|
||||||
background: 'CurrentColor',
|
|
||||||
transition: 'height 200ms linear',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
'@media': {
|
|
||||||
'(hover: hover) and (pointer: fine)': {
|
|
||||||
selectors: {
|
|
||||||
'&:hover': {
|
|
||||||
transform: `translateX(${toRem(PUSH_X)})`,
|
|
||||||
},
|
|
||||||
'&:hover::before': {
|
|
||||||
display: 'block',
|
|
||||||
width: toRem(3),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
Disabled,
|
|
||||||
DropTarget,
|
|
||||||
],
|
|
||||||
variants: {
|
|
||||||
active: {
|
|
||||||
true: {
|
|
||||||
selectors: {
|
|
||||||
'&::before': {
|
|
||||||
display: 'block',
|
|
||||||
height: toRem(24),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
'@media': {
|
|
||||||
'(hover: hover) and (pointer: fine)': {
|
|
||||||
selectors: {
|
|
||||||
'&:hover::before': {
|
|
||||||
width: toRem(3 + PUSH_X),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
export type SidebarItemVariants = RecipeVariants<typeof SidebarItem>;
|
|
||||||
|
|
||||||
export const SidebarItemBadge = recipe({
|
|
||||||
base: [
|
|
||||||
DefaultReset,
|
|
||||||
{
|
|
||||||
pointerEvents: 'none',
|
|
||||||
position: 'absolute',
|
|
||||||
zIndex: 1,
|
|
||||||
lineHeight: 0,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
variants: {
|
|
||||||
hasCount: {
|
|
||||||
true: {
|
|
||||||
top: toRem(-6),
|
|
||||||
left: toRem(-6),
|
|
||||||
},
|
|
||||||
false: {
|
|
||||||
top: toRem(-2),
|
|
||||||
left: toRem(-2),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
defaultVariants: {
|
|
||||||
hasCount: false,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
export type SidebarItemBadgeVariants = RecipeVariants<typeof SidebarItemBadge>;
|
|
||||||
|
|
||||||
export const SidebarAvatar = recipe({
|
|
||||||
base: [
|
|
||||||
{
|
|
||||||
selectors: {
|
|
||||||
'button&': {
|
|
||||||
cursor: 'pointer',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
variants: {
|
|
||||||
size: {
|
|
||||||
'200': {
|
|
||||||
width: toRem(16),
|
|
||||||
height: toRem(16),
|
|
||||||
fontSize: toRem(10),
|
|
||||||
lineHeight: config.lineHeight.T200,
|
|
||||||
letterSpacing: config.letterSpacing.T200,
|
|
||||||
},
|
|
||||||
'300': {
|
|
||||||
width: toRem(34),
|
|
||||||
height: toRem(34),
|
|
||||||
},
|
|
||||||
'400': {
|
|
||||||
width: toRem(42),
|
|
||||||
height: toRem(42),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
outlined: {
|
|
||||||
true: {
|
|
||||||
border: `${config.borderWidth.B300} solid ${color.Background.ContainerLine}`,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
defaultVariants: {
|
|
||||||
size: '400',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
export type SidebarAvatarVariants = RecipeVariants<typeof SidebarAvatar>;
|
|
||||||
|
|
||||||
export const SidebarFolder = recipe({
|
|
||||||
base: [
|
|
||||||
ContainerColor({ variant: 'Background' }),
|
|
||||||
{
|
|
||||||
padding: config.space.S100,
|
|
||||||
width: toRem(42),
|
|
||||||
minHeight: toRem(42),
|
|
||||||
display: 'flex',
|
|
||||||
flexWrap: 'wrap',
|
|
||||||
outline: `${config.borderWidth.B300} solid ${color.Background.ContainerLine}`,
|
|
||||||
position: 'relative',
|
|
||||||
|
|
||||||
selectors: {
|
|
||||||
'button&': {
|
|
||||||
cursor: 'pointer',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
FocusOutline,
|
|
||||||
DropTarget,
|
|
||||||
],
|
|
||||||
variants: {
|
|
||||||
state: {
|
|
||||||
Close: {
|
|
||||||
gap: toRem(2),
|
|
||||||
borderRadius: config.radii.R400,
|
|
||||||
},
|
|
||||||
Open: {
|
|
||||||
paddingLeft: 0,
|
|
||||||
paddingRight: 0,
|
|
||||||
flexDirection: 'column',
|
|
||||||
alignItems: 'center',
|
|
||||||
gap: config.space.S200,
|
|
||||||
borderRadius: config.radii.R500,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
defaultVariants: {
|
|
||||||
state: 'Close',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
export type SidebarFolderVariants = RecipeVariants<typeof SidebarFolder>;
|
|
||||||
|
|
||||||
export const SidebarFolderDropTarget = recipe({
|
|
||||||
base: {
|
|
||||||
width: '100%',
|
|
||||||
height: toRem(8),
|
|
||||||
position: 'absolute',
|
|
||||||
left: 0,
|
|
||||||
},
|
|
||||||
variants: {
|
|
||||||
position: {
|
|
||||||
Top: {
|
|
||||||
top: toRem(-4),
|
|
||||||
},
|
|
||||||
Bottom: {
|
|
||||||
bottom: toRem(-4),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
export type SidebarFolderDropTargetVariants = RecipeVariants<typeof SidebarFolderDropTarget>;
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
import classNames from 'classnames';
|
|
||||||
import { as } from 'folds';
|
|
||||||
import React from 'react';
|
|
||||||
import * as css from './Sidebar.css';
|
|
||||||
|
|
||||||
export const Sidebar = as<'div'>(({ as: AsSidebar = 'div', className, ...props }, ref) => (
|
|
||||||
<AsSidebar className={classNames(css.Sidebar, className)} {...props} ref={ref} />
|
|
||||||
));
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
import React, { ReactNode } from 'react';
|
|
||||||
import { Box } from 'folds';
|
|
||||||
|
|
||||||
type SidebarContentProps = {
|
|
||||||
scrollable: ReactNode;
|
|
||||||
sticky: ReactNode;
|
|
||||||
};
|
|
||||||
export function SidebarContent({ scrollable, sticky }: SidebarContentProps) {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Box direction="Column" grow="Yes">
|
|
||||||
{scrollable}
|
|
||||||
</Box>
|
|
||||||
<Box direction="Column" shrink="No">
|
|
||||||
{sticky}
|
|
||||||
</Box>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,81 +0,0 @@
|
||||||
import classNames from 'classnames';
|
|
||||||
import { as, Avatar, Text, Tooltip, TooltipProvider, toRem } from 'folds';
|
|
||||||
import React, { ComponentProps, ReactNode, RefCallback } from 'react';
|
|
||||||
import * as css from './Sidebar.css';
|
|
||||||
|
|
||||||
export const SidebarItem = as<'div', css.SidebarItemVariants>(
|
|
||||||
({ as: AsSidebarAvatarBox = 'div', className, active, ...props }, ref) => (
|
|
||||||
<AsSidebarAvatarBox
|
|
||||||
className={classNames(css.SidebarItem({ active }), className)}
|
|
||||||
{...props}
|
|
||||||
ref={ref}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
export const SidebarItemBadge = as<'div', css.SidebarItemBadgeVariants>(
|
|
||||||
({ as: AsSidebarBadgeBox = 'div', className, hasCount, ...props }, ref) => (
|
|
||||||
<AsSidebarBadgeBox
|
|
||||||
className={classNames(css.SidebarItemBadge({ hasCount }), className)}
|
|
||||||
{...props}
|
|
||||||
ref={ref}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
export function SidebarItemTooltip({
|
|
||||||
tooltip,
|
|
||||||
children,
|
|
||||||
}: {
|
|
||||||
tooltip?: ReactNode | string;
|
|
||||||
children: (triggerRef: RefCallback<HTMLElement | SVGElement>) => ReactNode;
|
|
||||||
}) {
|
|
||||||
if (!tooltip) {
|
|
||||||
return children(() => undefined);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<TooltipProvider
|
|
||||||
delay={400}
|
|
||||||
position="Right"
|
|
||||||
tooltip={
|
|
||||||
<Tooltip style={{ maxWidth: toRem(280) }}>
|
|
||||||
<Text size="H5">{tooltip}</Text>
|
|
||||||
</Tooltip>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</TooltipProvider>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export const SidebarAvatar = as<'div', css.SidebarAvatarVariants & ComponentProps<typeof Avatar>>(
|
|
||||||
({ className, size, outlined, radii, ...props }, ref) => (
|
|
||||||
<Avatar
|
|
||||||
className={classNames(css.SidebarAvatar({ size, outlined }), className)}
|
|
||||||
radii={radii}
|
|
||||||
{...props}
|
|
||||||
ref={ref}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
export const SidebarFolder = as<'div', css.SidebarFolderVariants>(
|
|
||||||
({ as: AsSidebarFolder = 'div', className, state, ...props }, ref) => (
|
|
||||||
<AsSidebarFolder
|
|
||||||
className={classNames(css.SidebarFolder({ state }), className)}
|
|
||||||
{...props}
|
|
||||||
ref={ref}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
export const SidebarFolderDropTarget = as<'div', css.SidebarFolderDropTargetVariants>(
|
|
||||||
({ as: AsSidebarFolderDropTarget = 'div', className, position, ...props }, ref) => (
|
|
||||||
<AsSidebarFolderDropTarget
|
|
||||||
className={classNames(css.SidebarFolderDropTarget({ position }), className)}
|
|
||||||
{...props}
|
|
||||||
ref={ref}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import classNames from 'classnames';
|
|
||||||
import { as } from 'folds';
|
|
||||||
import * as css from './Sidebar.css';
|
|
||||||
|
|
||||||
export const SidebarStack = as<'div'>(
|
|
||||||
({ as: AsSidebarStack = 'div', className, ...props }, ref) => (
|
|
||||||
<AsSidebarStack className={classNames(css.SidebarStack, className)} {...props} ref={ref} />
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import { Line, toRem } from 'folds';
|
|
||||||
|
|
||||||
export function SidebarStackSeparator() {
|
|
||||||
return (
|
|
||||||
<Line
|
|
||||||
role="separator"
|
|
||||||
style={{ width: toRem(24), margin: '0 auto' }}
|
|
||||||
variant="Background"
|
|
||||||
size="300"
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
export * from './Sidebar';
|
|
||||||
export * from './SidebarItem';
|
|
||||||
export * from './SidebarContent';
|
|
||||||
export * from './SidebarStack';
|
|
||||||
export * from './SidebarStackSeparator';
|
|
||||||
|
|
@ -1,50 +1,6 @@
|
||||||
import { ReactNode } from 'react';
|
import { ReactNode } from 'react';
|
||||||
import { useMatch } from 'react-router-dom';
|
import { useMatch } from 'react-router-dom';
|
||||||
import { ScreenSize, useScreenSizeContext } from '../hooks/useScreenSize';
|
import { ScreenSize, useScreenSizeContext } from '../hooks/useScreenSize';
|
||||||
import {
|
|
||||||
BOTS_PATH,
|
|
||||||
CHANNELS_PATH,
|
|
||||||
CHANNELS_SPACE_PATH,
|
|
||||||
DIRECT_PATH,
|
|
||||||
EXPLORE_PATH,
|
|
||||||
HOME_PATH,
|
|
||||||
SPACE_PATH,
|
|
||||||
} from './paths';
|
|
||||||
|
|
||||||
type MobileFriendlyClientNavProps = {
|
|
||||||
children: ReactNode;
|
|
||||||
};
|
|
||||||
export function MobileFriendlyClientNav({ children }: MobileFriendlyClientNavProps) {
|
|
||||||
const screenSize = useScreenSizeContext();
|
|
||||||
const homeMatch = useMatch({ path: HOME_PATH, caseSensitive: true, end: true });
|
|
||||||
const directMatch = useMatch({ path: DIRECT_PATH, caseSensitive: true, end: true });
|
|
||||||
const spaceMatch = useMatch({ path: SPACE_PATH, caseSensitive: true, end: true });
|
|
||||||
const exploreMatch = useMatch({ path: EXPLORE_PATH, caseSensitive: true, end: true });
|
|
||||||
const botsMatch = useMatch({ path: BOTS_PATH, caseSensitive: true, end: true });
|
|
||||||
const channelsMatch = useMatch({ path: CHANNELS_PATH, caseSensitive: true, end: true });
|
|
||||||
const channelsSpaceMatch = useMatch({
|
|
||||||
path: CHANNELS_SPACE_PATH,
|
|
||||||
caseSensitive: true,
|
|
||||||
end: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (
|
|
||||||
screenSize === ScreenSize.Mobile &&
|
|
||||||
!(
|
|
||||||
homeMatch ||
|
|
||||||
directMatch ||
|
|
||||||
spaceMatch ||
|
|
||||||
exploreMatch ||
|
|
||||||
botsMatch ||
|
|
||||||
channelsMatch ||
|
|
||||||
channelsSpaceMatch
|
|
||||||
)
|
|
||||||
) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return children;
|
|
||||||
}
|
|
||||||
|
|
||||||
type MobileFriendlyPageNavProps = {
|
type MobileFriendlyPageNavProps = {
|
||||||
path: string;
|
path: string;
|
||||||
|
|
|
||||||
|
|
@ -240,12 +240,9 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
|
||||||
<ClientNonUIFeatures>
|
<ClientNonUIFeatures>
|
||||||
<CallEmbedProvider>
|
<CallEmbedProvider>
|
||||||
<HorseshoeContainer>
|
<HorseshoeContainer>
|
||||||
{/* SidebarNav (66px icon-rail) временно отключён —
|
{/* Старый 66px SidebarNav-рельс удалён в Dawn remnant
|
||||||
позже растащим его 5 кнопок (Settings, Search,
|
sweep — его поверхности живут в сегментах Direct/
|
||||||
Explore, Create, Unverified) по новым поверхностям
|
Channels/Bots. nav остаётся null. */}
|
||||||
интерфейса. Сам компонент жив:
|
|
||||||
src/app/pages/client/SidebarNav.tsx + ./sidebar/*.
|
|
||||||
См. docs/plans/redesign_overview.md → sidebar_cleanup. */}
|
|
||||||
<ClientLayout nav={null}>
|
<ClientLayout nav={null}>
|
||||||
<Outlet />
|
<Outlet />
|
||||||
</ClientLayout>
|
</ClientLayout>
|
||||||
|
|
|
||||||
|
|
@ -1,50 +0,0 @@
|
||||||
import React, { useRef } from 'react';
|
|
||||||
import { Scroll } from 'folds';
|
|
||||||
|
|
||||||
import {
|
|
||||||
Sidebar,
|
|
||||||
SidebarContent,
|
|
||||||
SidebarStackSeparator,
|
|
||||||
SidebarStack,
|
|
||||||
} from '../../components/sidebar';
|
|
||||||
import {
|
|
||||||
DirectTab,
|
|
||||||
SpaceTabs,
|
|
||||||
ExploreTab,
|
|
||||||
SettingsTab,
|
|
||||||
UnverifiedTab,
|
|
||||||
SearchTab,
|
|
||||||
} from './sidebar';
|
|
||||||
|
|
||||||
export function SidebarNav() {
|
|
||||||
const scrollRef = useRef<HTMLDivElement>(null);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Sidebar>
|
|
||||||
<SidebarContent
|
|
||||||
scrollable={
|
|
||||||
<Scroll ref={scrollRef} variant="Background" size="0">
|
|
||||||
<SidebarStack>
|
|
||||||
<DirectTab />
|
|
||||||
</SidebarStack>
|
|
||||||
<SpaceTabs scrollRef={scrollRef} />
|
|
||||||
<SidebarStackSeparator />
|
|
||||||
<SidebarStack>
|
|
||||||
<ExploreTab />
|
|
||||||
</SidebarStack>
|
|
||||||
</Scroll>
|
|
||||||
}
|
|
||||||
sticky={
|
|
||||||
<>
|
|
||||||
<SidebarStackSeparator />
|
|
||||||
<SidebarStack>
|
|
||||||
<SearchTab />
|
|
||||||
<UnverifiedTab />
|
|
||||||
<SettingsTab />
|
|
||||||
</SidebarStack>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</Sidebar>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,142 +0,0 @@
|
||||||
import React, { MouseEventHandler, forwardRef, useState } from 'react';
|
|
||||||
import { useNavigate } from 'react-router-dom';
|
|
||||||
import { Box, Icon, Icons, Menu, MenuItem, PopOut, RectCords, Text, config, toRem } from 'folds';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
import FocusTrap from 'focus-trap-react';
|
|
||||||
import { useAtomValue } from 'jotai';
|
|
||||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
|
||||||
import { roomToUnreadAtom } from '../../../state/room/roomToUnread';
|
|
||||||
import { getDirectPath, joinPathComponent } from '../../pathUtils';
|
|
||||||
import { isNativePlatform } from '../../../utils/capacitor';
|
|
||||||
import { useRoomsUnread } from '../../../state/hooks/unread';
|
|
||||||
import {
|
|
||||||
SidebarAvatar,
|
|
||||||
SidebarItem,
|
|
||||||
SidebarItemBadge,
|
|
||||||
SidebarItemTooltip,
|
|
||||||
} from '../../../components/sidebar';
|
|
||||||
import { useDirectSelected } from '../../../hooks/router/useDirectSelected';
|
|
||||||
import { UnreadBadge } from '../../../components/unread-badge';
|
|
||||||
import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
|
|
||||||
import { useNavToActivePathAtom } from '../../../state/hooks/navToActivePath';
|
|
||||||
import { useDirectRooms } from '../direct/useDirectRooms';
|
|
||||||
import { markAsRead } from '../../../utils/notifications';
|
|
||||||
import { stopPropagation } from '../../../utils/keyboard';
|
|
||||||
import { settingsAtom } from '../../../state/settings';
|
|
||||||
import { useSetting } from '../../../state/hooks/settings';
|
|
||||||
|
|
||||||
type DirectMenuProps = {
|
|
||||||
requestClose: () => void;
|
|
||||||
};
|
|
||||||
const DirectMenu = forwardRef<HTMLDivElement, DirectMenuProps>(({ requestClose }, ref) => {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const orphanRooms = useDirectRooms();
|
|
||||||
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
|
|
||||||
const unread = useRoomsUnread(orphanRooms, roomToUnreadAtom);
|
|
||||||
const mx = useMatrixClient();
|
|
||||||
|
|
||||||
const handleMarkAsRead = () => {
|
|
||||||
if (!unread) return;
|
|
||||||
orphanRooms.forEach((rId) => markAsRead(mx, rId, hideActivity));
|
|
||||||
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"
|
|
||||||
aria-disabled={!unread}
|
|
||||||
>
|
|
||||||
<Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
|
|
||||||
{t('Direct.mark_as_read')}
|
|
||||||
</Text>
|
|
||||||
</MenuItem>
|
|
||||||
</Box>
|
|
||||||
</Menu>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
export function DirectTab() {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const screenSize = useScreenSizeContext();
|
|
||||||
const navToActivePath = useAtomValue(useNavToActivePathAtom());
|
|
||||||
|
|
||||||
// After P3c the Direct tab is universal — every joined non-space room lives
|
|
||||||
// here. The badge / mark-as-read scope must mirror the panel itself
|
|
||||||
// (`useDirectRooms()` = orphan ∪ m.direct), otherwise unread groups would
|
|
||||||
// count toward the panel but not the sidebar dot.
|
|
||||||
const directs = useDirectRooms();
|
|
||||||
const directUnread = useRoomsUnread(directs, roomToUnreadAtom);
|
|
||||||
const [menuAnchor, setMenuAnchor] = useState<RectCords>();
|
|
||||||
|
|
||||||
const directSelected = useDirectSelected();
|
|
||||||
|
|
||||||
const handleDirectClick = () => {
|
|
||||||
const navOpts = { replace: isNativePlatform() };
|
|
||||||
const activePath = navToActivePath.get('direct');
|
|
||||||
if (activePath && screenSize !== ScreenSize.Mobile) {
|
|
||||||
navigate(joinPathComponent(activePath), navOpts);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
navigate(getDirectPath(), navOpts);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleContextMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
|
|
||||||
evt.preventDefault();
|
|
||||||
const cords = evt.currentTarget.getBoundingClientRect();
|
|
||||||
setMenuAnchor((currentState) => {
|
|
||||||
if (currentState) return undefined;
|
|
||||||
return cords;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<SidebarItem active={directSelected}>
|
|
||||||
<SidebarItemTooltip tooltip={t('Direct.direct_messages')}>
|
|
||||||
{(triggerRef) => (
|
|
||||||
<SidebarAvatar
|
|
||||||
as="button"
|
|
||||||
ref={triggerRef}
|
|
||||||
outlined
|
|
||||||
onClick={handleDirectClick}
|
|
||||||
onContextMenu={handleContextMenu}
|
|
||||||
>
|
|
||||||
<Icon src={Icons.User} filled={directSelected} />
|
|
||||||
</SidebarAvatar>
|
|
||||||
)}
|
|
||||||
</SidebarItemTooltip>
|
|
||||||
{directUnread && (
|
|
||||||
<SidebarItemBadge hasCount={directUnread.total > 0}>
|
|
||||||
<UnreadBadge highlight={directUnread.highlight > 0} count={directUnread.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',
|
|
||||||
escapeDeactivates: stopPropagation,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<DirectMenu requestClose={() => setMenuAnchor(undefined)} />
|
|
||||||
</FocusTrap>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</SidebarItem>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import { Icon, Icons } from 'folds';
|
|
||||||
import { useNavigate } from 'react-router-dom';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
import { useAtomValue } from 'jotai';
|
|
||||||
import { SidebarAvatar, SidebarItem, SidebarItemTooltip } from '../../../components/sidebar';
|
|
||||||
import { useExploreSelected } from '../../../hooks/router/useExploreSelected';
|
|
||||||
import {
|
|
||||||
getExploreFeaturedPath,
|
|
||||||
getExplorePath,
|
|
||||||
getExploreServerPath,
|
|
||||||
joinPathComponent,
|
|
||||||
} from '../../pathUtils';
|
|
||||||
import { useClientConfig } from '../../../hooks/useClientConfig';
|
|
||||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
|
||||||
import { getMxIdServer } from '../../../utils/matrix';
|
|
||||||
import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
|
|
||||||
import { useNavToActivePathAtom } from '../../../state/hooks/navToActivePath';
|
|
||||||
import { isNativePlatform } from '../../../utils/capacitor';
|
|
||||||
|
|
||||||
export function ExploreTab() {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const mx = useMatrixClient();
|
|
||||||
const screenSize = useScreenSizeContext();
|
|
||||||
const clientConfig = useClientConfig();
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const navToActivePath = useAtomValue(useNavToActivePathAtom());
|
|
||||||
|
|
||||||
const exploreSelected = useExploreSelected();
|
|
||||||
|
|
||||||
const handleExploreClick = () => {
|
|
||||||
const navOpts = { replace: isNativePlatform() };
|
|
||||||
if (screenSize === ScreenSize.Mobile) {
|
|
||||||
navigate(getExplorePath(), navOpts);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const activePath = navToActivePath.get('explore');
|
|
||||||
if (activePath) {
|
|
||||||
navigate(joinPathComponent(activePath), navOpts);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (clientConfig.featuredCommunities?.openAsDefault) {
|
|
||||||
navigate(getExploreFeaturedPath(), navOpts);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const userId = mx.getUserId();
|
|
||||||
const userServer = userId ? getMxIdServer(userId) : undefined;
|
|
||||||
if (userServer) {
|
|
||||||
navigate(getExploreServerPath(userServer), navOpts);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
navigate(getExplorePath(), navOpts);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<SidebarItem active={exploreSelected}>
|
|
||||||
<SidebarItemTooltip tooltip={t('Explore.explore_community')}>
|
|
||||||
{(triggerRef) => (
|
|
||||||
<SidebarAvatar as="button" ref={triggerRef} outlined onClick={handleExploreClick}>
|
|
||||||
<Icon src={Icons.Explore} filled={exploreSelected} />
|
|
||||||
</SidebarAvatar>
|
|
||||||
)}
|
|
||||||
</SidebarItemTooltip>
|
|
||||||
</SidebarItem>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import { Icon, Icons } from 'folds';
|
|
||||||
import { useAtom } from 'jotai';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
import { SidebarAvatar, SidebarItem, SidebarItemTooltip } from '../../../components/sidebar';
|
|
||||||
import { searchModalAtom } from '../../../state/searchModal';
|
|
||||||
|
|
||||||
export function SearchTab() {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const [opened, setOpen] = useAtom(searchModalAtom);
|
|
||||||
|
|
||||||
const open = () => setOpen(true);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<SidebarItem active={opened}>
|
|
||||||
<SidebarItemTooltip tooltip={t('Search.search')}>
|
|
||||||
{(triggerRef) => (
|
|
||||||
<SidebarAvatar as="button" ref={triggerRef} outlined onClick={open}>
|
|
||||||
<Icon src={Icons.Search} filled={opened} />
|
|
||||||
</SidebarAvatar>
|
|
||||||
)}
|
|
||||||
</SidebarItemTooltip>
|
|
||||||
</SidebarItem>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,59 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import { Text } from 'folds';
|
|
||||||
import { useMatch, useNavigate } from 'react-router-dom';
|
|
||||||
import { SidebarItem, SidebarItemTooltip, SidebarAvatar } from '../../../components/sidebar';
|
|
||||||
import { UserAvatar } from '../../../components/user-avatar';
|
|
||||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
|
||||||
import { useAuthedUserId } from '../../../hooks/useAuthedUserId';
|
|
||||||
import { getMxIdLocalPart, mxcUrlToHttp } from '../../../utils/matrix';
|
|
||||||
import { nameInitials } from '../../../utils/common';
|
|
||||||
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
|
|
||||||
import { useUserProfile } from '../../../hooks/useUserProfile';
|
|
||||||
import { SETTINGS_PATH } from '../../paths';
|
|
||||||
import { getSettingsPath } from '../../pathUtils';
|
|
||||||
import { SETTINGS_FROM_IN_APP_STATE } from '../../../features/settings/SettingsScreen';
|
|
||||||
|
|
||||||
export function SettingsTab() {
|
|
||||||
const mx = useMatrixClient();
|
|
||||||
const useAuthentication = useMediaAuthentication();
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const settingsMatch = useMatch({ path: SETTINGS_PATH, caseSensitive: true, end: false });
|
|
||||||
const userId = useAuthedUserId();
|
|
||||||
const profile = useUserProfile(userId);
|
|
||||||
|
|
||||||
const displayName = profile.displayName ?? getMxIdLocalPart(userId) ?? userId;
|
|
||||||
const avatarUrl = profile.avatarUrl
|
|
||||||
? mxcUrlToHttp(mx, profile.avatarUrl, useAuthentication, 96, 96, 'crop') ?? undefined
|
|
||||||
: undefined;
|
|
||||||
|
|
||||||
// Use `replace` when re-tapping the icon from inside /settings (still
|
|
||||||
// visible at the top of the sidebar). Push from another route, replace
|
|
||||||
// from inside Settings, so the back-stack doesn't accumulate
|
|
||||||
// /settings → /settings → /direct/ chains.
|
|
||||||
//
|
|
||||||
// `state: SETTINGS_FROM_IN_APP_STATE` marks the entry as in-app so
|
|
||||||
// SettingsScreen's close fallback knows `navigate(-1)` is safe (vs
|
|
||||||
// a cold-loaded /settings where the previous history entry might be
|
|
||||||
// cross-origin and would bounce the user out of Vojo).
|
|
||||||
const openSettings = () =>
|
|
||||||
navigate(getSettingsPath(), {
|
|
||||||
replace: !!settingsMatch,
|
|
||||||
state: SETTINGS_FROM_IN_APP_STATE,
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<SidebarItem active={!!settingsMatch}>
|
|
||||||
<SidebarItemTooltip tooltip="User Settings">
|
|
||||||
{(triggerRef) => (
|
|
||||||
<SidebarAvatar as="button" ref={triggerRef} onClick={openSettings}>
|
|
||||||
<UserAvatar
|
|
||||||
userId={userId}
|
|
||||||
src={avatarUrl}
|
|
||||||
renderFallback={() => <Text size="H4">{nameInitials(displayName)}</Text>}
|
|
||||||
/>
|
|
||||||
</SidebarAvatar>
|
|
||||||
)}
|
|
||||||
</SidebarItemTooltip>
|
|
||||||
</SidebarItem>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,894 +0,0 @@
|
||||||
import React, {
|
|
||||||
MouseEventHandler,
|
|
||||||
ReactNode,
|
|
||||||
RefObject,
|
|
||||||
forwardRef,
|
|
||||||
useCallback,
|
|
||||||
useEffect,
|
|
||||||
useMemo,
|
|
||||||
useRef,
|
|
||||||
useState,
|
|
||||||
} from 'react';
|
|
||||||
import { useMatch, useNavigate } from 'react-router-dom';
|
|
||||||
import {
|
|
||||||
Box,
|
|
||||||
Icon,
|
|
||||||
IconButton,
|
|
||||||
Icons,
|
|
||||||
Line,
|
|
||||||
Menu,
|
|
||||||
MenuItem,
|
|
||||||
PopOut,
|
|
||||||
RectCords,
|
|
||||||
Text,
|
|
||||||
color,
|
|
||||||
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 { getSpaceLobbyPath, getSpacePath, joinPathComponent } from '../../pathUtils';
|
|
||||||
import { CHANNELS_PATH } from '../../paths';
|
|
||||||
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, isRoomAlias } from '../../../utils/matrix';
|
|
||||||
import { isNativePlatform } from '../../../utils/capacitor';
|
|
||||||
import { RoomAvatar } from '../../../components/room-avatar';
|
|
||||||
import { nameInitials, randomStr } from '../../../utils/common';
|
|
||||||
import {
|
|
||||||
ISidebarFolder,
|
|
||||||
SidebarItems,
|
|
||||||
TSidebarItem,
|
|
||||||
makeVojoSpacesContent,
|
|
||||||
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 { usePowerLevels } from '../../../hooks/usePowerLevels';
|
|
||||||
import { useRoomsUnread } from '../../../state/hooks/unread';
|
|
||||||
import { roomToUnreadAtom } from '../../../state/room/roomToUnread';
|
|
||||||
import { markAsRead } from '../../../utils/notifications';
|
|
||||||
import { copyToClipboard } from '../../../utils/dom';
|
|
||||||
import { stopPropagation } from '../../../utils/keyboard';
|
|
||||||
import { getMatrixToRoom } from '../../../plugins/matrix-to';
|
|
||||||
import { getViaServers } from '../../../plugins/via-servers';
|
|
||||||
import { getRoomAvatarUrl } from '../../../utils/room';
|
|
||||||
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
|
|
||||||
import { useSetting } from '../../../state/hooks/settings';
|
|
||||||
import { settingsAtom } from '../../../state/settings';
|
|
||||||
import { useOpenSpaceSettings } from '../../../state/hooks/spaceSettings';
|
|
||||||
import { useRoomCreators } from '../../../hooks/useRoomCreators';
|
|
||||||
import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
|
|
||||||
import { InviteUserPrompt } from '../../../components/invite-user-prompt';
|
|
||||||
|
|
||||||
type SpaceMenuProps = {
|
|
||||||
room: Room;
|
|
||||||
requestClose: () => void;
|
|
||||||
onUnpin?: (roomId: string) => void;
|
|
||||||
};
|
|
||||||
const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(
|
|
||||||
({ room, requestClose, onUnpin }, ref) => {
|
|
||||||
const mx = useMatrixClient();
|
|
||||||
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
|
|
||||||
const roomToParents = useAtomValue(roomToParentsAtom);
|
|
||||||
const powerLevels = usePowerLevels(room);
|
|
||||||
const creators = useRoomCreators(room);
|
|
||||||
|
|
||||||
const permissions = useRoomPermissions(creators, powerLevels);
|
|
||||||
const canInvite = permissions.action('invite', mx.getSafeUserId());
|
|
||||||
const openSpaceSettings = useOpenSpaceSettings();
|
|
||||||
|
|
||||||
const [invitePrompt, setInvitePrompt] = useState(false);
|
|
||||||
|
|
||||||
const allChild = useSpaceChildren(
|
|
||||||
allRoomsAtom,
|
|
||||||
room.roomId,
|
|
||||||
useRecursiveChildScopeFactory(mx, roomToParents)
|
|
||||||
);
|
|
||||||
const unread = useRoomsUnread(allChild, roomToUnreadAtom);
|
|
||||||
|
|
||||||
const handleMarkAsRead = () => {
|
|
||||||
allChild.forEach((childRoomId) => markAsRead(mx, childRoomId, hideActivity));
|
|
||||||
requestClose();
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleUnpin = () => {
|
|
||||||
onUnpin?.(room.roomId);
|
|
||||||
requestClose();
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCopyLink = () => {
|
|
||||||
const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, room.roomId);
|
|
||||||
const viaServers = isRoomAlias(roomIdOrAlias) ? undefined : getViaServers(room);
|
|
||||||
copyToClipboard(getMatrixToRoom(roomIdOrAlias, viaServers));
|
|
||||||
requestClose();
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleInvite = () => {
|
|
||||||
setInvitePrompt(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleRoomSettings = () => {
|
|
||||||
openSpaceSettings(room.roomId);
|
|
||||||
requestClose();
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
|
|
||||||
{invitePrompt && room && (
|
|
||||||
<InviteUserPrompt
|
|
||||||
room={room}
|
|
||||||
requestClose={() => {
|
|
||||||
setInvitePrompt(false);
|
|
||||||
requestClose();
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<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"
|
|
||||||
aria-pressed={invitePrompt}
|
|
||||||
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;
|
|
||||||
inChannels?: boolean;
|
|
||||||
onClick: MouseEventHandler<HTMLButtonElement>;
|
|
||||||
folder?: ISidebarFolder;
|
|
||||||
onDragging: (dragItem?: SidebarDraggable) => void;
|
|
||||||
disabled?: boolean;
|
|
||||||
onUnpin?: (roomId: string) => void;
|
|
||||||
};
|
|
||||||
function SpaceTab({
|
|
||||||
space,
|
|
||||||
selected,
|
|
||||||
inChannels,
|
|
||||||
onClick,
|
|
||||||
folder,
|
|
||||||
onDragging,
|
|
||||||
disabled,
|
|
||||||
onUnpin,
|
|
||||||
}: SpaceTabProps) {
|
|
||||||
const mx = useMatrixClient();
|
|
||||||
const useAuthentication = useMediaAuthentication();
|
|
||||||
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}
|
|
||||||
style={
|
|
||||||
inChannels
|
|
||||||
? {
|
|
||||||
boxShadow: `0 0 0 ${toRem(2)} ${color.Primary.Main}`,
|
|
||||||
}
|
|
||||||
: undefined
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<RoomAvatar
|
|
||||||
roomId={space.roomId}
|
|
||||||
src={getRoomAvatarUrl(mx, space, 96, useAuthentication) ?? 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',
|
|
||||||
escapeDeactivates: stopPropagation,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<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 useAuthentication = useMediaAuthentication();
|
|
||||||
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={getRoomAvatarUrl(mx, space, 96, useAuthentication) ?? 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 = makeVojoSpacesContent(mx, newItems);
|
|
||||||
localEchoSidebarItem(parseSidebar(mx, orphanSpaces, newSpacesContent));
|
|
||||||
mx.setAccountData(AccountDataEvent.VojoSpaces, newSpacesContent);
|
|
||||||
},
|
|
||||||
[mx, sidebarItems, setOpenedFolder, localEchoSidebarItem, orphanSpaces]
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
const selectedSpaceId = useSelectedSpace();
|
|
||||||
// Highlights the avatar that owns the URL the user is on AND that they
|
|
||||||
// reached through the Channels segment. Drives the violet ring
|
|
||||||
// (color.Primary.Main) so the rail and the channels surface read as the same
|
|
||||||
// navigation, not two parallel ones. Without this, the user sees a
|
|
||||||
// selected outline that doesn't differentiate Space tab vs Channels
|
|
||||||
// segment activations.
|
|
||||||
const inChannelsSegment = !!useMatch({
|
|
||||||
path: CHANNELS_PATH,
|
|
||||||
caseSensitive: true,
|
|
||||||
end: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
const handleSpaceClick: MouseEventHandler<HTMLButtonElement> = (evt) => {
|
|
||||||
const target = evt.currentTarget;
|
|
||||||
const targetSpaceId = target.getAttribute('data-id');
|
|
||||||
if (!targetSpaceId) return;
|
|
||||||
|
|
||||||
const spacePath = getSpacePath(getCanonicalAliasOrRoomId(mx, targetSpaceId));
|
|
||||||
const navOpts = { replace: isNativePlatform() };
|
|
||||||
if (screenSize === ScreenSize.Mobile) {
|
|
||||||
navigate(spacePath, navOpts);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const activePath = navToActivePath.get(targetSpaceId);
|
|
||||||
if (activePath && activePath.pathname.startsWith(spacePath)) {
|
|
||||||
navigate(joinPathComponent(activePath), navOpts);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
navigate(getSpaceLobbyPath(getCanonicalAliasOrRoomId(mx, targetSpaceId)), navOpts);
|
|
||||||
};
|
|
||||||
|
|
||||||
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 = makeVojoSpacesContent(mx, newItems);
|
|
||||||
localEchoSidebarItem(parseSidebar(mx, orphanSpaces, newSpacesContent));
|
|
||||||
mx.setAccountData(AccountDataEvent.VojoSpaces, 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}
|
|
||||||
inChannels={
|
|
||||||
inChannelsSegment && 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}
|
|
||||||
inChannels={inChannelsSegment && space.roomId === selectedSpaceId}
|
|
||||||
onClick={handleSpaceClick}
|
|
||||||
onDragging={setDraggingItem}
|
|
||||||
disabled={typeof draggingItem === 'string' ? draggingItem === space.roomId : false}
|
|
||||||
onUnpin={orphanSpaces.includes(space.roomId) ? undefined : handleUnpin}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</SidebarStack>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
import { keyframes, style } from '@vanilla-extract/css';
|
|
||||||
import { color, toRem } from 'folds';
|
|
||||||
|
|
||||||
const pushRight = keyframes({
|
|
||||||
from: {
|
|
||||||
transform: `translateX(${toRem(2)}) scale(1)`,
|
|
||||||
},
|
|
||||||
to: {
|
|
||||||
transform: 'translateX(0) scale(1)',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export const UnverifiedTab = style({
|
|
||||||
animationName: pushRight,
|
|
||||||
animationDuration: '400ms',
|
|
||||||
animationIterationCount: 30,
|
|
||||||
animationDirection: 'alternate',
|
|
||||||
});
|
|
||||||
|
|
||||||
export const UnverifiedAvatar = style({
|
|
||||||
backgroundColor: color.Critical.Container,
|
|
||||||
color: color.Critical.OnContainer,
|
|
||||||
borderColor: color.Critical.ContainerLine,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const UnverifiedOtherAvatar = style({
|
|
||||||
backgroundColor: color.Warning.Container,
|
|
||||||
color: color.Warning.OnContainer,
|
|
||||||
borderColor: color.Warning.ContainerLine,
|
|
||||||
});
|
|
||||||
|
|
@ -1,98 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import { Badge, color, Icon, Icons, Text } from 'folds';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
import { useMatch, useNavigate } from 'react-router-dom';
|
|
||||||
import {
|
|
||||||
SidebarAvatar,
|
|
||||||
SidebarItem,
|
|
||||||
SidebarItemBadge,
|
|
||||||
SidebarItemTooltip,
|
|
||||||
} from '../../../components/sidebar';
|
|
||||||
import { useDeviceIds, useDeviceList, useSplitCurrentDevice } from '../../../hooks/useDeviceList';
|
|
||||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
|
||||||
import * as css from './UnverifiedTab.css';
|
|
||||||
import {
|
|
||||||
useDeviceVerificationStatus,
|
|
||||||
useUnverifiedDeviceCount,
|
|
||||||
VerificationStatus,
|
|
||||||
} from '../../../hooks/useDeviceVerificationStatus';
|
|
||||||
import { useCrossSigningActive } from '../../../hooks/useCrossSigning';
|
|
||||||
import { SETTINGS_PARAM_DEVICES } from '../../../features/settings';
|
|
||||||
import { SETTINGS_PATH } from '../../paths';
|
|
||||||
import { getSettingsPath } from '../../pathUtils';
|
|
||||||
import { SETTINGS_FROM_IN_APP_STATE } from '../../../features/settings/SettingsScreen';
|
|
||||||
|
|
||||||
function UnverifiedIndicator() {
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const mx = useMatrixClient();
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const settingsMatch = useMatch({ path: SETTINGS_PATH, caseSensitive: true, end: false });
|
|
||||||
|
|
||||||
const crypto = mx.getCrypto();
|
|
||||||
const [devices] = useDeviceList();
|
|
||||||
|
|
||||||
const [currentDevice, otherDevices] = useSplitCurrentDevice(devices);
|
|
||||||
|
|
||||||
const verificationStatus = useDeviceVerificationStatus(
|
|
||||||
crypto,
|
|
||||||
mx.getSafeUserId(),
|
|
||||||
currentDevice?.device_id
|
|
||||||
);
|
|
||||||
const unverified = verificationStatus === VerificationStatus.Unverified;
|
|
||||||
|
|
||||||
const otherDevicesId = useDeviceIds(otherDevices);
|
|
||||||
const unverifiedDeviceCount = useUnverifiedDeviceCount(
|
|
||||||
crypto,
|
|
||||||
mx.getSafeUserId(),
|
|
||||||
otherDevicesId
|
|
||||||
);
|
|
||||||
|
|
||||||
const openDevices = () =>
|
|
||||||
navigate(getSettingsPath(SETTINGS_PARAM_DEVICES), {
|
|
||||||
replace: !!settingsMatch,
|
|
||||||
state: SETTINGS_FROM_IN_APP_STATE,
|
|
||||||
});
|
|
||||||
|
|
||||||
const hasUnverified =
|
|
||||||
unverified || (unverifiedDeviceCount !== undefined && unverifiedDeviceCount > 0);
|
|
||||||
if (!hasUnverified) return null;
|
|
||||||
return (
|
|
||||||
<SidebarItem active={!!settingsMatch} className={css.UnverifiedTab}>
|
|
||||||
<SidebarItemTooltip
|
|
||||||
tooltip={unverified ? t('Inbox.unverified_device') : t('Inbox.unverified_devices')}
|
|
||||||
>
|
|
||||||
{(triggerRef) => (
|
|
||||||
<SidebarAvatar
|
|
||||||
className={unverified ? css.UnverifiedAvatar : css.UnverifiedOtherAvatar}
|
|
||||||
as="button"
|
|
||||||
ref={triggerRef}
|
|
||||||
outlined
|
|
||||||
onClick={openDevices}
|
|
||||||
>
|
|
||||||
<Icon
|
|
||||||
style={{ color: unverified ? color.Critical.Main : color.Warning.Main }}
|
|
||||||
src={Icons.ShieldUser}
|
|
||||||
/>
|
|
||||||
</SidebarAvatar>
|
|
||||||
)}
|
|
||||||
</SidebarItemTooltip>
|
|
||||||
{!unverified && unverifiedDeviceCount && unverifiedDeviceCount > 0 && (
|
|
||||||
<SidebarItemBadge hasCount>
|
|
||||||
<Badge variant="Warning" size="400" fill="Solid" radii="Pill" outlined={false}>
|
|
||||||
<Text as="span" size="L400">
|
|
||||||
{unverifiedDeviceCount}
|
|
||||||
</Text>
|
|
||||||
</Badge>
|
|
||||||
</SidebarItemBadge>
|
|
||||||
)}
|
|
||||||
</SidebarItem>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function UnverifiedTab() {
|
|
||||||
const crossSigningActive = useCrossSigningActive();
|
|
||||||
|
|
||||||
if (!crossSigningActive) return null;
|
|
||||||
|
|
||||||
return <UnverifiedIndicator />;
|
|
||||||
}
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
export * from './DirectTab';
|
|
||||||
export * from './SpaceTabs';
|
|
||||||
export * from './ExploreTab';
|
|
||||||
export * from './SettingsTab';
|
|
||||||
export * from './UnverifiedTab';
|
|
||||||
export * from './SearchTab';
|
|
||||||
Loading…
Add table
Reference in a new issue