From 1fc98e6e16d42d807bb46fdc6b6e91e30f027de5 Mon Sep 17 00:00:00 2001
From: Vojta Holik <vojta@egghead.io>
Date: Wed, 8 Jan 2025 14:43:49 +0100
Subject: [PATCH] feat(aih): edit and create lists

---
 .../_components/edit-list-form-metadata.tsx   | 118 +++++
 .../edit/_components/edit-list-form.tsx       | 104 ++++
 .../lists/[slug]/edit/_components/hit.tsx     |  40 ++
 .../edit/_components/lesson-list/data/tree.ts | 379 ++++++++++++++
 .../lesson-list/pieces/tree/constants.ts      |   1 +
 .../lesson-list/pieces/tree/tree-context.tsx  |  54 ++
 .../lesson-list/pieces/tree/tree-item.tsx     | 463 ++++++++++++++++++
 .../edit/_components/lesson-list/tree.tsx     | 311 ++++++++++++
 .../edit/_components/list-resources-edit.tsx  | 197 ++++++++
 .../_components/resources-infinite-hits.tsx   |  97 ++++
 .../edit/_components/selection-context.tsx    |  50 ++
 .../app/(content)/lists/[slug]/edit/page.tsx  |  51 ++
 .../lists/_components/create-list-form.tsx    |  60 +++
 .../lists/_components/lists-table.tsx         |  58 +++
 apps/ai-hero/src/app/(content)/lists/page.tsx |  33 ++
 .../app/(content)/posts/[slug]/edit/page.tsx  |   3 +
 .../posts/_components/add-to-list.tsx         | 139 ++++++
 .../_components/edit-post-form-metadata.tsx   |   8 +
 .../posts/_components/edit-post-form.tsx      |   5 +
 .../q/_components/instantsearch/searchbox.tsx |   9 +-
 .../pages/_components/edit-pages-form.tsx     |   2 +-
 apps/ai-hero/src/lib/lists-query.ts           | 158 ++++++
 apps/ai-hero/src/lib/lists.ts                 |  24 +
 apps/ai-hero/src/lib/posts-query.ts           |  16 +
 .../pages/_components/edit-pages-form.tsx     |   2 +-
 .../edit-resources-form-desktop.tsx           |   3 +
 .../panels/edit-resources-body-panel.tsx      |   9 +-
 27 files changed, 2387 insertions(+), 7 deletions(-)
 create mode 100644 apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/edit-list-form-metadata.tsx
 create mode 100644 apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/edit-list-form.tsx
 create mode 100644 apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/hit.tsx
 create mode 100644 apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/lesson-list/data/tree.ts
 create mode 100644 apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/lesson-list/pieces/tree/constants.ts
 create mode 100644 apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/lesson-list/pieces/tree/tree-context.tsx
 create mode 100644 apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/lesson-list/pieces/tree/tree-item.tsx
 create mode 100644 apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/lesson-list/tree.tsx
 create mode 100644 apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/list-resources-edit.tsx
 create mode 100644 apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/resources-infinite-hits.tsx
 create mode 100644 apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/selection-context.tsx
 create mode 100644 apps/ai-hero/src/app/(content)/lists/[slug]/edit/page.tsx
 create mode 100644 apps/ai-hero/src/app/(content)/lists/_components/create-list-form.tsx
 create mode 100644 apps/ai-hero/src/app/(content)/lists/_components/lists-table.tsx
 create mode 100644 apps/ai-hero/src/app/(content)/lists/page.tsx
 create mode 100644 apps/ai-hero/src/app/(content)/posts/_components/add-to-list.tsx
 create mode 100644 apps/ai-hero/src/lib/lists-query.ts
 create mode 100644 apps/ai-hero/src/lib/lists.ts

diff --git a/apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/edit-list-form-metadata.tsx b/apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/edit-list-form-metadata.tsx
new file mode 100644
index 000000000..35a585f85
--- /dev/null
+++ b/apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/edit-list-form-metadata.tsx
@@ -0,0 +1,118 @@
+import * as React from 'react'
+import { useRouter } from 'next/navigation'
+import type { List, ListSchema } from '@/lib/lists'
+import type { UseFormReturn } from 'react-hook-form'
+import { z } from 'zod'
+
+import { VideoResource } from '@coursebuilder/core/schemas/video-resource'
+import {
+	Button,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+	Input,
+	Textarea,
+} from '@coursebuilder/ui'
+import { useSocket } from '@coursebuilder/ui/hooks/use-socket'
+import { MetadataFieldState } from '@coursebuilder/ui/resources-crud/metadata-fields/metadata-field-state'
+import { MetadataFieldVisibility } from '@coursebuilder/ui/resources-crud/metadata-fields/metadata-field-visibility'
+import AdvancedTagSelector from '@coursebuilder/ui/resources-crud/tag-selector'
+
+export const ListMetadataFormFields: React.FC<{
+	form: UseFormReturn<z.infer<typeof ListSchema>>
+	list: List
+}> = ({ form, list }) => {
+	const router = useRouter()
+
+	return (
+		<>
+			<FormField
+				control={form.control}
+				name="id"
+				render={({ field }) => <Input type="hidden" {...field} />}
+			/>
+
+			<FormField
+				control={form.control}
+				name="fields.title"
+				render={({ field }) => (
+					<FormItem className="px-5">
+						<FormLabel className="text-lg font-bold">Title</FormLabel>
+						<FormDescription>
+							A title should summarize the post and explain what it is about
+							clearly.
+						</FormDescription>
+						<Input {...field} />
+						<FormMessage />
+					</FormItem>
+				)}
+			/>
+			<FormField
+				control={form.control}
+				name="fields.slug"
+				render={({ field }) => (
+					<FormItem className="px-5">
+						<FormLabel className="text-lg font-bold">Slug</FormLabel>
+						<FormDescription>Short with keywords is best.</FormDescription>
+						<Input {...field} />
+						<FormMessage />
+					</FormItem>
+				)}
+			/>
+			<FormField
+				control={form.control}
+				name="fields.description"
+				render={({ field }) => (
+					<FormItem className="px-5">
+						<FormLabel className="text-lg font-bold">
+							SEO Description ({`${field.value?.length ?? '0'} / 160`})
+						</FormLabel>
+						<FormDescription>
+							A short snippet that summarizes the post in under 160 characters.
+							Keywords should be included to support SEO.
+						</FormDescription>
+						<Textarea {...field} value={field.value ?? ''} />
+						{field.value && field.value.length > 160 && (
+							<FormMessage>
+								Your description is longer than 160 characters
+							</FormMessage>
+						)}
+						<FormMessage />
+					</FormItem>
+				)}
+			/>
+			<MetadataFieldVisibility form={form} />
+			<MetadataFieldState form={form} />
+			<FormField
+				control={form.control}
+				name="fields.github"
+				render={({ field }) => (
+					<FormItem className="px-5">
+						<FormLabel className="text-lg font-bold">GitHub</FormLabel>
+						<FormDescription>
+							Direct link to the GitHub file associated with the post.
+						</FormDescription>
+						<Input {...field} value={field.value ?? ''} />
+						<FormMessage />
+					</FormItem>
+				)}
+			/>
+			<FormField
+				control={form.control}
+				name="fields.gitpod"
+				render={({ field }) => (
+					<FormItem className="px-5">
+						<FormLabel className="text-lg font-bold">Gitpod</FormLabel>
+						<FormDescription>
+							Gitpod link to start a new workspace with the post.
+						</FormDescription>
+						<Input {...field} value={field.value ?? ''} />
+						<FormMessage />
+					</FormItem>
+				)}
+			/>
+		</>
+	)
+}
diff --git a/apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/edit-list-form.tsx b/apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/edit-list-form.tsx
new file mode 100644
index 000000000..af5a0079f
--- /dev/null
+++ b/apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/edit-list-form.tsx
@@ -0,0 +1,104 @@
+'use client'
+
+import * as React from 'react'
+import { PostMetadataFormFields } from '@/app/(content)/posts/_components/edit-post-form-metadata'
+import { ImageResourceUploader } from '@/components/image-uploader/image-resource-uploader'
+import { env } from '@/env.mjs'
+import { useIsMobile } from '@/hooks/use-is-mobile'
+import { sendResourceChatMessage } from '@/lib/ai-chat-query'
+import { List, ListSchema } from '@/lib/lists'
+import { Post, PostSchema } from '@/lib/posts'
+import { autoUpdatePost, updatePost } from '@/lib/posts-query'
+import type { Tag } from '@/lib/tags'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { ImagePlusIcon } from 'lucide-react'
+import { useSession } from 'next-auth/react'
+import { useTheme } from 'next-themes'
+import { useForm, type UseFormReturn } from 'react-hook-form'
+import { z } from 'zod'
+
+import { ContentResourceSchema } from '@coursebuilder/core/schemas'
+import { VideoResource } from '@coursebuilder/core/schemas/video-resource'
+import { EditResourcesFormDesktop } from '@coursebuilder/ui/resources-crud/edit-resources-form-desktop'
+
+import { ListMetadataFormFields } from './edit-list-form-metadata'
+import ListResoucesEdit from './list-resources-edit'
+
+// import { MobileEditPostForm } from './edit-post-form-mobile'
+
+const NewPostFormSchema = z.object({
+	title: z.string().min(2).max(90),
+	body: z.string().nullish(),
+	visibility: z.enum(['public', 'unlisted', 'private']),
+	description: z.string().nullish(),
+	github: z.string().nullish(),
+	gitpod: z.string().nullish(),
+})
+
+export type EditListFormProps = {
+	list: List
+	form: UseFormReturn<z.infer<typeof ListSchema>>
+	children?: React.ReactNode
+	availableWorkflows?: { value: string; label: string; default?: boolean }[]
+	theme?: string
+}
+
+export function EditListForm({ list }: Omit<EditListFormProps, 'form'>) {
+	const { forcedTheme: theme } = useTheme()
+	const session = useSession()
+	const form = useForm<z.infer<typeof ListSchema>>({
+		resolver: zodResolver(NewPostFormSchema),
+		defaultValues: {
+			id: list.id,
+			fields: {
+				title: list.fields?.title,
+				body: list.fields?.body,
+				slug: list.fields?.slug,
+				visibility: list.fields?.visibility || 'public',
+				state: list.fields?.state || 'draft',
+				description: list.fields?.description ?? '',
+				github: list.fields?.github ?? '',
+				gitpod: list.fields?.gitpod ?? '',
+			},
+		},
+	})
+	const isMobile = useIsMobile()
+
+	return (
+		<EditResourcesFormDesktop
+			resource={list}
+			resourceSchema={ListSchema}
+			getResourcePath={(slug) => `/${slug}`}
+			updateResource={updatePost}
+			autoUpdateResource={autoUpdatePost}
+			form={form}
+			bodyPanelSlot={<ListResoucesEdit list={list} />}
+			availableWorkflows={[]}
+			sendResourceChatMessage={sendResourceChatMessage}
+			hostUrl={env.NEXT_PUBLIC_PARTY_KIT_URL}
+			user={session?.data?.user}
+			theme={theme}
+			onResourceBodyChange={() => {}}
+			tools={[
+				{ id: 'assistant' },
+				{
+					id: 'media',
+					icon: () => (
+						<ImagePlusIcon strokeWidth={1.5} size={24} width={18} height={18} />
+					),
+					toolComponent: (
+						<ImageResourceUploader
+							key={'image-uploader'}
+							belongsToResourceId={list.id}
+							uploadDirectory={`posts`}
+						/>
+					),
+				},
+			]}
+		>
+			<React.Suspense fallback={<div>loading</div>}>
+				<ListMetadataFormFields form={form} list={list} />
+			</React.Suspense>
+		</EditResourcesFormDesktop>
+	)
+}
diff --git a/apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/hit.tsx b/apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/hit.tsx
new file mode 100644
index 000000000..f7ad0c7c9
--- /dev/null
+++ b/apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/hit.tsx
@@ -0,0 +1,40 @@
+'use client'
+
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import { addPostToList } from '@/lib/lists-query'
+import type { TypesenseResource } from '@/lib/typesense'
+
+import { Button } from '@coursebuilder/ui'
+
+import type { TreeAction } from './lesson-list/data/tree'
+import { useSelection } from './selection-context'
+
+export default function Hit({
+	hit,
+	listId,
+	updateTreeState,
+}: {
+	hit: TypesenseResource
+	listId: string
+	updateTreeState: React.ActionDispatch<[action: TreeAction]>
+}) {
+	const { toggleSelection, isSelected } = useSelection()
+
+	return (
+		<li className={`${isSelected(hit.id) ? 'bg-muted' : ''}`}>
+			<button
+				type="button"
+				className="hover:bg-muted/50 group flex w-full flex-row items-baseline justify-between gap-2 px-5 py-3 sm:py-3"
+				onClick={() => toggleSelection(hit)}
+			>
+				<div className="flex items-center gap-2">
+					<span className="pr-5 font-medium sm:truncate">{hit.title}</span>
+				</div>
+				<div className="text-muted-foreground fon-normal flex flex-shrink-0 items-center gap-3 pl-7 text-xs capitalize opacity-60 sm:pl-0">
+					<span>{hit.type}</span>
+				</div>
+			</button>
+		</li>
+	)
+}
diff --git a/apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/lesson-list/data/tree.ts b/apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/lesson-list/data/tree.ts
new file mode 100644
index 000000000..8851f8dfd
--- /dev/null
+++ b/apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/lesson-list/data/tree.ts
@@ -0,0 +1,379 @@
+import type { Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item'
+import invariant from 'tiny-invariant'
+
+import { ContentResource } from '@coursebuilder/core/schemas'
+
+export type TreeItem = {
+	id: string
+	label?: string
+	isDraft?: boolean
+	type?: string
+	children: TreeItem[]
+	isOpen?: boolean
+	itemData?: {
+		position: number
+		resource: ContentResource
+		resourceId: string
+		resourceOfId: string
+	}
+}
+
+export type TreeState = {
+	lastAction: TreeAction | null
+	data: TreeItem[]
+}
+
+export function getInitialTreeState(initialData?: TreeItem[]): TreeState {
+	return { data: initialData ?? getInitialData(), lastAction: null }
+}
+
+export function getInitialData(): TreeItem[] {
+	return [
+		{
+			id: '1',
+			isOpen: true,
+
+			children: [
+				{
+					id: '1.3',
+					isOpen: true,
+
+					children: [
+						{
+							id: '1.3.1',
+							children: [],
+						},
+						{
+							id: '1.3.2',
+							isDraft: true,
+							children: [],
+						},
+					],
+				},
+				{ id: '1.4', children: [] },
+			],
+		},
+		{
+			id: '2',
+			isOpen: true,
+			children: [
+				{
+					id: '2.3',
+					isOpen: true,
+
+					children: [
+						{
+							id: '2.3.1',
+							children: [],
+						},
+						{
+							id: '2.3.2',
+							children: [],
+						},
+					],
+				},
+			],
+		},
+	]
+}
+
+export type TreeAction =
+	| {
+			type: 'instruction'
+			instruction: Instruction
+			itemId: string
+			targetId: string
+	  }
+	| {
+			type: 'toggle'
+			itemId: string
+	  }
+	| {
+			type: 'add-item'
+			item: TreeItem
+			itemId: string
+	  }
+	| {
+			type: 'remove-item'
+			itemId: string
+	  }
+	| {
+			type: 'expand'
+			itemId: string
+	  }
+	| {
+			type: 'collapse'
+			itemId: string
+	  }
+	| { type: 'modal-move'; itemId: string; targetId: string; index: number }
+
+export const tree = {
+	remove(data: TreeItem[], id: string): TreeItem[] {
+		return data
+			.filter((item) => item.id !== id)
+			.map((item) => {
+				if (tree.hasChildren(item)) {
+					return {
+						...item,
+						children: tree.remove(item.children, id),
+					}
+				}
+				return item
+			})
+	},
+	insertBefore(
+		data: TreeItem[],
+		targetId: string,
+		newItem: TreeItem,
+	): TreeItem[] {
+		return data.flatMap((item) => {
+			if (item.id === targetId) {
+				return [newItem, item]
+			}
+			if (tree.hasChildren(item)) {
+				return {
+					...item,
+					children: tree.insertBefore(item.children, targetId, newItem),
+				}
+			}
+			return item
+		})
+	},
+	insertAfter(
+		data: TreeItem[],
+		targetId: string,
+		newItem: TreeItem,
+	): TreeItem[] {
+		return data.flatMap((item) => {
+			if (item.id === targetId) {
+				return [item, newItem]
+			}
+
+			if (tree.hasChildren(item)) {
+				return {
+					...item,
+					children: tree.insertAfter(item.children, targetId, newItem),
+				}
+			}
+
+			return item
+		})
+	},
+	insertChild(
+		data: TreeItem[],
+		targetId: string,
+		newItem: TreeItem,
+	): TreeItem[] {
+		return data.flatMap((item) => {
+			if (item.id === targetId) {
+				// already a parent: add as first child
+				return {
+					...item,
+					// opening item so you can see where item landed
+					isOpen: true,
+					children: [newItem, ...item.children],
+				}
+			}
+
+			if (!tree.hasChildren(item)) {
+				return item
+			}
+
+			return {
+				...item,
+				children: tree.insertChild(item.children, targetId, newItem),
+			}
+		})
+	},
+	find(data: TreeItem[], itemId: string): TreeItem | undefined {
+		for (const item of data) {
+			if (item.id === itemId) {
+				return item
+			}
+
+			if (tree.hasChildren(item)) {
+				const result = tree.find(item.children, itemId)
+				if (result) {
+					return result
+				}
+			}
+		}
+	},
+	getPathToItem({
+		current,
+		targetId,
+		parentIds = [],
+	}: {
+		current: TreeItem[]
+		targetId: string
+		parentIds?: string[]
+	}): string[] | undefined {
+		for (const item of current) {
+			if (item.id === targetId) {
+				return parentIds
+			}
+			const nested = tree.getPathToItem({
+				current: item.children,
+				targetId: targetId,
+				parentIds: [...parentIds, item.id],
+			})
+			if (nested) {
+				return nested
+			}
+		}
+	},
+	hasChildren(item: TreeItem): boolean {
+		return item.children.length > 0
+	},
+}
+
+export function treeStateReducer(
+	state: TreeState,
+	action: TreeAction,
+): TreeState {
+	return {
+		data: dataReducer(state.data, action),
+		lastAction: action,
+	}
+}
+
+const dataReducer = (data: TreeItem[], action: TreeAction) => {
+	if (action.type === 'add-item') {
+		return [...data, action.item]
+	}
+
+	if (action.type === 'remove-item') {
+		return tree.remove(data, action.itemId)
+	}
+
+	const item = tree.find(data, action.itemId)
+	if (!item) {
+		return data
+	}
+
+	if (action.type === 'instruction') {
+		const instruction = action.instruction
+
+		if (instruction.type === 'reparent') {
+			const path = tree.getPathToItem({
+				current: data,
+				targetId: action.targetId,
+			})
+			invariant(path)
+			const desiredId = path[instruction.desiredLevel] as string
+			let result = tree.remove(data, action.itemId)
+			result = tree.insertAfter(result, desiredId, item)
+			return result
+		}
+
+		// the rest of the actions require you to drop on something else
+		if (action.itemId === action.targetId) {
+			return data
+		}
+
+		if (instruction.type === 'reorder-above') {
+			let result = tree.remove(data, action.itemId)
+			result = tree.insertBefore(result, action.targetId, item)
+			return result
+		}
+
+		if (instruction.type === 'reorder-below') {
+			let result = tree.remove(data, action.itemId)
+			result = tree.insertAfter(result, action.targetId, item)
+			return result
+		}
+
+		if (instruction.type === 'make-child') {
+			let result = tree.remove(data, action.itemId)
+			result = tree.insertChild(result, action.targetId, item)
+			return result
+		}
+
+		console.warn('TODO: action not implemented', instruction)
+
+		return data
+	}
+
+	function toggle(item: TreeItem): TreeItem {
+		if (!tree.hasChildren(item)) {
+			return item
+		}
+
+		if (item.id === action.itemId) {
+			return { ...item, isOpen: !item.isOpen }
+		}
+
+		return { ...item, children: item.children.map(toggle) }
+	}
+
+	if (action.type === 'toggle') {
+		return data.map(toggle)
+	}
+
+	if (action.type === 'expand') {
+		if (tree.hasChildren(item) && !item.isOpen) {
+			return data.map(toggle)
+		}
+		return data
+	}
+
+	if (action.type === 'collapse') {
+		if (tree.hasChildren(item) && item.isOpen) {
+			return data.map(toggle)
+		}
+		return data
+	}
+
+	if (action.type === 'modal-move') {
+		let result = tree.remove(data, item.id)
+
+		const siblingItems = getChildItems(result, action.targetId)
+
+		if (siblingItems.length === 0) {
+			if (action.targetId === '') {
+				/**
+				 * If the target is the root level, and there are no siblings, then
+				 * the item is the only thing in the root level.
+				 */
+				result = [item]
+			} else {
+				/**
+				 * Otherwise for deeper levels that have no children, we need to
+				 * use `insertChild` instead of inserting relative to a sibling.
+				 */
+				result = tree.insertChild(result, action.targetId, item)
+			}
+		} else if (action.index === siblingItems.length) {
+			const relativeTo = siblingItems[siblingItems.length - 1] as TreeItem
+			/**
+			 * If the position selected is the end, we insert after the last item.
+			 */
+			result = tree.insertAfter(result, relativeTo.id, item)
+		} else {
+			const relativeTo = siblingItems[action.index] as TreeItem
+			/**
+			 * Otherwise we insert before the existing item in the given position.
+			 * This results in the new item being in that position.
+			 */
+			result = tree.insertBefore(result, relativeTo.id, item)
+		}
+
+		return result
+	}
+
+	return data
+}
+
+function getChildItems(data: TreeItem[], targetId: string) {
+	/**
+	 * An empty string is representing the root
+	 */
+	if (targetId === '') {
+		return data
+	}
+
+	const targetItem = tree.find(data, targetId)
+	invariant(targetItem)
+
+	return targetItem.children
+}
diff --git a/apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/lesson-list/pieces/tree/constants.ts b/apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/lesson-list/pieces/tree/constants.ts
new file mode 100644
index 000000000..59af80d81
--- /dev/null
+++ b/apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/lesson-list/pieces/tree/constants.ts
@@ -0,0 +1 @@
+export const indentPerLevel = 24
diff --git a/apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/lesson-list/pieces/tree/tree-context.tsx b/apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/lesson-list/pieces/tree/tree-context.tsx
new file mode 100644
index 000000000..b65001e62
--- /dev/null
+++ b/apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/lesson-list/pieces/tree/tree-context.tsx
@@ -0,0 +1,54 @@
+import React, { createContext } from 'react'
+import {
+	attachInstruction,
+	extractInstruction,
+} from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item'
+
+import { Product } from '@coursebuilder/core/schemas'
+import type { ContentResource } from '@coursebuilder/core/schemas'
+
+import type { TreeAction, TreeItem } from '../../data/tree'
+
+export type TreeContextValue = {
+	dispatch: (action: TreeAction) => void
+	uniqueContextId: Symbol
+	getPathToItem: (itemId: string) => string[]
+	getMoveTargets: ({ itemId }: { itemId: string }) => TreeItem[]
+	getChildrenOfItem: (itemId: string) => TreeItem[]
+	rootResourceId: string | null
+	rootResource: ContentResource | Product | null
+	registerTreeItem: (args: {
+		itemId: string
+		element: HTMLElement
+		actionMenuTrigger: HTMLElement
+	}) => void
+}
+
+export const TreeContext = createContext<TreeContextValue>({
+	dispatch: () => {},
+	uniqueContextId: Symbol('uniqueId'),
+	getPathToItem: () => [],
+	getMoveTargets: () => [],
+	getChildrenOfItem: () => [],
+	registerTreeItem: () => {},
+	rootResourceId: null,
+	rootResource: null,
+})
+
+export type DependencyContext = {
+	DropIndicator: React.JSX.Element
+	attachInstruction: typeof attachInstruction
+	extractInstruction: typeof extractInstruction
+}
+
+export const DependencyContext = createContext<DependencyContext>({
+	DropIndicator: (
+		<span
+			style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}
+		>
+			◎
+		</span>
+	),
+	attachInstruction: attachInstruction,
+	extractInstruction: extractInstruction,
+})
diff --git a/apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/lesson-list/pieces/tree/tree-item.tsx b/apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/lesson-list/pieces/tree/tree-item.tsx
new file mode 100644
index 000000000..64260ee40
--- /dev/null
+++ b/apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/lesson-list/pieces/tree/tree-item.tsx
@@ -0,0 +1,463 @@
+import React, {
+	Fragment,
+	memo,
+	useCallback,
+	useContext,
+	useEffect,
+	useRef,
+	useState,
+} from 'react'
+import { useRouter } from 'next/navigation'
+import type { List } from '@/lib/lists'
+import { removePostFromList } from '@/lib/lists-query'
+import { cn } from '@/utils/cn'
+import {
+	Instruction,
+	ItemMode,
+} from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item'
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine'
+import {
+	draggable,
+	dropTargetForElements,
+	monitorForElements,
+} from '@atlaskit/pragmatic-drag-and-drop/element/adapter'
+import { pointerOutsideOfPreview } from '@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview'
+import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview'
+import type { DragLocationHistory } from '@atlaskit/pragmatic-drag-and-drop/types'
+import { token } from '@atlaskit/tokens'
+import { ChevronDown, ChevronUp, Trash } from 'lucide-react'
+import pluralize from 'pluralize'
+import { createRoot } from 'react-dom/client'
+import invariant from 'tiny-invariant'
+
+import { Button } from '@coursebuilder/ui'
+
+import { TreeItem as TreeItemType } from '../../data/tree'
+import { indentPerLevel } from './constants'
+import { DependencyContext, TreeContext } from './tree-context'
+
+const iconColor = token('color.icon', '#44546F')
+
+function ChildIcon() {
+	return (
+		<svg aria-hidden={true} width={24} height={24} viewBox="0 0 24 24">
+			<circle cx={12} cy={12} r={2} fill={iconColor} />
+		</svg>
+	)
+}
+
+function GroupIcon({ isOpen }: { isOpen: boolean }) {
+	const Icon = isOpen ? <ChevronUp size={14} /> : <ChevronDown size={14} />
+	return (
+		<span className="mr-2 flex items-center justify-center text-neutral-500">
+			{Icon}
+		</span>
+	)
+}
+
+function Icon({ item }: { item: TreeItemType }) {
+	if (!item.children.length) {
+		return null // <ChildIcon />
+	}
+	return <GroupIcon isOpen={item.isOpen ?? false} />
+}
+
+function Preview({ item }: { item: TreeItemType }) {
+	return (
+		<div className="rounded-s bg-red-300 p-[var(--grid)]">Item {item.id}</div>
+	)
+}
+
+function getParentLevelOfInstruction(instruction: Instruction): number {
+	if (instruction.type === 'instruction-blocked') {
+		return getParentLevelOfInstruction(instruction.desired)
+	}
+	if (instruction.type === 'reparent') {
+		return instruction.desiredLevel - 1
+	}
+	return instruction.currentLevel - 1
+}
+
+function delay({
+	waitMs: timeMs,
+	fn,
+}: {
+	waitMs: number
+	fn: () => void
+}): () => void {
+	let timeoutId: number | null = window.setTimeout(() => {
+		timeoutId = null
+		fn()
+	}, timeMs)
+	return function cancel() {
+		if (timeoutId) {
+			window.clearTimeout(timeoutId)
+			timeoutId = null
+		}
+	}
+}
+
+const TreeItem = memo(function TreeItem({
+	item,
+	mode,
+	level,
+}: {
+	item: TreeItemType
+	mode: ItemMode
+	level: number
+}) {
+	const buttonRef = useRef<HTMLButtonElement>(null)
+
+	const [state, setState] = useState<
+		'idle' | 'dragging' | 'preview' | 'parent-of-instruction'
+	>('idle')
+	const [instruction, setInstruction] = useState<Instruction | null>(null)
+	const cancelExpandRef = useRef<(() => void) | null>(null)
+
+	const {
+		dispatch,
+		uniqueContextId,
+		getPathToItem,
+		rootResource,
+		rootResourceId,
+	} = useContext(TreeContext)
+	const { DropIndicator, attachInstruction, extractInstruction } =
+		useContext(DependencyContext)
+	const toggleOpen = useCallback(() => {
+		dispatch({ type: 'toggle', itemId: item.id })
+	}, [dispatch, item])
+
+	const cancelExpand = useCallback(() => {
+		cancelExpandRef.current?.()
+		cancelExpandRef.current = null
+	}, [])
+
+	const clearParentOfInstructionState = useCallback(() => {
+		setState((current) =>
+			current === 'parent-of-instruction' ? 'idle' : current,
+		)
+	}, [])
+
+	// When an item has an instruction applied
+	// we are highlighting it's parent item for improved clarity
+	const shouldHighlightParent = useCallback(
+		(location: DragLocationHistory): boolean => {
+			const target = location.current.dropTargets[0]
+
+			if (!target) {
+				return false
+			}
+
+			const instruction = extractInstruction(target.data)
+
+			if (!instruction) {
+				return false
+			}
+
+			const targetId = target.data.id
+			invariant(typeof targetId === 'string')
+
+			const path = getPathToItem(targetId)
+			const parentLevel: number = getParentLevelOfInstruction(instruction)
+			const parentId = path[parentLevel]
+			return parentId === item.id
+		},
+		[getPathToItem, extractInstruction, item],
+	)
+
+	useEffect(() => {
+		invariant(buttonRef.current)
+
+		function updateIsParentOfInstruction({
+			location,
+		}: {
+			location: DragLocationHistory
+		}) {
+			if (shouldHighlightParent(location)) {
+				setState('parent-of-instruction')
+				return
+			}
+			clearParentOfInstructionState()
+		}
+
+		return combine(
+			draggable({
+				element: buttonRef.current,
+				getInitialData: () => ({
+					id: item.id,
+					type: 'tree-item',
+					isOpenOnDragStart: item.isOpen,
+					uniqueContextId,
+					item: item,
+				}),
+				onGenerateDragPreview: ({ nativeSetDragImage }) => {
+					setCustomNativeDragPreview({
+						getOffset: pointerOutsideOfPreview({ x: '16px', y: '8px' }),
+						render: ({ container }) => {
+							const root = createRoot(container)
+							root.render(<Preview item={item} />)
+							return () => root.unmount()
+						},
+						nativeSetDragImage,
+					})
+				},
+				onDragStart: ({ source }) => {
+					setState('dragging')
+					// collapse open items during a drag
+					if (source.data.isOpenOnDragStart) {
+						dispatch({ type: 'collapse', itemId: item.id })
+					}
+				},
+				onDrop: ({ source }) => {
+					setState('idle')
+					if (source.data.isOpenOnDragStart) {
+						dispatch({ type: 'expand', itemId: item.id })
+					}
+				},
+			}),
+			dropTargetForElements({
+				element: buttonRef.current,
+				getData: ({ input, element, source }) => {
+					const data = { id: item.id }
+
+					return attachInstruction(data, {
+						input,
+						element,
+						indentPerLevel,
+						currentLevel: level,
+						mode,
+						block:
+							(source.data.item as any).type === 'section' ||
+							item.type !== 'section'
+								? ['make-child']
+								: [],
+					})
+				},
+				canDrop: (allData) => {
+					const { source } = allData
+					return (
+						source.data.type === 'tree-item' &&
+						source.data.uniqueContextId === uniqueContextId
+					)
+				},
+
+				getIsSticky: () => true,
+				onDrag: ({ self, source }) => {
+					const instruction = extractInstruction(self.data)
+
+					if (source.data.id !== item.id) {
+						// expand after 500ms if still merging
+						if (
+							instruction?.type === 'make-child' &&
+							item.children.length &&
+							!item.isOpen &&
+							!cancelExpandRef.current
+						) {
+							cancelExpandRef.current = delay({
+								waitMs: 500,
+								fn: () => dispatch({ type: 'expand', itemId: item.id }),
+							})
+						}
+						if (instruction?.type !== 'make-child' && cancelExpandRef.current) {
+							cancelExpand()
+						}
+
+						setInstruction(instruction)
+						return
+					}
+					if (instruction?.type === 'reparent') {
+						setInstruction(instruction)
+						return
+					}
+					setInstruction(null)
+				},
+				onDragLeave: () => {
+					cancelExpand()
+					setInstruction(null)
+				},
+				onDrop: () => {
+					cancelExpand()
+					setInstruction(null)
+				},
+			}),
+			monitorForElements({
+				canMonitor: ({ source }) =>
+					source.data.uniqueContextId === uniqueContextId,
+				onDragStart: updateIsParentOfInstruction,
+				onDrag: updateIsParentOfInstruction,
+				onDrop() {
+					clearParentOfInstructionState()
+				},
+			}),
+		)
+	}, [
+		dispatch,
+		item,
+		mode,
+		level,
+		cancelExpand,
+		uniqueContextId,
+		extractInstruction,
+		attachInstruction,
+		getPathToItem,
+		clearParentOfInstructionState,
+		shouldHighlightParent,
+	])
+
+	useEffect(
+		function mount() {
+			return function unmount() {
+				cancelExpand()
+			}
+		},
+		[cancelExpand],
+	)
+
+	const aria = (() => {
+		// if there are no children, we don't need to set aria attributes
+
+		if (!item.children.length) {
+			return undefined
+		}
+
+		return {
+			'aria-expanded': item.isOpen,
+			'aria-controls': `tree-item-${item.id}--subtree`,
+		}
+	})()
+
+	const router = useRouter()
+
+	return (
+		<Fragment>
+			<div
+				className={state === 'idle' ? `hover:bg-muted cursor-pointer` : ''}
+				style={{ position: 'relative' }}
+			>
+				<button
+					{...aria}
+					className={cn(
+						'relative w-full cursor-pointer border-0 bg-transparent py-3',
+						{
+							'border-primary border': instruction?.type === 'make-child',
+						},
+					)}
+					id={`tree-item-${item.id}`}
+					onClick={
+						item.type === 'section'
+							? toggleOpen
+							: () => {
+									if (item.type === 'event') {
+										router.push(`/events/${item.id}/edit`)
+										return
+									}
+									if (rootResource) {
+										router.push(
+											// @ts-expect-error
+											`/${pluralize(Object.hasOwn(rootResource, 'type') ? rootResource?.type : rootResource.fields?.type)}/${rootResource?.fields?.slug}/${item.id}/edit`,
+										)
+									}
+								}
+					}
+					ref={buttonRef}
+					type="button"
+					style={{ paddingLeft: level * indentPerLevel }}
+				>
+					<span
+						className={cn(
+							'flex flex-col items-center justify-between gap-3 bg-transparent px-5 sm:flex-row',
+							{
+								'opacity-40': state === 'dragging',
+								transparent: state === 'parent-of-instruction',
+							},
+						)}
+					>
+						<div className="flex w-full flex-row">
+							<Icon item={item} />
+							<span
+								className={cn('text-left', {
+									'font-semibold': item.type === 'section',
+								})}
+							>
+								{item.label ?? item.id}
+							</span>
+						</div>
+						<small className="text-ellipsis pr-16 opacity-50">
+							{item.type ? (
+								<span className="capitalize">{item.type}</span>
+							) : null}
+
+							{/* <span className="text-xs opacity-50">({mode})</span> */}
+						</small>
+					</span>
+					{instruction ? (
+						<div
+							className={cn('bg-primary absolute left-0 h-px w-full', {
+								'top-0': instruction.type === 'reorder-above',
+								'bottom-0': instruction.type === 'reorder-below',
+								'opacity-0': instruction.type === 'instruction-blocked',
+							})}
+						/>
+					) : null}
+					{/* {instruction ? (
+						<span
+							style={{
+								position: 'absolute',
+								top: 0,
+								left: 0,
+								right: 0,
+								bottom: 0,
+							}}
+						>
+							◎ {instruction.type}
+						</span>
+					) : null} */}
+				</button>
+				<Button
+					className="absolute right-5"
+					type="button"
+					variant="outline"
+					size="icon"
+					onClick={async () => {
+						if (rootResourceId) {
+							dispatch({ type: 'remove-item', itemId: item.id })
+							await removePostFromList({
+								postId: item.id,
+								listId: rootResourceId,
+							})
+						}
+					}}
+				>
+					<Trash className="h-3 w-3" />
+				</Button>
+			</div>
+			{item.children.length && item.isOpen ? (
+				<div id={aria?.['aria-controls']}>
+					{item.children.map((child, index, array) => {
+						const childType: ItemMode = (() => {
+							if (child.children.length && child.isOpen) {
+								return 'expanded'
+							}
+
+							if (index === array.length - 1) {
+								return 'last-in-group'
+							}
+
+							return 'standard'
+						})()
+						return (
+							<TreeItem
+								item={child}
+								key={child.id}
+								level={level + 1}
+								mode={childType}
+							/>
+						)
+					})}
+				</div>
+			) : null}
+		</Fragment>
+	)
+})
+
+export default TreeItem
diff --git a/apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/lesson-list/tree.tsx b/apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/lesson-list/tree.tsx
new file mode 100644
index 000000000..807ee8e3d
--- /dev/null
+++ b/apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/lesson-list/tree.tsx
@@ -0,0 +1,311 @@
+import {
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useReducer,
+	useRef,
+	useState,
+} from 'react'
+import { useParams, useRouter, useSearchParams } from 'next/navigation'
+import { courseBuilderConfig } from '@/coursebuilder/course-builder-config'
+import { updateResourcePosition } from '@/lib/tutorials-query'
+import { triggerPostMoveFlash } from '@atlaskit/pragmatic-drag-and-drop-flourish/trigger-post-move-flash'
+import {
+	Instruction,
+	ItemMode,
+} from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item'
+import * as liveRegion from '@atlaskit/pragmatic-drag-and-drop-live-region'
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine'
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'
+import memoizeOne from 'memoize-one'
+import invariant from 'tiny-invariant'
+
+import { Product } from '@coursebuilder/core/schemas'
+import type { ContentResource } from '@coursebuilder/core/schemas'
+
+import {
+	getInitialTreeState,
+	tree,
+	TreeAction,
+	TreeItem as TreeItemType,
+	TreeState,
+	treeStateReducer,
+} from './data/tree'
+import {
+	DependencyContext,
+	TreeContext,
+	TreeContextValue,
+} from './pieces/tree/tree-context'
+import TreeItem from './pieces/tree/tree-item'
+
+type CleanupFn = () => void
+
+function createTreeItemRegistry() {
+	const registry = new Map<
+		string,
+		{ element: HTMLElement; actionMenuTrigger: HTMLElement }
+	>()
+
+	const registerTreeItem = ({
+		itemId,
+		element,
+		actionMenuTrigger,
+	}: {
+		itemId: string
+		element: HTMLElement
+		actionMenuTrigger: HTMLElement
+	}): CleanupFn => {
+		registry.set(itemId, { element, actionMenuTrigger })
+		return () => {
+			registry.delete(itemId)
+		}
+	}
+
+	return { registry, registerTreeItem }
+}
+
+export default function Tree({
+	state,
+	updateState,
+	rootResourceId,
+	rootResource,
+}: {
+	state: TreeState
+	updateState: React.Dispatch<TreeAction>
+	rootResourceId: string
+	rootResource: ContentResource | Product
+}) {
+	const params = useParams<{ module: string }>()
+
+	const ref = useRef<HTMLDivElement>(null)
+	const { extractInstruction } = useContext(DependencyContext)
+
+	const [{ registry, registerTreeItem }] = useState(createTreeItemRegistry)
+
+	const { data, lastAction } = state
+	let lastStateRef = useRef<TreeItemType[]>(data)
+	useEffect(() => {
+		lastStateRef.current = data
+	}, [data])
+
+	const saveTreeData = useCallback(async () => {
+		const currentData = lastStateRef.current
+
+		for (const item of currentData) {
+			if (!item.itemData) continue
+			if (item.children.length > 0) {
+				for (const childItem of item.children) {
+					if (!childItem.itemData) continue
+					await updateResourcePosition({
+						currentParentResourceId: childItem.itemData.resourceOfId,
+						parentResourceId: item.itemData.resourceId,
+						resourceId: childItem.itemData.resourceId,
+						position: item.children.indexOf(childItem),
+					})
+				}
+			}
+			await updateResourcePosition({
+				currentParentResourceId: item.itemData.resourceOfId,
+				parentResourceId: rootResourceId,
+				resourceId: item.itemData.resourceId,
+				position: currentData.indexOf(item),
+			})
+		}
+	}, [rootResourceId])
+
+	useEffect(() => {
+		if (lastAction === null) {
+			return
+		}
+
+		saveTreeData()
+
+		if (lastAction.type === 'modal-move') {
+			const parentName =
+				lastAction.targetId === '' ? 'the root' : `Item ${lastAction.targetId}`
+
+			liveRegion.announce(
+				`You've moved Item ${lastAction.itemId} to position ${lastAction.index + 1} in ${parentName}.`,
+			)
+
+			const { element, actionMenuTrigger } =
+				registry.get(lastAction.itemId) ?? {}
+			if (element) {
+				triggerPostMoveFlash(element)
+			}
+
+			/**
+			 * Only moves triggered by the modal will result in focus being
+			 * returned to the trigger.
+			 */
+			actionMenuTrigger?.focus()
+
+			return
+		}
+
+		if (lastAction.type === 'instruction') {
+			const { element } = registry.get(lastAction.itemId) ?? {}
+			if (element) {
+				triggerPostMoveFlash(element)
+			}
+
+			return
+		}
+	}, [lastAction, registry, saveTreeData])
+
+	useEffect(() => {
+		return () => {
+			liveRegion.cleanup()
+		}
+	}, [])
+
+	/**
+	 * Returns the items that the item with `itemId` can be moved to.
+	 *
+	 * Uses a depth-first search (DFS) to compile a list of possible targets.
+	 */
+	const getMoveTargets = useCallback(({ itemId }: { itemId: string }) => {
+		const data = lastStateRef.current
+
+		const targets = []
+
+		const searchStack = Array.from(data)
+		while (searchStack.length > 0) {
+			const node = searchStack.pop()
+
+			if (!node) {
+				continue
+			}
+
+			/**
+			 * If the current node is the item we want to move, then it is not a valid
+			 * move target and neither are its children.
+			 */
+			if (node.id === itemId) {
+				continue
+			}
+
+			/**
+			 * Draft items cannot have children.
+			 */
+			if (node.isDraft) {
+				continue
+			}
+
+			targets.push(node)
+
+			node.children.forEach((childNode) => searchStack.push(childNode))
+		}
+
+		return targets
+	}, [])
+
+	const getChildrenOfItem = useCallback((itemId: string) => {
+		const data = lastStateRef.current
+
+		/**
+		 * An empty string is representing the root
+		 */
+		if (itemId === '') {
+			return data
+		}
+
+		const item = tree.find(data, itemId)
+		invariant(item)
+		return item.children
+	}, [])
+
+	const context = useMemo<TreeContextValue>(
+		() => ({
+			dispatch: updateState,
+			uniqueContextId: Symbol('unique-id'),
+			// memoizing this function as it is called by all tree items repeatedly
+			// An ideal refactor would be to update our data shape
+			// to allow quick lookups of parents
+			getPathToItem: memoizeOne(
+				(targetId: string) =>
+					tree.getPathToItem({ current: lastStateRef.current, targetId }) ?? [],
+			),
+			getMoveTargets,
+			getChildrenOfItem,
+			registerTreeItem,
+			rootResourceId,
+			rootResource,
+		}),
+		[
+			getChildrenOfItem,
+			getMoveTargets,
+			registerTreeItem,
+			updateState,
+			rootResourceId,
+			rootResource,
+		],
+	)
+
+	useEffect(() => {
+		invariant(ref.current)
+		return combine(
+			monitorForElements({
+				canMonitor: ({ source }) =>
+					source.data.uniqueContextId === context.uniqueContextId,
+				onDrop(args) {
+					const { location, source } = args
+					// didn't drop on anything
+					if (!location.current.dropTargets.length) {
+						return
+					}
+
+					if (source.data.type === 'tree-item') {
+						const itemId = source.data.id as string
+
+						const target = location.current.dropTargets[0]
+
+						if (!target?.data) {
+							throw new Error('target.data is undefined')
+						}
+
+						const targetId = target.data.id as string
+
+						const instruction: Instruction | null = extractInstruction(
+							target.data,
+						)
+
+						if (instruction !== null) {
+							updateState({
+								type: 'instruction',
+								instruction,
+								itemId,
+								targetId,
+							})
+						}
+					}
+				},
+			}),
+		)
+	}, [context, extractInstruction, updateState])
+
+	return (
+		<TreeContext.Provider value={context}>
+			<div>
+				<div className="flex flex-col divide-y border-t" id="tree" ref={ref}>
+					{data.map((item, index, array) => {
+						const type: ItemMode = (() => {
+							if (item.children.length && item.isOpen) {
+								return 'expanded'
+							}
+
+							if (index === array.length - 1) {
+								return 'last-in-group'
+							}
+
+							return 'standard'
+						})()
+
+						return <TreeItem item={item} level={0} key={item.id} mode={type} />
+					})}
+				</div>
+			</div>
+		</TreeContext.Provider>
+	)
+}
diff --git a/apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/list-resources-edit.tsx b/apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/list-resources-edit.tsx
new file mode 100644
index 000000000..2a63b80f1
--- /dev/null
+++ b/apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/list-resources-edit.tsx
@@ -0,0 +1,197 @@
+'use client'
+
+import * as React from 'react'
+import { useReducer } from 'react'
+import { useRouter } from 'next/navigation'
+import { SearchBox } from '@/app/(search)/q/_components/instantsearch/searchbox'
+import type { List } from '@/lib/lists'
+import { addPostToList } from '@/lib/lists-query'
+import { cn } from '@/utils/cn'
+import {
+	TYPESENSE_COLLECTION_NAME,
+	typesenseInstantsearchAdapter,
+} from '@/utils/typesense-instantsearch-adapter'
+import { InstantSearchNext } from 'react-instantsearch-nextjs'
+
+// import { InfiniteHits } from './infinite-hits'
+
+// import { createResource } from '@/lib/resources/create-resources'
+// import { addResourceToTutorial } from '@/lib/tutorials-query'
+
+import type { ContentResource } from '@coursebuilder/core/schemas'
+import { Button } from '@coursebuilder/ui'
+import { CreateResourceForm } from '@coursebuilder/ui/resources-crud/create-resource-form'
+
+import { getInitialTreeState, treeStateReducer } from './lesson-list/data/tree'
+import Tree from './lesson-list/tree'
+import { ResourcesInfiniteHits } from './resources-infinite-hits'
+import { SelectionProvider } from './selection-context'
+
+export default function ListResourcesEdit({ list }: { list: List }) {
+	const [isAddingLesson, setIsAddingLesson] = React.useState(false)
+	const [isAddingSection, setIsAddingSection] = React.useState(false)
+
+	const initialData = [
+		...(list.resources
+			? list.resources.map((resourceItem) => {
+					if (!resourceItem.resource) {
+						throw new Error('resourceItem.resource is required')
+					}
+					const resources = resourceItem.resource.resources ?? []
+					return {
+						id: resourceItem.resource.id,
+						label: resourceItem.resource.fields?.title,
+						type: resourceItem.resource.type,
+						children: resources.map((resourceItem: any) => {
+							if (!resourceItem.resource) {
+								throw new Error('resourceItem.resource is required')
+							}
+							return {
+								id: resourceItem.resource.id,
+								label: resourceItem.resource.fields?.title,
+								type: resourceItem.resource.type,
+								children: [],
+								itemData: resourceItem as any,
+							}
+						}),
+						itemData: resourceItem as any,
+					}
+				})
+			: []),
+	]
+	const [state, updateState] = useReducer(
+		treeStateReducer,
+		initialData,
+		getInitialTreeState,
+	)
+	const router = useRouter()
+
+	const handleResourceAdded = async (resource: ContentResource) => {
+		const resourceItem = await addPostToList({
+			listId: list.id,
+			postId: resource.id,
+		})
+
+		if (resourceItem) {
+			updateState({
+				type: 'add-item',
+				itemId: resourceItem.resource.id,
+				item: {
+					id: resourceItem.resource.id,
+					label: resourceItem.resource.fields?.title,
+					type: resourceItem.resource.type,
+					children: [],
+					itemData: resourceItem as any,
+				},
+			})
+		}
+
+		router.refresh()
+	}
+
+	return (
+		<div className="border-b text-sm font-medium">
+			{list.resources.length > 0 && (
+				<>
+					<span className="mb-3 flex px-5 pt-5 text-lg font-bold">
+						In the list
+					</span>
+					<Tree
+						rootResource={list as ContentResource}
+						rootResourceId={list.id}
+						state={state}
+						updateState={updateState}
+					/>
+				</>
+			)}
+			<div
+				className={cn('flex flex-col gap-1', {
+					'border-t': list.resources.length > 0,
+				})}
+			>
+				<SelectionProvider>
+					<InstantSearchNext
+						searchClient={typesenseInstantsearchAdapter.searchClient}
+						indexName={TYPESENSE_COLLECTION_NAME}
+						routing={false}
+						onStateChange={({ uiState, setUiState }) => {
+							function handleRefinementListChange(
+								attribute: string,
+								setState: (value: any) => void,
+							) {
+								const refinementList =
+									uiState[TYPESENSE_COLLECTION_NAME]?.refinementList?.[
+										attribute
+									]
+								if (refinementList && refinementList.length > 0) {
+									setState(refinementList)
+								} else {
+									setState(null)
+								}
+							}
+
+							const query = uiState[TYPESENSE_COLLECTION_NAME]?.query
+							// setQuery(query || null)
+
+							// handleRefinementListChange('type', setType)
+							// handleRefinementListChange('instructor_name', setInstructor)
+
+							// IMPORTANT: always call setUiState to sync the state
+							setUiState(uiState)
+						}}
+						initialUiState={
+							{
+								[TYPESENSE_COLLECTION_NAME]: {
+									query: '',
+									refinementList: {
+										type: ['post'],
+
+										// ...(typeof instructor === 'string' && {
+										// 	instructor_name: instructor.split(','),
+										// }),
+									},
+								},
+							} as any
+						}
+						future={{ preserveSharedStateOnUnmount: true }}
+					>
+						<ResourcesInfiniteHits updateTreeState={updateState} list={list} />
+					</InstantSearchNext>
+				</SelectionProvider>
+				{/* {isAddingLesson && (
+					<CreateResourceForm
+						resourceType={'lesson'}
+						onCreate={handleResourceCreated}
+						createResource={createResource}
+					/>
+				)}
+				{isAddingSection && (
+					<CreateResourceForm
+						resourceType={'section'}
+						onCreate={handleResourceCreated}
+						createResource={createResource}
+					/>
+				)} */}
+				{/* <div className="flex gap-1">
+					<Button
+						onClick={() => setIsAddingLesson(true)}
+						className="mt-2"
+						variant="outline"
+					>
+						+ add a lesson
+					</Button>
+					<Button
+						onClick={() => setIsAddingSection(true)}
+						className="mt-2"
+						variant="outline"
+					>
+						+ add section
+					</Button>
+				</div> */}
+			</div>
+			<div className="mb-3 mt-5 flex border-t px-5 pt-3 text-lg font-bold">
+				Body
+			</div>
+		</div>
+	)
+}
diff --git a/apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/resources-infinite-hits.tsx b/apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/resources-infinite-hits.tsx
new file mode 100644
index 000000000..0c70eaa71
--- /dev/null
+++ b/apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/resources-infinite-hits.tsx
@@ -0,0 +1,97 @@
+'use client'
+
+import { SearchBox } from '@/app/(search)/q/_components/instantsearch/searchbox'
+import type { List } from '@/lib/lists'
+import { addPostToList } from '@/lib/lists-query'
+import type { TypesenseResource } from '@/lib/typesense'
+import { useInfiniteHits } from 'react-instantsearch'
+import { z } from 'zod'
+
+import { Button } from '@coursebuilder/ui'
+
+import Hit from './hit'
+import type { TreeAction } from './lesson-list/data/tree'
+import { useSelection } from './selection-context'
+
+export function ResourcesInfiniteHits({
+	list,
+	updateTreeState,
+}: {
+	list: List
+	updateTreeState: React.ActionDispatch<[action: TreeAction]>
+}) {
+	const { items, showMore, isLastPage } = useInfiniteHits<TypesenseResource>({})
+	const { selectedResources, clearSelection } = useSelection()
+
+	const handleBulkAdd = async () => {
+		for (const resource of selectedResources) {
+			updateTreeState({
+				type: 'add-item',
+				itemId: resource.id,
+				item: {
+					id: resource.id,
+					label: resource.title,
+					type: resource.type,
+					children: [],
+					itemData: resource as any,
+				},
+			})
+
+			await addPostToList({
+				postId: resource.id,
+				listId: list.id,
+			})
+		}
+		clearSelection()
+	}
+
+	return (
+		<div>
+			<div className="bg-background sticky top-0 z-10 flex min-h-[57px] items-center justify-between px-5 py-2">
+				{selectedResources.length > 0 ? (
+					<>
+						<span>{selectedResources.length} selected</span>
+						<div className="flex gap-2">
+							<Button variant="ghost" onClick={clearSelection}>
+								Cancel
+							</Button>
+							<Button onClick={handleBulkAdd}>Add Selected</Button>
+						</div>
+					</>
+				) : (
+					<span className="text-lg font-bold">Add to list</span>
+				)}
+			</div>
+			<div className="border-b px-5 pb-4">
+				<SearchBox className="mb-0 mt-1" />
+			</div>
+			<ul className="divide-y">
+				{items
+					.filter(
+						(item) =>
+							!list.resources.find(
+								(r) => r.resource.fields?.slug === item.slug,
+							),
+					)
+					.map((item) => (
+						<Hit
+							key={item.objectID}
+							updateTreeState={updateTreeState}
+							listId={list.id}
+							hit={item}
+						/>
+					))}
+			</ul>
+			{!isLastPage && (
+				<Button
+					variant="ghost"
+					onClick={showMore}
+					disabled={isLastPage}
+					className="font-semibold"
+				>
+					Show More
+				</Button>
+			)}
+		</div>
+	)
+}
diff --git a/apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/selection-context.tsx b/apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/selection-context.tsx
new file mode 100644
index 000000000..a3044b515
--- /dev/null
+++ b/apps/ai-hero/src/app/(content)/lists/[slug]/edit/_components/selection-context.tsx
@@ -0,0 +1,50 @@
+import React, { createContext, useContext, useState } from 'react'
+import type { TypesenseResource } from '@/lib/typesense'
+
+type SelectionContextType = {
+	selectedResources: TypesenseResource[]
+	toggleSelection: (resource: TypesenseResource) => void
+	clearSelection: () => void
+	isSelected: (id: string) => boolean
+}
+
+const SelectionContext = createContext<SelectionContextType>({
+	selectedResources: [],
+	toggleSelection: () => {},
+	clearSelection: () => {},
+	isSelected: () => false,
+})
+
+export function SelectionProvider({ children }: { children: React.ReactNode }) {
+	const [selectedResources, setSelectedResources] = useState<
+		TypesenseResource[]
+	>([])
+
+	const toggleSelection = (resource: TypesenseResource) => {
+		setSelectedResources((current) =>
+			current.some((item) => item.id === resource.id)
+				? current.filter((item) => item.id !== resource.id)
+				: [...current, resource],
+		)
+	}
+
+	const clearSelection = () => setSelectedResources([])
+
+	const isSelected = (id: string) =>
+		selectedResources.some((item) => item.id === id)
+
+	return (
+		<SelectionContext.Provider
+			value={{
+				selectedResources,
+				toggleSelection,
+				clearSelection,
+				isSelected,
+			}}
+		>
+			{children}
+		</SelectionContext.Provider>
+	)
+}
+
+export const useSelection = () => useContext(SelectionContext)
diff --git a/apps/ai-hero/src/app/(content)/lists/[slug]/edit/page.tsx b/apps/ai-hero/src/app/(content)/lists/[slug]/edit/page.tsx
new file mode 100644
index 000000000..dc64f0251
--- /dev/null
+++ b/apps/ai-hero/src/app/(content)/lists/[slug]/edit/page.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react'
+import type { Metadata, ResolvingMetadata } from 'next'
+import { notFound, redirect } from 'next/navigation'
+import { getList } from '@/lib/lists-query'
+import { getPost } from '@/lib/posts-query'
+import { getServerAuthSession } from '@/server/auth'
+import { subject } from '@casl/ability'
+
+import { EditListForm } from './_components/edit-list-form'
+
+export const dynamic = 'force-dynamic'
+
+type Props = {
+	params: Promise<{ slug: string }>
+	searchParams: Promise<{ [key: string]: string | string[] | undefined }>
+}
+
+export async function generateMetadata(
+	props: Props,
+	parent: ResolvingMetadata,
+): Promise<Metadata> {
+	const params = await props.params
+	const list = await getList(params.slug)
+
+	if (!list) {
+		return parent as Metadata
+	}
+
+	return {
+		title: `📝 ${list.fields.title}`,
+	}
+}
+
+export default async function ListEditPage(props: {
+	params: Promise<{ slug: string }>
+}) {
+	const params = await props.params
+
+	const { ability } = await getServerAuthSession()
+	const list = await getList(params.slug)
+
+	if (!list || !ability.can('create', 'Content')) {
+		notFound()
+	}
+
+	if (ability.cannot('manage', subject('Content', list))) {
+		redirect(`/${list?.fields?.slug}`)
+	}
+
+	return <EditListForm key={list.fields.slug} list={{ ...list }} />
+}
diff --git a/apps/ai-hero/src/app/(content)/lists/_components/create-list-form.tsx b/apps/ai-hero/src/app/(content)/lists/_components/create-list-form.tsx
new file mode 100644
index 000000000..799bd0e73
--- /dev/null
+++ b/apps/ai-hero/src/app/(content)/lists/_components/create-list-form.tsx
@@ -0,0 +1,60 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { createList } from '@/lib/lists-query'
+
+import { Button, Input, Label, Textarea } from '@coursebuilder/ui'
+
+export function CreateListForm() {
+	const [title, setTitle] = useState('')
+	const [description, setDescription] = useState('')
+	const [isLoading, setIsLoading] = useState(false)
+	const router = useRouter()
+
+	const handleSubmit = async (e: React.FormEvent) => {
+		e.preventDefault()
+		try {
+			setIsLoading(true)
+			await createList({ title, description })
+			setTitle('')
+			setDescription('')
+			router.refresh()
+		} finally {
+			setIsLoading(false)
+		}
+	}
+
+	return (
+		<form onSubmit={handleSubmit} className="space-y-4">
+			<div>
+				<Label htmlFor="title" className="mb-1 block text-sm font-medium">
+					Title
+				</Label>
+				<Input
+					type="text"
+					id="title"
+					value={title}
+					onChange={(e) => setTitle(e.target.value)}
+					className="block w-full rounded-md border border-gray-300 px-3 py-2"
+					required
+				/>
+			</div>
+			<div>
+				<Label htmlFor="description" className="mb-1 block text-sm font-medium">
+					Description (optional)
+				</Label>
+				<Textarea
+					id="description"
+					value={description}
+					onChange={(e) => setDescription(e.target.value)}
+					className="block w-full rounded-md border border-gray-300 px-3 py-2"
+					rows={3}
+				/>
+			</div>
+			<Button type="submit" disabled={isLoading}>
+				{isLoading ? 'Creating...' : 'Create List'}
+			</Button>
+		</form>
+	)
+}
diff --git a/apps/ai-hero/src/app/(content)/lists/_components/lists-table.tsx b/apps/ai-hero/src/app/(content)/lists/_components/lists-table.tsx
new file mode 100644
index 000000000..4deb9cdc6
--- /dev/null
+++ b/apps/ai-hero/src/app/(content)/lists/_components/lists-table.tsx
@@ -0,0 +1,58 @@
+import Link from 'next/link'
+import type { List } from '@/lib/lists'
+
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from '@coursebuilder/ui'
+
+export function ListsTable({
+	lists,
+	canCreateContent,
+}: {
+	lists: List[]
+	canCreateContent: boolean
+}) {
+	return (
+		<Table>
+			<TableHeader>
+				<TableRow>
+					<TableHead>Title</TableHead>
+					<TableHead>Description</TableHead>
+					<TableHead>Posts</TableHead>
+				</TableRow>
+			</TableHeader>
+			<TableBody>
+				{lists.map((list) => (
+					<TableRow key={list.id}>
+						<TableCell>
+							<Link
+								href={
+									canCreateContent
+										? `/lists/${list.fields.slug}/edit`
+										: `/lists/${list.fields.slug}`
+								}
+								className="text-primary hover:underline"
+							>
+								{list.fields.title}
+							</Link>
+						</TableCell>
+						<TableCell>{list.fields.description}</TableCell>
+						<TableCell>{list.resources?.length || 0} posts</TableCell>
+					</TableRow>
+				))}
+				{lists.length === 0 && (
+					<TableRow>
+						<TableCell colSpan={3} className="py-4 text-center">
+							No lists found
+						</TableCell>
+					</TableRow>
+				)}
+			</TableBody>
+		</Table>
+	)
+}
diff --git a/apps/ai-hero/src/app/(content)/lists/page.tsx b/apps/ai-hero/src/app/(content)/lists/page.tsx
new file mode 100644
index 000000000..6fa5c808d
--- /dev/null
+++ b/apps/ai-hero/src/app/(content)/lists/page.tsx
@@ -0,0 +1,33 @@
+import type { Metadata } from 'next'
+import config from '@/config'
+import { env } from '@/env.mjs'
+import { createList, getAllLists } from '@/lib/lists-query'
+import { getServerAuthSession } from '@/server/auth'
+
+import { CreateListForm } from './_components/create-list-form'
+import { ListsTable } from './_components/lists-table'
+
+export const metadata: Metadata = {
+	title: `AI Engineering Lists by ${config.author}`,
+	openGraph: {
+		images: [
+			{
+				url: `${env.NEXT_PUBLIC_URL}/api/og?title=${encodeURIComponent(`AI Engineering Posts by ${config.author}`)}`,
+			},
+		],
+	},
+}
+
+export default async function ListsPage() {
+	const lists = await getAllLists()
+	const { ability } = await getServerAuthSession()
+
+	const canCreateContent = ability.can('create', 'Content')
+	return (
+		<div className="container flex flex-col gap-4 py-8">
+			<h1 className="text-2xl font-bold">Lists</h1>
+			<ListsTable canCreateContent={canCreateContent} lists={lists} />
+			{canCreateContent && <CreateListForm />}
+		</div>
+	)
+}
diff --git a/apps/ai-hero/src/app/(content)/posts/[slug]/edit/page.tsx b/apps/ai-hero/src/app/(content)/posts/[slug]/edit/page.tsx
index 2ba7fbec6..9f3a7e395 100644
--- a/apps/ai-hero/src/app/(content)/posts/[slug]/edit/page.tsx
+++ b/apps/ai-hero/src/app/(content)/posts/[slug]/edit/page.tsx
@@ -2,6 +2,7 @@ import * as React from 'react'
 import type { Metadata, ResolvingMetadata } from 'next'
 import { notFound, redirect } from 'next/navigation'
 import { courseBuilderAdapter } from '@/db'
+import { getAllLists } from '@/lib/lists-query'
 import { getPost } from '@/lib/posts-query'
 import { getTags } from '@/lib/tags-query'
 import { getServerAuthSession } from '@/server/auth'
@@ -59,6 +60,7 @@ export default async function ArticleEditPage(props: {
 		? courseBuilderAdapter.getVideoResource(videoResource.id)
 		: Promise.resolve(null)
 	const tagLoader = getTags()
+	const listsLoader = getAllLists()
 
 	return (
 		<EditPostForm
@@ -66,6 +68,7 @@ export default async function ArticleEditPage(props: {
 			post={{ ...post }}
 			tagLoader={tagLoader}
 			videoResourceLoader={videoResourceLoader}
+			listsLoader={listsLoader}
 		/>
 	)
 }
diff --git a/apps/ai-hero/src/app/(content)/posts/_components/add-to-list.tsx b/apps/ai-hero/src/app/(content)/posts/_components/add-to-list.tsx
new file mode 100644
index 000000000..3bf3e3782
--- /dev/null
+++ b/apps/ai-hero/src/app/(content)/posts/_components/add-to-list.tsx
@@ -0,0 +1,139 @@
+'use client'
+
+import { useState } from 'react'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import type { List } from '@/lib/lists'
+import { addPostToList, removePostFromList } from '@/lib/lists-query'
+import type { Post } from '@/lib/posts'
+import { cn } from '@/utils/cn'
+import { Check, ChevronsUpDown, ExternalLinkIcon, Pencil } from 'lucide-react'
+
+import {
+	Button,
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+	FormLabel,
+	Label,
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from '@coursebuilder/ui'
+
+export function AddToList({ lists, post }: { lists: List[]; post: Post }) {
+	const [isLoading, setIsLoading] = useState(false)
+	const [open, setOpen] = useState(false)
+	const currentLists = lists.filter((list) => {
+		return list?.resources?.find((resource) => {
+			return resource.resourceId === post.id
+		})
+	})
+
+	const [values, setValues] = useState<string[]>(
+		currentLists.map((list) => list.id),
+	)
+	const router = useRouter()
+
+	const handleAddToList = async (listId: string) => {
+		try {
+			setIsLoading(true)
+			await addPostToList({ postId: post.id, listId })
+			router.refresh()
+		} finally {
+			setIsLoading(false)
+		}
+	}
+
+	const handleSelect = (value: string) => {
+		if (values.includes(value)) {
+			setValues(values.filter((v) => v !== value))
+			removePostFromList({ postId: post.id, listId: value })
+		} else {
+			setValues([...values, value])
+			handleAddToList(value)
+		}
+		setOpen(false)
+	}
+
+	return (
+		<div className="px-5">
+			<div className="mb-2 flex w-full items-baseline justify-between">
+				<FormLabel className="text-lg font-bold">Lists</FormLabel>
+				<Button
+					variant="ghost"
+					size="sm"
+					className="flex items-center gap-1 opacity-75 hover:opacity-100"
+					asChild
+				>
+					<Link href="/lists">
+						<Pencil className="h-3 w-3" /> Edit
+					</Link>
+				</Button>
+			</div>
+			<Popover open={open} onOpenChange={setOpen}>
+				<PopoverTrigger asChild>
+					<Button
+						variant="outline"
+						role="combobox"
+						aria-expanded={open}
+						disabled={isLoading}
+						className="w-full justify-between"
+					>
+						<span
+							className={cn('text-base font-normal', {
+								'text-muted-foreground': !values.length,
+							})}
+						>
+							{values.length
+								? values
+										.map(
+											(value) =>
+												lists.find((list) => list.id === value)?.fields.title,
+										)
+										.join(', ')
+								: 'Add to list...'}
+						</span>
+						<ChevronsUpDown className="opacity-50" size={16} />
+					</Button>
+				</PopoverTrigger>
+				<PopoverContent className="w-[200px] p-0">
+					<Command>
+						<CommandInput placeholder="Search lists..." />
+						<CommandList>
+							<CommandEmpty>No lists found.</CommandEmpty>
+							<CommandGroup>
+								{lists.map((list) => (
+									<div className="relative flex items-center">
+										<CommandItem
+											key={list.id}
+											value={list.id}
+											onSelect={() => handleSelect(list.id)}
+										>
+											<Check
+												className={cn('ml-auto mr-1 w-3', {
+													'opacity-100': values.includes(list.id),
+													'opacity-0': !values.includes(list.id),
+												})}
+											/>
+											{list.fields.title}
+										</CommandItem>
+										<Link
+											className="text-muted-foreground absolute right-3 ml-2 text-sm"
+											href={`/lists/${list.fields.slug}/edit`}
+										>
+											<ExternalLinkIcon className="h-3 w-3" />
+										</Link>
+									</div>
+								))}
+							</CommandGroup>
+						</CommandList>
+					</Command>
+				</PopoverContent>
+			</Popover>
+		</div>
+	)
+}
diff --git a/apps/ai-hero/src/app/(content)/posts/_components/edit-post-form-metadata.tsx b/apps/ai-hero/src/app/(content)/posts/_components/edit-post-form-metadata.tsx
index d2dd0f342..89a3f07cb 100644
--- a/apps/ai-hero/src/app/(content)/posts/_components/edit-post-form-metadata.tsx
+++ b/apps/ai-hero/src/app/(content)/posts/_components/edit-post-form-metadata.tsx
@@ -6,6 +6,7 @@ import { PostPlayer } from '@/app/(content)/posts/_components/post-player'
 import Spinner from '@/components/spinner'
 import { env } from '@/env.mjs'
 import { useTranscript } from '@/hooks/use-transcript'
+import type { List } from '@/lib/lists'
 import { Post, PostSchema } from '@/lib/posts'
 import { addTagToPost, removeTagFromPost } from '@/lib/posts-query'
 import type { Tag } from '@/lib/tags'
@@ -31,6 +32,7 @@ import { MetadataFieldVisibility } from '@coursebuilder/ui/resources-crud/metada
 import AdvancedTagSelector from '@coursebuilder/ui/resources-crud/tag-selector'
 
 import { NewLessonVideoForm } from '../../_components/new-lesson-video-form'
+import { AddToList } from './add-to-list'
 import { PostUploader } from './post-uploader'
 
 export const PostMetadataFormFields: React.FC<{
@@ -39,12 +41,14 @@ export const PostMetadataFormFields: React.FC<{
 	videoResourceId: string | null | undefined
 	post: Post
 	tagLoader: Promise<Tag[]>
+	listsLoader: Promise<List[]>
 }> = ({
 	form,
 	videoResourceLoader,
 	post,
 	videoResourceId: initialVideoResourceId,
 	tagLoader,
+	listsLoader,
 }) => {
 	const router = useRouter()
 
@@ -52,6 +56,8 @@ export const PostMetadataFormFields: React.FC<{
 		string | null | undefined
 	>(initialVideoResourceId)
 	const tags = tagLoader ? use(tagLoader) : []
+	const lists = listsLoader ? use(listsLoader) : []
+
 	const { data: videoResource, refetch } = api.videoResources.get.useQuery({
 		videoResourceId: videoResourceId,
 	})
@@ -210,6 +216,7 @@ export const PostMetadataFormFields: React.FC<{
 				name="id"
 				render={({ field }) => <Input type="hidden" {...field} />}
 			/>
+
 			<FormField
 				control={form.control}
 				name="fields.title"
@@ -264,6 +271,7 @@ export const PostMetadataFormFields: React.FC<{
 					/>
 				</div>
 			)}
+			<AddToList lists={lists} post={post} />
 			<FormField
 				control={form.control}
 				name="fields.description"
diff --git a/apps/ai-hero/src/app/(content)/posts/_components/edit-post-form.tsx b/apps/ai-hero/src/app/(content)/posts/_components/edit-post-form.tsx
index 77a8c771b..77755106c 100644
--- a/apps/ai-hero/src/app/(content)/posts/_components/edit-post-form.tsx
+++ b/apps/ai-hero/src/app/(content)/posts/_components/edit-post-form.tsx
@@ -6,6 +6,7 @@ import { ImageResourceUploader } from '@/components/image-uploader/image-resourc
 import { env } from '@/env.mjs'
 import { useIsMobile } from '@/hooks/use-is-mobile'
 import { sendResourceChatMessage } from '@/lib/ai-chat-query'
+import type { List } from '@/lib/lists'
 import { Post, PostSchema } from '@/lib/posts'
 import { autoUpdatePost, updatePost } from '@/lib/posts-query'
 import type { Tag } from '@/lib/tags'
@@ -38,12 +39,14 @@ export type EditPostFormProps = {
 	availableWorkflows?: { value: string; label: string; default?: boolean }[]
 	theme?: string
 	tagLoader: Promise<Tag[]>
+	listsLoader: Promise<List[]>
 }
 
 export function EditPostForm({
 	post,
 	videoResourceLoader,
 	tagLoader,
+	listsLoader,
 }: Omit<EditPostFormProps, 'form'>) {
 	const { forcedTheme: theme } = useTheme()
 	const session = useSession()
@@ -70,6 +73,7 @@ export function EditPostForm({
 
 	return isMobile ? (
 		<MobileEditPostForm
+			listsLoader={listsLoader}
 			tagLoader={tagLoader}
 			post={post}
 			form={form}
@@ -112,6 +116,7 @@ export function EditPostForm({
 		>
 			<React.Suspense fallback={<div>loading</div>}>
 				<PostMetadataFormFields
+					listsLoader={listsLoader}
 					tagLoader={tagLoader}
 					form={form}
 					videoResourceLoader={videoResourceLoader}
diff --git a/apps/ai-hero/src/app/(search)/q/_components/instantsearch/searchbox.tsx b/apps/ai-hero/src/app/(search)/q/_components/instantsearch/searchbox.tsx
index db95a92b2..76c29db58 100644
--- a/apps/ai-hero/src/app/(search)/q/_components/instantsearch/searchbox.tsx
+++ b/apps/ai-hero/src/app/(search)/q/_components/instantsearch/searchbox.tsx
@@ -1,19 +1,24 @@
 'use client'
 
 import React from 'react'
+import { cn } from '@/utils/cn'
 import { useQueryState } from 'nuqs'
 import type { SearchBoxProps } from 'react-instantsearch'
 import { useSearchBox } from 'react-instantsearch'
 
 import { Input } from '@coursebuilder/ui'
 
-export const SearchBox = (props: SearchBoxProps) => {
+export const SearchBox = (
+	props: SearchBoxProps & {
+		className?: string
+	},
+) => {
 	const { refine, clear, isSearchStalled, ...rest } = useSearchBox(props)
 	const [queryParam] = useQueryState('q')
 
 	return (
 		<Input
-			className="bg-background my-4 text-base"
+			className={cn('bg-background my-4 text-base', props.className)}
 			onChange={(event) => refine(event.currentTarget.value)}
 			defaultValue={queryParam || ''}
 			placeholder="Search..."
diff --git a/apps/ai-hero/src/app/admin/pages/_components/edit-pages-form.tsx b/apps/ai-hero/src/app/admin/pages/_components/edit-pages-form.tsx
index ac1bb8904..f3812edce 100644
--- a/apps/ai-hero/src/app/admin/pages/_components/edit-pages-form.tsx
+++ b/apps/ai-hero/src/app/admin/pages/_components/edit-pages-form.tsx
@@ -119,7 +119,7 @@ export function EditPagesForm({
 	return (
 		<ResourceForm
 			onResourceBodyChange={debouncedOnChange}
-			bodyPanelSlot={<MDXLivePreview />}
+			mdxPreviewComponent={<MDXLivePreview />}
 			resource={page}
 			form={form}
 			resourceSchema={PageSchema}
diff --git a/apps/ai-hero/src/lib/lists-query.ts b/apps/ai-hero/src/lib/lists-query.ts
new file mode 100644
index 000000000..9056b80d9
--- /dev/null
+++ b/apps/ai-hero/src/lib/lists-query.ts
@@ -0,0 +1,158 @@
+'use server'
+
+import { revalidatePath, revalidateTag } from 'next/cache'
+import { courseBuilderAdapter, db } from '@/db'
+import { contentResource, contentResourceResource } from '@/db/schema'
+import { getServerAuthSession } from '@/server/auth'
+import { guid } from '@/utils/guid'
+import slugify from '@sindresorhus/slugify'
+import { and, asc, desc, eq, or, sql } from 'drizzle-orm'
+import { z } from 'zod'
+
+import {
+	ContentResourceResourceSchema,
+	ContentResourceSchema,
+} from '@coursebuilder/core/schemas'
+
+import { ListSchema } from './lists'
+
+export async function createList(input: {
+	title: string
+	description?: string
+}) {
+	const { session, ability } = await getServerAuthSession()
+	if (!session?.user?.id || !ability.can('create', 'Content')) {
+		throw new Error('Unauthorized')
+	}
+
+	const list = await courseBuilderAdapter.createContentResource({
+		id: `list-${guid()}`,
+		type: 'list',
+		fields: {
+			title: input.title,
+			description: input.description,
+			state: 'draft',
+			visibility: 'unlisted',
+			slug: `${slugify(input.title)}~${guid()}`,
+		},
+		createdById: session.user.id,
+	})
+
+	revalidateTag('lists')
+	return list
+}
+
+export async function getAllLists() {
+	const lists = await db.query.contentResource.findMany({
+		where: eq(contentResource.type, 'list'),
+		with: {
+			resources: {
+				with: {
+					resource: true,
+				},
+				orderBy: asc(contentResourceResource.position),
+			},
+		},
+		orderBy: desc(contentResource.createdAt),
+	})
+
+	return z.array(ListSchema).parse(lists)
+}
+
+export async function getList(listIdOrSlug: string) {
+	const list = await db.query.contentResource.findFirst({
+		where: and(
+			or(
+				eq(
+					sql`JSON_EXTRACT (${contentResource.fields}, "$.slug")`,
+					listIdOrSlug,
+				),
+				eq(contentResource.id, listIdOrSlug),
+			),
+			eq(contentResource.type, 'list'),
+		),
+		with: {
+			resources: {
+				with: {
+					resource: true,
+				},
+				orderBy: asc(contentResourceResource.position),
+			},
+		},
+	})
+
+	return ListSchema.parse(list)
+}
+
+export async function addPostToList({
+	postId,
+	listId,
+}: {
+	postId: string
+	listId: string
+}) {
+	const { ability } = await getServerAuthSession()
+	if (!ability.can('update', 'Content')) {
+		throw new Error('Unauthorized')
+	}
+
+	const list = await db.query.contentResource.findFirst({
+		where: eq(contentResource.id, listId),
+		with: {
+			resources: true,
+		},
+	})
+
+	if (!list) throw new Error('List not found')
+
+	await db.insert(contentResourceResource).values({
+		resourceOfId: list.id,
+		resourceId: postId,
+		position: list.resources.length,
+	})
+
+	revalidateTag('lists')
+
+	return db.query.contentResourceResource.findFirst({
+		where: and(
+			eq(contentResourceResource.resourceOfId, listId),
+			eq(contentResourceResource.resourceId, postId),
+		),
+		with: {
+			resource: true,
+		},
+	})
+}
+
+export async function removePostFromList({
+	postId,
+	listId,
+}: {
+	postId: string
+	listId: string
+}) {
+	const { ability } = await getServerAuthSession()
+	if (!ability.can('update', 'Content')) {
+		throw new Error('Unauthorized')
+	}
+
+	const list = await db.query.contentResource.findFirst({
+		where: eq(contentResource.id, listId),
+		with: {
+			resources: true,
+		},
+	})
+
+	if (!list) throw new Error('List not found')
+
+	await db
+		.delete(contentResourceResource)
+		.where(
+			and(
+				eq(contentResourceResource.resourceOfId, list.id),
+				eq(contentResourceResource.resourceId, postId),
+			),
+		)
+
+	revalidateTag('lists')
+}
diff --git a/apps/ai-hero/src/lib/lists.ts b/apps/ai-hero/src/lib/lists.ts
new file mode 100644
index 000000000..2528cff8a
--- /dev/null
+++ b/apps/ai-hero/src/lib/lists.ts
@@ -0,0 +1,24 @@
+import { z } from 'zod'
+
+import { ContentResourceSchema } from '@coursebuilder/core/schemas'
+
+import { PostSchema, PostStateSchema, PostVisibilitySchema } from './posts'
+
+export const ListSchema = ContentResourceSchema.merge(
+	z.object({
+		fields: z.object({
+			title: z.string(),
+			description: z.string().optional(),
+			slug: z.string(),
+			body: z.string().nullable().optional(),
+			summary: z.string().optional().nullable(),
+			state: PostStateSchema.default('draft'),
+			visibility: PostVisibilitySchema.default('unlisted'),
+			github: z.string().nullish(),
+			gitpod: z.string().nullish(),
+		}),
+		resources: z.array(z.any()),
+	}),
+)
+
+export type List = z.infer<typeof ListSchema>
diff --git a/apps/ai-hero/src/lib/posts-query.ts b/apps/ai-hero/src/lib/posts-query.ts
index bb15dd5ea..8bbf2af64 100644
--- a/apps/ai-hero/src/lib/posts-query.ts
+++ b/apps/ai-hero/src/lib/posts-query.ts
@@ -32,6 +32,7 @@ import { z } from 'zod'
 
 import { getMuxAsset } from '@coursebuilder/core/lib/mux'
 
+import { ListSchema, type List } from './lists'
 import { DatabaseError, PostCreationError } from './post-errors'
 import { generateContentHash, updatePostSlug } from './post-utils'
 import { TagSchema, type Tag } from './tags'
@@ -105,6 +106,21 @@ export async function getPostTags(postId: string): Promise<Tag[]> {
 	return z.array(TagSchema).parse(tags.map((tag) => tag.tag))
 }
 
+export async function getPostLists(postId: string): Promise<List[]> {
+	const lists = await db.query.contentResourceResource.findMany({
+		where: eq(contentResourceResource.resourceId, postId),
+		with: {
+			resourceOf: true,
+		},
+	})
+
+	const listResources = lists
+		.filter((list) => list.resourceOf.type === 'list')
+		.map((list) => list.resourceOf)
+
+	return z.array(ListSchema).parse(listResources)
+}
+
 export async function getPosts(): Promise<Post[]> {
 	const { ability } = await getServerAuthSession()
 
diff --git a/apps/go-local-first/src/app/admin/pages/_components/edit-pages-form.tsx b/apps/go-local-first/src/app/admin/pages/_components/edit-pages-form.tsx
index bccb15cf9..3cd802942 100644
--- a/apps/go-local-first/src/app/admin/pages/_components/edit-pages-form.tsx
+++ b/apps/go-local-first/src/app/admin/pages/_components/edit-pages-form.tsx
@@ -119,7 +119,7 @@ export function EditPagesForm({
 	return (
 		<ResourceForm
 			onResourceBodyChange={debouncedOnChange}
-			bodyPanelSlot={<MDXLivePreview />}
+			mdxPreviewComponent={<MDXLivePreview />}
 			resource={page}
 			form={form}
 			resourceSchema={PageSchema}
diff --git a/packages/ui/resources-crud/edit-resources-form-desktop.tsx b/packages/ui/resources-crud/edit-resources-form-desktop.tsx
index 7e903e6f3..745d765fd 100644
--- a/packages/ui/resources-crud/edit-resources-form-desktop.tsx
+++ b/packages/ui/resources-crud/edit-resources-form-desktop.tsx
@@ -34,6 +34,7 @@ export function EditResourcesFormDesktop({
 	tools = [],
 	theme = 'light',
 	bodyPanelSlot,
+	mdxPreviewComponent,
 	onResourceBodyChange = () => {},
 	toggleMdxPreview,
 	isShowingMdxPreview,
@@ -72,6 +73,7 @@ export function EditResourcesFormDesktop({
 	tools?: ResourceTool[]
 	theme?: string
 	bodyPanelSlot?: React.ReactNode
+	mdxPreviewComponent?: React.ReactNode
 	onResourceBodyChange?: (value: string) => void
 	toggleMdxPreview?: () => void
 	isShowingMdxPreview?: boolean
@@ -141,6 +143,7 @@ export function EditResourcesFormDesktop({
 					}}
 					toggleMdxPreview={toggleMdxPreview}
 					isShowingMdxPreview={isShowingMdxPreview}
+					mdxPreviewComponent={mdxPreviewComponent}
 				>
 					{bodyPanelSlot}
 				</EditResourcesBodyPanel>
diff --git a/packages/ui/resources-crud/panels/edit-resources-body-panel.tsx b/packages/ui/resources-crud/panels/edit-resources-body-panel.tsx
index f8f563b0f..f7b74ba7f 100644
--- a/packages/ui/resources-crud/panels/edit-resources-body-panel.tsx
+++ b/packages/ui/resources-crud/panels/edit-resources-body-panel.tsx
@@ -24,6 +24,7 @@ export function EditResourcesBodyPanel({
 	partykitUrl,
 	user,
 	children,
+	mdxPreviewComponent,
 	onResourceBodyChange,
 	toggleMdxPreview,
 	isShowingMdxPreview = false,
@@ -42,6 +43,7 @@ export function EditResourcesBodyPanel({
 	partykitUrl: string
 	user?: User | null
 	children?: React.ReactNode
+	mdxPreviewComponent?: React.ReactNode
 	onResourceBodyChange?: (value: string) => void
 	toggleMdxPreview?: () => void
 	isShowingMdxPreview?: boolean
@@ -78,13 +80,13 @@ export function EditResourcesBodyPanel({
 			/>
 		),
 		execute: ({ state, view }) => {
-			if (!children) return
+			if (!mdxPreviewComponent) return
 			if (!state || !view) return
 			toggleMdxPreview && toggleMdxPreview()
 		},
 	}
 
-	const withMdxPreview = Boolean(children)
+	const withMdxPreview = Boolean(mdxPreviewComponent)
 
 	const defaultCommands = [
 		'undo',
@@ -117,7 +119,7 @@ export function EditResourcesBodyPanel({
 						order={2}
 						defaultSize={20}
 					>
-						{children}
+						{mdxPreviewComponent}
 					</ResizablePanel>
 					<ResizableHandle />
 				</>
@@ -129,6 +131,7 @@ export function EditResourcesBodyPanel({
 				className="flex min-h-[var(--pane-layout-height)] md:min-h-full"
 			>
 				<ScrollArea className="flex h-[var(--pane-layout-height)] w-full flex-col justify-start overflow-y-auto">
+					{children}
 					{hasMounted && (
 						<MarkdownEditor
 							previewProps={{