feat: P1 features — voice speed, private receipts, room filter, favorites, invite link, poll creation

P1-5: Voice message playback speed toggle (0.75×/1×/1.5×/2×) in AudioContent.tsx P1-10: Private read receipts toggle in Privacy settings; wired to notifications.ts P1-3: Room filter input on Home tab and DMs tab (client-side, clears on tab switch) P1-8: Favorite rooms via m.favourite tag — Favorites section in Home sidebar, star/unstar in right-click menu P1-9: Room invite link + QR code in room settings (Share Room tile, api.qrserver.com QR) P1-6: Poll creation modal in composer (PollCreator.tsx, sends m.poll.start) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-02 19:31:30 -04:00
parent f07ff63ac1
commit afe957015b
11 changed files with 607 additions and 8 deletions
@@ -0,0 +1,78 @@
+import React, { useCallback, useState } from 'react';
+import { Box, Button, config, Icon, Icons, Text } from 'folds';
+import { SequenceCard } from '../../../components/sequence-card';
+import { SequenceCardStyle } from '../../room-settings/styles.css';
+import { SettingTile } from '../../../components/setting-tile';
+import { CutoutCard } from '../../../components/cutout-card';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { useRoom } from '../../../hooks/useRoom';
+import { getMatrixToRoom } from '../../../plugins/matrix-to';
+
+export function RoomShareInvite() {
+  const mx = useMatrixClient();
+  const room = useRoom();
+  const [copied, setCopied] = useState(false);
+
+  const domain = mx.getDomain() ?? undefined;
+  const inviteUrl = getMatrixToRoom(room.roomId, domain ? [domain] : undefined);
+  const qrSrc = `https://api.qrserver.com/v1/create-qr-code/?size=160x160&data=${encodeURIComponent(inviteUrl)}`;
+
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(inviteUrl).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  }, [inviteUrl]);
+
+  return (
+    <SequenceCard
+      className={SequenceCardStyle}
+      variant="SurfaceVariant"
+      direction="Column"
+      gap="400"
+    >
+      <SettingTile
+        title="Share Room"
+        description="Share this invite link so others can join the room."
+      />
+      <CutoutCard variant="Surface" style={{ padding: config.space.S300 }}>
+        <Box direction="Column" gap="300">
+          <Box gap="200" alignItems="Center">
+            <Box grow="Yes">
+              <Text
+                size="T200"
+                style={{
+                  wordBreak: 'break-all',
+                  userSelect: 'all',
+                }}
+              >
+                {inviteUrl}
+              </Text>
+            </Box>
+            <Box shrink="No">
+              <Button
+                size="300"
+                variant={copied ? 'Success' : 'Secondary'}
+                fill={copied ? 'Solid' : 'Soft'}
+                radii="300"
+                onClick={handleCopy}
+                before={<Icon size="100" src={copied ? Icons.Check : Icons.Link} />}
+              >
+                <Text size="B300">{copied ? 'Copied!' : 'Copy Link'}</Text>
+              </Button>
+            </Box>
+          </Box>
+          <Box justifyContent="Center">
+            <img
+              src={qrSrc}
+              alt="QR code for room invite link"
+              width={160}
+              height={160}
+              style={{ display: 'block', borderRadius: config.radii.R300 }}
+            />
+          </Box>
+        </Box>
+      </CutoutCard>
+    </SequenceCard>
+  );
+}
@@ -4,4 +4,5 @@ export * from './RoomHistoryVisibility';
 export * from './RoomJoinRules';
 export * from './RoomProfile';
 export * from './RoomPublish';
+export * from './RoomShareInvite';
 export * from './RoomUpgrade';
@@ -212,6 +212,17 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
    const [invitePrompt, setInvitePrompt] = useState(false);
    const isServerNotice = room.getType() === 'm.server_notice';

+    const isFavorite = !!room.tags?.['m.favourite'];
+
+    const handleToggleFavorite = () => {
+      if (isFavorite) {
+        mx.deleteRoomTag(room.roomId, 'm.favourite');
+      } else {
+        mx.setRoomTag(room.roomId, 'm.favourite', { order: 0.5 });
+      }
+      requestClose();
+    };
+
    const handleMarkAsRead = () => {
      markAsRead(mx, room.roomId, hideActivity);
      requestClose();
@@ -273,6 +284,17 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
        </Box>
        <Line variant="Surface" size="300" />
        <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+          <MenuItem
+            onClick={handleToggleFavorite}
+            size="300"
+            after={<Icon size="100" src={Icons.Star} filled={isFavorite} />}
+            radii="300"
+            aria-pressed={isFavorite}
+          >
+            <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
+              {isFavorite ? 'Remove from Favorites' : 'Add to Favorites'}
+            </Text>
+          </MenuItem>
          <MenuItem
            onClick={handleInvite}
            variant="Primary"
@@ -381,6 +403,7 @@ function RoomNavItem_({
  notificationMode,
  linkPath,
 }: RoomNavItemProps) {
+  const isFavorite = !!room.tags?.['m.favourite'];
  const mx = useMatrixClient();
  const useAuthentication = useMediaAuthentication();
  const [hover, setHover] = useState(false);
@@ -499,6 +522,15 @@ function RoomNavItem_({
                  style={{ opacity: config.opacity.P300, flexShrink: 0 }}
                />
              )}
+              {isFavorite && (
+                <Icon
+                  size="50"
+                  src={Icons.Star}
+                  filled
+                  aria-label="Favorited"
+                  style={{ opacity: config.opacity.P300, flexShrink: 0 }}
+                />
+              )}
            </Box>
            {!optionsVisible && !unread && !selected && typingMember.length > 0 && (
              <Badge size="300" variant="Secondary" fill="Soft" radii="Pill" outlined>
@@ -11,6 +11,7 @@ import {
  RoomLocalAddresses,
  RoomPublishedAddresses,
  RoomPublish,
+  RoomShareInvite,
  RoomUpgrade,
 } from '../../common-settings/general';
 import { useRoomCreators } from '../../../hooks/useRoomCreators';
@@ -58,6 +59,10 @@ export function General({ requestClose }: GeneralProps) {
                <RoomPublishedAddresses permissions={permissions} />
                <RoomLocalAddresses permissions={permissions} />
              </Box>
+              <Box direction="Column" gap="100">
+                <Text size="L400">Share</Text>
+                <RoomShareInvite />
+              </Box>
              <Box direction="Column" gap="100">
                <Text size="L400">Advanced Options</Text>
                <RoomUpgrade permissions={permissions} requestClose={requestClose} />
@@ -0,0 +1,281 @@
+import React, { useState } from 'react';
+import { Room } from 'matrix-js-sdk';
+import { Box, Icon, IconButton, Icons, Text, config } from 'folds';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+
+interface PollCreatorProps {
+  roomId: string;
+  room: Room;
+  onClose: () => void;
+}
+
+export function PollCreator({ roomId, onClose }: PollCreatorProps) {
+  const mx = useMatrixClient();
+  const [question, setQuestion] = useState('');
+  const [options, setOptions] = useState<string[]>(['', '']);
+  const [maxSelections, setMaxSelections] = useState<number>(1);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleOptionChange = (index: number, value: string) => {
+    setOptions((prev) => {
+      const next = [...prev];
+      next[index] = value;
+      return next;
+    });
+  };
+
+  const handleAddOption = () => {
+    if (options.length >= 10) return;
+    setOptions((prev) => [...prev, '']);
+  };
+
+  const handleRemoveOption = (index: number) => {
+    if (options.length <= 2) return;
+    setOptions((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const handleSubmit = async () => {
+    const trimmedQuestion = question.trim();
+    if (!trimmedQuestion) {
+      setError('Please enter a question.');
+      return;
+    }
+    const filledOptions = options.map((o) => o.trim()).filter((o) => o.length > 0);
+    if (filledOptions.length < 2) {
+      setError('Please provide at least 2 answer options.');
+      return;
+    }
+
+    setError(null);
+    setSubmitting(true);
+    try {
+      await mx.sendEvent(roomId, 'm.poll.start' as any, {
+        'm.poll': {
+          question: { 'm.text': trimmedQuestion },
+          answers: filledOptions.map((o, i) => ({ 'm.id': `${i}`, 'm.text': o })),
+          max_selections: maxSelections,
+          kind: 'm.poll.undisclosed',
+        },
+        body: trimmedQuestion,
+        msgtype: 'm.text',
+      });
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to send poll.');
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        inset: 0,
+        zIndex: 1000,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: 'rgba(0,0,0,0.5)',
+      }}
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div
+        style={{
+          background: 'var(--bg-surface)',
+          borderRadius: config.radii.R400,
+          padding: config.space.S500,
+          width: '100%',
+          maxWidth: '420px',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: config.space.S300,
+          boxShadow: '0 8px 32px rgba(0,0,0,0.24)',
+        }}
+      >
+        <Box direction="Row" alignItems="Center" justifyContent="SpaceBetween">
+          <Text size="H4">Create Poll</Text>
+          <IconButton
+            size="300"
+            radii="300"
+            variant="SurfaceVariant"
+            onClick={onClose}
+            aria-label="Close poll creator"
+          >
+            <Icon src={Icons.Cross} size="100" />
+          </IconButton>
+        </Box>
+
+        <div style={{ display: 'flex', flexDirection: 'column', gap: config.space.S100 }}>
+          <Text size="L400">Question</Text>
+          <input
+            style={{
+              background: 'var(--bg-surface-low)',
+              border: '1px solid var(--bg-surface-border)',
+              borderRadius: config.radii.R300,
+              padding: `${config.space.S200} ${config.space.S300}`,
+              color: 'var(--tc-surface-high)',
+              fontSize: '14px',
+              outline: 'none',
+              width: '100%',
+              boxSizing: 'border-box',
+            }}
+            type="text"
+            placeholder="Ask a question..."
+            value={question}
+            onChange={(e) => setQuestion(e.target.value)}
+            autoFocus
+          />
+        </div>
+
+        <div style={{ display: 'flex', flexDirection: 'column', gap: config.space.S100 }}>
+          <Text size="L400">Options</Text>
+          {options.map((opt, index) => (
+            <div
+              key={index}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: config.space.S100,
+              }}
+            >
+              <input
+                style={{
+                  flex: 1,
+                  background: 'var(--bg-surface-low)',
+                  border: '1px solid var(--bg-surface-border)',
+                  borderRadius: config.radii.R300,
+                  padding: `${config.space.S200} ${config.space.S300}`,
+                  color: 'var(--tc-surface-high)',
+                  fontSize: '14px',
+                  outline: 'none',
+                  boxSizing: 'border-box',
+                }}
+                type="text"
+                placeholder={`Option ${index + 1}`}
+                value={opt}
+                onChange={(e) => handleOptionChange(index, e.target.value)}
+              />
+              <IconButton
+                size="300"
+                radii="300"
+                variant="SurfaceVariant"
+                onClick={() => handleRemoveOption(index)}
+                disabled={options.length <= 2}
+                aria-label={`Remove option ${index + 1}`}
+              >
+                <Icon src={Icons.Cross} size="100" />
+              </IconButton>
+            </div>
+          ))}
+          {options.length < 10 && (
+            <button
+              type="button"
+              onClick={handleAddOption}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: config.space.S100,
+                background: 'none',
+                border: 'none',
+                cursor: 'pointer',
+                color: 'var(--tc-surface-low)',
+                fontSize: '13px',
+                padding: `${config.space.S100} 0`,
+                alignSelf: 'flex-start',
+              }}
+            >
+              <Icon src={Icons.Plus} size="100" />
+              <span>Add Option</span>
+            </button>
+          )}
+        </div>
+
+        <div style={{ display: 'flex', flexDirection: 'column', gap: config.space.S100 }}>
+          <Text size="L400">Selection Type</Text>
+          <div style={{ display: 'flex', gap: config.space.S200 }}>
+            <label
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: config.space.S100,
+                cursor: 'pointer',
+                fontSize: '14px',
+                color: 'var(--tc-surface-high)',
+              }}
+            >
+              <input
+                type="radio"
+                name="pollType"
+                checked={maxSelections === 1}
+                onChange={() => setMaxSelections(1)}
+              />
+              Single choice
+            </label>
+            <label
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: config.space.S100,
+                cursor: 'pointer',
+                fontSize: '14px',
+                color: 'var(--tc-surface-high)',
+              }}
+            >
+              <input
+                type="radio"
+                name="pollType"
+                checked={maxSelections !== 1}
+                onChange={() => setMaxSelections(options.length)}
+              />
+              Multiple choice
+            </label>
+          </div>
+        </div>
+
+        {error && (
+          <Text size="T200" style={{ color: 'var(--tc-danger-normal)' }}>
+            {error}
+          </Text>
+        )}
+
+        <Box direction="Row" justifyContent="End" gap="200">
+          <button
+            type="button"
+            onClick={onClose}
+            style={{
+              background: 'var(--bg-surface-low)',
+              border: '1px solid var(--bg-surface-border)',
+              borderRadius: config.radii.R300,
+              padding: `${config.space.S200} ${config.space.S400}`,
+              cursor: 'pointer',
+              color: 'var(--tc-surface-high)',
+              fontSize: '14px',
+            }}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={handleSubmit}
+            disabled={submitting}
+            style={{
+              background: 'var(--bg-primary-main)',
+              border: 'none',
+              borderRadius: config.radii.R300,
+              padding: `${config.space.S200} ${config.space.S400}`,
+              cursor: submitting ? 'not-allowed' : 'pointer',
+              color: 'var(--tc-primary-on-primary)',
+              fontSize: '14px',
+              opacity: submitting ? 0.7 : 1,
+            }}
+          >
+            {submitting ? 'Creating...' : 'Create Poll'}
+          </button>
+        </Box>
+      </div>
+    </div>
+  );
+}
@@ -861,6 +861,10 @@ function Editor() {
 function Privacy() {
  const [hideActivity, setHideActivity] = useSetting(settingsAtom, 'hideActivity');
  const [hidePresence, setHidePresence] = useSetting(settingsAtom, 'hidePresence');
+  const [privateReadReceipts, setPrivateReadReceipts] = useSetting(
+    settingsAtom,
+    'privateReadReceipts',
+  );

  return (
    <Box direction="Column" gap="100">
@@ -872,6 +876,19 @@ function Privacy() {
          after={<Switch variant="Primary" value={hideActivity} onChange={setHideActivity} />}
        />
      </SequenceCard>
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+        <SettingTile
+          title="Private Read Receipts"
+          description="Send read receipts only to you and the server — other users won't see when you've read messages."
+          after={
+            <Switch
+              variant="Primary"
+              value={privateReadReceipts}
+              onChange={setPrivateReadReceipts}
+            />
+          }
+        />
+      </SequenceCard>
      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
        <SettingTile
          title="Hide Online Status"