Merge pull request #13158 from gitbutlerapp/fix-warnings

Suppress Svelte 5 state_referenced_locally warnings with untrack()

Author: mtsgrd

apps/desktop/src/components/branch/BranchIntegrationModal.svelte

@@ -24,6 +24,7 @@
 	} from "$lib/upstream/integrationStepUtils";
 	import { inject } from "@gitbutler/core/context";
 	import { Modal, ModalFooter, Button, ScrollableContainer, SimpleCommitRow } from "@gitbutler/ui";
+	import { untrack } from "svelte";
 	import { flip } from "svelte/animate";
 	import type { InteractiveIntegrationStep } from "$lib/stacks/stack";
 
@@ -44,9 +45,9 @@
 	const stackService = inject(STACK_SERVICE);
 	const [integrate, integrating] = stackService.integrateBranchWithSteps;
 	const initialIntegrationSteps = stackService.initialIntegrationSteps(
-		projectId,
-		stackId,
-		branchName,
+		untrack(() => projectId),
+		untrack(() => stackId),
+		untrack(() => branchName),
 	);
 
 	let editableSteps = $derived(initialIntegrationSteps.response ?? []);

apps/desktop/src/components/codegen/CodegenPromptConfigModal.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Codeblock } from "@gitbutler/ui";
 	import { Modal, SegmentControl, Button } from "@gitbutler/ui";
+	import { untrack } from "svelte";
 	import type { PromptDir } from "$lib/codegen/types";
 
 	type Props = {
@@ -16,7 +17,7 @@
 
 	const { promptDirs, openPromptConfigDir }: Props = $props();
 
-	let selectedSegment = $state<string>(promptDirs[0]?.label || "");
+	let selectedSegment = $state<string>(untrack(() => promptDirs[0]?.label || ""));
 </script>
 
 {#snippet pathContent({ path, caption }: { path: string; caption: string })}

apps/desktop/src/components/codegen/CodegenServiceMessageThinking.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import CodegenServiceMessage from "$components/codegen/CodegenServiceMessage.svelte";
+	import { untrack } from "svelte";
 
 	type Props = {
 		startAt: Date;
@@ -71,7 +72,9 @@
 	}
 
 	let currentWord = $state(getWord());
-	let currentDuration = $state(milisToEnglish(Date.now() - startAt.getTime() - msSpentWaiting));
+	let currentDuration = $state(
+		untrack(() => milisToEnglish(Date.now() - startAt.getTime() - msSpentWaiting)),
+	);
 
 	$effect(() => {
 		const updateWordInterval = setInterval(() => {

apps/desktop/src/components/codegen/CodegenSessionRow.svelte

@@ -23,6 +23,7 @@
 	import { inject } from "@gitbutler/core/context";
 	import { Badge, Icon, type IconName } from "@gitbutler/ui";
 	import { focusable } from "@gitbutler/ui/focus/focusable";
+	import { untrack } from "svelte";
 	import { slide } from "svelte/transition";
 	import type { ClaudeStatus, PromptAttachment } from "$lib/codegen/types";
 
@@ -46,12 +47,13 @@
 		draft = false,
 	}: Props = $props();
 
-	const uiState = draft ? undefined : inject(UI_STATE);
-	const laneState = draft || !stackId ? undefined : uiState?.lane(stackId);
+	const uiState = untrack(() => draft) ? undefined : inject(UI_STATE);
+	const laneState = untrack(() => (draft || !stackId ? undefined : uiState?.lane(stackId)));
 
-	const claudeService = draft ? undefined : inject(CLAUDE_CODE_SERVICE);
-	const messages =
-		draft || !projectId || !stackId ? undefined : claudeService?.messages({ projectId, stackId });
+	const claudeService = untrack(() => draft) ? undefined : inject(CLAUDE_CODE_SERVICE);
+	const messages = untrack(() =>
+		draft || !projectId || !stackId ? undefined : claudeService?.messages({ projectId, stackId }),
+	);
 	const permissionRequests = $derived(
 		draft || !projectId ? undefined : claudeService?.permissionRequests({ projectId }),
 	);
@@ -69,7 +71,7 @@
 		return "ai";
 	}
 
-	const attachmentService = draft ? undefined : inject(ATTACHMENT_SERVICE);
+	const attachmentService = untrack(() => draft) ? undefined : inject(ATTACHMENT_SERVICE);
 
 	function addAttachment(items: PromptAttachment[]) {
 		if (!branchName || !attachmentService) return;

apps/desktop/src/components/codegen/CodegenToolCall.svelte

@@ -3,6 +3,7 @@
 	import { formatToolCall, getToolIcon, getToolLabel } from "$lib/codegen/codegenTools";
 	import { toolCallLoading, type ToolCall } from "$lib/codegen/messages";
 	import { Codeblock } from "@gitbutler/ui";
+	import { untrack } from "svelte";
 
 	type Props = {
 		projectId: string;
@@ -26,10 +27,11 @@
 	}: Props = $props();
 
 	// Initialize expanded state from map, default to false (collapsed)
-	const initialExpanded =
+	const initialExpanded = untrack(() =>
 		toolCallKey && toolCallExpandedState
 			? (toolCallExpandedState.individual.get(toolCallKey) ?? false)
-			: false;
+			: false,
+	);
 
 	function handleToggle(newExpanded: boolean) {
 		// Persist to map if available

apps/desktop/src/components/commit/CommitFailedModalContent.svelte

@@ -3,6 +3,7 @@
 	import AppScrollableContainer from "$components/shared/AppScrollableContainer.svelte";
 	import { REJECTTION_REASONS, type RejectionReason } from "$lib/stacks/stackService.svelte";
 	import { Icon, ModalHeader, TestId, Tooltip } from "@gitbutler/ui";
+	import { untrack } from "svelte";
 	import type { CommitFailedModalState } from "$lib/state/uiState.svelte";
 
 	type Props = {
@@ -63,7 +64,7 @@
 		return result;
 	}
 
-	const groupedData = groupByReason(data);
+	const groupedData = groupByReason(untrack(() => data));
 
 	let isScrollTopVisible = $state(true);
 </script>

apps/desktop/src/components/diff/FloatingDiffModal.svelte

@@ -19,7 +19,7 @@
 	import { Button, FileViewHeader, HunkDiffSkeleton, Icon, VirtualList } from "@gitbutler/ui";
 	import { FOCUS_MANAGER, type FocusableOptions } from "@gitbutler/ui/focus/focusManager";
 	import { focusable } from "@gitbutler/ui/focus/focusable";
-	import { tick } from "svelte";
+	import { tick, untrack } from "svelte";
 
 	interface Props {
 		projectId: string;
@@ -61,7 +61,7 @@
 
 	let listMode: "list" | "tree" = $state("list");
 	// Seeded from prop once on mount; subsequent user selection is independent.
-	let selectedIndex = $state(initialIndex);
+	let selectedIndex = $state(untrack(() => initialIndex));
 	// Prevents VirtualList scroll events from overwriting a user-clicked selection.
 	const scrollLock = new ScrollSelectionLock(getInitialLockedIndex());
 	let headerElRef = $state<HTMLDivElement | undefined>(undefined);

apps/desktop/src/components/diff/MultiDiffView.svelte

@@ -23,6 +23,7 @@
 	import { SETTINGS } from "$lib/settings/userSettings";
 	import { inject } from "@gitbutler/core/context";
 	import { Button, FileViewHeader, HunkDiffSkeleton, VirtualList } from "@gitbutler/ui";
+	import { untrack } from "svelte";
 
 	type Props = {
 		projectId: string;
@@ -69,7 +70,7 @@
 	}
 
 	let virtualList = $state<VirtualList<TreeChange>>();
-	let highlightedIndex = $state<number | undefined>(startIndex);
+	let highlightedIndex = $state<number | undefined>(untrack(() => startIndex));
 	// Prevents VirtualList scroll events from overwriting a user-clicked selection.
 	const scrollLock = new ScrollSelectionLock(getInitialLockedIndex());
 	let floatingDiffOpen = $state(false);

apps/desktop/src/components/editor/MessageEditor.svelte

@@ -39,7 +39,7 @@
 		type DropFileResult,
 	} from "@gitbutler/ui/richText/plugins/FileUpload.svelte";
 
-	import { tick } from "svelte";
+	import { tick, untrack } from "svelte";
 
 	const ACCEPTED_FILE_TYPES = ["image/*", "application/*", "text/*", "audio/*", "video/*"];
 
@@ -92,9 +92,11 @@
 
 	const uploadsService = inject(UPLOADS_SERVICE);
 	const userSettings = inject(SETTINGS);
-	const commitGenerationExtraConcise = projectCommitGenerationExtraConcise(projectId);
-	const commitGenerationUseEmojis = projectCommitGenerationUseEmojis(projectId);
-	const commitGenerationHaiku = projectCommitGenerationHaiku(projectId);
+	const commitGenerationExtraConcise = projectCommitGenerationExtraConcise(
+		untrack(() => projectId),
+	);
+	const commitGenerationUseEmojis = projectCommitGenerationUseEmojis(untrack(() => projectId));
+	const commitGenerationHaiku = projectCommitGenerationHaiku(untrack(() => projectId));
 
 	const useFloatingBox = uiState.global.useFloatingBox;
 

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

@@ -24,7 +24,7 @@
 	import { Badge, TestId } from "@gitbutler/ui";
 	import { focusable } from "@gitbutler/ui/focus/focusable";
 	import { isDefined } from "@gitbutler/ui/utils/typeguards";
-	import { type Snippet } from "svelte";
+	import { untrack, type Snippet } from "svelte";
 	import type { DropzoneHandler } from "$lib/dragging/handler";
 	import type { TreeChange } from "$lib/hunks/change";
 	import type { FileListKeyHandler } from "$lib/selection/fileListController.svelte";
@@ -58,7 +58,7 @@
 	}: Props = $props();
 
 	// Create a unique persist ID based on stackId and mode (both are static props)
-	const persistId = stackId ? `worktree-${mode}-${stackId}` : `worktree-${mode}`;
+	const persistId = untrack(() => (stackId ? `worktree-${mode}-${stackId}` : `worktree-${mode}`));
 
 	const diffService = inject(DIFF_SERVICE);
 	const uncommittedService = inject(UNCOMMITTED_SERVICE);