ADD - share own contact from Control Center

frontend/src/components/PhoneControlCenter.vue

@@ -10,6 +10,7 @@ import {
   Pause,
   Plane,
   Play,
+  RadioTower,
   Signal,
   SkipBack,
   SkipForward,
@@ -30,6 +31,8 @@ import { useRouter } from 'vue-router'
 
 import { usePhoneStore } from '@/stores/phone'
 import { useMusicStore } from '@/stores/music'
+import { useEasyShareStore } from '@/stores/easyshare'
+import type { EasySharePayload } from '@/types/easyshare'
 import { nuiCall } from '@/utils/nui'
 
 const props = defineProps<{ opened: boolean }>()
@@ -44,6 +47,7 @@ type ConnectivityPreference =
 
 const phone = usePhoneStore()
 const music = useMusicStore()
+const easyShare = useEasyShareStore()
 const router = useRouter()
 const panel = ref<HTMLElement | null>(null)
 const brightness = ref(phone.preferences.settings.screenBrightness)
@@ -56,6 +60,7 @@ const volume = ref(
 )
 const flashlightActive = ref(false)
 const flashlightPending = ref(false)
+const easySharePending = ref(false)
 const previousAlertVolume = ref(volume.value || 75)
 
 const inactiveGlassColors = {
@@ -87,6 +92,10 @@ const flashlightColors = computed(() =>
       }
     : inactiveGlassColors,
 )
+const easyShareColors = {
+  bgIos: 'bg-[#0a84ff]',
+  shadowIos: 'shadow-ios-dark-glass',
+}
 const brightnessStyle = computed<CSSProperties>(() => ({
   '--control-level': `${brightness.value}%`,
 }))
@@ -202,6 +211,23 @@ async function toggleFlashlight(): Promise<void> {
   flashlightPending.value = false
 }
 
+async function shareOwnContact(): Promise<void> {
+  if (easySharePending.value) return
+  easySharePending.value = true
+  const response = await nuiCall<EasySharePayload>('easyshare:own-contact')
+  easySharePending.value = false
+  if (!response.success || !response.data) {
+    console.error(
+      '[ControlCenter] Could not load own EasyShare contact.',
+      response.error,
+    )
+    return
+  }
+  emit('close')
+  easyShare.open(response.data)
+  await easyShare.showNearby()
+}
+
 function openApp(path: string): void {
   emit('close')
   void router.push(path)
@@ -360,9 +386,7 @@ onBeforeUnmount(() => {
         </div>
 
         <div class="control-center__middle-grid">
-          <div
-            class="control-center__round-control control-center__round-control--wide"
-          >
+          <div class="control-center__round-control">
             <k-glass
               component="button"
               type="button"
@@ -385,6 +409,20 @@ onBeforeUnmount(() => {
             </k-glass>
           </div>
 
+          <div class="control-center__round-control">
+            <k-glass
+              component="button"
+              type="button"
+              class="control-center__round-button control-center__round-button--easyshare"
+              :colors="easyShareColors"
+              :disabled="easySharePending || !phone.device?.sim"
+              :aria-label="phone.t('ControlCenter.easyShareContact')"
+              @click="shareOwnContact"
+            >
+              <RadioTower aria-hidden="true" />
+            </k-glass>
+          </div>
+
           <k-glass
             class="control-center__slider control-center__slider--brightness"
             :colors="inactiveGlassColors"
@@ -712,10 +750,6 @@ onBeforeUnmount(() => {
   justify-content: center;
 }
 
-.control-center__round-control--wide {
-  grid-column: 1 / span 2;
-}
-
 .control-center__round-control > span,
 .control-center__quick-action > span {
   width: 100%;
@@ -746,6 +780,11 @@ onBeforeUnmount(() => {
   color: #ff453a;
 }
 
+.control-center__round-button--easyshare {
+  background: #0a84ff !important;
+  box-shadow: 0 8px 22px rgb(10 132 255 / 34%) !important;
+}
+
 .control-center__focus-button {
   display: flex;
   grid-column: 1 / span 2;