From 7cdd58f149d79bf662e9453f0f9f0385ae7a58ad Mon Sep 17 00:00:00 2001
From: aurelienrichard <a.richard.dev@gmail.com>
Date: Wed, 15 May 2024 13:26:22 +0200
Subject: [PATCH] autofocus input fields on page load to improve ux

---
 apps/privelte/src/lib/components/Chat.svelte  | 12 ++-
 .../src/lib/components/Chat.svelte.test.ts    |  8 +-
 .../src/lib/components/Message.svelte.test.ts |  4 -
 .../src/lib/components/NewMessageForm.svelte  |  6 +-
 .../components/NewMessageForm.svelte.test.ts  |  4 -
 .../src/routes/room/[id]/join/+page.svelte    | 81 ++++++++++---------
 6 files changed, 60 insertions(+), 55 deletions(-)

diff --git a/apps/privelte/src/lib/components/Chat.svelte b/apps/privelte/src/lib/components/Chat.svelte
index a00eaf3..073d36d 100644
--- a/apps/privelte/src/lib/components/Chat.svelte
+++ b/apps/privelte/src/lib/components/Chat.svelte
@@ -29,14 +29,18 @@
 </script>
 
 <div class="absolute left-0 top-0 h-full w-full space-y-4 overflow-y-auto overflow-x-clip px-4">
-	<h1 class="h2 text-surface-600-300-token mb-3 text-center leading-snug md:mb-6">
-		You're all
+	<h1 class="h3 text-surface-600-300-token mb-3 text-center leading-snug md:mb-6">
+		Share the link
 		<span
 			class="dark:from-gradient-1-dark dark:to-gradient-2-dark from-gradient-1-light to-gradient-2-light bg-gradient-to-br box-decoration-clone bg-clip-text capitalize text-transparent"
-			>set</span
+			>below</span
+		>
+		to invite
+		<span
+			class="dark:from-gradient-1-dark dark:to-gradient-2-dark from-gradient-1-light to-gradient-2-light bg-gradient-to-br box-decoration-clone bg-clip-text capitalize text-transparent"
+			>participants</span
 		>.
 	</h1>
-	<p class="text-center text-lg md:text-xl">Share the link below to invite participants.</p>
 	<Clipboard url={$page.url} />
 	<hr class="my-4" />
 	<div class="text-surface-600-300-token">
diff --git a/apps/privelte/src/lib/components/Chat.svelte.test.ts b/apps/privelte/src/lib/components/Chat.svelte.test.ts
index 77e6cc6..c7c12b5 100644
--- a/apps/privelte/src/lib/components/Chat.svelte.test.ts
+++ b/apps/privelte/src/lib/components/Chat.svelte.test.ts
@@ -6,14 +6,10 @@ import type { Payload, Presence } from '$lib/types/types'
 describe('Chat component', () => {
 	const userId = '1'
 
-	test('should render', () => {
-		render(Chat, { userId, entries: [], subscribed: 'ok' })
-	})
-
 	test('should render share link message and clipboard component', () => {
-		const { getByText, getByRole } = render(Chat, { userId, entries: [], subscribed: 'ok' })
+		const { getByRole } = render(Chat, { userId, entries: [], subscribed: 'ok' })
 
-		expect(getByText('Share the link below to invite participants.')).toBeInTheDocument()
+		expect(getByRole('heading', { level: 1 })).toBeInTheDocument()
 		expect(getByRole('button', { name: 'Copy to clipboard.' })).toBeInTheDocument()
 	})
 
diff --git a/apps/privelte/src/lib/components/Message.svelte.test.ts b/apps/privelte/src/lib/components/Message.svelte.test.ts
index 44dc006..7ca3c18 100644
--- a/apps/privelte/src/lib/components/Message.svelte.test.ts
+++ b/apps/privelte/src/lib/components/Message.svelte.test.ts
@@ -13,10 +13,6 @@ describe('Message component', () => {
 		id: '2'
 	}
 
-	test('should render', () => {
-		render(Message, { payload, status: 'success', isOwnMessage: false })
-	})
-
 	test('should display the message and username', () => {
 		const { getByText } = render(Message, { payload, status: 'success', isOwnMessage: false })
 
diff --git a/apps/privelte/src/lib/components/NewMessageForm.svelte b/apps/privelte/src/lib/components/NewMessageForm.svelte
index 5fdd551..059669b 100644
--- a/apps/privelte/src/lib/components/NewMessageForm.svelte
+++ b/apps/privelte/src/lib/components/NewMessageForm.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher, afterUpdate } from 'svelte'
+	import { createEventDispatcher, afterUpdate, onMount } from 'svelte'
 	import { nanoid } from 'nanoid'
 
 	export let roomId: string
@@ -18,6 +18,10 @@
 		}
 	}
 
+	onMount(() => {
+		textarea.focus()
+	})
+
 	afterUpdate(() => {
 		setHeight()
 	})
diff --git a/apps/privelte/src/lib/components/NewMessageForm.svelte.test.ts b/apps/privelte/src/lib/components/NewMessageForm.svelte.test.ts
index 17ffbdb..aacc68c 100644
--- a/apps/privelte/src/lib/components/NewMessageForm.svelte.test.ts
+++ b/apps/privelte/src/lib/components/NewMessageForm.svelte.test.ts
@@ -7,10 +7,6 @@ import NewMessageForm from './NewMessageForm.svelte'
 describe('New message form component', () => {
 	const props = { roomId: '1' }
 
-	test('should render', () => {
-		render(NewMessageForm, props)
-	})
-
 	test('should display placeholder text', () => {
 		const { getByPlaceholderText } = render(NewMessageForm, props)
 
diff --git a/apps/privelte/src/routes/room/[id]/join/+page.svelte b/apps/privelte/src/routes/room/[id]/join/+page.svelte
index bfd7af3..2ba95cb 100644
--- a/apps/privelte/src/routes/room/[id]/join/+page.svelte
+++ b/apps/privelte/src/routes/room/[id]/join/+page.svelte
@@ -1,10 +1,13 @@
 <script lang="ts">
 	import { ProgressRadial } from '@skeletonlabs/skeleton'
+	import { onMount } from 'svelte'
 	import { enhance } from '$app/forms'
 	import type { SubmitFunction } from './$types'
 
 	let loading = false
 
+	let input: HTMLInputElement
+
 	const handleSubmit: SubmitFunction = () => {
 		loading = true
 		return async ({ update }) => {
@@ -12,6 +15,10 @@
 			loading = false
 		}
 	}
+
+	onMount(() => {
+		input.focus()
+	})
 </script>
 
 <div class="mb-8 text-center md:mb-12">
@@ -22,44 +29,46 @@
 			>username</span
 		>.
 	</h1>
-	<p class="md:text-xl">
-		It will be exclusive to this room and serve only as a display name for the messages you
-		send.
-	</p>
+	<p class="md:text-xl">Usernames are exclusive to each room.</p>
 </div>
 
 <form method="POST" use:enhance={handleSubmit}>
-	<label class="label capitalize">
-		<span>username</span>
-		<div
-			class="input-group input-group-divider [&_input]:bg-surface-100-800-token dark:focus-within:border-primary-500 grid-cols-[1fr_auto] focus-within:border-indigo-500"
+	<div
+		class="input-group input-group-divider [&_input]:bg-surface-100-800-token dark:focus-within:border-primary-500 grid-cols-[1fr_auto] focus-within:border-indigo-500"
+	>
+		<input
+			bind:this={input}
+			type="text"
+			name="username"
+			minlength="3"
+			maxlength="20"
+			placeholder="Username"
+			required
+		/>
+		<button
+			type="submit"
+			class="btn dark:variant-soft-tertiary variant-soft-surface rounded-l-none"
+			title="Let's chat!"
+			disabled={loading}
 		>
-			<input type="text" name="username" minlength="3" maxlength="20" required />
-			<button
-				type="submit"
-				class="btn dark:variant-soft-tertiary variant-soft-surface rounded-l-none"
-				title="Let's chat!"
-				disabled={loading}
-			>
-				{#if loading}
-					<ProgressRadial width="w-6" />
-				{:else}
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentColor"
-						class="h-6 w-6"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="m12.75 15 3-3m0 0-3-3m3 3h-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
-						/>
-					</svg>
-				{/if}
-			</button>
-		</div>
-	</label>
+			{#if loading}
+				<ProgressRadial width="w-6" />
+			{:else}
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					class="h-6 w-6"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="m12.75 15 3-3m0 0-3-3m3 3h-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+					/>
+				</svg>
+			{/if}
+		</button>
+	</div>
 </form>