feat: improved nav consistency on mobile (#1726)

* feat: improved nav consistency on mobile

* fix: padding

* fix: headings consistency

* feat: add animations

src/lib/components/AssistantSettings.svelte

@@ -99,7 +99,7 @@
 </script>
 
 <form
-	class="relative flex h-full flex-col overflow-y-auto p-4 md:p-8"
+	class="relative flex h-full flex-col overflow-y-auto md:p-8 md:pt-0"
 	enctype="multipart/form-data"
 	onsubmit={async (e) => {
 		e.preventDefault();

src/lib/components/DisclaimerModal.svelte

@@ -11,7 +11,7 @@
 	const settings = useSettingsStore();
 </script>
 
-<Modal on:close>
+<Modal on:close width="max-w-[400px]">
 	<div
 		class="from-primary-500/40 via-primary-500/10 to-primary-500/0 flex w-full flex-col items-center gap-6 bg-gradient-to-b px-5 pb-8 pt-9 text-center sm:px-6"
 	>

src/lib/components/LoginModal.svelte

@@ -11,7 +11,7 @@
 	const settings = useSettingsStore();
 </script>
 
-<Modal on:close>
+<Modal on:close width="max-w-[400px]">
 	<div
 		class="from-primary-500/40 via-primary-500/10 to-primary-500/0 flex w-full flex-col items-center gap-6 bg-gradient-to-b px-5 pb-8 pt-9 text-center"
 	>

src/lib/components/Modal.svelte

@@ -4,13 +4,15 @@
 	import { fade, fly } from "svelte/transition";
 	import Portal from "./Portal.svelte";
 	import { browser } from "$app/environment";
+	import CarbonClose from "~icons/carbon/close";
 
 	interface Props {
 		width?: string;
+		closeButton?: boolean;
 		children?: import("svelte").Snippet;
 	}
 
-	let { width = "max-w-sm", children }: Props = $props();
+	let { width = "max-w-sm", children, closeButton = false }: Props = $props();
 
 	let backdropEl: HTMLDivElement | undefined = $state();
 	let modalEl: HTMLDivElement | undefined = $state();
@@ -56,7 +58,7 @@
 			handleBackdropClick(e);
 		}}
 		transition:fade|local={{ easing: cubicOut, duration: 300 }}
-		class="fixed inset-0 z-40 flex items-center justify-center bg-black/80 p-8 backdrop-blur-sm dark:bg-black/50"
+		class="fixed inset-0 z-40 flex items-center justify-center bg-black/80 backdrop-blur-sm dark:bg-black/50"
 	>
 		<div
 			role="dialog"
@@ -65,10 +67,15 @@
 			onkeydown={handleKeydown}
 			in:fly={{ y: 100 }}
 			class={[
-				"max-h-[90dvh] overflow-y-auto overflow-x-hidden rounded-2xl bg-white shadow-2xl outline-none sm:-mt-10",
+				"relative mx-auto max-h-[95dvh] max-w-[90dvw] overflow-y-auto overflow-x-hidden rounded-2xl bg-white shadow-2xl outline-none",
 				width,
 			]}
 		>
+			{#if closeButton}
+				<button class="absolute right-4 top-4 z-50" onclick={() => dispatch("close")}>
+					<CarbonClose class="size-6 text-gray-700" />
+				</button>
+			{/if}
 			{@render children?.()}
 		</div>
 	</div>

src/lib/components/OverloadedModal.svelte

@@ -8,7 +8,7 @@
 	let { onClose }: { onClose: () => void } = $props();
 </script>
 
-<Modal on:close={onClose}>
+<Modal on:close={onClose} width="max-w-[400px]">
 	<div
 		class="from-primary-500/40 via-primary-500/10 to-primary-500/0 flex w-full flex-col items-center gap-3 bg-gradient-to-b px-5 pb-4 pt-9 text-center sm:px-6"
 	>

src/lib/components/SystemPromptModal.svelte

@@ -22,7 +22,7 @@
 </button>
 
 {#if isOpen}
-	<Modal on:close={() => (isOpen = false)} width="w-full max-w-2xl">
+	<Modal on:close={() => (isOpen = false)} width="w-full max-w-xl">
 		<div class="flex w-full flex-col gap-5 p-6">
 			<div class="flex items-start justify-between text-xl font-semibold text-gray-800">
 				<h2>System Prompt</h2>

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

@@ -17,6 +17,8 @@
 	import { isDesktop } from "$lib/utils/isDesktop";
 	import { debounce } from "$lib/utils/debounce";
 
+	import { fly } from "svelte/transition";
+
 	interface Props {
 		data: LayoutData;
 		children?: import("svelte").Snippet;
@@ -65,9 +67,9 @@
 </script>
 
 <div
-	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"
+	class="mx-auto grid h-full w-full max-w-[1400px] grid-cols-1 grid-rows-[auto,1fr] content-start gap-x-6 overflow-hidden p-4 md:grid-cols-3 md:grid-rows-[auto,1fr] md:p-4"
 >
-	<div class="col-span-1 mb-4 flex items-center justify-between md:col-span-3">
+	<div class="col-span-1 mb-3 flex items-center justify-between md:col-span-3 md:mb-4">
 		{#if showContent && browser}
 			<button
 				class="btn rounded-lg md:hidden"
@@ -80,7 +82,9 @@
 				<CarbonChevronLeft class="text-xl text-gray-900 hover:text-black" />
 			</button>
 		{/if}
-		<h2 class="text-xl font-bold">Settings</h2>
+		<h2 class="absolute left-0 right-0 mx-auto w-fit text-center text-xl font-bold md:hidden">
+			Settings
+		</h2>
 		<button
 			class="btn rounded-lg"
 			aria-label="Close settings"
@@ -91,166 +95,190 @@
 			<CarbonClose class="text-xl text-gray-900 hover:text-black" />
 		</button>
 	</div>
-	<div
-		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>
-
-		{#each data.models.filter((el) => !el.unlisted) as model}
-			<a
-				href="{base}/settings/{model.id}"
-				class="group flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl
-					{model.id === page.params.model ? '!bg-gray-100 !text-gray-800' : ''}"
+	{#if !(showContent && browser && !isDesktop(window))}
+		<div
+			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}
+			in:fly={{ x: -100, duration: 200 }}
+			out:fly={{ x: -100, duration: 200 }}
+		>
+			<!-- Section Headers -->
+			<h3
+				class="px-4 pb-2 pt-3 text-center text-[.8rem] font-medium text-gray-800 md:px-3 md:text-left"
 			>
-				<div class="mr-auto truncate">{model.displayName}</div>
-
-				{#if $settings.customPrompts?.[model.id]}
-					<CarbonTextLongParagraph
-						class="size-6 rounded-md border border-gray-300 p-1 text-gray-800"
-					/>
-				{/if}
-				{#if model.id === $settings.activeModel}
-					<div
-						class="rounded-lg bg-black px-2 py-1.5 text-xs font-semibold leading-none text-white"
-					>
-						Active
-					</div>
-				{/if}
-			</a>
-		{/each}
-		<!-- if its huggingchat, the number of assistants owned by the user must be non-zero to show the UI -->
-		{#if data.enableAssistants}
-			<h3 bind:this={assistantsSection} class="pl-3 pt-5 text-[.8rem] text-gray-800 sm:pl-1">
-				Assistants
+				Models
 			</h3>
-			<!-- My Assistants -->
-			<h4 class="py-2 pl-5 text-[.7rem] text-gray-600 sm:pl-1">My Assistants</h4>
 
-			{#each data.assistants.filter((assistant) => assistant.createdByMe) as assistant}
+			{#each data.models.filter((el) => !el.unlisted) as model}
 				<a
-					href="{base}/settings/assistants/{assistant._id.toString()}"
-					class="group flex h-10 flex-none items-center gap-2 pl-2 pr-2 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl
-					{assistant._id.toString() === page.params.assistantId ? '!bg-gray-100 !text-gray-800' : ''}"
+					href="{base}/settings/{model.id}"
+					class="group flex h-10 flex-none items-center gap-2 px-4 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl md:px-3
+					{model.id === page.params.model ? '!bg-gray-100 !text-gray-800' : ''}"
 				>
-					{#if assistant.avatar}
-						<img
-							src="{base}/settings/assistants/{assistant._id.toString()}/avatar.jpg?hash={assistant.avatar}"
-							alt="Avatar"
-							class="h-6 w-6 rounded-full"
+					<div class="mr-auto truncate">{model.displayName}</div>
+
+					{#if $settings.customPrompts?.[model.id]}
+						<CarbonTextLongParagraph
+							class="size-6 rounded-md border border-gray-300 p-1 text-gray-800"
 						/>
-					{:else}
-						<div
-							class="flex size-6 items-center justify-center rounded-full bg-gray-300 font-bold uppercase text-gray-500"
-						>
-							{assistant.name[0]}
-						</div>
 					{/if}
-					<div class="truncate text-gray-900">{assistant.name}</div>
-					{#if assistant._id.toString() === $settings.activeModel}
+					{#if model.id === $settings.activeModel}
 						<div
-							class="ml-auto rounded-lg bg-black px-2 py-1.5 text-xs font-semibold leading-none text-white"
+							class="rounded-lg bg-black px-2 py-1.5 text-xs font-semibold leading-none text-white"
 						>
 							Active
 						</div>
 					{/if}
 				</a>
 			{/each}
-			{#if !data.loginEnabled || (data.loginEnabled && !!data.user)}
-				<a
-					href="{base}/settings/assistants/new"
-					class="group flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl
-				{page.url.pathname === `${base}/settings/assistants/new` ? '!bg-gray-100 !text-gray-800' : ''}"
+			{#if data.enableAssistants}
+				<h3
+					bind:this={assistantsSection}
+					class="mt-6 px-4 pb-2 text-center text-[.8rem] font-medium text-gray-800 md:px-3 md:text-left"
 				>
-					<CarbonAdd />
-					<div class="truncate">Create new assistant</div>
-				</a>
-			{/if}
+					Assistants
+				</h3>
+				<!-- My Assistants -->
+				<h4
+					class="px-4 pb-1 pt-2 text-center text-[.7rem] font-medium text-gray-600 md:px-3 md:text-left"
+				>
+					My Assistants
+				</h4>
 
-			<!-- Other Assistants -->
-			<h4 class="pl-3 pt-3 text-[.7rem] text-gray-600 sm:pl-1">Other Assistants</h4>
+				{#each data.assistants.filter((assistant) => assistant.createdByMe) as assistant}
+					<a
+						href="{base}/settings/assistants/{assistant._id.toString()}"
+						class="group flex h-10 flex-none items-center gap-2 px-4 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl md:px-3
+					{assistant._id.toString() === page.params.assistantId ? '!bg-gray-100 !text-gray-800' : ''}"
+					>
+						{#if assistant.avatar}
+							<img
+								src="{base}/settings/assistants/{assistant._id.toString()}/avatar.jpg?hash={assistant.avatar}"
+								alt="Avatar"
+								class="h-6 w-6 rounded-full"
+							/>
+						{:else}
+							<div
+								class="flex size-6 items-center justify-center rounded-full bg-gray-300 font-bold uppercase text-gray-500"
+							>
+								{assistant.name[0]}
+							</div>
+						{/if}
+						<div class="truncate text-gray-900">{assistant.name}</div>
+						{#if assistant._id.toString() === $settings.activeModel}
+							<div
+								class="ml-auto rounded-lg bg-black px-2 py-1.5 text-xs font-semibold leading-none text-white"
+							>
+								Active
+							</div>
+						{/if}
+					</a>
+				{/each}
+				{#if !data.loginEnabled || (data.loginEnabled && !!data.user)}
+					<a
+						href="{base}/settings/assistants/new"
+						class="group flex h-10 flex-none items-center gap-2 px-4 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl md:px-3
+					{page.url.pathname === `${base}/settings/assistants/new` ? '!bg-gray-100 !text-gray-800' : ''}"
+					>
+						<CarbonAdd />
+						<div class="truncate">Create new assistant</div>
+					</a>
+				{/if}
 
-			{#each data.assistants.filter((assistant) => !assistant.createdByMe) as assistant}
-				<a
-					href="{base}/settings/assistants/{assistant._id.toString()}"
-					class="group flex h-10 flex-none items-center gap-2 pl-2 pr-2 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl
-						{assistant._id.toString() === page.params.assistantId ? '!bg-gray-100 !text-gray-800' : ''}"
+				<!-- Other Assistants -->
+				<h4
+					class="mt-4 px-4 pb-1 pt-2 text-center text-[.7rem] font-medium text-gray-600 md:px-3 md:text-left"
 				>
-					{#if assistant.avatar}
-						<img
-							src="{base}/settings/assistants/{assistant._id.toString()}/avatar.jpg?hash={assistant.avatar}"
-							alt="Avatar"
-							class="h-6 w-6 rounded-full"
-						/>
-					{:else}
-						<div
-							class="flex size-6 items-center justify-center rounded-full bg-gray-300 font-bold uppercase text-gray-500"
-						>
-							{assistant.name[0]}
-						</div>
-					{/if}
-					<div class="truncate">{assistant.name}</div>
-					{#if assistant._id.toString() === $settings.activeModel}
-						<div
-							class="ml-auto rounded-lg bg-black px-2 py-1.5 text-xs font-semibold leading-none text-white"
-						>
-							Active
-						</div>
-					{/if}
-					<button
-						type="submit"
-						aria-label="Remove assistant from your list"
-						class={[
-							"rounded-full p-1 text-xs hover:bg-gray-500 hover:bg-opacity-20",
-							assistant._id.toString() === page.params.assistantId
-								? "block"
-								: "hidden group-hover:block",
-							assistant._id.toString() !== $settings.activeModel && "ml-auto",
-						]}
-						onclick={(event) => {
-							event.stopPropagation();
-							fetch(`${base}/api/assistant/${assistant._id}/subscribe`, {
-								method: "DELETE",
-							}).then((r) => {
-								if (r.ok) {
-									if (assistant._id.toString() === page.params.assistantId) {
-										goto(`${base}/settings`, { invalidateAll: true });
+					Other Assistants
+				</h4>
+
+				{#each data.assistants.filter((assistant) => !assistant.createdByMe) as assistant}
+					<a
+						href="{base}/settings/assistants/{assistant._id.toString()}"
+						class="group flex h-10 flex-none items-center gap-2 px-4 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl md:px-3
+						{assistant._id.toString() === page.params.assistantId ? '!bg-gray-100 !text-gray-800' : ''}"
+					>
+						{#if assistant.avatar}
+							<img
+								src="{base}/settings/assistants/{assistant._id.toString()}/avatar.jpg?hash={assistant.avatar}"
+								alt="Avatar"
+								class="h-6 w-6 rounded-full"
+							/>
+						{:else}
+							<div
+								class="flex size-6 items-center justify-center rounded-full bg-gray-300 font-bold uppercase text-gray-500"
+							>
+								{assistant.name[0]}
+							</div>
+						{/if}
+						<div class="truncate">{assistant.name}</div>
+						{#if assistant._id.toString() === $settings.activeModel}
+							<div
+								class="ml-auto rounded-lg bg-black px-2 py-1.5 text-xs font-semibold leading-none text-white"
+							>
+								Active
+							</div>
+						{/if}
+						<button
+							type="submit"
+							aria-label="Remove assistant from your list"
+							class={[
+								"rounded-full p-1 text-xs hover:bg-gray-500 hover:bg-opacity-20",
+								assistant._id.toString() === page.params.assistantId
+									? "block"
+									: "hidden group-hover:block",
+								assistant._id.toString() !== $settings.activeModel && "ml-auto",
+							]}
+							onclick={(event) => {
+								event.stopPropagation();
+								fetch(`${base}/api/assistant/${assistant._id}/subscribe`, {
+									method: "DELETE",
+								}).then((r) => {
+									if (r.ok) {
+										if (assistant._id.toString() === page.params.assistantId) {
+											goto(`${base}/settings`, { invalidateAll: true });
+										} else {
+											invalidateAll();
+										}
 									} else {
-										invalidateAll();
+										console.error(r);
+										$error = r.statusText;
 									}
-								} else {
-									console.error(r);
-									$error = r.statusText;
-								}
-							});
-						}}
-					>
-						<CarbonClose class="size-4 text-gray-500" />
-					</button>
+								});
+							}}
+						>
+							<CarbonClose class="size-4 text-gray-500" />
+						</button>
+					</a>
+				{/each}
+				<a
+					href="{base}/assistants"
+					class="group flex h-10 flex-none items-center gap-2 px-4 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl md:px-3"
+				>
+					<CarbonArrowUpRight class="mr-1.5 shrink-0 text-xs" />
+					<div class="truncate">Browse Assistants</div>
 				</a>
-			{/each}
-			<a
-				href="{base}/assistants"
-				class="group flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl"
-				><CarbonArrowUpRight class="mr-1.5 shrink-0 text-xs " />
-				<div class="truncate">Browse Assistants</div>
-			</a>
-		{/if}
+			{/if}
 
-		<div class="my-2 mt-auto w-full border-b border-gray-200"></div>
-		<a
-			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
+			<div class="my-2 mt-auto w-full border-b border-gray-200"></div>
+			<a
+				href="{base}/settings/application"
+				class="group flex h-10 flex-none items-center gap-2 px-4 text-sm text-gray-500 hover:bg-gray-100 max-md:order-first md:rounded-xl md:px-3
 				{page.url.pathname === `${base}/settings/application` ? '!bg-gray-100 !text-gray-800' : ''}"
+			>
+				<UserIcon class="text-sm" />
+				Application Settings
+			</a>
+		</div>
+	{/if}
+	{#if showContent}
+		<div
+			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}
+			in:fly={{ x: 100, duration: 200 }}
+			out:fly={{ x: 100, duration: 200 }}
 		>
-			<UserIcon class="text-sm" />
-			Application Settings
-		</a>
-	</div>
-	<div
-		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>
+			{@render children?.()}
+		</div>
+	{/if}
 </div>

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

@@ -13,9 +13,8 @@
 </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}
+	{#if !!envPublic.PUBLIC_COMMIT_SHA}
+		<div class="flex flex-col items-start justify-between text-xl font-semibold text-gray-800">
 			<a
 				href={`https://github.com/huggingface/chat-ui/commit/${envPublic.PUBLIC_COMMIT_SHA}`}
 				target="_blank"
@@ -26,8 +25,8 @@
 					>{envPublic.PUBLIC_COMMIT_SHA.slice(0, 7)}</span
 				>
 			</a>
-		{/if}
-	</div>
+		</div>
+	{/if}
 	<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">

src/routes/settings/+layout.svelte

@@ -5,6 +5,7 @@
 	import CarbonCheckmark from "~icons/carbon/checkmark";
 
 	import Modal from "$lib/components/Modal.svelte";
+
 	interface Props {
 		children?: import("svelte").Snippet;
 	}
@@ -24,7 +25,7 @@
 
 <Modal
 	on:close={() => goto(previousPage)}
-	width="!h-[95dvh] !w-[90dvw] overflow-hidden rounded-2xl bg-white shadow-2xl outline-none sm:!h-[85dvh] xl:!w-[1200px] 2xl:!h-[75dvh]"
+	width="h-[95dvh] w-[90dvw] pb-0 overflow-hidden rounded-2xl bg-white shadow-2xl outline-none sm:h-[95dvh] xl:w-[1200px] 2xl:h-[75dvh]"
 >
 	{@render children?.()}
 	{#if $settings.recentlySaved}

src/routes/tools/[toolId]/+page.svelte

@@ -67,7 +67,7 @@
 	/>
 {/if}
 
-<Modal on:close={() => goto(previousPage)} width="min-w-xl">
+<Modal on:close={() => goto(previousPage)} width="min-w-xl" closeButton>
 	<div class="w-full min-w-64 p-8">
 		<div class="flex h-full flex-col gap-2">
 			<div class="flex flex-col sm:flex-row sm:gap-6">

src/routes/tools/[toolId]/edit/+page.svelte

@@ -8,6 +8,7 @@
 <Modal
 	on:close={() => window.history.back()}
 	width="h-[95dvh] w-[90dvw] overflow-hidden rounded-2xl bg-white shadow-2xl outline-none sm:h-[85dvh] xl:w-[1200px] 2xl:h-[75dvh]"
+	closeButton
 >
 	<ToolEdit
 		tool={data.tool}