fix and improve mobile UX

Signed-off-by: szaimen <szaimen@e.mail.de>

src/App.vue

@@ -67,6 +67,7 @@ import ConversationSettingsDialog from './components/ConversationSettings/Conver
 import '@nextcloud/dialogs/styles/toast.scss'
 import { CONVERSATION } from './constants.js'
 import DeviceChecker from './components/DeviceChecker/DeviceChecker.vue'
+import isMobile from '@nextcloud/vue/dist/Mixins/isMobile.js'
 
 export default {
 	name: 'App',
@@ -88,6 +89,7 @@ export default {
 		sessionIssueHandler,
 		isInCall,
 		participant,
+		isMobile,
 	],
 
 	data() {
@@ -213,7 +215,7 @@ export default {
 
 		token() {
 			// Collapse the sidebar if it's a 1to1 conversation
-			if (this.isOneToOne || BrowserStorage.getItem('sidebarOpen') === 'false' || window.screen.width < (getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-mobile') / 2)) {
+			if (this.isOneToOne || BrowserStorage.getItem('sidebarOpen') === 'false' || this.isMobile) {
 				this.$store.dispatch('hideSidebar')
 			} else if (BrowserStorage.getItem('sidebarOpen') === 'true') {
 				this.$store.dispatch('showSidebar')
@@ -375,6 +377,12 @@ export default {
 		} else if (BrowserStorage.getItem('sidebarOpen') === 'true') {
 			this.$store.dispatch('showSidebar')
 		}
+		if (this.$route.name === 'root' && this.isMobile) {
+			await this.$nextTick()
+			emit('toggle-navigation', {
+				open: true,
+			})
+		}
 	},
 
 	methods: {

src/components/LeftSidebar/ConversationsList/ConversationsList.vue

@@ -38,6 +38,8 @@ import Conversation from './Conversation.vue'
 import Hint from '../../Hint.vue'
 import LoadingPlaceholder from '../../LoadingPlaceholder.vue'
 import { EventBus } from '../../../services/EventBus.js'
+import { emit } from '@nextcloud/event-bus'
+import isMobile from '@nextcloud/vue/dist/Mixins/isMobile.js'
 
 export default {
 	name: 'ConversationsList',
@@ -46,6 +48,7 @@ export default {
 		Hint,
 		LoadingPlaceholder,
 	},
+	mixins: [isMobile],
 	props: {
 		searchText: {
 			type: String,
@@ -117,6 +120,11 @@ export default {
 		// Emit the click event so the search text in the leftsidebar can be reset.
 		handleConversationClick(item) {
 			this.$emit('click-search-result', item.token)
+			if (this.isMobile) {
+				emit('toggle-navigation', {
+					open: false,
+				})
+			}
 		},
 	},
 }

src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue

@@ -313,6 +313,9 @@ export default {
 		 * Focuses the contenteditable div input
 		 */
 		focusInput() {
+			if (this.isMobile) {
+				return
+			}
 			if (!this.$route || this.$route.name === 'conversation') {
 				const contentEditable = this.$refs.contentEditable
 				// This is a hack but it's the only way I've found to focus a contenteditable div
@@ -416,6 +419,10 @@ export default {
 
 			return 'user'
 		},
+
+		isMobile() {
+			return /Android|iPhone|iPad|iPod/i.test(navigator.userAgent)
+		},
 	},
 }
 </script>