Skip to content

style(desktop): polish v2 diff pane header, file path, and unmodified-lines strip #3899

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 1 commit into from
Apr 30, 2026
Merged

style(desktop): polish v2 diff pane header, file path, and unmodified-lines strip #3899

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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: 4 additions & 3 deletions ...cated/_dashboard/v2-workspace/$workspaceId/components/StatusIndicator/StatusIndicator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,7 @@ const STATUS_COLORS: Record<FileStatus, string> = {
untracked: "text-green-700 dark:text-green-400",
};

function getStatusIcon(status: FileStatus): ReactNode {
const iconClass = "w-3 h-3";
function getStatusIcon(status: FileStatus, iconClass: string): ReactNode {
switch (status) {
case "added":
case "untracked":
Expand All @@ -49,15 +48,17 @@ function getStatusIcon(status: FileStatus): ReactNode {
export function StatusIndicator({
status,
className,
iconClassName = "w-3 h-3",
}: {
status: string;
className?: string;
iconClassName?: string;
}) {
return (
<span
className={`flex shrink-0 items-center ${STATUS_COLORS[status as FileStatus] ?? ""} ${className ?? ""}`}
>
{getStatusIcon(status as FileStatus)}
{getStatusIcon(status as FileStatus, iconClassName)}
</span>
);
}
6 changes: 3 additions & 3 deletions ...ashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/DiffPane/DiffPane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,18 +98,18 @@ export function DiffPane({ context, workspaceId, onOpenFile }: DiffPaneProps) {
[updateData],
);

if (!isLoading && files.length === 0) {
if (files.length === 0) {
return (
<div className="flex h-full w-full items-center justify-center text-sm text-muted-foreground">
No changes
{isLoading ? "Loading…" : "No changes"}
</div>
);
}

return (
<Virtualizer
className="h-full w-full overflow-auto"
contentClassName="space-y-2 px-2 py-2"
contentClassName="space-y-2"
>
<ScrollToFile path={data.path} />
{files.map((file) => (
Expand Down
11 changes: 7 additions & 4 deletions ...ceId/hooks/usePaneRegistry/components/DiffPane/components/DiffFileEntry/DiffFileEntry.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Button } from "@superset/ui/button";
import { toast } from "@superset/ui/sonner";
import { memo, useCallback, useRef, useState } from "react";
import type { ChangesetFile } from "../../../../../useChangeset";
Expand Down Expand Up @@ -199,7 +200,7 @@ function DeferredDiffPlaceholder({
: `${(file.additions + file.deletions).toLocaleString()} changed lines`;

return (
<div className="flex flex-col overflow-hidden rounded-md border border-border">
<div className="flex flex-col overflow-hidden">
<DiffFileHeader
path={file.path}
status={file.status}
Expand All @@ -222,13 +223,15 @@ function DeferredDiffPlaceholder({
{subtitle && (
<div className="text-xs text-muted-foreground">{subtitle}</div>
)}
<button
<Button
type="button"
size="xs"
variant="outline"
onClick={onShow}
className="mt-1 rounded border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground hover:bg-muted"
className="mt-1"
>
Show diff
</button>
</Button>
</div>
)}
</div>
Expand Down
81 changes: 48 additions & 33 deletions ...Id/hooks/usePaneRegistry/components/DiffPane/components/DiffFileHeader/DiffFileHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,13 @@ import { Checkbox } from "@superset/ui/checkbox";
import { Tooltip, TooltipContent, TooltipTrigger } from "@superset/ui/tooltip";
import { ChevronDown, ChevronRight, Eye, EyeOff } from "lucide-react";
import { useId } from "react";
import { LuCopy, LuUndo2 } from "react-icons/lu";
import { LuCheck, LuCopy, LuUndo2 } from "react-icons/lu";
import { useCopyToClipboard } from "renderer/hooks/useCopyToClipboard";
import { StatusIndicator } from "renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/StatusIndicator";
import { CLICK_HINT_TOOLTIP } from "renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/utils/clickModifierLabels";
import { getSidebarClickIntent } from "renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/utils/getSidebarClickIntent";
import { FileIcon } from "renderer/screens/main/components/WorkspaceView/RightSidebar/FilesView/utils";
import { GIT_STAT_TEXT_CLASSES } from "../../utils/gitDecorationColors";

interface DiffFileHeaderProps {
path: string;
Expand All @@ -21,7 +23,6 @@ interface DiffFileHeaderProps {
onToggleViewed: () => void;
onOpenFile?: (openInNewTab?: boolean) => void;
onOpenInExternalEditor?: () => void;
onCopyContents?: () => void;
onDiscard?: () => void;
}

Expand All @@ -38,27 +39,33 @@ export function DiffFileHeader({
onToggleViewed,
onOpenFile,
onOpenInExternalEditor,
onCopyContents,
onDiscard,
}: DiffFileHeaderProps) {
const viewedId = useId();
const { copyToClipboard, copied } = useCopyToClipboard();

// Split into directory + basename so the basename stays visible when the
// header is narrow — the directory truncates with ellipsis instead of
// hiding the filename behind it.
const lastSlash = path.lastIndexOf("/");
const dir = lastSlash >= 0 ? path.slice(0, lastSlash + 1) : "";
const name = lastSlash >= 0 ? path.slice(lastSlash + 1) : path;

return (
<div className="@container/diff-file-header flex min-w-0 flex-wrap items-center gap-1 px-2 py-1.5">
<div className="@container/diff-file-header flex min-w-0 flex-nowrap items-center gap-1 border-y border-border bg-muted/30 px-3 py-2">
<button
type="button"
onClick={onToggleCollapsed}
aria-label={collapsed ? "Expand file" : "Collapse file"}
className="shrink-0 rounded p-0.5 text-muted-foreground/60 transition-colors hover:bg-accent hover:text-muted-foreground"
className="shrink-0 rounded p-1 text-muted-foreground/60 transition-colors hover:bg-accent hover:text-muted-foreground"
>
{collapsed ? (
<ChevronRight className="size-3.5" />
) : (
<ChevronDown className="size-3.5" />
)}
</button>
<StatusIndicator status={status} />
<Tooltip delayDuration={300}>
<Tooltip>
Copy link
Copy Markdown
Contributor

@greptile-apps greptile-apps Bot Apr 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Tooltip instant-open on the file path button

The old code used <Tooltip delayDuration={300}> for the open-file tooltip. The new code drops delayDuration, which typically defaults to 0 in Radix UI, so the CLICK_HINT_TOOLTIP will flash open on any hover without a settle delay. A short delay (200–300 ms) is the convention used elsewhere in this header and keeps the tooltip from feeling intrusive when the user is scanning file names.

Suggested change
<Tooltip>
<Tooltip delayDuration={300}>
Prompt To Fix With AI 
This is a comment left during a code review.
Path: apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/DiffPane/components/DiffFileHeader/DiffFileHeader.tsx
Line: 68

Comment:
**`Tooltip` instant-open on the file path button**

The old code used `<Tooltip delayDuration={300}>` for the open-file tooltip. The new code drops `delayDuration`, which typically defaults to `0` in Radix UI, so the `CLICK_HINT_TOOLTIP` will flash open on any hover without a settle delay. A short delay (200–300 ms) is the convention used elsewhere in this header and keeps the tooltip from feeling intrusive when the user is scanning file names.

```suggestion
			<Tooltip delayDuration={300}>
```

How can I resolve this? If you propose a fix, please make it concise.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

<TooltipTrigger asChild>
<button
type="button"
Expand All @@ -72,29 +79,54 @@ export function DiffFileHeader({
}}
disabled={!onOpenFile && !onOpenInExternalEditor}
aria-label="Open in file viewer"
className="flex h-6 min-w-0 items-center gap-1.5 rounded border border-border px-1.5 py-0.5 text-left transition-colors hover:bg-accent disabled:pointer-events-none disabled:opacity-60"
className="flex h-6 min-w-0 flex-1 items-center gap-1.5 rounded px-1 text-left transition-colors hover:bg-accent disabled:pointer-events-none disabled:opacity-60"
>
<FileIcon fileName={path} className="size-3.5 shrink-0" />
<span className="min-w-0 truncate font-mono text-xs text-foreground">
{path}
<span className="flex min-w-0 items-baseline font-mono text-xs">
{dir && (
<span className="min-w-0 truncate text-muted-foreground">
{dir}
</span>
)}
<span className="shrink-0 text-foreground">{name}</span>
</span>
</button>
</TooltipTrigger>
<TooltipContent side="bottom" showArrow={false}>
{CLICK_HINT_TOOLTIP}
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<button
type="button"
onClick={() => void copyToClipboard(path)}
aria-label="Copy path"
className="shrink-0 rounded p-1 text-muted-foreground/60 transition-colors hover:bg-accent hover:text-muted-foreground"
>
{copied ? (
<LuCheck className="size-3.5" />
) : (
<LuCopy className="size-3.5" />
)}
</button>
</TooltipTrigger>
<TooltipContent side="bottom" showArrow={false}>
{copied ? "Copied" : "Copy path"}
</TooltipContent>
</Tooltip>
<div className="ml-auto flex shrink-0 items-center gap-1.5">
<StatusIndicator status={status} iconClassName="size-3.5" />
{(additions > 0 || deletions > 0) && (
<span className="font-mono text-[10px] text-muted-foreground">
<span className="font-mono text-xs text-muted-foreground">
{additions > 0 && (
<span className="text-green-700 dark:text-green-400">
<span className={GIT_STAT_TEXT_CLASSES.addition}>
+{additions}
</span>
)}
{additions > 0 && deletions > 0 && " "}
{deletions > 0 && (
<span className="text-red-700 dark:text-red-500">
<span className={GIT_STAT_TEXT_CLASSES.deletion}>
-{deletions}
</span>
)}
Expand All @@ -110,7 +142,7 @@ export function DiffFileHeader({
/>
<label
htmlFor={viewedId}
className="hidden cursor-pointer select-none text-[10px] text-muted-foreground @min-[380px]/diff-file-header:inline"
className="hidden cursor-pointer select-none text-xs text-muted-foreground @min-[380px]/diff-file-header:inline"
>
Viewed
</label>
Expand All @@ -125,7 +157,7 @@ export function DiffFileHeader({
aria-label={
expandUnchanged ? "Hide unchanged regions" : "Show all lines"
}
className="rounded p-0.5 text-muted-foreground/60 transition-colors hover:bg-accent hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-40"
className="rounded p-1 text-muted-foreground/60 transition-colors hover:bg-accent hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-40"
>
{expandUnchanged ? (
<EyeOff className="size-3.5" />
Expand All @@ -139,31 +171,14 @@ export function DiffFileHeader({
</TooltipContent>
</Tooltip>

<Tooltip>
<TooltipTrigger asChild>
<button
type="button"
onClick={onCopyContents}
disabled={!onCopyContents}
aria-label="Copy file contents"
className="rounded p-0.5 text-muted-foreground/60 transition-colors hover:bg-accent hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-40"
>
<LuCopy className="size-3.5" />
</button>
</TooltipTrigger>
<TooltipContent side="bottom" showArrow={false}>
Copy file contents
</TooltipContent>
</Tooltip>

<Tooltip>
<TooltipTrigger asChild>
<button
type="button"
onClick={onDiscard}
disabled={!onDiscard}
aria-label="Discard changes"
className="rounded p-0.5 text-muted-foreground/60 transition-colors hover:bg-accent hover:text-destructive disabled:pointer-events-none disabled:opacity-40"
className="rounded p-1 text-muted-foreground/60 transition-colors hover:bg-accent hover:text-destructive disabled:pointer-events-none disabled:opacity-40"
>
<LuUndo2 className="size-3.5" />
</button>
Expand Down
59 changes: 59 additions & 0 deletions ...PaneRegistry/components/DiffPane/components/DiffPaneHeaderExtras/DiffPaneHeaderExtras.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import { Tooltip, TooltipContent, TooltipTrigger } from "@superset/ui/tooltip";
import { cn } from "@superset/ui/utils";
import { SquareSplitHorizontal } from "lucide-react";
import { TbScan } from "react-icons/tb";
import { useSettings } from "renderer/stores/settings";

export function DiffPaneHeaderExtras() {
const diffStyle = useSettings((s) => s.diffStyle);
const updateSetting = useSettings((s) => s.update);

const buttonClass = (active: boolean) =>
cn(
"flex size-5 items-center justify-center transition-colors",
active
? "bg-secondary text-foreground"
: "text-muted-foreground hover:text-foreground",
);

return (
<div className="flex items-center">
<Tooltip>
<TooltipTrigger asChild>
<button
type="button"
onClick={() => updateSetting("diffStyle", "unified")}
aria-label="Unified view"
aria-pressed={diffStyle === "unified"}
className={buttonClass(diffStyle === "unified")}
>
<TbScan className="size-3.5" />
</button>
</TooltipTrigger>
<TooltipContent side="bottom" showArrow={false}>
Unified view
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<button
type="button"
onClick={() => updateSetting("diffStyle", "split")}
aria-label="Split view"
aria-pressed={diffStyle === "split"}
className={buttonClass(diffStyle === "split")}
>
<SquareSplitHorizontal className="size-3.5" />
</button>
</TooltipTrigger>
<TooltipContent side="bottom" showArrow={false}>
Split view
</TooltipContent>
</Tooltip>
<div
className="mx-1 h-3.5 w-px bg-muted-foreground/30"
aria-hidden="true"
/>
</div>
);
}
1 change: 1 addition & 0 deletions ...paceId/hooks/usePaneRegistry/components/DiffPane/components/DiffPaneHeaderExtras/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { DiffPaneHeaderExtras } from "./DiffPaneHeaderExtras";
Loading
Loading