From be4ecb31bc1762b96b7fe101ef6da63c196e96af Mon Sep 17 00:00:00 2001
From: abaevbog <bogdan@zotero.org>
Date: Wed, 4 Oct 2023 00:01:54 -0400
Subject: [PATCH] separator after colored tags

---
 .../tagSelector/tagSelectorList.jsx           | 19 ++++++++++++++++++-
 chrome/content/zotero/zoteroPane.js           |  6 ++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/chrome/content/zotero/components/tagSelector/tagSelectorList.jsx b/chrome/content/zotero/components/tagSelector/tagSelectorList.jsx
index f2a67d803d..d5cf9e51ff 100644
--- a/chrome/content/zotero/components/tagSelector/tagSelectorList.jsx
+++ b/chrome/content/zotero/components/tagSelector/tagSelectorList.jsx
@@ -99,11 +99,23 @@ class TagList extends React.PureComponent {
 		var positions = [];
 		var row = 0;
 		let rowX = panePaddingLeft;
+
+		const separatorHeightCoefficient = 0.5;
+		let separatorHeight = Math.round(rowHeight * separatorHeightCoefficient);
+		let shouldAddSeparator = false;
+		let hasColoredTags = !!this.props.tags[0]?.color;
+		let forceNewLine = false;
+
 		for (let i = 0; i < this.props.tags.length; i++) {
 			let tag = this.props.tags[i];
+			// Add separator after reaching the first non-colored tag, assuming colored tags exist
+			if (!shouldAddSeparator && hasColoredTags && !tag.color) {
+				shouldAddSeparator = true;
+				forceNewLine = true;
+			}
 			let tagWidth = tagPaddingLeft + Math.min(tag.width, tagMaxWidth) + tagPaddingRight;
 			// If first row or cell fits, add to current row
-			if (i == 0 || ((rowX + tagWidth) < (this.props.width - panePaddingLeft - panePaddingRight))) {
+			if (!forceNewLine && (i == 0 || ((rowX + tagWidth) < (this.props.width - panePaddingLeft - panePaddingRight)))) {
 				positions[i] = [rowX, panePaddingTop + (row * rowHeight)];
 			}
 			// Otherwise, start new row
@@ -112,6 +124,11 @@ class TagList extends React.PureComponent {
 				rowX = panePaddingLeft;
 				positions[i] = [rowX, panePaddingTop + (row * rowHeight)];
 			}
+			// Push all Y coordinates down by the height of the separator
+			if (shouldAddSeparator) {
+				positions[i][1] += separatorHeight;
+				forceNewLine = false;
+			}
 			rowX += tagWidth + tagSpaceBetweenX;
 		}
 		this.positions = positions;
diff --git a/chrome/content/zotero/zoteroPane.js b/chrome/content/zotero/zoteroPane.js
index cae6516375..41433f281f 100644
--- a/chrome/content/zotero/zoteroPane.js
+++ b/chrome/content/zotero/zoteroPane.js
@@ -1525,6 +1525,12 @@ var ZoteroPane = new function()
 						onSelection: this.updateTagFilter.bind(this),
 					}
 				);
+				// Occasionally, when the app is first opened, the scrollable tag list doesn't
+				// occupy the full height of the tag selector. This ensures that it occupies all
+				// available space.
+				setTimeout(() => {
+					this.tagSelector.handleResize();
+				}, 100);
 			}
 		}
 		catch (e) {