Frontend State & Sync — SettingsStore and WorkflowUI

The frontend maintains a live, user-scoped model synced with Firestore to power the workflow editor.

Components

  • SettingsStore: data access, auth listening, collection/document listeners, diff and save
  • WorkflowUI: binds form controls, extracts form data, drives change detection, and saves

Real-time listeners

  • Collection: users/{uid}/workflows (list)
  • Document: users/{uid} (profile/credits)
  • Unsubscribers are tracked and cleaned up on logout

Unified change detection

  1. WorkflowUI.extractFormData() gathers only in-scope fields
  2. SettingsStore.detectChanges() computes dot-path diffs
  3. SettingsStore.updateCurrentWorkflow() writes only changed paths via updateDoc

Avoid sending nested objects wholesale. Use dot-paths to prevent overwriting siblings.

Subreddit/flair ergonomics

  • Subreddit cards mirror subreddits.{name}.selected
  • Modals handle flair selected and analysis
  • AI panel reflects current selections for quick validation

Auth flow

  • Auth listener loads user doc and workflows on sign-in
  • Default workflow is created if none exist (workflow-1)