set active item

src/Umbraco.Web.UI.Client/src/packages/core/collection/components/collection-view-bundle.element.ts

@@ -110,11 +110,6 @@ export class UmbCollectionViewBundleElement extends UmbLitElement {
 
 	#onClick(view: UmbCollectionViewLayout) {
 		this.#collectionContext?.setLastSelectedView(this._entityUnique, view.alias);
-
-		// TODO: This ignorer is just neede for JSON SCHEMA TO WORK, As its not updated with latest TS jet.
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-		// @ts-ignore
-		this._popover?.hidePopover();
 	}
 
 	render() {
@@ -123,7 +118,7 @@ export class UmbCollectionViewBundleElement extends UmbLitElement {
 
 		return html`
 			<uui-button compact popovertarget="collection-view-bundle-popover" label="status">
-				${this.#renderItemDisplay(this._currentView)}
+				<umb-icon name=${this._currentView.icon}></umb-icon>
 			</uui-button>
 			<uui-popover-container id="collection-view-bundle-popover" placement="bottom-end">
 				<umb-popover-layout>
@@ -141,31 +136,27 @@ export class UmbCollectionViewBundleElement extends UmbLitElement {
 
 	#renderItem(view: UmbCollectionViewLayout) {
 		return html`
-			<uui-button compact href="${this._collectionRootPathName}/${view.pathName}" @click=${() => this.#onClick(view)}>
+			<uui-menu-item
-				${this.#renderItemDisplay(view)}
+				label=${view.label}
-				<span class="label">${view.label}</span>
+				href="${this._collectionRootPathName}/${view.pathName}"
-			</uui-button>
+				@click-label=${() => this.#onClick(view)}
+				?active=${view.alias === this._currentView?.alias}>
+				<umb-icon slot="icon" name=${view.icon}></umb-icon>
+			</uui-menu-item>
 		`;
 	}
 
-	#renderItemDisplay(view: UmbCollectionViewLayout) {
-		return html`<umb-icon name=${view.icon}></umb-icon>`;
-	}
-
 	static styles = [
 		UmbTextStyles,
 		css`
 			:host {
 				--uui-button-content-align: left;
 			}
-			.label {
+
-				margin-left: var(--uui-size-space-1);
-			}
 			.filter-dropdown {
-				display: flex;
+				padding: var(--uui-size-space-3);
-				gap: var(--uui-size-space-1);
-				flex-direction: column;
 			}
+
 			umb-icon {
 				display: inline-block;
 			}