feat(files): sort favorites first

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

apps/files/lib/Service/UserConfig.php

@@ -41,6 +41,12 @@ class UserConfig {
 			'default' => false,
 			'allowed' => [true, false],
 		],
+		[
+			// Whether to sort favorites first in the list or not
+			'key' => 'sort_favorites_first',
+			'default' => true,
+			'allowed' => [true, false],
+		],
 	];
 
 	protected IConfig $config;
@@ -133,7 +139,7 @@ class UserConfig {
 		$userConfigs = array_map(function(string $key) use ($userId) {
 			$value = $this->config->getUserValue($userId, Application::APP_ID, $key, $this->getDefaultConfigValue($key));
 			// If the default is expected to be a boolean, we need to cast the value
-			if (is_bool($this->getDefaultConfigValue($key))) {
+			if (is_bool($this->getDefaultConfigValue($key)) && is_string($value)) {
 				return $value === '1';
 			}
 			return $value;

apps/files/src/store/userconfig.ts

@@ -31,6 +31,7 @@ import { emit, subscribe } from '@nextcloud/event-bus'
 const userConfig = loadState('files', 'config', {
 	show_hidden: false,
 	crop_image_previews: true,
+	sort_favorites_first: true,
 }) as UserConfig
 
 export const useUserConfigStore = function() {

apps/files/src/views/FilesList.vue

@@ -78,6 +78,7 @@ import Vue from 'vue'
 import { useFilesStore } from '../store/files.ts'
 import { usePathsStore } from '../store/paths.ts'
 import { useSelectionStore } from '../store/selection.ts'
+import { useUserConfigStore } from '../store/userconfig.ts'
 import { useViewConfigStore } from '../store/viewConfig.ts'
 import BreadCrumbs from '../components/BreadCrumbs.vue'
 import FilesListVirtual from '../components/FilesListVirtual.vue'
@@ -103,14 +104,16 @@ export default Vue.extend({
 	],
 
 	setup() {
-		const pathsStore = usePathsStore()
 		const filesStore = useFilesStore()
+		const pathsStore = usePathsStore()
 		const selectionStore = useSelectionStore()
+		const userConfigStore = useUserConfigStore()
 		const viewConfigStore = useViewConfigStore()
 		return {
 			filesStore,
 			pathsStore,
 			selectionStore,
+			userConfigStore,
 			viewConfigStore,
 		}
 	},
@@ -123,6 +126,10 @@ export default Vue.extend({
 	},
 
 	computed: {
+		userConfig() {
+			return this.userConfigStore.userConfig
+		},
+
 		/** @return {Navigation} */
 		currentView() {
 			return this.$navigation.active
@@ -179,11 +186,13 @@ export default Vue.extend({
 			return orderBy(
 				[...(this.currentFolder?._children || []).map(this.getNode).filter(file => file)],
 				[
+					// Sort favorites first if enabled
+					...this.userConfig.sort_favorites_first ? [v => v.attributes?.favorite !== 1] : [],
 					// Sort folders first if sorting by name
 					...this.sortingMode === 'basename' ? [v => v.type !== 'folder'] : [],
 					// Use sorting mode
 					v => v[this.sortingMode],
-					// Fallback to name
+					// Finally, fallback to name
 					v => v.basename,
 				],
 				this.isAscSorting ? ['asc', 'asc', 'asc'] : ['desc', 'desc', 'desc'],

apps/files/src/views/Settings.vue

@@ -26,6 +26,10 @@
 		@update:open="onClose">
 		<!-- Settings API-->
 		<NcAppSettingsSection id="settings" :title="t('files', 'Files settings')">
+			<NcCheckboxRadioSwitch :checked="userConfig.sort_favorites_first"
+				@update:checked="setConfig('sort_favorites_first', $event)">
+				{{ t('files', 'Sort favorites first') }}
+			</NcCheckboxRadioSwitch>
 			<NcCheckboxRadioSwitch :checked="userConfig.show_hidden"
 				@update:checked="setConfig('show_hidden', $event)">
 				{{ t('files', 'Show hidden files') }}