ai provider toggle button more

frontend/src/lib/components/AIProviderPicker.svelte

@@ -8,6 +8,7 @@
 	import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
 	import ResourcePicker from './ResourcePicker.svelte'
+	import ToggleButtonMore from './common/toggleButton-v2/ToggleButtonMore.svelte'
 
 	interface ProviderValue {
 		kind?: AIProvider
@@ -157,11 +158,23 @@
 <div class="w-full flex flex-col gap-1 bg-surface-secondary rounded-md">
 	<!-- Provider Selection -->
 	<div class="flex flex-col gap-2">
-		<ToggleButtonGroup selected={value?.kind} onSelected={onProviderChange} {disabled} wrap>
+		<ToggleButtonGroup
+			selected={value?.kind}
+			onSelected={onProviderChange}
+			{disabled}
+			wrap
+			tabListClass="w-full"
+		>
 			{#snippet children({ item })}
-				{#each providerOptions as option}
+				{#each providerOptions.slice(0, 3) as option}
 					<ToggleButton value={option.value} label={option.label} {item} />
 				{/each}
+				<ToggleButtonMore
+					class="ml-auto"
+					togglableItems={providerOptions.slice(3)}
+					{item}
+					bind:selected={() => value?.kind, (v) => v && onProviderChange(v)}
+				/>
 			{/snippet}
 		</ToggleButtonGroup>
 	</div>

frontend/src/lib/components/common/toggleButton-v2/ToggleButtonMore.svelte

@@ -18,6 +18,7 @@
 		item?: any | undefined
 		selected?: string | undefined
 		togglableItems: TogglableItem[]
+		class?: string
 	}
 
 	let {
@@ -27,7 +28,8 @@
 		id = undefined,
 		item = undefined,
 		selected = $bindable(undefined),
-		togglableItems
+		togglableItems,
+		class: className = ''
 	}: Props = $props()
 
 	let items = togglableItems.map((i) => ({
@@ -44,7 +46,7 @@
 <Popover
 	disablePopup={true}
 	notClickable
-	class={twMerge('flex', disabled ? 'cursor-not-allowed' : 'cursor-pointer')}
+	class={twMerge('flex', disabled ? 'cursor-not-allowed' : 'cursor-pointer', className)}
 	disappearTimeout={0}
 >
 	<div {id} class="flex">