import React from 'react'
import {createRoot} from 'react-dom/client'
import './style.css'
import App from './App'
import { syncPortablePrefs } from './lib/uiPref'
import { I18nProvider } from './lib/i18n'
import { ThemeProvider, initTheme } from './lib/theme'

const container = document.getElementById('root')

const root = createRoot(container!)

// Pull portable UI prefs (DB → localStorage) before the first render so the
// app's synchronous reads see the values copied along with the data/ folder.
// Render regardless of the outcome so a backend hiccup never blocks startup.
syncPortablePrefs().finally(() => {
    // Stamp the persisted theme onto <html> before render so the correct
    // palette is applied immediately (portable pref hydrated just above).
    initTheme()
    root.render(
        <React.StrictMode>
            <I18nProvider>
                <ThemeProvider>
                    <App/>
                </ThemeProvider>
            </I18nProvider>
        </React.StrictMode>
    )
})
