State Management

Zustand stores powering the entire client-side state machine.

State Management

CommitT uses Zustand for all client-side state management. There are 10 specialized stores, each owning a specific domain of the application state.

---

Store Inventory

useTaskDraftStore

The largest store (800+ lines). Manages the entire commitment creation/editing wizard state — title, conditions, time windows, penalties, waivers, blocklists, and per-slot attachments.

useCalendarStore

Calendar grid state including selected date, view mode (day/week/month), event layout calculations, and drag-drop position tracking.

usePresetStore

Holds all hydrated presets (location, blocklist, rule) fetched from the Convex backend. Populated once at wizard layout mount via usePresetHydration().

useCommitStore

Tracks the active commitment list on the Dashboard. Manages selection state, menu visibility, and deletion modal flow.

useVerificationStore

Real-time verification session state. Holds current GPS coordinates, geofence status, camera capture state, and CAPTCHA progress.

useHealStore

Controls the HealOverlay — the recovery UI that appears during database reconstruction. Tracks progress percentage and status message.

usePresetEditStore

State for the preset editing screens (location, blocklist, rule). Separate from the main PresetStore to allow independent editing without affecting the wizard.

useAppStore

Minimal global app state. Tracks whether the app is in the foreground or background, used by the HydrationSync engine to trigger syncs on app resume.

useTaskStore

Read-only cache of tasks fetched from the local SQLite database. Populated by the useTasks hook on the Dashboard screen.

useChaosStore

Development-only store for the Chaos Engineering FAB. Allows injecting failures, simulating network drops, and corrupting the database for resilience testing.

---

TaskDraftStore Deep Dive

The useTaskDraftStore is the state machine behind the entire commitment wizard. It manages the full TaskDraft type — a frontend representation of a commitment being created or edited:

export type TaskDraft = {
  id: string;
  assigner_id: string | null;
  assignee_id: string | null;
  title: string;
  description?: string;
  visibility: "private" | "public" | "partner_only";

  recurrence: {
    type: "once" | "daily" | "weekly";
    interval: number;
    days_of_week?: number[];
    time_windows: TimeWindow[];
    ends?: { type: "after"; count: number } | { type: "never" };
  };

  conditions: Condition[];      // Location, blocklist, partner, etc.
  config: TaskConfig;            // Verification style, alarms, grace period
  penalty?: PenaltyConfig;       // Money, photo, app block
  penalty_waiver?: WaiverConfig; // CAPTCHAs, paragraph, redo
  cameraTarget: CameraTarget;    // Map camera position
};

Slot-Level Condition Management

The most complex part of the store is the per-slot condition system. Each time window can have its own independent location, blocklist, and rule:

// Attach a location preset to time slot at index 0
setSlotLocation(0, {
  latitude: 12.9692,
  longitude: 79.1559,
  radius: 50,
  address: "Fitty Gym VIT",
  isInverse: false,
  id: "preset_abc123"
});

// Attach a blocklist preset to time slot at index 1
setSlotBlocklist(1, {
  apps: ["com.instagram.android", "com.twitter.android"],
  websites: ["youtube.com"],
  id: "preset_xyz789"
});

// Attach a verification rule to time slot at index 0
setSlotRule(0, {
  id: "preset_rule_001",
  name: "Strict Session",
  config: { verification_style: "stay_throughout", intensity: "strict" }
});

Intelligent Recurrence Logic

The setRecurrence action contains business logic that automatically adjusts the recurrence type and instance count based on the user’s day selection:

setRecurrence: (updates) => set((state) => {
  const newRecurrence = { ...state.draft.recurrence, ...updates };

  // If days are selected, switch to "weekly" mode
  if (newRecurrence.days_of_week?.length > 0) {
    newRecurrence.type = "weekly";

    // If not set to "Repeat Forever", calculate instance count
    if (newRecurrence.ends?.type !== "never") {
      const totalCount = newRecurrence.days_of_week.length
                       * (newRecurrence.time_windows?.length || 0);
      newRecurrence.ends = { type: "after", count: Math.max(1, totalCount) };
    }
  }
  // If no days selected, revert to "once"
  else {
    newRecurrence.type = "once";
    delete newRecurrence.ends;
    delete newRecurrence.days_of_week;
  }

  return { draft: { ...state.draft, recurrence: newRecurrence } };
});

Logger Middleware

Every state mutation is logged with a pretty-printed JSON dump of the full draft. This provides complete visibility during development:

const logger = (config) => (set, get, api) =>
  config(
    (...args) => {
      set(...args);
      const d = get().draft;
      console.log(`[Zustand] ${args[2] ?? "anonymous"}`);
      console.log(JSON.stringify(d, null, 2));
    },
    get,
    api
  );

export const useTaskDraftStore = create<TaskDraftStore>()(
  logger((set) => ({ ... }))
);