Fix Custom system prompts settings (#6954)

* Fix Custom system prompts settings

* fix CI

frontend/src/lib/components/UserSettings.svelte

@@ -7,7 +7,6 @@
 	import { createEventDispatcher } from 'svelte'
 	import UserInfoSettings from './settings/UserInfoSettings.svelte'
 	import AIUserSettings from './settings/AIUserSettings.svelte'
-	import UserAIPromptsSettings from './settings/UserAIPromptsSettings.svelte'
 
 	interface Props {
 		scopes?: string[] | undefined
@@ -70,7 +69,6 @@
 					</div>
 					<div class="min-w-0">
 						<AIUserSettings />
-						<UserAIPromptsSettings />
 					</div>
 				</div>
 			{/if}

frontend/src/lib/components/settings/AIUserSettings.svelte

@@ -7,6 +7,7 @@
 	import { getLocalSetting, storeLocalSetting } from '$lib/utils'
 	import Toggle from '../Toggle.svelte'
 	import type { Writable } from 'svelte/store'
+	import UserAIPromptsSettings from './UserAIPromptsSettings.svelte'
 
 	$effect(() => {
 		loadSettings()
@@ -62,4 +63,6 @@
 			}}
 		/>
 	</div>
+
+	<UserAIPromptsSettings />
 </div>

frontend/src/lib/components/settings/UserAIPromptsSettings.svelte

@@ -2,14 +2,13 @@
 	import { storeLocalSetting } from '$lib/utils'
 	import CustomAIPrompts from '../copilot/CustomAIPrompts.svelte'
 	import Button from '../common/button/Button.svelte'
-	import { ChevronDown, ChevronRight } from 'lucide-svelte'
 	import { sendUserToast } from '$lib/toast'
 	import { getUserCustomPrompts } from '$lib/aiStore'
+	import Section from '../Section.svelte'
 
 	const USER_CUSTOM_PROMPTS_KEY = 'userCustomAIPrompts'
 
 	let customPrompts = $state<Record<string, string>>(getUserCustomPrompts())
-	let isExpanded = $state(false)
 
 	function save() {
 		storeLocalSetting(USER_CUSTOM_PROMPTS_KEY, JSON.stringify(customPrompts))
@@ -20,23 +19,10 @@
 </script>
 
 <div class="mt-4">
-	<button
-		type="button"
-		class="flex items-center border-b cursor-pointer hover:bg-surface-hover w-full transition-colors"
-		onclick={() => (isExpanded = !isExpanded)}
-	>
-		{#if isExpanded}
-			<ChevronDown size={16} />
-		{:else}
-			<ChevronRight size={16} />
-		{/if}
-		<h2>Custom system prompts</h2>
-		{#if hasPrompts}
-			<div class="w-2 h-2 bg-blue-500 rounded-full ml-2"></div>
-		{/if}
-	</button>
-
-	{#if isExpanded}
+	<Section label="Custom system prompts" collapsable animate>
+		{#snippet header()}
+			<div class="w-2 h-2 bg-blue-500 rounded-full ml-2 {hasPrompts ? '' : 'hidden'}"></div>
+		{/snippet}
 		<div>
 			<CustomAIPrompts
 				bind:customPrompts
@@ -46,5 +32,5 @@
 				<Button onclick={save}>Save</Button>
 			</div>
 		</div>
-	{/if}
+	</Section>
 </div>