const { useState, useEffect, useRef, useCallback } = React;
const socket = io();
// ─── API / Auth ──────────────────────────────────────────────────
let authToken = localStorage.getItem('songcraft_token');
const api = async (url, opts = {}) => {
const headers = { 'Content-Type': 'application/json', ...(authToken ? { 'Authorization': 'Bearer ' + authToken } : {}) };
const res = await fetch(url, { ...opts, headers });
if (res.status === 401) { authToken = null; localStorage.removeItem('songcraft_token'); window.location.reload(); }
return res.json();
};
const setToken = (t) => { authToken = t; localStorage.setItem('songcraft_token', t); };
// ─── E2E Crypto ──────────────────────────────────────────────────
async function deriveKey(pw) { const e = new TextEncoder(); const km = await crypto.subtle.importKey('raw', e.encode(pw), 'PBKDF2', false, ['deriveKey']); return crypto.subtle.deriveKey({ name: 'PBKDF2', salt: e.encode('songcraft-salt'), iterations: 100000, hash: 'SHA-256' }, km, { name: 'AES-GCM', length: 256 }, false, ['encrypt', 'decrypt']); }
async function encryptMsg(text, pw) { const k = await deriveKey(pw); const iv = crypto.getRandomValues(new Uint8Array(12)); const ct = await crypto.subtle.encrypt({ name: 'AES-GCM', iv }, k, new TextEncoder().encode(text)); return { encrypted: btoa(String.fromCharCode(...new Uint8Array(ct))), iv: btoa(String.fromCharCode(...iv)) }; }
async function decryptMsg(enc, ivB64, pw) { try { const k = await deriveKey(pw); const iv = Uint8Array.from(atob(ivB64), c => c.charCodeAt(0)); const ct = Uint8Array.from(atob(enc), c => c.charCodeAt(0)); return new TextDecoder().decode(await crypto.subtle.decrypt({ name: 'AES-GCM', iv }, k, ct)); } catch { return '[Déchiffrement impossible]'; } }
// ─── Constants & Styles ──────────────────────────────────────────
const COLOR_PALETTE = ["#E8A838","#38BDE8","#E85B8A","#8BE85B","#B85BE8","#E8D838","#38E8C4","#E87838","#7888E8","#55CC88","#CC5577","#88BBDD","#DDAA55","#AA55DD","#55DDAA","#DD5555"];
const REACTION_EMOJIS = ["👍","❤️","🔥","🎵","✨","🤔","👏","💡"];
const DEFAULT_SECTION_TYPES = ["Intro","Couplet","Refrain","Pont","Outro","Pré-refrain","Ad-lib","Instrumental"];
const uid = () => Math.random().toString(36).slice(2, 10);
const authorBg = (h) => h + "1a";
const font = "'JetBrains Mono',monospace";
const fontD = "'Playfair Display',serif";
const UI = { accent: "#E8A838", dim: "#555", faint: "#333", surface: "rgba(255,255,255,0.04)", border: "rgba(255,255,255,0.08)" };
const inpS = { width: "100%", padding: "7px 10px", background: "rgba(0,0,0,0.3)", border: `1px solid ${UI.border}`, borderRadius: 4, color: "#ccc", fontFamily: font, fontSize: 12, outline: "none", boxSizing: "border-box" };
const labS = { fontSize: 10, color: "#888", letterSpacing: 1, textTransform: "uppercase", display: "block", marginBottom: 4 };
// ─── Shared UI ───────────────────────────────────────────────────
function Badge({ children, style, onClick }) { return {children}; }
function Btn({ children, onClick, primary, danger, small, disabled, style }) {
const bg = danger ? "rgba(220,50,50,0.15)" : primary ? "rgba(255,255,255,0.06)" : UI.surface;
return ;
}
function TabBar({ tabs, active, onChange }) { return {tabs.map(t => )}
; }
// ─── ReactionBar ─────────────────────────────────────────────────
function ReactionBar({ reactions = [], userId, onChange, small }) {
const [sp, setSp] = useState(false); const ref = useRef();
useEffect(() => { if (!sp) return; const h = e => { if (ref.current && !ref.current.contains(e.target)) setSp(false); }; document.addEventListener("mousedown", h); return () => document.removeEventListener("mousedown", h); }, [sp]);
const grouped = {}; (reactions||[]).forEach(r => { if (!grouped[r.emoji]) grouped[r.emoji] = []; grouped[r.emoji].push(r.author); });
const toggle = e => { const ex = (reactions||[]).find(r => r.emoji === e && r.author === userId); onChange(ex ? reactions.filter(r => !(r.emoji === e && r.author === userId)) : [...(reactions||[]), { emoji: e, author: userId }]); setSp(false); };
return
{Object.entries(grouped).map(([em, authors]) =>
)}
{sp &&
{REACTION_EMOJIS.map(e => )}
}
Couleur d'écriture
{COLOR_PALETTE.map(c =>
setSp(!sp)} style={{ cursor: "pointer", display: "flex", alignItems: "center", gap: 6 }}>{user.name}
{sp && { onChangeColor(c); setSp(false); }} onClose={() => setSp(false)} />}
;
}
// ─── Section Info Bubble ─────────────────────────────────────────
function SectionInfoBubble({ info, onUpdate }) {
const [ed, setEd] = useState(false); const [txt, setTxt] = useState(info || ""); const ref = useRef(); const iRef = useRef();
useEffect(() => { if (ed) { setTxt(info || ""); setTimeout(() => iRef.current?.focus(), 30); } }, [ed]);
useEffect(() => { if (!ed) return; const h = e => { if (ref.current && !ref.current.contains(e.target)) { onUpdate(txt.trim()); setEd(false); } }; document.addEventListener("mousedown", h); return () => document.removeEventListener("mousedown", h); }, [ed, txt]);
if (ed) return