@nuasite/cms 0.39.2 → 0.41.0

package/src/editor/components/frontmatter-fields.tsx

@@ -1,5 +1,6 @@
 import type { ComponentChildren } from 'preact'
 import { useEffect, useState } from 'preact/hooks'
+import { cn } from '../lib/cn'
 import { buildAstroUploadContext, getCollectionEntryOptions } from '../manifest'
 import { renameMarkdownPage } from '../markdown-api'
 import {
@@ -11,14 +12,46 @@ import {
 	updateMarkdownFrontmatter,
 	updateMarkdownPageMeta,
 } from '../signals'
+import { STRINGS } from '../strings'
 import type { CollectionDefinition, FieldDefinition, MarkdownPageEntry } from '../types'
-import { ColorField, ComboBoxField, ImageField, MultiSelectField, NumberField, TextField, ToggleField } from './fields'
+import { ColorField, ComboBoxField, FileField, ImageField, MultiSelectField, NumberField, TextField, ToggleField } from './fields'
 import { groupFields } from './frontmatter-sidebar'
 
 function isArrayOfObjects(value: unknown[]): value is Record<string, unknown>[] {
 	return value.length > 0 && typeof value[0] === 'object' && value[0] !== null
 }
 
+/** Checkbox below a URL field that toggles opening the link in a new tab. */
+function OpenInNewTabToggle({ field }: { field: FieldDefinition }) {
+	const fm = markdownEditorState.value.currentPage?.frontmatter ?? {}
+	const targetKey = `${field.name}OpenInNewTab`
+	const isChecked = fm[targetKey] === true
+	return (
+		<label class="flex items-center gap-2 mt-2 text-xs text-white/70 cursor-pointer w-fit" data-cms-ui>
+			<input
+				type="checkbox"
+				checked={isChecked}
+				onChange={(e) => updateMarkdownFrontmatter({ [targetKey]: (e.target as HTMLInputElement).checked })}
+				class="sr-only peer"
+				data-cms-ui
+			/>
+			<span
+				class={cn(
+					'w-4 h-4 rounded border flex items-center justify-center shrink-0 transition-colors',
+					isChecked ? 'bg-cms-primary border-cms-primary' : 'border-white/30 bg-white/5',
+				)}
+			>
+				{isChecked && (
+					<svg class="w-3 h-3 text-cms-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
+					</svg>
+				)}
+			</span>
+			Open in new tab
+		</label>
+	)
+}
+
 function FieldGroupHeader({ group, children }: { group: string | null; children: ComponentChildren }) {
 	return (
 		<>
@@ -66,9 +99,21 @@ export function FrontmatterField({
 					type="checkbox"
 					checked={value}
 					onChange={(e) => onChange((e.target as HTMLInputElement).checked)}
-					class="w-4 h-4 rounded border-white/20 bg-white/10 text-cms-primary focus:ring-cms-primary focus:ring-offset-0 cursor-pointer"
+					class="sr-only peer"
 					data-cms-ui
 				/>
+				<span
+					class={cn(
+						'w-4 h-4 rounded border flex items-center justify-center shrink-0 transition-colors',
+						value ? 'bg-cms-primary border-cms-primary' : 'border-white/30 bg-white/5',
+					)}
+				>
+					{value && (
+						<svg class="w-3 h-3 text-cms-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
+						</svg>
+					)}
+				</span>
 				{label}
 			</label>
 		)
@@ -83,7 +128,7 @@ export function FrontmatterField({
 					type="date"
 					value={typeof value === 'string' ? value.split('T')[0] : ''}
 					onChange={(e) => onChange((e.target as HTMLInputElement).value)}
-					class="px-3 py-2 text-sm bg-white/10 border border-white/20 rounded-cms-sm text-white focus:outline-none focus:border-cms-primary"
+					class="px-3 py-2 text-sm bg-white/10 border border-white/20 rounded-cms-sm text-white focus:outline-none focus:border-white/40"
 					data-cms-ui
 				/>
 			</div>
@@ -119,7 +164,7 @@ export function FrontmatterField({
 						onChange(arrayValue)
 					}}
 					placeholder={`Enter ${label.toLowerCase()} separated by commas`}
-					class="px-3 py-2 text-sm bg-white/10 border border-white/20 rounded-cms-sm text-white placeholder-white/30 focus:outline-none focus:border-cms-primary"
+					class="px-3 py-2 text-sm bg-white/10 border border-white/20 rounded-cms-sm text-white placeholder-white/30 focus:outline-none focus:border-white/40"
 					data-cms-ui
 				/>
 			</div>
@@ -150,7 +195,7 @@ export function FrontmatterField({
 					value={typeof value === 'string' ? value : ''}
 					onChange={(e) => onChange((e.target as HTMLTextAreaElement).value)}
 					rows={3}
-					class="px-3 py-2 text-sm bg-white/10 border border-white/20 rounded-cms-sm text-white placeholder-white/30 focus:outline-none focus:border-cms-primary resize-none"
+					class="px-3 py-2 text-sm bg-white/10 border border-white/20 rounded-cms-sm text-white placeholder-white/30 focus:outline-none focus:border-white/40 resize-none"
 					data-cms-ui
 				/>
 			</div>
@@ -165,7 +210,7 @@ export function FrontmatterField({
 				type="text"
 				value={typeof value === 'string' ? value : String(value ?? '')}
 				onChange={(e) => onChange((e.target as HTMLInputElement).value)}
-				class="px-3 py-2 text-sm bg-white/10 border border-white/20 rounded-cms-sm text-white placeholder-white/30 focus:outline-none focus:border-cms-primary"
+				class="px-3 py-2 text-sm bg-white/10 border border-white/20 rounded-cms-sm text-white placeholder-white/30 focus:outline-none focus:border-white/40"
 				data-cms-ui
 			/>
 		</div>
@@ -190,38 +235,54 @@ export function CreateModeFrontmatter({
 	onSlugManualEdit,
 }: CreateModeFrontmatterProps) {
 	const allFields = fields ?? collectionDefinition.fields
+	const allFieldNames = new Set(allFields.map((f) => f.name))
+	const urlFieldNames = new Set(allFields.filter((f) => f.type === 'url' || /link|href|url/i.test(f.name)).map((f) => f.name))
+	const isOpenInNewTabSibling = (name: string) => {
+		if (!name.endsWith('OpenInNewTab')) return false
+		const base = name.slice(0, -'OpenInNewTab'.length)
+		return urlFieldNames.has(base)
+	}
 	// In create mode, skip complex fields (arrays, objects) — they can be edited after creation
-	const displayFields = allFields.filter(f => f.type !== 'array' && f.type !== 'object')
+	// Draft is always rendered in the sidebar — never inline in the header.
+	// `*OpenInNewTab` siblings are handled by the OpenInNewTabToggle next to the URL field.
+	const displayFields = allFields.filter(f => f.type !== 'array' && f.type !== 'object' && f.name !== 'draft' && !isOpenInNewTabSibling(f.name))
 	const groups = groupFields(displayFields)
 
 	return (
 		<div class="space-y-4">
 			{/* Slug field */}
 			<div>
-				<label class="block text-xs font-medium text-white/70 mb-1.5">
-					URL Slug
+				<div class="flex items-center gap-1.5 mb-1.5">
+					<label class="block text-xs font-medium text-white/70">URL Slug</label>
+					<span class="relative group/tt inline-flex" data-cms-ui>
+						<svg class="w-3.5 h-3.5 text-white/40 hover:text-white/70 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+						</svg>
+						<span class="absolute left-0 top-full mt-1 w-72 p-2 bg-black/90 text-white text-xs rounded-cms-sm opacity-0 invisible group-hover/tt:opacity-100 group-hover/tt:visible transition-all z-50 pointer-events-none whitespace-normal break-all">
+							Will be saved to: src/content/{collectionDefinition.name}/{page.slug || 'your-slug'}.{collectionDefinition.fileExtension}
+						</span>
+					</span>
+				</div>
+				<label class="flex items-center gap-1 px-3 py-2 bg-white/10 border border-white/20 rounded-cms-sm focus-within:border-white/40 focus-within:ring-1 focus-within:ring-white/10">
+					<span class="text-white/40 text-sm shrink-0">/</span>
+					<input
+						type="text"
+						value={page.slug}
+						onInput={(e) => {
+							onSlugManualEdit()
+							const slug = (e.target as HTMLInputElement).value
+							markdownEditorState.value = {
+								...markdownEditorState.value,
+								currentPage: markdownEditorState.value.currentPage
+									? { ...markdownEditorState.value.currentPage, slug }
+									: null,
+							}
+						}}
+						placeholder="url-friendly-slug"
+						class="flex-1 bg-transparent text-sm text-white placeholder-white/40 focus:outline-none"
+						data-cms-ui
+					/>
 				</label>
-				<input
-					type="text"
-					value={page.slug}
-					onInput={(e) => {
-						onSlugManualEdit()
-						const slug = (e.target as HTMLInputElement).value
-						markdownEditorState.value = {
-							...markdownEditorState.value,
-							currentPage: markdownEditorState.value.currentPage
-								? { ...markdownEditorState.value.currentPage, slug }
-								: null,
-						}
-					}}
-					placeholder="url-friendly-slug"
-					class="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-cms-sm text-sm text-white placeholder-white/40 focus:outline-none focus:border-white/40 focus:ring-1 focus:ring-white/10"
-					data-cms-ui
-				/>
-				<p class="mt-1 text-xs text-white/40">
-					Will be saved to: src/content/{collectionDefinition.name}/
-					{page.slug || 'your-slug'}.{collectionDefinition.fileExtension}
-				</p>
 			</div>
 
 			{/* Schema fields */}
@@ -236,6 +297,7 @@ export function CreateModeFrontmatter({
 								onChange={(newValue) => updateMarkdownFrontmatter({ [field.name]: newValue })}
 								collection={collectionDefinition.name}
 								entrySlug={page.slug}
+								hasOpenInNewTabSibling={allFieldNames.has(`${field.name}OpenInNewTab`)}
 							/>
 						))}
 					</FieldGroupHeader>
@@ -271,13 +333,13 @@ function SlugField({ page }: { page: MarkdownPageEntry }) {
 			if (result.success && result.newSlug && result.newFilePath) {
 				updateMarkdownPageMeta({ slug: result.newSlug, filePath: result.newFilePath })
 				setLocalSlug(result.newSlug)
-				showToast('Slug updated', 'success')
+				showToast(STRINGS.slug.updated, 'success')
 			} else {
-				showToast(result.error || 'Failed to rename', 'error')
+				showToast(result.error || STRINGS.slug.renameFailed, 'error')
 				setLocalSlug(page.slug)
 			}
 		} catch {
-			showToast('Failed to rename', 'error')
+			showToast(STRINGS.slug.renameFailed, 'error')
 			setLocalSlug(page.slug)
 		} finally {
 			setIsRenaming(false)
@@ -289,7 +351,14 @@ function SlugField({ page }: { page: MarkdownPageEntry }) {
 			<label class="block text-xs font-medium text-white/70 mb-1.5">
 				URL Slug
 			</label>
-			<div class="flex gap-2">
+			<label
+				class={cn(
+					'flex items-center gap-1 px-3 py-2 bg-white/10 border rounded-cms-sm text-sm text-white focus-within:border-white/40',
+					isDirty ? 'border-white/30' : 'border-white/20',
+					isRenaming && 'opacity-60',
+				)}
+			>
+				<span class="text-white/40 text-sm shrink-0">/</span>
 				<input
 					type="text"
 					value={localSlug}
@@ -301,13 +370,11 @@ function SlugField({ page }: { page: MarkdownPageEntry }) {
 							;(e.target as HTMLInputElement).blur()
 						}
 					}}
-					class={`flex-1 px-3 py-2 bg-white/10 border rounded-cms-sm text-sm text-white focus:outline-none focus:border-white/40 ${
-						isDirty ? 'border-cms-primary' : 'border-white/20'
-					}`}
+					class="flex-1 bg-transparent focus:outline-none"
 					disabled={isRenaming}
 					data-cms-ui
 				/>
-			</div>
+			</label>
 		</div>
 	)
 }
@@ -323,14 +390,23 @@ export function EditModeFrontmatter({
 	collectionDefinition,
 	fields,
 }: EditModeFrontmatterProps) {
-	const displayFields = fields ?? collectionDefinition?.fields ?? []
+	const allFields = fields ?? collectionDefinition?.fields ?? []
+	const allFieldNames = new Set(allFields.map((f) => f.name))
+	const urlFieldNames = new Set(allFields.filter((f) => f.type === 'url' || /link|href|url/i.test(f.name)).map((f) => f.name))
+	const isOpenInNewTabSibling = (name: string) => {
+		if (!name.endsWith('OpenInNewTab')) return false
+		const base = name.slice(0, -'OpenInNewTab'.length)
+		return urlFieldNames.has(base)
+	}
+	const displayFields = allFields.filter((f) => f.name !== 'draft' && !isOpenInNewTabSibling(f.name))
 	// Collect schema field names for filtering extra keys
 	const schemaFieldNames = new Set(
 		collectionDefinition?.fields.map((f) => f.name) ?? [],
 	)
-	// Frontmatter keys not covered by the schema (user-added fields)
+	// Frontmatter keys not covered by the schema (user-added fields). Draft and the
+	// `*OpenInNewTab` siblings are rendered separately, so exclude them here.
 	const extraKeys = Object.keys(page.frontmatter).filter(
-		(key) => !schemaFieldNames.has(key),
+		(key) => !schemaFieldNames.has(key) && key !== 'draft' && !isOpenInNewTabSibling(key),
 	)
 	const groups = groupFields(displayFields)
 
@@ -352,6 +428,7 @@ export function EditModeFrontmatter({
 											onChange={(newValue) => updateMarkdownFrontmatter({ [field.name]: newValue })}
 											collection={collectionDefinition.name}
 											entrySlug={page.slug}
+											hasOpenInNewTabSibling={allFieldNames.has(`${field.name}OpenInNewTab`)}
 										/>
 									))}
 								</FieldGroupHeader>
@@ -394,6 +471,8 @@ interface SchemaFrontmatterFieldProps {
 	/** Required when editing an `astroImage` field — routes uploads to the entry's directory. */
 	collection?: string
 	entrySlug?: string
+	/** True when the schema declares a `${field.name}OpenInNewTab` companion boolean — controls toggle visibility next to URL fields. */
+	hasOpenInNewTabSibling?: boolean
 }
 
 export function SchemaFrontmatterField({
@@ -402,6 +481,7 @@ export function SchemaFrontmatterField({
 	onChange,
 	collection,
 	entrySlug,
+	hasOpenInNewTabSibling,
 }: SchemaFrontmatterFieldProps) {
 	const label = field.required ? `${formatFieldLabel(field.name)} *` : formatFieldLabel(field.name)
 	const hints = field.hints
@@ -409,19 +489,29 @@ export function SchemaFrontmatterField({
 	switch (field.type) {
 		case 'text':
 		case 'url':
-		case 'email':
+		case 'email': {
+			const isLinkLike = field.type === 'url'
+				|| /link|href|url/i.test(field.name)
+			const linkTooltip = isLinkLike
+				? 'Use https://... for external links, or /path for internal pages.'
+				: undefined
 			return (
-				<TextField
-					label={label}
-					value={(value as string) ?? ''}
-					placeholder={hints?.placeholder ?? getPlaceholder(field)}
-					maxLength={hints?.maxLength as number | undefined}
-					minLength={hints?.minLength as number | undefined}
-					onChange={(v) => onChange(v)}
-					inputType={field.type === 'text' ? undefined : field.type}
-					required={field.required}
-				/>
+				<>
+					<TextField
+						label={label}
+						value={(value as string) ?? ''}
+						placeholder={hints?.placeholder ?? getPlaceholder(field)}
+						maxLength={hints?.maxLength as number | undefined}
+						minLength={hints?.minLength as number | undefined}
+						onChange={(v) => onChange(v)}
+						inputType={field.type === 'text' ? undefined : field.type}
+						required={field.required}
+						tooltip={linkTooltip}
+					/>
+					{field.type === 'url' && hasOpenInNewTabSibling && <OpenInNewTabToggle field={field} />}
+				</>
 			)
+		}
 
 		case 'image': {
 			const astroContext = buildAstroUploadContext(field, collection, entrySlug)
@@ -429,14 +519,28 @@ export function SchemaFrontmatterField({
 				<ImageField
 					label={label}
 					value={(value as string) ?? ''}
-					placeholder={getPlaceholder(field)}
 					onChange={(v) => onChange(v)}
 					onBrowse={() => {
 						openMediaLibraryWithCallback((url: string) => {
 							onChange(url)
 						}, astroContext)
 					}}
-					required={field.required}
+				/>
+			)
+		}
+
+		case 'file': {
+			return (
+				<FileField
+					label={label}
+					value={(value as string) ?? ''}
+					accept={hints?.accept as string | undefined}
+					onChange={(v) => onChange(v)}
+					onBrowse={() => {
+						openMediaLibraryWithCallback((url: string) => {
+							onChange(url)
+						})
+					}}
 				/>
 			)
 		}
@@ -472,6 +576,7 @@ export function SchemaFrontmatterField({
 		case 'date':
 		case 'datetime':
 		case 'time':
+		case 'month':
 			return (
 				<div class="flex flex-col gap-1" data-cms-ui>
 					<label class="text-xs text-white/60 font-medium">{label}</label>
@@ -502,6 +607,28 @@ export function SchemaFrontmatterField({
 				/>
 			)
 
+		case 'year':
+			return (
+				<div class="flex flex-col gap-1.5" data-cms-ui>
+					<label class="text-xs font-medium text-white/70">{label}</label>
+					<input
+						type="number"
+						value={typeof value === 'number' ? value : ''}
+						placeholder={hints?.placeholder ?? String(new Date().getFullYear())}
+						min={typeof hints?.min === 'number' ? hints.min : 1900}
+						max={typeof hints?.max === 'number' ? hints.max : 2100}
+						step={1}
+						required={field.required}
+						onInput={(e) => {
+							const raw = (e.target as HTMLInputElement).value
+							onChange(raw === '' ? undefined : Number(raw))
+						}}
+						class="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-cms-sm text-sm text-white placeholder:text-white/40 focus:outline-none focus:border-white/40 focus:ring-1 focus:ring-white/10 transition-colors"
+						data-cms-ui
+					/>
+				</div>
+			)
+
 		case 'boolean':
 			return (
 				<ToggleField
@@ -822,7 +949,7 @@ function ObjectFields({ label, value, onChange, schemaFields, extraKeys }: Objec
 							}
 						}}
 						placeholder="New field name..."
-						class="flex-1 px-2 py-1 text-xs bg-white/5 border border-white/10 rounded-cms-sm text-white placeholder-white/30 focus:outline-none focus:border-white/30"
+						class="flex-1 px-2 py-1 text-xs bg-white/5 border border-white/10 rounded-cms-sm text-white placeholder-white/30 focus:outline-none focus:border-white/40"
 						data-cms-ui
 					/>
 					<button
@@ -871,6 +998,8 @@ export function getPlaceholder(field: FieldDefinition): string {
 			return 'name@example.com'
 		case 'image':
 			return '/images/...'
+		case 'file':
+			return '/files/...'
 		case 'color':
 			return '#000000'
 		case 'date':
@@ -879,6 +1008,10 @@ export function getPlaceholder(field: FieldDefinition): string {
 			return 'YYYY-MM-DDTHH:MM'
 		case 'time':
 			return 'HH:MM'
+		case 'year':
+			return String(new Date().getFullYear())
+		case 'month':
+			return 'YYYY-MM'
 		default:
 			return `Enter ${formatFieldLabel(field.name).toLowerCase()}...`
 	}

package/src/editor/components/frontmatter-sidebar.tsx

@@ -2,51 +2,10 @@ import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 import { cn } from '../lib/cn'
 import { updateMarkdownFrontmatter } from '../signals'
 import type { CollectionDefinition, FieldDefinition, MarkdownPageEntry } from '../types'
+import { groupFields, partitionFields } from './field-utils'
 import { formatFieldLabel, FrontmatterField, SchemaFrontmatterField } from './frontmatter-fields'
 
-// ============================================================================
-// Field Utilities
-// ============================================================================
-
-export function partitionFields(fields: FieldDefinition[]): { sidebar: FieldDefinition[]; header: FieldDefinition[] } {
-	const sidebar: FieldDefinition[] = []
-	const header: FieldDefinition[] = []
-	for (const field of fields) {
-		if (field.hidden) continue
-		if (field.position === 'sidebar') {
-			sidebar.push(field)
-		} else {
-			header.push(field)
-		}
-	}
-	return { sidebar, header }
-}
-
-export interface FieldGroup {
-	group: string | null
-	fields: FieldDefinition[]
-}
-
-export function groupFields(fields: FieldDefinition[]): FieldGroup[] {
-	const groups: FieldGroup[] = []
-	const groupMap = new Map<string | null, FieldDefinition[]>()
-	const order: (string | null)[] = []
-
-	for (const field of fields) {
-		const key = field.group ?? null
-		if (!groupMap.has(key)) {
-			groupMap.set(key, [])
-			order.push(key)
-		}
-		groupMap.get(key)!.push(field)
-	}
-
-	for (const key of order) {
-		groups.push({ group: key, fields: groupMap.get(key)! })
-	}
-
-	return groups
-}
+export { groupFields, partitionFields } from './field-utils'
 
 // ============================================================================
 // Group Header
@@ -94,9 +53,11 @@ interface FrontmatterSidebarProps {
 
 export function FrontmatterSidebar({ fields, page, collectionDefinition }: FrontmatterSidebarProps) {
 	const [state, setState] = useState(loadSidebarState)
+	const [isAnimating, setIsAnimating] = useState(false)
 	const isResizing = useRef(false)
 	const startX = useRef(0)
 	const startWidth = useRef(0)
+	const animationTimeout = useRef<ReturnType<typeof setTimeout> | null>(null)
 
 	const { width, collapsed } = state
 
@@ -108,8 +69,17 @@ export function FrontmatterSidebar({ fields, page, collectionDefinition }: Front
 		})
 	}, [])
 
+	const toggleCollapsed = useCallback(() => {
+		if (animationTimeout.current) clearTimeout(animationTimeout.current)
+		setIsAnimating(true)
+		updateState({ collapsed: !collapsed })
+		animationTimeout.current = setTimeout(() => setIsAnimating(false), 300)
+	}, [collapsed, updateState])
+
 	const handleMouseDown = useCallback((e: MouseEvent) => {
 		e.preventDefault()
+		if (animationTimeout.current) clearTimeout(animationTimeout.current)
+		setIsAnimating(false)
 		isResizing.current = true
 		startX.current = e.clientX
 		startWidth.current = width
@@ -151,7 +121,11 @@ export function FrontmatterSidebar({ fields, page, collectionDefinition }: Front
 
 	return (
 		<div
-			class={cn('relative shrink-0 border-l border-white/10 bg-white/5 flex', collapsed && 'w-8')}
+			class={cn(
+				'relative shrink-0 border-l border-white/10 bg-white/5 flex overflow-hidden',
+				isAnimating && 'transition-[width] duration-300 ease-out',
+				collapsed && 'w-8',
+			)}
 			style={collapsed ? undefined : { width: `${width}px` }}
 			data-cms-ui
 		>
@@ -166,27 +140,50 @@ export function FrontmatterSidebar({ fields, page, collectionDefinition }: Front
 			{/* Collapse toggle */}
 			<button
 				type="button"
-				onClick={() => updateState({ collapsed: !collapsed })}
-				class="absolute top-2 left-0 -translate-x-1/2 z-20 w-5 h-5 rounded-full bg-cms-dark border border-white/20 flex items-center justify-center text-white/50 hover:text-white hover:border-white/40 transition-colors"
+				onClick={toggleCollapsed}
+				class="absolute top-2 left-1.5 -translate-x-1/2 z-20 w-5 h-5 rounded-cms-xs bg-white/10 hover:bg-white/20 border border-white/20 hover:border-white/40 flex items-center justify-center text-white/50 hover:text-white transition-colors"
 				title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
 				data-cms-ui
 			>
-				<svg
-					class={cn('w-3 h-3 transition-transform', collapsed && 'rotate-180')}
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-				>
-					<path d="m15 18-6-6 6-6" />
-				</svg>
+				<span class="relative w-3 h-3 inline-block">
+					<svg
+						class={cn(
+							'absolute inset-0 w-3 h-3 transition-opacity duration-200 ease-out',
+							collapsed ? 'opacity-0' : 'opacity-100',
+						)}
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<path d="M3 5v14" />
+						<path d="M21 12H7" />
+						<path d="m15 18 6-6-6-6" />
+					</svg>
+					<svg
+						class={cn(
+							'absolute inset-0 w-3 h-3 transition-opacity duration-200 ease-out',
+							collapsed ? 'opacity-100' : 'opacity-0',
+						)}
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<path d="M3 19V5" />
+						<path d="m13 6-6 6 6 6" />
+						<path d="M7 12h14" />
+					</svg>
+				</span>
 			</button>
 
 			{/* Sidebar content */}
 			{!collapsed && (
-				<div class="flex-1 overflow-y-auto p-4 space-y-3 min-w-0">
+				<div class="flex-1 overflow-y-auto p-3 pt-10 space-y-3 min-w-0" style={{ scrollbarGutter: 'stable' }}>
 					{groups.map((group, gi) => (
 						<div key={gi} data-cms-ui>
 							{group.group && <GroupHeader label={group.group} />}
@@ -203,6 +200,7 @@ export function FrontmatterSidebar({ fields, page, collectionDefinition }: Front
 														onChange={(newValue) => updateMarkdownFrontmatter({ [field.name]: newValue })}
 														collection={collectionDefinition?.name}
 														entrySlug={page.slug}
+														hasOpenInNewTabSibling={schemaFieldNames.has(`${field.name}OpenInNewTab`)}
 													/>
 												)
 												: (

package/src/editor/components/link-edit-popover.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks'
+import { cn } from '../lib/cn'
 import { HighlightMatch } from './fields'
 import { PrimaryButton } from './modal-shell'
 
@@ -131,7 +132,10 @@ export function LinkEditPopover({ initialUrl, suggestions, onApply, onRemove, on
 		>
 			<form
 				onSubmit={handleSubmit}
-				class={`flex items-center gap-2 ${inline ? 'py-1.5' : 'px-4 py-2.5 bg-cms-dark border-b border-white/10'}`}
+				class={cn(
+					'flex items-center gap-2',
+					inline ? 'py-1.5' : 'px-4 py-2 bg-cms-dark border-b border-white/10',
+				)}
 			>
 				<svg class="w-4 h-4 text-white/40 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
 					<path
@@ -152,7 +156,7 @@ export function LinkEditPopover({ initialUrl, suggestions, onApply, onRemove, on
 						onBlur={handleBlur}
 						onKeyDown={handleKeyDown}
 						autocomplete="off"
-						class="w-full bg-white/5 border border-white/10 rounded-cms-sm px-2.5 py-1.5 text-[13px] text-white placeholder:text-white/30 outline-none focus:border-cms-primary/50 transition-colors"
+						class="w-full bg-white/5 border border-white/10 rounded-cms-sm px-2.5 py-1.5 text-[13px] text-white placeholder:text-white/30 outline-none focus:border-white/40 transition-colors"
 						data-cms-ui
 					/>
 					{showDropdown && (
@@ -169,11 +173,12 @@ export function LinkEditPopover({ initialUrl, suggestions, onApply, onRemove, on
 										e.preventDefault()
 										selectOption(opt.value)
 									}}
-									class={`w-full text-left px-3 py-2 text-xs transition-colors cursor-pointer ${
+									class={cn(
+										'w-full text-left px-3 py-2 text-xs transition-colors cursor-pointer',
 										i === highlightedIndex
 											? 'bg-white/15 text-white'
-											: 'text-white/70 hover:bg-white/10 hover:text-white'
-									}`}
+											: 'text-white/70 hover:bg-white/10 hover:text-white',
+									)}
 									data-cms-ui
 								>
 									<span class="block truncate font-medium">