commit details: show file name before path

ref #8

web/src/views/CommitDetails.coffee

@@ -33,7 +33,7 @@ export default defineComponent
 			props.commit.refs.find (ref) =>
 				ref.type == "stash"
 
-		``###* @type {Ref<{path:string,insertions:number,deletions:number}[]>} ###
+		``###* @type {Ref<{filename:string,dir:string,insertions:number,deletions:number}[]>} ###
 		changed_files = ref []
 		body = ref ''
 		watchEffect =>
@@ -46,7 +46,9 @@ export default defineComponent
 			changed_files.value = (try await git get_files_command)
 				?.split('\n').map((l) =>
 					split = l.split('\t')
-					path: split[2]
+					path = split[2].split('/')
+					filename: path.at(-1) or '?'
+					dir: path.slice(0, -1).join('/')
 					insertions: Number split[1]
 					deletions: Number split[0]) or []
 

web/src/views/CommitDetails.vue

@@ -38,7 +38,9 @@ div
 			button.change.row.center.gap-5 @click="show_diff(file.path)"
 				.count {{ (file.insertions + file.deletions) || 0 }}
 				progress.diff :value="(file.insertions / (file.insertions + file.deletions)) || 0" title="Ratio insertions / deletions"
-				.path.flex-1 {{ file.path }}
+				.path.flex-1.row.gap-10.align-center
+					.filename {{ file.filename }}
+					.dir {{ file.dir }}
 </template>
 
 <script lang="coffee" src="./CommitDetails.coffee"></script>
@@ -54,14 +56,15 @@ h2.summary
 	overflow auto
 	.change
 		font-family monospace
+		font-size 90%
 		> .count
 			text-align right
 			width 2rem
 		> .path
 			white-space pre
-			// white-space pre-line
-			// text-indent -1rem
-			// padding-left 1rem
+			> .dir
+				color #aaa
+				font-size 90%
 .body
 	white-space pre-wrap
 	word-break break-word