feat: poll voting, location sharing, image captions, message forwarding

- Poll voting: PollContent sends m.poll.response on answer click
- Location: MLocation shows OSM map embed + share-location button in toolbar
- Image captions: caption field on media uploads sets message body
- Message forwarding: ForwardMessageDialog with searchable room picker
- Also includes ring timeout fix and earlier session patches

src/app/components/message/MsgTypeRenderers.tsx

@@ -391,9 +391,28 @@ export function MLocation({ content }: MLocationProps) {
   const location = parseGeoUri(geoUri);
   if (!location) return <BrokenContent />;
 
+  const lat = parseFloat(location.latitude);
+  const lon = parseFloat(location.longitude);
+  const mapSrc = `https://www.openstreetmap.org/export/embed.html?bbox=${lon - 0.007},${lat - 0.004},${lon + 0.007},${lat + 0.004}&layer=mapnik&marker=${lat},${lon}`;
+
   return (
-    <Box direction="Column" alignItems="Start" gap="100">
-      <Text size="T400">{geoUri}</Text>
+    <Box direction="Column" alignItems="Start" gap="200">
+      <iframe
+        title="Location"
+        src={mapSrc}
+        style={{
+          width: '280px',
+          height: '160px',
+          border: '1px solid var(--bg-surface-border)',
+          borderRadius: '8px',
+          display: 'block',
+        }}
+        scrolling="no"
+        loading="lazy"
+      />
+      <Text size="T300" style={{ opacity: 0.65 }}>
+        {`${lat.toFixed(5)}, ${lon.toFixed(5)}`}
+      </Text>
       <Chip
         as="a"
         size="400"

src/app/components/message/content/PollContent.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Box, Text } from 'folds';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
 
 type PollTextValue = Array<{ body: string }> | string;
 
@@ -21,7 +22,19 @@ type PollData = {
   answers?: PollAnswer[];
 };
 
-export function PollContent({ content }: { content: Record<string, unknown> }) {
+export function PollContent({
+  content,
+  roomId,
+  eventId,
+}: {
+  content: Record<string, unknown>;
+  roomId?: string;
+  eventId?: string;
+}) {
+  const mx = useMatrixClient();
+  const [myVote, setMyVote] = useState<string | null>(null);
+  const isStable = !!content['m.poll'];
+
   const poll = (
     content['m.poll'] ?? content['org.matrix.msc3381.poll.start']
   ) as PollData | undefined;
@@ -39,8 +52,30 @@ export function PollContent({ content }: { content: Record<string, unknown> }) {
     (poll.question as any)?.body ||
     'Untitled poll';
 
+  const canVote = !!roomId && !!eventId;
+
+  const handleVote = (answerId: string) => {
+    if (!roomId || !eventId) return;
+    setMyVote(answerId);
+    if (isStable) {
+      mx.sendEvent(roomId, 'm.poll.response' as any, {
+        'm.relates_to': { rel_type: 'm.reference', event_id: eventId },
+        'm.responses': [{ 'm.id': answerId }],
+      });
+    } else {
+      mx.sendEvent(roomId, 'org.matrix.msc3381.poll.response' as any, {
+        'm.relates_to': { rel_type: 'm.reference', event_id: eventId },
+        'org.matrix.msc3381.poll.response': { answers: [answerId] },
+      });
+    }
+  };
+
   return (
-    <Box direction="Column" gap="200" style={{ maxWidth: '340px', paddingTop: '2px', paddingBottom: '4px' }}>
+    <Box
+      direction="Column"
+      gap="200"
+      style={{ maxWidth: '340px', paddingTop: '2px', paddingBottom: '4px' }}
+    >
       <Box
         alignItems="Center"
         gap="100"
@@ -65,26 +100,45 @@ export function PollContent({ content }: { content: Record<string, unknown> }) {
             (answer as any)['org.matrix.msc3381.poll.answer']?.body ||
             `Option ${i + 1}`;
           const id = answer['m.id'] ?? answer.id ?? String(i);
+          const selected = myVote === id;
           return (
-            <div
+            <button
               key={id}
+              type="button"
+              onClick={canVote ? () => handleVote(id) : undefined}
               style={{
                 padding: '7px 12px',
                 borderRadius: '8px',
-                background: 'var(--bg-surface-low)',
-                border: '1px solid var(--bg-surface-border)',
+                background: selected ? 'var(--bg-surface-active)' : 'var(--bg-surface-low)',
+                border: `1px solid ${selected ? 'var(--text-primary)' : 'var(--bg-surface-border)'}`,
                 fontSize: '0.88rem',
                 lineHeight: 1.4,
+                textAlign: 'left',
+                cursor: canVote ? 'pointer' : 'default',
+                color: 'var(--text-primary)',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '8px',
+                width: '100%',
               }}
             >
-              {text}
-            </div>
+              <span style={{ flexGrow: 1 }}>{text}</span>
+              {selected && (
+                <span style={{ opacity: 0.8, fontSize: '1rem', flexShrink: 0 }}>✓</span>
+              )}
+            </button>
           );
         })}
       </Box>
-      <Text size="T200" style={{ opacity: 0.4, marginTop: '2px' }}>
-        <i>Open in Element to vote</i>
-      </Text>
+      {canVote ? (
+        <Text size="T200" style={{ opacity: 0.5, marginTop: '2px' }}>
+          <i>{myVote ? 'Vote cast — click another to change' : 'Click an option to vote'}</i>
+        </Text>
+      ) : (
+        <Text size="T200" style={{ opacity: 0.4, marginTop: '2px' }}>
+          <i>Open in Element to vote</i>
+        </Text>
+      )}
     </Box>
   );
 }