migrate from deprecated slots to snippets and fix event handlers

- Replace deprecated <slot> syntax with modern {#snippet} and {@render} patterns
- Add TypeScript types for snippet props in Header component
- Convert on:click event handlers to onclick attribute throughout
- Update all layout files to use new snippet-based composition pattern

src/lib/components/Header.svelte

@@ -1,8 +1,23 @@
-<script>
+<script lang="ts">
 import "$lib/css/nordtheme.css"
 import { onMount } from "svelte";
 import { page } from '$app/stores';
 import Symbol from "./Symbol.svelte"
+import type { Snippet } from 'svelte';
+
+let {
+	links,
+	language_selector_mobile,
+	language_selector_desktop,
+	right_side,
+	children
+}: {
+	links?: Snippet;
+	language_selector_mobile?: Snippet;
+	language_selector_desktop?: Snippet;
+	right_side?: Snippet;
+	children?: Snippet;
+} = $props();
 
 let underlineLeft = $state(0);
 let underlineWidth = $state(0);
@@ -297,25 +312,25 @@ footer{
 <div class=button_wrapper>
 <a href="/"><Symbol></Symbol></a>
 <div class="right-buttons">
-	<slot name=language_selector_mobile></slot>
-	<button class=nav_button on:click={() => {toggle_sidebar()}}><svg xmlns="http://www.w3.org/2000/svg" height="0.5em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg></button>
+	{@render language_selector_mobile?.()}
+	<button class=nav_button onclick={() => {toggle_sidebar()}}><svg xmlns="http://www.w3.org/2000/svg" height="0.5em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg></button>
 </div>
 </div>
 <nav hidden class=nav_site>
 	<a class=entry href="/"><Symbol></Symbol></a>
 	<div class="links-wrapper">
-		<slot name=links></slot>
+		{@render links?.()}
 		<div class="active-underline" class:no-transition={disableTransition} style="left: {underlineLeft}px; width: {underlineWidth}px;"></div>
 	</div>
 	<div class="header-right">
 		<div class="language-selector-desktop">
-			<slot name=language_selector_desktop></slot>
+			{@render language_selector_desktop?.()}
 		</div>
-		<slot name=right_side></slot>
+		{@render right_side?.()}
 	</div>
 </nav>
 
-<slot></slot>
+{@render children?.()}
 
 </div>
 <footer>

src/lib/components/UserHeader.svelte

@@ -136,7 +136,7 @@ h2 + p{
 </style>
 
 {#if user}
-	<button on:click={toggle_options} style="background-image: url(https://bocken.org/static/user/thumb/{user.nickname}.webp)" id=button>
+	<button onclick={toggle_options} style="background-image: url(https://bocken.org/static/user/thumb/{user.nickname}.webp)" id=button>
 	<div id=options class="speech top" hidden>
 			<h2>{user.name}</h2>
 			<p>({user.nickname})</p>