メッセージ入力欄を下に

src/components/Main/MainView/ChannelView/ChannelViewContent/composables/useChannelView.ts

@@ -0,0 +1,71 @@
+import { computed, ref, type ShallowRef } from 'vue'
+import useChannelMessageFetcher from './useChannelMessageFetcher'
+import { useChannelsStore } from '/@/store/entities/channels'
+import { useSubscriptionStore } from '/@/store/domain/subscription'
+export const useChannelView = ({
+  channelId,
+  entryMessageId,
+  scrollerEle
+}: {
+  channelId: string
+  entryMessageId?: string
+  scrollerEle: ShallowRef<{ $el: HTMLDivElement } | undefined>
+}) => {
+  const isMessageShow = ref(false)
+
+  const {
+    messageIds,
+    isReachedEnd,
+    isReachedLatest,
+    isLoading,
+    lastLoadingDirection,
+    onLoadFormerMessagesRequest,
+    onLoadLatterMessagesRequest
+  } = useChannelMessageFetcher(scrollerEle, { channelId, entryMessageId })
+
+  const { channelsMap } = useChannelsStore()
+  const isArchived = computed(
+    () => channelsMap.value.get(channelId)?.archived ?? false
+  )
+
+  const { unreadChannelsMap } = useSubscriptionStore()
+  const resetIsReachedLatest = () => {
+    if (!unreadChannelsMap.value.get(channelId)) return
+    isReachedLatest.value = false
+  }
+
+  const showToNewMessageButton = ref(false)
+  const toNewMessage = (behavior?: ScrollBehavior) => {
+    if (!scrollerEle.value) return
+    showToNewMessageButton.value = false
+    scrollerEle.value.$el.scrollTo({
+      top: scrollerEle.value.$el.scrollHeight,
+      behavior: behavior
+    })
+  }
+
+  const handleScroll = () => {
+    if (scrollerEle.value === undefined || isLoading.value) return
+    const { scrollTop, scrollHeight, clientHeight } = scrollerEle.value.$el
+    showToNewMessageButton.value = scrollHeight - 2 * clientHeight > scrollTop
+    if (!isReachedLatest.value) {
+      showToNewMessageButton.value = true
+    }
+  }
+
+  return {
+    isMessageShow,
+    messageIds,
+    isReachedEnd,
+    isReachedLatest,
+    isLoading,
+    lastLoadingDirection,
+    onLoadFormerMessagesRequest,
+    onLoadLatterMessagesRequest,
+    isArchived,
+    resetIsReachedLatest,
+    showToNewMessageButton,
+    toNewMessage,
+    handleScroll
+  }
+}

src/components/Main/MainView/MessageInput/MessageInput.vue

@@ -2,7 +2,7 @@
   <div
     ref="containerEle"
     :class="$style.container"
-    :data-is-mobile="$boolAttr(isMobile)"
+    :data-is-mobile="$boolAttr(forceMobileStyle || isMobile)"
   >
     <button
       v-if="showToNewMessageButton"
@@ -36,7 +36,9 @@
         v-model="state.text"
         :channel-id="channelId"
         :is-posting="isPosting"
-        :shrink-to-one-line="isMobile && isLeftControlsExpanded"
+        :shrink-to-one-line="
+          (forceMobileStyle || isMobile) && isLeftControlsExpanded
+        "
         @focus="onFocus"
         @blur="onBlur"
         @add-attachments="onAddAttachments"
@@ -85,6 +87,7 @@ const props = defineProps<{
   channelId: ChannelId | DMChannelId
   typingUsers: UserId[]
   showToNewMessageButton: boolean
+  forceMobileStyle?: boolean
 }>()
 const emit = defineEmits<{
   (e: 'clickToNewMessageButton'): void

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

@@ -1,64 +1,3 @@
-<template>
-  <div
-    :class="$style.container"
-    :data-is-not-messages-show="$boolAttr(!isMessageShow)"
-  >
-    <scroll-loading-bar
-      :class="$style.loadingBar"
-      :show="isLoading && isMessageShow"
-    />
-    <transition name="fade-bottom" mode="out-in">
-      <messages-scroller
-        v-if="isMessageShow"
-        ref="scrollerEle"
-        :message-ids="messageIds"
-        :is-reached-end="isReachedEnd"
-        :is-reached-latest="isReachedLatest"
-        :is-loading="isLoading"
-        :last-loading-direction="lastLoadingDirection"
-        @request-load-former="onLoadFormerMessagesRequest"
-        @request-load-latter="onLoadLatterMessagesRequest"
-        @scroll-passive="handleScroll"
-        @reset-is-reached-latest="resetIsReachedLatest"
-      >
-        <template
-          #default="{ messageId, onChangeHeight, onEntryMessageLoaded }"
-        >
-          <message-element
-            :class="$style.element"
-            :message-id="messageId"
-            :is-archived="isArchived"
-            @change-height="onChangeHeight"
-            @entry-message-loaded="onEntryMessageLoaded"
-          />
-        </template>
-      </messages-scroller>
-    </transition>
-    <div :class="$style.uiElement">
-      <FormButton
-        label="メッセージを表示"
-        @click="
-          () => {
-            if (isMessageShow) {
-              isMessageShow = false
-              toNewMessage('smooth')
-            } else {
-              isMessageShow = true
-              nextTick(() => toNewMessage())
-            }
-          }
-        "
-      />
-      <message-input
-        :channel-id="channelId"
-        :typing-users="typingUsers"
-        :show-to-new-message-button="showToNewMessageButton"
-        @click-to-new-message-button="toNewMessage"
-      />
-    </div>
-  </div>
-</template>
-
 <script lang="ts" setup>
 import MessagesScroller from '/@/components/Main/MainView/MessagesScroller/MessagesScroller.vue'
 import MessageInput from '/@/components/Main/MainView/MessageInput/MessageInput.vue'
@@ -120,15 +59,97 @@ const handleScroll = () => {
 }
 </script>
 
+<template>
+  <div
+    :class="$style.container"
+    :data-is-not-messages-show="$boolAttr(!isMessageShow)"
+  >
+    <div :class="$style.mainViewConteiner">
+      <div :class="$style.messageContainer">
+        <scroll-loading-bar
+          :class="$style.loadingBar"
+          :show="isLoading && isMessageShow"
+        />
+        <transition name="fade-bottom" mode="out-in">
+          <messages-scroller
+            v-if="isMessageShow"
+            ref="scrollerEle"
+            :message-ids="messageIds"
+            :is-reached-end="isReachedEnd"
+            :is-reached-latest="isReachedLatest"
+            :is-loading="isLoading"
+            :last-loading-direction="lastLoadingDirection"
+            @request-load-former="onLoadFormerMessagesRequest"
+            @request-load-latter="onLoadLatterMessagesRequest"
+            @scroll-passive="handleScroll"
+            @reset-is-reached-latest="resetIsReachedLatest"
+          >
+            <template
+              #default="{ messageId, onChangeHeight, onEntryMessageLoaded }"
+            >
+              <message-element
+                :class="$style.element"
+                :message-id="messageId"
+                :is-archived="isArchived"
+                @change-height="onChangeHeight"
+                @entry-message-loaded="onEntryMessageLoaded"
+              />
+            </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>
+    <message-input
+      :channel-id="channelId"
+      :typing-users="typingUsers"
+      :show-to-new-message-button="showToNewMessageButton"
+      force-mobile-style
+      @click-to-new-message-button="toNewMessage"
+    />
+  </div>
+</template>
+
 <style lang="scss" module>
 .container {
   display: flex;
-  flex: 1 1;
+  height: 100%;
+  width: 100%;
   flex-direction: column;
-  justify-content: end;
+}
+
+.mainViewConteiner {
+  flex-grow: 1;
   position: relative;
-  width: 100%;
+}
+
+.messageContainer {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 30%;
   height: 100%;
+
+  display: flex;
+  flex: 1 1;
+  flex-direction: column;
+  justify-content: end;
   &[data-is-not-messages-show] {
     pointer-events: none;
   }