Adds expand and collapse to tree list

src/webviews/apps/shared/components/list/file-change-list-item.ts

@@ -18,6 +18,8 @@ const template = html`
 		tree="${x => x.tree}"
 		level="${x => x.level}"
 		active="${x => x.active}"
+		expanded="${x => x.expanded}"
+		parentexpanded="${x => x.parentexpanded}"
 		@selected="${(x, c) => x.onComparePrevious(c.event)}"
 	>
 		<img slot="icon" src="${x => x.icon}" title="${x => x.statusName}" alt="${x => x.statusName}" />
@@ -121,6 +123,12 @@ export class FileChangeListItem extends FASTElement {
 	@attr({ mode: 'boolean' })
 	tree = false;
 
+	@attr({ mode: 'boolean' })
+	expanded = true;
+
+	@attr({ mode: 'boolean' })
+	parentexpanded = true;
+
 	@attr({ converter: numberConverter })
 	level = 1;
 
@@ -153,6 +161,10 @@ export class FileChangeListItem extends FASTElement {
 		this.base?.focus(options);
 	}
 
+	get isHidden() {
+		return this.base?.isHidden ?? 'false';
+	}
+
 	get pathIndex() {
 		return this.path.lastIndexOf('/');
 	}

src/webviews/apps/shared/components/list/list-container.ts

@@ -51,7 +51,34 @@ export class ListContainer extends FASTElement {
 	}
 
 	handleSelected(e: CustomEvent<ListItemSelectedDetail>) {
-		this.$emit('selected', e.detail);
+		if (!e.target || !e.detail.branch) return;
+		const target = e.target as ListItem;
+		const level = target.getAttribute('level');
+
+		const getLevel = (el: ListItem) => parseInt(el.getAttribute('level') ?? '0', 10);
+		const getParent = (el: ListItem) => {
+			const level = getLevel(el);
+			let prev = el.previousElementSibling;
+			while (prev) {
+				const prevLevel = getLevel(prev as ListItem);
+				if (prevLevel < level) {
+					return prev as ListItem;
+				}
+				prev = prev.previousElementSibling;
+			}
+
+			return undefined;
+		};
+		let nextElement = target.nextElementSibling as ListItem;
+		while (nextElement) {
+			if (nextElement.getAttribute('level') === level) {
+				break;
+			}
+			const parentElement = getParent(nextElement);
+			nextElement.setAttribute('parentexpanded', parentElement?.expanded === false ? 'false' : 'true');
+			nextElement.setAttribute('expanded', e.detail.expanded ? 'true' : 'false');
+			nextElement = nextElement.nextElementSibling as ListItem;
+		}
 	}
 
 	handleKeydown(e: KeyboardEvent) {

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

@@ -17,7 +17,11 @@ export interface ListItemSelectedDetail {
 }
 
 const template = html<ListItem>`
-	<template role="treeitem" aria-expanded="${x => (x.branch && x.expanded === false ? 'false' : 'true')}">
+	<template
+		role="treeitem"
+		aria-expanded="${x => (x.expanded === true ? 'true' : 'false')}"
+		aria-hidden="${x => x.isHidden}"
+	>
 		<button id="item" class="item" type="button" @click="${(x, c) => x.onItemClick(c.event)}">
 			${repeat(
 				x => x.treeLeaves,
@@ -72,6 +76,10 @@ const styles = css`
 		background-color: var(--vscode-list-activeSelectionBackground);
 	}
 
+	:host([aria-hidden='true']) {
+		display: none;
+	}
+
 	* {
 		box-sizing: border-box;
 	}
@@ -168,6 +176,9 @@ export class ListItem extends FASTElement {
 	@attr({ mode: 'boolean' })
 	expanded = true;
 
+	@attr({ mode: 'boolean' })
+	parentexpanded = true;
+
 	@attr({ converter: numberConverter })
 	level = 1;
 
@@ -182,20 +193,31 @@ export class ListItem extends FASTElement {
 		return Array.from({ length: length }, (_, i) => i + 1);
 	}
 
+	@volatile
+	get isHidden(): 'true' | 'false' {
+		if (this.parentexpanded === false || (!this.branch && !this.expanded)) {
+			return 'true';
+		}
+
+		return 'false';
+	}
+
 	onItemClick(_e: Event) {
 		this.select();
 	}
 
 	select(_showOptions?: TextDocumentShowOptions, quiet = false) {
 		// TODO: this needs to be implemented
-		// this.expanded = !this.expanded;
+		this.expanded = !this.expanded;
 		this.active = true;
 		if (!quiet) {
-			this.$emit('selected', {
-				tree: this.tree,
-				branch: this.branch,
-				expanded: this.expanded,
-				level: this.level,
+			window.requestAnimationFrame(() => {
+				this.$emit('selected', {
+					tree: this.tree,
+					branch: this.branch,
+					expanded: this.expanded,
+					level: this.level,
+				});
 			});
 		}
 	}