From f3b30d46c944433e3d9aef1e751301b47270fa5f Mon Sep 17 00:00:00 2001 From: Andre Beging Date: Tue, 7 Oct 2025 15:33:45 +0200 Subject: [PATCH] feat: Refactor session management UI and enhance accessibility features --- app/static/app.js | 64 +++++++++++++++++++++++++++++----------- app/static/style.css | 20 +++++++++++-- app/templates/index.html | 24 ++++++++++++--- 3 files changed, 85 insertions(+), 23 deletions(-) diff --git a/app/static/app.js b/app/static/app.js index 61da78a..4312652 100644 --- a/app/static/app.js +++ b/app/static/app.js @@ -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 = `${statusText}Manage`; } 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(); diff --git a/app/static/style.css b/app/static/style.css index 596579c..167dc77 100644 --- a/app/static/style.css +++ b/app/static/style.css @@ -73,11 +73,28 @@ main { justify-content: center; align-items: center; gap: 1rem; + flex-wrap: wrap; } .helper-button { min-width: 14rem; font-weight: 600; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.45rem; +} + +.session-card-toggle-status { + display: inline-flex; + align-items: center; + font-weight: 600; + line-height: 1.1; +} + +.session-card-toggle-text { + font-weight: 500; + color: var(--muted); } .card { @@ -143,8 +160,7 @@ main { } .session-toggle { - align-self: center; - white-space: nowrap; + align-self: flex-start; } .session-details { diff --git a/app/templates/index.html b/app/templates/index.html index de6464d..29b1df9 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -19,7 +19,7 @@
-
+
+