Adding playright ids for testing. plus unreadCount ts

Author: simonredfern

src/lib/components/LegalDocumentModal.svelte

@@ -67,6 +67,7 @@
 	<Dialog.Trigger
 		type="button"
 		class="rounded text-primary-500 hover:underline focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:outline-none"
+		data-testid="legal-trigger-{documentName}"
 	>
 		{triggerText}
 	</Dialog.Trigger>
@@ -148,6 +149,7 @@
 						onclick={handleAccept}
 						disabled={false}
 						class="rounded-md border border-transparent bg-primary-500 px-4 py-2 text-sm font-medium text-white hover:bg-primary-600 focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+						data-testid="legal-accept"
 					>
 						I Accept
 					</button>

src/lib/stores/unreadCount.svelte.ts

@@ -0,0 +1,14 @@
+class UnreadCountStore {
+	total = $state(0);
+
+	set(count: number) {
+		this.total = count;
+	}
+
+	/** Clear the unread count for a room the user is currently viewing. */
+	clearRoom(roomCount: number) {
+		this.total = Math.max(0, this.total - roomCount);
+	}
+}
+
+export const unreadCount = new UnreadCountStore();

src/routes/forgot-password/+page.svelte

@@ -22,7 +22,7 @@
 		{#if form?.success}
 			<!-- Success Message -->
 			<div class="mx-auto w-full max-w-md space-y-4">
-				<div class="rounded-lg border border-success-500 bg-success-500/10 p-6 text-center">
+				<div class="rounded-lg border border-success-500 bg-success-500/10 p-6 text-center" data-testid="forgot-password-success">
 					<div class="flex justify-center mb-4">
 						<svg class="h-16 w-16 text-success-500" fill="currentColor" viewBox="0 0 20 20">
 							<path
@@ -96,6 +96,7 @@
 					disabled={!canSubmit}
 					class="btn preset-filled-primary-500 w-full disabled:cursor-not-allowed disabled:opacity-50"
 					aria-label="Send Reset Link"
+					data-testid="submit-forgot-password"
 				>
 					{#if !canSubmit}
 						Enter Username and Email

src/routes/login/+page.svelte

@@ -103,7 +103,7 @@
         {/if}
 
         {#if data.errorMessage}
-            <div class="mt-4 p-4 rounded-lg bg-red-500/20 border border-red-500/50">
+            <div class="mt-4 p-4 rounded-lg bg-red-500/20 border border-red-500/50" data-testid="login-error">
                 <div class="flex items-start justify-between gap-2">
                     <div class="flex items-start gap-3 flex-1 min-w-0">
                         <span class="text-red-400 text-xl flex-shrink-0">⚠</span>
@@ -178,7 +178,7 @@
             <div class="space-y-3 mt-4">
                 <p class="text-center text-sm text-gray-300">Choose your authentication provider:</p>
                 {#each data.availableProviders as provider}
-                    <button type="button" class="btn preset-filled-primary-500 mx-auto w-full">
+                    <button type="button" class="btn preset-filled-primary-500 mx-auto w-full" data-testid="provider-{provider.provider}">
                         <a href="/login/{provider.provider}" class="w-full flex items-center justify-between">
                             <span class="flex items-center gap-2">
                                 <span class="text-green-400">●</span>

src/routes/register/+page.svelte

@@ -107,7 +107,7 @@
 	<article class="space-y-4 p-4">
 		<form class="mx-auto w-full max-w-md space-y-6" method="POST">
 			{#if showError && form?.error}
-				<div class="bg-error-500/10 border-error-500 rounded-lg border p-4 text-center">
+				<div class="bg-error-500/10 border-error-500 rounded-lg border p-4 text-center" data-testid="registration-error">
 					<p class="text-error-500 font-semibold">{form?.error}</p>
 				</div>
 			{/if}
@@ -291,7 +291,7 @@
 			</div>
 			<hr class="hr" />
 			{#if showError && form?.error}
-				<div class="bg-error-500/10 border-error-500 rounded-lg border p-4 text-center">
+				<div class="bg-error-500/10 border-error-500 rounded-lg border p-4 text-center" data-testid="registration-error">
 					<p class="text-error-500 font-semibold">{form?.error}</p>
 				</div>
 			{/if}
@@ -300,6 +300,7 @@
 				disabled={!canSubmit}
 				class="btn preset-filled-primary-500 mt-5 w-full disabled:cursor-not-allowed disabled:opacity-50"
 				aria-label="submit"
+				data-testid="submit-registration"
 			>
 				{#if !termsAccepted || !privacyAccepted}
 					Please Accept Legal Documents

src/routes/reset-password/[token]/+page.svelte

@@ -58,7 +58,7 @@
 	<article class="space-y-4 p-4">
 		<form class="mx-auto w-full max-w-md space-y-6" method="POST">
 			{#if form?.error}
-				<div class="bg-error-500/10 border-error-500 rounded-lg border p-4 text-center">
+				<div class="bg-error-500/10 border-error-500 rounded-lg border p-4 text-center" data-testid="reset-password-error">
 					<p class="text-error-500 font-semibold">{form.error}</p>
 				</div>
 			{/if}
@@ -161,6 +161,7 @@
 				disabled={!canSubmit}
 				class="btn preset-filled-primary-500 mt-5 w-full disabled:cursor-not-allowed disabled:opacity-50"
 				aria-label="Reset Password"
+				data-testid="submit-reset-password"
 			>
 				{#if !isPasswordValid}
 					Password Must Meet Requirements

src/routes/user-validation/+page.svelte

@@ -13,7 +13,7 @@
 	</header>
 	<article class="space-y-4 p-4">
 		{#if data.success}
-			<div class="preset-filled-success-50-950 shadow-md rounded-lg p-6 m-1.5 text-center">
+			<div class="preset-filled-success-50-950 shadow-md rounded-lg p-6 m-1.5 text-center" data-testid="validation-success">
 				<div class="flex justify-center mb-4">
 					<CheckCircle class="h-16 w-16 text-success-500" />
 				</div>
@@ -26,13 +26,14 @@
 					<a
 						href="/login"
 						class="btn preset-filled-primary-500 hover:preset-filled-primary-600"
+						data-testid="go-to-login"
 					>
 						Go to Login
 					</a>
 				</div>
 			</div>
 		{:else}
-			<div class="preset-filled-error-50-950 shadow-md rounded-lg p-6 m-1.5 text-center">
+			<div class="preset-filled-error-50-950 shadow-md rounded-lg p-6 m-1.5 text-center" data-testid="validation-error">
 				<div class="flex justify-center mb-4">
 					<XCircle class="h-16 w-16 text-error-500" />
 				</div>