feat(SPA): profile page, display name and the new account menu

web/src/components/CharacterCounter.vue

@@ -7,7 +7,7 @@ const props = withDefaults(
 		max: number
 		min?: number
 		warnAt?: number
-		variant?: 'inline' | 'footer'
+		variant?: 'inline' | 'footer' | 'field'
 		plainText?: boolean
 	}>(),
 	{
@@ -113,6 +113,12 @@ const isErrorStatus = computed(() => status.value === 'over' || status.value ===
 		</span>
 		<span aria-live="polite" class="sr-only">{{ announcement }}</span>
 	</div>
+	<span
+		v-else-if="variant === 'field'"
+		class="font-mono text-xs leading-tight"
+		:class="overBy > 0 ? 'text-error' : 'text-muted'"
+		>{{ formatThousands(value) }} / {{ formatThousands(max) }}</span
+	>
 	<div v-else class="flex flex-col gap-1">
 		<div
 			class="flex items-center gap-1.5 font-mono text-xs"