update oauth expired modal

index.html

@@ -47,5 +47,38 @@
 				<div class="task-container secondary"></div>
 			</div>
 		</div>
+
+		<div
+			id="oauth-expired-modal"
+			class="oauth-modal hidden"
+			role="alertdialog"
+			aria-labelledby="oauth-modal-title"
+			aria-modal="true"
+		>
+			<div class="oauth-modal__content">
+				<h2 id="oauth-modal-title">Twitch OAuth token expired</h2>
+				<p>
+					The token in <code>auth.js</code> is no longer valid. Chat
+					commands will not work until you replace it.
+				</p>
+				<ol>
+					<li>
+						Open
+						<a
+							href="https://sarayalth.github.io/TwitchOAuthGenerator/"
+							target="_blank"
+							rel="noopener noreferrer"
+							>Twitch OAuth Generator</a
+						>
+					</li>
+					<li>Click <strong>Set Default Scopes</strong></li>
+					<li>
+						Click <strong>Get OAuth Token</strong>, then paste the
+						token into <code>auth.js</code>
+					</li>
+					<li>Reload this browser source</li>
+				</ol>
+			</div>
+		</div>
 	</body>
 </html>

scripts/index.js

@@ -44,4 +44,31 @@ const oauth_token = auth.oauth.includes("oauth:")
 	: `oauth:${auth.oauth}`;
 const auth_username = auth.username ? auth.username : auth.channel;
 
-ComfyJS.Init(auth_username, `${oauth_token}`, [auth.channel]);
+function showOAuthExpiredModal() {
+	const modal = document.getElementById("oauth-expired-modal");
+	if (modal) modal.classList.remove("hidden");
+}
+
+async function validateOAuthToken() {
+	const bareToken = oauth_token.replace(/^oauth:/i, "");
+	const response = await fetch("https://id.twitch.tv/oauth2/validate", {
+		headers: { Authorization: `OAuth ${bareToken}` },
+	});
+	return response.ok;
+}
+
+async function initChat() {
+	try {
+		const valid = await validateOAuthToken();
+		if (!valid) {
+			showOAuthExpiredModal();
+			return;
+		}
+	} catch (err) {
+		console.warn("Could not validate OAuth token; connecting anyway.", err);
+	}
+
+	ComfyJS.Init(auth_username, oauth_token, [auth.channel]);
+}
+
+initChat();

styles/taskList.css

@@ -167,4 +167,59 @@
   width: -moz-fit-content;
   width: fit-content;
   margin-left: calc(var(--focus-task-horizontal-padding) * -1);
-}/*# sourceMappingURL=taskList.css.map */
+}/*# sourceMappingURL=taskList.css.map */
+.oauth-modal {
+	position: fixed;
+	inset: 0;
+	z-index: 10000;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 1.5rem;
+	background: rgba(0, 0, 0, 0.75);
+}
+
+.oauth-modal.hidden {
+	display: none;
+}
+
+.oauth-modal__content {
+	max-width: 28rem;
+	padding: 1.5rem 1.75rem;
+	border-radius: 0.5rem;
+	background: #18181b;
+	color: #efeff1;
+	font-family: system-ui, -apple-system, Segoe UI, sans-serif;
+	font-size: 0.95rem;
+	line-height: 1.5;
+	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+}
+
+.oauth-modal__content h2 {
+	margin-bottom: 0.75rem;
+	font-size: 1.15rem;
+	font-weight: 600;
+}
+
+.oauth-modal__content p {
+	margin-bottom: 0.75rem;
+}
+
+.oauth-modal__content ol {
+	margin-left: 1.25rem;
+}
+
+.oauth-modal__content li + li {
+	margin-top: 0.35rem;
+}
+
+.oauth-modal__content a {
+	color: #9147ff;
+}
+
+.oauth-modal__content code {
+	padding: 0.1em 0.35em;
+	border-radius: 0.2rem;
+	background: rgba(255, 255, 255, 0.1);
+	font-size: 0.9em;
+}