jared
b361d43088
- N23 RoomServerACL: raw text input -> folds Input; raw checkbox -> folds Checkbox
- N24 PolicyListViewer: raw room-id input -> folds Input (Critical variant on error)
- N25 ExportRoomHistory: raw <input type="date"> x2 -> folds Input
- N26 RoomShareInvite: QR <img> gets loading="lazy" + onError fallback card
("QR code unavailable") instead of a broken-image icon
- N27 GifPicker: FocusTrap returnFocusOnDeactivate:false (matches EmojiBoard)
- N76 Report modals: drop redundant Cancel button (dismiss via header x /
click-outside, like MessageReportItem)
- N5 ReadReceiptAvatars: hover/focus moved to co-located css :hover/:focus-visible
(removed JS onMouseEnter/Leave .style mutation)
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
102 lines
3.4 KiB
TypeScript
102 lines
3.4 KiB
TypeScript
import React, { useCallback, useState } from 'react';
|
|
import { Box, Button, color, 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 [qrError, setQrError] = 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">
|
|
{qrError ? (
|
|
<Box
|
|
direction="Column"
|
|
alignItems="Center"
|
|
justifyContent="Center"
|
|
gap="100"
|
|
style={{
|
|
width: 160,
|
|
height: 160,
|
|
borderRadius: config.radii.R300,
|
|
background: color.SurfaceVariant.Container,
|
|
}}
|
|
>
|
|
<Icon size="400" src={Icons.Warning} />
|
|
<Text size="T200" priority="300" align="Center">
|
|
QR code unavailable
|
|
</Text>
|
|
</Box>
|
|
) : (
|
|
<img
|
|
src={qrSrc}
|
|
alt="QR code for room invite link"
|
|
width={160}
|
|
height={160}
|
|
loading="lazy"
|
|
onError={() => setQrError(true)}
|
|
style={{ display: 'block', borderRadius: config.radii.R300 }}
|
|
/>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
</CutoutCard>
|
|
</SequenceCard>
|
|
);
|
|
}
|