feat: article creation modal

web/src/components/CharacterCounter.vue

@@ -21,7 +21,10 @@ function formatThousands(count: number) {
 }
 
 const overBy = computed(() => props.value - props.max)
-const status = computed<'normal' | 'warn' | 'over'>(() => {
+const status = computed<'normal' | 'warn' | 'over' | 'under'>(() => {
+	if (props.min > 0 && props.value < props.min) {
+		return 'under'
+	}
 	if (overBy.value > 0) {
 		return 'over'
 	}
@@ -63,6 +66,8 @@ watch(status, (next, previous) => {
 		announcement.value = ''
 	}
 })
+
+const isErrorStatus = computed(() => status.value === 'over' || status.value === 'under')
 </script>
 
 <template>
@@ -74,7 +79,7 @@ watch(status, (next, previous) => {
 			class="flex-1 text-xs"
 			:class="{
 				'text-warning': status === 'warn',
-				'text-error': status === 'over',
+				'text-error': isErrorStatus,
 				'text-muted': status === 'normal',
 			}"
 			>{{ message }}</span
@@ -83,7 +88,7 @@ watch(status, (next, previous) => {
 			class="flex items-center gap-1.5 font-mono text-xs"
 			:class="{
 				'text-warning': status === 'warn',
-				'text-error': status === 'over',
+				'text-error': isErrorStatus,
 				'text-muted': status === 'normal',
 			}"
 		>
@@ -105,10 +110,10 @@ watch(status, (next, previous) => {
 	</div>
 	<div v-else class="flex flex-col gap-1">
 		<div
-			class="flex items-center gap-1.5 font-mono text-sm"
+			class="flex items-center gap-1.5 font-mono text-xs"
 			:class="{
 				'text-warning': status === 'warn',
-				'text-error': status === 'over',
+				'text-error': isErrorStatus,
 				'text-muted': status === 'normal',
 			}"
 		>
@@ -124,9 +129,7 @@ watch(status, (next, previous) => {
 				class="size-4"
 				data-testid="character-counter-over-icon"
 			/>
-			<span
-				>{{ formatThousands(value) }} / {{ formatThousands(max) }}</span
-			>
+			<span>{{ formatThousands(value) }} / {{ formatThousands(max) }}</span>
 		</div>
 		<p v-if="status === 'over'" class="text-sm text-error">
 			{{ overText }}