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

web/src/components/ArticleDetails.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useToast } from '@nuxt/ui/composables'
 import type { Article } from '@/composables/useArticles'
 
 const props = defineProps<{ article: Article }>()
 
-defineEmits<{ 'copy-url': [] }>()
+const emit = defineEmits<{ 'copy-url': [] }>()
+
+const toast = useToast()
 
 const open = defineModel<boolean>('open', { default: false })
 
@@ -55,6 +58,28 @@ const apiNote = computed(() =>
 		? 'Live. Your website can read this article.'
 		: 'Returns 404 until the article is online.',
 )
+
+async function copyUrl() {
+	const url = `${window.location.origin}${publicUrl.value}`
+	try {
+		await navigator.clipboard.writeText(url)
+		toast.add({
+			id: `article-link-copied-${props.article.id}`,
+			color: 'success',
+			icon: 'i-lucide-circle-check',
+			title: 'Link copied',
+			description: `The API URL for "${props.article.title}" is on your clipboard.`,
+		})
+		emit('copy-url')
+	} catch {
+		toast.add({
+			id: `article-link-copy-failed-${props.article.id}`,
+			color: 'error',
+			icon: 'i-lucide-circle-x',
+			title: "Couldn't copy the link",
+		})
+	}
+}
 </script>
 
 <template>
@@ -89,7 +114,15 @@ const apiNote = computed(() =>
 					class="flex items-center gap-1.5 bg-elevated px-2 py-1.5 font-mono text-xs"
 				>
 					<span class="flex-1">{{ publicUrl }}</span>
-					<UIcon name="i-lucide-copy" class="size-3.5" />
+					<UButton
+						icon="i-lucide-copy"
+						color="neutral"
+						variant="ghost"
+						size="sm"
+						aria-label="Copy the public API URL"
+						class="size-5 p-0"
+						@click="copyUrl"
+					/>
 				</div>
 				<p class="text-xs/[18px] text-muted">{{ apiNote }}</p>
 			</div>
@@ -127,7 +160,15 @@ const apiNote = computed(() =>
 							class="flex items-center gap-1.5 bg-elevated px-2 py-1.5 font-mono text-xs"
 						>
 							<span class="flex-1">{{ publicUrl }}</span>
-							<UIcon name="i-lucide-copy" class="size-3.5" />
+							<UButton
+								icon="i-lucide-copy"
+								color="neutral"
+								variant="ghost"
+								size="sm"
+								aria-label="Copy the public API URL"
+								class="size-5 p-0"
+								@click="copyUrl"
+							/>
 						</div>
 						<p class="text-xs/[18px] text-muted">{{ apiNote }}</p>
 					</div>

web/src/components/ArticleEditor.vue

@@ -216,6 +216,7 @@ defineExpose({
 		@update:model-value="onUpdate"
 	>
 		<span class="hidden">{{ captureEditor(editor) }}</span>
+		<UEditorDragHandle :editor="editor" />
 		<UEditorToolbar
 			:editor="editor"
 			:items="buildItems(editor)"
@@ -239,16 +240,16 @@ defineExpose({
 	grid-row-start: 2;
 	min-height: 0;
 	overflow-y: auto;
-	padding: 2.5rem 3rem;
 	background: var(--ui-bg);
 }
 .article-editor :deep(.ProseMirror) {
-	max-width: 42rem;
-	padding: 0;
+	box-sizing: border-box;
+	max-width: 48rem;
+	padding: 2.5rem 3rem;
 	outline: none;
 }
 @media (max-width: 47.999rem) {
-	.article-editor :deep([data-slot='content']) {
+	.article-editor :deep(.ProseMirror) {
 		padding: 1.5rem 1rem;
 	}
 }

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)

web/src/components/CharacterCounter.vue

@@ -8,11 +8,13 @@ const props = withDefaults(
 		min?: number
 		warnAt?: number
 		variant?: 'inline' | 'footer'
+		plainText?: boolean
 	}>(),
 	{
 		min: 0,
 		warnAt: 0.9,
 		variant: 'inline',
+		plainText: false,
 	},
 )
 
@@ -34,11 +36,14 @@ const status = computed<'normal' | 'warn' | 'over' | 'under'>(() => {
 	return 'normal'
 })
 
-const overText = computed(() =>
-	overBy.value === 1
-		? '1 character over. Shorten the text or remove an image. Formatting counts too.'
-		: `${formatThousands(overBy.value)} characters over. Shorten the text or remove an image. Formatting counts too.`,
-)
+const overText = computed(() => {
+	const suffix = props.plainText
+		? 'Shorten the text.'
+		: 'Shorten the text or remove an image. Formatting counts too.'
+	return overBy.value === 1
+		? `1 character over. ${suffix}`
+		: `${formatThousands(overBy.value)} characters over. ${suffix}`
+})
 
 const warnText = 'Close to the limit. Images and formatting count too.'
 

web/src/components/DashboardShell.vue

@@ -3,6 +3,7 @@ import { computed, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useSessionStore } from '@/stores/session'
 import { useApi } from '@/composables/useApi'
+import { useSidebarCollapsed } from '@/composables/useSidebarCollapsed'
 import AppBoot from '@/components/AppBoot.vue'
 import AppLogo from '@/components/AppLogo.vue'
 import ErrorView from '@/components/ErrorView.vue'
@@ -44,7 +45,22 @@ const navItems = computed(() =>
 
 const routeTitle = computed(() => (route.meta.title as string) ?? '')
 const pageTitle = computed(() => props.mobileTitle ?? routeTitle.value)
-const sidebarCollapsed = ref(false)
+const sidebarCollapsed = useSidebarCollapsed()
+
+const sidebarUi = computed(() => ({
+	root: sidebarCollapsed.value ? 'min-w-14 px-1 py-3' : 'min-w-14 p-3',
+	header: 'mb-3 h-10 gap-2.5 px-1.5',
+	body: 'gap-0.5 p-0',
+	footer: 'p-0',
+}))
+
+const navUi = computed(() => ({
+	list: 'flex flex-col gap-0.5',
+	link: sidebarCollapsed.value
+		? 'h-8 justify-center gap-0 px-0 text-sm'
+		: 'h-8 gap-2.5 px-2.5 py-0 text-sm',
+	linkLeadingIcon: 'size-4',
+}))
 const loggingOut = ref(false)
 
 function onRetry() {
@@ -75,12 +91,7 @@ async function onLogout() {
 			:resizable="false"
 			:default-size="14"
 			:collapsed-size="3.5"
-			:ui="{
-				root: 'min-w-14 p-3',
-				header: 'mb-3 h-10 gap-2.5 px-1.5',
-				body: 'gap-0.5 p-0',
-				footer: 'p-0',
-			}"
+			:ui="sidebarUi"
 		>
 			<template #header>
 				<AppLogo :size="26" />
@@ -97,11 +108,7 @@ async function onLogout() {
 				:items="navItems"
 				:collapsed="sidebarCollapsed"
 				aria-label="Main"
-				:ui="{
-					list: 'flex flex-col gap-0.5',
-					link: 'h-8 gap-2.5 px-2.5 py-0 text-sm',
-					linkLeadingIcon: 'size-4',
-				}"
+				:ui="navUi"
 			/>
 
 			<template #footer>

web/src/components/NewArticleModal.vue

@@ -179,6 +179,7 @@ function onCancel() {
 								:value="titleLength"
 								:max="TITLE_MAX_LENGTH"
 								:min="titleCounterMin"
+								plain-text
 							/>
 						</template>
 						<template v-if="titleError" #error="{ error }">

web/src/components/UserMenu.vue

@@ -63,8 +63,11 @@ const items = computed(() => [
 			color="neutral"
 			variant="ghost"
 			block
-			class="h-10 justify-start gap-2.5 px-1.5 font-normal text-highlighted"
-			trailing-icon="i-lucide-chevrons-up-down"
+			:class="[
+				'h-10 gap-2.5 px-1.5 font-normal text-highlighted',
+				collapsed ? 'justify-center' : 'justify-start',
+			]"
+			:trailing-icon="collapsed ? undefined : 'i-lucide-chevrons-up-down'"
 			:ui="{ trailingIcon: 'ms-auto size-3.5 text-default' }"
 			:aria-label="triggerAriaLabel"
 		>