fix: multiple fixes all accross the SPA, missing buttons actions, styling etc.

web/src/components/ArticleTable.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import ArticleStatusBadge from '@/components/ArticleStatusBadge.vue'
 import { formatAbsoluteDateFromIso, formatRelativeDate } from '@/lib/relativeDate'
@@ -23,14 +24,27 @@ const router = useRouter()
 const columnWidths =
 	'[&:nth-child(2)]:w-27.5 [&:nth-child(3)]:w-32.5 [&:nth-child(4)]:w-35 [&:nth-child(5)]:w-11'
 
+const sorting = ref([{ id: 'updated_at', desc: true }])
+
 const columns = [
-	{ accessorKey: 'title', header: 'Title' },
-	{ accessorKey: 'is_online', header: 'Status', size: 110 },
-	{ accessorKey: 'created_at', header: 'Created', size: 130 },
-	{ accessorKey: 'updated_at', header: 'Updated', size: 140 },
+	{ accessorKey: 'title', header: 'Title', enableSorting: true },
+	{ accessorKey: 'is_online', header: 'Status', size: 110, enableSorting: true },
+	{ accessorKey: 'created_at', header: 'Created', size: 130, enableSorting: true },
+	{ accessorKey: 'updated_at', header: 'Updated', size: 140, enableSorting: true },
 	{ id: 'actions', header: '', size: 44 },
 ]
 
+function sortIcon(column: { getIsSorted: () => false | 'asc' | 'desc' }) {
+	const sorted = column.getIsSorted()
+	if (sorted === 'asc') {
+		return 'i-lucide-arrow-up'
+	}
+	if (sorted === 'desc') {
+		return 'i-lucide-arrow-down'
+	}
+	return undefined
+}
+
 function editPath(article: Article) {
 	return `/article/${article.id}/edit`
 }
@@ -112,6 +126,7 @@ function onSelect(row: { original: Article }) {
 				th: `px-3 ${columnWidths}`,
 				td: `h-11 px-3 py-0 ${columnWidths}`,
 			}"
+			v-model:sorting="sorting"
 			@select="onSelect"
 		>
 			<template #caption>
@@ -120,6 +135,50 @@ function onSelect(row: { original: Article }) {
 				</caption>
 			</template>
 
+			<template #title-header="{ column }">
+				<button
+					type="button"
+					class="inline-flex items-center gap-1 text-highlighted"
+					@click.stop="column.toggleSorting()"
+				>
+					Title
+					<UIcon v-if="sortIcon(column)" :name="sortIcon(column)!" class="size-3" />
+				</button>
+			</template>
+
+			<template #is_online-header="{ column }">
+				<button
+					type="button"
+					class="inline-flex items-center gap-1 text-highlighted"
+					@click.stop="column.toggleSorting()"
+				>
+					Status
+					<UIcon v-if="sortIcon(column)" :name="sortIcon(column)!" class="size-3" />
+				</button>
+			</template>
+
+			<template #created_at-header="{ column }">
+				<button
+					type="button"
+					class="inline-flex items-center gap-1 text-highlighted"
+					@click.stop="column.toggleSorting()"
+				>
+					Created
+					<UIcon v-if="sortIcon(column)" :name="sortIcon(column)!" class="size-3" />
+				</button>
+			</template>
+
+			<template #updated_at-header="{ column }">
+				<button
+					type="button"
+					class="inline-flex items-center gap-1 text-highlighted"
+					@click.stop="column.toggleSorting()"
+				>
+					Updated
+					<UIcon v-if="sortIcon(column)" :name="sortIcon(column)!" class="size-3" />
+				</button>
+			</template>
+
 			<template #title-cell="{ row }">
 				<RouterLink
 					:to="editPath(row.original)"
@@ -140,13 +199,6 @@ function onSelect(row: { original: Article }) {
 				/>
 			</template>
 
-			<template #updated_at-header>
-				<span class="inline-flex items-center gap-1 text-highlighted">
-					Updated
-					<UIcon name="i-lucide-arrow-down" class="size-3" />
-				</span>
-			</template>
-
 			<template #created_at-cell="{ row }">
 				<span class="text-muted">{{
 					formatAbsoluteDateFromIso(row.original.created_at)