画面上部に常にメッセージの日付を表示

src/components/Main/MainView/ChannelView/ChannelViewContent/ChannelViewContentMain.vue

@@ -1,6 +1,11 @@
 <template>
-  <div :class="$style.container">
+  <div ref="containerRef" :class="$style.container">
     <scroll-loading-bar :class="$style.loadingBar" :show="isLoading" />
+    <shown-message-date
+      v-if="shownMessageDateValue"
+      :shown-message-date="shownMessageDateValue"
+      :channel-id="channelId"
+    />
     <messages-scroller
       ref="scrollerEle"
       :message-ids="messageIds"
@@ -9,10 +14,12 @@
       :is-loading="isLoading"
       :entry-message-id="entryMessageId"
       :last-loading-direction="lastLoadingDirection"
+      :container-ref="containerRef"
       @request-load-former="onLoadFormerMessagesRequest"
       @request-load-latter="onLoadLatterMessagesRequest"
       @scroll.passive="handleScroll"
       @reset-is-reached-latest="resetIsReachedLatest"
+      @end-separator-intersected="onEndSeparatorIntersected"
     >
       <template #default="{ messageId, onChangeHeight, onEntryMessageLoaded }">
         <messages-scroller-separator
@@ -31,8 +38,10 @@
           :is-archived="isArchived"
           :is-entry-message="messageId === entryMessageId"
           :pinned-user-id="messagePinnedUserMap.get(messageId)"
+          :container-ref="containerRef"
           @change-height="onChangeHeight"
           @entry-message-loaded="onEntryMessageLoaded"
+          @intersected="onMessageIntersected"
         />
       </template>
     </messages-scroller>
@@ -63,6 +72,7 @@ import { useRouter } from 'vue-router'
 import { constructChannelPath } from '/@/router'
 import useChannelPath from '/@/composables/useChannelPath'
 import { useSubscriptionStore } from '/@/store/domain/subscription'
+import ShownMessageDate from './ShownMessageDate.vue'
 
 const props = defineProps<{
   channelId: ChannelId
@@ -141,6 +151,15 @@ const handleScroll = () => {
     showToNewMessageButton.value = true
   }
 }
+
+const containerRef = ref<HTMLDivElement | null>(null)
+const shownMessageDateValue = ref<string | undefined>()
+const onMessageIntersected = (createdAt: string) => {
+  shownMessageDateValue.value = getFullDayString(new Date(createdAt))
+}
+const onEndSeparatorIntersected = () => {
+  shownMessageDateValue.value = undefined
+}
 </script>
 
 <style lang="scss" module>

src/components/Main/MainView/ChannelView/ChannelViewContent/ShownMessageDate.vue

@@ -0,0 +1,34 @@
+<template>
+  <div :class="$style.container">
+    <div :class="$style.innerContainer">
+      {{ shownMessageDate }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { ChannelId } from '/@/types/entity-ids'
+
+defineProps<{
+  channelId: ChannelId
+  shownMessageDate: string
+}>()
+</script>
+
+<style lang="scss" module>
+.container {
+  position: absolute;
+  inset: 12px 0 auto;
+  margin: 0 auto;
+  width: 140px;
+  z-index: $z-index-shown-message-date;
+}
+.innerContainer {
+  background-color: $theme-background-primary-default;
+  border-radius: 24px;
+  padding: 4px 16px;
+  text-align: center;
+  font-weight: bold;
+  border: 1px solid $theme-ui-tertiary-default;
+}
+</style>

src/components/Main/MainView/MessageElement/MessageElement.vue

@@ -36,7 +36,7 @@ import MessageStampList from './MessageStampList.vue'
 import MessagePinned from './MessagePinned.vue'
 import MessageContents from './MessageContents.vue'
 import MessageTools from '/@/components/Main/MainView/MessageElement/MessageTools.vue'
-import { computed, shallowRef, toRef } from 'vue'
+import { computed, onMounted, onUnmounted, shallowRef, toRef } from 'vue'
 import type { MessageId, UserId } from '/@/types/entity-ids'
 import { useResponsiveStore } from '/@/store/ui/responsive'
 import type { ChangeHeightData } from './composables/useElementRenderObserver'
@@ -52,6 +52,7 @@ const props = withDefaults(
     pinnedUserId?: UserId
     isEntryMessage?: boolean
     isArchived?: boolean
+    containerRef?: HTMLDivElement | null
   }>(),
   {
     isEntryMessage: false,
@@ -62,6 +63,7 @@ const props = withDefaults(
 const emit = defineEmits<{
   (e: 'entryMessageLoaded', _relativePos: number): void
   (e: 'changeHeight', _data: ChangeHeightData): void
+  (e: 'intersected', _createdAt: string): void
 }>()
 
 const bodyRef = shallowRef<HTMLDivElement | null>(null)
@@ -83,6 +85,26 @@ useElementRenderObserver(
 )
 
 const { isHovered, onMouseEnter, onMouseLeave } = useHover()
+
+const observer = new IntersectionObserver(
+  entries => {
+    if (entries[0]?.isIntersecting) {
+      if (message.value === undefined) return
+      emit('intersected', message.value.createdAt)
+    }
+  },
+  {
+    root: props.containerRef,
+    rootMargin: '0px 0px -100%'
+  }
+)
+onMounted(() => {
+  if (bodyRef.value === null || props.containerRef === undefined) return
+  observer.observe(bodyRef.value)
+})
+onUnmounted(() => {
+  observer.disconnect()
+})
 </script>
 
 <style lang="scss" module>

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

@@ -12,6 +12,7 @@
     >
       <messages-scroller-separator
         v-if="isReachedEnd"
+        ref="endSeparatorEle"
         title="これ以上メッセージはありません"
         :class="$style.noMoreSeparator"
       />
@@ -136,6 +137,7 @@ const props = withDefaults(
     isLoading?: boolean
     entryMessageId?: MessageId
     lastLoadingDirection: LoadingDirection
+    containerRef?: HTMLDivElement | null
   }>(),
   {
     isLoading: false
@@ -146,6 +148,7 @@ const emit = defineEmits<{
   (e: 'requestLoadFormer'): void
   (e: 'requestLoadLatter'): void
   (e: 'resetIsReachedLatest'): void
+  (e: 'endSeparatorIntersected'): void
 }>()
 
 const { lastScrollPosition } = useMainViewStore()
@@ -254,6 +257,29 @@ onUnmounted(() => {
 
 const { onClick } = useMarkdownInternalHandler()
 useScrollRestoration(rootRef, state)
+
+const endSeparatorEle = shallowRef<{ $el: HTMLDivElement } | undefined>()
+const observer = new IntersectionObserver(
+  entries => {
+    if (entries[0]?.isIntersecting) {
+      emit('endSeparatorIntersected')
+    }
+  },
+  {
+    root: props.containerRef
+  }
+)
+watch(
+  () => props.isReachedEnd,
+  async () => {
+    await nextTick()
+    if (!endSeparatorEle.value || !props.containerRef) return
+    observer.observe(endSeparatorEle.value.$el)
+  }
+)
+onUnmounted(() => {
+  observer.disconnect()
+})
 </script>
 
 <style lang="scss" module>

src/styles/_z-index.scss

@@ -7,6 +7,7 @@ $z-index-message-attachment-video-overlay: 1;
 $z-index-message-input-file-close-button: 1;
 
 $z-index-message-loading: 2;
+$z-index-shown-message-date: 2;
 
 $z-index-message-element-tools: 3;
 $z-index-message-element-tools-menu: 5;