Pin library tab (#2589)

Fixes #2575

chrome/content/zotero/components/tabBar.jsx

@@ -37,6 +37,7 @@ const TabBar = forwardRef(function (props, ref) {
 	const [dragMouseX, setDragMouseX] = useState(0);
 	const dragIDRef = useRef(null);
 	const dragGrabbedDeltaXRef = useRef();
+	const tabsInnerContainerRef = useRef();
 	const tabsRef = useRef();
 	const startArrowRef = useRef();
 	const endArrowRef = useRef();
@@ -85,17 +86,10 @@ const TabBar = forwardRef(function (props, ref) {
 	});
 
 	function updateScrollArrows() {
-		let enableArrows = tabsRef.current.scrollWidth !== tabsRef.current.clientWidth;
-		if (enableArrows) {
-			startArrowRef.current.classList.add('enabled');
-			endArrowRef.current.classList.add('enabled');
-		}
-		else {
-			startArrowRef.current.classList.remove('enabled');
-			endArrowRef.current.classList.remove('enabled');
-		}
+		let scrollable = tabsRef.current.scrollWidth !== tabsRef.current.clientWidth;
+		if (scrollable) {
+			tabsInnerContainerRef.current.classList.add('scrollable');
 
-		if (enableArrows) {
 			if (tabsRef.current.scrollLeft !== 0) {
 				startArrowRef.current.classList.add('active');
 			}
@@ -110,6 +104,9 @@ const TabBar = forwardRef(function (props, ref) {
 				endArrowRef.current.classList.remove('active');
 			}
 		}
+		else {
+			tabsInnerContainerRef.current.classList.remove('scrollable');
+		}
 	}
 	
 	function handleTabMouseDown(event, id) {
@@ -271,7 +268,7 @@ const TabBar = forwardRef(function (props, ref) {
 		event.preventDefault();
 	}
 
-	function renderTab({ id, title, selected }, index) {
+	function renderTab({ id, title, selected, iconBackgroundImage }, index) {
 		return (
 			<div
 				key={id}
@@ -285,7 +282,8 @@ const TabBar = forwardRef(function (props, ref) {
 				onDragStart={(event) => handleDragStart(event, id, index)}
 				onDragEnd={handleDragEnd}
 			>
-				<div className="tab-name">{title}</div>
+				<div className="tab-name">{iconBackgroundImage &&
+					<span className="icon-bg" style={{ backgroundImage: iconBackgroundImage }}/>}{title}</div>
 				<div
 					className="tab-close"
 					onClick={(event) => handleTabClose(event, id)}
@@ -298,7 +296,16 @@ const TabBar = forwardRef(function (props, ref) {
 
 	return (
 		<div>
-			<div className="tab-bar-inner-container" onWheel={handleWheel}>
+			<div
+				ref={tabsInnerContainerRef}
+				className="tab-bar-inner-container"
+				onWheel={handleWheel}
+			>
+				<div className="pinned-tabs">
+					<div className="tabs">
+						{tabs.length ? renderTab(tabs[0], 0) : null}
+					</div>
+				</div>
 				<div
 					ref={startArrowRef}
 					className="scroll-start-arrow"

chrome/content/zotero/tabs.js

@@ -74,7 +74,8 @@ var Zotero_Tabs = new function () {
 			id: tab.id,
 			type: tab.type,
 			title: tab.title,
-			selected: tab.id == this._selectedID
+			selected: tab.id == this._selectedID,
+			iconBackgroundImage: tab.iconBackgroundImage
 		})));
 		var { tab } = this._getTab(this._selectedID);
 		document.title = (tab.title.length ? tab.title + ' - ' : '') + 'Zotero';
@@ -195,9 +196,23 @@ var Zotero_Tabs = new function () {
 			return;
 		}
 		tab.title = title;
+		Zotero_Tabs.updateLibraryTabIcon();
 		this._update();
 	};
 
+	this.updateLibraryTabIcon = () => {
+		let index = ZoteroPane.collectionsView.selection.focused;
+		if (!ZoteroPane.collectionsView.getRow(index)) {
+			return;
+		}
+		let icon = ZoteroPane.collectionsView._getIcon(index);
+		var { tab } = this._getTab('zotero-pane');
+		if (!tab || !icon.style.backgroundImage) {
+			return;
+		}
+		tab.iconBackgroundImage = icon.style.backgroundImage;
+	};
+
 	/**
 	 * Close tabs
 	 *

scss/components/_tabBar.scss

@@ -19,10 +19,6 @@
 		display: none;
 		box-shadow: none;
 
-		&.enabled {
-			display: flex;
-		}
-
 		.icon {
 			display: flex;
 		}
@@ -50,6 +46,27 @@
 			box-shadow: -1px 0 0 0 rgba(0,0,0,0.05);
 		}
 	}
+
+	.pinned-tabs {
+		display: none;
+		.tab {
+			max-width: 110px;
+		}
+	}
+
+	&.scrollable {
+		.tabs-wrapper > .tabs > :first-child {
+			display: none;
+		}
+
+		.scroll-start-arrow, .scroll-end-arrow {
+			display: flex;
+		}
+
+		.pinned-tabs {
+			display: block;
+		}
+	}
 }
 
 .tabs {
@@ -117,6 +134,11 @@
 		position: relative;
 		top: -2px;
 		overflow-y: hidden;
+
+		.icon-bg {
+			margin-inline-end: 7px;
+			margin-top: -2px;
+		}
 	}
 
 	.tab-close {
@@ -141,7 +163,7 @@
 			background-color: rgba(0, 0, 0, 0.16);
 		}
 	}
-	
+
 	&:first-child .tab-close {
 		display: none;
 	}