style: icons for categories, adjust opacity & font size

src/routes/(pages)/+page.svelte

@@ -128,6 +128,14 @@
 		}
 	];
 
+	let categoriesToIcons = $derived.by(() => {
+		const map = new Map<string, string>();
+		for (const category of [...superCategories, ...categories]) {
+			map.set(category.id, category.icon);
+		}
+		return map;
+	});
+
 	let filteredTests: Test[] = $state(tests);
 	let filteredCategories: Category[] = $state([]);
 
@@ -211,7 +219,10 @@
 					<a class="test" href={test.id} class:disabled={test.disabled}>
 						<i class="ti {test.icon}"></i>
 						<div class="label">
-							{$i18n.t(test.label)}
+							<span class="name">{$i18n.t(test.label)}</span>
+							{#each test.categories as category}
+								<span class="category"><i class="ti {categoriesToIcons.get(category)}"></i></span>
+							{/each}
 						</div>
 						<div class="description">
 							{$i18n.t(`tests.${test.id}.description`)}
@@ -316,11 +327,18 @@
 		color: inherit;
 
 		& .label {
-			white-space: nowrap;
+			display: inline-flex;
+			align-items: baseline;
+			gap: 0.25em;
+		}
+
+		& .label .category,
+		& .description {
+			opacity: 0.85;
 		}
 
 		& .description {
-			opacity: 0.8;
+			font-size: 0.85em;
 			grid-column-start: 2;
 		}