Limit notes count in contextPane notes list

chrome/content/zotero/components/itemPane/notesList.jsx

@@ -26,6 +26,8 @@
 import React, { forwardRef, useImperativeHandle, useState } from 'react';
 import cx from 'classnames';
 
+const MAX_ALL_NOTES = 7;
+
 const NoteRow = ({ title, body, date, onClick, parentItemType, parentTitle }) => {
 	return (
 		<div className={cx('note-row', { 'standalone-note-row': !parentItemType })} onClick={onClick}>
@@ -51,7 +53,13 @@ const NoteRow = ({ title, body, date, onClick, parentItemType, parentTitle }) =>
 
 const NotesList = forwardRef(({ onClick }, ref) => {
 	const [notes, setNotes] = useState([]);
-	useImperativeHandle(ref, () => ({ setNotes }));
+	const [expanded, setExpanded] = useState(false);
+	useImperativeHandle(ref, () => ({ setNotes, setExpanded }));
+	
+	function handleClickMore() {
+		setExpanded(true);
+	}
+	
 	let currentChildNotes = notes.filter(x => x.isCurrentChild);
 	let allNotes = notes.filter(x => !x.isCurrentChild);
 	return (
@@ -62,7 +70,8 @@ const NotesList = forwardRef(({ onClick }, ref) => {
 			</section>
 			<section>
 				{!!allNotes && <h2>{Zotero.getString('pane.context.allNotes')}</h2>}
-				{allNotes.map(note => <NoteRow key={note.id} {...note} onClick={() => onClick(note.id)}/>)}
+				{(expanded ? allNotes : allNotes.slice(0, MAX_ALL_NOTES)).map(note => <NoteRow key={note.id} {...note} onClick={() => onClick(note.id)}/>)}
+				{!expanded && allNotes.length > MAX_ALL_NOTES && <div className="more-row" onClick={handleClickMore}>{Zotero.getString('general.numMore', [allNotes.length - MAX_ALL_NOTES])}</div>}
 			</section>
 		</div>
 	);

chrome/content/zotero/contextPane.js

@@ -455,6 +455,7 @@ var ZoteroContextPane = new function () {
 		input.setAttribute('type', 'search');
 		input.setAttribute('timeout', '250');
 		input.addEventListener('command', () => {
+			notesListRef.current.setExpanded(false);
 			_updateNotesList();
 		});
 		vbox2.append(input);
@@ -505,11 +506,20 @@ var ZoteroContextPane = new function () {
 					text = text.slice(0, 500);
 					var parts = text.split('\n').map(x => x.trim()).filter(x => x.length);
 					var title = parts[0] && parts[0].slice(0, Zotero.Notes.MAX_TITLE_LENGTH);
+					var date = Zotero.Date.sqlToDate(note.dateModified);
+					if (Date.now() - date < 24 * 60 * 60 * 1000) {
+						date = Zotero.getString('date.today');
+						date = date.charAt(0).toUpperCase() + date.slice(1);
+					}
+					else {
+						date = Zotero.Date.toRelativeDate(date);
+					}
+					
 					return {
 						id: note.id,
 						title: title || Zotero.getString('pane.item.notes.untitled'),
 						body: parts[1] || '',
-						date: (new Date(note.dateModified).toLocaleDateString(Zotero.locale)),
+						date,
 						parentID: note.parentID,
 						parentItemType: parentItem && parentItem.itemType,
 						parentTitle: parentItem && parentItem.getDisplayTitle()

scss/components/_notesList.scss

@@ -93,6 +93,19 @@
 	}
 }
 
+.more-row {
+	border: 1px solid #bcc4d2;
+	border-radius: 5px;
+	margin: 4px 7px;
+	background-color: $shade-2;
+	text-align: center;
+	padding: 5px;
+
+	&:active {
+		background: #e4ebf9;
+	}
+}
+
 .standalone-note-row {
 	.title-line {
 		padding-top: 6px !important;