fix(mobile): make share picker fullscreen with full-width search, remove confirmation dialog

overlay/src/app/features/ShareRoomPicker.tsx

@@ -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
-            <Box grow="Yes" direction="Column" style={{ maxHeight: '85vh' }}>
+          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
+            <Box style={{ padding: config.space.S300, paddingTop: 0 }} direction="Column">
-                  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
+              <Box style={{ position: 'relative', height: virtualizer.getTotalSize() }}>
-                    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>
   );
 }