added tab index view cue

src/components/Group.tsx

@@ -99,12 +99,18 @@ export const Group = ({ type, children, group }: GroupProps) => {
 			onBlur={handleTitleChange}
 		/>
 	);
+
+	const lastActiveLeaf = useViewState((state) => state.latestActiveLeaf);
+	const isActiveGroup = group?.id === lastActiveLeaf?.parent.id;
+
 	const props = {
 		icon: "right-triangle",
 		isCollapsed: isCollapsed && !isSingleGroup, // Single group should not be collapsed
 		isSidebar,
 		isSingleGroup,
+		isActiveGroup,
 	};
+
 	const toolbar = (
 		<Fragment>
 			{!isSidebar && !isEditing && (

src/components/NavigationContainer.tsx

@@ -27,6 +27,7 @@ import { iterateRootOrFloatingLeaves } from "src/services/GetTabs";
 export const NavigationContainer = () => {
 	const plugin = usePlugin();
 	const app = plugin.app;
+	const ref = useRef<HTMLDivElement>(null);
 	const { refresh, sort } = useTabCache();
 	const {
 		setLatestActiveLeaf,
@@ -122,6 +123,18 @@ export const NavigationContainer = () => {
 				}
 			})
 		);
+		plugin.registerDomEvent(window, "keydown", (event) => {
+			if (event.ctrlKey || event.metaKey) {
+				if (ref.current) {
+					ref.current.toggleClass("tab-index-view-cue", true);
+				}
+			}
+		});
+		plugin.registerDomEvent(window, "keyup", () => {
+			if (ref.current) {
+				ref.current.toggleClass("tab-index-view-cue", false);
+			}
+		});
 		plugin.addCommand({
 			id: "toggle-zen-mode",
 			name: "Toggle zen mode",
@@ -171,8 +184,6 @@ export const NavigationContainer = () => {
 		if (event.button === 1) event.preventDefault();
 	};
 
-	const ref = useRef<HTMLDivElement>(null);
-
 	return (
 		<div
 			className="vertical-tabs"

src/components/NavigationContent.tsx

@@ -53,7 +53,7 @@ export const NavigationContent = () => {
 		const isOverTab = (over.data.current as any).isTab;
 
 		if (isActiveTab) {
-			let movedTab : WorkspaceLeaf | null = null;
+			let movedTab: WorkspaceLeaf | null = null;
 			if (isOverTab) {
 				movedTab = moveTab(app, activeID, overID);
 			} else {
@@ -122,9 +122,20 @@ export const NavigationContent = () => {
 								group={entryOf(groupID).group}
 							>
 								<SortableContext items={getLeaveIDs(groupID)}>
-									{entryOf(groupID).leaves.map((leaf) => (
-										<Tab key={leaf.id} leaf={leaf} />
-									))}
+									{entryOf(groupID).leaves.map(
+										(leaf, index, array) => {
+											const isLast =
+												index === array.length - 1;
+											return (
+												<Tab
+													key={leaf.id}
+													leaf={leaf}
+													index={index}
+													isLast={isLast}
+												/>
+											);
+										}
+									)}
 									<TabSlot groupID={groupID} />
 								</SortableContext>
 							</Group>

src/components/NavigationTreeItem.tsx

@@ -7,6 +7,7 @@ import { Identifier } from "src/models/VTWorkspace";
 
 interface NavigationTreeItemProps {
 	id: Identifier | null;
+	index?: number;
 	ref?: React.RefObject<HTMLDivElement | null>;
 	title: string | React.ReactNode;
 	icon: string;
@@ -16,11 +17,13 @@ interface NavigationTreeItemProps {
 	isGroupSlot?: boolean;
 	isSingleGroup?: boolean;
 	isActive?: boolean;
+	isActiveGroup?: boolean;
 	isRenaming?: boolean;
 	isPinned?: boolean;
 	isCollapsed?: boolean;
 	isSidebar?: boolean;
 	isHighlighted?: boolean;
+	isLast?: boolean;
 	children?: React.ReactNode;
 	toolbar?: React.ReactNode;
 	onClick?: (event?: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
@@ -38,6 +41,13 @@ interface NavigationTreeItemProps {
 	dataId?: string;
 }
 
+function mapIndex(index?: number, isLast?: boolean): number | undefined {
+	if (index === undefined) return undefined;
+	const userIndex = index + 1;
+	if (0 <= userIndex && userIndex <= 8) return userIndex;
+	if (isLast) return 9;
+}
+
 export const NavigationTreeItem = (props: NavigationTreeItemProps) => {
 	const { attributes, listeners, setNodeRef, isDragging, isOver } =
 		useSortable({
@@ -63,6 +73,7 @@ export const NavigationTreeItem = (props: NavigationTreeItemProps) => {
 		"is-tab-slot": props.isTabSlot,
 		"is-group-slot": props.isGroupSlot,
 		"is-single-group": props.isSingleGroup,
+		"is-active-group": props.isActiveGroup,
 		"is-slot": props.isTabSlot || props.isGroupSlot,
 		"is-highlighted": props.isHighlighted,
 	};
@@ -144,6 +155,7 @@ export const NavigationTreeItem = (props: NavigationTreeItemProps) => {
 					onAuxClick={props.onAuxClick}
 					onDoubleClick={props.onDoubleClick}
 					onContextMenu={props.onContextMenu}
+					data-index={mapIndex(props.index, props.isLast)}
 					ref={props.id ? setNodeRef : null}
 					{...attributes}
 					{...listeners}

src/components/Tab.tsx

@@ -27,9 +27,11 @@ import { HistoryBrowserModal } from "src/HistoryBrowserModal";
 
 interface TabProps {
 	leaf: WorkspaceLeaf;
+	index: number;
+	isLast: boolean;
 }
 
-export const Tab = ({ leaf }: TabProps) => {
+export const Tab = ({ leaf, index, isLast }: TabProps) => {
 	const plugin = usePlugin();
 	const app = plugin.app;
 	const workspace = app.workspace;
@@ -442,6 +444,8 @@ export const Tab = ({ leaf }: TabProps) => {
 		<NavigationTreeItem
 			ref={ref}
 			id={leaf.id}
+			index={index}
+			isLast={isLast}
 			title={volatileTitle ?? DeduplicatedTitle(app, leaf)}
 			isTab={true}
 			isEphemeralTab={isEphemeral && !isPinned}

src/styles.scss

@@ -1,6 +1,7 @@
 @use "styles/ShowActiveTabs.scss";
 @use "styles/ZenMode.scss";
 @use "styles/Tab.scss";
+@use "styles/TabIndexViewCue.scss";
 @use "styles/Group.scss";
 @use "styles/TabSlot.scss";
 @use "styles/GroupSlot.scss";

src/styles/TabIndexViewCue.scss

@@ -0,0 +1,21 @@
+.vertical-tabs.tab-index-view-cue {
+	.obsidian-vertical-tabs-container {
+		.tree-item.is-group.is-active-group {
+			.tree-item.is-tab:not(.is-tab-slot) {
+				.tree-item-self[data-index]::before {
+					content: attr(data-index);
+					position: absolute;
+					width: var(--size-4-4);
+					height: var(--size-4-4);
+					line-height: var(--size-4-4);
+					background: var(--background-primary);
+					border-radius: var(--radius-s);
+					border: var(--border-width) solid;
+					text-align: center;
+					left: var(--size-2-1);
+					z-index: var(--layer-tooltip);
+				}
+			}
+		}
+	}
+}