Global selecty buttons

Author: Caleb-T-Owens

apps/desktop/src/components/v3/BranchCard.svelte

@@ -7,6 +7,7 @@
 	import BranchHeaderContextMenu from '$components/v3/BranchHeaderContextMenu.svelte';
 	import PrNumberUpdater from '$components/v3/PrNumberUpdater.svelte';
 	import WorktreeChangesFileList from '$components/v3/WorktreeChangesFileList.svelte';
+	import WorktreeChangesSelectAll from '$components/v3/WorktreeChangesSelectAll.svelte';
 	import { MoveCommitDzHandler, StartCommitDzHandler } from '$lib/commits/dropHandler';
 	import { assignedChangesFocusableId } from '$lib/focus/focusManager.svelte';
 	import { focusable } from '$lib/focus/focusable.svelte';
@@ -91,6 +92,10 @@
 	const selected = $derived(selection?.branchName === branchName);
 	const isPushed = $derived(!!(args.type === 'draft-branch' ? undefined : args.trackingBranch));
 
+	const projectState = $derived(uiState.project(projectId));
+	const drawerPage = $derived(projectState.drawerPage.get());
+	const isCommitting = $derived(drawerPage.current === 'new-commit');
+
 	const changesKeyResult = $derived(worktreeService.getChangesKey(projectId));
 	const hunkAssignments = $derived(
 		changesKeyResult.current
@@ -264,7 +269,15 @@
 				class="assigned-changes"
 				use:focusable={{ id: assignedChangesFocusableId(args.stackId) }}
 			>
-				<p class="text-14 text-bold assigned-changes__title">Assigned changes:</p>
+				<div class="assigned-changes__title">
+					{#if isCommitting}
+						<WorktreeChangesSelectAll
+							{projectId}
+							group={{ type: 'grouped', stackId: args.stackId }}
+						/>
+					{/if}
+					<p class="text-14 text-bold">Assigned changes:</p>
+				</div>
 				<WorktreeChangesFileList
 					{projectId}
 					listMode="list"
@@ -289,7 +302,10 @@
 	}
 
 	.assigned-changes__title {
+		display: flex;
 		margin: 8px;
+		margin-left: 14px;
+		gap: 8px;
 	}
 
 	.branch-card {

apps/desktop/src/components/v3/WorktreeChanges.svelte

@@ -5,6 +5,7 @@
 	import ReduxResult from '$components/ReduxResult.svelte';
 	import FileListMode from '$components/v3/FileListMode.svelte';
 	import WorktreeChangesFileList from '$components/v3/WorktreeChangesFileList.svelte';
+	import WorktreeChangesSelectAll from '$components/v3/WorktreeChangesSelectAll.svelte';
 	import WorktreeTipsFooter from '$components/v3/WorktreeTipsFooter.svelte';
 	import noChanges from '$lib/assets/illustrations/no-changes.svg?raw';
 	import { createCommitStore } from '$lib/commits/contexts';
@@ -23,7 +24,6 @@
 	import { getContext, inject } from '@gitbutler/shared/context';
 	import Badge from '@gitbutler/ui/Badge.svelte';
 	import Button from '@gitbutler/ui/Button.svelte';
-	import Checkbox from '@gitbutler/ui/Checkbox.svelte';
 	import { stickyHeader } from '@gitbutler/ui/utils/stickyHeader';
 	import { isDefined } from '@gitbutler/ui/utils/typeguards';
 	import { untrack } from 'svelte';
@@ -61,12 +61,6 @@
 	const changesResult = $derived(worktreeService.getChanges(projectId));
 	const affectedPaths = $derived(changesResult.current.data?.map((c) => c.path));
 
-	const filesFullySelected = $derived(
-		changeSelection.every(affectedPaths ?? [], (f) => f.type === 'full')
-	);
-
-	const filesPartiallySelected = $derived(!noChangesSelected && !filesFullySelected);
-
 	// TODO: Make this go away.
 	createCommitStore(undefined);
 
@@ -111,14 +105,6 @@
 		}
 	}
 
-	function toggleGlobalCheckbox() {
-		if (noChangesSelected) {
-			selectEverything();
-			return;
-		}
-		changeSelection.clear();
-	}
-
 	let listHeaderHeight = $state(0);
 	let listFooterHeight = $state(0);
 
@@ -172,12 +158,7 @@
 					>
 						<div class="worktree-header__general">
 							{#if isCommitting}
-								<Checkbox
-									checked={filesPartiallySelected || filesFullySelected}
-									indeterminate={filesPartiallySelected}
-									small
-									onchange={toggleGlobalCheckbox}
-								/>
+								<WorktreeChangesSelectAll {projectId} group={{ type: 'ungrouped' }} />
 							{/if}
 							<div class="worktree-header__title truncate">
 								<h3 class="text-14 text-semibold truncate">Uncommitted</h3>

apps/desktop/src/components/v3/WorktreeChangesFileList.svelte

@@ -1,16 +1,11 @@
 <script lang="ts">
 	import ReduxResult from '$components/ReduxResult.svelte';
 	import FileList from '$components/v3/FileList.svelte';
-	import {
-		DiffService,
-		hunkGroupToKey,
-		type HunkAssignments,
-		type HunkGroup
-	} from '$lib/hunks/diffService.svelte';
+	import { DiffService, type HunkGroup } from '$lib/hunks/diffService.svelte';
+	import { filterChangesByGroup } from '$lib/selection/changeSelection.svelte';
 	import { UiState } from '$lib/state/uiState.svelte';
 	import { WorktreeService } from '$lib/worktree/worktreeService.svelte';
 	import { getContext } from '@gitbutler/shared/context';
-	import type { TreeChange } from '$lib/hunks/change';
 
 	// TODO: Look into whether it's important to pass the stackId through
 	type Props = {
@@ -27,31 +22,14 @@
 	const uiState = getContext(UiState);
 	const projectState = $derived(uiState.project(projectId));
 	const drawerPage = $derived(projectState.drawerPage.get());
+	const isCommitting = $derived(drawerPage.current === 'new-commit');
 	const changesResult = $derived(worktreeService.getChanges(projectId));
 	const changesKeyResult = $derived(worktreeService.getChangesKey(projectId));
 	const assignments = $derived(
 		changesKeyResult.current
 			? diffService.hunkAssignments(projectId, changesKeyResult.current)
 			: undefined
 	);
-
-	const isCommitting = $derived(drawerPage.current === 'new-commit');
-
-	function filter(changes: TreeChange[], assignments: HunkAssignments) {
-		const stackGroup = assignments.get(hunkGroupToKey(group));
-
-		if (!stackGroup) return [];
-
-		const filteredChanges = [];
-		for (const change of changes) {
-			const pathGroup = stackGroup.get(change.path);
-			if (pathGroup) {
-				filteredChanges.push(change);
-			}
-		}
-
-		return filteredChanges;
-	}
 </script>
 
 <ReduxResult {projectId} result={changesResult.current}>
@@ -63,7 +41,7 @@
 						selectionId={{ type: 'worktree', group }}
 						showCheckboxes={isCommitting}
 						{projectId}
-						changes={filter(changes, assignments)}
+						changes={filterChangesByGroup(changes, group, assignments)}
 						{listMode}
 						{active}
 						{group}

apps/desktop/src/components/v3/WorktreeChangesSelectAll.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+	import { DiffService, type HunkGroup } from '$lib/hunks/diffService.svelte';
+	import {
+		allAssignedToCurrentGroupSelected,
+		ChangeSelectionService,
+		deselectAllForChangeInGroup,
+		filterChangesByGroup,
+		selectAllForChangeInGroup,
+		someAssignedToCurrentGroupSelected
+	} from '$lib/selection/changeSelection.svelte';
+	import { WorktreeService } from '$lib/worktree/worktreeService.svelte';
+	import { getContext } from '@gitbutler/shared/context';
+	import Checkbox from '@gitbutler/ui/Checkbox.svelte';
+
+	type Props = {
+		projectId: string;
+		group: HunkGroup;
+	};
+
+	const { projectId, group }: Props = $props();
+
+	const worktreeService = getContext(WorktreeService);
+	const diffService = getContext(DiffService);
+	const changeSelection = getContext(ChangeSelectionService);
+	const changesResult = $derived(worktreeService.getChanges(projectId));
+	const changesKeyResult = $derived(worktreeService.getChangesKey(projectId));
+	const assignmentsResult = $derived(
+		changesKeyResult.current
+			? diffService.hunkAssignments(projectId, changesKeyResult.current)
+			: undefined
+	);
+	const filteredChanges = $derived(
+		assignmentsResult?.current.data && changesResult?.current?.data
+			? filterChangesByGroup(changesResult.current.data, group, assignmentsResult.current.data)
+			: []
+	);
+	const selectedFiles = $derived(
+		Object.fromEntries(
+			filteredChanges.map((change) => [change.path, changeSelection.getById(change.path)])
+		)
+	);
+
+	const checkStatus = $derived.by((): 'checked' | 'indeterminate' | 'unchecked' => {
+		if (!assignmentsResult?.current.data) return 'unchecked';
+		if (!changesResult.current.data) return 'unchecked';
+
+		const assignments = assignmentsResult.current.data;
+
+		if (
+			filteredChanges.every((change) =>
+				allAssignedToCurrentGroupSelected(
+					change,
+					group,
+					assignments,
+					selectedFiles[change.path]?.current
+				)
+			)
+		) {
+			return 'checked';
+		}
+
+		if (
+			filteredChanges.some((change) =>
+				someAssignedToCurrentGroupSelected(
+					change,
+					group,
+					assignments,
+					selectedFiles[change.path]?.current
+				)
+			)
+		) {
+			return 'indeterminate';
+		}
+
+		return 'unchecked';
+	});
+
+	function onCheck() {
+		if (!assignmentsResult?.current.data) return;
+		if (!changesResult.current.data) return;
+
+		if (checkStatus === 'checked' || checkStatus === 'indeterminate') {
+			for (const change of filteredChanges) {
+				deselectAllForChangeInGroup(
+					change,
+					group,
+					assignmentsResult.current.data,
+					selectedFiles[change.path]?.current,
+					changeSelection
+				);
+			}
+		} else {
+			for (const change of filteredChanges) {
+				selectAllForChangeInGroup(
+					change,
+					group,
+					assignmentsResult.current.data,
+					selectedFiles[change.path]?.current,
+					changeSelection
+				);
+			}
+		}
+	}
+</script>
+
+<Checkbox
+	small
+	checked={checkStatus === 'checked' || checkStatus === 'indeterminate'}
+	indeterminate={checkStatus === 'indeterminate'}
+	onchange={onCheck}
+/>

apps/desktop/src/lib/selection/changeSelection.svelte.ts

@@ -407,3 +407,23 @@ function getAllAssignments(
 
 	return headers;
 }
+
+export function filterChangesByGroup(
+	changes: TreeChange[],
+	group: HunkGroup,
+	assignments: HunkAssignments
+) {
+	const stackGroup = assignments.get(hunkGroupToKey(group));
+
+	if (!stackGroup) return [];
+
+	const filteredChanges = [];
+	for (const change of changes) {
+		const pathGroup = stackGroup.get(change.path);
+		if (pathGroup) {
+			filteredChanges.push(change);
+		}
+	}
+
+	return filteredChanges;
+}