// Spotless — Настройки: разделы слева, содержимое раздела справа. Каждый раздел — свой компонент.
const THEME_LIST = [
// Образцы: фон, текст и горячий цвет палитры (как в app.css)
{ id: "dot", ru: "Точка", en: "Dot", bg: "#000000", fg: "#F2F2F2", acc: "#D71921" },
{ id: "dark-warm", ru: "Тёплая ночь", en: "Warm night", bg: "oklch(0.20 0.012 75)", fg: "oklch(0.93 0.015 90)", acc: "oklch(0.82 0.14 90)" },
{ id: "dark-neutral", ru: "Студия", en: "Studio", bg: "oklch(0.185 0.008 255)", fg: "oklch(0.92 0.008 250)", acc: "oklch(0.82 0.14 90)" },
{ id: "dark-sea", ru: "Глубина", en: "Deep sea", bg: "oklch(0.20 0.012 75)", fg: "oklch(0.93 0.01 240)", acc: "oklch(0.76 0.12 230)" },
{ id: "light-cream", ru: "Солнечная", en: "Sunny", bg: "oklch(0.972 0.012 95)", fg: "oklch(0.28 0.02 80)", acc: "oklch(0.62 0.15 60)" },
{ id: "light-neutral", ru: "Бумага", en: "Paper", bg: "oklch(0.975 0.003 250)", fg: "oklch(0.24 0.01 260)", acc: "#D71921" },
{ id: "light-rose", ru: "Зефир", en: "Marshmallow", bg: "oklch(0.972 0.008 350)", fg: "oklch(0.28 0.02 340)", acc: "oklch(0.58 0.18 355)" },
];
const ThemeSwatch = ({ th, active, onClick, size = "norm" }) => {
const app = useApp();
return (
{app ? (app.lang === "ru" ? th.ru : th.en) : th.ru}
);
};
const SettingRow = ({ label, note, children }) => (
);
// Переключатель из нескольких вариантов. Вид — классами (.seg): у Material это группа кнопок
const Seg = ({ options, value, onChange }) => (
{options.map(([k, label]) => (
onChange(k)}>{label}
))}
);
// Переключатель вкл/выкл
const Toggle = ({ on, onClick }) =>
{COMMUNITY_THEMES.map(th => (
apply(th)} style={{ borderRadius: 14, padding: 4, textAlign: "left" }}>
{app.lang === "ru" ? th.ru : th.en}
{t.galBy} {th.by}
))}
);
};
// Дата своей операции: «11 октября» / «Oct 11» — как у записей из мок-базы
const txDate = (iso, ru) => new Date(iso).toLocaleDateString(ru ? "ru-RU" : "en-US", ru ? { day: "numeric", month: "long" } : { month: "short", day: "numeric" });
// История операций: записи мок-базы и свои (пополнения, донаты); суммы — свои, комиссии сети — в долларах, по курсу
const TxModal = ({ close, out }) => {
const app = useApp();
const t = app.t;
const m = app.money;
const ru = app.lang === "ru";
return (
{t.txNote}
{app.txs.map((r, i) => (
{r.kind === "topup" ? t.txTopUp : r.kind === "tip" ? t.txTip(r.name) : ru ? r.title : r.titleEn}
{r.at ? txDate(r.at, ru) : ru ? r.d : r.dEn} · {t.txFee} {m.fee(m.usd(r.fee))}
{r.amount < 0 ? "−" : "+"}{m.fmt(Math.abs(r.amount), true)}
))}
);
};
// Картинку для обоев уменьшаем и пережимаем в JPEG: целая фотография с телефона (3–8 МБ) не влезала
// в localStorage (~5 МБ на сайт), и после этого переставало сохраняться вообще всё. Обои лежат
// за затемнением, так что 1600 px по длинной стороне хватает с запасом.
const shrinkImage = (file, max = 1600, quality = 0.82) => new Promise((resolve, reject) => {
const url = URL.createObjectURL(file);
const img = new Image();
img.onload = () => {
const k = Math.min(1, max / Math.max(img.naturalWidth, img.naturalHeight));
const c = document.createElement("canvas");
c.width = Math.max(1, Math.round(img.naturalWidth * k));
c.height = Math.max(1, Math.round(img.naturalHeight * k));
c.getContext("2d").drawImage(img, 0, 0, c.width, c.height);
URL.revokeObjectURL(url);
resolve(c.toDataURL("image/jpeg", quality));
};
img.onerror = () => { URL.revokeObjectURL(url); reject(new Error("not an image")); };
img.src = url;
});
// ---------- Разделы ----------
// Окна (галерея тем, транзакции) открывает страница — через openModal: лист рендерится в body,
// но пусть живёт дольше раздела, из которого его открыли.
// Тема: экспорт в буфер и импорт из JSON. Импорт берёт только известное и только допустимые
// значения (cleanSettings) — раньше сохранялось что угодно, например несуществующая тема или «island»: "zzz"
const ThemeTools = ({ openModal }) => {
const app = useApp();
const t = app.t;
const S = app.settings;
const [importOpen, setImportOpen] = React.useState(false);
const [importVal, setImportVal] = React.useState("");
const exportTheme = () => {
const json = JSON.stringify({ style: S.style, theme: app.theme, accent: S.accent, mTheme: S.mTheme, mAccent: S.mAccent, wallpaper: S.wallpaper, island: S.island, density: S.density }, null, 0);
copyText(json);
app.toast(t.themeCopied);
};
const applyImport = () => {
let o = null;
try { o = JSON.parse(importVal); } catch (e) {}
const themeOk = !!o && THEME_LIST.some(th => th.id === o.theme);
const next = o && typeof o === "object" ? cleanSettings({ ...o, wallpaperImg: undefined }, S) : S;
if (!themeOk && Object.keys(next).every(k => next[k] === S[k])) { app.toast(t.importBad); return; } // ничего годного
if (themeOk) app.setTheme(o.theme);
app.setSettings(next);
app.toast(t.imported); setImportOpen(false); setImportVal("");
};
const link = (icon, label, onClick) => (
{link("sparkle", t.stThemeGallery, () => openModal("gallery"))}
{link("shareIc", t.stThemeShare, exportTheme)}
{link("download", t.stExport + " · JSON", exportTheme)}
{link("refresh", t.apply + " JSON", () => setImportOpen(!importOpen))}
{importOpen && (
{t.apply}
)}
);
};
// Обои: нет, три градиента или своя картинка
const WallpaperPicker = () => {
const app = useApp();
const t = app.t;
const S = app.settings;
const fileRef = React.useRef(null);
const pick = (e) => {
const f = e.target.files && e.target.files[0];
e.target.value = "";
if (!f) return;
shrinkImage(f).then((data) => { app.setWallpaperImg(data); app.toast(t.wallpaperSet); }, () => app.toast(t.wallpaperBad));
};
return (
{[null, 30, 210, 320].map((h, i) => (
app.setWallpaper(h)} style={{
width: 44, height: 32, borderRadius: 8,
outline: (S.wallpaper === h && !S.wallpaperImg) ? "2px solid var(--acc)" : "1px solid var(--line)", outlineOffset: 1.5,
background: h == null ? "var(--bg0)" : `linear-gradient(135deg, oklch(var(--cover-l1) 0.05 ${h}), oklch(var(--cover-l2) 0.05 ${h + 60}))`,
display: "flex", alignItems: "center", justifyContent: "center", color: "var(--mut)",
}}>{h == null &&
))}
fileRef.current && fileRef.current.click()} style={{
width: 44, height: 32, borderRadius: 8,
outline: S.wallpaperImg ? "2px solid var(--acc)" : "none",
border: S.wallpaperImg ? "none" : "1px dashed var(--mut)",
display: "flex", alignItems: "center", justifyContent: "center", color: "var(--mut)", overflow: "hidden",
background: S.wallpaperImg ? `url("${S.wallpaperImg}") center / cover` : "transparent",
}}>{!S.wallpaperImg &&
);
};
// Образец архитектуры стиля: свой рисунок у каждой — по нему видно, чем они отличаются,
// какой бы стиль ни был выбран сейчас (цвета — из STYLE_PREVIEW, style.jsx)
const StyleSwatch = ({ id, active, onClick, wide }) => {
const app = useApp();
const st = STYLE_LIST.find(s => s.id === id);
const c = STYLE_PREVIEW[id];
return (
{id === "dot" ? (
) : (
)}
{app.lang === "ru" ? st.ru : st.en}
);
};
// Акцент Material: из обложки (по умолчанию) или постоянный цвет
const MAccentPicker = () => {
const app = useApp();
const t = app.t;
const cur = app.settings.mAccent;
const light = app.mTheme === "light";
const ring = (on) => (on ? "m-sw is-on" : "m-sw");
const tr = DB.trackIndex[app.player.trackId];
return (
app.setMAccent(null)}>
{M_ACCENTS.map(a => (
app.setMAccent(a.id)}>
))}
);
};
const SetAppearance = ({ openModal }) => {
const app = useApp();
const t = app.t;
const S = app.settings;
const set = (k) => (v) => app.setSettings({ ...S, [k]: v });
const material = app.style === "material";
return (
{t.stStyle}
{t.stStyleNote}
{STYLE_LIST.map(s => app.setStyle(s.id)} />)}
{material ? (
) : (
{t.stThemes}
{THEME_LIST.map(th => (
app.setTheme(th.id)} />
))}
)}
set("homeWidgets")(!S.homeWidgets)} />
{!material &&
{[95, 230, 350, 160].map(h => (
app.setAccent(h)} style={{
width: 30, height: 30, borderRadius: "50%",
background: `oklch(0.66 0.17 ${h})`, // тот же цвет, что встанет в --hot
outline: S.accent === h ? "2.5px solid var(--text)" : "none", outlineOffset: 2,
}}>
))}
app.setAccent(null)} style={{
width: 30, height: 30, borderRadius: "50%", border: "1px dashed var(--mut)",
color: "var(--mut)", display: "flex", alignItems: "center", justifyContent: "center",
}} title="reset">
}
);
};
// Воспроизведение и загрузки. Значения — заглушка: живут в странице (pb, folder), пока она открыта
const SetPlayback = ({ pb, setPb, folder, setFolder }) => {
const app = useApp();
const t = app.t;
const set = (k) => (v) => setPb({ ...pb, [k]: v });
const flip = (k) => () => setPb({ ...pb, [k]: !pb[k] });
return (
{ setFolder(v); app.toast(t.folderSaved); }}
options={[["music", "~/Music"], ["down", "~/Downloads"], ["ext", t.folderCustom]]} />
);
};
const SetLang = () => {
const app = useApp();
const t = app.t;
return (
);
};
const SetRatings = () => {
const app = useApp();
const t = app.t;
return (
app.setSettings({ ...app.settings, likeRating: v })}
options={[5, 6, 7, 8, 9, 10].map(n => [n, String(n)])} />
);
};
const SetHelp = () => {
const app = useApp();
const t = app.t;
return (
app.go("onboarding")}>
app.go("onboarding")}>
);
};
const SetAccount = () => {
const t = useApp().t;
return (
Л
Лиза
liza.k@gmail.com · Google
);
};
// Продвинутое: ключи, адрес, транзакции, сеть — для тех, кто хочет под капот
const SetAdvanced = ({ openModal }) => {
const app = useApp();
const t = app.t;
const [seedShown, setSeedShown] = React.useState(false);
const copyBtn = (style) => (
app.toast(t.copied)}>
);
return (
{t.stAdvancedNote}
setSeedShown(!seedShown)}>
{seedShown && (
lunar velvet anchor tide paper humming gravel north cassette ember quiet arc
{copyBtn({ width: 28, height: 28, marginLeft: 8, verticalAlign: "middle" })}
)}
spl1q…e7xw4
{copyBtn({ width: 30, height: 30 })}
openModal("tx")}>{t.stTxAll}
● online
app.toast(t.stOpened)}>{t.stOpen}
);
};
// [ключ, подпись (ключ в i18n), значок]
const SETTINGS_SECTIONS = [
["appearance", "stAppearance", "sparkle"],
["playback", "stPlayback", "volume"],
["ratings", "stRatings", "heart"],
["lang", "stLang", "globe"],
["help", "stHelp", "bell"],
["account", "stAccount", "user"],
["advanced", "stAdvanced", "key"],
];
const PageSettings = () => {
const app = useApp();
const t = app.t;
const [section, setSection] = React.useState("appearance");
const [modal, setModal] = React.useState(null); // gallery | tx
// Заглушки настроек воспроизведения — живут здесь, чтобы не сбрасываться при смене раздела
const [pb, setPb] = React.useState({ stream: "auto", dlq: "high", metered: false, cache: "5", normalize: true, cross: "0", gapless: true });
const [folder, setFolder] = React.useState("music");
const closeModal = () => setModal(null);
const [shown, out] = useExit(modal);
return (
{t.stTitle}
{SETTINGS_SECTIONS.map(([k, label, icon]) => (
setSection(k)}>
))}
{section === "appearance" &&
{shown === "gallery" &&
}
{shown === "tx" &&
}
);
};
Object.assign(window, { PageSettings, THEME_LIST, ThemeSwatch, StyleSwatch, MAccentPicker, SettingRow, Seg });