add message cloud v1

src/components/GameWindow.vue

@@ -9,6 +9,7 @@ import { apiGetGame, apiGetTeam, apiLetsgo } from './client';
 import { UnauthorizedError } from './UnauthorizedError';
 import WelcomeGameBlock from './WelcomeGameBlock.vue';
 import HeaderText from './HeaderText.vue';
+import MessageCloud from './MessageCloud.vue';
 
 const router = useRouter();
 const route = useRoute();
@@ -171,12 +172,7 @@ onMounted(() => {
         </div>
         <div v-else>
           <div v-for="action in team.actions" :key="action.id">
-            <div class="message-cloud">
-              <div class="message-header">
-                {{ action.place }}: {{ action.name }}
-                <span class="collapse-icon" @click="action.isOpen = !action.isOpen" style="float: right;">{{
-                  action.isOpen ? '−' : '+' }}</span>
-              </div>
+            <MessageCloud :action="action">
               <div v-show="action.isOpen">
                 <hr class="hr" />
                 <div class="message-content">
@@ -195,7 +191,7 @@ onMounted(() => {
                   {{ application.number }} Приложение: {{ application.name }}
                 </div>
               </div>
-            </div>
+            </MessageCloud>
           </div>
         </div>
       </div>
@@ -242,20 +238,6 @@ onMounted(() => {
   background-color: black;
 }
 
-.message-cloud {
-  border: 1px solid #444444;
-  border-radius: 15px;
-  margin: 12px 10px;
-  padding: 16px;
-  background-color: var(--main-back-item-color);
-  display: flow-root;
-}
-
-.message-header {
-  font-size: large;
-  font-weight: 200;
-}
-
 .message-content {
   font-weight: 500;
   white-space: pre-wrap;
@@ -292,11 +274,6 @@ onMounted(() => {
   height: calc(100dvh - 140px);
 }
 
-.collapse-icon {
-  padding: 0 15px;
-  cursor: pointer;
-}
-
 .team-name-block {
   margin-right: 10px;
   width: 50px;