feat: voice channel user limit (P5-10) + call join/leave sounds (P5-16)

P5-10 Voice Channel User Limit:
- New StateEvent.LotusVoiceLimit (io.lotus.voice_limit) with { max_users }
- RoomVoiceLimit admin control in Room Settings > General > Voice
  (power-level gated via permissions.stateEvent)
- CallPrescreen reads the limit reactively and disables Join with a
  'Channel Full (N/N)' message at capacity; existing members can rejoin

P5-16 Custom Join/Leave Sound Effects:
- useCallJoinLeaveSounds hook wired into CallUtils; detects participant
  join/leave via MatrixRTCSession membership changes (sender|deviceId),
  filters out self, only fires while joined
- Sounds synthesized in-browser with Web Audio (callSounds.ts) - no
  assets bundled; styles Off/Chime/Soft/Retro
- 'Join & Leave Sounds' selector in Settings > Calls (previews on change)

Docs: LOTUS_FEATURES.md, README.md, LOTUS_TODO.md (P5-10/P5-16 marked done)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/app/features/call/CallView.tsx

@@ -10,6 +10,8 @@ import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { StateEvent } from '../../../types/matrix/room';
 import { useCallMembers, useCallSession } from '../../hooks/useCall';
+import { useStateEvent } from '../../hooks/useStateEvent';
+import { VoiceLimitContent } from '../common-settings/general/RoomVoiceLimit';
 import { CallMemberRenderer } from './CallMemberCard';
 import * as css from './styles.css';
 import { CallControls } from './CallControls';
@@ -74,6 +76,14 @@ function AlreadyInCallMessage() {
   );
 }
 
+function ChannelFullMessage({ current, max }: { current: number; max: number }) {
+  return (
+    <Text style={{ margin: 'auto', color: color.Critical.Main }} size="L400" align="Center">
+      Channel Full ({current}/{max}) — Wait for someone to leave before joining.
+    </Text>
+  );
+}
+
 function CallPrescreen() {
   const mx = useMatrixClient();
   const room = useRoom();
@@ -96,7 +106,14 @@ function CallPrescreen() {
   const callEmbed = useCallEmbed();
   const inOtherCall = callEmbed && callEmbed.roomId !== room.roomId;
 
-  const canJoin = hasPermission && livekitSupported && rtcSupported;
+  // Voice channel user limit (io.lotus.voice_limit). 0 / absent means no limit.
+  const limitEvent = useStateEvent(room, StateEvent.LotusVoiceLimit);
+  const maxUsers = limitEvent?.getContent<VoiceLimitContent>().max_users ?? 0;
+  // A user already counted in the session is rejoining and should not be blocked.
+  const alreadyMember = callMembers.some((m) => m.sender === mx.getSafeUserId());
+  const channelFull = maxUsers > 0 && !alreadyMember && callMembers.length >= maxUsers;
+
+  const canJoin = hasPermission && livekitSupported && rtcSupported && !channelFull;
 
   return (
     <Scroll variant="Surface" hideTrack>
@@ -117,16 +134,17 @@ function CallPrescreen() {
           <CallMemberRenderer members={callMembers} />
           <PrescreenControls canJoin={canJoin} />
           <Box className={css.PrescreenMessage} alignItems="Center">
-            {!inOtherCall &&
-              (hasPermission ? (
-                <JoinMessage
-                  hasParticipant={hasParticipant}
-                  livekitSupported={livekitSupported}
-                  rtcSupported={rtcSupported}
-                />
-              ) : (
-                <NoPermissionMessage />
-              ))}
+            {!inOtherCall && !hasPermission && <NoPermissionMessage />}
+            {!inOtherCall && hasPermission && channelFull && (
+              <ChannelFullMessage current={callMembers.length} max={maxUsers} />
+            )}
+            {!inOtherCall && hasPermission && !channelFull && (
+              <JoinMessage
+                hasParticipant={hasParticipant}
+                livekitSupported={livekitSupported}
+                rtcSupported={rtcSupported}
+              />
+            )}
             {inOtherCall && <AlreadyInCallMessage />}
           </Box>
         </Box>

src/app/features/common-settings/general/RoomVoiceLimit.tsx

@@ -0,0 +1,98 @@
+import React, { FormEventHandler, useCallback } from 'react';
+import { Box, Button, color, Input, Spinner, Text } from 'folds';
+import { MatrixError } from 'matrix-js-sdk';
+import { SequenceCard } from '../../../components/sequence-card';
+import { SequenceCardStyle } from '../../room-settings/styles.css';
+import { SettingTile } from '../../../components/setting-tile';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { useRoom } from '../../../hooks/useRoom';
+import { StateEvent } from '../../../../types/matrix/room';
+import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
+import { useStateEvent } from '../../../hooks/useStateEvent';
+import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
+
+export type VoiceLimitContent = {
+  max_users?: number;
+};
+
+type RoomVoiceLimitProps = {
+  permissions: RoomPermissionsAPI;
+};
+export function RoomVoiceLimit({ permissions }: RoomVoiceLimitProps) {
+  const mx = useMatrixClient();
+  const room = useRoom();
+
+  const canEdit = permissions.stateEvent(StateEvent.LotusVoiceLimit, mx.getSafeUserId());
+
+  const limitEvent = useStateEvent(room, StateEvent.LotusVoiceLimit);
+  const maxUsers = limitEvent?.getContent<VoiceLimitContent>().max_users ?? 0;
+
+  const [submitState, submit] = useAsyncCallback(
+    useCallback(
+      async (value: number) => {
+        const content: VoiceLimitContent = value > 0 ? { max_users: value } : {};
+        await mx.sendStateEvent(room.roomId, StateEvent.LotusVoiceLimit as any, content);
+      },
+      [mx, room.roomId],
+    ),
+  );
+  const submitting = submitState.status === AsyncStatus.Loading;
+
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
+    evt.preventDefault();
+    const target = evt.target as HTMLFormElement;
+    const limitInput = target.elements.namedItem('limitInput') as HTMLInputElement | null;
+    if (!limitInput) return;
+    const parsed = parseInt(limitInput.value, 10);
+    const value = Number.isNaN(parsed) || parsed < 0 ? 0 : parsed;
+    submit(value);
+  };
+
+  return (
+    <SequenceCard
+      className={SequenceCardStyle}
+      variant="SurfaceVariant"
+      direction="Column"
+      gap="400"
+    >
+      <SettingTile
+        title="Voice Channel Limit"
+        description="Set the maximum number of participants allowed in this room's voice call. Set to 0 for no limit. Enforced locally by Lotus Chat clients."
+      >
+        <Box as="form" onSubmit={handleSubmit} gap="200" alignItems="Center">
+          <Box style={{ maxWidth: '100px' }} grow="Yes">
+            <Input
+              key={maxUsers}
+              name="limitInput"
+              defaultValue={maxUsers}
+              type="number"
+              min={0}
+              max={99}
+              size="300"
+              variant="Secondary"
+              radii="300"
+              readOnly={!canEdit}
+              disabled={!canEdit}
+            />
+          </Box>
+          <Button
+            type="submit"
+            size="300"
+            variant="Primary"
+            fill="Solid"
+            radii="300"
+            disabled={!canEdit || submitting}
+            before={submitting ? <Spinner size="100" variant="Primary" fill="Solid" /> : undefined}
+          >
+            <Text size="B300">Save</Text>
+          </Button>
+        </Box>
+        {submitState.status === AsyncStatus.Error && (
+          <Text style={{ color: color.Critical.Main }} size="T200">
+            {(submitState.error as MatrixError).message}
+          </Text>
+        )}
+      </SettingTile>
+    </SequenceCard>
+  );
+}

src/app/features/common-settings/general/index.ts

@@ -6,3 +6,4 @@ export * from './RoomProfile';
 export * from './RoomPublish';
 export * from './RoomShareInvite';
 export * from './RoomUpgrade';
+export * from './RoomVoiceLimit';

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

@@ -13,6 +13,7 @@ import {
   RoomPublish,
   RoomShareInvite,
   RoomUpgrade,
+  RoomVoiceLimit,
 } from '../../common-settings/general';
 import { useRoomCreators } from '../../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
@@ -54,6 +55,10 @@ export function General({ requestClose }: GeneralProps) {
                 <RoomEncryption permissions={permissions} />
                 <RoomPublish permissions={permissions} />
               </Box>
+              <Box direction="Column" gap="100">
+                <Text size="L400">Voice</Text>
+                <RoomVoiceLimit permissions={permissions} />
+              </Box>
               <Box direction="Column" gap="100">
                 <Text size="L400">Addresses</Text>
                 <RoomPublishedAddresses permissions={permissions} />

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

@@ -65,6 +65,7 @@ import { useMessageSpacingItems } from '../../../hooks/useMessageSpacing';
 import { useDateFormatItems } from '../../../hooks/useDateFormat';
 import { SequenceCardStyle } from '../styles.css';
 import { useTauriUpdater } from '../../../hooks/useTauriUpdater';
+import { playCallJoinSound } from '../../../utils/callSounds';
 
 type ThemeSelectorProps = {
   themeNames: Record<string, string>;
@@ -1113,6 +1114,15 @@ function Calls() {
   const [deafenKey, setDeafenKey] = useSetting(settingsAtom, 'deafenKey');
   const [afkAutoMute, setAfkAutoMute] = useSetting(settingsAtom, 'afkAutoMute');
   const [afkTimeoutMinutes, setAfkTimeoutMinutes] = useSetting(settingsAtom, 'afkTimeoutMinutes');
+  const [callJoinLeaveSound, setCallJoinLeaveSound] = useSetting(
+    settingsAtom,
+    'callJoinLeaveSound',
+  );
+
+  const handleJoinLeaveSoundChange = (value: 'off' | 'chime' | 'soft' | 'retro') => {
+    setCallJoinLeaveSound(value);
+    if (value !== 'off') playCallJoinSound(value);
+  };
 
   const pttBind = useKeyBind(setPttKey);
   const deafenBind = useKeyBind(setDeafenKey);
@@ -1227,6 +1237,34 @@ function Calls() {
           />
         )}
       </SequenceCard>
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+        <SettingTile
+          title="Join & Leave Sounds"
+          description="Play a sound when someone joins or leaves a call you are in."
+          after={
+            <select
+              value={callJoinLeaveSound}
+              onChange={(e) =>
+                handleJoinLeaveSoundChange(e.target.value as 'off' | 'chime' | 'soft' | 'retro')
+              }
+              style={{
+                background: 'var(--bg-surface)',
+                color: 'inherit',
+                border: '1px solid var(--border-interactive-normal)',
+                borderRadius: '6px',
+                padding: '4px 8px',
+                fontSize: 'inherit',
+                cursor: 'pointer',
+              }}
+            >
+              <option value="off">Off</option>
+              <option value="chime">Chime</option>
+              <option value="soft">Soft</option>
+              <option value="retro">Retro</option>
+            </select>
+          }
+        />
+      </SequenceCard>
     </Box>
   );
 }