Citation Explorer: Uncited item display change

chrome/content/zotero/integration/citationExplorer.js

@@ -194,6 +194,7 @@ window.ZoteroDocumentCitations = {
 				onActivate: this.onItemActivate.bind(this),
 				emptyMessage: Zotero.getString('pane.items.loading'),
 				firstColumnExtraWidth: 28-16,
+				firstColumnPrependRenderer: this._itemFirstColumnPrependRenderer.bind(this),
 			});
 			await itemList.waitForLoad();
 			// Remove focus from citationList if focus is on itemList
@@ -236,19 +237,6 @@ window.ZoteroDocumentCitations = {
 		await this.refreshItemList();
 	},
 	
-	onSelectTab: async function (selectedIndex) {
-		if (selectedIndex === selectedTab) return;
-		selectedTab = selectedIndex;
-		if (selectedTab) {
-			this._highlightedCitations = new Set();
-			document.querySelector('#button-show-in-zotero').hidden = true;
-			document.querySelector('#button-relink-item').hidden = false;
-			document.querySelector('#button-addTo-library').style.display = 'none';
-		}
-		await this.refreshCitationList();
-		await this.refreshItemList();
-	},
-
 	_initMappings: async function () {
 		const itemMap = {};
 		itemRows = items.map((item) => {
@@ -267,7 +255,7 @@ window.ZoteroDocumentCitations = {
 			itemMap[item.id || item.cslItemID] = proxyItem;
 			return proxyItem;
 		});
-		uncitedItemRows = uncitedItems.map((item) => {
+		itemRows.push(...uncitedItems.map((item) => {
 			return new Proxy(item, {
 				get(target, prop) {
 					if (prop == 'citedIn') {
@@ -276,7 +264,7 @@ window.ZoteroDocumentCitations = {
 					return Reflect.get(...arguments);
 				}
 			});
-		});
+		}));
 		citationRows = await Promise.all(citations
 			.map(async (citation, citationIndex) => {
 				let isLinked = true;
@@ -420,6 +408,16 @@ window.ZoteroDocumentCitations = {
 		await this.refreshCitationList();
 		await this.refreshItemList();
 	},
+
+	_itemFirstColumnPrependRenderer: function (index, data, firstColumnPrepend) {
+		if (itemRows[index].citedIn.length === 0) {
+			let span = document.createElement('span');
+			span.classList.add('badge', 'badge-uncited');
+			span.textContent = 'Uncited';
+			firstColumnPrepend.push(span);
+		}
+		return firstColumnPrepend;
+	},
 	
 	async addToLibraryAndLink() {
 		var collectionID = _addToTarget.objectType == 'collection' ? _addToTarget.id : undefined;

chrome/content/zotero/integration/citationExplorer.xhtml

@@ -84,16 +84,7 @@
 		</div>
 
 		<!-- Right Column -->
-		<div class="tabbox-container grid-padded-section">
-			<xul:tabbox onselect="ZoteroDocumentCitations.onSelectTab(this.selectedIndex)">
-				<xul:tabs>
-					<xul:tab id="tab-cited-items" label="Cited Items"/>
-					<xul:tab id="tab-uncited-items" label="Uncited Items"/>
-				</xul:tabs>
-				<!--We are making our own tabpanel UI, but the onselect event above won't fire without these-->
-				<xul:tabpanels hidden="true"><xul:tabpanel/><xul:tabpanel/></xul:tabpanels>
-			</xul:tabbox>
-		</div>
+		<div class="grid-padded-section" id="items-in-bibliography-label">Items in Bibliography</div>
 
 		<div class="searchbox-container grid-padded-section">
 			<xul:search-textbox id="item-search" placeholder="Title, Creator, Year" class="search-box" timeout="250" oncommand="ZoteroDocumentCitations.onItemFilter()" dir="reverse"/>

scss/components/_citationExplorer.scss

@@ -32,16 +32,11 @@
 		}
 	}
 
-	.tabbox-container, #citations-label {
+	#citations-label, #items-in-bibliography-label {
 		padding-top: 16px !important;
-	}
-
-	#citations-label {
 		align-content: center;
-	}
-
-	.tabbox-container {
-		display: flex;
+		font-size: 15px;
+		font-weight: 600;
 	}
 	
 	.virtualized-table-container {
@@ -63,6 +58,21 @@
 		background: initial !important;
 	}
 
+	.virtualized-table .row {
+		.cell .badge {
+			font-size: 11px;
+			padding: 1px 4px;
+			border-radius: 5px;
+			display: inline-block;
+			background: #59ADC44D;
+		}
+
+		&.selected .cell .badge {
+			background: rgba(255, 255, 255, 0.2);
+			color: --var(accent-white);
+		}
+	}
+
 	.button-container {
 		border-bottom: var(--material-border-quarternary);
 		display: flex;
@@ -86,40 +96,5 @@
 			padding-bottom: 0px;
 			margin-bottom: -16px;
 		}
-		
-		tabbox {
-			flex: 1;
-			flex-direction: row;
-			
-			tabs {
-				flex: 1;
-				margin-bottom: 0;
-				
-				tab {
-					flex: 1;
-
-					&[visuallyselected="true"]:not(:-moz-window-inactive) {
-						color: initial !important;
-					}
-					label.tab-text {
-						flex-direction: column;
-						align-items: center;
-					}
-				}
-				
-				spacer.tabs-right {
-					flex: 0;
-				}
-			}
-		}
-	}
-
-	@media (-moz-platform: windows) {
-		tabbox tabs {
-			border-bottom: none;
-			tab {
-				margin-bottom: 0;
-			}
-		}
 	}
 }