troogs/TgMessageHook
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Refactor session management UI and enhance accessibility features

Browse Source
This commit is contained in:
Andre Beging
2025-10-07 15:33:45 +02:00
parent ddf29c1d36
commit f3b30d46c9
3 changed files with 85 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
app/static/app.js
View File

@@ -1,9 +1,10 @@
const sessionSectionEl = document.querySelector("#session-section");
const sessionStatusEl = document.querySelector("#session-status");
const sessionUserEl = document.querySelector("#session-user");
const loginFeedbackEl = document.querySelector("#login-feedback");
const sessionSummaryTextEl = document.querySelector("#session-summary-text");
const sessionDetailsEl = document.querySelector("#session-details");
const toggleSessionBtn = document.querySelector("#toggle-session");
const sessionCardToggleBtn = document.querySelector("#session-card-toggle");
const startLoginForm = document.querySelector("#start-login-form");
const verifyLoginForm = document.querySelector("#verify-login-form");
const logoutButton = document.querySelector("#logout-button");
@@ -18,8 +19,8 @@ const recentChatsListEl = document.querySelector("#recent-chats-list");
const closeRecentChatsBtn = document.querySelector("#close-recent-chats");
const recentChatsSearchEl = document.querySelector("#recent-chats-search");
let sessionDetailsVisible = false;
let sessionDetailsTouched = false;
let sessionCardVisible = false;
let sessionCardTouched = false;
let createFormVisible = false;
let createFormTouched = false;
let lastFocusedElement = null;
@@ -39,15 +40,37 @@ if (recentChatsSearchEl) {
});
}
function setSessionDetailsVisibility(show, { fromUser = false } = {}) {
if (!toggleSessionBtn || !sessionDetailsEl) return;
sessionDetailsVisible = show;
function setSessionCardVisibility(show, { fromUser = false } = {}) {
if (!sessionSectionEl || !sessionCardToggleBtn) return;
sessionCardVisible = show;
if (fromUser) {
sessionDetailsTouched = true;
sessionCardTouched = true;
}
sessionDetailsEl.classList.toggle("hidden", !show);
toggleSessionBtn.setAttribute("aria-expanded", String(show));
toggleSessionBtn.textContent = show ? "Hide session controls" : "Manage session";
sessionSectionEl.classList.toggle("hidden", !show);
sessionCardToggleBtn.setAttribute("aria-expanded", String(show));
sessionCardToggleBtn.setAttribute("aria-label", show ? "Hide session controls" : "Show session controls");
if (show && fromUser && toggleSessionBtn) {
toggleSessionBtn.focus({ preventScroll: true });
} else if (!show && fromUser) {
sessionCardToggleBtn.focus({ preventScroll: true });
}
updateSessionCardToggleLabel();
}
function updateSessionCardToggleLabel(status) {
if (!sessionCardToggleBtn) return;
const statusText = status?.authorized
? "Authorized"
: status?.code_sent
? "Awaiting code"
: status?.phone_number
? "Phone pending"
: status?.authorized === false
? "Not authorized"
: sessionStatusEl?.textContent?.trim() || "Status";
const statusColor = sessionStatusEl?.style?.color || "inherit";
sessionCardToggleBtn.innerHTML = `<span class="session-card-toggle-status" style="color: ${statusColor}">${statusText}</span><span class="session-card-toggle-text">Manage</span>`;
}
function setCreateFormVisibility(show, { fromUser = false } = {}) {
@@ -74,11 +97,17 @@ if (toggleCreateBtn) {
setCreateFormVisibility(false);
}
if (sessionCardToggleBtn) {
sessionCardToggleBtn.addEventListener("click", () => {
setSessionCardVisibility(!sessionCardVisible, { fromUser: true });
});
updateSessionCardToggleLabel();
}
if (toggleSessionBtn) {
toggleSessionBtn.addEventListener("click", () => {
setSessionDetailsVisibility(!sessionDetailsVisible, { fromUser: true });
setSessionCardVisibility(false, { fromUser: true });
});
setSessionDetailsVisibility(false);
}
async function fetchJSON(url, options = {}) {
@@ -150,12 +179,13 @@ function updateSessionUI(status) {
startLoginForm.classList.remove("hidden");
}
const shouldShowDetails = !status.authorized || status.code_sent;
if (!sessionDetailsTouched) {
setSessionDetailsVisibility(shouldShowDetails);
} else if (shouldShowDetails && !sessionDetailsVisible) {
setSessionDetailsVisibility(true);
if (!status.authorized || status.code_sent) {
if (!sessionCardVisible) {
setSessionCardVisibility(true);
}
}
updateSessionCardToggleLabel(status);
setRecentChatsAvailability(status.authorized);
if (!status.authorized) {
closeRecentChatsDialog();