From 84c63bc7d26604170e0e452bda78270a3f4cf56f Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Fri, 22 May 2026 14:04:49 +0200
Subject: [PATCH] feat: Add plan duration display to diary activities and
 enhance styling

---
 frontend/src/views/DiaryView.vue | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/frontend/src/views/DiaryView.vue b/frontend/src/views/DiaryView.vue
index c4cf988f..498ca373 100644
--- a/frontend/src/views/DiaryView.vue
+++ b/frontend/src/views/DiaryView.vue
@@ -439,6 +439,9 @@
                                                     <span v-if="!isStructuralPlanItem(item) && getPlanItemStatus(item).label" class="plan-status-badge" :class="`plan-status-badge-${getPlanItemStatus(item).tone}`">
                                                         {{ getPlanItemStatus(item).label }}
                                                     </span>
+                                                    <span v-if="getPlanDurationMinutesDisplay(item)" class="plan-duration-badge">
+                                                        {{ getPlanDurationMinutesDisplay(item) }}
+                                                    </span>
                                                 </div>
                                                 <div class="plan-row-actions">
                                                     <button @click="startActivityEdit(item)" class="plan-row-action-button">{{ $t('common.edit') }}</button>
@@ -469,6 +472,9 @@
                                                         <span v-if="!isStructuralPlanItem(item) && getPlanItemStatus(item).label" class="plan-status-badge" :class="`plan-status-badge-${getPlanItemStatus(item).tone}`">
                                                             {{ getPlanItemStatus(item).label }}
                                                         </span>
+                                                        <span v-if="getPlanDurationMinutesDisplay(item)" class="plan-duration-badge">
+                                                            {{ getPlanDurationMinutesDisplay(item) }}
+                                                        </span>
                                                     </div>
                                                     <div class="plan-row-actions">
                                                         <button @click="startActivityEdit(item)" class="plan-row-action-button">{{ $t('common.edit') }}</button>
@@ -2749,6 +2755,13 @@ export default {
             }
             return `${item.duration || ''}${item.durationText && item.durationText.trim() !== '' ? ` (${item.durationText})` : ''}`;
         },
+        getPlanDurationMinutesDisplay(item) {
+            const duration = Number(item?.duration);
+            if (!Number.isFinite(duration) || duration <= 0) {
+                return '';
+            }
+            return `${duration} ${this.$t('diary.minutes')}`;
+        },
         getTimeblockMaxGroupDuration(timeblockItem) {
             const entries = Array.isArray(timeblockItem?.groupActivities) ? timeblockItem.groupActivities : [];
             if (!entries.length) return 0;
@@ -5722,6 +5735,17 @@ img {
     color: #7a5a12;
 }
 
+.plan-duration-badge {
+    display: inline-flex;
+    align-items: center;
+    border-radius: 999px;
+    padding: 0.1rem 0.45rem;
+    font-size: 0.72rem;
+    font-weight: 700;
+    background: #eaf1f5;
+    color: #39566a;
+}
+
 .diary-readiness-panel {
     margin-bottom: 1rem;
     padding: 0.9rem 1rem;