fix(location): confirm before sharing, with accuracy and an approximate option (#340)

The composer's location button sent the exact position (6 decimals) from a
single click once the browser permission had been granted, discarding the
fix's accuracy, so a ±3.5 km Wi-Fi/IP fix was shown as exact.

- ShareLocationDialog: "Share your location?" with the coordinates and
  ±accuracy, a "Check on OpenStreetMap" link, and Cancel / Send
  approximate (~1 km) / Send. Focus starts on Cancel; Esc cancels.
- utils/geoShare.ts (unit-tested): RFC 5870 geo URI with `;u=` accuracy;
  approximate shares round to 2 decimals and never claim better than 1 km.
- Location cards show the ± when the event carries `u=`.
- The toolbar icon is a pin instead of the globe.

Verified headless (fix 40.748817,-73.985428 ±3500 m): the click opens the
dialog and sends nothing; Cancel/Esc send nothing; Send approximate →
geo:40.75,-73.99;u=3500; Send → geo:40.748817,-73.985428;u=3500; the card
reads "40.74882, -73.98543 (±3.5 km)".

Fixes #340

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017PCb59uY3UKqDqt7B6hzd5

src/app/features/room/RoomInput.tsx

@@ -153,6 +153,9 @@ import { useRoomUnverifiedDeviceCount } from '../../hooks/useDeviceVerificationS
 import { ScheduleMessageModal } from './ScheduleMessageModal';
 import { ScheduledMessagesTray } from './ScheduledMessagesTray';
 import { DraftIndicator } from './DraftIndicator';
+import { PendingLocation, ShareLocationDialog } from './ShareLocationDialog';
+import { buildGeoUri } from '../../utils/geoShare';
+import { useLocalRoomName } from '../../hooks/useRoomMeta';
 import { scheduledMessagesAtom } from '../../state/scheduledMessages';
 import { createErrorToast, toastQueueAtom } from '../../state/toast';
 import { getThreadDraftKey } from '../../state/room/thread';
@@ -356,6 +359,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       () => normalizeComposerToolbarOrder(composerToolbarButtons?.order),
       [composerToolbarButtons?.order],
     );
+    const displayRoomName = useLocalRoomName(room);
     const [locating, setLocating] = React.useState(false);
     const [locationError, setLocationError] = React.useState<string | null>(null);
     const handleShareLocation = useCallback(() => {
@@ -368,21 +372,9 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       navigator.geolocation.getCurrentPosition(
         (pos) => {
           setLocating(false);
-          const { latitude, longitude } = pos.coords;
-          const geoUri = `geo:${latitude.toFixed(6)},${longitude.toFixed(6)}`;
-          const ts = Date.now();
-          // MSC3488 extensible location: send the geo_uri (legacy) alongside the
-          // m.location/m.asset/m.ts blocks so Element and other clients render a
-          // proper "shared location" pin instead of falling back to plain text.
-          sendRoomMessage(mx, roomId, threadRootId ?? null, {
-            msgtype: 'm.location',
-            body: `Shared a location: ${geoUri}`,
-            geo_uri: geoUri,
-            'org.matrix.msc3488.location': { uri: geoUri },
-            'org.matrix.msc3488.asset': { type: 'm.self' },
-            'org.matrix.msc3488.ts': ts,
-            'm.ts': ts,
-          });
+          // [Gitea #340] Don't send straight away: confirm first (ShareLocationDialog).
+          const { latitude, longitude, accuracy } = pos.coords;
+          setPendingLocation({ latitude, longitude, accuracy });
         },
         (err) => {
           setLocating(false);
@@ -397,7 +389,30 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
         },
         { timeout: 10000 },
       );
-    }, [mx, roomId, threadRootId]);
+    }, []);
+    const [pendingLocation, setPendingLocation] = React.useState<PendingLocation | null>(null);
+    const handleSendLocation = useCallback(
+      (approximate: boolean) => {
+        if (!pendingLocation) return;
+        const { latitude, longitude, accuracy } = pendingLocation;
+        setPendingLocation(null);
+        const geoUri = buildGeoUri(latitude, longitude, accuracy, approximate);
+        const ts = Date.now();
+        // MSC3488 extensible location: send the geo_uri (legacy) alongside the
+        // m.location/m.asset/m.ts blocks so Element and other clients render a
+        // proper "shared location" pin instead of falling back to plain text.
+        sendRoomMessage(mx, roomId, threadRootId ?? null, {
+          msgtype: 'm.location',
+          body: `Shared ${approximate ? 'an approximate' : 'a'} location: ${geoUri}`,
+          geo_uri: geoUri,
+          'org.matrix.msc3488.location': { uri: geoUri },
+          'org.matrix.msc3488.asset': { type: 'm.self' },
+          'org.matrix.msc3488.ts': ts,
+          'm.ts': ts,
+        });
+      },
+      [pendingLocation, mx, roomId, threadRootId],
+    );
 
     const handleVoiceSend = useCallback(
       async (blob: Blob, mimeType: string, durationMs: number, waveform: number[]) => {
@@ -1538,11 +1553,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                 style={touchTarget}
                 className={MobileTouchTarget}
               >
-                {locating ? (
-                  <Spinner variant="Secondary" size="400" />
-                ) : (
-                  <Icon src={Icons.SpaceGlobe} />
-                )}
+                {locating ? <Spinner variant="Secondary" size="400" /> : <Icon src={Icons.Pin} />}
               </IconButton>
             ) : null;
 
@@ -1751,6 +1762,14 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
             onClose={() => setPollOpen(false)}
           />
         )}
+        {pendingLocation && (
+          <ShareLocationDialog
+            location={pendingLocation}
+            roomName={displayRoomName}
+            onSend={handleSendLocation}
+            requestClose={() => setPendingLocation(null)}
+          />
+        )}
         {scheduleOpen && (
           <ScheduleMessageModal
             roomId={roomId}

src/app/features/room/ShareLocationDialog.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import FocusTrap from 'focus-trap-react';
+import {
+  Box,
+  Button,
+  config,
+  Dialog,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Text,
+} from 'folds';
+import { useModalStyle } from '../../hooks/useModalStyle';
+import { stopPropagation } from '../../utils/keyboard';
+import { formatAccuracy } from '../../utils/geoShare';
+
+export type PendingLocation = { latitude: number; longitude: number; accuracy?: number };
+
+type ShareLocationDialogProps = {
+  location: PendingLocation;
+  roomName: string;
+  onSend: (approximate: boolean) => void;
+  requestClose: () => void;
+};
+
+/**
+ * [Gitea #340] Confirm step before an m.location is posted: the toolbar button
+ * used to send the exact position from a single click. Shows what will be
+ * shared (coordinates + the fix's accuracy) and offers an approximate share.
+ */
+export function ShareLocationDialog({
+  location,
+  roomName,
+  onSend,
+  requestClose,
+}: ShareLocationDialogProps) {
+  const modalStyle = useModalStyle(420);
+  const { latitude, longitude, accuracy } = location;
+  const accuracyLabel = formatAccuracy(accuracy);
+  const mapUrl = `https://www.openstreetmap.org/?mlat=${latitude}&mlon=${longitude}#map=16/${latitude}/${longitude}`;
+
+  return (
+    <Overlay open backdrop={<OverlayBackdrop />}>
+      <OverlayCenter>
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: '#share-location-cancel',
+            onDeactivate: requestClose,
+            clickOutsideDeactivates: true,
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Dialog
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="share-location-title"
+            variant="Surface"
+            style={modalStyle}
+          >
+            <Header
+              style={{
+                padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
+                borderBottomWidth: config.borderWidth.B300,
+              }}
+              variant="Surface"
+              size="500"
+            >
+              <Box grow="Yes">
+                <Text id="share-location-title" as="h2" size="H4">
+                  Share your location?
+                </Text>
+              </Box>
+              <IconButton size="300" onClick={requestClose} radii="300" aria-label="Close">
+                <Icon src={Icons.Cross} />
+              </IconButton>
+            </Header>
+            <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
+              <Text>
+                Everyone in <b>{roomName}</b> will see this position, and it can&apos;t be taken
+                back from their devices once sent.
+              </Text>
+              <Box direction="Column" gap="100">
+                <Text size="T400">
+                  <b>
+                    {latitude.toFixed(5)}, {longitude.toFixed(5)}
+                  </b>
+                  {accuracyLabel && ` (${accuracyLabel})`}
+                </Text>
+                <Text size="T200" priority="300">
+                  {accuracyLabel
+                    ? 'The ± is how sure your device is of this position.'
+                    : 'Your device did not say how accurate this position is.'}{' '}
+                  <a href={mapUrl} target="_blank" rel="noreferrer noopener">
+                    Check on OpenStreetMap
+                  </a>
+                </Text>
+              </Box>
+              <Box gap="200" justifyContent="End" wrap="Wrap">
+                <Button
+                  id="share-location-cancel"
+                  variant="Secondary"
+                  fill="Soft"
+                  onClick={requestClose}
+                >
+                  <Text size="B400">Cancel</Text>
+                </Button>
+                <Button variant="Secondary" fill="Soft" onClick={() => onSend(true)}>
+                  <Text size="B400">Send approximate (~1 km)</Text>
+                </Button>
+                <Button variant="Primary" onClick={() => onSend(false)}>
+                  <Text size="B400">Send</Text>
+                </Button>
+              </Box>
+            </Box>
+          </Dialog>
+        </FocusTrap>
+      </OverlayCenter>
+    </Overlay>
+  );
+}