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
2026-05-15 13:37:03 -04:00
parent e89ba95c08
commit 5bba52e315
17 changed files with 1047 additions and 51 deletions
@@ -57,6 +57,7 @@ export function CallControls({ callEmbed }: CallControlsProps) {
  const [shareConfirm, setShareConfirm] = useState(false);
  const [pttMode] = useSetting(settingsAtom, 'pttMode');
  const [pttKey] = useSetting(settingsAtom, 'pttKey');
+  const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
  const [pttActive, setPttActive] = useState(false);

  // Track microphone via ref so the PTT effect doesn't need it as a dep (avoids listener churn)
@@ -159,24 +160,43 @@ export function CallControls({ callEmbed }: CallControlsProps) {
      alignItems="Center"
    >
      {pttMode && (
-        <Chip
-          variant={pttActive ? 'Success' : 'Warning'}
-          fill="Soft"
-          radii="400"
-          style={{
+        lotusTerminal ? (
+          <Box style={{
            position: 'absolute',
-            top: '-2.2rem',
+            top: '-2.5rem',
            left: '50%',
            transform: 'translateX(-50%)',
+            background: pttActive ? 'rgba(0,255,136,0.18)' : 'rgba(255,107,0,0.12)',
+            border: `1px solid ${pttActive ? 'rgba(0,255,136,0.55)' : 'rgba(255,107,0,0.35)'}`,
+            borderRadius: '99px',
+            padding: '0.2rem 0.9rem',
            pointerEvents: 'none',
            whiteSpace: 'nowrap',
-          }}
-          outlined
-        >
-          <Text size="T200" style={{ fontWeight: 700 }}>
-            {pttActive ? '● Live' : `PTT — Hold ${pttKeyLabel}`}
-          </Text>
-        </Chip>
+          }}>
+            <Text size="T200" style={{ color: pttActive ? '#00FF88' : '#FF6B00', fontWeight: 700, letterSpacing: '0.08em', fontFamily: 'JetBrains Mono, monospace' }}>
+              {pttActive ? '● LIVE' : `PTT — Hold ${pttKeyLabel}`}
+            </Text>
+          </Box>
+        ) : (
+          <Chip
+            variant={pttActive ? 'Success' : 'Warning'}
+            fill="Soft"
+            radii="400"
+            style={{
+              position: 'absolute',
+              top: '-2.2rem',
+              left: '50%',
+              transform: 'translateX(-50%)',
+              pointerEvents: 'none',
+              whiteSpace: 'nowrap',
+            }}
+            outlined
+          >
+            <Text size="T200" style={{ fontWeight: 700 }}>
+              {pttActive ? '● Live' : `PTT — Hold ${pttKeyLabel}`}
+            </Text>
+          </Chip>
+        )
      )}
      {shareConfirm && (
        <Box
@@ -9,14 +9,14 @@ import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
 import { PowerLevelsContextProvider, usePowerLevels } from '../../hooks/usePowerLevels';
-import { useRoom } from '../../hooks/useRoom';
+import { useRoom, useIsDirectRoom } from '../../hooks/useRoom';
 import { useKeyDown } from '../../hooks/useKeyDown';
 import { markAsRead } from '../../utils/notifications';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRoomMembers } from '../../hooks/useRoomMembers';
 import { CallView } from '../call/CallView';
 import { RoomViewHeader } from './RoomViewHeader';
-import { callChatAtom } from '../../state/callEmbed';
+import { callChatAtom, callEmbedAtom } from '../../state/callEmbed';
 import { CallChatView } from './CallChatView';

 export function Room() {
@@ -30,6 +30,8 @@ export function Room() {
  const powerLevels = usePowerLevels(room);
  const members = useRoomMembers(mx, room.roomId);
  const chat = useAtomValue(callChatAtom);
+  const callEmbed = useAtomValue(callEmbedAtom);
+  const isDirect = useIsDirectRoom();

  useKeyDown(
    window,
@@ -43,7 +45,7 @@ export function Room() {
    )
  );

-  const callView = room.isCallRoom();
+  const callView = room.isCallRoom() || (isDirect && !!callEmbed && callEmbed.roomId === room.roomId);

  return (
    <PowerLevelsContextProvider value={powerLevels}>
@@ -30,6 +30,8 @@ import {
 } from 'folds';

 import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { GifPicker } from '../../components/GifPicker';
+import { useClientConfig } from '../../hooks/useClientConfig';
 import {
  CustomEditor,
  Toolbar,
@@ -171,6 +173,26 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
    const imagePackRooms: Room[] = useImagePackRooms(roomId, roomToParents);

    const [toolbar, setToolbar] = useSetting(settingsAtom, 'editorToolbar');
+    const [locating, setLocating] = React.useState(false);
+    const handleShareLocation = () => {
+      if (!navigator.geolocation) return;
+      setLocating(true);
+      navigator.geolocation.getCurrentPosition(
+        (pos) => {
+          setLocating(false);
+          const { latitude, longitude } = pos.coords;
+          const geoUri = `geo:${latitude.toFixed(6)},${longitude.toFixed(6)}`;
+          mx.sendMessage(roomId, {
+            msgtype: 'm.location',
+            body: `Location: ${geoUri}`,
+            geo_uri: geoUri,
+          } as any);
+        },
+        () => setLocating(false),
+        { timeout: 10000 }
+      );
+    };
+
    const [autocompleteQuery, setAutocompleteQuery] =
      useState<AutocompleteQuery<AutocompletePrefix>>();

@@ -216,6 +238,8 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
    const pickFile = useFilePicker(handleFiles, true);
    const handlePaste = useFilePasteHandler(handleFiles);
    const dropZoneVisible = useFileDropZone(fileDropContainerRef, handleFiles);
+    const { gifApiKey } = useClientConfig();
+    const gifBtnRef = useRef<HTMLButtonElement>(null);
    const [hideStickerBtn, setHideStickerBtn] = useState(document.body.clientWidth < 500);

    const isComposing = useComposingCheck();
@@ -430,6 +454,30 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
      moveCursor(editor);
    };

+    const handleGifSelect = useCallback(
+      async (gifUrl: string, w: number, h: number) => {
+        try {
+          const res = await fetch(gifUrl);
+          const blob = await res.blob();
+          const uploadRes = await mx.uploadContent(
+            new File([blob], 'image.gif', { type: 'image/gif' }),
+            { type: 'image/gif', name: 'image.gif', includeFilename: false }
+          );
+          const mxcUrl = (uploadRes as any).content_uri;
+          if (!mxcUrl) return;
+          mx.sendMessage(roomId, {
+            msgtype: MsgType.Image,
+            body: 'image.gif',
+            url: mxcUrl,
+            info: { mimetype: 'image/gif', w, h, size: blob.size },
+          });
+        } catch (e) {
+          console.error('GIF send failed', e);
+        }
+      },
+      [mx, roomId]
+    );
+
    const handleStickerSelect = async (mxc: string, shortcode: string, label: string) => {
      const stickerUrl = mxcUrlToHttp(mx, mxc, useAuthentication);
      if (!stickerUrl) return;
@@ -669,6 +717,67 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                  </PopOut>
                )}
              </UseStateProvider>
+              {!!gifApiKey && (
+                <UseStateProvider initial={false}>
+                  {(gifOpen: boolean, setGifOpen) => (
+                    <PopOut
+                      offset={16}
+                      alignOffset={-44}
+                      position="Top"
+                      align="End"
+                      anchor={
+                        gifOpen
+                          ? gifBtnRef.current?.getBoundingClientRect() ?? undefined
+                          : undefined
+                      }
+                      content={
+                        <GifPicker
+                          apiKey={gifApiKey}
+                          onSelect={handleGifSelect}
+                          requestClose={() => setGifOpen(false)}
+                        />
+                      }
+                    >
+                      <IconButton
+                        ref={gifBtnRef}
+                        aria-pressed={gifOpen}
+                        onClick={() => setGifOpen(!gifOpen)}
+                        variant="SurfaceVariant"
+                        size="300"
+                        radii="300"
+                      >
+                        <Text
+                          size="T200"
+                          style={{
+                            fontWeight: 800,
+                            fontSize: '11px',
+                            letterSpacing: '0.04em',
+                            lineHeight: 1,
+                          }}
+                        >
+                          GIF
+                        </Text>
+                      </IconButton>
+                    </PopOut>
+                  )}
+                </UseStateProvider>
+              )}
+              <IconButton
+                onClick={handleShareLocation}
+                variant="SurfaceVariant"
+                size="300"
+                radii="300"
+                aria-label="Share location"
+                title="Share location"
+              >
+                {locating ? (
+                  <Text size="T200" style={{ fontWeight: 800, fontSize: '10px', letterSpacing: '0.04em', lineHeight: 1 }}>
+                    ...
+                  </Text>
+                ) : (
+                  <Icon src={Icons.Pin} size="100" />
+                )}
+              </IconButton>
              <IconButton onClick={submit} variant="SurfaceVariant" size="300" radii="300">
                <Icon src={Icons.Send} />
              </IconButton>
@@ -1222,7 +1222,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
                  mEvent.getType() === 'm.poll.start' ||
                  mEvent.getType() === 'org.matrix.msc3381.poll.start'
                )
-                  return <PollContent content={mEvent.getContent()} />;
+                  return <PollContent content={mEvent.getContent()} roomId={room.roomId} eventId={mEvent.getId() ?? undefined} />;
                if (mEvent.getType() === MessageEvent.RoomMessageEncrypted)
                  return (
                    <Text>
@@ -1351,7 +1351,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
            {mEvent.isRedacted() ? (
              <RedactedContent reason={mEvent.getUnsigned().redacted_because?.content.reason} />
            ) : (
-              <PollContent content={mEvent.getContent()} />
+              <PollContent content={mEvent.getContent()} roomId={room.roomId} eventId={mEvent.getId() ?? undefined} />
            )}
          </Message>
        );
@@ -1404,7 +1404,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
            {mEvent.isRedacted() ? (
              <RedactedContent reason={mEvent.getUnsigned().redacted_because?.content.reason} />
            ) : (
-              <PollContent content={mEvent.getContent()} />
+              <PollContent content={mEvent.getContent()} roomId={room.roomId} eventId={mEvent.getId() ?? undefined} />
            )}
          </Message>
        );
@@ -0,0 +1,129 @@
+import React, { ChangeEvent, useState } from 'react';
+import FocusTrap from 'focus-trap-react';
+import {
+  Box,
+  config,
+  Input,
+  Line,
+  MenuItem,
+  Modal,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Scroll,
+  Text,
+} from 'folds';
+import { MatrixEvent } from 'matrix-js-sdk';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { stopPropagation } from '../../../utils/keyboard';
+
+type Props = {
+  mEvent: MatrixEvent;
+  onClose: () => void;
+};
+
+export function ForwardMessageDialog({ mEvent, onClose }: Props) {
+  const mx = useMatrixClient();
+  const [query, setQuery] = useState('');
+  const [sentTo, setSentTo] = useState<string | null>(null);
+
+  const allRooms = mx
+    .getRooms()
+    .filter((r) => r.getMyMembership() === 'join' && !r.isSpaceRoom())
+    .sort((a, b) => (b.getLastActiveTimestamp() ?? 0) - (a.getLastActiveTimestamp() ?? 0));
+
+  const filtered = query
+    ? allRooms.filter((r) => r.name.toLowerCase().includes(query.toLowerCase()))
+    : allRooms;
+
+  const forward = (roomId: string, roomName: string) => {
+    const fwdContent: Record<string, unknown> = { ...mEvent.getContent() };
+    delete fwdContent['m.relates_to'];
+    mx.sendMessage(roomId, fwdContent as any);
+    setSentTo(roomName);
+    setTimeout(onClose, 1200);
+  };
+
+  return (
+    <Overlay open backdrop={<OverlayBackdrop />}>
+      <OverlayCenter>
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: onClose,
+            clickOutsideDeactivates: true,
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Modal
+            size="400"
+            style={{ maxHeight: '440px', borderRadius: config.radii.R500, display: 'flex', flexDirection: 'column' }}
+          >
+            <Box
+              direction="Column"
+              gap="200"
+              shrink="No"
+              style={{ padding: config.space.S400, paddingBottom: config.space.S200 }}
+            >
+              <Text size="H5">Forward message</Text>
+              <Input
+                variant="Background"
+                size="400"
+                radii="400"
+                outlined
+                placeholder="Search rooms…"
+                value={query}
+                onChange={(e: ChangeEvent<HTMLInputElement>) => setQuery(e.target.value)}
+              />
+            </Box>
+            <Line size="300" />
+            {sentTo ? (
+              <Box
+                grow="Yes"
+                alignItems="Center"
+                justifyContent="Center"
+                style={{ padding: config.space.S400 }}
+              >
+                <Text size="T300">✓ Forwarded to {sentTo}</Text>
+              </Box>
+            ) : (
+              <Box grow="Yes" style={{ minHeight: 0 }}>
+                <Scroll size="300" hideTrack visibility="Hover">
+                  <Box
+                    direction="Column"
+                    gap="100"
+                    style={{ padding: config.space.S200 }}
+                  >
+                    {filtered.slice(0, 60).map((room) => (
+                      <MenuItem
+                        key={room.roomId}
+                        size="300"
+                        radii="300"
+                        onClick={() => forward(room.roomId, room.name)}
+                      >
+                        <Text size="T300" truncate>
+                          {room.name}
+                        </Text>
+                      </MenuItem>
+                    ))}
+                    {filtered.length === 0 && (
+                      <Box
+                        alignItems="Center"
+                        justifyContent="Center"
+                        style={{ padding: config.space.S400 }}
+                      >
+                        <Text size="T300" priority="300">
+                          No rooms found
+                        </Text>
+                      </Box>
+                    )}
+                  </Box>
+                </Scroll>
+              </Box>
+            )}
+          </Modal>
+        </FocusTrap>
+      </OverlayCenter>
+    </Overlay>
+  );
+}
@@ -727,6 +727,7 @@ export const Message = as<'div', MessageProps>(
    const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setHover });
    const [menuAnchor, setMenuAnchor] = useState<RectCords>();
    const [emojiBoardAnchor, setEmojiBoardAnchor] = useState<RectCords>();
+    const [forwardOpen, setForwardOpen] = useState(false);

    const senderDisplayName =
      getMemberDisplayName(room, senderId) ?? getMxIdLocalPart(senderId) ?? senderId;
@@ -1028,6 +1029,26 @@ export const Message = as<'div', MessageProps>(
                              Reply
                            </Text>
                          </MenuItem>
+                          {!mEvent.isRedacted() && (
+                            <MenuItem
+                              size="300"
+                              after={<Icon src={Icons.ArrowRight} />}
+                              radii="300"
+                              onClick={() => {
+                                setForwardOpen(true);
+                                closeMenu();
+                              }}
+                            >
+                              <Text
+                                className={css.MessageMenuItemText}
+                                as="span"
+                                size="T300"
+                                truncate
+                              >
+                                Forward
+                              </Text>
+                            </MenuItem>
+                          )}
                          {!isThreadedMessage && (
                            <MenuItem
                              size="300"
@@ -1145,6 +1166,9 @@ export const Message = as<'div', MessageProps>(
            {msgContentJSX}
          </ModernLayout>
        )}
+        {forwardOpen && (
+          <ForwardMessageDialog mEvent={mEvent} onClose={() => setForwardOpen(false)} />
+        )}
      </MessageBase>
    );
  }
@@ -55,7 +55,7 @@ export const getImageMsgContent = async (
  const content: IContent = {
    msgtype: MsgType.Image,
    filename: file.name,
-    body: file.name,
+    body: metadata.caption?.trim() || file.name,
    [MATRIX_SPOILER_PROPERTY_NAME]: metadata.markedAsSpoiler,
  };
  if (imgEl) {
@@ -90,7 +90,7 @@ export const getVideoMsgContent = async (
  const content: IContent = {
    msgtype: MsgType.Video,
    filename: file.name,
-    body: file.name,
+    body: metadata.caption?.trim() || file.name,
    [MATRIX_SPOILER_PROPERTY_NAME]: metadata.markedAsSpoiler,
  };
  if (videoEl) {