Document/Media Recycle Bin: Add 'Trashed' state to info workspace view (#20581)

* Add 'Trashed' state to document workspace view

Introduces a new 'Trashed' label and tag for documents in the workspace view. Updates localization to include the 'Trashed' term for improved clarity when displaying trashed documents.

* Show trashed state in media workspace info view

---------

Co-authored-by: Jacob Overgaard <[email protected]>

Author: madsrasmussen

src/Umbraco.Web.UI.Client/src/assets/lang/en.ts

@@ -294,6 +294,7 @@ export default {
 		titleOptional: 'Title (optional)',
 		altTextOptional: 'Alternative text (optional)',
 		captionTextOptional: 'Caption (optional)',
+		trashed: 'Trashed',
 		type: 'Type',
 		unpublish: 'Unpublish',
 		unpublished: 'Unpublished',

src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts

@@ -179,6 +179,12 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
 					</uui-tag>
 				`;
 			}
+			case DocumentVariantStateModel.TRASHED:
+				return html`
+					<uui-tag color="danger" look="primary" label=${this.localize.term('content_trashed')}>
+						${this.localize.term('content_trashed')}
+					</uui-tag>
+				`;
 			default:
 				return html`
 					<uui-tag look="primary" label=${this.localize.term('content_notCreated')}>

src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/info/media-workspace-view-info.element.ts

@@ -129,7 +129,7 @@ export class UmbMediaWorkspaceViewInfoElement extends UmbLitElement {
 
 	#renderGeneralSection() {
 		return html`
-			${this.#renderCreateDate()} ${this.#renderUpdateDate()}
+			${this.#renderTrashState()} ${this.#renderCreateDate()} ${this.#renderUpdateDate()}
 			<div class="general-item">
 				<strong><umb-localize key="content_mediaType">Media Type</umb-localize></strong>
 				<uui-ref-node-document-type
@@ -149,6 +149,20 @@ export class UmbMediaWorkspaceViewInfoElement extends UmbLitElement {
 		`;
 	}
 
+	#renderTrashState() {
+		if (!this._isTrashed) return nothing;
+
+		return html`
+			<div class="general-item">
+				<span>
+					<uui-tag color="danger" look="primary" label=${this.localize.term('content_trashed')}>
+						${this.localize.term('content_trashed')}
+					</uui-tag>
+				</span>
+			</div>
+		`;
+	}
+
 	#renderCreateDate() {
 		if (!this._createDate) return nothing;
 		return html`