スクロールが上に吹っ飛ぶバグを修正

src/components/Main/MainView/MessagesScroller/MessagesScroller.vue

@@ -217,11 +217,22 @@ watch(
         state.height = newHeight
         return
       }
-      rootRef.value.scrollTo({
-        top: newHeight - state.height
-      })
-    }
-    state.height = newHeight
+      //上に追加された時はスクロール位置を変更する。
+      if (props.lastLoadingDirection === 'former') {
+        rootRef.value.scrollTo({
+          top: newHeight - state.height
+        })
+        state.height = newHeight
+      }
+
+      if (props.lastLoadingDirection === 'latest') {
+        // チャンネルを移動したとき、
+        rootRef.value.scrollTo({
+          top: newHeight
+        })
+        state.height = newHeight
+      }
+    } else state.height = newHeight
   },
   { deep: true, flush: 'post' }
 )

src/components/Main/MainView/MessagesScroller/composables/useMessagesFetcher.ts

@@ -96,6 +96,24 @@ const useMessageFetcher = (
     )
   }
 
+  const onLoadLatestMessagesRequest = async () => {
+    isLoading.value = true
+
+    await runWithIdentifierCheck(
+      async () => {
+        const newMessageIds = await fetchFormerMessages(isReachedEnd)
+        await renderMessageFromIds(newMessageIds)
+        return newMessageIds
+      },
+      newMessageIds => {
+        isLoading.value = false
+        isInitialLoad.value = false
+        lastLoadingDirection.value = 'latest'
+        messageIds.value = [...new Set([...newMessageIds, ...messageIds.value])]
+      }
+    )
+  }
+
   const onLoadLatterMessagesRequest = async () => {
     if (!fetchLatterMessages || isReachedLatest.value) {
       return
@@ -191,7 +209,7 @@ const useMessageFetcher = (
       onLoadAroundMessagesRequest(props.entryMessageId)
     } else {
       isReachedLatest.value = true
-      onLoadFormerMessagesRequest()
+      onLoadLatestMessagesRequest()
     }
   }
 

src/components/Main/MainView/QallView/QallMessageView.vue

@@ -1,14 +1,14 @@
 <script lang="ts" setup>
+import MessagesScroller from '/@/components/Main/MainView/MessagesScroller/MessagesScroller.vue'
+import MessageInput from '/@/components/Main/MainView/MessageInput/MessageInput.vue'
+import ScrollLoadingBar from '/@/components/Main/MainView/ScrollLoadingBar.vue'
 import { computed, nextTick, ref, shallowRef } from 'vue'
+import type { ChannelId, UserId } from '/@/types/entity-ids'
 import useChannelMessageFetcher from '../ChannelView/ChannelViewContent/composables/useChannelMessageFetcher'
+import { useChannelsStore } from '/@/store/entities/channels'
 import MessageElement from '/@/components/Main/MainView/MessageElement/MessageElement.vue'
-import MessageInput from '/@/components/Main/MainView/MessageInput/MessageInput.vue'
-import MessagesScroller from '/@/components/Main/MainView/MessagesScroller/MessagesScroller.vue'
-import ScrollLoadingBar from '/@/components/Main/MainView/ScrollLoadingBar.vue'
-import IconButton from '/@/components/UI/IconButton.vue'
 import { useSubscriptionStore } from '/@/store/domain/subscription'
-import { useChannelsStore } from '/@/store/entities/channels'
-import type { ChannelId, UserId } from '/@/types/entity-ids'
+import IconButton from '/@/components/UI/IconButton.vue'
 
 const props = defineProps<{
   channelId: ChannelId