From 6ac9475bd3ea7d9b550959c81bcaf753c72ea55b Mon Sep 17 00:00:00 2001
From: mrboxs <rizkywanda200155@gmail.com>
Date: Tue, 10 Nov 2026 17:02:55 +0700
Subject: [PATCH 1/4] fix(web): reset GitHub previews when repository changes

- Scope metadata and README request state to the repository URL
- Show refresh guidance after a request when the repository changes
---
 .../components/github-metadata-prefill.tsx    | 63 ++++++++++++-------
 .../components/github-readme-import.tsx       | 54 +++++++++-------
 2 files changed, 73 insertions(+), 44 deletions(-)

diff --git a/apps/web/src/features/admin-projects/components/github-metadata-prefill.tsx b/apps/web/src/features/admin-projects/components/github-metadata-prefill.tsx
index f4348c8..5ac2ed9 100644
--- a/apps/web/src/features/admin-projects/components/github-metadata-prefill.tsx
+++ b/apps/web/src/features/admin-projects/components/github-metadata-prefill.tsx
@@ -41,17 +41,37 @@ const REPOSITORY_CHANGED =
 	'Repository changed. Fetch from GitHub again to preview its metadata.'
 const isBlank = (value: string | null | undefined) => !value?.trim()
 
-export function GithubMetadataPrefill({
-	repositoryUrl,
-	disabled,
-	getCurrentValues,
-	onApply,
-}: {
+type GithubMetadataPrefillProps = {
 	repositoryUrl: string
 	disabled: boolean
 	getCurrentValues: () => CurrentValues
 	onApply: (values: MetadataFields) => void
-}) {
+}
+type GithubMetadataPrefillSessionProps = GithubMetadataPrefillProps & {
+	hasRequested: boolean
+	onRequest: () => void
+}
+
+export function GithubMetadataPrefill(props: GithubMetadataPrefillProps) {
+	const [hasRequested, setHasRequested] = useState(false)
+	return (
+		<GithubMetadataPrefillSession
+			key={props.repositoryUrl}
+			{...props}
+			hasRequested={hasRequested}
+			onRequest={() => setHasRequested(true)}
+		/>
+	)
+}
+
+function GithubMetadataPrefillSession({
+	repositoryUrl,
+	disabled,
+	getCurrentValues,
+	onApply,
+	hasRequested,
+	onRequest,
+}: GithubMetadataPrefillSessionProps) {
 	const {
 		id,
 		pending,
@@ -69,6 +89,8 @@ export function GithubMetadataPrefill({
 		disabled,
 		getCurrentValues,
 		onApply,
+		hasRequested,
+		onRequest,
 	})
 
 	return (
@@ -248,28 +270,22 @@ function useGithubMetadataPrefill({
 	disabled,
 	getCurrentValues,
 	onApply,
-}: Parameters<typeof GithubMetadataPrefill>[0]) {
+	hasRequested,
+	onRequest,
+}: GithubMetadataPrefillSessionProps) {
 	const { mutateAsync } = useAdminProjectGithubMetadata()
 	const id = useId()
 	const requestId = useRef(0)
-	const activeRepository = useRef(repositoryUrl)
 	const [pending, setPending] = useState(false)
 	const [error, setError] = useState<string | null>(null)
-	const [feedback, setFeedback] = useState<string | null>(null)
+	const [feedbackValue, setFeedback] = useState<string | null>()
+	const feedback =
+		feedbackValue === undefined
+			? hasRequested
+				? REPOSITORY_CHANGED
+				: null
+			: feedbackValue
 	const [preview, setPreview] = useState<Preview | null>(null)
-
-	useEffect(() => {
-		if (activeRepository.current === repositoryUrl) return
-		activeRepository.current = repositoryUrl
-		if (requestId.current === 0) return
-		requestId.current += 1
-		// Synchronize an external form field with the request/dialog lifecycle.
-		// oxlint-disable-next-line react-hooks-js/set-state-in-effect
-		setPending(false)
-		setError(null)
-		setPreview(null)
-		setFeedback(REPOSITORY_CHANGED)
-	}, [repositoryUrl])
 	useEffect(
 		() => () => {
 			if (requestId.current > 0) requestId.current += 1
@@ -287,6 +303,7 @@ function useGithubMetadataPrefill({
 		}
 		const requestedRepositoryUrl = repositoryUrl
 		const currentRequestId = ++requestId.current
+		onRequest()
 		setPending(true)
 		setError(null)
 		setFeedback(null)
diff --git a/apps/web/src/features/admin-projects/components/github-readme-import.tsx b/apps/web/src/features/admin-projects/components/github-readme-import.tsx
index c45a105..5cbb20d 100644
--- a/apps/web/src/features/admin-projects/components/github-readme-import.tsx
+++ b/apps/web/src/features/admin-projects/components/github-readme-import.tsx
@@ -34,39 +34,50 @@ type Preview = {
 const REPOSITORY_CHANGED =
 	'Repository changed. Import README again to fetch its content.'
 
-export function GithubReadmeImport({
-	repositoryUrl,
-	disabled,
-	getRepositoryUrl,
-	getEditor,
-}: {
+type GithubReadmeImportProps = {
 	repositoryUrl: string
 	disabled: boolean
 	getRepositoryUrl: () => string
 	getEditor: () => BlockNoteEditorHandle | null
+}
+
+export function GithubReadmeImport(props: GithubReadmeImportProps) {
+	const [hasRequested, setHasRequested] = useState(false)
+	return (
+		<GithubReadmeImportSession
+			key={props.repositoryUrl}
+			{...props}
+			hasRequested={hasRequested}
+			onRequest={() => setHasRequested(true)}
+		/>
+	)
+}
+
+function GithubReadmeImportSession({
+	repositoryUrl,
+	disabled,
+	getRepositoryUrl,
+	getEditor,
+	hasRequested,
+	onRequest,
+}: GithubReadmeImportProps & {
+	hasRequested: boolean
+	onRequest: () => void
 }) {
 	const { mutateAsync } = useAdminProjectGithubReadme()
 	const id = useId()
 	const requestId = useRef(0)
-	const activeRepository = useRef(repositoryUrl)
 	const [pending, setPending] = useState(false)
 	const [applying, setApplying] = useState(false)
 	const [error, setError] = useState<string | null>(null)
-	const [feedback, setFeedback] = useState<string | null>(null)
+	const [feedbackValue, setFeedback] = useState<string | null>()
+	const feedback =
+		feedbackValue === undefined
+			? hasRequested
+				? REPOSITORY_CHANGED
+				: null
+			: feedbackValue
 	const [preview, setPreview] = useState<Preview | null>(null)
-
-	useEffect(() => {
-		if (activeRepository.current === repositoryUrl) return
-		activeRepository.current = repositoryUrl
-		if (requestId.current === 0) return
-		requestId.current += 1
-		// Synchronize this request lifecycle with the external repository form field.
-		// oxlint-disable-next-line react-hooks-js/set-state-in-effect
-		setPending(false)
-		setPreview(null)
-		setError(null)
-		setFeedback(REPOSITORY_CHANGED)
-	}, [repositoryUrl])
 	useEffect(
 		() => () => {
 			requestId.current += 1
@@ -92,6 +103,7 @@ export function GithubReadmeImport({
 		}
 		const requestedRepositoryUrl = repositoryUrl
 		const currentRequest = ++requestId.current
+		onRequest()
 		setPending(true)
 		setError(null)
 		setFeedback(null)

From ece39aec64c9d494ac91cb97b7c7459dc6e04e0a Mon Sep 17 00:00:00 2001
From: mrboxs <rizkywanda200155@gmail.com>
Date: Tue, 10 Nov 2026 17:16:26 +0700
Subject: [PATCH 2/4] refactor(web): extract admin editor state and fields

---
 apps/web/src/features/admin-blogs/editor.tsx  |  350 +++--
 .../src/features/admin-collections/editor.tsx |  574 ++++----
 .../components/featured-editor.tsx            |  731 ++++++-----
 .../components/create-project-form.tsx        | 1023 ++++++++-------
 .../components/edit-project-form.tsx          | 1162 +++++++++--------
 apps/web/src/routes/_main/admin.activity.tsx  |  567 ++++----
 6 files changed, 2430 insertions(+), 1977 deletions(-)

diff --git a/apps/web/src/features/admin-blogs/editor.tsx b/apps/web/src/features/admin-blogs/editor.tsx
index 00f242d..d65fd50 100644
--- a/apps/web/src/features/admin-blogs/editor.tsx
+++ b/apps/web/src/features/admin-blogs/editor.tsx
@@ -68,7 +68,7 @@ const empty: BlogBody = {
 	status: 'draft',
 }
 
-export function BlogEditor({ initial }: { initial?: Initial }) {
+function useBlogEditor(initial: Initial | undefined) {
 	const queryClient = useQueryClient()
 	const navigate = useNavigate()
 	const router = useRouter()
@@ -120,6 +120,27 @@ export function BlogEditor({ initial }: { initial?: Initial }) {
 			<FieldError id={`blog-${name}-error`}>{fieldErrors[name]}</FieldError>
 		) : null
 	}
+	function onTitleChange(title: string) {
+		setValue((previous) => {
+			return {
+				...previous,
+				title,
+				...(!customizedSlug.current
+					? {
+							slug: slugify(title)
+								.replace(/[^a-z0-9]+/g, '-')
+								.replace(/^-+/, '')
+								.slice(0, 160)
+								.replace(/-+$/, ''),
+						}
+					: {}),
+			}
+		})
+	}
+	function onSlugChange(slug: string) {
+		customizedSlug.current = true
+		setField('slug', slug)
+	}
 	async function submit(event: React.SubmitEvent<HTMLFormElement>) {
 		event.preventDefault()
 		if (busy) return
@@ -180,6 +201,52 @@ export function BlogEditor({ initial }: { initial?: Initial }) {
 		})
 		await navigate({ to: '/admin/blogs' })
 	}
+	return {
+		initial,
+		queryClient,
+		router,
+		editor,
+		onTitleChange,
+		onSlugChange,
+		value,
+		fieldErrors,
+		error,
+		conflict,
+		reload,
+		setReload,
+		setReloading,
+		coverBusy,
+		setCoverBusy,
+		coverRevision,
+		saving,
+		busy,
+		blocker,
+		setField,
+		fieldProps,
+		fieldError,
+		submit,
+	}
+}
+
+export function BlogEditor({ initial }: { initial?: Initial }) {
+	const state = useBlogEditor(initial)
+	const {
+		queryClient,
+		router,
+		editor,
+		value,
+		error,
+		conflict,
+		reload,
+		setReload,
+		setReloading,
+		coverBusy,
+		saving,
+		busy,
+		blocker,
+		submit,
+	} = state
+
 	return (
 		<div className="mx-auto flex w-full max-w-5xl min-w-0 flex-col gap-6 px-4 py-6 sm:px-6 sm:py-8">
 			<Link
@@ -219,140 +286,7 @@ export function BlogEditor({ initial }: { initial?: Initial }) {
 						</AlertDescription>
 					</Alert>
 				)}
-				<FieldGroup>
-					<Field data-invalid={!!fieldErrors.title}>
-						<FieldLabel htmlFor="blog-title">Title</FieldLabel>
-						<Input
-							id="blog-title"
-							maxLength={200}
-							value={value.title}
-							disabled={busy}
-							{...fieldProps('title')}
-							onChange={(event) => {
-								const title = event.target.value
-								setValue((previous) => {
-									return {
-										...previous,
-										title,
-										...(!customizedSlug.current
-											? {
-													slug: slugify(title)
-														.replace(/[^a-z0-9]+/g, '-')
-														.replace(/^-+/, '')
-														.slice(0, 160)
-														.replace(/-+$/, ''),
-												}
-											: {}),
-									}
-								})
-							}}
-						/>
-						{fieldError('title')}
-					</Field>
-					<Field data-invalid={!!fieldErrors.slug}>
-						<FieldLabel htmlFor="blog-slug">Slug</FieldLabel>
-						<Input
-							id="blog-slug"
-							maxLength={160}
-							value={value.slug}
-							disabled={busy}
-							{...fieldProps('slug')}
-							onChange={(event) => {
-								customizedSlug.current = true
-								setField('slug', event.target.value)
-							}}
-						/>
-						<FieldDescription>
-							Public URL: /blogs/{value.slug || 'your-post-slug'}. Generated
-							from the title until you customize it.
-						</FieldDescription>
-						{fieldError('slug')}
-					</Field>
-					<Field data-invalid={!!fieldErrors.description}>
-						<FieldLabel htmlFor="blog-description">Description</FieldLabel>
-						<Textarea
-							id="blog-description"
-							maxLength={500}
-							value={value.description}
-							disabled={busy}
-							{...fieldProps('description')}
-							onChange={(event) => setField('description', event.target.value)}
-						/>
-						<FieldDescription>
-							A short summary for the blog card and article introduction.
-						</FieldDescription>
-						{fieldError('description')}
-					</Field>
-					<Field data-invalid={!!fieldErrors.coverUrl}>
-						<FieldLabel>Cover image</FieldLabel>
-						<BlogCoverInput
-							key={coverRevision}
-							value={value.coverUrl}
-							onChange={(coverUrl) => setField('coverUrl', coverUrl)}
-							onBusyChange={setCoverBusy}
-							disabled={saving}
-							invalid={!!fieldErrors.coverUrl}
-							errorId={fieldErrors.coverUrl ? 'blog-coverUrl-error' : undefined}
-						/>
-						{fieldError('coverUrl')}
-					</Field>
-					<Field data-invalid={!!fieldErrors.content}>
-						<FieldLabel id="blog-content-label">Content (Markdown)</FieldLabel>
-						<fieldset
-							id="blog-content"
-							aria-labelledby="blog-content-label"
-							{...fieldProps('content')}
-							tabIndex={-1}
-							inert={saving}
-							className="min-w-0 rounded-lg border p-4 sm:p-5"
-						>
-							<ClientOnly
-								fallback={
-									<div className="flex min-h-40 flex-col gap-3">
-										<output>Loading editor…</output>
-										<Skeleton className="h-4 w-3/4" />
-										<Skeleton className="h-4 w-1/2" />
-									</div>
-								}
-							>
-								<BlockNoteEditor
-									ref={editor}
-									value={value.content}
-									onChange={(content) => setField('content', content)}
-								/>
-							</ClientOnly>
-						</fieldset>
-						<FieldDescription>
-							Use ## headings for sections and ### for subsections. The table of
-							contents and read time are generated automatically. Estimated read
-							time: {blogReadTime(value.content)} min.
-						</FieldDescription>
-						{fieldError('content')}
-					</Field>
-					<Field>
-						<FieldLabel htmlFor="blog-status">Status</FieldLabel>
-						<NativeSelect
-							id="blog-status"
-							value={value.status}
-							disabled={busy}
-							onChange={(event) =>
-								setField(
-									'status',
-									event.target.value === 'published' ? 'published' : 'draft'
-								)
-							}
-						>
-							<NativeSelectOption value="draft">Draft</NativeSelectOption>
-							<NativeSelectOption value="published">
-								Published
-							</NativeSelectOption>
-						</NativeSelect>
-						<FieldDescription>
-							Drafts are only visible to admins. Publishing makes the post
-							available at its public URL.
-						</FieldDescription>
-					</Field>
-				</FieldGroup>
+				<BlogFields {...state} />
 				<BlogContentPreview editor={editor} value={value} />
 				<div className="flex flex-wrap justify-end gap-3 border-t pt-4">
 					<Link
@@ -425,6 +359,152 @@ export function BlogEditor({ initial }: { initial?: Initial }) {
 	)
 }
 
+type BlogEditorState = ReturnType<typeof useBlogEditor>
+
+function BlogFields({
+	editor,
+	onTitleChange,
+	onSlugChange,
+	value,
+	fieldErrors,
+	setCoverBusy,
+	coverRevision,
+	saving,
+	busy,
+	setField,
+	fieldProps,
+	fieldError,
+}: Pick<
+	BlogEditorState,
+	| 'editor'
+	| 'onTitleChange'
+	| 'onSlugChange'
+	| 'value'
+	| 'fieldErrors'
+	| 'setCoverBusy'
+	| 'coverRevision'
+	| 'saving'
+	| 'busy'
+	| 'setField'
+	| 'fieldProps'
+	| 'fieldError'
+>) {
+	return (
+		<FieldGroup>
+			<Field data-invalid={!!fieldErrors.title}>
+				<FieldLabel htmlFor="blog-title">Title</FieldLabel>
+				<Input
+					id="blog-title"
+					maxLength={200}
+					value={value.title}
+					disabled={busy}
+					{...fieldProps('title')}
+					onChange={(event) => onTitleChange(event.target.value)}
+				/>
+				{fieldError('title')}
+			</Field>
+			<Field data-invalid={!!fieldErrors.slug}>
+				<FieldLabel htmlFor="blog-slug">Slug</FieldLabel>
+				<Input
+					id="blog-slug"
+					maxLength={160}
+					value={value.slug}
+					disabled={busy}
+					{...fieldProps('slug')}
+					onChange={(event) => onSlugChange(event.target.value)}
+				/>
+				<FieldDescription>
+					Public URL: /blogs/{value.slug || 'your-post-slug'}. Generated from
+					the title until you customize it.
+				</FieldDescription>
+				{fieldError('slug')}
+			</Field>
+			<Field data-invalid={!!fieldErrors.description}>
+				<FieldLabel htmlFor="blog-description">Description</FieldLabel>
+				<Textarea
+					id="blog-description"
+					maxLength={500}
+					value={value.description}
+					disabled={busy}
+					{...fieldProps('description')}
+					onChange={(event) => setField('description', event.target.value)}
+				/>
+				<FieldDescription>
+					A short summary for the blog card and article introduction.
+				</FieldDescription>
+				{fieldError('description')}
+			</Field>
+			<Field data-invalid={!!fieldErrors.coverUrl}>
+				<FieldLabel>Cover image</FieldLabel>
+				<BlogCoverInput
+					key={coverRevision}
+					value={value.coverUrl}
+					onChange={(coverUrl) => setField('coverUrl', coverUrl)}
+					onBusyChange={setCoverBusy}
+					disabled={saving}
+					invalid={!!fieldErrors.coverUrl}
+					errorId={fieldErrors.coverUrl ? 'blog-coverUrl-error' : undefined}
+				/>
+				{fieldError('coverUrl')}
+			</Field>
+			<Field data-invalid={!!fieldErrors.content}>
+				<FieldLabel id="blog-content-label">Content (Markdown)</FieldLabel>
+				<fieldset
+					id="blog-content"
+					aria-labelledby="blog-content-label"
+					{...fieldProps('content')}
+					tabIndex={-1}
+					inert={saving}
+					className="min-w-0 rounded-lg border p-4 sm:p-5"
+				>
+					<ClientOnly
+						fallback={
+							<div className="flex min-h-40 flex-col gap-3">
+								<output>Loading editor…</output>
+								<Skeleton className="h-4 w-3/4" />
+								<Skeleton className="h-4 w-1/2" />
+							</div>
+						}
+					>
+						<BlockNoteEditor
+							ref={editor}
+							value={value.content}
+							onChange={(content) => setField('content', content)}
+						/>
+					</ClientOnly>
+				</fieldset>
+				<FieldDescription>
+					Use ## headings for sections and ### for subsections. The table of
+					contents and read time are generated automatically. Estimated read
+					time: {blogReadTime(value.content)} min.
+				</FieldDescription>
+				{fieldError('content')}
+			</Field>
+			<Field>
+				<FieldLabel htmlFor="blog-status">Status</FieldLabel>
+				<NativeSelect
+					id="blog-status"
+					value={value.status}
+					disabled={busy}
+					onChange={(event) =>
+						setField(
+							'status',
+							event.target.value === 'published' ? 'published' : 'draft'
+						)
+					}
+				>
+					<NativeSelectOption value="draft">Draft</NativeSelectOption>
+					<NativeSelectOption value="published">Published</NativeSelectOption>
+				</NativeSelect>
+				<FieldDescription>
+					Drafts are only visible to admins. Publishing makes the post available
+					at its public URL.
+				</FieldDescription>
+			</Field>
+		</FieldGroup>
+	)
+}
+
 function BlogContentPreview({
 	editor,
 	value,
diff --git a/apps/web/src/features/admin-collections/editor.tsx b/apps/web/src/features/admin-collections/editor.tsx
index ad0af81..114203b 100644
--- a/apps/web/src/features/admin-collections/editor.tsx
+++ b/apps/web/src/features/admin-collections/editor.tsx
@@ -131,7 +131,7 @@ function EditorSection({
 	)
 }
 
-export function CollectionEditor({ initial }: { initial?: Initial }) {
+function useCollectionEditor(initial: Initial | undefined) {
 	const queryClient = useQueryClient()
 	const navigate = useNavigate()
 	const router = useRouter()
@@ -198,6 +198,19 @@ export function CollectionEditor({ initial }: { initial?: Initial }) {
 		setError(message)
 		requestAnimationFrame(() => errorsRef.current?.focus())
 	}
+	function onNameChange(name: string) {
+		setValue({
+			...value,
+			name,
+			slug: customizedSlug.current
+				? value.slug
+				: slugify(name).slice(0, 100).replace(/-+$/, ''),
+		})
+	}
+	function onSlugChange(slug: string) {
+		customizedSlug.current = true
+		setValue({ ...value, slug })
+	}
 
 	async function save() {
 		if (busy) return
@@ -276,6 +289,53 @@ export function CollectionEditor({ initial }: { initial?: Initial }) {
 		setPreview(!preview)
 	}
 
+	return {
+		initial,
+		editor,
+		onNameChange,
+		onSlugChange,
+		errorsRef,
+		value,
+		setValue,
+		fieldErrors,
+		reloading,
+		editorRevision,
+		members,
+		setMembers,
+		target,
+		setTarget,
+		error,
+		preview,
+		busy,
+		dirty,
+		blocker,
+		readiness,
+		ready,
+		fieldProps,
+		fieldError,
+		save,
+		reload,
+		togglePreview,
+	}
+}
+
+export function CollectionEditor({ initial }: { initial?: Initial }) {
+	const state = useCollectionEditor(initial)
+	const {
+		errorsRef,
+		value,
+		setValue,
+		reloading,
+		error,
+		busy,
+		dirty,
+		blocker,
+		readiness,
+		ready,
+		save,
+		reload,
+	} = state
+
 	return (
 		<div className="mx-auto flex w-full max-w-6xl min-w-0 flex-col gap-6 px-4 py-6 sm:px-6 sm:py-8">
 			<header className="flex flex-col gap-4">
@@ -324,225 +384,10 @@ export function CollectionEditor({ initial }: { initial?: Initial }) {
 			>
 				<fieldset disabled={busy} className="flex min-w-0 flex-col gap-6">
 					<legend className="sr-only">Collection details and projects</legend>
-					<EditorSection
-						number="1"
-						title="Collection details"
-						description="Help readers understand what this collection is about."
-					>
-						<FieldGroup>
-							<Field data-invalid={!!fieldErrors.name}>
-								<FieldLabel htmlFor="collection-name">Title</FieldLabel>
-								<Input
-									id="collection-name"
-									{...fieldProps('name')}
-									required
-									maxLength={120}
-									placeholder="Name your collection"
-									value={value.name}
-									onChange={(e) => {
-										const name = e.target.value
-										setValue({
-											...value,
-											name,
-											slug: customizedSlug.current
-												? value.slug
-												: slugify(name).slice(0, 100).replace(/-+$/, ''),
-										})
-									}}
-								/>
-								<FieldDescription id="collection-name-help">
-									A clear, specific title makes your collection easier to find.
-								</FieldDescription>
-								{fieldError('name')}
-							</Field>
-							<Field data-invalid={!!fieldErrors.slug}>
-								<FieldLabel htmlFor="collection-slug">Slug</FieldLabel>
-								<Input
-									id="collection-slug"
-									{...fieldProps('slug')}
-									required
-									maxLength={100}
-									pattern="[a-z0-9]+(-[a-z0-9]+)*"
-									placeholder="your-collection"
-									value={value.slug}
-									onChange={(e) => {
-										customizedSlug.current = true
-										setValue({ ...value, slug: e.target.value })
-									}}
-								/>
-								<FieldDescription
-									id="collection-slug-help"
-									className="wrap-anywhere"
-								>
-									/collections/{value.slug || 'your-collection'}
-									<br />
-									{initial
-										? 'Changing this slug changes the public URL.'
-										: 'Suggested from the title. You can customize it.'}
-								</FieldDescription>
-								{fieldError('slug')}
-							</Field>
-							<Field data-invalid={!!fieldErrors.description}>
-								<div className="flex items-center justify-between gap-2">
-									<FieldLabel htmlFor="collection-description">
-										Description
-									</FieldLabel>
-									<span className="text-xs text-muted-foreground">
-										{value.description.length}/300
-									</span>
-								</div>
-								<Textarea
-									id="collection-description"
-									{...fieldProps('description')}
-									required
-									maxLength={300}
-									rows={3}
-									placeholder="What will readers find in this collection?"
-									value={value.description}
-									onChange={(e) =>
-										setValue({ ...value, description: e.target.value })
-									}
-								/>
-								<FieldDescription id="collection-description-help">
-									A short summary shown on the collection’s discovery card.
-								</FieldDescription>
-								{fieldError('description')}
-							</Field>
-						</FieldGroup>
-					</EditorSection>
-					<EditorSection
-						number="2"
-						title="Type & source"
-						description="Choose how this collection connects its projects."
-					>
-						<FieldGroup>
-							<Field>
-								<FieldLabel htmlFor="collection-kind">Type</FieldLabel>
-								<NativeSelect
-									id="collection-kind"
-									className="w-full"
-									value={value.kind}
-									aria-describedby="collection-kind-help"
-									onChange={(e) => {
-										const kind = collectionBodySchema.shape.kind.parse(
-											e.target.value
-										)
-										setTarget(null)
-										setValue({
-											...value,
-											kind,
-											mainProjectId: null,
-											sourceRepositoryUrl: kind === 'repository' ? '' : null,
-										})
-									}}
-								>
-									{collectionKinds.map((kind) => (
-										<NativeSelectOption key={kind} value={kind}>
-											{collectionKindLabels[kind]}
-										</NativeSelectOption>
-									))}
-								</NativeSelect>
-								<FieldDescription id="collection-kind-help">
-									{kindDescriptions[value.kind]}
-								</FieldDescription>
-							</Field>
-							<CollectionSourceField
-								value={value}
-								setValue={setValue}
-								fieldErrors={fieldErrors}
-								fieldProps={fieldProps}
-								fieldError={fieldError}
-							/>
-						</FieldGroup>
-					</EditorSection>
-					<EditorSection
-						number="3"
-						title="Collection projects"
-						description="Add published projects, then arrange them in the order readers will see."
-					>
-						<CollectionProjectSelector
-							members={members}
-							target={target}
-							needsMainProject={value.kind !== 'repository'}
-							busy={busy}
-							onMembersChange={setMembers}
-							onTargetChange={(project) => {
-								setTarget(project)
-								setValue({ ...value, mainProjectId: project.id })
-							}}
-						/>
-					</EditorSection>
-					<EditorSection
-						number="4"
-						title="Editorial content"
-						description="Add context, recommendations, or a guide for your readers. Optional."
-						action={
-							<Button
-								type="button"
-								variant="outline"
-								size="sm"
-								aria-expanded={preview}
-								aria-controls="collection-content-preview"
-								onClick={togglePreview}
-							>
-								{preview ? (
-									<IconPencil data-icon="inline-start" />
-								) : (
-									<IconEye data-icon="inline-start" />
-								)}
-								{preview ? 'Hide public preview' : 'Show public preview'}
-							</Button>
-						}
-					>
-						<div className="flex min-w-0 flex-col gap-4">
-							<div className="min-w-0 rounded-lg border p-4 sm:p-5">
-								<ClientOnly
-									fallback={
-										<div className="flex min-h-40 flex-col gap-3 p-4">
-											<output className="text-sm text-muted-foreground">
-												Loading editor…
-											</output>
-											<Skeleton className="h-4 w-3/4" />
-											<Skeleton className="h-4 w-1/2" />
-										</div>
-									}
-								>
-									<BlockNoteEditor
-										key={editorRevision}
-										ref={editor}
-										value={value.content}
-										onChange={(content) =>
-											setValue((previous) => {
-												return { ...previous, content }
-											})
-										}
-									/>
-								</ClientOnly>
-							</div>
-							{preview && (
-								<section
-									id="collection-content-preview"
-									aria-label="Public content preview"
-									className="min-w-0 overflow-hidden rounded-lg border bg-background p-4"
-								>
-									<p className="mb-4 text-xs font-medium text-muted-foreground">
-										Public content preview
-									</p>
-									{value.content.trim() ? (
-										<PublicContent
-											slug={`collections/${value.slug}`}
-											content={value.content}
-										/>
-									) : (
-										<p className="text-sm text-muted-foreground">
-											Write some content above to see how it will look to
-											readers.
-										</p>
-									)}
-								</section>
-							)}
-						</div>
-					</EditorSection>
+					<CollectionDetails {...state} />
+					<CollectionTypeAndSource {...state} />
+					<CollectionProjects {...state} />
+					<CollectionEditorialContent {...state} />
 				</fieldset>
 				<CollectionPublication
 					value={value}
@@ -585,6 +430,295 @@ export function CollectionEditor({ initial }: { initial?: Initial }) {
 	)
 }
 
+type CollectionEditorState = ReturnType<typeof useCollectionEditor>
+
+function CollectionDetails({
+	initial,
+	onNameChange,
+	onSlugChange,
+	value,
+	setValue,
+	fieldErrors,
+	fieldProps,
+	fieldError,
+}: Pick<
+	CollectionEditorState,
+	| 'initial'
+	| 'onNameChange'
+	| 'onSlugChange'
+	| 'value'
+	| 'setValue'
+	| 'fieldErrors'
+	| 'fieldProps'
+	| 'fieldError'
+>) {
+	return (
+		<EditorSection
+			number="1"
+			title="Collection details"
+			description="Help readers understand what this collection is about."
+		>
+			<FieldGroup>
+				<Field data-invalid={!!fieldErrors.name}>
+					<FieldLabel htmlFor="collection-name">Title</FieldLabel>
+					<Input
+						id="collection-name"
+						{...fieldProps('name')}
+						required
+						maxLength={120}
+						placeholder="Name your collection"
+						value={value.name}
+						onChange={(e) => onNameChange(e.target.value)}
+					/>
+					<FieldDescription id="collection-name-help">
+						A clear, specific title makes your collection easier to find.
+					</FieldDescription>
+					{fieldError('name')}
+				</Field>
+				<Field data-invalid={!!fieldErrors.slug}>
+					<FieldLabel htmlFor="collection-slug">Slug</FieldLabel>
+					<Input
+						id="collection-slug"
+						{...fieldProps('slug')}
+						required
+						maxLength={100}
+						pattern="[a-z0-9]+(-[a-z0-9]+)*"
+						placeholder="your-collection"
+						value={value.slug}
+						onChange={(e) => onSlugChange(e.target.value)}
+					/>
+					<FieldDescription id="collection-slug-help" className="wrap-anywhere">
+						/collections/{value.slug || 'your-collection'}
+						<br />
+						{initial
+							? 'Changing this slug changes the public URL.'
+							: 'Suggested from the title. You can customize it.'}
+					</FieldDescription>
+					{fieldError('slug')}
+				</Field>
+				<Field data-invalid={!!fieldErrors.description}>
+					<div className="flex items-center justify-between gap-2">
+						<FieldLabel htmlFor="collection-description">
+							Description
+						</FieldLabel>
+						<span className="text-xs text-muted-foreground">
+							{value.description.length}/300
+						</span>
+					</div>
+					<Textarea
+						id="collection-description"
+						{...fieldProps('description')}
+						required
+						maxLength={300}
+						rows={3}
+						placeholder="What will readers find in this collection?"
+						value={value.description}
+						onChange={(e) =>
+							setValue({ ...value, description: e.target.value })
+						}
+					/>
+					<FieldDescription id="collection-description-help">
+						A short summary shown on the collection’s discovery card.
+					</FieldDescription>
+					{fieldError('description')}
+				</Field>
+			</FieldGroup>
+		</EditorSection>
+	)
+}
+
+function CollectionTypeAndSource({
+	value,
+	setValue,
+	fieldErrors,
+	setTarget,
+	fieldProps,
+	fieldError,
+}: Pick<
+	CollectionEditorState,
+	| 'value'
+	| 'setValue'
+	| 'fieldErrors'
+	| 'setTarget'
+	| 'fieldProps'
+	| 'fieldError'
+>) {
+	return (
+		<EditorSection
+			number="2"
+			title="Type & source"
+			description="Choose how this collection connects its projects."
+		>
+			<FieldGroup>
+				<Field>
+					<FieldLabel htmlFor="collection-kind">Type</FieldLabel>
+					<NativeSelect
+						id="collection-kind"
+						className="w-full"
+						value={value.kind}
+						aria-describedby="collection-kind-help"
+						onChange={(e) => {
+							const kind = collectionBodySchema.shape.kind.parse(e.target.value)
+							setTarget(null)
+							setValue({
+								...value,
+								kind,
+								mainProjectId: null,
+								sourceRepositoryUrl: kind === 'repository' ? '' : null,
+							})
+						}}
+					>
+						{collectionKinds.map((kind) => (
+							<NativeSelectOption key={kind} value={kind}>
+								{collectionKindLabels[kind]}
+							</NativeSelectOption>
+						))}
+					</NativeSelect>
+					<FieldDescription id="collection-kind-help">
+						{kindDescriptions[value.kind]}
+					</FieldDescription>
+				</Field>
+				<CollectionSourceField
+					value={value}
+					setValue={setValue}
+					fieldErrors={fieldErrors}
+					fieldProps={fieldProps}
+					fieldError={fieldError}
+				/>
+			</FieldGroup>
+		</EditorSection>
+	)
+}
+
+function CollectionProjects({
+	value,
+	setValue,
+	members,
+	setMembers,
+	target,
+	setTarget,
+	busy,
+}: Pick<
+	CollectionEditorState,
+	| 'value'
+	| 'setValue'
+	| 'members'
+	| 'setMembers'
+	| 'target'
+	| 'setTarget'
+	| 'busy'
+>) {
+	return (
+		<EditorSection
+			number="3"
+			title="Collection projects"
+			description="Add published projects, then arrange them in the order readers will see."
+		>
+			<CollectionProjectSelector
+				members={members}
+				target={target}
+				needsMainProject={value.kind !== 'repository'}
+				busy={busy}
+				onMembersChange={setMembers}
+				onTargetChange={(project) => {
+					setTarget(project)
+					setValue({ ...value, mainProjectId: project.id })
+				}}
+			/>
+		</EditorSection>
+	)
+}
+
+function CollectionEditorialContent({
+	editor,
+	value,
+	setValue,
+	editorRevision,
+	preview,
+	togglePreview,
+}: Pick<
+	CollectionEditorState,
+	| 'editor'
+	| 'value'
+	| 'setValue'
+	| 'editorRevision'
+	| 'preview'
+	| 'togglePreview'
+>) {
+	return (
+		<EditorSection
+			number="4"
+			title="Editorial content"
+			description="Add context, recommendations, or a guide for your readers. Optional."
+			action={
+				<Button
+					type="button"
+					variant="outline"
+					size="sm"
+					aria-expanded={preview}
+					aria-controls="collection-content-preview"
+					onClick={togglePreview}
+				>
+					{preview ? (
+						<IconPencil data-icon="inline-start" />
+					) : (
+						<IconEye data-icon="inline-start" />
+					)}
+					{preview ? 'Hide public preview' : 'Show public preview'}
+				</Button>
+			}
+		>
+			<div className="flex min-w-0 flex-col gap-4">
+				<div className="min-w-0 rounded-lg border p-4 sm:p-5">
+					<ClientOnly
+						fallback={
+							<div className="flex min-h-40 flex-col gap-3 p-4">
+								<output className="text-sm text-muted-foreground">
+									Loading editor…
+								</output>
+								<Skeleton className="h-4 w-3/4" />
+								<Skeleton className="h-4 w-1/2" />
+							</div>
+						}
+					>
+						<BlockNoteEditor
+							key={editorRevision}
+							ref={editor}
+							value={value.content}
+							onChange={(content) =>
+								setValue((previous) => {
+									return { ...previous, content }
+								})
+							}
+						/>
+					</ClientOnly>
+				</div>
+				{preview && (
+					<section
+						id="collection-content-preview"
+						aria-label="Public content preview"
+						className="min-w-0 overflow-hidden rounded-lg border bg-background p-4"
+					>
+						<p className="mb-4 text-xs font-medium text-muted-foreground">
+							Public content preview
+						</p>
+						{value.content.trim() ? (
+							<PublicContent
+								slug={`collections/${value.slug}`}
+								content={value.content}
+							/>
+						) : (
+							<p className="text-sm text-muted-foreground">
+								Write some content above to see how it will look to readers.
+							</p>
+						)}
+					</section>
+				)}
+			</div>
+		</EditorSection>
+	)
+}
+
 function CollectionPublication({
 	value,
 	setValue,
diff --git a/apps/web/src/features/admin-featured/components/featured-editor.tsx b/apps/web/src/features/admin-featured/components/featured-editor.tsx
index d38b691..1e29147 100644
--- a/apps/web/src/features/admin-featured/components/featured-editor.tsx
+++ b/apps/web/src/features/admin-featured/components/featured-editor.tsx
@@ -85,7 +85,7 @@ export function FeaturedEditor() {
 	return <SelectionEditor initial={data.projects} />
 }
 
-function SelectionEditor({ initial }: { initial: Selection }) {
+function useFeaturedSelection(initial: Selection) {
 	const [changing, startTransition] = useTransition()
 	const queryClient = useQueryClient()
 	const [projects, setProjects] = useState(initial)
@@ -162,6 +162,37 @@ function SelectionEditor({ initial }: { initial: Selection }) {
 			setPage(1)
 		})
 	}
+	return {
+		changing,
+		startTransition,
+		projects,
+		setProjects,
+		baseline,
+		error,
+		reloading,
+		confirmReload,
+		setConfirmReload,
+		search,
+		setSearch,
+		text,
+		setText,
+		page,
+		setPage,
+		save,
+		busy,
+		dirty,
+		unavailable,
+		blocker,
+		reload,
+		move,
+		clearSearch,
+	}
+}
+
+function SelectionEditor({ initial }: { initial: Selection }) {
+	const state = useFeaturedSelection(initial)
+	const { error, confirmReload, setConfirmReload, blocker, reload } = state
+
 	return (
 		<div className="mx-auto flex w-full max-w-6xl min-w-0 flex-col gap-6 px-4 py-6 sm:px-6 sm:py-8">
 			<header className="flex flex-col gap-2">
@@ -189,319 +220,10 @@ function SelectionEditor({ initial }: { initial: Selection }) {
 			)}
 			<div className="grid min-w-0 items-start gap-6 lg:grid-cols-[minmax(0,1fr)_320px]">
 				<div className="flex min-w-0 flex-col gap-6">
-					<section aria-labelledby="featured-selection-title">
-						<Card>
-							<CardHeader className="border-b">
-								<CardTitle>
-									<h2 id="featured-selection-title">
-										Selected projects ({projects.length}/{MAX_FEATURED_PROJECTS}
-										)
-									</h2>
-								</CardTitle>
-								<CardDescription>
-									Read left to right, then top to bottom. Use the arrows to
-									change the display order.
-								</CardDescription>
-							</CardHeader>
-							<CardContent>
-								{projects.length > 0 ? (
-									<ol
-										aria-label="Featured selection"
-										className="max-h-128 scroll-py-2 divide-y overflow-y-auto overscroll-contain rounded-lg border"
-									>
-										{projects.map((project, index) => (
-											<li
-												key={project.id}
-												className="grid grid-cols-[1.25rem_2.25rem_minmax(0,1fr)] items-center gap-x-3 gap-y-2 p-3 sm:flex sm:flex-wrap sm:gap-3"
-											>
-												<span className="w-5 shrink-0 text-center text-xs text-muted-foreground">
-													{index + 1}
-												</span>
-												<ProjectLogo
-													src={project.logo}
-													name={project.name}
-													className="size-9 shrink-0 rounded-lg"
-												/>
-												<div className="flex min-w-0 flex-1 flex-col gap-1">
-													<Link
-														to="/projects/$id/edit"
-														params={{ id: project.id }}
-														className="w-fit rounded-sm text-sm font-medium wrap-anywhere underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-ring"
-													>
-														{project.name}
-													</Link>
-													<p className="truncate text-xs text-muted-foreground">
-														{websiteHost(project.websiteUrl) ??
-															'No valid website'}
-													</p>
-													{!available(project) && (
-														<p className="text-xs text-destructive">
-															Unavailable. Remove before saving.
-														</p>
-													)}
-												</div>
-												<div className="col-start-3 ml-auto flex items-center gap-1">
-													<Button
-														variant="ghost"
-														size="icon-sm"
-														aria-label={`Move ${project.name} up`}
-														className="size-11 sm:size-7"
-														disabled={busy || index === 0}
-														onClick={() => move(index, -1)}
-													>
-														<IconArrowUp />
-													</Button>
-													<Button
-														variant="ghost"
-														size="icon-sm"
-														aria-label={`Move ${project.name} down`}
-														className="size-11 sm:size-7"
-														disabled={busy || index === projects.length - 1}
-														onClick={() => move(index, 1)}
-													>
-														<IconArrowDown />
-													</Button>
-													<Button
-														variant="ghost"
-														size="icon-sm"
-														disabled={busy}
-														aria-label={`Remove ${project.name} from featured`}
-														className="size-11 sm:size-7"
-														onClick={() =>
-															setProjects((previous) =>
-																previous.filter(({ id }) => id !== project.id)
-															)
-														}
-													>
-														<IconX />
-													</Button>
-												</div>
-											</li>
-										))}
-									</ol>
-								) : (
-									<Empty className="border bg-muted/20 py-8">
-										<EmptyHeader>
-											<EmptyTitle>No featured projects selected</EmptyTitle>
-											<EmptyDescription>
-												Add projects below, then save the selection. Saving an
-												empty selection hides the Featured Projects panel.
-											</EmptyDescription>
-										</EmptyHeader>
-									</Empty>
-								)}
-								{unavailable > 0 && (
-									<Alert variant="destructive" className="mt-4">
-										<AlertTitle>Review unavailable projects</AlertTitle>
-										<AlertDescription>
-											Remove {unavailable} unavailable{' '}
-											{unavailable === 1 ? 'project' : 'projects'} before
-											saving. Only published projects with a valid website can
-											appear.
-										</AlertDescription>
-									</Alert>
-								)}
-							</CardContent>
-						</Card>
-					</section>
-					<section aria-labelledby="featured-candidates-title">
-						<Card>
-							<CardHeader className="border-b">
-								<CardTitle>
-									<h2 id="featured-candidates-title">Add projects</h2>
-								</CardTitle>
-								<CardDescription>
-									Search the published catalogue. Projects need a website to be
-									featured.
-								</CardDescription>
-							</CardHeader>
-							<CardContent className="flex flex-col gap-4">
-								<form
-									onSubmit={(event) => {
-										event.preventDefault()
-										startTransition(() => {
-											setSearch(text.trim())
-											setPage(1)
-										})
-									}}
-								>
-									<Field>
-										<FieldLabel htmlFor="featured-search">
-											Search published projects
-										</FieldLabel>
-										<div className="flex gap-2">
-											<InputGroup>
-												<InputGroupAddon>
-													<IconSearch aria-hidden="true" />
-												</InputGroupAddon>
-												<InputGroupInput
-													id="featured-search"
-													disabled={busy}
-													placeholder="Search by project name…"
-													value={text}
-													onChange={(event) => setText(event.target.value)}
-												/>
-											</InputGroup>
-											<Button variant="outline" type="submit" disabled={busy}>
-												Search
-											</Button>
-										</div>
-									</Field>
-								</form>
-								{search && (
-									<div className="flex flex-wrap items-center justify-between gap-2">
-										<p className="min-w-0 text-xs wrap-anywhere text-muted-foreground">
-											Results for “{search}”
-										</p>
-										<Button
-											variant="ghost"
-											size="sm"
-											disabled={busy}
-											onClick={clearSearch}
-										>
-											Clear search
-										</Button>
-									</div>
-								)}
-								{projects.length === MAX_FEATURED_PROJECTS && (
-									<Alert>
-										<AlertTitle>
-											All {MAX_FEATURED_PROJECTS} slots are filled
-										</AlertTitle>
-										<AlertDescription>
-											Remove a selected project to make room for another.
-										</AlertDescription>
-									</Alert>
-								)}
-								<Candidates
-									search={search}
-									page={page}
-									onPageChange={(nextPage) =>
-										startTransition(() => setPage(nextPage))
-									}
-									projects={projects}
-									disabled={busy}
-									loading={changing}
-									onClearSearch={clearSearch}
-									onAdd={(project) =>
-										setProjects((previous) =>
-											previous.some(({ id }) => id === project.id) ||
-											previous.length >= MAX_FEATURED_PROJECTS
-												? previous
-												: [...previous, project]
-										)
-									}
-								/>
-							</CardContent>
-						</Card>
-					</section>
+					<FeaturedSelectedProjects {...state} />
+					<FeaturedProjectSearch {...state} />
 				</div>
-				<aside
-					aria-label="Featured layout and publishing"
-					className="flex min-w-0 flex-col gap-4 lg:sticky lg:top-20"
-				>
-					<Card>
-						<CardHeader className="border-b">
-							<CardTitle>
-								<h2>Layout preview</h2>
-							</CardTitle>
-							<CardDescription>6 columns × 4 rows</CardDescription>
-							<CardAction>
-								<Badge variant="secondary">
-									{projects.length}/{MAX_FEATURED_PROJECTS}
-								</Badge>
-							</CardAction>
-						</CardHeader>
-						<CardContent className="flex flex-col gap-5">
-							<div className="flex flex-col gap-3">
-								<h3 className="text-sm font-medium">Featured Projects</h3>
-								<ol
-									aria-label="Featured layout preview"
-									className="grid grid-cols-6 gap-2"
-								>
-									{Array.from({ length: MAX_FEATURED_PROJECTS }, (_, index) => {
-										const project = projects.at(index)
-										return (
-											<li
-												key={project?.id ?? `slot-${index}`}
-												title={
-													project
-														? `${index + 1}. ${project.name}`
-														: `Empty slot ${index + 1}`
-												}
-												className="flex aspect-square min-w-0 items-center justify-center rounded-lg border bg-background/50"
-											>
-												{project ? (
-													<ProjectLogo
-														src={project.logo}
-														name={project.name}
-														className="size-7 rounded-md bg-transparent"
-													/>
-												) : (
-													<span className="text-xs text-muted-foreground">
-														{index + 1}
-													</span>
-												)}
-												<span className="sr-only">
-													{project
-														? `${index + 1}. ${project.name}${available(project) ? '' : ' (unavailable)'}`
-														: `Empty slot ${index + 1}`}
-												</span>
-											</li>
-										)
-									})}
-								</ol>
-								<p className="text-xs leading-relaxed text-muted-foreground">
-									The current project is hidden automatically on its own page.
-									Narrow panels use fewer columns.
-								</p>
-							</div>
-							<div className="flex flex-col gap-3 border-t pt-4">
-								<div className="flex items-center justify-between gap-2 text-sm">
-									<span>Selection</span>
-									<span className="text-muted-foreground">
-										{MAX_FEATURED_PROJECTS - projects.length} slots available
-									</span>
-								</div>
-								<Button
-									disabled={busy || !dirty || unavailable > 0}
-									onClick={() =>
-										save.mutate({
-											body: {
-												projectIds: projects.map(({ id }) => id),
-												expectedProjectIds: baseline,
-											},
-										})
-									}
-								>
-									<IconDeviceFloppy data-icon="inline-start" />
-									{save.isPending ? 'Saving…' : 'Save changes'}
-								</Button>
-								<Button
-									variant="outline"
-									disabled={busy}
-									onClick={() => {
-										if (dirty) setConfirmReload(true)
-										else void reload()
-									}}
-								>
-									{reloading
-										? 'Reloading…'
-										: dirty
-											? 'Discard changes and reload'
-											: 'Reload selection'}
-								</Button>
-								<output className="text-center text-xs text-muted-foreground">
-									{dirty ? 'You have unsaved changes' : 'No unsaved changes'}
-								</output>
-							</div>
-						</CardContent>
-					</Card>
-					<p className="px-1 text-xs leading-relaxed text-muted-foreground">
-						Changes go live after saving. Featuring a project does not change
-						its catalogue position.
-					</p>
-				</aside>
+				<FeaturedPublishing {...state} />
 			</div>
 			<AlertDialog open={confirmReload} onOpenChange={setConfirmReload}>
 				<AlertDialogContent>
@@ -552,6 +274,389 @@ function SelectionEditor({ initial }: { initial: Selection }) {
 	)
 }
 
+type FeaturedSelectionState = ReturnType<typeof useFeaturedSelection>
+
+function FeaturedSelectedProjects({
+	projects,
+	setProjects,
+	busy,
+	unavailable,
+	move,
+}: Pick<
+	FeaturedSelectionState,
+	'projects' | 'setProjects' | 'text' | 'save' | 'busy' | 'unavailable' | 'move'
+>) {
+	return (
+		<section aria-labelledby="featured-selection-title">
+			<Card>
+				<CardHeader className="border-b">
+					<CardTitle>
+						<h2 id="featured-selection-title">
+							Selected projects ({projects.length}/{MAX_FEATURED_PROJECTS})
+						</h2>
+					</CardTitle>
+					<CardDescription>
+						Read left to right, then top to bottom. Use the arrows to change the
+						display order.
+					</CardDescription>
+				</CardHeader>
+				<CardContent>
+					{projects.length > 0 ? (
+						<ol
+							aria-label="Featured selection"
+							className="max-h-128 scroll-py-2 divide-y overflow-y-auto overscroll-contain rounded-lg border"
+						>
+							{projects.map((project, index) => (
+								<li
+									key={project.id}
+									className="grid grid-cols-[1.25rem_2.25rem_minmax(0,1fr)] items-center gap-x-3 gap-y-2 p-3 sm:flex sm:flex-wrap sm:gap-3"
+								>
+									<span className="w-5 shrink-0 text-center text-xs text-muted-foreground">
+										{index + 1}
+									</span>
+									<ProjectLogo
+										src={project.logo}
+										name={project.name}
+										className="size-9 shrink-0 rounded-lg"
+									/>
+									<div className="flex min-w-0 flex-1 flex-col gap-1">
+										<Link
+											to="/projects/$id/edit"
+											params={{ id: project.id }}
+											className="w-fit rounded-sm text-sm font-medium wrap-anywhere underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-ring"
+										>
+											{project.name}
+										</Link>
+										<p className="truncate text-xs text-muted-foreground">
+											{websiteHost(project.websiteUrl) ?? 'No valid website'}
+										</p>
+										{!available(project) && (
+											<p className="text-xs text-destructive">
+												Unavailable. Remove before saving.
+											</p>
+										)}
+									</div>
+									<div className="col-start-3 ml-auto flex items-center gap-1">
+										<Button
+											variant="ghost"
+											size="icon-sm"
+											aria-label={`Move ${project.name} up`}
+											className="size-11 sm:size-7"
+											disabled={busy || index === 0}
+											onClick={() => move(index, -1)}
+										>
+											<IconArrowUp />
+										</Button>
+										<Button
+											variant="ghost"
+											size="icon-sm"
+											aria-label={`Move ${project.name} down`}
+											className="size-11 sm:size-7"
+											disabled={busy || index === projects.length - 1}
+											onClick={() => move(index, 1)}
+										>
+											<IconArrowDown />
+										</Button>
+										<Button
+											variant="ghost"
+											size="icon-sm"
+											disabled={busy}
+											aria-label={`Remove ${project.name} from featured`}
+											className="size-11 sm:size-7"
+											onClick={() =>
+												setProjects((previous) =>
+													previous.filter(({ id }) => id !== project.id)
+												)
+											}
+										>
+											<IconX />
+										</Button>
+									</div>
+								</li>
+							))}
+						</ol>
+					) : (
+						<Empty className="border bg-muted/20 py-8">
+							<EmptyHeader>
+								<EmptyTitle>No featured projects selected</EmptyTitle>
+								<EmptyDescription>
+									Add projects below, then save the selection. Saving an empty
+									selection hides the Featured Projects panel.
+								</EmptyDescription>
+							</EmptyHeader>
+						</Empty>
+					)}
+					{unavailable > 0 && (
+						<Alert variant="destructive" className="mt-4">
+							<AlertTitle>Review unavailable projects</AlertTitle>
+							<AlertDescription>
+								Remove {unavailable} unavailable{' '}
+								{unavailable === 1 ? 'project' : 'projects'} before saving. Only
+								published projects with a valid website can appear.
+							</AlertDescription>
+						</Alert>
+					)}
+				</CardContent>
+			</Card>
+		</section>
+	)
+}
+
+function FeaturedProjectSearch({
+	changing,
+	startTransition,
+	projects,
+	setProjects,
+	search,
+	setSearch,
+	text,
+	setText,
+	page,
+	setPage,
+	busy,
+	clearSearch,
+}: Pick<
+	FeaturedSelectionState,
+	| 'changing'
+	| 'startTransition'
+	| 'projects'
+	| 'setProjects'
+	| 'search'
+	| 'setSearch'
+	| 'text'
+	| 'setText'
+	| 'page'
+	| 'setPage'
+	| 'busy'
+	| 'clearSearch'
+>) {
+	return (
+		<section aria-labelledby="featured-candidates-title">
+			<Card>
+				<CardHeader className="border-b">
+					<CardTitle>
+						<h2 id="featured-candidates-title">Add projects</h2>
+					</CardTitle>
+					<CardDescription>
+						Search the published catalogue. Projects need a website to be
+						featured.
+					</CardDescription>
+				</CardHeader>
+				<CardContent className="flex flex-col gap-4">
+					<form
+						onSubmit={(event) => {
+							event.preventDefault()
+							startTransition(() => {
+								setSearch(text.trim())
+								setPage(1)
+							})
+						}}
+					>
+						<Field>
+							<FieldLabel htmlFor="featured-search">
+								Search published projects
+							</FieldLabel>
+							<div className="flex gap-2">
+								<InputGroup>
+									<InputGroupAddon>
+										<IconSearch aria-hidden="true" />
+									</InputGroupAddon>
+									<InputGroupInput
+										id="featured-search"
+										disabled={busy}
+										placeholder="Search by project name…"
+										value={text}
+										onChange={(event) => setText(event.target.value)}
+									/>
+								</InputGroup>
+								<Button variant="outline" type="submit" disabled={busy}>
+									Search
+								</Button>
+							</div>
+						</Field>
+					</form>
+					{search && (
+						<div className="flex flex-wrap items-center justify-between gap-2">
+							<p className="min-w-0 text-xs wrap-anywhere text-muted-foreground">
+								Results for “{search}”
+							</p>
+							<Button
+								variant="ghost"
+								size="sm"
+								disabled={busy}
+								onClick={clearSearch}
+							>
+								Clear search
+							</Button>
+						</div>
+					)}
+					{projects.length === MAX_FEATURED_PROJECTS && (
+						<Alert>
+							<AlertTitle>
+								All {MAX_FEATURED_PROJECTS} slots are filled
+							</AlertTitle>
+							<AlertDescription>
+								Remove a selected project to make room for another.
+							</AlertDescription>
+						</Alert>
+					)}
+					<Candidates
+						search={search}
+						page={page}
+						onPageChange={(nextPage) =>
+							startTransition(() => setPage(nextPage))
+						}
+						projects={projects}
+						disabled={busy}
+						loading={changing}
+						onClearSearch={clearSearch}
+						onAdd={(project) =>
+							setProjects((previous) =>
+								previous.some(({ id }) => id === project.id) ||
+								previous.length >= MAX_FEATURED_PROJECTS
+									? previous
+									: [...previous, project]
+							)
+						}
+					/>
+				</CardContent>
+			</Card>
+		</section>
+	)
+}
+
+function FeaturedPublishing({
+	projects,
+	baseline,
+	reloading,
+	setConfirmReload,
+	save,
+	busy,
+	dirty,
+	unavailable,
+	reload,
+}: Pick<
+	FeaturedSelectionState,
+	| 'projects'
+	| 'baseline'
+	| 'reloading'
+	| 'setConfirmReload'
+	| 'save'
+	| 'busy'
+	| 'dirty'
+	| 'unavailable'
+	| 'reload'
+>) {
+	return (
+		<aside
+			aria-label="Featured layout and publishing"
+			className="flex min-w-0 flex-col gap-4 lg:sticky lg:top-20"
+		>
+			<Card>
+				<CardHeader className="border-b">
+					<CardTitle>
+						<h2>Layout preview</h2>
+					</CardTitle>
+					<CardDescription>6 columns × 4 rows</CardDescription>
+					<CardAction>
+						<Badge variant="secondary">
+							{projects.length}/{MAX_FEATURED_PROJECTS}
+						</Badge>
+					</CardAction>
+				</CardHeader>
+				<CardContent className="flex flex-col gap-5">
+					<div className="flex flex-col gap-3">
+						<h3 className="text-sm font-medium">Featured Projects</h3>
+						<ol
+							aria-label="Featured layout preview"
+							className="grid grid-cols-6 gap-2"
+						>
+							{Array.from({ length: MAX_FEATURED_PROJECTS }, (_, index) => {
+								const project = projects.at(index)
+								return (
+									<li
+										key={project?.id ?? `slot-${index}`}
+										title={
+											project
+												? `${index + 1}. ${project.name}`
+												: `Empty slot ${index + 1}`
+										}
+										className="flex aspect-square min-w-0 items-center justify-center rounded-lg border bg-background/50"
+									>
+										{project ? (
+											<ProjectLogo
+												src={project.logo}
+												name={project.name}
+												className="size-7 rounded-md bg-transparent"
+											/>
+										) : (
+											<span className="text-xs text-muted-foreground">
+												{index + 1}
+											</span>
+										)}
+										<span className="sr-only">
+											{project
+												? `${index + 1}. ${project.name}${available(project) ? '' : ' (unavailable)'}`
+												: `Empty slot ${index + 1}`}
+										</span>
+									</li>
+								)
+							})}
+						</ol>
+						<p className="text-xs leading-relaxed text-muted-foreground">
+							The current project is hidden automatically on its own page.
+							Narrow panels use fewer columns.
+						</p>
+					</div>
+					<div className="flex flex-col gap-3 border-t pt-4">
+						<div className="flex items-center justify-between gap-2 text-sm">
+							<span>Selection</span>
+							<span className="text-muted-foreground">
+								{MAX_FEATURED_PROJECTS - projects.length} slots available
+							</span>
+						</div>
+						<Button
+							disabled={busy || !dirty || unavailable > 0}
+							onClick={() =>
+								save.mutate({
+									body: {
+										projectIds: projects.map(({ id }) => id),
+										expectedProjectIds: baseline,
+									},
+								})
+							}
+						>
+							<IconDeviceFloppy data-icon="inline-start" />
+							{save.isPending ? 'Saving…' : 'Save changes'}
+						</Button>
+						<Button
+							variant="outline"
+							disabled={busy}
+							onClick={() => {
+								if (dirty) setConfirmReload(true)
+								else void reload()
+							}}
+						>
+							{reloading
+								? 'Reloading…'
+								: dirty
+									? 'Discard changes and reload'
+									: 'Reload selection'}
+						</Button>
+						<output className="text-center text-xs text-muted-foreground">
+							{dirty ? 'You have unsaved changes' : 'No unsaved changes'}
+						</output>
+					</div>
+				</CardContent>
+			</Card>
+			<p className="px-1 text-xs leading-relaxed text-muted-foreground">
+				Changes go live after saving. Featuring a project does not change its
+				catalogue position.
+			</p>
+		</aside>
+	)
+}
+
 function Candidates(props: Parameters<typeof CandidateResults>[0]) {
 	return (
 		<QueryBoundary
diff --git a/apps/web/src/features/admin-projects/components/create-project-form.tsx b/apps/web/src/features/admin-projects/components/create-project-form.tsx
index a44fee5..539de7f 100644
--- a/apps/web/src/features/admin-projects/components/create-project-form.tsx
+++ b/apps/web/src/features/admin-projects/components/create-project-form.tsx
@@ -91,7 +91,7 @@ function isUploadConsumedError(error: unknown): boolean {
 	)
 }
 
-export function CreateProjectForm() {
+function useCreateProjectForm() {
 	const createProject = useAdminProjectCreate()
 	const [submitError, setSubmitError] = useState<string | null>(null)
 	const [logoDisplayUrl, setLogoDisplayUrl] = useState<string | null>(null)
@@ -153,6 +153,23 @@ export function CreateProjectForm() {
 	// the last keystroke.
 	const editorRef = useRef<BlockNoteEditorHandle | null>(null)
 
+	return {
+		createProject,
+		submitError,
+		logoDisplayUrl,
+		setLogoDisplayUrl,
+		screenshotDisplayUrl,
+		setScreenshotDisplayUrl,
+		form,
+		isSlugCustomized,
+		editorRef,
+	}
+}
+
+export function CreateProjectForm() {
+	const controller = useCreateProjectForm()
+	const { submitError, form, editorRef } = controller
+
 	return (
 		<div className="mx-auto w-full max-w-6xl space-y-6 px-4 py-6">
 			<div className="space-y-3">
@@ -185,481 +202,17 @@ export function CreateProjectForm() {
 					}}
 				>
 					<div className="space-y-8">
-						<section className="space-y-4">
-							<SectionHeading
-								title="Basics"
-								description="Identity and links for the project."
-							/>
-
-							<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-								<form.Field
-									name="name"
-									listeners={{
-										onChange: ({ value }) => {
-											if (!isSlugCustomized.current) {
-												form.setFieldValue('slug', slugify(value), {
-													dontUpdateMeta: true,
-												})
-											}
-										},
-									}}
-									children={(field) => {
-										const isInvalid =
-											field.state.meta.isTouched && !field.state.meta.isValid
-
-										return (
-											<Field data-invalid={isInvalid}>
-												<FieldLabel htmlFor={field.name}>Name</FieldLabel>
-
-												<Input
-													id={field.name}
-													name={field.name}
-													value={field.state.value}
-													onBlur={field.handleBlur}
-													onChange={(e) => field.handleChange(e.target.value)}
-													aria-invalid={isInvalid}
-													placeholder="Name Project"
-												/>
-
-												{isInvalid && (
-													<FieldError errors={field.state.meta.errors} />
-												)}
-											</Field>
-										)
-									}}
-								/>
-
-								<form.Field
-									name="slug"
-									children={(field) => {
-										const isInvalid =
-											field.state.meta.isTouched && !field.state.meta.isValid
-
-										return (
-											<Field data-invalid={isInvalid}>
-												<FieldLabel htmlFor={field.name}>Slug</FieldLabel>
-
-												<Input
-													id={field.name}
-													name={field.name}
-													value={field.state.value}
-													onBlur={field.handleBlur}
-													onChange={(e) => {
-														isSlugCustomized.current = true
-														field.handleChange(e.target.value)
-													}}
-													aria-invalid={isInvalid}
-													placeholder="my-project"
-													className="font-mono"
-												/>
-
-												<FieldDescription>
-													Auto-filled from the name. Edit to customize.
-												</FieldDescription>
-
-												{isInvalid && (
-													<FieldError errors={field.state.meta.errors} />
-												)}
-											</Field>
-										)
-									}}
-								/>
-							</div>
-
-							<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-								<form.Field
-									name="repositoryUrl"
-									children={(field) => {
-										const isInvalid =
-											field.state.meta.isTouched && !field.state.meta.isValid
-
-										return (
-											<Field data-invalid={isInvalid}>
-												<FieldLabel htmlFor={field.name}>
-													Repository URL
-												</FieldLabel>
-												<InputGroup>
-													<InputGroupAddon className="h-full rounded-l-lg border-r bg-accent pr-1.5">
-														<InputGroupText>https://github.com/</InputGroupText>
-													</InputGroupAddon>
-													<InputGroupInput
-														id={field.name}
-														name={field.name}
-														value={field.state.value}
-														onBlur={field.handleBlur}
-														onChange={(e) => field.handleChange(e.target.value)}
-														aria-invalid={isInvalid}
-														placeholder="owner/repository"
-														className="font-mono"
-													/>
-												</InputGroup>
-
-												<form.Subscribe
-													selector={(state) =>
-														[
-															state.values.repositoryUrl,
-															state.isSubmitting,
-														] as const
-													}
-												>
-													{([repositoryUrl, isSubmitting]) => (
-														<GithubMetadataPrefill
-															repositoryUrl={repositoryUrl}
-															disabled={isSubmitting || createProject.isPending}
-															getCurrentValues={() => {
-																return {
-																	repositoryUrl:
-																		form.getFieldValue('repositoryUrl'),
-																	description:
-																		form.getFieldValue('description'),
-																	websiteUrl: form.getFieldValue('websiteUrl'),
-																}
-															}}
-															onApply={(values) => {
-																if ('description' in values) {
-																	form.setFieldValue(
-																		'description',
-																		values.description
-																	)
-																	void form.validateField(
-																		'description',
-																		'change'
-																	)
-																}
-																if ('websiteUrl' in values) {
-																	form.setFieldValue(
-																		'websiteUrl',
-																		values.websiteUrl
-																	)
-																	void form.validateField(
-																		'websiteUrl',
-																		'change'
-																	)
-																}
-															}}
-														/>
-													)}
-												</form.Subscribe>
-
-												<FieldDescription>
-													Must be a public, actively maintained repository with
-													at least 10 stars.
-												</FieldDescription>
-
-												{isInvalid && (
-													<FieldError errors={field.state.meta.errors} />
-												)}
-											</Field>
-										)
-									}}
-								/>
-
-								<form.Field
-									name="websiteUrl"
-									children={(field) => {
-										const isInvalid =
-											field.state.meta.isTouched && !field.state.meta.isValid
-
-										return (
-											<Field data-invalid={isInvalid}>
-												<FieldLabel htmlFor={field.name}>
-													Website URL
-												</FieldLabel>
-												<Input
-													id={field.name}
-													name={field.name}
-													value={field.state.value ?? ''}
-													onBlur={field.handleBlur}
-													onChange={(e) => {
-														const next = e.target.value
-														field.handleChange(next === '' ? undefined : next)
-													}}
-													aria-invalid={isInvalid}
-													placeholder="Website URL"
-												/>
-
-												{isInvalid && (
-													<FieldError errors={field.state.meta.errors} />
-												)}
-											</Field>
-										)
-									}}
-								/>
-							</div>
-						</section>
-
-						<section className="space-y-4">
-							<SectionHeading
-								title="Description"
-								description="Short copy shown in the catalogue listing."
-							/>
-
-							<form.Field
-								name="tagline"
-								children={(field) => {
-									const isInvalid =
-										field.state.meta.isTouched && !field.state.meta.isValid
-
-									return (
-										<Field data-invalid={isInvalid}>
-											<div className="flex items-baseline justify-between gap-2">
-												<FieldLabel htmlFor={field.name}>Tagline</FieldLabel>
-												<span className="shrink-0 text-xs text-muted-foreground tabular-nums">
-													{(field.state.value ?? '').length}/
-													{TAGLINE_MAX_LENGTH}
-												</span>
-											</div>
-
-											<Input
-												id={field.name}
-												name={field.name}
-												value={field.state.value ?? ''}
-												onBlur={field.handleBlur}
-												onChange={(e) => field.handleChange(e.target.value)}
-												aria-invalid={isInvalid}
-												placeholder="Tagline"
-											/>
-
-											{isInvalid && (
-												<FieldError errors={field.state.meta.errors} />
-											)}
-										</Field>
-									)
-								}}
-							/>
-
-							<form.Field
-								name="description"
-								children={(field) => {
-									const isInvalid =
-										field.state.meta.isTouched && !field.state.meta.isValid
-
-									return (
-										<Field data-invalid={isInvalid}>
-											<div className="flex items-baseline justify-between gap-2">
-												<FieldLabel htmlFor={field.name}>
-													Description
-												</FieldLabel>
-												<span className="shrink-0 text-xs text-muted-foreground tabular-nums">
-													{(field.state.value ?? '').length}/
-													{DESCRIPTION_MAX_LENGTH}
-												</span>
-											</div>
-
-											<Textarea
-												id={field.name}
-												name={field.name}
-												value={field.state.value ?? ''}
-												onBlur={field.handleBlur}
-												onChange={(e) => field.handleChange(e.target.value)}
-												aria-invalid={isInvalid}
-												placeholder="Short description"
-											/>
-
-											{isInvalid && (
-												<FieldError errors={field.state.meta.errors} />
-											)}
-										</Field>
-									)
-								}}
-							/>
-						</section>
-
-						<section className="space-y-4">
-							<SectionHeading
-								title="Content"
-								description="Type @ to mention a listed project, or find Project mention in the / menu."
-							/>
-
-							<form.Subscribe
-								selector={(state) =>
-									[state.values.repositoryUrl, state.isSubmitting] as const
-								}
-							>
-								{([repositoryUrl, isSubmitting]) => (
-									<ClientOnly>
-										<GithubReadmeImport
-											repositoryUrl={repositoryUrl}
-											disabled={isSubmitting || createProject.isPending}
-											getRepositoryUrl={() =>
-												form.getFieldValue('repositoryUrl')
-											}
-											getEditor={() => editorRef.current}
-										/>
-									</ClientOnly>
-								)}
-							</form.Subscribe>
-
-							<form.Field
-								name="content"
-								children={(field) => {
-									const isInvalid =
-										field.state.meta.isTouched && !field.state.meta.isValid
-
-									return (
-										<Field data-invalid={isInvalid}>
-											<ClientOnly>
-												<BlockNoteEditor
-													ref={editorRef}
-													value={field.state.value ?? ''}
-													onBlur={field.handleBlur}
-													onChange={(e) => field.handleChange(e)}
-													className="rounded-lg border border-input bg-transparent px-2.5 py-2 transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
-												/>
-											</ClientOnly>
-
-											{isInvalid && (
-												<FieldError errors={field.state.meta.errors} />
-											)}
-										</Field>
-									)
-								}}
-							/>
-						</section>
+						<CreateProjectBasics {...controller} />
 
-						<section className="@container/media space-y-4">
-							<SectionHeading
-								title="Media"
-								description="Logo is required to publish. Screenshots are cropped to 16:9."
-							/>
+						<CreateProjectDescription {...controller} />
 
-							<div className="grid grid-cols-1 items-start gap-4 @lg/media:grid-cols-[14rem_minmax(0,1fr)]">
-								<form.Field
-									name="logo"
-									children={(field) => {
-										const isInvalid =
-											field.state.meta.isTouched && !field.state.meta.isValid
-
-										return (
-											<Field data-invalid={isInvalid}>
-												<FieldLabel htmlFor={field.name}>Logo</FieldLabel>
-
-												<LogoUploader
-													value={field.state.value ?? ''}
-													onChange={(next) =>
-														field.handleChange(next === '' ? undefined : next)
-													}
-													onDisplayUrlChange={setLogoDisplayUrl}
-												/>
-
-												{isInvalid && (
-													<FieldError errors={field.state.meta.errors} />
-												)}
-											</Field>
-										)
-									}}
-								/>
+						<CreateProjectContent {...controller} />
 
-								<form.Field
-									name="screenshot"
-									children={(field) => {
-										const isInvalid =
-											field.state.meta.isTouched && !field.state.meta.isValid
-
-										return (
-											<Field data-invalid={isInvalid}>
-												<FieldLabel htmlFor={field.name}>Screenshot</FieldLabel>
-
-												<ScreenshotUploader
-													value={field.state.value ?? ''}
-													onChange={(next) =>
-														field.handleChange(next === '' ? undefined : next)
-													}
-													onDisplayUrlChange={setScreenshotDisplayUrl}
-												/>
-
-												<FieldDescription>
-													Optional landing page capture in 16:9.
-												</FieldDescription>
-
-												{isInvalid && (
-													<FieldError errors={field.state.meta.errors} />
-												)}
-											</Field>
-										)
-									}}
-								/>
-							</div>
-						</section>
-
-						<section className="space-y-4">
-							<SectionHeading title="Categories" />
-
-							<form.Field
-								name="categorySlugs"
-								children={(field) => {
-									const isInvalid =
-										field.state.meta.isTouched && !field.state.meta.isValid
-
-									return (
-										<Field data-invalid={isInvalid}>
-											<FieldLabel htmlFor={field.name}>Categories</FieldLabel>
-											<Suspense fallback={<CategoryComboboxSkeleton />}>
-												<CategoryCombobox
-													id={field.name}
-													value={field.state.value ?? []}
-													onValueChange={(next) => field.handleChange(next)}
-												/>
-											</Suspense>
-
-											{isInvalid && (
-												<FieldError errors={field.state.meta.errors} />
-											)}
-										</Field>
-									)
-								}}
-							/>
-						</section>
+						<CreateProjectMedia {...controller} />
 
-						<section className="space-y-4">
-							<SectionHeading
-								title="Publishing"
-								description="Draft projects stay hidden from the public catalogue."
-							/>
+						<CreateProjectCategories {...controller} />
 
-							<form.Field
-								name="status"
-								children={(field) => {
-									const isInvalid =
-										field.state.meta.isTouched && !field.state.meta.isValid
-
-									return (
-										<Field data-invalid={isInvalid}>
-											<FieldLabel htmlFor={field.name}>Status</FieldLabel>
-
-											<NativeSelect
-												id={field.name}
-												name={field.name}
-												value={field.state.value ?? 'published'}
-												onBlur={field.handleBlur}
-												onChange={(e) =>
-													field.handleChange(
-														e.target.value as 'draft' | 'published'
-													)
-												}
-												aria-invalid={isInvalid}
-												className="w-full"
-											>
-												<NativeSelectOption value="draft">
-													Draft — hidden from catalogue
-												</NativeSelectOption>
-												<NativeSelectOption value="published">
-													Published — visible in catalogue
-												</NativeSelectOption>
-											</NativeSelect>
-
-											<FieldDescription>
-												New projects publish immediately unless saved as draft.
-											</FieldDescription>
-
-											{isInvalid && (
-												<FieldError errors={field.state.meta.errors} />
-											)}
-										</Field>
-									)
-								}}
-							/>
-						</section>
+						<CreateProjectPublishing {...controller} />
 
 						{submitError && (
 							<p role="alert" className="text-sm text-destructive">
@@ -712,28 +265,516 @@ export function CreateProjectForm() {
 					</div>
 				</form>
 
-				<aside className="min-w-0 lg:sticky lg:top-16">
-					<div className="space-y-3">
-						<div className="space-y-1">
-							<h2 className="text-sm font-semibold">Preview</h2>
-							<p className="text-sm text-muted-foreground">
-								How this project will appear in the catalogue.
-							</p>
-						</div>
-
-						<form.Subscribe
-							selector={(state) => state.values}
-							children={(values) => (
-								<ProjectPreviewCard
-									values={values}
-									logoUrl={logoDisplayUrl}
-									screenshotUrl={screenshotDisplayUrl}
+				<CreateProjectPreview {...controller} />
+			</div>
+		</div>
+	)
+}
+
+type CreateProjectFormState = ReturnType<typeof useCreateProjectForm>
+
+function CreateProjectBasics({
+	createProject,
+	form,
+	isSlugCustomized,
+}: Pick<
+	CreateProjectFormState,
+	'createProject' | 'form' | 'isSlugCustomized'
+>) {
+	return (
+		<section className="space-y-4">
+			<SectionHeading
+				title="Basics"
+				description="Identity and links for the project."
+			/>
+
+			<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+				<form.Field
+					name="name"
+					listeners={{
+						onChange: ({ value }) => {
+							if (!isSlugCustomized.current) {
+								form.setFieldValue('slug', slugify(value), {
+									dontUpdateMeta: true,
+								})
+							}
+						},
+					}}
+					children={(field) => {
+						const isInvalid =
+							field.state.meta.isTouched && !field.state.meta.isValid
+
+						return (
+							<Field data-invalid={isInvalid}>
+								<FieldLabel htmlFor={field.name}>Name</FieldLabel>
+
+								<Input
+									id={field.name}
+									name={field.name}
+									value={field.state.value}
+									onBlur={field.handleBlur}
+									onChange={(e) => field.handleChange(e.target.value)}
+									aria-invalid={isInvalid}
+									placeholder="Name Project"
+								/>
+
+								{isInvalid && <FieldError errors={field.state.meta.errors} />}
+							</Field>
+						)
+					}}
+				/>
+
+				<form.Field
+					name="slug"
+					children={(field) => {
+						const isInvalid =
+							field.state.meta.isTouched && !field.state.meta.isValid
+
+						return (
+							<Field data-invalid={isInvalid}>
+								<FieldLabel htmlFor={field.name}>Slug</FieldLabel>
+
+								<Input
+									id={field.name}
+									name={field.name}
+									value={field.state.value}
+									onBlur={field.handleBlur}
+									onChange={(e) => {
+										isSlugCustomized.current = true
+										field.handleChange(e.target.value)
+									}}
+									aria-invalid={isInvalid}
+									placeholder="my-project"
+									className="font-mono"
+								/>
+
+								<FieldDescription>
+									Auto-filled from the name. Edit to customize.
+								</FieldDescription>
+
+								{isInvalid && <FieldError errors={field.state.meta.errors} />}
+							</Field>
+						)
+					}}
+				/>
+			</div>
+
+			<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+				<form.Field
+					name="repositoryUrl"
+					children={(field) => {
+						const isInvalid =
+							field.state.meta.isTouched && !field.state.meta.isValid
+
+						return (
+							<Field data-invalid={isInvalid}>
+								<FieldLabel htmlFor={field.name}>Repository URL</FieldLabel>
+								<InputGroup>
+									<InputGroupAddon className="h-full rounded-l-lg border-r bg-accent pr-1.5">
+										<InputGroupText>https://github.com/</InputGroupText>
+									</InputGroupAddon>
+									<InputGroupInput
+										id={field.name}
+										name={field.name}
+										value={field.state.value}
+										onBlur={field.handleBlur}
+										onChange={(e) => field.handleChange(e.target.value)}
+										aria-invalid={isInvalid}
+										placeholder="owner/repository"
+										className="font-mono"
+									/>
+								</InputGroup>
+
+								<form.Subscribe
+									selector={(state) =>
+										[state.values.repositoryUrl, state.isSubmitting] as const
+									}
+								>
+									{([repositoryUrl, isSubmitting]) => (
+										<GithubMetadataPrefill
+											repositoryUrl={repositoryUrl}
+											disabled={isSubmitting || createProject.isPending}
+											getCurrentValues={() => {
+												return {
+													repositoryUrl: form.getFieldValue('repositoryUrl'),
+													description: form.getFieldValue('description'),
+													websiteUrl: form.getFieldValue('websiteUrl'),
+												}
+											}}
+											onApply={(values) => {
+												if ('description' in values) {
+													form.setFieldValue('description', values.description)
+													void form.validateField('description', 'change')
+												}
+												if ('websiteUrl' in values) {
+													form.setFieldValue('websiteUrl', values.websiteUrl)
+													void form.validateField('websiteUrl', 'change')
+												}
+											}}
+										/>
+									)}
+								</form.Subscribe>
+
+								<FieldDescription>
+									Must be a public, actively maintained repository with at least
+									10 stars.
+								</FieldDescription>
+
+								{isInvalid && <FieldError errors={field.state.meta.errors} />}
+							</Field>
+						)
+					}}
+				/>
+
+				<form.Field
+					name="websiteUrl"
+					children={(field) => {
+						const isInvalid =
+							field.state.meta.isTouched && !field.state.meta.isValid
+
+						return (
+							<Field data-invalid={isInvalid}>
+								<FieldLabel htmlFor={field.name}>Website URL</FieldLabel>
+								<Input
+									id={field.name}
+									name={field.name}
+									value={field.state.value ?? ''}
+									onBlur={field.handleBlur}
+									onChange={(e) => {
+										const next = e.target.value
+										field.handleChange(next === '' ? undefined : next)
+									}}
+									aria-invalid={isInvalid}
+									placeholder="Website URL"
 								/>
-							)}
+
+								{isInvalid && <FieldError errors={field.state.meta.errors} />}
+							</Field>
+						)
+					}}
+				/>
+			</div>
+		</section>
+	)
+}
+
+function CreateProjectDescription({
+	form,
+}: Pick<CreateProjectFormState, 'form'>) {
+	return (
+		<section className="space-y-4">
+			<SectionHeading
+				title="Description"
+				description="Short copy shown in the catalogue listing."
+			/>
+
+			<form.Field
+				name="tagline"
+				children={(field) => {
+					const isInvalid =
+						field.state.meta.isTouched && !field.state.meta.isValid
+
+					return (
+						<Field data-invalid={isInvalid}>
+							<div className="flex items-baseline justify-between gap-2">
+								<FieldLabel htmlFor={field.name}>Tagline</FieldLabel>
+								<span className="shrink-0 text-xs text-muted-foreground tabular-nums">
+									{(field.state.value ?? '').length}/{TAGLINE_MAX_LENGTH}
+								</span>
+							</div>
+
+							<Input
+								id={field.name}
+								name={field.name}
+								value={field.state.value ?? ''}
+								onBlur={field.handleBlur}
+								onChange={(e) => field.handleChange(e.target.value)}
+								aria-invalid={isInvalid}
+								placeholder="Tagline"
+							/>
+
+							{isInvalid && <FieldError errors={field.state.meta.errors} />}
+						</Field>
+					)
+				}}
+			/>
+
+			<form.Field
+				name="description"
+				children={(field) => {
+					const isInvalid =
+						field.state.meta.isTouched && !field.state.meta.isValid
+
+					return (
+						<Field data-invalid={isInvalid}>
+							<div className="flex items-baseline justify-between gap-2">
+								<FieldLabel htmlFor={field.name}>Description</FieldLabel>
+								<span className="shrink-0 text-xs text-muted-foreground tabular-nums">
+									{(field.state.value ?? '').length}/{DESCRIPTION_MAX_LENGTH}
+								</span>
+							</div>
+
+							<Textarea
+								id={field.name}
+								name={field.name}
+								value={field.state.value ?? ''}
+								onBlur={field.handleBlur}
+								onChange={(e) => field.handleChange(e.target.value)}
+								aria-invalid={isInvalid}
+								placeholder="Short description"
+							/>
+
+							{isInvalid && <FieldError errors={field.state.meta.errors} />}
+						</Field>
+					)
+				}}
+			/>
+		</section>
+	)
+}
+
+function CreateProjectContent({
+	createProject,
+	form,
+	editorRef,
+}: Pick<CreateProjectFormState, 'createProject' | 'form' | 'editorRef'>) {
+	return (
+		<section className="space-y-4">
+			<SectionHeading
+				title="Content"
+				description="Type @ to mention a listed project, or find Project mention in the / menu."
+			/>
+
+			<form.Subscribe
+				selector={(state) =>
+					[state.values.repositoryUrl, state.isSubmitting] as const
+				}
+			>
+				{([repositoryUrl, isSubmitting]) => (
+					<ClientOnly>
+						<GithubReadmeImport
+							repositoryUrl={repositoryUrl}
+							disabled={isSubmitting || createProject.isPending}
+							getRepositoryUrl={() => form.getFieldValue('repositoryUrl')}
+							getEditor={() => editorRef.current}
 						/>
-					</div>
-				</aside>
+					</ClientOnly>
+				)}
+			</form.Subscribe>
+
+			<form.Field
+				name="content"
+				children={(field) => {
+					const isInvalid =
+						field.state.meta.isTouched && !field.state.meta.isValid
+
+					return (
+						<Field data-invalid={isInvalid}>
+							<ClientOnly>
+								<BlockNoteEditor
+									ref={editorRef}
+									value={field.state.value ?? ''}
+									onBlur={field.handleBlur}
+									onChange={(e) => field.handleChange(e)}
+									className="rounded-lg border border-input bg-transparent px-2.5 py-2 transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
+								/>
+							</ClientOnly>
+
+							{isInvalid && <FieldError errors={field.state.meta.errors} />}
+						</Field>
+					)
+				}}
+			/>
+		</section>
+	)
+}
+
+function CreateProjectMedia({
+	setLogoDisplayUrl,
+	setScreenshotDisplayUrl,
+	form,
+}: Pick<
+	CreateProjectFormState,
+	'setLogoDisplayUrl' | 'setScreenshotDisplayUrl' | 'form'
+>) {
+	return (
+		<section className="@container/media space-y-4">
+			<SectionHeading
+				title="Media"
+				description="Logo is required to publish. Screenshots are cropped to 16:9."
+			/>
+
+			<div className="grid grid-cols-1 items-start gap-4 @lg/media:grid-cols-[14rem_minmax(0,1fr)]">
+				<form.Field
+					name="logo"
+					children={(field) => {
+						const isInvalid =
+							field.state.meta.isTouched && !field.state.meta.isValid
+
+						return (
+							<Field data-invalid={isInvalid}>
+								<FieldLabel htmlFor={field.name}>Logo</FieldLabel>
+
+								<LogoUploader
+									value={field.state.value ?? ''}
+									onChange={(next) =>
+										field.handleChange(next === '' ? undefined : next)
+									}
+									onDisplayUrlChange={setLogoDisplayUrl}
+								/>
+
+								{isInvalid && <FieldError errors={field.state.meta.errors} />}
+							</Field>
+						)
+					}}
+				/>
+
+				<form.Field
+					name="screenshot"
+					children={(field) => {
+						const isInvalid =
+							field.state.meta.isTouched && !field.state.meta.isValid
+
+						return (
+							<Field data-invalid={isInvalid}>
+								<FieldLabel htmlFor={field.name}>Screenshot</FieldLabel>
+
+								<ScreenshotUploader
+									value={field.state.value ?? ''}
+									onChange={(next) =>
+										field.handleChange(next === '' ? undefined : next)
+									}
+									onDisplayUrlChange={setScreenshotDisplayUrl}
+								/>
+
+								<FieldDescription>
+									Optional landing page capture in 16:9.
+								</FieldDescription>
+
+								{isInvalid && <FieldError errors={field.state.meta.errors} />}
+							</Field>
+						)
+					}}
+				/>
 			</div>
-		</div>
+		</section>
+	)
+}
+
+function CreateProjectCategories({
+	form,
+}: Pick<CreateProjectFormState, 'form'>) {
+	return (
+		<section className="space-y-4">
+			<SectionHeading title="Categories" />
+
+			<form.Field
+				name="categorySlugs"
+				children={(field) => {
+					const isInvalid =
+						field.state.meta.isTouched && !field.state.meta.isValid
+
+					return (
+						<Field data-invalid={isInvalid}>
+							<FieldLabel htmlFor={field.name}>Categories</FieldLabel>
+							<Suspense fallback={<CategoryComboboxSkeleton />}>
+								<CategoryCombobox
+									id={field.name}
+									value={field.state.value ?? []}
+									onValueChange={(next) => field.handleChange(next)}
+								/>
+							</Suspense>
+
+							{isInvalid && <FieldError errors={field.state.meta.errors} />}
+						</Field>
+					)
+				}}
+			/>
+		</section>
+	)
+}
+
+function CreateProjectPublishing({
+	form,
+}: Pick<CreateProjectFormState, 'form'>) {
+	return (
+		<section className="space-y-4">
+			<SectionHeading
+				title="Publishing"
+				description="Draft projects stay hidden from the public catalogue."
+			/>
+
+			<form.Field
+				name="status"
+				children={(field) => {
+					const isInvalid =
+						field.state.meta.isTouched && !field.state.meta.isValid
+
+					return (
+						<Field data-invalid={isInvalid}>
+							<FieldLabel htmlFor={field.name}>Status</FieldLabel>
+
+							<NativeSelect
+								id={field.name}
+								name={field.name}
+								value={field.state.value ?? 'published'}
+								onBlur={field.handleBlur}
+								onChange={(e) =>
+									field.handleChange(e.target.value as 'draft' | 'published')
+								}
+								aria-invalid={isInvalid}
+								className="w-full"
+							>
+								<NativeSelectOption value="draft">
+									Draft — hidden from catalogue
+								</NativeSelectOption>
+								<NativeSelectOption value="published">
+									Published — visible in catalogue
+								</NativeSelectOption>
+							</NativeSelect>
+
+							<FieldDescription>
+								New projects publish immediately unless saved as draft.
+							</FieldDescription>
+
+							{isInvalid && <FieldError errors={field.state.meta.errors} />}
+						</Field>
+					)
+				}}
+			/>
+		</section>
+	)
+}
+
+function CreateProjectPreview({
+	logoDisplayUrl,
+	screenshotDisplayUrl,
+	form,
+}: Pick<
+	CreateProjectFormState,
+	'logoDisplayUrl' | 'screenshotDisplayUrl' | 'form'
+>) {
+	return (
+		<aside className="min-w-0 lg:sticky lg:top-16">
+			<div className="space-y-3">
+				<div className="space-y-1">
+					<h2 className="text-sm font-semibold">Preview</h2>
+					<p className="text-sm text-muted-foreground">
+						How this project will appear in the catalogue.
+					</p>
+				</div>
+
+				<form.Subscribe
+					selector={(state) => state.values}
+					children={(values) => (
+						<ProjectPreviewCard
+							values={values}
+							logoUrl={logoDisplayUrl}
+							screenshotUrl={screenshotDisplayUrl}
+						/>
+					)}
+				/>
+			</div>
+		</aside>
 	)
 }
diff --git a/apps/web/src/features/admin-projects/components/edit-project-form.tsx b/apps/web/src/features/admin-projects/components/edit-project-form.tsx
index c606fa3..fedf596 100644
--- a/apps/web/src/features/admin-projects/components/edit-project-form.tsx
+++ b/apps/web/src/features/admin-projects/components/edit-project-form.tsx
@@ -103,7 +103,7 @@ function toRepositoryShortForm(canonicalUrl: string): string {
 	return canonicalUrl.replace(/^https?:\/\/(www\.)?github\.com\//i, '')
 }
 
-export function EditProjectForm({ project }: { project: AdminProject }) {
+function useEditProjectForm(project: AdminProject) {
 	const updateProject = useAdminProjectUpdate()
 	const [submitError, setSubmitError] = useState<string | null>(null)
 	// Form image fields hold tmp keys only (undefined = keep,
@@ -220,6 +220,24 @@ export function EditProjectForm({ project }: { project: AdminProject }) {
 	// the last keystroke.
 	const editorRef = useRef<BlockNoteEditorHandle | null>(null)
 
+	return {
+		project,
+		updateProject,
+		submitError,
+		logoDisplayUrl,
+		setLogoDisplayUrl,
+		screenshotDisplayUrl,
+		setScreenshotDisplayUrl,
+		form,
+		isSlugCustomized,
+		editorRef,
+	}
+}
+
+export function EditProjectForm({ project }: { project: AdminProject }) {
+	const controller = useEditProjectForm(project)
+	const { submitError, form, editorRef } = controller
+
 	return (
 		<div className="grid grid-cols-1 items-start gap-6 lg:grid-cols-[minmax(0,1fr)_360px]">
 			<form
@@ -232,540 +250,17 @@ export function EditProjectForm({ project }: { project: AdminProject }) {
 				}}
 			>
 				<div className="space-y-8">
-					<section className="space-y-4">
-						<SectionHeading
-							title="Basics"
-							description="Identity and links for the project."
-						/>
-
-						<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-							<form.Field
-								name="name"
-								listeners={{
-									onChange: ({ value }) => {
-										if (!isSlugCustomized.current) {
-											form.setFieldValue('slug', slugify(value ?? ''), {
-												dontUpdateMeta: true,
-											})
-										}
-									},
-								}}
-								children={(field) => {
-									const isInvalid =
-										field.state.meta.isTouched && !field.state.meta.isValid
-
-									return (
-										<Field data-invalid={isInvalid}>
-											<FieldLabel htmlFor={field.name}>Name</FieldLabel>
-
-											<Input
-												id={field.name}
-												name={field.name}
-												value={field.state.value ?? ''}
-												onBlur={field.handleBlur}
-												onChange={(e) => field.handleChange(e.target.value)}
-												aria-invalid={isInvalid}
-												placeholder="Name Project"
-											/>
-
-											{isInvalid && (
-												<FieldError errors={field.state.meta.errors} />
-											)}
-										</Field>
-									)
-								}}
-							/>
-
-							<form.Field
-								name="slug"
-								children={(field) => {
-									const isInvalid =
-										field.state.meta.isTouched && !field.state.meta.isValid
-
-									return (
-										<Field data-invalid={isInvalid}>
-											<FieldLabel htmlFor={field.name}>Slug</FieldLabel>
-
-											<Input
-												id={field.name}
-												name={field.name}
-												value={field.state.value ?? ''}
-												onBlur={field.handleBlur}
-												onChange={(e) => {
-													isSlugCustomized.current = true
-													field.handleChange(e.target.value)
-												}}
-												aria-invalid={isInvalid}
-												placeholder="my-project"
-												className="font-mono"
-											/>
-
-											<FieldDescription>
-												Auto-filled from the name. Edit to customize.
-											</FieldDescription>
-
-											{isInvalid && (
-												<FieldError errors={field.state.meta.errors} />
-											)}
-										</Field>
-									)
-								}}
-							/>
-						</div>
-
-						<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-							<form.Field
-								name="repositoryUrl"
-								children={(field) => {
-									const isInvalid =
-										field.state.meta.isTouched && !field.state.meta.isValid
-
-									return (
-										<Field data-invalid={isInvalid}>
-											<FieldLabel htmlFor={field.name}>
-												Repository URL
-											</FieldLabel>
-											<InputGroup>
-												<InputGroupAddon className="h-full rounded-l-lg border-r bg-accent pr-1.5">
-													<InputGroupText>https://github.com/</InputGroupText>
-												</InputGroupAddon>
-												<InputGroupInput
-													id={field.name}
-													name={field.name}
-													value={field.state.value ?? ''}
-													onBlur={field.handleBlur}
-													onChange={(e) => field.handleChange(e.target.value)}
-													aria-invalid={isInvalid}
-													placeholder="owner/repository"
-													className="font-mono"
-												/>
-											</InputGroup>
-
-											<form.Subscribe
-												selector={(state) =>
-													[
-														state.values.repositoryUrl,
-														state.isSubmitting,
-													] as const
-												}
-											>
-												{([repositoryUrl, isSubmitting]) => (
-													<GithubMetadataPrefill
-														repositoryUrl={repositoryUrl ?? ''}
-														disabled={isSubmitting || updateProject.isPending}
-														getCurrentValues={() => {
-															return {
-																repositoryUrl:
-																	form.getFieldValue('repositoryUrl'),
-																description: form.getFieldValue('description'),
-																websiteUrl: form.getFieldValue('websiteUrl'),
-															}
-														}}
-														onApply={(values) => {
-															if ('description' in values) {
-																form.setFieldValue(
-																	'description',
-																	values.description
-																)
-																void form.validateField('description', 'change')
-															}
-															if ('websiteUrl' in values) {
-																form.setFieldValue(
-																	'websiteUrl',
-																	values.websiteUrl
-																)
-																void form.validateField('websiteUrl', 'change')
-															}
-														}}
-													/>
-												)}
-											</form.Subscribe>
-
-											<form.Subscribe selector={(state) => state.isSubmitting}>
-												{(isSubmitting) => (
-													<GithubStatisticsRefresh
-														projectId={project.id}
-														repositoryUrl={project.repositoryUrl}
-														disabled={isSubmitting || updateProject.isPending}
-													/>
-												)}
-											</form.Subscribe>
-
-											<FieldDescription>
-												Must be a public, actively maintained repository with at
-												least 10 stars.
-											</FieldDescription>
-
-											{isInvalid && (
-												<FieldError errors={field.state.meta.errors} />
-											)}
-										</Field>
-									)
-								}}
-							/>
-
-							<form.Field
-								name="websiteUrl"
-								children={(field) => {
-									const isInvalid =
-										field.state.meta.isTouched && !field.state.meta.isValid
-
-									return (
-										<Field data-invalid={isInvalid}>
-											<FieldLabel htmlFor={field.name}>Website URL</FieldLabel>
-											<Input
-												id={field.name}
-												name={field.name}
-												value={field.state.value ?? ''}
-												onBlur={field.handleBlur}
-												onChange={(e) => {
-													const next = e.target.value
-													field.handleChange(next === '' ? null : next)
-												}}
-												aria-invalid={isInvalid}
-												placeholder="Website URL"
-											/>
-
-											{isInvalid && (
-												<FieldError errors={field.state.meta.errors} />
-											)}
-										</Field>
-									)
-								}}
-							/>
-						</div>
-					</section>
+					<EditProjectBasics {...controller} />
 
-					<section className="space-y-4">
-						<SectionHeading
-							title="Description"
-							description="Short copy shown in the catalogue listing."
-						/>
-
-						<form.Field
-							name="tagline"
-							children={(field) => {
-								const isInvalid =
-									field.state.meta.isTouched && !field.state.meta.isValid
-
-								return (
-									<Field data-invalid={isInvalid}>
-										<div className="flex items-baseline justify-between gap-2">
-											<FieldLabel htmlFor={field.name}>Tagline</FieldLabel>
-											<span className="shrink-0 text-xs text-muted-foreground tabular-nums">
-												{(field.state.value ?? '').length}/{TAGLINE_MAX_LENGTH}
-											</span>
-										</div>
-
-										<Input
-											id={field.name}
-											name={field.name}
-											value={field.state.value ?? ''}
-											onBlur={field.handleBlur}
-											onChange={(e) => field.handleChange(e.target.value)}
-											aria-invalid={isInvalid}
-											placeholder="Tagline"
-										/>
-
-										{isInvalid && (
-											<FieldError errors={field.state.meta.errors} />
-										)}
-									</Field>
-								)
-							}}
-						/>
+					<EditProjectDescription {...controller} />
 
-						<form.Field
-							name="description"
-							children={(field) => {
-								const isInvalid =
-									field.state.meta.isTouched && !field.state.meta.isValid
-
-								return (
-									<Field data-invalid={isInvalid}>
-										<div className="flex items-baseline justify-between gap-2">
-											<FieldLabel htmlFor={field.name}>Description</FieldLabel>
-											<span className="shrink-0 text-xs text-muted-foreground tabular-nums">
-												{(field.state.value ?? '').length}/
-												{DESCRIPTION_MAX_LENGTH}
-											</span>
-										</div>
-
-										<Textarea
-											id={field.name}
-											name={field.name}
-											value={field.state.value ?? ''}
-											onBlur={field.handleBlur}
-											onChange={(e) => field.handleChange(e.target.value)}
-											aria-invalid={isInvalid}
-											placeholder="Short description"
-										/>
+					<EditProjectContent {...controller} />
 
-										{isInvalid && (
-											<FieldError errors={field.state.meta.errors} />
-										)}
-									</Field>
-								)
-							}}
-						/>
-					</section>
+					<EditProjectMedia {...controller} />
 
-					<section className="space-y-4">
-						<SectionHeading
-							title="Content"
-							description="Type @ to mention a listed project, or find Project mention in the / menu."
-						/>
+					<EditProjectCategories {...controller} />
 
-						<form.Subscribe
-							selector={(state) =>
-								[state.values.repositoryUrl, state.isSubmitting] as const
-							}
-						>
-							{([repositoryUrl, isSubmitting]) => (
-								<ClientOnly>
-									<GithubReadmeImport
-										repositoryUrl={repositoryUrl ?? ''}
-										disabled={isSubmitting || updateProject.isPending}
-										getRepositoryUrl={() =>
-											form.getFieldValue('repositoryUrl') ?? ''
-										}
-										getEditor={() => editorRef.current}
-									/>
-								</ClientOnly>
-							)}
-						</form.Subscribe>
-
-						<form.Field
-							name="content"
-							children={(field) => {
-								const isInvalid =
-									field.state.meta.isTouched && !field.state.meta.isValid
-
-								return (
-									<Field data-invalid={isInvalid}>
-										<ClientOnly>
-											<BlockNoteEditor
-												ref={editorRef}
-												value={field.state.value ?? undefined}
-												onBlur={field.handleBlur}
-												onChange={(next) =>
-													field.handleChange(next.trim() === '' ? null : next)
-												}
-												className="rounded-lg border border-input bg-transparent px-2.5 py-2 transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
-											/>
-										</ClientOnly>
-
-										{isInvalid && (
-											<FieldError errors={field.state.meta.errors} />
-										)}
-									</Field>
-								)
-							}}
-						/>
-					</section>
-
-					<section className="@container/media space-y-4">
-						<SectionHeading
-							title="Media"
-							description="Logo is required to publish. Screenshots are cropped to 16:9."
-						/>
-
-						<div className="grid grid-cols-1 items-start gap-4 @lg/media:grid-cols-[14rem_minmax(0,1fr)]">
-							<form.Field
-								name="logo"
-								children={(field) => {
-									const isInvalid =
-										field.state.meta.isTouched && !field.state.meta.isValid
-
-									return (
-										<Field data-invalid={isInvalid}>
-											<FieldLabel htmlFor={field.name}>Logo</FieldLabel>
-
-											<LogoUploader
-												value={field.state.value ?? ''}
-												existingUrl={
-													field.state.value === undefined
-														? logoDisplayUrl
-														: null
-												}
-												onRemoveExisting={() => {
-													field.handleChange(null)
-													setLogoDisplayUrl(null)
-												}}
-												onChange={(next) => {
-													if (next === '') {
-														// New upload removed — revert to keeping the
-														// current logo.
-														field.handleChange(undefined)
-														setLogoDisplayUrl(resolveFileUrl(project.logo))
-														return
-													}
-													field.handleChange(next)
-												}}
-												onDisplayUrlChange={(url) => {
-													// The uploader reports null when a new upload is
-													// removed — restore the current logo instead of
-													// blanking the preview.
-													setLogoDisplayUrl(url ?? resolveFileUrl(project.logo))
-												}}
-											/>
-
-											<FieldDescription>
-												{field.state.value === null
-													? 'Logo will be removed on save. Add a logo to publish.'
-													: 'Current logo is kept unless you replace or remove it.'}
-											</FieldDescription>
-
-											{isInvalid && (
-												<FieldError errors={field.state.meta.errors} />
-											)}
-										</Field>
-									)
-								}}
-							/>
-
-							<form.Field
-								name="screenshot"
-								children={(field) => {
-									const isInvalid =
-										field.state.meta.isTouched && !field.state.meta.isValid
-
-									return (
-										<Field data-invalid={isInvalid}>
-											<FieldLabel htmlFor={field.name}>Screenshot</FieldLabel>
-
-											<ScreenshotUploader
-												value={field.state.value ?? ''}
-												existingUrl={
-													field.state.value === undefined
-														? screenshotDisplayUrl
-														: null
-												}
-												onRemoveExisting={() => {
-													field.handleChange(null)
-													setScreenshotDisplayUrl(null)
-												}}
-												onChange={(next) => {
-													if (next === '') {
-														// New upload removed — revert to keeping the
-														// current screenshot.
-														field.handleChange(undefined)
-														setScreenshotDisplayUrl(
-															resolveFileUrl(project.screenshot)
-														)
-														return
-													}
-													field.handleChange(next)
-												}}
-												onDisplayUrlChange={(url) => {
-													// Null here means a new upload was removed —
-													// restore the current screenshot.
-													setScreenshotDisplayUrl(
-														url ?? resolveFileUrl(project.screenshot)
-													)
-												}}
-											/>
-
-											<FieldDescription>
-												{field.state.value === null
-													? 'Screenshot will be removed on save. Upload a new one to replace it.'
-													: 'Optional landing page capture in 16:9.'}
-											</FieldDescription>
-
-											{isInvalid && (
-												<FieldError errors={field.state.meta.errors} />
-											)}
-										</Field>
-									)
-								}}
-							/>
-						</div>
-					</section>
-
-					<section className="space-y-4">
-						<SectionHeading title="Categories" />
-
-						<form.Field
-							name="categorySlugs"
-							children={(field) => {
-								const isInvalid =
-									field.state.meta.isTouched && !field.state.meta.isValid
-
-								return (
-									<Field data-invalid={isInvalid}>
-										<FieldLabel htmlFor={field.name}>Categories</FieldLabel>
-										<Suspense fallback={<CategoryComboboxSkeleton />}>
-											<CategoryCombobox
-												id={field.name}
-												value={field.state.value ?? []}
-												onValueChange={(next) => field.handleChange(next)}
-											/>
-										</Suspense>
-
-										{isInvalid && (
-											<FieldError errors={field.state.meta.errors} />
-										)}
-									</Field>
-								)
-							}}
-						/>
-					</section>
-
-					<section className="space-y-4">
-						<SectionHeading
-							title="Publishing"
-							description="Draft projects stay hidden from the public catalogue."
-						/>
-
-						<p className="text-sm">
-							Current status: <strong>{project.status}</strong>
-						</p>
-						{project.submitter && (
-							<p className="text-sm text-muted-foreground">
-								Submitted by {project.submitter.name} ({project.submitter.email}
-								)
-							</p>
-						)}
-						<form.Field
-							name="rejectionReason"
-							children={(field) => {
-								const isInvalid =
-									field.state.meta.isTouched && !field.state.meta.isValid
-								return (
-									<Field data-invalid={isInvalid}>
-										<FieldLabel htmlFor="rejectionReason">
-											Rejection reason
-										</FieldLabel>
-										<Textarea
-											id="rejectionReason"
-											value={field.state.value ?? ''}
-											maxLength={1000}
-											aria-invalid={isInvalid}
-											aria-describedby={
-												isInvalid
-													? 'rejectionReason-description rejectionReason-error'
-													: 'rejectionReason-description'
-											}
-											onBlur={field.handleBlur}
-											onChange={(event) =>
-												field.handleChange(event.target.value)
-											}
-										/>
-										<FieldDescription id="rejectionReason-description">
-											Required when rejecting a project, up to 1000 characters.
-											Restore rejected projects to draft to reopen review.
-										</FieldDescription>
-										{isInvalid && (
-											<FieldError
-												id="rejectionReason-error"
-												errors={field.state.meta.errors}
-											/>
-										)}
-									</Field>
-								)
-							}}
-						/>
-					</section>
+					<EditProjectPublishing {...controller} />
 
 					{submitError && (
 						<p role="alert" className="text-sm text-destructive">
@@ -794,27 +289,594 @@ export function EditProjectForm({ project }: { project: AdminProject }) {
 				</div>
 			</form>
 
-			<aside className="min-w-0 lg:sticky lg:top-16">
-				<div className="space-y-3">
-					<div className="space-y-1">
-						<h2 className="text-sm font-semibold">Preview</h2>
-						<p className="text-sm text-muted-foreground">
-							How this project will appear in the catalogue.
-						</p>
-					</div>
-
-					<form.Subscribe
-						selector={(state) => state.values}
-						children={(values) => (
-							<ProjectPreviewCard
-								values={values}
-								logoUrl={logoDisplayUrl}
-								screenshotUrl={screenshotDisplayUrl}
+			<EditProjectPreview {...controller} />
+		</div>
+	)
+}
+
+type EditProjectFormState = ReturnType<typeof useEditProjectForm>
+
+function EditProjectBasics({
+	project,
+	updateProject,
+	form,
+	isSlugCustomized,
+}: Pick<
+	EditProjectFormState,
+	'project' | 'updateProject' | 'form' | 'isSlugCustomized'
+>) {
+	return (
+		<section className="space-y-4">
+			<SectionHeading
+				title="Basics"
+				description="Identity and links for the project."
+			/>
+
+			<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+				<form.Field
+					name="name"
+					listeners={{
+						onChange: ({ value }) => {
+							if (!isSlugCustomized.current) {
+								form.setFieldValue('slug', slugify(value ?? ''), {
+									dontUpdateMeta: true,
+								})
+							}
+						},
+					}}
+					children={(field) => {
+						const isInvalid =
+							field.state.meta.isTouched && !field.state.meta.isValid
+
+						return (
+							<Field data-invalid={isInvalid}>
+								<FieldLabel htmlFor={field.name}>Name</FieldLabel>
+
+								<Input
+									id={field.name}
+									name={field.name}
+									value={field.state.value ?? ''}
+									onBlur={field.handleBlur}
+									onChange={(e) => field.handleChange(e.target.value)}
+									aria-invalid={isInvalid}
+									placeholder="Name Project"
+								/>
+
+								{isInvalid && <FieldError errors={field.state.meta.errors} />}
+							</Field>
+						)
+					}}
+				/>
+
+				<form.Field
+					name="slug"
+					children={(field) => {
+						const isInvalid =
+							field.state.meta.isTouched && !field.state.meta.isValid
+
+						return (
+							<Field data-invalid={isInvalid}>
+								<FieldLabel htmlFor={field.name}>Slug</FieldLabel>
+
+								<Input
+									id={field.name}
+									name={field.name}
+									value={field.state.value ?? ''}
+									onBlur={field.handleBlur}
+									onChange={(e) => {
+										isSlugCustomized.current = true
+										field.handleChange(e.target.value)
+									}}
+									aria-invalid={isInvalid}
+									placeholder="my-project"
+									className="font-mono"
+								/>
+
+								<FieldDescription>
+									Auto-filled from the name. Edit to customize.
+								</FieldDescription>
+
+								{isInvalid && <FieldError errors={field.state.meta.errors} />}
+							</Field>
+						)
+					}}
+				/>
+			</div>
+
+			<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+				<form.Field
+					name="repositoryUrl"
+					children={(field) => {
+						const isInvalid =
+							field.state.meta.isTouched && !field.state.meta.isValid
+
+						return (
+							<Field data-invalid={isInvalid}>
+								<FieldLabel htmlFor={field.name}>Repository URL</FieldLabel>
+								<InputGroup>
+									<InputGroupAddon className="h-full rounded-l-lg border-r bg-accent pr-1.5">
+										<InputGroupText>https://github.com/</InputGroupText>
+									</InputGroupAddon>
+									<InputGroupInput
+										id={field.name}
+										name={field.name}
+										value={field.state.value ?? ''}
+										onBlur={field.handleBlur}
+										onChange={(e) => field.handleChange(e.target.value)}
+										aria-invalid={isInvalid}
+										placeholder="owner/repository"
+										className="font-mono"
+									/>
+								</InputGroup>
+
+								<form.Subscribe
+									selector={(state) =>
+										[state.values.repositoryUrl, state.isSubmitting] as const
+									}
+								>
+									{([repositoryUrl, isSubmitting]) => (
+										<GithubMetadataPrefill
+											repositoryUrl={repositoryUrl ?? ''}
+											disabled={isSubmitting || updateProject.isPending}
+											getCurrentValues={() => {
+												return {
+													repositoryUrl: form.getFieldValue('repositoryUrl'),
+													description: form.getFieldValue('description'),
+													websiteUrl: form.getFieldValue('websiteUrl'),
+												}
+											}}
+											onApply={(values) => {
+												if ('description' in values) {
+													form.setFieldValue('description', values.description)
+													void form.validateField('description', 'change')
+												}
+												if ('websiteUrl' in values) {
+													form.setFieldValue('websiteUrl', values.websiteUrl)
+													void form.validateField('websiteUrl', 'change')
+												}
+											}}
+										/>
+									)}
+								</form.Subscribe>
+
+								<form.Subscribe selector={(state) => state.isSubmitting}>
+									{(isSubmitting) => (
+										<GithubStatisticsRefresh
+											projectId={project.id}
+											repositoryUrl={project.repositoryUrl}
+											disabled={isSubmitting || updateProject.isPending}
+										/>
+									)}
+								</form.Subscribe>
+
+								<FieldDescription>
+									Must be a public, actively maintained repository with at least
+									10 stars.
+								</FieldDescription>
+
+								{isInvalid && <FieldError errors={field.state.meta.errors} />}
+							</Field>
+						)
+					}}
+				/>
+
+				<form.Field
+					name="websiteUrl"
+					children={(field) => {
+						const isInvalid =
+							field.state.meta.isTouched && !field.state.meta.isValid
+
+						return (
+							<Field data-invalid={isInvalid}>
+								<FieldLabel htmlFor={field.name}>Website URL</FieldLabel>
+								<Input
+									id={field.name}
+									name={field.name}
+									value={field.state.value ?? ''}
+									onBlur={field.handleBlur}
+									onChange={(e) => {
+										const next = e.target.value
+										field.handleChange(next === '' ? null : next)
+									}}
+									aria-invalid={isInvalid}
+									placeholder="Website URL"
+								/>
+
+								{isInvalid && <FieldError errors={field.state.meta.errors} />}
+							</Field>
+						)
+					}}
+				/>
+			</div>
+		</section>
+	)
+}
+
+function EditProjectDescription({ form }: Pick<EditProjectFormState, 'form'>) {
+	return (
+		<section className="space-y-4">
+			<SectionHeading
+				title="Description"
+				description="Short copy shown in the catalogue listing."
+			/>
+
+			<form.Field
+				name="tagline"
+				children={(field) => {
+					const isInvalid =
+						field.state.meta.isTouched && !field.state.meta.isValid
+
+					return (
+						<Field data-invalid={isInvalid}>
+							<div className="flex items-baseline justify-between gap-2">
+								<FieldLabel htmlFor={field.name}>Tagline</FieldLabel>
+								<span className="shrink-0 text-xs text-muted-foreground tabular-nums">
+									{(field.state.value ?? '').length}/{TAGLINE_MAX_LENGTH}
+								</span>
+							</div>
+
+							<Input
+								id={field.name}
+								name={field.name}
+								value={field.state.value ?? ''}
+								onBlur={field.handleBlur}
+								onChange={(e) => field.handleChange(e.target.value)}
+								aria-invalid={isInvalid}
+								placeholder="Tagline"
 							/>
-						)}
-					/>
+
+							{isInvalid && <FieldError errors={field.state.meta.errors} />}
+						</Field>
+					)
+				}}
+			/>
+
+			<form.Field
+				name="description"
+				children={(field) => {
+					const isInvalid =
+						field.state.meta.isTouched && !field.state.meta.isValid
+
+					return (
+						<Field data-invalid={isInvalid}>
+							<div className="flex items-baseline justify-between gap-2">
+								<FieldLabel htmlFor={field.name}>Description</FieldLabel>
+								<span className="shrink-0 text-xs text-muted-foreground tabular-nums">
+									{(field.state.value ?? '').length}/{DESCRIPTION_MAX_LENGTH}
+								</span>
+							</div>
+
+							<Textarea
+								id={field.name}
+								name={field.name}
+								value={field.state.value ?? ''}
+								onBlur={field.handleBlur}
+								onChange={(e) => field.handleChange(e.target.value)}
+								aria-invalid={isInvalid}
+								placeholder="Short description"
+							/>
+
+							{isInvalid && <FieldError errors={field.state.meta.errors} />}
+						</Field>
+					)
+				}}
+			/>
+		</section>
+	)
+}
+
+function EditProjectContent({
+	updateProject,
+	form,
+	editorRef,
+}: Pick<
+	EditProjectFormState,
+	'project' | 'updateProject' | 'form' | 'editorRef'
+>) {
+	return (
+		<section className="space-y-4">
+			<SectionHeading
+				title="Content"
+				description="Type @ to mention a listed project, or find Project mention in the / menu."
+			/>
+
+			<form.Subscribe
+				selector={(state) =>
+					[state.values.repositoryUrl, state.isSubmitting] as const
+				}
+			>
+				{([repositoryUrl, isSubmitting]) => (
+					<ClientOnly>
+						<GithubReadmeImport
+							repositoryUrl={repositoryUrl ?? ''}
+							disabled={isSubmitting || updateProject.isPending}
+							getRepositoryUrl={() => form.getFieldValue('repositoryUrl') ?? ''}
+							getEditor={() => editorRef.current}
+						/>
+					</ClientOnly>
+				)}
+			</form.Subscribe>
+
+			<form.Field
+				name="content"
+				children={(field) => {
+					const isInvalid =
+						field.state.meta.isTouched && !field.state.meta.isValid
+
+					return (
+						<Field data-invalid={isInvalid}>
+							<ClientOnly>
+								<BlockNoteEditor
+									ref={editorRef}
+									value={field.state.value ?? undefined}
+									onBlur={field.handleBlur}
+									onChange={(next) =>
+										field.handleChange(next.trim() === '' ? null : next)
+									}
+									className="rounded-lg border border-input bg-transparent px-2.5 py-2 transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
+								/>
+							</ClientOnly>
+
+							{isInvalid && <FieldError errors={field.state.meta.errors} />}
+						</Field>
+					)
+				}}
+			/>
+		</section>
+	)
+}
+
+function EditProjectMedia({
+	project,
+	logoDisplayUrl,
+	setLogoDisplayUrl,
+	screenshotDisplayUrl,
+	setScreenshotDisplayUrl,
+	form,
+}: Pick<
+	EditProjectFormState,
+	| 'project'
+	| 'logoDisplayUrl'
+	| 'setLogoDisplayUrl'
+	| 'screenshotDisplayUrl'
+	| 'setScreenshotDisplayUrl'
+	| 'form'
+>) {
+	return (
+		<section className="@container/media space-y-4">
+			<SectionHeading
+				title="Media"
+				description="Logo is required to publish. Screenshots are cropped to 16:9."
+			/>
+
+			<div className="grid grid-cols-1 items-start gap-4 @lg/media:grid-cols-[14rem_minmax(0,1fr)]">
+				<form.Field
+					name="logo"
+					children={(field) => {
+						const isInvalid =
+							field.state.meta.isTouched && !field.state.meta.isValid
+
+						return (
+							<Field data-invalid={isInvalid}>
+								<FieldLabel htmlFor={field.name}>Logo</FieldLabel>
+
+								<LogoUploader
+									value={field.state.value ?? ''}
+									existingUrl={
+										field.state.value === undefined ? logoDisplayUrl : null
+									}
+									onRemoveExisting={() => {
+										field.handleChange(null)
+										setLogoDisplayUrl(null)
+									}}
+									onChange={(next) => {
+										if (next === '') {
+											// New upload removed — revert to keeping the
+											// current logo.
+											field.handleChange(undefined)
+											setLogoDisplayUrl(resolveFileUrl(project.logo))
+											return
+										}
+										field.handleChange(next)
+									}}
+									onDisplayUrlChange={(url) => {
+										// The uploader reports null when a new upload is
+										// removed — restore the current logo instead of
+										// blanking the preview.
+										setLogoDisplayUrl(url ?? resolveFileUrl(project.logo))
+									}}
+								/>
+
+								<FieldDescription>
+									{field.state.value === null
+										? 'Logo will be removed on save. Add a logo to publish.'
+										: 'Current logo is kept unless you replace or remove it.'}
+								</FieldDescription>
+
+								{isInvalid && <FieldError errors={field.state.meta.errors} />}
+							</Field>
+						)
+					}}
+				/>
+
+				<form.Field
+					name="screenshot"
+					children={(field) => {
+						const isInvalid =
+							field.state.meta.isTouched && !field.state.meta.isValid
+
+						return (
+							<Field data-invalid={isInvalid}>
+								<FieldLabel htmlFor={field.name}>Screenshot</FieldLabel>
+
+								<ScreenshotUploader
+									value={field.state.value ?? ''}
+									existingUrl={
+										field.state.value === undefined
+											? screenshotDisplayUrl
+											: null
+									}
+									onRemoveExisting={() => {
+										field.handleChange(null)
+										setScreenshotDisplayUrl(null)
+									}}
+									onChange={(next) => {
+										if (next === '') {
+											// New upload removed — revert to keeping the
+											// current screenshot.
+											field.handleChange(undefined)
+											setScreenshotDisplayUrl(
+												resolveFileUrl(project.screenshot)
+											)
+											return
+										}
+										field.handleChange(next)
+									}}
+									onDisplayUrlChange={(url) => {
+										// Null here means a new upload was removed —
+										// restore the current screenshot.
+										setScreenshotDisplayUrl(
+											url ?? resolveFileUrl(project.screenshot)
+										)
+									}}
+								/>
+
+								<FieldDescription>
+									{field.state.value === null
+										? 'Screenshot will be removed on save. Upload a new one to replace it.'
+										: 'Optional landing page capture in 16:9.'}
+								</FieldDescription>
+
+								{isInvalid && <FieldError errors={field.state.meta.errors} />}
+							</Field>
+						)
+					}}
+				/>
+			</div>
+		</section>
+	)
+}
+
+function EditProjectCategories({ form }: Pick<EditProjectFormState, 'form'>) {
+	return (
+		<section className="space-y-4">
+			<SectionHeading title="Categories" />
+
+			<form.Field
+				name="categorySlugs"
+				children={(field) => {
+					const isInvalid =
+						field.state.meta.isTouched && !field.state.meta.isValid
+
+					return (
+						<Field data-invalid={isInvalid}>
+							<FieldLabel htmlFor={field.name}>Categories</FieldLabel>
+							<Suspense fallback={<CategoryComboboxSkeleton />}>
+								<CategoryCombobox
+									id={field.name}
+									value={field.state.value ?? []}
+									onValueChange={(next) => field.handleChange(next)}
+								/>
+							</Suspense>
+
+							{isInvalid && <FieldError errors={field.state.meta.errors} />}
+						</Field>
+					)
+				}}
+			/>
+		</section>
+	)
+}
+
+function EditProjectPublishing({
+	project,
+	form,
+}: Pick<EditProjectFormState, 'project' | 'form'>) {
+	return (
+		<section className="space-y-4">
+			<SectionHeading
+				title="Publishing"
+				description="Draft projects stay hidden from the public catalogue."
+			/>
+
+			<p className="text-sm">
+				Current status: <strong>{project.status}</strong>
+			</p>
+			{project.submitter && (
+				<p className="text-sm text-muted-foreground">
+					Submitted by {project.submitter.name} ({project.submitter.email})
+				</p>
+			)}
+			<form.Field
+				name="rejectionReason"
+				children={(field) => {
+					const isInvalid =
+						field.state.meta.isTouched && !field.state.meta.isValid
+					return (
+						<Field data-invalid={isInvalid}>
+							<FieldLabel htmlFor="rejectionReason">
+								Rejection reason
+							</FieldLabel>
+							<Textarea
+								id="rejectionReason"
+								value={field.state.value ?? ''}
+								maxLength={1000}
+								aria-invalid={isInvalid}
+								aria-describedby={
+									isInvalid
+										? 'rejectionReason-description rejectionReason-error'
+										: 'rejectionReason-description'
+								}
+								onBlur={field.handleBlur}
+								onChange={(event) => field.handleChange(event.target.value)}
+							/>
+							<FieldDescription id="rejectionReason-description">
+								Required when rejecting a project, up to 1000 characters.
+								Restore rejected projects to draft to reopen review.
+							</FieldDescription>
+							{isInvalid && (
+								<FieldError
+									id="rejectionReason-error"
+									errors={field.state.meta.errors}
+								/>
+							)}
+						</Field>
+					)
+				}}
+			/>
+		</section>
+	)
+}
+
+function EditProjectPreview({
+	logoDisplayUrl,
+	screenshotDisplayUrl,
+	form,
+}: Pick<
+	EditProjectFormState,
+	'project' | 'logoDisplayUrl' | 'screenshotDisplayUrl' | 'form'
+>) {
+	return (
+		<aside className="min-w-0 lg:sticky lg:top-16">
+			<div className="space-y-3">
+				<div className="space-y-1">
+					<h2 className="text-sm font-semibold">Preview</h2>
+					<p className="text-sm text-muted-foreground">
+						How this project will appear in the catalogue.
+					</p>
 				</div>
-			</aside>
-		</div>
+
+				<form.Subscribe
+					selector={(state) => state.values}
+					children={(values) => (
+						<ProjectPreviewCard
+							values={values}
+							logoUrl={logoDisplayUrl}
+							screenshotUrl={screenshotDisplayUrl}
+						/>
+					)}
+				/>
+			</div>
+		</aside>
 	)
 }
diff --git a/apps/web/src/routes/_main/admin.activity.tsx b/apps/web/src/routes/_main/admin.activity.tsx
index 3954608..dc41b39 100644
--- a/apps/web/src/routes/_main/admin.activity.tsx
+++ b/apps/web/src/routes/_main/admin.activity.tsx
@@ -2,6 +2,8 @@ import { useSuspenseQuery } from '@tanstack/react-query'
 import { createFileRoute, Link } from '@tanstack/react-router'
 import { useDeferredValue } from 'react'
 
+import type { ORPCRouterOutputs } from '@altstack/api/routers'
+
 import { AUDIT_ACTIONS } from '@altstack/shared/constants'
 
 import { Badge } from '@altstack/ui/components/badge'
@@ -73,8 +75,7 @@ const actionItems = [
 	}),
 ]
 
-/** Renders recorded audit events with filters and pagination stored in the URL. */
-function Activity() {
+function useActivityQuery() {
 	const { auth } = Route.useRouteContext()
 	const search = useDeferredValue(Route.useSearch())
 	const navigate = Route.useNavigate()
@@ -87,6 +88,12 @@ function Activity() {
 		search.from,
 		search.to,
 	].join(':')
+	return { search, navigate, query, filtersKey }
+}
+
+/** Renders recorded audit events with filters and pagination stored in the URL. */
+function Activity() {
+	const { search, navigate, query, filtersKey } = useActivityQuery()
 	return (
 		<div className="mx-auto flex w-full max-w-screen-2xl flex-col gap-6 p-4 md:p-8">
 			<AdminPageHeader
@@ -98,118 +105,11 @@ function Activity() {
 					refresh={() => void query.refetch()}
 				/>
 			</AdminPageHeader>
-			<Card>
-				<CardHeader>
-					<CardTitle>Filter activity</CardTitle>
-					<CardDescription>
-						Only actions recorded in the audit log appear here. Report decisions
-						and taxonomy changes do not currently record audit events.
-					</CardDescription>
-				</CardHeader>
-				<CardContent className="flex flex-col gap-4">
-					<Select
-						items={actionItems}
-						value={search.action ?? 'all'}
-						onValueChange={(value) =>
-							void navigate({
-								search: {
-									...search,
-									page: 1,
-									action: AUDIT_ACTIONS.find((item) => item === value),
-								},
-							})
-						}
-					>
-						<SelectTrigger
-							aria-label="Filter audit action"
-							className="w-full sm:w-72"
-						>
-							<SelectValue />
-						</SelectTrigger>
-						<SelectContent>
-							<SelectGroup>
-								{actionItems.map((item) => (
-									<SelectItem key={item.value} value={item.value}>
-										{item.label}
-									</SelectItem>
-								))}
-							</SelectGroup>
-						</SelectContent>
-					</Select>
-					<form
-						key={filtersKey}
-						onSubmit={(event) => {
-							event.preventDefault()
-							const form = new FormData(event.currentTarget)
-							void navigate({
-								search: adminActivitySearchSchema.parse({
-									...search,
-									page: 1,
-									actorId: form.get('actorId') ?? undefined,
-									projectId: form.get('projectId') ?? undefined,
-									from: form.get('from') ?? undefined,
-									to: form.get('to') ?? undefined,
-								}),
-							})
-						}}
-					>
-						<FieldGroup className="grid min-w-0 gap-4 sm:grid-cols-2 xl:grid-cols-4">
-							<Field>
-								<FieldLabel htmlFor="audit-actor">Actor ID</FieldLabel>
-								<Input
-									id="audit-actor"
-									name="actorId"
-									defaultValue={search.actorId}
-									placeholder="Any actor"
-									pattern="[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}"
-								/>
-							</Field>
-							<Field>
-								<FieldLabel htmlFor="audit-project">Project ID</FieldLabel>
-								<Input
-									id="audit-project"
-									name="projectId"
-									defaultValue={search.projectId}
-									placeholder="Any project"
-									pattern="[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}"
-								/>
-							</Field>
-							<Field>
-								<FieldLabel htmlFor="audit-from">From (UTC)</FieldLabel>
-								<Input
-									id="audit-from"
-									name="from"
-									type="date"
-									defaultValue={search.from}
-								/>
-							</Field>
-							<Field>
-								<FieldLabel htmlFor="audit-to">To (UTC)</FieldLabel>
-								<Input
-									id="audit-to"
-									name="to"
-									type="date"
-									defaultValue={search.to}
-									min={search.from}
-								/>
-							</Field>
-							<Field
-								orientation="horizontal"
-								className="flex-wrap justify-end sm:col-span-2 xl:col-span-4"
-							>
-								<Button type="submit">Apply</Button>
-								<Button
-									type="button"
-									variant="outline"
-									onClick={() => void navigate({ search: { page: 1 } })}
-								>
-									Clear
-								</Button>
-							</Field>
-						</FieldGroup>
-					</form>
-				</CardContent>
-			</Card>
+			<ActivityFilters
+				search={search}
+				navigate={navigate}
+				filtersKey={filtersKey}
+			/>
 			{query.isError ? (
 				<AdminError retry={() => void query.refetch()} />
 			) : (
@@ -220,160 +120,11 @@ function Activity() {
 							description="Try clearing filters or selecting an earlier page."
 						/>
 					) : (
-						<div className="overflow-hidden rounded-xl border">
-							<Table aria-label="Recorded audit activity">
-								<TableHeader>
-									<TableRow>
-										<TableHead>Action</TableHead>
-										<TableHead>Actor</TableHead>
-										<TableHead>Target</TableHead>
-										<TableHead>Time</TableHead>
-										<TableHead>Details</TableHead>
-									</TableRow>
-								</TableHeader>
-								<TableBody>
-									{query.data.events.map((event) => (
-										<TableRow key={event.id}>
-											<TableCell>
-												<Badge variant="outline">
-													{event.action.replaceAll('_', ' ')}
-												</Badge>
-											</TableCell>
-											<TableCell>
-												{event.actor ? (
-													<Button
-														variant="link"
-														size="sm"
-														onClick={() =>
-															void navigate({
-																search: {
-																	...search,
-																	page: 1,
-																	actorId: event.actor?.id,
-																},
-															})
-														}
-													>
-														{event.actor.name}
-													</Button>
-												) : (
-													'Unavailable actor'
-												)}
-											</TableCell>
-											<TableCell>
-												{event.project ? (
-													<Link
-														to="/projects/$id/edit"
-														params={{ id: event.project.id }}
-														className="underline underline-offset-4"
-													>
-														{event.project.name}
-													</Link>
-												) : event.targetUser ? (
-													<Link
-														to="/admin/users/$id"
-														params={{ id: event.targetUser.id }}
-														className="underline underline-offset-4"
-													>
-														{event.targetUser.name}
-													</Link>
-												) : (
-													'Unavailable target'
-												)}
-											</TableCell>
-											<TableCell>
-												<AdminTime value={event.createdAt} />
-											</TableCell>
-											<TableCell>
-												<Dialog>
-													<DialogTrigger
-														render={<Button variant="outline" size="sm" />}
-													>
-														Details
-													</DialogTrigger>
-													<DialogContent>
-														<DialogHeader>
-															<DialogTitle>
-																{event.action.replaceAll('_', ' ')}
-															</DialogTitle>
-															<DialogDescription>
-																Recorded <AdminTime value={event.createdAt} />
-															</DialogDescription>
-														</DialogHeader>
-														<dl className="flex flex-col gap-3 text-sm">
-															<div>
-																<dt className="text-muted-foreground">
-																	Event ID
-																</dt>
-																<dd className="font-mono text-xs break-all">
-																	{event.id}
-																</dd>
-															</div>
-															<div>
-																<dt className="text-muted-foreground">Actor</dt>
-																<dd>
-																	{event.actor?.name ?? 'Unavailable actor'}
-																</dd>
-															</div>
-															<div>
-																<dt className="text-muted-foreground">
-																	Target
-																</dt>
-																<dd>
-																	{event.project?.name ??
-																		event.targetUser?.name ??
-																		'Unavailable target'}
-																</dd>
-															</div>
-															{event.details.toStatus && (
-																<div>
-																	<dt className="text-muted-foreground">
-																		Status transition
-																	</dt>
-																	<dd>
-																		{event.details.fromStatus ?? 'Unknown'} →{' '}
-																		{event.details.toStatus}
-																	</dd>
-																</div>
-															)}
-															{event.details.role && (
-																<div>
-																	<dt className="text-muted-foreground">
-																		Role
-																	</dt>
-																	<dd>
-																		{event.details.previousRole
-																			? `${event.details.previousRole} → `
-																			: ''}
-																		{event.details.role}
-																	</dd>
-																</div>
-															)}
-														</dl>
-														<p className="text-xs text-muted-foreground">
-															Private evidence and review reasons are available
-															only in the corresponding project or account
-															workflow.
-														</p>
-														{event.project && (
-															<Link
-																to="/projects/$id/edit"
-																params={{ id: event.project.id }}
-																className={buttonVariants({
-																	variant: 'outline',
-																})}
-															>
-																Open project and review history
-															</Link>
-														)}
-													</DialogContent>
-												</Dialog>
-											</TableCell>
-										</TableRow>
-									))}
-								</TableBody>
-							</Table>
-						</div>
+						<ActivityEvents
+							events={query.data.events}
+							search={search}
+							navigate={navigate}
+						/>
 					)}
 					<nav
 						aria-label="Activity pages"
@@ -409,3 +160,283 @@ function Activity() {
 		</div>
 	)
 }
+
+type ActivityNavigationProps = Pick<
+	ReturnType<typeof useActivityQuery>,
+	'search' | 'navigate'
+>
+type ActivityFilterProps = ActivityNavigationProps & { filtersKey: string }
+type ActivityEventsProps = ActivityNavigationProps & {
+	events: ORPCRouterOutputs['admin']['dashboard']['activity']['events']
+}
+
+function ActivityFilters({
+	search,
+	navigate,
+	filtersKey,
+}: ActivityFilterProps) {
+	return (
+		<Card>
+			<CardHeader>
+				<CardTitle>Filter activity</CardTitle>
+				<CardDescription>
+					Only actions recorded in the audit log appear here. Report decisions
+					and taxonomy changes do not currently record audit events.
+				</CardDescription>
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				<Select
+					items={actionItems}
+					value={search.action ?? 'all'}
+					onValueChange={(value) =>
+						void navigate({
+							search: {
+								...search,
+								page: 1,
+								action: AUDIT_ACTIONS.find((item) => item === value),
+							},
+						})
+					}
+				>
+					<SelectTrigger
+						aria-label="Filter audit action"
+						className="w-full sm:w-72"
+					>
+						<SelectValue />
+					</SelectTrigger>
+					<SelectContent>
+						<SelectGroup>
+							{actionItems.map((item) => (
+								<SelectItem key={item.value} value={item.value}>
+									{item.label}
+								</SelectItem>
+							))}
+						</SelectGroup>
+					</SelectContent>
+				</Select>
+				<form
+					key={filtersKey}
+					onSubmit={(event) => {
+						event.preventDefault()
+						const form = new FormData(event.currentTarget)
+						void navigate({
+							search: adminActivitySearchSchema.parse({
+								...search,
+								page: 1,
+								actorId: form.get('actorId') ?? undefined,
+								projectId: form.get('projectId') ?? undefined,
+								from: form.get('from') ?? undefined,
+								to: form.get('to') ?? undefined,
+							}),
+						})
+					}}
+				>
+					<FieldGroup className="grid min-w-0 gap-4 sm:grid-cols-2 xl:grid-cols-4">
+						<Field>
+							<FieldLabel htmlFor="audit-actor">Actor ID</FieldLabel>
+							<Input
+								id="audit-actor"
+								name="actorId"
+								defaultValue={search.actorId}
+								placeholder="Any actor"
+								pattern="[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}"
+							/>
+						</Field>
+						<Field>
+							<FieldLabel htmlFor="audit-project">Project ID</FieldLabel>
+							<Input
+								id="audit-project"
+								name="projectId"
+								defaultValue={search.projectId}
+								placeholder="Any project"
+								pattern="[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}"
+							/>
+						</Field>
+						<Field>
+							<FieldLabel htmlFor="audit-from">From (UTC)</FieldLabel>
+							<Input
+								id="audit-from"
+								name="from"
+								type="date"
+								defaultValue={search.from}
+							/>
+						</Field>
+						<Field>
+							<FieldLabel htmlFor="audit-to">To (UTC)</FieldLabel>
+							<Input
+								id="audit-to"
+								name="to"
+								type="date"
+								defaultValue={search.to}
+								min={search.from}
+							/>
+						</Field>
+						<Field
+							orientation="horizontal"
+							className="flex-wrap justify-end sm:col-span-2 xl:col-span-4"
+						>
+							<Button type="submit">Apply</Button>
+							<Button
+								type="button"
+								variant="outline"
+								onClick={() => void navigate({ search: { page: 1 } })}
+							>
+								Clear
+							</Button>
+						</Field>
+					</FieldGroup>
+				</form>
+			</CardContent>
+		</Card>
+	)
+}
+
+function ActivityEvents({ events, search, navigate }: ActivityEventsProps) {
+	return (
+		<div className="overflow-hidden rounded-xl border">
+			<Table aria-label="Recorded audit activity">
+				<TableHeader>
+					<TableRow>
+						<TableHead>Action</TableHead>
+						<TableHead>Actor</TableHead>
+						<TableHead>Target</TableHead>
+						<TableHead>Time</TableHead>
+						<TableHead>Details</TableHead>
+					</TableRow>
+				</TableHeader>
+				<TableBody>
+					{events.map((event) => (
+						<TableRow key={event.id}>
+							<TableCell>
+								<Badge variant="outline">
+									{event.action.replaceAll('_', ' ')}
+								</Badge>
+							</TableCell>
+							<TableCell>
+								{event.actor ? (
+									<Button
+										variant="link"
+										size="sm"
+										onClick={() =>
+											void navigate({
+												search: {
+													...search,
+													page: 1,
+													actorId: event.actor?.id,
+												},
+											})
+										}
+									>
+										{event.actor.name}
+									</Button>
+								) : (
+									'Unavailable actor'
+								)}
+							</TableCell>
+							<TableCell>
+								{event.project ? (
+									<Link
+										to="/projects/$id/edit"
+										params={{ id: event.project.id }}
+										className="underline underline-offset-4"
+									>
+										{event.project.name}
+									</Link>
+								) : event.targetUser ? (
+									<Link
+										to="/admin/users/$id"
+										params={{ id: event.targetUser.id }}
+										className="underline underline-offset-4"
+									>
+										{event.targetUser.name}
+									</Link>
+								) : (
+									'Unavailable target'
+								)}
+							</TableCell>
+							<TableCell>
+								<AdminTime value={event.createdAt} />
+							</TableCell>
+							<TableCell>
+								<Dialog>
+									<DialogTrigger
+										render={<Button variant="outline" size="sm" />}
+									>
+										Details
+									</DialogTrigger>
+									<DialogContent>
+										<DialogHeader>
+											<DialogTitle>
+												{event.action.replaceAll('_', ' ')}
+											</DialogTitle>
+											<DialogDescription>
+												Recorded <AdminTime value={event.createdAt} />
+											</DialogDescription>
+										</DialogHeader>
+										<dl className="flex flex-col gap-3 text-sm">
+											<div>
+												<dt className="text-muted-foreground">Event ID</dt>
+												<dd className="font-mono text-xs break-all">
+													{event.id}
+												</dd>
+											</div>
+											<div>
+												<dt className="text-muted-foreground">Actor</dt>
+												<dd>{event.actor?.name ?? 'Unavailable actor'}</dd>
+											</div>
+											<div>
+												<dt className="text-muted-foreground">Target</dt>
+												<dd>
+													{event.project?.name ??
+														event.targetUser?.name ??
+														'Unavailable target'}
+												</dd>
+											</div>
+											{event.details.toStatus && (
+												<div>
+													<dt className="text-muted-foreground">
+														Status transition
+													</dt>
+													<dd>
+														{event.details.fromStatus ?? 'Unknown'} →{' '}
+														{event.details.toStatus}
+													</dd>
+												</div>
+											)}
+											{event.details.role && (
+												<div>
+													<dt className="text-muted-foreground">Role</dt>
+													<dd>
+														{event.details.previousRole
+															? `${event.details.previousRole} → `
+															: ''}
+														{event.details.role}
+													</dd>
+												</div>
+											)}
+										</dl>
+										<p className="text-xs text-muted-foreground">
+											Private evidence and review reasons are available only in
+											the corresponding project or account workflow.
+										</p>
+										{event.project && (
+											<Link
+												to="/projects/$id/edit"
+												params={{ id: event.project.id }}
+												className={buttonVariants({
+													variant: 'outline',
+												})}
+											>
+												Open project and review history
+											</Link>
+										)}
+									</DialogContent>
+								</Dialog>
+							</TableCell>
+						</TableRow>
+					))}
+				</TableBody>
+			</Table>
+		</div>
+	)
+}

From 8e7d7e14ce7262a178ff9aaf29a06778c8471059 Mon Sep 17 00:00:00 2001
From: mrboxs <rizkywanda200155@gmail.com>
Date: Tue, 10 Nov 2026 17:32:52 +0700
Subject: [PATCH 3/4] refactor(web): extract shared admin form and list
 components

- Reuse project form fields, headers, previews, pagination, and table headings
- Consolidate unsaved-change dialogs in the shared confirmation component
---
 .react-doctor/false-positives.md              |  21 ++
 .../src/components/action-confirmation.tsx    |  10 +-
 .../src/components/table-column-headings.tsx  |  13 ++
 .../src/features/admin-collections/editor.tsx |  45 +---
 .../components/list-pagination-controls.tsx   |  41 ++++
 .../components/featured-editor.tsx            |  35 +---
 .../components/create-project-form.tsx        | 196 ++++++------------
 .../components/edit-project-form.tsx          | 169 +++++----------
 .../components/project-form-fields.tsx        | 100 +++++++++
 .../components/project-form-header.tsx        |  26 +++
 .../components/project-form-preview.tsx       |  17 ++
 apps/web/src/routes/_main/admin.activity.tsx  |  15 +-
 .../src/routes/_main/admin.blogs/index.tsx    |  34 +--
 .../routes/_main/admin.collections/index.tsx  |  34 +--
 .../src/routes/_main/admin.users/index.tsx    |  15 +-
 .../src/routes/_main/projects/$id.edit.tsx    |  22 +-
 16 files changed, 391 insertions(+), 402 deletions(-)
 create mode 100644 apps/web/src/components/table-column-headings.tsx
 create mode 100644 apps/web/src/features/admin-dashboard/components/list-pagination-controls.tsx
 create mode 100644 apps/web/src/features/admin-projects/components/project-form-fields.tsx
 create mode 100644 apps/web/src/features/admin-projects/components/project-form-header.tsx

diff --git a/.react-doctor/false-positives.md b/.react-doctor/false-positives.md
index ee32cf7..f1642ba 100644
--- a/.react-doctor/false-positives.md
+++ b/.react-doctor/false-positives.md
@@ -64,3 +64,24 @@ with no browser reconciliation or row-local state. Commit-message lines likewise
 belong to an immutable commit keyed by commit identity. These predicates do not
 exempt editable, reorderable, filterable or stateful lists. The interactive
 catalogue pagination and GitHub statistics now use semantic keys.
+
+## Admin editor client-side submission
+
+`react-doctor/no-prevent-default` on the collection, create-project and
+edit-project forms is intentional while they own the client-side submission
+lifecycle. Collection submission flushes the BlockNote editor, validates the
+current selection and content, sends the expected revision, and preserves edits
+on conflict. Project submission flushes deferred Markdown before TanStack Form
+validation and mutation; upload errors restore or clear temporary image keys
+without losing the other fields. The edit form also uses explicit review actions
+to choose the next status before submission.
+
+`admin-collection-editor.test.tsx`, `admin-project-review-form.test.tsx`,
+`github-readme-import.test.tsx` and `github-metadata-prefill.test.tsx` exercise
+validation, same-task editor flushing, explicit save, conflicts and retained
+drafts. The canonical rule recipe specifically retains `onSubmit` with
+`preventDefault` for deliberate client-side validation, uploads and SPA flows.
+Moving the call to another handler or replacing it with a client-only action
+would hide the diagnostic without adding progressive enhancement. Review again
+if these forms gain a native/server-action submission contract. This note does
+not exempt unrelated forms or anchor click handlers.
diff --git a/apps/web/src/components/action-confirmation.tsx b/apps/web/src/components/action-confirmation.tsx
index 88170b6..8f3e44b 100644
--- a/apps/web/src/components/action-confirmation.tsx
+++ b/apps/web/src/components/action-confirmation.tsx
@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react'
+import type { ComponentProps, ReactNode } from 'react'
 
 import { Alert, AlertDescription } from '@altstack/ui/components/alert'
 import {
@@ -24,6 +24,7 @@ export function ActionConfirmation({
 	disabled = false,
 	confirmLabel = 'Confirm',
 	cancelLabel = 'Cancel',
+	confirmVariant,
 }: {
 	open: boolean
 	title: string
@@ -36,6 +37,7 @@ export function ActionConfirmation({
 	disabled?: boolean
 	confirmLabel?: string
 	cancelLabel?: string
+	confirmVariant?: ComponentProps<typeof AlertDialogAction>['variant']
 }) {
 	return (
 		<AlertDialog
@@ -59,7 +61,11 @@ export function ActionConfirmation({
 					<AlertDialogCancel disabled={pending}>
 						{cancelLabel}
 					</AlertDialogCancel>
-					<AlertDialogAction disabled={pending || disabled} onClick={onConfirm}>
+					<AlertDialogAction
+						variant={confirmVariant}
+						disabled={pending || disabled}
+						onClick={onConfirm}
+					>
 						{pending ? 'Saving…' : confirmLabel}
 					</AlertDialogAction>
 				</AlertDialogFooter>
diff --git a/apps/web/src/components/table-column-headings.tsx b/apps/web/src/components/table-column-headings.tsx
new file mode 100644
index 0000000..6eebe2e
--- /dev/null
+++ b/apps/web/src/components/table-column-headings.tsx
@@ -0,0 +1,13 @@
+import { TableHead, TableHeader, TableRow } from '@altstack/ui/components/table'
+
+export function TableColumnHeadings({ headings }: { headings: Array<string> }) {
+	return (
+		<TableHeader>
+			<TableRow>
+				{headings.map((heading) => (
+					<TableHead key={heading}>{heading}</TableHead>
+				))}
+			</TableRow>
+		</TableHeader>
+	)
+}
diff --git a/apps/web/src/features/admin-collections/editor.tsx b/apps/web/src/features/admin-collections/editor.tsx
index 114203b..a3026b5 100644
--- a/apps/web/src/features/admin-collections/editor.tsx
+++ b/apps/web/src/features/admin-collections/editor.tsx
@@ -33,16 +33,6 @@ import {
 	AlertDescription,
 	AlertTitle,
 } from '@altstack/ui/components/alert'
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-} from '@altstack/ui/components/alert-dialog'
 import { Badge } from '@altstack/ui/components/badge'
 import { Button, buttonVariants } from '@altstack/ui/components/button'
 import {
@@ -69,6 +59,7 @@ import { Skeleton } from '@altstack/ui/components/skeleton'
 import { Textarea } from '@altstack/ui/components/textarea'
 import { toast } from '@altstack/ui/components/toast'
 
+import { ActionConfirmation } from '#/components/action-confirmation'
 import BlockNoteEditor from '#/components/block-note/editor'
 import type { BlockNoteEditorHandle } from '#/components/block-note/editor'
 import { PublicContent } from '#/components/public-content'
@@ -401,31 +392,17 @@ export function CollectionEditor({ initial }: { initial?: Initial }) {
 					reload={reload}
 				/>
 			</form>
-			<AlertDialog
+			<ActionConfirmation
 				open={blocker.status === 'blocked'}
-				onOpenChange={(open) => {
-					if (!open) blocker.reset?.()
-				}}
-			>
-				<AlertDialogContent>
-					<AlertDialogHeader>
-						<AlertDialogTitle>Leave without saving?</AlertDialogTitle>
-						<AlertDialogDescription>
-							Your collection has unsaved changes. Save your work before leaving
-							to keep these edits.
-						</AlertDialogDescription>
-					</AlertDialogHeader>
-					<AlertDialogFooter>
-						<AlertDialogCancel>Keep editing</AlertDialogCancel>
-						<AlertDialogAction
-							variant="destructive"
-							onClick={() => blocker.proceed?.()}
-						>
-							Discard changes
-						</AlertDialogAction>
-					</AlertDialogFooter>
-				</AlertDialogContent>
-			</AlertDialog>
+				title="Leave without saving?"
+				description="Your collection has unsaved changes. Save your work before leaving to keep these edits."
+				pending={false}
+				onClose={() => blocker.reset?.()}
+				onConfirm={() => blocker.proceed?.()}
+				confirmLabel="Discard changes"
+				cancelLabel="Keep editing"
+				confirmVariant="destructive"
+			/>
 		</div>
 	)
 }
diff --git a/apps/web/src/features/admin-dashboard/components/list-pagination-controls.tsx b/apps/web/src/features/admin-dashboard/components/list-pagination-controls.tsx
new file mode 100644
index 0000000..1414a9b
--- /dev/null
+++ b/apps/web/src/features/admin-dashboard/components/list-pagination-controls.tsx
@@ -0,0 +1,41 @@
+import { IconArrowLeft, IconArrowRight } from '@tabler/icons-react'
+
+import { Button } from '@altstack/ui/components/button'
+
+export function ListPaginationControls({
+	page,
+	pageCount,
+	fetching,
+	onPageChange,
+}: {
+	page: number
+	pageCount: number
+	fetching: boolean
+	onPageChange: (page: number) => void
+}) {
+	return (
+		<div className="flex items-center gap-3">
+			<Button
+				variant="outline"
+				size="sm"
+				disabled={page === 1 || fetching}
+				onClick={() => onPageChange(page - 1)}
+			>
+				<IconArrowLeft data-icon="inline-start" />
+				Previous
+			</Button>
+			<span className="text-xs text-muted-foreground">
+				{page} / {pageCount}
+			</span>
+			<Button
+				variant="outline"
+				size="sm"
+				disabled={page >= pageCount || fetching}
+				onClick={() => onPageChange(page + 1)}
+			>
+				Next
+				<IconArrowRight data-icon="inline-end" />
+			</Button>
+		</div>
+	)
+}
diff --git a/apps/web/src/features/admin-featured/components/featured-editor.tsx b/apps/web/src/features/admin-featured/components/featured-editor.tsx
index 1e29147..aade28a 100644
--- a/apps/web/src/features/admin-featured/components/featured-editor.tsx
+++ b/apps/web/src/features/admin-featured/components/featured-editor.tsx
@@ -62,6 +62,7 @@ import {
 import { Skeleton } from '@altstack/ui/components/skeleton'
 import { toast } from '@altstack/ui/components/toast'
 
+import { ActionConfirmation } from '#/components/action-confirmation'
 import { ProjectLogo } from '#/components/project-media'
 import { QueryBoundary } from '#/components/query-boundary'
 import { adminFeaturedQueries } from '#/features/admin-featured/queries'
@@ -245,31 +246,17 @@ function SelectionEditor({ initial }: { initial: Selection }) {
 					</AlertDialogFooter>
 				</AlertDialogContent>
 			</AlertDialog>
-			<AlertDialog
+			<ActionConfirmation
 				open={blocker.status === 'blocked'}
-				onOpenChange={(open) => {
-					if (!open) blocker.reset?.()
-				}}
-			>
-				<AlertDialogContent>
-					<AlertDialogHeader>
-						<AlertDialogTitle>Leave without saving?</AlertDialogTitle>
-						<AlertDialogDescription>
-							Your featured selection has unsaved changes. Save them before
-							leaving to keep this order.
-						</AlertDialogDescription>
-					</AlertDialogHeader>
-					<AlertDialogFooter>
-						<AlertDialogCancel>Keep editing</AlertDialogCancel>
-						<AlertDialogAction
-							variant="destructive"
-							onClick={() => blocker.proceed?.()}
-						>
-							Discard changes
-						</AlertDialogAction>
-					</AlertDialogFooter>
-				</AlertDialogContent>
-			</AlertDialog>
+				title="Leave without saving?"
+				description="Your featured selection has unsaved changes. Save them before leaving to keep this order."
+				pending={false}
+				onClose={() => blocker.reset?.()}
+				onConfirm={() => blocker.proceed?.()}
+				confirmLabel="Discard changes"
+				cancelLabel="Keep editing"
+				confirmVariant="destructive"
+			/>
 		</div>
 	)
 }
diff --git a/apps/web/src/features/admin-projects/components/create-project-form.tsx b/apps/web/src/features/admin-projects/components/create-project-form.tsx
index 539de7f..ce7b9b3 100644
--- a/apps/web/src/features/admin-projects/components/create-project-form.tsx
+++ b/apps/web/src/features/admin-projects/components/create-project-form.tsx
@@ -1,7 +1,6 @@
-import { IconArrowLeft } from '@tabler/icons-react'
 import { useForm } from '@tanstack/react-form-start'
-import { ClientOnly, Link } from '@tanstack/react-router'
-import { Suspense, useRef, useState } from 'react'
+import { ClientOnly } from '@tanstack/react-router'
+import { useRef, useState } from 'react'
 import type { z } from 'zod'
 
 import { slugify } from '@altstack/shared/lib/slug'
@@ -27,26 +26,26 @@ import {
 	NativeSelectOption,
 } from '@altstack/ui/components/native-select'
 import { Spinner } from '@altstack/ui/components/spinner'
-import { Textarea } from '@altstack/ui/components/textarea'
 import { toast } from '@altstack/ui/components/toast'
 
 import BlockNoteEditor from '#/components/block-note/editor'
 import type { BlockNoteEditorHandle } from '#/components/block-note/editor'
-import { CategoryCombobox } from '#/components/category-combobox'
 import { LogoUploader, ScreenshotUploader } from '#/components/image-uploader'
-import { CategoryComboboxSkeleton } from '#/components/workspace-skeletons'
 import { GithubMetadataPrefill } from '#/features/admin-projects/components/github-metadata-prefill'
 import { GithubReadmeImport } from '#/features/admin-projects/components/github-readme-import'
+import {
+	ProjectDescriptionSection,
+	ProjectCopyField,
+	ProjectCategoriesSection,
+} from '#/features/admin-projects/components/project-form-fields'
+import { ProjectFormHeader } from '#/features/admin-projects/components/project-form-header'
 import {
 	ProjectPreviewCard,
+	ProjectPreviewPanel,
 	SectionHeading,
 } from '#/features/admin-projects/components/project-form-preview'
 import { useAdminProjectCreate } from '#/features/admin-projects/queries'
 
-// Mirrors the max() in adminCreateProjectBodySchema; display-only counters.
-const TAGLINE_MAX_LENGTH = 100
-const DESCRIPTION_MAX_LENGTH = 300
-
 const defaultValues: z.input<typeof adminCreateProjectBodySchema> = {
 	name: '',
 	slug: '',
@@ -172,24 +171,10 @@ export function CreateProjectForm() {
 
 	return (
 		<div className="mx-auto w-full max-w-6xl space-y-6 px-4 py-6">
-			<div className="space-y-3">
-				<Link
-					to="/projects"
-					className="inline-flex items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
-				>
-					<IconArrowLeft className="size-4" />
-					Projects
-				</Link>
-
-				<div className="space-y-1">
-					<h1 className="text-xl font-semibold tracking-tight">
-						Create project
-					</h1>
-					<p className="text-sm text-muted-foreground">
-						Add a new project to the catalogue. The preview updates as you type.
-					</p>
-				</div>
-			</div>
+			<ProjectFormHeader
+				title="Create project"
+				description="Add a new project to the catalogue. The preview updates as you type."
+			/>
 
 			<div className="grid grid-cols-1 items-start gap-6 lg:grid-cols-[minmax(0,1fr)_360px]">
 				<form
@@ -462,74 +447,34 @@ function CreateProjectDescription({
 	form,
 }: Pick<CreateProjectFormState, 'form'>) {
 	return (
-		<section className="space-y-4">
-			<SectionHeading
-				title="Description"
-				description="Short copy shown in the catalogue listing."
-			/>
-
+		<ProjectDescriptionSection>
 			<form.Field
 				name="tagline"
-				children={(field) => {
-					const isInvalid =
-						field.state.meta.isTouched && !field.state.meta.isValid
-
-					return (
-						<Field data-invalid={isInvalid}>
-							<div className="flex items-baseline justify-between gap-2">
-								<FieldLabel htmlFor={field.name}>Tagline</FieldLabel>
-								<span className="shrink-0 text-xs text-muted-foreground tabular-nums">
-									{(field.state.value ?? '').length}/{TAGLINE_MAX_LENGTH}
-								</span>
-							</div>
-
-							<Input
-								id={field.name}
-								name={field.name}
-								value={field.state.value ?? ''}
-								onBlur={field.handleBlur}
-								onChange={(e) => field.handleChange(e.target.value)}
-								aria-invalid={isInvalid}
-								placeholder="Tagline"
-							/>
-
-							{isInvalid && <FieldError errors={field.state.meta.errors} />}
-						</Field>
-					)
-				}}
+				children={(field) => (
+					<ProjectCopyField
+						name={field.name}
+						value={field.state.value}
+						onBlur={field.handleBlur}
+						onChange={(value) => field.handleChange(value)}
+						invalid={field.state.meta.isTouched && !field.state.meta.isValid}
+						errors={field.state.meta.errors}
+					/>
+				)}
 			/>
-
 			<form.Field
 				name="description"
-				children={(field) => {
-					const isInvalid =
-						field.state.meta.isTouched && !field.state.meta.isValid
-
-					return (
-						<Field data-invalid={isInvalid}>
-							<div className="flex items-baseline justify-between gap-2">
-								<FieldLabel htmlFor={field.name}>Description</FieldLabel>
-								<span className="shrink-0 text-xs text-muted-foreground tabular-nums">
-									{(field.state.value ?? '').length}/{DESCRIPTION_MAX_LENGTH}
-								</span>
-							</div>
-
-							<Textarea
-								id={field.name}
-								name={field.name}
-								value={field.state.value ?? ''}
-								onBlur={field.handleBlur}
-								onChange={(e) => field.handleChange(e.target.value)}
-								aria-invalid={isInvalid}
-								placeholder="Short description"
-							/>
-
-							{isInvalid && <FieldError errors={field.state.meta.errors} />}
-						</Field>
-					)
-				}}
+				children={(field) => (
+					<ProjectCopyField
+						name={field.name}
+						value={field.state.value}
+						onBlur={field.handleBlur}
+						onChange={(value) => field.handleChange(value)}
+						invalid={field.state.meta.isTouched && !field.state.meta.isValid}
+						errors={field.state.meta.errors}
+					/>
+				)}
 			/>
-		</section>
+		</ProjectDescriptionSection>
 	)
 }
 
@@ -665,32 +610,18 @@ function CreateProjectCategories({
 	form,
 }: Pick<CreateProjectFormState, 'form'>) {
 	return (
-		<section className="space-y-4">
-			<SectionHeading title="Categories" />
-
-			<form.Field
-				name="categorySlugs"
-				children={(field) => {
-					const isInvalid =
-						field.state.meta.isTouched && !field.state.meta.isValid
-
-					return (
-						<Field data-invalid={isInvalid}>
-							<FieldLabel htmlFor={field.name}>Categories</FieldLabel>
-							<Suspense fallback={<CategoryComboboxSkeleton />}>
-								<CategoryCombobox
-									id={field.name}
-									value={field.state.value ?? []}
-									onValueChange={(next) => field.handleChange(next)}
-								/>
-							</Suspense>
-
-							{isInvalid && <FieldError errors={field.state.meta.errors} />}
-						</Field>
-					)
-				}}
-			/>
-		</section>
+		<form.Field
+			name="categorySlugs"
+			children={(field) => (
+				<ProjectCategoriesSection
+					id={field.name}
+					value={field.state.value ?? []}
+					onValueChange={(value) => field.handleChange(value)}
+					invalid={field.state.meta.isTouched && !field.state.meta.isValid}
+					errors={field.state.meta.errors}
+				/>
+			)}
+		/>
 	)
 }
 
@@ -755,26 +686,17 @@ function CreateProjectPreview({
 	'logoDisplayUrl' | 'screenshotDisplayUrl' | 'form'
 >) {
 	return (
-		<aside className="min-w-0 lg:sticky lg:top-16">
-			<div className="space-y-3">
-				<div className="space-y-1">
-					<h2 className="text-sm font-semibold">Preview</h2>
-					<p className="text-sm text-muted-foreground">
-						How this project will appear in the catalogue.
-					</p>
-				</div>
-
-				<form.Subscribe
-					selector={(state) => state.values}
-					children={(values) => (
-						<ProjectPreviewCard
-							values={values}
-							logoUrl={logoDisplayUrl}
-							screenshotUrl={screenshotDisplayUrl}
-						/>
-					)}
-				/>
-			</div>
-		</aside>
+		<ProjectPreviewPanel>
+			<form.Subscribe
+				selector={(state) => state.values}
+				children={(values) => (
+					<ProjectPreviewCard
+						values={values}
+						logoUrl={logoDisplayUrl}
+						screenshotUrl={screenshotDisplayUrl}
+					/>
+				)}
+			/>
+		</ProjectPreviewPanel>
 	)
 }
diff --git a/apps/web/src/features/admin-projects/components/edit-project-form.tsx b/apps/web/src/features/admin-projects/components/edit-project-form.tsx
index fedf596..177aaf0 100644
--- a/apps/web/src/features/admin-projects/components/edit-project-form.tsx
+++ b/apps/web/src/features/admin-projects/components/edit-project-form.tsx
@@ -1,6 +1,6 @@
 import { useForm } from '@tanstack/react-form-start'
 import { ClientOnly } from '@tanstack/react-router'
-import { Suspense, useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import type { z } from 'zod'
 
 import type { ORPCRouterOutputs } from '@altstack/api/routers'
@@ -30,14 +30,18 @@ import { toast } from '@altstack/ui/components/toast'
 
 import type { BlockNoteEditorHandle } from '#/components/block-note/editor'
 import BlockNoteEditor from '#/components/block-note/editor'
-import { CategoryCombobox } from '#/components/category-combobox'
 import { LogoUploader, ScreenshotUploader } from '#/components/image-uploader'
-import { CategoryComboboxSkeleton } from '#/components/workspace-skeletons'
 import { GithubMetadataPrefill } from '#/features/admin-projects/components/github-metadata-prefill'
 import { GithubReadmeImport } from '#/features/admin-projects/components/github-readme-import'
 import { GithubStatisticsRefresh } from '#/features/admin-projects/components/github-statistics-refresh'
+import {
+	ProjectDescriptionSection,
+	ProjectCopyField,
+	ProjectCategoriesSection,
+} from '#/features/admin-projects/components/project-form-fields'
 import {
 	ProjectPreviewCard,
+	ProjectPreviewPanel,
 	SectionHeading,
 } from '#/features/admin-projects/components/project-form-preview'
 import { ProjectReviewActions } from '#/features/admin-projects/components/project-review-actions'
@@ -62,10 +66,6 @@ const editProjectFormSchema = adminUpdateProjectBodySchema.superRefine(
 	}
 )
 
-// Mirrors the max() in the schema; display-only counters.
-const TAGLINE_MAX_LENGTH = 100
-const DESCRIPTION_MAX_LENGTH = 300
-
 type EditProjectValues = z.input<typeof editProjectFormSchema>
 type AdminProject = ORPCRouterOutputs['admin']['project']['getById']
 
@@ -494,74 +494,34 @@ function EditProjectBasics({
 
 function EditProjectDescription({ form }: Pick<EditProjectFormState, 'form'>) {
 	return (
-		<section className="space-y-4">
-			<SectionHeading
-				title="Description"
-				description="Short copy shown in the catalogue listing."
-			/>
-
+		<ProjectDescriptionSection>
 			<form.Field
 				name="tagline"
-				children={(field) => {
-					const isInvalid =
-						field.state.meta.isTouched && !field.state.meta.isValid
-
-					return (
-						<Field data-invalid={isInvalid}>
-							<div className="flex items-baseline justify-between gap-2">
-								<FieldLabel htmlFor={field.name}>Tagline</FieldLabel>
-								<span className="shrink-0 text-xs text-muted-foreground tabular-nums">
-									{(field.state.value ?? '').length}/{TAGLINE_MAX_LENGTH}
-								</span>
-							</div>
-
-							<Input
-								id={field.name}
-								name={field.name}
-								value={field.state.value ?? ''}
-								onBlur={field.handleBlur}
-								onChange={(e) => field.handleChange(e.target.value)}
-								aria-invalid={isInvalid}
-								placeholder="Tagline"
-							/>
-
-							{isInvalid && <FieldError errors={field.state.meta.errors} />}
-						</Field>
-					)
-				}}
+				children={(field) => (
+					<ProjectCopyField
+						name={field.name}
+						value={field.state.value}
+						onBlur={field.handleBlur}
+						onChange={(value) => field.handleChange(value)}
+						invalid={field.state.meta.isTouched && !field.state.meta.isValid}
+						errors={field.state.meta.errors}
+					/>
+				)}
 			/>
-
 			<form.Field
 				name="description"
-				children={(field) => {
-					const isInvalid =
-						field.state.meta.isTouched && !field.state.meta.isValid
-
-					return (
-						<Field data-invalid={isInvalid}>
-							<div className="flex items-baseline justify-between gap-2">
-								<FieldLabel htmlFor={field.name}>Description</FieldLabel>
-								<span className="shrink-0 text-xs text-muted-foreground tabular-nums">
-									{(field.state.value ?? '').length}/{DESCRIPTION_MAX_LENGTH}
-								</span>
-							</div>
-
-							<Textarea
-								id={field.name}
-								name={field.name}
-								value={field.state.value ?? ''}
-								onBlur={field.handleBlur}
-								onChange={(e) => field.handleChange(e.target.value)}
-								aria-invalid={isInvalid}
-								placeholder="Short description"
-							/>
-
-							{isInvalid && <FieldError errors={field.state.meta.errors} />}
-						</Field>
-					)
-				}}
+				children={(field) => (
+					<ProjectCopyField
+						name={field.name}
+						value={field.state.value}
+						onBlur={field.handleBlur}
+						onChange={(value) => field.handleChange(value)}
+						invalid={field.state.meta.isTouched && !field.state.meta.isValid}
+						errors={field.state.meta.errors}
+					/>
+				)}
 			/>
-		</section>
+		</ProjectDescriptionSection>
 	)
 }
 
@@ -759,32 +719,18 @@ function EditProjectMedia({
 
 function EditProjectCategories({ form }: Pick<EditProjectFormState, 'form'>) {
 	return (
-		<section className="space-y-4">
-			<SectionHeading title="Categories" />
-
-			<form.Field
-				name="categorySlugs"
-				children={(field) => {
-					const isInvalid =
-						field.state.meta.isTouched && !field.state.meta.isValid
-
-					return (
-						<Field data-invalid={isInvalid}>
-							<FieldLabel htmlFor={field.name}>Categories</FieldLabel>
-							<Suspense fallback={<CategoryComboboxSkeleton />}>
-								<CategoryCombobox
-									id={field.name}
-									value={field.state.value ?? []}
-									onValueChange={(next) => field.handleChange(next)}
-								/>
-							</Suspense>
-
-							{isInvalid && <FieldError errors={field.state.meta.errors} />}
-						</Field>
-					)
-				}}
-			/>
-		</section>
+		<form.Field
+			name="categorySlugs"
+			children={(field) => (
+				<ProjectCategoriesSection
+					id={field.name}
+					value={field.state.value ?? []}
+					onValueChange={(value) => field.handleChange(value)}
+					invalid={field.state.meta.isTouched && !field.state.meta.isValid}
+					errors={field.state.meta.errors}
+				/>
+			)}
+		/>
 	)
 }
 
@@ -857,26 +803,17 @@ function EditProjectPreview({
 	'project' | 'logoDisplayUrl' | 'screenshotDisplayUrl' | 'form'
 >) {
 	return (
-		<aside className="min-w-0 lg:sticky lg:top-16">
-			<div className="space-y-3">
-				<div className="space-y-1">
-					<h2 className="text-sm font-semibold">Preview</h2>
-					<p className="text-sm text-muted-foreground">
-						How this project will appear in the catalogue.
-					</p>
-				</div>
-
-				<form.Subscribe
-					selector={(state) => state.values}
-					children={(values) => (
-						<ProjectPreviewCard
-							values={values}
-							logoUrl={logoDisplayUrl}
-							screenshotUrl={screenshotDisplayUrl}
-						/>
-					)}
-				/>
-			</div>
-		</aside>
+		<ProjectPreviewPanel>
+			<form.Subscribe
+				selector={(state) => state.values}
+				children={(values) => (
+					<ProjectPreviewCard
+						values={values}
+						logoUrl={logoDisplayUrl}
+						screenshotUrl={screenshotDisplayUrl}
+					/>
+				)}
+			/>
+		</ProjectPreviewPanel>
 	)
 }
diff --git a/apps/web/src/features/admin-projects/components/project-form-fields.tsx b/apps/web/src/features/admin-projects/components/project-form-fields.tsx
new file mode 100644
index 0000000..81a00e0
--- /dev/null
+++ b/apps/web/src/features/admin-projects/components/project-form-fields.tsx
@@ -0,0 +1,100 @@
+import { Suspense } from 'react'
+import type { ChangeEvent, ComponentProps, ReactNode } from 'react'
+
+import { Field, FieldError, FieldLabel } from '@altstack/ui/components/field'
+import { Input } from '@altstack/ui/components/input'
+import { Textarea } from '@altstack/ui/components/textarea'
+
+import { CategoryCombobox } from '#/components/category-combobox'
+import { CategoryComboboxSkeleton } from '#/components/workspace-skeletons'
+import { SectionHeading } from '#/features/admin-projects/components/project-form-preview'
+
+type ValidationProps = {
+	invalid: boolean
+	errors: ComponentProps<typeof FieldError>['errors']
+}
+
+export function ProjectDescriptionSection({
+	children,
+}: {
+	children: ReactNode
+}) {
+	return (
+		<section className="space-y-4">
+			<SectionHeading
+				title="Description"
+				description="Short copy shown in the catalogue listing."
+			/>
+			{children}
+		</section>
+	)
+}
+
+export function ProjectCopyField({
+	name,
+	value,
+	onBlur,
+	onChange,
+	invalid,
+	errors,
+}: ValidationProps & {
+	name: 'tagline' | 'description'
+	value: string | null | undefined
+	onBlur: () => void
+	onChange: (value: string) => void
+}) {
+	const tagline = name === 'tagline'
+	const inputProps = {
+		id: name,
+		name,
+		value: value ?? '',
+		onBlur,
+		onChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
+			onChange(event.target.value),
+		'aria-invalid': invalid,
+		placeholder: tagline ? 'Tagline' : 'Short description',
+	}
+	return (
+		<Field data-invalid={invalid}>
+			<div className="flex items-baseline justify-between gap-2">
+				<FieldLabel htmlFor={name}>
+					{tagline ? 'Tagline' : 'Description'}
+				</FieldLabel>
+				<span className="shrink-0 text-xs text-muted-foreground tabular-nums">
+					{(value ?? '').length}/{tagline ? 100 : 300}
+				</span>
+			</div>
+			{tagline ? <Input {...inputProps} /> : <Textarea {...inputProps} />}
+			{invalid && <FieldError errors={errors} />}
+		</Field>
+	)
+}
+
+export function ProjectCategoriesSection({
+	id,
+	value,
+	onValueChange,
+	invalid,
+	errors,
+}: ValidationProps & {
+	id: string
+	value: Array<string>
+	onValueChange: (value: Array<string>) => void
+}) {
+	return (
+		<section className="space-y-4">
+			<SectionHeading title="Categories" />
+			<Field data-invalid={invalid}>
+				<FieldLabel htmlFor={id}>Categories</FieldLabel>
+				<Suspense fallback={<CategoryComboboxSkeleton />}>
+					<CategoryCombobox
+						id={id}
+						value={value}
+						onValueChange={onValueChange}
+					/>
+				</Suspense>
+				{invalid && <FieldError errors={errors} />}
+			</Field>
+		</section>
+	)
+}
diff --git a/apps/web/src/features/admin-projects/components/project-form-header.tsx b/apps/web/src/features/admin-projects/components/project-form-header.tsx
new file mode 100644
index 0000000..115a098
--- /dev/null
+++ b/apps/web/src/features/admin-projects/components/project-form-header.tsx
@@ -0,0 +1,26 @@
+import { IconArrowLeft } from '@tabler/icons-react'
+import { Link } from '@tanstack/react-router'
+
+export function ProjectFormHeader({
+	title,
+	description,
+}: {
+	title: string
+	description: string
+}) {
+	return (
+		<div className="space-y-3">
+			<Link
+				to="/projects"
+				className="inline-flex items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
+			>
+				<IconArrowLeft className="size-4" />
+				Projects
+			</Link>
+			<div className="space-y-1">
+				<h1 className="text-xl font-semibold tracking-tight">{title}</h1>
+				<p className="text-sm text-muted-foreground">{description}</p>
+			</div>
+		</div>
+	)
+}
diff --git a/apps/web/src/features/admin-projects/components/project-form-preview.tsx b/apps/web/src/features/admin-projects/components/project-form-preview.tsx
index 742fbc6..3a0481c 100644
--- a/apps/web/src/features/admin-projects/components/project-form-preview.tsx
+++ b/apps/web/src/features/admin-projects/components/project-form-preview.tsx
@@ -1,4 +1,5 @@
 import { IconBrandGithub, IconPhoto } from '@tabler/icons-react'
+import type { ReactNode } from 'react'
 
 import { Card, CardContent } from '@altstack/ui/components/card'
 
@@ -22,6 +23,22 @@ function previewText(values: ProjectPreviewValues) {
 	return { name, slug, tagline, description, repository }
 }
 
+export function ProjectPreviewPanel({ children }: { children: ReactNode }) {
+	return (
+		<aside className="min-w-0 lg:sticky lg:top-16">
+			<div className="space-y-3">
+				<div className="space-y-1">
+					<h2 className="text-sm font-semibold">Preview</h2>
+					<p className="text-sm text-muted-foreground">
+						How this project will appear in the catalogue.
+					</p>
+				</div>
+				{children}
+			</div>
+		</aside>
+	)
+}
+
 export function SectionHeading({
 	title,
 	description,
diff --git a/apps/web/src/routes/_main/admin.activity.tsx b/apps/web/src/routes/_main/admin.activity.tsx
index dc41b39..e434508 100644
--- a/apps/web/src/routes/_main/admin.activity.tsx
+++ b/apps/web/src/routes/_main/admin.activity.tsx
@@ -37,12 +37,11 @@ import {
 	Table,
 	TableBody,
 	TableCell,
-	TableHead,
-	TableHeader,
 	TableRow,
 } from '@altstack/ui/components/table'
 
 import { QueryBoundary } from '#/components/query-boundary'
+import { TableColumnHeadings } from '#/components/table-column-headings'
 import {
 	AdminEmpty,
 	AdminError,
@@ -295,15 +294,9 @@ function ActivityEvents({ events, search, navigate }: ActivityEventsProps) {
 	return (
 		<div className="overflow-hidden rounded-xl border">
 			<Table aria-label="Recorded audit activity">
-				<TableHeader>
-					<TableRow>
-						<TableHead>Action</TableHead>
-						<TableHead>Actor</TableHead>
-						<TableHead>Target</TableHead>
-						<TableHead>Time</TableHead>
-						<TableHead>Details</TableHead>
-					</TableRow>
-				</TableHeader>
+				<TableColumnHeadings
+					headings={['Action', 'Actor', 'Target', 'Time', 'Details']}
+				/>
 				<TableBody>
 					{events.map((event) => (
 						<TableRow key={event.id}>
diff --git a/apps/web/src/routes/_main/admin.blogs/index.tsx b/apps/web/src/routes/_main/admin.blogs/index.tsx
index 8c30b28..8f7adba 100644
--- a/apps/web/src/routes/_main/admin.blogs/index.tsx
+++ b/apps/web/src/routes/_main/admin.blogs/index.tsx
@@ -1,6 +1,4 @@
 import {
-	IconArrowLeft,
-	IconArrowRight,
 	IconExternalLink,
 	IconArticle,
 	IconPencil,
@@ -46,6 +44,7 @@ import { toast } from '@altstack/ui/components/toast'
 
 import { PublicError } from '#/components/public-page-state'
 import { QueryBoundary } from '#/components/query-boundary'
+import { ListPaginationControls } from '#/features/admin-dashboard/components/list-pagination-controls'
 import { adminBlogQueries } from '#/features/blogs/queries'
 import { orpc } from '#/utils/orpc'
 
@@ -275,29 +274,14 @@ function BlogList() {
 							Showing {(page - 1) * 20 + 1}–{Math.min(page * 20, total)} of{' '}
 							{total}
 						</p>
-						<div className="flex items-center gap-3">
-							<Button
-								variant="outline"
-								size="sm"
-								disabled={page === 1 || query.isFetching}
-								onClick={() => startTransition(() => setPage(page - 1))}
-							>
-								<IconArrowLeft data-icon="inline-start" />
-								Previous
-							</Button>
-							<span className="text-xs text-muted-foreground">
-								{page} / {pageCount}
-							</span>
-							<Button
-								variant="outline"
-								size="sm"
-								disabled={page >= pageCount || query.isFetching}
-								onClick={() => startTransition(() => setPage(page + 1))}
-							>
-								Next
-								<IconArrowRight data-icon="inline-end" />
-							</Button>
-						</div>
+						<ListPaginationControls
+							page={page}
+							pageCount={pageCount}
+							fetching={query.isFetching}
+							onPageChange={(nextPage) =>
+								startTransition(() => setPage(nextPage))
+							}
+						/>
 					</nav>
 				)}
 			</section>
diff --git a/apps/web/src/routes/_main/admin.collections/index.tsx b/apps/web/src/routes/_main/admin.collections/index.tsx
index 1614d26..d2de89f 100644
--- a/apps/web/src/routes/_main/admin.collections/index.tsx
+++ b/apps/web/src/routes/_main/admin.collections/index.tsx
@@ -1,6 +1,4 @@
 import {
-	IconArrowLeft,
-	IconArrowRight,
 	IconExternalLink,
 	IconFolders,
 	IconPencil,
@@ -48,6 +46,7 @@ import { toast } from '@altstack/ui/components/toast'
 
 import { PublicError } from '#/components/public-page-state'
 import { QueryBoundary } from '#/components/query-boundary'
+import { ListPaginationControls } from '#/features/admin-dashboard/components/list-pagination-controls'
 import { adminCollectionQueries } from '#/features/collections/queries'
 import { publicContentQueryKey } from '#/features/public-content/model'
 import { orpc } from '#/utils/orpc'
@@ -282,29 +281,14 @@ function CollectionList() {
 							Showing {(page - 1) * 20 + 1}–{Math.min(page * 20, total)} of{' '}
 							{total}
 						</p>
-						<div className="flex items-center gap-3">
-							<Button
-								variant="outline"
-								size="sm"
-								disabled={page === 1 || query.isFetching}
-								onClick={() => startTransition(() => setPage(page - 1))}
-							>
-								<IconArrowLeft data-icon="inline-start" />
-								Previous
-							</Button>
-							<span className="text-xs text-muted-foreground">
-								{page} / {pageCount}
-							</span>
-							<Button
-								variant="outline"
-								size="sm"
-								disabled={page >= pageCount || query.isFetching}
-								onClick={() => startTransition(() => setPage(page + 1))}
-							>
-								Next
-								<IconArrowRight data-icon="inline-end" />
-							</Button>
-						</div>
+						<ListPaginationControls
+							page={page}
+							pageCount={pageCount}
+							fetching={query.isFetching}
+							onPageChange={(nextPage) =>
+								startTransition(() => setPage(nextPage))
+							}
+						/>
 					</nav>
 				)}
 			</section>
diff --git a/apps/web/src/routes/_main/admin.users/index.tsx b/apps/web/src/routes/_main/admin.users/index.tsx
index 49132e3..1bb93fc 100644
--- a/apps/web/src/routes/_main/admin.users/index.tsx
+++ b/apps/web/src/routes/_main/admin.users/index.tsx
@@ -21,12 +21,11 @@ import {
 	Table,
 	TableBody,
 	TableCell,
-	TableHead,
-	TableHeader,
 	TableRow,
 } from '@altstack/ui/components/table'
 
 import { PublicError } from '#/components/public-page-state'
+import { TableColumnHeadings } from '#/components/table-column-headings'
 import { adminUserQueries } from '#/features/admin-users/queries'
 import { seoHead } from '#/features/seo/meta'
 
@@ -140,15 +139,9 @@ function UsersPage() {
 				Refresh users
 			</Button>
 			<Table aria-label="Users">
-				<TableHeader>
-					<TableRow>
-						<TableHead>Name</TableHead>
-						<TableHead>Email</TableHead>
-						<TableHead>Account role</TableHead>
-						<TableHead>Status</TableHead>
-						<TableHead>Actions</TableHead>
-					</TableRow>
-				</TableHeader>
+				<TableColumnHeadings
+					headings={['Name', 'Email', 'Account role', 'Status', 'Actions']}
+				/>
 				<TableBody>
 					{users.map((user) => (
 						<TableRow key={user.id}>
diff --git a/apps/web/src/routes/_main/projects/$id.edit.tsx b/apps/web/src/routes/_main/projects/$id.edit.tsx
index bc6e74b..1365840 100644
--- a/apps/web/src/routes/_main/projects/$id.edit.tsx
+++ b/apps/web/src/routes/_main/projects/$id.edit.tsx
@@ -1,8 +1,8 @@
-import { IconArrowLeft } from '@tabler/icons-react'
 import { createFileRoute, Link } from '@tanstack/react-router'
 
 import { ProjectFormPending } from '#/components/workspace-skeletons'
 import { EditProjectForm } from '#/features/admin-projects/components/edit-project-form'
+import { ProjectFormHeader } from '#/features/admin-projects/components/project-form-header'
 import { ProjectReviewHistory } from '#/features/admin-projects/components/project-review-history'
 import {
 	adminProjectQueries,
@@ -25,22 +25,10 @@ function RouteComponent() {
 
 	return (
 		<div className="mx-auto w-full max-w-6xl space-y-6 px-4 py-6">
-			<div className="space-y-3">
-				<Link
-					to="/projects"
-					className="inline-flex items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
-				>
-					<IconArrowLeft className="size-4" />
-					Projects
-				</Link>
-
-				<div className="space-y-1">
-					<h1 className="text-xl font-semibold tracking-tight">Edit project</h1>
-					<p className="text-sm text-muted-foreground">
-						Edit project details. The preview updates as you type.
-					</p>
-				</div>
-			</div>
+			<ProjectFormHeader
+				title="Edit project"
+				description="Edit project details. The preview updates as you type."
+			/>
 
 			<Link
 				to="/managed/$id/members"

From 89dd3146a0443d0506d3c480c06842a6a66a61ba Mon Sep 17 00:00:00 2001
From: mrboxs <rizkywanda200155@gmail.com>
Date: Tue, 10 Nov 2026 17:39:43 +0700
Subject: [PATCH 4/4] test(web): verify accessible ad admin selects

- Assert native labels, combobox names, and selected values
- Document the React Doctor false-positive coverage
---
 .react-doctor/false-positives.md  |  6 ++++++
 apps/web/tests/ad-orders.test.tsx | 12 +++++++++++-
 apps/web/tests/ads-admin.test.tsx | 22 ++++++++++++++++++++--
 3 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/.react-doctor/false-positives.md b/.react-doctor/false-positives.md
index f1642ba..44088bc 100644
--- a/.react-doctor/false-positives.md
+++ b/.react-doctor/false-positives.md
@@ -20,6 +20,12 @@ storage access elsewhere.
 `ad-order-status` is a false positive while each select's ID matches its adjacent
 `FieldLabel.htmlFor`. The shared FieldLabel renders a native label. The advertising
 admin and order tests exercise these controls using their accessible labels.
+Their role-based queries must also find the visible selects as `combobox` with
+the names `Tier`, `Status` and `Status`. Each select must have exactly one native
+label whose `control` resolves to that select. The tests check that the same
+accessible names remain after changing the campaign tier/status or order filter,
+and that the selected values update. This does not exempt custom labels that
+fail to forward `htmlFor` or selects with missing or duplicate IDs.
 
 ## Member project form drafts
 
diff --git a/apps/web/tests/ad-orders.test.tsx b/apps/web/tests/ad-orders.test.tsx
index 3a11be6..3635dac 100644
--- a/apps/web/tests/ad-orders.test.tsx
+++ b/apps/web/tests/ad-orders.test.tsx
@@ -580,6 +580,12 @@ describe('admin manual confirmation and material review', () => {
 		]
 		mount(<AdvertisingAdmin />)
 		await screen.findByText('second@example.test')
+		const statusFilter = screen.getByRole<HTMLSelectElement>('combobox', {
+			name: 'Status',
+		})
+		expect(statusFilter.labels).toHaveLength(1)
+		expect(statusFilter.labels[0].control).toBe(statusFilter)
+		expect(statusFilter.value).toBe('all')
 		expect(screen.queryByLabelText('Initial payment reference')).toBeNull()
 		fireEvent.click(screen.getByRole('button', { name: 'Review order' }))
 		expect(screen.getByLabelText('Initial payment reference')).toBeTruthy()
@@ -588,9 +594,13 @@ describe('admin manual confirmation and material review', () => {
 		expect(
 			screen.getAllByRole('button', { name: 'Close details' })
 		).toHaveLength(1)
-		fireEvent.change(screen.getByLabelText('Status'), {
+		fireEvent.change(statusFilter, {
 			target: { value: 'attention' },
 		})
+		expect(screen.getByRole('combobox', { name: 'Status' })).toHaveProperty(
+			'value',
+			'attention'
+		)
 		expect(screen.queryByText('second@example.test')).toBeNull()
 		fireEvent.change(screen.getByLabelText('Search orders'), {
 			target: { value: 'second' },
diff --git a/apps/web/tests/ads-admin.test.tsx b/apps/web/tests/ads-admin.test.tsx
index 9d4d763..581f1b4 100644
--- a/apps/web/tests/ads-admin.test.tsx
+++ b/apps/web/tests/ads-admin.test.tsx
@@ -123,12 +123,30 @@ describe('admin campaign form', () => {
 		]) {
 			fireEvent.change(screen.getByLabelText(name), { target: { value } })
 		}
-		fireEvent.change(screen.getByLabelText('Tier'), {
+		const tier = screen.getByRole<HTMLSelectElement>('combobox', {
+			name: 'Tier',
+		})
+		const status = screen.getByRole<HTMLSelectElement>('combobox', {
+			name: 'Status',
+		})
+		expect(tier.labels).toHaveLength(1)
+		expect(status.labels).toHaveLength(1)
+		expect(tier.labels[0].control).toBe(tier)
+		expect(status.labels[0].control).toBe(status)
+		fireEvent.change(tier, {
 			target: { value: 'tier3' },
 		})
-		fireEvent.change(screen.getByLabelText('Status'), {
+		fireEvent.change(status, {
 			target: { value: 'active' },
 		})
+		expect(screen.getByRole('combobox', { name: 'Tier' })).toHaveProperty(
+			'value',
+			'tier3'
+		)
+		expect(screen.getByRole('combobox', { name: 'Status' })).toHaveProperty(
+			'value',
+			'active'
+		)
 		fireEvent.click(screen.getByRole('button', { name: 'Upload test logo' }))
 		fireEvent.click(
 			screen.getByRole('button', { name: 'Upload test wordmark' })