refactor(files): migrate to new NcForm* components (app settings design)

apps/files/src/components/FilesAppSettings/FilesAppSettingsAppearance.vue

@@ -0,0 +1,37 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { t } from '@nextcloud/l10n'
+import NcAppSettingsSection from '@nextcloud/vue/components/NcAppSettingsSection'
+import NcFormBox from '@nextcloud/vue/components/NcFormBox'
+import NcFormBoxSwitch from '@nextcloud/vue/components/NcFormBoxSwitch'
+import { useUserConfigStore } from '../../store/userconfig.ts'
+
+const store = useUserConfigStore()
+</script>
+
+<template>
+	<NcAppSettingsSection id="appearance" :name="t('files', 'Appearance')">
+		<NcFormBox>
+			<NcFormBoxSwitch
+				v-model="store.userConfig.show_hidden"
+				:label="t('files', 'Show hidden files')"
+				@update:modelValue="store.update('show_hidden', $event)" />
+			<NcFormBoxSwitch
+				v-model="store.userConfig.show_mime_column"
+				:label="t('files', 'Show file type column')"
+				@update:modelValue="store.update('show_mime_column', $event)" />
+			<NcFormBoxSwitch
+				v-model="store.userConfig.show_files_extensions"
+				:label="t('files', 'Show file extensions')"
+				@update:modelValue="store.update('show_files_extensions', $event)" />
+			<NcFormBoxSwitch
+				v-model="store.userConfig.crop_image_previews"
+				:label="t('files', 'Crop image previews')"
+				@update:modelValue="store.update('crop_image_previews', $event)" />
+		</NcFormBox>
+	</NcAppSettingsSection>
+</template>

apps/files/src/components/FilesAppSettings/FilesAppSettingsGeneral.vue

@@ -0,0 +1,44 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { t } from '@nextcloud/l10n'
+import NcAppSettingsSection from '@nextcloud/vue/components/NcAppSettingsSection'
+import NcFormBox from '@nextcloud/vue/components/NcFormBox'
+import NcFormBoxSwitch from '@nextcloud/vue/components/NcFormBoxSwitch'
+import NcRadioGroup from '@nextcloud/vue/components/NcRadioGroup'
+import NcRadioGroupButton from '@nextcloud/vue/components/NcRadioGroupButton'
+import { useUserConfigStore } from '../../store/userconfig.ts'
+
+const store = useUserConfigStore()
+</script>
+
+<template>
+	<NcAppSettingsSection
+		id="settings"
+		:name="t('files', 'General')">
+		<NcFormBox>
+			<NcFormBoxSwitch
+				v-model="store.userConfig.sort_favorites_first"
+				:label="t('files', 'Sort favorites first')"
+				@update:modelValue="store.update('sort_favorites_first', $event)" />
+			<NcFormBoxSwitch
+				v-model="store.userConfig.sort_folders_first"
+				:label="t('files', 'Sort folders before files')"
+				@update:modelValue="store.update('sort_folders_first', $event)" />
+			<NcFormBoxSwitch
+				v-model="store.userConfig.folder_tree"
+				:label="t('files', 'Enable folder tree view')"
+				@update:modelValue="store.update('folder_tree', $event)" />
+		</NcFormBox>
+		<NcRadioGroup
+			v-model="store.userConfig.default_view"
+			:label="t('files', 'Default view')"
+			@update:modelValue="store.update('default_view', $event)">
+			<NcRadioGroupButton :label="t('files', 'All files')" value="files" />
+			<NcRadioGroupButton :label="t('files', 'Personal files')" value="personal" />
+		</NcRadioGroup>
+	</NcAppSettingsSection>
+</template>

apps/files/src/components/FilesAppSettings/FilesAppSettingsLegacyApi.vue

@@ -0,0 +1,29 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import type Setting from '../../models/Setting.ts'
+
+import { t } from '@nextcloud/l10n'
+import NcAppSettingsSection from '@nextcloud/vue/components/NcAppSettingsSection'
+import FilesAppSettingsLegacyApiEntry from './FilesAppSettingsLegacyApiEntry.vue'
+
+const apiSettings = ((window.OCA?.Files?.Settings?.settings || []) as Setting[])
+	.sort((a, b) => {
+		if (a.order && b.order) {
+			return a.order - b.order
+		}
+		return a.name.localeCompare(b.name)
+	})
+</script>
+
+<template>
+	<NcAppSettingsSection
+		v-if="apiSettings.length !== 0"
+		id="api-settings"
+		:name="t('files', 'Additional settings')">
+		<FilesAppSettingsLegacyApiEntry v-for="setting in apiSettings" :key="setting.name" :setting="setting" />
+	</NcAppSettingsSection>
+</template>

apps/files/src/components/FilesAppSettings/FilesAppSettingsLegacyApiEntry.vue

@@ -0,0 +1,26 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import type Setting from '../../models/Setting.ts'
+
+import { onBeforeMount, onBeforeUnmount, onMounted, ref } from 'vue'
+
+const props = defineProps<{
+	setting: Setting
+}>()
+
+const el = ref<HTMLElement>()
+
+onBeforeMount(() => props.setting.open())
+onBeforeUnmount(() => props.setting.close())
+onMounted(() => {
+	el.value!.appendChild(props.setting.el())
+})
+</script>
+
+<template>
+	<div ref="el" />
+</template>

apps/files/src/components/FilesAppSettings/FilesAppSettingsWarnings.vue

@@ -0,0 +1,29 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script lang="ts" setup>
+import { t } from '@nextcloud/l10n'
+import NcAppSettingsSection from '@nextcloud/vue/components/NcAppSettingsSection'
+import NcFormBox from '@nextcloud/vue/components/NcFormBox'
+import NcFormBoxSwitch from '@nextcloud/vue/components/NcFormBoxSwitch'
+import { useUserConfigStore } from '../../store/userconfig.ts'
+
+const store = useUserConfigStore()
+</script>
+
+<template>
+	<NcAppSettingsSection id="warning" :name="t('files', 'Warnings')">
+		<NcFormBox>
+			<NcFormBoxSwitch
+				v-model="store.userConfig.show_dialog_file_extension"
+				:label="t('files', 'Warn before changing a file extension')"
+				@update:modelValue="store.update('show_dialog_file_extension', $event)" />
+			<NcFormBoxSwitch
+				v-model="store.userConfig.show_dialog_deletion"
+				:label="t('files', 'Warn before deleting a file')"
+				@update:modelValue="store.update('show_dialog_deletion', $event)" />
+		</NcFormBox>
+	</NcAppSettingsSection>
+</template>

apps/files/src/components/FilesAppSettings/FilesAppSettingsWebDav.vue

@@ -0,0 +1,38 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script lang="ts" setup>
+import { getCurrentUser } from '@nextcloud/auth'
+import { loadState } from '@nextcloud/initial-state'
+import { t } from '@nextcloud/l10n'
+import { generateRemoteUrl, generateUrl } from '@nextcloud/router'
+import NcAppSettingsSection from '@nextcloud/vue/components/NcAppSettingsSection'
+import NcFormBox from '@nextcloud/vue/components/NcFormBox'
+import NcFormBoxButton from '@nextcloud/vue/components/NcFormBoxButton'
+import NcFormBoxCopyButton from '@nextcloud/vue/components/NcFormBoxCopyButton'
+
+const webDavUrl = generateRemoteUrl('dav/files/' + encodeURIComponent(getCurrentUser()!.uid))
+const webDavDocsUrl = 'https://docs.nextcloud.com/server/stable/go.php?to=user-webdav'
+const appPasswordUrl = generateUrl('/settings/user/security#generate-app-token-section')
+const isTwoFactorEnabled = loadState('files', 'isTwoFactorEnabled', false)
+</script>
+
+<template>
+	<NcAppSettingsSection id="webdav" name="WebDAV">
+		<NcFormBox>
+			<NcFormBoxCopyButton :label="t('files', 'WebDAV URL')" :value="webDavUrl" />
+			<NcFormBoxButton
+				v-if="isTwoFactorEnabled"
+				:label="t('files', 'Create an app password')"
+				:description="t('files', 'Required for WebDAV authentication because Two-Factor Authentication is enabled for this account.')"
+				:href="appPasswordUrl"
+				target="_blank" />
+			<NcFormBoxButton
+				:label="t('files', 'How to access files using WebDAV')"
+				:href="webDavDocsUrl"
+				target="_blank" />
+		</NcFormBox>
+	</NcAppSettingsSection>
+</template>

apps/files/src/eventbus.d.ts

@@ -4,12 +4,12 @@
  */
 
 import type { IFileListFilter, Node, View } from '@nextcloud/files'
-import type { SearchScope } from './types.ts'
+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:config:updated': { key: string, value: UserConfig[string] }
 		'files:view-config:updated': { key: string, value: string | number | boolean, view: string }
 
 		'files:favorites:removed': Node

apps/files/src/main.ts

@@ -7,7 +7,7 @@ import { getCSPNonce } from '@nextcloud/auth'
 import { PiniaVuePlugin } from 'pinia'
 import Vue from 'vue'
 import FilesApp from './FilesApp.vue'
-import SettingsModel from './models/Setting.js'
+import SettingsModel from './models/Setting.ts'
 import router from './router/router.ts'
 import RouterService from './services/RouterService.ts'
 import SettingsService from './services/Settings.js'

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
+	}
+}