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

traPtitech · Jun 21, 2024 · 78bfc4c · 78bfc4c
1 parent 470c2a1
commit 78bfc4c
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 5 deletions.
diff --git a/src/components/Main/NavigationBar/NavigationContent/HomeTab.vue b/src/components/Main/NavigationBar/NavigationContent/HomeTab.vue
@@ -7,16 +7,26 @@
     >
       <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,7 +76,7 @@ const homeChannelWithTree = computed(() => {
   return filterTrees(trees, channel => !channel.archived)
 })
 
-const { channelsWithNotification, dmChannelsWithNotification } =
+const { notStarredChannelsWithNotification, starredChannelsWithNotification, dmChannelsWithNotification } =
   useChannelsWithNotification()
 
 const topLevelChannels = computed(() =>

diff --git a/src/composables/subscription/useChannelsWithNotification.ts b/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,18 @@ 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 +38,7 @@ const useChannelsWithNotification = () => {
       .filter(isDefined)
   )
 
-  return { channelsWithNotification, dmChannelsWithNotification }
+  return { notStarredChannelsWithNotification, starredChannelsWithNotification, dmChannelsWithNotification }
 }
 
 export default useChannelsWithNotification