From c87a6ba811afbf472db00781102afb987fe9e3d6 Mon Sep 17 00:00:00 2001
From: skjnldsv <skjnldsv@protonmail.com>
Date: Fri, 14 Feb 2025 16:10:20 +0100
Subject: fix(files): attach sidebar to main content for vue debug

Signed-off-by: skjnldsv <skjnldsv@protonmail.com>
---
 apps/files/src/sidebar.js        | 46 ----------------------------------
 apps/files/src/sidebar.ts        | 54 ++++++++++++++++++++++++++++++++++++++++
 apps/files/src/views/Sidebar.vue | 29 +++++++++++----------
 3 files changed, 70 insertions(+), 59 deletions(-)
 delete mode 100644 apps/files/src/sidebar.js
 create mode 100644 apps/files/src/sidebar.ts

(limited to 'apps/files/src')

diff --git a/apps/files/src/sidebar.js b/apps/files/src/sidebar.js
deleted file mode 100644
index 61f8be419b6..00000000000
--- a/apps/files/src/sidebar.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import Vue from 'vue'
-import { translate as t } from '@nextcloud/l10n'
-
-import SidebarView from './views/Sidebar.vue'
-import Sidebar from './services/Sidebar.js'
-import Tab from './models/Tab.js'
-
-Vue.prototype.t = t
-
-// Init Sidebar Service
-if (!window.OCA.Files) {
-	window.OCA.Files = {}
-}
-Object.assign(window.OCA.Files, { Sidebar: new Sidebar() })
-Object.assign(window.OCA.Files.Sidebar, { Tab })
-
-window.addEventListener('DOMContentLoaded', function() {
-	const contentElement = document.querySelector('body > .content')
-		|| document.querySelector('body > #content')
-
-	// Make sure we have a proper layout
-	if (contentElement) {
-		// Make sure we have a mountpoint
-		if (!document.getElementById('app-sidebar')) {
-			const sidebarElement = document.createElement('div')
-			sidebarElement.id = 'app-sidebar'
-			contentElement.appendChild(sidebarElement)
-		}
-	}
-
-	// Init vue app
-	const View = Vue.extend(SidebarView)
-	const AppSidebar = new View({
-		name: 'SidebarRoot',
-	})
-	AppSidebar.$mount('#app-sidebar')
-	window.OCA.Files.Sidebar.open = AppSidebar.open
-	window.OCA.Files.Sidebar.close = AppSidebar.close
-	window.OCA.Files.Sidebar.setFullScreenMode = AppSidebar.setFullScreenMode
-	window.OCA.Files.Sidebar.setShowTagsDefault = AppSidebar.setShowTagsDefault
-})
diff --git a/apps/files/src/sidebar.ts b/apps/files/src/sidebar.ts
new file mode 100644
index 00000000000..35a379ad649
--- /dev/null
+++ b/apps/files/src/sidebar.ts
@@ -0,0 +1,54 @@
+/**
+ * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import Vue from 'vue'
+import { translate as t } from '@nextcloud/l10n'
+
+import SidebarView from './views/Sidebar.vue'
+import Sidebar from './services/Sidebar.js'
+import Tab from './models/Tab.js'
+
+Vue.prototype.t = t
+
+// Init Sidebar Service
+if (!window.OCA.Files) {
+	window.OCA.Files = {}
+}
+Object.assign(window.OCA.Files, { Sidebar: new Sidebar() })
+Object.assign(window.OCA.Files.Sidebar, { Tab })
+
+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
+		if (!document.getElementById('app-sidebar')) {
+			const sidebarElement = document.createElement('div')
+			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',
+		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
+	window.OCA.Files.Sidebar.setShowTagsDefault = AppSidebar.setShowTagsDefault
+})
diff --git a/apps/files/src/views/Sidebar.vue b/apps/files/src/views/Sidebar.vue
index 1867ea6a591..fbbd2df4bb9 100644
--- a/apps/files/src/views/Sidebar.vue
+++ b/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 {
-- 
cgit v1.2.3