From d1022635d2beaa37099e9d194ef7adcc4d88fa57 Mon Sep 17 00:00:00 2001
From: Max Litruv Boonzaayer <litruv@gmail.com>
Date: Wed, 13 May 2026 10:08:11 +1000
Subject: [PATCH] feat(mobile): improve share dialog UI with padding,
 full-width search, and confirmation

---
 overlay/src/app/features/ShareRoomPicker.tsx | 71 +++++++++++++++++++-
 1 file changed, 68 insertions(+), 3 deletions(-)

diff --git a/overlay/src/app/features/ShareRoomPicker.tsx b/overlay/src/app/features/ShareRoomPicker.tsx
index bd10d0f..c921b5c 100644
--- a/overlay/src/app/features/ShareRoomPicker.tsx
+++ b/overlay/src/app/features/ShareRoomPicker.tsx
@@ -62,6 +62,7 @@ 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();
@@ -107,10 +108,20 @@ export function ShareRoomPicker({ share, onPick, onDismiss }: ShareRoomPickerPro
   const handleRoomClick: React.MouseEventHandler<HTMLButtonElement> = (evt) => {
     const roomId = evt.currentTarget.getAttribute('data-room-id');
     if (roomId) {
-      onPick(roomId);
+      setConfirmRoomId(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;
 
@@ -129,7 +140,7 @@ export function ShareRoomPicker({ share, onPick, onDismiss }: ShareRoomPickerPro
             <Box grow="Yes" direction="Column" style={{ maxHeight: '85vh' }}>
               <Header
                 size="500"
-                style={{ padding: config.space.S200, paddingLeft: config.space.S400 }}
+                style={{ padding: config.space.S400, paddingTop: config.space.S500 }}
               >
                 <Box grow="Yes" direction="Column" gap="100">
                   <Text size="H4">Share to Room</Text>
@@ -150,7 +161,7 @@ export function ShareRoomPicker({ share, onPick, onDismiss }: ShareRoomPickerPro
 
               <Box
                 style={{
-                  padding: `0 ${config.space.S300}`,
+                  padding: config.space.S400,
                   paddingTop: config.space.S200,
                   paddingBottom: config.space.S200,
                 }}
@@ -250,6 +261,60 @@ export function ShareRoomPicker({ share, onPick, onDismiss }: ShareRoomPickerPro
           </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>
   );
 }