Initial implementation of Libraries and Collections box

chrome/content/zotero/customElements.js

@@ -55,6 +55,7 @@ Services.scriptloader.loadSubScript('chrome://zotero/content/elements/attachment
 Services.scriptloader.loadSubScript('chrome://zotero/content/elements/annotationRow.js', this);
 Services.scriptloader.loadSubScript('chrome://zotero/content/elements/contextNotesList.js', this);
 Services.scriptloader.loadSubScript('chrome://zotero/content/elements/noteRow.js', this);
+Services.scriptloader.loadSubScript('chrome://zotero/content/elements/librariesCollectionsBox.js', this);
 
 {
 	// Fix missing property bug that breaks arrow key navigation between <tab>s

chrome/content/zotero/elements/itemPaneSidenav.js

@@ -53,6 +53,11 @@
 					data-l10n-id="sidenav-notes"
 					data-pane="notes"/>
 			</html:div>
+			<html:div class="toolbarbutton-container">
+				<toolbarbutton
+					data-l10n-id="sidenav-libraries-collections"
+					data-pane="libraries-collections"/>
+			</html:div>
 			<html:div class="toolbarbutton-container">
 				<toolbarbutton
 					data-l10n-id="sidenav-tags"

chrome/content/zotero/elements/librariesCollectionsBox.js

@@ -0,0 +1,256 @@
+/*
+	***** BEGIN LICENSE BLOCK *****
+	
+	Copyright © 2020 Corporation for Digital Scholarship
+					 Vienna, Virginia, USA
+					 https://www.zotero.org
+	
+	This file is part of Zotero.
+	
+	Zotero is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+	
+	Zotero is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+	
+	You should have received a copy of the GNU Affero General Public License
+	along with Zotero.  If not, see <http://www.gnu.org/licenses/>.
+	
+	***** END LICENSE BLOCK *****
+*/
+
+"use strict";
+
+import { getCSSIcon } from 'components/icons';
+
+{
+	class LibrariesCollectionsBox extends XULElementBase {
+		content = MozXULElement.parseXULToFragment(`
+			<collapsible-section data-l10n-id="section-libraries-collections" data-pane="libraries-collections">
+				<html:div class="body"/>
+			</collapsible-section>
+			
+			<popupset>
+				<menupopup class="add-popup" onpopupshowing="ZoteroPane_Local.buildAddToCollectionMenu(event)">
+					<menuitem label="&zotero.toolbar.newCollection.label;" oncommand="ZoteroPane_Local.addSelectedItemsToCollection(null, true)"/>
+					<menuseparator/>
+				</menupopup>
+			</popupset>
+		`, ['chrome://zotero/locale/zotero.dtd']);
+
+		_item = null;
+		
+		_linkedItems = [];
+
+		_mode = null;
+
+		get item() {
+			return this._item;
+		}
+
+		set item(item) {
+			this._item = item;
+			// Getting linked items is an async process, so start by rendering without them
+			this._linkedItems = [];
+			this.render();
+			
+			this._updateLinkedItems();
+		}
+
+		get mode() {
+			return this._mode;
+		}
+
+		set mode(mode) {
+			this._mode = mode;
+			this.render();
+		}
+
+		init() {
+			this._notifierID = Zotero.Notifier.registerObserver(this, ['item'], 'librariesCollectionsBox');
+			this._body = this.querySelector('.body');
+			this._section = this.querySelector('collapsible-section');
+			this._section.addEventListener('add', (event) => {
+				this.querySelector('.add-popup').openPopupAtScreen(
+					event.detail.button.screenX,
+					event.detail.button.screenY,
+					true
+				);
+				this._section.open = true;
+			});
+			this.render();
+		}
+
+		destroy() {
+			Zotero.Notifier.unregisterObserver(this._notifierID);
+		}
+
+		notify(action, type, ids) {
+			if (action == 'modify'
+					&& this._item
+					&& (ids.includes(this._item.id) || this._linkedItems.some(item => ids.includes(item.id)))) {
+				this.render();
+			}
+		}
+		
+		_buildRow(obj, level, contextItem) {
+			let isContext = obj instanceof Zotero.Collection && !contextItem.inCollection(obj.id);
+
+			let row = document.createElement('div');
+			row.classList.add('row');
+			row.dataset.id = obj.treeViewID;
+			row.dataset.level = level;
+			row.style.setProperty('--level', level);
+			row.classList.toggle('context', isContext);
+			
+			let box = document.createElement('div');
+			box.classList.add('box');
+			
+			let iconName;
+			if (obj instanceof Zotero.Group) {
+				iconName = 'library-group';
+			}
+			else if (obj instanceof Zotero.Library) {
+				iconName = 'library';
+			}
+			else {
+				iconName = 'collection';
+			}
+			let icon = getCSSIcon(iconName);
+			box.append(icon);
+			
+			let text = document.createElement('span');
+			text.classList.add('label');
+			text.textContent = obj.name;
+			box.append(text);
+			
+			row.append(box);
+			
+			if (this._mode == 'edit' && obj instanceof Zotero.Collection && !isContext) {
+				let remove = document.createXULElement('toolbarbutton');
+				remove.className = 'zotero-clicky zotero-clicky-minus';
+				remove.addEventListener('command', () => {
+					if (Services.prompt.confirm(
+						window,
+						Zotero.getString('pane.items.remove.title'),
+						Zotero.getString('pane.items.removeFromOther', [obj.name])
+					)) {
+						contextItem.removeFromCollection(obj.id);
+						contextItem.saveTx();
+					}
+				});
+				row.append(remove);
+			}
+			
+			let isCurrent = ZoteroPane.collectionsView.selectedTreeRow?.id == obj.treeViewID;
+			box.classList.toggle('current', isCurrent);
+
+			// Disable clicky if this is a context row or we're already in the library/collection it points to
+			let disableClicky = isContext || isCurrent;
+			box.toggleAttribute('disabled', disableClicky);
+			if (!disableClicky) {
+				box.addEventListener('click', async () => {
+					await ZoteroPane.collectionsView.selectByID(obj.treeViewID);
+					await ZoteroPane.selectItem(contextItem.id);
+				});
+			}
+
+			return row;
+		}
+		
+		_findRow(obj) {
+			return this._body.querySelector(`.row[data-id="${obj.treeViewID}"]`);
+		}
+		
+		_getChildren(row = null) {
+			let rows = Array.from(this._body.querySelectorAll('.row'));
+			let startIndex = row ? rows.indexOf(row) + 1 : 0;
+			let level = row ? parseInt(row.dataset.level) + 1 : 0;
+			let children = [];
+			for (let i = startIndex; i < rows.length; i++) {
+				let childLevel = parseInt(rows[i].dataset.level);
+				if (childLevel == level) {
+					children.push(rows[i]);
+				}
+				else if (childLevel < level) {
+					break;
+				}
+			}
+			return children;
+		}
+		
+		_addObject(obj, contextItem) {
+			let existingRow = this._findRow(obj);
+			if (existingRow) {
+				return existingRow;
+			}
+			
+			let parent = obj instanceof Zotero.Library
+				? null
+				: (obj.parentID ? Zotero.Collections.get(obj.parentID) : Zotero.Libraries.get(obj.libraryID));
+			let parentRow = parent && this._findRow(parent);
+			if (parent && !parentRow) {
+				parentRow = this._addObject(parent, contextItem);
+			}
+			
+			let row = this._buildRow(obj, parentRow ? parseInt(parentRow.dataset.level) + 1 : 0, contextItem);
+			let siblings = this._getChildren(parentRow);
+			let added = false;
+			for (let sibling of siblings) {
+				if (Zotero.localeCompare(sibling.querySelector('.label').textContent, obj.name) > 0) {
+					sibling.before(row);
+					added = true;
+					break;
+				}
+			}
+			if (!added) {
+				if (siblings.length) {
+					let lastSibling = siblings[siblings.length - 1];
+					let childrenOfLastSibling = this._getChildren(lastSibling);
+					if (childrenOfLastSibling.length) {
+						childrenOfLastSibling[childrenOfLastSibling.length - 1].after(row);
+					}
+					else {
+						lastSibling.after(row);
+					}
+				}
+				else if (parentRow) {
+					parentRow.after(row);
+				}
+				else {
+					this._body.append(row);
+				}
+			}
+			return row;
+		}
+		
+		async _updateLinkedItems() {
+			this._linkedItems = (await Promise.all(Zotero.Libraries.getAll()
+					.filter(lib => lib.libraryID !== this._item.libraryID)
+					.map(lib => this._item.getLinkedItem(lib.libraryID, true))))
+				.filter(Boolean);
+			this.render();
+		}
+		
+		render() {
+			if (!this._item) {
+				return;
+			}
+
+			this._body.replaceChildren();
+			for (let item of [this._item, ...this._linkedItems]) {
+				this._addObject(Zotero.Libraries.get(item.libraryID), item);
+				for (let collection of Zotero.Collections.get(item.getCollections())) {
+					this._addObject(collection, item);
+				}
+			}
+
+			this._section.showAdd = this._mode == 'edit';
+		}
+	}
+	customElements.define("libraries-collections-box", LibrariesCollectionsBox);
+}

chrome/content/zotero/itemPane.js

@@ -25,7 +25,7 @@
 
 var ZoteroItemPane = new function() {
 	var _container;
-	var _header, _sidenav, _scrollParent, _itemBox, _abstractBox, _attachmentsBox, _tagsBox, _notesBox, _relatedBox, _boxes;
+	var _header, _sidenav, _scrollParent, _itemBox, _abstractBox, _attachmentsBox, _tagsBox, _notesBox, _librariesCollectionsBox, _relatedBox, _boxes;
 	var _deck;
 	var _lastItem;
 	var _selectedNoteID;
@@ -45,8 +45,9 @@ var ZoteroItemPane = new function() {
 		_notesBox = document.getElementById('zotero-editpane-notes');
 		_attachmentsBox = document.getElementById('zotero-editpane-attachments');
 		_tagsBox = document.getElementById('zotero-editpane-tags');
+		_librariesCollectionsBox = document.getElementById('zotero-editpane-libraries-collections');
 		_relatedBox = document.getElementById('zotero-editpane-related');
-		_boxes = [_itemBox, _abstractBox, _notesBox, _attachmentsBox, _tagsBox, _relatedBox];
+		_boxes = [_itemBox, _abstractBox, _notesBox, _attachmentsBox, _librariesCollectionsBox, _tagsBox, _relatedBox];
 		
 		_deck = document.getElementById('zotero-item-pane-content');
 		

chrome/content/zotero/zoteroPane.js

@@ -3953,10 +3953,10 @@ var ZoteroPane = new function()
 
 
 	this.buildAddToCollectionMenu = function (event) {
-		if (event.target.id !== 'zotero-add-to-collection-popup') return;
+		if (event.target !== event.currentTarget) return;
 
-		let popup = document.getElementById('zotero-add-to-collection-popup');
+		let popup = event.target;
-		let separator = document.getElementById('zotero-add-to-collection-separator');
+		let separator = popup.querySelector('menuseparator');
 		while (popup.childElementCount > 2) {
 			popup.removeChild(popup.lastElementChild);
 		}

chrome/content/zotero/zoteroPane.xhtml

@@ -1129,6 +1129,8 @@
 
 														<notes-box id="zotero-editpane-notes" class="zotero-editpane-notes" data-pane="notes"/>
 														
+														<libraries-collections-box id="zotero-editpane-libraries-collections" class="zotero-editpane-libraries-collections" data-pane="libraries-collections"/>
+
 														<tags-box id="zotero-editpane-tags" class="zotero-editpane-tags" data-pane="tags"/>
 
 														<related-box id="zotero-editpane-related" class="zotero-editpane-related" data-pane="related"/>

chrome/locale/en-US/zotero/zotero.ftl

@@ -235,6 +235,7 @@ pane-info = Info
 pane-abstract = Abstract
 pane-attachments = Attachments
 pane-notes = Notes
+pane-libraries-collections = Libraries and Collections
 pane-tags = Tags
 pane-related = Related
 
@@ -252,6 +253,8 @@ section-notes =
                  [one] { $count } Note
                  *[other] { $count } Notes
              }
+section-libraries-collections =
+    .label = { pane-libraries-collections }
 section-tags =
     .label = { $count ->
                  [one] { $count } Tag
@@ -268,6 +271,8 @@ sidenav-attachments =
     .tooltiptext = { pane-attachments }
 sidenav-notes =
     .tooltiptext = { pane-notes }
+sidenav-libraries-collections =
+    .tooltiptext = { pane-libraries-collections }
 sidenav-tags =
     .tooltiptext = { pane-tags }
 sidenav-related =

chrome/locale/en-US/zotero/zotero.properties

@@ -339,6 +339,7 @@ pane.items.delete.multiple		= Are you sure you want to delete the selected items
 pane.items.remove.title			= Remove from Collection
 pane.items.remove				= Are you sure you want to remove the selected item from this collection?
 pane.items.remove.multiple		= Are you sure you want to remove the selected items from this collection?
+pane.items.removeFromOther		= Are you sure you want to remove the selected item from “%S”?
 pane.items.removeFromPublications.title = Remove from My Publications
 pane.items.removeFromPublications = Are you sure you want to remove the selected item from My Publications?
 pane.items.removeFromPublications.multiple = Are you sure you want to remove the selected items from My Publications?

chrome/skin/default/zotero/itempane/16/libraries-collections.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon" clip-path="url(#clip0_5386_1543)">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M2 2.64987V3H9V2.64987L5.5 1.09432L2 2.64987ZM5.5 0L1 2V3V4H2V9H1V10H5V9V4H6V7H7V4H8V6H9V4H10V3V2L5.5 0ZM4 9H3V4H4V9ZM15 10H7V9H7.69098C8.06976 9 8.41602 8.786 8.58541 8.44721L8.80902 8H10.691L10.9146 8.44721C11.084 8.786 11.4302 9 11.809 9H15V10ZM15 11H7V15H15V11ZM0 11H5V12H0V11ZM8.80902 7C8.43025 7 8.08398 7.214 7.91459 7.55279L7.69098 8H7C6.44772 8 6 8.44772 6 9V15C6 15.5523 6.44772 16 7 16H15C15.5523 16 16 15.5523 16 15V9C16 8.44772 15.5523 8 15 8H11.809L11.5854 7.55279C11.416 7.214 11.0698 7 10.691 7H8.80902Z" fill="context-fill"/>
+</g>
+<defs>
+<clipPath id="clip0_5386_1543">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

chrome/skin/default/zotero/itempane/20/libraries-collections.svg

@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon" clip-path="url(#clip0_5386_16770)">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M2.25 3.33333V3.75H11.75V3.33333L7 1.35417L2.25 3.33333ZM7 0L1 2.5V3.75V5H2V11H1V12.25H6.75V11H6.25V5H7.75V9H9V5H10.75V7.75H12V5H13V3.75V2.5L7 0ZM5 11H3.25V5H5V11ZM18.75 12.75H9V11.25H10.066C10.4921 11.25 10.8816 11.0092 11.0722 10.6281L11.3863 10H13.6137L13.9278 10.6281C14.1184 11.0092 14.5079 11.25 14.934 11.25H18.75V12.75ZM18.75 14H9V18.75H18.75V14ZM0 13.75H6.75V15H0V13.75ZM11.309 8.75C10.8829 8.75 10.4934 8.99075 10.3028 9.37189L9.98873 10H8.875C8.25368 10 7.75 10.5037 7.75 11.125V18.875C7.75 19.4963 8.25368 20 8.875 20H18.875C19.4963 20 20 19.4963 20 18.875V11.125C20 10.5037 19.4963 10 18.875 10H15.0113L14.6972 9.37188C14.5066 8.99075 14.1171 8.75 13.691 8.75H11.309Z" fill="context-fill"/>
+</g>
+<defs>
+<clipPath id="clip0_5386_16770">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

scss/_zotero.scss

@@ -76,3 +76,4 @@
 @import "elements/attachmentRow";
 @import "elements/annotationRow";
 @import "elements/noteRow";
+@import "elements/librariesCollectionsBox";

scss/abstracts/_mixins.scss

@@ -86,12 +86,16 @@
 	gap: 4px;
 	padding-inline-start: 4px;
 	overflow: hidden;
-
-	&:hover {
 	border-radius: 5px;
+
+	&:not([disabled]):hover {
 		background-color: var(--fill-quinary);
 	}
 	
+	&:not([disabled]):active {
+		background-color: var(--fill-quarternary);
+	}
+
 	.label {
 		display: -webkit-box;
 		-webkit-box-orient: vertical;

scss/abstracts/_variables.scss

@@ -82,9 +82,10 @@ $z-index-loading-cover: 60;
 // --------------------------------------------------
 $item-pane-sections: (
 	"info": var(--accent-blue),
-	"abstract": var(--accent-teal),
+	"abstract": var(--accent-azure),
 	"attachments": var(--accent-green),
 	"notes": var(--accent-yellow),
+	"libraries-collections": var(--accent-teal),
 	"tags": var(--accent-orange),
 	"related": var(--accent-wood),
 );

scss/components/_virtualized-table.scss

@@ -148,7 +148,7 @@
 		}
 
 		&.context-row {
-			color: gray;
+			color: var(--fill-secondary);
 		}
 
 		.spacer-twisty {

scss/elements/_attachmentRow.scss

@@ -44,8 +44,7 @@ attachment-row {
 	}
 	
 	&.context > .head .label {
-		// TODO This color is used in virtualized-table - probably want to change to something theme-defined
+		color: var(--fill-secondary);
-		color: gray;
 	}
 
 	& > .body {

scss/elements/_collapsibleSection.scss

@@ -101,6 +101,5 @@ collapsible-section {
 	
 	&.disable-transitions * {
 		transition: none !important;
-		color: red;
 	}
 }

scss/elements/_librariesCollectionsBox.scss

@@ -0,0 +1,52 @@
+libraries-collections-box {
+	display: flex;
+	flex-direction: column;
+	
+	.body {
+		display: flex;
+		flex-direction: column;
+		margin-inline-start: 16px;
+		
+		.row {
+			display: flex;
+			align-items: flex-start;
+			gap: 4px;
+			margin-inline-start: calc(16px * var(--level, 0));
+			
+			@include comfortable {
+				padding-block: 2px;
+			}
+			
+			&.context {
+				color: var(--fill-secondary);
+
+				.box .icon {
+					opacity: 0.5;
+				}
+			}
+			
+			.box {
+				@include clicky-item;
+				flex: 1;
+				
+				&.current {
+					font-weight: 590;
+				}
+				
+				.icon {
+					width: 16px;
+					height: 16px;
+				}
+			}
+
+			toolbarbutton {
+				margin-inline-start: auto;
+				visibility: hidden;
+			}
+
+			&:is(:hover, :focus-within) toolbarbutton {
+				visibility: visible;
+			}
+		}
+	}
+}

scss/elements/_notesBox.scss

@@ -7,7 +7,7 @@ notes-box, related-box {
 notes-box .body, related-box .body {
 	display: flex;
 	flex-direction: column;
-	padding-inline-start: 16px - 2px;
+	padding-inline-start: 16px;
 
 	.row {
 		display: flex;

scss/elements/_tagsBox.scss

@@ -19,7 +19,6 @@ tags-box .body {
 		grid-template-columns: 12px 1fr 20px;
 		align-items: center;
 		column-gap: 4px;
-		padding-block: 1px;
 
 		// Shift-Enter
 		&.multiline {

scss/themes/_dark.scss

@@ -2,6 +2,7 @@
 @use "sass:map";
 
 $-colors: (
+    accent-azure: #66adffd9,
     accent-blue: #4072e5,
     accent-blue10: #4072e54d,
     accent-blue30: #4072e573,

scss/themes/_light.scss

@@ -2,6 +2,7 @@
 @use "sass:map";
 
 $-colors: (
+    accent-azure: #66adff,
     accent-blue: #4072e5,
     accent-blue10: #4072e51a,
     accent-blue30: #4072e54d,