Feature: Redirect to the last visited path when navigating between sections

src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-header-sections.element.ts

@@ -16,6 +16,8 @@ export class UmbBackofficeHeaderSectionsElement extends UmbLitElement {
 
 	private _backofficeContext?: UmbBackofficeContext;
 
+	#sectionPathMap = new Map<string, string>();
+
 	constructor() {
 		super();
 
@@ -52,6 +54,42 @@ export class UmbBackofficeHeaderSectionsElement extends UmbLitElement {
 		);
 	}
 
+	#getSectionPath(manifest: ManifestSection | undefined) {
+		return `section/${manifest?.meta.pathname}`;
+	}
+
+	#onSectionClick(event: PointerEvent, manifest: ManifestSection | undefined) {
+		// Let the browser handle the click if the Ctrl or Meta key is pressed
+		if (event.ctrlKey || event.metaKey) {
+			return;
+		}
+
+		event.stopPropagation();
+		event.preventDefault();
+
+		// Store the current path for the section so we can redirect to it next time the section is visited
+		if (this._currentSectionAlias) {
+			const currentPath = window.location.pathname;
+			this.#sectionPathMap.set(this._currentSectionAlias, currentPath);
+		}
+
+		if (!manifest) {
+			throw new Error('Section manifest is missing');
+		}
+
+		const clickedSectionAlias = manifest.alias;
+
+		// Check if we have a stored path for the clicked section
+		if (this.#sectionPathMap.has(clickedSectionAlias)) {
+			const storedPath = this.#sectionPathMap.get(clickedSectionAlias);
+			history.pushState(null, '', storedPath);
+		} else {
+			// Nothing stored, so we navigate to the regular section path
+			const sectionPath = this.#getSectionPath(manifest);
+			history.pushState(null, '', sectionPath);
+		}
+	}
+
 	override render() {
 		return html`
 			<uui-tab-group id="tabs" data-mark="section-links">
@@ -61,7 +99,8 @@ export class UmbBackofficeHeaderSectionsElement extends UmbLitElement {
 					(section) => html`
 						<uui-tab
 							?active="${this._currentSectionAlias === section.alias}"
-							href="${`section/${section.manifest?.meta.pathname}`}"
+							@click=${(event: PointerEvent) => this.#onSectionClick(event, section.manifest)}
+							href="${this.#getSectionPath(section.manifest)}"
 							label="${ifDefined(
 								section.manifest?.meta.label
 									? this.localize.string(section.manifest?.meta.label)