fix(files): attach sidebar to main content for vue debug

Signed-off-by: skjnldsv <skjnldsv@protonmail.com>

apps/files/src/sidebar.ts

@@ -23,6 +23,8 @@ window.addEventListener('DOMContentLoaded', function() {
 	const contentElement = document.querySelector('body > .content')
 		|| document.querySelector('body > #content')
 
+	let vueParent
+
 	// Make sure we have a proper layout
 	if (contentElement) {
 		// Make sure we have a mountpoint
@@ -31,14 +33,20 @@ window.addEventListener('DOMContentLoaded', function() {
 			sidebarElement.id = 'app-sidebar'
 			contentElement.appendChild(sidebarElement)
 		}
+
+		// Helps with vue debug, as we mount the sidebar to the
+		// content element which is a vue instance itself
+		vueParent = contentElement.__vue__ as Vue
 	}
 
 	// Init vue app
 	const View = Vue.extend(SidebarView)
 	const AppSidebar = new View({
 		name: 'SidebarRoot',
-	})
-	AppSidebar.$mount('#app-sidebar')
+		parent: vueParent,
+	}).$mount('#app-sidebar')
+
+	// Expose Sidebar methods
 	window.OCA.Files.Sidebar.open = AppSidebar.open
 	window.OCA.Files.Sidebar.close = AppSidebar.close
 	window.OCA.Files.Sidebar.setFullScreenMode = AppSidebar.setFullScreenMode

apps/files/src/views/Sidebar.vue

@@ -38,8 +38,7 @@
 				<SystemTags v-if="isSystemTagsEnabled && showTagsDefault"
 					v-show="showTags"
 					:disabled="!fileInfo?.canEdit()"
-					:file-id="fileInfo.id"
-					@has-tags="value => showTags = value" />
+					:file-id="fileInfo.id" />
 				<LegacyView v-for="view in views"
 					:key="view.cid"
 					:component="view"
@@ -93,19 +92,20 @@
 		</template>
 	</NcAppSidebar>
 </template>
-<script>
-import { getCurrentUser } from '@nextcloud/auth'
-import { getCapabilities } from '@nextcloud/capabilities'
-import { showError } from '@nextcloud/dialogs'
+<script lang="ts">
+import { davRemoteURL, davRootPath, File, Folder, formatFileSize } from '@nextcloud/files'
+import { defineComponent } from 'vue'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
-import { File, Folder, davRemoteURL, davRootPath, formatFileSize } from '@nextcloud/files'
 import { encodePath } from '@nextcloud/paths'
+import { fetchNode } from '../services/WebdavClient.ts'
 import { generateUrl } from '@nextcloud/router'
-import { ShareType } from '@nextcloud/sharing'
+import { getCapabilities } from '@nextcloud/capabilities'
+import { getCurrentUser } from '@nextcloud/auth'
 import { mdiStar, mdiStarOutline } from '@mdi/js'
-import { fetchNode } from '../services/WebdavClient.ts'
-import axios from '@nextcloud/axios'
+import { ShareType } from '@nextcloud/sharing'
+import { showError } from '@nextcloud/dialogs'
 import $ from 'jquery'
+import axios from '@nextcloud/axios'
 
 import NcAppSidebar from '@nextcloud/vue/dist/Components/NcAppSidebar.js'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
@@ -120,7 +120,7 @@ import SidebarTab from '../components/SidebarTab.vue'
 import SystemTags from '../../../systemtags/src/components/SystemTags.vue'
 import logger from '../logger.ts'
 
-export default {
+export default defineComponent({
 	name: 'Sidebar',
 
 	components: {
@@ -464,7 +464,10 @@ export default {
 		 * Toggle the tags selector
 		 */
 		toggleTags() {
-			this.showTagsDefault = this.showTags = !this.showTags
+			// toggle
+			this.showTags = !this.showTags
+			// save the new state
+			this.setShowTagsDefault(this.showTags)
 		},
 
 		/**
@@ -585,7 +588,7 @@ export default {
 			this.hasLowHeight = document.documentElement.clientHeight < 1024
 		},
 	},
-}
+})
 </script>
 <style lang="scss" scoped>
 .app-sidebar {

webpack.modules.js

@@ -35,7 +35,7 @@ module.exports = {
 		'settings-personal-availability': path.join(__dirname, 'apps/dav/src', 'settings-personal-availability.js'),
 	},
 	files: {
-		sidebar: path.join(__dirname, 'apps/files/src', 'sidebar.js'),
+		sidebar: path.join(__dirname, 'apps/files/src', 'sidebar.ts'),
 		main: path.join(__dirname, 'apps/files/src', 'main.ts'),
 		init: path.join(__dirname, 'apps/files/src', 'init.ts'),
 		search: path.join(__dirname, 'apps/files/src/plugins/search', 'folderSearch.ts'),