feat: article editor header redesign

web/src/components/EditorHeader.vue

@@ -5,11 +5,9 @@ defineEmits<{ back: [] }>()
 </script>
 
 <template>
-	<div
-		class="flex shrink-0 flex-col gap-2.5 border-b border-default bg-default px-4 py-3 lg:px-6 lg:py-3.5"
-	>
-		<div class="flex items-start gap-2">
-			<span class="hidden h-15 items-end lg:flex">
+	<div class="@container shrink-0 border-b border-default bg-default px-4 py-3 lg:px-6 lg:py-3.5">
+		<div class="flex flex-col gap-2.5 lg:flex-row lg:flex-wrap lg:items-start lg:gap-3">
+			<span class="hidden h-10 items-center lg:flex">
 				<UButton
 					icon="i-lucide-arrow-left"
 					color="neutral"
@@ -19,15 +17,15 @@ defineEmits<{ back: [] }>()
 					@click="$emit('back')"
 				/>
 			</span>
-			<div class="min-w-0 flex-1">
+			<div
+				class="min-w-0 max-lg:order-first lg:order-3 lg:basis-full @4xl:order-1 @4xl:flex-1 @4xl:basis-60"
+			>
 				<slot name="title" />
 			</div>
-		</div>
-		<div class="flex flex-wrap items-center gap-x-3 gap-y-2">
-			<div class="flex min-w-0 flex-1 flex-wrap items-center gap-2">
+			<div class="flex min-w-0 flex-wrap items-center gap-2 lg:order-0 lg:min-h-10">
 				<slot name="meta" />
 			</div>
-			<div class="hidden shrink-0 lg:flex">
+			<div class="hidden shrink-0 items-center lg:order-2 lg:ml-auto lg:flex lg:h-10">
 				<slot name="actions" />
 			</div>
 		</div>

web/src/components/EditorTitleField.vue

@@ -67,12 +67,14 @@ const trailingIcon = computed(() => {
 
 const borderClass = computed(() => {
 	if (props.readonly) {
-		return 'border-0 bg-transparent px-0 py-0 pe-5 lg:min-h-9'
+		return 'bg-transparent px-0 py-0 pe-5 lg:min-h-9'
 	}
 	if (errored.value) {
-		return 'border-error'
+		return 'border-b-2 border-error'
 	}
-	return focused.value ? 'border-primary' : 'border-accented'
+	return focused.value
+		? 'border-b-2 border-primary bg-default'
+		: 'border-b border-accented bg-transparent'
 })
 
 async function remeasure() {
@@ -91,7 +93,7 @@ defineExpose({ focus: focusField })
 
 <template>
 	<div class="flex min-w-0 flex-col" :class="readonly ? 'gap-0.5' : 'gap-1'">
-		<label :for="inputId" class="text-xs/5 text-muted">{{ label }}</label>
+		<label :for="inputId" class="sr-only">{{ label }}</label>
 		<UTextarea
 			:id="inputId"
 			ref="input"
@@ -108,14 +110,11 @@ defineExpose({ focus: focusField })
 			:ui="{
 				root: 'w-full',
 				base: [
-					'min-h-11 resize-none border bg-default px-2.5 py-0.5 !text-lead/7 font-semibold lg:!text-xl/7 text-highlighted ring-0 lg:min-h-10 lg:py-1.25',
+					'min-h-11 resize-none rounded-none border-0 px-1 py-0.5 !text-lead/7 font-semibold lg:!text-xl/7 text-highlighted ring-0 lg:min-h-10 lg:py-1.25',
 					borderClass,
 					showsCounter ? COUNTER_END_PADDING : '',
-					focused && !errored && !changed
-						? 'outline-2 outline-offset-1 outline-primary'
-						: '',
 				],
-				trailing: ['items-start gap-2 pt-2.5', readonly ? 'pe-0' : 'pe-2.5'],
+				trailing: ['items-start gap-2 pt-2.5', readonly ? 'pe-0' : 'pe-1'],
 				trailingIcon: [
 					'size-3.5',
 					saving ? 'animate-spin' : '',
@@ -139,7 +138,7 @@ defineExpose({ focus: focusField })
 			v-if="!readonly"
 			:id="helpId"
 			:role="invalid ? 'alert' : undefined"
-			class="flex flex-wrap items-center gap-2 text-xs/4.5"
+			class="flex flex-wrap items-center gap-2 px-1 text-xs/4.5"
 			:class="errored ? 'text-error' : 'text-muted'"
 		>
 			<UIcon v-if="errored" name="i-lucide-circle-x" class="size-3.5" />