// Mobile companion — gig-ready quick reference
function MobileApp({ records, set, crates, savedSets, currentSetName, setCurrentSetName,
onSaveSet, onToggleTrack, onRemoveFromSet, onClearSet, onLoadSavedSet,
profile, setProfile, user, onSignOut,
darkMode, accent }) {
const [tab, setTab] = React.useState('now');
const [nowIdx, setNowIdx] = React.useState(0);
const [openCrateId, setOpenCrateId] = React.useState(null);
const [libSearch, setLibSearch] = React.useState('');
const [profileOpen, setProfileOpen] = React.useState(false);
// Now tab set selection: null = builder, else saved set id
const [selectedSetId, setSelectedSetId] = React.useState(null);
// Set tab sub-page: 'hub' (list), 'builder', or a saved set id (detail)
const [setPage, setSetPage] = React.useState('hub');
const activeSet = selectedSetId
? (savedSets || []).find(s => s.id === selectedSetId)
: null;
const activeTrackIds = activeSet ? activeSet.trackIds : (set || []);
const activeSetLabel = activeSet
? activeSet.name
: (currentSetName || 'Current builder');
const resolved = activeTrackIds.map(tid => {
const p = window.parseTrackId ? window.parseTrackId(tid) : null;
return p ? { tid, ...p } : null;
}).filter(Boolean);
const fallback = records.slice(0, 4).map((r) => ({
tid: `${r.id}-0`, record: r, track: r.tracks[0], idx: 0,
}));
const queue = resolved.length > 0 ? resolved : fallback;
React.useEffect(() => { setNowIdx(0); }, [selectedSetId]);
const current = queue[nowIdx % queue.length];
const nextUp = queue[(nowIdx + 1) % queue.length];
const bg = darkMode ? '#0E0C0A' : '#F4EFE6';
const fg = darkMode ? '#F4EFE6' : '#0E0C0A';
const soft = darkMode ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.05)';
const border = darkMode ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)';
return (
Kollector Studio
{profile && (
setProfileOpen(true)} />
)}
{profileOpen && profile && (
Profile
{onSignOut && (
{user?.email}
)}
)}
{tab === 'now' && (
setNowIdx(i)}
onNext={() => setNowIdx(i => (i + 1) % queue.length)}
onPrev={() => setNowIdx(i => (i - 1 + queue.length) % queue.length)}
savedSets={savedSets || []} selectedSetId={selectedSetId}
setSelectedSetId={setSelectedSetId} activeSetLabel={activeSetLabel}
accent={accent} fg={fg} bg={bg} soft={soft} border={border} />
)}
{tab === 'set' && setPage === 'hub' && (
setSetPage('builder')}
onOpenSet={(id) => setSetPage(id)}
accent={accent} fg={fg} soft={soft} border={border} />
)}
{tab === 'set' && setPage === 'builder' && (
{
const p = window.parseTrackId ? window.parseTrackId(tid) : null;
return p ? { tid, ...p } : null;
}).filter(Boolean)}
currentSetName={currentSetName} setCurrentSetName={setCurrentSetName}
onBack={() => setSetPage('hub')}
onSaveSet={onSaveSet} onRemoveFromSet={onRemoveFromSet} onClearSet={onClearSet}
onGoBrowse={() => setTab('lib')}
accent={accent} fg={fg} soft={soft} border={border} />
)}
{tab === 'set' && setPage !== 'hub' && setPage !== 'builder' && (
s.id === setPage)}
records={records}
onBack={() => setSetPage('hub')}
onLoadSavedSet={(id) => { onLoadSavedSet(id); setSetPage('builder'); }}
accent={accent} fg={fg} soft={soft} border={border} />
)}
{tab === 'crates' && (
)}
{tab === 'lib' && (
)}
{/* Tab bar */}
{[
{ id: 'lib', label: 'Library', icon: Icon.Dig },
{ id: 'crates', label: 'Crates', icon: Icon.Heart },
{ id: 'set', label: 'Sets', icon: Icon.Deck },
{ id: 'now', label: 'Gig', icon: Icon.Disc },
].map(t => (
))}
);
}
// ─────────── Shared: saved-set picker ───────────
function SetPicker({ savedSets, selectedSetId, setSelectedSetId, activeSetLabel,
fg, soft, border, accent }) {
const [open, setOpen] = React.useState(false);
return (
{open && (
{ setSelectedSetId(null); setOpen(false); }} />
{savedSets.length === 0 ? (
No saved sets yet.
) : savedSets.map(s => (
{ setSelectedSetId(s.id); setOpen(false); }} />
))}
)}
);
}
function PickerRow({ label, sublabel, selected, accent, onClick }) {
return (
);
}
// Camelot harmonic distance: 0 = same key, 1 = adjacent on wheel or relative major/minor,
// 2+ = further / clashing. Null keys get a neutral penalty.
function camelotDistance(a, b) {
if (!a || !b) return 3;
const parse = (k) => {
const m = String(k).trim().match(/^(\d{1,2})([AB])$/i);
if (!m) return null;
return { n: parseInt(m[1], 10), ab: m[2].toUpperCase() };
};
const pa = parse(a), pb = parse(b);
if (!pa || !pb) return 3;
if (pa.n === pb.n && pa.ab === pb.ab) return 0;
// Relative major/minor: same number, different letter
if (pa.n === pb.n) return 1;
// Circle distance (1..12 wrap)
let d = Math.abs(pa.n - pb.n);
if (d > 6) d = 12 - d;
// Same letter family gets lower penalty than cross-family jumps
return pa.ab === pb.ab ? d : d + 1;
}
// ─────────── Now (gig mode) ───────────
function MobileNow({ current, nextUp, queueLen, position, queue, onJumpTo, onNext, onPrev,
savedSets, selectedSetId, setSelectedSetId, activeSetLabel,
accent, fg, bg, soft, border }) {
if (!current) return null;
const r = current.record, t = current.track;
// ── Mix suggestions: pick the best next tracks FROM THIS SET only ──
// Primary weight: BPM closeness (user preference). Tiebreaker: Camelot key.
const suggestions = React.useMemo(() => {
if (!queue || queue.length < 2 || t.bpm == null) return [];
const currentBpm = t.bpm;
const currentKey = t.key;
const pool = queue
.map((q, i) => ({ ...q, qIdx: i }))
.filter((q, i) => i !== position && q.track.bpm != null);
const scored = pool.map(q => {
const bpmDiff = Math.abs(q.track.bpm - currentBpm);
const keyPenalty = camelotDistance(currentKey, q.track.key);
// BPM-first: score = bpmDiff * 2 + keyPenalty (key still matters but doesn't dominate)
return { ...q, bpmDiff, keyPenalty, score: bpmDiff * 2 + keyPenalty };
});
scored.sort((a, b) => a.score - b.score);
return scored.slice(0, 3);
}, [queue, position, t.bpm, t.key]);
return (
Gig · now playing
{String(position + 1).padStart(2, '0')} / {String(queueLen).padStart(2, '0')}
{/* Current track — medium cover, huge BPM/Key */}
{/* Up next — prominent */}
{nextUp && nextUp !== current && (
<>
Up next
{nextUp.track.title}
{nextUp.record.artist}
{nextUp.track.bpm ?? '—'}
{nextUp.track.key ?? '—'}
)}
{suggestions.length > 0 && (
<>
Mix suggestions · from this set
{suggestions.map(s => {
const harm = s.keyPenalty === 0 ? 'same key'
: s.keyPenalty === 1 ? 'harmonic'
: s.keyPenalty <= 2 ? 'close' : 'clash';
const tag = s.bpmDiff === 0 ? 'exact BPM'
: s.bpmDiff <= 3 ? `±${s.bpmDiff} BPM`
: `±${s.bpmDiff} BPM`;
const good = s.bpmDiff <= 4 && s.keyPenalty <= 1;
return (
);
})}
)}
);
}
function BigStat({ label, value, accent, small }) {
return (
);
}
// ─────────── Set screens: hub → builder/detail ───────────
function SetTrackRow({ item, i, accent, soft, fg, border, onRemove }) {
const r = item.record, t = item.track;
return (
{String(i + 1).padStart(2, '0')}
{t.bpm ?? '—'}
{t.key ?? '—'}
{onRemove && (
)}
);
}
function BackHeader({ onBack, title, fg, border }) {
return (
);
}
function MobileSetsHub({ savedSets, records, builderCount, currentSetName,
onOpenBuilder, onOpenSet, accent, fg, soft, border }) {
return (
Sets
{savedSets.length} saved
{savedSets.length === 0 ? (
No saved sets yet. Build one and hit Save.
) : (
{savedSets.map(s => {
const firstRec = s.trackIds.length > 0
? records.find(r => r.id === s.trackIds[0].split('-')[0])
: null;
const gigCount = Array.isArray(s.gigs) ? s.gigs.length : (s.gig ? 1 : 0);
return (
);
})}
)}
);
}
function MobileSetBuilder({ queue, currentSetName, setCurrentSetName, onBack,
onSaveSet, onRemoveFromSet, onClearSet, onGoBrowse,
accent, fg, soft, border }) {
const totalMin = queue.reduce((sum, item) => {
const [m, s] = (item.track.len || '0:0').split(':').map(Number);
return sum + m + s / 60;
}, 0);
const save = () => {
const name = prompt('Name this set:', currentSetName || `Set ${new Date().toLocaleDateString()}`);
if (name && name.trim()) onSaveSet(name.trim());
};
return (
setCurrentSetName(e.target.value)}
placeholder="Name this set…"
style={{
width: '100%', padding: '8px 10px', borderRadius: 8,
background: 'transparent', border: `1px solid ${border}`,
color: fg, fontSize: 13, fontFamily: 'inherit', outline: 'none',
marginBottom: 10,
}} />
Set list
{Math.floor(totalMin)}min
{queue.length} tracks
{queue.length === 0 ? (
Your set is empty. Add tracks from the Library or a Crate.
) : (
{queue.map((item, i) => (
onRemoveFromSet(item.tid)} />
))}
)}
);
}
function MobileSetDetail({ savedSet, records, onBack, onLoadSavedSet,
accent, fg, soft, border }) {
if (!savedSet) {
return (
);
}
const queue = (savedSet.trackIds || []).map(tid => {
const p = window.parseTrackId ? window.parseTrackId(tid) : null;
return p ? { tid, ...p } : null;
}).filter(Boolean);
const totalMin = queue.reduce((sum, item) => {
const [m, s] = (item.track.len || '0:0').split(':').map(Number);
return sum + m + s / 60;
}, 0);
const gigs = Array.isArray(savedSet.gigs) ? savedSet.gigs
: (savedSet.gig ? [savedSet.gig] : []);
const sortedGigs = [...gigs].sort((a, b) =>
(b.playedAt || '').localeCompare(a.playedAt || ''));
return (
{savedSet.name}
{queue.length} tracks · {Math.floor(totalMin)} min
{sortedGigs.length > 0 && (
Gigs
{sortedGigs.map(g => (
{g.venue || 'Untitled venue'}
{g.playedAt || '—'}
{g.notes && (
{g.notes}
)}
))}
)}
{queue.length === 0 ? (
This saved set is empty.
) : (
{queue.map((item, i) => (
))}
)}
);
}
// ─────────── Crates explorer ───────────
function MobileCrates({ crates, records, openCrateId, setOpenCrateId, accent, fg, soft, border,
setTrackIds, onToggleTrack }) {
const open = crates.find(c => c.id === openCrateId);
if (open) {
const openRecs = open.recordIds
.map(id => records.find(r => r.id === id)).filter(Boolean);
return (
{open.name}
{openRecs.length} records
);
}
return (
Crates
{crates.length} groups
{crates.length === 0 ? (
No crates yet. Create one from the desktop.
) : (
{crates.map(c => {
const covers = c.recordIds.slice(0, 3)
.map(id => records.find(r => r.id === id)).filter(Boolean);
return (
);
})}
)}
);
}
// ─────────── Library (all records) ───────────
function MobileLibrary({ records, search, setSearch, accent, fg, soft, border,
setTrackIds, onToggleTrack }) {
const q = search.trim().toLowerCase();
const filtered = q ? records.filter(r =>
r.title.toLowerCase().includes(q) ||
r.artist.toLowerCase().includes(q) ||
(r.label || '').toLowerCase().includes(q)
) : records;
return (
Library
{filtered.length} / {records.length} records
⌕
setSearch(e.target.value)}
placeholder="Search title, artist, label…"
style={{
flex: 1, background: 'transparent', border: 'none', outline: 'none',
color: fg, fontSize: 12, fontFamily: 'inherit',
}} />
);
}
function MobileRecordGrid({ records, accent, fg, border, setTrackIds, onToggleTrack }) {
const [expanded, setExpanded] = React.useState(null);
return (
{records.map(r => {
const inCount = setTrackIds
? r.tracks.filter((_, i) => setTrackIds.has(`${r.id}-${i}`)).length : 0;
const isOpen = expanded === r.id;
return (
{isOpen && (
{r.tracks.map((t, i) => {
const tid = `${r.id}-${i}`;
const inSet = setTrackIds && setTrackIds.has(tid);
return (
{t.n || String(i + 1).padStart(2, '0')}
{t.title}
{t.len && (
{t.len}
)}
{t.bpm ?? '—'}
{t.key ?? '—'}
{onToggleTrack && (
)}
);
})}
)}
);
})}