Renames to decoration and fixes alignment

src/webviews/apps/plus/patchDetails/components/gl-tree-base.ts

@@ -208,7 +208,7 @@ export class GlTreeBase extends GlElement
 			description: flat === true ? filePath : undefined,
 			context: [file],
 			actions: this.getFileActions(file, options),
-			decorators: [{ type: 'text', label: file.status }],
+			decorations: [{ type: 'text', label: file.status }],
 			...options,
 		};
 	}

src/webviews/apps/shared/components/tree/base.ts

@@ -28,26 +28,26 @@ export interface TreeItemAction {
 	arguments?: any[];
 }
 
-export interface TreeItemDecoratorBase {
+export interface TreeItemDecorationBase {
 	type: string;
 	label: string;
 }
 
-export interface TreeItemDecoratorIcon extends TreeItemDecoratorBase {
+export interface TreeItemDecorationIcon extends TreeItemDecorationBase {
 	type: 'icon';
 	icon: string;
 }
 
-export interface TreeItemDecoratorText extends TreeItemDecoratorBase {
+export interface TreeItemDecorationText extends TreeItemDecorationBase {
 	type: 'text';
 }
 
-export interface TreeItemDecoratorStatus extends TreeItemDecoratorBase {
+export interface TreeItemDecorationStatus extends TreeItemDecorationBase {
 	type: 'indicator' | 'badge';
 	status: string;
 }
 
-export type TreeItemDecorator = TreeItemDecoratorText | TreeItemDecoratorIcon | TreeItemDecoratorStatus;
+export type TreeItemDecoration = TreeItemDecorationText | TreeItemDecorationIcon | TreeItemDecorationStatus;
 
 interface TreeModelBase<Context = any[]> extends TreeItemBase {
 	label: string;
@@ -55,7 +55,7 @@ interface TreeModelBase extends TreeItemBase {
 	description?: string;
 	context?: Context;
 	actions?: TreeItemAction[];
-	decorators?: TreeItemDecorator[];
+	decorations?: TreeItemDecoration[];
 	contextData?: unknown;
 }
 

src/webviews/apps/shared/components/tree/tree-generator.ts

@@ -86,25 +86,25 @@ export class GlTreeGenerator extends GlElement {
 		});
 	}
 
-	private renderDecorators(model: TreeModelFlat) {
-		const decorators = model.decorators;
-		if (decorators == null || decorators.length === 0) return nothing;
+	private renderDecorations(model: TreeModelFlat) {
+		const decorations = model.decorations;
+		if (decorations == null || decorations.length === 0) return nothing;
 
-		return decorators.map(decorator => {
-			if (decorator.type === 'icon') {
+		return decorations.map(decoration => {
+			if (decoration.type === 'icon') {
 				return html`<code-icon
-					slot="decorators"
-					title="${decorator.label}"
-					aria-label="${decorator.label}"
-					.icon=${decorator.icon}
+					slot="decorations"
+					title="${decoration.label}"
+					aria-label="${decoration.label}"
+					.icon=${decoration.icon}
 				></code-icon>`;
 			}
 
-			if (decorator.type === 'text') {
-				return html`<span slot="decorators">${decorator.label}</span>`;
+			if (decoration.type === 'text') {
+				return html`<span slot="decorations">${decoration.label}</span>`;
 			}
 
-			// TODO: implement badge and indicator decorators
+			// TODO: implement badge and indicator decorations
 
 			return undefined;
 		});
@@ -132,7 +132,7 @@ export class GlTreeGenerator extends GlElement {
 				model.description != null,
 				() => html`<span slot="description">${model.description}</span>`,
 			)}
-			${this.renderActions(model)} ${this.renderDecorators(model)}
+			${this.renderActions(model)} ${this.renderDecorations(model)}
 		</gl-tree-item>`;
 	}
 

src/webviews/apps/shared/components/tree/tree-item.ts

@@ -164,8 +164,8 @@ export class GlTreeItem extends GlElement {
 		return html`<action-nav class="actions"><slot name="actions"></slot></action-nav>`;
 	}
 
-	private renderDecorators() {
-		return html`<slot name="decorators" class="decorators"></slot>`;
+	private renderDecorations() {
+		return html`<slot name="decorations" class="decorations"></slot>`;
 	}
 
 	override render() {
@@ -184,7 +184,7 @@ export class GlTreeItem extends GlElement {
 					<slot name="description" class="description"></slot>
 				</span>
 			</button>
-			${this.renderActions()}${this.renderDecorators()}
+			${this.renderActions()}${this.renderDecorations()}
 		`;
 	}
 

src/webviews/apps/shared/components/tree/tree.css.ts

@@ -11,7 +11,8 @@ export const treeItemStyles = [
 			--tree-connector-size: var(--gitlens-tree-indent, 1.6rem);
 			box-sizing: border-box;
 			padding-left: var(--gitlens-gutter-width);
-			padding-right: var(--gitlens-scrollbar-gutter-width);
+			/* padding-right: var(--gitlens-scrollbar-gutter-width); */
+			padding-right: 0.5rem;
 			padding-top: 0.1rem;
 			padding-bottom: 0.1rem;
 			line-height: 2.2rem;
@@ -213,5 +214,10 @@ export const treeItemStyles = [
 		.checkbox__input:checked + .checkbox__check {
 			opacity: 1;
 		}
+
+		slot[name='decorations'] {
+			display: inline-block;
+			margin-left: 0.4rem;
+		}
 	`,
 ];