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

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

@@ -1,5 +1,5 @@
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 FocusTrap from 'focus-trap-react';
import {
@@ -11,10 +11,8 @@ import {
Icons,
Input,
MenuItem,
Modal,
Overlay,
OverlayBackdrop,
OverlayCenter,
Scroll,
Text,
config,
@@ -62,7 +60,6 @@ export function ShareRoomPicker({ share, onPick, onDismiss }: ShareRoomPickerPro
const mx = useMatrixClient();
const useAuthentication = useMediaAuthentication();
const scrollRef = useRef<HTMLDivElement>(null);
const [confirmRoomId, setConfirmRoomId] = useState<string | null>(null);
const mDirects = useAtomValue(mDirectAtom);
const allRoomsSet = useAllJoinedRoomsSet();
@@ -108,26 +105,15 @@ export function ShareRoomPicker({ share, onPick, onDismiss }: ShareRoomPickerPro
const handleRoomClick: React.MouseEventHandler<HTMLButtonElement> = (evt) => {
const roomId = evt.currentTarget.getAttribute('data-room-id');
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 fileCount = share.files.length;
return (
<Overlay open backdrop={<OverlayBackdrop />}>
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
@@ -136,8 +122,16 @@ export function ShareRoomPicker({ share, onPick, onDismiss }: ShareRoomPickerPro
escapeDeactivates: stopPropagation,
}}
>
<Modal size="300">
<Box grow="Yes" direction="Column" style={{ maxHeight: '85vh' }}>
<Box
grow="Yes"
direction="Column"
style={{
position: 'fixed',
inset: 0,
zIndex: 999,
backgroundColor: 'var(--bg-surface)',
}}
>
<Header
size="500"
style={{ padding: config.space.S400, paddingTop: config.space.S500 }}
@@ -161,7 +155,6 @@ export function ShareRoomPicker({ share, onPick, onDismiss }: ShareRoomPickerPro
<Box
style={{
padding: config.space.S400,
paddingTop: config.space.S200,
paddingBottom: config.space.S200,
}}
@@ -178,10 +171,7 @@ export function ShareRoomPicker({ share, onPick, onDismiss }: ShareRoomPickerPro
</Box>
<Scroll ref={scrollRef} size="300" hideTrack style={{ flex: 1, minHeight: 0 }}>
<Box
style={{ padding: config.space.S300, paddingTop: 0 }}
direction="Column"
>
<Box style={{ padding: config.space.S300, paddingTop: 0 }} direction="Column">
{vItems.length === 0 && (
<Box
style={{ padding: `${config.space.S700} 0` }}
@@ -200,9 +190,7 @@ export function ShareRoomPicker({ share, onPick, onDismiss }: ShareRoomPickerPro
</Text>
</Box>
)}
<Box
style={{ position: 'relative', height: virtualizer.getTotalSize() }}
>
<Box style={{ position: 'relative', height: virtualizer.getTotalSize() }}>
{vItems.map((vItem) => {
const roomId = items[vItem.index];
const room = getRoom(roomId);
@@ -258,63 +246,7 @@ export function ShareRoomPicker({ share, onPick, onDismiss }: ShareRoomPickerPro
</Box>
</Scroll>
</Box>
</Modal>
</FocusTrap>
</OverlayCenter>
{confirmRoomId && (() => {
const room = getRoom(confirmRoomId);
const roomName = room?.name ?? confirmRoomId;
const isDm = mDirects.has(confirmRoomId);
return (
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: handleCancelConfirm,
escapeDeactivates: stopPropagation,
}}
>
<Modal size="300">
<Box direction="Column" gap="400" style={{ padding: config.space.S400 }}>
<Box direction="Column" gap="200">
<Text size="H4">Share to {isDm ? 'Person' : 'Room'}?</Text>
<Text size="T300" priority="300">
Send to <strong>{roomName}</strong>?
</Text>
</Box>
<Box gap="200" justifyContent="End">
<button
onClick={handleCancelConfirm}
style={{
padding: `${config.space.S200} ${config.space.S400}`,
borderRadius: config.radii.R400,
border: 'none',
background: 'transparent',
cursor: 'pointer',
}}
>
<Text size="B400">Cancel</Text>
</button>
<button
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>
</Modal>
</FocusTrap>
</OverlayCenter>
);
})()}
</Overlay>
);
}