feat(files): allow showing file type (mime) column

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

apps/files/lib/Service/UserConfig.php

@@ -54,6 +54,12 @@ class UserConfig {
 			'default' => true,
 			'allowed' => [true, false],
 		],
+		[
+			// Whether to show the mime column or not
+			'key' => 'show_mime_column',
+			'default' => true,
+			'allowed' => [true, false],
+		]
 	];
 	protected ?IUser $user = null;
 

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"
@@ -85,7 +94,7 @@
 </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 NcDateTime from '@nextcloud/vue/components/NcDateTime'
@@ -123,6 +132,10 @@ export default defineComponent({
 	],
 
 	props: {
+		isMimeAvailable: {
+			type: Boolean,
+			default: false,
+		},
 		isSizeAvailable: {
 			type: Boolean,
 			default: false,
@@ -186,6 +199,17 @@ 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')
+			}
+
+			return this.source.mime
+		},
 		size() {
 			const size = this.source.size
 			if (size === undefined || isNaN(size) || size < 0) {

apps/files/src/components/FilesListTableFooter.vue

@@ -21,6 +21,10 @@
 		<!-- Actions -->
 		<td class="files-list__row-actions" />
 
+		<!-- Mime -->
+		<td v-if="isMimeAvailable"
+			class="files-list__column files-list__row-mime" />
+
 		<!-- Size -->
 		<td v-if="isSizeAvailable"
 			class="files-list__column files-list__row-size">
@@ -60,6 +64,10 @@ export default defineComponent({
 			type: View,
 			required: true,
 		},
+		isMimeAvailable: {
+			type: Boolean,
+			default: false,
+		},
 		isMtimeAvailable: {
 			type: Boolean,
 			default: false,

apps/files/src/components/FilesListTableHeader.vue

@@ -24,6 +24,14 @@
 		<!-- Actions -->
 		<th class="files-list__row-actions" />
 
+		<!-- Mime -->
+		<th v-if="isMimeAvailable"
+			class="files-list__column files-list__row-mime"
+			:class="{ 'files-list__column--sortable': isMimeAvailable }"
+			:aria-sort="ariaSortForMode('mime')">
+			<FilesListTableHeaderButton :name="t('files', 'File type')" mode="mime" />
+		</th>
+
 		<!-- Size -->
 		<th v-if="isSizeAvailable"
 			class="files-list__column files-list__row-size"
@@ -83,6 +91,10 @@ export default defineComponent({
 	],
 
 	props: {
+		isMimeAvailable: {
+			type: Boolean,
+			default: false,
+		},
 		isMtimeAvailable: {
 			type: Boolean,
 			default: false,

apps/files/src/components/FilesListVirtual.vue

@@ -9,6 +9,7 @@
 		:data-sources="nodes"
 		:grid-mode="userConfig.grid_view"
 		:extra-props="{
+			isMimeAvailable,
 			isMtimeAvailable,
 			isSizeAvailable,
 			nodes,
@@ -39,6 +40,7 @@
 			<!-- Table header and sort buttons -->
 			<FilesListTableHeader ref="thead"
 				:files-list-width="fileListWidth"
+				:is-mime-available="isMimeAvailable"
 				:is-mtime-available="isMtimeAvailable"
 				:is-size-available="isSizeAvailable"
 				:nodes="nodes" />
@@ -48,6 +50,7 @@
 		<template #footer>
 			<FilesListTableFooter :current-view="currentView"
 				:files-list-width="fileListWidth"
+				:is-mime-available="isMimeAvailable"
 				:is-mtime-available="isMtimeAvailable"
 				:is-size-available="isSizeAvailable"
 				:nodes="nodes"
@@ -155,6 +158,16 @@ export default defineComponent({
 			return this.userConfigStore.userConfig
 		},
 
+		isMimeAvailable() {
+			if (!this.userConfig.show_mime_column) {
+				return false
+			}
+			// Hide mime column on narrow screens
+			if (this.fileListWidth < 1024) {
+				return false
+			}
+			return this.nodes.some(node => node.mime !== undefined || node.mime !== 'application/octet-stream')
+		},
 		isMtimeAvailable() {
 			// Hide mtime column on narrow screens
 			if (this.fileListWidth < 768) {
@@ -829,10 +842,12 @@ export default defineComponent({
 			margin-inline-end: 7px;
 		}
 
+		.files-list__row-mime,
 		.files-list__row-mtime,
 		.files-list__row-size {
 			color: var(--color-text-maxcontrast);
 		}
+
 		.files-list__row-size {
 			width: calc(var(--row-height) * 1.5);
 			// Right align content/text
@@ -843,6 +858,10 @@ export default defineComponent({
 			width: calc(var(--row-height) * 2);
 		}
 
+		.files-list__row-mime {
+			width: calc(var(--row-height) * 2.5);
+		}
+
 		.files-list__row-column-custom {
 			width: calc(var(--row-height) * 2);
 		}

apps/files/src/store/userconfig.ts

@@ -17,6 +17,7 @@ const initialUserConfig = loadState<UserConfig>('files', 'config', {
 	sort_favorites_first: true,
 	sort_folders_first: true,
 	grid_view: false,
+	show_mime_column: true,
 
 	show_dialog_file_extension: true,
 })

apps/files/src/types.ts

@@ -58,6 +58,7 @@ export interface UserConfig {
 	sort_favorites_first: boolean
 	sort_folders_first: boolean
 	grid_view: boolean
+	show_mime_column: boolean
 }
 export interface UserConfigStore {
 	userConfig: UserConfig

apps/files/src/views/Settings.vue

@@ -24,6 +24,11 @@
 				@update:checked="setConfig('show_hidden', $event)">
 				{{ t('files', 'Show hidden files') }}
 			</NcCheckboxRadioSwitch>
+			<NcCheckboxRadioSwitch data-cy-files-settings-setting="show_mime_column"
+				:checked="userConfig.show_mime_column"
+				@update:checked="setConfig('show_mime_column', $event)">
+				{{ t('files', 'Show file type column') }}
+			</NcCheckboxRadioSwitch>
 			<NcCheckboxRadioSwitch data-cy-files-settings-setting="crop_image_previews"
 				:checked="userConfig.crop_image_previews"
 				@update:checked="setConfig('crop_image_previews', $event)">