vibe-kanban

Files

Stephan Fitzpatrick f651c64f7d Perfect! I've successfully added a text wrap toggle to the frontend diff viewer. Here's a summary of the changes: (#1219 )

## Changes Made

### 1. **State Management** (`frontend/src/stores/useDiffViewStore.ts:11-13,22-23,29`)
   - Added `wrapText` boolean state (defaults to `false`)
   - Added `setWrapText` action to update the state
   - Exported `useWrapTextDiff` hook for components to access the state

### 2. **UI Toggle Component** (`frontend/src/components/diff-view-switch.tsx:1,8,28-29,32,100-121`)
   - Imported `WrapText` icon from `lucide-react`
   - Added a new toggle group for the text wrap feature
   - The toggle appears alongside the existing view mode and whitespace toggles
   - Uses the same UI pattern as the "Ignore Whitespace" toggle
   - Includes tooltip with internationalization support

### 3. **Diff Viewer Integration** (`frontend/src/components/DiffCard.tsx:31,84,300`)
   - Imported and used the `useWrapTextDiff` hook
   - Connected the `wrapText` state to the `DiffView` component's `diffViewWrap` prop
   - The `DiffView` component now responds to the toggle state

## How It Works

- The toggle button appears in the diff view controls with a `WrapText` icon
- Clicking the toggle switches between wrapped and unwrapped text in the diff viewer
- The state is managed globally via Zustand, so all diff viewers share the same wrap preference
- The default is set to `false` (no wrapping), preserving the original behavior
- The feature follows the existing architectural patterns for the ignore whitespace and view mode toggles

The implementation is complete and ready to use!

2025-11-24 14:10:22 +00:00