From 25b39a964b0cf3d53240dabd879f09fee01b0575 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 12 Jul 2024 13:24:43 +0200
Subject: [PATCH 1/3] chore(deps): bump nextcloud/vue library from 8.13.0 to
 8.14.0

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 package-lock.json | 14 +++++++-------
 package.json      |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 29cc33b6473..f5944a84b4b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,7 @@
         "@nextcloud/paths": "^2.1.0",
         "@nextcloud/router": "^3.0.1",
         "@nextcloud/upload": "^1.0.5",
-        "@nextcloud/vue": "^8.13.0",
+        "@nextcloud/vue": "^8.14.0",
         "crypto-js": "^4.2.0",
         "debounce": "^2.0.0",
         "emoji-regex": "^10.3.0",
@@ -3889,9 +3889,9 @@
       }
     },
     "node_modules/@nextcloud/vue": {
-      "version": "8.13.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-8.13.0.tgz",
-      "integrity": "sha512-FV0GWSbxkaDQ8S/bWc4XcCXzJfpHzJn4xj0pK/jEwSwdSleBdBFsFFGo+wLCAGoXH5Xf5mHE+LtATFh6wnX7VA==",
+      "version": "8.14.0",
+      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-8.14.0.tgz",
+      "integrity": "sha512-hB3dG7tZWpItC74PfbTLW02754qYXFDH+h7Ksq6b7e8WlhnKLWrhNGKhSpNDt9/g+vb5bSIOxbiDZIJZ63hAuQ==",
       "dependencies": {
         "@floating-ui/dom": "^1.1.0",
         "@linusborg/vue-simple-portal": "^0.1.5",
@@ -23763,9 +23763,9 @@
       }
     },
     "@nextcloud/vue": {
-      "version": "8.13.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-8.13.0.tgz",
-      "integrity": "sha512-FV0GWSbxkaDQ8S/bWc4XcCXzJfpHzJn4xj0pK/jEwSwdSleBdBFsFFGo+wLCAGoXH5Xf5mHE+LtATFh6wnX7VA==",
+      "version": "8.14.0",
+      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-8.14.0.tgz",
+      "integrity": "sha512-hB3dG7tZWpItC74PfbTLW02754qYXFDH+h7Ksq6b7e8WlhnKLWrhNGKhSpNDt9/g+vb5bSIOxbiDZIJZ63hAuQ==",
       "requires": {
         "@floating-ui/dom": "^1.1.0",
         "@linusborg/vue-simple-portal": "^0.1.5",
diff --git a/package.json b/package.json
index 4bb52af9b97..bf70d96f2cf 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "@nextcloud/paths": "^2.1.0",
     "@nextcloud/router": "^3.0.1",
     "@nextcloud/upload": "^1.0.5",
-    "@nextcloud/vue": "^8.13.0",
+    "@nextcloud/vue": "^8.14.0",
     "crypto-js": "^4.2.0",
     "debounce": "^2.0.0",
     "emoji-regex": "^10.3.0",

From d444e4c01bb98d6aced342fa02a616b9fe6c8d90 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Thu, 16 May 2024 17:59:29 +0200
Subject: [PATCH 2/3] fix(RightSidebar): use new open state to fix focus trap
 on mobile

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/components/RightSidebar/RightSidebar.vue | 117 ++++++++++++++++++-
 src/components/TopBar/TopBar.vue             | 114 +-----------------
 2 files changed, 118 insertions(+), 113 deletions(-)

diff --git a/src/components/RightSidebar/RightSidebar.vue b/src/components/RightSidebar/RightSidebar.vue
index 551164a1b8e..c3b7a269631 100644
--- a/src/components/RightSidebar/RightSidebar.vue
+++ b/src/components/RightSidebar/RightSidebar.vue
@@ -21,13 +21,27 @@
 -->
 
 <template>
-	<NcAppSidebar v-show="opened"
+	<NcAppSidebar v-if="token"
+		:open="opened"
 		:name="conversation.displayName"
 		:title="conversation.displayName"
 		:active.sync="activeTab"
 		:class="'active-tab-' + activeTab"
+		:toggle-classes="{ 'chat-button-sidebar-toggle': isInCall }"
+		:toggle-attrs="isInCall ? inCallToggleAttrs : undefined"
+		@update:open="handleUpdateOpen"
+		@update:active="handleUpdateActive"
 		@closed="handleClosed"
 		@close="handleClose">
+		<!-- Use a custom icon when sidebar is used for chat messages during the call -->
+		<template v-if="isInCall" #toggle-icon>
+			<MessageText :size="20" />
+			<NcCounterBubble v-if="unreadMessagesCounter > 0"
+				class="chat-button__unread-messages-counter"
+				:type="hasUnreadMentions ? 'highlighted' : 'outlined'">
+				{{ unreadMessagesCounter }}
+			</NcCounterBubble>
+		</template>
 		<template #description>
 			<LobbyStatus v-if="canFullModerate && hasLobbyEnabled" :token="token" />
 		</template>
@@ -111,13 +125,16 @@ import DotsCircle from 'vue-material-design-icons/DotsCircle.vue'
 import FolderMultipleImage from 'vue-material-design-icons/FolderMultipleImage.vue'
 import InformationOutline from 'vue-material-design-icons/InformationOutline.vue'
 import Message from 'vue-material-design-icons/Message.vue'
+import MessageText from 'vue-material-design-icons/MessageText.vue'
 
 import { getCapabilities } from '@nextcloud/capabilities'
+import { showMessage } from '@nextcloud/dialogs'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 
 import NcAppSidebar from '@nextcloud/vue/dist/Components/NcAppSidebar.js'
 import NcAppSidebarTab from '@nextcloud/vue/dist/Components/NcAppSidebarTab.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
 
 import BreakoutRoomsTab from './BreakoutRooms/BreakoutRoomsTab.vue'
 import LobbyStatus from './LobbyStatus.vue'
@@ -141,6 +158,7 @@ export default {
 		NcAppSidebar,
 		NcAppSidebarTab,
 		NcButton,
+		NcCounterBubble,
 		ParticipantsTab,
 		SetGuestUsername,
 		SharedItemsTab,
@@ -152,6 +170,7 @@ export default {
 		FolderMultipleImage,
 		InformationOutline,
 		Message,
+		MessageText,
 	},
 
 	props: {
@@ -165,6 +184,7 @@ export default {
 		return {
 			activeTab: 'participants',
 			contactsLoading: false,
+			unreadNotificationHandle: null,
 		}
 	},
 
@@ -173,7 +193,7 @@ export default {
 			return this.$store.getters.getSidebarStatus
 		},
 		opened() {
-			return !!this.token && !this.isInLobby && this.show
+			return !this.isInLobby && this.show
 		},
 		token() {
 			return this.$store.getters.getToken()
@@ -271,6 +291,21 @@ export default {
 		breakoutRoomsText() {
 			return t('spreed', 'Breakout rooms')
 		},
+
+		unreadMessagesCounter() {
+			return this.conversation.unreadMessages
+		},
+		hasUnreadMentions() {
+			return this.conversation.unreadMention
+		},
+
+		inCallToggleAttrs() {
+			return {
+				'data-theme-dark': true,
+				'aria-label': t('spreed', 'Open chat'),
+				title: t('spreed', 'Open chat')
+			}
+		},
 	},
 
 	watch: {
@@ -301,6 +336,27 @@ export default {
 			},
 		},
 
+		unreadMessagesCounter(newValue, oldValue) {
+			if (!this.isInCall || this.opened) {
+				return
+			}
+
+			// new messages arrived
+			if (newValue > 0 && oldValue === 0 && !this.hasUnreadMentions) {
+				this.notifyUnreadMessages(t('spreed', 'You have new unread messages in the chat.'))
+			}
+		},
+
+		hasUnreadMentions(newValue) {
+			if (!this.isInCall || this.opened) {
+				return
+			}
+
+			if (newValue) {
+				this.notifyUnreadMessages(t('spreed', 'You have been mentioned in the chat.'))
+			}
+		},
+
 		isInCall(newValue) {
 			if (newValue) {
 				// Set 'chat' tab as active, and switch to it if sidebar is open
@@ -308,6 +364,9 @@ export default {
 				return
 			}
 
+			// discard notification if the call ends
+			this.notifyUnreadMessages(null)
+
 			// If 'chat' tab wasn't active, leave it as is
 			if (this.activeTab !== 'chat') {
 				return
@@ -348,11 +407,28 @@ export default {
 	},
 
 	methods: {
+		openSidebar() {
+			// In call by default open on chat
+			if (this.isInCall) {
+				this.activeTab = 'chat'
+			}
+			this.$store.dispatch('showSidebar')
+			BrowserStorage.setItem('sidebarOpen', 'true')
+		},
+
 		handleClose() {
 			this.$store.dispatch('hideSidebar')
 			BrowserStorage.setItem('sidebarOpen', 'false')
 		},
 
+		handleUpdateOpen(open) {
+			if (open) {
+				this.openSidebar()
+			} else {
+				this.handleClose()
+			}
+		},
+
 		handleUpdateActive(active) {
 			this.activeTab = active
 		},
@@ -364,6 +440,21 @@ export default {
 		handleClosed() {
 			emit('files:sidebar:closed', {})
 		},
+
+		notifyUnreadMessages(message) {
+			if (this.unreadNotificationHandle) {
+				this.unreadNotificationHandle.hideToast()
+				this.unreadNotificationHandle = null
+			}
+			if (message) {
+				this.unreadNotificationHandle = showMessage(message, {
+					onClick: () => {
+						this.activeTab = 'chat'
+						this.openSidebar()
+					},
+				})
+			}
+		},
 	},
 }
 </script>
@@ -404,4 +495,26 @@ export default {
 	height: 100%;
 }
 
+.chat-button__unread-messages-counter {
+	position: absolute;
+	bottom: 2px;
+	right: 2px;
+	pointer-events: none;
+
+	&.counter-bubble__counter--highlighted {
+		color: var(--color-primary-text);
+	}
+}
+</style>
+
+<style lang="scss">
+/*
+ * NcAppSidebar toggle it rendered on the page outside the sidebar element, so we need global styles here.
+ * It is _quite_ safe, as chat-button-sidebar-toggle class is defined here manually, not an internal class.
+ */
+.chat-button-sidebar-toggle {
+	position: relative;
+	// Allow unread counter to overflow rounded button
+	overflow: visible !important;
+}
 </style>
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 44302861d6c..0efedd6af4f 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -96,38 +96,6 @@
 
 		<CallButton shrink-on-mobile :is-screensharing="!!localMediaModel.attributes.localScreen" />
 
-		<!-- sidebar toggle -->
-		<template v-if="showOpenSidebarButton">
-			<!-- in chat: open last tab -->
-			<NcButton v-if="!isInCall"
-				:aria-label="t('spreed', 'Open sidebar')"
-				:title="t('spreed', 'Open sidebar')"
-				close-after-click="true"
-				type="tertiary"
-				@click="openSidebar">
-				<template #icon>
-					<MenuIcon :size="20" />
-				</template>
-			</NcButton>
-
-			<!-- in call: open chat tab -->
-			<NcButton v-else
-				:aria-label="t('spreed', 'Open chat')"
-				:title="t('spreed', 'Open chat')"
-				class="chat-button"
-				type="tertiary"
-				@click="openSidebar('chat')">
-				<template #icon>
-					<MessageText :size="20" />
-					<NcCounterBubble v-if="unreadMessagesCounter > 0"
-						class="chat-button__unread-messages-counter"
-						:type="hasUnreadMentions ? 'highlighted' : 'outlined'">
-						{{ unreadMessagesCounter }}
-					</NcCounterBubble>
-				</template>
-			</NcButton>
-		</template>
-
 		<!-- Breakout rooms editor -->
 		<BreakoutRoomsEditor v-if="showBreakoutRoomsEditor"
 			:token="token"
@@ -137,15 +105,11 @@
 
 <script>
 import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
-import MenuIcon from 'vue-material-design-icons/Menu.vue'
-import MessageText from 'vue-material-design-icons/MessageText.vue'
 
 import { getCapabilities } from '@nextcloud/capabilities'
-import { showMessage } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 import richEditor from '@nextcloud/vue/dist/Mixins/richEditor.js'
 
@@ -178,13 +142,10 @@ export default {
 		ConversationIcon,
 		TopBarMediaControls,
 		NcButton,
-		NcCounterBubble,
 		TopBarMenu,
 		ReactionMenu,
 		// Icons
 		AccountMultiple,
-		MenuIcon,
-		MessageText,
 	},
 
 	mixins: [richEditor],
@@ -214,7 +175,6 @@ export default {
 
 	data: () => {
 		return {
-			unreadNotificationHandle: null,
 			showBreakoutRoomsEditor: false,
 		}
 	},
@@ -224,10 +184,6 @@ export default {
 			return this.$store.getters.getMainContainerSelector()
 		},
 
-		showOpenSidebarButton() {
-			return !this.$store.getters.getSidebarStatus
-		},
-
 		isOneToOneConversation() {
 			return this.conversation.type === CONVERSATION.TYPE.ONE_TO_ONE
 		},
@@ -252,13 +208,6 @@ export default {
 			return getStatusMessage(this.conversation)
 		},
 
-		unreadMessagesCounter() {
-			return this.conversation.unreadMessages
-		},
-		hasUnreadMentions() {
-			return this.conversation.unreadMention
-		},
-
 		renderedDescription() {
 			return this.renderContent(this.conversation.description)
 		},
@@ -316,36 +265,6 @@ export default {
 		},
 	},
 
-	watch: {
-		unreadMessagesCounter(newValue, oldValue) {
-			if (!this.isInCall || !this.showOpenSidebarButton) {
-				return
-			}
-
-			// new messages arrived
-			if (newValue > 0 && oldValue === 0 && !this.hasUnreadMentions) {
-				this.notifyUnreadMessages(t('spreed', 'You have new unread messages in the chat.'))
-			}
-		},
-
-		hasUnreadMentions(newValue) {
-			if (!this.isInCall || !this.showOpenSidebarButton) {
-				return
-			}
-
-			if (newValue) {
-				this.notifyUnreadMessages(t('spreed', 'You have been mentioned in the chat.'))
-			}
-		},
-
-		isInCall(newValue) {
-			if (!newValue) {
-				// discard notification if the call ends
-				this.notifyUnreadMessages(null)
-			}
-		},
-	},
-
 	mounted() {
 		document.body.classList.add('has-topbar')
 		document.addEventListener('fullscreenchange', this.fullScreenChanged, false)
@@ -364,20 +283,6 @@ export default {
 	},
 
 	methods: {
-		notifyUnreadMessages(message) {
-			if (this.unreadNotificationHandle) {
-				this.unreadNotificationHandle.hideToast()
-				this.unreadNotificationHandle = null
-			}
-			if (message) {
-				this.unreadNotificationHandle = showMessage(message, {
-					onClick: () => {
-						this.openSidebar('chat')
-					},
-				})
-			}
-		},
-
 		openSidebar(activeTab) {
 			if (typeof activeTab === 'string') {
 				emit('spreed:select-active-sidebar-tab', activeTab)
@@ -407,7 +312,9 @@ export default {
 	z-index: 10;
 	gap: 3px;
 	justify-content: flex-end;
-	padding: 8px;
+	padding: calc(2 * var(--default-grid-baseline));
+	// Reserve space for the sidebar toggle button
+	padding-right: calc(2 * var(--default-grid-baseline) + var(--app-sidebar-offset));
 	background-color: var(--color-main-background);
 	border-bottom: 1px solid var(--color-border);
 
@@ -423,21 +330,6 @@ export default {
 		left: 0;
 		background-color: transparent;
 	}
-
-	.chat-button {
-		position: relative;
-		overflow: visible;
-		&__unread-messages-counter {
-			position: absolute;
-			top: 24px;
-			right: 2px;
-			pointer-events: none;
-
-			&.counter-bubble__counter--highlighted {
-				color: var(--color-primary-text);
-			}
-		}
-	}
 }
 
 .conversation-icon {

From 7dc61c5a17e680ee55cc4e1a007c0393bc967116 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Fri, 28 Jun 2024 16:06:15 +0200
Subject: [PATCH 3/3] fix(RightSidebar): use old icon on older version

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/components/RightSidebar/RightSidebar.vue | 22 +++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/RightSidebar/RightSidebar.vue b/src/components/RightSidebar/RightSidebar.vue
index c3b7a269631..24310abcf73 100644
--- a/src/components/RightSidebar/RightSidebar.vue
+++ b/src/components/RightSidebar/RightSidebar.vue
@@ -34,13 +34,19 @@
 		@closed="handleClosed"
 		@close="handleClose">
 		<!-- Use a custom icon when sidebar is used for chat messages during the call -->
-		<template v-if="isInCall" #toggle-icon>
-			<MessageText :size="20" />
-			<NcCounterBubble v-if="unreadMessagesCounter > 0"
-				class="chat-button__unread-messages-counter"
-				:type="hasUnreadMentions ? 'highlighted' : 'outlined'">
-				{{ unreadMessagesCounter }}
-			</NcCounterBubble>
+		<template #toggle-icon>
+			<template v-if="isInCall">
+				<MessageText :size="20" />
+				<NcCounterBubble v-if="unreadMessagesCounter > 0"
+					class="chat-button__unread-messages-counter"
+					:type="hasUnreadMentions ? 'highlighted' : 'outlined'">
+					{{ unreadMessagesCounter }}
+				</NcCounterBubble>
+			</template>
+			<template v-else>
+				<!-- Use the old icon on older versions -->
+				<MenuIcon :size="20" />
+			</template>
 		</template>
 		<template #description>
 			<LobbyStatus v-if="canFullModerate && hasLobbyEnabled" :token="token" />
@@ -124,6 +130,7 @@ import CogIcon from 'vue-material-design-icons/Cog.vue'
 import DotsCircle from 'vue-material-design-icons/DotsCircle.vue'
 import FolderMultipleImage from 'vue-material-design-icons/FolderMultipleImage.vue'
 import InformationOutline from 'vue-material-design-icons/InformationOutline.vue'
+import MenuIcon from 'vue-material-design-icons/Menu.vue'
 import Message from 'vue-material-design-icons/Message.vue'
 import MessageText from 'vue-material-design-icons/MessageText.vue'
 
@@ -171,6 +178,7 @@ export default {
 		InformationOutline,
 		Message,
 		MessageText,
+		MenuIcon,
 	},
 
 	props: {