Merge pull request #247 : readable poll card (#246 )

fix(polls): readable poll card: counts, visible bars/indicators, no chip overflow (#246 )
Rendering only; the vote logic (tally, optimistic votes, end poll, keyboard radiogroup, voters) is unchanged. - Every row shows "N votes · P%". Multiple choice looked broken as "100% / 100%" with no counts; the footer now says "voters" there. - Results are a thin progress bar under each answer: accent for your pick, success for the winner, neutral otherwise. The old full-row fill was the same grey as the row, so a 100% answer just looked disabled. - Radio and checkbox indicators are 18px with a 2px border in a colour mixed from the theme's text colour. Primary.ContainerLine was nearly invisible, especially in dark themes. - The winner shows a star and "Winner" instead of a second check mark. - Bordered card, 460px wide (max 100%, same width for every poll). The header is now "Poll · Single choice | Pick up to N | Results hidden until the end | Final results", replacing the letter-spaced "◉ POLL · …" line. - Footer: plain muted text that wraps, and chips ("Who voted", "End poll") that never wrap. Previously the chip label broke onto two lines inside a one-line chip and spilled out of it. Reproduced before/after in Lotus Terminal at 150% zoom, a 360px phone, and dark at 125%. - Lotus Terminal theme: data-winner gets its own green border rule. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA
2026-09-27 23:28:48 -04:00 · 2026-09-27 23:18:25 -04:00 · 2026-09-27 17:10:50 -04:00 · 2026-09-27 16:54:29 -04:00 · 2026-09-27 13:54:11 -04:00 · 2026-09-27 13:32:45 -04:00
15 changed files with 488 additions and 168 deletions
@@ -81,7 +81,7 @@
      },
      "devDependencies": {
        "@axe-core/playwright": "4.13.0",
-        "@lotusguild/element-call-embedded": "0.25.0-lotus.21",
+        "@lotusguild/element-call-embedded": "0.25.0-lotus.22",
        "@playwright/test": "1.63.0",
        "@rollup/plugin-inject": "5.0.5",
        "@rollup/plugin-wasm": "6.2.2",
@@ -2695,9 +2695,9 @@
      "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
    },
    "node_modules/@lotusguild/element-call-embedded": {
-      "version": "0.25.0-lotus.21",
-      "resolved": "https://code.lotusguild.org/api/packages/LotusGuild/npm/%40lotusguild%2Felement-call-embedded/-/0.25.0-lotus.21/element-call-embedded-0.25.0-lotus.21.tgz",
-      "integrity": "sha512-Phtjop2qdKRrCLqAhzipRaJaVnU3MjK9CV4QwHkwU/Xlj8oguZBfjOlV7zTqOTzAr57OteOfLcyxLsmv5+u9tg==",
+      "version": "0.25.0-lotus.22",
+      "resolved": "https://code.lotusguild.org/api/packages/LotusGuild/npm/%40lotusguild%2Felement-call-embedded/-/0.25.0-lotus.22/element-call-embedded-0.25.0-lotus.22.tgz",
+      "integrity": "sha512-AimDKZA4xUKEEyl2XUFUSUDl03tBKFv88T/3igKyH2VqNSPMGnqcQJC5HXIkHLTWrOmg8kLcJ//FFbqlUZiLcA==",
      "dev": true
    },
    "node_modules/@matrix-org/matrix-sdk-crypto-wasm": {
@@ -108,7 +108,7 @@
  },
  "devDependencies": {
    "@axe-core/playwright": "4.13.0",
-    "@lotusguild/element-call-embedded": "0.25.0-lotus.21",
+    "@lotusguild/element-call-embedded": "0.25.0-lotus.22",
    "@playwright/test": "1.63.0",
    "@rollup/plugin-inject": "5.0.5",
    "@rollup/plugin-wasm": "6.2.2",
@@ -38,7 +38,7 @@ import {
 } from '../hooks/useCallEmbed';
 import { callChatAtom, callEmbedAtom } from '../state/callEmbed';
 import { toastQueueAtom } from '../state/toast';
-import { CallEmbed, useCallControlState } from '../plugins/call';
+import { CallEmbed, useCallControlState, useScreensharePromptOpen } from '../plugins/call';
 import { hangupCallAndWait } from '../plugins/call/hangup';
 import { useSelectedRoom } from '../hooks/router/useSelectedRoom';
 import { ScreenSize, useScreenSizeContext } from '../hooks/useScreenSize';
@@ -82,6 +82,7 @@ import { useRoomCallPolicy } from '../hooks/useRoomCallPolicy';
 import { useNotificationsQuiet } from '../hooks/useNotificationsQuiet';
 import { CallAvatarAnimation } from '../styles/Animations.css';
 import { webRTCSupported } from '../utils/rtc';
+import { CallsUnavailableMessage } from '../features/call/CallsUnavailable';
 import { zIndices } from '../styles/zIndex';

 const PIP_MIN_W = 200;
@@ -231,13 +232,7 @@ function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallPr
                </Text>
              )}
              {!webRTCSupported() && (
-                <Text
-                  style={{ margin: 'auto', color: color.Critical.Main }}
-                  size="L400"
-                  align="Center"
-                >
-                  Your browser does not support WebRTC, which is required for calling.
-                </Text>
+                <CallsUnavailableMessage roomId={room.roomId} actionLabel="Answer in browser" />
              )}
              <Box direction="Column" gap="300">
                {willAnswerWithCamera && (
@@ -882,6 +877,7 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
  const callActive = callEmbed && joined;
  const callVisible = inCallRoom && callActive && !chatOnlyView;
  const pipMode = callActive && !inCallRoom;
+  const pipPromptOpen = useScreensharePromptOpen(callEmbed?.control);
  const { navigateRoom } = useRoomNavigate();

  const { screenshare: pipScreenshare } = useCallControlState(callEmbed?.control);
@@ -1363,6 +1359,9 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
                zIndex: 1,
                background: 'transparent',
                cursor: 'grab',
+                // [Gitea #43] The call's "Share your screen?" prompt is drawn
+                // inside the frame: let the click reach its Share button.
+                pointerEvents: pipPromptOpen ? 'none' : undefined,
                display: 'flex',
                alignItems: 'flex-start',
                justifyContent: 'flex-end',
@@ -261,52 +261,69 @@ export function PollContent({
    handleVote(answers[idx].id);
  };

-  const headerLabel = isEnded
-    ? 'Poll closed · Final results'
-    : `Poll · ${isMultiple ? 'Multiple choice' : 'Single choice'}`;
+  // [Gitea #246] Type line under the "Poll" label.
+  const typeLabel = (() => {
+    if (isEnded) return 'Final results';
+    if (isUndisclosed) return 'Results hidden until the end';
+    return isMultiple ? `Pick up to ${maxSelections}` : 'Single choice';
+  })();

+  // Multiple choice counts people, not answers ("1 voter" who picked two).
+  const unit = isMultiple ? 'voter' : 'vote';
  const footerNote = (() => {
+    const totalPart = total > 0 ? `${total} ${unit}${total === 1 ? '' : 's'}` : `No ${unit}s yet`;
    if (isUndisclosed && !isEnded) {
      return canVote
-        ? 'Voting open · Results hidden until the poll ends'
-        : 'Results hidden until the poll ends';
+        ? `${myVotes.size > 0 ? 'You voted' : 'Voting open'} · results shown when the poll ends`
+        : 'Results shown when the poll ends';
    }
-    const votesPart = total > 0 ? `${total} vote${total === 1 ? '' : 's'}` : 'No votes yet';
-    if (isEnded) return `${votesPart} · Poll closed`;
-    if (!canVote) return votesPart;
-    if (isMultiple) return `${votesPart} · Select up to ${maxSelections}`;
-    return `${votesPart} · ${myVotes.size > 0 ? 'Click to change' : 'Click to vote'}`;
+    if (isEnded) return `${totalPart} · Poll closed`;
+    if (!canVote) return totalPart;
+    return `${totalPart} · ${myVotes.size > 0 ? 'Select another answer to change your vote' : 'Select an answer to vote'}`;
  })();

+  // Neutral tones derived from the theme's text colour, so they have contrast
+  // in every theme (the Container/ContainerLine tokens were near-invisible).
+  const muted = (pct: number) =>
+    `color-mix(in srgb, ${color.SurfaceVariant.OnContainer} ${pct}%, transparent)`;
+
  return (
    <Box
      data-poll-content
      direction="Column"
-      gap="200"
-      style={{ maxWidth: '340px', paddingTop: '2px', paddingBottom: '4px' }}
-    >
-      <Text
-        as="div"
-        size="T200"
-        priority="300"
-        data-poll-content-label
+      gap="300"
      style={{
-          fontWeight: 700,
-          letterSpacing: '0.12em',
-          textTransform: 'uppercase',
-          marginBottom: config.space.S100,
+        // Same width for every poll (the message body shrink-wraps its content).
+        width: toRem(460),
+        maxWidth: '100%',
+        margin: `${config.space.S100} 0`,
+        padding: config.space.S300,
+        borderRadius: config.radii.R400,
+        border: `${config.borderWidth.B300} solid ${muted(18)}`,
+        background: muted(4),
+        boxSizing: 'border-box',
      }}
    >
-        <span aria-hidden>◉ </span>
-        {headerLabel}
+      <Box direction="Column" gap="100">
+        <Box alignItems="Center" gap="200" wrap="Wrap" data-poll-content-label>
+          <Icon size="100" src={Icons.OrderList} style={{ opacity: 0.8 }} />
+          <Text as="span" size="L400" style={{ fontWeight: 600 }}>
+            Poll
          </Text>
-      <Text size="T400" style={{ fontWeight: 600 }}>
+          <Text as="span" size="T200" priority="300">
+            ·
+          </Text>
+          <Text as="span" size="T200" priority="300">
+            {typeLabel}
+          </Text>
+        </Box>
+        <Text size="T400" style={{ fontWeight: 600, overflowWrap: 'anywhere' }}>
          {question}
        </Text>
+      </Box>
      <Box
        direction="Column"
-        gap="100"
-        style={{ marginTop: '2px' }}
+        gap="200"
        role={isMultiple ? 'group' : 'radiogroup'}
        aria-label={question}
        onKeyDown={handleRadioKeyDown}
@@ -316,20 +333,32 @@ export function PollContent({
          const text = answer.text;
          const selected = myVotes.has(id);
          const voteCount = counts.get(id) ?? 0;
-          const pct = showResults && total > 0 ? Math.round((voteCount / total) * 100) : 0;
+          const showBar = showResults && total > 0;
+          const pct = showBar ? Math.round((voteCount / total) * 100) : 0;
          const isWinner = winners.has(id);
+          const resultText = `${voteCount} ${voteCount === 1 ? 'vote' : 'votes'} · ${pct}%`;
          // Roving tabindex for the single-choice radiogroup; checkboxes stay tabbable.
          const tabIndex = isMultiple ? 0 : selected || (myVotes.size === 0 && i === 0) ? 0 : -1;
+          let barColor = muted(40);
+          if (isWinner) barColor = color.Success.Main;
+          else if (selected) barColor = color.Primary.Main;
+          let rowBorder = muted(22);
+          if (isWinner) rowBorder = color.Success.Main;
+          else if (selected) rowBorder = color.Primary.Main;
+          const labelParts = [text];
+          if (showBar) labelParts.push(resultText);
+          if (isWinner) labelParts.push('winning answer');
          return (
            <React.Fragment key={id}>
              <button
                type="button"
                data-poll-answer
                data-selected={selected}
+                data-winner={isWinner || undefined}
                role={isMultiple ? 'checkbox' : 'radio'}
                aria-checked={selected}
                aria-disabled={!canVote}
-                aria-label={isWinner ? `${text}, winning answer` : undefined}
+                aria-label={labelParts.join(', ')}
                aria-describedby={
                  showVoters && canShowVoters && (voters.get(id)?.length ?? 0) > 0
                    ? `poll-voters-${eventId}-${id}`
@@ -340,60 +369,36 @@ export function PollContent({
                style={{
                  padding: `${config.space.S200} ${config.space.S300}`,
                  borderRadius: config.radii.R300,
-                  background: selected ? color.Primary.Container : color.SurfaceVariant.Container,
-                  border: `${config.borderWidth.B300} solid ${
-                    isWinner
-                      ? color.Success.Main
-                      : selected
-                        ? color.Primary.Main
-                        : color.SurfaceVariant.ContainerLine
-                  }`,
+                  background: selected ? muted(8) : 'transparent',
+                  border: `${config.borderWidth.B300} solid ${rowBorder}`,
                  lineHeight: 1.4,
                  textAlign: 'left',
                  cursor: canVote ? 'pointer' : 'default',
                  color: 'inherit',
+                  font: 'inherit',
                  display: 'flex',
                  flexDirection: 'column',
-                  gap: config.space.S100,
+                  gap: config.space.S200,
                  width: '100%',
-                  position: 'relative',
-                  overflow: 'hidden',
                  transition: 'border-color 0.15s, background 0.15s',
                }}
              >
-                {showResults && total > 0 && (
-                  <span
-                    aria-hidden
-                    style={{
-                      position: 'absolute',
-                      inset: 0,
-                      right: 'auto',
-                      width: `${pct}%`,
-                      background: selected
-                        ? color.Primary.ContainerActive
-                        : color.SurfaceVariant.ContainerActive,
-                      pointerEvents: 'none',
-                      transition: 'width 0.3s ease',
-                    }}
-                  />
-                )}
                <span
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    gap: config.space.S200,
-                    position: 'relative',
+                    width: '100%',
                  }}
                >
                  <span
                    aria-hidden
                    style={{
                      flexShrink: 0,
-                      width: toRem(14),
-                      height: toRem(14),
-                      border: `${config.borderWidth.B300} solid ${
-                        selected ? color.Primary.Main : color.Primary.ContainerLine
-                      }`,
+                      boxSizing: 'border-box',
+                      width: toRem(18),
+                      height: toRem(18),
+                      border: `2px solid ${selected ? color.Primary.Main : muted(55)}`,
                      borderRadius: isMultiple ? config.radii.R300 : config.radii.Pill,
                      background: selected ? color.Primary.Main : 'transparent',
                      display: 'flex',
@@ -405,29 +410,72 @@ export function PollContent({
                  >
                    {selected ? <Icon size="50" src={Icons.Check} /> : null}
                  </span>
-                  <Text as="span" size="T300" style={{ flexGrow: 1 }}>
+                  <Text
+                    as="span"
+                    size="T300"
+                    style={{ flexGrow: 1, minWidth: 0, overflowWrap: 'anywhere' }}
+                  >
                    {text}
                  </Text>
                  {isWinner && (
-                    <Icon
-                      size="50"
-                      src={Icons.Check}
-                      style={{ flexShrink: 0, color: color.Success.Main }}
-                    />
+                    <Text
+                      as="span"
+                      size="T200"
+                      style={{
+                        flexShrink: 0,
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        gap: config.space.S100,
+                        color: color.Success.Main,
+                        fontWeight: 600,
+                      }}
+                    >
+                      <Icon size="50" src={Icons.Star} filled />
+                      Winner
+                    </Text>
                  )}
-                  {showResults && total > 0 && (
-                    <Text as="span" size="T200" priority="300" style={{ flexShrink: 0 }}>
-                      {pct}%
+                  {showBar && (
+                    <Text
+                      as="span"
+                      size="T200"
+                      priority="300"
+                      style={{ flexShrink: 0, fontVariantNumeric: 'tabular-nums' }}
+                    >
+                      {resultText}
                    </Text>
                  )}
                </span>
+                {showBar && (
+                  <span
+                    aria-hidden
+                    style={{
+                      display: 'block',
+                      width: '100%',
+                      height: toRem(6),
+                      borderRadius: config.radii.Pill,
+                      background: muted(12),
+                      overflow: 'hidden',
+                    }}
+                  >
+                    <span
+                      style={{
+                        display: 'block',
+                        height: '100%',
+                        width: `${pct}%`,
+                        borderRadius: config.radii.Pill,
+                        background: barColor,
+                        transition: 'width 0.3s ease',
+                      }}
+                    />
+                  </span>
+                )}
              </button>
              {showVoters && canShowVoters && (voters.get(id)?.length ?? 0) > 0 && (
                <Text
                  id={`poll-voters-${eventId}-${id}`}
                  size="T200"
                  priority="300"
-                  style={{ padding: `0 ${config.space.S300} ${config.space.S100}` }}
+                  style={{ padding: `0 ${config.space.S300}`, marginTop: `-${config.space.S100}` }}
                >
                  {`Voted by ${(voters.get(id) ?? []).map((s) => getMemberName(room, s)).join(', ')}`}
                </Text>
@@ -436,8 +484,12 @@ export function PollContent({
          );
        })}
      </Box>
+      <Box alignItems="Center" justifyContent="SpaceBetween" gap="200" wrap="Wrap">
+        <Text size="T200" priority="300" style={{ minWidth: 0, flex: '1 1 12rem' }}>
+          {footerNote}
+        </Text>
+        <Box gap="100" shrink="No" alignItems="Center" wrap="Wrap">
          {canShowVoters && (
-        <Box>
            <Chip
              variant={showVoters ? 'Primary' : 'SurfaceVariant'}
              radii="Pill"
@@ -445,29 +497,30 @@ export function PollContent({
              onClick={() => setShowVoters((v) => !v)}
              before={<Icon size="50" src={Icons.User} />}
            >
-            <Text size="T200">{showVoters ? 'Hide voters' : 'Show who voted'}</Text>
-          </Chip>
-        </Box>
-      )}
-      <Box alignItems="Center" justifyContent="SpaceBetween" gap="200">
-        <Text size="T200" priority="300" style={{ minWidth: 0 }}>
-          <i>{footerNote}</i>
+              <Text size="T200" style={{ whiteSpace: 'nowrap' }}>
+                {showVoters ? 'Hide voters' : 'Who voted'}
              </Text>
+            </Chip>
+          )}
          {canEnd &&
            (confirmEnd ? (
-            <Box gap="100" shrink="No" alignItems="Center">
+              <>
                <Chip
                  variant="Critical"
                  radii="Pill"
                  aria-disabled={ending}
                  onClick={ending ? undefined : handleEndPoll}
                >
-                <Text size="T200">{ending ? 'Ending…' : 'End poll'}</Text>
+                  <Text size="T200" style={{ whiteSpace: 'nowrap' }}>
+                    {ending ? 'Ending…' : 'End poll'}
+                  </Text>
                </Chip>
                <Chip variant="Secondary" radii="Pill" onClick={() => setConfirmEnd(false)}>
-                <Text size="T200">Cancel</Text>
+                  <Text size="T200" style={{ whiteSpace: 'nowrap' }}>
+                    Cancel
+                  </Text>
                </Chip>
-            </Box>
+              </>
            ) : (
              <Chip
                variant="SurfaceVariant"
@@ -475,10 +528,13 @@ export function PollContent({
                onClick={() => setConfirmEnd(true)}
                before={<Icon size="50" src={Icons.Cross} />}
              >
-              <Text size="T200">End poll</Text>
+                <Text size="T200" style={{ whiteSpace: 'nowrap' }}>
+                  End poll
+                </Text>
              </Chip>
            ))}
        </Box>
      </Box>
+    </Box>
  );
 }
@@ -7,7 +7,7 @@ import {
  CallEmbed,
  useCallControlState,
  useCallMicLevel,
-  useFrameScreenshare,
+  useScreenshareMode,
 } from '../../plugins/call';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { callEmbedAtom } from '../../state/callEmbed';
@@ -197,10 +197,16 @@ export function CallControl({
  // Keep a forbidden control visible while its track is still live (so the user
  // can stop it); otherwise hide it entirely.
  const showCamera = allowCamera || video;
-  // [Gitea #43] Hidden where EC shows its own screenshare button in the frame.
-  const frameScreenshare = useFrameScreenshare(callEmbed.control);
-  const showScreenshare = !frameScreenshare && (allowScreenshare || screenshare);
+  // [Gitea #43] Hidden where EC shows its own screenshare button in the frame;
+  // where the click can't be delegated, starting asks for the in-frame prompt.
+  const screenshareMode = useScreenshareMode(callEmbed.control);
+  const showScreenshare = screenshareMode !== 'hidden' && (allowScreenshare || screenshare);
  const [shareConfirm, setShareConfirm] = useState(false);
+  const handleScreenshareToggle = () => {
+    if (screenshare) callEmbed.control.toggleScreenshare();
+    else if (screenshareMode === 'prompt') callEmbed.control.promptScreenshare();
+    else setShareConfirm(true);
+  };

  const handleMicrophoneToggle = useCallback(
    () => callEmbed.control.toggleMicrophone(),
@@ -255,9 +261,7 @@ export function CallControl({
        {!compact && showScreenshare && (
          <ScreenShareButton
            enabled={screenshare}
-            onToggle={() =>
-              screenshare ? callEmbed.control.toggleScreenshare() : setShareConfirm(true)
-            }
+            onToggle={() => handleScreenshareToggle()}
            disabled={!callJoined}
          />
        )}
@@ -33,7 +33,7 @@ import {
  CallEmbed,
  useCallControlState,
  useCallMicLevel,
-  useFrameScreenshare,
+  useScreenshareMode,
 } from '../../plugins/call';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
@@ -112,9 +112,14 @@ export function CallControls({ callEmbed }: CallControlsProps) {
  // can stop it); otherwise hide it entirely.
  const showCamera = allowCamera || video;
  // [Gitea #43] Where EC shows its own screenshare button in the frame, ours
-  // is hidden (this engine can't start a share from the host); the
-  // screenshare-audio mute stays.
-  const frameScreenshare = useFrameScreenshare(callEmbed.control);
+  // is hidden (the screenshare-audio mute stays); where the click can't be
+  // delegated, starting asks for the fork's in-frame "Share your screen?".
+  const screenshareMode = useScreenshareMode(callEmbed.control);
+  const handleScreenshareToggle = () => {
+    if (screenshare) callEmbed.control.toggleScreenshare();
+    else if (screenshareMode === 'prompt') callEmbed.control.promptScreenshare();
+    else setShareConfirm(true);
+  };
  const showScreenshare = allowScreenshare || screenshare;
  const showVideoGroup = showCamera || showScreenshare || !!document.fullscreenEnabled;
  const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
@@ -225,12 +230,10 @@ export function CallControls({ callEmbed }: CallControlsProps) {
              {showCamera && <VideoButton enabled={video} onToggle={handleVideoToggle} />}
              {showScreenshare && (
                <>
-                  {!frameScreenshare && (
+                  {screenshareMode !== 'hidden' && (
                    <ScreenShareButton
                      enabled={screenshare}
-                      onToggle={() =>
-                        screenshare ? callEmbed.control.toggleScreenshare() : setShareConfirm(true)
-                      }
+                      onToggle={() => handleScreenshareToggle()}
                    />
                  )}
                  {/* Mute-screenshare-audio sits directly next to the screenshare
@@ -23,6 +23,7 @@ import { CallMemberRenderer } from './CallMemberCard';
 import * as css from './styles.css';
 import { CallControls } from './CallControls';
 import { useLivekitSupport } from '../../hooks/useLivekitSupport';
+import { CallsUnavailableMessage } from './CallsUnavailable';
 import { webRTCSupported } from '../../utils/rtc';

 function LivekitServerMissingMessage() {
@@ -33,25 +34,19 @@ function LivekitServerMissingMessage() {
  );
 }

-function WebRTCMissingError() {
-  return (
-    <Text style={{ margin: 'auto', color: color.Critical.Main }} size="L400" align="Center">
-      Your browser does not support WebRTC, which is required for calling.
-    </Text>
-  );
-}
-
 function JoinMessage({
+  roomId,
  hasParticipant,
  livekitSupported,
  rtcSupported,
 }: {
+  roomId: string;
  hasParticipant?: boolean;
  livekitSupported?: boolean;
  rtcSupported?: boolean;
 }) {
  if (rtcSupported === false) {
-    return <WebRTCMissingError />;
+    return <CallsUnavailableMessage roomId={roomId} />;
  }

  if (livekitSupported === false) {
@@ -144,6 +139,7 @@ function CallPrescreen() {
            )}
            {!inOtherCall && hasPermission && !channelFull && (
              <JoinMessage
+                roomId={room.roomId}
                hasParticipant={hasParticipant}
                livekitSupported={livekitSupported}
                rtcSupported={rtcSupported}
@@ -0,0 +1,76 @@
+import React, { useMemo } from 'react';
+import { Box, Button, Icon, Icons, Text, color } from 'folds';
+import { useClientConfig } from '../../hooks/useClientConfig';
+import { isTauri } from '../../hooks/useTauri';
+import { webRTCSupported } from '../../utils/rtc';
+import { getCallInBrowserUrl, resolveWebAppUrl } from '../../utils/callInBrowser';
+
+/**
+ * [cinny-desktop: Linux calls] The desktop app on Linux runs on WebKitGTK,
+ * which ships without WebRTC (disabled in 2.54; a libwebrtc backend is due
+ * around 2.56). Where calls can't work here, send the user to the room in the
+ * web app instead of a dead end. Only in the desktop app, and only when
+ * config.json sets `webAppUrl`.
+ */
+export const useCallInBrowserUrl = (roomId: string): string | undefined => {
+  const { webAppUrl } = useClientConfig();
+  return useMemo(
+    () =>
+      isTauri() && !webRTCSupported()
+        ? getCallInBrowserUrl(resolveWebAppUrl(webAppUrl), roomId)
+        : undefined,
+    [webAppUrl, roomId],
+  );
+};
+
+/** Opens through the desktop's new-window handler → the system browser. */
+export const openCallInBrowser = (url: string): void => {
+  window.open(url, '_blank', 'noopener,noreferrer');
+};
+
+const desktopUnavailableText = (): string =>
+  typeof navigator !== 'undefined' && /Linux/i.test(navigator.userAgent)
+    ? 'Calls aren’t available in the desktop app on Linux yet: its web engine has no WebRTC.'
+    : 'Calls aren’t available in this desktop app: its web engine has no WebRTC.';
+
+type CallsUnavailableMessageProps = {
+  roomId: string;
+  /** Button label, e.g. "Answer in browser" for an incoming call. */
+  actionLabel?: string;
+};
+
+export function CallsUnavailableMessage({
+  roomId,
+  actionLabel = 'Open in browser',
+}: CallsUnavailableMessageProps) {
+  const url = useCallInBrowserUrl(roomId);
+
+  if (!isTauri()) {
+    return (
+      <Text style={{ margin: 'auto', color: color.Critical.Main }} size="L400" align="Center">
+        Your browser does not support WebRTC, which is required for calling.
+      </Text>
+    );
+  }
+
+  return (
+    <Box direction="Column" alignItems="Center" gap="200" style={{ margin: 'auto' }}>
+      <Text style={{ color: color.Warning.Main }} size="L400" align="Center">
+        {desktopUnavailableText()}
+        {url ? ' You can join from the web app in your browser.' : ''}
+      </Text>
+      {url && (
+        <Button
+          size="300"
+          variant="Secondary"
+          fill="Soft"
+          radii="300"
+          before={<Icon size="100" src={Icons.External} />}
+          onClick={() => openCallInBrowser(url)}
+        >
+          <Text size="B300">{actionLabel}</Text>
+        </Button>
+      )}
+    </Box>
+  );
+}
@@ -80,6 +80,7 @@ import { widgetsPanelAtom } from '../../state/widgetsPanel';
 import { mobileMembersPanelAtom } from '../../state/mobileMembersPanel';
 import { threadsListAtom } from '../../state/threadsList';
 import { usePendingKnocks } from '../../hooks/usePendingKnocks';
+import { openCallInBrowser, useCallInBrowserUrl } from '../call/CallsUnavailable';
 import { bookmarksPanelAtom } from '../../state/bookmarksPanel';

 type RoomMenuProps = {
@@ -465,6 +466,36 @@ function CallRulesChip({ room }: { room: Room }) {
  );
 }

+/**
+ * [cinny-desktop: Linux calls] Stand-in for CallButton where this app can't
+ * make calls (desktop on WebKitGTK): opens the room in the web app instead.
+ */
+function CallInBrowserButton({ url }: { url: string }) {
+  return (
+    <TooltipProvider
+      position="Bottom"
+      offset={4}
+      tooltip={
+        <Tooltip>
+          <Text>Call in your browser (this desktop app can’t make calls here)</Text>
+        </Tooltip>
+      }
+    >
+      {(triggerRef) => (
+        <IconButton
+          variant="Surface"
+          fill="None"
+          ref={triggerRef}
+          aria-label="Start call in browser"
+          onClick={() => openCallInBrowser(url)}
+        >
+          <Icon size="400" src={Icons.VideoCamera} />
+        </IconButton>
+      )}
+    </TooltipProvider>
+  );
+}
+
 function CallButton() {
  const room = useRoom();
  const direct = useIsDirectRoom();
@@ -555,6 +586,7 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
  );
  const livekitSupported = useLivekitSupport();
  const rtcSupported = webRTCSupported();
+  const callInBrowserUrl = useCallInBrowserUrl(room.roomId);

  const [menuAnchor, setMenuAnchor] = useState<RectCords>();
  const [pinMenuAnchor, setPinMenuAnchor] = useState<RectCords>();
@@ -782,11 +814,16 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
            {screenSize === ScreenSize.Desktop && <CallRulesChip room={room} />}
            {!room.isCallRoom() &&
              livekitSupported &&
-              rtcSupported &&
+              (rtcSupported || callInBrowserUrl) &&
              hasCallPermission &&
              (direct ||
                (room.getJoinRule() === 'invite' &&
-                  getStateEvents(room, StateEvent.SpaceParent).length === 0)) && <CallButton />}
+                  getStateEvents(room, StateEvent.SpaceParent).length === 0)) &&
+              (rtcSupported ? (
+                <CallButton />
+              ) : (
+                callInBrowserUrl && <CallInBrowserButton url={callInBrowserUrl} />
+              ))}
            {screenSize === ScreenSize.Desktop && (
              <TooltipProvider
                position="Bottom"
@@ -25,6 +25,12 @@ export type ClientConfig = {
   * Unset: the bundled copy on this origin. Ignored in the desktop app.
   */
  elementCallUrl?: string;
+
+  /**
+   * Absolute https URL of the public web app (e.g. https://chat.lotusguild.org).
+   * The desktop app sets it so it can hand calls it can't make to the browser.
+   */
+  webAppUrl?: string;
 };

 const ClientConfigContext = createContext<ClientConfig | null>(null);
@@ -261,6 +261,15 @@ export class CallControl extends EventEmitter implements CallControlState {

  private frameScreenshareListeners = new Set<() => void>();

+  // [Gitea #43] The fork draws the "Share your screen?" prompt inside the frame
+  // on request (io.lotus.prompt_screenshare), so where the click can't be
+  // delegated our call-bar button asks for that instead of starting the share.
+  private _screensharePrompt = false;
+
+  // [Gitea #43] The fork's in-frame prompt is showing: anything the host lays
+  // over the frame (the picture-in-picture overlay) must let clicks through.
+  private _screensharePromptOpen = false;
+
  // [Gitea #43] Whether the room's call policy allows screensharing; the fork
  // hides its in-frame button when it doesn't.
  private frameScreenshareAllowed = true;
@@ -274,7 +283,32 @@ export class CallControl extends EventEmitter implements CallControlState {
    return this._frameScreenshare;
  }

-  /** Subscribe to `frameScreenshare` changes. Returns an unsubscribe. */
+  /**
+   * Starting a share must go through the fork's in-frame prompt: this engine
+   * can't delegate the click (Firefox, Safari, WebKitGTK) and the fork has
+   * the prompt. Stopping never needs it.
+   */
+  public get screenshareNeedsPrompt(): boolean {
+    return this._screensharePrompt && !canDelegateCapability();
+  }
+
+  /** The fork's in-frame "Share your screen?" prompt is showing. */
+  public get screensharePromptOpen(): boolean {
+    return this._screensharePromptOpen;
+  }
+
+  /**
+   * Ask the fork to show "Share your screen?" inside the call frame; its Share
+   * button starts the share with the frame's own click.
+   */
+  public promptScreenshare(): void {
+    this.sendForkAction('io.lotus.prompt_screenshare', {});
+  }
+
+  /**
+   * Subscribe to `frameScreenshare` / `screenshareNeedsPrompt` /
+   * `screensharePromptOpen` changes. Returns an unsubscribe.
+   */
  public onFrameScreenshareChange(cb: () => void): () => void {
    this.frameScreenshareListeners.add(cb);
    return () => {
@@ -289,7 +323,8 @@ export class CallControl extends EventEmitter implements CallControlState {
  }

  private sendFrameScreenshareAllowed(): void {
-    if (!this.joined || !this.forkReady || !this._frameScreenshare) return;
+    if (!this.joined || !this.forkReady) return;
+    if (!this._frameScreenshare && !this._screensharePrompt) return;
    this.sendForkAction('io.lotus.set_frame_screenshare', {
      visible: this.frameScreenshareAllowed,
    });
@@ -324,18 +359,32 @@ export class CallControl extends EventEmitter implements CallControlState {
  /** [Gitea #43] The fork's `io.lotus.controls_state` report. */
  public onControlsState(data: unknown) {
    if (typeof data !== 'object' || data === null) return;
-    const { screensharing, layout, frameScreenshare } = data as {
+    const { screensharing, layout, frameScreenshare, screensharePrompt, screensharePromptOpen } =
+      data as {
        screensharing?: unknown;
        layout?: unknown;
        frameScreenshare?: unknown;
+        screensharePrompt?: unknown;
+        screensharePromptOpen?: unknown;
      };
    const firstReport = !this.forkReady;
    this.forkReady = true;
    const frame = frameScreenshare === true;
-    if (frame !== this._frameScreenshare) {
-      this._frameScreenshare = frame;
+    const prompt = screensharePrompt === true;
+    const promptOpen = screensharePromptOpen === true;
+    if (promptOpen !== this._screensharePromptOpen) {
+      this._screensharePromptOpen = promptOpen;
+      if (frame === this._frameScreenshare && prompt === this._screensharePrompt) {
        this.frameScreenshareListeners.forEach((l) => l());
      }
+    }
+    if (frame !== this._frameScreenshare || prompt !== this._screensharePrompt) {
+      const promptTurnedOn = prompt && !this._screensharePrompt;
+      this._frameScreenshare = frame;
+      this._screensharePrompt = prompt;
+      this.frameScreenshareListeners.forEach((l) => l());
+      if (promptTurnedOn && !firstReport) this.sendFrameScreenshareAllowed();
+    }
    if (firstReport) {
      this.sendHotkeyCodes();
      this.sendFrameScreenshareAllowed();
@@ -75,19 +75,46 @@ export const useCallMicLevel = (callEmbed: CallEmbed | undefined): number => {
 };

 /**
- * [Gitea #43] True when EC's own screenshare button is shown inside the call
- * frame (no Capability Delegation in this engine), so the host bar hides its.
+ * [Gitea #43] How the call bar's screenshare button behaves:
+ * - `hidden`: EC's own button is inside the frame (fork lotus.20/21), so ours hides;
+ * - `prompt`: starting asks the fork for its in-frame "Share your screen?"
+ *   (no Capability Delegation in this engine);
+ * - `direct`: our own confirm, then a (delegated) set_screenshare.
 */
-export const useFrameScreenshare = (control: CallControl | undefined): boolean => {
-  const [frame, setFrame] = useState(() => control?.frameScreenshare ?? false);
+export type ScreenshareMode = 'hidden' | 'prompt' | 'direct';
+
+const screenshareMode = (control: CallControl): ScreenshareMode => {
+  if (control.frameScreenshare) return 'hidden';
+  return control.screenshareNeedsPrompt ? 'prompt' : 'direct';
+};
+
+export const useScreenshareMode = (control: CallControl | undefined): ScreenshareMode => {
+  const [mode, setMode] = useState<ScreenshareMode>(() =>
+    control ? screenshareMode(control) : 'direct',
+  );
  useEffect(() => {
    if (!control) {
-      setFrame(false);
+      setMode('direct');
      return undefined;
    }
-    const sync = () => setFrame(control.frameScreenshare);
+    const sync = () => setMode(screenshareMode(control));
    sync();
    return control.onFrameScreenshareChange(sync);
  }, [control]);
-  return frame;
+  return mode;
+};
+
+/** [Gitea #43] The fork's in-frame "Share your screen?" prompt is showing. */
+export const useScreensharePromptOpen = (control: CallControl | undefined): boolean => {
+  const [open, setOpen] = useState(() => control?.screensharePromptOpen ?? false);
+  useEffect(() => {
+    if (!control) {
+      setOpen(false);
+      return undefined;
+    }
+    const sync = () => setOpen(control.screensharePromptOpen);
+    sync();
+    return control.onFrameScreenshareChange(sync);
+  }, [control]);
+  return open;
 };
@@ -0,0 +1,32 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { getCallInBrowserUrl, resolveWebAppUrl } from './callInBrowser';
+
+test('resolveWebAppUrl keeps an https origin (+ path) without a trailing slash', () => {
+  assert.equal(resolveWebAppUrl('https://chat.example.org'), 'https://chat.example.org');
+  assert.equal(resolveWebAppUrl('https://chat.example.org/'), 'https://chat.example.org');
+  assert.equal(resolveWebAppUrl('https://example.org/chat/'), 'https://example.org/chat');
+  assert.equal(resolveWebAppUrl('https://chat.example.org/?x=1#y'), 'https://chat.example.org');
+});
+
+test('resolveWebAppUrl rejects anything but absolute https', () => {
+  [
+    undefined,
+    null,
+    1,
+    '',
+    ' ',
+    '/home',
+    'http://chat.example.org',
+    'not a url',
+    ['javascript', 'alert(1)'].join(':'),
+    'data:text/html,x',
+  ].forEach((v) => assert.equal(resolveWebAppUrl(v), undefined, String(v)));
+});
+
+test('getCallInBrowserUrl points at the room in the web app (no auto-join)', () => {
+  const url = getCallInBrowserUrl('https://chat.example.org', '!room:example.org');
+  assert.equal(url, 'https://chat.example.org/home/!room%3Aexample.org');
+  assert.ok(!/join|call=/i.test(url ?? ''));
+  assert.equal(getCallInBrowserUrl(undefined, '!room:example.org'), undefined);
+});
@@ -0,0 +1,27 @@
+import { getLotusRoomPermalink } from '../plugins/lotus-permalink';
+
+/**
+ * The public web app's address from config.json `webAppUrl` (the desktop app
+ * sets it; its own origin is a local server). Absolute https only; anything
+ * else is ignored.
+ */
+export const resolveWebAppUrl = (value: unknown): string | undefined => {
+  if (typeof value !== 'string' || value.trim() === '') return undefined;
+  try {
+    const url = new URL(value);
+    if (url.protocol !== 'https:') return undefined;
+    return url.origin + url.pathname.replace(/\/+$/, '');
+  } catch {
+    return undefined;
+  }
+};
+
+/**
+ * Where to send the user to take a call this app can't make: the room in the
+ * web app (they press Join there themselves — never an auto-join link, which
+ * a crafted URL could abuse to open someone's mic).
+ */
+export const getCallInBrowserUrl = (
+  webAppUrl: string | undefined,
+  roomId: string,
+): string | undefined => (webAppUrl ? getLotusRoomPermalink(webAppUrl, roomId) : undefined);
@@ -898,6 +898,14 @@ globalStyle(
    boxShadow: '0 0 10px rgba(255,107,0,0.10)',
  },
 );
+// [Gitea #246] The poll's winning answer (after it ends).
+globalStyle(
+  `body.${lotusTerminalBodyClass} [data-poll-content] [data-poll-answer][data-winner="true"]`,
+  {
+    border: '1px solid rgba(0,255,136,0.55) !important',
+    boxShadow: '0 0 10px rgba(0,255,136,0.10)',
+  },
+);
 globalStyle(`body.${lotusTerminalBodyClass} [data-poll-content] [data-poll-content-label]`, {
  color: 'rgba(0,212,255,0.60) !important',
  opacity: '1 !important',
Author	SHA1	Message	Date
jared	be8e49a2bb	Merge pull request #247 : readable poll card (#246 ) CI / Build & Quality Checks (push) Successful in 1m34s Details CI / Docker image build & smoke test (push) Skipped Details CI / Secret scan (gitleaks) (push) Successful in 8s Details CI / Trigger Desktop Build (push) Successful in 6s Details CI / Playwright smoke (e2e) (push) Successful in 7m57s Details	2026-09-27 23:28:48 -04:00
Lotus CIandClaude Opus 5.5	1e217592fc	fix(polls): readable poll card: counts, visible bars/indicators, no chip overflow (#246 ) CI / Build & Quality Checks (pull_request) Successful in 1m35s Details CI / Trigger Desktop Build (pull_request) Skipped Details CI / Docker image build & smoke test (pull_request) Skipped Details CI / Secret scan (gitleaks) (pull_request) Successful in 6s Details CI / Playwright smoke (e2e) (pull_request) Successful in 7m55s Details Rendering only; the vote logic (tally, optimistic votes, end poll, keyboard radiogroup, voters) is unchanged. - Every row shows "N votes · P%". Multiple choice looked broken as "100% / 100%" with no counts; the footer now says "voters" there. - Results are a thin progress bar under each answer: accent for your pick, success for the winner, neutral otherwise. The old full-row fill was the same grey as the row, so a 100% answer just looked disabled. - Radio and checkbox indicators are 18px with a 2px border in a colour mixed from the theme's text colour. Primary.ContainerLine was nearly invisible, especially in dark themes. - The winner shows a star and "Winner" instead of a second check mark. - Bordered card, 460px wide (max 100%, same width for every poll). The header is now "Poll · Single choice \| Pick up to N \| Results hidden until the end \| Final results", replacing the letter-spaced "◉ POLL · …" line. - Footer: plain muted text that wraps, and chips ("Who voted", "End poll") that never wrap. Previously the chip label broke onto two lines inside a one-line chip and spilled out of it. Reproduced before/after in Lotus Terminal at 150% zoom, a 360px phone, and dark at 125%. - Lotus Terminal theme: data-winner gets its own green border rule. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA	2026-09-27 23:18:25 -04:00
jared	ffe1d5a81e	Merge pull request #245 : desktop without WebRTC offers "Open in browser" CI / Build & Quality Checks (push) Successful in 1m53s Details CI / Docker image build & smoke test (push) Skipped Details CI / Secret scan (gitleaks) (push) Successful in 6s Details CI / Trigger Desktop Build (push) Successful in 3s Details CI / Playwright smoke (e2e) (push) Successful in 9m54s Details	2026-09-27 17:10:50 -04:00
Lotus CIandClaude Opus 5.5	fff583fca5	feat(call): desktop without WebRTC offers "Open in browser" instead of a dead end CI / Build & Quality Checks (pull_request) Successful in 2m12s Details CI / Trigger Desktop Build (pull_request) Skipped Details CI / Docker image build & smoke test (pull_request) Skipped Details CI / Secret scan (gitleaks) (pull_request) Successful in 17s Details CI / Playwright smoke (e2e) (pull_request) Successful in 10m22s Details The Linux desktop app runs on WebKitGTK, which ships without WebRTC (2.52 has no RTCPeerConnection; 2.54 disables it outright pending a libwebrtc backend around 2.56), so calls can't work there. Until now the call button just disappeared, the call room said "Your browser does not support WebRTC" with Join disabled, and an incoming call couldn't be answered. In the desktop app (isTauri) without WebRTC: - call rooms: "Calls aren't available in the desktop app on Linux yet: its web engine has no WebRTC" + an "Open in browser" button; - incoming-call overlay: the same, with "Answer in browser"; - room header: the call button stays, and opens the room in the browser. The link is the room in the web app (config.json `webAppUrl`, https only, new key); the user presses Join there. Deliberately not an auto-join link: a crafted URL must not be able to join a call and open someone's mic. It opens through the desktop's new-window handler (web/mail schemes only → the system browser). Without `webAppUrl` the explanation shows with no button; browsers without WebRTC keep the old message. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA	2026-09-27 16:54:29 -04:00
jared	e2b23397bd	Merge pull request #244 : screenshare stays on the call bar in Firefox/Safari (#43 ) CI / Build & Quality Checks (push) Successful in 3m54s Details CI / Docker image build & smoke test (push) Skipped Details CI / Secret scan (gitleaks) (push) Successful in 14s Details CI / Trigger Desktop Build (push) Successful in 10s Details CI / Playwright smoke (e2e) (push) Successful in 11m34s Details	2026-09-27 13:54:11 -04:00
Lotus CIandClaude Opus 5.5	b929cbf74b	chore(call): pin element-call-embedded 0.25.0-lotus.22 (#43 ) CI / Build & Quality Checks (pull_request) Successful in 4m14s Details CI / Trigger Desktop Build (pull_request) Skipped Details CI / Docker image build & smoke test (pull_request) Skipped Details CI / Secret scan (gitleaks) (pull_request) Successful in 9s Details CI / Playwright smoke (e2e) (pull_request) Successful in 16m39s Details lotus.22 draws the "Share your screen?" prompt inside the call frame on request and drops the corner button. Verified against the published package: no-delegation (Firefox path) cross- and same-origin — bar button, in-frame prompt, Cancel, Share → screenshare tracks, bar Stop; Chromium unchanged; picture-in-picture prompt fits and Share works; room policy hides the button and refuses the prompt. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA	2026-09-27 13:32:45 -04:00
Lotus CIandClaude Opus 5.5	8520de232d	feat(call): screenshare stays on the call bar in Firefox/Safari via the in-frame prompt (#43 ) CI / Build & Quality Checks (pull_request) Successful in 4m18s Details CI / Trigger Desktop Build (pull_request) Skipped Details CI / Docker image build & smoke test (pull_request) Skipped Details CI / Secret scan (gitleaks) (pull_request) Successful in 11s Details CI / Playwright smoke (e2e) (pull_request) Successful in 11m27s Details With a fork that reports `screensharePrompt` (element-call lotus-screenshare- prompt), the call bar and status bar keep their screenshare button on every engine. Where the click can't be delegated, starting asks the fork to show "Share your screen?" inside the call frame (io.lotus.prompt_screenshare) instead of our own confirm; its Share click starts the share. Stopping works from the bar as before (no click needed in the frame). Chromium is unchanged. - useScreenshareMode: hidden (older fork's corner button) \| prompt \| direct. - The room's call policy is also pushed to the fork in prompt mode, so the prompt never opens where sharing is forbidden. - Picture-in-picture: the "Return to call" overlay covers the frame; while the fork reports the prompt open it lets clicks through to it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA	2026-09-27 12:48:12 -04:00
jared	773e41311e	Merge pull request #243 : optional Element Call origin via config.json elementCallUrl (#43 ) CI / Build & Quality Checks (push) Successful in 4m38s Details CI / Docker image build & smoke test (push) Skipped Details CI / Secret scan (gitleaks) (push) Successful in 12s Details CI / Trigger Desktop Build (push) Successful in 13s Details CI / Playwright smoke (e2e) (push) Successful in 14m40s Details	2026-09-27 02:24:47 -04:00