fix: add close button when open readonly files on mobile app

Signed-off-by: Luka Trovic <luka@nextcloud.com>

Author: luka-nextcloud

src/components/Editor.vue

@@ -33,6 +33,10 @@
 								:dirty="dirty"
 								:sync-error="syncError"
 								:has-connection-issue="requireReconnect" />
+							<button
+								v-if="isMobileApp"
+								class="icon-close"
+								@click="mobileAppClose" />
 						</ReadonlyBar>
 					</slot>
 				</div>
@@ -104,6 +108,7 @@ import { useSyntaxHighlighting } from '../composables/useSyntaxHighlighting.ts'
 import { CollaborationCursor } from '../extensions/index.js'
 import { exposeForDebugging, removeFromDebugging } from '../helpers/debug.js'
 import { logger } from '../helpers/logger.js'
+import { callMobileMessage, isMobileApp } from '../helpers/mobileApp.js'
 import { setInitialYjsState } from '../helpers/setInitialYjsState.js'
 import { ERROR_TYPE, IDLE_TIMEOUT } from '../services/SyncService.ts'
 import { fetchNode } from '../services/WebdavClient.ts'
@@ -363,6 +368,9 @@ export default defineComponent({
 				},
 			}
 		},
+		isMobileApp() {
+			return isMobileApp()
+		},
 	},
 	watch: {
 		displayed() {
@@ -693,6 +701,13 @@ export default defineComponent({
 			}
 		},
 
+		async mobileAppClose() {
+			setTimeout(async () => {
+				await this.$destroy()
+				callMobileMessage('close')
+			}, 0)
+		},
+
 		/**
 		 * Wrapper to emit events on our own and the parent component
 		 *

src/components/Menu/ReadonlyBar.vue

@@ -77,4 +77,11 @@ export default defineComponent({
 	display: flex;
 	flex-grow: 1;
 }
+.text-menubar__slot {
+	display: flex;
+	align-items: center;
+}
+:deep(.icon-close) {
+	background-color: transparent;
+}
 </style>

src/helpers/mobileApp.js

@@ -0,0 +1,56 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import { logger } from './logger.js'
+
+export const isMobileApp = () => {
+	return (
+		window.DirectEditingMobileInterface
+		|| (window.webkit
+			&& window.webkit.messageHandlers
+			&& window.webkit.messageHandlers.DirectEditingMobileInterface)
+	)
+}
+
+export const callMobileMessage = (messageName, attributes) => {
+	logger.debug(`callMobileMessage ${messageName}`, { attributes })
+	let message = messageName
+	if (typeof attributes !== 'undefined') {
+		message = {
+			MessageName: messageName,
+			Values: attributes,
+		}
+	}
+	let attributesString = null
+	try {
+		attributesString = JSON.stringify(attributes)
+	} catch (e) {
+		attributesString = null
+	}
+
+	// Forward to mobile handler
+	if (
+		window.DirectEditingMobileInterface
+		&& typeof window.DirectEditingMobileInterface[messageName] === 'function'
+	) {
+		if (attributesString === null || typeof attributesString === 'undefined') {
+			window.DirectEditingMobileInterface[messageName]()
+		} else {
+			window.DirectEditingMobileInterface[messageName](attributesString)
+		}
+	}
+
+	// iOS webkit fallback
+	if (
+		window.webkit
+		&& window.webkit.messageHandlers
+		&& window.webkit.messageHandlers.DirectEditingMobileInterface
+	) {
+		window.webkit.messageHandlers.DirectEditingMobileInterface.postMessage(
+			message,
+		)
+	}
+
+	window.postMessage(message)
+}

src/views/DirectEditing.vue

@@ -26,54 +26,13 @@ import Vue from 'vue'
 import Editor from '../components/Editor.vue'
 
 import { logger } from '../helpers/logger.js'
+import { callMobileMessage, isMobileApp } from '../helpers/mobileApp.js'
 
 const log = Vue.observable({
 	messages: [],
 	mtime: 0,
 })
 
-const callMobileMessage = (messageName, attributes) => {
-	logger.debug(`callMobileMessage ${messageName}`, { attributes })
-	let message = messageName
-	if (typeof attributes !== 'undefined') {
-		message = {
-			MessageName: messageName,
-			Values: attributes,
-		}
-	}
-	let attributesString = null
-	try {
-		attributesString = JSON.stringify(attributes)
-	} catch (e) {
-		attributesString = null
-	}
-
-	// Forward to mobile handler
-	if (
-		window.DirectEditingMobileInterface
-		&& typeof window.DirectEditingMobileInterface[messageName] === 'function'
-	) {
-		if (attributesString === null || typeof attributesString === 'undefined') {
-			window.DirectEditingMobileInterface[messageName]()
-		} else {
-			window.DirectEditingMobileInterface[messageName](attributesString)
-		}
-	}
-
-	// iOS webkit fallback
-	if (
-		window.webkit
-		&& window.webkit.messageHandlers
-		&& window.webkit.messageHandlers.DirectEditingMobileInterface
-	) {
-		window.webkit.messageHandlers.DirectEditingMobileInterface.postMessage(
-			message,
-		)
-	}
-
-	window.postMessage(message)
-}
-
 window.addEventListener('message', function (message) {
 	log.messages.push(message.data)
 	logger.debug('postMessage', { message })
@@ -95,12 +54,7 @@ export default {
 			return JSON.parse(this.initial.session) || null
 		},
 		isMobile() {
-			return (
-				window.DirectEditingMobileInterface
-				|| (window.webkit
-					&& window.webkit.messageHandlers
-					&& window.webkit.messageHandlers.DirectEditingMobileInterface)
-			)
+			return isMobileApp()
 		},
 	},
 	beforeMount() {