refactor language selector into separate component

Extract language switching functionality from UserHeader into a new
LanguageSelector component. In mobile view, the selector appears in
the top bar next to the hamburger menu. In desktop view, it appears
in the navigation bar to the left of the UserHeader.

- Create LanguageSelector component with local element bindings
- Update Header component with language_selector_mobile and
  language_selector_desktop slots
- Remove language selector code from UserHeader
- Update recipe and main layouts to use new component
- Hide desktop language selector inside mobile hamburger menu

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

@@ -1,6 +1,7 @@
 <script>
 import Header from '$lib/components/Header.svelte'
 import UserHeader from '$lib/components/UserHeader.svelte';
+import LanguageSelector from '$lib/components/LanguageSelector.svelte';
 let { data } = $props();
 
 let user = $derived(data.session?.user);
@@ -9,6 +10,8 @@ let user = $derived(data.session?.user);
 <Header>
 	<ul class=site_header slot=links>
 	</ul>
-	<UserHeader {user} slot=right_side showLanguageSelector={true}></UserHeader>
+	<LanguageSelector slot=language_selector_mobile />
+	<LanguageSelector slot=language_selector_desktop />
+	<UserHeader {user} slot=right_side></UserHeader>
 	<slot></slot>
 </Header>