From 980f4c79813f99f503f748b24066fa4eb73e5174 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Mon, 1 Jul 2024 15:10:43 +0200
Subject: [PATCH 1/3] render collection icon for document tree items

---
 .../tree-item/document-tree-item.element.ts   | 52 +++++++++----------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/src/packages/documents/documents/tree/tree-item/document-tree-item.element.ts b/src/packages/documents/documents/tree/tree-item/document-tree-item.element.ts
index f5fe1ad165..34ac931c72 100644
--- a/src/packages/documents/documents/tree/tree-item/document-tree-item.element.ts
+++ b/src/packages/documents/documents/tree/tree-item/document-tree-item.element.ts
@@ -1,9 +1,9 @@
-import type { UmbDocumentTreeItemModel, UmbDocumentTreeItemVariantModel } from '../types.js';
 import { css, html, nothing, customElement, state, classMap } 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';
+import type { UmbDocumentTreeItemModel, UmbDocumentTreeItemVariantModel } from '../types.js';
 
 @customElement('umb-document-tree-item')
 export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocumentTreeItemModel> {
@@ -74,11 +74,7 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocume
 				${this.item?.documentType.icon
 					? html`
 							<umb-icon id="icon" slot="icon" name="${this.item.documentType.icon}"></umb-icon>
-							${this.item.isProtected ? this.#renderIsProtectedIcon() : nothing}
-							<!--
-							// TODO: implement correct status symbol
-							<span id="status-symbol"></span>
-							-->
+							${this.#renderStateIcon()}
 						`
 					: nothing}
 			</span>
@@ -91,8 +87,24 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocume
 		> `;
 	}
 
+	#renderStateIcon() {
+		if (this.item?.isProtected) {
+			return this.#renderIsProtectedIcon();
+		}
+
+		if (this.item?.documentType.collection) {
+			return this.#renderIsCollectionIcon();
+		}
+
+		return nothing;
+	}
+
+	#renderIsCollectionIcon() {
+		return html`<umb-icon id="state-icon" slot="icon" name="icon-grid" title="Collection"></umb-icon>`;
+	}
+
 	#renderIsProtectedIcon() {
-		return html`<umb-icon id="icon-lock" slot="icon" name="icon-lock" title="Protected"></umb-icon>`;
+		return html`<umb-icon id="state-icon" slot="icon" name="icon-lock" title="Protected"></umb-icon>`;
 	}
 
 	static override styles = [
@@ -106,19 +118,7 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocume
 				vertical-align: middle;
 			}
 
-			#status-symbol {
-				width: 5px;
-				height: 5px;
-				border: 1px solid white;
-				background-color: blue;
-				display: block;
-				position: absolute;
-				bottom: 0;
-				right: 0;
-				border-radius: 100%;
-			}
-
-			#icon-lock {
+			#state-icon {
 				position: absolute;
 				bottom: -5px;
 				right: -5px;
@@ -136,30 +136,30 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocume
 				text-overflow: ellipsis;
 			}
 
-			:hover #icon-lock {
+			:hover #state-icon {
 				background: var(--uui-color-surface-emphasis);
 			}
 
 			/** Active */
-			[active] #icon-lock {
+			[active] #state-icon {
 				background: var(--uui-color-current);
 			}
 
-			[active]:hover #icon-lock {
+			[active]:hover #state-icon {
 				background: var(--uui-color-current-emphasis);
 			}
 
 			/** Selected */
-			[selected] #icon-lock {
+			[selected] #state-icon {
 				background-color: var(--uui-color-selected);
 			}
 
-			[selected]:hover #icon-lock {
+			[selected]:hover #state-icon {
 				background-color: var(--uui-color-selected-emphasis);
 			}
 
 			/** Disabled */
-			[disabled] #icon-lock {
+			[disabled] #state-icon {
 				background-color: var(--uui-color-disabled);
 			}
 

From e58ed4eebfed690a15a9863bd25ac55ff75098da Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Mon, 1 Jul 2024 15:15:37 +0200
Subject: [PATCH 2/3] render collection icon for media tree item

---
 .../tree/tree-item/media-tree-item.element.ts | 56 ++++++++++++++++++-
 1 file changed, 55 insertions(+), 1 deletion(-)

diff --git a/src/packages/media/media/tree/tree-item/media-tree-item.element.ts b/src/packages/media/media/tree/tree-item/media-tree-item.element.ts
index 4c1e2e6cea..2245ca14ce 100644
--- a/src/packages/media/media/tree/tree-item/media-tree-item.element.ts
+++ b/src/packages/media/media/tree/tree-item/media-tree-item.element.ts
@@ -10,7 +10,10 @@ export class UmbMediaTreeItemElement extends UmbTreeItemElementBase<UmbMediaTree
 		return html`
 			<span id="icon-container" slot="icon">
 				${this.item?.mediaType.icon
-					? html` <umb-icon id="icon" slot="icon" name="${this.item.mediaType.icon}"></umb-icon> `
+					? html`
+							<umb-icon id="icon" slot="icon" name="${this.item.mediaType.icon}"></umb-icon>
+							${this.#renderStateIcon()}
+						`
 					: nothing}
 			</span>
 		`;
@@ -20,6 +23,18 @@ export class UmbMediaTreeItemElement extends UmbTreeItemElementBase<UmbMediaTree
 		return html`<span id="label" slot="label">${this._item?.variants[0].name}</span> `;
 	}
 
+	#renderStateIcon() {
+		if (this.item?.mediaType.collection) {
+			return this.#renderIsCollectionIcon();
+		}
+
+		return nothing;
+	}
+
+	#renderIsCollectionIcon() {
+		return html`<umb-icon id="state-icon" slot="icon" name="icon-grid" title="Collection"></umb-icon>`;
+	}
+
 	static override styles = [
 		UmbTextStyles,
 		css`
@@ -36,6 +51,45 @@ export class UmbMediaTreeItemElement extends UmbTreeItemElementBase<UmbMediaTree
 				overflow: hidden;
 				text-overflow: ellipsis;
 			}
+
+			#state-icon {
+				position: absolute;
+				bottom: -5px;
+				right: -5px;
+				font-size: 10px;
+				background: var(--uui-color-surface);
+				width: 14px;
+				height: 14px;
+				border-radius: 100%;
+				line-height: 14px;
+			}
+
+			:hover #state-icon {
+				background: var(--uui-color-surface-emphasis);
+			}
+
+			/** Active */
+			[active] #state-icon {
+				background: var(--uui-color-current);
+			}
+
+			[active]:hover #state-icon {
+				background: var(--uui-color-current-emphasis);
+			}
+
+			/** Selected */
+			[selected] #state-icon {
+				background-color: var(--uui-color-selected);
+			}
+
+			[selected]:hover #state-icon {
+				background-color: var(--uui-color-selected-emphasis);
+			}
+
+			/** Disabled */
+			[disabled] #state-icon {
+				background-color: var(--uui-color-disabled);
+			}
 		`,
 	];
 }

From 338907911c93ca1427d4961de8273bc21586270f Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Mon, 1 Jul 2024 15:15:44 +0200
Subject: [PATCH 3/3] clean up

---
 .../tree/tree-item/document-tree-item.element.ts     | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/packages/documents/documents/tree/tree-item/document-tree-item.element.ts b/src/packages/documents/documents/tree/tree-item/document-tree-item.element.ts
index 34ac931c72..3fae384c2f 100644
--- a/src/packages/documents/documents/tree/tree-item/document-tree-item.element.ts
+++ b/src/packages/documents/documents/tree/tree-item/document-tree-item.element.ts
@@ -118,6 +118,12 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocume
 				vertical-align: middle;
 			}
 
+			#label {
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+
 			#state-icon {
 				position: absolute;
 				bottom: -5px;
@@ -130,12 +136,6 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocume
 				line-height: 14px;
 			}
 
-			#label {
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-			}
-
 			:hover #state-icon {
 				background: var(--uui-color-surface-emphasis);
 			}