From 766ab74624d4242a309f002ae0d143d8866d7955 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Fri, 26 Sep 2025 22:32:55 +0200
Subject: [PATCH] style: icons for categories, adjust opacity & font size

---
 src/routes/(pages)/+page.svelte | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/routes/(pages)/+page.svelte b/src/routes/(pages)/+page.svelte
index 86a1ff6..3272f84 100644
--- a/src/routes/(pages)/+page.svelte
+++ b/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;
 		}