From 82997a233e7c412398813d5cca78db14edcee66f Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Sat, 10 May 2025 22:52:56 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=E3=82=B9=E3=82=AF=E3=83=AD=E3=83=BC?=
 =?UTF-8?q?=E3=83=AB=E3=81=8C=E4=B8=8A=E3=81=AB=E5=90=B9=E3=81=A3=E9=A3=9B?=
 =?UTF-8?q?=E3=81=B6=E3=83=90=E3=82=B0=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MessagesScroller/MessagesScroller.vue     |  9 ++++++++
 .../composables/useMessagesFetcher.ts         | 22 +++++++++++++++++--
 .../MainView/QallView/QallMessageView.vue     | 12 +++++-----
 3 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue b/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
index d8fc699821..b52213abbc 100644
--- a/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
+++ b/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
@@ -221,6 +221,15 @@ watch(
         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
   },
diff --git a/src/components/Main/MainView/MessagesScroller/composables/useMessagesFetcher.ts b/src/components/Main/MainView/MessagesScroller/composables/useMessagesFetcher.ts
index 3cad0bbc40..2c6f8663cb 100644
--- a/src/components/Main/MainView/MessagesScroller/composables/useMessagesFetcher.ts
+++ b/src/components/Main/MainView/MessagesScroller/composables/useMessagesFetcher.ts
@@ -50,7 +50,7 @@ const useMessageFetcher = (
    * @param fetch 取得する関数。データを返す
    * @param apply 適用する関数。表示チャンネル/クリップフォルダが変化していないときに実行される。fetchで返したデータを引数で受け取れる
    */
-  const runWithIdentifierCheck = async <T>(
+  const runWithIdentifierCheck = async <T,>(
     fetch: () => Promise<T>,
     apply: (result: T) => void | Promise<void>
   ) => {
@@ -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()
     }
   }
 
diff --git a/src/components/Main/MainView/QallView/QallMessageView.vue b/src/components/Main/MainView/QallView/QallMessageView.vue
index 7449e5dc3b..f0892b44f0 100644
--- a/src/components/Main/MainView/QallView/QallMessageView.vue
+++ b/src/components/Main/MainView/QallView/QallMessageView.vue
@@ -1,15 +1,15 @@
 <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 IconButton from '/@/components/UI/IconButton.vue'
 import { useMessagesStore } from '/@/store/entities/messages'
-import type { ChannelId, UserId } from '/@/types/entity-ids'
 
 const props = defineProps<{
   channelId: ChannelId

From a6636124d9cb81ad4dd44c6c25bc0917b425ebf6 Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Sat, 10 May 2025 23:01:36 +0900
Subject: [PATCH 2/2] fix format

---
 .../Main/MainView/MessagesScroller/MessagesScroller.vue         | 1 -
 .../MainView/MessagesScroller/composables/useMessagesFetcher.ts | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue b/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
index 85bb1a2dff..362c028c37 100644
--- a/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
+++ b/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
@@ -233,7 +233,6 @@ watch(
         state.height = newHeight
       }
     } else state.height = newHeight
-
   },
   { deep: true, flush: 'post' }
 )
diff --git a/src/components/Main/MainView/MessagesScroller/composables/useMessagesFetcher.ts b/src/components/Main/MainView/MessagesScroller/composables/useMessagesFetcher.ts
index 2c6f8663cb..1a8737503a 100644
--- a/src/components/Main/MainView/MessagesScroller/composables/useMessagesFetcher.ts
+++ b/src/components/Main/MainView/MessagesScroller/composables/useMessagesFetcher.ts
@@ -50,7 +50,7 @@ const useMessageFetcher = (
    * @param fetch 取得する関数。データを返す
    * @param apply 適用する関数。表示チャンネル/クリップフォルダが変化していないときに実行される。fetchで返したデータを引数で受け取れる
    */
-  const runWithIdentifierCheck = async <T,>(
+  const runWithIdentifierCheck = async <T>(
     fetch: () => Promise<T>,
     apply: (result: T) => void | Promise<void>
   ) => {