Merge pull request #59 from open-reception/feat/api-bfffe-separation

Separate routes to minimize conflicts

src/lib/components/templates/index.ts

@@ -0,0 +1,3 @@
+import LanguageSwitch from "./language-switch.svelte";
+
+export { LanguageSwitch };

src/lib/components/templates/language-switch.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { m } from "$i18n/messages.js";
+	import { getLocale, setLocale } from "$i18n/runtime.js";
+	import { ComboBox } from "$lib/components/ui/combobox";
+</script>
+
+<div>
+	<ComboBox
+		options={[
+			{ label: "Deutsch", value: "de", keywords: ["german", "deutsch"] },
+			{ label: "English", value: "en", keywords: ["english"] }
+		]}
+		value={getLocale()}
+		onChange={(value) => {
+			setLocale(value as "de" | "en");
+		}}
+		labels={{
+			placeholder: m["i18n.label"](),
+			search: m["i18n.search"](),
+			notFound: m["i18n.notFound"]()
+		}}
+	/>
+</div>

src/lib/components/ui/combobox/combobox.svelte

@@ -20,7 +20,7 @@
 		};
 		value: string;
 		onChange: (value: string) => void;
-		options?: { label: string; value: string }[];
+		options?: { label: string; value: string; keywords?: string[] }[];
 	} = $props();
 
 	let open = $state(false);
@@ -53,13 +53,14 @@
 	</Popover.Trigger>
 	<Popover.Content class="w-[200px] p-0">
 		<Command.Root>
-			<Command.Input placeholder={labels.search} />
+			<Command.Input autofocus placeholder={labels.search} />
 			<Command.List>
 				<Command.Empty>{labels.notFound}</Command.Empty>
 				<Command.Group>
 					{#each options as option (option.value)}
 						<Command.Item
 							value={option.value}
+							keywords={option.keywords}
 							onSelect={() => {
 								onChange(option.value);
 								closeAndFocusTrigger();

src/routes/(pages)/+layout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { browser } from "$app/environment";
-	import "../app.css";
+	import "../../app.css";
 	import { ModeWatcher, setMode } from "mode-watcher";
 
 	$effect(() => {

src/routes/(pages)/+layout.ts

@@ -0,0 +1 @@
+export const prerender = false;

src/routes/(pages)/+page.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
+	import { m } from "$i18n/messages.js";
+	import LanguageSwitch from "$lib/components/templates/language-switch.svelte";
 	import { HorizontalPagePadding, PageWithClaim } from "$lib/components/ui/page";
 	import { Headline, Text } from "$lib/components/ui/typography";
-	import { m } from "$i18n/messages.js";
-	import { ComboBox } from "$lib/components/ui/combobox";
-	import { getLocale, setLocale } from "$i18n/runtime.js";
 
 	export let data;
 </script>
@@ -25,21 +24,7 @@
 				{/await}.
 			</Text>
 
-			<ComboBox
+			<LanguageSwitch />
-				options={[
-					{ value: "de", label: "Deutsch" },
-					{ value: "en", label: "English" }
-				]}
-				value={getLocale()}
-				onChange={(value) => {
-					setLocale(value as "de" | "en");
-				}}
-				labels={{
-					placeholder: m["i18n.label"](),
-					search: m["i18n.search"](),
-					notFound: m["i18n.notFound"]()
-				}}
-			/>
 		</HorizontalPagePadding>
 	</main>
 </PageWithClaim>

src/routes/+layout.ts

@@ -1 +0,0 @@
-export const prerender = true;