From 4d8e274b810cf89c85ec6f73adf194d3334c973e Mon Sep 17 00:00:00 2001
From: Yulia Hermak <germak372@gmail.com>
Date: Mon, 6 May 2024 21:34:46 +0100
Subject: [PATCH 1/4] feat: hook isMobile

---
 src/components/EmojiPicker.vue |  5 +++--
 src/hooks/useIsMobile.ts       | 28 ++++++++++++++++++++++++++++
 2 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 src/hooks/useIsMobile.ts

diff --git a/src/components/EmojiPicker.vue b/src/components/EmojiPicker.vue
index f9cae13ed..310112ae4 100644
--- a/src/components/EmojiPicker.vue
+++ b/src/components/EmojiPicker.vue
@@ -15,7 +15,7 @@ import { useTheme } from '@/hooks/useTheme'
 import axios from 'axios'
 import { defineComponent, onMounted, PropType, ref } from 'vue'
 import { Picker } from 'emoji-mart'
-import { isMobile } from '@/lib/display-mobile'
+import { useIsMobile } from '@/hooks/useIsMobile'
 
 const className = 'emoji-picker'
 const classes = {
@@ -34,6 +34,7 @@ export default defineComponent({
   },
   emits: ['emoji:select'],
   setup(props, { emit }) {
+    const isMobile = useIsMobile()
     const { isDarkTheme } = useTheme()
     const container = ref<HTMLElement>()
     const picker = ref<Picker>()
@@ -43,7 +44,7 @@ export default defineComponent({
 
       picker.value = new Picker({
         data,
-        autoFocus: !isMobile(), // disable autofocus on mobile devices
+        autoFocus: !isMobile.value, // disable autofocus on mobile devices
         dynamicWidth: true,
         navPosition: 'none',
         previewPosition: 'none',
diff --git a/src/hooks/useIsMobile.ts b/src/hooks/useIsMobile.ts
new file mode 100644
index 000000000..781408e12
--- /dev/null
+++ b/src/hooks/useIsMobile.ts
@@ -0,0 +1,28 @@
+import { detect } from 'detect-browser'
+import { ref, onMounted, onUnmounted } from 'vue'
+
+export function useIsMobile() {
+  const isMobile = ref(false)
+
+  function isMobileCheck() {
+    const browser = detect()
+    const isMobileDevice =
+      browser && browser.os ? ['android', 'ios'].includes(browser.os.toLowerCase()) : false
+    return isMobileDevice || window.innerWidth < 450
+  }
+
+  function handleResize() {
+    isMobile.value = isMobileCheck()
+  }
+
+  onMounted(() => {
+    isMobile.value = isMobileCheck()
+    window.addEventListener('resize', handleResize)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', handleResize)
+  })
+
+  return isMobile
+}

From 18a8b556225d443f2944adf1c7933a6c1e79857d Mon Sep 17 00:00:00 2001
From: Yulia Hermak <germak372@gmail.com>
Date: Tue, 14 May 2024 21:15:49 +0100
Subject: [PATCH 2/4] fix: added add blackberry and windows mobile

---
 src/hooks/useIsMobile.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/hooks/useIsMobile.ts b/src/hooks/useIsMobile.ts
index 781408e12..3143b29e2 100644
--- a/src/hooks/useIsMobile.ts
+++ b/src/hooks/useIsMobile.ts
@@ -7,7 +7,9 @@ export function useIsMobile() {
   function isMobileCheck() {
     const browser = detect()
     const isMobileDevice =
-      browser && browser.os ? ['android', 'ios'].includes(browser.os.toLowerCase()) : false
+      browser && browser.os
+        ? ['android', 'ios', 'blackberry', 'windows mobile'].includes(browser.os.toLowerCase())
+        : false
     return isMobileDevice || window.innerWidth < 450
   }
 

From 6c8e570f7bacc8a3579d0221d1c2eb308fd8118d Mon Sep 17 00:00:00 2001
From: bludnic <victorcpla@gmail.com>
Date: Tue, 4 Jun 2024 13:10:20 +0100
Subject: [PATCH 3/4] fix(useIsMobile): fix OS names

---
 src/hooks/useIsMobile.ts | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/hooks/useIsMobile.ts b/src/hooks/useIsMobile.ts
index 3143b29e2..880730cd5 100644
--- a/src/hooks/useIsMobile.ts
+++ b/src/hooks/useIsMobile.ts
@@ -4,21 +4,23 @@ import { ref, onMounted, onUnmounted } from 'vue'
 export function useIsMobile() {
   const isMobile = ref(false)
 
-  function isMobileCheck() {
+  const checkIsMobile = () => {
     const browser = detect()
     const isMobileDevice =
       browser && browser.os
-        ? ['android', 'ios', 'blackberry', 'windows mobile'].includes(browser.os.toLowerCase())
+        ? ['android os', 'ios', 'blackberry os', 'windows mobile'].includes(
+            browser.os.toLowerCase()
+          )
         : false
     return isMobileDevice || window.innerWidth < 450
   }
 
-  function handleResize() {
-    isMobile.value = isMobileCheck()
+  const handleResize = () => {
+    isMobile.value = checkIsMobile()
   }
 
   onMounted(() => {
-    isMobile.value = isMobileCheck()
+    isMobile.value = checkIsMobile()
     window.addEventListener('resize', handleResize)
   })
 

From a8cc9dab3414f27165f9c46f727cf1c9f61778cd Mon Sep 17 00:00:00 2001
From: bludnic <victorcpla@gmail.com>
Date: Tue, 4 Jun 2024 13:11:05 +0100
Subject: [PATCH 4/4] fix(useIsMobile): remove Windows Mobile (discontinued)

---
 src/hooks/useIsMobile.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/hooks/useIsMobile.ts b/src/hooks/useIsMobile.ts
index 880730cd5..96a37938e 100644
--- a/src/hooks/useIsMobile.ts
+++ b/src/hooks/useIsMobile.ts
@@ -8,9 +8,7 @@ export function useIsMobile() {
     const browser = detect()
     const isMobileDevice =
       browser && browser.os
-        ? ['android os', 'ios', 'blackberry os', 'windows mobile'].includes(
-            browser.os.toLowerCase()
-          )
+        ? ['android os', 'ios', 'blackberry os'].includes(browser.os.toLowerCase())
         : false
     return isMobileDevice || window.innerWidth < 450
   }