From 340b9f224aaaf8e284081546af652b202ff3d430 Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Mon, 30 Mar 2026 16:51:34 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=9A=B8=20Prevent=20context=20&=20anno?=
 =?UTF-8?q?tation=20menu=20conflict?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/AnnotationMenu.vue    |  5 ++++-
 composables/use-app-detection.ts | 23 +++++++++++++++++------
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/components/AnnotationMenu.vue b/components/AnnotationMenu.vue
index 1246c5efc..9f4f2f7d5 100644
--- a/components/AnnotationMenu.vue
+++ b/components/AnnotationMenu.vue
@@ -27,6 +27,8 @@
 <script setup lang="ts">
 import { ANNOTATION_COLORS, ANNOTATION_INDICATOR_COLORS_MAP } from '~/constants/annotations'
 
+const { isIOS } = useAppDetection()
+
 const MENU_PADDING = 8
 
 const props = defineProps<{
@@ -45,7 +47,8 @@ const menuEl = useTemplateRef<HTMLDivElement>('menuEl')
 const { width: menuWidth } = useElementSize(menuEl)
 const { width: viewportWidth, height: viewportHeight } = useWindowSize()
 
-const shouldAppearFromBottom = computed(() => props.position.y > viewportHeight.value / 2)
+const isInBottomHalfViewport = computed(() => props.position.y > viewportHeight.value / 2)
+const shouldAppearFromBottom = computed(() => !isIOS.value || isInBottomHalfViewport.value)
 
 const menuStyle = computed(() => {
   const minX = menuWidth.value / 2 + MENU_PADDING * 2
diff --git a/composables/use-app-detection.ts b/composables/use-app-detection.ts
index dadf5a46e..308e4dfdc 100644
--- a/composables/use-app-detection.ts
+++ b/composables/use-app-detection.ts
@@ -1,15 +1,26 @@
-const APP_USER_AGENT_PREFIX = '3ook-com-app'
+// e.g. "3ook-com-app/1.1.0 (iOS 18.0) Build/42"
+const APP_USER_AGENT_REGEX = /^3ook-com-app\/[\d.]+ \((iOS|Android) [\d.]+\)/
 
 export function useAppDetection() {
   const getRouteQuery = useRouteQuery()
 
-  const isAppUserAgent = import.meta.server
-    ? useRequestHeaders(['user-agent'])['user-agent']?.startsWith(APP_USER_AGENT_PREFIX) || false
-    : navigator.userAgent?.startsWith(APP_USER_AGENT_PREFIX) || false
+  const userAgent = import.meta.server
+    ? useRequestHeaders(['user-agent'])['user-agent'] || ''
+    : navigator.userAgent || ''
+
+  const appUAMatches = userAgent.match(APP_USER_AGENT_REGEX)
+  const appOSName = appUAMatches?.[1]
 
   const isApp = computed(() => {
-    return isAppUserAgent || getRouteQuery('app') === '1'
+    return !!appUAMatches || getRouteQuery('app') === '1'
   })
 
-  return { isApp }
+  const isIOS = computed(() => appOSName === 'iOS' || /iPhone|iPad/.test(userAgent))
+  const isAndroid = computed(() => appOSName === 'Android' || /Android/.test(userAgent))
+
+  return {
+    isApp,
+    isIOS,
+    isAndroid,
+  }
 }

From 76d8dfc890f458c1381b9819638e9e457da9c323 Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Fri, 27 Mar 2026 10:44:39 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=9A=B8=20Hide=20context=20menu=20when?=
 =?UTF-8?q?=20annotation=20menu=20open?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/reader/epub.vue | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/pages/reader/epub.vue b/pages/reader/epub.vue
index f49c98281..28405ca00 100644
--- a/pages/reader/epub.vue
+++ b/pages/reader/epub.vue
@@ -419,6 +419,8 @@ const isMobileTocOpen = computed({
   },
 })
 
+const { isIOS, isAndroid } = useAppDetection()
+
 const isPageLoading = ref(false)
 
 const isAnnotationMenuVisible = ref(false)
@@ -618,6 +620,9 @@ function applyTheme() {
     textCSS.color = bodyCSS.color as string
     textCSS['background-color'] = 'transparent !important'
   }
+  if (isIOS.value || isAndroid.value) {
+    textCSS['-webkit-touch-callout'] = 'none'
+  }
   const anchorCSS: Record<string, string> = {
     color: isDarkMode ? '#9ecfff !important' : '#0066cc',
   }
@@ -647,6 +652,7 @@ let removeSelectAllByHotkeyListener: (() => void) | undefined
 let removeCopyListener: (() => void) | undefined
 let removeMouseUpListener: (() => void) | undefined
 let removeSelectionChangeListener: (() => void) | undefined
+let removeContextMenuListener: (() => void) | undefined
 const renditionElement = useTemplateRef<HTMLDivElement>('reader')
 const renditionViewWindow = ref<Window | undefined>(undefined)
 
@@ -884,6 +890,15 @@ async function loadEPub() {
     }, 300)
     removeSelectionChangeListener = useEventListener(view.window.document, 'selectionchange', debouncedSelectionChange)
 
+    if (removeContextMenuListener) {
+      removeContextMenuListener()
+    }
+    if (isIOS.value || isAndroid.value) {
+      removeContextMenuListener = useEventListener(view.window, 'contextmenu', (event: Event) => {
+        event.preventDefault()
+      })
+    }
+
     renderAnnotations()
   })
 
@@ -1537,6 +1552,7 @@ onBeforeUnmount(() => {
   removeCopyListener?.()
   removeMouseUpListener?.()
   removeSelectionChangeListener?.()
+  removeContextMenuListener?.()
   renderedHighlights.clear()
   renditionViewWindow.value = undefined
   rendition.value?.destroy()

From 4e5bf517231890d362471d10cce0d9cdd517e595 Mon Sep 17 00:00:00 2001
From: "Ng Wing Tat, David" <i@ngwingt.at>
Date: Fri, 27 Mar 2026 10:45:12 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=9A=B8=20Hide=20context=20menu=20when?=
 =?UTF-8?q?=20annotation=20menu=20opens=20for=20iOS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/reader/epub.vue | 49 ++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 48 insertions(+), 1 deletion(-)

diff --git a/pages/reader/epub.vue b/pages/reader/epub.vue
index 28405ca00..c66d0aeb2 100644
--- a/pages/reader/epub.vue
+++ b/pages/reader/epub.vue
@@ -585,6 +585,7 @@ const FONT_SIZE_OPTIONS = [
 ]
 const DEFAULT_FONT_SIZE_INDEX = 8 // Default to 24px
 const COPY_CHAR_LIMIT = 100
+const SELECTION_CHANGE_DEBOUNCE_MS = 300
 const fontSize = useSyncedBookSettings({
   nftClassId: nftClassId.value,
   key: 'fontSize',
@@ -887,7 +888,7 @@ async function loadEPub() {
     }
     const debouncedSelectionChange = useDebounceFn(() => {
       handleTextSelection(view.window)
-    }, 300)
+    }, SELECTION_CHANGE_DEBOUNCE_MS)
     removeSelectionChangeListener = useEventListener(view.window.document, 'selectionchange', debouncedSelectionChange)
 
     if (removeContextMenuListener) {
@@ -1227,6 +1228,38 @@ function removeAnnotationHighlight(cfi: string) {
   renderedHighlights.delete(cfi)
 }
 
+let tempHighlightCfi: string | null = null
+
+function removeTempHighlight() {
+  if (!tempHighlightCfi || !rendition.value) return
+  try {
+    rendition.value.annotations.remove(tempHighlightCfi, 'underline')
+  }
+  catch {
+    // Ignore
+  }
+  tempHighlightCfi = null
+}
+
+function addTempHighlight(cfi: string) {
+  removeTempHighlight()
+  if (!rendition.value) return
+  try {
+    rendition.value.annotations.underline(cfi, {}, undefined, undefined, {
+      'stroke': '#50e3c2',
+      'stroke-width': '3px',
+    })
+    tempHighlightCfi = cfi
+  }
+  catch {
+    // Ignore
+  }
+}
+
+watch(isAnnotationMenuVisible, (visible) => {
+  if (!visible) removeTempHighlight()
+})
+
 function renderAnnotations() {
   if (!rendition.value) return
 
@@ -1256,7 +1289,11 @@ function handleAnnotationClick(annotationId: string) {
   }
 }
 
+let isClearingSelection = false
+
 function handleTextSelection(viewWindow: Window) {
+  if (isClearingSelection) return
+
   const selection = viewWindow.getSelection()
   if (!selection || selection.isCollapsed || !selection.toString().trim()) {
     isAnnotationMenuVisible.value = false
@@ -1308,6 +1345,16 @@ function handleTextSelection(viewWindow: Window) {
       }
     }
 
+    // On iOS, clear selection to dismiss native callout menu and add temp highlight
+    if (isIOS.value) {
+      isClearingSelection = true
+      selection.removeAllRanges()
+      addTempHighlight(cfiRange)
+      setTimeout(() => {
+        isClearingSelection = false
+      }, SELECTION_CHANGE_DEBOUNCE_MS + 100)
+    }
+
     isAnnotationMenuVisible.value = true
   }
   catch (error) {