feat(DiaryParticipantsPanel): add gallery button and loading state

- Introduced a new button in the DiaryParticipantsPanel for opening the gallery, with a loading state to indicate when the gallery is being created.
- Added a new `galleryLoading` property to manage the button's disabled state and text dynamically.
- Enhanced the layout of the participant toolbar for better user experience.

frontend/src/components/DiaryParticipantsPanel.vue

@@ -2,6 +2,16 @@
     <section class="diary-sidebar-section">
         <h3>{{ $t('diary.participants') }} ({{ participants.length }})</h3>
         <div class="participant-toolbar">
+            <div class="participant-toolbar-actions">
+                <button
+                    type="button"
+                    class="participant-gallery-button"
+                    :disabled="galleryLoading"
+                    @click="$emit('open-gallery')"
+                >
+                    {{ galleryLoading ? $t('diary.galleryCreating') : $t('diary.gallery') }}
+                </button>
+            </div>
             <input
                 :value="participantSearchQuery"
                 type="search"
@@ -79,6 +89,10 @@ export default {
             type: Array,
             required: true
         },
+        galleryLoading: {
+            type: Boolean,
+            default: false
+        },
         participantSearchQuery: {
             type: String,
             required: true
@@ -105,7 +119,8 @@ export default {
         'show-pic',
         'mark-form',
         'open-tags',
-        'open-quick-add'
+        'open-quick-add',
+        'open-gallery'
     ]
 };
 </script>
@@ -122,6 +137,26 @@ export default {
     margin-bottom: 0.85rem;
 }
 
+.participant-toolbar-actions {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.participant-gallery-button {
+    padding: 0.45rem 0.75rem;
+    border: 1px solid #ccd8e0;
+    border-radius: 8px;
+    background: #f3f7fa;
+    color: #365266;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.participant-gallery-button:disabled {
+    opacity: 0.6;
+    cursor: default;
+}
+
 .participant-search-input {
     width: 100%;
     padding: 0.55rem 0.7rem;

frontend/src/views/DiaryView.vue

@@ -12,13 +12,6 @@
                     @click="deleteCurrentDate">{{ $t('diary.deleteDate') }}</button>
                 <button @click="openNewDateDialog" class="btn-primary">{{ $t('diary.createNew') }}</button>
             </label>
-            <button
-                class="btn-secondary gallery-trigger"
-                :disabled="!currentClub || galleryLoading"
-                @click="openGalleryDialog"
-            >
-                {{ galleryLoading ? $t('diary.galleryCreating') : $t('diary.gallery') }}
-            </button>
         </div>
         <!-- Training Group Selection Dialog -->
         <div v-if="showTrainingGroupDialog" class="dialog-overlay" @click.self="closeTrainingGroupDialog">
@@ -631,6 +624,7 @@
                         v-show="!isMobileView || activeTab === 'members'"
                         :members="filteredDiaryMembers"
                         :participants="participants"
+                        :gallery-loading="galleryLoading"
                         :participant-search-query="participantSearchQuery"
                         :participant-filter="participantFilter"
                         :groups="groups"
@@ -644,6 +638,7 @@
                         @mark-form="markFormHandedOver"
                         @open-tags="openTagInfos"
                         @open-quick-add="openQuickAddDialog"
+                        @open-gallery="openGalleryDialog"
                     />
                 </div>
             </div>