Refactor icons and update navigation components

gary149 · gary149 · commit f3ec30791c41 · 2025-09-24T17:20:57.000+02:00
Replaced inline SVGs in NavMenu and MobileNav with new reusable Svelte icon components (IconBurger, IconSun, IconMoon). Updated IconNew to use a new SVG and adjusted its viewBox. This improves code maintainability and consistency across navigation UI.
diff --git a/src/lib/components/MobileNav.svelte b/src/lib/components/MobileNav.svelte
@@ -12,9 +12,9 @@
 	import { base } from "$app/paths";
 	import { page } from "$app/state";
 	import IconNew from "$lib/components/icons/IconNew.svelte";
+	import IconBurger from "$lib/components/icons/IconBurger.svelte";
 	import { Spring } from "svelte/motion";
 	import CarbonClose from "~icons/carbon/close";
-	import CarbonTextAlignJustify from "~icons/carbon/text-align-justify";
 	import { pan, type GestureCustomEvent, type PanCustomEvent } from "svelte-gestures";
 	interface Props {
 		title: string | undefined;
@@ -81,17 +81,16 @@
 		class="-ml-3 flex size-12 shrink-0 items-center justify-center text-lg"
 		onclick={() => (isOpen = true)}
 		aria-label="Open menu"
-		bind:this={openEl}><CarbonTextAlignJustify /></button
+		bind:this={openEl}><IconBurger /></button
 	>
 	<div class="flex h-full items-center justify-center overflow-hidden">
 		{#if page.params?.id}
 			<span class="max-w-full truncate px-4" data-testid="chat-title">{title}</span>
 		{/if}
 	</div>
-	<a
-		href="{base}/"
-		class="-mr-3 flex size-12 shrink-0 items-center justify-center text-lg"><IconNew /></a
-	>
+	<a href="{base}/" class="-mr-3 flex size-12 shrink-0 items-center justify-center text-lg">
+		<IconNew />
+	</a>
 </nav>
 
 <!-- Mobile drawer overlay - shows when drawer is open -->
@@ -155,14 +154,5 @@
 	class="fixed bottom-0 left-0 top-0 z-30 grid max-h-screen
 	grid-cols-1 grid-rows-[auto,1fr,auto,auto] bg-white pt-4 dark:bg-gray-900 md:hidden"
 >
-	{#if page.url.pathname === base + "/"}
-		<button
-			type="button"
-			class="absolute right-0 top-0 z-50 flex size-12 items-center justify-center text-lg"
-			onclick={() => (isOpen = false)}
-			aria-label="Close menu"
-			bind:this={closeEl}><CarbonClose /></button
-		>
-	{/if}
 	{@render children?.()}
 </nav>
diff --git a/src/lib/components/NavMenu.svelte b/src/lib/components/NavMenu.svelte
@@ -11,6 +11,8 @@
 	import { base } from "$app/paths";
 
 	import Logo from "$lib/components/icons/Logo.svelte";
+	import IconSun from "$lib/components/icons/IconSun.svelte";
+	import IconMoon from "$lib/components/icons/IconMoon.svelte";
 	import { switchTheme } from "$lib/switchTheme";
 	import { isAborted } from "$lib/stores/isAborted";
 
@@ -73,7 +75,7 @@
 			})
 			.then(handleResponse)
 			.then((r) => r.conversations)
-			.catch(() => []);
+			.catch((): ConvSidebar[] => []);
 
 		if (newConvs.length === 0) {
 			hasMore = false;
@@ -193,59 +195,9 @@
 		>
 			{#if browser}
 				{#if theme === "dark"}
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						xmlns:xlink="http://www.w3.org/1999/xlink"
-						aria-hidden="true"
-						focusable="false"
-						role="img"
-						width="1em"
-						height="1em"
-						preserveAspectRatio="xMidYMid meet"
-						viewBox="0 0 32 32"
-						stroke-width="1.5"
-						><path
-							d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z"
-							fill="currentColor"
-							stroke="currentColor"
-							stroke-width="0.5"
-						></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"
-						></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path
-							stroke="currentColor"
-							stroke-width="0.5"
-							d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z"
-							fill="currentColor"
-						></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path
-							stroke="currentColor"
-							stroke-width="0.5"
-							d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z"
-							fill="currentColor"
-						></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path
-							stroke="currentColor"
-							stroke-width="0.5"
-							d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z"
-							fill="currentColor"
-						></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg
-					>
+					<IconSun />
 				{:else}
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						xmlns:xlink="http://www.w3.org/1999/xlink"
-						aria-hidden="true"
-						focusable="false"
-						role="img"
-						width="1em"
-						height="1em"
-						preserveAspectRatio="xMidYMid meet"
-						viewBox="0 0 32 32"
-						stroke-width="1.5"
-						><path
-							d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z"
-							fill="currentColor"
-							stroke="currentColor"
-							stroke-width="0.5"
-						></path></svg
-					>
+					<IconMoon />
 				{/if}
 			{/if}
 		</button>
diff --git a/src/lib/components/icons/IconBurger.svelte b/src/lib/components/icons/IconBurger.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	interface Props {
+		classNames?: string;
+	}
+
+	let { classNames = "" }: Props = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	class={classNames}
+	width="1em"
+	height="1em"
+	fill="none"
+	viewBox="0 0 16 16"
+	><path
+		d="M8.795 10.418a.84.84 0 1 1 0 1.681H1.907a.84.84 0 0 1 0-1.681h6.888ZM14.093 3.9a.841.841 0 0 1 0 1.682H1.907a.84.84 0 0 1 0-1.682h12.186Z"
+		fill="#000"
+	/>
+</svg>
diff --git a/src/lib/components/icons/IconMoon.svelte b/src/lib/components/icons/IconMoon.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+	interface Props {
+		classNames?: string;
+	}
+
+	let { classNames = "" }: Props = $props();
+</script>
+
+<svg
+	width="49"
+	height="49"
+	viewBox="0 0 49 49"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	class={classNames}
+>
+	<mask
+		id="mask0_3607_32"
+		style="mask-type:alpha"
+		maskUnits="userSpaceOnUse"
+		x="6"
+		y="6"
+		width="37"
+		height="37"
+	>
+		<path
+			d="M24.5 42.5C19.4667 42.5 15.2087 40.758 11.726 37.274C8.24333 33.79 6.50133 29.532 6.5 24.5C6.5 19.9 8 15.908 11 12.524C14 9.13996 17.8333 7.16529 22.5 6.59996C22.9333 6.53329 23.3167 6.59196 23.65 6.77596C23.9833 6.95996 24.25 7.20129 24.45 7.49996C24.65 7.79863 24.7587 8.14863 24.776 8.54996C24.7933 8.95129 24.668 9.33463 24.4 9.69996C23.8333 10.5666 23.408 11.4833 23.124 12.45C22.84 13.4166 22.6987 14.4333 22.7 15.5C22.7 18.5 23.75 21.05 25.85 23.15C27.95 25.25 30.5 26.3 33.5 26.3C34.5333 26.3 35.5587 26.15 36.576 25.85C37.5933 25.55 38.5013 25.1333 39.3 24.6C39.6667 24.3666 40.042 24.2586 40.426 24.276C40.81 24.2933 41.1513 24.3846 41.45 24.55C41.7833 24.7166 42.042 24.9666 42.226 25.3C42.41 25.6333 42.468 26.0333 42.4 26.5C41.9333 31.1 39.9753 34.9166 36.526 37.95C33.0767 40.9833 29.068 42.5 24.5 42.5Z"
+			fill="black"
+		/>
+	</mask>
+	<g mask="url(#mask0_3607_32)">
+		<path
+			d="M24.5 42.5C19.4667 42.5 15.2087 40.758 11.726 37.274C8.24333 33.79 6.50133 29.532 6.5 24.5C6.5 19.9 8 15.908 11 12.524C14 9.13996 17.8333 7.16529 22.5 6.59996C22.9333 6.53329 23.3167 6.59196 23.65 6.77596C23.9833 6.95996 24.25 7.20129 24.45 7.49996C24.65 7.79863 24.7587 8.14863 24.776 8.54996C24.7933 8.95129 24.668 9.33463 24.4 9.69996C23.8333 10.5666 23.408 11.4833 23.124 12.45C22.84 13.4166 22.6987 14.4333 22.7 15.5C22.7 18.5 23.75 21.05 25.85 23.15C27.95 25.25 30.5 26.3 33.5 26.3C34.5333 26.3 35.5587 26.15 36.576 25.85C37.5933 25.55 38.5013 25.1333 39.3 24.6C39.6667 24.3666 40.042 24.2586 40.426 24.276C40.81 24.2933 41.1513 24.3846 41.45 24.55C41.7833 24.7166 42.042 24.9666 42.226 25.3C42.41 25.6333 42.468 26.0333 42.4 26.5C41.9333 31.1 39.9753 34.9166 36.526 37.95C33.0767 40.9833 29.068 42.5 24.5 42.5Z"
+			fill="black"
+		/>
+		<path
+			d="M24.5 42.5C19.4667 42.5 15.2087 40.758 11.726 37.274C8.24333 33.79 6.50133 29.532 6.5 24.5C6.5 19.9 8 15.908 11 12.524C14 9.13996 17.8333 7.16529 22.5 6.59996C22.9333 6.53329 23.3167 6.59196 23.65 6.77596C23.9833 6.95996 24.25 7.20129 24.45 7.49996C24.65 7.79863 24.7587 8.14863 24.776 8.54996C24.7933 8.95129 24.668 9.33463 24.4 9.69996C23.8333 10.5666 23.408 11.4833 23.124 12.45C22.84 13.4166 22.6987 14.4333 22.7 15.5C22.7 18.5 23.75 21.05 25.85 23.15C27.95 25.25 30.5 26.3 33.5 26.3C34.5333 26.3 35.5587 26.15 36.576 25.85C37.5933 25.55 38.5013 25.1333 39.3 24.6C39.6667 24.3666 40.042 24.2586 40.426 24.276C40.81 24.2933 41.1513 24.3846 41.45 24.55C41.7833 24.7166 42.042 24.9666 42.226 25.3C42.41 25.6333 42.468 26.0333 42.4 26.5C41.9333 31.1 39.9753 34.9166 36.526 37.95C33.0767 40.9833 29.068 42.5 24.5 42.5Z"
+			fill="url(#paint0_radial_3607_32)"
+		/>
+		<g filter="url(#filter0_f_3607_32)">
+			<path
+				d="M19.9248 7.07642C18.9863 7.73469 18.1188 8.51292 17.3223 9.41138C14.8404 12.2109 13.5986 15.5131 13.5986 19.3186C13.5997 23.4815 15.0417 27.0038 17.9229 29.886C20.804 32.7682 24.3263 34.2092 28.4902 34.2092C32.269 34.2092 35.585 32.9548 38.4385 30.4456C40.1338 28.9547 41.3934 27.2347 42.2178 25.2864C42.2203 25.2909 42.223 25.2954 42.2256 25.3C42.4096 25.6334 42.4684 26.0336 42.4004 26.5002C41.9337 31.0999 39.9754 34.9163 36.5264 37.9495C33.077 40.9828 29.068 42.5002 24.5 42.5002C19.4667 42.5002 15.2083 40.7577 11.7256 37.2737C8.24321 33.7898 6.50141 29.5319 6.5 24.5002C6.5 19.9002 8 15.9077 11 12.5237C13.4287 9.78414 16.4038 7.96861 19.9248 7.07642Z"
+				fill="#89969F"
+			/>
+		</g>
+	</g>
+	<defs>
+		<filter
+			id="filter0_f_3607_32"
+			x="-0.130445"
+			y="0.445971"
+			width="49.1886"
+			height="48.6847"
+			filterUnits="userSpaceOnUse"
+			color-interpolation-filters="sRGB"
+		>
+			<feFlood flood-opacity="0" result="BackgroundImageFix" />
+			<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+			<feGaussianBlur stdDeviation="3.31522" result="effect1_foregroundBlur_3607_32" />
+		</filter>
+		<radialGradient
+			id="paint0_radial_3607_32"
+			cx="0"
+			cy="0"
+			r="1"
+			gradientTransform="matrix(-10.7245 16.294 -16.2944 -10.7241 28.8768 19.7027)"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop offset="0.228187" stop-color="white" />
+			<stop offset="1" stop-color="#F8FAFC" />
+		</radialGradient>
+	</defs>
+</svg>
diff --git a/src/lib/components/icons/IconNew.svelte b/src/lib/components/icons/IconNew.svelte
@@ -12,11 +12,9 @@
 	width="1em"
 	height="1em"
 	fill="none"
-	viewBox="0 0 32 32"
+	viewBox="0 0 16 16"
 	><path
+		d="M7.258 1.856c.333 0 .66.024.979.07-.558.319-.972.86-1.123 1.503A5.254 5.254 0 1 0 9.32 13.513l.275-.127c.334-.17.712-.229 1.08-.17l.158.031.01.003 1.343.36-.359-1.345a1.77 1.77 0 0 1 .137-1.247 5.23 5.23 0 0 0 .538-2.041 2.356 2.356 0 0 0 1.544-1 6.808 6.808 0 0 1-.676 3.742v.001c-.034.066-.031.116-.025.14l.36 1.345a1.572 1.572 0 0 1-1.823 1.945l-.1-.024-1.334-.357a.2.2 0 0 0-.14.018l-.012.005A6.825 6.825 0 1 1 7.259 1.856Zm4.837-1.36c.434 0 .785.352.785.786v1.905h1.9a.785.785 0 0 1 0 1.57h-1.9v1.9a.786.786 0 1 1-1.57 0v-1.9H9.404a.785.785 0 0 1 0-1.57h1.906V1.282c0-.434.352-.787.785-.787Z"
 		fill="currentColor"
-		fill-rule="evenodd"
-		d="M3.143 20.286h4.286v2.142H3.143A2.143 2.143 0 0 1 1 20.287V3.143A2.143 2.143 0 0 1 3.143 1h17.143a2.143 2.143 0 0 1 2.142 2.143v4.286h-2.142V3.143H3.143v17.143Zm9.643-12.857v3.214H16v2.143h-3.214V16h-2.143v-3.214H7.429v-2.143h3.214V7.429h2.143Zm14.185 2.639 3.533 3.532a1.7 1.7 0 0 1 0 2.4L15.5 31H9.57v-5.928l15-15.004a1.7 1.7 0 0 1 2.4 0Zm-15.257 18.79h2.897l10.116-10.116-2.899-2.897L11.714 25.96v2.897ZM23.346 14.33l2.897 2.897 2.429-2.43-2.897-2.896-2.43 2.429Z"
-		clip-rule="evenodd"
 	/></svg
 >
diff --git a/src/lib/components/icons/IconSun.svelte b/src/lib/components/icons/IconSun.svelte
