wip: unify FilesSidebarChatView and FilesSidebarCallView into a single app

- drop usage of `registerSecondaryView` - can be implemented with lesser DOM modifications (and same risk of breaking)

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

src/FilesSidebarTabApp.vue

@@ -22,7 +22,10 @@
 				{{ t('spreed', 'Join conversation') }}
 			</NcButton>
 		</div>
-		<FilesSidebarChatView v-else />
+		<template v-else>
+			<FilesSidebarCallView />
+			<FilesSidebarChatView />
+		</template>
 	</div>
 </template>
 
@@ -56,6 +59,11 @@ export default {
 			loadingComponent: defineComponent(() => h(LoadingComponent, { class: 'tab-loading' })),
 		}),
 
+		FilesSidebarCallView: defineAsyncComponent({
+			loader: () => import(/* webpackChunkName: "files-sidebar-call-chunk" */'./views/FilesSidebarCallView.vue'),
+			loadingComponent: defineComponent(() => h(LoadingComponent, { class: 'tab-loading' })),
+		}),
+
 		NcButton,
 	},
 

src/mainFilesSidebar.js

@@ -6,7 +6,6 @@
 import { getCSPNonce } from '@nextcloud/auth'
 import { generateFilePath } from '@nextcloud/router'
 import { createApp, reactive } from 'vue'
-import FilesSidebarCallViewApp from './FilesSidebarCallViewApp.vue'
 import FilesSidebarTabApp from './FilesSidebarTabApp.vue'
 import { createMemoryRouter } from './router/router.ts'
 import store from './store/index.js'
@@ -30,17 +29,6 @@ __webpack_public_path__ = generateFilePath('spreed', '', 'js/')
 
 const router = createMemoryRouter()
 
-/**
- *
- */
-function newCallView() {
-	return createApp(FilesSidebarCallViewApp)
-		.use(store)
-		.use(pinia)
-		.use(router)
-		.use(NextcloudGlobalsVuePlugin)
-}
-
 /**
  *
  */
@@ -57,7 +45,6 @@ if (!window.OCA.Talk) {
 }
 Object.assign(window.OCA.Talk, {
 	fileInfo: null,
-	newCallView,
 	newTab,
 	store,
 })

src/mainFilesSidebarLoader.js

@@ -5,7 +5,6 @@
 
 import pinia from './stores/pinia.ts'
 import { useTokenStore } from './stores/token.ts'
-import FilesSidebarCallView from './views/FilesSidebarCallView.js'
 
 import './init.js'
 
@@ -41,7 +40,6 @@ let tabInstance = null
 
 window.addEventListener('DOMContentLoaded', () => {
 	if (OCA.Files && OCA.Files.Sidebar) {
-		OCA.Files.Sidebar.registerSecondaryView(new FilesSidebarCallView())
 		OCA.Files.Sidebar.registerTab(new OCA.Files.Sidebar.Tab({
 			id: 'chat',
 			name: t('spreed', 'Chat'),

src/views/FilesSidebarCallView.js

@@ -1,37 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-/**
- * Helper class to wrap a Vue instance with a FilesSidebarCallViewApp component
- * to be used as a secondary view in the Files sidebar.
- *
- * Although Vue instances/components can be added as tabs to the Files sidebar
- * currently only legacy views can be added as secondary views to the Files
- * sidebar. Those legacy views are expected to provide a root element, $el, with
- * a "replaceAll" method that replaces the given element with the $el element,
- * and a "setFileInfo" method that is called when the sidebar is opened or the
- * current file changes.
- */
-export default class FilesSidebarCallView {
-	constructor() {
-		const callViewApp = OCA.Talk.newCallView()
-
-		const container = document.createElement('div')
-		container.id = 'FilesSidebarCallView'
-
-		this.callViewInstance = callViewApp.mount(container)
-		this.$el = this.callViewInstance.$el
-
-		this.$el.replaceAll = function(target) {
-			target.replaceWith(this.$el)
-		}.bind(this)
-	}
-
-	setFileInfo(fileInfo) {
-		// The FilesSidebarCallViewApp is the first (and only) child of the Vue
-		// instance.
-		this.callViewInstance.setFileInfo(fileInfo)
-	}
-}

src/views/FilesSidebarCallView.vue

@@ -17,24 +17,20 @@
 </template>
 
 <script>
-import { defineAsyncComponent, defineComponent, h } from 'vue'
-import LoadingComponent from './components/LoadingComponent.vue'
-import { useGetToken } from './composables/useGetToken.ts'
-import { useHashCheck } from './composables/useHashCheck.js'
-import { useIsInCall } from './composables/useIsInCall.js'
-import { useSessionIssueHandler } from './composables/useSessionIssueHandler.ts'
-import { useTokenStore } from './stores/token.ts'
+import CallView from '../components/CallView/CallView.vue'
+import TopBar from '../components/TopBar/TopBar.vue'
+import { useGetToken } from '../composables/useGetToken.ts'
+import { useHashCheck } from '../composables/useHashCheck.js'
+import { useIsInCall } from '../composables/useIsInCall.js'
+import { useSessionIssueHandler } from '../composables/useSessionIssueHandler.ts'
+import { useTokenStore } from '../stores/token.ts'
 
 export default {
-	name: 'FilesSidebarCallViewApp',
+	name: 'FilesSidebarCallView',
 
 	components: {
-		CallView: defineAsyncComponent({
-			loader: () => import(/* webpackChunkName: "files-sidebar-call-chunk" */'./components/CallView/CallView.vue'),
-			loadingComponent: defineComponent(() => h(LoadingComponent, { class: 'call-loading' })),
-		}),
-
-		TopBar: defineAsyncComponent(() => import(/* webpackChunkName: "files-sidebar-call-chunk" */'./components/TopBar/TopBar.vue')),
+		CallView,
+		TopBar,
 	},
 
 	setup() {
@@ -282,7 +278,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import './assets/variables';
+@import '../assets/variables';
 
 #call-container {
 	position: relative;