fix(files): adjust reactivity of files header outside of Vue instance

src/files/FilesCollectiveHeader.ts

@@ -0,0 +1,33 @@
+/**
+ * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { IFileListHeader, IFolder, IView } from '@nextcloud/files'
+import type { App, ComponentPublicInstance } from 'vue'
+
+import { createApp } from 'vue'
+import FileListInfo from '../views/FileListInfo.vue'
+
+let app: App | undefined
+let instance: ComponentPublicInstance<typeof FileListInfo> | undefined
+
+export const FilesCollectiveHeader: IFileListHeader = {
+	id: 'collective',
+	order: 9,
+
+	enabled(folder: IFolder, view: IView) {
+		return view.id === 'files' || view.id === 'files.public'
+	},
+
+	render(el: HTMLElement, folder: IFolder) {
+		el.id = 'files-collective-wrapper'
+		app?.unmount()
+		app = createApp(FileListInfo, { path: folder.path })
+		instance = app.mount(el) as ComponentPublicInstance<typeof FileListInfo>
+	},
+
+	updated(folder: IFolder) {
+		instance!.setPath(folder.path)
+	},
+}

src/init.js

@@ -5,7 +5,7 @@
 
 import { registerFileListHeader } from '@nextcloud/files'
 import { registerFileListHeaders as legacyRegisterFileListHeader } from '@nextcloud/files-legacy'
-import { FilesCollectiveHeader } from './files/FilesCollectiveHeader.js'
+import { FilesCollectiveHeader } from './files/FilesCollectiveHeader.ts'
 
 const version = Number.parseInt((window.OC?.config?.version ?? '0').split('.')[0])
 

src/views/FileListInfo.vue

@@ -25,11 +25,14 @@
 </template>
 
 <script>
+import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import InformationIcon from 'vue-material-design-icons/InformationOutline.vue'
 
+const collectivesFolder = loadState('collectives', 'user_folder', null)
+
 export default {
 	name: 'FileListInfo',
 
@@ -39,34 +42,33 @@ export default {
 	},
 
 	props: {
-		collectivesFolder: {
-			type: String,
-			required: true,
-		},
-
 		path: {
 			type: String,
 			required: true,
 		},
 	},
 
+	expose: ['setPath'],
+
 	data() {
 		return {
 			active: false,
+			internalPath: this.path,
 		}
 	},
 
 	computed: {
 		collectivesLink() {
-			const collectivesPath = this.path.startsWith(this.collectivesFolder)
-				? this.path.slice(this.collectivesFolder.length)
+			const collectivesPath = this.internalPath.startsWith(collectivesFolder)
+				? this.internalPath.slice(collectivesFolder.length)
 				: ''
 			return generateUrl('/apps/collectives' + collectivesPath)
 		},
 	},
 
 	watch: {
 		path: function() {
+			this.internalPath = this.path
 			this.setActive()
 		},
 	},
@@ -79,7 +81,15 @@ export default {
 		t,
 
 		setActive() {
-			this.active = this.collectivesFolder && this.collectivesFolder !== '/' && this.path.startsWith(this.collectivesFolder)
+			this.active = collectivesFolder && collectivesFolder !== '/' && this.internalPath.startsWith(collectivesFolder)
+		},
+
+		/**
+		 * @param {string} path - The new path
+		 */
+		setPath(path) {
+			this.internalPath = path
+			this.setActive()
 		},
 	},
 }