From 25584b93dcd8eaa25013ce2c601796d098b7ac6f Mon Sep 17 00:00:00 2001
From: Arash <38922203+arashsheyda@users.noreply.github.com>
Date: Thu, 7 Dec 2023 11:57:18 -0700
Subject: [PATCH] feat: add Eye Dropper command (#530)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
---
 packages/devtools/client/app.vue | 39 ++++++++++++++++++++++----------
 1 file changed, 27 insertions(+), 12 deletions(-)

diff --git a/packages/devtools/client/app.vue b/packages/devtools/client/app.vue
index 0b21a0ed8..8770d6b89 100644
--- a/packages/devtools/client/app.vue
+++ b/packages/devtools/client/app.vue
@@ -3,6 +3,7 @@ import 'floating-vue/dist/style.css'
 import 'vanilla-jsoneditor/themes/jse-theme-dark.css'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 import './styles/global.css'
+import { useEyeDropper } from '@vueuse/core'
 import { setupClientRPC } from './setup/client-rpc'
 import { splitScreenAvailable } from '~/composables/storage'
 
@@ -72,19 +73,33 @@ onMounted(async () => {
   }
 })
 
-registerCommands(() =>
-  splitScreenAvailable.value
-    ? [
-        {
-          id: 'action:split-screen',
-          title: `${splitScreenEnabled.value ? 'Close' : 'Open'} Split Screen`,
-          icon: 'i-carbon-split-screen',
-          action: () => {
-            splitScreenEnabled.value = !splitScreenEnabled.value
-          },
+const copy = useCopy()
+const eyeDropper = useEyeDropper({})
+
+registerCommands(() => [
+  ...(splitScreenAvailable.value
+    ? [{
+        id: 'action:split-screen',
+        title: `${splitScreenEnabled.value ? 'Close' : 'Open'} Split Screen`,
+        icon: 'i-carbon-split-screen',
+        action: () => {
+          splitScreenEnabled.value = !splitScreenEnabled.value
+        },
+      }]
+    : []),
+  ...(eyeDropper.isSupported.value
+    ? [{
+        id: 'action:eye-dropper',
+        title: 'Eye Dropper',
+        icon: 'i-carbon-eyedropper',
+        action: async () => {
+          const { sRGBHex } = await eyeDropper.open() || {}
+          if (sRGBHex)
+            copy(sRGBHex)
         },
-      ]
-    : [])
+      }]
+    : []),
+])
 </script>
 
 <template>