chore(orbit): configurable shuffle interval

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

src/components/OrbitSessionBar.tsx

@@ -8,8 +8,8 @@ import {
   endOrbitSession,
   leaveOrbitSession,
   computeOrbitDriftMs,
+  effectiveShuffleIntervalMs,
 } from '../utils/orbit';
-import { ORBIT_SHUFFLE_INTERVAL_MS } from '../utils/orbit';
 import { estimateLivePosition } from '../api/orbit';
 import OrbitParticipantsPopover from './OrbitParticipantsPopover';
 import OrbitExitModal from './OrbitExitModal';
@@ -69,7 +69,7 @@ export default function OrbitSessionBar() {
     <OrbitExitModal />
   );
 
-  const untilShuffle = Math.max(0, (state.lastShuffle + ORBIT_SHUFFLE_INTERVAL_MS) - nowMs);
+  const untilShuffle = Math.max(0, (state.lastShuffle + effectiveShuffleIntervalMs(state)) - nowMs);
 
   // Guest-only: detect drift from the host's estimated live position.
   const guestPlayback = usePlayerStore.getState();

src/components/OrbitSettingsPopover.tsx

@@ -4,7 +4,7 @@ import { Shuffle } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useOrbitStore } from '../store/orbitStore';
 import { updateOrbitSettings, triggerOrbitShuffleNow } from '../utils/orbit';
-import { ORBIT_DEFAULT_SETTINGS } from '../api/orbit';
+import { ORBIT_DEFAULT_SETTINGS, ORBIT_SHUFFLE_INTERVAL_PRESETS_MIN, type OrbitShuffleIntervalMin } from '../api/orbit';
 import { showToast } from '../utils/toast';
 
 interface Props {
@@ -82,6 +82,37 @@ export default function OrbitSettingsPopover({ anchorRef, onClose }: Props) {
         </span>
       </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>
+          <div className="orbit-settings-pop__hint">{t('orbit.settingShuffleIntervalHint')}</div>
+        </div>
+        <div
+          className="orbit-settings-pop__preset-group"
+          role="radiogroup"
+          aria-label={t('orbit.settingShuffleInterval')}
+        >
+          {ORBIT_SHUFFLE_INTERVAL_PRESETS_MIN.map(min => {
+            const active = (settings.shuffleIntervalMin ?? 15) === min;
+            return (
+              <button
+                key={min}
+                type="button"
+                role="radio"
+                aria-checked={active}
+                className={`orbit-settings-pop__preset${active ? ' is-active' : ''}`}
+                disabled={!settings.autoShuffle}
+                onClick={() => {
+                  void updateOrbitSettings({ shuffleIntervalMin: min as OrbitShuffleIntervalMin });
+                }}
+              >
+                {t('orbit.settingShuffleIntervalValue', { count: min })}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
       <button
         type="button"
         className="orbit-settings-pop__action"