"Lanes & branches" new global settings domain (#11313)

* feat(settings): add Lanes & Branches settings panel and feature flag

* feat(ui): auto-select branch name inputs if the setting is on

* feat(settings): link branch placement to Lanes & Branches settings and update styles

* fix(ui): remove unused selectall prop from Textbox stories

* fix(textbox,modals): refactoring and simplification

Author: PavelLaptev

apps/desktop/src/components/BranchNameTextbox.svelte

@@ -9,7 +9,15 @@
 		[key: string]: any;
 	};
 
-	let { value = $bindable(), helperText, onslugifiedvalue, ...restProps }: Props = $props();
+	let {
+		value = $bindable(),
+		helperText,
+
+		onslugifiedvalue,
+		...restProps
+	}: Props = $props();
+
+	let textbox = $state<ReturnType<typeof Textbox>>();
 
 	const slugifiedName = $derived(value && slugify(value));
 	const namesDiverge = $derived(!!value && slugifiedName !== value);
@@ -20,6 +28,10 @@
 	$effect(() => {
 		onslugifiedvalue?.(slugifiedName);
 	});
+
+	export async function selectAll() {
+		await textbox?.selectAll();
+	}
 </script>
 
-<Textbox bind:value helperText={computedHelperText} {...restProps} />
+<Textbox bind:this={textbox} bind:value helperText={computedHelperText} {...restProps} />

apps/desktop/src/components/BranchRenameModal.svelte

@@ -23,9 +23,13 @@
 	let slugifiedRefName: string | undefined = $state();
 	let modal: Modal | undefined = $state();
 
-	export function show() {
+	let branchNameInput = $state<ReturnType<typeof BranchNameTextbox>>();
+
+	export async function show() {
 		newName = branchName;
 		modal?.show();
+		// Select text after async value is set
+		await branchNameInput?.selectAll();
 	}
 </script>
 
@@ -43,6 +47,7 @@
 	}}
 >
 	<BranchNameTextbox
+		bind:this={branchNameInput}
 		placeholder="New name"
 		id={ElementId.NewBranchNameInput}
 		bind:value={newName}

apps/desktop/src/components/ChangedFilesContextMenu.svelte

@@ -8,6 +8,7 @@
 	import { CLIPBOARD_SERVICE } from '$lib/backend/clipboard';
 	import { changesToDiffSpec } from '$lib/commits/utils';
 	import { projectAiExperimentalFeaturesEnabled, projectAiGenEnabled } from '$lib/config/config';
+	import { autoSelectBranchCreationFeature } from '$lib/config/uiFeatureFlags';
 	import { FILE_SERVICE } from '$lib/files/fileService';
 	import { isTreeChange, type TreeChange } from '$lib/hunks/change';
 	import { vscodePath } from '$lib/project/project';
@@ -19,7 +20,6 @@
 	import { computeChangeStatus } from '$lib/utils/fileStatus';
 	import { getEditorUri, URL_SERVICE } from '$lib/utils/url';
 	import { inject } from '@gitbutler/core/context';
-
 	import {
 		AsyncButton,
 		Button,
@@ -31,6 +31,7 @@
 		Modal,
 		chipToasts
 	} from '@gitbutler/ui';
+
 	import type { SelectionId } from '$lib/selection/key';
 
 	type Props = {
@@ -147,6 +148,7 @@
 
 	let stashBranchName = $state<string>();
 	let slugifiedRefName: string | undefined = $state();
+	let stashBranchNameInput = $state<ReturnType<typeof BranchNameTextbox>>();
 
 	async function confirmStashIntoBranch(item: ChangedFilesItem, branchName: string | undefined) {
 		if (!branchName) {
@@ -350,11 +352,13 @@
 						<ContextMenuItem
 							label="Stash into branch…"
 							icon="stash"
-							onclick={() => {
-								stackService.fetchNewBranchName(projectId).then((name) => {
-									stashBranchName = name || '';
-								});
+							onclick={async () => {
 								stashConfirmationModal?.show(item);
+								stashBranchName = await stackService.fetchNewBranchName(projectId);
+								// Select text after async value is loaded and DOM is updated
+								if ($autoSelectBranchCreationFeature) {
+									await stashBranchNameInput?.selectAll();
+								}
 								contextMenu.close();
 							}}
 						/>
@@ -592,6 +596,7 @@
 	{#snippet children(item)}
 		<div class="content-wrap">
 			<BranchNameTextbox
+				bind:this={stashBranchNameInput}
 				id="stashBranchName"
 				placeholder="Enter your branch name..."
 				bind:value={stashBranchName}

apps/desktop/src/components/CreateBranchModal.svelte

@@ -3,6 +3,8 @@
 	import dependentBranchSvg from '$components/stackTabs/assets/dependent-branch.svg?raw';
 	import newStackLefttSvg from '$components/stackTabs/assets/new-stack-left.svg?raw';
 	import newStackRightSvg from '$components/stackTabs/assets/new-stack-right.svg?raw';
+	import { autoSelectBranchCreationFeature } from '$lib/config/uiFeatureFlags';
+	import { useSettingsModal } from '$lib/settings/settingsModal.svelte';
 	import { STACK_SERVICE } from '$lib/stacks/stackService.svelte';
 	import { inject } from '@gitbutler/core/context';
 	import { persisted } from '@gitbutler/shared/persisted';
@@ -16,8 +18,7 @@
 		RadioButton,
 		Select,
 		SelectItem,
-		TestId,
-		Toggle
+		TestId
 	} from '@gitbutler/ui';
 	import { isDefined } from '@gitbutler/ui/utils/typeguards';
 
@@ -30,11 +31,13 @@
 	const stackService = inject(STACK_SERVICE);
 	const [createNewStack, stackCreation] = stackService.newStack;
 	const [createNewBranch, branchCreation] = stackService.newBranch;
+	const { openGeneralSettings } = useSettingsModal();
 
 	let createRefModal = $state<ReturnType<typeof Modal>>();
 	let createRefName = $state<string>();
 	let createRefType = $state<'stack' | 'dependent'>('stack');
 	let selectedStackId = $state<string>();
+	let branchNameInput = $state<ReturnType<typeof BranchNameTextbox>>();
 
 	// Persisted preference for branch placement
 	const addToLeftmost = persisted<boolean>(false, 'branch-placement-leftmost');
@@ -118,6 +121,11 @@
 	export async function show(initialType?: 'stack' | 'dependent') {
 		createRefModal?.show();
 		createRefName = await stackService.fetchNewBranchName(projectId);
+
+		// Select text after async value is loaded and DOM is updated
+		if ($autoSelectBranchCreationFeature) {
+			await branchNameInput?.selectAll();
+		}
 		// Reset selected stack to default
 		selectedStackId = undefined;
 		// Set branch type - default to 'stack' unless explicitly provided
@@ -132,9 +140,10 @@
 <Modal bind:this={createRefModal} width={500} testId={TestId.CreateNewBranchModal}>
 	<div class="content-wrap">
 		<BranchNameTextbox
+			bind:this={branchNameInput}
 			label="New branch"
 			id={ElementId.NewBranchNameInput}
-			bind:value={createRefName}
+			value={createRefName}
 			autofocus
 			onslugifiedvalue={(value) => (slugifiedRefName = value)}
 		/>
@@ -201,16 +210,21 @@
 		</div>
 
 		{#if createRefType === 'stack'}
-			<label for="add-leftmost" class="placement-toggle">
-				<div class="flex items-center gap-8">
-					<p class="text-13 text-semibold full-width">Place new branch on the left side</p>
-					<Toggle id="add-leftmost" small bind:checked={$addToLeftmost} />
-				</div>
-
-				<p class="text-12 text-body clr-text-3">
-					By default, new branches are added to the rightmost position.
+			<div class="settings-link-container">
+				<p class="text-12 text-body clr-text-2">
+					Configure branch placement and other preferences in
+					<button
+						type="button"
+						class="settings-link underline-dotted"
+						onclick={() => {
+							createRefModal?.close();
+							openGeneralSettings('lanes-and-branches');
+						}}
+					>
+						Settings → Lanes & Branches
+					</button>
 				</p>
-			</label>
+			</div>
 		{/if}
 
 		{#if createRefType === 'dependent'}
@@ -286,15 +300,26 @@
 		gap: 8px;
 	}
 
-	.placement-toggle {
+	.settings-link-container {
 		display: flex;
-		flex-direction: column;
 		padding: 12px;
-		gap: 5px;
 		border: 1px solid var(--clr-border-2);
 		border-radius: var(--radius-m);
 	}
 
+	.settings-link {
+		padding: 0;
+		border: none;
+		background: none;
+		color: var(--clr-link);
+		font: inherit;
+		cursor: pointer;
+
+		&:hover {
+			color: var(--clr-link-hover);
+		}
+	}
+
 	.radio-label {
 		/* variables */
 		--btn-bg: var(--clr-btn-ntrl-outline-bg);

apps/desktop/src/components/GeneralSettingsModalContent.svelte

@@ -6,6 +6,7 @@
 	import GeneralSettings from '$components/profileSettings/GeneralSettings.svelte';
 	import GitSettings from '$components/profileSettings/GitSettings.svelte';
 	import IntegrationsSettings from '$components/profileSettings/IntegrationsSettings.svelte';
+	import LanesAndBranchesSettings from '$components/profileSettings/LanesAndBranchesSettings.svelte';
 	import OrganisationSettings from '$components/profileSettings/OrganisationSettings.svelte';
 	import TelemetrySettings from '$components/profileSettings/TelemetrySettings.svelte';
 	import AppearanceSettings from '$components/projectSettings/AppearanceSettings.svelte';
@@ -37,6 +38,11 @@
 			label: 'Appearance',
 			icon: 'appearance' as keyof typeof iconsJson
 		},
+		{
+			id: 'lanes-and-branches',
+			label: 'Lanes & branches',
+			icon: 'lanes' as keyof typeof iconsJson
+		},
 		{
 			id: 'git',
 			label: 'Git stuff',
@@ -90,6 +96,8 @@
 				<GeneralSettings />
 			{:else if currentPage.id === 'appearance'}
 				<AppearanceSettings />
+			{:else if currentPage.id === 'lanes-and-branches'}
+				<LanesAndBranchesSettings />
 			{:else if currentPage.id === 'git'}
 				<GitSettings />
 			{:else if currentPage.id === 'integrations'}

apps/desktop/src/components/profileSettings/LanesAndBranchesSettings.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import {
+		autoSelectBranchNameFeature,
+		autoSelectBranchCreationFeature
+	} from '$lib/config/uiFeatureFlags';
+	import { persisted } from '@gitbutler/shared/persisted';
+	import { SectionCard, Toggle } from '@gitbutler/ui';
+
+	const addToLeftmost = persisted<boolean>(false, 'branch-placement-leftmost');
+</script>
+
+<SectionCard labelFor="add-leftmost" orientation="row">
+	{#snippet title()}
+		Place new lanes on the left side
+	{/snippet}
+	{#snippet caption()}
+		By default, new lanes are added to the rightmost position. Enable this to add them to the
+		leftmost position instead.
+	{/snippet}
+	{#snippet actions()}
+		<Toggle
+			id="add-leftmost"
+			checked={$addToLeftmost}
+			onclick={() => ($addToLeftmost = !$addToLeftmost)}
+		/>
+	{/snippet}
+</SectionCard>
+
+<div class="stack-v">
+	<SectionCard labelFor="auto-select-creation" roundedBottom={false} orientation="row">
+		{#snippet title()}
+			Auto-select text on branch creation
+		{/snippet}
+		{#snippet caption()}
+			Automatically select the pre-populated text in the branch name field when creating a new
+			branch, making it easier to type your own name.
+		{/snippet}
+		{#snippet actions()}
+			<Toggle
+				id="auto-select-creation"
+				checked={$autoSelectBranchCreationFeature}
+				onclick={() => ($autoSelectBranchCreationFeature = !$autoSelectBranchCreationFeature)}
+			/>
+		{/snippet}
+	</SectionCard>
+
+	<SectionCard labelFor="auto-select-rename" roundedTop={false} orientation="row">
+		{#snippet title()}
+			Auto-select text on branch rename
+		{/snippet}
+		{#snippet caption()}
+			Automatically select the text when renaming a branch or lane, making it easier to replace the
+			entire name.
+		{/snippet}
+		{#snippet actions()}
+			<Toggle
+				id="auto-select-rename"
+				checked={$autoSelectBranchNameFeature}
+				onclick={() => ($autoSelectBranchNameFeature = !$autoSelectBranchNameFeature)}
+			/>
+		{/snippet}
+	</SectionCard>
+</div>

apps/desktop/src/components/projectSettings/AppearanceSettings.svelte

@@ -1,10 +1,6 @@
 <script lang="ts">
 	import ThemeSelector from '$components/ThemeSelector.svelte';
-	import {
-		autoSelectBranchNameFeature,
-		stagingBehaviorFeature,
-		type StagingBehavior
-	} from '$lib/config/uiFeatureFlags';
+	import { stagingBehaviorFeature, type StagingBehavior } from '$lib/config/uiFeatureFlags';
 	import { SETTINGS } from '$lib/settings/userSettings';
 	import { inject } from '@gitbutler/core/context';
 	import {
@@ -342,22 +338,6 @@
 	</SectionCard>
 </form>
 
-<SectionCard labelFor="branchLaneContents" orientation="row">
-	{#snippet title()}
-		Auto-select text on branch/lane rename
-	{/snippet}
-	{#snippet caption()}
-		Enable this option to automatically select the text when the input is focused.
-	{/snippet}
-	{#snippet actions()}
-		<Toggle
-			id="branchLaneContents"
-			checked={$autoSelectBranchNameFeature}
-			onclick={() => ($autoSelectBranchNameFeature = !$autoSelectBranchNameFeature)}
-		/>
-	{/snippet}
-</SectionCard>
-
 <form class="stack-v" onchange={(e) => onStagingBehaviorFormChange(e.currentTarget)}>
 	<SectionCard roundedBottom={false} orientation="row" labelFor="stage-all">
 		{#snippet title()}

apps/desktop/src/lib/config/uiFeatureFlags.ts

@@ -7,6 +7,7 @@
 import { persisted, persistWithExpiration } from '@gitbutler/shared/persisted';
 
 export const autoSelectBranchNameFeature = persisted(false, 'autoSelectBranchLaneContentsFeature');
+export const autoSelectBranchCreationFeature = persisted(false, 'autoSelectBranchCreationFeature');
 export const ircEnabled = persistWithExpiration(false, 'feature-irc', 1440 * 30);
 export const ircServer = persistWithExpiration('', 'feature-irc-server', 1440 * 30);
 export const rewrapCommitMessage = persistWithExpiration(true, 'rewrap-commit-msg', 1440 * 30);