refactor: Use composable for `currentView` and `views` to make it reactive when shared with other Vue apps

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

1 files changed, 12 insertions, 8 deletions

diff --git a/apps/files/src/components/FilesListTableHeader.vue b/apps/files/src/components/FilesListTableHeader.vue
index 7134c957fb8..723dd574da8 100644
--- a/apps/files/src/components/FilesListTableHeader.vue
+++ b/apps/files/src/components/FilesListTableHeader.vue
@@ -54,17 +54,21 @@
 </template>
 
 <script lang="ts">
+import type { Node } from '@nextcloud/files'
+import type { PropType } from 'vue'
+import type { FileSource } from '../types.ts'
+
 import { translate as t } from '@nextcloud/l10n'
+import { defineComponent } from 'vue'
+
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
-import { defineComponent, type PropType } from 'vue'
+import FilesListTableHeaderButton from './FilesListTableHeaderButton.vue'
 
+import { useNavigation } from '../composables/useNavigation'
 import { useFilesStore } from '../store/files.ts'
 import { useSelectionStore } from '../store/selection.ts'
-import FilesListTableHeaderButton from './FilesListTableHeaderButton.vue'
 import filesSortingMixin from '../mixins/filesSorting.ts'
 import logger from '../logger.js'
-import type { Node } from '@nextcloud/files'
-import type { FileSource } from '../types.ts'
 
 export default defineComponent({
 	name: 'FilesListTableHeader',
@@ -100,17 +104,17 @@ export default defineComponent({
 	setup() {
 		const filesStore = useFilesStore()
 		const selectionStore = useSelectionStore()
+		const { currentView } = useNavigation()
+
 		return {
 			filesStore,
 			selectionStore,
+
+			currentView,
 		}
 	},
 
 	computed: {
-		currentView() {
-			return this.$navigation.active
-		},
-
 		columns() {
 			// Hide columns if the list is too small
 			if (this.filesListWidth < 512) {