mirror of
https://github.com/getpaseo/paseo.git
synced 2026-10-27 19:52:49 +00:00
Mohamed Boudra
b26b9234c0
* feat(review): edit compact diff comments in a sheet * feat(review): send diff feedback to workspace agents Send saved reviews from the diff while retaining file navigation and unrelated composer drafts. Clear acknowledged versions only so comments edited or added during submission remain available. * fix(review): preserve drafts and coordinate feedback across surfaces Share pending submission ownership by draft while keeping recipient menus local. Retain editable text across presentation changes and acknowledgement, and reserve safe-area clearance for floating actions. * fix(review): center a small primary feedback button on desktop * fix(review): restore focus to feedback button after closing menu
2075 lines
61 KiB
TypeScript
2075 lines
61 KiB
TypeScript
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
import { floatingActionsClearance } from "@/components/ui/floating-action-button";
|
|
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 { ReviewCommentSheet, ReviewFeedbackAction } from "@/review";
|
|
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,
|
|
reviewFeedback,
|
|
} = useWorkingDiff({
|
|
presentation,
|
|
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 { bottom: bottomInset } = useSafeAreaInsets();
|
|
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 = (
|
|
<View style={styles.diffContainer}>
|
|
<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={floatingActionsClearance(
|
|
[jumpToFileInset, reviewFeedback.clearance],
|
|
bottomInset,
|
|
)}
|
|
collapseState={collapseState}
|
|
displayPreferences={sharedDisplayPreferences}
|
|
mode={workingMode}
|
|
/>
|
|
</DiffBodyContent>
|
|
<ReviewFeedbackAction
|
|
bottomOffset={jumpToFileInset}
|
|
enabled={enabled}
|
|
hasDiff={presentation !== "tree"}
|
|
model={reviewFeedback.model}
|
|
state={reviewFeedback.state}
|
|
serverId={serverId}
|
|
workspaceId={workspaceId}
|
|
/>
|
|
</View>
|
|
);
|
|
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>
|
|
|
|
<ReviewCommentSheet
|
|
enabled={enabled}
|
|
editor={reviewActions.sheetEditor}
|
|
reviewActions={reviewActions}
|
|
onChangeBody={reviewActions.onChangeEditorBody}
|
|
/>
|
|
|
|
<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,
|
|
},
|
|
}));
|