KI-AGENT: Telefonie und Setup trennen

frontend/components/MainNav.vue

@@ -85,6 +85,11 @@ const links = computed(() => {
       to: "/communication/phone",
       icon: "i-heroicons-phone"
     },
+    {
+      label: "Telefonie Setup",
+      to: "/communication/phone-setup",
+      icon: "i-heroicons-cog-6-tooth"
+    },
     featureEnabled("helpdesk") ? {
       label: "Helpdesk",
       to: "/helpdesk",

frontend/components/TelephonyCallOverlay.vue

@@ -0,0 +1,70 @@
+<script setup>
+const {
+  incomingCall,
+  incomingCaller,
+  selectedExtension,
+  sipLoading,
+  acceptIncomingCall,
+  rejectIncomingCall,
+} = useTelephonySoftphone()
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition duration-200 ease-out"
+      enter-from-class="-translate-y-3 opacity-0"
+      enter-to-class="translate-y-0 opacity-100"
+      leave-active-class="transition duration-150 ease-in"
+      leave-from-class="translate-y-0 opacity-100"
+      leave-to-class="-translate-y-3 opacity-0"
+    >
+      <div
+        v-if="incomingCall"
+        class="fixed inset-x-3 top-3 z-[1000] mx-auto max-w-2xl rounded-lg border border-primary-200 bg-white p-4 shadow-xl ring-1 ring-primary-100 sm:top-5"
+      >
+        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div class="flex min-w-0 items-center gap-3">
+            <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-primary-50 text-primary-600 ring-8 ring-primary-100">
+              <UIcon name="i-heroicons-phone-arrow-down-left" class="h-6 w-6" />
+            </div>
+            <div class="min-w-0">
+              <p class="text-xs font-medium uppercase text-primary-600">
+                Eingehender Anruf
+              </p>
+              <h2 class="truncate text-lg font-semibold text-gray-950">
+                {{ incomingCaller }}
+              </h2>
+              <p class="mt-1 text-xs text-gray-500">
+                Nebenstelle {{ selectedExtension }}
+              </p>
+            </div>
+          </div>
+
+          <div class="grid gap-2 sm:min-w-64 sm:grid-cols-2">
+            <UButton
+              color="success"
+              icon="i-heroicons-phone"
+              size="lg"
+              block
+              :loading="sipLoading"
+              @click="acceptIncomingCall"
+            >
+              Annehmen
+            </UButton>
+            <UButton
+              color="error"
+              variant="soft"
+              icon="i-heroicons-phone-x-mark"
+              size="lg"
+              block
+              @click="rejectIncomingCall"
+            >
+              Ablehnen
+            </UButton>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>