components use refname (remote/branch)

Adapt BranchesView.svelte, StackView.svelte, and UnappliedBranchView.svelte to utilize remote/branchName tracking and pass refnames for branch-based selections or change queries. Ensures UI components conform to refname-based API.

Author: estib-vega

apps/desktop/src/components/BranchesView.svelte

@@ -67,10 +67,11 @@
 			return createCommitSelection({ commitId: current.commitId, stackId: current.stackId });
 		}
 		if (current.branchName) {
-			const branchName = current.remote
-				? current.remote + '/' + current.branchName
-				: current.branchName;
-			return createBranchSelection({ stackId: current.stackId, branchName });
+			return createBranchSelection({
+				stackId: current.stackId,
+				branchName: current.branchName,
+				remote: current.remote
+			});
 		}
 	});
 

apps/desktop/src/components/StackView.svelte

@@ -30,6 +30,7 @@
 	import { STACK_SERVICE } from '$lib/stacks/stackService.svelte';
 	import { UI_STATE } from '$lib/state/uiState.svelte';
 
+	import { createBranchRef } from '$lib/utils/branch';
 	import { computeChangeStatus } from '$lib/utils/fileStatus';
 	import { inject } from '@gitbutler/shared/context';
 	import { persistWithExpiration } from '@gitbutler/shared/persisted';
@@ -111,7 +112,7 @@
 		if (commitId) {
 			return createCommitSelection({ commitId, stackId: stackId });
 		} else if (branchName) {
-			return createBranchSelection({ stackId: stackId, branchName });
+			return createBranchSelection({ stackId: stackId, branchName, remote: undefined });
 		}
 	});
 
@@ -229,7 +230,7 @@
 	This file is growing complex, and should be simplified where possible.  It
 	is also intentionally intriciate, as it allows us to render the components
 	in two different configurations.
-	
+
 	While tedious to maintain, it is also a good forcing function for making
 	components that compose better. Be careful when changing, especially since
 	integration tests only covers the default layout.
@@ -344,7 +345,7 @@
 	{@const changesResult = stackService.branchChanges({
 		projectId,
 		stackId: stackId,
-		branchName
+		branch: createBranchRef(branchName, undefined)
 	})}
 	<ReduxResult {projectId} {stackId} result={changesResult.current}>
 		{#snippet children(changes, { projectId, stackId })}
@@ -354,7 +355,7 @@
 				{stackId}
 				draggableFiles
 				autoselect
-				selectionId={createBranchSelection({ stackId: stackId, branchName })}
+				selectionId={createBranchSelection({ stackId: stackId, branchName, remote: undefined })}
 				noshrink={!!previewKey}
 				ontoggle={() => {
 					changedFilesCollapsed = !changedFilesCollapsed;

apps/desktop/src/components/UnappliedBranchView.svelte

@@ -7,6 +7,7 @@
 	import ReduxResult from '$components/ReduxResult.svelte';
 	import { createBranchSelection, type SelectionId } from '$lib/selection/key';
 	import { STACK_SERVICE } from '$lib/stacks/stackService.svelte';
+	import { createBranchRef } from '$lib/utils/branch';
 	import { inject } from '@gitbutler/shared/context';
 	import { Icon, TestId, Tooltip } from '@gitbutler/ui';
 
@@ -29,12 +30,12 @@
 			? stackService.branchDetails(projectId, stackId, branchName)
 			: stackService.unstackedBranchDetails(projectId, branchName, remote)
 	);
-	const changesResult = $derived(stackService.branchChanges({ projectId, branchName, remote }));
 
 	const selectionId: SelectionId = $derived.by(() => {
-		const bname = remote ? remote + '/' + branchName : branchName;
-		return createBranchSelection({ stackId, branchName: bname });
+		return createBranchSelection({ stackId, branchName, remote });
 	});
+
+	const branchRef = $derived(createBranchRef(branchName, remote));
 </script>
 
 <ReduxResult {projectId} result={branchResult.current} {onerror}>
@@ -94,6 +95,7 @@
 			</div>
 		</Drawer>
 
+		{@const changesResult = stackService.branchChanges({ projectId, branch: branchRef })}
 		<ReduxResult {projectId} result={changesResult.current}>
 			{#snippet children(changes, env)}
 				<ChangedFiles