Refactor persona creation UI: replace inline form with modal implementation and improve styling.

This commit is contained in:
2026-01-07 21:31:06 +01:00
parent 8995a1e374
commit 2edda0c5f5
4 changed files with 55 additions and 58 deletions
+23 -16
View File
@@ -32,6 +32,8 @@ const newPersonaBtn = document.getElementById("newPersona");
const clearPersonaBtn = document.getElementById("clearPersona");
const personaCancelBtn = document.getElementById("personaCancel");
const activePersonaStatus = document.getElementById("activePersonaStatus");
const personaModal = document.getElementById("personaModal");
const personaCloseBtn = document.getElementById("personaClose");
let isProcessing = false;
let chatSessions = [];
@@ -194,29 +196,30 @@ function setActivePersonaStatus() {
}
function openPersonaForm(persona = null) {
personaForm.classList.remove('hidden');
personaModal.classList.remove("hidden");
if (persona) {
editingPersonaId = persona.id;
personaFormTitle.textContent = 'Edit persona';
personaNameInput.value = persona.name || '';
personaPronounsInput.value = persona.pronouns || '';
personaAppearanceInput.value = persona.appearance || '';
personaBackgroundInput.value = persona.background || '';
personaDetailsInput.value = persona.details || '';
personaFormTitle.textContent = "Edit persona";
personaNameInput.value = persona.name || "";
personaPronounsInput.value = persona.pronouns || "";
personaAppearanceInput.value = persona.appearance || "";
personaBackgroundInput.value = persona.background || "";
personaDetailsInput.value = persona.details || "";
} else {
editingPersonaId = null;
personaFormTitle.textContent = 'Create persona';
personaNameInput.value = '';
personaPronounsInput.value = '';
personaAppearanceInput.value = '';
personaBackgroundInput.value = '';
personaDetailsInput.value = '';
personaFormTitle.textContent = "Create persona";
personaNameInput.value = "";
personaPronounsInput.value = "";
personaAppearanceInput.value = "";
personaBackgroundInput.value = "";
personaDetailsInput.value = "";
}
personaNameInput.focus();
}
function closePersonaForm() {
personaForm.classList.add('hidden');
personaModal.classList.add("hidden");
editingPersonaId = null;
}
@@ -588,8 +591,6 @@ msgInput.addEventListener('input', function () {
newPersonaBtn.addEventListener('click', () => openPersonaForm());
personaCancelBtn.addEventListener('click', () => closePersonaForm());
clearPersonaBtn.addEventListener('click', () => clearPersona());
personaForm.addEventListener('submit', (event) => {
@@ -597,6 +598,12 @@ personaForm.addEventListener('submit', (event) => {
savePersona();
});
personaCloseBtn.addEventListener("click", closePersonaForm);
personaModal.addEventListener("click", (e) => {
if (e.target === personaModal) closePersonaForm();
});
window.addEventListener('load', () => {
checkSession();
displayModels();