[feat] Show conflicting status for installed packages with compatibility issues (#4579)

Co-authored-by: Claude <noreply@anthropic.com>

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

@@ -32,8 +32,9 @@ type StatusProps = {
   severity: MessageSeverity
 }
 
-const { statusType } = defineProps<{
+const { statusType, hasCompatibilityIssues } = defineProps<{
   statusType: Status
+  hasCompatibilityIssues?: boolean
 }>()
 
 const statusPropsMap: Record<Status, StatusProps> = {
@@ -71,10 +72,14 @@ const statusPropsMap: Record<Status, StatusProps> = {
   }
 }
 
-const statusLabel = computed(
+const statusLabel = computed(() =>
-  () => statusPropsMap[statusType]?.label || 'unknown'
+  hasCompatibilityIssues
+    ? 'conflicting'
+    : statusPropsMap[statusType]?.label || 'unknown'
 )
-const statusSeverity = computed(
+const statusSeverity = computed(() =>
-  () => statusPropsMap[statusType]?.severity || 'secondary'
+  hasCompatibilityIssues
+    ? 'error'
+    : statusPropsMap[statusType]?.severity || 'secondary'
 )
 </script>

src/components/dialog/content/manager/infoPanel/InfoPanel.vue

@@ -32,6 +32,7 @@
               :status-type="
                 nodePack.status as components['schemas']['NodeVersionStatus']
               "
+              :has-compatibility-issues="hasCompatibilityIssues"
             />
           </MetadataRow>
           <MetadataRow :label="t('manager.version')">
@@ -131,9 +132,9 @@ const conflictResult = computed((): ConflictDetectionResult | null => {
   return null
 })
 
-const hasCompatibilityIssues = computed(
+const hasCompatibilityIssues = computed(() => {
-  () => conflictResult.value?.has_conflict ?? false
+  return isInstalled.value && conflictResult.value?.has_conflict ? true : false
-)
+})
 
 const infoItems = computed<InfoItem[]>(() => [
   {

src/locales/en/main.json

@@ -190,7 +190,8 @@
       "flagged": "Flagged",
       "deleted": "Deleted",
       "banned": "Banned",
-      "unknown": "Unknown"
+      "unknown": "Unknown",
+      "conflicting": "Conflicting"
     },
     "sort": {
       "downloads": "Most Popular",