feat(nav): better mobile nav (#1725)

* feat: improve mobile settings navigation

* fix: make sure window resizing works & redirects properly

src/routes/settings/(nav)/+layout.svelte

@@ -8,10 +8,14 @@
 	import CarbonArrowUpRight from "~icons/carbon/ArrowUpRight";
 	import CarbonAdd from "~icons/carbon/add";
 	import CarbonTextLongParagraph from "~icons/carbon/text-long-paragraph";
+	import CarbonChevronLeft from "~icons/carbon/chevron-left";
 
 	import UserIcon from "~icons/carbon/user";
 	import type { LayoutData } from "../$types";
 	import { error } from "$lib/stores/errors";
+	import { browser } from "$app/environment";
+	import { isDesktop } from "$lib/utils/isDesktop";
+	import { debounce } from "$lib/utils/debounce";
 
 	interface Props {
 		data: LayoutData;
@@ -22,17 +26,39 @@
 
 	let previousPage: string = $state(base);
 	let assistantsSection: HTMLHeadingElement | undefined = $state();
+	let showContent: boolean = $state(false);
+
+	function checkDesktopRedirect() {
+		if (browser && isDesktop(window) && page.url.pathname === `${base}/settings`) {
+			goto(`${base}/settings/application`);
+		}
+	}
 
 	onMount(() => {
 		if (page.params?.assistantId && assistantsSection) {
 			assistantsSection.scrollIntoView();
 		}
+		// Show content when not on the root settings page
+		showContent = page.url.pathname !== `${base}/settings`;
+		// Initial desktop redirect check
+		checkDesktopRedirect();
+
+		// Add resize listener for desktop redirect
+		if (browser) {
+			const debouncedCheck = debounce(checkDesktopRedirect, 100);
+			window.addEventListener("resize", debouncedCheck);
+			return () => window.removeEventListener("resize", debouncedCheck);
+		}
 	});
 
 	afterNavigate(({ from }) => {
 		if (!from?.url.pathname.includes("settings")) {
 			previousPage = from?.url.toString() || previousPage;
 		}
+		// Show content when not on the root settings page
+		showContent = page.url.pathname !== `${base}/settings`;
+		// Check desktop redirect after navigation
+		checkDesktopRedirect();
 	});
 
 	const settings = useSettingsStore();
@@ -42,6 +68,18 @@
 	class="grid h-full w-full grid-cols-1 grid-rows-[auto,1fr] content-start gap-x-4 overflow-hidden p-4 md:grid-cols-3 md:grid-rows-[auto,1fr] md:p-8"
 >
 	<div class="col-span-1 mb-4 flex items-center justify-between md:col-span-3">
+		{#if showContent && browser}
+			<button
+				class="btn rounded-lg md:hidden"
+				aria-label="Back to menu"
+				onclick={() => {
+					showContent = false;
+					goto(`${base}/settings`);
+				}}
+			>
+				<CarbonChevronLeft class="text-xl text-gray-900 hover:text-black" />
+			</button>
+		{/if}
 		<h2 class="text-xl font-bold">Settings</h2>
 		<button
 			class="btn rounded-lg"
@@ -54,7 +92,8 @@
 		</button>
 	</div>
 	<div
-		class="col-span-1 flex flex-col overflow-y-auto whitespace-nowrap max-md:-mx-4 max-md:h-[245px] max-md:border max-md:border-b-2 md:pr-6"
+		class="col-span-1 flex flex-col overflow-y-auto whitespace-nowrap max-md:-mx-4 max-md:h-full md:pr-6"
+		class:max-md:hidden={showContent && browser}
 	>
 		<h3 class="pb-3 pl-3 pt-2 text-[.8rem] text-gray-800 sm:pl-1">Models</h3>
 
@@ -200,16 +239,17 @@
 
 		<div class="my-2 mt-auto w-full border-b border-gray-200"></div>
 		<a
-			href="{base}/settings"
+			href="{base}/settings/application"
 			class="group flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm text-gray-500 hover:bg-gray-100 max-md:order-first md:rounded-xl
-				{page.url.pathname === `${base}/settings` ? '!bg-gray-100 !text-gray-800' : ''}"
+				{page.url.pathname === `${base}/settings/application` ? '!bg-gray-100 !text-gray-800' : ''}"
 		>
 			<UserIcon class="text-sm" />
 			Application Settings
 		</a>
 	</div>
 	<div
-		class="col-span-1 w-full overflow-y-auto overflow-x-clip px-1 max-md:pt-4 md:col-span-2 md:row-span-2"
+		class="col-span-1 w-full overflow-y-auto overflow-x-clip px-1 md:col-span-2 md:row-span-2"
+		class:max-md:hidden={!showContent && browser}
 	>
 		{@render children?.()}
 	</div>

src/routes/settings/(nav)/+layout.ts

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

src/routes/settings/(nav)/+page.svelte

@@ -1,105 +0,0 @@
-<script lang="ts">
-	import CarbonTrashCan from "~icons/carbon/trash-can";
-	import CarbonArrowUpRight from "~icons/carbon/arrow-up-right";
-
-	import { useSettingsStore } from "$lib/stores/settings";
-	import Switch from "$lib/components/Switch.svelte";
-	import { env as envPublic } from "$env/dynamic/public";
-	import { goto } from "$app/navigation";
-	import { error } from "$lib/stores/errors";
-	import { base } from "$app/paths";
-
-	let settings = useSettingsStore();
-</script>
-
-<div class="flex w-full flex-col gap-5">
-	<div class="flex flex-col items-start justify-between text-xl font-semibold text-gray-800">
-		<h2>Application Settings</h2>
-		{#if !!envPublic.PUBLIC_COMMIT_SHA}
-			<a
-				href={`https://github.com/huggingface/chat-ui/commit/${envPublic.PUBLIC_COMMIT_SHA}`}
-				target="_blank"
-				rel="noreferrer"
-				class="text-sm font-light text-gray-500"
-			>
-				Latest deployment <span class="gap-2 font-mono"
-					>{envPublic.PUBLIC_COMMIT_SHA.slice(0, 7)}</span
-				>
-			</a>
-		{/if}
-	</div>
-	<div class="flex h-full max-w-2xl flex-col gap-2 max-sm:pt-0">
-		{#if envPublic.PUBLIC_APP_DATA_SHARING === "1"}
-			<label class="flex items-center">
-				<Switch
-					name="shareConversationsWithModelAuthors"
-					bind:checked={$settings.shareConversationsWithModelAuthors}
-				/>
-				<div class="inline cursor-pointer select-none items-center gap-2 pl-2">
-					Share conversations with model authors
-				</div>
-			</label>
-
-			<p class="text-sm text-gray-500">
-				Sharing your data will help improve the training data and make open models better over time.
-			</p>
-		{/if}
-		<label class="mt-6 flex items-center">
-			<Switch name="hideEmojiOnSidebar" bind:checked={$settings.hideEmojiOnSidebar} />
-			<div class="inline cursor-pointer select-none items-center gap-2 pl-2 font-semibold">
-				Hide emoticons in conversation topics
-				<p class="text-sm font-normal text-gray-500">
-					Emoticons are shown in the sidebar by default, enable this to hide them.
-				</p>
-			</div>
-		</label>
-
-		<label class="mt-6 flex items-center">
-			<Switch name="disableStream" bind:checked={$settings.disableStream} />
-			<div class="inline cursor-pointer select-none items-center gap-2 pl-2 font-semibold">
-				Disable streaming tokens
-			</div>
-		</label>
-
-		<label class="mt-6 flex items-center">
-			<Switch name="directPaste" bind:checked={$settings.directPaste} />
-			<div class="inline cursor-pointer select-none items-center gap-2 pl-2 font-semibold">
-				Paste text directly into chat
-				<p class="text-sm font-normal text-gray-500">
-					By default, when pasting long text into the chat, we treat it as a plaintext file. Enable
-					this to paste directly into the chat instead.
-				</p>
-			</div>
-		</label>
-
-		<div class="mt-12 flex flex-col gap-3">
-			<a
-				href="https://huggingface.co/spaces/huggingchat/chat-ui/discussions"
-				target="_blank"
-				rel="noreferrer"
-				class="flex items-center underline decoration-gray-300 underline-offset-2 hover:decoration-gray-700"
-				><CarbonArrowUpRight class="mr-1.5 shrink-0 text-sm " /> Share your feedback on HuggingChat</a
-			>
-			<button
-				onclick={async (e) => {
-					e.preventDefault();
-
-					confirm("Are you sure you want to delete all conversations?") &&
-						(await fetch(`${base}/api/conversations`, {
-							method: "DELETE",
-						})
-							.then(async () => {
-								await goto(`${base}/`, { invalidateAll: true });
-							})
-							.catch((err) => {
-								console.error(err);
-								$error = err.message;
-							}));
-				}}
-				type="submit"
-				class="flex items-center underline decoration-gray-300 underline-offset-2 hover:decoration-gray-700"
-				><CarbonTrashCan class="mr-2 inline text-sm text-red-500" />Delete all conversations</button
-			>
-		</div>
-	</div>
-</div>

src/routes/settings/(nav)/application/+page.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+	import CarbonTrashCan from "~icons/carbon/trash-can";
+	import CarbonArrowUpRight from "~icons/carbon/arrow-up-right";
+
+	import { useSettingsStore } from "$lib/stores/settings";
+	import Switch from "$lib/components/Switch.svelte";
+	import { env as envPublic } from "$env/dynamic/public";
+	import { goto } from "$app/navigation";
+	import { error } from "$lib/stores/errors";
+	import { base } from "$app/paths";
+
+	let settings = useSettingsStore();
+</script>
+
+<div class="flex w-full flex-col gap-5">
+	<div class="flex flex-col items-start justify-between text-xl font-semibold text-gray-800">
+		<h2>Application Settings</h2>
+		{#if !!envPublic.PUBLIC_COMMIT_SHA}
+			<a
+				href={`https://github.com/huggingface/chat-ui/commit/${envPublic.PUBLIC_COMMIT_SHA}`}
+				target="_blank"
+				rel="noreferrer"
+				class="text-sm font-light text-gray-500"
+			>
+				Latest deployment <span class="gap-2 font-mono"
+					>{envPublic.PUBLIC_COMMIT_SHA.slice(0, 7)}</span
+				>
+			</a>
+		{/if}
+	</div>
+	<div class="flex h-full max-w-2xl flex-col gap-2 max-sm:pt-0">
+		{#if envPublic.PUBLIC_APP_DATA_SHARING === "1"}
+			<label class="flex items-center">
+				<Switch
+					name="shareConversationsWithModelAuthors"
+					bind:checked={$settings.shareConversationsWithModelAuthors}
+				/>
+				<div class="inline cursor-pointer select-none items-center gap-2 pl-2">
+					Share conversations with model authors
+				</div>
+			</label>
+
+			<p class="text-sm text-gray-500">
+				Sharing your data will help improve the training data and make open models better over time.
+			</p>
+		{/if}
+		<label class="mt-6 flex items-center">
+			<Switch name="hideEmojiOnSidebar" bind:checked={$settings.hideEmojiOnSidebar} />
+			<div class="inline cursor-pointer select-none items-center gap-2 pl-2 font-semibold">
+				Hide emoticons in conversation topics
+				<p class="text-sm font-normal text-gray-500">
+					Emoticons are shown in the sidebar by default, enable this to hide them.
+				</p>
+			</div>
+		</label>
+
+		<label class="mt-6 flex items-center">
+			<Switch name="disableStream" bind:checked={$settings.disableStream} />
+			<div class="inline cursor-pointer select-none items-center gap-2 pl-2 font-semibold">
+				Disable streaming tokens
+			</div>
+		</label>
+
+		<label class="mt-6 flex items-center">
+			<Switch name="directPaste" bind:checked={$settings.directPaste} />
+			<div class="inline cursor-pointer select-none items-center gap-2 pl-2 font-semibold">
+				Paste text directly into chat
+				<p class="text-sm font-normal text-gray-500">
+					By default, when pasting long text into the chat, we treat it as a plaintext file. Enable
+					this to paste directly into the chat instead.
+				</p>
+			</div>
+		</label>
+
+		<div class="mt-12 flex flex-col gap-3">
+			<a
+				href="https://huggingface.co/spaces/huggingchat/chat-ui/discussions"
+				target="_blank"
+				rel="noreferrer"
+				class="flex items-center underline decoration-gray-300 underline-offset-2 hover:decoration-gray-700"
+				><CarbonArrowUpRight class="mr-1.5 shrink-0 text-sm " /> Share your feedback on HuggingChat</a
+			>
+			<button
+				onclick={async (e) => {
+					e.preventDefault();
+
+					confirm("Are you sure you want to delete all conversations?") &&
+						(await fetch(`${base}/api/conversations`, {
+							method: "DELETE",
+						})
+							.then(async () => {
+								await goto(`${base}/`, { invalidateAll: true });
+							})
+							.catch((err) => {
+								console.error(err);
+								$error = err.message;
+							}));
+				}}
+				type="submit"
+				class="flex items-center underline decoration-gray-300 underline-offset-2 hover:decoration-gray-700"
+				><CarbonTrashCan class="mr-2 inline text-sm text-red-500" />Delete all conversations</button
+			>
+		</div>
+	</div>
+</div>