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

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

@@ -7,16 +7,24 @@
     >
       <channel-tree :channels="homeChannelWithTree" show-shortened-path />
     </navigation-content-container>
+    <navigation-content-container
+      v-if="starredChannelsWithNotification.length !== 0"
+      subtitle="お気に入り"
+      :class="$style.item"
+    >
+      <channel-list :channels="starredChannelsWithNotification" />
+    </navigation-content-container>
     <navigation-content-container
       v-if="
-        dmChannelsWithNotification.length + channelsWithNotification.length !==
+        dmChannelsWithNotification.length +
+          notStarredChannelsWithNotification.length !==
         0
       "
       subtitle="未読"
       :class="$style.item"
     >
       <d-m-channel-list :dm-channels="dmChannelsWithNotification" />
-      <channel-list :channels="channelsWithNotification" />
+      <channel-list :channels="notStarredChannelsWithNotification" />
     </navigation-content-container>
     <navigation-content-container subtitle="チャンネル" :class="$style.item">
       <channel-tree
@@ -66,8 +74,11 @@ const homeChannelWithTree = computed(() => {
   return filterTrees(trees, channel => !channel.archived)
 })
 
-const { channelsWithNotification, dmChannelsWithNotification } =
-  useChannelsWithNotification()
+const {
+  notStarredChannelsWithNotification,
+  starredChannelsWithNotification,
+  dmChannelsWithNotification
+} = useChannelsWithNotification()
 
 const topLevelChannels = computed(() =>
   // filterTreesは重いのと内部ではreactiveである必要がないのでtoRawする

src/composables/subscription/useChannelsWithNotification.ts

@@ -2,10 +2,12 @@ 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) => {
@@ -16,10 +18,22 @@ const useChannelsWithNotification = () => {
     })
   )
 
-  const channelsWithNotification = computed(() =>
+  const notStarredChannelsWithNotification = computed(() =>
     sortedUnreadChannels.value
       .map(unread => channelsMap.value.get(unread.channelId))
       .filter(isDefined)
+      .filter(
+        channel => !starredChannelStore.staredChannelSet.value.has(channel.id)
+      )
+  )
+
+  const starredChannelsWithNotification = computed(() =>
+    sortedUnreadChannels.value
+      .map(unread => channelsMap.value.get(unread.channelId))
+      .filter(isDefined)
+      .filter(channel =>
+        starredChannelStore.staredChannelSet.value.has(channel.id)
+      )
   )
 
   const dmChannelsWithNotification = computed(() =>
@@ -28,7 +42,11 @@ const useChannelsWithNotification = () => {
       .filter(isDefined)
   )
 
-  return { channelsWithNotification, dmChannelsWithNotification }
+  return {
+    notStarredChannelsWithNotification,
+    starredChannelsWithNotification,
+    dmChannelsWithNotification
+  }
 }
 
 export default useChannelsWithNotification