feat(DiaryParticipantsPanel, DiaryView): add group photo cropping functionality

- Introduced a new button in the DiaryParticipantsPanel for opening the group photo crop dialog.
- Integrated the GroupPhotoCropDialog component in DiaryView, allowing users to manage group photos.
- Added state management for showing the group photo crop dialog and handling member image updates.
- Enhanced styling for the new button to maintain consistency with existing UI elements.

frontend/src/components/DiaryParticipantsPanel.vue

@@ -12,6 +12,14 @@
                     <span class="participant-gallery-button-icon" aria-hidden="true">{{ galleryLoading ? '⏳' : '🖼️' }}</span>
                     <span>{{ galleryLoading ? $t('diary.galleryCreating') : $t('diary.gallery') }}</span>
                 </button>
+                <button
+                    type="button"
+                    class="participant-group-photo-button"
+                    @click="$emit('open-group-photo-crop')"
+                >
+                    <span aria-hidden="true">📷</span>
+                    <span>{{ $t('members.groupPhotoCrop') }}</span>
+                </button>
             </div>
             <input
                 :value="participantSearchQuery"
@@ -141,7 +149,8 @@ export default {
         'open-orders',
         'open-tags',
         'open-quick-add',
-        'open-gallery'
+        'open-gallery',
+        'open-group-photo-crop'
     ]
 };
 </script>
@@ -196,6 +205,19 @@ export default {
     box-shadow: none;
 }
 
+.participant-group-photo-button {
+    padding: 0.45rem 0.75rem;
+    border: 1px solid var(--border-color);
+    border-radius: 10px;
+    background: var(--surface-muted);
+    color: var(--text-color);
+    font-weight: 600;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+}
+
 .participant-search-input {
     width: 100%;
     padding: 0.65rem 0.8rem;

frontend/src/views/DiaryView.vue

@@ -570,6 +570,7 @@
                         @open-tags="openTagInfos"
                         @open-quick-add="openQuickAddDialog"
                         @open-gallery="openGalleryDialog"
+                        @open-group-photo-crop="showGroupPhotoCropDialog = true"
                     />
                 </div>
             </div>
@@ -673,6 +674,13 @@
             @member-click="handleGalleryMemberClick"
         />
 
+        <GroupPhotoCropDialog
+            v-model="showGroupPhotoCropDialog"
+            :club-id="currentClub"
+            :members="members"
+            @member-image-updated="handleDiaryGroupPhotoMemberImageUpdated"
+        />
+
         <MemberOrdersDialog
             v-if="showMemberOrdersDialog && selectedMemberForOrders"
             v-model="showMemberOrdersDialog"
@@ -722,6 +730,7 @@ import AccidentFormDialog from '../components/AccidentFormDialog.vue';
 import QuickAddMemberDialog from '../components/QuickAddMemberDialog.vue';
 import MemberGalleryDialog from '../components/MemberGalleryDialog.vue';
 import MemberOrdersDialog from '../components/MemberOrdersDialog.vue';
+import GroupPhotoCropDialog from '../components/members/GroupPhotoCropDialog.vue';
 import DiaryParticipantsPanel from '../components/DiaryParticipantsPanel.vue';
 import DiaryActivitiesPanel from '../components/DiaryActivitiesPanel.vue';
 import DiaryOverviewPanels from '../components/diary/DiaryOverviewPanels.vue';
@@ -787,6 +796,7 @@ export default {
         QuickAddMemberDialog,
         MemberGalleryDialog,
         MemberOrdersDialog,
+        GroupPhotoCropDialog,
         DiaryParticipantsPanel,
         DiaryActivitiesPanel,
         DiaryOverviewPanels
@@ -891,6 +901,7 @@ export default {
             editingActivityId: null, // ID der Aktivität, die gerade bearbeitet wird
             // Suche für Inline-Edit
             showGalleryDialog: false,
+            showGroupPhotoCropDialog: false,
             editShowDropdown: false,
             editSearchResults: [],
             editSearchForId: null,
@@ -1186,6 +1197,14 @@ export default {
             console.log('[handleGalleryMemberClick] Clicked member:', member);
             await this.toggleParticipant(member.memberId);
         },
+        async handleDiaryGroupPhotoMemberImageUpdated(event) {
+            const { memberId } = event || {};
+            const member = this.members.find(entry => String(entry.id) === String(memberId));
+            if (member) {
+                member.hasImage = true;
+            }
+            await this.showInfo(this.$t('messages.success'), this.$t('members.groupPhotoCropSaved'), '', 'success');
+        },
         
         hasItemDrawingData(item) {
             if (!item) return false;