feat(call): in-call soundboard, quality controls, room call-permissions

Element Call is now consumed as our self-built fork
(@lotusguild/element-call-embedded); wire up its previously-dormant
capabilities and document the fork as live.

Soundboard (P5-15): a call-bar button plays user-uploaded audio clips into the
call as a real published track (io.lotus.inject_audio) plus local playback.
Clips are uploadable like emoji/sticker packs, stored in io.lotus.soundboard
account data (synced across devices). Gated by a Settings toggle + volume.

Quality controls (P5-31): per-user mic/screenshare bitrate + screenshare
framerate (Settings -> Calls), applied via io.lotus.set_quality clamped to any
room cap. Room admins set caps and hard call-permissions (allow_screenshare /
allow_camera) in Room Settings -> Voice; the call bar hides blocked buttons.

- New: CallSoundboard, useSoundboard, soundboardClips; RoomQuality,
  useCallQuality, callQuality (+ unit tests).
- Optimistic-write RoomQuality admin UI (no stale-state clobber).
- Docs: mark EC fork live across README/FEATURES/TODO/BUGS/TESTING; add D2
  manual-test steps.

Numeric quality caps are client-cooperative; screenshare/camera permissions are
hard-enforced server-side (see LotusGuild/matrix voice-limit-guard).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/features/settings/general/General.tsx

@@ -45,6 +45,7 @@ import {
 } from '../../../utils/lotusDenoiseUtils';
 import { useSetting } from '../../../state/hooks/settings';
 import {
+  CallAudioBitrate,
   ChatBackground,
   ComposerToolbarSettings,
   DateFormat,
@@ -53,9 +54,16 @@ import {
   MessageSpacing,
   NoiseSuppressionMode,
   RingtoneId,
+  ScreenshareBitrate,
+  ScreenshareFramerate,
   Settings,
   settingsAtom,
 } from '../../../state/settings';
+import {
+  AUDIO_BITRATE_OPTIONS,
+  SCREENSHARE_BITRATE_OPTIONS,
+  SCREENSHARE_FRAMERATE_OPTIONS,
+} from '../../../utils/callQuality';
 import { SeasonalPreview, SeasonTheme } from '../../../components/seasonal/SeasonalEffect';
 import { SEASON_DATE_RANGES } from '../../../components/seasonal/seasonSchedule';
 import { SettingTile } from '../../../components/setting-tile';
@@ -1221,6 +1229,18 @@ function Calls() {
   const [ringtoneVolume, setRingtoneVolume] = useSetting(settingsAtom, 'ringtoneVolume');
   const [ringtoneId, setRingtoneId] = useSetting(settingsAtom, 'ringtoneId');
 
+  const [callAudioBitrate, setCallAudioBitrate] = useSetting(settingsAtom, 'callAudioBitrate');
+  const [screenshareBitrate, setScreenshareBitrate] = useSetting(
+    settingsAtom,
+    'screenshareBitrate',
+  );
+  const [screenshareFramerate, setScreenshareFramerate] = useSetting(
+    settingsAtom,
+    'screenshareFramerate',
+  );
+  const [soundboardEnabled, setSoundboardEnabled] = useSetting(settingsAtom, 'soundboardEnabled');
+  const [soundboardVolume, setSoundboardVolume] = useSetting(settingsAtom, 'soundboardVolume');
+
   const handleJoinLeaveSoundChange = (value: 'off' | 'chime' | 'soft' | 'retro') => {
     setCallJoinLeaveSound(value);
     if (value !== 'off') playCallJoinSound(value);
@@ -1616,6 +1636,80 @@ function Calls() {
           }
         />
       </SequenceCard>
+
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+        <SettingTile
+          title="Microphone Bitrate"
+          description="Cap the audio bitrate your mic sends in calls. Lower saves bandwidth; higher is clearer. Auto lets Element Call decide."
+          after={
+            <SettingsSelect<CallAudioBitrate>
+              value={callAudioBitrate}
+              onChange={setCallAudioBitrate}
+              options={AUDIO_BITRATE_OPTIONS}
+            />
+          }
+        />
+      </SequenceCard>
+
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+        <SettingTile
+          title="Screenshare Bitrate"
+          description="Cap the bitrate used when you share your screen. Lower is smoother on poor connections; higher is sharper."
+          after={
+            <SettingsSelect<ScreenshareBitrate>
+              value={screenshareBitrate}
+              onChange={setScreenshareBitrate}
+              options={SCREENSHARE_BITRATE_OPTIONS}
+            />
+          }
+        />
+      </SequenceCard>
+
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+        <SettingTile
+          title="Screenshare Framerate"
+          description="Cap the frames-per-second of your screenshare. 60 fps suits motion/gaming; 15 fps suits slides and saves bandwidth."
+          after={
+            <SettingsSelect<ScreenshareFramerate>
+              value={screenshareFramerate}
+              onChange={setScreenshareFramerate}
+              options={SCREENSHARE_FRAMERATE_OPTIONS}
+            />
+          }
+        />
+      </SequenceCard>
+
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+        <SettingTile
+          title="Soundboard"
+          description="Show a soundboard button in the call bar. Upload short audio clips (like custom emojis) to play them into the call. Clips sync across your devices."
+          after={
+            <Switch variant="Primary" value={soundboardEnabled} onChange={setSoundboardEnabled} />
+          }
+        />
+        {soundboardEnabled && (
+          <SettingTile
+            title="Soundboard Volume"
+            after={
+              <Box alignItems="Center" gap="200" style={{ minWidth: toRem(180) }}>
+                <input
+                  type="range"
+                  min={0}
+                  max={100}
+                  step={5}
+                  value={soundboardVolume}
+                  onChange={(e) => setSoundboardVolume(parseInt(e.target.value, 10))}
+                  style={{ flexGrow: 1 }}
+                  aria-label="Soundboard volume"
+                />
+                <Text size="T200" style={{ minWidth: toRem(36), textAlign: 'right' }}>
+                  {soundboardVolume}%
+                </Text>
+              </Box>
+            }
+          />
+        )}
+      </SequenceCard>
     </Box>
   );
 }