diff --git a/chrome/content/zotero/integration/citationDialog.js b/chrome/content/zotero/integration/citationDialog.js
index 9f8145ee57..3772bb3ea5 100644
--- a/chrome/content/zotero/integration/citationDialog.js
+++ b/chrome/content/zotero/integration/citationDialog.js
@@ -25,6 +25,9 @@
 
 
 const CollectionViewItemTree = require('zotero/collectionViewItemTree');
+const React = require('react');
+const ReactDOM = require('react-dom');
+const VirtualizedTable = require('components/virtualized-table');
 const { getCSSIcon } = require('components/icons');
 const { COLUMNS } = require('zotero/itemTreeColumns');
 var doc, io, ioReadyPromise, ioIsReady, accepted;
@@ -47,10 +50,12 @@ var { CitationDialogKeyboardHandler } = ChromeUtils.importESModule('chrome://zot
 var DIALOG_STATE = {
 	type: null, // 'citation' or 'add-note'
 	loaded: false,
+	isTestRun: false,
 
 	isCitingItems: () => DIALOG_STATE.type == 'citation',
 	isAddingNote: () => DIALOG_STATE.type == 'add-note',
 	isAddingAnnotations: () => DIALOG_STATE.type == 'annotations',
+	getCurrentLayoutType: () => currentLayout?.type,
 };
 
 
@@ -75,7 +80,7 @@ async function onLoad() {
 	let timer = new Zotero.Integration.Timer();
 	timer.start();
 
-	Helpers = new CitationDialogHelpers({ doc, io });
+	Helpers = new CitationDialogHelpers({ doc, dialogState: DIALOG_STATE });
 	SearchHandler = new CitationDialogSearchHandler({ dialogState: DIALOG_STATE, io });
 	PopupsHandler = new CitationDialogPopupsHandler({ doc, dialogState: DIALOG_STATE });
 	KeyboardHandler = new CitationDialogKeyboardHandler({ doc });
@@ -123,6 +128,7 @@ async function onLoad() {
 	// init library layout after bubble input is built since bubble-input's height is a factor
 	// determining initial library layout height
 	await libraryLayout.init();
+	await listLayout.init();
 	// fetch selected items so they are known
 	// before refreshing items list after dialog mode setting
 	await SearchHandler.refreshSelectedAndOpenItems();
@@ -263,7 +269,7 @@ async function setDialogType(type) {
 	}
 
 	// Set proper settings availability depending on the type
-	_id("bubble-input").sortable = DIALOG_STATE.isCitingItems();
+	_id("bubble-input").sortable = DIALOG_STATE.isCitingItems() || DIALOG_STATE.isAddingNote();
 	_id("keepSorted").disabled = !io.sortable || !DIALOG_STATE.isCitingItems();
 	_id("keepSorted").checked = !_id("keepSorted").disabled && !io.citation.properties.unsorted;
 	if (DIALOG_STATE.isCitingItems()) {
@@ -276,6 +282,17 @@ async function setDialogType(type) {
 	else if (DIALOG_STATE.isAddingNote()) {
 		_id("settings-button").hidden = true;
 		_id("keepSorted").disabled = true;
+		_id("note-preview").mode = "merge"; // hides the toolbar
+		// insert a <style> node with a few style tweaks only appropriate for the citation dialog
+		if (!DIALOG_STATE.loaded) {
+			let iframeDoc = _id("editor-view").contentDocument;
+			let style = iframeDoc.createElement('style');
+			style.id = "citation-dialog-style";
+			// smaller padding, no hover on citations, and use default smaller font size
+			let defaultFontSize = parseInt(getComputedStyle(document.documentElement).fontSize);
+			style.textContent = `.primary-editor { padding: 12px !important; --font-size: ${defaultFontSize}px; } .citation:hover { background-color: transparent !important; }`;
+			iframeDoc.head.appendChild(style);
+		}
 	}
 	else if (DIALOG_STATE.isAddingAnnotations()) {
 		// Only library mode supported when adding annotations.
@@ -321,99 +338,9 @@ class Layout {
 		this._lastSearchTime = null;
 	}
 
-	// Re-render the items based on search results
+	// Re-render the items based on search results. Implemented by subclasses.
 	// @param {Boolean} options.retainItemsState: try to restore focused and selected status of item nodes.
-	async refreshItemsList({ retainItemsState } = {}) {
-		Zotero.debug("Citation Dialog: refreshing items list");
-		let sections = [];
-
-		// Tell SearchHandler which currently cited items are so they are not included in results
-		let citedIDs = CitationDataManager.getCitedLibraryItemIDs();
-		let searchResultGroups = SearchHandler.getOrderedSearchResultGroups(citedIDs);
-		for (let { key, group, isLibrary } of searchResultGroups) {
-			// selected items become a collapsible deck/list if there are multiple items
-			let collapsibleGroupID = DIALOG_STATE.isAddingAnnotations() ? "selectedAnnotations" : "selected";
-			let isGroupCollapsible = key == collapsibleGroupID && group.length > 1;
-			
-			// Construct each section and items
-			let sectionHeader = "";
-			if (isLibrary) {
-				sectionHeader = Zotero.Libraries.get(key).name;
-			}
-			// special handling for selected items to display how many total selected items there are
-			else if (key == "selected") {
-				sectionHeader = await doc.l10n.formatValue(`integration-citationDialog-section-${key}`, { count: group.length, total: SearchHandler.allSelectedItemsCount() });
-			}
-			else {
-				sectionHeader = await doc.l10n.formatValue(`integration-citationDialog-section-${key}`, { count: group.length });
-			}
-			let section = Helpers.buildItemsSection(`${this.type}-${key}-items`, sectionHeader, isGroupCollapsible, group.length, this.type);
-			let itemContainer = section.querySelector(".itemsContainer");
-	
-			let items = [];
-			let index = 0;
-			for (let item of group) {
-				// do not add an unreasonable number of nodes into the DOM
-				if (index >= ITEM_LIST_MAX_ITEMS) break;
-				// createItemNode implemented by layouts
-				let itemNode = await this.createItemNode(item, isGroupCollapsible ? index : null);
-				itemNode.addEventListener("click", IOManager.handleItemClick);
-				// items can be dragged into bubble-input to add them into the citation
-				itemNode.addEventListener("dragstart", IOManager._handleItemDragStart);
-				items.push(itemNode);
-				index++;
-			}
-			// if cited group is present but has no items, cited items must be
-			// still loading, so show a placeholder item card
-			if (group.length === 0 && key == "cited") {
-				let placeholder = Helpers.createCitedItemPlaceholder();
-				items = [placeholder];
-			}
-			itemContainer.replaceChildren(...items);
-			sections.push(section);
-			if (isGroupCollapsible) {
-				// handle click on "Add all"
-				section.querySelector(".add-all").addEventListener("click", () => IOManager.addItemsToCitation(group));
-				// await for "All all" label so it does not appear blank for a moment after render
-				let addAllLabel = await doc.l10n.formatValue("integration-citationDialog-add-all");
-				section.querySelector(".add-all").textContent = addAllLabel;
-				// if the user explicitly expanded or collapsed the section, keep it as such
-				if (IOManager.sectionExpandedStatus[section.id]) {
-					IOManager.toggleSectionCollapse(section, IOManager.sectionExpandedStatus[section.id]);
-				}
-				// otherwise, expand the section if something is typed or whenever the list layout is opened
-				else {
-					let activeSearch = SearchHandler.searchValue.length > 0;
-					IOManager.toggleSectionCollapse(section, (activeSearch || this.type == "list") ? "expanded" : "collapsed");
-				}
-			}
-		}
-		let previouslyFocused = doc.activeElement;
-		let previouslySelected = doc.querySelectorAll(".item.selected");
-		_id(`${this.type}-layout`).querySelector(".search-items").replaceChildren(...sections);
-		// Update which bubbles need to be highlighted
-		this.updateSelectedItems();
-
-		// Keep focus and selection on the same item nodes if specified.
-		if (retainItemsState) {
-			doc.getElementById(previouslyFocused.id)?.focus();
-			// Try to retain selected status of items, in case if multiselection was in progress
-			for (let oldNote of previouslySelected) {
-				let itemNode = doc.getElementById(oldNote.id);
-				if (!itemNode) continue;
-				itemNode.classList.add("selected");
-				itemNode.classList.toggle("current", oldNote.classList.contains("current"));
-			}
-		}
-		// Pre-select the item to be added on Enter of an input
-		else if (_id("bubble-input").contains(doc.activeElement)) {
-			this.markPreSelected();
-		}
-		// Ensure focus is never lost
-		if (doc.activeElement.tagName == "body") {
-			IOManager._restorePreClickFocus();
-		}
-	}
+	async refreshItemsList(_options = {}) {}
 
 	// Create the node for selected/cited/opened item groups.
 	// It's different for list and library modes, so it is implemented by layouts.
@@ -490,23 +417,7 @@ class Layout {
 
 	updateSelectedItems() {}
 
-	// Mark initially selected item that can be selected on Enter in an input
-	// Item is pre-selected when there is an active search OR when there are no
-	// items in the citation yet
-	markPreSelected() {
-		for (let itemNode of [...doc.querySelectorAll(".item.selected")]) {
-			itemNode.classList.remove("selected");
-			itemNode.classList.remove("current");
-		}
-		let firstItemNode = _id(`${currentLayout.type}-layout`).querySelector(`.item:not([disabled])`);
-		if (!firstItemNode) return;
-		let activeSearch = SearchHandler.searchValue.length > 0;
-		let noBubbles = !CitationDataManager.items.length;
-		if (activeSearch || noBubbles) {
-			firstItemNode.classList.add("current");
-			IOManager.selectItemNodesRange(firstItemNode);
-		}
-	}
+	markPreSelected() {}
 }
 
 class LibraryLayout extends Layout {
@@ -514,6 +425,7 @@ class LibraryLayout extends Layout {
 		super("library");
 		this._scrolledToFirstCitedOnInit = false;
 		this.MIN_WIDTH = 1000; // min-width from _citationDialog.scss
+		this.sectionExpandedStatus = {};
 	}
 
 	async init() {
@@ -551,6 +463,13 @@ class LibraryLayout extends Layout {
 			itemNode.prepend(topLevelItemTitle);
 		}
 
+		// add a parent title to the item card when inserting a note
+		if (DIALOG_STATE.isAddingNote() && item.parentItemID) {
+			let parentTitleNode = Helpers.createNode("div", {}, "description");
+			Zotero.Utilities.Internal.renderItemTitle(item.topLevelItem.getDisplayTitle(), parentTitleNode);
+			itemNode.prepend(parentTitleNode);
+		}
+
 		if (index !== null) {
 			itemNode.style.setProperty('--deck-index', index);
 		}
@@ -558,23 +477,112 @@ class LibraryLayout extends Layout {
 		return itemNode;
 	}
 
-	async refreshItemsList(options = {}) {
-		await super.refreshItemsList(options);
+	async refreshItemsList({ retainItemsState, skipWindowResize } = {}) {
+		Zotero.debug("Citation Dialog: refreshing items list");
+		let sections = [];
+
+		// Tell SearchHandler which currently cited items are so they are not included in results
+		let citedIDs = CitationDataManager.getCitedLibraryItemIDs();
+		let searchResultGroups = SearchHandler.getOrderedSearchResultGroups(citedIDs);
+		for (let { key, group, label } of searchResultGroups) {
+			// selected items become a collapsible deck/list if there are multiple items
+			let collapsibleGroupID = "selected";
+			if (DIALOG_STATE.isAddingAnnotations()) {
+				collapsibleGroupID = "selectedAnnotations";
+			}
+			else if (DIALOG_STATE.isAddingNote()) {
+				collapsibleGroupID = "selectedNotes";
+			}
+			let isGroupCollapsible = key == collapsibleGroupID && group.length > 1;
+
+			// Use the precomputed label from SearchHandler (library groups) or
+			// generate one for the known section keys.
+			let sectionHeader = label;
+			if (!sectionHeader) {
+				sectionHeader = await Helpers.getSectionLabel(key, group, SearchHandler.allSelectedItemsCount());
+			}
+			let section = Helpers.buildItemsSection(`${this.type}-${key}-items`, sectionHeader, isGroupCollapsible, group.length, this.type);
+			let itemContainer = section.querySelector(".itemsContainer");
+
+			let items = [];
+			let index = 0;
+			for (let { item } of group) {
+				// do not add an unreasonable number of nodes into the DOM
+				if (index >= ITEM_LIST_MAX_ITEMS) break;
+				let itemNode = await this.createItemNode(item, isGroupCollapsible ? index : null);
+				itemNode.addEventListener("click", e => this.handleItemClick(e));
+				// items can be dragged into bubble-input to add them into the citation
+				itemNode.addEventListener("dragstart", IOManager._handleItemDragStart);
+				items.push(itemNode);
+				index++;
+			}
+			// if cited group is present but has no items, cited items must be
+			// still loading, so show a placeholder item card
+			if (group.length === 0 && key == "cited") {
+				let placeholder = Helpers.createCitedItemPlaceholder();
+				items = [placeholder];
+			}
+			itemContainer.replaceChildren(...items);
+			sections.push(section);
+			if (isGroupCollapsible) {
+				// handle click on "Add all"
+				section.querySelector(".add-all").addEventListener("click", () => IOManager.addItemsToCitation(group.map(e => e.item)));
+				// await for "All all" label so it does not appear blank for a moment after render
+				let addAllLabel = await doc.l10n.formatValue("integration-citationDialog-add-all");
+				section.querySelector(".add-all").textContent = addAllLabel;
+				// if the user explicitly expanded or collapsed the section, keep it as such
+				if (this.sectionExpandedStatus[section.id]) {
+					Helpers.toggleSectionCollapse(section, this.sectionExpandedStatus[section.id]);
+				}
+				// otherwise, expand the section if something is typed or whenever the list layout is opened
+				else {
+					let activeSearch = SearchHandler.searchValue.length > 0;
+					Helpers.toggleSectionCollapse(section, (activeSearch || this.type == "list") ? "expanded" : "collapsed");
+				}
+			}
+		}
+		let previouslyFocused = doc.activeElement;
+		let previouslySelected = doc.querySelectorAll(".item.selected");
+		_id(`${this.type}-layout`).querySelector(".search-items").replaceChildren(...sections);
+		// Update which bubbles need to be highlighted
+		this.updateSelectedItems();
+
+		// Keep focus and selection on the same item nodes if specified.
+		if (retainItemsState) {
+			doc.getElementById(previouslyFocused.id)?.focus();
+			// Try to retain selected status of items, in case if multiselection was in progress
+			for (let oldNote of previouslySelected) {
+				let itemNode = doc.getElementById(oldNote.id);
+				if (!itemNode) continue;
+				itemNode.classList.add("selected");
+				itemNode.classList.toggle("current", oldNote.classList.contains("current"));
+			}
+		}
+		// Pre-select the item to be added on Enter of an input
+		else if (_id("bubble-input").contains(doc.activeElement)) {
+			this.markPreSelected();
+		}
+		// Ensure focus is never lost
+		if (doc.activeElement.tagName == "body") {
+			IOManager._restorePreClickFocus();
+		}
+
 		_id("library-other-items").querySelector(".search-items").hidden = !_id("library-layout").querySelector(".section:not([hidden])");
 		_id("library-no-suggested-items-message").hidden = !_id("library-other-items").querySelector(".search-items").hidden;
 		// When there are no matches, show a message
 		if (!_id("library-no-suggested-items-message").hidden) {
 			doc.l10n.setAttributes(_id("library-no-suggested-items-message"), `integration-citationDialog-lib-message-${DIALOG_STATE.type}`, { search: SearchHandler.searchValue.length > 0 });
 		}
-		if (!options.skipWindowResize) {
+		if (!skipWindowResize) {
 			this.resizeWindow();
 		}
-		let collapsibleDecks = [..._id("library-other-items").querySelectorAll(".section.expandable")];
-		for (let collapsibleDeck of collapsibleDecks) {
+		let collapsibleDeck = _id("library-other-items").querySelector(".section.expandable");
+		if (collapsibleDeck) {
 			collapsibleDeck.querySelector(".itemsContainer").addEventListener("click", this._captureItemsContainerClick, true);
 			collapsibleDeck.querySelector(".itemsContainer").classList.add("keyboard-clickable");
 			collapsibleDeck.querySelector(".collapse-section-btn").addEventListener("click", (event) => {
-				IOManager.toggleSectionCollapse(collapsibleDeck, "collapsed", true);
+				Helpers.toggleSectionCollapse(collapsibleDeck, "collapsed");
+				libraryLayout.sectionExpandedStatus[collapsibleDeck.id] = "collapsed";
 				// on mouse click, move focus from the button that will disappear onto the collapsed deck
 				if (!event.clientX && !event.clientY) {
 					collapsibleDeck.querySelector(".itemsContainer").focus();
@@ -583,6 +591,88 @@ class LibraryLayout extends Layout {
 		}
 	}
 
+	async handleItemClick(event) {
+		let targetItem = event.target.closest(".item");
+		let multiselectable = targetItem.closest("[data-multiselectable]");
+		
+		// Debounce double clicks so one does not add multiple items unintentionally
+		if (this._lastClickTime && (new Date()).getTime() - this._lastClickTime < 300) {
+			event.preventDefault();
+			event.stopPropagation();
+			return;
+		}
+		this._lastClickTime = (new Date()).getTime();
+
+		// Cmd/Ctrl + mouseclick toggles selected item node
+		if (multiselectable && ((Zotero.isMac && event.metaKey) || (!Zotero.isMac && event.ctrlKey))) {
+			Helpers.toggleItemNodeSelect(targetItem);
+			return;
+		}
+		// Shift + click selects a range
+		if (multiselectable && event.shiftKey) {
+			let itemNodes = [..._id("library-layout").querySelectorAll(".item")];
+			let firstNode = _id("library-layout").querySelector(".item.selected") || itemNodes[0];
+			Helpers.selectItemNodesRange(firstNode, targetItem);
+			return;
+		}
+		// get itemIDs associated with the nodes
+		let itemIDs = new Set([targetItem.getAttribute("itemID")]);
+		// if target item is selected, add all other selected itemIDs
+		if (targetItem.classList.contains("selected")) {
+			let selectedItemNodes = _id("library-layout").querySelectorAll(".item.selected");
+			for (let itemNode of selectedItemNodes) {
+				itemIDs.add(itemNode.getAttribute("itemID"));
+			}
+		}
+		let itemsToAdd = Array.from(itemIDs).map(itemID => SearchHandler.getItem(itemID));
+		// while adding annotations, clicking on selected non-annotation(s) will select them in itemTree
+		if (DIALOG_STATE.isAddingAnnotations() && !itemsToAdd.every(i => i.isAnnotation())) {
+			let selected = await this.itemsView.selectItems([...itemIDs].map(id => parseInt(id)));
+			// if no items were selected, select item's group in collection tree and try again
+			if (!selected) {
+				await this.collectionsView.selectLibrary(itemsToAdd[0].libraryID);
+				this.itemsView.selectItems([...itemIDs].map(id => parseInt(id)));
+			}
+			_id("zotero-items-tree").querySelector("[tabindex]").focus();
+			return;
+		}
+		// while adding a note, clicking on a parent regular item selects its first
+		// child note in the itemTree so the sidebar preview displays it
+		if (DIALOG_STATE.isAddingNote()) {
+			let parentItem = Zotero.Items.get(targetItem.getAttribute("itemID"));
+			if (parentItem.isRegularItem()) {
+				let notes = parentItem.getNotes();
+				if (!notes.length) return;
+				let selected = await this.itemsView.selectItem(notes[0]);
+				if (!selected) {
+					await this.collectionsView.selectLibrary(parentItem.libraryID);
+					this.itemsView.selectItem(notes[0]);
+				}
+				_id("zotero-items-tree").querySelector("[tabindex]").focus();
+				return;
+			}
+		}
+		IOManager.addItemsToCitation(itemsToAdd);
+	}
+
+	// Mark initially selected item that can be selected on Enter in an input.
+	// Item is pre-selected when there is an active search OR when there are no
+	// items in the citation yet.
+	markPreSelected() {
+		for (let itemNode of [...doc.querySelectorAll(".item.selected")]) {
+			itemNode.classList.remove("selected");
+			itemNode.classList.remove("current");
+		}
+		let firstItemNode = _id("library-layout").querySelector(`.item:not([disabled])`);
+		if (!firstItemNode) return;
+		let activeSearch = SearchHandler.searchValue.length > 0;
+		let noBubbles = !CitationDataManager.items.length;
+		if (activeSearch || noBubbles) {
+			firstItemNode.classList.add("current");
+			Helpers.selectItemNodesRange(firstItemNode);
+		}
+	}
+
 	// Refresh itemTree to properly display +/- icons column
 	async refreshItemsView() {
 		await this._refreshItemsViewHighlightedRows();
@@ -637,11 +727,12 @@ class LibraryLayout extends Layout {
 		// expand the deck of items if it is collapsed
 		if (section.classList.contains("expanded")) return;
 		event.stopPropagation();
-		IOManager.toggleSectionCollapse(section, "expanded", true);
+		Helpers.toggleSectionCollapse(section, "expanded");
+		libraryLayout.sectionExpandedStatus[section.id] = "expanded";
 		// if the click is keyboard-initiated, focus the first item
 		if (event.layerX == 0 && event.layerY == 0) {
 			let firstItem = section.querySelector(".item");
-			IOManager.selectItemNodesRange(firstItem);
+			Helpers.selectItemNodesRange(firstItem);
 			section.querySelector(".item").focus();
 		}
 	}
@@ -696,9 +787,7 @@ class LibraryLayout extends Layout {
 			columnPicker: true,
 			onSelectionChange: () => {
 				libraryLayout.updateSelectedItems();
-				if (DIALOG_STATE.isAddingAnnotations()) {
-					this._handleSelectionChangeWithAnnotation();
-				}
+				this._updateSidenavWithSelection();
 			},
 			regularOnly: DIALOG_STATE.isCitingItems(),
 			multiSelect: DIALOG_STATE.isCitingItems() || DIALOG_STATE.isAddingAnnotations(),
@@ -900,34 +989,48 @@ class LibraryLayout extends Layout {
 		});
 	}
 
-	_handleSelectionChangeWithAnnotation() {
-		let selectedItems = this.itemsView.getSelectedItems().filter(item => item.isAnnotation() || item.isFileAttachment() || item.isRegularItem());
-		let selectedAnnotations = selectedItems.flatMap(item => SearchHandler.getAllAnnotations(item));
-		let uniqueAnnotations = [];
-		let annotationIDs = new Set();
-		for (let annotation of selectedAnnotations) {
-			if (annotationIDs.has(annotation.id)) continue;
-			uniqueAnnotations.push(annotation);
-			annotationIDs.add(annotation.id);
+	_updateSidenavWithSelection() {
+		if (DIALOG_STATE.isAddingAnnotations()) {
+			let selectedItems = this.itemsView.getSelectedItems().filter(item => item.isAnnotation() || item.isFileAttachment() || item.isRegularItem());
+			let selectedAnnotations = selectedItems.flatMap(item => SearchHandler.getAllAnnotations(item));
+			let uniqueAnnotations = [];
+			let annotationIDs = new Set();
+			for (let annotation of selectedAnnotations) {
+				if (annotationIDs.has(annotation.id)) continue;
+				uniqueAnnotations.push(annotation);
+				annotationIDs.add(annotation.id);
+			}
+			// Don't re-render if the list has not changed
+			let rendered = new Set(_id("annotations-list").items.map(item => item.id));
+			if (rendered.isSupersetOf(annotationIDs) && rendered.isSubsetOf(annotationIDs)) return;
+
+			// When no annotations are selected, a message will be shown
+			_id("annotations-list-wrapper").hidden = uniqueAnnotations.length == 0;
+			_id("annotations-sidebar-filter-wrapper").hidden = uniqueAnnotations.length == 0;
+			_id("annotations-message").hidden = uniqueAnnotations.length > 0;
+
+			_id("annotations-list").items = uniqueAnnotations;
+			_id("annotations-list").filter = "";
+			_id("annotations-sidebar-filter").value = "";
+			_id("annotations-list").render();
+
+			// Add the plus icon to every annotation row
+			let annotationRows = [...doc.querySelectorAll("#annotations-list annotation-row")];
+			for (let annotationRow of annotationRows) {
+				annotationRow.setAttribute("action", "plus");
+			}
 		}
-		// Don't re-render if the list has not changed
-		let rendered = new Set(_id("annotations-list").items.map(item => item.id));
-		if (rendered.isSupersetOf(annotationIDs) && rendered.isSubsetOf(annotationIDs)) return;
-
-		// When no annotations are selected, a message will be shown
-		_id("annotations-list-wrapper").hidden = uniqueAnnotations.length == 0;
-		_id("annotations-sidebar-filter-wrapper").hidden = uniqueAnnotations.length == 0;
-		_id("annotations-message").hidden = uniqueAnnotations.length > 0;
-
-		_id("annotations-list").items = uniqueAnnotations;
-		_id("annotations-list").filter = "";
-		_id("annotations-sidebar-filter").value = "";
-		_id("annotations-list").render();
-
-		// Add the plus icon to every annotation row
-		let annotationRows = [...doc.querySelectorAll("#annotations-list annotation-row")];
-		for (let annotationRow of annotationRows) {
-			annotationRow.setAttribute("action", "plus");
+		else if (DIALOG_STATE.isAddingNote()) {
+			let selectedItem = this.itemsView.getSelectedItems()[0];
+			if (selectedItem?.isNote()) {
+				_id("note-preview").item = selectedItem;
+				_id("note-preview").hidden = false;
+				_id("empty-note-preview-message").hidden = true;
+			}
+			else {
+				_id("note-preview").hidden = true;
+				_id("empty-note-preview-message").hidden = false;
+			}
 		}
 	}
 
@@ -983,22 +1086,151 @@ class LibraryLayout extends Layout {
 	}
 }
 
+// A single row of the list-mode virtualized table. Represents a section header,
+// an item, a cited-items loading placeholder, or a divider after a section.
+class ListRow {
+	constructor({ kind, ref } = {}) {
+		this.kind = kind; // "header" | "item" | "placeholder" | "divider"
+		this.ref = ref || {};
+		this._parent = null;
+		this.children = [];
+		this.isOpen = true;
+		this.collapsed = false;
+	}
+
+	get parent() {
+		return this._parent;
+	}
+
+	// Setting a parent automatically registers this row as a child of
+	// the new parent (and unregisters from the old one if any).
+	set parent(newParent) {
+		if (this._parent === newParent) return;
+		if (this._parent) {
+			let idx = this._parent.children.indexOf(this);
+			if (idx !== -1) this._parent.children.splice(idx, 1);
+		}
+		this._parent = newParent;
+		if (newParent && !newParent.children.includes(this)) {
+			newParent.children.push(this);
+		}
+	}
+
+	// Recursively collect all descendants of this row.
+	getDescendants() {
+		let result = [];
+		for (let child of this.children) {
+			result.push(child);
+			result.push(...child.getDescendants());
+		}
+		return result;
+	}
+
+	get id() {
+		if (this.kind === "header") return this.ref.sectionId;
+		if (this.kind === "item") return this.ref.cslItemID || this.ref.id;
+		return null;
+	}
+
+	// True if the user can collapse/expand this row.
+	// - Section headers: only the "selected" section with multiple children.
+	// - Items: any item with children (e.g. parent items with sub-rows).
+	get isCollapsible() {
+		if (this.kind === "header") {
+			return this.ref?.sectionId === "list-selected-items" && this.children.length > 1;
+		}
+		if (this.kind === "item") {
+			return this.children.length > 0;
+		}
+		return false;
+	}
+
+	get isSelectable() {
+		if (this.collapsed) return false;
+		if (this.kind === "item") return true;
+		if (this.isCollapsible) return true;
+		return false;
+	}
+
+	// True if activating this row would add it to bubble-input.
+	// Container rows (non-note parents in note mode) are selectable/navigable
+	// but not addable — they expand/collapse instead.
+	get canBeAdded() {
+		if (this.kind !== "item") return false;
+		if (this.collapsed) return false;
+		if (DIALOG_STATE.isAddingNote()) return !!this.ref.isNote();
+		return true;
+	}
+
+	get renderHeight() {
+		return this.collapsed ? 0 : this.height;
+	}
+
+	get height() {
+		switch (this.kind) {
+			case "header": return 25;
+			case "divider": return 9;
+			default:
+				// Note rows render a two-line description, making them taller
+				// than a standard single-line item row.
+				if (this.kind === "item" && this.ref.isNote()) {
+					let note = Zotero.Utilities.unescapeHTML(this.ref.note).trim().slice(0, 500);
+					let hasSecondLine = note.split('\n').map(x => x.trim()).filter(x => x.length)[2];
+					if (hasSecondLine) {
+						return 58;
+					}
+				}
+				return 42; // item, placeholder
+		}
+	}
+}
+
 class ListLayout extends Layout {
 	constructor() {
 		super("list");
 		this.MIN_WIDTH = 800; // min-width from _citationDialog.scss
+		this._listRows = [];
+		this._table = null;
+		// Row IDs that the user has explicitly collapsed. Persisted across
+		// refreshItemsList calls so that a row remains collapsed even after
+		// temporarily becoming non-collapsible (e.g. filtered down to 1 item).
+		this._collapsedRowIDs = new Set();
+	}
+
+	async init() {
+		await new Promise((resolve) => {
+			ReactDOM.createRoot(_id('list-layout-wrapper')).render(
+				<VirtualizedTable
+					id="citationDialog-list-table"
+					ref={(r) => { this._table = r; resolve(); }}
+					getRowCount={() => this._listRows.length}
+					renderItem={this._renderRow.bind(this)}
+					multiSelect={true}
+					getRowString={i => this._listRows[i]?.ref?.getDisplayTitle?.() || ""}
+					isSelectable={i => this._listRows[i]?.isSelectable}
+					onSelectionChange={() => this.updateSelectedItems()}
+					onActivate={(event, indices) => this._handleActivate(event, indices)}
+					isContainer={i => this._listRows[i]?.children.length > 0}
+					isContainerOpen={i => this._listRows[i]?.isOpen}
+					isContainerEmpty={i => this._listRows[i]?.children.length === 0}
+					toggleOpenState={i => this.toggleRowCollapse(this._listRows[i])}
+					getParentIndex={i => {
+						let parent = this._listRows[i]?.parent;
+						return parent ? this._listRows.indexOf(parent) : -1;
+					}}
+					role="listbox"
+				/>
+			);
+		});
+		// Make the VT root reachable by Tab navigation
+		this._table._topDiv?.setAttribute("data-tabindex", "30");
 	}
 
 	// Create item node for an item group and store item ids in itemIDs attribute
-	async createItemNode(item) {
+	createItemNode(item) {
 		let itemNode = Helpers.createNode("div", {
-			tabindex: "-1",
-			"data-l10n-id": "integration-citationDialog-aria-item-list",
-			role: "option",
-			"data-tabindex": 30,
-			"data-arrow-nav-enabled": true,
 			draggable: true
-		}, "item keyboard-clickable");
+		}, "item");
 		let id = item.cslItemID || item.id;
 		itemNode.setAttribute("itemID", id);
 		itemNode.setAttribute("role", "option");
@@ -1009,7 +1241,7 @@ class ListLayout extends Layout {
 
 		let title = Helpers.buildItemTitle(item);
 		let titleContent = Helpers.createNode("span", {}, "");
-		let description = Helpers.buildItemDescription(item);
+		let description = Helpers.buildItemDescription(item, { twoLines: DIALOG_STATE.isAddingNote() });
 		Zotero.Utilities.Internal.renderItemTitle(item.getDisplayTitle(), titleContent);
 		title.prepend(icon);
 		itemNode.append(title, description);
@@ -1021,50 +1253,355 @@ class ListLayout extends Layout {
 		return itemNode;
 	}
 
-	async refreshItemsList(options = {}) {
-		await super.refreshItemsList(options);
+	async refreshItemsList({ skipWindowResize, retainItemsState } = {}) {
+		Zotero.debug("Citation Dialog: refreshing list items");
+		// If requested, snapshot the currently-selected item IDs so we can
+		// re-select the same items after rebuilding _listRows.
+		let previouslySelectedIDs = null;
+		if (retainItemsState) {
+			previouslySelectedIDs = new Set(
+				this.getSelectedItems().map(item => item.cslItemID || item.id)
+			);
+		}
+		this._listRows = [];
+
+		let citedIDs = CitationDataManager.getCitedLibraryItemIDs();
+		let groups = SearchHandler.getOrderedSearchResultGroups(citedIDs);
+
+		for (let [groupIndex, { key, group, label }] of groups.entries()) {
+			let sectionId = `list-${key}-items`;
+			let isLastGroup = groupIndex === groups.length - 1;
+
+			// Use precomputed label (library groups) or generate one for known keys.
+			let headerText = label;
+			if (!headerText) {
+				headerText = await Helpers.getSectionLabel(key, group, SearchHandler.allSelectedItemsCount());
+			}
+
+			// Store unwrapped items on the header ref so "Add all" callers
+			// get plain item arrays, not { item, children } wrappers.
+			let groupItems = group.map(e => e.item);
+			let headerRef = { sectionId, headerText, group: groupItems };
+			let headerRow = new ListRow({ kind: "header", ref: headerRef });
+			this._listRows.push(headerRow);
+
+			let sectionRows = [];
+			if (group.length === 0 && key === "cited") {
+				let row = new ListRow({ kind: "placeholder" });
+				row.parent = headerRow;
+				sectionRows.push(row);
+			}
+			else {
+				// group is an array of { item, children } objects from SearchHandler
+				for (let { item, children } of group) {
+					let row = new ListRow({ kind: "item", ref: item });
+					row.parent = headerRow;
+					sectionRows.push(row);
+					for (let child of children) {
+						let childRow = new ListRow({ kind: "item", ref: child });
+						childRow.parent = row;
+						sectionRows.push(childRow);
+					}
+				}
+			}
+			this._listRows.push(...sectionRows);
+			// divider row emitted as the last custom row of each section,
+			// except after the very last section
+			if (!isLastGroup) {
+				this._listRows.push(new ListRow({ kind: "divider" }));
+			}
+		}
+
+		// Restore collapsed state
+		for (let row of this._listRows) {
+			if (row.isCollapsible && this._collapsedRowIDs.has(row.id)) {
+				row.isOpen = false;
+				for (let child of row.getDescendants()) {
+					child.collapsed = true;
+				}
+			}
+		}
 
 		// Hide padding of list layout if there is not a single item to show
-		let isEmpty = !_id("list-layout").querySelector(".section:not([hidden])");
-		_id("list-layout").classList.toggle("empty", isEmpty);
-		// Explicitly set the height of the container so the transition works when container is collapssed
-		for (let container of [..._id("list-layout").querySelectorAll(".itemsContainer")]) {
-			container.style.height = `${container.scrollHeight}px`;
+		_id("list-layout").classList.toggle("empty", this._listRows.length === 0);
+
+		// Push per-row heights to the virtualized table's _customRowHeightMap
+		this._table.updateCustomRowHeights(
+			this._listRows.map((row, i) => [i, row.renderHeight])
+		);
+
+		// Restore previous selection if requested and non-empty; otherwise
+		// fall through to the default pre-selection logic.
+		let restored = false;
+		if (previouslySelectedIDs && previouslySelectedIDs.size > 0) {
+			this._table.selection.selectEventsSuppressed = true;
+			this._table.selection.clearSelection();
+			for (let [i, row] of this._listRows.entries()) {
+				if (row.kind === "item" && row.ref && previouslySelectedIDs.has(row.ref.cslItemID || row.ref.id)) {
+					this._table.selection.toggleSelect(i);
+					restored = true;
+				}
+			}
+			this._table.selection.selectEventsSuppressed = false;
 		}
-		// collapse/expand collapsible section when header is clicked
-		let collapsibleSection = doc.querySelector(".section.expandable");
-		if (collapsibleSection) {
-			collapsibleSection.querySelector(".header-label").addEventListener("click", () => IOManager.toggleSectionCollapse(collapsibleSection, null, true));
+		if (restored) {
+			this.updateSelectedItems();
 		}
-		if (!options.skipWindowResize) {
+		else {
+			this.markPreSelected();
+			this.updateSelectedItems();
+		}
+		this._table.invalidate();
+
+		if (!skipWindowResize) {
 			this.resizeWindow();
 		}
 	}
 
+	// Handle single click on an item row. Plain click (no modifiers) adds the
+	// item to the citation immediately. Modifier clicks (Shift/Cmd/Ctrl) only
+	// adjust selection (handled by VT natively) without adding.
+	_handleItemMouseUp(event, index) {
+		// Only handle plain left clicks -- modifier clicks build multi-selection
+		if (event.button !== 0 || event.shiftKey || event.ctrlKey || event.metaKey) return;
+		let row = this._listRows[index];
+		if (!row || row.kind !== "item" || !row.ref) return;
+		// In note mode, clicking a container parent row toggles its collapse
+		// rather than adding it (parent regular items are not addable as notes).
+		if (DIALOG_STATE.isAddingNote() && !row.ref.isNote?.()) {
+			if (row.isCollapsible) this.toggleRowCollapse(row);
+			return;
+		}
+		// If the clicked row is part of an existing multi-selection, add all
+		// selected items. Otherwise, only add the clicked row.
+		let selectedItems = this.getSelectedItems();
+		let clickedIsSelected = this._table.selection.isSelected(index);
+		let items = (clickedIsSelected && selectedItems.length > 1) ? selectedItems : [row.ref];
+		IOManager.addItemsToCitation(items);
+	}
+
+	// Handle Enter / double-click on selected rows.
+	// For items: adds all selected items to the citation.
+	// For collapsible headers: adds all items in the section ("Add all").
+	_handleActivate(_event, indices) {
+		// If a collapsible header is activated (on Enter), treat it as "Add all"
+		for (let i of indices) {
+			let row = this._listRows[i];
+			if (row?.kind === "header" && row.isCollapsible) {
+				IOManager.addItemsToCitation(row.ref.group);
+				_event.stopPropagation();
+				return;
+			}
+		}
+		// In note mode, Enter on a container parent item toggles its collapse
+		for (let i of indices) {
+			let row = this._listRows[i];
+			if (row?.kind === "item" && row.isCollapsible
+					&& DIALOG_STATE.isAddingNote() && !row.ref.isNote()) {
+				this.toggleRowCollapse(row);
+				_event.stopPropagation();
+				return;
+			}
+		}
+		let items = this.getSelectedItems();
+		if (items.length) {
+			_event.stopPropagation();
+			IOManager.addItemsToCitation(items);
+		}
+	}
+
+	// Row renderer for the virtualized table.
+	_renderRow(index, selection, oldDiv) {
+		let row = this._listRows[index];
+		let div = oldDiv || document.createElement('div');
+		div.className = "row";
+		div.replaceChildren();
+		div.setAttribute("role", "option");
+		div.removeAttribute("data-l10n-id");
+
+		let isFocused = selection.focused === index;
+
+		if (row.kind === "header") {
+			let header = Helpers.buildListHeader(row, selection.isSelected(index), isFocused, {
+				labelClick: () => this.toggleRowCollapse(row),
+				addAllClick: () => IOManager.addItemsToCitation(row.ref.group),
+			});
+			div.appendChild(header);
+		}
+		else if (row.kind === "placeholder") {
+			div.appendChild(Helpers.createCitedItemPlaceholder());
+		}
+		else if (row.kind === "divider") {
+			let divider = doc.createElement("div");
+			divider.className = "divider";
+			div.appendChild(divider);
+		}
+		else {
+			div.setAttribute("data-l10n-id", "integration-citationDialog-aria-item-list");
+			let node = this.createItemNode(row.ref);
+			let isSelected = selection.isSelected(index);
+			node.classList.toggle("selected", isSelected);
+			node.classList.toggle("focused", isFocused);
+			node.classList.toggle("first-selected", selection.isFirstRowOfSelectionBlock(index));
+			node.classList.toggle("last-selected", selection.isLastRowOfSelectionBlock(index));
+			node.setAttribute("aria-selected", isSelected);
+			// Note-mode: classify rows as containers (non-note parents) or
+			// children (notes with a parent), and reflect collapse state.
+			if (DIALOG_STATE.isAddingNote() && row.kind === "item") {
+				if (row.ref.isNote()) {
+					if (row.parent?.kind === "item") {
+						node.classList.add("child");
+					}
+				}
+				else {
+					node.classList.add("container");
+					node.setAttribute("aria-disabled", true);
+					node.classList.toggle("collapsed", !row.isOpen);
+				}
+			}
+			// Necessary for dragstart to fire
+			node.addEventListener("mousedown", e => e.stopPropagation());
+			node.addEventListener("mouseup", e => this._handleItemMouseUp(e, index));
+			node.addEventListener("dragstart", IOManager._handleItemDragStart);
+			div.appendChild(node);
+		}
+		return div;
+	}
+
+	// Toggle expand/collapse state of a row's children. Works for any
+	// collapsible row (section headers, and in the future parent items with
+	// child rows). Row visibility is driven by the collapsed flag rather
+	// than splicing rows in/out of _listRows, so a refresh is not required.
+	toggleRowCollapse(row, status = null) {
+		let nextOpen;
+		if (status === "expanded") nextOpen = true;
+		else if (status === "collapsed") nextOpen = false;
+		else nextOpen = !row.isOpen;
+		if (nextOpen === row.isOpen) return;
+		row.isOpen = nextOpen;
+		// Persist the user's choice so it survives refreshes
+		if (nextOpen) this._collapsedRowIDs.delete(row.id);
+		else this._collapsedRowIDs.add(row.id);
+		this._animateToggle(row);
+	}
+
+	// Animate all descendants of a row from their current rendered heights to
+	// their target heights (intrinsic height if the parent is open, 0 if
+	// closed). Runs a RAF loop with cubic-out easing (matching
+	// Helpers.smoothResize) that updates the VT's custom row height map each
+	// frame.
+	_animateToggle(row) {
+		// Cancel any running animation so the new one can start immediately
+		if (this._animationId) {
+			cancelAnimationFrame(this._animationId);
+			this._animationId = null;
+		}
+
+		let animatingRows = row.getDescendants();
+		if (!animatingRows.length) return;
+
+		// Snapshot the VT's current custom-height map. updateCustomRowHeights
+		// replaces the entire map each call, so we merge the interpolated
+		// heights into this base every frame to keep other rows' heights.
+		let base = Object.assign({}, this._table._customRowHeightMap);
+		let specs = animatingRows.map(r => ({
+			index: this._listRows.indexOf(r),
+			from: r.renderHeight,
+			to: row.isOpen ? r.height : 0,
+		}));
+
+		// Commit the final state on the list rows so getTableHeight returns the
+		// target total height. The VT animation handles the intermediate heights
+		// in its own _customRowHeightMap -- our collapsed flag is only read
+		// when the animation is not running.
+		for (let r of animatingRows) {
+			r.collapsed = !row.isOpen;
+		}
+
+		// Resize the window to the post-animation height in parallel with the
+		// row animation. smoothResize uses the same 300ms cubic-out easing.
+		this.resizeWindow();
+
+		let duration = 300;
+		let startTime = null;
+		let tick = (timestamp) => {
+			if (!startTime) startTime = timestamp;
+			let progress = Math.min((timestamp - startTime) / duration, 1);
+			let ease = 1 - Math.pow(1 - progress, 3);
+			let merged = Object.assign({}, base);
+			for (let s of specs) {
+				merged[s.index] = s.from + (s.to - s.from) * ease;
+			}
+			this._table.updateCustomRowHeights(
+				Object.entries(merged).map(([k, v]) => [+k, v])
+			);
+			this._table.invalidate();
+			if (progress < 1) {
+				this._animationId = requestAnimationFrame(tick);
+			}
+			else {
+				this._animationId = null;
+			}
+		};
+		this._animationId = requestAnimationFrame(tick);
+	}
+
+	// Pre-select the first item row so Enter from bubble-input adds it.
+	// Only pre-selects when there is an active search or no items in the citation yet.
+	markPreSelected() {
+		if (!this._table) return;
+		this._table.selection.clearSelection();
+		let activeSearch = SearchHandler.searchValue.length > 0;
+		let noBubbles = !CitationDataManager.items.length;
+		if (activeSearch || noBubbles) {
+			let firstItem = this._listRows.findIndex(r => r.canBeAdded);
+			if (firstItem >= 0) {
+				this._table.selection.select(firstItem);
+				this._table.scrollToRow(0);
+			}
+		}
+	}
+
+	// Return item refs (Zotero.Item objects) for all currently-selected item rows.
+	getSelectedItems() {
+		if (!this._table) return [];
+		return Array.from(this._table.selection.selected)
+			.map(i => this._listRows[i])
+			.filter(r => r?.kind === "item" && r.ref)
+			.map(r => r.ref);
+	}
+
 	updateSelectedItems() {
-		let selectedIDs = new Set([...doc.querySelectorAll(".item.selected")].map(node => parseInt(node.getAttribute("itemID"))));
+		if (!this._table) return;
+		let selectedIDs = new Set(this.getSelectedItems().map(item => item.cslItemID || item.id));
 		for (let bubbleItem of CitationDataManager.items) {
 			bubbleItem.selected = selectedIDs.has(bubbleItem.id);
 		}
 		IOManager.updateBubbleInput();
 	}
 
-	async resizeWindow() {
+	// Calculate the total rendered height of the virtualized table based on the
+	// known row heights (headers/items/placeholders/dividers) plus the vertical
+	// padding of the virtualized-table-body. Used by resizeWindow to fit the
+	// dialog to its content without measuring DOM geometry.
+	getTableHeight() {
+		let rowsHeight = this._listRows.reduce((sum, row) => sum + row.renderHeight, 0);
+		let vtBody = _id("list-layout-wrapper")?.querySelector(".virtualized-table-body");
+		let padding = 0;
+		if (vtBody) {
+			let cs = getComputedStyle(vtBody);
+			padding = parseInt(cs.paddingTop) + parseInt(cs.paddingBottom);
+		}
+		return rowsHeight + padding;
+	}
+
+	async resizeWindow({ tableHeight } = {}) {
 		await Helpers.smoothResizingPromise;
 		let bubbleInputHeight = Helpers.getSearchRowHeight();
 
-		// height of all sections
-		let sectionsHeight = 0;
-		for (let section of [..._id("list-layout").querySelectorAll(".section:not([hidden])")]) {
-			sectionsHeight += section.getBoundingClientRect().height;
-		}
-
-		// account for padding of the items list
-		let sectionsWrapperStyle = getComputedStyle(_id("list-layout-wrapper"));
-		let sectionsWrapperPadding = 0;
+		tableHeight = tableHeight ?? this.getTableHeight();
 		let marginOfError = 0;
-		if (sectionsHeight > 0) {
-			sectionsWrapperPadding = parseInt(sectionsWrapperStyle.paddingTop) + parseInt(sectionsWrapperStyle.paddingBottom);
+		if (tableHeight > 0) {
 			// margin of error to ensure that the scrollbar does not appear unless really necessary
 			marginOfError = Zotero.isWin ? 6 : 2;
 		}
@@ -1073,7 +1610,7 @@ class ListLayout extends Layout {
 		let bottomHeight = _id("bottom-area-wrapper").getBoundingClientRect().height;
 
 		// set min height and resize the window
-		let autoHeight = bubbleInputHeight + sectionsHeight + sectionsWrapperPadding + bottomHeight + marginOfError;
+		let autoHeight = bubbleInputHeight + tableHeight + bottomHeight + marginOfError;
 		// window.resizeTo(X,Y) resizes the window so that it's outerHeight == Y. On mac and windows,
 		// innerHeight and outerHeight are the same. On linux, the outerHeight > innerHeight, perhaps
 		// outerHeight there includes chrome, borders, etc. This difference is accounted for below, so that the dialog
@@ -1093,50 +1630,21 @@ class ListLayout extends Layout {
 		setTimeout(() => {
 			Helpers.smoothResize(targetWidth, autoHeight, {
 				onComplete: () => {
-					_id("bubble-input").refocusInput();
+					if (!_id("citationDialog-list-table")?.contains(doc.activeElement)) {
+						_id("bubble-input").refocusInput();
+					}
 					document.documentElement.setAttribute("dialog-layout", this.type);
 					ignoreWindowResizing = false;
 				},
 			});
 		}, 10);
 	}
-
-	_markRoundedCorners() {
-		let selectedGroupStarted = false;
-		let previousRow;
-		let items = [...doc.querySelectorAll(".item")];
-		for (let rowIndex = 0; rowIndex < items.length; rowIndex++) {
-			let row = items[rowIndex];
-			row.classList.remove("selected-first", "selected-last");
-			// stop if we reached the end of the container
-			if (previousRow && selectedGroupStarted && row.parentNode !== previousRow.parentNode) {
-				selectedGroupStarted = false;
-				previousRow.classList.add("selected-last");
-			}
-			// mark the first item in a group of consecutively selected
-			if (row.classList.contains("selected") && !selectedGroupStarted) {
-				row.classList.add("selected-first");
-				selectedGroupStarted = true;
-			}
-			// mark the last item in a group of consecutively selected
-			if (!row.classList.contains("selected") && selectedGroupStarted && previousRow) {
-				previousRow.classList.add("selected-last");
-				selectedGroupStarted = false;
-			}
-			// if this is the last selected item, mark it as the last selected too
-			if (row.classList.contains("selected") && rowIndex == items.length - 1) {
-				row.classList.add("selected-last");
-			}
-			previousRow = row;
-		}
-	}
 }
 
 //
 // Handling of user IO
 //
 const IOManager = {
-	sectionExpandedStatus: {},
 	_skipInputAcceptOnEnterUntil: 0,
 
 	// most essential IO functionality that is added immediately on load
@@ -1161,7 +1669,7 @@ const IOManager = {
 		// display details popup for the bubble
 		doc.addEventListener("show-details-popup", ({ detail: { dialogReferenceID } }) => this._openItemDetailsPopup(dialogReferenceID));
 		// mark item nodes as selected to highlight them and mark relevant bubbles
-		doc.addEventListener("select-items", ({ detail: { startNode, endNode } }) => this.selectItemNodesRange(startNode, endNode));
+		doc.addEventListener("select-items", ({ detail: { startNode, endNode } }) => Helpers.selectItemNodesRange(startNode, endNode));
 		// update bubbles after citation item is updated by itemDetails popup
 		doc.addEventListener("item-details-updated", () => this.updateBubbleInput());
 
@@ -1211,6 +1719,10 @@ const IOManager = {
 		_id("list-layout").hidden = newMode == "library";
 		_id("library-layout").hidden = newMode == "list";
 
+		// re-fetch selected/open items cache when dialog mode changes
+		// because of different treatment of selected items in insertNote
+		SearchHandler.clearNonLibraryItemsCache();
+
 		Helpers.setActiveSegmentedControl(_id(`dialog-mode-${newMode}`));
 		// Delete all item nodes from the old layout
 		for (let itemNode of [...doc.querySelectorAll(".item")]) {
@@ -1283,14 +1795,11 @@ const IOManager = {
 		if (DIALOG_STATE.isAddingAnnotations()) {
 			items = items.filter(item => item.isAnnotation());
 		}
-		// if selecting a note, add it and immediately accept the dialog
+		// When adding notes, filter to only note items. Multiple notes can be
+		// selected and will be combined into one on accept (see
+		// Zotero.Notes.createCombinedNote in integration.js).
 		if (DIALOG_STATE.isAddingNote()) {
-			if (!items[0].isNote()) return;
-			CitationDataManager.items = [];
-			let bubbleItem = BubbleItem.fromItem(items[0]);
-			await CitationDataManager.addItems({ bubbleItems: [bubbleItem] });
-			accept();
-			return;
+			items = items.filter(item => item.isNote());
 		}
 		// Warn about retracted items, if any are present
 		for (let item of items) {
@@ -1348,149 +1857,6 @@ const IOManager = {
 		dialogNotPristine();
 	},
 
-	// select all items between startNode and endNode
-	selectItemNodesRange(startNode, endNode = null) {
-		let itemNodes = [...doc.querySelectorAll(".item")];
-		for (let node of itemNodes) {
-			node.classList.remove("selected", "selected-first", "selected-last");
-		}
-		if (startNode === null) return;
-
-		// can't select the collapsed deck of items
-		if (startNode.classList.contains("itemsContainer")) return;
-
-		let startIndex = itemNodes.indexOf(startNode);
-		let endIndex = endNode ? itemNodes.indexOf(endNode) : startIndex;
-
-		// if startIndex is after endIndex, just swap them
-		if (startIndex > endIndex) [startIndex, endIndex] = [endIndex, startIndex];
-
-		for (let i = startIndex; i <= endIndex; i++) {
-			IOManager.toggleItemNodeSelect(itemNodes[i], true);
-		}
-		currentLayout.updateSelectedItems();
-	},
-
-	toggleItemNodeSelect(itemNode, isSelected = null) {
-		if (isSelected === true) {
-			itemNode.classList.add("selected");
-		}
-		else if (isSelected === false) {
-			itemNode.classList.remove("selected");
-		}
-		else {
-			itemNode.classList.toggle("selected");
-		}
-		currentLayout.updateSelectedItems();
-		// For library view, this is handled in itemTree.jsx
-		if (currentLayout.type == "list") {
-			listLayout._markRoundedCorners();
-		}
-	},
-
-	async handleItemClick(event) {
-		let targetItem = event.target.closest(".item");
-		let multiselectable = targetItem.closest("[data-multiselectable]");
-		
-		// Debounce double clicks so one does not add multiple items unintentionally
-		if (IOManager._lastClickTime && (new Date()).getTime() - IOManager._lastClickTime < 300) {
-			event.preventDefault();
-			event.stopPropagation();
-			return;
-		}
-		IOManager._lastClickTime = (new Date()).getTime();
-
-		// Cmd/Ctrl + mouseclick toggles selected item node
-		if (multiselectable && (Zotero.isMac && event.metaKey) || (!Zotero.isMac && event.ctrlKey)) {
-			IOManager.toggleItemNodeSelect(targetItem);
-			return;
-		}
-		// Shift + click selects a range
-		if (multiselectable && event.shiftKey) {
-			let itemNodes = [..._id(`${currentLayout.type}-layout`).querySelectorAll(".item")];
-			let firstNode = _id(`${currentLayout.type}-layout`).querySelector(".item.selected") || itemNodes[0];
-			IOManager.selectItemNodesRange(firstNode, targetItem);
-			return;
-		}
-		// get itemIDs associated with the nodes
-		let itemIDs = new Set([targetItem.getAttribute("itemID")]);
-		// if target item is selected, add all other selected itemIDs
-		if (targetItem.classList.contains("selected")) {
-			let selectedItemNodes = _id(`${currentLayout.type}-layout`).querySelectorAll(".item.selected");
-			for (let itemNode of selectedItemNodes) {
-				itemIDs.add(itemNode.getAttribute("itemID"));
-			}
-		}
-		let itemsToAdd = Array.from(itemIDs).map(itemID => SearchHandler.getItem(itemID));
-		// while adding annotations, clicking on selected non-annotation(s) will select them in itemTree
-		if (DIALOG_STATE.isAddingAnnotations() && !itemsToAdd.every(i => i.isAnnotation())) {
-			let selected = await libraryLayout.itemsView.selectItems([...itemIDs].map(id => parseInt(id)));
-			// if no items were selected, select item's group in collection tree and try again
-			if (!selected) {
-				await libraryLayout.collectionsView.selectLibrary(itemsToAdd[0].libraryID);
-				libraryLayout.itemsView.selectItems([...itemIDs].map(id => parseInt(id)));
-			}
-			_id("zotero-items-tree").querySelector("[tabindex]").focus();
-			return;
-		}
-		IOManager.addItemsToCitation(itemsToAdd);
-	},
-
-	toggleSectionCollapse(section, status, userInitiated) {
-		// set desired class
-		if (status == "expanded" && !section.classList.contains("expanded")) {
-			section.classList.add("expanded");
-		}
-		else if (status == "collapsed" && section.classList.contains("expanded")) {
-			section.classList.remove("expanded");
-		}
-		else if (!status) {
-			section.classList.toggle("expanded");
-		}
-		// Record if the user explicitly expanded or collapsed the section to not undo it during next refresh
-		if (userInitiated) {
-			IOManager.sectionExpandedStatus[section.id] = section.classList.contains("expanded") ? "expanded" : "collapsed";
-		}
-		// mark collapsed items as unfocusable
-		if (section.classList.contains("expandable") && !section.classList.contains("expanded")) {
-			for (let item of [...section.querySelectorAll(".item")]) {
-				item.removeAttribute("tabindex");
-				item.setAttribute("draggable", false);
-				item.classList.remove("current");
-				item.classList.remove("selected");
-			}
-			// in library, the items deck itself becomes focusable
-			if (currentLayout.type == "library") {
-				section.querySelector(".itemsContainer").setAttribute("tabindex", -1);
-				section.querySelector(".itemsContainer").dataset.arrowNavEnabled = true;
-				// if an item if focused, focus the collapsed container for smoother transition
-				if (doc.activeElement.classList.contains("item")) {
-					section.querySelector(".itemsContainer").focus();
-				}
-			}
-		}
-		// when expanded, make them focusable again
-		else {
-			for (let item of [...section.querySelectorAll(".item")]) {
-				item.setAttribute("tabindex", -1);
-				item.setAttribute("draggable", true);
-			}
-			if (currentLayout.type == "library") {
-				let container = section.querySelector(".itemsContainer");
-				container.removeAttribute("tabindex");
-				container.classList.remove("selected", "current");
-			}
-		}
-		section.querySelector(".header-label").setAttribute("aria-expanded", section.classList.contains("expanded"));
-		// In list mode, there may be some empty space left after section collapse
-		if (currentLayout.type == "list") {
-			setTimeout(() => {
-				currentLayout.resizeWindow();
-			}, 300);
-		}
-	},
-
-
 	// when focus leaves the input or suggested items area in library mode, un-select all items
 	// so they do not apear highlighted, since Enter would not add them anymore
 	// it does not apply to list mode
@@ -1541,6 +1907,20 @@ const IOManager = {
 		event.dataTransfer.setDragImage(wrapper, offsetX, offsetY);
 		// Same format as with drag-drop of items in itemTree via Zotero.Utilities.Internal.onDragItems
 		let draggedItemIDs = selectedItems.map(node => node.getAttribute("itemID")).join(",");
+		// In list mode, the VT only renders visible rows, so DOM queries miss
+		// off-screen selected items. Pull selected item IDs from the VT's
+		// selection model instead.
+		if (currentLayout?.type === "list") {
+			let listSelectedItems = listLayout.getSelectedItems();
+			if (listSelectedItems.length) {
+				let clickedRowId = itemNode.getAttribute("itemID");
+				let clickedInSelection = listSelectedItems.some(item => String(item.cslItemID || item.id) === clickedRowId);
+				// If the dragged item is part of a multi-selection, drag all selected items
+				if (clickedInSelection) {
+					draggedItemIDs = listSelectedItems.map(item => item.cslItemID || item.id).join(",");
+				}
+			}
+		}
 		event.dataTransfer.setData("zotero/item", draggedItemIDs);
 		setTimeout(() => {
 			itemNode.parentNode.removeChild(wrapper);
@@ -1590,11 +1970,14 @@ const IOManager = {
 				return;
 			}
 		}
-		// add whatever items are selected
-		if (doc.querySelector(".item.selected")) {
-			let selectedIDs = [...doc.querySelectorAll(".item.selected")].map(node => node.getAttribute("itemID"));
-			let items = selectedIDs.map(id => SearchHandler.getItem(id));
-			IOManager.addItemsToCitation(items);
+		// add whatever items are selected. In list mode, selected items may be
+		// off-screen and missing from the DOM; read from the VT's selection model.
+		let selectedItems = currentLayout.type == "list"
+			? listLayout.getSelectedItems()
+			: [...doc.querySelectorAll(".item.selected")]
+				.map(node => SearchHandler.getItem(node.getAttribute("itemID")));
+		if (selectedItems.length) {
+			IOManager.addItemsToCitation(selectedItems);
 		}
 		// in library mode, if there are no selected/open/cited items but there is a single match in itemTree, add that one matching item
 		else if (currentLayout.type == "library" && libraryLayout.itemsView.rowCount === 1 && input.value.length) {
@@ -1832,8 +2215,11 @@ const IOManager = {
 		doc.addEventListener("mousedown", (event) => {
 			if (event.target.closest("panel")) return;
 			IOManager._clicked = event.target;
+			if (_id("citationDialog-list-table")?.contains(IOManager._clicked)) {
+				IOManager._clicked = _id("citationDialog-list-table");
+			}
 			IOManager._focusedBeforeClick = doc.activeElement;
-		});
+		}, true);
 		// Clear record of last clicked node if some other interaction happened (e.g. keydown)
 		doc.addEventListener("keydown", (event) => {
 			if (event.target.closest("panel")) return;
diff --git a/chrome/content/zotero/integration/citationDialog.xhtml b/chrome/content/zotero/integration/citationDialog.xhtml
index e847afce4b..c0886d2eb1 100644
--- a/chrome/content/zotero/integration/citationDialog.xhtml
+++ b/chrome/content/zotero/integration/citationDialog.xhtml
@@ -31,7 +31,9 @@
 	xmlns="http://www.w3.org/1999/xhtml"
 	xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
 	drawintitlebar-platforms="mac,win"
-	resizable="false">
+	resizable="false"
+	windowtype="zotero:citationDialog"
+	>
 	<head>
 		<title data-l10n-id="integration-citationDialog"></title>
 		<link rel="localization" href="zotero.ftl"/>
@@ -68,7 +70,7 @@
 		
 		<div id="list-layout" class="layout" hidden="true">
 			<div class="divider"></div>
-			<div id="list-layout-wrapper" class="vbox search-items" data-arrow-nav="vertical" data-multiselectable="true" role="listbox" aria-describedby="item-description"></div>
+			<div id="list-layout-wrapper" class="vbox"></div>
 		</div>
 		
 		<div id="library-layout" class="layout" hidden="true">
@@ -86,6 +88,10 @@
 					<div id="zotero-items-tree" data-tabindex="60" style="--highlight-color: var(--accent-blue30);"/>
 				</div>
 				<div id="sidebar" class="vbox">
+					<div id="add-note-sidebar" class="vbox" data-dialog-type="add-note">
+						<xul:note-editor id="note-preview" flex="1"/>
+						<div id="empty-note-preview-message" data-l10n-id="integration-citationDialog-insertNote-preview-msg"></div>
+					</div>
 					<div id="annotations-sidebar" class="vbox" data-dialog-type="annotations">
 						<!-- Uses styling from _search.scss -->
 						<div id="annotations-sidebar-filter-wrapper" class="search" hidden="true">
diff --git a/chrome/content/zotero/integration/citationDialog/helpers.mjs b/chrome/content/zotero/integration/citationDialog/helpers.mjs
index 8c9a207ea8..996fa1caf1 100644
--- a/chrome/content/zotero/integration/citationDialog/helpers.mjs
+++ b/chrome/content/zotero/integration/citationDialog/helpers.mjs
@@ -27,8 +27,9 @@ import { Zotero } from "chrome://zotero/content/zotero.mjs";
 
 // Helper functions for citationDialog.js
 export class CitationDialogHelpers {
-	constructor({ doc }) {
+	constructor({ doc, dialogState }) {
 		this.doc = doc;
+		this.dialogState = dialogState;
 		this.smoothResizingPromise = Zotero.Promise.resolve();
 	}
 
@@ -65,9 +66,10 @@ export class CitationDialogHelpers {
 	}
 
 	// build and return a node with the description (e.g. creator/published/date/etc) of an item
-	buildItemDescription(item) {
+	buildItemDescription(item, { twoLines } = {}) {
 		let descriptionWrapper = this.doc.createElement("div");
 		descriptionWrapper.classList = "description";
+		descriptionWrapper.id = `description-${item.id}`;
 		let wrapTextInSpan = (text, styles = {}) => {
 			let span = this.doc.createElement("span");
 			for (let [style, value] of Object.entries(styles)) {
@@ -88,16 +90,26 @@ export class CitationDialogHelpers {
 			var date = Zotero.Date.sqlToDate(item.dateModified, true);
 			date = Zotero.Date.toFriendlyDate(date);
 			let dateLabel = wrapTextInSpan(date);
-			
+
 			var text = item.note;
 			text = Zotero.Utilities.unescapeHTML(text);
 			text = text.trim();
 			text = text.slice(0, 500);
+			// Display two lines of the note if specified
 			var parts = text.split('\n').map(x => x.trim()).filter(x => x.length);
-			if (parts[1]) {
-				dateLabel.textContent += ` ${parts[1]}.`;
-			}
+			let firstLine = parts[1];
+			let secondLine = parts[2];
+			dateLabel.textContent += " ";
 			descriptionWrapper.appendChild(dateLabel);
+			if (firstLine) {
+				dateLabel.textContent += `${firstLine}`;
+				if (twoLines && secondLine) {
+					let lineBreak = this.doc.createElement("br");
+					descriptionWrapper.appendChild(lineBreak);
+					let secondLineSpan = wrapTextInSpan(secondLine);
+					descriptionWrapper.appendChild(secondLineSpan);
+				}
+			}
 			addPeriodIfNeeded(descriptionWrapper);
 			return descriptionWrapper;
 		}
@@ -187,25 +199,89 @@ export class CitationDialogHelpers {
 
 			let addAllBtn = this.createNode("span", { tabindex: -1, 'data-tabindex': 22, role: "button", "aria-describedby": headerSpan.id }, "add-all keyboard-clickable");
 			buttonGroup.append(addAllBtn);
-			
-			if (dialogMode == "list") {
-				headerSpan.setAttribute("role", "button");
-				headerSpan.setAttribute("tabindex", -1);
-				headerSpan.setAttribute("data-tabindex", 21);
-				headerSpan.classList.add("keyboard-clickable");
-			}
-			if (dialogMode == "library") {
-				itemContainer.setAttribute("tabindex", -1);
-				itemContainer.setAttribute("data-tabindex", 30);
+			itemContainer.setAttribute("tabindex", -1);
+			itemContainer.setAttribute("data-tabindex", 30);
 
-				let collapseSectionBtn = this.createNode("button", { tabindex: -1, 'data-tabindex': 21, "aria-describedby": headerSpan.id }, "btn-icon collapse-section-btn keyboard-clickable");
-				this.doc.l10n.setAttributes(collapseSectionBtn, "integration-citationDialog-collapse-section");
-				buttonGroup.prepend(collapseSectionBtn);
-			}
+			let collapseSectionBtn = this.createNode("button", { tabindex: -1, 'data-tabindex': 21, "aria-describedby": headerSpan.id }, "btn-icon collapse-section-btn keyboard-clickable");
+			this.doc.l10n.setAttributes(collapseSectionBtn, "integration-citationDialog-collapse-section");
+			buttonGroup.prepend(collapseSectionBtn);
 		}
 		return section;
 	}
 
+	// Build the header node for a section in list mode (rendered as its own row in the
+	// virtualized table). For collapsible sections an "Add all" button is included.
+	// All classes (collapsible, collapsed, selected, focused) are applied here based
+	// on the row state. Click handlers are wired from the provided callbacks.
+	buildListHeader(row, isSelected, isFocused, { labelClick, addAllClick } = {}) {
+		let { headerText } = row.ref;
+		let isCollapsible = row.isCollapsible;
+		let id = row.id;
+		let header = this.createNode("div", { id }, "header");
+		let headerSpan = this.createNode("span", {}, "header-label");
+		headerSpan.innerText = headerText;
+		header.append(headerSpan);
+
+		let buttonGroup = this.createNode("div", {}, "header-btn-group");
+		header.append(buttonGroup);
+
+		// Block mouse events from bubbling to VT's row-level handlers.
+		// Bubbling phase so that inner capturing handlers fire first.
+		for (let evt of ["mousedown", "mouseup", "dblclick"]) {
+			header.addEventListener(evt, (e) => {
+				e.stopPropagation();
+				e.preventDefault();
+			});
+		}
+
+		if (isCollapsible) {
+			header.classList.add("collapsible");
+			header.classList.toggle("collapsed", !row.isOpen);
+			header.classList.toggle("selected", isSelected);
+			header.classList.toggle("focused", isFocused);
+			headerSpan.id = `header_${id}`;
+			if (labelClick) {
+				headerSpan.addEventListener("mousedown", (e) => {
+					e.stopPropagation();
+					labelClick();
+				}, true);
+				headerSpan.addEventListener("mouseup", e => e.stopPropagation(), true);
+			}
+			let addAllBtn = this.createNode("span", { "aria-describedby": headerSpan.id }, "add-all");
+			addAllBtn.textContent = Zotero.getString("integration-citationDialog-add-all");
+			if (addAllClick) {
+				addAllBtn.addEventListener("mousedown", (e) => {
+					e.stopPropagation();
+					addAllClick();
+				}, true);
+			}
+			buttonGroup.append(addAllBtn);
+		}
+		return header;
+	}
+
+	// Generate a label for a section of search results (e.g. "Selected Items (3)")
+	// `group` is an array of { item, children } objects from SearchHandler.
+	async getSectionLabel(key, group, allSelectedItemsCount) {
+		let count = group.length || 0;
+		// in list mode of insertNote, only count top-level items since
+		// child items are nested under their parents
+		if (this.dialogState.isAddingNote() && this.dialogState.getCurrentLayoutType() === "list") {
+			count = group.filter(entry => !entry.item.parentItemID).length;
+		}
+		if (key == "selected") {
+			// when citing notes, we don't want to use the label that includes the
+			// total count because it's confusing in list mode when parents on
+			// selected notes also appear
+			if (this.dialogState.isAddingNote()) {
+				return this.doc.l10n.formatValue(`integration-citationDialog-section-selectedItems`, { count });
+			}
+			// when not citing notes, add the total count param
+			return this.doc.l10n.formatValue(`integration-citationDialog-section-selected`, { count, total: allSelectedItemsCount });
+		}
+		return this.doc.l10n.formatValue(`integration-citationDialog-section-${key}`, { count });
+	}
+
 	// Create mock item node to use as a the placeholder for cited items that are loading
 	createCitedItemPlaceholder() {
 		let itemNode = this.createNode("div", {
@@ -395,8 +471,9 @@ export class CitationDialogHelpers {
 			// Try to fetch the short form of the locator label. E.g. "p." for "page"
 			// If there is no locator label, default to "page" for now
 			let label = (Zotero.Cite.getLocatorString(bubbleItem.label || 'page', 'short') || '').toLocaleLowerCase();
-			
-			str += `, ${label} ${bubbleItem.locator}`;
+			let locator = bubbleItem.locator.substr(0, 10) + (bubbleItem.locator.length > 10 ? "…" : "");
+
+			str += `, ${label} ${locator}`;
 		}
 		
 		// Prefix
@@ -454,7 +531,7 @@ export class CitationDialogHelpers {
 		let chromeHeight = win.outerHeight - win.innerHeight;
 
 		// On Linux, animated resizing is too jumpy, so just resize in one step
-		if (Zotero.isLinux) {
+		if (Zotero.isLinux || this.dialogState.isTestRun) {
 			win.resizeTo(targetWidth, targetHeight);
 			resolve();
 			if (onComplete) {
@@ -506,4 +583,75 @@ export class CitationDialogHelpers {
 			resolve();
 		}, delay);
 	}
+
+	selectItemNodesRange(startNode, endNode = null) {
+		let itemNodes = [...this.doc.querySelectorAll(".item")];
+		for (let node of itemNodes) {
+			node.classList.remove("selected");
+		}
+		if (startNode === null) return;
+
+		// can't select the collapsed deck of items
+		if (startNode.classList.contains("itemsContainer")) return;
+
+		let startIndex = itemNodes.indexOf(startNode);
+		let endIndex = endNode ? itemNodes.indexOf(endNode) : startIndex;
+
+		// if startIndex is after endIndex, just swap them
+		if (startIndex > endIndex) [startIndex, endIndex] = [endIndex, startIndex];
+
+		for (let i = startIndex; i <= endIndex; i++) {
+			this.toggleItemNodeSelect(itemNodes[i], true);
+		}
+	}
+
+	toggleItemNodeSelect(itemNode, isSelected = null) {
+		if (isSelected === true) {
+			itemNode.classList.add("selected");
+		}
+		else if (isSelected === false) {
+			itemNode.classList.remove("selected");
+		}
+		else {
+			itemNode.classList.toggle("selected");
+		}
+	}
+
+	toggleSectionCollapse(section, status) {
+		// set desired class
+		if (status == "expanded" && !section.classList.contains("expanded")) {
+			section.classList.add("expanded");
+		}
+		else if (status == "collapsed" && section.classList.contains("expanded")) {
+			section.classList.remove("expanded");
+		}
+		else if (!status) {
+			section.classList.toggle("expanded");
+		}
+		// mark collapsed items as unfocusable
+		if (section.classList.contains("expandable") && !section.classList.contains("expanded")) {
+			for (let item of [...section.querySelectorAll(".item")]) {
+				item.removeAttribute("tabindex");
+				item.setAttribute("draggable", false);
+				item.classList.remove("current");
+				item.classList.remove("selected");
+			}
+			section.querySelector(".itemsContainer").setAttribute("tabindex", -1);
+			section.querySelector(".itemsContainer").dataset.arrowNavEnabled = true;
+			if (this.doc.activeElement.classList.contains("item")) {
+				section.querySelector(".itemsContainer").focus();
+			}
+		}
+		// when expanded, make them focusable again
+		else {
+			for (let item of [...section.querySelectorAll(".item")]) {
+				item.setAttribute("tabindex", -1);
+				item.setAttribute("draggable", true);
+			}
+			let container = section.querySelector(".itemsContainer");
+			container.removeAttribute("tabindex");
+			container.classList.remove("selected", "current");
+		}
+		section.querySelector(".header-label").setAttribute("aria-expanded", section.classList.contains("expanded"));
+	}
 }
diff --git a/chrome/content/zotero/integration/citationDialog/keyboardHandler.mjs b/chrome/content/zotero/integration/citationDialog/keyboardHandler.mjs
index 3d8f23780c..48d8d1fa18 100644
--- a/chrome/content/zotero/integration/citationDialog/keyboardHandler.mjs
+++ b/chrome/content/zotero/integration/citationDialog/keyboardHandler.mjs
@@ -32,6 +32,10 @@ export class CitationDialogKeyboardHandler {
 		this._multiselectStart = null;
 	}
 
+	get listLayout() {
+		return this.doc.ownerGlobal.listLayout;
+	}
+
 	_id(id) {
 		return this.doc.getElementById(id);
 	}
@@ -81,6 +85,20 @@ export class CitationDialogKeyboardHandler {
 			event.stopPropagation();
 			event.preventDefault();
 		}
+		// arrowUp from the top-most selectable row of the list-mode table will refocus bubble-input
+		if (this._id("citationDialog-list-table")?.contains(event.target) && event.key == "ArrowUp" && noModifiers) {
+			let table = this.listLayout?._table;
+			let focused = table.selection.focused;
+			// Check if focused row is the first selectable (item) row
+			let rows = this.listLayout._listRows;
+			let firstSelectable = rows.findIndex(r => r.isSelectable);
+			if (focused <= firstSelectable) {
+				table.selection.clearSelection();
+				this._id("bubble-input").refocusInput();
+				event.stopPropagation();
+				event.preventDefault();
+			}
+		}
 	}
 
 	_handleTopLevelKeydown(event) {
@@ -149,26 +167,15 @@ export class CitationDialogKeyboardHandler {
 		}
 		// arrow up/down from bubble-input in list mode will move selection in the items list
 		else if (!this._id("list-layout").hidden && (event.key == "ArrowDown" || event.key == "ArrowUp") && this._id("bubble-input").contains(event.target) && onlyShiftModifierPossible) {
-			let group = this.doc.querySelector("#list-layout [data-arrow-nav]");
-			let current = group.querySelector(".current");
-			let firstRow = group.querySelector('[data-arrow-nav-enabled="true"][tabindex]');
-			// on arrowUp from the first row, clear selection
-			if (current === firstRow && event.key == "ArrowUp" && !event.shiftKey) {
-				this._selectItems(null);
-				firstRow?.classList.remove("current");
-				group.scrollTo(0, 0);
-				this._multiselectStart = null;
-			}
-			else if (current || event.key == "ArrowDown") {
-				// Arrow down from input will just change the selected item without moving focus
-				let multiSelect = event.shiftKey;
-				this._navigateGroup({ group, current, forward: event.key == "ArrowDown", shouldSelect: true, shouldFocus: false, multiSelect });
-			}
+			let forward = event.key == "ArrowDown";
+			let multiSelect = event.shiftKey;
+			this._navigateListSelection(forward, multiSelect);
 			handled = true;
 		}
 		// arrowUp from the first item will refocus bubbleInput
 		else if (event.key == "ArrowUp" && this._shouldRefocusBubbleInputOnArrowUp() && noModifiers) {
 			this._id("bubble-input").refocusInput();
+			this.listLayout._table.selection.clearSelection();
 			handled = true;
 		}
 		// handle focus and selection movement within bubble-input and item groups
@@ -245,6 +252,9 @@ export class CitationDialogKeyboardHandler {
 		}
 		else if (nodeToFocus.getAttribute("tabindex")) {
 			nodeToFocus.focus();
+			if (nodeToFocus.id === "citationDialog-list-table") {
+				this._ensureListSelection();
+			}
 		}
 		else {
 			nodeToFocus.querySelector("[tabindex]:not([hidden])")?.focus();
@@ -256,7 +266,7 @@ export class CitationDialogKeyboardHandler {
 	// Navigate the group by moving selection or focus between nodes in a group
 	_navigateGroup({ group, current, forward, multiSelect, shouldFocus, shouldSelect }) {
 		// navigable nodes have to be marked with data-arrow-nav-enabled
-		let allFocusableWithinGroup = [...group.querySelectorAll("[tabindex][data-arrow-nav-enabled]")];
+		let allFocusableWithinGroup = [...group.querySelectorAll("[tabindex][data-arrow-nav-enabled]:not([hidden]):not([disabled])")];
 		let nextFocusableIndex = 0;
 		for (let i = 0; i < allFocusableWithinGroup.length; i++) {
 			if (allFocusableWithinGroup[i] == current) {
@@ -277,14 +287,6 @@ export class CitationDialogKeyboardHandler {
 		
 		current?.classList.remove("current");
 		nextNode.classList.add("current");
-		// if the node is not being focused in list mode, make sure we scroll to it so it is visible
-		if (!shouldFocus) {
-			let wrapperRect = this._id("list-layout-wrapper").getBoundingClientRect();
-			let nodeRect = nextNode.getBoundingClientRect();
-			if (nodeRect.bottom > wrapperRect.bottom || nodeRect.top < wrapperRect.top) {
-				nextNode.scrollIntoView();
-			}
-		}
 		
 		if (multiSelect) {
 			// on arrow keypress while holding shift, move focus and also perform multiselect
@@ -302,12 +304,74 @@ export class CitationDialogKeyboardHandler {
 		return nextNode;
 	}
 
+	// When focus enters the list-mode table with no selection, select the
+	// first item so the user has a starting point for arrow navigation.
+	_ensureListSelection() {
+		let layout = this.listLayout;
+		if (!layout?._table || layout._table.selection.count > 0) return;
+		let firstItem = layout._listRows.findIndex(r => r.canBeAdded);
+		if (firstItem >= 0) {
+			layout._table.selection.select(firstItem);
+		}
+	}
+
+	// Navigate VT selection up/down while focus stays on bubble-input.
+	// ArrowUp past the first selectable row clears selection.
+	_navigateListSelection(forward, multiSelect) {
+		let table = this.listLayout?._table;
+		if (!table) return;
+		let selection = table.selection;
+		let rows = this.listLayout._listRows;
+		let rowCount = rows.length;
+
+		// Find the next selectable index from a given position
+		let findSelectable = (from, fwd) => {
+			let i = from;
+			while (i >= 0 && i < rowCount) {
+				if (rows[i]?.canBeAdded) return i;
+				i += fwd ? 1 : -1;
+			}
+			return -1;
+		};
+
+		let focused = selection.focused;
+		// Nothing selected yet -- select the first selectable row on ArrowDown
+		if (selection.count === 0 || focused < 0) {
+			if (!forward) return;
+			let first = findSelectable(0, true);
+			if (first >= 0) {
+				selection.select(first);
+				table.scrollToRow(first);
+			}
+			return;
+		}
+
+		let next = findSelectable(focused + (forward ? 1 : -1), forward);
+		// ArrowUp past the first selectable row -- clear selection
+		if (next < 0 && !forward) {
+			selection.clearSelection();
+			table.scrollToRow(0);
+			return;
+		}
+		if (next < 0) return;
+
+		if (multiSelect) {
+			selection.shiftSelect(next);
+		}
+		else {
+			selection.select(next);
+		}
+		table.scrollToRow(next);
+	}
+
 	_shouldRefocusBubbleInputOnArrowUp() {
 		if (!this._id("library-layout").hidden) {
 			return this._id("library-other-items").contains(this.doc.activeElement);
 		}
 		if (!this._id("list-layout").hidden) {
-			return this.doc.activeElement == this.doc.querySelector(".item");
+			// In list mode, focus stays on bubble-input; arrowUp from the
+			// first selected row clears selection (handled in navigateSelection).
+			return false;
 		}
 		return false;
 	}
diff --git a/chrome/content/zotero/integration/citationDialog/searchHandler.mjs b/chrome/content/zotero/integration/citationDialog/searchHandler.mjs
index a7cfdc11aa..0462f97fd5 100644
--- a/chrome/content/zotero/integration/citationDialog/searchHandler.mjs
+++ b/chrome/content/zotero/integration/citationDialog/searchHandler.mjs
@@ -89,18 +89,30 @@ export class CitationDialogSearchHandler {
 	// Takes citedItems as a parameter to filter them out from Selected, Opened and Cited groups.
 	getOrderedSearchResultGroups(citedItemIDs = new Set()) {
 		let removeItemsIncludedInCitation = (items) => {
-			return items.filter(i => !citedItemIDs.has(i.cslItemID ? i.cslItemID : i.id));
+			items = items.filter(i => !citedItemIDs.has(i.cslItemID ? i.cslItemID : i.id));
+			// When adding notes, also remove parent items whose child notes are all cited
+			if (this.dialogState.isAddingNote()) {
+				items = items.filter((item) => {
+					if (!item.isRegularItem()) return true;
+					let noteIDs = item.getNotes();
+					return noteIDs.some(id => !citedItemIDs.has(id));
+				});
+			}
+			return items;
 		};
 		let result = [];
 		let groupKeys = ["selected", "open", "cited"];
 		if (this.dialogState.isAddingAnnotations()) {
 			groupKeys = ["selectedAnnotations", "selectedItems", "open", "cited"];
 		}
+		else if (this.dialogState.isAddingNote() && this.dialogState.getCurrentLayoutType() == "library") {
+			groupKeys = ["selectedNotes", "selectedItems", "open", "cited"];
+		}
 		// selected/open/cited go first
 		for (let groupKey of groupKeys) {
 			let groupItems = this.results[groupKey];
 			// in selected and opened items, do not display items already in the citation
-			if (["selected", "selectedAnnotations", "selectedItems", "open"].includes(groupKey)) {
+			if (["selected", "selectedAnnotations", "selectedItems", "selectedNotes", "open"].includes(groupKey)) {
 				groupItems = removeItemsIncludedInCitation(groupItems);
 			}
 			if (groupItems.length) {
@@ -116,22 +128,29 @@ export class CitationDialogSearchHandler {
 		// library items go after
 		let libraryItems = Object.values(this.results.found.reduce((acc, item) => {
 			if (!acc[item.libraryID]) {
-				acc[item.libraryID] = { key: item.libraryID, group: [], isLibrary: true };
+				acc[item.libraryID] = { key: item.libraryID, group: [], label: Zotero.Libraries.get(item.libraryID).name };
 			}
 			acc[item.libraryID].group.push(item);
 			return acc;
 		}, {}));
-
-		// sort actual items or notes
-		let itemComparator = this.dialogState.isAddingNote() ? this._createNotesSort() : this._createItemsSort();
-		libraryItems.forEach((library) => {
-			library.group.sort(itemComparator);
-		});
-	
 		// sort libraries by the number of items
 		libraryItems.sort((a, b) => b.group.length - a.group.length);
 		result.push(...libraryItems);
 
+		// post processing: normalize every group into an array of { item, children }
+		// objects so callers always receive the same shape.
+		for (let section of result) {
+			if (this.dialogState.isAddingNote() && this.dialogState.getCurrentLayoutType() === "list") {
+				// _groupNotesWithParents already returns { item, children } objects
+				section.group = this._groupNotesWithParents(section.group, citedItemIDs);
+			}
+			else {
+				let itemComparator = this.dialogState.isAddingNote() ? this._createNotesSort() : this._createItemsSort();
+				section.group.sort(itemComparator);
+				section.group = section.group.map(item => ({ item, children: [] }));
+			}
+		}
+
 		return result;
 	}
 
@@ -155,6 +174,11 @@ export class CitationDialogSearchHandler {
 			this.results.selectedItems = this.results.selected.filter(item => !item.isAnnotation());
 			this.results.selectedAnnotations = this.results.selected.filter(item => item.isAnnotation());
 		}
+		// when notes are being cited, in lib mode selected items are separated into top-level items and notes
+		if (this.dialogState.isAddingNote()) {
+			this.results.selectedItems = this.results.selected.filter(item => !item.isNote());
+			this.results.selectedNotes = this.results.selected.filter(item => item.isNote());
+		}
 		// if a specific library ID is specified, only keep items from that library
 		if (this.io.filterLibraryIDs) {
 			this.results.open = this.results.open.filter(item => this.io.filterLibraryIDs.includes(item.libraryID));
@@ -232,6 +256,10 @@ export class CitationDialogSearchHandler {
 		return str;
 	}
 
+	keepItemsWithNotes(items) {
+		return items.filter(item => this.isItemWithNotes(item));
+	}
+
 	// Return items that are either annotations or are ancestors of annotations
 	keepItemsWithAnnotations(items) {
 		return items.filter(item => this.isItemWithAnnotations(item));
@@ -291,29 +319,31 @@ export class CitationDialogSearchHandler {
 			this.io.filterLibraryIDs.forEach(id => s.addCondition("libraryID", "is", id));
 		}
 		let realInputRegex = /[\w\u007F-\uFFFF]/;
+		if (!realInputRegex.test(this.searchValue)) return [];
 		if (this.dialogState.isAddingNote()) {
-			s.addCondition("quicksearch-titleCreatorYearNote", "contains", this.searchValue);
+			let scope = new Zotero.Search;
+			// Allow to search by ISBN/DOI for the top-level item
+			let addedIdentifierCondition = this._addIdentifierConditions(scope, this.searchValue);
+			if (!addedIdentifierCondition) {
+				// If identifier is not provided, search by conditions equivalent to quicksearch-titleCreatorYear
+				this._addQuickSearchEquivalentConditions(scope);
+			}
+			scope.addCondition("includeChildren", "true");
+			s.setScope(scope);
+			s.addCondition("itemType", "is", "note");
 		}
-		else if (realInputRegex.test(this.searchValue)) {
-			// search for the identifier if it is provided,
-			// otherwise look up by title, creator and year
-			let isDOI = Zotero.Utilities.cleanDOI(this.searchValue);
-			let isISBN = Zotero.Utilities.cleanISBN(this.searchValue);
-			if (isDOI) {
-				s.addCondition("DOI", "contains", this.searchValue);
-			}
-			else if (isISBN) {
-				s.addCondition("ISBN", "contains", this.searchValue);
-			}
-			else {
+		else {
+			// search items by the identifier if provided, or by title/creator/year otherwise
+			let addedIdentifierCondition = this._addIdentifierConditions(s, this.searchValue);
+			if (!addedIdentifierCondition) {
 				s.addCondition("quicksearch-titleCreatorYear", "contains", this.searchValue);
-				s.addCondition("itemType", "isNot", "attachment");
 			}
+			s.addCondition("itemType", "isNot", "attachment");
 		}
 		let searchResultIDs = await s.search();
 		// Search results might be in an unloaded library, so get items asynchronously and load necessary data
+		await this._ensureRelevantItemsAreLoaded(searchResultIDs);
 		var items = await Zotero.Items.getAsync(searchResultIDs);
-		await Zotero.Items.loadDataTypes(items);
 		return items;
 	}
 
@@ -326,7 +356,6 @@ export class CitationDialogSearchHandler {
 	}
 
 	async _getReaderOpenItems() {
-		if (this.dialogState.isAddingNote()) return [];
 		let tabs = [];
 		let win = Zotero.getMainWindow();
 		// If the main window is open, use it to get open tabs
@@ -339,7 +368,7 @@ export class CitationDialogSearchHandler {
 			if (!mainWindowLastState) return [];
 			tabs = mainWindowLastState.tabs;
 		}
-		let itemIDs = tabs.filter(t => t.type === 'reader').sort((a, b) => {
+		let itemIDs = tabs.filter(t => ['reader', 'note'].includes(t.type)).sort((a, b) => {
 			// Sort selected tab first
 			if (a.selected) return -1;
 			else if (b.selected) return 1;
@@ -352,21 +381,21 @@ export class CitationDialogSearchHandler {
 		if (!itemIDs.length) return [];
 
 		// Fetch top-most items and load necessary data, in case tabs belong to an unloaded library
+		await this._ensureRelevantItemsAreLoaded(itemIDs);
 		let items = [];
 		for (let itemID of itemIDs) {
 			let item = await Zotero.Items.getAsync(itemID);
+			if (!item) continue;
 			if (item && item.parentItemID) {
 				item = await Zotero.Items.getAsync(item.parentItemID);
 			}
 			items.push(item);
 		}
 		if (this.dialogState.isAddingAnnotations()) {
-			// Make sure annotations are loaded on unloaded tabs from unloaded libraries
-			await this._ensureRelevantItemsAreLoaded(items);
 			items = this.keepItemsWithAnnotations(items);
 		}
-		else {
-			await Zotero.Items.loadDataTypes(items);
+		if (this.dialogState.isAddingNote()) {
+			items = this.keepItemsWithNotes(items);
 		}
 		// Return deduplicated items since there may be multiple tabs opened for the same
 		// top-level item (duplicate tabs or a multiple attachments belonging to the same item)
@@ -376,7 +405,7 @@ export class CitationDialogSearchHandler {
 	_getSelectedLibraryItems() {
 		let selected = Zotero.getActiveZoteroPane()?.getSelectedItems() || [];
 		if (this.dialogState.isAddingNote()) {
-			return selected.filter(i => i.isNote()) || [];
+			return this.keepItemsWithNotes(selected);
 		}
 		if (this.dialogState.isAddingAnnotations()) {
 			return this.keepItemsWithAnnotations(selected);
@@ -418,6 +447,16 @@ export class CitationDialogSearchHandler {
 					itemStr += " " + makeSearchString(item.topLevelItem);
 				}
 			}
+			// Handle searching through selected notes
+			if (this.dialogState.isAddingNote()) {
+				if (item.isNote()) {
+					itemStr += ` ${item.getNote().toLowerCase()}`;
+					if (item.parentItemID) {
+						let parentStr = makeSearchString(item.topLevelItem);
+						itemStr += ` ${parentStr}`;
+					}
+				}
+			}
 			// Include items that match every word that was typed
 			let allMatch = splits.every(split => itemStr.includes(split));
 			if (allMatch) {
@@ -433,8 +472,16 @@ export class CitationDialogSearchHandler {
 		let searchParts = Zotero.SearchConditions.parseSearchString(searchString);
 		var collation = Zotero.getLocaleCollation();
 		return ((a, b) => {
+			// When displaying notes, top level notes may appear among top-level
+			// container items.
+			if (this.dialogState.isAddingNote()) {
+				if (a.isNote() || b.isNote()) {
+					return collation.compareString(1, a.getDisplayTitle(), b.getDisplayTitle());
+				}
+			}
+			// Sort by left-bound name matches first
 			var firstCreatorA = a.firstCreator, firstCreatorB = b.firstCreator;
-			
+
 			// Favor left-bound name matches (e.g., "Baum" < "Appelbaum"),
 			// using last name of first author
 			if (firstCreatorA && firstCreatorB) {
@@ -491,21 +538,104 @@ export class CitationDialogSearchHandler {
 		return stringNoYear + " " + year;
 	}
 
-	// load all ancestors,descendants, and siblings of provided items
-	async _ensureRelevantItemsAreLoaded(items) {
+	_addIdentifierConditions(search, searchValue) {
+		let cleanDOI = Zotero.Utilities.cleanDOI(searchValue);
+		let cleanISBN = Zotero.Utilities.cleanISBN(searchValue);
+
+		if (cleanDOI) {
+			search.addCondition("DOI", "contains", cleanDOI);
+			return true;
+		}
+		else if (cleanISBN) {
+			search.addCondition("ISBN", "contains", cleanISBN);
+			return true;
+		}
+		return false;
+	}
+
+	// Replicate quicksearch-titleCreatorYear conditions on a search object,
+	// with an additional "note" condition so that note content is also matched.
+	_addQuickSearchEquivalentConditions(search) {
+		let parts = Zotero.SearchConditions.parseSearchString(this.searchValue);
+		for (let part of parts) {
+			search.addCondition("blockStart");
+			search.addCondition("key", "is", part.text, false);
+			search.addCondition("title", "contains", part.text, false);
+			search.addCondition("publicationTitle", "contains", part.text, false);
+			search.addCondition("shortTitle", "contains", part.text, false);
+			search.addCondition("court", "contains", part.text, false);
+			search.addCondition("year", "contains", part.text, false);
+			search.addCondition("citationKey", "contains", part.text, false);
+			search.addCondition("creator", "contains", part.text, false);
+			search.addCondition("note", "contains", part.text, false);
+			search.addCondition("blockEnd");
+		}
+	}
+
+	// Given an array of note items, construct a new array of { item, children }
+	// objects where each parent regular item is paired with its child notes.
+	// Top-level notes (no parent) have an empty children array.
+	// Returns [{ item: parentA, children: [noteA1, noteA2] }, { item: topLevelNote, children: [] }]
+	_groupNotesWithParents(items, citedItemIDs = new Set()) {
+		let topLevelItems = {};
+		for (let item of items) {
+			let topLevel = item.topLevelItem;
+			if (!topLevelItems[topLevel.id]) {
+				topLevelItems[topLevel.id] = [];
+			}
+			if (item.parentItemID) {
+				topLevelItems[topLevel.id].push(item);
+			}
+		}
+		let topLevelArray = Object.keys(topLevelItems).map(id => Zotero.Items.get(id));
+		topLevelArray.sort(this._createItemsSort());
+		let result = [];
+		for (let topLevelItem of topLevelArray) {
+			let childNotes = topLevelItems[topLevelItem.id];
+			// if there is a parent item with no notes, add all of its child notes
+			// (e.g. for an opened item)
+			if (childNotes.length === 0 && topLevelItem.isRegularItem()) {
+				let noteIDs = topLevelItem.getNotes();
+				childNotes = Zotero.Items.get(noteIDs);
+			}
+			// Exclude notes already added to the citation
+			childNotes = childNotes.filter(note => !citedItemIDs.has(note.id));
+			// Skip regular items whose child notes are all cited
+			if (!childNotes.length && topLevelItem.isRegularItem()) continue;
+			childNotes.sort(this._createNotesSort());
+			result.push({ item: topLevelItem, children: childNotes });
+		}
+		return result;
+	}
+
+	// load all ancestors, descendants, and siblings of provided item IDs
+	async _ensureRelevantItemsAreLoaded(itemIDs) {
+		// Load the items themselves first so we can walk up to parents
+		let items = await Zotero.Items.getAsync(itemIDs);
+		await Zotero.Items.loadDataTypes(items);
+		// Walk up to ensure all ancestors are loaded (e.g. for notes whose
+		// parent may not be loaded yet, which would cause topLevelItem to throw)
+		for (let item of items) {
+			while (item.parentItemID) {
+				item = await Zotero.Items.getAsync(item.parentItemID);
+			}
+		}
 		let topLevelItems = items.map(item => item.topLevelItem);
-		// load all data of top-level items and their attachments
+		// Load all data of top-level items
 		await Zotero.Items.loadDataTypes(topLevelItems);
+
+		// Load children: attachments and notes
 		let regularItems = topLevelItems.filter(item => item.isRegularItem());
 		let attachmentIDs = regularItems.flatMap(item => item.getAttachments());
-		let attachments = await Zotero.Items.getAsync(attachmentIDs);
-		await Zotero.Items.loadDataTypes(attachments);
+		let noteIDs = regularItems.flatMap(item => item.getNotes());
+		let children = await Zotero.Items.getAsync([...attachmentIDs, ...noteIDs]);
+		await Zotero.Items.loadDataTypes(children);
 
 		// Load annotations.
 		// Zotero.Items.loadDataTypes on parent items will set the
 		// _annotations cache on attachments but not load the annotations themselves.
 		// So fetch annotationIDs from the cache and load annotations separately.
-		attachments = attachments.filter(attachment => attachment.isFileAttachment());
+		let attachments = children.filter(item => item.isFileAttachment?.());
 		let annotationIDs = attachments.flatMap(attachment => attachment.getAnnotations(false, true));
 		let annotations = await Zotero.Items.getAsync(annotationIDs);
 		await Zotero.Items.loadDataTypes(annotations);
diff --git a/chrome/content/zotero/xpcom/data/notes.js b/chrome/content/zotero/xpcom/data/notes.js
index 409fa4cf64..f1de8dd9de 100644
--- a/chrome/content/zotero/xpcom/data/notes.js
+++ b/chrome/content/zotero/xpcom/data/notes.js
@@ -459,6 +459,68 @@ Zotero.Notes = new function () {
 		return true;
 	};
 
+	/**
+	 * Create an unsaved note item combining the content of multiple notes.
+	 * Embedded images are inlined as data URIs and citation metadata from all
+	 * notes is merged into a single container so that getExportableNote can
+	 * resolve citations that reference items not in the local library.
+	 *
+	 * @param {Zotero.Item[]} notes - Array of note items to combine
+	 * @returns {Promise<Zotero.Item>} - Unsaved note item with combined content
+	 */
+	this.createCombinedNote = async function (notes) {
+		let parser = new DOMParser();
+		let allCitationItems = [];
+		let combinedInnerHTML = "";
+		let schemaVersion = 0;
+		for (let note of notes) {
+			let noteHTML = note.getNote();
+			// Replace <img data-attachment-key="..."> with inline data URIs
+			let attachments = Zotero.Items.get(note.getAttachments());
+			for (let attachment of attachments) {
+				if (!attachment.isEmbeddedImageAttachment()) continue;
+				let path = await attachment.getFilePathAsync();
+				if (!path || !await IOUtils.exists(path)) continue;
+				let contentType = attachment.attachmentContentType || "image/png";
+				let dataURI = await Zotero.File.generateDataURI(path, contentType);
+				noteHTML = noteHTML.replace(
+					new RegExp(`(<img[^>]*?)data-attachment-key="${attachment.key}"`, "g"),
+					`$1src="${dataURI}"`
+				);
+			}
+			// Parse the note HTML and extract citation-items metadata + inner content
+			let doc = parser.parseFromString(noteHTML, "text/html");
+			let container = doc.querySelector('div[data-schema-version]');
+			if (container) {
+				// Track the highest schema version across all notes
+				let sv = parseInt(container.getAttribute("data-schema-version")) || 0;
+				if (sv > schemaVersion) {
+					schemaVersion = sv;
+				}
+				// Collect citation items from this note's metadata
+				let citationItemsAttr = container.getAttribute("data-citation-items");
+				if (citationItemsAttr) {
+					try {
+						let items = JSON.parse(decodeURIComponent(citationItemsAttr));
+						allCitationItems.push(...items);
+					}
+					catch (e) {
+						Zotero.logError(e);
+					}
+				}
+			}
+			if (combinedInnerHTML) combinedInnerHTML += "<br><br>";
+			combinedInnerHTML += container ? container.innerHTML : noteHTML;
+		}
+		// Wrap combined content in a single schema container with merged citation metadata
+		let mergedCitationItems = encodeURIComponent(JSON.stringify(allCitationItems));
+		let mergedHTML = `<div data-schema-version="${schemaVersion}" data-citation-items="${mergedCitationItems}">${combinedInnerHTML}</div>`;
+		let mockNote = new Zotero.Item('note');
+		mockNote.libraryID = notes[0].libraryID;
+		mockNote.setNote(mergedHTML);
+		return mockNote;
+	};
+
 	/**
 	 * Copy embedded images from one note to another and update
 	 * item keys in note HTML.
diff --git a/chrome/content/zotero/xpcom/integration.js b/chrome/content/zotero/xpcom/integration.js
index cbadda09a9..5bca6f026e 100644
--- a/chrome/content/zotero/xpcom/integration.js
+++ b/chrome/content/zotero/xpcom/integration.js
@@ -1677,13 +1677,17 @@ Zotero.Integration.Session.prototype._insertCitingResult = async function (field
 		);
 		return this._insertNoteIntoDocument(fieldIndex, field, mockNote);
 	}
-	let firstItem = Zotero.Cite.getItem(citation.citationItems[0].id);
-	if (firstItem && firstItem.isNote()) {
-		return this._insertNoteIntoDocument(fieldIndex, field, firstItem);
-	}
-	else {
-		return [await this._insertItemsIntoDocument(fieldIndex++, field, citation)];
+	// Handle inserting notes
+	if (allItems.every(item => item.isNote())) {
+		// If a single note is selected, just insert it
+		if (allItems.length == 1) {
+			return this._insertNoteIntoDocument(fieldIndex, field, allItems[0]);
+		}
+		// If multiple notes are selected, combine them into a single unsaved note before inserting
+		let mockNote = await Zotero.Notes.createCombinedNote(allItems);
+		return this._insertNoteIntoDocument(fieldIndex, field, mockNote);
 	}
+	return [await this._insertItemsIntoDocument(fieldIndex++, field, citation)];
 };
 
 /**
diff --git a/chrome/locale/en-US/zotero/integration.ftl b/chrome/locale/en-US/zotero/integration.ftl
index c9f9620e8e..8481e97f2d 100644
--- a/chrome/locale/en-US/zotero/integration.ftl
+++ b/chrome/locale/en-US/zotero/integration.ftl
@@ -22,7 +22,8 @@ integration-citationDialog = Citation Dialog
 integration-citationDialog-section-open = Open Documents ({ $count })
 integration-citationDialog-section-selected = Selected Items ({ $count }/{ $total })
 integration-citationDialog-section-selectedAnnotations = Selected Annotations
-integration-citationDialog-section-selectedItems = Selected Items
+integration-citationDialog-section-selectedItems = Selected Items ({ $count })
+integration-citationDialog-section-selectedNotes = Selected Notes ({ $count })
 integration-citationDialog-section-cited = { $count ->
     [0] Cited Items
     *[other] Cited Items ({ $count })
@@ -97,6 +98,7 @@ integration-citationDialog-collapse-section =
     .title = Collapse section
 integration-citationDialog-bubble-empty = (no title)
 integration-citationDialog-add-to-citation = Add to Citation
+integration-citationDialog-insertNote-preview-msg = Select a note to see its preview
 integration-citationDialog-annotations-filter =
     .placeholder = Filter annotations
 integration-citationDialog-annotations-empty = Select an item, attachment, or annotation to view annotation details
diff --git a/scss/components/_citationDialog.scss b/scss/components/_citationDialog.scss
index 87bfe5a5d8..ab3686b95b 100644
--- a/scss/components/_citationDialog.scss
+++ b/scss/components/_citationDialog.scss
@@ -385,143 +385,161 @@
 	#list-layout {
 		#list-layout-wrapper {
 			-moz-user-select: none;
-			overflow-y: auto;
 			scrollbar-color: var(--color-scrollbar) var(--color-scrollbar-background);
-			height: 100%;
-			.section {
-				&:first-child {
-					padding-top: 4px;
+
+			// Fill remaining space between the search row and #bottom-area,
+			// and clip overflow so the inner virtualized table provides scrolling.
+			display: flex;
+			flex-direction: column;
+			flex: 1;
+			min-height: 0;
+			overflow: hidden;
+
+			// Let the virtualized table fill the wrapper so its body can scroll
+			// instead of expanding the wrapper to fit all rows.
+			.virtualized-table {
+				flex: 1;
+				min-height: 0;
+			}
+
+			// Neutralize default virtualized-table styling so list-mode rows behave like
+			// the old section-based layout (stacked blocks, no flex-centering, no row
+			// background/outline from VT's default selected/focused styling).
+			.virtualized-table-body {
+				padding: 4px 0 8px 0;
+			}
+			.row {
+				display: block;
+				border-radius: 0;
+				// Clip row contents so collapsed rows (animated to height: 0
+				// during section collapse) don't overflow on top of each other.
+				overflow: hidden;
+
+				&.selected {
+					background-color: transparent;
+					color: inherit;
 				}
-				&:last-child {
-					padding-bottom: 8px;
+				&.focused:not(.selected) {
+					outline: none;
 				}
-				// show dividers except for on the last section
-				.divider {
-					margin: 4px 16px;
-					border-bottom: 1px solid var(--fill-quinary);
-				}
-				&:last-child {
-					.divider {
-						display: none;
-					}
-				}
-				.header {
-					font-weight: 700;
-					font-size: 1rem;
-					color: var(--fill-secondary);
-					padding: 4px 8px 4px 16px;
+			}
+
+			// Section dividers -- emitted as their own row between sections.
+			// The trailing divider after the last section is omitted in JS.
+			.row > .divider {
+				margin: 4px 16px;
+				border-bottom: 1px solid var(--fill-quinary);
+			}
+
+			// Section header -- emitted as its own row at the start of every section.
+			.row > .header {
+				font-weight: 700;
+				font-size: 1rem;
+				color: var(--fill-secondary);
+				margin: 4px 8px 4px 16px;
+				display: flex;
+
+				.header-btn-group {
 					display: flex;
-					.header-btn-group {
-						display: flex;
-						align-items: center;
-						height: 17px;
-					}
+					align-items: center;
+					height: 17px;
 				}
-				.item {
-					@include focus-ring(true);
-					margin: 0 8px;
-					padding: 4px 8px;
+			}
+
+			// Collapsible header (currently only the "selected" group when it has
+			// multiple items). Keyed on a class set by _renderRow, replacing the old
+			// `.section.expandable` / `.section.expandable.expanded` ancestors.
+			.row > .header.collapsible.selected.focused {
+				outline: 2px solid var(--accent-blue30);
+				outline-offset: 1px;
+				border-radius: 5px;
+			}
+			.row > .header.collapsible {
+				justify-content: space-between;
+
+				.header-label {
+					@include focus-ring;
 					border-radius: 5px;
-					color: var(--fill-primary);
-					cursor: default;
 					-moz-window-dragging: no-drag;
-					&:not([disabled]):hover {
-						background-color: var(--fill-quinary);
+					&:hover {
+						cursor: pointer;
+						text-decoration: underline;
 					}
-					&.selected {
-						background-color: var(--selected-item-background);
-						border-radius: 0;
-						
-					}
-					&.selected-first {
-						border-top-left-radius: 5px;
-						border-top-right-radius: 5px;
-					}
-					&.selected-last {
-						border-bottom-left-radius: 5px;
-						border-bottom-right-radius: 5px;
-					}
-
-					.icon {
-						margin-top: -4px;
-						margin-inline-end: 4px;
-						flex-shrink: 0;
-						&.retracted {
-							width: 12px;
-							height: 12px;
-							color: var(--accent-red);
-							@include svgicon("cross", "universal", "16");
-						}
-					}
-					.description {
-						// Needed to have empty item row description to still occupy height
+					&::before {
+						@include svgicon("chevron-8", "universal", "8");
+						width: 8px;
+						height: 8px;
+						display: inline-block;
+						content: "";
 						white-space: pre;
-						margin-inline-start: 20px;
-						overflow: hidden;
-  						text-overflow: ellipsis;
-					}
-					.title {
-						font-size: 1rem;
-						overflow: hidden;
-						text-wrap: nowrap;
-						text-overflow: ellipsis;
+						margin-inline-end: 3px;
+
+						transform: rotate(180deg);
+						transform-origin: center;
+						transition: transform 0.2s ease-in-out;
+						vertical-align: middle;
+						margin-bottom: 3px;
 					}
 				}
-				&.expandable {
-					// styling for expandable header with a twisty
-					.header {
-						display: flex;
-						justify-content: space-between;
+			}
+			.row > .header.collapsible.collapsed .header-label::before {
+				transform: rotate(0deg);
+			}
 
-						.header-label {
-							@include focus-ring;
-							border-radius: 5px;
-							-moz-window-dragging: no-drag;
-							&:hover {
-								cursor: pointer;
-								text-decoration: underline;
-							}
-							&::before {
-								@include svgicon("chevron-8", "universal", "8");
-								width: 8px;
-								height: 8px;
-								display: inline-block;
-								content: "";
-								white-space: pre;
-								margin-inline-end: 3px;
+			// Items (including the cited-items loading placeholder).
+			.row > .item {
+				@include focus-ring(true);
+				margin: 0 8px;
+				padding: 4px 8px;
+				border-radius: 5px;
+				color: var(--fill-primary);
+				cursor: default;
+				-moz-window-dragging: no-drag;
 
-								transform: rotate(0deg);
-								transform-origin: center;
-								transition: transform 0.2s ease-in-out;
-								vertical-align: middle;
-								margin-bottom: 3px;
-							}
-						}
-					}
-					&.expanded {
-						.header-label::before {
-							transform: rotate(180deg);
-						}
-					}
-					// item container has no height when it is collapsed
-					.itemsContainer {
-						transition: height 0.3s ease;
-						overflow: hidden;
-						// add small padding at the top and bottom to make sure the focus-ring (if it appear) is not
-						// cutoff by the overflow:hidden. Negative margin is to preserve spacing set by other components.
-						padding: 1px 0;
-						margin: -1px 0;
-					}
-					&:not(.expanded) {
-						.itemsContainer {
-							height: 0 !important; // important to override inline height with items displayed
-						}
+				&:not([disabled]):hover {
+					background-color: var(--fill-quinary);
+				}
+				&.selected {
+					background-color: var(--selected-item-background);
+					border-radius: 0;
+				}
+				&.first-selected {
+					border-top-left-radius: 5px;
+					border-top-right-radius: 5px;
+				}
+				&.last-selected {
+					border-bottom-left-radius: 5px;
+					border-bottom-right-radius: 5px;
+				}
+
+				.icon {
+					margin-top: -4px;
+					margin-inline-end: 4px;
+					flex-shrink: 0;
+					&.retracted {
+						width: 12px;
+						height: 12px;
+						color: var(--accent-red);
+						@include svgicon("cross", "universal", "16");
 					}
 				}
+				.description {
+					// Needed to have empty item row description to still occupy height
+					white-space: pre;
+					margin-inline-start: 20px;
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
+				.title {
+					font-size: 1rem;
+					overflow: hidden;
+					text-wrap: nowrap;
+					text-overflow: ellipsis;
+				}
 			}
 		}
 		&.empty {
-			#list-layout-wrapper {
+			#list-layout-wrapper .virtualized-table-body {
 				padding: 0;
 			}
 		}
@@ -877,3 +895,87 @@
 		}
 	}
 }
+
+#citation-dialog[dialog-type="add-note"] {
+	#library-layout {
+		#sidebar {
+			display: block;
+			width: 250px;
+			border-inline-start: var(--material-panedivider);
+			background: var(--material-sidepane) !important;
+			#add-note-sidebar {
+				height: 100%;
+				#note-preview {
+					#links-container {
+						display: none;
+					}
+				}
+				#empty-note-preview-message {
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					text-align: center;
+					padding: 8px;
+					height: 100%;
+				}
+			}
+		}
+		// when adding a note, the item cards are slightly taller
+		#library-other-items {
+			height: 100px;
+			.item {
+				height: 58px !important;
+			}
+		}
+	}
+	#list-layout {
+		#list-layout-wrapper {
+			// Items rendered inside VirtualizedTable rows use .row > .item
+			.row > .item {
+				border-radius: 5px;
+				// container parent items of notes are not properly selectable --
+				// clicking them toggles collapse instead
+				&.container {
+					background-color: var(--color-background);
+					&:hover {
+						outline: 2px solid var(--fill-quinary);
+						outline-offset: -2px;
+					}
+					// Selected containers get the same outline treatment as
+					// selected collapsible headers -- they're not addable, so
+					// the item's background-based selection style doesn't apply.
+					&.selected {
+						outline: 2px solid var(--accent-blue30);
+						outline-offset: -2px;
+						border-radius: 5px;
+					}
+					.title::before {
+						@include svgicon("chevron-8", "universal", "8");
+						width: 8px;
+						height: 8px;
+						display: inline-block;
+						content: "";
+						margin-inline-end: 4px;
+						vertical-align: middle;
+						margin-bottom: 3px;
+						fill: var(--fill-secondary);
+					}
+					&.collapsed .title::before {
+						transform: rotate(270deg);
+					}
+					// push description a bit more to the right so that it
+					// aligns with title after twisty is added
+					.description {
+						margin-inline-start: 32px;
+					}
+				}
+				&:not(.container) {
+					padding-inline: 20px;
+				}
+				&.child {
+					padding-inline: 36px;
+				}
+			}
+		}
+	}
+}
diff --git a/scss/elements/_bubbleInput.scss b/scss/elements/_bubbleInput.scss
index 2a72c9c675..af64a9fefb 100644
--- a/scss/elements/_bubbleInput.scss
+++ b/scss/elements/_bubbleInput.scss
@@ -74,8 +74,6 @@ bubble-input {
 		position: relative;
 		cursor: pointer;
 		background-color: var(--fill-quinary);
-		// don't let the bubble with a very long locator stretch bubble-input
-		overflow-x: hidden;
 		
 		&:hover:not(.showingDetails) {
 			background-color: var(--fill-quarternary);
diff --git a/test/tests/citationDialogTest.js b/test/tests/citationDialogTest.js
index 6c325357e1..b79fc24ee9 100644
--- a/test/tests/citationDialogTest.js
+++ b/test/tests/citationDialogTest.js
@@ -24,6 +24,7 @@ describe("Citation Dialog", function () {
 		Services.ww.openWindow(null, "chrome://zotero/content/integration/citationDialog.xhtml", "", "", io);
 		dialog = await dialogPromise;
 		doc = dialog.document;
+		dialog.DIALOG_STATE.isTestRun = true;
 		IOManager = dialog.IOManager;
 		CitationDataManager = dialog.CitationDataManager;
 		SearchHandler = dialog.SearchHandler;
@@ -648,7 +649,7 @@ describe("Citation Dialog", function () {
 			}
 
 			// Before switching to add-note, note should not appear in search results
-			let results = dialog.SearchHandler.getOrderedSearchResultGroups()[0].group;
+			let results = dialog.SearchHandler.getOrderedSearchResultGroups()[0].group.map(e => e.item);
 			assert.notIncludeMembers(results, [note]);
 
 			// Switch to add-note type
@@ -659,7 +660,7 @@ describe("Citation Dialog", function () {
 			}
 
 			// After switching to add-note, the note must appear in search results
-			results = dialog.SearchHandler.getOrderedSearchResultGroups()[0].group;
+			results = dialog.SearchHandler.getOrderedSearchResultGroups()[0].group.map(e => e.item);
 			assert.includeMembers(results, [note]);
 			// And it's node is rendered
 			let noteNode = dialog.document.querySelector(`.item[id="${note.id}"]`);
@@ -675,7 +676,7 @@ describe("Citation Dialog", function () {
 
 			// Before switching to add/edit citation, item should not appear in search results
 			assert.equal(dialog.DIALOG_STATE.type, "citation");
-			let results = dialog.SearchHandler.getOrderedSearchResultGroups()[0].group;
+			let results = dialog.SearchHandler.getOrderedSearchResultGroups()[0].group.map(e => e.item);
 
 			// Switch to add/edit citation
 			await dialog.setDialogType("citation");
@@ -684,7 +685,7 @@ describe("Citation Dialog", function () {
 			}
 
 			// Item must now appear in search results
-			results = dialog.SearchHandler.getOrderedSearchResultGroups()[0].group;
+			results = dialog.SearchHandler.getOrderedSearchResultGroups()[0].group.map(e => e.item);
 			assert.includeMembers(results, [item]);
 			// Item node must be rendered
 			let itemNode = dialog.document.querySelector(`.item[id="${item.id}"]`);
@@ -728,6 +729,130 @@ describe("Citation Dialog", function () {
 
 			await parentItem.eraseTx();
 		});
+
+		it("should combine multiple notes into a single unsaved note", async function () {
+			let noteA = await createDataObject('item', { itemType: 'note' });
+			noteA.setNote("<div data-schema-version=\"9\"><p>Content from note A</p></div>");
+			await noteA.saveTx();
+
+			let noteB = await createDataObject('item', { itemType: 'note' });
+			noteB.setNote("<div data-schema-version=\"9\"><p>Content from note B</p></div>");
+			await noteB.saveTx();
+
+			let combined = await Zotero.Notes.createCombinedNote([noteA, noteB]);
+
+			// The combined note should be unsaved (no id)
+			assert.isFalse(combined.id > 0);
+
+			// The combined note content should include both notes' content
+			let html = combined.getNote();
+			assert.include(html, "Content from note A");
+			assert.include(html, "Content from note B");
+
+			// There should be a line break separating the two notes
+			assert.include(html, "<br><br>");
+
+			// The combined note should have the schema version wrapper
+			assert.include(html, 'data-schema-version="9"');
+
+			await noteA.eraseTx();
+			await noteB.eraseTx();
+		});
+
+		it("should render child notes under parent item container in list mode", async function () {
+			await dialog.setDialogType("add-note");
+			await IOManager.toggleDialogMode("list");
+			while (SearchHandler.searching) {
+				await Zotero.Promise.delay(10);
+			}
+
+			let parentItem = await createDataObject('item', { title: "unique_parent_for_note_test" });
+			let childNote = await createDataObject('item', { itemType: 'note', parentID: parentItem.id });
+			childNote.setNote("<p>Child note content for testing</p>");
+			await childNote.saveTx();
+
+			// Search for the parent item title
+			await dialog.currentLayout.search("unique_parent_for_note_test", { skipDebounce: true });
+
+			// The parent item should be rendered as a container
+			let parentNode = dialog.document.querySelector(`.item[id="${parentItem.id}"]`);
+			while (!parentNode) {
+				await Zotero.Promise.delay(10);
+				parentNode = dialog.document.querySelector(`.item[id="${parentItem.id}"]`);
+			}
+			assert.isOk(parentNode, "parent item node should exist");
+			assert.isTrue(parentNode.classList.contains("container"), "parent should have container class");
+	
+			// The child note should be rendered as a child
+			let childNode = dialog.document.querySelector(`.item[id="${childNote.id}"]`);
+			while (!childNode) {
+				await Zotero.Promise.delay(10);
+				childNode = dialog.document.querySelector(`.item[id="${childNote.id}"]`);
+			}
+			assert.isOk(childNode, "child note node should exist");
+			assert.isTrue(childNode.classList.contains("child"), "child note should have child class");
+
+			await parentItem.eraseTx();
+		});
+
+		it("should add multiple selected notes to bubble-input", async function () {
+			await dialog.setDialogType("add-note");
+			await IOManager.toggleDialogMode("list");
+			while (SearchHandler.searching) {
+				await Zotero.Promise.delay(10);
+			}
+
+			// Clear any existing items in the citation
+			dialog.CitationDataManager.items = [];
+			dialog.CitationDataManager.updateItemAddedCache();
+			IOManager.updateBubbleInput();
+
+			let noteOne = await createDataObject('item', { itemType: 'note' });
+			noteOne.setNote("<p>First note for multi-select</p>");
+			await noteOne.saveTx();
+
+			let noteTwo = await createDataObject('item', { itemType: 'note' });
+			noteTwo.setNote("<p>Second note for multi-select</p>");
+			await noteTwo.saveTx();
+
+			// Search to make both notes appear
+			await dialog.currentLayout.search("note for multi-select", { skipDebounce: true });
+
+			// Find the row indices for both notes
+			let rows = dialog.listLayout._listRows;
+			let noteOneIndex = rows.findIndex(r => r.kind === "item" && r.ref?.id === noteOne.id);
+			let noteTwoIndex = rows.findIndex(r => r.kind === "item" && r.ref?.id === noteTwo.id);
+			assert.isAbove(noteOneIndex, -1, "noteOne should be in _listRows");
+			assert.isAbove(noteTwoIndex, -1, "noteTwo should be in _listRows");
+
+			// Select both rows
+			dialog.listLayout._table.selection.select(noteOneIndex);
+			dialog.listLayout._table.selection.toggleSelect(noteTwoIndex);
+
+			// Activate (simulates Enter) on the selected rows
+			let indices = Array.from(dialog.listLayout._table.selection.selected);
+			dialog.listLayout._handleActivate(
+				{ stopPropagation: () => {} },
+				indices
+			);
+
+			// Both notes should be in CitationDataManager.items
+			let citedIDs = dialog.CitationDataManager.items.map(i => i.item.id);
+			assert.sameMembers(citedIDs, [noteOne.id, noteTwo.id]);
+
+			// Both should appear as bubbles in bubble-input
+			let bubbleOne, bubbleTwo;
+			while (!bubbleOne && !bubbleTwo) {
+				bubbleOne = dialog.document.querySelector(`.bubble[dialogReferenceID="${dialog.CitationDataManager.items[0].dialogReferenceID}"]`);
+				bubbleTwo = dialog.document.querySelector(`.bubble[dialogReferenceID="${dialog.CitationDataManager.items[1].dialogReferenceID}"]`);
+				await Zotero.Promise.delay(10);
+			}
+			assert.ok(bubbleOne);
+			assert.ok(bubbleTwo);
+
+			await noteOne.eraseTx();
+			await noteTwo.eraseTx();
+		});
 	});
 
 
@@ -770,7 +895,7 @@ describe("Citation Dialog", function () {
 			while (SearchHandler.searching) {
 				await Zotero.Promise.delay(10);
 			}
-			dialog.IOManager._lastClickTime = null;
+			dialog.libraryLayout._lastClickTime = null;
 		});
 
 		after(function () {