From 5a6424e591ced8e46099eb03b79ddcd88d1d39f0 Mon Sep 17 00:00:00 2001
From: Martynas Bagdonas <martbgd@gmail.com>
Date: Tue, 23 Feb 2021 20:15:55 +0200
Subject: [PATCH] Limit notes count in contextPane notes list

---
 .../zotero/components/itemPane/notesList.jsx        | 13 +++++++++++--
 chrome/content/zotero/contextPane.js                | 12 +++++++++++-
 scss/components/_notesList.scss                     | 13 +++++++++++++
 3 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/chrome/content/zotero/components/itemPane/notesList.jsx b/chrome/content/zotero/components/itemPane/notesList.jsx
index a16d330cda..8edb760d53 100644
--- a/chrome/content/zotero/components/itemPane/notesList.jsx
+++ b/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>
 	);
diff --git a/chrome/content/zotero/contextPane.js b/chrome/content/zotero/contextPane.js
index c1fadb2580..78db231abb 100644
--- a/chrome/content/zotero/contextPane.js
+++ b/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()
diff --git a/scss/components/_notesList.scss b/scss/components/_notesList.scss
index 02cbb883a2..a01f30cd40 100644
--- a/scss/components/_notesList.scss
+++ b/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;