[Manager] Add tab for outdated node packs (has update available) (#3255)

Co-authored-by: github-actions <github-actions@github.com>

src/components/dialog/content/manager/ManagerDialogContent.vue

@@ -107,6 +107,7 @@ import RegistrySearchBar from '@/components/dialog/content/manager/registrySearc
 import GridSkeleton from '@/components/dialog/content/manager/skeleton/GridSkeleton.vue'
 import { useResponsiveCollapse } from '@/composables/element/useResponsiveCollapse'
 import { useInstalledPacks } from '@/composables/nodePack/useInstalledPacks'
+import { usePackUpdateStatus } from '@/composables/nodePack/usePackUpdateStatus'
 import { useWorkflowPacks } from '@/composables/nodePack/useWorkflowPacks'
 import { useRegistrySearch } from '@/composables/useRegistrySearch'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
@@ -118,7 +119,8 @@ enum ManagerTab {
   All = 'all',
   Installed = 'installed',
   Workflow = 'workflow',
-  Missing = 'missing'
+  Missing = 'missing',
+  UpdateAvailable = 'updateAvailable'
 }
 
 const { t } = useI18n()
@@ -150,6 +152,11 @@ const tabs = ref<TabItem[]>([
     id: ManagerTab.Missing,
     label: t('g.missing'),
     icon: 'pi-exclamation-circle'
+  },
+  {
+    id: ManagerTab.UpdateAvailable,
+    label: t('g.updateAvailable'),
+    icon: 'pi-sync'
   }
 ])
 const selectedTab = ref<TabItem>(tabs.value[0])
@@ -191,6 +198,9 @@ const {
 const filterMissingPacks = (packs: components['schemas']['Node'][]) =>
   packs.filter((pack) => !comfyManagerStore.isPackInstalled(pack.id))
 
+const isUpdateAvailableTab = computed(
+  () => selectedTab.value?.id === ManagerTab.UpdateAvailable
+)
 const isInstalledTab = computed(
   () => selectedTab.value?.id === ManagerTab.Installed
 )
@@ -202,6 +212,25 @@ const isWorkflowTab = computed(
 )
 const isAllTab = computed(() => selectedTab.value?.id === ManagerTab.All)
 
+const isOutdatedPack = (pack: components['schemas']['Node']) => {
+  const { isUpdateAvailable } = usePackUpdateStatus(pack)
+  return isUpdateAvailable.value === true
+}
+const filterOutdatedPacks = (packs: components['schemas']['Node'][]) =>
+  packs.filter(isOutdatedPack)
+
+watch([isUpdateAvailableTab, installedPacks], () => {
+  if (!isUpdateAvailableTab.value) return
+
+  if (!isEmptySearch.value) {
+    displayPacks.value = filterOutdatedPacks(installedPacks.value)
+  } else if (!installedPacks.value.length) {
+    startFetchInstalled()
+  } else {
+    displayPacks.value = filterOutdatedPacks(installedPacks.value)
+  }
+})
+
 watch([isInstalledTab, installedPacks], () => {
   if (!isInstalledTab.value) return
 
@@ -248,6 +277,9 @@ const onResultsChange = () => {
         filterWorkflowPack(searchResults.value)
       )
       break
+    case ManagerTab.UpdateAvailable:
+      displayPacks.value = filterOutdatedPacks(searchResults.value)
+      break
     default:
       displayPacks.value = searchResults.value
   }