ToggleButton component updated

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

@@ -346,11 +346,13 @@
 					<!-- FEATURES -->
 					<div class="features-section">
 						<ToggleButton
+							icon="doc"
 							label="Use PR template"
 							checked={showPRTemplateSelect}
 							onclick={handleToggleUseTemplate}
 						/>
 						<ToggleButton
+							icon="ai-small"
 							label="AI generation"
 							checked={showAiBox}
 							tooltip={!aiConfigurationValid ? 'AI service is not configured' : undefined}
@@ -524,7 +526,9 @@
 	.pr-ai__actions {
 		width: 100%;
 		display: flex;
+		justify-content: flex-end;
 		gap: 6px;
+		padding: 12px;
 	}
 
 	/* FOOTER */

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

@@ -1,23 +1,31 @@
 <script lang="ts">
 	import Toggle from '$lib/shared/Toggle.svelte';
+	import Icon from '@gitbutler/ui/Icon.svelte';
 	import Tooltip from '@gitbutler/ui/Tooltip.svelte';
+	import iconsJson from '@gitbutler/ui/data/icons.json';
 
 	interface Props {
 		id?: string;
 		label: string;
 		checked: boolean;
+		icon?: keyof typeof iconsJson;
 		tooltip?: string;
 		disabled?: boolean;
 		onclick?: (e: MouseEvent) => void;
 	}
 
-	let { id, label, checked = $bindable(), tooltip, disabled, onclick }: Props = $props();
+	let { id, label, checked = $bindable(), icon, tooltip, disabled, onclick }: Props = $props();
 
 	const toggleId = id || label.toLowerCase().replace(/\s/g, '-');
 </script>
 
 <Tooltip text={tooltip}>
 	<label class="toggle-btn" class:disabled for={toggleId}>
+		{#if icon}
+			<div class="toggle-icon">
+				<Icon name={icon} />
+			</div>
+		{/if}
 		<span class="text-12 text-semibold toggle-btn__label">{label}</span>
 		<Toggle
 			id={toggleId}
@@ -47,6 +55,13 @@
 		}
 	}
 
+	.toggle-icon {
+		display: flex;
+		opacity: 0.5;
+		margin-left: -2px;
+		margin-right: -2px;
+	}
+
 	.toggle-btn__label {
 		color: var(--clr-text-2);
 	}