fix(files): Do not split filename into `base` and `extension` for folders

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

4 files changed, 34 insertions, 16 deletions

diff --git a/apps/files/src/components/FileEntry.vue b/apps/files/src/components/FileEntry.vue
index fdc800b3464..48b6dcfd8a0 100644
--- a/apps/files/src/components/FileEntry.vue
+++ b/apps/files/src/components/FileEntry.vue
@@ -34,7 +34,7 @@
 				@click.native="execDefaultAction" />
 
 			<FileEntryName ref="name"
-				:display-name="displayName"
+				:basename="basename"
 				:extension="extension"
 				:files-list-width="filesListWidth"
 				:nodes="nodes"
diff --git a/apps/files/src/components/FileEntry/FileEntryName.vue b/apps/files/src/components/FileEntry/FileEntryName.vue
index 4fb907dd005..875c0892a72 100644
--- a/apps/files/src/components/FileEntry/FileEntryName.vue
+++ b/apps/files/src/components/FileEntry/FileEntryName.vue
@@ -29,8 +29,8 @@
 		v-bind="linkTo.params">
 		<!-- File name -->
 		<span class="files-list__row-name-text">
-			<!-- Keep the displayName stuck to the extension to avoid whitespace rendering issues-->
-			<span class="files-list__row-name-" v-text="displayName" />
+			<!-- Keep the filename stuck to the extension to avoid whitespace rendering issues-->
+			<span class="files-list__row-name-" v-text="basename" />
 			<span class="files-list__row-name-ext" v-text="extension" />
 		</span>
 	</component>
@@ -64,10 +64,16 @@ export default defineComponent({
 	},
 
 	props: {
-		displayName: {
+		/**
+		 * The filename without extension
+		 */
+		basename: {
 			type: String,
 			required: true,
 		},
+		/**
+		 * The extension of the filename
+		 */
 		extension: {
 			type: String,
 			required: true,
@@ -155,7 +161,7 @@ export default defineComponent({
 					params: {
 						download: this.source.basename,
 						href: this.source.source,
-						title: t('files', 'Download file {name}', { name: this.displayName }),
+						title: t('files', 'Download file {name}', { name: `${this.basename}${this.extension}` }),
 						tabindex: '0',
 					},
 				}
diff --git a/apps/files/src/components/FileEntryGrid.vue b/apps/files/src/components/FileEntryGrid.vue
index ed8175fcda7..1f0992bc851 100644
--- a/apps/files/src/components/FileEntryGrid.vue
+++ b/apps/files/src/components/FileEntryGrid.vue
@@ -36,7 +36,7 @@
 				@click.native="execDefaultAction" />
 
 			<FileEntryName ref="name"
-				:display-name="displayName"
+				:basename="basename"
 				:extension="extension"
 				:files-list-width="filesListWidth"
 				:grid-mode="true"
diff --git a/apps/files/src/components/FileEntryMixin.ts b/apps/files/src/components/FileEntryMixin.ts
index 6c0b278c61b..da9b93107c7 100644
--- a/apps/files/src/components/FileEntryMixin.ts
+++ b/apps/files/src/components/FileEntryMixin.ts
@@ -74,19 +74,31 @@ export default defineComponent({
 			return this.source.status === NodeStatus.LOADING
 		},
 
-		extension() {
-			if (this.source.attributes?.displayname) {
-				return extname(this.source.attributes.displayname)
+		/**
+		 * The display name of the current node
+		 * Either the nodes filename or a custom display name (e.g. for shares)
+		 */
+		displayName() {
+			return this.source.displayname
+		},
+		/**
+		 * The display name without extension
+		 */
+		basename() {
+			if (this.extension === '') {
+				return this.displayName
 			}
-			return this.source.extension || ''
+			return this.displayName.slice(0, 0 - this.extension.length)
 		},
-		displayName() {
-			const ext = this.extension
-			const name = String(this.source.attributes.displayname
-				|| this.source.basename)
+		/**
+		 * The extension of the file
+		 */
+		extension() {
+			if (this.source.type === FileType.Folder) {
+				return ''
+			}
 
-			// Strip extension from name if defined
-			return !ext ? name : name.slice(0, 0 - ext.length)
+			return extname(this.displayName)
 		},
 
 		draggingFiles() {