お気に入りチャンネルは未読で別に表示できるように

src/components/Main/NavigationBar/ChannelList/ChannelElement.vue

@@ -14,6 +14,7 @@
         :has-notification="notificationState.hasNotification"
         :has-notification-on-child="notificationState.hasNotificationOnChild"
         :is-inactive="!channel.active"
+        :show-star="notificationState.isStarred && showStar"
         @mousedown.stop="onChannelHashClick"
         @keydown.enter="onChannelHashKeydownEnter"
         @mouseenter="onHashHovered"
@@ -89,6 +90,7 @@ const props = withDefaults(
     channel: ChannelTreeNode
     isOpened?: boolean
     showShortenedPath?: boolean
+    showStar?: boolean
   }>(),
   {
     isOpened: false,

src/components/Main/NavigationBar/ChannelList/ChannelElementHash.vue

@@ -18,7 +18,7 @@
       :data-has-notification-on-child="$boolAttr(hasNotificationOnChild)"
       :data-is-inactive="$boolAttr(isInactive)"
     >
-      <a-icon name="hash" :class="$style.icon" />
+      <a-icon :name="showStar ? 'star-outline' : 'hash'" :class="$style.icon" />
     </div>
     <div v-if="hasNotification" :class="$style.indicator">
       <notification-indicator :border-width="2" />
@@ -38,14 +38,16 @@ withDefaults(
     isOpened?: boolean
     hasNotification?: boolean
     hasNotificationOnChild?: boolean
+    showStar?: boolean
   }>(),
   {
     hasChild: false,
     isSelected: false,
     isInactive: false,
     isOpened: false,
     hasNotification: false,
-    hasNotificationOnChild: false
+    hasNotificationOnChild: false,
+    showStar: false
   }
 )
 </script>

src/components/Main/NavigationBar/ChannelList/ChannelList.vue

@@ -6,6 +6,7 @@
       :class="$style.element"
       :channel="channel"
       show-shortened-path
+      :show-star="props.showStar"
     >
       <channel-element-topic
         v-if="showTopic"
@@ -27,9 +28,11 @@ const props = withDefaults(
   defineProps<{
     channels: ReadonlyArray<Channel>
     showTopic?: boolean
+    showStar?: boolean
   }>(),
   {
-    showTopic: false
+    showTopic: false,
+    showStar: false
   }
 )
 

src/components/Main/NavigationBar/NavigationContent/HomeTab.vue

@@ -9,14 +9,30 @@
     </navigation-content-container>
     <navigation-content-container
       v-if="
-        dmChannelsWithNotification.length + channelsWithNotification.length !==
+        dmChannelsWithNotification.length +
+          starredChannelsWithNoticeable.length +
+          notStarredChannelsWithNoticeable.length !==
         0
       "
-      subtitle="未読"
+      subtitle="メンション"
       :class="$style.item"
     >
       <d-m-channel-list :dm-channels="dmChannelsWithNotification" />
-      <channel-list :channels="channelsWithNotification" />
+      <channel-list :channels="starredChannelsWithNoticeable" show-star />
+      <channel-list :channels="notStarredChannelsWithNoticeable" />
+    </navigation-content-container>
+    <navigation-content-container
+      v-if="
+        dmChannelsWithNotification.length +
+          starredChannelsWithUnreadMessage.length +
+          notStarredChannelsWithUnreadMessage.length !==
+        0
+      "
+      subtitle="未読"
+      :class="$style.item"
+    >
+      <channel-list :channels="starredChannelsWithUnreadMessage" show-star />
+      <channel-list :channels="notStarredChannelsWithUnreadMessage" />
     </navigation-content-container>
     <navigation-content-container subtitle="チャンネル" :class="$style.item">
       <channel-tree
@@ -66,8 +82,13 @@ const homeChannelWithTree = computed(() => {
   return filterTrees(trees, channel => !channel.archived)
 })
 
-const { channelsWithNotification, dmChannelsWithNotification } =
-  useChannelsWithNotification()
+const {
+  starredChannelsWithNoticeable,
+  notStarredChannelsWithNoticeable,
+  starredChannelsWithUnreadMessage,
+  notStarredChannelsWithUnreadMessage,
+  dmChannelsWithNotification
+} = useChannelsWithNotification()
 
 const topLevelChannels = computed(() =>
   // filterTreesは重いのと内部ではreactiveである必要がないのでtoRawする

src/components/Main/NavigationBar/composables/useNotificationState.ts

@@ -3,6 +3,7 @@ import { computed, reactive } from 'vue'
 import { deepSome } from '/@/lib/basic/tree'
 import { useSubscriptionStore } from '/@/store/domain/subscription'
 import type { ChannelId } from '/@/types/entity-ids'
+import { useStaredChannels } from '/@/store/domain/staredChannels'
 
 const useNotificationState = <T extends { id: ChannelId; children: T[] }>(
   channelTree: Ref<{ id: ChannelId; children?: T[] }>
@@ -11,6 +12,7 @@ const useNotificationState = <T extends { id: ChannelId; children: T[] }>(
   const unreadChannel = computed(() =>
     unreadChannelsMap.value.get(channelTree.value.id)
   )
+  const starredChannelStore = useStaredChannels()
 
   const notificationState = reactive({
     hasNotification: computed(() => !!unreadChannel.value),
@@ -20,7 +22,14 @@ const useNotificationState = <T extends { id: ChannelId; children: T[] }>(
       return deepSome(tree, channel => unreadChannelsMap.value.has(channel.id))
     }),
     unreadCount: computed(() => unreadChannel.value?.count),
-    isNoticeable: computed(() => unreadChannel.value?.noticeable)
+    isNoticeable: computed(() => unreadChannel.value?.noticeable),
+    isStarred: computed(
+      () =>
+        !!unreadChannel.value &&
+        starredChannelStore.staredChannelSet.value.has(
+          unreadChannel.value.channelId
+        )
+    )
   })
   return notificationState
 }

src/composables/subscription/useChannelsWithNotification.ts

@@ -2,33 +2,70 @@ import { computed } from 'vue'
 import { isDefined } from '/@/lib/basic/array'
 import { useSubscriptionStore } from '/@/store/domain/subscription'
 import { useChannelsStore } from '/@/store/entities/channels'
+import { useStaredChannels } from '/@/store/domain/staredChannels'
 
 const useChannelsWithNotification = () => {
   const { unreadChannelsMap } = useSubscriptionStore()
   const { channelsMap, dmChannelsMap } = useChannelsStore()
+  const starredChannelStore = useStaredChannels()
 
   const sortedUnreadChannels = computed(() =>
     [...unreadChannelsMap.value.values()].sort((a, b) => {
-      if (a.noticeable !== b.noticeable) {
-        return b.noticeable ? 1 : -1
-      }
       return Date.parse(b.updatedAt) - Date.parse(a.updatedAt)
     })
   )
 
   const channelsWithNotification = computed(() =>
     sortedUnreadChannels.value
+      .filter(unread => unread.noticeable)
       .map(unread => channelsMap.value.get(unread.channelId))
       .filter(isDefined)
   )
 
+  const channelsWithUnreadMessage = computed(() =>
+    sortedUnreadChannels.value
+      .filter(unread => !unread.noticeable)
+      .map(unread => channelsMap.value.get(unread.channelId))
+      .filter(isDefined)
+  )
+
+  const starredChannelsWithNoticeable = computed(() =>
+    channelsWithNotification.value.filter(channel =>
+      starredChannelStore.staredChannelSet.value.has(channel.id)
+    )
+  )
+
+  const notStarredChannelsWithNoticeable = computed(() =>
+    channelsWithNotification.value.filter(
+      channel => !starredChannelStore.staredChannelSet.value.has(channel.id)
+    )
+  )
+
+  const starredChannelsWithUnreadMessage = computed(() =>
+    channelsWithUnreadMessage.value.filter(channel =>
+      starredChannelStore.staredChannelSet.value.has(channel.id)
+    )
+  )
+
+  const notStarredChannelsWithUnreadMessage = computed(() =>
+    channelsWithUnreadMessage.value.filter(
+      channel => !starredChannelStore.staredChannelSet.value.has(channel.id)
+    )
+  )
+
   const dmChannelsWithNotification = computed(() =>
     sortedUnreadChannels.value
       .map(unread => dmChannelsMap.value.get(unread.channelId ?? ''))
       .filter(isDefined)
   )
 
-  return { channelsWithNotification, dmChannelsWithNotification }
+  return {
+    starredChannelsWithNoticeable,
+    notStarredChannelsWithNoticeable,
+    starredChannelsWithUnreadMessage,
+    notStarredChannelsWithUnreadMessage,
+    dmChannelsWithNotification
+  }
 }
 
 export default useChannelsWithNotification