🧪 Theme Persistence Testing Guide

🎯 What Was Fixed

1. Explicit Console Logging ✨

Added console.log() statements (not just logger) to trace the complete flow:

// SimpleThemeStorageService
console.log(`🎯 [SimpleThemeStorage] setActiveThemeId() called!`);
console.log(`💾 [SimpleThemeStorage] saveTheme() called!`);
console.log(`✅ Space document updated successfully!`);

2. Add vs Override Mode ✨

New functionality to control theme saving:

// Save and override existing theme (default)
await themeStorage.saveTheme(theme, { mode: 'override', setAsActive: true });

// Add as new theme (create copy if ID exists)
await themeStorage.saveTheme(theme, { mode: 'add', setAsActive: true });

3. UI Buttons ✨

• 💾 Save & Apply (Override) - Replaces existing theme
• ➕ Save as New - Adds to array, generates new ID if needed
• ⚡ Set Active - Sets existing theme as active
• ❌ Cancel - Cancels editing

🧪 Test Steps

Test 1: Save Theme (Override Mode) ✅

1. Open Theme Designer: Navigate to /space/chrome-space-1/theme-designer

2. Click "💾 Save & Apply (Override)"

3. Expected Console Logs:

   💾 [SimpleThemeStorage] saveTheme() called!
      - Theme: my-theme
      - Theme ID: theme-xxx
      - Mode: override
      - Set as active: true
      - Space ID: 69067c087ebb621cd9ff8c3f
   
   ✅ Theme saved locally: theme-xxx
   🔄 Syncing theme to MongoDB themes collection...
   ✅ Theme synced to MongoDB: theme-xxx
   
   ⚡ Setting as active theme...
   🎯 [SimpleThemeStorage] setActiveThemeId() called!
      - Theme ID: theme-xxx
      - Space ID: 69067c087ebb621cd9ff8c3f
   
   🎯 Calling spaceApi.updateSpace()...
      - Update payload: { themeSystem: { activeThemeId: "theme-xxx", ... } }
   
   ✅ Space document updated successfully!
      - Theme system: { activeThemeId: "theme-xxx", ... }
   

4. Check MongoDB:

   • ✅ Theme in themes collection
   • ✅ Space document has themeSystem.activeThemeId

5. Refresh Page (F5):

   • ✅ Theme persists
   • ✅ Console shows: "✅ Loaded active theme from space document: theme-xxx"

Test 2: Save as New (Add Mode) ✨

1. Edit current theme colors

2. Click "➕ Save as New"

3. Expected Console Logs:

   💾 [SimpleThemeStorage] saveTheme() called!
      - Mode: add
      - Theme exists, creating new one with ID: theme-xxx-1763741332000
   
   ✅ ADD MODE: Creating new theme with ID: theme-xxx-1763741332000
   ✅ Theme saved locally: theme-xxx-1763741332000
   🔄 Syncing theme to MongoDB themes collection...
   ✅ Theme synced to MongoDB: theme-xxx-1763741332000
   
   ⚡ Setting as active theme...
   

4. Check MongoDB:

   • ✅ TWO themes in themes collection (old + new)
   • ✅ Space document has themeSystem.activeThemeId pointing to new theme

Test 3: Override Existing Theme ✅

1. Load existing theme

2. Edit colors

3. Click "💾 Save & Apply (Override)"

4. Expected Behavior:

   • ✅ Theme is updated (same ID)
   • ✅ MongoDB themes collection: theme updated (not duplicated)
   • ✅ Space document: themeSystem.activeThemeId unchanged

Test 4: Persistence After Refresh ✅

1. Save a theme

2. Refresh page (F5)

3. Expected Console Logs:

   🌌 [SimpleThemeStorage] Space changed to: 69067c087ebb621cd9ff8c3f - loading theme from space document
   ✅ Loaded active theme from space document: theme-xxx
   🎯 ThemeStateManager: Active theme loaded: my-theme
   

4. Expected Behavior:

   • ✅ Theme is applied automatically
   • ✅ NO "No active theme found in space document"

🔍 Debugging

Issue: No Logs Appearing

Check:

1. Open DevTools Console
2. Make sure "Verbose" or "Info" level is enabled
3. Look for logs starting with 🎯, 💾, ✅

Issue: Space Document Not Updating

Check Backend Logs:

# In backend-api terminal
# Look for:
[SpacesController] 📥 Update request received
[SpacesService] 🎨 Updating themeSystem: {...}
[SpacesService] ✅ Updated space.themeSystem to: {...}

Check Network Tab:

• Look for PUT /api/spaces/69067c087ebb621cd9ff8c3f
• Request body should include themeSystem
• Response should include themeSystem property

Issue: Theme Not in MongoDB

Check HTTP Sync Adapter:

// In console
console.log('[HTTP Sync] Initialized adapter for collection: themes');

// Should see:
[HTTP Sync] Auto-sync enabled for themes (interval: 3000ms)

📊 MongoDB Verification

Query Spaces Collection:

db.spaces.findOne({ _id: ObjectId("69067c087ebb621cd9ff8c3f") })

// Expected output:
{
  "_id": ObjectId("69067c087ebb621cd9ff8c3f"),
  "name": "Chrome Space 1",
  "themeSystem": {  // ✅ SHOULD BE HERE!
    "activeThemeId": "theme-testtheme1-1763734768627",
    "updatedAt": "2025-11-21T11:00:32.867Z"
  }
}

Query Themes Collection:

db.themes.find({ spaceId: "69067c087ebb621cd9ff8c3f" })

// Expected: Array of themes
[
  {
    "_id": "theme-xxx",
    "metadata": { "name": "my-theme" },
    "spaceId": "69067c087ebb621cd9ff8c3f",
    "_syncedAt": "2025-11-21T11:00:33.123Z"
  },
  // ... more themes
]

✅ Success Criteria

• [ ] Console logs show complete flow (saveTheme → setActiveThemeId → updateSpace)
• [ ] MongoDB themes collection has theme document
• [ ] MongoDB space document has themeSystem.activeThemeId
• [ ] Theme persists after refresh
• [ ] "Save as New" creates new theme (doesn't replace)
• [ ] "Save & Apply" overrides existing theme
• [ ] Backend logs show successful space update

🚨 If Still Not Working

1. Restart Backend API

# Terminal
nx serve backend-api

Why? MongoDB schema changed (added themeSystem)

2. Clear Browser Cache

# Chrome DevTools Console
localStorage.clear();
window.location.reload();

3. Check Backend API Logs

Look for errors in the backend terminal:

• ✅ [SpacesService] ✅ Updated space.themeSystem
• ❌ [SpacesService] ❌ Failed to save

4. Verify HTTP Sync Adapter

// In console
console.log('[HTTP Sync] Initialized adapter for collection: themes');

If NOT present, check app.config.ts:

provideHttpMongoDBSync({
  collections: [
    { name: 'themes', syncInterval: 3000, batchSize: 5 }
  ]
})

📝 Notes

• Themes are saved to both IndexedDB (local) and MongoDB (remote)
• Space document's themeSystem is the source of truth for active theme
• Flash persistence provides instant loading on refresh
• MongoDB sync happens in background (3-second interval for themes)

Status: 🧪 REQUIRES TESTING
Next: Save a theme and check the console logs!
Expected: Full trace from save → sync → space update → success ✨