1 files changed, 48 insertions, 23 deletions

diff --git a/apps/files/src/components/FileEntry.vue b/apps/files/src/components/FileEntry.vue
index 5ec98452b1f..d66c3fa0ed7 100644
--- a/apps/files/src/components/FileEntry.vue
+++ b/apps/files/src/components/FileEntry.vue
@@ -49,6 +49,15 @@
 			:opened.sync="openedMenu"
 			:source="source" />
 
+		<!-- Mime -->
+		<td v-if="isMimeAvailable"
+			:title="mime"
+			class="files-list__row-mime"
+			data-cy-files-list-row-mime
+			@click="openDetailsIfAvailable">
+			<span>{{ mime }}</span>
+		</td>
+
 		<!-- Size -->
 		<td v-if="!compact && isSizeAvailable"
 			:style="sizeOpacity"
@@ -64,7 +73,9 @@
 			class="files-list__row-mtime"
 			data-cy-files-list-row-mtime
 			@click="openDetailsIfAvailable">
-			<NcDateTime v-if="mtime" :timestamp="mtime" :ignore-seconds="true" />
+			<NcDateTime v-if="mtime"
+				ignore-seconds
+				:timestamp="mtime" />
 			<span v-else>{{ t('files', 'Unknown date') }}</span>
 		</td>
 
@@ -83,10 +94,10 @@
 </template>
 
 <script lang="ts">
-import { formatFileSize } from '@nextcloud/files'
+import { FileType, formatFileSize } from '@nextcloud/files'
 import { useHotKey } from '@nextcloud/vue/composables/useHotKey'
 import { defineComponent } from 'vue'
-import moment from '@nextcloud/moment'
+import { t } from '@nextcloud/l10n'
 import NcDateTime from '@nextcloud/vue/components/NcDateTime'
 
 import { useNavigation } from '../composables/useNavigation.ts'
@@ -122,6 +133,10 @@ export default defineComponent({
 	],
 
 	props: {
+		isMimeAvailable: {
+			type: Boolean,
+			default: false,
+		},
 		isSizeAvailable: {
 			type: Boolean,
 			default: false,
@@ -185,6 +200,36 @@ export default defineComponent({
 			return this.currentView.columns || []
 		},
 
+		mime() {
+			if (this.source.type === FileType.Folder) {
+				return this.t('files', 'Folder')
+			}
+
+			if (!this.source.mime || this.source.mime === 'application/octet-stream') {
+				return t('files', 'Unknown file type')
+			}
+
+			if (window.OC?.MimeTypeList?.names?.[this.source.mime]) {
+				return window.OC.MimeTypeList.names[this.source.mime]
+			}
+
+			const baseType = this.source.mime.split('/')[0]
+			const ext = this.source?.extension?.toUpperCase().replace(/^\./, '') || ''
+			if (baseType === 'image') {
+				return t('files', '{ext} image', { ext })
+			}
+			if (baseType === 'video') {
+				return t('files', '{ext} video', { ext })
+			}
+			if (baseType === 'audio') {
+				return t('files', '{ext} audio', { ext })
+			}
+			if (baseType === 'text') {
+				return t('files', '{ext} text', { ext })
+			}
+
+			return this.source.mime
+		},
 		size() {
 			const size = this.source.size
 			if (size === undefined || isNaN(size) || size < 0) {
@@ -206,26 +251,6 @@ export default defineComponent({
 				color: `color-mix(in srgb, var(--color-main-text) ${ratio}%, var(--color-text-maxcontrast))`,
 			}
 		},
-
-		mtime() {
-			// If the mtime is not a valid date, return it as is
-			if (this.source.mtime && !isNaN(this.source.mtime.getDate())) {
-				return this.source.mtime
-			}
-
-			if (this.source.crtime && !isNaN(this.source.crtime.getDate())) {
-				return this.source.crtime
-			}
-
-			return null
-		},
-
-		mtimeTitle() {
-			if (this.source.mtime) {
-				return moment(this.source.mtime).format('LLL')
-			}
-			return ''
-		},
 	},
 
 	created() {