litruv/cinny-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 52 Wiki Activity

fix(mobile): make share picker fullscreen with full-width search, remove confirmation dialog
Some checks failed
Build / increment-version (push) Successful in 6s
Details
Build / build-android (push) Has started running
Details
Build / create-release (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Litruv
2026-05-13 10:13:34 +10:00
parent 41e1b0db9d
commit f7b25261cc
1 changed files with 130 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

328
overlay/src/app/features/ShareRoomPicker.tsx
View File

@@ -1,5 +1,5 @@
import { useAtomValue } from 'jotai'; import { useAtomValue } from 'jotai';
import React, { ChangeEventHandler, useCallback, useMemo, useRef, useState } from 'react'; import React, { ChangeEventHandler, useCallback, useMemo, useRef } from 'react';
import { useVirtualizer } from '@tanstack/react-virtual'; import { useVirtualizer } from '@tanstack/react-virtual';
import FocusTrap from 'focus-trap-react'; import FocusTrap from 'focus-trap-react';
import { import {
@@ -11,10 +11,8 @@ import {
Icons, Icons,
Input, Input,
MenuItem, MenuItem,
Modal,
Overlay, Overlay,
OverlayBackdrop, OverlayBackdrop,
OverlayCenter,
Scroll, Scroll,
Text, Text,
config, config,
@@ -62,7 +60,6 @@ export function ShareRoomPicker({ share, onPick, onDismiss }: ShareRoomPickerPro
const mx = useMatrixClient(); const mx = useMatrixClient();
const useAuthentication = useMediaAuthentication(); const useAuthentication = useMediaAuthentication();
const scrollRef = useRef<HTMLDivElement>(null); const scrollRef = useRef<HTMLDivElement>(null);
const [confirmRoomId, setConfirmRoomId] = useState<string | null>(null);
const mDirects = useAtomValue(mDirectAtom); const mDirects = useAtomValue(mDirectAtom);
const allRoomsSet = useAllJoinedRoomsSet(); const allRoomsSet = useAllJoinedRoomsSet();
@@ -108,213 +105,148 @@ export function ShareRoomPicker({ share, onPick, onDismiss }: ShareRoomPickerPro
const handleRoomClick: React.MouseEventHandler<HTMLButtonElement> = (evt) => { const handleRoomClick: React.MouseEventHandler<HTMLButtonElement> = (evt) => {
const roomId = evt.currentTarget.getAttribute('data-room-id'); const roomId = evt.currentTarget.getAttribute('data-room-id');
if (roomId) { if (roomId) {
setConfirmRoomId(roomId); onPick(roomId);
} }
}; };
const handleConfirm = useCallback(() => {
if (confirmRoomId) {
onPick(confirmRoomId);
}
}, [confirmRoomId, onPick]);
const handleCancelConfirm = useCallback(() => {
setConfirmRoomId(null);
}, []);
const previewText = share.text?.slice(0, 80) ?? share.subject?.slice(0, 80); const previewText = share.text?.slice(0, 80) ?? share.subject?.slice(0, 80);
const fileCount = share.files.length; const fileCount = share.files.length;
return ( return (
<Overlay open backdrop={<OverlayBackdrop />}> <Overlay open backdrop={<OverlayBackdrop />}>
<OverlayCenter> <FocusTrap
<FocusTrap focusTrapOptions={{
focusTrapOptions={{ initialFocus: false,
initialFocus: false, clickOutsideDeactivates: true,
clickOutsideDeactivates: true, onDeactivate: onDismiss,
onDeactivate: onDismiss, escapeDeactivates: stopPropagation,
escapeDeactivates: stopPropagation, }}
>
<Box
grow="Yes"
direction="Column"
style={{
position: 'fixed',
inset: 0,
zIndex: 999,
backgroundColor: 'var(--bg-surface)',
}} }}
> >
<Modal size="300"> <Header
<Box grow="Yes" direction="Column" style={{ maxHeight: '85vh' }}> size="500"
<Header style={{ padding: config.space.S400, paddingTop: config.space.S500 }}
size="500" >
style={{ padding: config.space.S400, paddingTop: config.space.S500 }} <Box grow="Yes" direction="Column" gap="100">
> <Text size="H4">Share to Room</Text>
<Box grow="Yes" direction="Column" gap="100"> {(previewText || fileCount > 0) && (
<Text size="H4">Share to Room</Text> <Text size="T200" priority="300" style={{ opacity: 0.7 }}>
{(previewText || fileCount > 0) && ( {previewText
<Text size="T200" priority="300" style={{ opacity: 0.7 }}> ? `"${previewText}${(share.text?.length ?? 0) > 80 ? '…' : ''}"`
{previewText : `${fileCount} file${fileCount !== 1 ? 's' : ''}`}
? `"${previewText}${(share.text?.length ?? 0) > 80 ? '…' : ''}"` </Text>
: `${fileCount} file${fileCount !== 1 ? 's' : ''}`} )}
</Text>
)}
</Box>
<Box shrink="No">
<IconButton size="300" radii="300" onClick={onDismiss}>
<Icon src={Icons.Cross} />
</IconButton>
</Box>
</Header>
<Box
style={{
padding: config.space.S400,
paddingTop: config.space.S200,
paddingBottom: config.space.S200,
}}
>
<Input
onChange={handleSearchChange}
before={<Icon size="200" src={Icons.Search} />}
placeholder="Search rooms…"
size="400"
variant="Background"
outlined
autoFocus
/>
</Box>
<Scroll ref={scrollRef} size="300" hideTrack style={{ flex: 1, minHeight: 0 }}>
<Box
style={{ padding: config.space.S300, paddingTop: 0 }}
direction="Column"
>
{vItems.length === 0 && (
<Box
style={{ padding: `${config.space.S700} 0` }}
alignItems="Center"
justifyContent="Center"
direction="Column"
gap="100"
>
<Text size="H6" align="Center">
{searchResult ? 'No Match Found' : 'No Rooms'}
</Text>
<Text size="T200" align="Center" priority="300">
{searchResult
? `No rooms found for "${searchResult.query}".`
: 'You have no rooms to share into.'}
</Text>
</Box>
)}
<Box
style={{ position: 'relative', height: virtualizer.getTotalSize() }}
>
{vItems.map((vItem) => {
const roomId = items[vItem.index];
const room = getRoom(roomId);
if (!room) return null;
const isDm = mDirects.has(roomId);
const avatarSrc = isDm
? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
: getRoomAvatarUrl(mx, room, 96, useAuthentication);
return (
<VirtualTile
virtualItem={vItem}
style={{ paddingBottom: config.space.S100 }}
ref={virtualizer.measureElement}
key={roomId}
>
<MenuItem
data-room-id={roomId}
onClick={handleRoomClick}
variant="Surface"
size="400"
radii="400"
before={
<Avatar size="300" radii={isDm ? '400' : '300'}>
{avatarSrc ? (
<RoomAvatar
roomId={roomId}
src={avatarSrc}
alt={room.name}
renderFallback={() => (
<Text as="span" size="H6">
{nameInitials(room.name)}
</Text>
)}
/>
) : (
<RoomIcon room={room} size="200" filled />
)}
</Avatar>
}
>
<Box grow="Yes" direction="Column">
<Text size="B400" truncate>
{room.name}
</Text>
</Box>
</MenuItem>
</VirtualTile>
);
})}
</Box>
</Box>
</Scroll>
</Box> </Box>
</Modal> <Box shrink="No">
</FocusTrap> <IconButton size="300" radii="300" onClick={onDismiss}>
</OverlayCenter> <Icon src={Icons.Cross} />
</IconButton>
</Box>
</Header>
{confirmRoomId && (() => { <Box
const room = getRoom(confirmRoomId); style={{
const roomName = room?.name ?? confirmRoomId; paddingTop: config.space.S200,
const isDm = mDirects.has(confirmRoomId); paddingBottom: config.space.S200,
return ( }}
<OverlayCenter> >
<FocusTrap <Input
focusTrapOptions={{ onChange={handleSearchChange}
initialFocus: false, before={<Icon size="200" src={Icons.Search} />}
onDeactivate: handleCancelConfirm, placeholder="Search rooms…"
escapeDeactivates: stopPropagation, size="400"
}} variant="Background"
> outlined
<Modal size="300"> autoFocus
<Box direction="Column" gap="400" style={{ padding: config.space.S400 }}> />
<Box direction="Column" gap="200"> </Box>
<Text size="H4">Share to {isDm ? 'Person' : 'Room'}?</Text>
<Text size="T300" priority="300"> <Scroll ref={scrollRef} size="300" hideTrack style={{ flex: 1, minHeight: 0 }}>
Send to <strong>{roomName}</strong>? <Box style={{ padding: config.space.S300, paddingTop: 0 }} direction="Column">
</Text> {vItems.length === 0 && (
</Box> <Box
<Box gap="200" justifyContent="End"> style={{ padding: `${config.space.S700} 0` }}
<button alignItems="Center"
onClick={handleCancelConfirm} justifyContent="Center"
style={{ direction="Column"
padding: `${config.space.S200} ${config.space.S400}`, gap="100"
borderRadius: config.radii.R400, >
border: 'none', <Text size="H6" align="Center">
background: 'transparent', {searchResult ? 'No Match Found' : 'No Rooms'}
cursor: 'pointer', </Text>
}} <Text size="T200" align="Center" priority="300">
> {searchResult
<Text size="B400">Cancel</Text> ? `No rooms found for "${searchResult.query}".`
</button> : 'You have no rooms to share into.'}
<button </Text>
onClick={handleConfirm}
style={{
padding: `${config.space.S200} ${config.space.S400}`,
borderRadius: config.radii.R400,
border: 'none',
background: 'var(--bg-primary)',
cursor: 'pointer',
}}
>
<Text size="B400">Share</Text>
</button>
</Box>
</Box> </Box>
</Modal> )}
</FocusTrap> <Box style={{ position: 'relative', height: virtualizer.getTotalSize() }}>
</OverlayCenter> {vItems.map((vItem) => {
); const roomId = items[vItem.index];
})()} const room = getRoom(roomId);
if (!room) return null;
const isDm = mDirects.has(roomId);
const avatarSrc = isDm
? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
: getRoomAvatarUrl(mx, room, 96, useAuthentication);
return (
<VirtualTile
virtualItem={vItem}
style={{ paddingBottom: config.space.S100 }}
ref={virtualizer.measureElement}
key={roomId}
>
<MenuItem
data-room-id={roomId}
onClick={handleRoomClick}
variant="Surface"
size="400"
radii="400"
before={
<Avatar size="300" radii={isDm ? '400' : '300'}>
{avatarSrc ? (
<RoomAvatar
roomId={roomId}
src={avatarSrc}
alt={room.name}
renderFallback={() => (
<Text as="span" size="H6">
{nameInitials(room.name)}
</Text>
)}
/>
) : (
<RoomIcon room={room} size="200" filled />
)}
</Avatar>
}
>
<Box grow="Yes" direction="Column">
<Text size="B400" truncate>
{room.name}
</Text>
</Box>
</MenuItem>
</VirtualTile>
);
})}
</Box>
</Box>
</Scroll>
</Box>
</FocusTrap>
</Overlay> </Overlay>
); );
} }