fix(comments): Fix issues thrown by comments sidebar tab code

When the comments tab is used instead of the merged activity+comments, then some issues are throws due to prop altering and duplicated names (resourceId as prop and data).

This is fixed as well as some other vue related errors in the sidebar

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

apps/comments/src/comments-tab.js

 			TabInstance = new OCA.Comments.View('files', {
 				// Better integration with vue parent component
 				parent: context,
+				propsData: {
+					resourceId: fileInfo.id,
+				},
 			})
 			// Only mount after we have all the info we need
 			await TabInstance.update(fileInfo.id)

apps/comments/src/views/Comments.vue

 			:resource-type="resourceType"
 			:editor="true"
 			:user-data="userData"
-			:resource-id="resourceId"
+			:resource-id="currentResourceId"
 			class="comments__writer"
 			@new="onNewComment" />
 
 					:auto-complete="autoComplete"
 					:resource-type="resourceType"
 					:message.sync="comment.props.message"
-					:resource-id="resourceId"
+					:resource-id="currentResourceId"
 					:user-data="genMentionsData(comment.props.mentions)"
 					class="comments__list"
 					@delete="onDelete" />
 <script>
 import { showError } from '@nextcloud/dialogs'
 import { translate as t } from '@nextcloud/l10n'
-import { vElementVisibility } from '@vueuse/components'
+import { vElementVisibility as elementVisibility } from '@vueuse/components'
 
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 	},
 
 	directives: {
-		vElementVisibility,
+		elementVisibility,
 	},
 
 	mixins: [CommentView],
 			loading: false,
 			done: false,
 
-			resourceId: null,
+			currentResourceId: this.resourceId,
 			offset: 0,
 			comments: [],
 
 		},
 	},
 
+	watch: {
+		resourceId() {
+			this.currentResourceId = this.resourceId
+		},
+	},
+
 	methods: {
 		t,
 
 		async onVisibilityChange(isVisible) {
 			if (isVisible) {
 				try {
-					await markCommentsAsRead(this.resourceType, this.resourceId, new Date())
+					await markCommentsAsRead(this.resourceType, this.currentResourceId, new Date())
 				} catch (e) {
 					showError(e.message || t('comments', 'Failed to mark comments as read'))
 				}
 		 * @param {number} resourceId the current resourceId (fileId...)
 		 */
 		async update(resourceId) {
-			this.resourceId = resourceId
+			this.currentResourceId = resourceId
 			this.resetState()
 			this.getComments()
 		},
 				// Fetch comments
 				const { data: comments } = await request({
 					resourceType: this.resourceType,
-					resourceId: this.resourceId,
+					resourceId: this.currentResourceId,
 				}, { offset: this.offset }) || { data: [] }
 
 				this.logger.debug(`Processed ${comments.length} comments`, { comments })

apps/files/src/views/Sidebar.vue

 		@opened="handleOpened"
 		@closing="handleClosing"
 		@closed="handleClosed">
-		<template #subname>
+		<template v-if="fileInfo" #subname>
 			<NcIconSvgWrapper v-if="fileInfo.isFavourited"
 				:path="mdiStar"
 				:name="t('files', 'Favorite')"
 		 * @return {string}
 		 */
 		size() {
-			return formatFileSize(this.fileInfo.size)
+			return formatFileSize(this.fileInfo?.size)
 		},
 
 		/**
 		},
 
 		getPreviewIfAny(fileInfo) {
-			if (fileInfo.hasPreview && !this.isFullScreen) {
+			if (fileInfo?.hasPreview && !this.isFullScreen) {
 				return generateUrl(`/core/preview?fileId=${fileInfo.id}&x=${screen.width}&y=${screen.height}&a=true`)
 			}
 			return this.getIconUrl(fileInfo)
 		 * @return {string} Url to the icon for mimeType
 		 */
 		getIconUrl(fileInfo) {
-			const mimeType = fileInfo.mimetype || 'application/octet-stream'
+			const mimeType = fileInfo?.mimetype || 'application/octet-stream'
 			if (mimeType === 'httpd/unix-directory') {
 				// use default folder icon
 				if (fileInfo.mountType === 'shared' || fileInfo.mountType === 'shared-root') {