Feature/JS-8836: Tab tooltip style

dist/js/tabs.js

@@ -28,6 +28,15 @@ $(() => {
 	const TOOLTIP_DELAY = 650;
 	const TOOLTIP_DELAY_SHORT = 50;
 
+	const tooltipReset = () => {
+		window.clearTimeout(tooltipTimeout);
+		window.clearTimeout(tooltipHideTimeout);
+		if (tooltipVisible) {
+			tooltipVisible = false;
+			electron.Api(winId, 'tabHideTooltip');
+		};
+	};
+
 	// Tab detach state
 	let windowBounds = null;
 	let draggedTabId = null;
@@ -267,6 +276,7 @@ $(() => {
 
 		tab.find('.icon.close').off('click').on('click', (e) => {
 			e.stopPropagation();
+			tooltipReset();
 			electron.Api(winId, 'removeTab', [ item.id, true ]);
 		});
 
@@ -290,6 +300,8 @@ $(() => {
 				isPinned: Boolean(item.data.isPinned),
 				offsetLeft: offset.left,
 				width: tab.outerWidth(),
+				objectName: item.data.title || '',
+				action: item.data.action || '',
 			};
 
 			tooltipTimeout = window.setTimeout(() => {
@@ -385,12 +397,7 @@ $(() => {
 				draggedTabId = $(evt.item).attr('data-id');
 
 				// Hide tooltip on drag start
-				window.clearTimeout(tooltipTimeout);
-				window.clearTimeout(tooltipHideTimeout);
-				if (tooltipVisible) {
-					tooltipVisible = false;
-					electron.Api(winId, 'tabHideTooltip');
-				};
+				tooltipReset();
 
 				const item = $(evt.item);
 				item.css('visibility', 'hidden');
@@ -486,12 +493,7 @@ $(() => {
 		};
 
 		// Hide tooltip on tabs update
-		window.clearTimeout(tooltipTimeout);
-		window.clearTimeout(tooltipHideTimeout);
-		if (tooltipVisible) {
-			tooltipVisible = false;
-			electron.Api(winId, 'tabHideTooltip');
-		};
+		tooltipReset();
 
 		container.empty();
 
@@ -558,6 +560,7 @@ $(() => {
 	electron.on('remove-tab', (e, id) => {
 		if (isDragging) return;
 
+		tooltipReset();
 		container.find(`#tab-${id}`).remove();
 		resize();
 		setTimeout(() => initSortable(), 10);

src/scss/component/preview/common.scss

@@ -26,6 +26,9 @@
 	}
 
 	&.isTab { width: auto; }
+	&.isTab {
+		.content { border-radius: 16px; box-shadow: none; border: 1px solid var(--color-shape-secondary); }
+	}
 }
 .previewWrapper.passThrough { pointer-events: none; }
 

src/scss/component/preview/tab.scss

@@ -1,10 +1,26 @@
 
-.previewTab { padding: 4px 8px; display: flex; flex-direction: column; gap: 4px; }
+.previewTab {
+    padding: 16px 32px 16px 16px; display: flex; flex-direction: column; gap: 12px;
+    min-width: 288px; max-width: 360px;
+}
 .previewTab {
     .previewHeader,
-    .previewObject { display: flex; gap: 0px 6px; align-items: center; height: auto; }
+    .previewObject { display: flex; align-items: center; height: auto; flex-wrap: nowrap; }
     .previewHeader,
     .previewObject {
         .iconObject { flex-shrink: 0; }
     }
+
+    .previewHeader { gap: 0px 6px; }
+    .previewHeader {
+        .iconObject { border-radius: 3px; }
+    }
+
+    .previewObject { gap: 0px 12px;  }
+    .previewObject {
+        .side.right { @include text-overflow-nw; }
+        .iconObject { flex-shrink: 0; border-radius: 8px !important; background-color: var(--color-shape-highlight-medium) !important; }
+        .name { font-weight: 500; @include text-overflow-nw; }
+        .type { @include text-small; color: var(--color-text-secondary); }
+    }
 }

src/ts/component/preview/index.tsx

@@ -222,7 +222,7 @@ const PreviewIndex = observer(forwardRef(() => {
 		};
 
 		case I.PreviewType.Tab: {
-			content = <PreviewTab spaceview={initialObject} object={preview.relatedObject} position={position} />;
+			content = <PreviewTab spaceview={initialObject} data={preview.relatedData} position={position} />;
 			break;
 		};
 	};

src/ts/component/preview/tab.tsx

@@ -1,58 +1,103 @@
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { observer } from 'mobx-react';
-import { ObjectName, IconObject } from 'Component';
-import { U, I } from 'Lib';
+import { ObjectName, IconObject, Label } from 'Component';
+import { U, I, translate, S } from 'Lib';
 
 interface Props {
 	spaceview?: any;
-	object?: any;
+	data?: any;
 	position?: () => void;
 };
 
 const PreviewTab = observer(forwardRef<{}, Props>((props, ref) => {
 
 	const {
 		spaceview = {},
-		object,
+		data,
 		position,
 	} = props;
 
-	const [ dummy, setDummy ] = useState(0);
-	const objectRef = useRef(object);
+	const { object, name, action } = data;
+	const [ displayObject, setDisplayObject ] = useState<any>(null);
+	const [ displayObjectType, setDisplayObjectType ] = useState<any>(null);
+	const cancelRef = useRef(false);
 
 	useEffect(() => {
-		if (!object?.id || (object?.layout == I.ObjectLayout.SpaceView)) {
-			objectRef.current = {};
-			setDummy(dummy + 1);
-			return;
+		cancelRef.current = false;
+		setDisplayObject(null);
+		setDisplayObjectType(null);
+		load();
+
+		return () => {
+			cancelRef.current = true;
 		};
+	}, [ object?.id, action, spaceview.targetSpaceId ]);
+
+	useEffect(position);
 
-		let cancelled = false;
+	const load = () => {
+		const isChat = (object?.layout == I.ObjectLayout.SpaceView) && (spaceview.isOneToOne || spaceview.isChat);
 
-		objectRef.current = object;
+		if (isChat) {
+			setDisplayObject({ layout: I.ObjectLayout.Chat, name: translate('commonMainChat') });
+		} else
+		if (action && name) {
+			objectByAction();
+		} else {
+			loadObject();
+		};
+	};
+
+	const objectByAction = () => {
+		const layouts = {
+			navigation: I.ObjectLayout.Navigation,
+			graph: I.ObjectLayout.Graph,
+			archive: I.ObjectLayout.Archive,
+			settings: I.ObjectLayout.Settings,
+		};
 
+		if (layouts[action]) {
+			setDisplayObject({ layout: layouts[action], name });
+		} else {
+			loadObject();
+		};
+	};
+
+	const loadObject = () => {
+		if (!object || !object.id) {
+			return;
+		};
 		U.Object.getById(object.id, { spaceId: spaceview.targetSpaceId }, (loaded: any) => {
-			if (loaded && !cancelled) {
-				objectRef.current = loaded;
-				setDummy(dummy + 1);
+			if (loaded && !cancelRef.current) {
+				setDisplayObject(loaded);
+				loadType(loaded.type)
 			};
 		});
+	};
 
-		return () => { cancelled = true; };
-	}, [ object?.id ]);
-
-	useEffect(position);
+	const loadType = (id: string) => {
+		U.Object.getById(id, { spaceId: spaceview.targetSpaceId }, (loaded: any) => {
+			if (loaded && !cancelRef.current) {
+				setDisplayObjectType(loaded);
+			};
+		});
+	};
 
 	return (
 		<div className="previewTab">
 			<div className="previewHeader">
 				<IconObject object={spaceview} />
 				<ObjectName object={spaceview} />
 			</div>
-			{objectRef.current && objectRef.current.name ? (
+			{displayObject?.name ? (
 				<div className="previewObject">
-					<IconObject object={objectRef.current} />
-					<ObjectName object={objectRef.current} />
+					<div className="side left">
+						<IconObject object={displayObject} size={48} iconSize={28} />
+					</div>
+					<div className="side right">
+						<ObjectName object={displayObject} />
+						{displayObjectType ? <Label className="type" text={displayObjectType.name} /> : ''}
+					</div>
 				</div>
 			) : null}
 		</div>

src/ts/interface/preview.ts

@@ -39,7 +39,7 @@ export interface Preview {
 	withPlural?: boolean;
 	typeX?: I.MenuDirection.Left | I.MenuDirection.Center | I.MenuDirection.Right;
 	noOffset?: boolean;
-	relatedObject?: any;
+	relatedData?: any;
 	delay?: number;
 	x?: number;
 	y?: number;

src/ts/lib/keyboard.ts

@@ -1369,7 +1369,7 @@ class Keyboard {
 
 		if (title) {
 			U.Data.setWindowTitleText(title);
-			U.Data.setTabTitleText(title);
+			U.Data.setTabTitleText(title, action);
 		} else {
 			U.Data.setWindowTitle(rootId, rootId);
 			U.Data.setTabTitle(rootId, rootId);

src/ts/lib/util/common.ts

@@ -1581,14 +1581,12 @@ class UtilCommon {
 
 	tabTooltipShow (data: any) {
 		const spaceview = U.Space.getSpaceviewBySpaceId(data.spaceId);
-		const x = data.isPinned ? data.offsetLeft : data.offsetLeft + 6;
-
 		if (!spaceview) {
 			return;
 		};
 
 		Preview.previewShow({
-			rect: { x, y: 2, width: data.width, height: 0 },
+			rect: { x: data.offsetLeft, y: 0, width: data.width, height: 0 },
 			classNameWrap: 'isTab',
 			object: spaceview,
 			target: spaceview.id,
@@ -1598,7 +1596,11 @@ class UtilCommon {
 			noAnimation: true,
 			noOffset: true,
 			typeX: I.MenuDirection.Left,
-			relatedObject: data.objectData ? { ...data.objectData, name: data.title } : null,
+			relatedData: {
+				action: data?.action,
+				name: data?.objectName,
+				object: data?.objectData,
+			},
 			delay: 0,
 			type: I.PreviewType.Tab,
 		});

src/ts/lib/util/data.ts

@@ -866,8 +866,9 @@ class UtilData {
 	/**
 	 * Sets the tab title text.
 	 * @param {string} text - The text to set as the tab title.
+	 * @param {string} action - Optional layout of the current object, useful for tab tooltips.
 	 */
-	setTabTitleText(text: string) {
+	setTabTitleText(text: string, action?: string) {
 		const spaceview = U.Space.getSpaceview();
 
 		Renderer.send('updateTab', S.Common.tabId, {
@@ -876,6 +877,7 @@ class UtilData {
 			spaceIcon: U.Graph.imageSrc(spaceview) || U.Object.defaultIcon(spaceview?.layout, spaceview?.type, 100),
 			spaceId: spaceview.targetSpaceId || '',
 			layout: I.ObjectLayout.Page,
+			action,
 		});
 	};
 

src/ts/lib/util/object.ts

@@ -117,6 +117,7 @@ class UtilObject {
 			uxType: spaceview?.uxType,
 			objectData: { id: object.id, type: object.type, layout: object.layout },
 			route,
+			action: '',
 		};
 	};
 
@@ -973,6 +974,10 @@ class UtilObject {
 				case I.ObjectLayout.Date: id = 'date'; break;
 				case I.ObjectLayout.Type: id = 'type'; break;
 				case I.ObjectLayout.Bookmark: id = 'page'; break;
+				case I.ObjectLayout.Settings: id = 'settings'; break;
+				case I.ObjectLayout.Graph: id = 'graph'; break;
+				case I.ObjectLayout.Navigation: id = 'graph'; break;
+				case I.ObjectLayout.Archive: id = 'archive'; break;
 			};
 			src = U.Common.updateSvg(require(`img/icon/default/${id}.svg`), { id, size, fill: J.Theme[theme].iconDefault });
 		};