Migrate main search to UI guidelines (#6968)

frontend/src/lib/components/ContentSearchInner.svelte

@@ -162,7 +162,7 @@
 <div class="flex flex-col gap-2">
 	<div class="flex gap-2 flex-wrap sticky top-0 left-0 right-0 bg-surface">
 		<div class="p-2">
-			<ToggleButtonGroup bind:selected={searchKind} class="h-10 ">
+			<ToggleButtonGroup bind:selected={searchKind}>
 				{#snippet children({ item })}
 					<ToggleButton small value="all" label={'All' + counts.all} {item} />
 					<ToggleButton
@@ -251,12 +251,8 @@
 							{#snippet actions()}
 								<Button
 									href={`/scripts/get/${item.path}`}
-									color="light"
-									size="xs"
 									startIcon={{ icon: ExternalLink }}
-									on:click={() => {
-										dispatch('close')
-									}}
+									on:click={() => dispatch('close')}
 								>
 									Open
 								</Button>
@@ -264,8 +260,6 @@
 								<Button
 									href={`/scripts/edit/${item.path}?no_draft=true`}
 									target="_blank"
-									color="light"
-									size="xs"
 									startIcon={{ icon: Edit }}
 								>
 									Edit
@@ -279,13 +273,8 @@
 					{#if filteredScriptItems.length > showNbScripts}
 						<Button
 							color="light"
-							size="xs"
-							on:click={() => {
-								showNbScripts += 30
-							}}
-							startIcon={{
-								icon: ArrowDown
-							}}
+							on:click={() => (showNbScripts += 30)}
+							startIcon={{ icon: ArrowDown }}
 						>
 							Show more scripts ({showNbScripts} of {filteredScriptItems.length})
 						</Button>
@@ -299,13 +288,7 @@
 							on:close
 						>
 							{#snippet actions()}
-								<Button
-									href={`/resources#${item.path}`}
-									color="light"
-									target="_blank"
-									size="xs"
-									startIcon={{ icon: Edit }}
-								>
+								<Button href={`/resources#${item.path}`} target="_blank" startIcon={{ icon: Edit }}>
 									Edit
 								</Button>
 							{/snippet}
@@ -318,12 +301,8 @@
 						<Button
 							color="light"
 							size="xs"
-							on:click={() => {
-								showNbResources += 30
-							}}
-							startIcon={{
-								icon: ArrowDown
-							}}
+							on:click={() => (showNbResources += 30)}
+							startIcon={{ icon: ArrowDown }}
 						>
 							Show more resources ({showNbResources} of {filteredResourceItems.length})
 						</Button>
@@ -339,20 +318,14 @@
 							{#snippet actions()}
 								<Button
 									href={`/flows/get/${item.path}`}
-									color="light"
-									size="xs"
 									startIcon={{ icon: ExternalLink }}
-									on:click={() => {
-										dispatch('close')
-									}}
+									on:click={() => dispatch('close')}
 								>
 									Open
 								</Button>
 								<Button
 									href={`/flows/edit/${item.path}?no_draft=true`}
-									color="light"
 									target="_blank"
-									size="xs"
 									startIcon={{ icon: Edit }}
 								>
 									Edit
@@ -368,12 +341,8 @@
 						<Button
 							color="light"
 							size="xs"
-							on:click={() => {
-								showNbFlows += 30
-							}}
-							startIcon={{
-								icon: ArrowDown
-							}}
+							on:click={() => (showNbFlows += 30)}
+							startIcon={{ icon: ArrowDown }}
 						>
 							Show more flows ({showNbFlows} of {filteredFlowItems.length})
 						</Button>
@@ -389,20 +358,14 @@
 							{#snippet actions()}
 								<Button
 									href={`/apps/get/${item.path}`}
-									color="light"
-									size="xs"
 									startIcon={{ icon: ExternalLink }}
-									on:click={() => {
-										dispatch('close')
-									}}
+									on:click={() => dispatch('close')}
 								>
 									Open
 								</Button>
 								<Button
 									href={`/apps/edit/${item.path}?no_draft=true`}
-									color="light"
 									target="_blank"
-									size="xs"
 									startIcon={{ icon: Edit }}
 								>
 									Edit
@@ -418,12 +381,8 @@
 						<Button
 							color="light"
 							size="xs"
-							on:click={() => {
-								showNbApps += 30
-							}}
-							startIcon={{
-								icon: ArrowDown
-							}}
+							on:click={() => (showNbApps += 30)}
+							startIcon={{ icon: ArrowDown }}
 						>
 							Show more apps ({showNbApps} of {filteredAppItems.length})
 						</Button>

frontend/src/lib/components/ContentSearchInnerItem.svelte

@@ -16,7 +16,7 @@
 <div class="flex flex-col gap-2">
 	<div class="flex flex-row items-center justify-between">
 		<a
-			class="text-sm text-blue-500 truncate hover:underline"
+			class="text-accent truncate text-xs"
 			{href}
 			onclick={() => {
 				dispatch('close')

frontend/src/lib/components/copilot/AskAiButton.svelte

@@ -2,6 +2,7 @@
 	import { Button } from '$lib/components/common'
 	import { WandSparkles } from 'lucide-svelte'
 	import { aiChatManager } from './chat/AIChatManager.svelte'
+	import { flowAIBtnClasses } from './chat/flow/FlowAIButton.svelte'
 	interface Props {
 		label?: string
 		initialInput?: string
@@ -27,8 +28,8 @@
 	startIcon={{
 		icon: WandSparkles
 	}}
-	size="xs2"
-	btnClasses="!text-ai border border-gray-200 dark:border-gray-600 !bg-surface"
+	unifiedSize="md"
+	btnClasses={flowAIBtnClasses('default')}
 	on:click={onClick}
 >
 	{label}

frontend/src/lib/components/search/GlobalSearchModal.svelte

@@ -615,7 +615,7 @@
 			>
 				<div class="px-4 py-2 flex flex-row gap-1 items-center border-b">
 					<Search size="16" />
-					<div class="relative inline-block w-full">
+					<div class="relative inline-block flex-1">
 						<input
 							id="quickSearchInput"
 							bind:this={textInput}
@@ -626,9 +626,10 @@
 						/>
 						<label
 							for="quickSearchInput"
-							class="absolute top-1/2 left-2 transform -translate-y-1/2 pointer-events-none text-gray-400 transition-all duration-200 whitespace-pre"
-							>{placeholderFromPrefix(searchTerm)}</label
+							class="absolute top-1/2 left-2 transform -translate-y-1/2 pointer-events-none text-gray-400 transition-all duration-200 whitespace-pre text-xs"
 						>
+							{placeholderFromPrefix(searchTerm)}
+						</label>
 					</div>
 					{#if (itemMap[tab] ?? []).length === 0 && searchTerm.length > 0}
 						<AskAiButton