feat: add edit gottesdienst button on card header for admin

public/src/components/GottesdienstCard.vue

@@ -12,6 +12,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{
     toggleMark: [gid: number, mid: number]
+    editGottesdienst: [id: number]
 }>()
 
 const isAdmin = computed(() => props.currentUsername === "admin")
@@ -159,6 +160,9 @@ function getOwnMarkHint(): string {
                     <i v-if="getOwnMarkIcon()" class="icon">{{ getOwnMarkIcon() }}</i>
                 </button>
                 <span class="name">{{ gottesdienst.name !== "" ? gottesdienst.name : "Gottesdienst" }}</span>
+                <button v-if="isAdmin" class="edit-godi-btn" @click="emit('editGottesdienst', gottesdienst.id)" title="Gottesdienst bearbeiten">
+                    <i class="icon">edit</i>
+                </button>
             </div>
             <div class="info">
                 <span class="date">am {{ formatWeekday(gottesdienst.date) }} {{ formatDay(gottesdienst.date) }}</span>
@@ -225,6 +229,34 @@ function getOwnMarkHint(): string {
         .name {
             font-weight: 700;
             font-size: 18px;
+            flex: 1;
+        }
+
+        .edit-godi-btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 32px;
+            height: 32px;
+            padding: 0;
+            margin: 0;
+            border: none;
+            border-radius: 4px;
+            background: transparent;
+            color: #aaa;
+            cursor: pointer;
+            transition: 100ms;
+            flex-shrink: 0;
+
+            i {
+                font-size: 20px;
+                margin: 0;
+            }
+
+            &:hover {
+                background: #f0f0f0;
+                color: #555;
+            }
         }
     }
 
@@ -321,6 +353,7 @@ function getOwnMarkHint(): string {
         gap: 6px;
         width: 100%;
         padding: 6px 0;
+        margin: 0;
         border: none;
         background: transparent;
         font-size: 14px;

public/src/components/ListView.vue

@@ -15,6 +15,7 @@ defineProps<{
 const emit = defineEmits<{
     toggleMark: [gid: number, mid: number]
     addGottesdienst: []
+    editGottesdienst: [id: number]
     addMinistrant: []
     editMinistrant: [id: number]
     importZelebrationsplan: []
@@ -48,6 +49,7 @@ const activeTab = ref<"gottesdienste" | "ministranten">("gottesdienste")
                 :editable="editable"
                 :current-username="currentUsername"
                 @toggle-mark="(gid, mid) => emit('toggleMark', gid, mid)"
+                @edit-gottesdienst="(id) => emit('editGottesdienst', id)"
             />
             <button v-if="admin" class="add-godi" @click="emit('addGottesdienst')">
                 <i class="icon">add</i> Gottesdienst