feat: separate login lobby from workspace

internal/webapp/static/app.js

@@ -8,6 +8,9 @@ const state = {
 };
 
 const els = {
+  loginView: document.querySelector("#login-view"),
+  workspaceView: document.querySelector("#workspace-view"),
+  loginError: document.querySelector("#login-error"),
   sessionForm: document.querySelector("#session-form"),
   answerForm: document.querySelector("#answer-form"),
   answerText: document.querySelector("#answer-text"),
@@ -25,7 +28,6 @@ const els = {
   status: document.querySelector("#status-line"),
   error: document.querySelector("#error-line"),
   title: document.querySelector("#session-title"),
-  gSignIn: document.querySelector(".g_id_signin"),
   userInfo: document.querySelector("#user-info"),
   logoutButton: document.querySelector("#logout-button"),
 };
@@ -370,10 +372,9 @@ window.handleCredentialResponse = async (response) => {
     });
     localStorage.setItem("tutor_token", res.token);
     localStorage.setItem("tutor_user", JSON.stringify(res.user));
-    setStatus(`Signed in as ${res.user.email}`);
     renderAuth();
   } catch (err) {
-    showError(err.message);
+    if (els.loginError) els.loginError.textContent = err.message;
   }
 };
 
@@ -381,14 +382,13 @@ function renderAuth() {
   const user = JSON.parse(localStorage.getItem("tutor_user") || "null");
   const token = localStorage.getItem("tutor_token");
   if (user && token) {
-    els.gSignIn.style.display = "none";
-    els.userInfo.style.display = "block";
+    els.loginView.style.display = "none";
+    els.workspaceView.style.display = "grid";
     els.userInfo.textContent = user.email;
-    els.logoutButton.style.display = "inline-block";
+    setStatus(`Signed in as ${user.email}`);
   } else {
-    els.gSignIn.style.display = "block";
-    els.userInfo.style.display = "none";
-    els.logoutButton.style.display = "none";
+    els.loginView.style.display = "flex";
+    els.workspaceView.style.display = "none";
   }
 }