Added Frontend

frontend/components/displayPinnendLinks.vue

@@ -0,0 +1,67 @@
+<script setup>
+import { Browser } from "@capacitor/browser"
+
+const props = defineProps({
+  links: {
+    type: Array,
+    required: true,
+  },
+})
+
+/**
+ * Öffnet externen Link in iOS/Android über InApp Browser.
+ * Öffnet externen Link im Web über window.open.
+ * Interne Links → navigateTo
+ */
+async function openLink(link) {
+  if (link.external) {
+    if (useCapacitor().getIsNative()) {
+      await Browser.open({
+        url: link.to,
+        presentationStyle: "popover",
+      })
+    } else {
+      window.open(link.to, "_blank")
+    }
+  } else {
+    return navigateTo(link.to)
+  }
+}
+</script>
+
+<template>
+  <UDashboardCard
+      v-if="links.length > 0"
+      title="Schnellzugriffe"
+  >
+    <div class="space-y-2">
+
+      <div
+          v-for="(link, index) in links"
+          :key="index"
+          class="
+          p-3 bg-gray-50 dark:bg-gray-900
+          rounded-xl border flex items-center justify-between
+          active:scale-95 transition cursor-pointer
+        "
+          @click="openLink(link)"
+      >
+        <div class="flex items-center gap-3">
+          <UIcon
+              :name="link.icon || 'i-heroicons-link'"
+              class="w-6 h-6 text-primary-500"
+          />
+          <span class="font-medium truncate max-w-[60vw]">
+            {{ link.label }}
+          </span>
+        </div>
+
+        <UIcon
+            name="i-heroicons-chevron-right-20-solid"
+            class="w-5 h-5 text-gray-400"
+        />
+      </div>
+
+    </div>
+  </UDashboardCard>
+</template>