Issue with "Set as default caption for this image"

**AI Analysis** (by Claude)

# Analysis: Issue #60 - "Set as default caption for this image" Bug

## 1. Root Cause Analysis

The issue appears to be a state management problem where:

- The "Set as default caption" action triggers successfully (showing "Saved as default")

- However, the UI immediately reverts to the initial state

- This suggests either:

- The state update isn't persisting properly

- There's a race condition between save and UI refresh

- The default value isn't being properly stored/retrieved

- A re-render is overwriting the saved state with initial values

## 2. Affected Files

Based on the New Salon app structure, these files are likely involved:

```

components/

├── editor/

│ ├── blocks/

│ │ ├── ImageBlock/

│ │ │ ├── ImageBlock.tsx

│ │ │ ├── ImageBlockSettings.tsx

│ │ │ └── ImageBlockToolbar.tsx

│ └── sidebar/

│ └── BlockSettings.tsx

stores/

├── editor-store.ts

├── blocks-store.ts

└── settings-store.ts

lib/

├── supabase/

│ └── blocks.ts

types/

└── editor.ts

```

## 3. Resolution Approach

### Step 1: Investigate State Management

- Check the Zustand store handling for image block default captions

- Verify the `setDefaultCaption` action in the blocks store

- Ensure the state update is properly persisted

### Step 2: Review Database Persistence

- Examine the Supabase query for saving default captions

- Check if the database write is completing before UI updates

- Verify the table schema supports default caption storage

### Step 3: Fix State Synchronization

```typescript

// In blocks-store.ts

const useBlocksStore = create<BlocksStore>((set, get) => ({

setDefaultCaption: async (blockId: string, caption: string) => {

// Update local state immediately

set((state) => ({

blocks: state.blocks.map(block =>

block.id === blockId

? { ...block, defaultCaption: caption }

: block

)

}));

// Persist to database

try {

await saveDefaultCaption(blockId, caption);

// Show success feedback

set((state) => ({

...state,

feedback: { type: 'success', message: 'Saved as default' }

}));

} catch (error) {

// Revert on failure

set((state) => ({

blocks: state.blocks.map(block =>

block.id === blockId

? { ...block, defaultCaption: '' }

: block

)

}));

}

}

}));

```

### Step 4: Fix Component Re-rendering

- Ensure ImageBlockSettings component doesn't reset state on re-render

- Use proper React keys and memo optimization

- Check for useEffect dependencies causing unnecessary updates

### Step 5: Add Proper Loading States

```typescript

// In ImageBlockSettings.tsx

const [isSettingDefault, setIsSettingDefault] = useState(false);

const handleSetDefault = async () => {

setIsSettingDefault(true);

try {

await setDefaultCaption(block.id, caption);

// State should persist here

} finally {

setIsSettingDefault(false);

}

};

```

## 4. Complexity Estimate

**Medium Complexity**

**Reasoning:**

- Involves multiple layers (UI state, Zustand store, Supabase persistence)

- Requires debugging state management flow

- May need database schema verification

- Not a simple UI fix, but not architecturally complex

- Estimated 4-6 hours of development time

## 5. Dependencies

### Prerequisites:

- Verify current Supabase schema for image blocks table

- Confirm if default captions are stored per-image or per-block instance

- Check existing error handling and logging mechanisms

### Potential Blockers:

- Database migration may be needed if schema doesn't support default captions

- Need to understand the current image block data structure

- May require coordination with TanStack Query cache invalidation

- Could be affected by the TipTap editor integration if captions are managed there

### Testing Requirements:

- Test with different image types and sizes

- Verify persistence across page refreshes

- Test concurrent user scenarios

- Ensure proper cleanup when blocks are deleted

The fix should focus on ensuring proper state persistence and preventing the immediate fallback to initial settings after the save operation completes.