From bc1411f9ac38f800a50e874e4308072076fb1ed3 Mon Sep 17 00:00:00 2001
From: masky5859 <mathsuky2406@gmail.com>
Date: Sun, 26 Jan 2025 14:06:26 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=E3=82=B3=E3=83=A1=E3=83=B3=E3=83=88?=
 =?UTF-8?q?=E3=83=9C=E3=82=BF=E3=83=B3=E3=82=92=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/mdi.ts                             |  6 ++--
 .../MainView/QallView/QallMessageView.vue     | 14 ++++++++
 .../Main/MainView/QallView/QallView.vue       | 36 ++++++++++++-------
 3 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/src/assets/mdi.ts b/src/assets/mdi.ts
index bb429cf0e..a438b5cb8 100644
--- a/src/assets/mdi.ts
+++ b/src/assets/mdi.ts
@@ -85,7 +85,8 @@ import {
   mdiNotebook,
   mdiDelete,
   mdiVideo,
-  mdiVideoOff
+  mdiVideoOff,
+  mdiCommentTextMultipleOutline
 } from '@mdi/js'
 
 interface MdiIconsMapping {
@@ -179,7 +180,8 @@ const mdi: MdiIconsMapping = {
   'format-title': mdiFormatTitle,
   delete: mdiDelete,
   video: mdiVideo,
-  'video-off': mdiVideoOff
+  'video-off': mdiVideoOff,
+  'comment-outline': mdiCommentTextMultipleOutline
 }
 
 export default mdi
diff --git a/src/components/Main/MainView/QallView/QallMessageView.vue b/src/components/Main/MainView/QallView/QallMessageView.vue
index 6c69d1f00..1fabbc593 100644
--- a/src/components/Main/MainView/QallView/QallMessageView.vue
+++ b/src/components/Main/MainView/QallView/QallMessageView.vue
@@ -57,6 +57,20 @@ const handleScroll = () => {
     showToNewMessageButton.value = true
   }
 }
+
+const handleMessage = () => {
+  if (isMessageShow.value) {
+    isMessageShow.value = false
+    toNewMessage('smooth')
+  } else {
+    isMessageShow.value = true
+    nextTick(() => toNewMessage())
+  }
+}
+
+defineExpose({
+  handleMessage
+})
 </script>
 
 <template>
diff --git a/src/components/Main/MainView/QallView/QallView.vue b/src/components/Main/MainView/QallView/QallView.vue
index 32e0777af..0b92ed0fc 100644
--- a/src/components/Main/MainView/QallView/QallView.vue
+++ b/src/components/Main/MainView/QallView/QallView.vue
@@ -10,15 +10,12 @@ import { useStampPickerInvoker } from '/@/store/ui/stampPicker'
 import ParticipantList from './ParticipantList.vue'
 import type { TrackInfo } from '/@/composables/qall/useLiveKitSDK'
 import UserList from './UserList.vue'
-import { useModalStore } from '/@/store/ui/modal'
 import CameraDetailSetting from './CameraDetailSetting.vue'
 import ScreenShareDetailSetting from './ScreenShareDetailSetting.vue'
 import DetailButton from './DetailButton.vue'
 import IconButton from '/@/components/UI/IconButton.vue'
 import QallMessageView from './QallMessageView.vue'
 
-const { pushModal } = useModalStore()
-
 const {
   tracksMap,
   screenShareTracks,
@@ -177,23 +174,28 @@ const handleBackgroundSave = (data: {
 
 const showCameraDetailSetting = ref(false)
 const showShareScreenSettingDetail = ref(false)
+
+const childRef = ref<InstanceType<typeof QallMessageView> | null>(null)
+
+const showMessage = () => {
+  childRef.value?.handleMessage()
+}
 </script>
 
 <template>
   <div :class="$style.Block">
-    <QallMessageView :channel-id="callingChannel" :typing-users="[]">
+    <QallMessageView
+      ref="childRef"
+      :channel-id="callingChannel"
+      :typing-users="[]"
+    >
       <DanmakuContainer />
-      <IconButton
-        icon-name="close"
-        icon-mdi
-        :class="$style.closeButton"
-        @click="isSubView = true"
-      />
-
-      <!-- 縦並び用のラッパ -->
+      <div :class="$style.iconContainer">
+        <IconButton icon-name="comment-outline" icon-mdi @click="showMessage" />
+        <IconButton icon-name="close" icon-mdi @click="isSubView = true" />
+      </div>
       <div :class="$style.stackContainer">
         <UserList :class="$style.userList" />
-
         <div :class="$style.controlBarContainer">
           <div :class="$style.controlBar">
             <div :class="$style.smallButtonGroup">
@@ -380,4 +382,12 @@ const showShareScreenSettingDetail = ref(false)
   top: 1rem;
   right: 1rem;
 }
+
+.iconContainer {
+  display: flex;
+  gap: 4px;
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+}
 </style>

From 085f7d1a4e10c1f4d8b83d6f81d19dc389fd1f89 Mon Sep 17 00:00:00 2001
From: masky5859 <mathsuky2406@gmail.com>
Date: Sun, 26 Jan 2025 14:07:05 +0900
Subject: [PATCH 2/2] =?UTF-8?q?fix:=E3=83=A1=E3=83=83=E3=82=BB=E3=83=BC?=
 =?UTF-8?q?=E3=82=B8=E8=A1=A8=E7=A4=BA=E3=83=9C=E3=82=BF=E3=83=B3=E3=82=92?=
 =?UTF-8?q?=E5=89=8A=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Main/MainView/QallView/QallMessageView.vue  | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/src/components/Main/MainView/QallView/QallMessageView.vue b/src/components/Main/MainView/QallView/QallMessageView.vue
index 1fabbc593..b67ecf69e 100644
--- a/src/components/Main/MainView/QallView/QallMessageView.vue
+++ b/src/components/Main/MainView/QallView/QallMessageView.vue
@@ -8,7 +8,6 @@ import useChannelMessageFetcher from '../ChannelView/ChannelViewContent/composab
 import { useChannelsStore } from '/@/store/entities/channels'
 import MessageElement from '/@/components/Main/MainView/MessageElement/MessageElement.vue'
 import { useSubscriptionStore } from '/@/store/domain/subscription'
-import FormButton from '/@/components/UI/FormButton.vue'
 
 const props = defineProps<{
   channelId: ChannelId
@@ -111,22 +110,6 @@ defineExpose({
             </template>
           </messages-scroller>
         </transition>
-        <div :class="$style.uiElement">
-          <FormButton
-            label="メッセージを表示"
-            @click="
-              () => {
-                if (isMessageShow) {
-                  isMessageShow = false
-                  toNewMessage('smooth')
-                } else {
-                  isMessageShow = true
-                  nextTick(() => toNewMessage())
-                }
-              }
-            "
-          />
-        </div>
       </div>
       <slot name="default"></slot>
     </div>