Merge pull request #4395 from traPtitech/feat/transparent_inactive_user

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

Author: Takeno-hito

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

@@ -9,7 +9,8 @@
           <channel-sidebar-content
             v-model:is-viewers-detail-open="isViewersDetailOpen"
             :channel-id="channelId"
-            :viewer-ids="viewingUsers"
+            :viewer-ids="activeViewingUsers"
+            :inactive-viewer-ids="inactiveViewingUsers"
             :pinned-messages-count="pinnedMessages.length"
             @move-to-pinned="moveToPinnedPage"
             @move-to-events="moveToEventsPage"
@@ -29,7 +30,8 @@
     </template>
     <template #opener>
       <channel-sidebar-hidden
-        :viewer-ids="viewingUsers"
+        :viewer-ids="activeViewingUsers"
+        :inactive-viewer-ids="inactiveViewingUsers"
         @open="openSidebar"
         @open-viewers="openViewers"
       />
@@ -56,7 +58,8 @@ const props = defineProps<{
   channelId: ChannelId
   isSidebarOpenerReady: boolean
   pinnedMessages: Pin[]
-  viewingUsers: UserId[]
+  activeViewingUsers: 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
@@ -57,6 +58,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

@@ -1,6 +1,14 @@
 <template>
   <sidebar-content-container clickable title="閲覧者" @toggle="emit('toggle')">
-    <div v-for="user in users" :key="user.id" :class="$style.item">
+    <div v-for="user in viewers" :key="user.id" :class="$style.item">
+      <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>
@@ -18,9 +26,11 @@ import { useUsersStore } from '/@/store/entities/users'
 const props = withDefaults(
   defineProps<{
     viewerIds?: readonly UserId[]
+    inactiveViewerIds?: readonly UserId[]
   }>(),
   {
-    viewerIds: () => []
+    viewerIds: () => [],
+    inactiveViewerIds: () => []
   }
 )
 
@@ -29,9 +39,12 @@ const emit = defineEmits<{
 }>()
 
 const { usersMap } = useUsersStore()
-const users = computed(() =>
+const viewers = 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

@@ -19,7 +19,8 @@
         :channel-id="channelId"
         :is-sidebar-opener-ready="isReady"
         :pinned-messages="pinnedMessages"
-        :viewing-users="viewingUsers"
+        :active-viewing-users="activeViewingUsers"
+        :inactive-viewing-users="inactiveViewingUsers"
       />
     </template>
   </primary-view-frame>
@@ -45,6 +46,8 @@ const props = defineProps<{
 
 const channelId = toRef(props, 'channelId')
 const pinnedMessages = usePinnedMessages(channelId)
-const { viewingUsers, typingUsers } = useCurrentViewers(channelId)
+
+const { activeViewingUsers, inactiveViewingUsers, typingUsers } =
+  useCurrentViewers(channelId)
 const { getQallingState } = useQall()
 </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-viewed="onWindowViewed"
     >
       <template #default="{ messageId, onChangeHeight, onEntryMessageLoaded }">
         <messages-scroller-separator
@@ -46,23 +46,23 @@
 </template>
 
 <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 type { Pin } from '@traptitech/traq'
 import { computed, ref, shallowRef } from 'vue'
-import type { ChannelId, MessageId, UserId } from '/@/types/entity-ids'
+import { useRouter } from 'vue-router'
 import useChannelMessageFetcher from './composables/useChannelMessageFetcher'
-import { useChannelsStore } from '/@/store/entities/channels'
+import useDayDiffMessages from './composables/useDayDiffMessages'
 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 MessagesScrollerSeparator from '/@/components/Main/MainView/MessagesScroller/MessagesScrollerSeparator.vue'
-import { useMessagesStore } from '/@/store/entities/messages'
-import useDayDiffMessages from './composables/useDayDiffMessages'
+import ScrollLoadingBar from '/@/components/Main/MainView/ScrollLoadingBar.vue'
+import useChannelPath from '/@/composables/useChannelPath'
 import { getFullDayString } from '/@/lib/basic/date'
-import type { Pin } from '@traptitech/traq'
-import { useRouter } from 'vue-router'
 import { constructChannelPath } from '/@/router'
-import useChannelPath from '/@/composables/useChannelPath'
 import { useSubscriptionStore } from '/@/store/domain/subscription'
+import { useChannelsStore } from '/@/store/entities/channels'
+import { useMessagesStore } from '/@/store/entities/messages'
+import type { ChannelId, MessageId, UserId } from '/@/types/entity-ids'
 
 const props = defineProps<{
   channelId: ChannelId
@@ -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 onWindowViewed = () => {
+  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

@@ -7,7 +7,8 @@
         </template>
         <template #content>
           <sidebar-content
-            :viewer-ids="viewingUsers"
+            :viewer-ids="activeViewingUsers"
+            :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="activeViewingUsers"
+        :inactive-viewer-ids="inactiveViewingUsers"
+        @open="openSidebar"
+      />
     </template>
   </primary-view-sidebar>
 </template>
@@ -48,7 +53,8 @@ defineProps<{
   userName: string
   isSidebarOpenerReady: boolean
   pinnedMessages: Pin[]
-  viewingUsers: UserId[]
+  activeViewingUsers: 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

@@ -17,7 +17,8 @@
         :user-name="userName"
         :is-sidebar-opener-ready="isReady"
         :pinned-messages="pinnedMessages"
-        :viewing-users="viewingUsers"
+        :active-viewing-users="activeViewingUsers"
+        :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 { activeViewingUsers, inactiveViewingUsers, typingUsers } =
+  useCurrentViewers(channelId)
 </script>