add custom invalid message on admin report create popup user input and fix search component validity check

src/lib/components/Input/Search.svelte

@@ -5,6 +5,7 @@
 	export let searchSuggestionFunc: (
 		input: string
 	) => Promise<{ name: string; value: string }[]> = () => Promise.resolve([]);
+	export let invalidMessage: string | null = null;
 	export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
 	export let label: string | null = null;
 	export let required = false;
@@ -32,21 +33,26 @@
 			class:input-xs={size === 'xs'}
 			class:input-sm={size === 'sm'}
 			class:input-md={size === 'md'}
-			class:input-lg={size === 'md'}
+			class:input-lg={size === 'lg'}
 			{id}
 			{required}
 			bind:value={inputValue}
-			on:input={() => {
+			on:input={(e) => {
 				value = '';
 				searchSuggestionFunc(inputValue).then((v) => {
 					searchSuggestions = v;
-					let searchSuggestionValue = v.find((v) => v.name === inputValue);
-					if (searchSuggestionValue !== undefined) {
-						value = searchSuggestionValue.value;
+					const searchSuggestion = v.find((v) => v.name === inputValue);
+					if (searchSuggestion !== undefined) {
+						inputValue = searchSuggestion.name;
+						value = searchSuggestion.value;
 						searchSuggestions = [];
+						e.target?.setCustomValidity('');
 					}
 				});
 			}}
+			on:invalid={(e) => {
+				if (invalidMessage != null) e.target?.setCustomValidity(invalidMessage);
+			}}
 			pattern={suggestionRequired ? `${value ? inputValue : 'a^'}` : null}
 		/>
 	</div>

src/routes/admin/reports/+page.svelte

@@ -146,10 +146,31 @@
 			class="relative flex flex-col w-2/5 bg-base-200/50 px-4 py-6 overflow-scroll"
 			transition:fly={{ x: 200, duration: 200 }}
 		>
-			<button
-				class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
-				on:click={() => (activeReport = null)}>✕</button
-			>
+			<div class="absolute right-2 top-2 flex justify-center">
+				<form class="dropdown dropdown-end">
+					<!-- svelte-ignore a11y-no-noninteractive-tabindex a11y-label-has-associated-control -->
+					<label tabindex="0" class="btn btn-sm btn-circle btn-ghost text-center">
+						<IconOutline name="share-outline" height="1rem" width="auto" />
+					</label>
+					<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+					<ul
+						tabindex="0"
+						class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-max"
+					>
+						<li>
+							<button
+								on:click={() =>
+									navigator.clipboard.writeText(
+										`${window.location.protocol}//${window.location.host}${env.PUBLIC_BASE_PATH}/report/${activeReport.url_hash}`
+									)}>Öffentlichen Link kopieren</button
+							>
+						</li>
+					</ul>
+				</form>
+				<button class="btn btn-sm btn-circle btn-ghost" on:click={() => (activeReport = null)}
+					>✕</button
+				>
+			</div>
 			<h3 class="font-roboto font-semibold text-2xl">Report</h3>
 			<div class="break-words my-2">
 				<i class="font-medium">{activeReport.reporter.username}</i> hat

src/routes/admin/reports/NewReportModal.svelte

@@ -58,6 +58,7 @@
 				size="sm"
 				suggestionRequired={true}
 				searchSuggestionFunc={usernameSuggestions}
+				invalidMessage="Es können nur registrierte Spieler Report Autoren sein"
 				label="Reporter"
 				required={true}
 				bind:value={reporter}
@@ -66,6 +67,7 @@
 				size="sm"
 				suggestionRequired={true}
 				searchSuggestionFunc={usernameSuggestions}
+				invalidMessage="Es können nur registrierte Spieler reportet werden"
 				label="Reporteter User"
 				required={true}
 				bind:value={reported}

src/routes/admin/users/+page.svelte

@@ -20,7 +20,7 @@
 	let userFilter = { name: null, edition: null };
 	let userTableContainerElement: HTMLDivElement;
 
-	function fetchPageUsers(page: number, filter: any) {
+	function fetchPageUsers(page: number) {
 		if (!browser) return;
 
 		if (userTableContainerElement) userTableContainerElement.scrollTop = 0;
@@ -29,7 +29,7 @@
 		currentPageUsersRequest = new Promise(async (resolve, reject) => {
 			const response = await fetch(`${env.PUBLIC_BASE_PATH}/admin/users`, {
 				method: 'POST',
-				body: JSON.stringify({ ...filter, limit: usersPerPage, from: usersPerPage * page })
+				body: JSON.stringify({ ...userFilter, limit: usersPerPage, from: usersPerPage * page })
 			});
 			if (response.ok) {
 				currentPageUsers = await response.json();
@@ -40,7 +40,10 @@
 		});
 	}
 
-	$: fetchPageUsers(userPage, userFilter);
+	$: fetchPageUsers(userPage);
+	// prettier-ignore
+	function fetchFilterPageUsers(_: any) { userPage == 0 ? fetchPageUsers(0) : userPage = 0 }
+	$: fetchFilterPageUsers(userFilter);
 
 	let sortKey: string | null = null;
 	let sortAsc = false;
@@ -207,7 +210,7 @@
 		</table>
 		<div class="flex justify-center items-center mb-2 mt-4 w-full">
 			<div class="join">
-				{#each Array(Math.ceil(data.count / usersPerPage) || 1) as _, i}
+				{#each Array(currentPageUsers.length === usersPerPage || userPage > 0 ? Math.ceil(data.count / usersPerPage) || 1 : 1) as _, i}
 					<button
 						class="join-item btn"
 						class:btn-active={i === userPage}