fix(files): use correct types for the Settings

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

apps/files/src/eventbus.d.ts

@@ -4,13 +4,13 @@
  */
 
 import type { IFileListFilter, Node, View } from '@nextcloud/files'
-import type { SearchScope } from './types'
+import type { SearchScope, UserConfig } from './types.ts'
 
 declare module '@nextcloud/event-bus' {
 	export interface NextcloudEvents {
 		// mapping of 'event name' => 'event type'
-		'files:config:updated': { key: string, value: boolean }
-		'files:view-config:updated': { key: string, value: string|number|boolean, view: string }
+		'files:config:updated': { key: string, value: UserConfig[string] }
+		'files:view-config:updated': { key: string, value: string | number | boolean, view: string }
 
 		'files:favorites:removed': Node
 		'files:favorites:added': Node

apps/files/src/main.ts

@@ -2,15 +2,15 @@
  * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+
 import { getCSPNonce } from '@nextcloud/auth'
 import { PiniaVuePlugin } from 'pinia'
 import Vue from 'vue'
-
 import { getPinia } from './store/index.ts'
 import FilesApp from './FilesApp.vue'
 import router from './router/router'
 import RouterService from './services/RouterService'
-import SettingsModel from './models/Setting.js'
+import SettingsModel from './models/Setting.ts'
 import SettingsService from './services/Settings.js'
 
 __webpack_nonce__ = getCSPNonce()

apps/files/src/models/Setting.js

@@ -1,73 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-export default class Setting {
-
-	_close
-	_el
-	_name
-	_open
-	_order
-
-	/**
-	 * Create a new files app setting
-	 *
-	 * @since 19.0.0
-	 * @param {string} name the name of this setting
-	 * @param {object} component the component
-	 * @param {Function} component.el function that returns an unmounted dom element to be added
-	 * @param {Function} [component.open] callback for when setting is added
-	 * @param {Function} [component.close] callback for when setting is closed
-	 * @param {number} [component.order] the order of this setting, lower numbers are shown first
-	 */
-	constructor(name, { el, open, close, order }) {
-		this._name = name
-		this._el = el
-		this._open = open
-		this._close = close
-		this._order = order || 0
-
-		if (typeof this._open !== 'function') {
-			this._open = () => {}
-		}
-
-		if (typeof this._close !== 'function') {
-			this._close = () => {}
-		}
-
-		if (typeof this._el !== 'function') {
-			throw new Error('Setting must have an `el` function that returns a DOM element')
-		}
-
-		if (typeof this._name !== 'string') {
-			throw new Error('Setting must have a `name` string')
-		}
-
-		if (typeof this._order !== 'number') {
-			throw new Error('Setting must have an `order` number')
-		}
-	}
-
-	get name() {
-		return this._name
-	}
-
-	get el() {
-		return this._el
-	}
-
-	get open() {
-		return this._open
-	}
-
-	get close() {
-		return this._close
-	}
-
-	get order() {
-		return this._order
-	}
-
-}

apps/files/src/models/Setting.ts

@@ -0,0 +1,69 @@
+/**
+ * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+export interface SettingData {
+	el: () => HTMLElement
+	open?: () => void
+	close?: () => void
+	order?: number
+}
+
+export default class Setting {
+	#name: string
+	#options: Required<SettingData>
+
+	/**
+	 * Create a new files app setting
+	 *
+	 * @param name - The name of this setting
+	 * @param options - The setting options
+	 * @param options.el - Function that returns an unmounted dom element to be added
+	 * @param options.open - Callback for when setting is added
+	 * @param options.close - Callback for when setting is closed
+	 * @param options.order - The order of this setting, lower numbers are shown first
+	 * @since 19.0.0
+	 */
+	constructor(name: string, options: SettingData) {
+		this.#name = name
+		this.#options = {
+			open: () => {},
+			close: () => {},
+			order: 0,
+			...options,
+		}
+
+		if (typeof this.#options.el !== 'function') {
+			throw new Error('Setting must have an `el` function that returns a DOM element')
+		}
+
+		if (typeof this.#name !== 'string') {
+			throw new Error('Setting must have a `name` string')
+		}
+
+		if (typeof this.#options.order !== 'number') {
+			throw new Error('Setting must have an `order` number')
+		}
+	}
+
+	get name() {
+		return this.#name
+	}
+
+	get el() {
+		return this.#options.el
+	}
+
+	get open() {
+		return this.#options.open
+	}
+
+	get close() {
+		return this.#options.close
+	}
+
+	get order() {
+		return this.#options.order
+	}
+}

apps/files/src/store/userconfig.ts

@@ -14,6 +14,7 @@ import axios from '@nextcloud/axios'
 const initialUserConfig = loadState<UserConfig>('files', 'config', {
 	crop_image_previews: true,
 	default_view: 'files',
+	folder_tree: true,
 	grid_view: false,
 	show_files_extensions: true,
 	show_hidden: false,
@@ -33,7 +34,7 @@ export const useUserConfigStore = defineStore('userconfig', () => {
 	 * @param key The config key
 	 * @param value The new value
 	 */
-	function onUpdate(key: string, value: boolean): void {
+	function onUpdate<Key extends string>(key: Key, value: UserConfig[Key]): void {
 		set(userConfig.value, key, value)
 	}
 
@@ -42,7 +43,7 @@ export const useUserConfigStore = defineStore('userconfig', () => {
 	 * @param key The config key
 	 * @param value The new value
 	 */
-	async function update(key: string, value: boolean): Promise<void> {
+	async function update<Key extends string>(key: Key, value: UserConfig[Key]): Promise<void> {
 		// only update if a user is logged in (not the case for public shares)
 		if (getCurrentUser() !== null) {
 			await axios.put(generateUrl('/apps/files/api/v1/config/{key}', { key }), {

apps/files/src/types.ts

@@ -54,13 +54,14 @@ export interface UserConfig {
 
 	crop_image_previews: boolean
 	default_view: 'files' | 'personal'
+	folder_tree: boolean
 	grid_view: boolean
-	show_files_extensions: boolean
-	show_hidden: boolean
-	show_mime_column: boolean
 	sort_favorites_first: boolean
 	sort_folders_first: boolean
 
+	show_files_extensions: boolean
+	show_hidden: boolean
+	show_mime_column: boolean
 	show_dialog_deletion: boolean
 	show_dialog_file_extension: boolean,
 }