feat: Refactor session management UI and enhance accessibility features

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 = `<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();

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 {