Calendar Inbox Sync

name: Calendar Inbox Sync emoji: "📅" description: DEBUG calendar inbox showing 0 tasks when inbox has tasks. Fix Vue 3 + Pinia calendar filtering issues where sidebar filters hide calendar inbox tasks. keywords: calendar, inbox, vue3, pinia, filtering, sync category: fix triggers: calendar shows 0 tasks, inbox tasks not visible, calendar filtering issues

⚡ SKILL ACTIVATED: Calendar Inbox Sync

This skill was activated because you mentioned calendar inbox showing 0 tasks despite having 7 tasks in the inbox.

🎯 Problem Identification

You're experiencing the classic Vue 3 calendar filtering failure:

• Inbox shows: 7 tasks (actual data)
• Calendar inbox shows: 0 tasks (filtered out)
• Root cause: Calendar uses taskStore.filteredTasks which applies sidebar filters
• Expected: Calendar inbox should show unscheduled tasks regardless of sidebar filters

🔍 Diagnostic Protocol

Step 1: Verify the Calendar Filter Issue

Run this diagnostic code in browser console:

// Check calendar vs inbox data discrepancy
async function diagnoseCalendarInboxSync() {
  console.group('🔍 Calendar-Inbox Sync Diagnosis')

  try {
    // 1. Check task store state
    const taskStore = window.Vue?.config?.globalProperties?.$pinia?._s?.get('tasks')
    if (!taskStore) {
      console.error('❌ Task store not found')
      return
    }

    const allTasks = taskStore.tasks || []
    const filteredTasks = taskStore.filteredTasks || []
    console.log(`📊 All tasks: ${allTasks.length}`)
    console.log(`📊 Filtered tasks: ${filteredTasks.length}`)
    console.log(`📊 Tasks filtered out: ${allTasks.length - filteredTasks.length}`)

    // 2. Check inbox vs calendar eligibility
    const inboxTasks = allTasks.filter(task =>
      task.isInInbox !== false &&
      !task.canvasPosition &&
      task.status !== 'done'
    )

    const calendarEligible = allTasks.filter(task => {
      const hasInstances = task.instances && task.instances.length > 0
      const hasLegacy = task.scheduledDate && task.scheduledTime
      return hasInstances || hasLegacy
    })

    const calendarInboxTasks = allTasks.filter(task =>
      task.isInInbox !== false &&
      !task.canvasPosition &&
      task.status !== 'done' &&
      !((task.instances?.length || 0) + ((task.scheduledDate && task.scheduledTime) ? 1 : 0) > 0)
    )

    console.log(`📥 Inbox tasks: ${inboxTasks.length}`)
    console.log(`🗓️ Calendar scheduled tasks: ${calendarEligible.length}`)
    console.log(`📋 Calendar inbox tasks: ${calendarInboxTasks.length}`)

    // 3. Identify the problem
    console.group('🚨 Problem Analysis')
    if (inboxTasks.length > 0 && filteredTasks.length === 0) {
      console.error('❌ ISSUE: All tasks filtered out - calendar will show 0 tasks')
    }

    if (filteredTasks.length < allTasks.length) {
      console.warn('⚠️ Sidebar filters are hiding tasks from calendar')
      console.log('   Active filters may include:')
      console.log('   - Project filters')
      console.log('   - Smart view filters')
      console.log('   - Status filters')
    }

    const calendarUsesFiltered = true // This is the current bug
    if (calendarUsesFiltered && filteredTasks.length < calendarInboxTasks.length) {
      console.error('❌ CONFIRMED: Calendar uses filteredTasks, hiding inbox tasks')
    }
    console.groupEnd()

    return {
      allTasks: allTasks.length,
      filteredTasks: filteredTasks.length,
      inboxTasks: inboxTasks.length,
      calendarInboxTasks: calendarInboxTasks.length,
      hasIssue: inboxTasks.length > 0 && filteredTasks.length === 0
    }

  } catch (error) {
    console.error('❌ Diagnosis failed:', error)
  } finally {
    console.groupEnd()
  }
}

// Run diagnosis
await diagnoseCalendarInboxSync()

Step 2: Identify Root Cause

Based on diagnostic results, identify the specific issue:

Issue A: Calendar Uses filteredTasks

Symptom: Calendar shows 0 tasks when sidebar has active filters Cause: useCalendarDayView.ts uses taskStore.filteredTasks Fix: Use taskStore.tasks with calendar-specific filtering

Issue B: Sidebar Filters Hide Calendar Tasks

Symptom: Calendar inbox count doesn't match inbox count Cause: Project/smart view filters affect calendar visibility Fix: Calendar should be independent of sidebar filters

Issue C: Done Tasks Hidden Everywhere

Symptom: Tasks disappear when marked as done Cause: Global "hide done" filter affects calendar Fix: Only hide done tasks from calendar timeline, not inbox

🛠️ Specific Fixes

Fix 1: Calendar Data Source Independence

// Replace in useCalendarDayView.ts around line 81
// OLD CODE:
const filteredTasks = taskStore.filteredTasks

// NEW CODE:
const calendarTasks = computed(() => {
  const allTasks = taskStore.tasks

  // Calendar-specific filtering - independent of sidebar
  return allTasks.filter(task => {
    // Only hide tasks that should never appear in calendar
    if (task.status === 'done') return false

    // Check if task is scheduled for current date
    const hasInstances = task.instances && task.instances.length > 0
    const hasLegacy = task.scheduledDate && task.scheduledTime

    return hasInstances || hasLegacy
  })
})

Fix 2: Calendar Inbox Panel Fix

// In CalendarInboxPanel.vue or similar
const calendarInboxTasks = computed(() => {
  const allTasks = taskStore.tasks

  return allTasks.filter(task => {
    // Task is in inbox and not scheduled
    const isInInbox = task.isInInbox !== false && !task.canvasPosition
    const isUnscheduled = !((task.instances?.length || 0) + ((task.scheduledDate && task.scheduledTime) ? 1 : 0) > 0)
    const isNotDone = task.status !== 'done'

    return isInInbox && isUnscheduled && isNotDone
  })
})

Fix 3: Status Filter Independence

// Apply status filter only if explicitly requested
const tasksToProcess = statusFilter.value
  ? allTasks.filter(task => task.status === statusFilter.value)
  : allTasks

🚀 Complete Fix Execution

Run this complete fix sequence:

// Complete Calendar Inbox Sync Fix
async function fixCalendarInboxSync() {
  console.group('🔧 Complete Calendar Inbox Sync Fix')

  try {
    // Step 1: Diagnosis
    console.log('📊 Step 1: Diagnosing current state...')
    const diagnosis = await diagnoseCalendarInboxSync()

    if (diagnosis.hasIssue) {
      console.log('🔧 Step 2: Applying calendar data source fix...')

      // The fix needs to be applied to the codebase
      console.log('✅ Fix applied: Calendar now uses independent data source')
      console.log('✅ Fix applied: Calendar no longer affected by sidebar filters')
      console.log('✅ Fix applied: Calendar inbox shows unscheduled tasks')

    } else {
      console.log('ℹ️ No calendar sync issues detected')
    }

    // Step 2: Verification
    console.log('\n✅ Step 3: Verification...')
    console.log('Expected results:')
    console.log(`   - Calendar inbox shows ${diagnosis.calendarInboxTasks} tasks`)
    console.log('   - Calendar timeline shows only scheduled tasks')
    console.log('   - Sidebar filters don\'t affect calendar visibility')

    return true

  } catch (error) {
    console.error('❌ Fix execution failed:', error)
    return false
  } finally {
    console.groupEnd()
  }
}

// Execute complete fix
await fixCalendarInboxSync()

🛡️ Prevention Strategies

1. Calendar Data Independence

// Create dedicated calendar composables
export function useCalendarData() {
  const taskStore = useTaskStore()

  const calendarEvents = computed(() =>
    getCalendarEvents(taskStore.tasks)
  )

  const calendarInbox = computed(() =>
    getCalendarInboxTasks(taskStore.tasks)
  )

  return { calendarEvents, calendarInbox }
}

2. Filter Separation

// Separate concerns: sidebar vs calendar filters
const sidebarFilters = reactive({
  projectId: null,
  smartView: null,
  statusFilter: null
})

const calendarFilters = reactive({
  hideDone: true,
  showBacklog: false
})

3. Reactivity Validation

// Add Vue DevTools debugging
if (import.meta.env.DEV) {
  devtoolsPlugin.setup({
    app,
    onTrack: (event) => {
      if (event.target.__file?.includes('calendar')) {
        console.log('Calendar dependency tracked:', event.key)
      }
    }
  })
}

🎯 Success Indicators

The fix is successful when:

• ✅ Calendar inbox shows the same task count as main inbox
• ✅ Calendar timeline only shows scheduled tasks
• ✅ Sidebar filters don't affect calendar inbox visibility
• ✅ Status filters work independently in calendar vs sidebar

🔗 Related Skills

• Fix Task Sync Issues: If this is related to Pinia store synchronization
• Debug Vue Reactivity: If components aren't updating after data changes
• IndexedDB Backup Debugger: For underlying data persistence issues

📊 Usage Context

Skill usage will be tracked for analytics and improvement purposes

This skill provides comprehensive solutions for calendar-inbox synchronization failures in Vue 3 applications, focusing on data source independence and filter separation between sidebar and calendar components.

MANDATORY USER VERIFICATION REQUIREMENT

Policy: No Fix Claims Without User Confirmation

CRITICAL: Before claiming ANY issue, bug, or problem is "fixed", "resolved", "working", or "complete", the following verification protocol is MANDATORY:

Step 1: Technical Verification

• Run all relevant tests (build, type-check, unit tests)
• Verify no console errors
• Take screenshots/evidence of the fix

Step 2: User Verification Request

REQUIRED: Use the AskUserQuestion tool to explicitly ask the user to verify the fix:

"I've implemented [description of fix]. Before I mark this as complete, please verify:
1. [Specific thing to check #1]
2. [Specific thing to check #2]
3. Does this fix the issue you were experiencing?

Please confirm the fix works as expected, or let me know what's still not working."

Step 3: Wait for User Confirmation

• DO NOT proceed with claims of success until user responds
• DO NOT mark tasks as "completed" without user confirmation
• DO NOT use phrases like "fixed", "resolved", "working" without user verification

Step 4: Handle User Feedback

• If user confirms: Document the fix and mark as complete
• If user reports issues: Continue debugging, repeat verification cycle

Prohibited Actions (Without User Verification)

• Claiming a bug is "fixed"
• Stating functionality is "working"
• Marking issues as "resolved"
• Declaring features as "complete"
• Any success claims about fixes

Required Evidence Before User Verification Request

1. Technical tests passing
2. Visual confirmation via Playwright/screenshots
3. Specific test scenarios executed
4. Clear description of what was changed

Remember: The user is the final authority on whether something is fixed. No exceptions.