// settings.jsx — full-screen, top-to-bottom Settings screen (replaces the
// floating Tweaks panel). Styled in the app's own glass/dark language and
// driven by the same useTweaks state. Exposes window.SettingsScreen.
(function () {
const { useEffect, useState } = React;
const Ico = window.Ico;
const fx = (t) => (t.effects && t.effects.blur && t.effects.blur !== 'none')
? { backdropFilter: t.effects.blur, WebkitBackdropFilter: t.effects.blur } : {};
const cardBorderOf = (t) => t.cardBorder !== undefined ? t.cardBorder : (t.mode === 'dark' ? `1px solid ${t.color.border}` : 'none');
// segmented control matching the app's pills
function Seg({ t, value, options, onChange, render }) {
const lbl = render || ((o) => o);
return (
{options.map((o) => {
const on = o === value;
return (
);
})}
);
}
function Toggle({ t, value, onChange }) {
return (
);
}
function Swatches({ t, value, options, customColors, onChange, onAddCustom, onRemoveCustom }) {
const inputRef = React.useRef(null);
// Commit a custom color only when the native picker is confirmed/closed
// ('change' event) — the input event fires on every drag tick and would
// add dozens of near-identical swatches.
React.useEffect(() => {
const el = inputRef.current; if (!el) return;
const commit = (e) => { onAddCustom && onAddCustom(e.target.value); };
el.addEventListener('change', commit);
return () => el.removeEventListener('change', commit);
}, [onAddCustom]);
const customs = (customColors || []).filter((c) => !options.some((o) => String(o).toLowerCase() === String(c).toLowerCase()));
const wheel = 'conic-gradient(from 90deg, #ff3b30, #ff9500, #ffcc00, #34c759, #00c7be, #30b0c7, #007aff, #5856d6, #af52de, #ff2d55, #ff3b30)';
const dot = (c, removable) => {
const on = String(c).toLowerCase() === String(value).toLowerCase();
return (
);
};
return (
{options.map((c) => dot(c, false))}
{customs.map((c) => dot(c, true))}
{customs.length < 10 && (
)}
{ onChange(e.target.value); }}
style={{ position: 'absolute', width: 1, height: 1, opacity: 0, pointerEvents: 'none', border: 0, padding: 0 }} />
);
}
function CompanionPick({ t, value, onChange }) {
return (
{(window.COMPANIONS || []).map((c) => {
const on = c.id === value;
return (
);
})}
);
}
function Row({ t, label, hint, control, stack }) {
return (
{label}
{hint ?
{hint}
: null}
{control}
);
}
function Section({ t, title, children }) {
const cardBorder = cardBorderOf(t);
return (
{title}
{React.Children.toArray(children).filter(Boolean).map((ch, i) => (
0 ? `1px solid ${t.color.divider}` : 'none' }}>{ch}
))}
);
}
function SettingsScreen({ t, tw, setTweak, accents, open, onClose }) {
const L = window.I18N_T ? window.I18N_T(tw.lang || 'en') : null;
const tr = (k) => (L ? L.ui(k) : k);
const dir = L ? L.dir : 'ltr';
const optL = (o) => tr(String(o).toLowerCase());
const langOpts = ['en', 'fi', 'ar'];
const langName = (o) => (window.I18N && window.I18N[o] ? window.I18N[o].langName : o);
const [mounted, setMounted] = useState(open);
const [shown, setShown] = useState(false);
useEffect(() => {
if (open) { setMounted(true); requestAnimationFrame(() => requestAnimationFrame(() => setShown(true))); }
else { setShown(false); const id = setTimeout(() => setMounted(false), 280); return () => clearTimeout(id); }
}, [open]);
if (!mounted) return null;
return (
{/* header */}
{tr('settings')}
{/* scroll body */}
setTweak('mode', v)} />} />
setTweak('finish', v)} />} />
{tw.bg !== undefined && setTweak('bg', v)} />} />}
setTweak('accent', v)}
onAddCustom={(c) => { const list = [...(tw.customAccents || []).filter((x) => String(x).toLowerCase() !== String(c).toLowerCase()), c].slice(-10); setTweak({ customAccents: list, accent: c }); }}
onRemoveCustom={(c) => { const list = (tw.customAccents || []).filter((x) => String(x).toLowerCase() !== String(c).toLowerCase()); const next = { customAccents: list }; if (String(tw.accent).toLowerCase() === String(c).toLowerCase()) next.accent = accents[0]; setTweak(next); }} />} />
setTweak('companion', v)} />} />
setTweak('corners', v)} />} />
setTweak('density', v)} />} />
setTweak('thumbs', v)} />} />
setTweak('lang', v)} />} />
setTweak('units', v)} />} />
setTweak('recents', v)} />} />
Lista
{tr('aboutTagline')} · v1.0
{tr('madeWith')} · Lista