[#51015] Mobile, the participant section should move to details section

https://community.openproject.org/work_packages/51015

modules/meeting/app/components/_index.sass

@@ -1,3 +1,4 @@
 @import "./meeting_agenda_items/item_component/show_component.sass"
 @import "./meeting_agenda_items/form_component.sass"
 @import "./meetings/sidebar/state_component.sass"
+@import "./meetings/sidebar/participants_component.sass"

modules/meeting/app/components/meetings/sidebar/details_component.html.erb

@@ -85,6 +85,36 @@
               end
             end
           end
+
+          details.with_row(mt: 2, classes: 'meeting-detail-participants') do
+            render_meeting_attribute_row(:people) do
+              flex_layout do |duration|
+                duration.with_column(mr: 2) do
+                  render(Primer::Beta::Text.new) do
+                    [
+                      @meeting.invited_or_attended_participants.count,
+                      Meeting.human_attribute_name(
+                        :participants,
+                        count: @meeting.invited_or_attended_participants.count
+                      )
+                    ].join(" ")
+                  end
+                end
+
+                if @meeting.editable?
+                  duration.with_column(mr: 2) do
+                    render(Primer::Beta::Button.new(
+                      font_weight: :normal,
+                      scheme: :link,
+                      data: { 'show-dialog-id': "edit-participants-dialog" }
+                    )) do |link|
+                      t("label_meeting_show_all_participants")
+                    end
+                  end
+                end
+              end
+            end
+          end
         end
       end
     end

modules/meeting/app/components/meetings/sidebar/participants_component.sass

@@ -0,0 +1,14 @@
+@import 'helpers'
+
+.meeting-detail-participants
+  visibility: collapse
+
+@media screen and (max-width: $breakpoint-sm)
+  #meetings-sidebar-component
+    .BorderGrid-row:nth-child(3)
+      visibility: collapse
+      #participants-component
+        .Overlay-backdrop--center
+          visibility: visible
+  .meeting-detail-participants
+    visibility: visible

modules/meeting/app/components/meetings/sidebar/state_component.sass

@@ -4,4 +4,4 @@
   .op-meeting-sidebar-state
     flex-direction: row !important
     justify-content: space-between
-    align-items: center
+    align-items: center

modules/meeting/app/components/meetings/sidebar_component.html.erb

@@ -3,7 +3,9 @@
     render(Primer::OpenProject::BorderGrid.new) do |border_grid|
       border_grid.with_row { render(Meetings::Sidebar::DetailsComponent.new(meeting: @meeting)) }
       border_grid.with_row { render(Meetings::Sidebar::StateComponent.new(meeting: @meeting)) }
-      border_grid.with_row { render(Meetings::Sidebar::ParticipantsComponent.new(meeting: @meeting)) }
+      border_grid.with_row(id: 'participants-component') do
+       render(Meetings::Sidebar::ParticipantsComponent.new(meeting: @meeting))
+     end
     end
   end
 %>

modules/meeting/app/controllers/meetings_controller.rb

@@ -148,6 +148,7 @@ def update_participants
     if @meeting.errors.any?
       update_sidebar_participants_form_component_via_turbo_stream
     else
+      update_sidebar_details_component_via_turbo_stream
       update_sidebar_participants_component_via_turbo_stream
     end
 

modules/meeting/config/locales/en.yml

@@ -188,6 +188,7 @@ en:
   label_meeting_manage_participants: "Manage participants"
   label_meeting_no_participants: "No participants"
   label_meeting_show_hide_participants: "Show/hide %{count} more"
+  label_meeting_show_all_participants: "Show all"
   label_meeting_add_participants: "Add participants"
 
   text_meeting_not_editable_anymore: "This meeting is not editable anymore."