Merge pull request #53966 from nextcloud/feat/show-hide-ext

feat(files): allow hidding files extensions

apps/files/lib/Service/UserConfig.php

@@ -49,6 +49,12 @@ class UserConfig {
 			'default' => true,
 			'allowed' => [true, false],
 		],
+		[
+			// Whether to show the files extensions in the files list or not
+			'key' => 'show_files_extensions',
+			'default' => true,
+			'allowed' => [true, false],
+		],
 		[
 			// Whether to show the hidden files or not in the files list
 			'key' => 'show_hidden',

apps/files/src/components/FileEntry/FileEntryName.vue

@@ -30,7 +30,7 @@
 		<span class="files-list__row-name-text" dir="auto">
 			<!-- 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 v-if="userConfigStore.userConfig.show_files_extensions" class="files-list__row-name-ext" v-text="extension" />
 		</span>
 	</component>
 </template>
@@ -46,11 +46,12 @@ import { defineComponent, inject } from 'vue'
 
 import NcTextField from '@nextcloud/vue/components/NcTextField'
 
-import { useNavigation } from '../../composables/useNavigation'
+import { getFilenameValidity } from '../../utils/filenameValidity.ts'
 import { useFileListWidth } from '../../composables/useFileListWidth.ts'
-import { useRouteParameters } from '../../composables/useRouteParameters.ts'
+import { useNavigation } from '../../composables/useNavigation.ts'
 import { useRenamingStore } from '../../store/renaming.ts'
-import { getFilenameValidity } from '../../utils/filenameValidity.ts'
+import { useRouteParameters } from '../../composables/useRouteParameters.ts'
+import { useUserConfigStore } from '../../store/userconfig.ts'
 import logger from '../../logger.ts'
 
 export default defineComponent({
@@ -95,6 +96,7 @@ export default defineComponent({
 		const { directory } = useRouteParameters()
 		const filesListWidth = useFileListWidth()
 		const renamingStore = useRenamingStore()
+		const userConfigStore = useUserConfigStore()
 
 		const defaultFileAction = inject<FileAction | undefined>('defaultFileAction')
 
@@ -105,6 +107,7 @@ export default defineComponent({
 			filesListWidth,
 
 			renamingStore,
+			userConfigStore,
 		}
 	},
 

apps/files/src/store/userconfig.ts

@@ -15,6 +15,7 @@ const initialUserConfig = loadState<UserConfig>('files', 'config', {
 	crop_image_previews: true,
 	default_view: 'files',
 	grid_view: false,
+	show_files_extensions: true,
 	show_hidden: false,
 	show_mime_column: true,
 	sort_favorites_first: true,

apps/files/src/types.ts

@@ -55,6 +55,7 @@ export interface UserConfig {
 	crop_image_previews: boolean
 	default_view: 'files' | 'personal'
 	grid_view: boolean
+	show_files_extensions: boolean
 	show_hidden: boolean
 	show_mime_column: boolean
 	sort_favorites_first: boolean

apps/files/src/views/Settings.vue

@@ -29,7 +29,6 @@
 					{{ t('files', 'Personal files') }}
 				</NcCheckboxRadioSwitch>
 			</fieldset>
-
 			<NcCheckboxRadioSwitch data-cy-files-settings-setting="sort_favorites_first"
 				:checked="userConfig.sort_favorites_first"
 				@update:checked="setConfig('sort_favorites_first', $event)">
@@ -40,6 +39,15 @@
 				@update:checked="setConfig('sort_folders_first', $event)">
 				{{ t('files', 'Sort folders before files') }}
 			</NcCheckboxRadioSwitch>
+			<NcCheckboxRadioSwitch data-cy-files-settings-setting="folder_tree"
+				:checked="userConfig.folder_tree"
+				@update:checked="setConfig('folder_tree', $event)">
+				{{ t('files', 'Enable folder tree') }}
+			</NcCheckboxRadioSwitch>
+		</NcAppSettingsSection>
+
+		<!-- Visual settings -->
+		<NcAppSettingsSection id="settings" :name="t('files', 'Visual settings')">
 			<NcCheckboxRadioSwitch data-cy-files-settings-setting="show_hidden"
 				:checked="userConfig.show_hidden"
 				@update:checked="setConfig('show_hidden', $event)">
@@ -55,10 +63,10 @@
 				@update:checked="setConfig('crop_image_previews', $event)">
 				{{ t('files', 'Crop image previews') }}
 			</NcCheckboxRadioSwitch>
-			<NcCheckboxRadioSwitch data-cy-files-settings-setting="folder_tree"
-				:checked="userConfig.folder_tree"
-				@update:checked="setConfig('folder_tree', $event)">
-				{{ t('files', 'Enable folder tree') }}
+			<NcCheckboxRadioSwitch data-cy-files-settings-setting="show_files_extensions"
+				:checked="userConfig.show_files_extensions"
+				@update:checked="setConfig('show_files_extensions', $event)">
+				{{ t('files', 'Show files extensions') }}
 			</NcCheckboxRadioSwitch>
 		</NcAppSettingsSection>