Sort columns by title

frontend/src/lib/components/project/Column.svelte

@@ -71,6 +71,15 @@
 
 		card.showModal = true;
 	}
+
+	async function setOptionValue() {
+		if (!option || !primaryTag) return;
+		if (newOptionValue === option.value) return;
+
+		await option.setValue(newOptionValue);
+		newOptionValue = option.value;
+		currentView.reload();
+	}
 </script>
 
 <div
@@ -86,12 +95,11 @@
 		<input
 			bind:value={newOptionValue}
 			type="text"
-			on:blur={async () => {
-				if (!option || !primaryTag) return;
-				if (newOptionValue === option.value) return;
-
-				await option.setValue(newOptionValue);
-				newOptionValue = option.value;
+			on:blur={setOptionValue}
+			on:keydown={(e) => {
+				if (e.key === 'Enter') {
+					setOptionValue();
+				}
 			}}
 			disabled={option === null}
 		/>

frontend/src/lib/components/project/Project.svelte

@@ -5,7 +5,7 @@
 	import type Project from '$lib/types/Project';
 	import type ProjectTag from '$lib/types/ProjectTag';
 	import { projectTags } from '$lib/types/ProjectTag';
-	import type TagOption from '$lib/types/TagOption';
+	import TagOption from '$lib/types/TagOption';
 	import type View from '$lib/types/View';
 	import Column from './Column.svelte';
 	import Header from './Header.svelte';
@@ -118,7 +118,7 @@
 			{#if $cards}
 				<div class="grid">
 					{#if $currentView.primaryTag}
-						{#each $currentView.primaryTag.options as option (option.id)}
+						{#each [...$currentView.primaryTag.options].sort(TagOption.compare) as option (option.id)}
 							{#if columnPassFilters(option, $currentView.filters)}
 								<Column
 									{option}

frontend/src/lib/types/TagOption.ts

@@ -13,6 +13,10 @@ export default class TagOption {
 		this._value = value;
 	}
 
+	static compare(a: TagOption, b: TagOption): number {
+		return a.value.localeCompare(b.value);
+	}
+
 	get id(): number {
 		return this._id;
 	}