Introduce ClipboardService and migrate clipboard access

estib-vega · estib-vega · commit 3299224a62a4 · 2025-08-13T18:43:18.000+02:00
Introduce ClipboardService and the CLIPBOARD_SERVICE token. Update all UI and service clipboard access to go through ClipboardService, which uses the backend abstraction for clipboard operations. Provide user toasts for copy feedback and ensure dependency injection across the app.
diff --git a/apps/desktop/src/components/BranchHeaderContextMenu.svelte b/apps/desktop/src/components/BranchHeaderContextMenu.svelte
@@ -20,7 +20,7 @@
 	import ReduxResult from '$components/ReduxResult.svelte';
 	import { PROMPT_SERVICE } from '$lib/ai/promptService';
 	import { AI_SERVICE } from '$lib/ai/service';
-	import { writeClipboard } from '$lib/backend/clipboard';
+	import { CLIPBOARD_SERVICE } from '$lib/backend/clipboard';
 	import { projectAiGenEnabled } from '$lib/config/config';
 	import { DEFAULT_FORGE_FACTORY } from '$lib/forge/forgeFactory.svelte';
 	import { STACK_SERVICE } from '$lib/stacks/stackService.svelte';
@@ -60,6 +60,7 @@
 	const forge = inject(DEFAULT_FORGE_FACTORY);
 	const promptService = inject(PROMPT_SERVICE);
 	const urlService = inject(URL_SERVICE);
+	const clipboardService = inject(CLIPBOARD_SERVICE);
 	const [insertBlankCommitInBranch, commitInsertion] = stackService.insertBlankCommit;
 	const [updateBranchNameMutation] = stackService.updateBranchName;
 	const [createRef, refCreation] = stackService.createReference;
@@ -190,7 +191,7 @@
 				label="Copy branch name"
 				testId={TestId.BranchHeaderContextMenu_CopyBranchName}
 				onclick={() => {
-					writeClipboard(branch?.name);
+					clipboardService.write(branch?.name);
 					close();
 				}}
 			/>
@@ -308,7 +309,7 @@
 							label="Copy PR link"
 							testId={TestId.BranchHeaderContextMenu_CopyPRLink}
 							onclick={() => {
-								writeClipboard(pr.htmlUrl);
+								clipboardService.write(pr.htmlUrl);
 								close();
 							}}
 						/>
diff --git a/apps/desktop/src/components/CommitContextMenu.svelte b/apps/desktop/src/components/CommitContextMenu.svelte
@@ -42,7 +42,7 @@
 </script>
 
 <script lang="ts">
-	import { writeClipboard } from '$lib/backend/clipboard';
+	import { CLIPBOARD_SERVICE } from '$lib/backend/clipboard';
 	import { rewrapCommitMessage } from '$lib/config/uiFeatureFlags';
 	import { STACK_SERVICE } from '$lib/stacks/stackService.svelte';
 	import { URL_SERVICE } from '$lib/utils/url';
@@ -68,6 +68,7 @@
 
 	const urlService = inject(URL_SERVICE);
 	const stackService = inject(STACK_SERVICE);
+	const clipboardService = inject(CLIPBOARD_SERVICE);
 	const [insertBlankCommitInBranch, commitInsertion] = stackService.insertBlankCommit;
 	const [createRef, refCreation] = stackService.createReference;
 
@@ -172,22 +173,22 @@
 					<ContextMenuItem
 						label="Copy commit link"
 						onclick={() => {
-							writeClipboard(commitUrl);
+							clipboardService.write(commitUrl);
 							close();
 						}}
 					/>
 				{/if}
 				<ContextMenuItem
 					label="Copy commit hash"
 					onclick={() => {
-						writeClipboard(commitId);
+						clipboardService.write(commitId);
 						close();
 					}}
 				/>
 				<ContextMenuItem
 					label="Copy commit message"
 					onclick={() => {
-						writeClipboard(commitMessage);
+						clipboardService.write(commitMessage);
 						close();
 					}}
 				/>
diff --git a/apps/desktop/src/components/CommitDetails.svelte b/apps/desktop/src/components/CommitDetails.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { writeClipboard } from '$lib/backend/clipboard';
+	import { CLIPBOARD_SERVICE } from '$lib/backend/clipboard';
 	import { type Commit, type UpstreamCommit } from '$lib/branches/v3';
 	import { rewrapCommitMessage } from '$lib/config/uiFeatureFlags';
 	import { SETTINGS } from '$lib/settings/userSettings';
@@ -21,6 +21,7 @@
 
 	const userService = inject(USER_SERVICE);
 	const userSettings = inject(SETTINGS);
+	const clipboardService = inject(CLIPBOARD_SERVICE);
 	const zoom = $derived($userSettings.zoom);
 
 	const user = $derived(userService.user);
@@ -69,7 +70,7 @@
 				type="button"
 				class="copy-sha underline-dotted"
 				onclick={() => {
-					writeClipboard(commit.id, {
+					clipboardService.write(commit.id, {
 						message: 'Commit SHA copied'
 					});
 				}}
diff --git a/apps/desktop/src/components/FileContextMenu.svelte b/apps/desktop/src/components/FileContextMenu.svelte
@@ -4,7 +4,7 @@
 	import { ACTION_SERVICE } from '$lib/actions/actionService.svelte';
 	import { AI_SERVICE } from '$lib/ai/service';
 	import { BACKEND } from '$lib/backend';
-	import { writeClipboard } from '$lib/backend/clipboard';
+	import { CLIPBOARD_SERVICE } from '$lib/backend/clipboard';
 	import { changesToDiffSpec } from '$lib/commits/utils';
 	import { projectAiExperimentalFeaturesEnabled, projectAiGenEnabled } from '$lib/config/config';
 	import { FILE_SERVICE } from '$lib/files/fileService';
@@ -64,6 +64,7 @@
 	const actionService = inject(ACTION_SERVICE);
 	const fileService = inject(FILE_SERVICE);
 	const urlService = inject(URL_SERVICE);
+	const clipboardService = inject(CLIPBOARD_SERVICE);
 	const backend = inject(BACKEND);
 	const [autoCommit, autoCommitting] = actionService.autoCommit;
 	const [branchChanges, branchingChanges] = actionService.branchChanges;
@@ -399,7 +400,7 @@
 							const projectPath = project?.path;
 							if (projectPath) {
 								const absPath = await backend.joinPath(projectPath, item.changes[0]!.path);
-								await writeClipboard(absPath, {
+								await clipboardService.write(absPath, {
 									errorMessage: 'Failed to copy absolute path'
 								});
 							}
@@ -409,7 +410,7 @@
 					<ContextMenuItem
 						label="Copy Relative Path"
 						onclick={async () => {
-							await writeClipboard(item.changes[0]!.path, {
+							await clipboardService.write(item.changes[0]!.path, {
 								errorMessage: 'Failed to copy relative path'
 							});
 							contextMenu.close();
diff --git a/apps/desktop/src/components/GithubIntegration.svelte b/apps/desktop/src/components/GithubIntegration.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { writeClipboard } from '$lib/backend/clipboard';
+	import { CLIPBOARD_SERVICE } from '$lib/backend/clipboard';
 	import { GITHUB_USER_SERVICE } from '$lib/forge/github/githubUserService.svelte';
 	import { USER_SERVICE } from '$lib/user/userService';
 	import { URL_SERVICE } from '$lib/utils/url';
@@ -19,6 +19,7 @@
 	const userService = inject(USER_SERVICE);
 	const user = userService.user;
 	const urlService = inject(URL_SERVICE);
+	const clipboardService = inject(CLIPBOARD_SERVICE);
 
 	// step flags
 	let codeCopied = $state(false);
@@ -139,7 +140,7 @@
 						icon="copy"
 						disabled={codeCopied}
 						onclick={() => {
-							writeClipboard(userCode);
+							clipboardService.write(userCode);
 							codeCopied = true;
 						}}
 					>
diff --git a/apps/desktop/src/components/IntegrateUpstreamModal.svelte b/apps/desktop/src/components/IntegrateUpstreamModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { writeClipboard } from '$lib/backend/clipboard';
+	import { CLIPBOARD_SERVICE } from '$lib/backend/clipboard';
 	import { BASE_BRANCH_SERVICE } from '$lib/baseBranch/baseBranchService.svelte';
 	import { DEFAULT_FORGE_FACTORY } from '$lib/forge/forgeFactory.svelte';
 	import {
@@ -51,6 +51,7 @@
 	const baseBranchResponse = $derived(baseBranchService.baseBranch(projectId));
 	const base = $derived(baseBranchResponse.current.data);
 	const urlService = inject(URL_SERVICE);
+	const clipboardService = inject(CLIPBOARD_SERVICE);
 
 	let modal = $state<Modal>();
 	let integratingUpstream = $state<OperationState>('inert');
@@ -324,7 +325,7 @@
 								author={commit.author.name}
 								url={commitUrl}
 								onOpen={(url) => urlService.openExternalUrl(url)}
-								onCopy={() => writeClipboard(commit.id)}
+								onCopy={() => clipboardService.write(commit.id)}
 							/>
 						{/each}
 					</ScrollableContainer>
diff --git a/apps/desktop/src/components/PullRequestCard.svelte b/apps/desktop/src/components/PullRequestCard.svelte
@@ -2,7 +2,7 @@
 	import PrStatusBadge from '$components/PrStatusBadge.svelte';
 	import PullRequestPolling from '$components/PullRequestPolling.svelte';
 	import ReduxResult from '$components/ReduxResult.svelte';
-	import { writeClipboard } from '$lib/backend/clipboard';
+	import { CLIPBOARD_SERVICE } from '$lib/backend/clipboard';
 	import { DEFAULT_FORGE_FACTORY } from '$lib/forge/forgeFactory.svelte';
 	import { URL_SERVICE } from '$lib/utils/url';
 	import { inject } from '@gitbutler/shared/context';
@@ -58,6 +58,7 @@
 	const prService = $derived(forge.current.prService);
 	const checksService = $derived(forge.current.checks);
 	const urlService = inject(URL_SERVICE);
+	const clipboardService = inject(CLIPBOARD_SERVICE);
 
 	const prResult = $derived(prService?.get(prNumber, { forceRefetch: true }));
 	const pr = $derived(prResult?.current.data);
@@ -125,7 +126,7 @@
 				<ContextMenuItem
 					label="Copy link"
 					onclick={() => {
-						writeClipboard(pr.htmlUrl);
+						clipboardService.write(pr.htmlUrl);
 						contextMenuEl?.close();
 					}}
 				/>
@@ -152,7 +153,7 @@
 					<ContextMenuItem
 						label="Copy checks"
 						onclick={() => {
-							writeClipboard(`${pr.htmlUrl}/checks`);
+							clipboardService.write(`${pr.htmlUrl}/checks`);
 							contextMenuEl?.close();
 						}}
 					/>
@@ -178,7 +179,7 @@
 					icon="copy-small"
 					tooltip="Copy {abbr} link"
 					onclick={() => {
-						writeClipboard(pr.htmlUrl);
+						clipboardService.write(pr.htmlUrl);
 					}}
 				/>
 				<Button
diff --git a/apps/desktop/src/components/PushButton.svelte b/apps/desktop/src/components/PushButton.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import ReduxResult from '$components/ReduxResult.svelte';
-	import { writeClipboard } from '$lib/backend/clipboard';
+	import { CLIPBOARD_SERVICE } from '$lib/backend/clipboard';
 	import { DEFAULT_FORGE_FACTORY } from '$lib/forge/forgeFactory.svelte';
 	import { PROJECTS_SERVICE } from '$lib/project/projectsService';
 	import {
@@ -49,6 +49,8 @@
 	const uiState = inject(UI_STATE);
 	const forge = inject(DEFAULT_FORGE_FACTORY);
 	const urlService = inject(URL_SERVICE);
+	const clipboardService = inject(CLIPBOARD_SERVICE);
+
 	const branchDetails = $derived(stackService.branchDetails(projectId, stackId, branchName));
 	const projectResult = $derived(projectsService.getProject(projectId));
 	const [pushStack, pushResult] = stackService.pushStack;
@@ -201,7 +203,7 @@
 								author={commit.author.name}
 								url={commitUrl}
 								onOpen={(url) => urlService.openExternalUrl(url)}
-								onCopy={() => writeClipboard(commit.id)}
+								onCopy={() => clipboardService.write(commit.id)}
 							/>
 						{/each}
 					</ScrollableContainer>
diff --git a/apps/desktop/src/lib/backend/clipboard.ts b/apps/desktop/src/lib/backend/clipboard.ts
@@ -1,32 +1,39 @@
+import { InjectionToken } from '@gitbutler/shared/context';
 import { chipToasts } from '@gitbutler/ui';
-import { writeText, readText } from '@tauri-apps/plugin-clipboard-manager';
+import type { IBackend } from '$lib/backend/backend';
 
-/**
- * Copy the provided text into the the system clipboard. Upon completion, a toast will be displayed which contains
- * information about the success of this operation.
- *
- * @param text text to be copied into the system clipboard.
- * @param errorMessage optional custom error message which will be displayed if the operation failes. If this is
- *                     not provided, a default generic message will be used.
- */
-export async function writeClipboard(
-	text: string,
-	opt: {
-		errorMessage?: string;
-		message?: string;
-	} = {}
-) {
-	const { errorMessage, message } = opt;
-	await writeText(text)
-		.then(() => {
-			chipToasts.success(message || 'Copied to clipboard');
-		})
-		.catch((err) => {
-			chipToasts.error(errorMessage || 'Failed to copy');
-			console.error(errorMessage, err);
-		});
-}
+export const CLIPBOARD_SERVICE = new InjectionToken<ClipboardService>('ClipboardService');
+export default class ClipboardService {
+	constructor(private backend: IBackend) {}
+
+	/**
+	 * Copy the provided text into the the system clipboard. Upon completion, a toast will be displayed which contains
+	 * information about the success of this operation.
+	 *
+	 * @param text text to be copied into the system clipboard.
+	 * @param errorMessage optional custom error message which will be displayed if the operation failes. If this is
+	 *                     not provided, a default generic message will be used.
+	 */
+	async write(
+		text: string,
+		opt: {
+			errorMessage?: string;
+			message?: string;
+		} = {}
+	) {
+		const { errorMessage, message } = opt;
+		await this.backend
+			.writeTextToClipboard(text)
+			.then(() => {
+				chipToasts.success(message || 'Copied to clipboard');
+			})
+			.catch((err) => {
+				chipToasts.error(errorMessage || 'Failed to copy');
+				console.error(errorMessage, err);
+			});
+	}
 
-export async function readClipboard() {
-	return await readText();
+	async read() {
+		return await this.backend.readTextFromClipboard();
+	}
 }
diff --git a/apps/desktop/src/routes/+layout.svelte b/apps/desktop/src/routes/+layout.svelte
@@ -20,6 +20,7 @@
 	import { EVENT_CONTEXT } from '$lib/analytics/eventContext';
 	import { POSTHOG_WRAPPER } from '$lib/analytics/posthog';
 	import { BACKEND } from '$lib/backend';
+	import ClipboardService, { CLIPBOARD_SERVICE } from '$lib/backend/clipboard';
 	import BaseBranchService, { BASE_BRANCH_SERVICE } from '$lib/baseBranch/baseBranchService.svelte';
 	import { BranchService, BRANCH_SERVICE } from '$lib/branches/branchService.svelte';
 	import CLIManager, { CLI_MANAGER } from '$lib/cli/cli';
@@ -199,6 +200,7 @@
 	);
 
 	const urlService = new URLService(data.backend);
+	const clipboardService = new ClipboardService(data.backend);
 
 	const projectsService = new ProjectsService(clientState, data.homeDir, data.backend);
 	provide(PROJECTS_SERVICE, projectsService);
@@ -284,6 +286,7 @@
 	provide(RESIZE_SYNC, new ResizeSync());
 	provide(GIT_SERVICE, new GitService(data.backend));
 	provide(URL_SERVICE, urlService);
+	provide(CLIPBOARD_SERVICE, clipboardService);
 
 	provide(BACKEND, data.backend);
 
