mirror of
https://github.com/getpaseo/paseo.git
synced 2026-10-30 21:23:04 +00:00
Mohamed Boudra
174055a63c
* feat(app): give compact Changes an overview and a straight rail Three fixes to the Explorer's Changes tab on phones, where there is no tree rail and the diff is the only view of what changed. No placeholder stat while the sidebar slides in. `useCheckoutDiffQuery` reported `isLoading` only when the query was enabled and connected, so an inactive retained panel settled on `files: []`. The comparison toolbar summed that into "+0 -0" and the body rendered "No changes" for a diff nobody had fetched yet, both replaced a moment later by real numbers. The result now derives from the payload alone: no payload means loading, whatever the query is doing. Callers already handle loading correctly, so nothing downstream needed a special case. Jump to file. A floating action button over the diff opens a sheet with the same changed-files tree the desktop rail renders; tapping a file closes the sheet and scrolls the diff there. `ChangedFilesTree` moved out of `diff-pane.tsx` into its own module so both surfaces own one tree, and its list is now the sheet-aware one so it scrolls with the sheet gesture on native. `DiffDocument` takes a `contentInsetBottom` so the button never traps the last line. Rails on the compact header. The tab labels sat at 20dp and the close X at 16dp while every toolbar row below them used 12dp leading and 8dp trailing. The close button was also a hand-rolled Pressable rather than a ToolbarButton. `paneContentToolbarTrailingPadding` now takes whether the row's last control is a bare glyph or a framed one: a glyph's hitbox overhangs its ink so the row pads by less than the rail, but the compact git-actions trigger paints its own frame and was landing flush against the screen edge. The commits header chevron moved to the depth-0 tree rail. Desktop geometry is unchanged. * fix(app): preserve Explorer touch targets and reset file overview * fix(app): preserve diff selections across repaints Header typography refreshes and height resizes changed the repaint callback and inadvertently cleared active source selections. Keep selection updates stable while retaining explicit source and selection-layout invalidation. * test(app): express diff copy regression as user actions * test(app): express file overview flows as user actions
2048 lines
60 KiB
TypeScript
2048 lines
60 KiB
TypeScript
import { useState, useCallback, useMemo, type ReactElement, type ReactNode } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import type { TFunction } from "i18next";
|
|
import { TreeRail } from "@/components/tree-rail";
|
|
import { TreeRailToggle } from "@/components/tree-rail-toggle";
|
|
import { DiffStat } from "@/components/diff-stat";
|
|
import {
|
|
View,
|
|
Text,
|
|
Pressable,
|
|
type PressableStateCallbackType,
|
|
type StyleProp,
|
|
type ViewStyle,
|
|
} from "react-native";
|
|
import { StyleSheet, withUnistyles } from "react-native-unistyles";
|
|
import type { Theme } from "@/styles/theme";
|
|
import { useIsCompactFormFactor } from "@/constants/layout";
|
|
import {
|
|
AlignJustify,
|
|
ChevronDown,
|
|
Columns2,
|
|
ExternalLink,
|
|
ListChevronsDownUp,
|
|
ListChevronsUpDown,
|
|
Maximize,
|
|
MoreHorizontal,
|
|
Pilcrow,
|
|
RotateCw,
|
|
WrapText,
|
|
} from "lucide-react-native";
|
|
import { type ParsedDiffFile } from "@/git/use-diff-query";
|
|
import type { ChangesState } from "@/panels/changes/state";
|
|
import { defaultChangesState } from "@/panels/changes/state";
|
|
import { DiffDocument, type WorkingDiffMode } from "@/git/diff-document";
|
|
import { ChangedFilesTree } from "@/git/changed-files-tree";
|
|
import { JUMP_TO_FILE_CLEARANCE, JumpToFile } from "@/git/jump-to-file";
|
|
import {
|
|
selectPrHintFromStatus,
|
|
type PrHint,
|
|
useCheckoutPrStatusQuery,
|
|
} from "@/git/use-pr-status-query";
|
|
import { CommitsSection } from "@/git/commits-section/commits-section";
|
|
import { useAppSettings } from "@/hooks/use-settings";
|
|
import { useChangesPreferences } from "@/hooks/use-changes-preferences";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import * as Clipboard from "expo-clipboard";
|
|
import { useFileDownload } from "@/hooks/use-file-download";
|
|
import { useIsLocalDaemon } from "@/hooks/use-is-local-daemon";
|
|
import { buildAbsoluteExplorerPath } from "@/utils/explorer-paths";
|
|
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
|
|
import { GitActionsSplitButton } from "@/git/actions-split-button";
|
|
import type { GitActions } from "@/git/policy";
|
|
import { BranchSwitcher } from "@/components/branch-switcher";
|
|
import { useGitActions } from "@/git/use-actions";
|
|
import { GIT_ACTION_ICONS } from "@/git/action-icons";
|
|
import { buildForgeSignInCommand, getForgePresentation, type Forge } from "@/git/forge";
|
|
import { parseGitRemoteLocation } from "@getpaseo/protocol/git-remote";
|
|
import type { ForgeAuthState } from "@getpaseo/protocol/messages";
|
|
import { useCheckoutGitActionsStore } from "@/git/actions-store";
|
|
import { useToast } from "@/contexts/toast-context";
|
|
import { useSessionStore } from "@/stores/session-store";
|
|
import { confirmDialog } from "@/utils/confirm-dialog";
|
|
import { LoadingSpinner } from "@/components/ui/loading-spinner";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
PaneContentToolbar,
|
|
paneContentToolbarIconSize,
|
|
paneContentToolbarIconButtonStyle,
|
|
paneContentToolbarTrailingPadding,
|
|
type ToolbarTrailingControl,
|
|
ToolbarButton,
|
|
ToolbarControls,
|
|
} from "@/components/ui/pane-content-toolbar";
|
|
import { extraMutedIconColorMapping } from "@/components/ui/icon-button-chrome";
|
|
import {
|
|
isToolbarLabelTriggerHighlighted,
|
|
ToolbarLabelTriggerIcon,
|
|
toolbarLabelTriggerTextStyle,
|
|
toolbarLabelTriggerStyle,
|
|
} from "@/components/ui/toolbar-label-trigger";
|
|
import { FOCUSED_PANE_PLACEMENT, useWorkspaceLayoutStore } from "@/stores/workspace-layout-store";
|
|
import type { WorkspaceTabPlacement } from "@/stores/workspace-layout-actions";
|
|
import type { WorkspaceTabTarget } from "@/workspace-tabs/model";
|
|
import { buildWorkspaceTabPersistenceKey } from "@/workspace-tabs/model";
|
|
import { isWeb } from "@/constants/platform";
|
|
import { usePublishWorkingDiffAttachment, useWorkingDiff } from "@/git/use-working-diff";
|
|
import type { CheckoutStatusPayload } from "@/git/use-status-query";
|
|
import { DiffTooLargeState } from "@/git/diff-too-large-state";
|
|
import { openDesktopTarget, useDesktopOpenTargets } from "@/workspace/desktop-open-targets";
|
|
import { PullRequestStateIcon } from "@/git/pull-request-state-icon";
|
|
import { openExternalUrl } from "@/utils/open-external-url";
|
|
import { openWorkspacePullRequest } from "@/workspace-tabs/open-supporting-view";
|
|
import type { PullRequestOpenLocation } from "@/hooks/use-settings";
|
|
|
|
export type { GitActionId, GitAction, GitActions } from "@/git/policy";
|
|
|
|
export function resolveDiffLayout(
|
|
layout: "unified" | "split",
|
|
canUseSplitLayout: boolean,
|
|
): "unified" | "split" {
|
|
return canUseSplitLayout ? layout : "unified";
|
|
}
|
|
|
|
function computeSelectedDiffStat(
|
|
files: ParsedDiffFile[],
|
|
isLoading: boolean,
|
|
): { additions: number; deletions: number } | null {
|
|
if (isLoading) {
|
|
return null;
|
|
}
|
|
return files.reduce(
|
|
(total, file) => ({
|
|
additions: total.additions + file.additions,
|
|
deletions: total.deletions + file.deletions,
|
|
}),
|
|
{ additions: 0, deletions: 0 },
|
|
);
|
|
}
|
|
|
|
function useDiscardChangesAction({
|
|
serverId,
|
|
cwd,
|
|
diffMode,
|
|
}: {
|
|
serverId: string;
|
|
cwd: string;
|
|
diffMode: "uncommitted" | "base";
|
|
}): ((path: string, oldPath?: string) => void) | undefined {
|
|
const { t } = useTranslation();
|
|
const toast = useToast();
|
|
const discardChanges = useCheckoutGitActionsStore((state) => state.discardChanges);
|
|
// COMPAT(checkoutDiscardChanges): added in v0.3.0, remove gate after 2027-02-08.
|
|
const discardSupported = useSessionStore(
|
|
(s) => s.sessions[serverId]?.serverInfo?.features?.checkoutDiscardChanges === true,
|
|
);
|
|
const discardPath = useCallback(
|
|
async (path: string, oldPath?: string) => {
|
|
const confirmed = await confirmDialog({
|
|
title: t("workspace.fileActions.confirmRevert.title"),
|
|
message: t("workspace.fileActions.confirmRevert.message", { name: path }),
|
|
confirmLabel: t("workspace.fileActions.confirmRevert.confirm"),
|
|
cancelLabel: t("workspace.fileActions.confirmRevert.cancel"),
|
|
destructive: true,
|
|
});
|
|
if (!confirmed) {
|
|
return;
|
|
}
|
|
try {
|
|
await discardChanges({
|
|
serverId,
|
|
cwd,
|
|
paths: oldPath ? [path, oldPath] : [path],
|
|
});
|
|
} catch (cause) {
|
|
toast.error(
|
|
cause instanceof Error ? cause.message : t("workspace.fileActions.confirmRevert.failed"),
|
|
);
|
|
}
|
|
},
|
|
[cwd, discardChanges, serverId, t, toast],
|
|
);
|
|
const handleDiscardPath = useCallback(
|
|
(path: string, oldPath?: string) => {
|
|
void discardPath(path, oldPath);
|
|
},
|
|
[discardPath],
|
|
);
|
|
return discardSupported && diffMode === "uncommitted" ? handleDiscardPath : undefined;
|
|
}
|
|
|
|
interface ChangesSurfaceProps {
|
|
serverId: string;
|
|
workspaceId?: string | null;
|
|
cwd: string;
|
|
enabled?: boolean;
|
|
presentation?: ChangesPresentation;
|
|
focusPath?: string;
|
|
focusRequestId?: number;
|
|
onOpenFile?: (path: string) => void;
|
|
onOpenToSide?: (path: string) => void;
|
|
onSelectDiffFile?: (path: string) => void;
|
|
onAddToChat?: (path: string) => void;
|
|
state?: ChangesState;
|
|
onStateChange?: (state: ChangesState) => void;
|
|
}
|
|
|
|
type PressableStyleFn = (
|
|
state: PressableStateCallbackType & { hovered?: boolean; open?: boolean },
|
|
) => StyleProp<ViewStyle>;
|
|
|
|
const foregroundMutedIconColorMapping = (theme: Theme) => ({ color: theme.colors.foregroundMuted });
|
|
|
|
const ThemedLoadingSpinner = withUnistyles(LoadingSpinner);
|
|
const ThemedAlignJustify = withUnistyles(AlignJustify);
|
|
const ThemedColumns2 = withUnistyles(Columns2);
|
|
const ThemedPilcrow = withUnistyles(Pilcrow);
|
|
const ThemedWrapText = withUnistyles(WrapText);
|
|
const ThemedListChevronsDownUp = withUnistyles(ListChevronsDownUp);
|
|
const ThemedListChevronsUpDown = withUnistyles(ListChevronsUpDown);
|
|
const ThemedMaximize = withUnistyles(Maximize);
|
|
const noopStateChange = () => {};
|
|
const ThemedChevronDown = withUnistyles(ChevronDown);
|
|
const ThemedMoreHorizontal = withUnistyles(MoreHorizontal);
|
|
const ThemedExternalLink = withUnistyles(ExternalLink);
|
|
const DIFF_OPTIONS_WHITESPACE_ICON = (
|
|
<ThemedPilcrow size={14} uniProps={foregroundMutedIconColorMapping} />
|
|
);
|
|
const DIFF_OPTIONS_WRAP_ICON = (
|
|
<ThemedWrapText size={14} uniProps={foregroundMutedIconColorMapping} />
|
|
);
|
|
const DIFF_OPTIONS_SPLIT_ICON = (
|
|
<ThemedColumns2 size={14} uniProps={foregroundMutedIconColorMapping} />
|
|
);
|
|
const DIFF_OPTIONS_COLLAPSE_ICON = (
|
|
<ThemedListChevronsDownUp size={14} uniProps={foregroundMutedIconColorMapping} />
|
|
);
|
|
const DIFF_OPTIONS_EXPAND_ICON = (
|
|
<ThemedListChevronsUpDown size={14} uniProps={foregroundMutedIconColorMapping} />
|
|
);
|
|
const DIFF_OPTIONS_CHANGES_TAB_ICON = (
|
|
<ThemedMaximize size={14} uniProps={foregroundMutedIconColorMapping} />
|
|
);
|
|
|
|
interface DiffLayoutToggleProps {
|
|
layout: "unified" | "split";
|
|
isMobile: boolean;
|
|
testID?: string;
|
|
toggleStyle?: PressableStyleFn;
|
|
onToggle: () => void;
|
|
}
|
|
export function DiffLayoutToggle({
|
|
layout,
|
|
isMobile,
|
|
testID = "changes-toggle-layout",
|
|
toggleStyle,
|
|
onToggle,
|
|
}: DiffLayoutToggleProps) {
|
|
const defaultToggleStyle = useMemo(
|
|
() => buildToggleButtonStyle(false, undefined, isMobile),
|
|
[isMobile],
|
|
);
|
|
const { t } = useTranslation();
|
|
const label =
|
|
layout === "unified"
|
|
? t("workspace.git.diff.switchToSplit")
|
|
: t("workspace.git.diff.switchToUnified");
|
|
return (
|
|
<Tooltip delayDuration={300}>
|
|
<TooltipTrigger asChild>
|
|
<Pressable
|
|
accessibilityRole="button"
|
|
accessibilityLabel={label}
|
|
testID={testID}
|
|
onPress={onToggle}
|
|
style={toggleStyle ?? defaultToggleStyle}
|
|
>
|
|
{layout === "unified" ? (
|
|
<ThemedColumns2 size={isMobile ? 18 : 14} uniProps={foregroundMutedIconColorMapping} />
|
|
) : (
|
|
<ThemedAlignJustify
|
|
size={isMobile ? 18 : 14}
|
|
uniProps={foregroundMutedIconColorMapping}
|
|
/>
|
|
)}
|
|
</Pressable>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="bottom">
|
|
<Text style={styles.tooltipText}>{label}</Text>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
interface DiffModeMenuProps {
|
|
diffMode: "uncommitted" | "base";
|
|
committedDescription?: string;
|
|
testIDPrefix?: string;
|
|
onSelectUncommitted: () => void;
|
|
onSelectBase: () => void;
|
|
}
|
|
|
|
export function DiffModeMenu({
|
|
diffMode,
|
|
committedDescription,
|
|
testIDPrefix = "changes-diff",
|
|
onSelectUncommitted,
|
|
onSelectBase,
|
|
}: DiffModeMenuProps) {
|
|
const { t } = useTranslation();
|
|
const uncommittedLabel = t("workspace.git.diff.uncommitted");
|
|
const committedLabel = t("workspace.git.diff.committed");
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger
|
|
testID={`${testIDPrefix}-status-trigger`}
|
|
style={toolbarLabelTriggerStyle}
|
|
accessibilityRole="button"
|
|
accessibilityLabel={t("workspace.git.diff.diffMode")}
|
|
>
|
|
{(state) => {
|
|
const highlighted = isToolbarLabelTriggerHighlighted(state);
|
|
return (
|
|
<>
|
|
<Text style={toolbarLabelTriggerTextStyle(highlighted)} numberOfLines={1}>
|
|
{diffMode === "uncommitted" ? uncommittedLabel : committedLabel}
|
|
</Text>
|
|
<ToolbarLabelTriggerIcon>
|
|
<ThemedChevronDown size={12} uniProps={extraMutedIconColorMapping} />
|
|
</ToolbarLabelTriggerIcon>
|
|
</>
|
|
);
|
|
}}
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="start" width={260} testID={`${testIDPrefix}-status-menu`}>
|
|
<DropdownMenuItem
|
|
testID={`${testIDPrefix}-mode-uncommitted`}
|
|
selected={diffMode === "uncommitted"}
|
|
onSelect={onSelectUncommitted}
|
|
>
|
|
{uncommittedLabel}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem
|
|
testID={`${testIDPrefix}-mode-committed`}
|
|
selected={diffMode === "base"}
|
|
description={committedDescription}
|
|
onSelect={onSelectBase}
|
|
>
|
|
{committedLabel}
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|
|
|
|
type ChangesPresentation = "combined" | "tree" | "diff";
|
|
|
|
interface ChangesToolbarRefreshAction {
|
|
isRefreshing: boolean;
|
|
onRefresh: () => void;
|
|
}
|
|
|
|
interface ChangesToolbarInlineDiffToggle {
|
|
value: boolean;
|
|
onToggle: () => void;
|
|
}
|
|
|
|
interface ChangesToolbarDiffOptions {
|
|
collapse: {
|
|
allFilesCollapsed: boolean;
|
|
onCollapseAll: () => void;
|
|
onExpandAll: () => void;
|
|
} | null;
|
|
layout: {
|
|
value: "unified" | "split";
|
|
onToggle: () => void;
|
|
} | null;
|
|
hideWhitespace: boolean;
|
|
wrapLines: boolean;
|
|
onToggleHideWhitespace: () => void;
|
|
onToggleWrapLines: () => void;
|
|
}
|
|
|
|
type ChangesToolbarMode =
|
|
| {
|
|
kind: "tree";
|
|
onOpenDiff: () => void;
|
|
inlineDiff: ChangesToolbarInlineDiffToggle | null;
|
|
refresh: ChangesToolbarRefreshAction | null;
|
|
}
|
|
| {
|
|
kind: "diff";
|
|
options: ChangesToolbarDiffOptions;
|
|
refresh: ChangesToolbarRefreshAction | null;
|
|
}
|
|
| {
|
|
kind: "combined";
|
|
options: ChangesToolbarDiffOptions;
|
|
refresh: ChangesToolbarRefreshAction | null;
|
|
treeToggle: { visible: boolean; onToggle: () => void } | null;
|
|
inlineDiff: ChangesToolbarInlineDiffToggle | null;
|
|
};
|
|
|
|
function buildChangesToolbarMode(input: {
|
|
presentation: ChangesPresentation;
|
|
compact: boolean;
|
|
hasChanges: boolean;
|
|
canUseSplitLayout: boolean;
|
|
refreshSupported: boolean;
|
|
isRefreshing: boolean;
|
|
layout: "unified" | "split";
|
|
hideWhitespace: boolean;
|
|
wrapLines: boolean;
|
|
treeVisible: boolean;
|
|
onOpenDiff: () => void;
|
|
inlineDiff: ChangesToolbarInlineDiffToggle | null;
|
|
onRefresh: () => void;
|
|
onCollapseAll: () => void;
|
|
onExpandAll: () => void;
|
|
allFilesCollapsed: boolean;
|
|
onToggleLayout: () => void;
|
|
onToggleHideWhitespace: () => void;
|
|
onToggleWrapLines: () => void;
|
|
onToggleTree: () => void;
|
|
}): ChangesToolbarMode {
|
|
const refresh = input.refreshSupported
|
|
? { isRefreshing: input.isRefreshing, onRefresh: input.onRefresh }
|
|
: null;
|
|
if (input.presentation === "tree") {
|
|
return {
|
|
kind: "tree",
|
|
onOpenDiff: input.onOpenDiff,
|
|
inlineDiff: input.inlineDiff,
|
|
refresh,
|
|
};
|
|
}
|
|
const options: ChangesToolbarDiffOptions = {
|
|
collapse: input.hasChanges
|
|
? {
|
|
allFilesCollapsed: input.allFilesCollapsed,
|
|
onCollapseAll: input.onCollapseAll,
|
|
onExpandAll: input.onExpandAll,
|
|
}
|
|
: null,
|
|
layout: input.canUseSplitLayout
|
|
? { value: input.layout, onToggle: input.onToggleLayout }
|
|
: null,
|
|
hideWhitespace: input.hideWhitespace,
|
|
wrapLines: input.wrapLines,
|
|
onToggleHideWhitespace: input.onToggleHideWhitespace,
|
|
onToggleWrapLines: input.onToggleWrapLines,
|
|
};
|
|
if (input.presentation === "diff") {
|
|
return { kind: "diff", options, refresh };
|
|
}
|
|
return {
|
|
kind: "combined",
|
|
options,
|
|
refresh,
|
|
treeToggle:
|
|
!input.compact && input.hasChanges
|
|
? { visible: input.treeVisible, onToggle: input.onToggleTree }
|
|
: null,
|
|
inlineDiff: input.inlineDiff,
|
|
};
|
|
}
|
|
|
|
interface ChangesPullRequestLinkModel extends Pick<PrHint, "forge" | "number" | "state" | "url"> {
|
|
onOpen: () => void;
|
|
}
|
|
|
|
interface ChangesRepositoryToolbarModel {
|
|
branchName: string | null;
|
|
cwd: string;
|
|
gitActions: GitActions | null;
|
|
pullRequest: ChangesPullRequestLinkModel | null;
|
|
serverId: string;
|
|
workspaceId?: string | null;
|
|
}
|
|
|
|
interface ChangesComparisonToolbarModel {
|
|
committedDescription?: string;
|
|
diffMode: "uncommitted" | "base";
|
|
mode: ChangesToolbarMode;
|
|
selectedDiffStat: { additions: number; deletions: number } | null;
|
|
onSelectBase: () => void;
|
|
onSelectUncommitted: () => void;
|
|
}
|
|
|
|
interface ChangesHeaderProps {
|
|
compact: boolean;
|
|
repository: ChangesRepositoryToolbarModel;
|
|
comparison: ChangesComparisonToolbarModel;
|
|
sidebarSurface: boolean;
|
|
}
|
|
|
|
interface BuildChangesHeaderModelInput {
|
|
branchName: string | null;
|
|
committedDescription?: string;
|
|
compact: boolean;
|
|
cwd: string;
|
|
diffMode: "uncommitted" | "base";
|
|
gitActions: GitActions;
|
|
mode: ChangesToolbarMode;
|
|
onOpenPullRequest: () => void;
|
|
onSelectBase: () => void;
|
|
onSelectUncommitted: () => void;
|
|
pullRequest: PrHint | null;
|
|
selectedDiffStat: { additions: number; deletions: number } | null;
|
|
serverId: string;
|
|
workspaceId?: string | null;
|
|
}
|
|
|
|
function buildChangesHeaderModel(input: BuildChangesHeaderModelInput): {
|
|
repository: ChangesRepositoryToolbarModel;
|
|
comparison: ChangesComparisonToolbarModel;
|
|
} {
|
|
return {
|
|
repository: {
|
|
branchName: input.branchName,
|
|
cwd: input.cwd,
|
|
gitActions: input.compact ? input.gitActions : null,
|
|
pullRequest: input.pullRequest
|
|
? { ...input.pullRequest, onOpen: input.onOpenPullRequest }
|
|
: null,
|
|
serverId: input.serverId,
|
|
workspaceId: input.workspaceId,
|
|
},
|
|
comparison: {
|
|
committedDescription: input.committedDescription,
|
|
diffMode: input.diffMode,
|
|
mode: input.mode,
|
|
selectedDiffStat: input.selectedDiffStat,
|
|
onSelectBase: input.onSelectBase,
|
|
onSelectUncommitted: input.onSelectUncommitted,
|
|
},
|
|
};
|
|
}
|
|
|
|
// Presentation resolves into these two capability models before rendering. The rows
|
|
// never infer which host or Changes presentation produced them.
|
|
function ChangesHeader({ compact, repository, comparison, sidebarSurface }: ChangesHeaderProps) {
|
|
if (comparison.mode.kind === "diff") {
|
|
return (
|
|
<ChangesDiffOnlyToolbar
|
|
compact={compact}
|
|
mode={comparison.mode}
|
|
sidebarSurface={sidebarSurface}
|
|
/>
|
|
);
|
|
}
|
|
return (
|
|
<View>
|
|
<ChangesRepositoryToolbar
|
|
compact={compact}
|
|
model={repository}
|
|
sidebarSurface={sidebarSurface}
|
|
/>
|
|
<ChangesComparisonToolbar
|
|
compact={compact}
|
|
model={comparison}
|
|
sidebarSurface={sidebarSurface}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
function ChangesDiffOnlyToolbar({
|
|
compact,
|
|
mode,
|
|
sidebarSurface,
|
|
}: {
|
|
compact: boolean;
|
|
mode: Extract<ChangesToolbarMode, { kind: "diff" }>;
|
|
sidebarSurface: boolean;
|
|
}) {
|
|
return (
|
|
<ChangesToolbarRow
|
|
compact={compact}
|
|
sidebarSurface={sidebarSurface}
|
|
testID="changes-header"
|
|
trailing="glyph"
|
|
>
|
|
<ChangesToolbarLeading />
|
|
<ChangesToolbarTrailing>
|
|
<ChangesToolbarActions mode={mode} compact={compact} />
|
|
</ChangesToolbarTrailing>
|
|
</ChangesToolbarRow>
|
|
);
|
|
}
|
|
|
|
function ChangesToolbarRow({
|
|
children,
|
|
compact,
|
|
sidebarSurface,
|
|
testID,
|
|
trailing,
|
|
}: {
|
|
children: ReactNode;
|
|
compact: boolean;
|
|
sidebarSurface: boolean;
|
|
testID: string;
|
|
/** What the row's last control paints, so it can pad to the shared trailing rail. */
|
|
trailing: ToolbarTrailingControl;
|
|
}) {
|
|
const toolbarStyle = useMemo(
|
|
() => [
|
|
styles.changesToolbar,
|
|
{ paddingRight: paneContentToolbarTrailingPadding(compact, trailing) },
|
|
sidebarSurface ? styles.changesToolbarSidebar : null,
|
|
],
|
|
[compact, sidebarSurface, trailing],
|
|
);
|
|
return (
|
|
<PaneContentToolbar style={toolbarStyle} testID={testID}>
|
|
{children}
|
|
</PaneContentToolbar>
|
|
);
|
|
}
|
|
|
|
function ChangesToolbarLeading({ children }: { children?: ReactNode }) {
|
|
return <View style={styles.changesToolbarIdentity}>{children}</View>;
|
|
}
|
|
|
|
function ChangesToolbarTrailing({ children }: { children: ReactNode }) {
|
|
return <ToolbarControls style={styles.changesToolbarControls}>{children}</ToolbarControls>;
|
|
}
|
|
|
|
function ChangesRepositoryToolbar({
|
|
compact,
|
|
model,
|
|
sidebarSurface,
|
|
}: {
|
|
compact: boolean;
|
|
model: ChangesRepositoryToolbarModel;
|
|
sidebarSurface: boolean;
|
|
}) {
|
|
return (
|
|
<ChangesToolbarRow
|
|
compact={compact}
|
|
sidebarSurface={sidebarSurface}
|
|
testID="changes-repository-header"
|
|
trailing={model.gitActions ? "framed" : "glyph"}
|
|
>
|
|
<ChangesToolbarLeading>
|
|
<BranchSwitcher
|
|
currentBranchName={model.branchName}
|
|
serverId={model.serverId}
|
|
workspaceId={model.workspaceId ?? model.cwd}
|
|
workspaceDirectory={model.cwd}
|
|
isGitCheckout
|
|
testID="changes-branch-switcher"
|
|
/>
|
|
</ChangesToolbarLeading>
|
|
<ChangesToolbarTrailing>
|
|
{model.pullRequest ? (
|
|
<>
|
|
<ChangesPullRequestLink model={model.pullRequest} />
|
|
<ChangesPullRequestExternalLink compact={compact} model={model.pullRequest} />
|
|
</>
|
|
) : null}
|
|
{model.gitActions ? <GitActionsSplitButton gitActions={model.gitActions} menuOnly /> : null}
|
|
</ChangesToolbarTrailing>
|
|
</ChangesToolbarRow>
|
|
);
|
|
}
|
|
|
|
function ChangesPullRequestLink({ model }: { model: ChangesPullRequestLinkModel }) {
|
|
const { t } = useTranslation();
|
|
const presentation = getForgePresentation(model.forge);
|
|
const label = `${presentation.numberPrefix}${model.number}`;
|
|
return (
|
|
<Tooltip delayDuration={300} enabledOnDesktop enabledOnMobile={false}>
|
|
<TooltipTrigger
|
|
testID="changes-open-pull-request"
|
|
accessibilityRole="button"
|
|
accessibilityLabel={`${t("panels.pullRequest.label")} ${label}`}
|
|
onPress={model.onOpen}
|
|
style={toolbarLabelTriggerStyle}
|
|
>
|
|
{(state) => {
|
|
const highlighted = isToolbarLabelTriggerHighlighted(state);
|
|
return (
|
|
<>
|
|
<ToolbarLabelTriggerIcon>
|
|
<PullRequestStateIcon state={model.state} size={14} strokeWidth={1.5} />
|
|
</ToolbarLabelTriggerIcon>
|
|
<Text style={toolbarLabelTriggerTextStyle(highlighted)}>{label}</Text>
|
|
</>
|
|
);
|
|
}}
|
|
</TooltipTrigger>
|
|
<TooltipContent side="bottom">
|
|
<Text style={styles.tooltipText}>{t("panels.pullRequest.label")}</Text>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
function ChangesPullRequestExternalLink({
|
|
compact,
|
|
model,
|
|
}: {
|
|
compact: boolean;
|
|
model: ChangesPullRequestLinkModel;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const presentation = getForgePresentation(model.forge);
|
|
const label = t("workspace.git.pr.actions.openOn", { brand: presentation.brandLabel });
|
|
const handlePress = useCallback(() => {
|
|
void openExternalUrl(model.url);
|
|
}, [model.url]);
|
|
return (
|
|
<ToolbarButton
|
|
compact={compact}
|
|
label={label}
|
|
onPress={handlePress}
|
|
testID="changes-open-pull-request-external"
|
|
>
|
|
<ThemedExternalLink
|
|
size={paneContentToolbarIconSize(compact)}
|
|
strokeWidth={1.5}
|
|
uniProps={extraMutedIconColorMapping}
|
|
/>
|
|
</ToolbarButton>
|
|
);
|
|
}
|
|
|
|
function ChangesComparisonToolbar({
|
|
compact,
|
|
model,
|
|
sidebarSurface,
|
|
}: {
|
|
compact: boolean;
|
|
model: ChangesComparisonToolbarModel;
|
|
sidebarSurface: boolean;
|
|
}) {
|
|
return (
|
|
<ChangesToolbarRow
|
|
compact={compact}
|
|
sidebarSurface={sidebarSurface}
|
|
testID="changes-header"
|
|
trailing="glyph"
|
|
>
|
|
<ChangesToolbarLeading>
|
|
<DiffModeMenu
|
|
diffMode={model.diffMode}
|
|
committedDescription={model.committedDescription}
|
|
onSelectUncommitted={model.onSelectUncommitted}
|
|
onSelectBase={model.onSelectBase}
|
|
/>
|
|
{model.selectedDiffStat ? (
|
|
<DiffStat
|
|
additions={model.selectedDiffStat.additions}
|
|
deletions={model.selectedDiffStat.deletions}
|
|
testID="changes-selected-diff-stat"
|
|
/>
|
|
) : null}
|
|
</ChangesToolbarLeading>
|
|
<ChangesToolbarTrailing>
|
|
<ChangesToolbarActions mode={model.mode} compact={compact} />
|
|
</ChangesToolbarTrailing>
|
|
</ChangesToolbarRow>
|
|
);
|
|
}
|
|
|
|
function ChangesToolbarActions({ mode, compact }: { mode: ChangesToolbarMode; compact: boolean }) {
|
|
if (mode.kind === "tree") {
|
|
return (
|
|
<>
|
|
{mode.refresh ? <ChangesRefreshButton refresh={mode.refresh} compact={compact} /> : null}
|
|
<ChangesOptionsMenu mode={mode} compact={compact} />
|
|
</>
|
|
);
|
|
}
|
|
if (mode.kind === "diff") {
|
|
return (
|
|
<>
|
|
{mode.refresh ? <ChangesRefreshButton refresh={mode.refresh} compact={compact} /> : null}
|
|
<ChangesDiffToolbar options={mode.options} compact={compact} />
|
|
</>
|
|
);
|
|
}
|
|
return (
|
|
<>
|
|
{mode.treeToggle ? (
|
|
<TreeRailToggle
|
|
visible={mode.treeToggle.visible}
|
|
testID="changes-toggle-tree"
|
|
onToggle={mode.treeToggle.onToggle}
|
|
/>
|
|
) : null}
|
|
{mode.refresh ? <ChangesRefreshButton refresh={mode.refresh} compact={compact} /> : null}
|
|
<ChangesOptionsMenu mode={mode} compact={compact} />
|
|
</>
|
|
);
|
|
}
|
|
|
|
function ChangesDiffToolbar({
|
|
options,
|
|
compact,
|
|
}: {
|
|
options: ChangesToolbarDiffOptions;
|
|
compact: boolean;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const iconSize = paneContentToolbarIconSize(compact);
|
|
const collapseLabel = t(
|
|
options.collapse?.allFilesCollapsed
|
|
? "workspace.git.diff.expandAllFiles"
|
|
: "workspace.git.diff.collapseAllFiles",
|
|
);
|
|
const whitespaceLabel = options.hideWhitespace
|
|
? t("workspace.git.diff.showWhitespace")
|
|
: t("workspace.git.diff.hideWhitespace");
|
|
const wrapLinesLabel = options.wrapLines
|
|
? t("workspace.git.diff.scrollLongLines")
|
|
: t("workspace.git.diff.wrapLongLines");
|
|
const layoutLabel =
|
|
options.layout?.value === "split"
|
|
? t("workspace.git.diff.switchToUnified")
|
|
: t("workspace.git.diff.switchToSplit");
|
|
return (
|
|
<>
|
|
{options.collapse ? (
|
|
<ToolbarButton
|
|
compact={compact}
|
|
label={collapseLabel}
|
|
testID="changes-toggle-collapse-all"
|
|
onPress={
|
|
options.collapse.allFilesCollapsed
|
|
? options.collapse.onExpandAll
|
|
: options.collapse.onCollapseAll
|
|
}
|
|
>
|
|
{options.collapse.allFilesCollapsed ? (
|
|
<ThemedListChevronsUpDown size={iconSize} uniProps={extraMutedIconColorMapping} />
|
|
) : (
|
|
<ThemedListChevronsDownUp size={iconSize} uniProps={extraMutedIconColorMapping} />
|
|
)}
|
|
</ToolbarButton>
|
|
) : null}
|
|
{options.layout ? (
|
|
<ToolbarButton
|
|
compact={compact}
|
|
label={layoutLabel}
|
|
selected={options.layout.value === "split"}
|
|
testID="changes-toggle-layout"
|
|
onPress={options.layout.onToggle}
|
|
>
|
|
<ThemedColumns2 size={iconSize} uniProps={extraMutedIconColorMapping} />
|
|
</ToolbarButton>
|
|
) : null}
|
|
<ToolbarButton
|
|
compact={compact}
|
|
label={whitespaceLabel}
|
|
selected={options.hideWhitespace}
|
|
testID="changes-toggle-whitespace"
|
|
onPress={options.onToggleHideWhitespace}
|
|
>
|
|
<ThemedPilcrow size={iconSize} uniProps={extraMutedIconColorMapping} />
|
|
</ToolbarButton>
|
|
<ToolbarButton
|
|
compact={compact}
|
|
label={wrapLinesLabel}
|
|
selected={options.wrapLines}
|
|
testID="changes-toggle-wrap-lines"
|
|
onPress={options.onToggleWrapLines}
|
|
>
|
|
<ThemedWrapText size={iconSize} uniProps={extraMutedIconColorMapping} />
|
|
</ToolbarButton>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function ChangesRefreshButton({
|
|
refresh,
|
|
compact,
|
|
}: {
|
|
refresh: ChangesToolbarRefreshAction;
|
|
compact: boolean;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const refreshLabel = refresh.isRefreshing
|
|
? t("workspace.git.diff.refreshing")
|
|
: t("workspace.git.diff.refresh");
|
|
return (
|
|
<ToolbarButton
|
|
label={refreshLabel}
|
|
compact={compact}
|
|
disabled={refresh.isRefreshing}
|
|
testID="changes-refresh"
|
|
onPress={refresh.onRefresh}
|
|
>
|
|
{refresh.isRefreshing ? (
|
|
<ThemedLoadingSpinner
|
|
size={paneContentToolbarIconSize(compact)}
|
|
uniProps={extraMutedIconColorMapping}
|
|
/>
|
|
) : (
|
|
<ThemedRotateCw
|
|
size={paneContentToolbarIconSize(compact)}
|
|
uniProps={extraMutedIconColorMapping}
|
|
/>
|
|
)}
|
|
</ToolbarButton>
|
|
);
|
|
}
|
|
|
|
type ChangesOptionsMenuMode = Extract<ChangesToolbarMode, { kind: "tree" | "combined" }>;
|
|
|
|
function ChangesOptionsMenu({ mode, compact }: { mode: ChangesOptionsMenuMode; compact: boolean }) {
|
|
const { t } = useTranslation();
|
|
const optionsLabel = t("workspace.git.diff.options");
|
|
const content =
|
|
mode.kind === "tree" ? (
|
|
<ChangesTreeOptions onOpenDiff={mode.onOpenDiff} inlineDiff={mode.inlineDiff} />
|
|
) : (
|
|
<>
|
|
<ChangesDiffOptions options={mode.options} />
|
|
{mode.inlineDiff ? (
|
|
<>
|
|
<DropdownMenuSeparator />
|
|
<ChangesInlineDiffOption toggle={mode.inlineDiff} />
|
|
</>
|
|
) : null}
|
|
</>
|
|
);
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<ToolbarButton
|
|
kind="menu"
|
|
label={optionsLabel}
|
|
compact={compact}
|
|
testID="changes-options-menu"
|
|
>
|
|
<ThemedMoreHorizontal
|
|
size={paneContentToolbarIconSize(compact)}
|
|
uniProps={extraMutedIconColorMapping}
|
|
/>
|
|
</ToolbarButton>
|
|
<DropdownMenuContent align="end" width={240} testID="changes-options-menu-content">
|
|
{content}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|
|
|
|
function ChangesTreeOptions({
|
|
onOpenDiff,
|
|
inlineDiff,
|
|
}: {
|
|
onOpenDiff: () => void;
|
|
inlineDiff: ChangesToolbarInlineDiffToggle | null;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<>
|
|
<DropdownMenuItem
|
|
leading={DIFF_OPTIONS_CHANGES_TAB_ICON}
|
|
testID="changes-open-tab"
|
|
onSelect={onOpenDiff}
|
|
>
|
|
{t("workspace.git.diff.openDiffTab")}
|
|
</DropdownMenuItem>
|
|
{inlineDiff ? (
|
|
<>
|
|
<DropdownMenuSeparator />
|
|
<ChangesInlineDiffOption toggle={inlineDiff} />
|
|
</>
|
|
) : null}
|
|
</>
|
|
);
|
|
}
|
|
|
|
function ChangesInlineDiffOption({ toggle }: { toggle: ChangesToolbarInlineDiffToggle }) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<DropdownMenuItem
|
|
selected={toggle.value}
|
|
testID="changes-toggle-inline-diff"
|
|
onSelect={toggle.onToggle}
|
|
>
|
|
{t("workspace.git.diff.inlineDiff")}
|
|
</DropdownMenuItem>
|
|
);
|
|
}
|
|
|
|
function ChangesDiffOptions({ options }: { options: ChangesToolbarDiffOptions }) {
|
|
const { t } = useTranslation();
|
|
const collapseLabel = t(
|
|
options.collapse?.allFilesCollapsed
|
|
? "workspace.git.diff.expandAllFiles"
|
|
: "workspace.git.diff.collapseAllFiles",
|
|
);
|
|
const whitespaceLabel = options.hideWhitespace
|
|
? t("workspace.git.diff.showWhitespace")
|
|
: t("workspace.git.diff.hideWhitespace");
|
|
const wrapLinesLabel = options.wrapLines
|
|
? t("workspace.git.diff.scrollLongLines")
|
|
: t("workspace.git.diff.wrapLongLines");
|
|
|
|
return (
|
|
<>
|
|
{options.collapse ? (
|
|
<>
|
|
<DropdownMenuItem
|
|
leading={
|
|
options.collapse.allFilesCollapsed
|
|
? DIFF_OPTIONS_EXPAND_ICON
|
|
: DIFF_OPTIONS_COLLAPSE_ICON
|
|
}
|
|
testID="changes-toggle-collapse-all"
|
|
onSelect={
|
|
options.collapse.allFilesCollapsed
|
|
? options.collapse.onExpandAll
|
|
: options.collapse.onCollapseAll
|
|
}
|
|
>
|
|
{collapseLabel}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
</>
|
|
) : null}
|
|
{options.layout ? (
|
|
<DropdownMenuItem
|
|
leading={DIFF_OPTIONS_SPLIT_ICON}
|
|
selected={options.layout.value === "split"}
|
|
testID="changes-toggle-layout"
|
|
onSelect={options.layout.onToggle}
|
|
>
|
|
{t("workspace.git.diff.split")}
|
|
</DropdownMenuItem>
|
|
) : null}
|
|
<DropdownMenuItem
|
|
leading={DIFF_OPTIONS_WHITESPACE_ICON}
|
|
selected={options.hideWhitespace}
|
|
testID="changes-toggle-whitespace"
|
|
onSelect={options.onToggleHideWhitespace}
|
|
>
|
|
{whitespaceLabel}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
leading={DIFF_OPTIONS_WRAP_ICON}
|
|
selected={options.wrapLines}
|
|
testID="changes-toggle-wrap-lines"
|
|
onSelect={options.onToggleWrapLines}
|
|
>
|
|
{wrapLinesLabel}
|
|
</DropdownMenuItem>
|
|
</>
|
|
);
|
|
}
|
|
|
|
const ThemedRotateCw = withUnistyles(RotateCw);
|
|
|
|
interface DiffBodyContentProps {
|
|
isStatusLoading: boolean;
|
|
statusErrorMessage: string | null;
|
|
notGit: boolean;
|
|
isDiffLoading: boolean;
|
|
diffErrorMessage: string | null;
|
|
diffTooLarge: boolean;
|
|
hasChanges: boolean;
|
|
emptyMessage: string;
|
|
emptyAction: ChangesEmptyAction | null;
|
|
children: ReactElement;
|
|
checkingRepositoryLabel: string;
|
|
notRepositoryLabel: string;
|
|
}
|
|
|
|
function DiffBodyContent({
|
|
isStatusLoading,
|
|
statusErrorMessage,
|
|
notGit,
|
|
isDiffLoading,
|
|
diffErrorMessage,
|
|
diffTooLarge,
|
|
hasChanges,
|
|
emptyMessage,
|
|
emptyAction,
|
|
children,
|
|
checkingRepositoryLabel,
|
|
notRepositoryLabel,
|
|
}: DiffBodyContentProps) {
|
|
if (isStatusLoading) {
|
|
return (
|
|
<View style={styles.loadingContainer}>
|
|
<ThemedLoadingSpinner size="large" uniProps={foregroundMutedIconColorMapping} />
|
|
<Text style={styles.loadingText}>{checkingRepositoryLabel}</Text>
|
|
</View>
|
|
);
|
|
}
|
|
if (statusErrorMessage) {
|
|
return (
|
|
<View style={styles.errorContainer}>
|
|
<Text style={styles.errorText}>{statusErrorMessage}</Text>
|
|
</View>
|
|
);
|
|
}
|
|
if (notGit) {
|
|
return (
|
|
<View style={styles.emptyContainer} testID="changes-not-git">
|
|
<Text style={styles.emptyText}>{notRepositoryLabel}</Text>
|
|
</View>
|
|
);
|
|
}
|
|
if (isDiffLoading) {
|
|
return (
|
|
<View style={styles.loadingContainer}>
|
|
<ThemedLoadingSpinner size="large" uniProps={foregroundMutedIconColorMapping} />
|
|
</View>
|
|
);
|
|
}
|
|
if (diffTooLarge) {
|
|
return <DiffTooLargeState />;
|
|
}
|
|
if (diffErrorMessage) {
|
|
return (
|
|
<View style={styles.errorContainer}>
|
|
<Text style={styles.errorText}>{diffErrorMessage}</Text>
|
|
</View>
|
|
);
|
|
}
|
|
if (!hasChanges) {
|
|
return (
|
|
<View style={styles.emptyContainer}>
|
|
<Text style={styles.emptyText}>{emptyMessage}</Text>
|
|
{emptyAction ? (
|
|
<Button
|
|
variant="ghost"
|
|
size="xs"
|
|
testID="changes-empty-switch-mode"
|
|
onPress={emptyAction.onPress}
|
|
>
|
|
{emptyAction.label}
|
|
</Button>
|
|
) : null}
|
|
</View>
|
|
);
|
|
}
|
|
return children;
|
|
}
|
|
|
|
function computeBaseRefLabel(baseRef: string | undefined, fallbackLabel: string): string {
|
|
if (!baseRef) return fallbackLabel;
|
|
const trimmed = baseRef.replace(/^refs\/(heads|remotes)\//, "").trim();
|
|
return trimmed.startsWith("origin/") ? trimmed.slice("origin/".length) : trimmed;
|
|
}
|
|
|
|
function computeCommittedDiffDescription(
|
|
branchLabel: string,
|
|
baseRefLabel: string,
|
|
): string | undefined {
|
|
if (!branchLabel || !baseRefLabel) {
|
|
return undefined;
|
|
}
|
|
return branchLabel === baseRefLabel ? undefined : `${branchLabel} -> ${baseRefLabel}`;
|
|
}
|
|
|
|
interface ChangesEmptyAction {
|
|
label: string;
|
|
onPress: () => void;
|
|
}
|
|
|
|
function computeChangesEmptyAction(input: {
|
|
hideWhitespace: boolean;
|
|
diffMode: "uncommitted" | "base";
|
|
status: CheckoutStatusPayload | null;
|
|
seeUncommittedLabel: string;
|
|
seeCommittedLabel: string;
|
|
selectUncommitted: () => void;
|
|
selectBase: () => void;
|
|
}): ChangesEmptyAction | null {
|
|
if (input.hideWhitespace || !input.status?.isGit) {
|
|
return null;
|
|
}
|
|
if (input.diffMode === "base" && input.status.isDirty) {
|
|
return { label: input.seeUncommittedLabel, onPress: input.selectUncommitted };
|
|
}
|
|
if (input.diffMode === "uncommitted" && (input.status.aheadBehind?.ahead ?? 0) > 0) {
|
|
return { label: input.seeCommittedLabel, onPress: input.selectBase };
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function computePrErrorMessage(
|
|
githubFeaturesEnabled: boolean,
|
|
prPayloadError: { message?: string } | null | undefined,
|
|
): string | null {
|
|
if (!githubFeaturesEnabled) return null;
|
|
return prPayloadError?.message ?? null;
|
|
}
|
|
|
|
// The precise setup step a workspace needs before its forge features work, or
|
|
// null when nothing is actionable (authenticated, or no forge remote at all).
|
|
type ForgeSetupAction = "install_cli" | "sign_in" | null;
|
|
|
|
// Drive the onboarding callout from the forge's auth state so the message names
|
|
// the exact next step (install the CLI vs sign in) for whichever forge backs the
|
|
// workspace — GitHub included. GitLab additionally requires the host to advertise
|
|
// GitLab support, matching the rest of the GitLab UI.
|
|
function computeForgeSetupAction(input: {
|
|
forge: Forge;
|
|
forgeProvidersSupported: boolean;
|
|
authState: ForgeAuthState | undefined;
|
|
}): ForgeSetupAction {
|
|
// A daemon without pluggable forge support can't operate any non-GitHub forge,
|
|
// so don't offer a setup action for one it can't drive.
|
|
if (input.forge !== "github" && !input.forgeProvidersSupported) {
|
|
return null;
|
|
}
|
|
switch (input.authState) {
|
|
case "cli_missing":
|
|
return "install_cli";
|
|
case "unauthenticated":
|
|
return "sign_in";
|
|
case "authenticated":
|
|
case "no_remote":
|
|
case "error":
|
|
return null;
|
|
default:
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function parseForgeHost(url: string | null | undefined): string | null {
|
|
return url ? (parseGitRemoteLocation(url)?.host ?? null) : null;
|
|
}
|
|
|
|
function buildForgeSetupMessage(input: {
|
|
action: ForgeSetupAction;
|
|
forge: Forge;
|
|
host: string | null;
|
|
t: TFunction;
|
|
}): string | null {
|
|
if (!input.action) {
|
|
return null;
|
|
}
|
|
const { brandLabel, signInCli } = getForgePresentation(input.forge);
|
|
// A forge with no known CLI (an unknown/third-party forge rendered neutrally)
|
|
// has no install/sign-in command to interpolate — show neutral guidance
|
|
// rather than the GitLab-specific callout or a null command.
|
|
if (signInCli === null) {
|
|
return input.t("workspace.git.forgeSetup.generic", { brand: brandLabel });
|
|
}
|
|
if (input.action === "install_cli") {
|
|
return input.t("workspace.git.forgeSetup.installCli", { cli: signInCli, brand: brandLabel });
|
|
}
|
|
const command = buildForgeSignInCommand(input.forge, input.host);
|
|
return input.t("workspace.git.forgeSetup.signIn", { command, brand: brandLabel });
|
|
}
|
|
|
|
function buildToggleButtonStyle(
|
|
selected: boolean,
|
|
baseStyles?: StyleProp<ViewStyle> | StyleProp<ViewStyle>[],
|
|
isMobile = false,
|
|
): PressableStyleFn {
|
|
return (state) => [baseStyles, paneContentToolbarIconButtonStyle(state, selected, isMobile)];
|
|
}
|
|
|
|
interface JumpToFileVisibility {
|
|
isCompact: boolean;
|
|
presentation: ChangesPresentation;
|
|
hasChanges: boolean;
|
|
isDiffLoading: boolean;
|
|
}
|
|
|
|
/**
|
|
* The room the floating Jump to file action needs over the diff, and zero where
|
|
* it is not offered. Compact users never see the tree rail, so the diff is their
|
|
* only view of what changed; the tree and diff presentations are already halves
|
|
* of a desktop split.
|
|
*/
|
|
function jumpToFileClearance(visibility: JumpToFileVisibility): number {
|
|
if (!visibility.isCompact || visibility.presentation !== "combined") return 0;
|
|
if (!visibility.hasChanges || visibility.isDiffLoading) return 0;
|
|
return JUMP_TO_FILE_CLEARANCE;
|
|
}
|
|
|
|
function ChangesTreeRail({
|
|
shown,
|
|
children,
|
|
files,
|
|
mode,
|
|
onSelectFile,
|
|
treeWidth,
|
|
onTreeWidthChange,
|
|
collapsedFolderPaths,
|
|
onCollapsedFolderPathsChange,
|
|
}: {
|
|
shown: boolean;
|
|
children: ReactElement;
|
|
files: ParsedDiffFile[];
|
|
mode: WorkingDiffMode;
|
|
onSelectFile: (path: string) => void;
|
|
treeWidth?: number;
|
|
onTreeWidthChange: (width: number) => void;
|
|
collapsedFolderPaths: string[];
|
|
onCollapsedFolderPathsChange: (paths: string[]) => void;
|
|
}) {
|
|
if (!shown) return children;
|
|
return (
|
|
<TreeRail testID="changes-tree-rail" width={treeWidth ?? 220} onWidthChange={onTreeWidthChange}>
|
|
{children}
|
|
<ChangedFilesTree
|
|
files={files}
|
|
mode={mode}
|
|
onSelectFile={onSelectFile}
|
|
collapsedFolderPaths={collapsedFolderPaths}
|
|
onCollapsedFolderPathsChange={onCollapsedFolderPathsChange}
|
|
/>
|
|
</TreeRail>
|
|
);
|
|
}
|
|
|
|
function ChangesBody({
|
|
presentation,
|
|
children,
|
|
desktopTreeVisible,
|
|
isMobile,
|
|
files,
|
|
mode,
|
|
onSelectFile,
|
|
treeWidth,
|
|
onTreeWidthChange,
|
|
collapsedFolderPaths,
|
|
onCollapsedFolderPathsChange,
|
|
}: {
|
|
presentation: ChangesPresentation;
|
|
children: ReactElement;
|
|
desktopTreeVisible: boolean;
|
|
isMobile: boolean;
|
|
files: ParsedDiffFile[];
|
|
mode: WorkingDiffMode;
|
|
onSelectFile: (path: string) => void;
|
|
treeWidth?: number;
|
|
onTreeWidthChange: (width: number) => void;
|
|
collapsedFolderPaths: string[];
|
|
onCollapsedFolderPathsChange: (paths: string[]) => void;
|
|
}) {
|
|
if (presentation === "tree") {
|
|
if (files.length === 0) return children;
|
|
return (
|
|
<ChangedFilesTree
|
|
files={files}
|
|
mode={mode}
|
|
onSelectFile={onSelectFile}
|
|
collapsedFolderPaths={collapsedFolderPaths}
|
|
onCollapsedFolderPathsChange={onCollapsedFolderPathsChange}
|
|
/>
|
|
);
|
|
}
|
|
if (presentation === "diff") return children;
|
|
return (
|
|
<ChangesTreeRail
|
|
shown={desktopTreeVisible && !isMobile && files.length > 0}
|
|
files={files}
|
|
mode={mode}
|
|
onSelectFile={onSelectFile}
|
|
treeWidth={treeWidth}
|
|
onTreeWidthChange={onTreeWidthChange}
|
|
collapsedFolderPaths={collapsedFolderPaths}
|
|
onCollapsedFolderPathsChange={onCollapsedFolderPathsChange}
|
|
>
|
|
{children}
|
|
</ChangesTreeRail>
|
|
);
|
|
}
|
|
|
|
function ChangesCommits({
|
|
presentation,
|
|
serverId,
|
|
cwd,
|
|
collapsed,
|
|
onCommitPress,
|
|
onCollapsedChange,
|
|
}: {
|
|
presentation: ChangesPresentation;
|
|
serverId: string;
|
|
cwd: string;
|
|
collapsed: boolean;
|
|
onCommitPress: (sha: string) => void;
|
|
onCollapsedChange: (collapsed: boolean) => void;
|
|
}) {
|
|
if (presentation === "diff") return null;
|
|
return (
|
|
<CommitsSection
|
|
serverId={serverId}
|
|
cwd={cwd}
|
|
onCommitPress={onCommitPress}
|
|
collapsed={collapsed}
|
|
onCollapsedChange={onCollapsedChange}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function useDiffTabNavigation({
|
|
serverId,
|
|
workspaceId,
|
|
cwd,
|
|
isMobile,
|
|
pullRequestOpenLocation,
|
|
}: {
|
|
serverId: string;
|
|
workspaceId?: string | null;
|
|
cwd: string;
|
|
isMobile: boolean;
|
|
pullRequestOpenLocation: PullRequestOpenLocation;
|
|
}) {
|
|
const openTab = useWorkspaceLayoutStore((state) => state.openTab);
|
|
const openWorkspaceTab = useCallback(
|
|
(workspaceKey: string, target: WorkspaceTabTarget, placement?: WorkspaceTabPlacement) =>
|
|
openTab({ workspaceKey, target, intent: "reveal", placement }),
|
|
[openTab],
|
|
);
|
|
const persistenceKey = useMemo(
|
|
() => buildWorkspaceTabPersistenceKey({ serverId, workspaceId: workspaceId ?? cwd }),
|
|
[cwd, serverId, workspaceId],
|
|
);
|
|
const openDiff = useCallback(() => {
|
|
if (!persistenceKey || isMobile) {
|
|
return;
|
|
}
|
|
openWorkspaceTab(persistenceKey, { kind: "working_diff" }, FOCUSED_PANE_PLACEMENT);
|
|
}, [isMobile, openWorkspaceTab, persistenceKey]);
|
|
const openCommit = useCallback(
|
|
(sha: string) => {
|
|
if (persistenceKey) {
|
|
openWorkspaceTab(persistenceKey, { kind: "commit_diff", sha }, FOCUSED_PANE_PLACEMENT);
|
|
}
|
|
},
|
|
[openWorkspaceTab, persistenceKey],
|
|
);
|
|
const openPullRequest = useCallback(() => {
|
|
if (!persistenceKey) return;
|
|
openWorkspacePullRequest({
|
|
isCompact: isMobile,
|
|
workspaceKey: persistenceKey,
|
|
checkout: { serverId, cwd, isGit: true },
|
|
destination: pullRequestOpenLocation,
|
|
});
|
|
}, [cwd, isMobile, persistenceKey, pullRequestOpenLocation, serverId]);
|
|
return {
|
|
openDiff,
|
|
openCommit,
|
|
openPullRequest,
|
|
};
|
|
}
|
|
|
|
export function ChangesSurface({
|
|
serverId,
|
|
workspaceId,
|
|
cwd,
|
|
enabled,
|
|
presentation = "combined",
|
|
focusPath,
|
|
focusRequestId,
|
|
onOpenFile,
|
|
onOpenToSide,
|
|
onSelectDiffFile,
|
|
onAddToChat,
|
|
state: changesState,
|
|
onStateChange,
|
|
}: ChangesSurfaceProps) {
|
|
const { settings: appSettings } = useAppSettings();
|
|
const { preferences, updatePreferences } = useChangesPreferences();
|
|
const { t } = useTranslation();
|
|
const isMobile = useIsCompactFormFactor();
|
|
const canUseSplitLayout = isWeb && !isMobile;
|
|
const instanceState = changesState ?? defaultChangesState;
|
|
const updateState = onStateChange ?? noopStateChange;
|
|
const wrapLines = preferences.wrapLines;
|
|
const desktopTreeVisible = instanceState.treeVisible;
|
|
const effectiveLayout = resolveDiffLayout(preferences.layout, canUseSplitLayout);
|
|
const collapsedFilePaths = instanceState.collapsedFilePaths;
|
|
const updateCollapsedFilePaths = useCallback(
|
|
(paths: string[]) => updateState({ ...instanceState, collapsedFilePaths: paths }),
|
|
[instanceState, updateState],
|
|
);
|
|
const updateCollapsedFolderPaths = useCallback(
|
|
(paths: string[]) => updateState({ ...instanceState, collapsedFolderPaths: paths }),
|
|
[instanceState, updateState],
|
|
);
|
|
const collapseState = useMemo(
|
|
() => ({ paths: collapsedFilePaths, onChange: updateCollapsedFilePaths }),
|
|
[collapsedFilePaths, updateCollapsedFilePaths],
|
|
);
|
|
|
|
const handleToggleWrapLines = useCallback(() => {
|
|
void updatePreferences({ wrapLines: !wrapLines });
|
|
}, [updatePreferences, wrapLines]);
|
|
|
|
const handleToggleHideWhitespace = useCallback(() => {
|
|
void updatePreferences({ hideWhitespace: !preferences.hideWhitespace });
|
|
}, [preferences.hideWhitespace, updatePreferences]);
|
|
|
|
const handleToggleInlineDiff = useCallback(() => {
|
|
void updatePreferences({ inlineDiff: !preferences.inlineDiff });
|
|
}, [preferences.inlineDiff, updatePreferences]);
|
|
|
|
const handleToggleLayout = useCallback(() => {
|
|
const layout = preferences.layout === "unified" ? "split" : "unified";
|
|
void updatePreferences({ layout });
|
|
}, [preferences.layout, updatePreferences]);
|
|
const codeFontSize = appSettings.codeFontSize;
|
|
|
|
const toast = useToast();
|
|
const isLocalDaemon = useIsLocalDaemon(serverId);
|
|
const { targets: desktopOpenTargets } = useDesktopOpenTargets({
|
|
isLocalExecution: isLocalDaemon,
|
|
});
|
|
const fileManagerTarget = desktopOpenTargets.find((target) => target.kind === "file-manager");
|
|
const {
|
|
openDiff: handleOpenDiff,
|
|
openCommit: handleCommitPress,
|
|
openPullRequest: handleOpenPullRequest,
|
|
} = useDiffTabNavigation({
|
|
serverId,
|
|
workspaceId,
|
|
cwd,
|
|
isMobile,
|
|
pullRequestOpenLocation: appSettings.pullRequestOpenLocation,
|
|
});
|
|
const refreshSupported = useSessionStore(
|
|
(s) => s.sessions[serverId]?.serverInfo?.features?.checkoutRefresh === true,
|
|
);
|
|
const client = useSessionStore((state) => state.sessions[serverId]?.client);
|
|
// COMPAT(fsEntryDuplicate): added in v0.3.0, remove gate after 2027-02-09.
|
|
const fsEntryDuplicateEnabled = useSessionStore(
|
|
(state) => state.sessions[serverId]?.serverInfo?.features?.fsEntryDuplicate === true,
|
|
);
|
|
const runRefresh = useCheckoutGitActionsStore((s) => s.refresh);
|
|
const isRefreshing =
|
|
useCheckoutGitActionsStore((s) => s.getStatus({ serverId, cwd, actionId: "refresh" })) ===
|
|
"pending";
|
|
|
|
const handleRefresh = useCallback(() => {
|
|
if (isRefreshing) {
|
|
return;
|
|
}
|
|
void runRefresh({ serverId, cwd }).catch((error) => {
|
|
toast.error(error instanceof Error ? error.message : t("workspace.git.diff.failedRefresh"));
|
|
});
|
|
}, [cwd, isRefreshing, runRefresh, serverId, t, toast]);
|
|
|
|
const {
|
|
status,
|
|
isStatusLoading,
|
|
isGit,
|
|
notGit,
|
|
statusErrorMessage,
|
|
baseRef,
|
|
currentBranchName,
|
|
diffMode,
|
|
selectUncommitted: handleSelectUncommitted,
|
|
selectBase: handleSelectBase,
|
|
files,
|
|
diffPayloadError,
|
|
diffTooLarge,
|
|
isDiffLoading,
|
|
reviewActions,
|
|
reviewAttachment,
|
|
} = useWorkingDiff({
|
|
serverId,
|
|
workspaceId: workspaceId ?? undefined,
|
|
cwd,
|
|
ignoreWhitespace: preferences.hideWhitespace,
|
|
enabled: enabled !== false,
|
|
});
|
|
usePublishWorkingDiffAttachment({
|
|
serverId,
|
|
workspaceId: workspaceId ?? undefined,
|
|
cwd,
|
|
attachment: reviewAttachment,
|
|
enabled: true,
|
|
});
|
|
const {
|
|
status: pullRequestStatus,
|
|
githubFeaturesEnabled,
|
|
forge,
|
|
authState,
|
|
payloadError: prPayloadError,
|
|
} = useCheckoutPrStatusQuery({
|
|
serverId,
|
|
cwd,
|
|
enabled: isGit,
|
|
});
|
|
const forgeProvidersSupported = useSessionStore(
|
|
(s) => s.sessions[serverId]?.serverInfo?.features?.forgeProviders === true,
|
|
);
|
|
const forgeSetupAction = computeForgeSetupAction({
|
|
forge,
|
|
forgeProvidersSupported,
|
|
authState,
|
|
});
|
|
const forgeSetupMessage = useMemo(
|
|
() =>
|
|
buildForgeSetupMessage({
|
|
action: forgeSetupAction,
|
|
forge,
|
|
host: parseForgeHost(status?.remoteUrl),
|
|
t,
|
|
}),
|
|
[forgeSetupAction, forge, status?.remoteUrl, t],
|
|
);
|
|
const handleToggleDesktopTree = useCallback(() => {
|
|
updateState({ ...instanceState, treeVisible: !desktopTreeVisible });
|
|
}, [desktopTreeVisible, instanceState, updateState]);
|
|
const handleCommitsCollapsedChange = useCallback(
|
|
(commitsCollapsed: boolean) => updateState({ ...instanceState, commitsCollapsed }),
|
|
[instanceState, updateState],
|
|
);
|
|
const handleChangesTreeWidth = useCallback(
|
|
(treeWidth: number) => updateState({ ...instanceState, treeWidth }),
|
|
[instanceState, updateState],
|
|
);
|
|
const sharedDisplayPreferences = useMemo(
|
|
() => ({
|
|
layout: effectiveLayout,
|
|
wrapLines,
|
|
codeFontSize,
|
|
monoFontFamily: appSettings.monoFontFamily,
|
|
}),
|
|
[appSettings.monoFontFamily, codeFontSize, effectiveLayout, wrapLines],
|
|
);
|
|
const downloadFile = useFileDownload({ serverId, workspaceId, workspaceRoot: cwd });
|
|
const handleCopyPath = useCallback(
|
|
(path: string) => {
|
|
void Clipboard.setStringAsync(
|
|
buildAbsoluteExplorerPath({ workspaceRoot: cwd, entryPath: path }),
|
|
);
|
|
},
|
|
[cwd],
|
|
);
|
|
const handleCopyRelativePath = useCallback((path: string) => {
|
|
void Clipboard.setStringAsync(path);
|
|
}, []);
|
|
const handleRevealPath = useCallback(
|
|
async (path: string) => {
|
|
if (!fileManagerTarget) {
|
|
return;
|
|
}
|
|
try {
|
|
await openDesktopTarget({
|
|
editorId: fileManagerTarget.id,
|
|
workspacePath: cwd,
|
|
filePath: buildAbsoluteExplorerPath({ workspaceRoot: cwd, entryPath: path }),
|
|
});
|
|
} catch (cause) {
|
|
toast.error(
|
|
cause instanceof Error ? cause.message : t("workspace.fileExplorer.errors.revealFailed"),
|
|
);
|
|
}
|
|
},
|
|
[cwd, fileManagerTarget, t, toast],
|
|
);
|
|
const handleDownloadPath = useCallback(
|
|
(path: string) => {
|
|
downloadFile({ fileName: path.split("/").pop() ?? path, path });
|
|
},
|
|
[downloadFile],
|
|
);
|
|
const handleDuplicatePath = useCallback(
|
|
async (path: string) => {
|
|
if (!client) {
|
|
return;
|
|
}
|
|
try {
|
|
const payload = await client.duplicateFileEntry({ cwd, path });
|
|
if (!payload.success) {
|
|
toast.error(payload.error ?? t("workspace.fileExplorer.errors.duplicateFailed"));
|
|
}
|
|
} catch (cause) {
|
|
toast.error(cause instanceof Error ? cause.message : String(cause));
|
|
}
|
|
},
|
|
[client, cwd, t, toast],
|
|
);
|
|
const onRevertPath = useDiscardChangesAction({ serverId, cwd, diffMode });
|
|
const [localFocusRequest, setLocalFocusRequest] = useState<{
|
|
path: string;
|
|
revision: number;
|
|
} | null>(null);
|
|
const externalFocusRequest = useMemo(
|
|
() => (focusPath ? { path: focusPath, revision: focusRequestId ?? 0 } : null),
|
|
[focusPath, focusRequestId],
|
|
);
|
|
const documentFocusRequest =
|
|
localFocusRequest &&
|
|
(!externalFocusRequest || localFocusRequest.revision >= externalFocusRequest.revision)
|
|
? localFocusRequest
|
|
: externalFocusRequest;
|
|
const handleSelectTreeFile = useCallback(
|
|
(path: string) => {
|
|
if (presentation === "tree" && onSelectDiffFile) {
|
|
onSelectDiffFile(path);
|
|
return;
|
|
}
|
|
setLocalFocusRequest((current) => ({
|
|
path,
|
|
revision: Math.max(Date.now(), (current?.revision ?? 0) + 1),
|
|
}));
|
|
},
|
|
[onSelectDiffFile, presentation],
|
|
);
|
|
const workingMode = useMemo(
|
|
() => ({
|
|
kind: "working" as const,
|
|
reviewActions,
|
|
focusPath: documentFocusRequest?.path,
|
|
focusRequestId: documentFocusRequest?.revision,
|
|
workspaceFileDragScope: workspaceId ? { serverId, workspaceId } : undefined,
|
|
onOpenFile,
|
|
onOpenToSide,
|
|
onAddToChat,
|
|
onCopyPath: handleCopyPath,
|
|
onCopyRelativePath: handleCopyRelativePath,
|
|
onReveal: fileManagerTarget ? handleRevealPath : undefined,
|
|
revealTargetName: fileManagerTarget?.label,
|
|
onDownload: handleDownloadPath,
|
|
onDuplicate: fsEntryDuplicateEnabled ? handleDuplicatePath : undefined,
|
|
onRevert: onRevertPath,
|
|
}),
|
|
[
|
|
reviewActions,
|
|
documentFocusRequest?.path,
|
|
documentFocusRequest?.revision,
|
|
serverId,
|
|
workspaceId,
|
|
onOpenFile,
|
|
onOpenToSide,
|
|
onAddToChat,
|
|
handleCopyPath,
|
|
handleCopyRelativePath,
|
|
handleDownloadPath,
|
|
handleDuplicatePath,
|
|
handleRevealPath,
|
|
fileManagerTarget,
|
|
fsEntryDuplicateEnabled,
|
|
onRevertPath,
|
|
],
|
|
);
|
|
|
|
const hasChanges = files.length > 0;
|
|
const jumpToFileInset = jumpToFileClearance({
|
|
isCompact: isMobile,
|
|
presentation,
|
|
hasChanges,
|
|
isDiffLoading,
|
|
});
|
|
const showJumpToFile = jumpToFileInset > 0;
|
|
const selectedDiffStat = useMemo(
|
|
() => computeSelectedDiffStat(files, isDiffLoading),
|
|
[files, isDiffLoading],
|
|
);
|
|
const allFilesCollapsed =
|
|
hasChanges && files.every((file) => collapsedFilePaths.includes(file.path));
|
|
const handleCollapseAllFiles = useCallback(
|
|
() => updateCollapsedFilePaths(files.map((file) => file.path)),
|
|
[files, updateCollapsedFilePaths],
|
|
);
|
|
const handleExpandAllFiles = useCallback(
|
|
() => updateCollapsedFilePaths([]),
|
|
[updateCollapsedFilePaths],
|
|
);
|
|
const diffErrorMessage = diffPayloadError?.message ?? null;
|
|
const prErrorMessage = computePrErrorMessage(githubFeaturesEnabled, prPayloadError);
|
|
const baseRefLabel = useMemo(
|
|
() => computeBaseRefLabel(baseRef, t("workspace.git.diff.base")),
|
|
[baseRef, t],
|
|
);
|
|
const { gitActions, branchLabel } = useGitActions({
|
|
serverId,
|
|
cwd,
|
|
icons: GIT_ACTION_ICONS,
|
|
});
|
|
const committedDiffDescription = useMemo(
|
|
() => computeCommittedDiffDescription(branchLabel, baseRefLabel),
|
|
[baseRefLabel, branchLabel],
|
|
);
|
|
const emptyMessage = t("diffViewer.empty");
|
|
const emptyAction = computeChangesEmptyAction({
|
|
hideWhitespace: preferences.hideWhitespace,
|
|
diffMode,
|
|
status,
|
|
seeUncommittedLabel: t("workspace.git.diff.seeUncommittedChanges"),
|
|
seeCommittedLabel: t("workspace.git.diff.seeCommittedChanges"),
|
|
selectUncommitted: handleSelectUncommitted,
|
|
selectBase: handleSelectBase,
|
|
});
|
|
|
|
const diffContent: ReactElement = (
|
|
<DiffBodyContent
|
|
isStatusLoading={isStatusLoading}
|
|
statusErrorMessage={statusErrorMessage}
|
|
notGit={notGit}
|
|
isDiffLoading={isDiffLoading}
|
|
diffErrorMessage={diffErrorMessage}
|
|
diffTooLarge={diffTooLarge}
|
|
hasChanges={hasChanges}
|
|
emptyMessage={emptyMessage}
|
|
emptyAction={emptyAction}
|
|
checkingRepositoryLabel={t("workspace.git.diff.checkingRepository")}
|
|
notRepositoryLabel={t("workspace.git.diff.notRepository")}
|
|
>
|
|
<DiffDocument
|
|
files={files}
|
|
contentInsetBottom={jumpToFileInset}
|
|
collapseState={collapseState}
|
|
displayPreferences={sharedDisplayPreferences}
|
|
mode={workingMode}
|
|
/>
|
|
</DiffBodyContent>
|
|
);
|
|
const bodyContent = (
|
|
<ChangesBody
|
|
presentation={presentation}
|
|
desktopTreeVisible={desktopTreeVisible}
|
|
isMobile={isMobile}
|
|
files={files}
|
|
mode={workingMode}
|
|
onSelectFile={handleSelectTreeFile}
|
|
treeWidth={instanceState.treeWidth}
|
|
onTreeWidthChange={handleChangesTreeWidth}
|
|
collapsedFolderPaths={instanceState.collapsedFolderPaths}
|
|
onCollapsedFolderPathsChange={updateCollapsedFolderPaths}
|
|
>
|
|
{diffContent}
|
|
</ChangesBody>
|
|
);
|
|
const toolbarMode = useMemo(
|
|
() =>
|
|
buildChangesToolbarMode({
|
|
presentation,
|
|
compact: isMobile,
|
|
hasChanges,
|
|
canUseSplitLayout,
|
|
refreshSupported,
|
|
isRefreshing,
|
|
layout: preferences.layout,
|
|
hideWhitespace: preferences.hideWhitespace,
|
|
wrapLines,
|
|
treeVisible: desktopTreeVisible,
|
|
onOpenDiff: handleOpenDiff,
|
|
inlineDiff: !isMobile
|
|
? { value: preferences.inlineDiff, onToggle: handleToggleInlineDiff }
|
|
: null,
|
|
onRefresh: handleRefresh,
|
|
onCollapseAll: handleCollapseAllFiles,
|
|
onExpandAll: handleExpandAllFiles,
|
|
allFilesCollapsed,
|
|
onToggleLayout: handleToggleLayout,
|
|
onToggleHideWhitespace: handleToggleHideWhitespace,
|
|
onToggleWrapLines: handleToggleWrapLines,
|
|
onToggleTree: handleToggleDesktopTree,
|
|
}),
|
|
[
|
|
allFilesCollapsed,
|
|
canUseSplitLayout,
|
|
desktopTreeVisible,
|
|
handleCollapseAllFiles,
|
|
handleExpandAllFiles,
|
|
handleOpenDiff,
|
|
handleToggleInlineDiff,
|
|
handleRefresh,
|
|
handleToggleDesktopTree,
|
|
handleToggleHideWhitespace,
|
|
handleToggleLayout,
|
|
handleToggleWrapLines,
|
|
hasChanges,
|
|
preferences.hideWhitespace,
|
|
preferences.inlineDiff,
|
|
preferences.layout,
|
|
isMobile,
|
|
isRefreshing,
|
|
presentation,
|
|
refreshSupported,
|
|
wrapLines,
|
|
],
|
|
);
|
|
const changesHeaderModel = useMemo(
|
|
() =>
|
|
buildChangesHeaderModel({
|
|
branchName: currentBranchName,
|
|
committedDescription: committedDiffDescription,
|
|
compact: isMobile,
|
|
cwd,
|
|
diffMode,
|
|
gitActions,
|
|
mode: toolbarMode,
|
|
onOpenPullRequest: handleOpenPullRequest,
|
|
onSelectBase: handleSelectBase,
|
|
onSelectUncommitted: handleSelectUncommitted,
|
|
pullRequest: selectPrHintFromStatus(pullRequestStatus, forge),
|
|
selectedDiffStat,
|
|
serverId,
|
|
workspaceId,
|
|
}),
|
|
[
|
|
committedDiffDescription,
|
|
currentBranchName,
|
|
cwd,
|
|
diffMode,
|
|
gitActions,
|
|
handleOpenPullRequest,
|
|
handleSelectBase,
|
|
handleSelectUncommitted,
|
|
isMobile,
|
|
forge,
|
|
pullRequestStatus,
|
|
selectedDiffStat,
|
|
serverId,
|
|
toolbarMode,
|
|
workspaceId,
|
|
],
|
|
);
|
|
|
|
return (
|
|
<View
|
|
{...{
|
|
onContextMenu: (event: { preventDefault?: () => void }) => event.preventDefault?.(),
|
|
}}
|
|
style={styles.container}
|
|
>
|
|
{isGit ? (
|
|
<ChangesHeader
|
|
compact={isMobile}
|
|
repository={changesHeaderModel.repository}
|
|
comparison={changesHeaderModel.comparison}
|
|
sidebarSurface={presentation === "tree"}
|
|
/>
|
|
) : null}
|
|
|
|
{forgeSetupMessage ? (
|
|
<View style={styles.forgeSetupCallout} testID="forge-setup-callout">
|
|
<Text style={styles.forgeSetupCalloutText}>{forgeSetupMessage}</Text>
|
|
</View>
|
|
) : null}
|
|
|
|
{prErrorMessage ? <Text style={styles.actionErrorText}>{prErrorMessage}</Text> : null}
|
|
|
|
<View style={styles.diffContainer}>
|
|
{bodyContent}
|
|
{showJumpToFile ? (
|
|
<JumpToFile files={files} mode={workingMode} onSelectFile={handleSelectTreeFile} />
|
|
) : null}
|
|
</View>
|
|
|
|
<ChangesCommits
|
|
presentation={presentation}
|
|
serverId={serverId}
|
|
cwd={cwd}
|
|
onCommitPress={handleCommitPress}
|
|
collapsed={instanceState.commitsCollapsed}
|
|
onCollapsedChange={handleCommitsCollapsedChange}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create((theme) => ({
|
|
container: {
|
|
flex: 1,
|
|
minHeight: 0,
|
|
},
|
|
changesToolbar: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: theme.spacing[2],
|
|
paddingLeft: theme.spacing[2],
|
|
},
|
|
changesToolbarSidebar: {
|
|
backgroundColor: theme.colors.surfaceSidebar,
|
|
},
|
|
changesToolbarIdentity: {
|
|
flex: 1,
|
|
minWidth: 0,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: theme.spacing[1],
|
|
},
|
|
changesToolbarControls: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "flex-end",
|
|
flexShrink: 0,
|
|
},
|
|
diffStatusIconHidden: {
|
|
opacity: 0,
|
|
},
|
|
actionErrorText: {
|
|
paddingHorizontal: theme.spacing[3],
|
|
paddingBottom: theme.spacing[1],
|
|
fontSize: theme.fontSize.sm,
|
|
color: theme.colors.destructive,
|
|
},
|
|
forgeSetupCallout: {
|
|
marginHorizontal: theme.spacing[3],
|
|
marginBottom: theme.spacing[2],
|
|
paddingHorizontal: theme.spacing[3],
|
|
paddingVertical: theme.spacing[2],
|
|
borderWidth: 1,
|
|
borderColor: theme.colors.border,
|
|
borderRadius: theme.borderRadius.md,
|
|
backgroundColor: theme.colors.surface1,
|
|
},
|
|
forgeSetupCalloutText: {
|
|
fontSize: theme.fontSize.sm,
|
|
color: theme.colors.foregroundMuted,
|
|
},
|
|
diffContainer: {
|
|
flex: 1,
|
|
minHeight: 0,
|
|
position: "relative",
|
|
},
|
|
scrollContainer: {
|
|
flex: 1,
|
|
minHeight: 0,
|
|
position: "relative",
|
|
},
|
|
loadingContainer: {
|
|
flex: 1,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
paddingTop: theme.spacing[16],
|
|
gap: theme.spacing[4],
|
|
},
|
|
loadingText: {
|
|
fontSize: theme.fontSize.base,
|
|
color: theme.colors.foregroundMuted,
|
|
},
|
|
errorContainer: {
|
|
flex: 1,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
paddingTop: theme.spacing[16],
|
|
paddingHorizontal: theme.spacing[6],
|
|
},
|
|
errorText: {
|
|
fontSize: theme.fontSize.base,
|
|
color: theme.colors.destructive,
|
|
textAlign: "center",
|
|
},
|
|
emptyContainer: {
|
|
flex: 1,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
paddingTop: theme.spacing[16],
|
|
gap: theme.spacing[2],
|
|
},
|
|
emptyText: {
|
|
fontSize: theme.fontSize.base,
|
|
color: theme.colors.foregroundMuted,
|
|
},
|
|
tooltipText: {
|
|
fontSize: theme.fontSize.sm,
|
|
color: theme.colors.foreground,
|
|
},
|
|
}));
|