From 895abd718c9e0be158a05bc9864bc9e764d3d6d1 Mon Sep 17 00:00:00 2001
From: Vivian SARAZIN <9358572+vvnsrzn@users.noreply.github.com>
Date: Sat, 8 Feb 2025 21:56:32 +0100
Subject: [PATCH 1/2] refactor: mobile nav svelte 5 (almost)

---
 src/lib/components/MobileNav.svelte | 47 ++++++++++++-----------------
 1 file changed, 20 insertions(+), 27 deletions(-)

diff --git a/src/lib/components/MobileNav.svelte b/src/lib/components/MobileNav.svelte
index 0b3c0057199..21cd84e47ff 100644
--- a/src/lib/components/MobileNav.svelte
+++ b/src/lib/components/MobileNav.svelte
@@ -1,16 +1,12 @@
-<!-- @migration task: review uses of `navigating` -->
 <script lang="ts">
-	import { run } from "svelte/legacy";
-
-	import { navigating } from "$app/state";
-	import { createEventDispatcher } from "svelte";
 	import { browser } from "$app/environment";
+	import { beforeNavigate } from "$app/navigation";
 	import { base } from "$app/paths";
-	import { page } from "$app/stores";
-
+	import { page } from "$app/state";
+	import IconNew from "$lib/components/icons/IconNew.svelte";
+	import { createEventDispatcher } from "svelte";
 	import CarbonClose from "~icons/carbon/close";
 	import CarbonTextAlignJustify from "~icons/carbon/text-align-justify";
-	import IconNew from "$lib/components/icons/IconNew.svelte";
 
 	interface Props {
 		isOpen?: boolean;
@@ -20,25 +16,24 @@
 
 	let { isOpen = false, title = $bindable(), children }: Props = $props();
 
-	run(() => {
-		title = title ?? "New Chat";
-	});
-
 	let closeEl: HTMLButtonElement | undefined = $state();
 	let openEl: HTMLButtonElement | undefined = $state();
 
-	const dispatch = createEventDispatcher();
+	$effect(() => {
+		if (title === undefined) title = "New Chat";
+	});
 
-	run(() => {
-		if (navigating) {
-			dispatch("toggle", false);
-		}
+	const dispatch = createEventDispatcher();
+	beforeNavigate(() => {
+		dispatch("toggle", false);
 	});
 
-	run(() => {
-		if (isOpen && closeEl) {
-			closeEl.focus();
-		} else if (!isOpen && browser && document.activeElement === closeEl) {
+	let shouldFocusClose = $derived(isOpen && closeEl);
+	let shouldRefocusOpen = $derived(!isOpen && browser && document.activeElement === closeEl);
+	$effect(() => {
+		if (shouldFocusClose) {
+			closeEl?.focus();
+		} else if (shouldRefocusOpen) {
 			openEl?.focus();
 		}
 	});
@@ -54,13 +49,11 @@
 		aria-label="Open menu"
 		bind:this={openEl}><CarbonTextAlignJustify /></button
 	>
-	{#await title}
-		<div class="flex h-full items-center justify-center"></div>
-	{:then title}
-		<span class="truncate px-4">{title ?? ""}</span>
-	{/await}
+	<div class="flex h-full items-center justify-center">
+		<span class="truncate px-4" data-testid="chat-title">{title}</span>
+	</div>
 	<a
-		class:invisible={!$page.params.id}
+		class:invisible={!page.params?.id}
 		href="{base}/"
 		class="-mr-3 flex size-12 shrink-0 items-center justify-center text-lg"><IconNew /></a
 	>

From 4092c4695bc68b17972ecd3ccafd4af03a327164 Mon Sep 17 00:00:00 2001
From: Nathan Sarrazin <sarrazin.nathan@gmail.com>
Date: Mon, 17 Feb 2025 14:33:17 +0000
Subject: [PATCH 2/2] refactor: default title smol change

---
 src/lib/components/MobileNav.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/MobileNav.svelte b/src/lib/components/MobileNav.svelte
index 21cd84e47ff..9db89b4a240 100644
--- a/src/lib/components/MobileNav.svelte
+++ b/src/lib/components/MobileNav.svelte
@@ -20,7 +20,7 @@
 	let openEl: HTMLButtonElement | undefined = $state();
 
 	$effect(() => {
-		if (title === undefined) title = "New Chat";
+		title ??= "New Chat";
 	});
 
 	const dispatch = createEventDispatcher();