feat(orbit): per-guest suggestion mute + global pending-cap setting

Two anti-spam knobs the host can dial during a live session:

1. Per-guest suggestion mute — Mic / MicOff toggle next to the
   kick/ban buttons in the participants popover. Symmetric (re-enable
   later). State lives in OrbitState.suggestionBlocked: string[]; the
   guest reads it and disables its own Suggest controls so the user
   sees a clear "muted" state instead of silent failures. Host-side
   sweep also drops their outbox entries as a safety net.

2. Max pending approvals cap — number input in the session-settings
   popover, default 0 (= unlimited so existing sessions are unaffected).
   When set, the host sweep stops folding new outbox entries into the
   approval list once the cap is reached. The OrbitQueueHead surfaces
   "X / Y pending" so guests can see when they're getting close.

State changes are additive on the wire — both fields are optional, with
parseOrbitState defaulting them, so older clients keep working.

evaluateOrbitSuggestGate() centralises the guest-side allow/block check
shared between useOrbitSongRowBehavior and the ContextMenu Add-to-Session
items, plus suggestOrbitTrack as a defensive last line.

i18n: en + de + fr + nl + zh + nb + ru + es.

Also fixes an earlier dedupe-key collision: the (user, trackId) cache
keys were missing their separator (NULL byte slipped in during the
previous patch), so two tracks could share a key and one of them
silently overwrite the other. Restored the space separator.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/ContextMenu.tsx

@@ -1,7 +1,12 @@
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { Play, ListPlus, Radio, Heart, Download, ChevronRight, User, Disc3, ListMusic, Plus, Info, Sparkles, Star, Trash2, HeartCrack, Share2, Orbit as OrbitIcon } from 'lucide-react';
 import { useOrbitStore } from '../store/orbitStore';
-import { suggestOrbitTrack, hostEnqueueToOrbit } from '../utils/orbit';
+import {
+  suggestOrbitTrack,
+  hostEnqueueToOrbit,
+  evaluateOrbitSuggestGate,
+  OrbitSuggestBlockedError,
+} from '../utils/orbit';
 import LastfmIcon from './LastfmIcon';
 import StarRating from './StarRating';
 import { lastfmLoveTrack, lastfmUnloveTrack } from '../api/lastfm';
@@ -1446,15 +1451,38 @@ export default function ContextMenu() {
               <div className="context-menu-item" onClick={() => handleAction(() => enqueue([song]))}>
                 <ListPlus size={14} /> {t('contextMenu.addToQueue')}
               </div>
-              {orbitRole === 'guest' && (
-                <div className="context-menu-item" onClick={() => handleAction(() => {
-                  suggestOrbitTrack(song.id)
-                    .then(() => showToast(t('orbit.ctxSuggestedToast'), 2200, 'info'))
-                    .catch(() => showToast(t('orbit.ctxSuggestFailed'), 3000, 'error'));
-                })}>
-                  <OrbitIcon size={14} /> {t('orbit.ctxAddToSession')}
-                </div>
-              )}
+              {orbitRole === 'guest' && (() => {
+                const gate = evaluateOrbitSuggestGate();
+                const muted = gate.reason === 'muted';
+                const capReached = gate.reason === 'cap-reached';
+                const disabled = muted || capReached;
+                const tooltip = muted
+                  ? t('orbit.suggestBlockedMuted')
+                  : capReached ? t('orbit.suggestBlockedCap') : '';
+                return (
+                  <div
+                    className={`context-menu-item${disabled ? ' is-disabled' : ''}`}
+                    {...(disabled ? { 'data-tooltip': tooltip } : {})}
+                    onClick={() => handleAction(() => {
+                      if (muted)      { showToast(t('orbit.suggestBlockedMuted'), 3500, 'error'); return; }
+                      if (capReached) { showToast(t('orbit.suggestBlockedCap'),   3500, 'info');  return; }
+                      suggestOrbitTrack(song.id)
+                        .then(() => showToast(t('orbit.ctxSuggestedToast'), 2200, 'info'))
+                        .catch(err => {
+                          if (err instanceof OrbitSuggestBlockedError && err.reason === 'muted') {
+                            showToast(t('orbit.suggestBlockedMuted'), 3500, 'error');
+                          } else if (err instanceof OrbitSuggestBlockedError && err.reason === 'cap-reached') {
+                            showToast(t('orbit.suggestBlockedCap'), 3500, 'info');
+                          } else {
+                            showToast(t('orbit.ctxSuggestFailed'), 3000, 'error');
+                          }
+                        });
+                    })}
+                  >
+                    <OrbitIcon size={14} /> {t('orbit.ctxAddToSession')}
+                  </div>
+                );
+              })()}
               {orbitRole === 'host' && (
                 <div className="context-menu-item" onClick={() => handleAction(() => {
                   hostEnqueueToOrbit(song.id)
@@ -1596,15 +1624,38 @@ export default function ContextMenu() {
               <div className="context-menu-item" onClick={() => handleAction(() => enqueue([song]))}>
                 <ListPlus size={14} /> {t('contextMenu.addToQueue')}
               </div>
-              {orbitRole === 'guest' && (
-                <div className="context-menu-item" onClick={() => handleAction(() => {
-                  suggestOrbitTrack(song.id)
-                    .then(() => showToast(t('orbit.ctxSuggestedToast'), 2200, 'info'))
-                    .catch(() => showToast(t('orbit.ctxSuggestFailed'), 3000, 'error'));
-                })}>
-                  <OrbitIcon size={14} /> {t('orbit.ctxAddToSession')}
-                </div>
-              )}
+              {orbitRole === 'guest' && (() => {
+                const gate = evaluateOrbitSuggestGate();
+                const muted = gate.reason === 'muted';
+                const capReached = gate.reason === 'cap-reached';
+                const disabled = muted || capReached;
+                const tooltip = muted
+                  ? t('orbit.suggestBlockedMuted')
+                  : capReached ? t('orbit.suggestBlockedCap') : '';
+                return (
+                  <div
+                    className={`context-menu-item${disabled ? ' is-disabled' : ''}`}
+                    {...(disabled ? { 'data-tooltip': tooltip } : {})}
+                    onClick={() => handleAction(() => {
+                      if (muted)      { showToast(t('orbit.suggestBlockedMuted'), 3500, 'error'); return; }
+                      if (capReached) { showToast(t('orbit.suggestBlockedCap'),   3500, 'info');  return; }
+                      suggestOrbitTrack(song.id)
+                        .then(() => showToast(t('orbit.ctxSuggestedToast'), 2200, 'info'))
+                        .catch(err => {
+                          if (err instanceof OrbitSuggestBlockedError && err.reason === 'muted') {
+                            showToast(t('orbit.suggestBlockedMuted'), 3500, 'error');
+                          } else if (err instanceof OrbitSuggestBlockedError && err.reason === 'cap-reached') {
+                            showToast(t('orbit.suggestBlockedCap'), 3500, 'info');
+                          } else {
+                            showToast(t('orbit.ctxSuggestFailed'), 3000, 'error');
+                          }
+                        });
+                    })}
+                  >
+                    <OrbitIcon size={14} /> {t('orbit.ctxAddToSession')}
+                  </div>
+                );
+              })()}
               {orbitRole === 'host' && (
                 <div className="context-menu-item" onClick={() => handleAction(() => {
                   hostEnqueueToOrbit(song.id)

src/components/OrbitParticipantsPopover.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { Crown, User, UserMinus, ShieldOff } from 'lucide-react';
+import { Crown, User, UserMinus, ShieldOff, Mic, MicOff } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useOrbitStore } from '../store/orbitStore';
-import { kickOrbitParticipant, removeOrbitParticipant } from '../utils/orbit';
+import { kickOrbitParticipant, removeOrbitParticipant, setOrbitSuggestionBlocked } from '../utils/orbit';
 import ConfirmModal from './ConfirmModal';
 
 interface Props {
@@ -90,35 +90,50 @@ export default function OrbitParticipantsPopover({ anchorRef, onClose }: Props)
         <div className="orbit-participants-pop__empty">{t('orbit.participantsEmpty')}</div>
       )}
 
-      {state.participants.map(p => (
-        <div key={p.user} className="orbit-participants-pop__row">
-          <User size={13} />
-          <span className="orbit-participants-pop__name">{p.user}</span>
-          <span className="orbit-participants-pop__meta">{joinedFor(p.joinedAt, nowMs)}</span>
-          {role === 'host' && (
-            <div className="orbit-participants-pop__actions">
-              <button
-                type="button"
-                className="orbit-participants-pop__kick"
-                onClick={() => setConfirm({ user: p.user, mode: 'remove' })}
-                data-tooltip={t('orbit.participantsRemoveTooltip')}
-                aria-label={t('orbit.participantsRemoveAria', { user: p.user })}
-              >
-                <UserMinus size={12} />
-              </button>
-              <button
-                type="button"
-                className="orbit-participants-pop__kick orbit-participants-pop__kick--ban"
-                onClick={() => setConfirm({ user: p.user, mode: 'ban' })}
-                data-tooltip={t('orbit.participantsBanTooltip')}
-                aria-label={t('orbit.participantsBanAria', { user: p.user })}
-              >
-                <ShieldOff size={12} />
-              </button>
-            </div>
-          )}
-        </div>
-      ))}
+      {state.participants.map(p => {
+        const isMuted = state.suggestionBlocked?.includes(p.user) ?? false;
+        return (
+          <div key={p.user} className="orbit-participants-pop__row">
+            <User size={13} />
+            <span className="orbit-participants-pop__name">{p.user}</span>
+            <span className="orbit-participants-pop__meta">{joinedFor(p.joinedAt, nowMs)}</span>
+            {role === 'host' && (
+              <div className="orbit-participants-pop__actions">
+                <button
+                  type="button"
+                  className={`orbit-participants-pop__kick${isMuted ? ' is-active' : ''}`}
+                  onClick={() => { void setOrbitSuggestionBlocked(p.user, !isMuted); }}
+                  data-tooltip={isMuted ? t('orbit.participantsUnmuteTooltip') : t('orbit.participantsMuteTooltip')}
+                  aria-label={isMuted
+                    ? t('orbit.participantsUnmuteAria', { user: p.user })
+                    : t('orbit.participantsMuteAria',   { user: p.user })}
+                  aria-pressed={isMuted}
+                >
+                  {isMuted ? <MicOff size={12} /> : <Mic size={12} />}
+                </button>
+                <button
+                  type="button"
+                  className="orbit-participants-pop__kick"
+                  onClick={() => setConfirm({ user: p.user, mode: 'remove' })}
+                  data-tooltip={t('orbit.participantsRemoveTooltip')}
+                  aria-label={t('orbit.participantsRemoveAria', { user: p.user })}
+                >
+                  <UserMinus size={12} />
+                </button>
+                <button
+                  type="button"
+                  className="orbit-participants-pop__kick orbit-participants-pop__kick--ban"
+                  onClick={() => setConfirm({ user: p.user, mode: 'ban' })}
+                  data-tooltip={t('orbit.participantsBanTooltip')}
+                  aria-label={t('orbit.participantsBanAria', { user: p.user })}
+                >
+                  <ShieldOff size={12} />
+                </button>
+              </div>
+            )}
+          </div>
+        );
+      })}
     </div>
     <ConfirmModal
       open={!!confirm}

src/components/OrbitQueueHead.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Users, Wifi, WifiOff } from 'lucide-react';
+import { Users, Wifi, WifiOff, Inbox } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useOrbitStore } from '../store/orbitStore';
 import type { OrbitState } from '../api/orbit';
@@ -36,6 +36,15 @@ export default function OrbitQueueHead({ state }: Props) {
   const names = [state.host, ...state.participants.map(p => p.user)];
   const showPresence = role === 'guest' && state.positionAt > 0;
   const hostAway = showPresence && (nowMs - state.positionAt) > HOST_AWAY_THRESHOLD_MS;
+  const cap = state.settings?.maxPending ?? 0;
+  // Approximate visible-pending count — same heuristic as evaluateOrbitSuggestGate.
+  // Conservative for guests (over-counts declined entries) but the host's
+  // own queue view sees the exact number because it has the merged/declined
+  // sets locally; we don't bother surfacing the exact count here either way
+  // since guests just need to know if they're near the cap.
+  const pendingCount = cap > 0
+    ? state.queue.filter(q => q.addedBy !== state.host).length
+    : 0;
 
   return (
     <div className="orbit-queue-head">
@@ -54,6 +63,15 @@ export default function OrbitQueueHead({ state }: Props) {
       <div className="orbit-queue-head__meta">
         <Users size={11} />
         <span className="orbit-queue-head__names">{names.join(', ')}</span>
+        {cap > 0 && (
+          <span
+            className={`orbit-queue-head__pending${pendingCount >= cap ? ' is-full' : ''}`}
+            data-tooltip={t('orbit.pendingCounterTooltip')}
+          >
+            <Inbox size={11} />
+            <span>{t('orbit.pendingCounter', { count: pendingCount, max: cap })}</span>
+          </span>
+        )}
       </div>
     </div>
   );

src/components/OrbitSettingsPopover.tsx

@@ -82,6 +82,27 @@ export default function OrbitSettingsPopover({ anchorRef, onClose }: Props) {
         </span>
       </label>
 
+      <label className="orbit-settings-pop__row">
+        <div className="orbit-settings-pop__text">
+          <div className="orbit-settings-pop__label">{t('orbit.settingMaxPending')}</div>
+          <div className="orbit-settings-pop__hint">{t('orbit.settingMaxPendingHint')}</div>
+        </div>
+        <input
+          type="number"
+          min={0}
+          max={999}
+          step={1}
+          value={settings.maxPending ?? 0}
+          onChange={e => {
+            const raw = parseInt(e.target.value, 10);
+            const next = Number.isFinite(raw) && raw >= 0 ? Math.min(raw, 999) : 0;
+            void updateOrbitSettings({ maxPending: next });
+          }}
+          className="orbit-settings-pop__number"
+          aria-label={t('orbit.settingMaxPending')}
+        />
+      </label>
+
       <div className="orbit-settings-pop__row orbit-settings-pop__row--stacked">
         <div className="orbit-settings-pop__text">
           <div className="orbit-settings-pop__label">{t('orbit.settingShuffleInterval')}</div>