Separate jam tags from the rest

src/lib/components/tags-selector.svelte

@@ -10,18 +10,38 @@
 	}
 
 	let { tagStates, onToggleTag, onClear, tags }: Props = $props();
+
+	const { jamTags, nonJamTags } = $derived(
+		(() => {
+			const jamTags = tags.filter((tag) => tag.startsWith('jam')).sort();
+
+			// Tags are sorted by how common they are, which makes jam tags a bit messy.
+			// So we separate jam tags from the rest and sort alphabetically.
+			const nonJamTags = tags.filter((tag) => !tag.startsWith('jam'));
+			return { jamTags, nonJamTags };
+		})()
+	);
 </script>
 
-<div class="flex flex-wrap gap-2 mb-2">
-	{#each tags as tag}
-		<TagToggle selected={tagStates[tag]} onclick={() => onToggleTag(tag)}>
-			{tag}
-		</TagToggle>
-	{/each}
+<div class="flex flex-col">
+	<div class="flex flex-wrap gap-2 mb-2">
+		{#each nonJamTags as tag}
+			<TagToggle selected={tagStates[tag]} onclick={() => onToggleTag(tag)}>
+				{tag}
+			</TagToggle>
+		{/each}
+	</div>
+	<div class="flex flex-wrap gap-2 mb-2">
+		{#each jamTags as tag}
+			<TagToggle selected={tagStates[tag]} onclick={() => onToggleTag(tag)}>
+				{tag}
+			</TagToggle>
+		{/each}
 
-	{#if tags.length > 0 && Object.keys(tagStates).length > 0}
-		<TagToggle title="Clear" onclick={onClear}>
-			<div class="text-xs grayscale">❌</div>
-		</TagToggle>
-	{/if}
+		{#if tags.length > 0 && Object.keys(tagStates).length > 0}
+			<TagToggle title="Clear" onclick={onClear}>
+				<div class="text-xs">❌</div>
+			</TagToggle>
+		{/if}
+	</div>
 </div>

src/routes/jam/jan-2023/+page.svelte

@@ -47,7 +47,7 @@
 
 	const jamMods = modList.filter(
 		(mod) =>
-			mod.tags.includes('jam') &&
+			mod.tags.includes('jam1') &&
 			Date.parse(mod.firstReleaseDate) <= endTimestamp + jamTimestampThreshold
 	);
 	const firstPlaceMods = jamMods.filter((mod) =>

src/routes/jam/jul-2023/+page.svelte

@@ -94,7 +94,7 @@
 
 	const jamMods = modList.filter(
 		(mod) =>
-			mod.tags.includes('jam') &&
+			mod.tags.includes('jam2') &&
 			Date.parse(mod.firstReleaseDate) <= endTimestamp + jamTimestampThreshold &&
 			Date.parse(mod.firstReleaseDate) >= startTimestamp - jamTimestampThreshold
 	);

src/routes/jam/jul-2025/+page.svelte

@@ -121,7 +121,7 @@
 
 	const jamMods = modList.filter(
 		(mod) =>
-			mod.tags.includes('jam') &&
+			mod.tags.includes('jam5') &&
 			Date.parse(mod.firstReleaseDate) <= endTimestamp + jamTimestampThreshold * 3 &&
 			Date.parse(mod.firstReleaseDate) >= startTimestamp - jamTimestampThreshold &&
 			mod.uniqueName !== 'xen.ModJam5'

src/routes/jam/mar-2024/+page.svelte

@@ -122,7 +122,7 @@
 
 	const jamMods = modList.filter(
 		(mod) =>
-			mod.tags.includes('jam') &&
+			mod.tags.includes('jam3') &&
 			Date.parse(mod.firstReleaseDate) <= endTimestamp + jamTimestampThreshold &&
 			Date.parse(mod.firstReleaseDate) >= startTimestamp - jamTimestampThreshold &&
 			mod.uniqueName !== 'xen.ModJam3'

src/routes/jam/oct-2024/+page.svelte

@@ -125,7 +125,7 @@
 
 	const jamMods = modList.filter(
 		(mod) =>
-			mod.tags.includes('jam') &&
+			mod.tags.includes('jam4') &&
 			Date.parse(mod.firstReleaseDate) <= endTimestamp + jamTimestampThreshold * 3 &&
 			Date.parse(mod.firstReleaseDate) >= startTimestamp - jamTimestampThreshold
 	);