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);