Fix small UI bugs (#1260)

* Refactor `NoteList`

* Refactor `VideoList`

* Refactor `PostList`

Author: maiertech

package.json

@@ -22,17 +22,17 @@
 		"@fontsource/lexend": "^5.2.11",
 		"@fontsource/spectral": "^5.2.8",
 		"@lucide/svelte": "^1.21.0",
-		"@maiertech/sveltekit-helpers": "^0.53.2",
+		"@maiertech/sveltekit-helpers": "^0.54.0",
 		"@playwright/test": "^1.61.0",
 		"@skeletonlabs/skeleton": "^4.15.2",
 		"@skeletonlabs/skeleton-svelte": "^4.15.2",
 		"@stackblitz/sdk": "^1.11.0",
 		"@sveltejs/adapter-node": "5.5.4",
 		"@sveltejs/enhanced-img": "^0.11.0",
-		"@sveltejs/kit": "2.65.2",
+		"@sveltejs/kit": "^2.66.0",
 		"@sveltejs/vite-plugin-svelte": "^7.1.2",
 		"@tailwindcss/vite": "^4.3.1",
-		"@types/node": "^25.9.3",
+		"@types/node": "^25.9.4",
 		"d3-array": "^3.2.4",
 		"dotenv": "^17.4.2",
 		"eslint": "^10.5.0",

pnpm-lock.yaml

@@ -4,15 +4,15 @@
 
 	interface Props {
 		values: Note[];
-		level: 1 | 2 | 3 | 4 | 5 | 6;
+		as?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 		class?: string;
 	}
 
-	let { values, level, class: className }: Props = $props();
+	let { values, as, class: className }: Props = $props();
 </script>
 
 <div data-component="NoteList" class={twMerge(className, 'flex flex-wrap gap-6')}>
 	{#each values as note (note.path)}
-		<NotePreview value={note} {level} class="grow basis-2xs" />
+		<NotePreview value={note} {as} class="grow basis-2xs" />
 	{/each}
 </div>

src/lib/components/NoteList.svelte

@@ -4,15 +4,15 @@
 
 	interface Props {
 		values: Post[];
-		level: 1 | 2 | 3 | 4 | 5 | 6;
+		as?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 		class?: string;
 	}
 
-	let { values, level, class: className }: Props = $props();
+	let { values, as, class: className }: Props = $props();
 </script>
 
 <div data-component="PostList" class={twMerge(className, 'flex flex-wrap gap-6')}>
 	{#each values as post (post.path)}
-		<PostPreview value={post} {level} class="grow basis-xs" />
+		<PostPreview value={post} {as} class="grow basis-xs" />
 	{/each}
 </div>

src/lib/components/PostList.svelte

@@ -4,15 +4,15 @@
 
 	interface Props {
 		values: Video[];
-		level: 1 | 2 | 3 | 4 | 5 | 6;
+		as?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 		class?: string;
 	}
 
-	let { values, level, class: className }: Props = $props();
+	let { values, as, class: className }: Props = $props();
 </script>
 
 <div data-component="VideoList" class={twMerge(className, 'flex flex-wrap gap-6')}>
 	{#each values as video (video.id)}
-		<VideoPreview value={video} {level} showDescription={false} class="grow basis-xs" />
+		<VideoPreview value={video} {as} showDescription={false} class="grow basis-xs" />
 	{/each}
 </div>

src/lib/components/VideoList.svelte

@@ -23,12 +23,12 @@
 
 		<div class="mb-8 flex flex-wrap gap-6">
 			<!-- Not-sidebar (videos): latest video. -->
-			<VideoPreview value={data.videos[0]} level={3} class="grow-999 min-inline-3/5" />
+			<VideoPreview value={data.videos[0]} as="h3" class="grow-999 min-inline-3/5" />
 
 			<!-- Sidebar (videos): 2 more videos. -->
 			<div class="flex grow basis-3xs flex-wrap gap-6">
 				{#each data.videos.slice(1) as video (video.id)}
-					<VideoPreview value={video} level={3} showDescription={false} class="grow basis-80" />
+					<VideoPreview value={video} as="h3" showDescription={false} class="grow basis-80" />
 				{/each}
 			</div>
 		</div>
@@ -38,7 +38,7 @@
 			<span class="text-lg font-semibold">Latest posts</span>
 		</h2>
 
-		<PostList values={data.posts} level={3} />
+		<PostList values={data.posts} as="h3" />
 	</div>
 
 	<!-- Sidebar (outer): notes. -->
@@ -48,6 +48,6 @@
 			<span class="text-lg font-semibold">Latest notes</span>
 		</h2>
 
-		<NoteList values={data.notes} level={3} />
+		<NoteList values={data.notes} as="h3" />
 	</div>
 </div>

src/routes/+page.svelte

@@ -23,6 +23,6 @@
 			<Clock class="size-5" />
 			<span class="text-lg font-semibold">Latest videos</span>
 		</h2>
-		<VideoList values={data.recommendedVideos} level={3} />
+		<VideoList values={data.recommendedVideos} as="h3" />
 	</aside>
 </div>

src/routes/guides/+layout.svelte

@@ -23,6 +23,6 @@
 			<Clock class="size-5" />
 			<span class="text-lg font-semibold">Latest videos</span>
 		</h2>
-		<VideoList values={data.recommendedVideos} level={3} />
+		<VideoList values={data.recommendedVideos} as="h3" />
 	</aside>
 </div>

src/routes/notes/+layout.svelte

@@ -8,4 +8,4 @@
 
 <H1 class="mb-8">{data.seo.title}</H1>
 
-<NoteList values={data.notes} level={2} />
+<NoteList values={data.notes} as="h2" />

src/routes/notes/+page@.svelte

@@ -24,6 +24,6 @@
 			<Clock class="size-5" />
 			<span class="text-lg font-semibold">Latest videos</span>
 		</h2>
-		<VideoList values={data.recommendedVideos} level={3} />
+		<VideoList values={data.recommendedVideos} as="h3" />
 	</aside>
 </div>