diff --git a/frontend/src/components/DiffCard.tsx b/frontend/src/components/DiffCard.tsx
index f69a5efe..0f75ca0d 100644
--- a/frontend/src/components/DiffCard.tsx
+++ b/frontend/src/components/DiffCard.tsx
@@ -32,6 +32,7 @@ import { ReviewCommentRenderer } from '@/components/diff/ReviewCommentRenderer';
import {
useDiffViewMode,
useIgnoreWhitespaceDiff,
+ useWrapTextDiff,
} from '@/stores/useDiffViewStore';
import { useProject } from '@/contexts/ProjectContext';
@@ -84,6 +85,7 @@ export default function DiffCard({
const { comments, drafts, setDraft } = useReview();
const globalMode = useDiffViewMode();
const ignoreWhitespace = useIgnoreWhitespaceDiff();
+ const wrapText = useWrapTextDiff();
const { projectId } = useProject();
const oldName = diff.oldPath || undefined;
@@ -301,7 +303,7 @@ export default function DiffCard({
s.setMode);
const ignoreWhitespace = useIgnoreWhitespaceDiff();
const setIgnoreWhitespace = useDiffViewStore((s) => s.setIgnoreWhitespace);
+ const wrapText = useWrapTextDiff();
+ const setWrapText = useDiffViewStore((s) => s.setWrapText);
const whitespaceValue = ignoreWhitespace ? ['ignoreWhitespace'] : [];
+ const wrapTextValue = wrapText ? ['wrapText'] : [];
return (
@@ -92,6 +96,29 @@ export default function DiffViewSwitch({ className }: Props) {
+
+ setWrapText(values.includes('wrapText'))}
+ className="inline-flex gap-4"
+ aria-label={t('diff.wrapText', 'Wrap text')}
+ >
+
+
+
+
+
+
+
+ {t('diff.wrapText', 'Wrap text')}
+
+
+
);
diff --git a/frontend/src/stores/useDiffViewStore.ts b/frontend/src/stores/useDiffViewStore.ts
index ade630e6..f62c0cd9 100644
--- a/frontend/src/stores/useDiffViewStore.ts
+++ b/frontend/src/stores/useDiffViewStore.ts
@@ -8,6 +8,8 @@ type State = {
toggle: () => void;
ignoreWhitespace: boolean;
setIgnoreWhitespace: (value: boolean) => void;
+ wrapText: boolean;
+ setWrapText: (value: boolean) => void;
};
export const useDiffViewStore = create((set) => ({
@@ -17,8 +19,11 @@ export const useDiffViewStore = create((set) => ({
set((s) => ({ mode: s.mode === 'unified' ? 'split' : 'unified' })),
ignoreWhitespace: true,
setIgnoreWhitespace: (value) => set({ ignoreWhitespace: value }),
+ wrapText: false,
+ setWrapText: (value) => set({ wrapText: value }),
}));
export const useDiffViewMode = () => useDiffViewStore((s) => s.mode);
export const useIgnoreWhitespaceDiff = () =>
useDiffViewStore((s) => s.ignoreWhitespace);
+export const useWrapTextDiff = () => useDiffViewStore((s) => s.wrapText);