refactor: changed CallUI code and made Appvue cleaner

frontend/src/App.vue

@@ -1,16 +1,13 @@
 <template>
   <router-view v-if="$route.name == 'Login'" />
-  <CallUI v-else-if="session().isLoggedIn">
-    <DesktopLayout>
+  <DesktopLayout v-else-if="session().isLoggedIn">
     <router-view />
   </DesktopLayout>
-  </CallUI>
   <Toasts />
 </template>
 
 <script setup>
 import DesktopLayout from '@/components/DesktopLayout.vue'
 import { sessionStore as session } from '@/stores/session'
-import CallUI from './components/CallUI.vue'
 import { Toasts } from 'frappe-ui'
 </script>

frontend/src/components/AppHeader.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="flex">
+    <div id="app-header" class="flex-1"></div>
+    <div class="flex items-center justify-center">
+      <CallUI />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import CallUI from '@/components/CallUI.vue'
+</script>

frontend/src/components/CallUI.vue

@@ -1,5 +1,4 @@
 <template>
-  <slot />
   <div
     v-show="showCallPopup"
     ref="callPopup"
@@ -106,7 +105,6 @@
       </div>
     </div>
   </div>
-  <Teleport to="#call-area">
   <div
     v-show="showSmallCallWindow"
     class="flex items-center justify-between gap-3 bg-gray-900 text-base text-gray-300 -ml-3 mr-2 px-2 py-[7px] rounded-lg cursor-pointer select-none"
@@ -173,7 +171,6 @@
       </Button>
     </div>
   </div>
-  </Teleport>
   <NoteModal v-model="showNoteModal" :note="note" @updateNote="updateNote" />
 </template>
 

frontend/src/components/DesktopLayout.vue

@@ -4,14 +4,12 @@
       <AppSidebar />
     </div>
     <div class="flex-1 flex flex-col h-full overflow-auto">
-      <div id="app-header" class="flex">
-        <div id="header-area" class="flex-1"></div>
-        <div id="call-area" class="flex items-center justify-center"></div>
-      </div>
+      <AppHeader />
       <slot />
     </div>
   </div>
 </template>
 <script setup>
 import AppSidebar from '@/components/AppSidebar.vue'
+import AppHeader from '@/components/AppHeader.vue'
 </script>

frontend/src/components/LayoutHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <Teleport to="#header-area" v-if="showHeader">
+  <Teleport to="#app-header" v-if="showHeader">
     <header class="flex justify-between items-center px-5 py-3">
       <div class="flex items-center gap-2">
         <slot name="left-header" />

frontend/src/pages/Deal.vue

@@ -389,7 +389,7 @@ import {
   Avatar,
   call,
 } from 'frappe-ui'
-import { ref, computed, inject } from 'vue'
+import { ref, computed } from 'vue'
 
 const { getUser, users } = usersStore()
 const { getContact, contacts } = contactsStore()

frontend/src/pages/Lead.vue

@@ -357,7 +357,7 @@ import {
   Avatar,
   call,
 } from 'frappe-ui'
-import { ref, computed, inject } from 'vue'
+import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
 
 const { getUser, users } = usersStore()