make reported user nullable

src/lib/components/Input/Input.svelte

@@ -9,6 +9,7 @@
 	export let placeholder: string | null = null;
 	export let required = false;
 	export let disabled = false;
+	export let readonly = false;
 	export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
 	export let pickyWidth = true;
 
@@ -85,6 +86,7 @@
 					{placeholder}
 					{required}
 					{disabled}
+					{readonly}
 					bind:this={inputElement}
 					autocomplete="off"
 					on:input={(e) => {

src/lib/components/Input/Search.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+
 	export let id: string | null = null;
 	export let value = '';
+	export let inputValue = '';
 	export let suggestionRequired = false;
+	export let emptyAllowed = false;
 	export let searchSuggestionFunc: (
 		input: string
 	) => Promise<{ name: string; value: string }[]> = () => Promise.resolve([]);
@@ -10,7 +14,8 @@
 	export let label: string | null = null;
 	export let required = false;
 
-	let inputValue: string;
+	const dispatch = createEventDispatcher();
+
 	let searchSuggestions: { name: string; value: string }[] = [];
 	$: if (!suggestionRequired) value = inputValue;
 </script>
@@ -47,13 +52,18 @@
 						value = searchSuggestion.value;
 						searchSuggestions = [];
 						e.target?.setCustomValidity('');
+						dispatch('submit', { input: inputValue, value: value });
+					} else if (inputValue === '' && emptyAllowed) {
+						dispatch('submit', { input: '', value: '' });
 					}
 				});
 			}}
 			on:invalid={(e) => {
 				if (invalidMessage != null) e.target?.setCustomValidity(invalidMessage);
 			}}
-			pattern={suggestionRequired ? `${value ? inputValue : 'a^'}` : null}
+			pattern={suggestionRequired
+				? `${value ? inputValue : 'a^' + (emptyAllowed ? '|$^' : '')}`
+				: null}
 		/>
 	</div>
 
@@ -68,6 +78,7 @@
 							inputValue = searchSuggestion.name;
 							value = searchSuggestion.value;
 							searchSuggestions = [];
+							dispatch('submit', { input: inputValue, value: value });
 						}}>{searchSuggestion.name}</button
 					>
 				</li>
@@ -76,6 +87,7 @@
 	{/if}
 </div>
 
+<!-- close the search suggestions box when clicking outside -->
 {#if inputValue && searchSuggestions.length !== 0}
 	<button
 		class="absolute top-0 left-0 z-10 w-full h-full cursor-default"

src/lib/server/database.ts

@@ -56,7 +56,7 @@ export class Report extends Model {
 	@Column({ type: DataTypes.INTEGER, allowNull: false })
 	@ForeignKey(() => User)
 	declare reporter_id: number;
-	@Column({ type: DataTypes.INTEGER, allowNull: false })
+	@Column({ type: DataTypes.INTEGER })
 	@ForeignKey(() => User)
 	declare reported_id: number;
 	@Column({ type: DataTypes.INTEGER })

src/lib/utils.ts

@@ -0,0 +1,18 @@
+import { env } from '$env/dynamic/public';
+
+export async function usernameSuggestions(
+	username: string
+): Promise<{ name: string; value: string }[]> {
+	const response = await fetch(`${env.PUBLIC_BASE_PATH}/admin/users`, {
+		method: 'POST',
+		body: JSON.stringify({
+			limit: 6,
+			search: username,
+			slim: true
+		})
+	});
+	const json: { username: string; uuid: string }[] = await response.json();
+	return json.map((v) => {
+		return { name: v.username, value: v.uuid };
+	});
+}