Merge pull request #13149 from gitbutlerapp/push-poxxrrlzmssv

Lite: fix tooltip flicker and simplify branch handling

Author: OliverJAsh

apps/lite/ui/src/domain/RefInfo.ts

@@ -1,4 +1,4 @@
-import { BranchReference, type RefInfo } from "@gitbutler/but-sdk";
+import { type RefInfo } from "@gitbutler/but-sdk";
 
 export const getCommonBaseCommitId = (headInfo: RefInfo): string | undefined => {
 	const bases = headInfo.stacks
@@ -20,7 +20,3 @@ export const getBranchNameByCommitId = (headInfo: RefInfo): Map<string, string>
 
 	return byCommitId;
 };
-
-// TODO: move?
-export const getSegmentBranchRef = (refName: BranchReference) =>
-	`refs/heads/${refName.displayName}`;

apps/lite/ui/src/routes/project/$id/-shared.tsx

@@ -270,16 +270,18 @@ export const ShowCommitWithQuery: FC<{
 
 export const ShowBranch: FC<{
 	projectId: string;
-	branchRef: string;
 	branchName: string;
 	remote: string | null;
 	renderHunk: (change: TreeChange, hunk: DiffHunk, patch: Patch) => ReactNode;
-}> = ({ projectId, branchRef, branchName, remote, renderHunk }) => {
+}> = ({ projectId, branchName, remote, renderHunk }) => {
 	const { data: branchDetails } = useSuspenseQuery(
 		branchDetailsQueryOptions({ projectId, branchName, remote }),
 	);
 	const { data: branchDiff } = useSuspenseQuery(
-		branchDiffQueryOptions({ projectId, branch: branchRef }),
+		branchDiffQueryOptions({
+			projectId,
+			branch: remote !== null ? `refs/remotes/${remote}/${branchName}` : `refs/heads/${branchName}`,
+		}),
 	);
 
 	return (

apps/lite/ui/src/routes/project/$id/branches/route.tsx

@@ -43,10 +43,9 @@ const getBranchRemote = (branch: BranchListing) => {
 	return branch.remotes[0] ?? null;
 };
 
-const getBranchRef = (branch: BranchListing): string | null => {
-	if (branch.hasLocal) return `refs/heads/${branch.name}`;
-	const remote = branch.remotes[0];
-	if (remote === undefined) return null;
+const getBranchRef = (branch: BranchListing): string => {
+	const remote = getBranchRemote(branch);
+	if (remote === null) return `refs/heads/${branch.name}`;
 	return `refs/remotes/${remote}/${branch.name}`;
 };
 
@@ -81,20 +80,17 @@ const BranchMenuPopup: FC<{
 	const { Popup, Item } = parts;
 	const applyBranch = useMutation(applyBranchMutationOptions);
 	const unapplyStack = useMutation(unapplyStackMutationOptions);
-	const ref = getBranchRef(branch);
 	const stackId = branch.stack?.id;
 
 	return (
 		<Popup className={classes(uiStyles.popup, uiStyles.menuPopup)}>
 			{!branch.stack?.inWorkspace ? (
 				<Item
 					className={uiStyles.menuItem}
-					disabled={ref === null}
 					onClick={() => {
-						if (ref === null) return;
 						applyBranch.mutate({
 							projectId,
-							existingBranch: ref,
+							existingBranch: getBranchRef(branch),
 						});
 					}}
 				>
@@ -122,7 +118,6 @@ const BranchApplyToggle: FC<{
 }> = ({ branch, projectId }) => {
 	const applyBranch = useMutation(applyBranchMutationOptions);
 	const unapplyStack = useMutation(unapplyStackMutationOptions);
-	const ref = getBranchRef(branch);
 	const stackId = branch.stack?.id;
 	const isApplied = branch.stack?.inWorkspace ?? false;
 
@@ -144,13 +139,11 @@ const BranchApplyToggle: FC<{
 		<button
 			type="button"
 			className={classes(sharedStyles.itemAction, styles.branchApplyToggle)}
-			disabled={ref === null}
 			aria-label={`Apply branch ${branch.name}`}
 			onClick={() => {
-				if (ref === null) return;
 				applyBranch.mutate({
 					projectId,
-					existingBranch: ref,
+					existingBranch: getBranchRef(branch),
 				});
 			}}
 		>
@@ -452,22 +445,16 @@ const Preview: FC<{
 	projectId: string;
 	selection: Selection;
 	remote: string | null;
-	branchRef: string | null;
-}> = ({ projectId, selection, remote, branchRef }) =>
+}> = ({ projectId, selection, remote }) =>
 	Match.value(selection).pipe(
-		Match.tag("Branch", ({ branchName }) =>
-			branchRef !== null ? (
-				<ShowBranch
-					projectId={projectId}
-					branchRef={branchRef}
-					branchName={branchName}
-					remote={remote}
-					renderHunk={(change, hunk) => <Hunk change={change} hunk={hunk} />}
-				/>
-			) : (
-				<div>No branch diff available.</div>
-			),
-		),
+		Match.tag("Branch", ({ branchName }) => (
+			<ShowBranch
+				projectId={projectId}
+				branchName={branchName}
+				remote={remote}
+				renderHunk={(change, hunk) => <Hunk change={change} hunk={hunk} />}
+			/>
+		)),
 		Match.tag("Commit", ({ branchName, commitId, mode }) =>
 			mode._tag === "Details" && mode.path !== undefined ? (
 				<ShowBranchCommitFile
@@ -520,7 +507,6 @@ const ProjectBranchesPage: FC = () => {
 						<Preview
 							projectId={projectId}
 							selection={selection}
-							branchRef={getBranchRef(selectedBranch)}
 							remote={getBranchRemote(selectedBranch)}
 						/>
 					</Suspense>

apps/lite/ui/src/routes/project/$id/workspace/-Editing.ts

@@ -2,7 +2,6 @@ export type EditingCommit = {
 	stackId: string;
 	segmentIndex: number;
 	branchName: string | null;
-	branchRef: string | null;
 	commitId: string;
 };
 

apps/lite/ui/src/routes/project/$id/workspace/-Item.ts

@@ -1,4 +1,4 @@
-import { getCommonBaseCommitId, getSegmentBranchRef } from "#ui/domain/RefInfo.ts";
+import { getCommonBaseCommitId } from "#ui/domain/RefInfo.ts";
 import { WorktreeChanges, type RefInfo } from "@gitbutler/but-sdk";
 import { Match } from "effect";
 
@@ -9,7 +9,6 @@ export type SegmentItem = {
 	stackId: string;
 	segmentIndex: number;
 	branchName: string | null;
-	branchRef: string | null;
 };
 
 type CommitMode = { _tag: "Summary" } | { _tag: "Details"; path?: string };
@@ -35,32 +34,24 @@ export const changesDetailsItem = (stackId: string | null, path?: string): Item
 	mode: { _tag: "Details", path },
 });
 
-export const segmentItem = ({
-	stackId,
-	segmentIndex,
-	branchName,
-	branchRef,
-}: SegmentItem): Item => ({
+export const segmentItem = ({ stackId, segmentIndex, branchName }: SegmentItem): Item => ({
 	_tag: "Segment",
 	stackId,
 	segmentIndex,
 	branchName,
-	branchRef,
 });
 
 export const commitItem = ({
 	stackId,
 	segmentIndex,
 	branchName,
-	branchRef,
 	commitId,
 	mode = { _tag: "Summary" },
 }: Omit<CommitItem, "mode"> & { mode?: CommitItem["mode"] }): Item => ({
 	_tag: "Commit",
 	stackId,
 	segmentIndex,
 	branchName,
-	branchRef,
 	commitId,
 	mode,
 });
@@ -126,8 +117,7 @@ export const normalizeItem = (
 			const segment = stack.segments[item.segmentIndex];
 			if (!segment) return null;
 			const branchName = segment.refName?.displayName ?? null;
-			const branchRef = segment.refName ? getSegmentBranchRef(segment.refName) : null;
-			if (branchName !== item.branchName || branchRef !== item.branchRef) return null;
+			if (branchName !== item.branchName) return null;
 			return item;
 		}),
 		Match.tag("Commit", (item) => {

apps/lite/ui/src/routes/project/$id/workspace/-Selection.ts

@@ -1,4 +1,3 @@
-import { getSegmentBranchRef } from "#ui/domain/RefInfo.ts";
 import { type HunkAssignment, type RefInfo, type TreeChange } from "@gitbutler/but-sdk";
 import {
 	baseCommitItem,
@@ -72,12 +71,10 @@ export const buildNavigationModel = ({
 
 		for (const [segmentIndex, segment] of stack.segments.entries()) {
 			const branchName = segment.refName?.displayName ?? null;
-			const branchRef = segment.refName ? getSegmentBranchRef(segment.refName) : null;
 			const section = segmentItem({
 				stackId: stack.id,
 				segmentIndex,
 				branchName,
-				branchRef,
 			});
 			const sectionIndex = sections.length;
 			sections.push(section);
@@ -90,7 +87,6 @@ export const buildNavigationModel = ({
 					stackId: stack.id,
 					segmentIndex,
 					branchName,
-					branchRef,
 					commitId: commit.id,
 				});
 				indexByKey.set(itemKey(commitItemV), items.length);

apps/lite/ui/src/routes/project/$id/workspace/-WorkspaceShortcuts.ts

@@ -367,7 +367,7 @@ export const getScope = ({
 							bindings: renameBranchBindings,
 							context: selection,
 						}
-					: selection.branchName === null || selection.branchRef === null
+					: selection.branchName === null
 						? {
 								_tag: "Segment",
 								bindings: selectionBindings,

apps/lite/ui/src/routes/project/$id/workspace/route.module.css

@@ -62,10 +62,6 @@
 	white-space: nowrap;
 }
 
-.segmentButtonPending {
-	opacity: 0.5;
-}
-
 .renameBranchInput {
 	font-weight: bold;
 }