Revela-v4/src/components/SettingsContent/CustomizationTab.astro

81 lines
2.7 KiB
Text

---
import Dropdown from "@components/UI/Dropdown.astro";
import { i18n } from "@i18n/utils";
const t = i18n.inferLangUseTranslations(Astro.url);
const themeList = [
{ name: t("settings.customization.theme.Alu"), value: "alu" },
{ name: t("settings.customization.theme.Macchiato"), value: "macchiato" },
{ name: t("settings.customization.theme.Mocha"), value: "mocha" },
{ name: "Rosé Pine", value: "rose_pine" },
];
const languageList = [
{ name: "English", value: "en" },
{ name: "日本語", value: "jp" },
];
---
<div class="settings-container">
<div class="setting__theme">
<label aria-label="Theme" class="setting-label">{t("settings.customization.theme")}</label>
<Dropdown buttonNameDefault="Alu" dropdownList={themeList} id="dropdown__selected-theme" />
</div>
<div class="setting__language">
<label aria-label="Language" class="setting-label">{t("settings.customization.language")}</label>
<Dropdown buttonNameDefault="English" dropdownList={languageList} id="dropdown__selected-language" />
</div>
</div>
<script>
// import IDBManager, { type ExtensionMetadata } from "@components/ts/IDBManager";
// let idb = IDBManager.GetIDB();
// if (!(idb instanceof IDBDatabase)) {
// idb = await loadIndexedDB();
// }
// let store = IDBManager.GetStore("InstalledExtensions", "readonly");
// store.getAll().onsuccess = (event) => {
// const result = (event.target as IDBRequest).result;
// if (result) {
// result.forEach((extension: ExtensionMetadata) => {
// if (extension.type === "theme" && extension.themeName) {
// // Create a dropdown item for the theme
// addThemeToDropdown(extension);
// }
// });
// }
// };
// async function loadIndexedDB(): Promise<IDBDatabase> {
// return new Promise((resolve, reject) => {
// const load = IDBManager.loadIDB("AluDB", 1);
// load.onsuccess = () => {
// const db = load.result;
// IDBManager.SetIDB(db);
// resolve(idb);
// };
// });
// }
// function addThemeToDropdown(extension: ExtensionMetadata) {
// let dropdown = document.getElementById("dropdown__selected-theme-menu");
// if (dropdown) {
// let themeItem = document.createElement("li");
// themeItem.classList.add("dropdown-item");
// themeItem.dataset.setting = extension.themeName;
// themeItem.textContent = extension.title!;
// dropdown.appendChild(themeItem);
// themeItem.addEventListener("click", () => {
// localStorage.setItem("alu__selectedTheme", JSON.stringify({ name: extension.title, value: extension.themeName }));
// });
// } else {
// setTimeout(() => {
// addThemeToDropdown(extension);
// }, 1000);
// }
// }
</script>