From d8ca8d743c1a1f014cc466e8f43f053f1a020b93 Mon Sep 17 00:00:00 2001
From: Jonas Gerg <joniogerg@gmail.com>
Date: Tue, 14 Jul 2026 21:22:58 +0200
Subject: [PATCH 01/26] Make birthday nullable in ministrant model, DAO, and DB
 schema

---
 .../src/main/kotlin/de/walamana/models/Ministranten.kt | 10 +++++-----
 .../src/main/kotlin/de/walamana/plugins/Databases.kt   |  1 +
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/private/minis-backend/src/main/kotlin/de/walamana/models/Ministranten.kt b/private/minis-backend/src/main/kotlin/de/walamana/models/Ministranten.kt
index 25cbec5..97b06a6 100644
--- a/private/minis-backend/src/main/kotlin/de/walamana/models/Ministranten.kt
+++ b/private/minis-backend/src/main/kotlin/de/walamana/models/Ministranten.kt
@@ -20,7 +20,7 @@ data class Ministrant(
     val passwordHash: String? = "",
     val firstname: String,
     val lastname: String,
-    val birthday: DateAsLong,
+    val birthday: DateAsLong? = null,
     val privileges: CommaSeperatedStringList
 )
 
@@ -38,7 +38,7 @@ object Ministranten : Table() {
     val passwordHash = varchar("passwordHash", 1024)
     val firstname = varchar("firstname", 128)
     val lastname = varchar("lastname", 128)
-    val birthday = long("birthday")
+    val birthday = long("birthday").nullable()
     val privileges = varchar("privileges", 1024)
 
     override val primaryKey = PrimaryKey(id)
@@ -51,7 +51,7 @@ object MinistrantenDao {
         if (showPasswordHash) row[Ministranten.passwordHash] else "",
         row[Ministranten.firstname],
         row[Ministranten.lastname],
-        Date(row[Ministranten.birthday]),
+        row[Ministranten.birthday]?.let(::Date),
         row[Ministranten.privileges].split(",")
     )
 
@@ -96,7 +96,7 @@ object MinistrantenDao {
         passwordHash: String,
         firstname: String,
         lastname: String,
-        birthday: Date,
+        birthday: Date?,
         privileges: List<String>
     ) = dbQuery {
         val statement = Ministranten.insert {
@@ -104,7 +104,7 @@ object MinistrantenDao {
             it[Ministranten.passwordHash] = ""
             it[Ministranten.firstname] = firstname
             it[Ministranten.lastname] = lastname
-            it[Ministranten.birthday] = birthday.time
+            it[Ministranten.birthday] = birthday?.time
             it[Ministranten.privileges] = privileges.joinToString(",")
         }
         Security.setPassword(username, passwordHash)
diff --git a/private/minis-backend/src/main/kotlin/de/walamana/plugins/Databases.kt b/private/minis-backend/src/main/kotlin/de/walamana/plugins/Databases.kt
index 65fb568..a0a4d2e 100644
--- a/private/minis-backend/src/main/kotlin/de/walamana/plugins/Databases.kt
+++ b/private/minis-backend/src/main/kotlin/de/walamana/plugins/Databases.kt
@@ -29,6 +29,7 @@ fun Application.configureDatabases() {
         SchemaUtils.create(GottesdienstGroups)
         SchemaUtils.create(Gottesdienste)
         SchemaUtils.create(Marks)
+        exec("ALTER TABLE MINISTRANTEN ALTER COLUMN birthday BIGINT NULL;")
     }
 }
 
-- 
2.54.0


From ad29d0682ef04b1ca45c424404e6f6237e8f3b05 Mon Sep 17 00:00:00 2001
From: Jonas Gerg <joniogerg@gmail.com>
Date: Tue, 14 Jul 2026 21:51:55 +0200
Subject: [PATCH 02/26] feat: add list view with GottesdienstCard components

- New GottesdienstCard component shows each service with its info
- Shows the currently logged-in user's mark as a toggle checkbox
- Lists ministrants who have responded with their mark status
- Admin view hides the checkbox, shows responses only
- New ListView wrapper renders all cards
- PlanView gets a Tabelle/Liste toggle between table and card views
---
 public/src/components/GottesdienstCard.vue | 345 +++++++++++++++++++++
 public/src/components/ListView.vue         |  37 +++
 public/src/views/PlanView.vue              | 111 +++++--
 3 files changed, 470 insertions(+), 23 deletions(-)
 create mode 100644 public/src/components/GottesdienstCard.vue
 create mode 100644 public/src/components/ListView.vue

diff --git a/public/src/components/GottesdienstCard.vue b/public/src/components/GottesdienstCard.vue
new file mode 100644
index 0000000..f57e05b
--- /dev/null
+++ b/public/src/components/GottesdienstCard.vue
@@ -0,0 +1,345 @@
+<script setup lang="ts">
+import type {Gottesdienst, Mark, SimplifiedMinistrant} from "@/models/models"
+import {computed} from "vue"
+
+const props = defineProps<{
+    gottesdienst: Gottesdienst
+    ministranten: SimplifiedMinistrant[]
+    marks: Mark[]
+    editable: string[]
+    currentUsername: string
+}>()
+
+const emit = defineEmits<{
+    toggleMark: [gid: number, mid: number]
+}>()
+
+const isAdmin = computed(() => props.currentUsername === "admin")
+const currentMini = computed(() => props.ministranten.find(m => m.username === props.currentUsername))
+const showCheckbox = computed(() => !!currentMini.value && !isAdmin.value)
+
+const relevantMarks = computed(() =>
+    props.marks.filter(m => m.gid === props.gottesdienst.id && m.value !== 0)
+)
+
+const sortedMinistrants = computed(() => {
+    const miniMap = new Map(props.ministranten.map(m => [m.id, m]))
+    return relevantMarks.value
+        .map(m => ({ministrant: miniMap.get(m.mid), mark: m}))
+        .filter((entry): entry is {ministrant: SimplifiedMinistrant; mark: Mark} => !!entry.ministrant)
+})
+
+function getMark(gid: number, mid: number): Mark {
+    const mark = props.marks.find(m => m.mid === mid && m.gid === gid)
+    return mark ?? {gid, mid, value: 0}
+}
+
+function getIconForMark(gid: number, mid: number): string {
+    const mark = getMark(gid, mid).value
+    switch (mark) {
+        case -1: return "remove"
+        case 0: return "question_mark"
+        case 1: return "close"
+    }
+    return ""
+}
+
+function getMarkClass(gid: number, mid: number): Record<string, boolean> {
+    const mark = getMark(gid, mid).value
+    return {
+        minus: mark === -1,
+        neutral: mark === 0,
+        cross: mark === 1
+    }
+}
+
+function getHintForMark(gid: number, mid: number): string {
+    const mark = getMark(gid, mid).value
+    switch (mark) {
+        case -1: return "Ich kann nicht"
+        case 0: return "Egal"
+        case 1: return "Ich komme"
+    }
+    return ""
+}
+
+function two(s: number): string {
+    return (s < 10 ? "0" : "") + s
+}
+
+function formatDay(time: number | Date): string {
+    const date = new Date(time)
+    return two(date.getDate()) + "." + two(date.getMonth() + 1) + "."
+}
+
+function formatTime(time: number | Date): string {
+    const date = new Date(time)
+    return two(date.getHours()) + ":" + two(date.getMinutes())
+}
+
+function formatWeekday(time: number | Date): string {
+    const date = new Date(time)
+    switch (date.getDay()) {
+        case 1: return "Montag"
+        case 2: return "Dienstag"
+        case 3: return "Mittwoch"
+        case 4: return "Donnerstag"
+        case 5: return "Freitag"
+        case 6: return "Samstag"
+        case 0: return "Sonntag"
+    }
+    return ""
+}
+
+function toggleOwnMark() {
+    if (!currentMini.value) return
+    emit("toggleMark", props.gottesdienst.id, currentMini.value.id)
+}
+
+function getOwnMarkIcon(): string {
+    if (!currentMini.value) return ""
+    const mark = getMark(props.gottesdienst.id, currentMini.value.id).value
+    switch (mark) {
+        case -1: return "close"
+        case 0: return ""
+        case 1: return "check"
+    }
+    return ""
+}
+
+function getOwnMarkClass(): Record<string, boolean> {
+    if (!currentMini.value) return {}
+    const mark = getMark(props.gottesdienst.id, currentMini.value.id).value
+    return {
+        minus: mark === -1,
+        neutral: mark === 0,
+        cross: mark === 1
+    }
+}
+
+function getOwnMarkHint(): string {
+    if (!currentMini.value) return ""
+    const mark = getMark(props.gottesdienst.id, currentMini.value.id).value
+    switch (mark) {
+        case -1: return "Ich kann nicht"
+        case 0: return "keine Angabe"
+        case 1: return "Ich komme"
+    }
+    return ""
+}
+</script>
+
+<template>
+    <div class="card">
+        <div class="card-header">
+            <div class="title-row">
+                <button
+                    v-if="showCheckbox"
+                    class="own-mark"
+                    :class="getOwnMarkClass()"
+                    @click="toggleOwnMark"
+                    :title="getOwnMarkHint()"
+                >
+                    <i v-if="getOwnMarkIcon()" class="icon">{{ getOwnMarkIcon() }}</i>
+                </button>
+                <span class="name">{{ gottesdienst.name !== "" ? gottesdienst.name : "Gottesdienst" }}</span>
+            </div>
+            <div class="info">
+                <span class="date">am {{ formatWeekday(gottesdienst.date) }} {{ formatDay(gottesdienst.date) }}</span>
+                <span class="time">um {{ formatTime(gottesdienst.date) }} Uhr</span>
+                <span class="attendance">Anwesenheit: {{ formatTime(gottesdienst.attendance) }}</span>
+            </div>
+        </div>
+
+        <div class="card-body" v-if="sortedMinistrants.length > 0">
+            <div
+                v-for="{ministrant, mark} in sortedMinistrants"
+                :key="ministrant.id"
+                class="ministrant-row"
+                :class="getMarkClass(gottesdienst.id, ministrant.id)"
+            >
+                <span class="mini-name">{{ ministrant.firstname }} {{ ministrant.lastname }}</span>
+                <span class="mark-badge">
+                    <i class="icon">{{ getIconForMark(gottesdienst.id, ministrant.id) }}</i>
+                    <span class="hint">{{ getHintForMark(gottesdienst.id, ministrant.id) }}</span>
+                </span>
+            </div>
+        </div>
+        <div class="card-body empty" v-else>
+            <span class="no-marks">Keine Rückmeldungen</span>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="less">
+.card {
+    background: #ffffff;
+    border: 1px solid #d7d5d5;
+    border-radius: 8px;
+    margin-bottom: 12px;
+    overflow: hidden;
+}
+
+.card-header {
+    padding: 12px 16px;
+    border-bottom: 1px solid #e8e8e8;
+
+    .title-row {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        margin-bottom: 4px;
+
+        .name {
+            font-weight: 700;
+            font-size: 18px;
+        }
+    }
+
+    .own-mark {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 36px;
+        height: 36px;
+        border: 2px solid #cecece;
+        border-radius: 6px;
+        background: #ffffff;
+        cursor: pointer;
+        flex-shrink: 0;
+        padding: 0;
+        margin: 0;
+        transition: 100ms;
+
+        i {
+            margin: 0;
+        }
+
+        &:hover {
+            border-color: #919191;
+        }
+
+        &.minus {
+            border-color: #690b0b;
+            background: #fdd5d5;
+            color: #690b0b;
+        }
+
+        &.cross {
+            border-color: #045b04;
+            background: #d1fcd1;
+            color: #045b04;
+        }
+
+        &.neutral {
+            border-color: #9f9f9f;
+            background: #f0f0f0;
+            color: #9f9f9f;
+        }
+
+        i {
+            font-size: 20px;
+            font-variation-settings: "wght" 600;
+        }
+    }
+
+    .info {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px 16px;
+        font-size: 14px;
+        color: #656565;
+
+        span {
+            font-weight: 700;
+        }
+    }
+}
+
+.card-body {
+    padding: 8px 16px;
+
+    &.empty {
+        padding: 16px;
+        text-align: center;
+        color: #9f9f9f;
+        font-size: 14px;
+    }
+
+    .ministrant-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 8px 0;
+        border-bottom: 1px solid #f0f0f0;
+
+        &:last-child {
+            border-bottom: none;
+        }
+
+        .mini-name {
+            font-size: 15px;
+            font-weight: 500;
+        }
+
+        .mark-badge {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+
+            i {
+                border-radius: 100%;
+                padding: 2px;
+                font-size: 20px;
+            }
+
+            .hint {
+                font-size: 13px;
+                white-space: nowrap;
+            }
+        }
+
+        &.minus {
+            .mark-badge {
+                color: #690b0b;
+
+                i {
+                    background: #fdd5d5;
+                }
+
+                .hint {
+                    color: #690b0b;
+                }
+            }
+        }
+
+        &.cross {
+            .mark-badge {
+                color: #045b04;
+
+                i {
+                    background: #d1fcd1;
+                }
+
+                .hint {
+                    color: #045b04;
+                }
+            }
+        }
+
+        &.neutral {
+            .mark-badge {
+                color: #9f9f9f;
+
+                i {
+                    background: #f0f0f0;
+                }
+
+                .hint {
+                    color: #9f9f9f;
+                }
+            }
+        }
+    }
+}
+</style>
diff --git a/public/src/components/ListView.vue b/public/src/components/ListView.vue
new file mode 100644
index 0000000..ff9f6d2
--- /dev/null
+++ b/public/src/components/ListView.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type {Gottesdienst, Mark, SimplifiedMinistrant} from "@/models/models"
+import GottesdienstCard from "@/components/GottesdienstCard.vue"
+
+defineProps<{
+    gottesdienste: Gottesdienst[]
+    ministranten: SimplifiedMinistrant[]
+    marks: Mark[]
+    editable: string[]
+    currentUsername: string
+}>()
+
+const emit = defineEmits<{
+    toggleMark: [gid: number, mid: number]
+}>()
+</script>
+
+<template>
+    <div class="list-view">
+        <GottesdienstCard
+            v-for="godi in gottesdienste"
+            :key="godi.id"
+            :gottesdienst="godi"
+            :ministranten="ministranten"
+            :marks="marks"
+            :editable="editable"
+            :current-username="currentUsername"
+            @toggle-mark="(gid, mid) => emit('toggleMark', gid, mid)"
+        />
+    </div>
+</template>
+
+<style scoped lang="less">
+.list-view {
+    padding: 12px;
+}
+</style>
diff --git a/public/src/views/PlanView.vue b/public/src/views/PlanView.vue
index deb49d0..d86497f 100644
--- a/public/src/views/PlanView.vue
+++ b/public/src/views/PlanView.vue
@@ -5,6 +5,7 @@ import TablePlan from "@/components/TablePlan.vue";
 import {API, UnauthorizedError} from "@/services/api";
 import type {Gottesdienst, GottesdienstGroup, Mark, SimplifiedMinistrant} from "@/models/models";
 import MobilePlan from "@/components/MobilePlan.vue";
+import ListView from "@/components/ListView.vue";
 import PlanActionBar from "@/components/PlanActionBar.vue";
 import {Auth} from "@/services/auth";
 import GroupView from "@/components/GroupView.vue";
@@ -38,6 +39,8 @@ const plan = reactive<{
     groups: []
 })
 const mobile = ref(window.innerWidth <= MAX_WIDTH_MOBILE)
+const viewMode = ref<"table" | "list">("table")
+const currentUsername = ref("")
 const editedMarks = reactive<Mark[]>([]);
 const editPlanAdmin = ref(false)
 const planId = ref(parseInt(route.params.id as string))
@@ -79,6 +82,7 @@ async function loadPlan() {
 Auth.loggedInSubject.subscribe(async (loggedIn) => {
     console.log("logged in " + loggedIn)
     if (loggedIn) {
+        currentUsername.value = Auth.getUser()
         plan.editable = Auth.getPrivileges()
         if (Auth.getUser() == "admin") {
             editPlanAdmin.value = true
@@ -86,6 +90,7 @@ Auth.loggedInSubject.subscribe(async (loggedIn) => {
             console.log("Plan", plan.ministranten)
         }
     } else {
+        currentUsername.value = ""
         editPlanAdmin.value = false
         plan.editable = []
     }
@@ -312,40 +317,70 @@ async function importZelebrationsplan() {
 <template>
     <main>
 
-        <div class="container">
+        <div class="container" :class="{
+            'mobile-view': mobile && viewMode === 'table'
+        }">
 
             <GroupView :groups="plan.groups" :admin="editPlanAdmin"
                        @new="createNewPlan" @delete="deletePlan" @edit="editPlan" class="no-print"/>
-            <TablePlan
+
+            <div class="view-toggle no-print" v-if="plan.gottesdienste.length > 0">
+                <button
+                    class="flat"
+                    :class="{ active: viewMode === 'table' }"
+                    @click="viewMode = 'table'"
+                ><i>table_rows</i> Tabelle</button>
+                <button
+                    class="flat"
+                    :class="{ active: viewMode === 'list' }"
+                    @click="viewMode = 'list'"
+                ><i>list</i> Liste</button>
+            </div>
+
+            <ListView
                 :gottesdienste="sortedGottesdienste"
                 :ministranten="plan.ministranten"
                 :marks="getMarks()"
                 :editable="plan.editable"
-                :edit="editPlanAdmin"
-                :small-mode="editPlanAdmin"
-                @added="addGodi"
-                @delete="deleteGottedienst"
-                @edit="createGottesdienst"
+                :current-username="currentUsername"
                 @toggle-mark="toggleMark"
-                @end-edit="editPlanAdmin = false"
-                @reset-password="resetPassword"
-                @create-ministrant="createMinistrant"
-                @edit-ministrant="createMinistrant"
-                class="plan table"
-                v-if="!mobile">
+                class="plan list"
+                v-if="viewMode === 'list'">
 
-            </TablePlan>
+            </ListView>
 
-            <MobilePlan
-                :gottesdienste="sortedGottesdienste"
-                :ministranten="plan.ministranten"
-                :marks="getMarks()"
-                :editable="plan.editable"
-                @toggle-mark="toggleMark"
-                class="plan mobile"
-                v-else>
+            <template v-if="viewMode === 'table'">
+                <TablePlan
+                    :gottesdienste="sortedGottesdienste"
+                    :ministranten="plan.ministranten"
+                    :marks="getMarks()"
+                    :editable="plan.editable"
+                    :edit="editPlanAdmin"
+                    :small-mode="editPlanAdmin"
+                    @added="addGodi"
+                    @delete="deleteGottedienst"
+                    @edit="createGottesdienst"
+                    @toggle-mark="toggleMark"
+                    @end-edit="editPlanAdmin = false"
+                    @reset-password="resetPassword"
+                    @create-ministrant="createMinistrant"
+                    @edit-ministrant="createMinistrant"
+                    class="plan table"
+                    v-if="!mobile">
 
-            </MobilePlan>
+                </TablePlan>
+
+                <MobilePlan
+                    :gottesdienste="sortedGottesdienste"
+                    :ministranten="plan.ministranten"
+                    :marks="getMarks()"
+                    :editable="plan.editable"
+                    @toggle-mark="toggleMark"
+                    class="plan mobile"
+                    v-else>
+
+                </MobilePlan>
+            </template>
 
             <PlanActionBar
                 class="action-bar no-print"
@@ -385,6 +420,36 @@ async function importZelebrationsplan() {
     //width: 100%;
 }
 
+.container .view-toggle {
+    display: flex;
+    gap: 4px;
+    padding: 8px 12px;
+    background: #f5f5f5;
+    border-bottom: 1px solid #d7d5d5;
+
+    button {
+        font-size: 14px;
+        padding: 6px 14px;
+
+        i {
+            font-size: 18px;
+        }
+
+        &.active {
+            background: #ffffff;
+            border-color: #c4c4c4;
+        }
+    }
+}
+
+.container.mobile-view {
+    .plan.list {
+        flex: 1;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+}
+
 .action-bar {
     position: fixed;
     bottom: 0;
-- 
2.54.0


From 9d89f323744228ee05d37b5aff39d62172ac1e3b Mon Sep 17 00:00:00 2001
From: Jonas Gerg <joniogerg@gmail.com>
Date: Tue, 14 Jul 2026 21:55:13 +0200
Subject: [PATCH 03/26] refactor: move action bar to top and lighten styling

- Moved PlanActionBar from fixed bottom to sticky top below GroupView
- Removed position: fixed and bottom padding workaround
- Action bar now uses lighter bg (#fafafa), thinner padding, border-bottom
- Removed unused padding-bottom: 100px from .plan, reduced to 24px
---
 public/src/components/PlanActionBar.vue |  8 ++--
 public/src/views/PlanView.vue           | 58 ++++++++++++-------------
 2 files changed, 32 insertions(+), 34 deletions(-)

diff --git a/public/src/components/PlanActionBar.vue b/public/src/components/PlanActionBar.vue
index d9b66b4..2fa04bd 100644
--- a/public/src/components/PlanActionBar.vue
+++ b/public/src/components/PlanActionBar.vue
@@ -25,12 +25,12 @@ const props = defineProps<{
 <style scoped lang="less">
 
 .action-bar {
-    width: calc(100% - 32px * 2);
-    border-top: 1px solid #d7d5d5;
+    width: calc(100% - 24px * 2);
     display: flex;
-    padding: 10px 32px;
-    background: #ffffff;
+    padding: 6px 24px;
+    background: #fafafa;
     justify-content: flex-end;
+    border-bottom: 1px solid #e0e0e0;
 
     .other-action{
         transition: 200ms translate;
diff --git a/public/src/views/PlanView.vue b/public/src/views/PlanView.vue
index d86497f..d966e8e 100644
--- a/public/src/views/PlanView.vue
+++ b/public/src/views/PlanView.vue
@@ -324,18 +324,17 @@ async function importZelebrationsplan() {
             <GroupView :groups="plan.groups" :admin="editPlanAdmin"
                        @new="createNewPlan" @delete="deletePlan" @edit="editPlan" class="no-print"/>
 
-            <div class="view-toggle no-print" v-if="plan.gottesdienste.length > 0">
-                <button
-                    class="flat"
-                    :class="{ active: viewMode === 'table' }"
-                    @click="viewMode = 'table'"
-                ><i>table_rows</i> Tabelle</button>
-                <button
-                    class="flat"
-                    :class="{ active: viewMode === 'list' }"
-                    @click="viewMode = 'list'"
-                ><i>list</i> Liste</button>
-            </div>
+            <PlanActionBar
+                class="action-bar no-print"
+                :save="getDif().length > 0"
+                :plan="false"
+                :godi="true"
+                @save="saveChanges()"
+                @add-godi="createGottesdienst()"
+                @add-mini="createMinistrant()"
+                @import-zelebrationsplan="importZelebrationsplan()"
+                v-if="editPlanAdmin"
+            />
 
             <ListView
                 :gottesdienste="sortedGottesdienste"
@@ -382,18 +381,18 @@ async function importZelebrationsplan() {
                 </MobilePlan>
             </template>
 
-            <PlanActionBar
-                class="action-bar no-print"
-                :save="getDif().length > 0"
-                :plan="false"
-                :godi="true"
-                @save="saveChanges()"
-                @add-godi="createGottesdienst()"
-                @add-mini="createMinistrant()"
-                @import-zelebrationsplan="importZelebrationsplan()"
-                v-if="editPlanAdmin"
-            />
-
+            <div class="view-toggle no-print" v-if="plan.gottesdienste.length > 0">
+                <button
+                    class="flat"
+                    :class="{ active: viewMode === 'table' }"
+                    @click="viewMode = 'table'"
+                ><i>table_rows</i> Tabelle</button>
+                <button
+                    class="flat"
+                    :class="{ active: viewMode === 'list' }"
+                    @click="viewMode = 'list'"
+                ><i>list</i> Liste</button>
+            </div>
 
             <SavingIndicator :visible="isSaving"/>
         </div>
@@ -413,7 +412,7 @@ async function importZelebrationsplan() {
 }
 
 .plan {
-    padding-bottom: 100px;
+    padding-bottom: 24px;
 }
 
 .plan.table {
@@ -422,10 +421,9 @@ async function importZelebrationsplan() {
 
 .container .view-toggle {
     display: flex;
+    justify-content: center;
     gap: 4px;
     padding: 8px 12px;
-    background: #f5f5f5;
-    border-bottom: 1px solid #d7d5d5;
 
     button {
         font-size: 14px;
@@ -436,7 +434,7 @@ async function importZelebrationsplan() {
         }
 
         &.active {
-            background: #ffffff;
+            background: #e0e0e0;
             border-color: #c4c4c4;
         }
     }
@@ -451,8 +449,8 @@ async function importZelebrationsplan() {
 }
 
 .action-bar {
-    position: fixed;
-    bottom: 0;
+    position: sticky;
+    top: 0;
     z-index: 100;
 }
 </style>
-- 
2.54.0


From 9a42d16f9e921d6c77416fbf413a375cb2ae591d Mon Sep 17 00:00:00 2001
From: Jonas Gerg <joniogerg@gmail.com>
Date: Tue, 14 Jul 2026 21:55:56 +0200
Subject: [PATCH 04/26] style: make action buttons smaller and less dense

- Reduced button font-size to 13px
- Reduced button padding to 4px 10px 4px 6px
- Reduced icon size to 18px with smaller margin
---
 public/src/components/PlanActionBar.vue | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/public/src/components/PlanActionBar.vue b/public/src/components/PlanActionBar.vue
index 2fa04bd..a23b438 100644
--- a/public/src/components/PlanActionBar.vue
+++ b/public/src/components/PlanActionBar.vue
@@ -45,21 +45,17 @@ const props = defineProps<{
 }
 
 button {
+    font-size: 13px;
+    padding: 4px 10px 4px 6px;
+
+    i {
+        font-size: 18px;
+        margin-right: 6px;
+    }
+
     &:not(.show){
         display: none;
     }
-    &.save{
-        &:not(.show){
-            display: flex;
-        }
-        width: 220px;
-        translate: 0 calc(100% + 20px);
-        transition: 200ms translate;
-        &.show {
-            translate: 0;
-            transition-delay: 100ms;
-        }
-    }
 }
 
 @media print {
-- 
2.54.0


From a8c459d714fde0ac6d01f4222a711164aeb3eb09 Mon Sep 17 00:00:00 2001
From: Jonas Gerg <joniogerg@gmail.com>
Date: Tue, 14 Jul 2026 21:58:25 +0200
Subject: [PATCH 05/26] feat: add 'Gottesdienst' button at bottom of ListView
 for admin

- ListView accepts admin prop and shows add button when true
- Emits addGottesdienst event handled by PlanView's createGottesdienst
- Dashed border style to distinguish it as an add action
---
 public/src/components/ListView.vue | 31 ++++++++++++++++++++++++++++++
 public/src/views/PlanView.vue      |  2 ++
 2 files changed, 33 insertions(+)

diff --git a/public/src/components/ListView.vue b/public/src/components/ListView.vue
index ff9f6d2..7f67b11 100644
--- a/public/src/components/ListView.vue
+++ b/public/src/components/ListView.vue
@@ -8,10 +8,12 @@ defineProps<{
     marks: Mark[]
     editable: string[]
     currentUsername: string
+    admin: boolean
 }>()
 
 const emit = defineEmits<{
     toggleMark: [gid: number, mid: number]
+    addGottesdienst: []
 }>()
 </script>
 
@@ -27,6 +29,9 @@ const emit = defineEmits<{
             :current-username="currentUsername"
             @toggle-mark="(gid, mid) => emit('toggleMark', gid, mid)"
         />
+        <button v-if="admin" class="add-godi" @click="emit('addGottesdienst')">
+            <i class="icon">add</i> Gottesdienst
+        </button>
     </div>
 </template>
 
@@ -34,4 +39,30 @@ const emit = defineEmits<{
 .list-view {
     padding: 12px;
 }
+
+.add-godi {
+    display: flex;
+    width: 100%;
+    margin: 16px 0;
+    padding: 12px;
+    font-size: 15px;
+    justify-content: center;
+    background: #f5f5f5;
+    border: 1px dashed #c4c4c4;
+    border-radius: 8px;
+    cursor: pointer;
+    color: #555;
+    transition: 100ms;
+
+    i {
+        font-size: 22px;
+        margin-right: 6px;
+    }
+
+    &:hover {
+        background: #eaeaea;
+        border-color: #999;
+        color: #333;
+    }
+}
 </style>
diff --git a/public/src/views/PlanView.vue b/public/src/views/PlanView.vue
index d966e8e..5f29602 100644
--- a/public/src/views/PlanView.vue
+++ b/public/src/views/PlanView.vue
@@ -342,7 +342,9 @@ async function importZelebrationsplan() {
                 :marks="getMarks()"
                 :editable="plan.editable"
                 :current-username="currentUsername"
+                :admin="editPlanAdmin"
                 @toggle-mark="toggleMark"
+                @add-gottesdienst="createGottesdienst()"
                 class="plan list"
                 v-if="viewMode === 'list'">
 
-- 
2.54.0


From 9e70dea85aad9feb29f570cd7d8885c6c5706f62 Mon Sep 17 00:00:00 2001
From: Jonas Gerg <joniogerg@gmail.com>
Date: Tue, 14 Jul 2026 21:59:59 +0200
Subject: [PATCH 06/26] feat: add tabs to ListView for Gottesdienste and
 Ministranten

- Tab bar with two tabs at top of list view
- Gottesdienste tab shows the existing card list
- Ministranten tab shows a simple list of all ministrants with name and username
---
 public/src/components/ListView.vue | 132 ++++++++++++++++++++++++++---
 1 file changed, 119 insertions(+), 13 deletions(-)

diff --git a/public/src/components/ListView.vue b/public/src/components/ListView.vue
index 7f67b11..cd8351e 100644
--- a/public/src/components/ListView.vue
+++ b/public/src/components/ListView.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import {ref} from "vue"
 import type {Gottesdienst, Mark, SimplifiedMinistrant} from "@/models/models"
 import GottesdienstCard from "@/components/GottesdienstCard.vue"
 
@@ -15,23 +16,52 @@ const emit = defineEmits<{
     toggleMark: [gid: number, mid: number]
     addGottesdienst: []
 }>()
+
+const activeTab = ref<"gottesdienste" | "ministranten">("gottesdienste")
 </script>
 
 <template>
     <div class="list-view">
-        <GottesdienstCard
-            v-for="godi in gottesdienste"
-            :key="godi.id"
-            :gottesdienst="godi"
-            :ministranten="ministranten"
-            :marks="marks"
-            :editable="editable"
-            :current-username="currentUsername"
-            @toggle-mark="(gid, mid) => emit('toggleMark', gid, mid)"
-        />
-        <button v-if="admin" class="add-godi" @click="emit('addGottesdienst')">
-            <i class="icon">add</i> Gottesdienst
-        </button>
+        <div class="tab-bar">
+            <button
+                class="tab"
+                :class="{ active: activeTab === 'gottesdienste' }"
+                @click="activeTab = 'gottesdienste'"
+            ><i class="icon">list</i> Gottesdienste</button>
+            <button
+                class="tab"
+                :class="{ active: activeTab === 'ministranten' }"
+                @click="activeTab = 'ministranten'"
+            ><i class="icon">groups</i> Ministranten</button>
+        </div>
+
+        <template v-if="activeTab === 'gottesdienste'">
+            <GottesdienstCard
+                v-for="godi in gottesdienste"
+                :key="godi.id"
+                :gottesdienst="godi"
+                :ministranten="ministranten"
+                :marks="marks"
+                :editable="editable"
+                :current-username="currentUsername"
+                @toggle-mark="(gid, mid) => emit('toggleMark', gid, mid)"
+            />
+            <button v-if="admin" class="add-godi" @click="emit('addGottesdienst')">
+                <i class="icon">add</i> Gottesdienst
+            </button>
+        </template>
+
+        <template v-else>
+            <div class="mini-list">
+                <div v-for="mini in ministranten" :key="mini.id" class="mini-row">
+                    <span class="mini-name">{{ mini.firstname }} {{ mini.lastname }}</span>
+                    <span class="mini-username">@{{ mini.username }}</span>
+                </div>
+                <div v-if="ministranten.length === 0" class="empty-state">
+                    Keine Ministranten
+                </div>
+            </div>
+        </template>
     </div>
 </template>
 
@@ -40,6 +70,82 @@ const emit = defineEmits<{
     padding: 12px;
 }
 
+.tab-bar {
+    display: flex;
+    gap: 4px;
+    margin-bottom: 12px;
+    background: #f0f0f0;
+    border-radius: 8px;
+    padding: 3px;
+
+    .tab {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        padding: 8px;
+        font-size: 14px;
+        font-weight: 600;
+        border: none;
+        border-radius: 6px;
+        background: transparent;
+        color: #777;
+        cursor: pointer;
+        transition: 100ms;
+
+        i {
+            font-size: 20px;
+        }
+
+        &.active {
+            background: #ffffff;
+            color: #222;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        }
+
+        &:not(.active):hover {
+            color: #555;
+        }
+    }
+}
+
+.mini-list {
+    background: #ffffff;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    overflow: hidden;
+
+    .mini-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 10px 14px;
+        border-bottom: 1px solid #f0f0f0;
+
+        &:last-child {
+            border-bottom: none;
+        }
+
+        .mini-name {
+            font-size: 15px;
+            font-weight: 500;
+        }
+
+        .mini-username {
+            font-size: 13px;
+            color: #999;
+        }
+    }
+
+    .empty-state {
+        padding: 24px;
+        text-align: center;
+        color: #999;
+        font-size: 14px;
+    }
+}
+
 .add-godi {
     display: flex;
     width: 100%;
-- 
2.54.0


From 39929361a0bf3aff32842a3e94ac0de0da4e63d5 Mon Sep 17 00:00:00 2001
From: Jonas Gerg <joniogerg@gmail.com>
Date: Tue, 14 Jul 2026 22:01:15 +0200
Subject: [PATCH 07/26] feat: add add/edit ministrant actions in ListView

- Each ministrant row shows an edit button for admin
- Bottom of ministrant list has an add button
- Events wired to PlanView's createMinistrant dialog
---
 public/src/components/ListView.vue | 63 ++++++++++++++++++++++++++++++
 public/src/views/PlanView.vue      |  2 +
 2 files changed, 65 insertions(+)

diff --git a/public/src/components/ListView.vue b/public/src/components/ListView.vue
index cd8351e..53702bd 100644
--- a/public/src/components/ListView.vue
+++ b/public/src/components/ListView.vue
@@ -15,6 +15,8 @@ defineProps<{
 const emit = defineEmits<{
     toggleMark: [gid: number, mid: number]
     addGottesdienst: []
+    addMinistrant: []
+    editMinistrant: [id: number]
 }>()
 
 const activeTab = ref<"gottesdienste" | "ministranten">("gottesdienste")
@@ -56,10 +58,16 @@ const activeTab = ref<"gottesdienste" | "ministranten">("gottesdienste")
                 <div v-for="mini in ministranten" :key="mini.id" class="mini-row">
                     <span class="mini-name">{{ mini.firstname }} {{ mini.lastname }}</span>
                     <span class="mini-username">@{{ mini.username }}</span>
+                    <button v-if="admin" class="edit-btn" @click="emit('editMinistrant', mini.id)">
+                        <i class="icon">edit</i>
+                    </button>
                 </div>
                 <div v-if="ministranten.length === 0" class="empty-state">
                     Keine Ministranten
                 </div>
+                <button v-if="admin" class="add-mini" @click="emit('addMinistrant')">
+                    <i class="icon">add</i> Ministrant
+                </button>
             </div>
         </template>
     </div>
@@ -138,12 +146,67 @@ const activeTab = ref<"gottesdienste" | "ministranten">("gottesdienste")
         }
     }
 
+    .mini-row {
+        .edit-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: 18px;
+                margin: 0;
+            }
+
+            &:hover {
+                background: #f0f0f0;
+                color: #555;
+            }
+        }
+    }
+
     .empty-state {
         padding: 24px;
         text-align: center;
         color: #999;
         font-size: 14px;
     }
+
+    .add-mini {
+        display: flex;
+        width: 100%;
+        padding: 10px;
+        font-size: 14px;
+        justify-content: center;
+        background: #fafafa;
+        border: none;
+        border-top: 1px solid #f0f0f0;
+        border-radius: 0;
+        cursor: pointer;
+        color: #777;
+        transition: 100ms;
+        margin: 0;
+
+        i {
+            font-size: 20px;
+            margin-right: 6px;
+        }
+
+        &:hover {
+            background: #f0f0f0;
+            color: #444;
+        }
+    }
 }
 
 .add-godi {
diff --git a/public/src/views/PlanView.vue b/public/src/views/PlanView.vue
index 5f29602..9ea55fa 100644
--- a/public/src/views/PlanView.vue
+++ b/public/src/views/PlanView.vue
@@ -345,6 +345,8 @@ async function importZelebrationsplan() {
                 :admin="editPlanAdmin"
                 @toggle-mark="toggleMark"
                 @add-gottesdienst="createGottesdienst()"
+                @add-ministrant="createMinistrant()"
+                @edit-ministrant="(id) => createMinistrant(id)"
                 class="plan list"
                 v-if="viewMode === 'list'">
 
-- 
2.54.0


From 7e5fa85a0ae2e55fb3f1c2f69f477d805bf11be2 Mon Sep 17 00:00:00 2001
From: Jonas Gerg <joniogerg@gmail.com>
Date: Tue, 14 Jul 2026 22:05:00 +0200
Subject: [PATCH 08/26] feat: ministrant list tab with add/edit, action bar at
 top

---
 docker-compose.yml                          | 2 ++
 private/minis-backend/.env                  | 2 ++
 private/minis-backend/application_base.conf | 6 +++---
 public/src/components/PlanActionBar.vue     | 6 ++++++
 public/src/services/api.ts                  | 2 +-
 5 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index eb5128f..c29f97a 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -14,6 +14,8 @@ services:
       - POSTGRES_PASSWORD=minis
       - POSTGRES_USER=minis
       - POSTGRES_DB=minis
+    ports:
+      - 5432:5432
     networks:
       - backend
     volumes:
diff --git a/private/minis-backend/.env b/private/minis-backend/.env
index 0805f7f..7a59ace 100644
--- a/private/minis-backend/.env
+++ b/private/minis-backend/.env
@@ -11,3 +11,5 @@ DATABASE_PASSWORD=abc
 ADMIN_PASSWORD=123
 FRONTEND_PATH=./public
 APPLICATION_NAME=Miniplan\ Hl.\ Familie
+PORT=8080
+
diff --git a/private/minis-backend/application_base.conf b/private/minis-backend/application_base.conf
index 86b86ba..62f770f 100644
--- a/private/minis-backend/application_base.conf
+++ b/private/minis-backend/application_base.conf
@@ -1,7 +1,7 @@
 ktor {
   development = true
   deployment {
-    port = "${PORT}"
+    port = ${PORT}
   }
   application {
     modules = [ de.walamana.ApplicationKt.module ]
@@ -9,7 +9,7 @@ ktor {
 }
 
 jwt {
-  secret = "${SECRET}"
+  secret = ${SECRET}
   issuer = "http://0.0.0.0:8080/"
   audience = "http://0.0.0.0:8080/"
   realm = "mini-data"
@@ -21,5 +21,5 @@ database {
 }
 
 admin {
-  password = "${ADMIN}"
+  password = ${ADMIN}
 }
diff --git a/public/src/components/PlanActionBar.vue b/public/src/components/PlanActionBar.vue
index a23b438..cc302c1 100644
--- a/public/src/components/PlanActionBar.vue
+++ b/public/src/components/PlanActionBar.vue
@@ -36,6 +36,12 @@ const props = defineProps<{
         transition: 200ms translate;
         translate: 220px;
         transition-delay: 100ms;
+        display: flex;
+        gap: 6px;
+        flex-wrap: wrap;
+        button {
+            margin: 0;
+        }
     };
 
     &.save .other-action {
diff --git a/public/src/services/api.ts b/public/src/services/api.ts
index 8bc58b7..5c30ba4 100644
--- a/public/src/services/api.ts
+++ b/public/src/services/api.ts
@@ -3,7 +3,7 @@ import {Auth} from "@/services/auth";
 
 
 const API_ENDPOINT = import.meta.env.MODE == "development"
-    ? "http://0.0.0.0:8080/api"
+    ? "http://localhost:8080/api"
     : window.location.origin + "/api"
 
 
-- 
2.54.0


From edaa5fe94fce8f3ac798b5f0ee305860833bbe69 Mon Sep 17 00:00:00 2001
From: Jonas Gerg <joniogerg@gmail.com>
Date: Tue, 14 Jul 2026 22:05:52 +0200
Subject: [PATCH 09/26] feat: clickable marks for admin, mark counts,
 collapsible card list

- Admin can click a ministrant's mark badge to cycle through states
- Each ministrant shows total marks count across all gottesdienste
- Ministrant list in cards starts collapsed showing only count, expands on click
---
 public/src/components/GottesdienstCard.vue | 88 ++++++++++++++++++----
 1 file changed, 73 insertions(+), 15 deletions(-)

diff --git a/public/src/components/GottesdienstCard.vue b/public/src/components/GottesdienstCard.vue
index f57e05b..de64e19 100644
--- a/public/src/components/GottesdienstCard.vue
+++ b/public/src/components/GottesdienstCard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type {Gottesdienst, Mark, SimplifiedMinistrant} from "@/models/models"
-import {computed} from "vue"
+import {computed, ref} from "vue"
 
 const props = defineProps<{
     gottesdienst: Gottesdienst
@@ -17,6 +17,7 @@ const emit = defineEmits<{
 const isAdmin = computed(() => props.currentUsername === "admin")
 const currentMini = computed(() => props.ministranten.find(m => m.username === props.currentUsername))
 const showCheckbox = computed(() => !!currentMini.value && !isAdmin.value)
+const expanded = ref(false)
 
 const relevantMarks = computed(() =>
     props.marks.filter(m => m.gid === props.gottesdienst.id && m.value !== 0)
@@ -29,6 +30,10 @@ const sortedMinistrants = computed(() => {
         .filter((entry): entry is {ministrant: SimplifiedMinistrant; mark: Mark} => !!entry.ministrant)
 })
 
+function ministrantTotalMarks(miniId: number): number {
+    return props.marks.filter(m => m.mid === miniId && m.value !== 0).length
+}
+
 function getMark(gid: number, mid: number): Mark {
     const mark = props.marks.find(m => m.mid === mid && m.gid === gid)
     return mark ?? {gid, mid, value: 0}
@@ -152,18 +157,29 @@ function getOwnMarkHint(): string {
         </div>
 
         <div class="card-body" v-if="sortedMinistrants.length > 0">
-            <div
-                v-for="{ministrant, mark} in sortedMinistrants"
-                :key="ministrant.id"
-                class="ministrant-row"
-                :class="getMarkClass(gottesdienst.id, ministrant.id)"
-            >
-                <span class="mini-name">{{ ministrant.firstname }} {{ ministrant.lastname }}</span>
-                <span class="mark-badge">
-                    <i class="icon">{{ getIconForMark(gottesdienst.id, ministrant.id) }}</i>
-                    <span class="hint">{{ getHintForMark(gottesdienst.id, ministrant.id) }}</span>
-                </span>
-            </div>
+            <button class="collapse-toggle" @click="expanded = !expanded">
+                <i class="icon">{{ expanded ? 'expand_less' : 'expand_more' }}</i>
+                {{ sortedMinistrants.length }} Rückmeldungen
+            </button>
+            <template v-if="expanded">
+                <div
+                    v-for="{ministrant, mark} in sortedMinistrants"
+                    :key="ministrant.id"
+                    class="ministrant-row"
+                    :class="getMarkClass(gottesdienst.id, ministrant.id)"
+                >
+                    <span class="mini-name">{{ ministrant.firstname }} {{ ministrant.lastname }}</span>
+                    <span class="mark-count">{{ ministrantTotalMarks(ministrant.id) }}</span>
+                    <span
+                        class="mark-badge"
+                        :class="{ clickable: isAdmin }"
+                        @click="isAdmin && emit('toggleMark', gottesdienst.id, ministrant.id)"
+                    >
+                        <i class="icon">{{ getIconForMark(gottesdienst.id, ministrant.id) }}</i>
+                        <span class="hint">{{ getHintForMark(gottesdienst.id, ministrant.id) }}</span>
+                    </span>
+                </div>
+            </template>
         </div>
         <div class="card-body empty" v-else>
             <span class="no-marks">Keine Rückmeldungen</span>
@@ -266,11 +282,33 @@ function getOwnMarkHint(): string {
         font-size: 14px;
     }
 
+    .collapse-toggle {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        width: 100%;
+        padding: 6px 0;
+        border: none;
+        background: transparent;
+        font-size: 14px;
+        font-weight: 600;
+        color: #777;
+        cursor: pointer;
+
+        i {
+            font-size: 20px;
+        }
+
+        &:hover {
+            color: #444;
+        }
+    }
+
     .ministrant-row {
         display: flex;
         align-items: center;
-        justify-content: space-between;
-        padding: 8px 0;
+        gap: 8px;
+        padding: 8px 0 8px 26px;
         border-bottom: 1px solid #f0f0f0;
 
         &:last-child {
@@ -280,6 +318,15 @@ function getOwnMarkHint(): string {
         .mini-name {
             font-size: 15px;
             font-weight: 500;
+            flex: 1;
+        }
+
+        .mark-count {
+            font-size: 12px;
+            color: #aaa;
+            font-weight: 600;
+            min-width: 20px;
+            text-align: center;
         }
 
         .mark-badge {
@@ -297,6 +344,17 @@ function getOwnMarkHint(): string {
                 font-size: 13px;
                 white-space: nowrap;
             }
+
+            &.clickable {
+                cursor: pointer;
+                padding: 2px 4px;
+                border-radius: 4px;
+                transition: 100ms;
+
+                &:hover {
+                    background: rgba(0,0,0,0.04);
+                }
+            }
         }
 
         &.minus {
-- 
2.54.0


From 2da6b33b363eeefd6887a66d2a6f79cc6e7f03e9 Mon Sep 17 00:00:00 2001
From: Jonas Gerg <joniogerg@gmail.com>
Date: Tue, 14 Jul 2026 22:09:34 +0200
Subject: [PATCH 10/26] fix: show all ministrants in expanded card list, not
 only those with marks

---
 public/src/components/GottesdienstCard.vue | 23 ++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/public/src/components/GottesdienstCard.vue b/public/src/components/GottesdienstCard.vue
index de64e19..43ab751 100644
--- a/public/src/components/GottesdienstCard.vue
+++ b/public/src/components/GottesdienstCard.vue
@@ -19,15 +19,18 @@ const currentMini = computed(() => props.ministranten.find(m => m.username === p
 const showCheckbox = computed(() => !!currentMini.value && !isAdmin.value)
 const expanded = ref(false)
 
-const relevantMarks = computed(() =>
-    props.marks.filter(m => m.gid === props.gottesdienst.id && m.value !== 0)
+const responseCount = computed(() =>
+    props.marks.filter(m => m.gid === props.gottesdienst.id && m.value !== 0).length
 )
 
-const sortedMinistrants = computed(() => {
+const allMinistrants = computed(() => {
     const miniMap = new Map(props.ministranten.map(m => [m.id, m]))
-    return relevantMarks.value
-        .map(m => ({ministrant: miniMap.get(m.mid), mark: m}))
-        .filter((entry): entry is {ministrant: SimplifiedMinistrant; mark: Mark} => !!entry.ministrant)
+    const marksMap = new Map(props.marks.filter(m => m.gid === props.gottesdienst.id).map(m => [m.mid, m]))
+    return props.ministranten
+        .map(mini => ({
+            ministrant: mini,
+            mark: marksMap.get(mini.id) ?? {gid: props.gottesdienst.id, mid: mini.id, value: 0} as Mark
+        }))
 })
 
 function ministrantTotalMarks(miniId: number): number {
@@ -156,14 +159,14 @@ function getOwnMarkHint(): string {
             </div>
         </div>
 
-        <div class="card-body" v-if="sortedMinistrants.length > 0">
+        <div class="card-body" v-if="allMinistrants.length > 0">
             <button class="collapse-toggle" @click="expanded = !expanded">
                 <i class="icon">{{ expanded ? 'expand_less' : 'expand_more' }}</i>
-                {{ sortedMinistrants.length }} Rückmeldungen
+                {{ responseCount }} Rückmeldungen
             </button>
             <template v-if="expanded">
                 <div
-                    v-for="{ministrant, mark} in sortedMinistrants"
+                    v-for="{ministrant, mark} in allMinistrants"
                     :key="ministrant.id"
                     class="ministrant-row"
                     :class="getMarkClass(gottesdienst.id, ministrant.id)"
@@ -182,7 +185,7 @@ function getOwnMarkHint(): string {
             </template>
         </div>
         <div class="card-body empty" v-else>
-            <span class="no-marks">Keine Rückmeldungen</span>
+            <span class="no-marks">Keine Ministranten</span>
         </div>
     </div>
 </template>
-- 
2.54.0


From 7d3d1587c42088eaf28909d52009db33398148ae Mon Sep 17 00:00:00 2001
From: Jonas Gerg <joniogerg@gmail.com>
Date: Tue, 14 Jul 2026 22:10:26 +0200
Subject: [PATCH 11/26] fix: mark count only counts value 1 (check) marks,
 excludes -1

---
 public/src/components/GottesdienstCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/src/components/GottesdienstCard.vue b/public/src/components/GottesdienstCard.vue
index 43ab751..0b2a314 100644
--- a/public/src/components/GottesdienstCard.vue
+++ b/public/src/components/GottesdienstCard.vue
@@ -34,7 +34,7 @@ const allMinistrants = computed(() => {
 })
 
 function ministrantTotalMarks(miniId: number): number {
-    return props.marks.filter(m => m.mid === miniId && m.value !== 0).length
+    return props.marks.filter(m => m.mid === miniId && m.value === 1).length
 }
 
 function getMark(gid: number, mid: number): Mark {
-- 
2.54.0


From 2ea6a6779097001c425c1390f9cfc2700d407f88 Mon Sep 17 00:00:00 2001
From: Jonas Gerg <joniogerg@gmail.com>
Date: Tue, 14 Jul 2026 22:11:17 +0200
Subject: [PATCH 12/26] feat: show green name chips of coming ministrants above
 dropdown

---
 public/src/components/GottesdienstCard.vue | 30 ++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/public/src/components/GottesdienstCard.vue b/public/src/components/GottesdienstCard.vue
index 0b2a314..ce30745 100644
--- a/public/src/components/GottesdienstCard.vue
+++ b/public/src/components/GottesdienstCard.vue
@@ -23,6 +23,14 @@ const responseCount = computed(() =>
     props.marks.filter(m => m.gid === props.gottesdienst.id && m.value !== 0).length
 )
 
+const comingMinistrants = computed(() => {
+    const miniMap = new Map(props.ministranten.map(m => [m.id, m]))
+    return props.marks
+        .filter(m => m.gid === props.gottesdienst.id && m.value === 1)
+        .map(m => miniMap.get(m.mid))
+        .filter((m): m is SimplifiedMinistrant => !!m)
+})
+
 const allMinistrants = computed(() => {
     const miniMap = new Map(props.ministranten.map(m => [m.id, m]))
     const marksMap = new Map(props.marks.filter(m => m.gid === props.gottesdienst.id).map(m => [m.mid, m]))
@@ -160,6 +168,11 @@ function getOwnMarkHint(): string {
         </div>
 
         <div class="card-body" v-if="allMinistrants.length > 0">
+            <div class="coming-summary" v-if="comingMinistrants.length > 0">
+                <span v-for="m in comingMinistrants" :key="m.id" class="coming-chip">
+                    {{ m.firstname }}
+                </span>
+            </div>
             <button class="collapse-toggle" @click="expanded = !expanded">
                 <i class="icon">{{ expanded ? 'expand_less' : 'expand_more' }}</i>
                 {{ responseCount }} Rückmeldungen
@@ -285,6 +298,23 @@ function getOwnMarkHint(): string {
         font-size: 14px;
     }
 
+    .coming-summary {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px;
+        margin-bottom: 8px;
+
+        .coming-chip {
+            display: inline-block;
+            padding: 2px 8px;
+            font-size: 13px;
+            font-weight: 600;
+            background: #d1fcd1;
+            color: #045b04;
+            border-radius: 4px;
+        }
+    }
+
     .collapse-toggle {
         display: flex;
         align-items: center;
-- 
2.54.0


From fe121795a0dc4b1e74e67b18faea6ad0fb557d75 Mon Sep 17 00:00:00 2001
From: Jonas Gerg <joniogerg@gmail.com>
Date: Tue, 14 Jul 2026 22:14:03 +0200
Subject: [PATCH 13/26] feat: add import zelebrationsplan button to ListView

---
 public/src/components/ListView.vue | 30 ++++++++++++++++++++++++++++++
 public/src/views/PlanView.vue      |  1 +
 2 files changed, 31 insertions(+)

diff --git a/public/src/components/ListView.vue b/public/src/components/ListView.vue
index 53702bd..c0657ea 100644
--- a/public/src/components/ListView.vue
+++ b/public/src/components/ListView.vue
@@ -17,6 +17,7 @@ const emit = defineEmits<{
     addGottesdienst: []
     addMinistrant: []
     editMinistrant: [id: number]
+    importZelebrationsplan: []
 }>()
 
 const activeTab = ref<"gottesdienste" | "ministranten">("gottesdienste")
@@ -51,6 +52,9 @@ const activeTab = ref<"gottesdienste" | "ministranten">("gottesdienste")
             <button v-if="admin" class="add-godi" @click="emit('addGottesdienst')">
                 <i class="icon">add</i> Gottesdienst
             </button>
+            <button v-if="admin" class="import-btn" @click="emit('importZelebrationsplan')">
+                <i class="icon">upload</i> Zelebrationsplan importieren
+            </button>
         </template>
 
         <template v-else>
@@ -234,4 +238,30 @@ const activeTab = ref<"gottesdienste" | "ministranten">("gottesdienste")
         color: #333;
     }
 }
+
+.import-btn {
+    display: flex;
+    width: 100%;
+    margin: 16px 0;
+    padding: 12px;
+    font-size: 15px;
+    justify-content: center;
+    background: #f5f5f5;
+    border: 1px dashed #c4c4c4;
+    border-radius: 8px;
+    cursor: pointer;
+    color: #555;
+    transition: 100ms;
+
+    i {
+        font-size: 22px;
+        margin-right: 6px;
+    }
+
+    &:hover {
+        background: #eaeaea;
+        border-color: #999;
+        color: #333;
+    }
+}
 </style>
diff --git a/public/src/views/PlanView.vue b/public/src/views/PlanView.vue
index 9ea55fa..52cb3bb 100644
--- a/public/src/views/PlanView.vue
+++ b/public/src/views/PlanView.vue
@@ -347,6 +347,7 @@ async function importZelebrationsplan() {
                 @add-gottesdienst="createGottesdienst()"
                 @add-ministrant="createMinistrant()"
                 @edit-ministrant="(id) => createMinistrant(id)"
+                @import-zelebrationsplan="importZelebrationsplan()"
                 class="plan list"
                 v-if="viewMode === 'list'">
 
-- 
2.54.0


From 924b443bdc52312094f1f0cc3aa27fe8d60c400a Mon Sep 17 00:00:00 2001
From: Jonas Gerg <joniogerg@gmail.com>
Date: Tue, 14 Jul 2026 22:15:41 +0200
Subject: [PATCH 14/26] feat: add edit gottesdienst button on card header for
 admin

---
 public/src/components/GottesdienstCard.vue | 33 ++++++++++++++++++++++
 public/src/components/ListView.vue         |  2 ++
 public/src/views/PlanView.vue              | 25 ++++++++--------
 3 files changed, 49 insertions(+), 11 deletions(-)

diff --git a/public/src/components/GottesdienstCard.vue b/public/src/components/GottesdienstCard.vue
index ce30745..7f0a6fd 100644
--- a/public/src/components/GottesdienstCard.vue
+++ b/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;
diff --git a/public/src/components/ListView.vue b/public/src/components/ListView.vue
index c0657ea..92b4e8a 100644
--- a/public/src/components/ListView.vue
+++ b/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
diff --git a/public/src/views/PlanView.vue b/public/src/views/PlanView.vue
index 52cb3bb..b4bfec2 100644
--- a/public/src/views/PlanView.vue
+++ b/public/src/views/PlanView.vue
@@ -324,17 +324,6 @@ async function importZelebrationsplan() {
             <GroupView :groups="plan.groups" :admin="editPlanAdmin"
                        @new="createNewPlan" @delete="deletePlan" @edit="editPlan" class="no-print"/>
 
-            <PlanActionBar
-                class="action-bar no-print"
-                :save="getDif().length > 0"
-                :plan="false"
-                :godi="true"
-                @save="saveChanges()"
-                @add-godi="createGottesdienst()"
-                @add-mini="createMinistrant()"
-                @import-zelebrationsplan="importZelebrationsplan()"
-                v-if="editPlanAdmin"
-            />
 
             <ListView
                 :gottesdienste="sortedGottesdienste"
@@ -347,6 +336,7 @@ async function importZelebrationsplan() {
                 @add-gottesdienst="createGottesdienst()"
                 @add-ministrant="createMinistrant()"
                 @edit-ministrant="(id) => createMinistrant(id)"
+                @edit-gottesdienst="(id) => createGottesdienst(id)"
                 @import-zelebrationsplan="importZelebrationsplan()"
                 class="plan list"
                 v-if="viewMode === 'list'">
@@ -354,6 +344,19 @@ async function importZelebrationsplan() {
             </ListView>
 
             <template v-if="viewMode === 'table'">
+
+                <PlanActionBar
+                    class="action-bar no-print"
+                    :save="getDif().length > 0"
+                    :plan="false"
+                    :godi="true"
+                    @save="saveChanges()"
+                    @add-godi="createGottesdienst()"
+                    @add-mini="createMinistrant()"
+                    @import-zelebrationsplan="importZelebrationsplan()"
+                    v-if="editPlanAdmin"
+                />
+                
                 <TablePlan
                     :gottesdienste="sortedGottesdienste"
                     :ministranten="plan.ministranten"
-- 
2.54.0


From 3beb92c3000a5301c9fe342cebf7790cce1f2406 Mon Sep 17 00:00:00 2001
From: Jonas Gerg <joniogerg@gmail.com>
Date: Tue, 14 Jul 2026 22:16:58 +0200
Subject: [PATCH 15/26] feat: add delete button to gottesdienst edit dialog

---
 .../components/dialog/CreateGottesdienstDialog.vue   | 12 ++++++++----
 public/src/views/PlanView.vue                        |  3 ++-
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/public/src/components/dialog/CreateGottesdienstDialog.vue b/public/src/components/dialog/CreateGottesdienstDialog.vue
index 0adb327..83d76c5 100644
--- a/public/src/components/dialog/CreateGottesdienstDialog.vue
+++ b/public/src/components/dialog/CreateGottesdienstDialog.vue
@@ -9,7 +9,8 @@ import {onKeyPress} from "@/composables/enter";
 interface CreateGottesdienstDialogProps extends DialogControls {
     onCreate: (arg0: Gottesdienst) => (Promise<any> | undefined),
     gottesdienst?: Gottesdienst,
-    planId: number
+    planId: number,
+    onDelete?: () => void
 }
 
 onKeyPress("Enter", create)
@@ -70,9 +71,12 @@ async function create(){
         <Input class="input" v-model:value="date" date-format="string" type="date" label="Datum"/>
         <Input class="input" v-model:value="time" date-format="string" type="time" label="Um"/>
         <Input class="input" v-model:value="godi.attendance" type="time" label="Anwesenheit"/>
-        <div class="buttons" style="display: flex; justify-content: end; margin-top: 20px;">
-            <button @click="onDismiss">Abbrechen</button>
-            <button @click="create">{{ godi?.id == -1 ? "Erstellen" : "Speichern"}}</button>
+        <div class="buttons" style="display: flex; justify-content: space-between; margin-top: 20px;">
+            <button v-if="godi.id != -1 && onDelete" class="red" @click="onDelete(); onDismiss()"><i class="icon">delete</i> Löschen</button>
+            <div style="display: flex; gap: 8px; margin-left: auto;">
+                <button @click="onDismiss">Abbrechen</button>
+                <button @click="create">{{ godi?.id == -1 ? "Erstellen" : "Speichern"}}</button>
+            </div>
         </div>
     </Dialog>
 
diff --git a/public/src/views/PlanView.vue b/public/src/views/PlanView.vue
index b4bfec2..427210b 100644
--- a/public/src/views/PlanView.vue
+++ b/public/src/views/PlanView.vue
@@ -128,7 +128,8 @@ async function createGottesdienst(gottesdienstId?: number){
                 plan.gottesdienste.splice(index, 1)
                 plan.gottesdienste.push(godi)
             }
-        }
+        },
+        onDelete: gottesdienst ? () => deleteGottedienst(gottesdienst.id) : undefined
     })
 }
 
-- 
2.54.0


From 2396a927ab4dde1bfd331831c05b300c72f92426 Mon Sep 17 00:00:00 2001
From: Jonas Gerg <joniogerg@gmail.com>
Date: Tue, 14 Jul 2026 22:20:27 +0200
Subject: [PATCH 16/26] refactor: improve mobile layout for plan changer

- Stack title and controls vertically on mobile
- Separate admin actions into own row below
- No more absolute positioning or fragile layout
- Show date labels on prev/next buttons only on desktop
- Cleaner responsive breakpoint at 800px
---
 public/src/components/GroupView.vue | 183 +++++++++++++++++++---------
 1 file changed, 128 insertions(+), 55 deletions(-)

diff --git a/public/src/components/GroupView.vue b/public/src/components/GroupView.vue
index 0fb3722..d37a65a 100644
--- a/public/src/components/GroupView.vue
+++ b/public/src/components/GroupView.vue
@@ -133,31 +133,33 @@ function dateToValueString(time) {
 
 <template>
     <div class="bar">
-        <div class="controls">
-            <button class="flat left" v-if="prev != null && prev <= groups.length - 1" @click="back">
+        <div class="top-row">
+            <button class="flat arrow" v-if="prev != null && prev <= groups.length - 1" @click="back">
                 <i>arrow_left_alt</i>
-                <span class="hide-mobile">{{ formatDateShort(get(prev).from) }} - {{ formatDateShort(get(prev).to) }}</span>
+                <span class="date-label">{{ formatDateShort(get(prev).from) }} - {{ formatDateShort(get(prev).to) }}</span>
             </button>
-            <div class="width: 100%"/>
-            <button class="flat right" v-if="next != null && next > 0" @click="forward">
-                <span class="hide-mobile">{{ formatDateShort(get(next).from) }} - {{ formatDateShort(get(next).to) }}</span>
+
+            <div class="title">
+                <template v-if="groups.length > 0">
+                    <span class="prefix">Miniplan vom</span>
+                    {{ formatDate(get(cur).from) }} – {{ formatDate(get(cur).to) }}
+                </template>
+                <span v-else>Keine Gottesdienstgruppen vorhanden</span>
+            </div>
+
+            <button class="flat arrow" v-if="next != null && next > 0" @click="forward">
+                <span class="date-label">{{ formatDateShort(get(next).from) }} - {{ formatDateShort(get(next).to) }}</span>
                 <i>arrow_right_alt</i>
             </button>
-            <button class="flat right" v-if="(next == null || next <= 0) && admin" style="margin-right: 20px"
-                    @click="$emit('new')">
-                <i>add</i> Neuer plan
-            </button>
+
+            <div class="spacer" v-if="next == null || next <= 0"></div>
+        </div>
+
+        <div class="admin-row" v-if="admin && groups.length > 0">
+            <button class="flat" @click="$emit('new')"><i>add</i> Neuer Plan</button>
+            <button class="flat icon" @click="$emit('delete', get(cur).id)"><i>delete</i></button>
+            <button class="flat icon" @click="$emit('edit', get(cur).id)"><i>edit</i></button>
         </div>
-        <template v-if="groups.length > 0">
-            <span style="z-index: 1"><span class="hide-mobile">Miniplan vom </span> {{ formatDate(get(cur).from) }} bis {{ formatDate(get(cur).to) }}</span>
-            <span v-if="admin" style="display: flex; align-items: center; z-index: 1">
-                <button class="icon flat" @click="$emit('delete', get(cur).id)"><i>delete</i></button>
-                <button class="icon flat" @click="$emit('edit', get(cur).id)"><i>edit</i></button>
-            </span>
-        </template>
-        <span v-else>
-            Keine Gottesdienstgruppen vorhanden
-        </span>
     </div>
 </template>
 
@@ -165,56 +167,127 @@ function dateToValueString(time) {
 
 .bar {
     display: flex;
-    width: calc(100% - 30px);
+    flex-direction: column;
     align-items: center;
-    justify-content: center;
     border-bottom: 1px solid #d7d5d5;
     z-index: 10;
-    padding: 15px;
-    position: relative;
+    padding: 8px 12px;
+    gap: 6px;
 
-    .controls {
+    .top-row {
         display: flex;
-        justify-content: space-between;
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: calc(100% - 10px);
-        height: calc(100% - 10px);
-        padding: 5px;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        gap: 6px;
     }
 
-    .left, .right{
+    .arrow {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        flex-shrink: 0;
+        padding: 6px 8px 6px 6px;
+
+        i {
+            font-size: 22px;
+        }
+
+        .date-label {
+            display: none;
+        }
+    }
+
+    .spacer {
+        width: 42px;
         flex-shrink: 0;
     }
 
-    .left {
-        margin-left: 10px;
-    }
-
-    .right {
-        i {
-            margin-left: 10px;
-        }
-    }
-
-    span {
+    .title {
+        flex: 1;
+        text-align: center;
         font-weight: 700;
-    }
+        font-size: 14px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        min-width: 0;
 
-    button {
-        margin-right: 10px;
-    }
-
-    .input {
-        margin: 0 10px
-    }
-
-    @media(max-width: 800px) {
-        .hide-mobile {
+        .prefix {
             display: none;
         }
+    }
 
+    .admin-row {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        width: 100%;
+        padding-top: 4px;
+        border-top: 1px solid #eee;
+
+        button {
+            font-size: 13px;
+            padding: 4px 10px 4px 6px;
+
+            i {
+                font-size: 18px;
+                margin-right: 4px;
+            }
+
+            &.icon {
+                padding: 4px 8px;
+
+                i {
+                    margin-right: 0;
+                }
+            }
+        }
+    }
+
+    @media(min-width: 800px) {
+        flex-direction: row;
+        padding: 10px 16px;
+        gap: 0;
+
+        .top-row {
+            flex: 1;
+            gap: 10px;
+        }
+
+        .arrow {
+            padding: 6px 14px 6px 10px;
+
+            .date-label {
+                display: inline;
+                font-size: 13px;
+                font-weight: 600;
+                white-space: nowrap;
+            }
+        }
+
+        .spacer {
+            width: auto;
+        }
+
+        .title {
+            font-size: 16px;
+            white-space: normal;
+
+            .prefix {
+                display: inline;
+                font-weight: 400;
+                color: #777;
+            }
+        }
+
+        .admin-row {
+            width: auto;
+            border-top: none;
+            padding-top: 0;
+            margin-left: 12px;
+        }
     }
 
 }
-- 
2.54.0


From 3b6a87752beda896eddc69fe89572d1b8242126f Mon Sep 17 00:00:00 2001
From: Jonas Gerg <joniogerg@gmail.com>
Date: Tue, 14 Jul 2026 22:22:55 +0200
Subject: [PATCH 17/26] fix: center title with margin auto instead of fragile
 spacer divs

---
 public/src/components/GroupView.vue | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/public/src/components/GroupView.vue b/public/src/components/GroupView.vue
index d37a65a..b931092 100644
--- a/public/src/components/GroupView.vue
+++ b/public/src/components/GroupView.vue
@@ -151,8 +151,6 @@ function dateToValueString(time) {
                 <span class="date-label">{{ formatDateShort(get(next).from) }} - {{ formatDateShort(get(next).to) }}</span>
                 <i>arrow_right_alt</i>
             </button>
-
-            <div class="spacer" v-if="next == null || next <= 0"></div>
         </div>
 
         <div class="admin-row" v-if="admin && groups.length > 0">
@@ -177,7 +175,6 @@ function dateToValueString(time) {
     .top-row {
         display: flex;
         align-items: center;
-        justify-content: center;
         width: 100%;
         gap: 6px;
     }
@@ -198,11 +195,6 @@ function dateToValueString(time) {
         }
     }
 
-    .spacer {
-        width: 42px;
-        flex-shrink: 0;
-    }
-
     .title {
         flex: 1;
         text-align: center;
@@ -212,6 +204,7 @@ function dateToValueString(time) {
         overflow: hidden;
         text-overflow: ellipsis;
         min-width: 0;
+        margin: 0 auto;
 
         .prefix {
             display: none;
@@ -267,10 +260,6 @@ function dateToValueString(time) {
             }
         }
 
-        .spacer {
-            width: auto;
-        }
-
         .title {
             font-size: 16px;
             white-space: normal;
-- 
2.54.0


From a6044f3a83bf6934167d390ee70325b602f17dc5 Mon Sep 17 00:00:00 2001
From: Jonas Gerg <joniogerg@gmail.com>
Date: Tue, 14 Jul 2026 22:24:46 +0200
Subject: [PATCH 18/26] fix: adjust layout of plan selector for mobile

---
 public/src/components/GroupView.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/public/src/components/GroupView.vue b/public/src/components/GroupView.vue
index b931092..102766e 100644
--- a/public/src/components/GroupView.vue
+++ b/public/src/components/GroupView.vue
@@ -138,6 +138,7 @@ function dateToValueString(time) {
                 <i>arrow_left_alt</i>
                 <span class="date-label">{{ formatDateShort(get(prev).from) }} - {{ formatDateShort(get(prev).to) }}</span>
             </button>
+            <div v-else></div>
 
             <div class="title">
                 <template v-if="groups.length > 0">
@@ -151,6 +152,7 @@ function dateToValueString(time) {
                 <span class="date-label">{{ formatDateShort(get(next).from) }} - {{ formatDateShort(get(next).to) }}</span>
                 <i>arrow_right_alt</i>
             </button>
+            <div v-else></div>
         </div>
 
         <div class="admin-row" v-if="admin && groups.length > 0">
@@ -173,10 +175,11 @@ function dateToValueString(time) {
     gap: 6px;
 
     .top-row {
-        display: flex;
+        display: grid;
         align-items: center;
         width: 100%;
         gap: 6px;
+        grid-template-columns: 60px 1fr 60px;
     }
 
     .arrow {
-- 
2.54.0


From 5e854e43419a0f29db510aef86cabd9d8cc187f8 Mon Sep 17 00:00:00 2001
From: Jonas Gerg <joniogerg@gmail.com>
Date: Tue, 14 Jul 2026 22:29:06 +0200
Subject: [PATCH 19/26] feat: show x-mark count per ministrant in ministrant
 list

---
 public/src/components/ListView.vue | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/public/src/components/ListView.vue b/public/src/components/ListView.vue
index 92b4e8a..741d28d 100644
--- a/public/src/components/ListView.vue
+++ b/public/src/components/ListView.vue
@@ -3,7 +3,7 @@ import {ref} from "vue"
 import type {Gottesdienst, Mark, SimplifiedMinistrant} from "@/models/models"
 import GottesdienstCard from "@/components/GottesdienstCard.vue"
 
-defineProps<{
+const props = defineProps<{
     gottesdienste: Gottesdienst[]
     ministranten: SimplifiedMinistrant[]
     marks: Mark[]
@@ -22,6 +22,10 @@ const emit = defineEmits<{
 }>()
 
 const activeTab = ref<"gottesdienste" | "ministranten">("gottesdienste")
+
+function countXMarks(miniId: number): number {
+    return props.marks.filter(m => m.mid === miniId && m.value === 1).length
+}
 </script>
 
 <template>
@@ -64,6 +68,7 @@ const activeTab = ref<"gottesdienste" | "ministranten">("gottesdienste")
                 <div v-for="mini in ministranten" :key="mini.id" class="mini-row">
                     <span class="mini-name">{{ mini.firstname }} {{ mini.lastname }}</span>
                     <span class="mini-username">@{{ mini.username }}</span>
+                    <span class="x-count">{{ countXMarks(mini.id) }}</span>
                     <button v-if="admin" class="edit-btn" @click="emit('editMinistrant', mini.id)">
                         <i class="icon">edit</i>
                     </button>
@@ -82,6 +87,12 @@ const activeTab = ref<"gottesdienste" | "ministranten">("gottesdienste")
 <style scoped lang="less">
 .list-view {
     padding: 12px;
+    max-width: 800px;
+    margin: 0 auto;
+
+
+    @media(min-width: 800px) {
+    }
 }
 
 .tab-bar {
@@ -149,6 +160,17 @@ const activeTab = ref<"gottesdienste" | "ministranten">("gottesdienste")
         .mini-username {
             font-size: 13px;
             color: #999;
+            flex: 1;
+        }
+
+        .x-count {
+            font-size: 13px;
+            font-weight: 700;
+            color: #045b04;
+            background: #d1fcd1;
+            padding: 1px 8px;
+            border-radius: 10px;
+            margin: 0 8px;
         }
     }
 
-- 
2.54.0


From 1a345354672279522466ba7de1a3e28bce12852a Mon Sep 17 00:00:00 2001
From: Jonas Gerg <joniogerg@gmail.com>
Date: Tue, 14 Jul 2026 22:31:49 +0200
Subject: [PATCH 20/26] style: swap name and date in gottesdienst card header

---
 public/src/components/GottesdienstCard.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/public/src/components/GottesdienstCard.vue b/public/src/components/GottesdienstCard.vue
index 7f0a6fd..0e8e818 100644
--- a/public/src/components/GottesdienstCard.vue
+++ b/public/src/components/GottesdienstCard.vue
@@ -159,13 +159,13 @@ function getOwnMarkHint(): string {
                 >
                     <i v-if="getOwnMarkIcon()" class="icon">{{ getOwnMarkIcon() }}</i>
                 </button>
-                <span class="name">{{ gottesdienst.name !== "" ? gottesdienst.name : "Gottesdienst" }}</span>
+                <span class="day">{{ formatWeekday(gottesdienst.date) }} {{ formatDay(gottesdienst.date) }}</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>
+                <span class="name">{{ gottesdienst.name !== "" ? gottesdienst.name : "Gottesdienst" }}</span>
                 <span class="time">um {{ formatTime(gottesdienst.date) }} Uhr</span>
                 <span class="attendance">Anwesenheit: {{ formatTime(gottesdienst.attendance) }}</span>
             </div>
@@ -307,6 +307,10 @@ function getOwnMarkHint(): string {
         }
     }
 
+    .day {
+        font-weight: 700;
+    }
+
     .info {
         display: flex;
         flex-wrap: wrap;
-- 
2.54.0


From cbe703d3d22a0b450abe367ccf9f109c83c511b9 Mon Sep 17 00:00:00 2001
From: Jonas Gerg <joniogerg@gmail.com>
Date: Tue, 14 Jul 2026 22:32:49 +0200
Subject: [PATCH 21/26] finishing touches

---
 public/src/components/GottesdienstCard.vue | 1 +
 public/src/components/GroupView.vue        | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/public/src/components/GottesdienstCard.vue b/public/src/components/GottesdienstCard.vue
index 0e8e818..83daff4 100644
--- a/public/src/components/GottesdienstCard.vue
+++ b/public/src/components/GottesdienstCard.vue
@@ -309,6 +309,7 @@ function getOwnMarkHint(): string {
 
     .day {
         font-weight: 700;
+        flex: 1;
     }
 
     .info {
diff --git a/public/src/components/GroupView.vue b/public/src/components/GroupView.vue
index 102766e..04fd8bf 100644
--- a/public/src/components/GroupView.vue
+++ b/public/src/components/GroupView.vue
@@ -243,13 +243,13 @@ function dateToValueString(time) {
     }
 
     @media(min-width: 800px) {
-        flex-direction: row;
         padding: 10px 16px;
         gap: 0;
 
         .top-row {
             flex: 1;
             gap: 10px;
+            grid-template-columns: 180px 1fr 180px;
         }
 
         .arrow {
-- 
2.54.0


From 88f8f4241b3dc2fda4211dbc02ccaf9839a8fb7d Mon Sep 17 00:00:00 2001
From: Jonas Gerg <joniogerg@gmail.com>
Date: Tue, 14 Jul 2026 22:35:25 +0200
Subject: [PATCH 22/26] feat: only show tabs bar for admin users

---
 public/src/components/ListView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/src/components/ListView.vue b/public/src/components/ListView.vue
index 741d28d..f4bd42f 100644
--- a/public/src/components/ListView.vue
+++ b/public/src/components/ListView.vue
@@ -30,7 +30,7 @@ function countXMarks(miniId: number): number {
 
 <template>
     <div class="list-view">
-        <div class="tab-bar">
+        <div class="tab-bar" v-if="admin">
             <button
                 class="tab"
                 :class="{ active: activeTab === 'gottesdienste' }"
@@ -63,7 +63,7 @@ function countXMarks(miniId: number): number {
             </button>
         </template>
 
-        <template v-else>
+        <template v-if="admin && activeTab === 'ministranten'">
             <div class="mini-list">
                 <div v-for="mini in ministranten" :key="mini.id" class="mini-row">
                     <span class="mini-name">{{ mini.firstname }} {{ mini.lastname }}</span>
-- 
2.54.0


From fa44d0d738b244e385c9b082bd459bb4ccaedfda Mon Sep 17 00:00:00 2001
From: Jonas Gerg <joniogerg@gmail.com>
Date: Tue, 14 Jul 2026 22:36:53 +0200
Subject: [PATCH 23/26] feat: one-time tutorial overlay on first list view
 visit

---
 public/src/components/ListView.vue | 84 +++++++++++++++++++++++++++++-
 1 file changed, 83 insertions(+), 1 deletion(-)

diff --git a/public/src/components/ListView.vue b/public/src/components/ListView.vue
index f4bd42f..dca9868 100644
--- a/public/src/components/ListView.vue
+++ b/public/src/components/ListView.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import {ref} from "vue"
+import {ref, watch} from "vue"
 import type {Gottesdienst, Mark, SimplifiedMinistrant} from "@/models/models"
 import GottesdienstCard from "@/components/GottesdienstCard.vue"
 
+const STORAGE_KEY = "miniplan_list_tutorial_seen"
+
 const props = defineProps<{
     gottesdienste: Gottesdienst[]
     ministranten: SimplifiedMinistrant[]
@@ -22,6 +24,12 @@ const emit = defineEmits<{
 }>()
 
 const activeTab = ref<"gottesdienste" | "ministranten">("gottesdienste")
+const showTutorial = ref(!localStorage.getItem(STORAGE_KEY))
+
+function dismissTutorial() {
+    showTutorial.value = false
+    localStorage.setItem(STORAGE_KEY, "true")
+}
 
 function countXMarks(miniId: number): number {
     return props.marks.filter(m => m.mid === miniId && m.value === 1).length
@@ -81,6 +89,19 @@ function countXMarks(miniId: number): number {
                 </button>
             </div>
         </template>
+
+        <div class="tutorial-overlay" v-if="showTutorial" @click.self="dismissTutorial">
+            <div class="tutorial-card">
+                <h3><i class="icon">info</i> Listenansicht</h3>
+                <ul>
+                    <li><strong>Gottesdienste</strong> sind als Karten dargestellt – jede Karte zeigt Datum, Uhrzeit und Rückmeldungen.</li>
+                    <li>Klicke auf dein <strong>Kästchen</strong> in der Karte, um deine Teilnahme anzugeben: <span class="chip cross">✓</span> dabei, <span class="chip minus">✗</span> nicht dabei.</li>
+                    <li>Die <strong>Rückmeldungen</strong> der anderen siehst du aufgeklappt unter „X Rückmeldungen".</li>
+                    <li v-if="admin">Als Admin siehst du zusätzlich den <strong>Ministranten-Tab</strong> und kannst Markierungen direkt anklicken.</li>
+                </ul>
+                <button @click="dismissTutorial">Verstanden!</button>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -263,6 +284,67 @@ function countXMarks(miniId: number): number {
     }
 }
 
+.tutorial-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.35);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    padding: 16px;
+
+    .tutorial-card {
+        background: #fff;
+        border-radius: 12px;
+        padding: 28px 32px;
+        max-width: 440px;
+        width: 100%;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+
+        h3 {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin: 0 0 16px;
+            font-size: 20px;
+
+            i {
+                font-size: 26px;
+                color: #555;
+            }
+        }
+
+        ul {
+            margin: 0 0 20px;
+            padding: 0 0 0 18px;
+            line-height: 1.7;
+            font-size: 15px;
+            color: #333;
+
+            li {
+                margin-bottom: 6px;
+            }
+        }
+
+        .chip {
+            display: inline-block;
+            padding: 0 6px;
+            border-radius: 4px;
+            font-size: 13px;
+            font-weight: 700;
+
+            &.cross { background: #d1fcd1; color: #045b04; }
+            &.minus { background: #fdd5d5; color: #690b0b; }
+        }
+
+        button {
+            display: flex;
+            margin-left: auto;
+        }
+    }
+}
+
 .import-btn {
     display: flex;
     width: 100%;
-- 
2.54.0


From 1b248ad12106f3338b1fb02ff6b2b38118a71ee4 Mon Sep 17 00:00:00 2001
From: Jonas Gerg <joniogerg@gmail.com>
Date: Tue, 14 Jul 2026 22:39:32 +0200
Subject: [PATCH 24/26] fix: remove unneccesary padding in ministrant-row

---
 public/src/components/GottesdienstCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/src/components/GottesdienstCard.vue b/public/src/components/GottesdienstCard.vue
index 83daff4..7e4b6c7 100644
--- a/public/src/components/GottesdienstCard.vue
+++ b/public/src/components/GottesdienstCard.vue
@@ -379,7 +379,7 @@ function getOwnMarkHint(): string {
         display: flex;
         align-items: center;
         gap: 8px;
-        padding: 8px 0 8px 26px;
+        padding: 8px 0 8px 0;
         border-bottom: 1px solid #f0f0f0;
 
         &:last-child {
-- 
2.54.0


From cd7bc8427f96c08347c61ef052f28104d96c835a Mon Sep 17 00:00:00 2001
From: Jonas Gerg <joniogerg@gmail.com>
Date: Tue, 14 Jul 2026 22:41:36 +0200
Subject: [PATCH 25/26] fix: add note to add proper versioning for database

---
 .../src/main/kotlin/de/walamana/plugins/Databases.kt             | 1 +
 1 file changed, 1 insertion(+)

diff --git a/private/minis-backend/src/main/kotlin/de/walamana/plugins/Databases.kt b/private/minis-backend/src/main/kotlin/de/walamana/plugins/Databases.kt
index a0a4d2e..e0d82b4 100644
--- a/private/minis-backend/src/main/kotlin/de/walamana/plugins/Databases.kt
+++ b/private/minis-backend/src/main/kotlin/de/walamana/plugins/Databases.kt
@@ -29,6 +29,7 @@ fun Application.configureDatabases() {
         SchemaUtils.create(GottesdienstGroups)
         SchemaUtils.create(Gottesdienste)
         SchemaUtils.create(Marks)
+        // TODO Add proper versioning and migration for database
         exec("ALTER TABLE MINISTRANTEN ALTER COLUMN birthday BIGINT NULL;")
     }
 }
-- 
2.54.0


From e1928f7af91001660e3606447110ab04f089d0dc Mon Sep 17 00:00:00 2001
From: Jonas Gerg <joniogerg@gmail.com>
Date: Tue, 14 Jul 2026 22:45:55 +0200
Subject: [PATCH 26/26] feat: refresh token when page is reloaded

---
 .../kotlin/de/walamana/plugins/Security.kt    |  2 +-
 .../de/walamana/views/AuthenticationView.kt   | 23 ++++++++++++++++++
 public/src/App.vue                            |  5 +++-
 public/src/services/auth.ts                   | 24 +++++++++++++++++++
 4 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/private/minis-backend/src/main/kotlin/de/walamana/plugins/Security.kt b/private/minis-backend/src/main/kotlin/de/walamana/plugins/Security.kt
index a92c6b8..eea46b6 100644
--- a/private/minis-backend/src/main/kotlin/de/walamana/plugins/Security.kt
+++ b/private/minis-backend/src/main/kotlin/de/walamana/plugins/Security.kt
@@ -59,7 +59,7 @@ fun Payload.mid() = getClaim("id").asInt()
 
 
 object Security {
-    fun DEFAULT_EXPIRY() = Date(System.currentTimeMillis() + 1000 * 60 * 60 * 24 * 14);
+    fun DEFAULT_EXPIRY() = Date(System.currentTimeMillis() + 1000L * 60 * 60 * 24 * 40);
 
     suspend fun authenticateUser(application: Application, username: String, password: String): Ministrant? {
         println("Username $username password $password")
diff --git a/private/minis-backend/src/main/kotlin/de/walamana/views/AuthenticationView.kt b/private/minis-backend/src/main/kotlin/de/walamana/views/AuthenticationView.kt
index 8a5f1ee..eb0f1d3 100644
--- a/private/minis-backend/src/main/kotlin/de/walamana/views/AuthenticationView.kt
+++ b/private/minis-backend/src/main/kotlin/de/walamana/views/AuthenticationView.kt
@@ -3,6 +3,7 @@ package de.walamana.views
 import at.favre.lib.crypto.bcrypt.BCrypt
 import com.auth0.jwt.JWT
 import com.auth0.jwt.algorithms.Algorithm
+import de.walamana.models.Ministrant
 import de.walamana.models.MinistrantenDao
 import de.walamana.plugins.Security
 import de.walamana.plugins.getJWTEnvironment
@@ -98,6 +99,28 @@ fun Route.configureAuthenticationRoutes() {
 
                 call.respond(hashMapOf("password" to newPassword))
             }
+            post("refresh") {
+                val principal = call.principal<JWTPrincipal>()!!
+                val jwtEnv = application.getJWTEnvironment()
+                val username = principal.payload.username()
+
+                val ministrant = if (username == "admin") {
+                    val allMinis = MinistrantenDao.allMinistranten().map { it.username }
+                    Ministrant(0, "admin", "", "admin", "admin", null, allMinis)
+                } else {
+                    MinistrantenDao.getMinistrant(username) ?: return@post
+                }
+
+                val newToken = Security.createToken(jwtEnv, ministrant)
+                val expiry = Security.DEFAULT_EXPIRY().toGMTString()
+
+                call.response.header(
+                    "Set-Cookie",
+                    "token=$newToken; HttpOnly; Expires=$expiry"
+                )
+
+                call.respond(AuthenticationResult(true, newToken, ministrant.privileges))
+            }
         }
     }
 }
diff --git a/public/src/App.vue b/public/src/App.vue
index f900d66..1b95328 100644
--- a/public/src/App.vue
+++ b/public/src/App.vue
@@ -22,8 +22,11 @@ function print(){
     window.print()
 }
 
-onMounted(() => {
+onMounted(async () => {
     Auth.checkForToken()
+    if (Auth.getToken()) {
+        await Auth.refreshToken()
+    }
 })
 
 LoginService.subject.subscribe(() => {
diff --git a/public/src/services/auth.ts b/public/src/services/auth.ts
index 58abe21..61e2bdb 100644
--- a/public/src/services/auth.ts
+++ b/public/src/services/auth.ts
@@ -71,6 +71,30 @@ export namespace Auth {
         }
     }
 
+    export async function refreshToken(): Promise<boolean> {
+        const token = getToken()
+        if (!token) return false
+
+        return api("/auth/refresh", "POST").then(res => {
+            if (res.status == 200) {
+                return res.json().then(data => {
+                    if (data.success) {
+                        setToken(data.token ?? "")
+                        const payload = parseJwt(data.token)
+                        loggedIn = true
+                        user = payload.username
+                        privileges = payload.privileges
+                        privileges.push(user)
+                        loggedInSubject.next(true)
+                        return true
+                    }
+                    return false
+                })
+            }
+            return false
+        }).catch(() => false)
+    }
+
     function parseJwt (token) {
         var base64Url = token.split('.')[1];
         var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
-- 
2.54.0