From 8064df651a4a8ae350a2c4ba68f92a2e65f3fc52 Mon Sep 17 00:00:00 2001
From: Script Raccoon <scriptraccoon@gmail.com>
Date: Wed, 2 Sep 2026 19:52:25 +0200
Subject: [PATCH 1/3] rework setting chips, turn radio button to button

---
 src/components/Chip.svelte       | 26 +++++----------
 src/routes/settings/+page.svelte | 57 ++++++++------------------------
 2 files changed, 23 insertions(+), 60 deletions(-)

diff --git a/src/components/Chip.svelte b/src/components/Chip.svelte
index 4b23f8c82..20702ae44 100644
--- a/src/components/Chip.svelte
+++ b/src/components/Chip.svelte
@@ -2,23 +2,18 @@
 	import type { Snippet } from 'svelte'
 
 	type Props = {
-		handle_click?: () => void
+		handle_click: () => void
 		children: Snippet
 		size?: 'small' | 'medium'
+		selected?: boolean
 	}
 
-	let { handle_click, children, size = 'medium' }: Props = $props()
+	let { handle_click, children, size = 'medium', selected }: Props = $props()
 </script>
 
-{#if handle_click !== undefined}
-	<button class="chip {size}" onclick={handle_click}>
-		{@render children()}
-	</button>
-{:else}
-	<div class="chip {size}">
-		{@render children()}
-	</div>
-{/if}
+<button class="chip {size}" onclick={handle_click} aria-current={selected}>
+	{@render children()}
+</button>
 
 <style>
 	.chip {
@@ -26,6 +21,7 @@
 		border-radius: 100vw;
 		background-color: var(--secondary-bg-color);
 		outline: 1px solid var(--secondary-outline-color);
+		transition: outline-color 150ms;
 	}
 
 	.chip.medium {
@@ -38,12 +34,8 @@
 		padding: 0.15rem 0.85rem;
 	}
 
-	button.chip {
-		transition: outline-color 150ms;
-	}
-
-	button.chip:hover,
-	button.chip:focus-visible {
+	.chip:hover,
+	.chip:focus-visible {
 		outline-color: var(--outline-color);
 	}
 </style>
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index 4ada5a523..b06545625 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -21,22 +21,13 @@
 	<ChipGroup>
 		{#each THEMES as option}
 			{@const selected = theme.value === option}
-			<label class:selected>
-				<input
-					class="visually-hidden"
-					type="radio"
-					name="color"
-					value={option}
-					bind:group={theme.value}
-				/>
-				<Chip>
-					{option}
-					{#if selected}
-						&nbsp;
-						<Fa icon={faCheckCircle} />
-					{/if}
-				</Chip>
-			</label>
+			<Chip handle_click={() => (theme.value = option)} {selected}>
+				{option}
+				{#if selected}
+					&nbsp;
+					<Fa icon={faCheckCircle} />
+				{/if}
+			</Chip>
 		{/each}
 	</ChipGroup>
 </section>
@@ -53,34 +44,14 @@
 	<ChipGroup>
 		{#each [true, false] as allow}
 			{@const selected = tracking.allow === allow}
-			<label class:selected>
-				<input
-					class="visually-hidden"
-					type="radio"
-					name="tracking"
-					value={allow}
-					bind:group={tracking.allow}
-				/>
 
-				<Chip>
-					{allow ? 'On' : 'Off'}
-					{#if selected}
-						&nbsp;
-						<Fa icon={faCheckCircle} />
-					{/if}
-				</Chip>
-			</label>
+			<Chip handle_click={() => (tracking.allow = allow)} {selected}>
+				{allow ? 'On' : 'Off'}
+				{#if selected}
+					&nbsp;
+					<Fa icon={faCheckCircle} />
+				{/if}
+			</Chip>
 		{/each}
 	</ChipGroup>
 </section>
-
-<style>
-	label {
-		cursor: pointer;
-	}
-
-	label:has(:focus-visible) {
-		outline: 2px solid var(--outline-color);
-		outline-offset: 2px;
-	}
-</style>

From abafb10dd84f250d4bd5b6101105c3674384c500 Mon Sep 17 00:00:00 2001
From: Script Raccoon <scriptraccoon@gmail.com>
Date: Wed, 2 Sep 2026 19:58:04 +0200
Subject: [PATCH 2/3] turn tag chips into links

---
 src/components/Chip.svelte    | 27 ++++++++++++++++++++++-----
 src/components/TagList.svelte | 16 ++++++----------
 2 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/src/components/Chip.svelte b/src/components/Chip.svelte
index 20702ae44..1d6f98c6e 100644
--- a/src/components/Chip.svelte
+++ b/src/components/Chip.svelte
@@ -2,18 +2,31 @@
 	import type { Snippet } from 'svelte'
 
 	type Props = {
-		handle_click: () => void
+		handle_click?: () => void
 		children: Snippet
 		size?: 'small' | 'medium'
 		selected?: boolean
+		link?: string
 	}
 
-	let { handle_click, children, size = 'medium', selected }: Props = $props()
+	let {
+		handle_click,
+		children,
+		size = 'medium',
+		selected = false,
+		link
+	}: Props = $props()
 </script>
 
-<button class="chip {size}" onclick={handle_click} aria-current={selected}>
-	{@render children()}
-</button>
+{#if link}
+	<a href={link} class="chip {size}" onclick={handle_click} aria-current={selected}>
+		{@render children()}
+	</a>
+{:else if handle_click}
+	<button class="chip {size}" onclick={handle_click} aria-current={selected}>
+		{@render children()}
+	</button>
+{/if}
 
 <style>
 	.chip {
@@ -38,4 +51,8 @@
 	.chip:focus-visible {
 		outline-color: var(--outline-color);
 	}
+
+	a.chip {
+		text-decoration: none;
+	}
 </style>
diff --git a/src/components/TagList.svelte b/src/components/TagList.svelte
index e41bdf1ea..76c028e94 100644
--- a/src/components/TagList.svelte
+++ b/src/components/TagList.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { goto } from '$app/navigation'
 	import type { StructureType } from '$lib/commons/types'
 	import Fa from 'svelte-fa'
 	import Chip from './Chip.svelte'
@@ -13,19 +12,16 @@
 	}
 
 	let { type, tags, sort }: Props = $props()
-
-	function filter_by_tag(tag: string) {
-		if (sort === 'structure') {
-			goto(`/${type}-list/${tag}`)
-		} else {
-			goto(`/${type}-properties/${tag}`)
-		}
-	}
 </script>
 
 <ChipGroup>
 	{#each tags as tag}
-		<Chip size="small" handle_click={() => filter_by_tag(tag)}>
+		<Chip
+			size="small"
+			link={sort === 'structure'
+				? `/${type}-list/${tag}`
+				: `/${type}-properties/${tag}`}
+		>
 			<Fa icon={faTag} color="var(--secondary-text-color)" />
 			&nbsp;{tag}
 		</Chip>

From 3780c84382ba4d1119d4b33468b998aea5291548 Mon Sep 17 00:00:00 2001
From: Script Raccoon <scriptraccoon@gmail.com>
Date: Wed, 2 Sep 2026 20:09:38 +0200
Subject: [PATCH 3/3] adjust end-to-end tests to updated tag chips

---
 tests/categories.spec.ts          | 4 ++--
 tests/category-properties.spec.ts | 4 ++--
 tests/functor-properties.spec.ts  | 4 ++--
 tests/functors.spec.ts            | 4 ++--
 tests/morphism-properties.spec.ts | 4 ++--
 tests/morphisms.spec.ts           | 4 ++--
 6 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/tests/categories.spec.ts b/tests/categories.spec.ts
index 5ecf6387e..442db97bf 100644
--- a/tests/categories.spec.ts
+++ b/tests/categories.spec.ts
@@ -45,7 +45,7 @@ test("user can navigate to categories tagged with 'analysis' from the category l
 	await page.goto('/category-list', { waitUntil: 'networkidle' })
 
 	await page
-		.getByRole('button', {
+		.getByRole('link', {
 			name: 'analysis',
 			exact: true
 		})
@@ -72,7 +72,7 @@ test("user can navigate to categories tagged with 'algebra' from the category de
 	await page.goto('/category/Grp', { waitUntil: 'networkidle' })
 
 	await page
-		.getByRole('button', {
+		.getByRole('link', {
 			name: 'algebra',
 			exact: true
 		})
diff --git a/tests/category-properties.spec.ts b/tests/category-properties.spec.ts
index 1d87c12bb..674eef748 100644
--- a/tests/category-properties.spec.ts
+++ b/tests/category-properties.spec.ts
@@ -149,7 +149,7 @@ test("user can navigate to properties tagged with 'colimits' from the property l
 	await page.goto('/category-properties', { waitUntil: 'networkidle' })
 
 	await page
-		.getByRole('button', {
+		.getByRole('link', {
 			name: 'colimits',
 			exact: true
 		})
@@ -183,7 +183,7 @@ test("user can navigate to properties tagged with 'topos theory' from the proper
 	await page.goto('/category-property/cartesian_closed', { waitUntil: 'networkidle' })
 
 	await page
-		.getByRole('button', {
+		.getByRole('link', {
 			name: 'topos theory',
 			exact: true
 		})
diff --git a/tests/functor-properties.spec.ts b/tests/functor-properties.spec.ts
index 1ee8bd916..352ba9565 100644
--- a/tests/functor-properties.spec.ts
+++ b/tests/functor-properties.spec.ts
@@ -137,7 +137,7 @@ test("user can navigate to properties tagged with 'adjunctions' from the propert
 	await page.goto('/functor-properties', { waitUntil: 'networkidle' })
 
 	await page
-		.getByRole('button', {
+		.getByRole('link', {
 			name: 'adjunctions',
 			exact: true
 		})
@@ -171,7 +171,7 @@ test("user can navigate to properties tagged with 'colimit preservation' from th
 	await page.goto('/functor-property/finitary', { waitUntil: 'networkidle' })
 
 	await page
-		.getByRole('button', {
+		.getByRole('link', {
 			name: 'colimit preservation',
 			exact: true
 		})
diff --git a/tests/functors.spec.ts b/tests/functors.spec.ts
index 8f3120388..1829eb4b9 100644
--- a/tests/functors.spec.ts
+++ b/tests/functors.spec.ts
@@ -43,7 +43,7 @@ test("user can navigate to functors tagged with 'topology' from the functor list
 	await page.goto('/functor-list', { waitUntil: 'networkidle' })
 
 	await page
-		.getByRole('button', {
+		.getByRole('link', {
 			name: 'topology',
 			exact: true
 		})
@@ -70,7 +70,7 @@ test("user can navigate to functors tagged with 'algebra' from the functor detai
 	await page.goto('/functor/abelianization', { waitUntil: 'networkidle' })
 
 	await page
-		.getByRole('button', {
+		.getByRole('link', {
 			name: 'algebra',
 			exact: true
 		})
diff --git a/tests/morphism-properties.spec.ts b/tests/morphism-properties.spec.ts
index 3a8b15bf4..fe29c815f 100644
--- a/tests/morphism-properties.spec.ts
+++ b/tests/morphism-properties.spec.ts
@@ -147,7 +147,7 @@ test("user can navigate to properties tagged with 'types of epimorphism' from th
 	await page.goto('/morphism-properties', { waitUntil: 'networkidle' })
 
 	await page
-		.getByRole('button', {
+		.getByRole('link', {
 			name: 'types of epimorphisms',
 			exact: true
 		})
@@ -183,7 +183,7 @@ test("user can navigate to properties tagged with 'types of monomorphisms' from
 	})
 
 	await page
-		.getByRole('button', {
+		.getByRole('link', {
 			name: 'types of monomorphisms',
 			exact: true
 		})
diff --git a/tests/morphisms.spec.ts b/tests/morphisms.spec.ts
index bcf6896bb..8d1bac102 100644
--- a/tests/morphisms.spec.ts
+++ b/tests/morphisms.spec.ts
@@ -43,7 +43,7 @@ test("user can navigate to morphisms tagged with 'algebra' from the morphism lis
 	await page.goto('/morphism-list', { waitUntil: 'networkidle' })
 
 	await page
-		.getByRole('button', {
+		.getByRole('link', {
 			name: 'algebra',
 			exact: true
 		})
@@ -70,7 +70,7 @@ test("user can navigate to morphisms tagged with 'set theory' from the morphism
 	await page.goto('/morphism/id_X', { waitUntil: 'networkidle' })
 
 	await page
-		.getByRole('button', {
+		.getByRole('link', {
 			name: 'set theory',
 			exact: true
 		})