chore(deps): bump all svelte related dependencies

apps/desktop/e2e/utils.ts

@@ -1,5 +1,5 @@
-import { spawnSync } from 'node:child_process';
 import { browser } from '@wdio/globals';
+import { spawnSync } from 'node:child_process';
 
 const DEFAULT_TIMEOUT = 5_000;
 

apps/desktop/src/lib/branch/BranchHeader.svelte

@@ -21,9 +21,13 @@
 	import type { PullRequest } from '$lib/gitHost/interface/types';
 	import type { Persisted } from '$lib/persisted/persisted';
 
-	export let uncommittedChanges = 0;
-	export let isLaneCollapsed: Persisted<boolean>;
-	export let onGenerateBranchName: () => void;
+	interface Props {
+		uncommittedChanges?: number;
+		isLaneCollapsed: Persisted<boolean>;
+		onGenerateBranchName: () => void;
+	}
+
+	const { uncommittedChanges = 0, isLaneCollapsed, onGenerateBranchName }: Props = $props();
 
 	const branchController = getContext(BranchController);
 	const baseBranchService = getContext(BaseBranchService);
@@ -33,13 +37,13 @@
 	const prMonitor = getGitHostPrMonitor();
 	const gitHost = getGitHost();
 
-	$: branch = $branchStore;
-	$: pr = $prMonitor?.pr;
+	const branch = $derived($branchStore);
+	const pr = $derived($prMonitor?.pr);
 
-	let contextMenu: ContextMenu;
-	let meatballButtonEl: HTMLDivElement;
-	let isLoading: boolean;
-	let isTargetBranchAnimated = false;
+	let contextMenu = $state<ContextMenu>();
+	let meatballButtonEl = $state<HTMLDivElement>();
+	let isLoading = $state<boolean>(false);
+	let isTargetBranchAnimated = $state(false);
 
 	function handleBranchNameChange(title: string) {
 		if (title === '') return;
@@ -55,9 +59,9 @@
 		$isLaneCollapsed = true;
 	}
 
-	$: hasIntegratedCommits = branch.commits?.some((b) => b.isIntegrated);
+	const hasIntegratedCommits = $derived(branch.commits?.some((b) => b.isIntegrated));
 
-	let headerInfoHeight = 0;
+	let headerInfoHeight = $state(0);
 
 	interface CreatePrOpts {
 		draft: boolean;
@@ -120,7 +124,7 @@
 	<div
 		class="card collapsed-lane"
 		class:collapsed-lane_target-branch={branch.selectedForChanges}
-		on:keydown={(e) => e.key === 'Enter' && expandLane()}
+		onkeydown={(e) => e.key === 'Enter' && expandLane()}
 		tabindex="0"
 		role="button"
 	>
@@ -251,7 +255,7 @@
 							outline
 							icon="kebab"
 							onclick={() => {
-								contextMenu.toggle();
+								contextMenu?.toggle();
 							}}
 						/>
 						<BranchLaneContextMenu

apps/desktop/src/lib/branch/BranchLaneContextMenu.svelte

@@ -15,10 +15,14 @@
 	import Button from '@gitbutler/ui/inputs/Button.svelte';
 	import Modal from '@gitbutler/ui/modal/Modal.svelte';
 
-	export let contextMenuEl: ContextMenu;
-	export let target: HTMLElement;
-	export let onCollapse: () => void;
-	export let onGenerateBranchName: () => void;
+	interface Props {
+		contextMenuEl?: ContextMenu;
+		target?: HTMLElement;
+		onCollapse: () => void;
+		onGenerateBranchName: () => void;
+	}
+
+	let { contextMenuEl = $bindable(), target, onCollapse, onGenerateBranchName }: Props = $props();
 
 	const user = getContextStore(User);
 	const project = getContext(Project);
@@ -29,15 +33,21 @@
 
 	const nameNormalizationService = getNameNormalizationServiceContext();
 
-	let aiConfigurationValid = false;
+	let aiConfigurationValid = $state(false);
 	let deleteBranchModal: Modal;
 	let renameRemoteModal: Modal;
-	let newRemoteName: string;
+	let newRemoteName = $state('');
 
-	$: branch = $branchStore;
-	$: commits = branch.commits;
-	$: setAIConfigurationValid($user);
-	$: allowRebasing = branch.allowRebasing;
+	const branch = $derived($branchStore);
+	const commits = $derived(branch.commits);
+	$effect(() => {
+		setAIConfigurationValid($user);
+	});
+
+	let allowRebasing = $state(false);
+	$effect(() => {
+		allowRebasing = branch.allowRebasing;
+	});
 
 	async function toggleAllowRebasing() {
 		branchController.updateBranchAllowRebasing(branch.id, !allowRebasing);
@@ -53,16 +63,18 @@
 
 	let normalizedBranchName: string;
 
-	$: if (branch.name) {
-		nameNormalizationService
-			.normalize(branch.name)
-			.then((name) => {
-				normalizedBranchName = name;
-			})
-			.catch((e) => {
-				console.error('Failed to normalize branch name', e);
-			});
-	}
+	$effect(() => {
+		if (branch.name) {
+			nameNormalizationService
+				.normalize(branch.name)
+				.then((name) => {
+					normalizedBranchName = name;
+				})
+				.catch((e) => {
+					console.error('Failed to normalize branch name', e);
+				});
+		}
+	});
 </script>
 
 <ContextMenu bind:this={contextMenuEl} {target}>
@@ -71,7 +83,7 @@
 			label="Collapse lane"
 			on:click={() => {
 				onCollapse();
-				contextMenuEl.close();
+				contextMenuEl?.close();
 			}}
 		/>
 	</ContextMenuSection>
@@ -80,7 +92,7 @@
 			label="Unapply"
 			on:click={() => {
 				unapplyBranch();
-				contextMenuEl.close();
+				contextMenuEl?.close();
 			}}
 		/>
 
@@ -96,15 +108,15 @@
 				} else {
 					deleteBranchModal.show(branch);
 				}
-				contextMenuEl.close();
+				contextMenuEl?.close();
 			}}
 		/>
 
 		<ContextMenuItem
 			label="Generate branch name"
 			on:click={() => {
 				onGenerateBranchName();
-				contextMenuEl.close();
+				contextMenuEl?.close();
 			}}
 			disabled={!($aiGenEnabled && aiConfigurationValid) || branch.files?.length === 0}
 		/>
@@ -118,7 +130,7 @@
 
 				newRemoteName = branch.upstreamName || normalizedBranchName || '';
 				renameRemoteModal.show(branch);
-				contextMenuEl.close();
+				contextMenuEl?.close();
 			}}
 		/>
 	</ContextMenuSection>
@@ -128,7 +140,7 @@
 			<Toggle
 				small
 				slot="control"
-				bind:checked={allowRebasing}
+				checked={allowRebasing}
 				on:click={toggleAllowRebasing}
 				help="Having this enabled permits commit amending and reordering after a branch has been pushed, which would subsequently require force pushing"
 			/>
@@ -140,15 +152,15 @@
 			label="Create branch to the left"
 			on:click={() => {
 				branchController.createBranch({ order: branch.order });
-				contextMenuEl.close();
+				contextMenuEl?.close();
 			}}
 		/>
 
 		<ContextMenuItem
 			label="Create branch to the right"
 			on:click={() => {
 				branchController.createBranch({ order: branch.order + 1 });
-				contextMenuEl.close();
+				contextMenuEl?.close();
 			}}
 		/>
 	</ContextMenuSection>

apps/desktop/src/lib/pr/PullRequestButton.svelte

@@ -1,16 +1,3 @@
-<script lang="ts" context="module">
-	export enum Action {
-		Create = 'createPr',
-		CreateDraft = 'createDraftPr'
-	}
-
-	const actions = Object.values(Action);
-	const labels = {
-		[Action.Create]: 'Create PR',
-		[Action.CreateDraft]: 'Create Draft PR'
-	};
-</script>
-
 <script lang="ts">
 	import ContextMenuItem from '$lib/components/contextmenu/ContextMenuItem.svelte';
 	import ContextMenuSection from '$lib/components/contextmenu/ContextMenuSection.svelte';
@@ -23,6 +10,18 @@
 		help: string;
 		click: (opts: { draft: boolean }) => void;
 	};
+
+	enum Action {
+		Create = 'createPr',
+		CreateDraft = 'createDraftPr'
+	}
+
+	const actions = Object.values(Action);
+	const labels = {
+		[Action.Create]: 'Create PR',
+		[Action.CreateDraft]: 'Create Draft PR'
+	};
+
 	const { loading, disabled, help, click }: Props = $props();
 
 	const preferredAction = persisted<Action>(Action.Create, 'projectDefaultPrAction');

apps/desktop/src/lib/settings/PreferencesForm.svelte

@@ -146,7 +146,7 @@
 			GitButler will sign commits as per your git configuration.
 		</svelte:fragment>
 		<svelte:fragment slot="actions">
-			<Toggle id="signCommits" checked={signCommits} on:click={handleSignCommitsClick} />
+			<Toggle id="signCommits" checked={signCommits} onclick={handleSignCommitsClick} />
 		</svelte:fragment>
 	</SectionCard>
 	{#if signCommits}
@@ -232,11 +232,7 @@
 			GitButler will never force push to the target branch.
 		</svelte:fragment>
 		<svelte:fragment slot="actions">
-			<Toggle
-				id="allowForcePush"
-				checked={allowForcePushing}
-				on:click={handleAllowForcePushClick}
-			/>
+			<Toggle id="allowForcePush" checked={allowForcePushing} onclick={handleAllowForcePushClick} />
 		</svelte:fragment>
 	</SectionCard>
 
@@ -249,7 +245,7 @@
 			<Toggle
 				id="omitCertificateCheck"
 				checked={omitCertificateCheck}
-				on:click={handleOmitCertificateCheckClick}
+				onclick={handleOmitCertificateCheckClick}
 			/>
 		</svelte:fragment>
 	</SectionCard>

apps/desktop/src/lib/shared/Toggle.svelte

@@ -1,17 +1,33 @@
 <script lang="ts">
 	import { tooltip } from '@gitbutler/ui/utils/tooltip';
 
-	export let small = false;
-	export let disabled = false;
-	export let checked = false;
-	export let value = '';
-	export let help = '';
-	export let id = '';
+	interface Props {
+		onclick?: (e: MouseEvent) => Promise<void>;
+		small?: boolean;
+		disabled?: boolean;
+		checked?: boolean;
+		value?: string;
+		help?: string;
+		id?: string;
+	}
+
+	let {
+		onclick,
+		small = false,
+		disabled = false,
+		checked = $bindable(false),
+		value = '',
+		help = '',
+		id = ''
+	}: Props = $props();
 </script>
 
 <input
 	bind:checked
-	on:click|stopPropagation
+	onclick={(e) => {
+		e.stopPropagation();
+		onclick?.(e);
+	}}
 	type="checkbox"
 	class="toggle"
 	class:small