From 628a10e34adf89c9ca9f6bf6bb8dcc31cbdab613 Mon Sep 17 00:00:00 2001
From: Taylor Wilsdon <tbarrett@yelp.com>
Date: Fri, 9 May 2025 10:26:48 -0400
Subject: [PATCH] make the collapse toggle more subtle & compact

---
 .../chat/MessageInput/InputMenu.svelte        | 26 ++++++++++++-------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/chat/MessageInput/InputMenu.svelte b/src/lib/components/chat/MessageInput/InputMenu.svelte
index b3918b93d..bbfc20e18 100644
--- a/src/lib/components/chat/MessageInput/InputMenu.svelte
+++ b/src/lib/components/chat/MessageInput/InputMenu.svelte
@@ -33,6 +33,7 @@
 
 	let tools = {};
 	let show = false;
+	let showAllTools = false;
 
 	$: if (show) {
 		init();
@@ -102,7 +103,7 @@
 			transition={flyAndScale}
 		>
 			{#if Object.keys(tools).length > 0}
-				<div class="max-h-28 overflow-y-auto scrollbar-thin">
+				<div class="{showAllTools ? '' : 'max-h-28'} overflow-y-auto scrollbar-thin">
 					{#each Object.keys(tools) as toolId}
 						<button
 							class="flex w-full justify-between gap-2 items-center px-3 py-2 text-sm font-medium cursor-pointer rounded-xl"
@@ -141,18 +142,25 @@
 						</button>
 					{/each}
 				</div>
-<button
-						class="flex w-full justify-center px-3 py-2 text-sm font-medium cursor-pointer rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800"
+					<button
+						class="flex w-full justify-center items-center text-sm font-medium cursor-pointer rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800"
 						on:click={() => {
-							const element = document.querySelector('.max-h-28');
-							if (element) {
-								element.classList.remove('max-h-28');
-							}
+							showAllTools = !showAllTools;
 						}}
+						title={showAllTools ? $i18n.t('Show Less') : $i18n.t('Show All')}
 					>
-						^
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke-width="2.5"
+							stroke="currentColor"
+							class="size-3 transition-transform duration-200 {showAllTools ? 'rotate-180' : ''} text-gray-300 dark:text-gray-600"
+						>
+							<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"
+							></path>
+						</svg>
 					</button>
-
 				<hr class="border-black/5 dark:border-white/5 my-1" />
 			{/if}