// Main app — routing, state, tweaks integration
const ACCENT_COLORS = {
default: null,
orange: '#e94e1b',
red: '#e30a17',
gold: '#d4a574',
green: '#00ff88',
purple: '#7c3aed',
cyan: '#06b6d4',
};
function App() {
const defaults = window.__YAZSAD_DEFAULTS || {};
const [route, setRoute] = React.useState(() => localStorage.getItem('yazsad-route') || 'home');
const [playing, setPlaying] = React.useState(false);
const [fullPlayer, setFullPlayer] = React.useState(false);
const [progress, setProgress] = React.useState(32);
const [queueOpen, setQueueOpen] = React.useState(false);
// Player queue
const q = usePlayerQueue(TRACKS[0]);
const currentTrack = q.current;
const [tweaks, setTweaks] = React.useState({
theme: defaults.theme || 'cinematic',
density: defaults.density || 'normal',
cardStyle: defaults.cardStyle || 'grid',
layout: defaults.layout || 'standard',
accent: defaults.accent || 'default',
});
const [tweaksOpen, setTweaksOpen] = React.useState(false);
const [mobileSidebarOpen, setMobileSidebarOpen] = React.useState(false);
const [editMode, setEditMode] = React.useState(false);
const [onboardingOpen, setOnboardingOpen] = React.useState(false); // disabled — re-enable after polish
const [cart, setCart] = React.useState([]);
const [modules, setModules] = React.useState(() => loadModules());
const [searchQuery, setSearchQuery] = React.useState('');
const [auth, setAuth] = React.useState(() => loadAuth());
const [authModal, setAuthModal] = React.useState({ open: false, mode: 'login' });
const [userMenuOpen, setUserMenuOpen] = React.useState(false);
const [toast, setToast] = React.useState(null);
React.useEffect(() => {
setMobileSidebarOpen(false);
}, [route]);
React.useEffect(() => {
window.__yazsadGo = setRoute;
window.__yazsadGetModules = () => modules;
window.__yazsadSetModules = (m) => setModules(m);
window.__yazsadAuth = auth;
window.__yazsadOpenAuth = (mode = 'login') => setAuthModal({ open: true, mode });
window.__yazsadToast = (msg) => { setToast(msg); setTimeout(() => setToast(null), 2600); };
window.__yazsadGuardAction = (action = 'bu işlem') => {
if (auth.state !== 'user') {
window.__yazsadToast(`${action} için giriş yapılmalı`);
setAuthModal({ open: true, mode: 'login' });
return false;
}
return true;
};
}, [modules, auth]);
// Persist auth
React.useEffect(() => { saveAuth(auth); }, [auth]);
// Apply tweaks to
React.useEffect(() => {
const h = document.documentElement;
h.dataset.theme = tweaks.theme;
h.dataset.density = tweaks.density;
h.dataset.cards = tweaks.cardStyle;
h.dataset.layout = tweaks.layout;
// custom accent override
if (tweaks.accent !== 'default' && ACCENT_COLORS[tweaks.accent]) {
h.style.setProperty('--accent', ACCENT_COLORS[tweaks.accent]);
h.style.setProperty('--accent-soft', ACCENT_COLORS[tweaks.accent] + '22');
} else {
h.style.removeProperty('--accent');
h.style.removeProperty('--accent-soft');
}
}, [tweaks]);
// Persist route
React.useEffect(() => { localStorage.setItem('yazsad-route', route); }, [route]);
// Edit mode listener (must register BEFORE announcing)
React.useEffect(() => {
const onMsg = (e) => {
if (e.data?.type === '__activate_edit_mode') { setEditMode(true); setTweaksOpen(true); }
else if (e.data?.type === '__deactivate_edit_mode') { setEditMode(false); setTweaksOpen(false); }
};
window.addEventListener('message', onMsg);
window.parent.postMessage({ type: '__edit_mode_available' }, '*');
return () => window.removeEventListener('message', onMsg);
}, []);
const setTweak = (k, v) => {
const next = { ...tweaks, [k]: v };
setTweaks(next);
window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
};
const handlePlay = (t) => {
q.playTrack(t);
setPlaying(true);
setProgress(0);
};
// Fake progress tick + auto-advance on end
React.useEffect(() => {
if (!playing) return;
const id = setInterval(() => {
setProgress(p => {
if (p >= 99.5) {
// Auto-advance
setTimeout(() => {
if (q.repeat === 'one') { setProgress(0); return; }
q.playNext();
setProgress(0);
}, 0);
return 0;
}
return p + 0.4;
});
}, 500);
return () => clearInterval(id);
}, [playing, q.index, q.queue.length, q.repeat]);
// Map routes to module IDs (for gating)
const routeModule = {
home: 'home', discover: 'discover', news: 'news', forum: 'forum',
marketplace: 'marketplace', cart: 'cart', library: 'library',
upload: 'upload', contest: 'contest', clips: 'clips',
profile: 'profile', notifications: 'notifications',
settings: 'settings', admin: 'admin',
// Faz 2+ routes:
search: null, login: null, signup: null, membership: null, association: 'association', compliance: 'compliance', models: 'models', // always or module-gated
promptmarket: 'promptmarket', livesessions: 'livesessions', remix: 'remix',
chat: 'chat', playlist: 'playlist', radio: 'radio',
split: 'split', lineage: 'lineage', styledna: 'styledna', earnings: 'earnings',
ethics: 'ethics', guide: 'guide', assembly: 'assembly', donation: 'donation',
aiassist: 'aiassist', b2b: 'b2b',
};
// Parse dynamic routes (track:t1, album:a1, artist:anatolianlab)
const [routeKind, routeId] = route.includes(':') ? route.split(':') : [route, null];
const modId = routeModule[routeKind];
const mod = modId ? modules[modId] : null;
const blocked = mod && !moduleAccessible(mod, 'user') && !mod.locked;
let page;
if (blocked) {
page = ;
} else if (routeKind === 'track') {
page = ;
} else if (routeKind === 'album') {
page = ;
} else if (routeKind === 'artist') {
page = ;
} else switch (route) {
case 'home': page = ; break;
case 'discover': page = ; break;
case 'news': page = ; break;
case 'forum': page = ; break;
case 'settings': page = ; break;
case 'admin': page = ; break;
case 'marketplace': page = ; break;
case 'cart': page = ; break;
case 'library': page = ; break;
case 'upload': page = ; break;
case 'contest': page = ; break;
case 'clips': page = ; break;
case 'profile': page = ; break;
case 'notifications': page = ; break;
case 'association': page = ; break;
case 'promptmarket': page = ; break;
case 'remix': page = ; break;
case 'compliance': page = ; break;
case 'models': page = ; break;
case 'livesessions': page = ; break;
case 'playlist': page = ; break;
case 'radio': page = ; break;
case 'chat': page = ; break;
case 'lineage': page = ; break;
case 'styledna': page = ; break;
case 'aiassist': page = ; break;
case 'b2b': page = ; break;
case 'search': page = ; break;
case 'membership': page = ; break;
default: page = ;
}
return (
setRoute('search')}
auth={auth}
userMenuOpen={userMenuOpen}
setUserMenuOpen={setUserMenuOpen}
onOpenAuth={(mode) => setAuthModal({ open: true, mode })}
onLogout={() => { setAuth({ state: 'guest', name: null, handle: null, role: null }); window.__yazsadToast && window.__yazsadToast('Çıkış yapıldı'); setRoute('home'); }}
setRoute={setRoute}
onOpenSidebar={() => setMobileSidebarOpen(true)}
/>
{page}
setPlaying(!playing)}
onExpand={() => setFullPlayer(true)}
progress={progress}
onProgress={setProgress}
q={q}
onToggleQueue={() => setQueueOpen(o => !o)}
queueOpen={queueOpen}
/>
{queueOpen && setQueueOpen(false)} q={q} />}
{fullPlayer && (
setPlaying(!playing)}
onClose={() => setFullPlayer(false)}
progress={progress}
onProgress={setProgress}
q={q}
/>
)}
{/* Tweaks FAB (always available; toolbar toggle opens panel) */}
{!tweaksOpen && (
)}
{tweaksOpen && setTweaksOpen(false)} />}
setAuthModal(a => ({ ...a, mode: m }))}
onClose={() => setAuthModal({ open: false, mode: 'login' })}
onAuth={(a) => { setAuth(a); window.__yazsadToast && window.__yazsadToast(`Hoş geldin, ${a.name}`); }}
/>
{/* Floating AI bubble (always available, hidden on AI page) */}
{route !== 'aiassist' && auth.state === 'user' && }
{/* PWA banner — disabled during beta; re-enable after polish */}
{/* */}
{onboardingOpen && (
{
setOnboardingOpen(false);
window.__yazsadToast && window.__yazsadToast(`Hoş geldin${data.name ? ', ' + data.name : ''}! Keşif senin için hazırlandı.`);
}} />
)}
{toast && (
{toast}
)}
{/* Misafir banner — disabled; user can log in from topbar */}
{false && auth.state === 'guest' && (
MISAFIR
Tam deneyim için hesap oluştur.
)}
);
}
ReactDOM.createRoot(document.getElementById('root')).render();