Skip to content

feat(desktop): add toggle to hide unchanged regions in diff viewer #845

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Kitenite merged 3 commits into from
Jan 20, 2026
Merged

feat(desktop): add toggle to hide unchanged regions in diff viewer #845

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7f98688
feat(desktop): add toggle to hide unchanged regions in diff viewer
Kitenite Jan 20, 2026
84498bf
fix(desktop): improve file viewer toggle group active state visibility
Kitenite Jan 20, 2026
a02f52b
Fix lint
Kitenite Jan 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion .../components/WorkspaceView/ContentView/ChangesContent/components/DiffViewer/DiffViewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export interface DiffViewerContextMenuProps {
interface DiffViewerProps {
contents: FileContents;
viewMode: DiffViewMode;
hideUnchangedRegions?: boolean;
filePath: string;
editable?: boolean;
onSave?: (content: string) => void;
Expand All @@ -59,6 +60,7 @@ interface DiffViewerProps {
export function DiffViewer({
contents,
viewMode,
hideUnchangedRegions = false,
filePath,
editable = false,
onSave,
Expand Down Expand Up @@ -187,7 +189,7 @@ export function DiffViewer({

const diffEditor = (
<DiffEditor
key={`${filePath}-${viewMode}`}
key={`${filePath}-${viewMode}-${hideUnchangedRegions}`}
height="100%"
original={contents.original}
modified={contents.modified}
Expand All @@ -209,6 +211,9 @@ export function DiffViewer({
renderOverviewRuler: true,
diffWordWrap: "on",
contextmenu: !contextMenuProps, // Disable Monaco's context menu if we have custom props
hideUnchangedRegions: {
enabled: hideUnchangedRegions,
},
}}
/>
);
Expand Down
11 changes: 9 additions & 2 deletions ...omponents/WorkspaceView/ContentView/TabsContent/TabView/FileViewerPane/FileViewerPane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,12 @@ export function FileViewerPane({
}: FileViewerPaneProps) {
// Use granular selector to only get this pane's fileViewer data
const fileViewer = useTabsStore((s) => s.panes[paneId]?.fileViewer);
const { viewMode: diffViewMode, setViewMode: setDiffViewMode } =
useChangesStore();
const {
viewMode: diffViewMode,
setViewMode: setDiffViewMode,
hideUnchangedRegions,
toggleHideUnchangedRegions,
} = useChangesStore();

const editorRef = useRef<Monaco.editor.IStandaloneCodeEditor | null>(null);
const [isDirty, setIsDirty] = useState(false);
Expand Down Expand Up @@ -277,8 +281,10 @@ export function FileViewerPane({
hasDiff={hasDiff}
splitOrientation={handlers.splitOrientation}
diffViewMode={diffViewMode}
hideUnchangedRegions={hideUnchangedRegions}
onViewModeChange={handleViewModeChange}
onDiffViewModeChange={setDiffViewMode}
onToggleHideUnchangedRegions={toggleHideUnchangedRegions}
onSplitPane={handlers.onSplitPane}
onPin={handlePin}
onClosePane={handlers.onClosePane}
Expand All @@ -300,6 +306,7 @@ export function FileViewerPane({
initialLine={initialLine}
initialColumn={initialColumn}
diffViewMode={diffViewMode}
hideUnchangedRegions={hideUnchangedRegions}
onSaveRaw={handleSaveRaw}
onSaveDiff={isDiffEditable ? handleSaveDiff : undefined}
onEditorChange={handleEditorChange}
Expand Down
3 changes: 3 additions & 0 deletions ...iew/TabsContent/TabView/FileViewerPane/components/FileViewerContent/FileViewerContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ interface FileViewerContentProps {
initialLine?: number;
initialColumn?: number;
diffViewMode: DiffViewMode;
hideUnchangedRegions: boolean;
onSaveRaw: () => Promise<void>;
onSaveDiff?: (content: string) => Promise<void>;
onEditorChange: (value: string | undefined) => void;
Expand Down Expand Up @@ -83,6 +84,7 @@ export function FileViewerContent({
initialLine,
initialColumn,
diffViewMode,
hideUnchangedRegions,
onSaveRaw,
onSaveDiff,
onEditorChange,
Expand Down Expand Up @@ -190,6 +192,7 @@ export function FileViewerContent({
language: diffData.language,
}}
viewMode={diffViewMode}
hideUnchangedRegions={hideUnchangedRegions}
filePath={filePath}
editable={isDiffEditable}
onSave={isDiffEditable ? onSaveDiff : undefined}
Expand Down
92 changes: 64 additions & 28 deletions ...iew/TabsContent/TabView/FileViewerPane/components/FileViewerToolbar/FileViewerToolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { ToggleGroup, ToggleGroupItem } from "@superset/ui/toggle-group";
import { Tooltip, TooltipContent, TooltipTrigger } from "@superset/ui/tooltip";
import { cn } from "@superset/ui/utils";
import {
TbFold,
TbLayoutSidebarRightFilled,
TbListDetails,
TbPinFilled,
Expand All @@ -21,8 +22,10 @@ interface FileViewerToolbarProps {
hasDiff: boolean;
splitOrientation: SplitOrientation;
diffViewMode: DiffViewMode;
hideUnchangedRegions: boolean;
onViewModeChange: (value: string) => void;
onDiffViewModeChange: (mode: DiffViewMode) => void;
onToggleHideUnchangedRegions: () => void;
onSplitPane: (e: React.MouseEvent) => void;
/** Pin this pane (convert from preview to permanent) */
onPin: () => void;
Expand All @@ -38,8 +41,10 @@ export function FileViewerToolbar({
hasDiff,
splitOrientation,
diffViewMode,
hideUnchangedRegions,
onViewModeChange,
onDiffViewModeChange,
onToggleHideUnchangedRegions,
onSplitPane,
onPin,
onClosePane,
Expand Down Expand Up @@ -75,50 +80,81 @@ export function FileViewerToolbar({
value={viewMode}
onValueChange={onViewModeChange}
size="sm"
className="h-5"
className="h-5 bg-muted/50 rounded-md"
>
{isMarkdown && (
<ToggleGroupItem
value="rendered"
className="h-5 px-1.5 text-[10px]"
className="h-5 px-1.5 text-[10px] text-muted-foreground data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-sm"
>
Rendered
</ToggleGroupItem>
)}
<ToggleGroupItem value="raw" className="h-5 px-1.5 text-[10px]">
<ToggleGroupItem
value="raw"
className="h-5 px-1.5 text-[10px] text-muted-foreground data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-sm"
>
Raw
</ToggleGroupItem>
{hasDiff && (
<ToggleGroupItem value="diff" className="h-5 px-1.5 text-[10px]">
<ToggleGroupItem
value="diff"
className="h-5 px-1.5 text-[10px] text-muted-foreground data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-sm"
>
Diff
</ToggleGroupItem>
)}
</ToggleGroup>
{viewMode === "diff" && (
<Tooltip>
<TooltipTrigger asChild>
<button
type="button"
onClick={() =>
onDiffViewModeChange(
diffViewMode === "side-by-side" ? "inline" : "side-by-side",
)
}
className="rounded p-0.5 text-muted-foreground/60 transition-colors hover:text-muted-foreground"
>
{diffViewMode === "side-by-side" ? (
<TbLayoutSidebarRightFilled className="size-3.5" />
) : (
<TbListDetails className="size-3.5" />
)}
</button>
</TooltipTrigger>
<TooltipContent side="bottom" showArrow={false}>
{diffViewMode === "side-by-side"
? "Switch to inline diff"
: "Switch to side by side diff"}
</TooltipContent>
</Tooltip>
<>
<Tooltip>
<TooltipTrigger asChild>
<button
type="button"
onClick={() =>
onDiffViewModeChange(
diffViewMode === "side-by-side"
? "inline"
: "side-by-side",
)
}
className="rounded p-0.5 text-muted-foreground/60 transition-colors hover:text-muted-foreground"
>
{diffViewMode === "side-by-side" ? (
<TbLayoutSidebarRightFilled className="size-3.5" />
) : (
<TbListDetails className="size-3.5" />
)}
</button>
</TooltipTrigger>
<TooltipContent side="bottom" showArrow={false}>
{diffViewMode === "side-by-side"
? "Switch to inline diff"
: "Switch to side by side diff"}
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<button
type="button"
onClick={onToggleHideUnchangedRegions}
className={cn(
"rounded p-0.5 transition-colors hover:text-muted-foreground",
hideUnchangedRegions
? "text-foreground"
: "text-muted-foreground/60",
)}
>
<TbFold className="size-3.5" />
</button>
</TooltipTrigger>
<TooltipContent side="bottom" showArrow={false}>
{hideUnchangedRegions
? "Show all lines"
: "Hide unchanged regions"}
</TooltipContent>
</Tooltip>
</>
)}
<PaneToolbarActions
splitOrientation={splitOrientation}
Expand Down
8 changes: 8 additions & 0 deletions apps/desktop/src/renderer/stores/changes/store.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ interface ChangesState {
expandedSections: Record<ChangeCategory, boolean>;
baseBranch: string | null;
showRenderedMarkdown: Record<string, boolean>;
hideUnchangedRegions: boolean;

selectFile: (
worktreePath: string,
Expand All @@ -36,6 +37,7 @@ interface ChangesState {
setBaseBranch: (branch: string | null) => void;
toggleRenderedMarkdown: (worktreePath: string) => void;
getShowRenderedMarkdown: (worktreePath: string) => boolean;
toggleHideUnchangedRegions: () => void;
reset: (worktreePath: string) => void;
}

Expand All @@ -51,6 +53,7 @@ const initialState = {
},
baseBranch: null,
showRenderedMarkdown: {} as Record<string, boolean>,
hideUnchangedRegions: false,
};

export const useChangesStore = create<ChangesState>()(
Expand Down Expand Up @@ -125,6 +128,10 @@ export const useChangesStore = create<ChangesState>()(
return get().showRenderedMarkdown[worktreePath] ?? false;
},

toggleHideUnchangedRegions: () => {
set({ hideUnchangedRegions: !get().hideUnchangedRegions });
},

reset: (worktreePath) => {
const { selectedFiles } = get();
set({
Expand All @@ -144,6 +151,7 @@ export const useChangesStore = create<ChangesState>()(
expandedSections: state.expandedSections,
baseBranch: state.baseBranch,
showRenderedMarkdown: state.showRenderedMarkdown,
hideUnchangedRegions: state.hideUnchangedRegions,
}),
},
),
Expand Down
2 changes: 1 addition & 1 deletion bun.lock
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading