render label based on current app language

src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/tree-item/document-tree-item.element.ts

@@ -1,10 +1,44 @@
-import type { UmbDocumentTreeItemModel } from '../types.js';
-import { css, html, nothing, customElement } from '@umbraco-cms/backoffice/external/lit';
+import type { UmbDocumentTreeItemModel, UmbDocumentTreeItemVariantModel } from '../types.js';
+import { css, html, nothing, customElement, state } from '@umbraco-cms/backoffice/external/lit';
+import type { UmbAppLanguageContext } from '@umbraco-cms/backoffice/language';
+import { UMB_APP_LANGUAGE_CONTEXT } from '@umbraco-cms/backoffice/language';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbTreeItemElementBase } from '@umbraco-cms/backoffice/tree';
 
 @customElement('umb-document-tree-item')
 export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocumentTreeItemModel> {
+	#appLanguageContext?: UmbAppLanguageContext;
+
+	@state()
+	_currentCulture?: string;
+
+	@state()
+	_defaultCulture?: string;
+
+	@state()
+	_variant?: UmbDocumentTreeItemVariantModel;
+
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_APP_LANGUAGE_CONTEXT, (instance) => {
+			this.#appLanguageContext = instance;
+			this.#observeAppCulture();
+		});
+	}
+
+	#observeAppCulture() {
+		this.observe(this.#appLanguageContext!.appLanguageCulture, (value) => {
+			this._currentCulture = value;
+			this._variant = this.item?.variants.find((x) => x.culture === value);
+		});
+	}
+
+	#getLabel() {
+		// TODO: get the name from the default language if the current culture is not available
+		return this._variant?.name ?? 'Untitled';
+	}
+
 	// TODO: implement correct status symbol
 	renderIconContainer() {
 		return html`
@@ -13,16 +47,15 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocume
 					? html`
 							<umb-icon id="icon" slot="icon" name="${this.item.documentType.icon}"></umb-icon>
 							<span id="status-symbol"></span>
-					  `
+						`
 					: nothing}
 			</span>
 		`;
 	}
 
 	// TODO: lower opacity if item is not published
-	// TODO: get correct variant name
 	renderLabel() {
-		return html`<span id="label" slot="label">${this.item?.variants[0].name}</span> `;
+		return html`<span id="label" slot="label">${this.#getLabel()}</span> `;
 	}
 
 	static styles = [