[stable32] refactor(files): migrate app settings to new NcForm* components

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,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()