mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-02-13 17:10:06 +00:00
Merge branch 'dev' into fix-1838
This commit is contained in:
commit
ace603dbdb
src
app
components
features
hooks
pages/client
util
86
src/app/components/BackRouteHandler.tsx
Normal file
86
src/app/components/BackRouteHandler.tsx
Normal file
|
@ -0,0 +1,86 @@
|
||||||
|
import { ReactNode, useCallback } from 'react';
|
||||||
|
import { matchPath, useLocation, useNavigate } from 'react-router-dom';
|
||||||
|
import {
|
||||||
|
getDirectPath,
|
||||||
|
getExplorePath,
|
||||||
|
getHomePath,
|
||||||
|
getInboxPath,
|
||||||
|
getSpacePath,
|
||||||
|
} from '../pages/pathUtils';
|
||||||
|
import { DIRECT_PATH, EXPLORE_PATH, HOME_PATH, INBOX_PATH, SPACE_PATH } from '../pages/paths';
|
||||||
|
|
||||||
|
type BackRouteHandlerProps = {
|
||||||
|
children: (onBack: () => void) => ReactNode;
|
||||||
|
};
|
||||||
|
export function BackRouteHandler({ children }: BackRouteHandlerProps) {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const location = useLocation();
|
||||||
|
|
||||||
|
const goBack = useCallback(() => {
|
||||||
|
if (
|
||||||
|
matchPath(
|
||||||
|
{
|
||||||
|
path: HOME_PATH,
|
||||||
|
caseSensitive: true,
|
||||||
|
end: false,
|
||||||
|
},
|
||||||
|
location.pathname
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
navigate(getHomePath());
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
matchPath(
|
||||||
|
{
|
||||||
|
path: DIRECT_PATH,
|
||||||
|
caseSensitive: true,
|
||||||
|
end: false,
|
||||||
|
},
|
||||||
|
location.pathname
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
navigate(getDirectPath());
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const spaceMatch = matchPath(
|
||||||
|
{
|
||||||
|
path: SPACE_PATH,
|
||||||
|
caseSensitive: true,
|
||||||
|
end: false,
|
||||||
|
},
|
||||||
|
location.pathname
|
||||||
|
);
|
||||||
|
if (spaceMatch?.params.spaceIdOrAlias) {
|
||||||
|
navigate(getSpacePath(spaceMatch.params.spaceIdOrAlias));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
matchPath(
|
||||||
|
{
|
||||||
|
path: EXPLORE_PATH,
|
||||||
|
caseSensitive: true,
|
||||||
|
end: false,
|
||||||
|
},
|
||||||
|
location.pathname
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
navigate(getExplorePath());
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
matchPath(
|
||||||
|
{
|
||||||
|
path: INBOX_PATH,
|
||||||
|
caseSensitive: true,
|
||||||
|
end: false,
|
||||||
|
},
|
||||||
|
location.pathname
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
navigate(getInboxPath());
|
||||||
|
}
|
||||||
|
}, [navigate, location]);
|
||||||
|
|
||||||
|
return children(goBack);
|
||||||
|
}
|
|
@ -87,15 +87,17 @@ export const Page = as<'div'>(({ className, ...props }, ref) => (
|
||||||
/>
|
/>
|
||||||
));
|
));
|
||||||
|
|
||||||
export const PageHeader = as<'div'>(({ className, ...props }, ref) => (
|
export const PageHeader = as<'div', css.PageHeaderVariants>(
|
||||||
<Header
|
({ className, balance, ...props }, ref) => (
|
||||||
as="header"
|
<Header
|
||||||
size="600"
|
as="header"
|
||||||
className={classNames(css.PageHeader, className)}
|
size="600"
|
||||||
{...props}
|
className={classNames(css.PageHeader({ balance }), className)}
|
||||||
ref={ref}
|
{...props}
|
||||||
/>
|
ref={ref}
|
||||||
));
|
/>
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
export const PageContent = as<'div'>(({ className, ...props }, ref) => (
|
export const PageContent = as<'div'>(({ className, ...props }, ref) => (
|
||||||
<div className={classNames(css.PageContent, className)} {...props} ref={ref} />
|
<div className={classNames(css.PageContent, className)} {...props} ref={ref} />
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import { style } from '@vanilla-extract/css';
|
import { style } from '@vanilla-extract/css';
|
||||||
|
import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
|
||||||
import { DefaultReset, color, config, toRem } from 'folds';
|
import { DefaultReset, color, config, toRem } from 'folds';
|
||||||
|
|
||||||
export const PageNav = style({
|
export const PageNav = style({
|
||||||
|
@ -33,11 +34,21 @@ export const PageNavContent = style({
|
||||||
paddingBottom: config.space.S700,
|
paddingBottom: config.space.S700,
|
||||||
});
|
});
|
||||||
|
|
||||||
export const PageHeader = style({
|
export const PageHeader = recipe({
|
||||||
paddingLeft: config.space.S400,
|
base: {
|
||||||
paddingRight: config.space.S200,
|
paddingLeft: config.space.S400,
|
||||||
borderBottomWidth: config.borderWidth.B300,
|
paddingRight: config.space.S200,
|
||||||
|
borderBottomWidth: config.borderWidth.B300,
|
||||||
|
},
|
||||||
|
variants: {
|
||||||
|
balance: {
|
||||||
|
true: {
|
||||||
|
paddingLeft: config.space.S200,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
export type PageHeaderVariants = RecipeVariants<typeof PageHeader>;
|
||||||
|
|
||||||
export const PageContent = style([
|
export const PageContent = style([
|
||||||
DefaultReset,
|
DefaultReset,
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Box, Scroll, Text, toRem } from 'folds';
|
import { Box, Icon, IconButton, Icons, Scroll, Text, toRem } from 'folds';
|
||||||
import { useAtomValue } from 'jotai';
|
import { useAtomValue } from 'jotai';
|
||||||
import { RoomCard } from '../../components/room-card';
|
import { RoomCard } from '../../components/room-card';
|
||||||
import { RoomTopicViewer } from '../../components/room-topic-viewer';
|
import { RoomTopicViewer } from '../../components/room-topic-viewer';
|
||||||
|
@ -8,6 +8,8 @@ import { RoomSummaryLoader } from '../../components/RoomSummaryLoader';
|
||||||
import { useRoomNavigate } from '../../hooks/useRoomNavigate';
|
import { useRoomNavigate } from '../../hooks/useRoomNavigate';
|
||||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||||
import { allRoomsAtom } from '../../state/room-list/roomList';
|
import { allRoomsAtom } from '../../state/room-list/roomList';
|
||||||
|
import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
|
||||||
|
import { BackRouteHandler } from '../../components/BackRouteHandler';
|
||||||
|
|
||||||
type JoinBeforeNavigateProps = { roomIdOrAlias: string; eventId?: string; viaServers?: string[] };
|
type JoinBeforeNavigateProps = { roomIdOrAlias: string; eventId?: string; viaServers?: string[] };
|
||||||
export function JoinBeforeNavigate({
|
export function JoinBeforeNavigate({
|
||||||
|
@ -18,6 +20,7 @@ export function JoinBeforeNavigate({
|
||||||
const mx = useMatrixClient();
|
const mx = useMatrixClient();
|
||||||
const allRooms = useAtomValue(allRoomsAtom);
|
const allRooms = useAtomValue(allRoomsAtom);
|
||||||
const { navigateRoom, navigateSpace } = useRoomNavigate();
|
const { navigateRoom, navigateSpace } = useRoomNavigate();
|
||||||
|
const screenSize = useScreenSizeContext();
|
||||||
|
|
||||||
const handleView = (roomId: string) => {
|
const handleView = (roomId: string) => {
|
||||||
if (mx.getRoom(roomId)?.isSpaceRoom()) {
|
if (mx.getRoom(roomId)?.isSpaceRoom()) {
|
||||||
|
@ -29,11 +32,24 @@ export function JoinBeforeNavigate({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Page>
|
<Page>
|
||||||
<PageHeader>
|
<PageHeader balance>
|
||||||
<Box grow="Yes" justifyContent="Center" alignItems="Center" gap="200">
|
<Box grow="Yes" gap="200">
|
||||||
<Text size="H3" truncate>
|
<Box shrink="No">
|
||||||
{roomIdOrAlias}
|
{screenSize === ScreenSize.Mobile && (
|
||||||
</Text>
|
<BackRouteHandler>
|
||||||
|
{(onBack) => (
|
||||||
|
<IconButton onClick={onBack}>
|
||||||
|
<Icon src={Icons.ArrowLeft} />
|
||||||
|
</IconButton>
|
||||||
|
)}
|
||||||
|
</BackRouteHandler>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
<Box grow="Yes" justifyContent="Center" alignItems="Center" gap="200">
|
||||||
|
<Text size="H3" truncate>
|
||||||
|
{roomIdOrAlias}
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
</PageHeader>
|
</PageHeader>
|
||||||
<Box grow="Yes">
|
<Box grow="Yes">
|
||||||
|
|
|
@ -31,6 +31,8 @@ import { IPowerLevels, usePowerLevelsAPI } from '../../hooks/usePowerLevels';
|
||||||
import { UseStateProvider } from '../../components/UseStateProvider';
|
import { UseStateProvider } from '../../components/UseStateProvider';
|
||||||
import { LeaveSpacePrompt } from '../../components/leave-space-prompt';
|
import { LeaveSpacePrompt } from '../../components/leave-space-prompt';
|
||||||
import { stopPropagation } from '../../utils/keyboard';
|
import { stopPropagation } from '../../utils/keyboard';
|
||||||
|
import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
|
||||||
|
import { BackRouteHandler } from '../../components/BackRouteHandler';
|
||||||
|
|
||||||
type LobbyMenuProps = {
|
type LobbyMenuProps = {
|
||||||
roomId: string;
|
roomId: string;
|
||||||
|
@ -123,6 +125,7 @@ export function LobbyHeader({ showProfile, powerLevels }: LobbyHeaderProps) {
|
||||||
const space = useSpace();
|
const space = useSpace();
|
||||||
const setPeopleDrawer = useSetSetting(settingsAtom, 'isPeopleDrawer');
|
const setPeopleDrawer = useSetSetting(settingsAtom, 'isPeopleDrawer');
|
||||||
const [menuAnchor, setMenuAnchor] = useState<RectCords>();
|
const [menuAnchor, setMenuAnchor] = useState<RectCords>();
|
||||||
|
const screenSize = useScreenSizeContext();
|
||||||
|
|
||||||
const name = useRoomName(space);
|
const name = useRoomName(space);
|
||||||
const avatarMxc = useRoomAvatar(space);
|
const avatarMxc = useRoomAvatar(space);
|
||||||
|
@ -133,42 +136,72 @@ export function LobbyHeader({ showProfile, powerLevels }: LobbyHeaderProps) {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PageHeader className={showProfile ? undefined : css.Header}>
|
<PageHeader className={showProfile ? undefined : css.Header} balance>
|
||||||
<Box grow="Yes" alignItems="Center" gap="200">
|
<Box grow="Yes" alignItems="Center" gap="200">
|
||||||
<Box grow="Yes" basis="No" />
|
{screenSize === ScreenSize.Mobile ? (
|
||||||
<Box justifyContent="Center" alignItems="Center" gap="300">
|
<>
|
||||||
{showProfile && (
|
<Box shrink="No">
|
||||||
<>
|
<BackRouteHandler>
|
||||||
<Avatar size="300">
|
{(onBack) => (
|
||||||
<RoomAvatar
|
<IconButton onClick={onBack}>
|
||||||
roomId={space.roomId}
|
<Icon src={Icons.ArrowLeft} />
|
||||||
src={avatarUrl}
|
</IconButton>
|
||||||
alt={name}
|
)}
|
||||||
renderFallback={() => <Text size="H4">{nameInitials(name)}</Text>}
|
</BackRouteHandler>
|
||||||
/>
|
</Box>
|
||||||
</Avatar>
|
<Box grow="Yes" justifyContent="Center">
|
||||||
<Text size="H3" truncate>
|
{showProfile && (
|
||||||
{name}
|
<Text size="H3" truncate>
|
||||||
</Text>
|
{name}
|
||||||
</>
|
</Text>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Box grow="Yes" basis="No" />
|
||||||
|
<Box justifyContent="Center" alignItems="Center" gap="300">
|
||||||
|
{showProfile && (
|
||||||
|
<>
|
||||||
|
<Avatar size="300">
|
||||||
|
<RoomAvatar
|
||||||
|
roomId={space.roomId}
|
||||||
|
src={avatarUrl}
|
||||||
|
alt={name}
|
||||||
|
renderFallback={() => <Text size="H4">{nameInitials(name)}</Text>}
|
||||||
|
/>
|
||||||
|
</Avatar>
|
||||||
|
<Text size="H3" truncate>
|
||||||
|
{name}
|
||||||
|
</Text>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<Box
|
||||||
|
shrink="No"
|
||||||
|
grow={screenSize === ScreenSize.Mobile ? 'No' : 'Yes'}
|
||||||
|
basis={screenSize === ScreenSize.Mobile ? 'Yes' : 'No'}
|
||||||
|
justifyContent="End"
|
||||||
|
>
|
||||||
|
{screenSize !== ScreenSize.Mobile && (
|
||||||
|
<TooltipProvider
|
||||||
|
position="Bottom"
|
||||||
|
offset={4}
|
||||||
|
tooltip={
|
||||||
|
<Tooltip>
|
||||||
|
<Text>Members</Text>
|
||||||
|
</Tooltip>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{(triggerRef) => (
|
||||||
|
<IconButton ref={triggerRef} onClick={() => setPeopleDrawer((drawer) => !drawer)}>
|
||||||
|
<Icon size="400" src={Icons.User} />
|
||||||
|
</IconButton>
|
||||||
|
)}
|
||||||
|
</TooltipProvider>
|
||||||
)}
|
)}
|
||||||
</Box>
|
|
||||||
<Box shrink="No" grow="Yes" basis="No" justifyContent="End">
|
|
||||||
<TooltipProvider
|
|
||||||
position="Bottom"
|
|
||||||
offset={4}
|
|
||||||
tooltip={
|
|
||||||
<Tooltip>
|
|
||||||
<Text>Members</Text>
|
|
||||||
</Tooltip>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{(triggerRef) => (
|
|
||||||
<IconButton ref={triggerRef} onClick={() => setPeopleDrawer((drawer) => !drawer)}>
|
|
||||||
<Icon size="400" src={Icons.User} />
|
|
||||||
</IconButton>
|
|
||||||
)}
|
|
||||||
</TooltipProvider>
|
|
||||||
<TooltipProvider
|
<TooltipProvider
|
||||||
position="Bottom"
|
position="Bottom"
|
||||||
align="End"
|
align="End"
|
||||||
|
|
|
@ -52,6 +52,7 @@ import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
|
||||||
import { stopPropagation } from '../../utils/keyboard';
|
import { stopPropagation } from '../../utils/keyboard';
|
||||||
import { getMatrixToRoom } from '../../plugins/matrix-to';
|
import { getMatrixToRoom } from '../../plugins/matrix-to';
|
||||||
import { getViaServers } from '../../plugins/via-servers';
|
import { getViaServers } from '../../plugins/via-servers';
|
||||||
|
import { BackRouteHandler } from '../../components/BackRouteHandler';
|
||||||
|
|
||||||
type RoomMenuProps = {
|
type RoomMenuProps = {
|
||||||
room: Room;
|
room: Room;
|
||||||
|
@ -203,19 +204,36 @@ export function RoomViewHeader() {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PageHeader>
|
<PageHeader balance={screenSize === ScreenSize.Mobile}>
|
||||||
<Box grow="Yes" gap="300">
|
<Box grow="Yes" gap="300">
|
||||||
|
{screenSize === ScreenSize.Mobile && (
|
||||||
|
<BackRouteHandler>
|
||||||
|
{(onBack) => (
|
||||||
|
<Box shrink="No" alignItems="Center">
|
||||||
|
<IconButton onClick={onBack}>
|
||||||
|
<Icon src={Icons.ArrowLeft} />
|
||||||
|
</IconButton>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
</BackRouteHandler>
|
||||||
|
)}
|
||||||
<Box grow="Yes" alignItems="Center" gap="300">
|
<Box grow="Yes" alignItems="Center" gap="300">
|
||||||
<Avatar size="300">
|
{screenSize !== ScreenSize.Mobile && (
|
||||||
<RoomAvatar
|
<Avatar size="300">
|
||||||
roomId={room.roomId}
|
<RoomAvatar
|
||||||
src={avatarUrl}
|
roomId={room.roomId}
|
||||||
alt={name}
|
src={avatarUrl}
|
||||||
renderFallback={() => (
|
alt={name}
|
||||||
<RoomIcon size="200" joinRule={room.getJoinRule() ?? JoinRule.Restricted} filled />
|
renderFallback={() => (
|
||||||
)}
|
<RoomIcon
|
||||||
/>
|
size="200"
|
||||||
</Avatar>
|
joinRule={room.getJoinRule() ?? JoinRule.Restricted}
|
||||||
|
filled
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</Avatar>
|
||||||
|
)}
|
||||||
<Box direction="Column">
|
<Box direction="Column">
|
||||||
<Text size={topic ? 'H5' : 'H3'} truncate>
|
<Text size={topic ? 'H5' : 'H3'} truncate>
|
||||||
{name}
|
{name}
|
||||||
|
|
|
@ -1,31 +0,0 @@
|
||||||
/* eslint-disable import/prefer-default-export */
|
|
||||||
import { useState, useEffect } from 'react';
|
|
||||||
import { useMatrixClient } from './useMatrixClient';
|
|
||||||
|
|
||||||
export function useDeviceList() {
|
|
||||||
const mx = useMatrixClient();
|
|
||||||
const [deviceList, setDeviceList] = useState(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
let isMounted = true;
|
|
||||||
|
|
||||||
const updateDevices = () => mx.getDevices().then((data) => {
|
|
||||||
if (!isMounted) return;
|
|
||||||
setDeviceList(data.devices || []);
|
|
||||||
});
|
|
||||||
updateDevices();
|
|
||||||
|
|
||||||
const handleDevicesUpdate = (users) => {
|
|
||||||
if (users.includes(mx.getUserId())) {
|
|
||||||
updateDevices();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
mx.on('crypto.devicesUpdated', handleDevicesUpdate);
|
|
||||||
return () => {
|
|
||||||
mx.removeListener('crypto.devicesUpdated', handleDevicesUpdate);
|
|
||||||
isMounted = false;
|
|
||||||
};
|
|
||||||
}, [mx]);
|
|
||||||
return deviceList;
|
|
||||||
}
|
|
35
src/app/hooks/useDeviceList.ts
Normal file
35
src/app/hooks/useDeviceList.ts
Normal file
|
@ -0,0 +1,35 @@
|
||||||
|
/* eslint-disable import/prefer-default-export */
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { CryptoEvent, IMyDevice } from 'matrix-js-sdk';
|
||||||
|
import { CryptoEventHandlerMap } from 'matrix-js-sdk/lib/crypto';
|
||||||
|
import { useMatrixClient } from './useMatrixClient';
|
||||||
|
|
||||||
|
export function useDeviceList() {
|
||||||
|
const mx = useMatrixClient();
|
||||||
|
const [deviceList, setDeviceList] = useState<IMyDevice[] | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let isMounted = true;
|
||||||
|
|
||||||
|
const updateDevices = () =>
|
||||||
|
mx.getDevices().then((data) => {
|
||||||
|
if (!isMounted) return;
|
||||||
|
setDeviceList(data.devices || []);
|
||||||
|
});
|
||||||
|
updateDevices();
|
||||||
|
|
||||||
|
const handleDevicesUpdate: CryptoEventHandlerMap[CryptoEvent.DevicesUpdated] = (users) => {
|
||||||
|
const userId = mx.getUserId();
|
||||||
|
if (userId && users.includes(userId)) {
|
||||||
|
updateDevices();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
mx.on(CryptoEvent.DevicesUpdated, handleDevicesUpdate);
|
||||||
|
return () => {
|
||||||
|
mx.removeListener(CryptoEvent.DevicesUpdated, handleDevicesUpdate);
|
||||||
|
isMounted = false;
|
||||||
|
};
|
||||||
|
}, [mx]);
|
||||||
|
return deviceList;
|
||||||
|
}
|
|
@ -10,7 +10,15 @@ import {
|
||||||
SidebarItemTooltip,
|
SidebarItemTooltip,
|
||||||
SidebarItem,
|
SidebarItem,
|
||||||
} from '../../components/sidebar';
|
} from '../../components/sidebar';
|
||||||
import { DirectTab, HomeTab, SpaceTabs, InboxTab, ExploreTab, UserTab } from './sidebar';
|
import {
|
||||||
|
DirectTab,
|
||||||
|
HomeTab,
|
||||||
|
SpaceTabs,
|
||||||
|
InboxTab,
|
||||||
|
ExploreTab,
|
||||||
|
UserTab,
|
||||||
|
UnverifiedTab,
|
||||||
|
} from './sidebar';
|
||||||
import { openCreateRoom, openSearch } from '../../../client/action/navigation';
|
import { openCreateRoom, openSearch } from '../../../client/action/navigation';
|
||||||
|
|
||||||
export function SidebarNav() {
|
export function SidebarNav() {
|
||||||
|
@ -65,6 +73,8 @@ export function SidebarNav() {
|
||||||
</SidebarItemTooltip>
|
</SidebarItemTooltip>
|
||||||
</SidebarItem>
|
</SidebarItem>
|
||||||
|
|
||||||
|
<UnverifiedTab />
|
||||||
|
|
||||||
<InboxTab />
|
<InboxTab />
|
||||||
<UserTab />
|
<UserTab />
|
||||||
</SidebarStack>
|
</SidebarStack>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Box, Icon, Icons, Scroll, Text } from 'folds';
|
import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds';
|
||||||
import { useAtomValue } from 'jotai';
|
import { useAtomValue } from 'jotai';
|
||||||
import { useClientConfig } from '../../../hooks/useClientConfig';
|
import { useClientConfig } from '../../../hooks/useClientConfig';
|
||||||
import { RoomCard, RoomCardGrid } from '../../../components/room-card';
|
import { RoomCard, RoomCardGrid } from '../../../components/room-card';
|
||||||
|
@ -9,21 +9,38 @@ import {
|
||||||
Page,
|
Page,
|
||||||
PageContent,
|
PageContent,
|
||||||
PageContentCenter,
|
PageContentCenter,
|
||||||
|
PageHeader,
|
||||||
PageHero,
|
PageHero,
|
||||||
PageHeroSection,
|
PageHeroSection,
|
||||||
} from '../../../components/page';
|
} from '../../../components/page';
|
||||||
import { RoomTopicViewer } from '../../../components/room-topic-viewer';
|
import { RoomTopicViewer } from '../../../components/room-topic-viewer';
|
||||||
import * as css from './style.css';
|
import * as css from './style.css';
|
||||||
import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
|
import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
|
||||||
|
import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
|
||||||
|
import { BackRouteHandler } from '../../../components/BackRouteHandler';
|
||||||
|
|
||||||
export function FeaturedRooms() {
|
export function FeaturedRooms() {
|
||||||
const { featuredCommunities } = useClientConfig();
|
const { featuredCommunities } = useClientConfig();
|
||||||
const { rooms, spaces } = featuredCommunities ?? {};
|
const { rooms, spaces } = featuredCommunities ?? {};
|
||||||
const allRooms = useAtomValue(allRoomsAtom);
|
const allRooms = useAtomValue(allRoomsAtom);
|
||||||
|
const screenSize = useScreenSizeContext();
|
||||||
const { navigateSpace, navigateRoom } = useRoomNavigate();
|
const { navigateSpace, navigateRoom } = useRoomNavigate();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Page>
|
<Page>
|
||||||
|
{screenSize === ScreenSize.Mobile && (
|
||||||
|
<PageHeader>
|
||||||
|
<Box shrink="No">
|
||||||
|
<BackRouteHandler>
|
||||||
|
{(onBack) => (
|
||||||
|
<IconButton onClick={onBack}>
|
||||||
|
<Icon src={Icons.ArrowLeft} />
|
||||||
|
</IconButton>
|
||||||
|
)}
|
||||||
|
</BackRouteHandler>
|
||||||
|
</Box>
|
||||||
|
</PageHeader>
|
||||||
|
)}
|
||||||
<Box grow="Yes">
|
<Box grow="Yes">
|
||||||
<Scroll hideTrack visibility="Hover">
|
<Scroll hideTrack visibility="Hover">
|
||||||
<PageContent>
|
<PageContent>
|
||||||
|
|
|
@ -13,6 +13,7 @@ import {
|
||||||
Button,
|
Button,
|
||||||
Chip,
|
Chip,
|
||||||
Icon,
|
Icon,
|
||||||
|
IconButton,
|
||||||
Icons,
|
Icons,
|
||||||
Input,
|
Input,
|
||||||
Line,
|
Line,
|
||||||
|
@ -42,6 +43,8 @@ import { allRoomsAtom } from '../../../state/room-list/roomList';
|
||||||
import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
|
import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
|
||||||
import { getMxIdServer } from '../../../utils/matrix';
|
import { getMxIdServer } from '../../../utils/matrix';
|
||||||
import { stopPropagation } from '../../../utils/keyboard';
|
import { stopPropagation } from '../../../utils/keyboard';
|
||||||
|
import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
|
||||||
|
import { BackRouteHandler } from '../../../components/BackRouteHandler';
|
||||||
|
|
||||||
const useServerSearchParams = (searchParams: URLSearchParams): ExploreServerPathSearchParams =>
|
const useServerSearchParams = (searchParams: URLSearchParams): ExploreServerPathSearchParams =>
|
||||||
useMemo(
|
useMemo(
|
||||||
|
@ -344,6 +347,7 @@ export function PublicRooms() {
|
||||||
const userServer = userId && getMxIdServer(userId);
|
const userServer = userId && getMxIdServer(userId);
|
||||||
const allRooms = useAtomValue(allRoomsAtom);
|
const allRooms = useAtomValue(allRoomsAtom);
|
||||||
const { navigateSpace, navigateRoom } = useRoomNavigate();
|
const { navigateSpace, navigateRoom } = useRoomNavigate();
|
||||||
|
const screenSize = useScreenSizeContext();
|
||||||
|
|
||||||
const [searchParams] = useSearchParams();
|
const [searchParams] = useSearchParams();
|
||||||
const serverSearchParams = useServerSearchParams(searchParams);
|
const serverSearchParams = useServerSearchParams(searchParams);
|
||||||
|
@ -466,7 +470,7 @@ export function PublicRooms() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Page>
|
<Page>
|
||||||
<PageHeader>
|
<PageHeader balance>
|
||||||
{isSearch ? (
|
{isSearch ? (
|
||||||
<>
|
<>
|
||||||
<Box grow="Yes" basis="No">
|
<Box grow="Yes" basis="No">
|
||||||
|
@ -482,20 +486,34 @@ export function PublicRooms() {
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
<Box grow="No" justifyContent="Center" alignItems="Center" gap="200">
|
<Box grow="No" justifyContent="Center" alignItems="Center" gap="200">
|
||||||
<Icon size="400" src={Icons.Search} />
|
{screenSize !== ScreenSize.Mobile && <Icon size="400" src={Icons.Search} />}
|
||||||
<Text size="H3" truncate>
|
<Text size="H3" truncate>
|
||||||
Search
|
Search
|
||||||
</Text>
|
</Text>
|
||||||
</Box>
|
</Box>
|
||||||
<Box grow="Yes" />
|
<Box grow="Yes" basis="No" />
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<Box grow="Yes" justifyContent="Center" alignItems="Center" gap="200">
|
<>
|
||||||
<Icon size="400" src={Icons.Category} />
|
<Box grow="Yes" basis="No">
|
||||||
<Text size="H3" truncate>
|
{screenSize === ScreenSize.Mobile && (
|
||||||
{server}
|
<BackRouteHandler>
|
||||||
</Text>
|
{(onBack) => (
|
||||||
</Box>
|
<IconButton onClick={onBack}>
|
||||||
|
<Icon src={Icons.ArrowLeft} />
|
||||||
|
</IconButton>
|
||||||
|
)}
|
||||||
|
</BackRouteHandler>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
<Box grow="Yes" justifyContent="Center" alignItems="Center" gap="200">
|
||||||
|
{screenSize !== ScreenSize.Mobile && <Icon size="400" src={Icons.Category} />}
|
||||||
|
<Text size="H3" truncate>
|
||||||
|
{server}
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
<Box grow="Yes" basis="No" />
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
</PageHeader>
|
</PageHeader>
|
||||||
<Box grow="Yes">
|
<Box grow="Yes">
|
||||||
|
|
|
@ -1,21 +1,38 @@
|
||||||
import React, { useRef } from 'react';
|
import React, { useRef } from 'react';
|
||||||
import { Box, Icon, Icons, Text, Scroll } from 'folds';
|
import { Box, Icon, Icons, Text, Scroll, IconButton } from 'folds';
|
||||||
import { Page, PageContent, PageContentCenter, PageHeader } from '../../../components/page';
|
import { Page, PageContent, PageContentCenter, PageHeader } from '../../../components/page';
|
||||||
import { MessageSearch } from '../../../features/message-search';
|
import { MessageSearch } from '../../../features/message-search';
|
||||||
import { useHomeRooms } from './useHomeRooms';
|
import { useHomeRooms } from './useHomeRooms';
|
||||||
|
import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
|
||||||
|
import { BackRouteHandler } from '../../../components/BackRouteHandler';
|
||||||
|
|
||||||
export function HomeSearch() {
|
export function HomeSearch() {
|
||||||
const scrollRef = useRef<HTMLDivElement>(null);
|
const scrollRef = useRef<HTMLDivElement>(null);
|
||||||
const rooms = useHomeRooms();
|
const rooms = useHomeRooms();
|
||||||
|
const screenSize = useScreenSizeContext();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Page>
|
<Page>
|
||||||
<PageHeader>
|
<PageHeader balance>
|
||||||
<Box grow="Yes" justifyContent="Center" alignItems="Center" gap="200">
|
<Box grow="Yes" alignItems="Center" gap="200">
|
||||||
<Icon size="400" src={Icons.Search} />
|
<Box grow="Yes" basis="No">
|
||||||
<Text size="H3" truncate>
|
{screenSize === ScreenSize.Mobile && (
|
||||||
Message Search
|
<BackRouteHandler>
|
||||||
</Text>
|
{(onBack) => (
|
||||||
|
<IconButton onClick={onBack}>
|
||||||
|
<Icon src={Icons.ArrowLeft} />
|
||||||
|
</IconButton>
|
||||||
|
)}
|
||||||
|
</BackRouteHandler>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
<Box justifyContent="Center" alignItems="Center" gap="200">
|
||||||
|
{screenSize !== ScreenSize.Mobile && <Icon size="400" src={Icons.Search} />}
|
||||||
|
<Text size="H3" truncate>
|
||||||
|
Message Search
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
<Box grow="Yes" basis="No" />
|
||||||
</Box>
|
</Box>
|
||||||
</PageHeader>
|
</PageHeader>
|
||||||
<Box style={{ position: 'relative' }} grow="Yes">
|
<Box style={{ position: 'relative' }} grow="Yes">
|
||||||
|
|
|
@ -4,6 +4,7 @@ import {
|
||||||
Box,
|
Box,
|
||||||
Button,
|
Button,
|
||||||
Icon,
|
Icon,
|
||||||
|
IconButton,
|
||||||
Icons,
|
Icons,
|
||||||
Overlay,
|
Overlay,
|
||||||
OverlayBackdrop,
|
OverlayBackdrop,
|
||||||
|
@ -39,6 +40,8 @@ import { RoomTopicViewer } from '../../../components/room-topic-viewer';
|
||||||
import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
|
import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
|
||||||
import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
|
import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
|
||||||
import { useRoomTopic } from '../../../hooks/useRoomMeta';
|
import { useRoomTopic } from '../../../hooks/useRoomMeta';
|
||||||
|
import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
|
||||||
|
import { BackRouteHandler } from '../../../components/BackRouteHandler';
|
||||||
|
|
||||||
const COMPACT_CARD_WIDTH = 548;
|
const COMPACT_CARD_WIDTH = 548;
|
||||||
|
|
||||||
|
@ -205,6 +208,7 @@ export function Invites() {
|
||||||
useCallback(() => containerRef.current, []),
|
useCallback(() => containerRef.current, []),
|
||||||
useCallback((width) => setCompact(width <= COMPACT_CARD_WIDTH), [])
|
useCallback((width) => setCompact(width <= COMPACT_CARD_WIDTH), [])
|
||||||
);
|
);
|
||||||
|
const screenSize = useScreenSizeContext();
|
||||||
|
|
||||||
const { navigateRoom, navigateSpace } = useRoomNavigate();
|
const { navigateRoom, navigateSpace } = useRoomNavigate();
|
||||||
|
|
||||||
|
@ -225,12 +229,26 @@ export function Invites() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Page>
|
<Page>
|
||||||
<PageHeader>
|
<PageHeader balance>
|
||||||
<Box grow="Yes" justifyContent="Center" alignItems="Center" gap="200">
|
<Box grow="Yes" gap="200">
|
||||||
<Icon size="400" src={Icons.Mail} />
|
<Box grow="Yes" basis="No">
|
||||||
<Text size="H3" truncate>
|
{screenSize === ScreenSize.Mobile && (
|
||||||
Invitations
|
<BackRouteHandler>
|
||||||
</Text>
|
{(onBack) => (
|
||||||
|
<IconButton onClick={onBack}>
|
||||||
|
<Icon src={Icons.ArrowLeft} />
|
||||||
|
</IconButton>
|
||||||
|
)}
|
||||||
|
</BackRouteHandler>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
<Box alignItems="Center" gap="200">
|
||||||
|
{screenSize !== ScreenSize.Mobile && <Icon size="400" src={Icons.Mail} />}
|
||||||
|
<Text size="H3" truncate>
|
||||||
|
Invitations
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
<Box grow="Yes" basis="No" />
|
||||||
</Box>
|
</Box>
|
||||||
</PageHeader>
|
</PageHeader>
|
||||||
<Box grow="Yes">
|
<Box grow="Yes">
|
||||||
|
|
|
@ -78,6 +78,8 @@ import { UserAvatar } from '../../../components/user-avatar';
|
||||||
import { EncryptedContent } from '../../../features/room/message';
|
import { EncryptedContent } from '../../../features/room/message';
|
||||||
import { useMentionClickHandler } from '../../../hooks/useMentionClickHandler';
|
import { useMentionClickHandler } from '../../../hooks/useMentionClickHandler';
|
||||||
import { useSpoilerClickHandler } from '../../../hooks/useSpoilerClickHandler';
|
import { useSpoilerClickHandler } from '../../../hooks/useSpoilerClickHandler';
|
||||||
|
import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
|
||||||
|
import { BackRouteHandler } from '../../../components/BackRouteHandler';
|
||||||
|
|
||||||
type RoomNotificationsGroup = {
|
type RoomNotificationsGroup = {
|
||||||
roomId: string;
|
roomId: string;
|
||||||
|
@ -484,6 +486,7 @@ export function Notifications() {
|
||||||
const mx = useMatrixClient();
|
const mx = useMatrixClient();
|
||||||
const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
|
const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
|
||||||
const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
|
const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
|
||||||
|
const screenSize = useScreenSizeContext();
|
||||||
|
|
||||||
const { navigateRoom } = useRoomNavigate();
|
const { navigateRoom } = useRoomNavigate();
|
||||||
const [searchParams, setSearchParams] = useSearchParams();
|
const [searchParams, setSearchParams] = useSearchParams();
|
||||||
|
@ -549,12 +552,26 @@ export function Notifications() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Page>
|
<Page>
|
||||||
<PageHeader>
|
<PageHeader balance>
|
||||||
<Box grow="Yes" justifyContent="Center" alignItems="Center" gap="200">
|
<Box grow="Yes" gap="200">
|
||||||
<Icon size="400" src={Icons.Message} />
|
<Box grow="Yes" basis="No">
|
||||||
<Text size="H3" truncate>
|
{screenSize === ScreenSize.Mobile && (
|
||||||
Notification Messages
|
<BackRouteHandler>
|
||||||
</Text>
|
{(onBack) => (
|
||||||
|
<IconButton onClick={onBack}>
|
||||||
|
<Icon src={Icons.ArrowLeft} />
|
||||||
|
</IconButton>
|
||||||
|
)}
|
||||||
|
</BackRouteHandler>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
<Box alignItems="Center" gap="200">
|
||||||
|
{screenSize !== ScreenSize.Mobile && <Icon size="400" src={Icons.Message} />}
|
||||||
|
<Text size="H3" truncate>
|
||||||
|
Notification Messages
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
<Box grow="Yes" basis="No" />
|
||||||
</Box>
|
</Box>
|
||||||
</PageHeader>
|
</PageHeader>
|
||||||
|
|
||||||
|
|
24
src/app/pages/client/sidebar/UnverifiedTab.css.ts
Normal file
24
src/app/pages/client/sidebar/UnverifiedTab.css.ts
Normal file
|
@ -0,0 +1,24 @@
|
||||||
|
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,
|
||||||
|
});
|
51
src/app/pages/client/sidebar/UnverifiedTab.tsx
Normal file
51
src/app/pages/client/sidebar/UnverifiedTab.tsx
Normal file
|
@ -0,0 +1,51 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { Badge, color, Icon, Icons, Text } from 'folds';
|
||||||
|
import { openSettings } from '../../../../client/action/navigation';
|
||||||
|
import { isCrossVerified } from '../../../../util/matrixUtil';
|
||||||
|
import {
|
||||||
|
SidebarAvatar,
|
||||||
|
SidebarItem,
|
||||||
|
SidebarItemBadge,
|
||||||
|
SidebarItemTooltip,
|
||||||
|
} from '../../../components/sidebar';
|
||||||
|
import { useDeviceList } from '../../../hooks/useDeviceList';
|
||||||
|
import { tabText } from '../../../organisms/settings/Settings';
|
||||||
|
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||||
|
import * as css from './UnverifiedTab.css';
|
||||||
|
|
||||||
|
export function UnverifiedTab() {
|
||||||
|
const mx = useMatrixClient();
|
||||||
|
const deviceList = useDeviceList();
|
||||||
|
console.log(deviceList);
|
||||||
|
const unverified = deviceList?.filter(
|
||||||
|
(device) => isCrossVerified(mx, device.device_id) === false
|
||||||
|
);
|
||||||
|
console.log(unverified);
|
||||||
|
|
||||||
|
if (!unverified?.length) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SidebarItem className={css.UnverifiedTab}>
|
||||||
|
<SidebarItemTooltip tooltip="Unverified Sessions">
|
||||||
|
{(triggerRef) => (
|
||||||
|
<SidebarAvatar
|
||||||
|
className={css.UnverifiedAvatar}
|
||||||
|
as="button"
|
||||||
|
ref={triggerRef}
|
||||||
|
outlined
|
||||||
|
onClick={() => openSettings(tabText.SECURITY)}
|
||||||
|
>
|
||||||
|
<Icon style={{ color: color.Critical.Main }} src={Icons.ShieldUser} />
|
||||||
|
</SidebarAvatar>
|
||||||
|
)}
|
||||||
|
</SidebarItemTooltip>
|
||||||
|
<SidebarItemBadge hasCount>
|
||||||
|
<Badge variant="Critical" size="400" fill="Solid" radii="Pill" outlined={false}>
|
||||||
|
<Text as="span" size="L400">
|
||||||
|
{unverified.length}
|
||||||
|
</Text>
|
||||||
|
</Badge>
|
||||||
|
</SidebarItemBadge>
|
||||||
|
</SidebarItem>
|
||||||
|
);
|
||||||
|
}
|
|
@ -4,3 +4,4 @@ export * from './SpaceTabs';
|
||||||
export * from './InboxTab';
|
export * from './InboxTab';
|
||||||
export * from './ExploreTab';
|
export * from './ExploreTab';
|
||||||
export * from './UserTab';
|
export * from './UserTab';
|
||||||
|
export * from './UnverifiedTab';
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import React, { useRef } from 'react';
|
import React, { useRef } from 'react';
|
||||||
import { Box, Icon, Icons, Text, Scroll } from 'folds';
|
import { Box, Icon, Icons, Text, Scroll, IconButton } from 'folds';
|
||||||
import { useAtomValue } from 'jotai';
|
import { useAtomValue } from 'jotai';
|
||||||
import { Page, PageContent, PageContentCenter, PageHeader } from '../../../components/page';
|
import { Page, PageContent, PageContentCenter, PageHeader } from '../../../components/page';
|
||||||
import { MessageSearch } from '../../../features/message-search';
|
import { MessageSearch } from '../../../features/message-search';
|
||||||
|
@ -9,11 +9,14 @@ import { allRoomsAtom } from '../../../state/room-list/roomList';
|
||||||
import { mDirectAtom } from '../../../state/mDirectList';
|
import { mDirectAtom } from '../../../state/mDirectList';
|
||||||
import { roomToParentsAtom } from '../../../state/room/roomToParents';
|
import { roomToParentsAtom } from '../../../state/room/roomToParents';
|
||||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||||
|
import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
|
||||||
|
import { BackRouteHandler } from '../../../components/BackRouteHandler';
|
||||||
|
|
||||||
export function SpaceSearch() {
|
export function SpaceSearch() {
|
||||||
const mx = useMatrixClient();
|
const mx = useMatrixClient();
|
||||||
const scrollRef = useRef<HTMLDivElement>(null);
|
const scrollRef = useRef<HTMLDivElement>(null);
|
||||||
const space = useSpace();
|
const space = useSpace();
|
||||||
|
const screenSize = useScreenSizeContext();
|
||||||
|
|
||||||
const mDirects = useAtomValue(mDirectAtom);
|
const mDirects = useAtomValue(mDirectAtom);
|
||||||
const roomToParents = useAtomValue(roomToParentsAtom);
|
const roomToParents = useAtomValue(roomToParentsAtom);
|
||||||
|
@ -25,12 +28,26 @@ export function SpaceSearch() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Page>
|
<Page>
|
||||||
<PageHeader>
|
<PageHeader balance>
|
||||||
<Box grow="Yes" justifyContent="Center" alignItems="Center" gap="200">
|
<Box grow="Yes" alignItems="Center" gap="200">
|
||||||
<Icon size="400" src={Icons.Search} />
|
<Box grow="Yes" basis="No">
|
||||||
<Text size="H3" truncate>
|
{screenSize === ScreenSize.Mobile && (
|
||||||
Message Search
|
<BackRouteHandler>
|
||||||
</Text>
|
{(onBack) => (
|
||||||
|
<IconButton onClick={onBack}>
|
||||||
|
<Icon src={Icons.ArrowLeft} />
|
||||||
|
</IconButton>
|
||||||
|
)}
|
||||||
|
</BackRouteHandler>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
<Box justifyContent="Center" alignItems="Center" gap="200">
|
||||||
|
{screenSize !== ScreenSize.Mobile && <Icon size="400" src={Icons.Search} />}
|
||||||
|
<Text size="H3" truncate>
|
||||||
|
Message Search
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
<Box grow="Yes" basis="No" />
|
||||||
</Box>
|
</Box>
|
||||||
</PageHeader>
|
</PageHeader>
|
||||||
<Box style={{ position: 'relative' }} grow="Yes">
|
<Box style={{ position: 'relative' }} grow="Yes">
|
||||||
|
|
|
@ -106,7 +106,7 @@ export function isCrossVerified(mx, deviceId) {
|
||||||
const deviceInfo = mx.getStoredDevice(mx.getUserId(), deviceId);
|
const deviceInfo = mx.getStoredDevice(mx.getUserId(), deviceId);
|
||||||
const deviceTrust = crossSignInfo.checkDeviceTrust(crossSignInfo, deviceInfo, false, true);
|
const deviceTrust = crossSignInfo.checkDeviceTrust(crossSignInfo, deviceInfo, false, true);
|
||||||
return deviceTrust.isCrossSigningVerified();
|
return deviceTrust.isCrossSigningVerified();
|
||||||
} catch {
|
} catch (e) {
|
||||||
// device does not support encryption
|
// device does not support encryption
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue