From 6c8483574af57f56c4dd016480293360b7cd708b Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Wed, 23 Aug 2023 20:02:55 +0200
Subject: [PATCH] feat(FilePicker): Always show file extension as a trailing
 text part

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 lib/components/FilePicker/FileListRow.vue | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/lib/components/FilePicker/FileListRow.vue b/lib/components/FilePicker/FileListRow.vue
index b0c1c8a01..e55ebca2b 100644
--- a/lib/components/FilePicker/FileListRow.vue
+++ b/lib/components/FilePicker/FileListRow.vue
@@ -12,6 +12,7 @@
 			<div class="file-picker__name-container">
 				<div class="file-picker__file-icon" :style="{ backgroundImage }" />
 				<div class="file-picker__file-name" :title="displayName" v-text="displayName" />
+				<div class="file-picker__file-extension" v-text="fileExtension" />
 			</div>
 		</td>
 		<td class="row-size">
@@ -50,9 +51,14 @@ const emit = defineEmits<{
 }>()
 
 /**
- * The displayname of the current node
+ * The displayname of the current node (excluding file extension)
  */
-const displayName = computed(() => props.node.attributes?.displayname || props.node.basename)
+const displayName = computed(() => props.node.attributes?.displayName || props.node.basename.slice(0, props.node.extension ? -props.node.extension.length : undefined))
+
+/**
+ * The file extension of the file
+ */
+const fileExtension = computed(() => props.node.extension)
 
 /**
  * If this node can be picked, basically just check if picking a directory is allowed
@@ -119,5 +125,10 @@ function handleKeyDown(event: KeyboardEvent) {
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
+
+	&__file-extension {
+		color: var(--color-text-maxcontrast);
+		min-width: fit-content;
+	}
 }
 </style>