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] 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%;