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

add back btn for mobile view (#1861)

Browse source
This commit is contained in:
Ajay Bura 2024-08-03 19:17:53 +05:30 • committed by GitHub
parent c62050445b
commit 9cb5c70d51
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 370 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

86
src/app/components/BackRouteHandler.tsx Normal file
View 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);
}

20
src/app/components/page/Page.tsx
View file

@ -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} />

19
src/app/components/page/style.css.ts
View file

@ -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,

28
src/app/features/join-before-navigate/JoinBeforeNavigate.tsx
View file

@ -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">

101
src/app/features/lobby/LobbyHeader.tsx
View file

@ -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"

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

@ -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}

19
src/app/pages/client/explore/Featured.tsx
View file

@ -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>

36
src/app/pages/client/explore/Server.tsx
View file

@ -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">

31
src/app/pages/client/home/Search.tsx
View file

@ -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">

30
src/app/pages/client/inbox/Invites.tsx
View file

@ -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">

29
src/app/pages/client/inbox/Notifications.tsx
View file

@ -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>

31
src/app/pages/client/space/Search.tsx
View file

@ -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">