traQにフォーカスしてないユーザーの表示を変更する。

src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebar.vue

@@ -10,6 +10,7 @@
             v-model:is-viewers-detail-open="isViewersDetailOpen"
             :channel-id="channelId"
             :viewer-ids="viewingUsers"
+            :inactive-viewer-ids="inactiveViewingUsers"
             :pinned-messages-count="pinnedMessages.length"
             @move-to-pinned="moveToPinnedPage"
             @move-to-events="moveToEventsPage"
@@ -30,6 +31,7 @@
     <template #opener>
       <channel-sidebar-hidden
         :viewer-ids="viewingUsers"
+        :inactive-viewer-ids="inactiveViewingUsers"
         @open="openSidebar"
         @open-viewers="openViewers"
       />
@@ -57,6 +59,7 @@ const props = defineProps<{
   isSidebarOpenerReady: boolean
   pinnedMessages: Pin[]
   viewingUsers: UserId[]
+  inactiveViewingUsers: UserId[]
 }>()
 
 const { channelsMap } = useChannelsStore()

src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebarContent.vue

@@ -3,6 +3,7 @@
     <channel-sidebar-viewers
       v-model="isViewersDetailOpen"
       :viewer-ids="viewerIds"
+      :inactive-viewer-ids="inactiveViewerIds"
       :class="$style.sidebarItem"
     />
     <channel-sidebar-qall
@@ -56,6 +57,7 @@ const props = withDefaults(
   defineProps<{
     channelId: ChannelId
     viewerIds: readonly UserId[]
+    inactiveViewerIds: readonly UserId[]
     pinnedMessagesCount?: number
     isViewersDetailOpen: boolean
   }>(),

src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebarHidden.vue

@@ -13,6 +13,7 @@
       count-clickable
       show-count
       :user-ids="viewerIds"
+      :inactive-user-ids="inactiveViewerIds"
       :class="$style.rest"
       @count-click="emit('openViewers')"
     />
@@ -27,6 +28,7 @@ import type { UserId } from '/@/types/entity-ids'
 withDefaults(
   defineProps<{
     viewerIds?: readonly UserId[]
+    inactiveViewerIds?: readonly UserId[]
   }>(),
   {
     viewerIds: () => []

src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebarViewers.vue

@@ -9,12 +9,14 @@
       direction="row"
       transition="fade-right"
       :user-ids="viewerIds"
+      :inactive-user-ids="inactiveViewerIds"
       @toggle="toggle"
     />
   </sidebar-content-container>
   <channel-sidebar-viewers-detail
     v-else
     :viewer-ids="viewerIds"
+    :inactive-viewer-ids="inactiveViewerIds"
     @toggle="toggle"
   />
 </template>
@@ -31,6 +33,7 @@ import { useModelValueSyncer } from '/@/composables/useModelSyncer'
 const props = withDefaults(
   defineProps<{
     viewerIds?: readonly UserId[]
+    inactiveViewerIds?: readonly UserId[]
     modelValue: boolean
   }>(),
   {

src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebarViewersDetail.vue

@@ -4,6 +4,14 @@
       <user-icon :user-id="user.id" :size="32" />
       <div :class="$style.userName">{{ user.displayName }}</div>
     </div>
+    <div
+      v-for="user in inactiveUsers"
+      :key="user.id"
+      :class="[$style.item, $style.transparent]"
+    >
+      <user-icon :user-id="user.id" :size="32" />
+      <div :class="$style.userName">{{ user.displayName }}</div>
+    </div>
   </sidebar-content-container>
 </template>
 
@@ -18,9 +26,11 @@ import { useUsersStore } from '/@/store/entities/users'
 const props = withDefaults(
   defineProps<{
     viewerIds?: readonly UserId[]
+    inactiveViewerIds?: readonly UserId[]
   }>(),
   {
-    viewerIds: () => []
+    viewerIds: () => [],
+    inactiveViewerIds: () => []
   }
 )
 
@@ -32,6 +42,9 @@ const { usersMap } = useUsersStore()
 const users = computed(() =>
   props.viewerIds.map(id => usersMap.value.get(id)).filter(isDefined)
 )
+const inactiveUsers = computed(() =>
+  props.inactiveViewerIds.map(id => usersMap.value.get(id)).filter(isDefined)
+)
 </script>
 
 <style lang="scss" module>
@@ -46,6 +59,9 @@ const users = computed(() =>
     margin-bottom: 0;
   }
 }
+.transparent {
+  opacity: 0.5;
+}
 .userName {
   margin-left: 8px;
   font-weight: bold;

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

@@ -17,6 +17,7 @@
         :is-sidebar-opener-ready="isReady"
         :pinned-messages="pinnedMessages"
         :viewing-users="viewingUsers"
+        :inactive-viewing-users="inactiveViewingUsers"
       />
     </template>
   </primary-view-frame>
@@ -40,5 +41,7 @@ const props = defineProps<{
 
 const channelId = toRef(props, 'channelId')
 const pinnedMessages = usePinnedMessages(channelId)
-const { viewingUsers, typingUsers } = useCurrentViewers(channelId)
+
+const { viewingUsers, inactiveViewingUsers, typingUsers } =
+  useCurrentViewers(channelId)
 </script>

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

@@ -12,7 +12,7 @@
       @request-load-former="onLoadFormerMessagesRequest"
       @request-load-latter="onLoadLatterMessagesRequest"
       @scroll-passive="handleScroll"
-      @reset-is-reached-latest="resetIsReachedLatest"
+      @window-viewd="onWindowViewd"
     >
       <template #default="{ messageId, onChangeHeight, onEntryMessageLoaded }">
         <messages-scroller-separator
@@ -86,6 +86,9 @@ const {
   onLoadAroundMessagesRequest
 } = useChannelMessageFetcher(scrollerEle, props)
 
+const { unreadChannelsMap, deleteUnreadChannelWithSend } =
+  useSubscriptionStore()
+
 const { messagesMap } = useMessagesStore()
 const firstUnreadMessageId = computed(() => {
   if (!unreadSince.value) return ''
@@ -114,9 +117,17 @@ const messagePinnedUserMap = computed(
   () => new Map(props.pinnedMessages.map(pin => [pin.message.id, pin.userId]))
 )
 
-const { unreadChannelsMap } = useSubscriptionStore()
-const resetIsReachedLatest = () => {
-  if (!unreadChannelsMap.value.get(props.channelId)) return
+const onWindowViewd = () => {
+  const unread = unreadChannelsMap.value.get(props.channelId)
+  if (unread === undefined) return
+  //最後まで読み込まれている時は「ここから未読」の位置を修正し、未読を消す。
+  if (
+    unread.updatedAt ===
+    messagesMap.value.get(messageIds.value.at(-1) ?? '')?.createdAt
+  ) {
+    unreadSince.value = unread.since
+    deleteUnreadChannelWithSend(props.channelId)
+  }
   isReachedLatest.value = false
 }
 

src/components/Main/MainView/DMView/DMSidebar/DMSidebar.vue

@@ -8,6 +8,7 @@
         <template #content>
           <sidebar-content
             :viewer-ids="viewingUsers"
+            :inactive-viewer-ids="inactiveViewingUsers"
             :pinned-messages-count="pinnedMessages.length"
             @move-to-pinned="moveToPinnedPage"
             @move-to-events="moveToEventsPage"
@@ -26,7 +27,11 @@
       />
     </template>
     <template #opener>
-      <channel-sidebar-hidden :viewer-ids="viewingUsers" @open="openSidebar" />
+      <channel-sidebar-hidden
+        :viewer-ids="viewingUsers"
+        :inactive-viewer-ids="inactiveViewingUsers"
+        @open="openSidebar"
+      />
     </template>
   </primary-view-sidebar>
 </template>
@@ -49,6 +54,7 @@ defineProps<{
   isSidebarOpenerReady: boolean
   pinnedMessages: Pin[]
   viewingUsers: UserId[]
+  inactiveViewingUsers: UserId[]
 }>()
 
 const {

src/components/Main/MainView/DMView/DMSidebar/DMSidebarContent.vue

@@ -3,6 +3,7 @@
     <channel-sidebar-viewers
       v-model="isViewersDetailOpen"
       :viewer-ids="viewerIds"
+      :inactive-viewer-ids="inactiveViewerIds"
       :class="$style.item"
     />
     <channel-sidebar-pinned
@@ -27,6 +28,7 @@ import { ref } from 'vue'
 withDefaults(
   defineProps<{
     viewerIds: readonly UserId[]
+    inactiveViewerIds?: readonly UserId[]
     pinnedMessagesCount?: number
   }>(),
   {

src/components/Main/MainView/DMView/DMView.vue

@@ -18,6 +18,7 @@
         :is-sidebar-opener-ready="isReady"
         :pinned-messages="pinnedMessages"
         :viewing-users="viewingUsers"
+        :inactive-viewing-users="inactiveViewingUsers"
       />
     </template>
   </primary-view-frame>
@@ -42,5 +43,6 @@ const props = defineProps<{
 
 const channelId = toRef(props, 'channelId')
 const pinnedMessages = usePinnedMessages(channelId)
-const { viewingUsers, typingUsers } = useCurrentViewers(channelId)
+const { viewingUsers, inactiveViewingUsers, typingUsers } =
+  useCurrentViewers(channelId)
 </script>

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

@@ -150,7 +150,7 @@ const props = withDefaults(
 const emit = defineEmits<{
   (e: 'requestLoadFormer'): void
   (e: 'requestLoadLatter'): void
-  (e: 'resetIsReachedLatest'): void
+  (e: 'windowViewd'): void
   (e: 'scrollPassive'): void
 }>()
 
@@ -191,22 +191,21 @@ watch(
   (ids, prevIds) => {
     if (!rootRef.value) return
     /* state.height の更新を忘れないようにすること */
-
     const newHeight = rootRef.value.scrollHeight
+    if (ids.length - prevIds.length === -1) {
+      // 削除された場合は何もしない
+      state.height = newHeight
+      return
+    }
     if (
       props.lastLoadingDirection === 'latest' ||
-      props.lastLoadingDirection === 'former'
+      props.lastLoadingDirection === 'former' ||
+      props.isReachedLatest
     ) {
-      if (ids.length - prevIds.length === -1) {
-        // 削除された場合は何もしない
-        state.height = newHeight
-        return
-      }
       // XXX: 追加時にここは0になる
       if (ids.length - prevIds.length === 0) {
         const scrollBottom =
           rootRef.value.scrollTop + rootRef.value.clientHeight
-
         // 一番下のメッセージあたりを見ているときに、
         // 新規に一つ追加された場合は一番下までスクロール
         if (state.height - 50 <= scrollBottom) {
@@ -217,11 +216,13 @@ 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
+        })
+      }
+    } else state.height = newHeight
   },
   { deep: true, flush: 'post' }
 )
@@ -246,16 +247,27 @@ const requestLoadMessages = () => {
 const handleScroll = throttle(17, requestLoadMessages)
 
 const visibilitychangeListener = () => {
+  emit('windowViewd')
   if (document.visibilityState === 'visible') {
-    requestLoadMessages()
+    nextTick(requestLoadMessages)
   }
-  emit('resetIsReachedLatest')
+}
+const focusListener = () => {
+  emit('windowViewd')
+  nextTick(requestLoadMessages)
+}
+const blurListener = () => {
+  emit('windowViewd')
 }
 onMounted(() => {
   document.addEventListener('visibilitychange', visibilitychangeListener)
+  window.addEventListener('focus', focusListener)
+  window.addEventListener('blur', blurListener)
 })
 onUnmounted(() => {
   document.removeEventListener('visibilitychange', visibilitychangeListener)
+  window.removeEventListener('focus', focusListener)
+  window.removeEventListener('blur', blurListener)
 })
 
 const { onClick } = useMarkdownInternalHandler()

src/components/UI/UserIcon.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     :role="isClickable ? 'button' : 'img'"
-    :class="$style.container"
+    :class="[$style.container, isInactive && $style.transparent]"
     :style="styles.container"
     @click.prevent.stop="openModal"
   >
@@ -42,12 +42,14 @@ const props = withDefaults(
     indicatorSize?: number
     preventModal?: boolean
     hasNotification?: boolean
+    isInactive?: boolean
   }>(),
   {
     size: 36,
     indicatorSize: 10,
     preventModal: false,
-    hasNotification: false
+    hasNotification: false,
+    isInactive: false
   }
 )
 
@@ -109,4 +111,7 @@ const { isClickable, openModal } = useUserModalOpener(
   top: 0;
   right: 0;
 }
+.transparent {
+  opacity: 0.5;
+}
 </style>