feat: articles list screen

web/src/components/ArticleStatusBadge.vue

@@ -3,6 +3,7 @@ withDefaults(
 	defineProps<{
 		online: boolean
 		size?: 'sm' | 'md' | 'lg'
+		pending?: 'publish' | 'unpublish'
 	}>(),
 	{
 		size: 'md',
@@ -12,12 +13,17 @@ withDefaults(
 
 <template>
 	<UBadge
-		v-if="online"
+		v-if="pending"
 		color="neutral"
-		variant="solid"
-		icon="i-lucide-globe"
+		variant="outline"
+		icon="i-lucide-loader-circle"
 		:size="size"
+		:class="size === 'lg' ? undefined : 'px-2'"
+		:ui="{ leadingIcon: 'animate-spin' }"
 	>
+		{{ pending === 'publish' ? 'Publishing…' : 'Unpublishing…' }}
+	</UBadge>
+	<UBadge v-else-if="online" color="neutral" variant="solid" icon="i-lucide-globe" :size="size">
 		Online
 	</UBadge>
 	<UBadge