[fix] Fix conflict red dot not syncing

between components

  Resolve reactivity issue by sharing
  useStorage refs across all
  composable instances to ensure UI
  consistency.

src/components/sidebar/SidebarHelpCenterIcon.vue

@@ -74,17 +74,16 @@ import SidebarIcon from './SidebarIcon.vue'
 const settingStore = useSettingStore()
 const releaseStore = useReleaseStore()
 const conflictDetection = useConflictDetection()
-const conflictAcknowledgment = useConflictAcknowledgment()
 const { showNodeConflictDialog } = useDialogService()
 const isHelpCenterVisible = ref(false)
 
-// Use conflict acknowledgment state from composable
+// Use conflict acknowledgment state from composable - call only once
 const { shouldShowRedDot: shouldShowConflictRedDot, markConflictsAsSeen } =
-  conflictAcknowledgment
+  useConflictAcknowledgment()
+
 // Use either release red dot or conflict red dot
 const shouldShowRedDot = computed(() => {
-  const releaseRedDot = releaseStore.shouldShowRedDot
-  return releaseRedDot || shouldShowConflictRedDot.value
+  return shouldShowConflictRedDot.value || releaseStore.shouldShowRedDot
 })
 
 const sidebarLocation = computed(() =>

src/composables/useConflictAcknowledgment.ts

@@ -21,6 +21,17 @@ interface ConflictAcknowledgmentState {
   warning_banner_dismissed: boolean
 }
 
+// Shared state - initialized once and reused across all composable calls
+const modalDismissed = useStorage(STORAGE_KEYS.CONFLICT_MODAL_DISMISSED, false)
+const redDotDismissed = useStorage(
+  STORAGE_KEYS.CONFLICT_RED_DOT_DISMISSED,
+  false
+)
+const warningBannerDismissed = useStorage(
+  STORAGE_KEYS.CONFLICT_WARNING_BANNER_DISMISSED,
+  false
+)
+
 /**
  * Composable for managing conflict acknowledgment state in localStorage
  *
@@ -33,20 +44,6 @@ interface ConflictAcknowledgmentState {
 export function useConflictAcknowledgment() {
   const conflictDetectionStore = useConflictDetectionStore()
 
-  // Reactive state using VueUse's useStorage for automatic persistence
-  const modalDismissed = useStorage(
-    STORAGE_KEYS.CONFLICT_MODAL_DISMISSED,
-    false
-  )
-  const redDotDismissed = useStorage(
-    STORAGE_KEYS.CONFLICT_RED_DOT_DISMISSED,
-    false
-  )
-  const warningBannerDismissed = useStorage(
-    STORAGE_KEYS.CONFLICT_WARNING_BANNER_DISMISSED,
-    false
-  )
-
   // Create computed state object for backward compatibility
   const state = computed<ConflictAcknowledgmentState>(() => ({
     modal_dismissed: modalDismissed.value,
@@ -82,7 +79,8 @@ export function useConflictAcknowledgment() {
   const shouldShowConflictModal = computed(() => !modalDismissed.value)
   const shouldShowRedDot = computed(() => {
     if (!hasConflicts.value) return false
-    return !redDotDismissed.value
+    if (redDotDismissed.value) return false
+    return true
   })
   const shouldShowManagerBanner = computed(() => {
     return hasConflicts.value && !warningBannerDismissed.value

src/composables/useConflictDetection.ts

@@ -454,9 +454,6 @@ export function useConflictDetection() {
     importFailInfo: Record<string, { msg: string; name: string; path: string }>
   ): ConflictDetectionResult[] {
     const results: ConflictDetectionResult[] = []
-
-    console.log('@@@', importFailInfo)
-
     if (!importFailInfo || typeof importFailInfo !== 'object') {
       return results
     }