517 lines
18 KiB
JavaScript
517 lines
18 KiB
JavaScript
// static/js/08-settings.js
|
|
"use strict";
|
|
window.Glow = window.Glow || {};
|
|
Glow.state = Glow.state || {};
|
|
Glow.state.settings = Glow.state.settings || null;
|
|
|
|
Glow.applyThemeMode = mode => {
|
|
const normalized = mode === "light" ? "light" : "dark";
|
|
document.body.classList.toggle("theme-light", normalized === "light");
|
|
localStorage.setItem("glow_theme_mode", normalized);
|
|
};
|
|
|
|
Glow.applyCustomCss = cssText => {
|
|
let style = document.getElementById("glowCustomCss");
|
|
if (!style) {
|
|
style = document.createElement("style");
|
|
style.id = "glowCustomCss";
|
|
document.head.append(style);
|
|
}
|
|
style.textContent = typeof cssText === "string" ? cssText : "";
|
|
};
|
|
|
|
Glow.loadMySettings = async () => {
|
|
try {
|
|
const data = await Glow.apiGetMySettings();
|
|
Glow.state.settings = data.settings || {};
|
|
const accent = Glow.state.settings.accent_color || Glow.state.accentColor;
|
|
Glow.applyAccentColor(accent);
|
|
const mode =
|
|
Glow.state.settings.theme_mode ||
|
|
localStorage.getItem("glow_theme_mode") ||
|
|
"dark";
|
|
Glow.applyThemeMode(mode);
|
|
Glow.applyCustomCss(Glow.state.settings.custom_css || "");
|
|
} catch (_) {
|
|
const mode = localStorage.getItem("glow_theme_mode") || "dark";
|
|
Glow.applyThemeMode(mode);
|
|
}
|
|
};
|
|
|
|
Glow.renderHeaderMenu = () => {
|
|
const list = Glow.els.headerMenuList;
|
|
if (!list) return;
|
|
list.replaceChildren();
|
|
const addItem = ({ label, hint = "", onClick, hidden = false }) => {
|
|
if (hidden) return;
|
|
const button = document.createElement("button");
|
|
button.className = "header-menu-item";
|
|
button.type = "button";
|
|
const left = document.createElement("span");
|
|
left.textContent = label;
|
|
const right = document.createElement("small");
|
|
right.textContent = hint;
|
|
button.append(left, right);
|
|
button.addEventListener("click", () => {
|
|
Glow.closeHeaderMenu?.();
|
|
onClick?.();
|
|
});
|
|
list.append(button);
|
|
};
|
|
addItem({
|
|
label: "My profile",
|
|
hint: Glow.state.currentUser ? `@${Glow.state.currentUser.username}` : "",
|
|
onClick: () => Glow.openMyProfile?.(),
|
|
hidden: !Glow.state.currentUser
|
|
});
|
|
addItem({
|
|
label: "Settings",
|
|
hint: "Theme, CSS, profile",
|
|
onClick: () => Glow.openSettings?.()
|
|
});
|
|
addItem({
|
|
label: "Direct messages",
|
|
hint: Glow.state.currentUser ? "Private chat" : "",
|
|
onClick: async () => {
|
|
Glow.state.activeView = "dms";
|
|
Glow.updateViewUI();
|
|
await Glow.loadDms?.();
|
|
Glow.schedulePoll?.();
|
|
},
|
|
hidden: !Glow.state.currentUser
|
|
});
|
|
addItem({
|
|
label: "Create team",
|
|
hint: "Up to 3 max",
|
|
onClick: () => Glow.openCreateTeamDialog?.(),
|
|
hidden: !Glow.state.currentUser
|
|
});
|
|
addItem({
|
|
label: "Edit current team",
|
|
hint: Glow.state.activeTeam?.can_manage ? "Manage" : "",
|
|
onClick: () => Glow.openEditTeamDialog?.(Glow.state.activeTeam),
|
|
hidden: !Glow.state.activeTeam || !Glow.state.activeTeam.can_manage
|
|
});
|
|
addItem({
|
|
label: "Add channel",
|
|
hint: Glow.state.activeTeam?.name || "",
|
|
onClick: () => Glow.openCreateChannelDialog?.(Glow.state.activeTeam),
|
|
hidden: !Glow.state.activeTeam || !Glow.state.activeTeam.can_manage
|
|
});
|
|
addItem({
|
|
label: "Edit current channel",
|
|
hint: Glow.state.activeChannel?.name || Glow.state.activeRoom?.name || "",
|
|
onClick: () => Glow.openEditChannelDialog?.(
|
|
Glow.state.activeTeam,
|
|
Glow.state.activeChannel || Glow.state.activeRoom
|
|
),
|
|
hidden:
|
|
!Glow.state.activeTeam ||
|
|
!Glow.state.activeTeam.can_manage ||
|
|
!(Glow.state.activeChannel || Glow.state.activeRoom) ||
|
|
Glow.state.activeView === "dm"
|
|
});
|
|
addItem({
|
|
label: "Manage team members",
|
|
hint: Glow.state.activeTeam?.can_manage ? "Members" : "",
|
|
onClick: () => Glow.manageTeamMembers?.(Glow.state.activeTeam),
|
|
hidden: !Glow.state.activeTeam || !Glow.state.activeTeam.can_manage
|
|
});
|
|
addItem({
|
|
label: "Create team invite",
|
|
hint: Glow.state.activeTeam?.can_manage ? "Share" : "",
|
|
onClick: () => Glow.createTeamInviteLink?.(Glow.state.activeTeam),
|
|
hidden: !Glow.state.activeTeam || !Glow.state.activeTeam.can_manage
|
|
});
|
|
addItem({
|
|
label: "Delete current channel",
|
|
hint: Glow.state.activeChannel?.name || "",
|
|
onClick: () => Glow.deleteCurrentChannel?.(Glow.state.activeTeam),
|
|
hidden:
|
|
!Glow.state.activeTeam ||
|
|
!Glow.state.activeTeam.can_manage ||
|
|
!Glow.state.activeChannel ||
|
|
Boolean(Glow.state.activeChannel?.legacy_room_id)
|
|
});
|
|
};
|
|
|
|
Glow.openHeaderMenu = () => {
|
|
Glow.renderHeaderMenu();
|
|
Glow.els.headerMenuOverlay?.classList.remove("hidden");
|
|
};
|
|
|
|
Glow.closeHeaderMenu = () => {
|
|
Glow.els.headerMenuOverlay?.classList.add("hidden");
|
|
};
|
|
|
|
Glow.toggleHeaderMenu = () => {
|
|
if (Glow.els.headerMenuOverlay?.classList.contains("hidden")) {
|
|
Glow.openHeaderMenu();
|
|
} else {
|
|
Glow.closeHeaderMenu();
|
|
}
|
|
};
|
|
|
|
Glow.openSettings = async () => {
|
|
Glow.state.activeView = "settings";
|
|
Glow.updateViewUI();
|
|
if (!Glow.state.settings && Glow.state.currentUser) {
|
|
await Glow.loadMySettings();
|
|
}
|
|
Glow.renderSettingsView();
|
|
};
|
|
|
|
Glow.renderNameColorPreview = value => {
|
|
const wrap = document.createElement("div");
|
|
wrap.className = "settings-row";
|
|
const label = document.createElement("div");
|
|
label.className = "header-subtitle";
|
|
label.textContent = "Preview";
|
|
const preview = document.createElement("div");
|
|
preview.className = "name-color-preview";
|
|
preview.textContent =
|
|
Glow.state.currentUser?.username || "username";
|
|
preview.style.color =
|
|
Glow.normalizeNameColor(value) ||
|
|
Glow.roleDefaultNameColor(Glow.state.currentUser?.role);
|
|
wrap.append(label, preview);
|
|
return wrap;
|
|
};
|
|
|
|
Glow.renderSettingsView = () => {
|
|
const box = Glow.els.profileBox;
|
|
box.replaceChildren();
|
|
|
|
const card = document.createElement("div");
|
|
card.className = "settings-card";
|
|
|
|
const appearance = document.createElement("section");
|
|
appearance.className = "settings-section";
|
|
const aTitle = document.createElement("h2");
|
|
aTitle.textContent = "Appearance";
|
|
const aText = document.createElement("p");
|
|
aText.textContent = "Set your theme mode, accent color, username color, profile background, and banner color.";
|
|
|
|
const themeRow = document.createElement("div");
|
|
themeRow.className = "settings-theme-row";
|
|
const currentTheme =
|
|
Glow.state.settings?.theme_mode ||
|
|
localStorage.getItem("glow_theme_mode") ||
|
|
"dark";
|
|
|
|
const darkButton = document.createElement("button");
|
|
darkButton.className = `theme-pill${currentTheme !== "light" ? " active" : ""}`;
|
|
darkButton.type = "button";
|
|
darkButton.textContent = "Dark";
|
|
const lightButton = document.createElement("button");
|
|
lightButton.className = `theme-pill${currentTheme === "light" ? " active" : ""}`;
|
|
lightButton.type = "button";
|
|
lightButton.textContent = "Light";
|
|
|
|
darkButton.addEventListener("click", () => {
|
|
Glow.applyThemeMode("dark");
|
|
Glow.state.settings ||= {};
|
|
Glow.state.settings.theme_mode = "dark";
|
|
Glow.renderSettingsView();
|
|
});
|
|
lightButton.addEventListener("click", () => {
|
|
Glow.applyThemeMode("light");
|
|
Glow.state.settings ||= {};
|
|
Glow.state.settings.theme_mode = "light";
|
|
Glow.renderSettingsView();
|
|
});
|
|
themeRow.append(darkButton, lightButton);
|
|
|
|
const accentWrap = document.createElement("div");
|
|
accentWrap.className = "settings-row";
|
|
const accentLabel = document.createElement("label");
|
|
accentLabel.className = "dialog-label";
|
|
accentLabel.textContent = "Accent color";
|
|
const accentInput = document.createElement("input");
|
|
accentInput.type = "color";
|
|
accentInput.className = "accent-color-input";
|
|
accentInput.value =
|
|
Glow.normalizeAccentColor(
|
|
Glow.state.settings?.accent_color || Glow.state.accentColor
|
|
) || Glow.DEFAULT_ACCENT_COLOR;
|
|
accentInput.addEventListener("input", () => {
|
|
Glow.applyAccentColor(accentInput.value);
|
|
Glow.state.settings ||= {};
|
|
Glow.state.settings.accent_color = accentInput.value;
|
|
});
|
|
accentLabel.append(accentInput);
|
|
accentWrap.append(accentLabel);
|
|
|
|
const backgroundWrap = document.createElement("div");
|
|
backgroundWrap.className = "settings-row";
|
|
const backgroundLabel = document.createElement("label");
|
|
backgroundLabel.className = "dialog-label";
|
|
backgroundLabel.textContent = "Profile background color";
|
|
const backgroundInput = document.createElement("input");
|
|
backgroundInput.type = "color";
|
|
backgroundInput.className = "accent-color-input";
|
|
backgroundInput.value =
|
|
Glow.normalizeAccentColor(Glow.state.settings?.profile_background_color) || "#121214";
|
|
backgroundInput.addEventListener("input", () => {
|
|
Glow.state.settings ||= {};
|
|
Glow.state.settings.profile_background_color = backgroundInput.value;
|
|
});
|
|
backgroundLabel.append(backgroundInput);
|
|
backgroundWrap.append(backgroundLabel);
|
|
|
|
const bannerWrap = document.createElement("div");
|
|
bannerWrap.className = "settings-row";
|
|
const bannerLabel = document.createElement("label");
|
|
bannerLabel.className = "dialog-label";
|
|
bannerLabel.textContent = "Profile banner color";
|
|
const bannerInput = document.createElement("input");
|
|
bannerInput.type = "color";
|
|
bannerInput.className = "accent-color-input";
|
|
bannerInput.value =
|
|
Glow.normalizeAccentColor(Glow.state.settings?.profile_banner_color) || "#3a3140";
|
|
bannerInput.addEventListener("input", () => {
|
|
Glow.state.settings ||= {};
|
|
Glow.state.settings.profile_banner_color = bannerInput.value;
|
|
});
|
|
bannerLabel.append(bannerInput);
|
|
bannerWrap.append(bannerLabel);
|
|
|
|
const nameColorWrap = document.createElement("div");
|
|
nameColorWrap.className = "settings-row";
|
|
const nameColorLabel = document.createElement("label");
|
|
nameColorLabel.className = "dialog-label";
|
|
nameColorLabel.textContent = "Username color";
|
|
const nameColorInput = document.createElement("input");
|
|
nameColorInput.type = "color";
|
|
nameColorInput.className = "accent-color-input";
|
|
nameColorInput.value =
|
|
Glow.normalizeNameColor(Glow.state.settings?.name_color) ||
|
|
Glow.roleDefaultNameColor(Glow.state.currentUser?.role);
|
|
|
|
const nameColorText = document.createElement("input");
|
|
nameColorText.className = "field accent-hex-input";
|
|
nameColorText.type = "text";
|
|
nameColorText.maxLength = 7;
|
|
nameColorText.value =
|
|
Glow.normalizeNameColor(Glow.state.settings?.name_color) || "";
|
|
nameColorText.placeholder = "#7dd3fc";
|
|
|
|
const nameRow = document.createElement("div");
|
|
nameRow.className = "accent-picker-row";
|
|
const previewSwatch = document.createElement("span");
|
|
previewSwatch.className = "accent-preview";
|
|
previewSwatch.style.background =
|
|
Glow.normalizeNameColor(Glow.state.settings?.name_color) ||
|
|
Glow.roleDefaultNameColor(Glow.state.currentUser?.role);
|
|
|
|
const help = document.createElement("div");
|
|
help.className = "header-subtitle";
|
|
help.textContent =
|
|
`Leave empty to use your role default (${Glow.roleDefaultNameColor(Glow.state.currentUser?.role)}).`;
|
|
|
|
const updatePreview = value => {
|
|
const normalized = Glow.normalizeNameColor(value);
|
|
const finalColor =
|
|
normalized || Glow.roleDefaultNameColor(Glow.state.currentUser?.role);
|
|
previewSwatch.style.background = finalColor;
|
|
return finalColor;
|
|
};
|
|
|
|
nameColorInput.addEventListener("input", () => {
|
|
nameColorText.value = nameColorInput.value;
|
|
Glow.state.settings ||= {};
|
|
Glow.state.settings.name_color = nameColorInput.value;
|
|
updatePreview(nameColorInput.value);
|
|
Glow.renderSettingsView();
|
|
});
|
|
|
|
nameColorText.addEventListener("input", () => {
|
|
const normalized = Glow.normalizeNameColor(nameColorText.value.trim());
|
|
Glow.state.settings ||= {};
|
|
Glow.state.settings.name_color = normalized || null;
|
|
updatePreview(nameColorText.value.trim());
|
|
});
|
|
|
|
const resetNameColor = document.createElement("button");
|
|
resetNameColor.className = "button secondary";
|
|
resetNameColor.type = "button";
|
|
resetNameColor.textContent = "Use role default";
|
|
resetNameColor.addEventListener("click", () => {
|
|
Glow.state.settings ||= {};
|
|
Glow.state.settings.name_color = null;
|
|
Glow.renderSettingsView();
|
|
});
|
|
|
|
nameRow.append(nameColorInput, nameColorText, previewSwatch);
|
|
nameColorLabel.append(nameRow);
|
|
nameColorWrap.append(
|
|
nameColorLabel,
|
|
help,
|
|
Glow.renderNameColorPreview(Glow.state.settings?.name_color),
|
|
resetNameColor
|
|
);
|
|
|
|
appearance.append(
|
|
aTitle,
|
|
aText,
|
|
themeRow,
|
|
accentWrap,
|
|
backgroundWrap,
|
|
bannerWrap,
|
|
nameColorWrap
|
|
);
|
|
|
|
const presenceSection = document.createElement("section");
|
|
presenceSection.className = "settings-section";
|
|
const pTitle = document.createElement("h2");
|
|
pTitle.textContent = "Presence & privacy";
|
|
const pText = document.createElement("p");
|
|
pText.textContent = "Control who can view your profile and last active time, and set your presence mode.";
|
|
|
|
const profileVisibility = document.createElement("input");
|
|
profileVisibility.className = "field";
|
|
profileVisibility.value = Glow.state.settings?.profile_visibility || "public";
|
|
profileVisibility.placeholder = "public | members | private";
|
|
|
|
const lastActiveVisibility = document.createElement("input");
|
|
lastActiveVisibility.className = "field";
|
|
lastActiveVisibility.value = Glow.state.settings?.last_active_visibility || "everyone";
|
|
lastActiveVisibility.placeholder = "everyone | members | nobody";
|
|
|
|
const presenceMode = document.createElement("input");
|
|
presenceMode.className = "field";
|
|
presenceMode.value = Glow.state.settings?.presence_mode || Glow.state.currentUser?.presence_mode || "online";
|
|
presenceMode.placeholder = "online | silent | focus | dnd";
|
|
|
|
profileVisibility.addEventListener("input", () => {
|
|
Glow.state.settings ||= {};
|
|
Glow.state.settings.profile_visibility = profileVisibility.value.trim().toLowerCase();
|
|
});
|
|
lastActiveVisibility.addEventListener("input", () => {
|
|
Glow.state.settings ||= {};
|
|
Glow.state.settings.last_active_visibility = lastActiveVisibility.value.trim().toLowerCase();
|
|
});
|
|
presenceMode.addEventListener("input", () => {
|
|
Glow.state.settings ||= {};
|
|
Glow.state.settings.presence_mode = presenceMode.value.trim().toLowerCase();
|
|
});
|
|
|
|
presenceSection.append(
|
|
pTitle,
|
|
pText,
|
|
(() => {
|
|
const label = document.createElement("label");
|
|
label.className = "dialog-label";
|
|
label.textContent = "Profile visibility";
|
|
label.append(profileVisibility);
|
|
return label;
|
|
})(),
|
|
(() => {
|
|
const label = document.createElement("label");
|
|
label.className = "dialog-label";
|
|
label.textContent = "Last active visibility";
|
|
label.append(lastActiveVisibility);
|
|
return label;
|
|
})(),
|
|
(() => {
|
|
const label = document.createElement("label");
|
|
label.className = "dialog-label";
|
|
label.textContent = "Presence mode";
|
|
label.append(presenceMode);
|
|
return label;
|
|
})()
|
|
);
|
|
|
|
const cssSection = document.createElement("section");
|
|
cssSection.className = "settings-section";
|
|
const cTitle = document.createElement("h2");
|
|
cTitle.textContent = "Custom CSS";
|
|
const cText = document.createElement("p");
|
|
cText.textContent =
|
|
"Optional CSS applied only for your account in this browser session and saved to your settings. \n ex: *,html,body{font-size:95%;text-transform:lowercase;}";
|
|
const cssInput = document.createElement("textarea");
|
|
cssInput.className = "field settings-custom-css";
|
|
cssInput.placeholder = "/* Custom CSS */";
|
|
cssInput.value = Glow.state.settings?.custom_css || "";
|
|
cssInput.addEventListener("input", () => {
|
|
Glow.applyCustomCss(cssInput.value);
|
|
Glow.state.settings ||= {};
|
|
Glow.state.settings.custom_css = cssInput.value;
|
|
});
|
|
cssSection.append(cTitle, cText, cssInput);
|
|
|
|
const accountSection = document.createElement("section");
|
|
accountSection.className = "settings-section";
|
|
const accountTitle = document.createElement("h2");
|
|
accountTitle.textContent = "Account";
|
|
const accountText = document.createElement("p");
|
|
accountText.textContent = "Update your public profile and application preferences.";
|
|
const actions = document.createElement("div");
|
|
actions.className = "settings-actions";
|
|
|
|
const editProfile = document.createElement("button");
|
|
editProfile.className = "button";
|
|
editProfile.type = "button";
|
|
editProfile.textContent = "Edit profile";
|
|
editProfile.addEventListener("click", () => {
|
|
Glow.openMyProfile?.(true);
|
|
});
|
|
|
|
const saveSettings = document.createElement("button");
|
|
saveSettings.className = "button";
|
|
saveSettings.type = "button";
|
|
saveSettings.textContent = "Save settings";
|
|
saveSettings.addEventListener("click", async () => {
|
|
try {
|
|
const payload = {
|
|
accent_color:
|
|
Glow.normalizeAccentColor(
|
|
Glow.state.settings?.accent_color || Glow.state.accentColor
|
|
) || Glow.DEFAULT_ACCENT_COLOR,
|
|
name_color:
|
|
Glow.normalizeNameColor(Glow.state.settings?.name_color) || null,
|
|
custom_css: Glow.state.settings?.custom_css || "",
|
|
theme_mode:
|
|
Glow.state.settings?.theme_mode ||
|
|
localStorage.getItem("glow_theme_mode") ||
|
|
"dark",
|
|
profile_background_color:
|
|
Glow.normalizeAccentColor(Glow.state.settings?.profile_background_color) || null,
|
|
profile_banner_color:
|
|
Glow.normalizeAccentColor(Glow.state.settings?.profile_banner_color) || null,
|
|
profile_visibility:
|
|
Glow.state.settings?.profile_visibility || "public",
|
|
last_active_visibility:
|
|
Glow.state.settings?.last_active_visibility || "everyone",
|
|
presence_mode:
|
|
Glow.state.settings?.presence_mode || "online"
|
|
};
|
|
const data = await Glow.apiUpdateMySettings(payload);
|
|
Glow.state.settings = data.settings || payload;
|
|
if (Glow.state.currentUser) {
|
|
Glow.state.currentUser.presence_mode = Glow.state.settings.presence_mode || "online";
|
|
}
|
|
Glow.showToast("Settings saved.");
|
|
Glow.renderSettingsView();
|
|
} catch (error) {
|
|
Glow.showToast(error.message || "Could not save settings.", "error");
|
|
}
|
|
});
|
|
|
|
const resetAccent = document.createElement("button");
|
|
resetAccent.className = "button secondary";
|
|
resetAccent.type = "button";
|
|
resetAccent.textContent = "Reset accent";
|
|
resetAccent.addEventListener("click", () => {
|
|
Glow.resetAccentColor();
|
|
Glow.state.settings ||= {};
|
|
Glow.state.settings.accent_color = Glow.DEFAULT_ACCENT_COLOR;
|
|
Glow.renderSettingsView();
|
|
});
|
|
|
|
actions.append(editProfile, saveSettings, resetAccent);
|
|
accountSection.append(accountTitle, accountText, actions);
|
|
|
|
card.append(appearance, presenceSection, cssSection, accountSection);
|
|
box.append(card);
|
|
}; |