From 0b7ecd87f6b097999d3425af59bae08cd52bedcb Mon Sep 17 00:00:00 2001
From: Acbox <acbox0328@gmail.com>
Date: Sun, 29 Mar 2026 19:57:40 +0800
Subject: [PATCH] feat(web): use session-type icons for sidebar filter button

Replace the static Globe icon with dynamic type-specific icons
(MessageSquare, HeartPulse, Clock, GitBranch) that match the
session item icons, updating both icon and color on filter change.
---
 .../pages/home/components/session-sidebar.vue | 28 ++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/pages/home/components/session-sidebar.vue b/apps/web/src/pages/home/components/session-sidebar.vue
index cca4e11b..026ea12e 100644
--- a/apps/web/src/pages/home/components/session-sidebar.vue
+++ b/apps/web/src/pages/home/components/session-sidebar.vue
@@ -70,8 +70,10 @@
         <DropdownMenu>
           <DropdownMenuTrigger as-child>
             <button class="flex items-center gap-1">
-              <Globe
-                class="size-2.5 text-muted-foreground"
+              <component
+                :is="filterIconComponent"
+                class="size-2.5"
+                :class="filterIconClass"
               />
               <span class="text-[10px] font-medium text-muted-foreground uppercase tracking-[0.7px]">
                 {{ t('chat.sessionSourcePrefix') }}{{ filterLabel }}
@@ -145,9 +147,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onBeforeUnmount } from 'vue'
+import { ref, computed, onBeforeUnmount, type Component } from 'vue'
 import { useLocalStorage } from '@vueuse/core'
-import { Search, Plus, Globe, ChevronDown, Check, LoaderCircle } from 'lucide-vue-next'
+import { Search, Plus, ChevronDown, Check, LoaderCircle, MessageSquare, HeartPulse, Clock, GitBranch } from 'lucide-vue-next'
 import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
@@ -223,6 +225,24 @@ const filterLabel = computed(() => {
   return opt?.label ?? t('chat.sessionTypeChat')
 })
 
+const filterIconComponent = computed<Component>(() => {
+  switch (filterType.value) {
+    case 'heartbeat': return HeartPulse
+    case 'schedule': return Clock
+    case 'subagent': return GitBranch
+    default: return MessageSquare
+  }
+})
+
+const filterIconClass = computed(() => {
+  switch (filterType.value) {
+    case 'heartbeat': return 'text-rose-400'
+    case 'schedule': return 'text-amber-400'
+    case 'subagent': return 'text-violet-400'
+    default: return 'text-muted-foreground'
+  }
+})
+
 const filteredSessions = computed(() => {
   let list = sessions.value
   list = list.filter(s => s.type === filterType.value)