Add file tree mode in commit details

package.json

@@ -11681,6 +11681,7 @@
 	},
 	"dependencies": {
 		"@gitkraken/gitkraken-components": "1.0.0-rc.13",
+		"@microsoft/fast-element": "^1.10.5",
 		"@octokit/core": "4.0.5",
 		"@vscode/codicons": "0.0.32",
 		"@vscode/webview-ui-toolkit": "1.0.1",

src/storage.ts

@@ -182,6 +182,7 @@ export interface WorkspaceStorage {
 		};
 		commitDetails: {
 			autolinksExpanded?: boolean;
+			filesAsTree?: boolean;
 		};
 	};
 

src/webviews/apps/commitDetails/commitDetails.html

@@ -115,6 +115,13 @@ <h2>Best practice</h2>
 				<webview-pane class="commit-details__files" collapsable expanded>
 					<span slot="title">Files changed </span>
 					<span slot="subtitle" data-region="stats"></span>
+
+					<div style="text-align: center;">
+						<div class="switch">
+							<button type="button" class="switch__option" data-switch-value="list"><code-icon icon="list-flat"></code-icon> Path</button>
+							<button type="button" class="switch__option" data-switch-value="list-tree"><code-icon icon="list-tree"></code-icon> Tree</button>
+						</div>
+					</div>
 					<ul class="change-list" data-region="files">
 						<li class="change-list__item commit-details__item-skeleton">
 							<skeleton-loader></skeleton-loader>

src/webviews/apps/commitDetails/commitDetails.scss

@@ -6,16 +6,14 @@
 // generic resets
 html {
 	font-size: 62.5%;
-	box-sizing: border-box;
+	// box-sizing: border-box;
 	font-family: var(--font-family);
 }
 
-* {
-	&,
-	&::before,
-	&::after {
-		box-sizing: inherit;
-	}
+*,
+*:before,
+*:after {
+	box-sizing: border-box;
 }
 
 body {
@@ -100,6 +98,64 @@ ul {
 	max-width: 30rem;
 }
 
+.switch {
+	margin-left: auto;
+	display: inline-flex;
+	flex-direction: row;
+	border-radius: 0.25em;
+	gap: 0.1rem;
+
+	.vscode-dark & {
+		background-color: var(--color-background--lighten-075);
+	}
+	.vscode-light & {
+		background-color: var(--color-background--darken-075);
+	}
+
+	&__option {
+		display: inline-flex;
+		justify-content: center;
+		align-items: flex-end;
+		border-radius: 0.25em;
+		color: inherit;
+		padding: 0.2rem 0.8rem;
+		text-decoration: none;
+		background: none;
+		border: none;
+		cursor: pointer;
+
+		> * {
+			pointer-events: none;
+		}
+
+		&:focus {
+			outline: 1px solid var(--vscode-focusBorder);
+			outline-offset: -1px;
+		}
+
+		&:hover {
+			color: var(--vscode-foreground);
+			text-decoration: none;
+			.vscode-dark & {
+				background-color: var(--color-background--lighten-10);
+			}
+			.vscode-light & {
+				background-color: var(--color-background--darken-10);
+			}
+		}
+
+		&.is-selected {
+			color: var(--vscode-foreground);
+			.vscode-dark & {
+				background-color: var(--color-background--lighten-15);
+			}
+			.vscode-light & {
+				background-color: var(--color-background--darken-15);
+			}
+		}
+	}
+}
+
 @media (min-width: 640px) {
 	.button-container {
 		max-width: 100%;
@@ -279,12 +335,15 @@ ul {
 	}
 
 	&__file {
+		--tree-level: 1;
 		padding: {
-			left: var(--gitlens-gutter-width);
+			left: calc(var(--gitlens-gutter-width) * var(--tree-level));
 			right: var(--gitlens-scrollbar-gutter-width);
 			top: 1px;
 			bottom: 1px;
 		}
+		line-height: 22px;
+		height: 22px;
 	}
 	&__item-skeleton {
 		padding: {
@@ -323,3 +382,5 @@ ul {
 
 @import '../shared/codicons';
 @import '../shared/glicons';
+
+