refac: styling

src/lib/components/chat/MessageInput/IntegrationsMenu.svelte

@@ -6,8 +6,10 @@
 
 	import { config, user, tools as _tools, mobile, settings, toolServers } from '$lib/stores';
 
+	import { getOAuthClientAuthorizationUrl } from '$lib/apis/configs';
 	import { getTools } from '$lib/apis/tools';
 
+	import Knobs from '$lib/components/icons/Knobs.svelte';
 	import Dropdown from '$lib/components/common/Dropdown.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Switch from '$lib/components/common/Switch.svelte';
@@ -20,8 +22,6 @@
 	import ChevronRight from '$lib/components/icons/ChevronRight.svelte';
 	import ChevronLeft from '$lib/components/icons/ChevronLeft.svelte';
 	import ValvesModal from '$lib/components/workspace/common/ValvesModal.svelte';
-	import { getOAuthClientAuthorizationUrl } from '$lib/apis/configs';
-	import { partition } from 'd3-hierarchy';
 
 	const i18n = getContext('i18n');
 
@@ -369,25 +369,7 @@
 												showValvesModal = true;
 											}}
 										>
-											<svg
-												xmlns="http://www.w3.org/2000/svg"
-												fill="none"
-												viewBox="0 0 24 24"
-												stroke-width="1.5"
-												stroke="currentColor"
-												class="size-4"
-											>
-												<path
-													stroke-linecap="round"
-													stroke-linejoin="round"
-													d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"
-												/>
-												<path
-													stroke-linecap="round"
-													stroke-linejoin="round"
-													d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-												/>
-											</svg>
+											<Knobs />
 										</button>
 									</Tooltip>
 								</div>

src/lib/components/icons/Knobs.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	export let className = 'w-4 h-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	stroke-width={strokeWidth}
+	fill="none"
+	stroke="currentColor"
+	viewBox="0 0 24 24"
+>
+	<!-- Top horizontal knob (left biased) -->
+	<line x1="3" y1="8" x2="6" y2="8" stroke-linecap="round" />
+	<line x1="12" y1="8" x2="21" y2="8" stroke-linecap="round" />
+	<circle cx="9" cy="8" r="2.5" stroke="currentColor" fill="none" />
+
+	<!-- Bottom horizontal knob (right biased) -->
+	<line x1="3" y1="16" x2="12" y2="16" stroke-linecap="round" />
+	<line x1="18" y1="16" x2="21" y2="16" stroke-linecap="round" />
+	<circle cx="15" cy="16" r="2.5" stroke="currentColor" fill="none" />
+</svg>