chore: encode the search state into the URL

components/search-form.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 export interface SearchFormData {
-	search: string;
+	query: string;
 }
 
 const props = defineProps<SearchFormData>();
@@ -14,7 +14,7 @@ function onSubmit(event: Event) {
 	const formData = new FormData(element);
 
 	emit("submit", {
-		search: formData.get("q") as string,
+		query: formData.get("q") as string,
 	});
 }
 
@@ -33,7 +33,7 @@ const searchLabelId = "search-field";
 					<div>
 						<Input
 							:id="searchLabelId"
-							:default-value="props.search"
+							:default-value="props.query"
 							name="q"
 							placeholder="Suche"
 							type="search"

pages/search.vue

@@ -1,4 +1,7 @@
 <script lang="ts" setup>
+import * as v from "valibot";
+
+import type { SearchFormData } from "@/components/search-form.vue";
 import {
 	Pagination,
 	PaginationEllipsis,
@@ -14,6 +17,7 @@ defineRouteRules({
 	prerender: true,
 });
 
+const router = useRouter();
 const t = useTranslations();
 
 usePageMetadata({
@@ -24,10 +28,29 @@ function onUpdatePage(newPage: number) {
 	offset.value = (newPage - 1) * limit;
 }
 
+const searchFiltersSchema = v.object({
+	query: v.fallback(v.string(), ""),
+});
+
 const offset = ref(0);
 const limit = 20;
 const searchstring = ref("");
 
+type SearchFilters = v.InferOutput<typeof searchFiltersSchema>;
+
+function onChangeSearchInput(values: SearchFormData) {
+	setSearchFilters(values);
+}
+
+function setSearchFilters(query: Partial<SearchFilters>) {
+	if (query.query === "") {
+		delete query.query;
+	}
+
+	void router.push({ query });
+	document.body.scrollTo(0, 0);
+}
+
 const { data } = useGetSearchResults(
 	computed(() => {
 		return {
@@ -44,10 +67,11 @@ const { data } = useGetSearchResults(
 		<h1 class="sr-only">{{ t("SearchPage.title") }}</h1>
 		<div class="grid h-full grid-cols-[1fr_3fr]">
 			<SearchForm
-				search=""
+				query=""
 				@submit="
 					(values) => {
-						searchstring = values.search;
+						onChangeSearchInput(values);
+						searchstring = values.query;
 					}
 				"
 			/>