From 949b5fd63ebb675539f402a401453e01b9fd6627 Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Sat, 29 Nov 2025 21:41:36 +0100
Subject: [PATCH] refactor: Tooltip Provider from core layout

---
 .../ChatFormActionFileAttachments.svelte      |  9 ++--
 .../ChatFormActionRecord.svelte               |  2 +-
 .../ChatFormActionSubmit.svelte               | 18 +++----
 .../components/app/misc/ActionButton.svelte   |  3 +-
 .../components/app/misc/ActionDropdown.svelte |  3 +-
 .../components/app/models/ModelBadge.svelte   |  3 +-
 .../ui/sidebar/sidebar-provider.svelte        | 27 +++++-----
 tools/server/webui/src/routes/+layout.svelte  | 54 ++++++++++---------
 8 files changed, 57 insertions(+), 62 deletions(-)

diff --git a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionFileAttachments.svelte b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionFileAttachments.svelte
index b99b352b66..f4aa8a3a3f 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionFileAttachments.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionFileAttachments.svelte
@@ -3,7 +3,6 @@
 	import { Button } from '$lib/components/ui/button';
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 	import * as Tooltip from '$lib/components/ui/tooltip';
-	import { TOOLTIP_DELAY_DURATION } from '$lib/constants/tooltip-config';
 	import { FILE_TYPE_ICONS } from '$lib/constants/icons';
 	import { FileTypeCategory } from '$lib/enums';
 
@@ -37,7 +36,7 @@
 <div class="flex items-center gap-1 {className}">
 	<DropdownMenu.Root>
 		<DropdownMenu.Trigger name="Attach files">
-			<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
+			<Tooltip.Root>
 				<Tooltip.Trigger>
 					<Button
 						class="file-upload-button h-8 w-8 rounded-full bg-transparent p-0 text-muted-foreground hover:bg-foreground/10 hover:text-foreground"
@@ -57,7 +56,7 @@
 		</DropdownMenu.Trigger>
 
 		<DropdownMenu.Content align="start" class="w-48">
-			<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
+			<Tooltip.Root>
 				<Tooltip.Trigger class="w-full">
 					<DropdownMenu.Item
 						class="images-button flex cursor-pointer items-center gap-2"
@@ -77,7 +76,7 @@
 				{/if}
 			</Tooltip.Root>
 
-			<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
+			<Tooltip.Root>
 				<Tooltip.Trigger class="w-full">
 					<DropdownMenu.Item
 						class="audio-button flex cursor-pointer items-center gap-2"
@@ -106,7 +105,7 @@
 				<span>Text Files</span>
 			</DropdownMenu.Item>
 
-			<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
+			<Tooltip.Root>
 				<Tooltip.Trigger class="w-full">
 					<DropdownMenu.Item
 						class="flex cursor-pointer items-center gap-2"
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionRecord.svelte b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionRecord.svelte
index 29c50e4d81..f1b084906d 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionRecord.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionRecord.svelte
@@ -23,7 +23,7 @@
 </script>
 
 <div class="flex items-center gap-1 {className}">
-	<Tooltip.Root delayDuration={100}>
+	<Tooltip.Root>
 		<Tooltip.Trigger>
 			<Button
 				class="h-8 w-8 rounded-full p-0 {isRecording
diff --git a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionSubmit.svelte b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionSubmit.svelte
index ef84478957..861cd182e8 100644
--- a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionSubmit.svelte
+++ b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionSubmit.svelte
@@ -41,17 +41,15 @@
 {/snippet}
 
 {#if tooltipLabel}
-	<Tooltip.Provider>
-		<Tooltip.Root>
-			<Tooltip.Trigger>
-				{@render submitButton()}
-			</Tooltip.Trigger>
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			{@render submitButton()}
+		</Tooltip.Trigger>
 
-			<Tooltip.Content>
-				<p>{tooltipLabel}</p>
-			</Tooltip.Content>
-		</Tooltip.Root>
-	</Tooltip.Provider>
+		<Tooltip.Content>
+			<p>{tooltipLabel}</p>
+		</Tooltip.Content>
+	</Tooltip.Root>
 {:else}
 	{@render submitButton()}
 {/if}
diff --git a/tools/server/webui/src/lib/components/app/misc/ActionButton.svelte b/tools/server/webui/src/lib/components/app/misc/ActionButton.svelte
index 11c4679a6e..411a8b6094 100644
--- a/tools/server/webui/src/lib/components/app/misc/ActionButton.svelte
+++ b/tools/server/webui/src/lib/components/app/misc/ActionButton.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { Button } from '$lib/components/ui/button';
 	import * as Tooltip from '$lib/components/ui/tooltip';
-	import { TOOLTIP_DELAY_DURATION } from '$lib/constants/tooltip-config';
 	import type { Component } from 'svelte';
 
 	interface Props {
@@ -27,7 +26,7 @@
 	}: Props = $props();
 </script>
 
-<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
+<Tooltip.Root>
 	<Tooltip.Trigger>
 		<Button
 			{variant}
diff --git a/tools/server/webui/src/lib/components/app/misc/ActionDropdown.svelte b/tools/server/webui/src/lib/components/app/misc/ActionDropdown.svelte
index da29e2584f..83d856d10e 100644
--- a/tools/server/webui/src/lib/components/app/misc/ActionDropdown.svelte
+++ b/tools/server/webui/src/lib/components/app/misc/ActionDropdown.svelte
@@ -2,7 +2,6 @@
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 	import * as Tooltip from '$lib/components/ui/tooltip';
 	import { KeyboardShortcutInfo } from '$lib/components/app';
-	import { TOOLTIP_DELAY_DURATION } from '$lib/constants/tooltip-config';
 	import type { Component } from 'svelte';
 
 	interface ActionItem {
@@ -40,7 +39,7 @@
 		onclick={(e) => e.stopPropagation()}
 	>
 		{#if triggerTooltip}
-			<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
+			<Tooltip.Root>
 				<Tooltip.Trigger>
 					{@render iconComponent(triggerIcon, 'h-3 w-3')}
 					<span class="sr-only">{triggerTooltip}</span>
diff --git a/tools/server/webui/src/lib/components/app/models/ModelBadge.svelte b/tools/server/webui/src/lib/components/app/models/ModelBadge.svelte
index 275699be7a..bea1bf6e3f 100644
--- a/tools/server/webui/src/lib/components/app/models/ModelBadge.svelte
+++ b/tools/server/webui/src/lib/components/app/models/ModelBadge.svelte
@@ -4,7 +4,6 @@
 	import { modelsStore } from '$lib/stores/models.svelte';
 	import { serverStore } from '$lib/stores/server.svelte';
 	import * as Tooltip from '$lib/components/ui/tooltip';
-	import { TOOLTIP_DELAY_DURATION } from '$lib/constants/tooltip-config';
 
 	interface Props {
 		class?: string;
@@ -42,7 +41,7 @@
 
 {#if model && isModelMode}
 	{#if showTooltip}
-		<Tooltip.Root delayDuration={TOOLTIP_DELAY_DURATION}>
+		<Tooltip.Root>
 			<Tooltip.Trigger>
 				{@render badgeContent()}
 			</Tooltip.Trigger>
diff --git a/tools/server/webui/src/lib/components/ui/sidebar/sidebar-provider.svelte b/tools/server/webui/src/lib/components/ui/sidebar/sidebar-provider.svelte
index ed90ea84eb..364235a499 100644
--- a/tools/server/webui/src/lib/components/ui/sidebar/sidebar-provider.svelte
+++ b/tools/server/webui/src/lib/components/ui/sidebar/sidebar-provider.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
 	import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import {
@@ -37,17 +36,15 @@
 
 <svelte:window onkeydown={sidebar.handleShortcutKeydown} />
 
-<Tooltip.Provider delayDuration={0}>
-	<div
-		data-slot="sidebar-wrapper"
-		style="--sidebar-width: {SIDEBAR_WIDTH}; --sidebar-width-icon: {SIDEBAR_WIDTH_ICON}; {style}"
-		class={cn(
-			'group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar',
-			className
-		)}
-		bind:this={ref}
-		{...restProps}
-	>
-		{@render children?.()}
-	</div>
-</Tooltip.Provider>
+<div
+	data-slot="sidebar-wrapper"
+	style="--sidebar-width: {SIDEBAR_WIDTH}; --sidebar-width-icon: {SIDEBAR_WIDTH_ICON}; {style}"
+	class={cn(
+		'group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar',
+		className
+	)}
+	bind:this={ref}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/tools/server/webui/src/routes/+layout.svelte b/tools/server/webui/src/routes/+layout.svelte
index edd9558c30..27dfac19c3 100644
--- a/tools/server/webui/src/routes/+layout.svelte
+++ b/tools/server/webui/src/routes/+layout.svelte
@@ -6,12 +6,14 @@
 	import { isLoading } from '$lib/stores/chat.svelte';
 	import { conversationsStore, activeMessages } from '$lib/stores/conversations.svelte';
 	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+	import * as Tooltip from '$lib/components/ui/tooltip';
 	import { isRouterMode, serverStore } from '$lib/stores/server.svelte';
 	import { config, settingsStore } from '$lib/stores/settings.svelte';
 	import { ModeWatcher } from 'mode-watcher';
 	import { Toaster } from 'svelte-sonner';
 	import { goto } from '$app/navigation';
 	import { modelsStore } from '$lib/stores/models.svelte';
+	import { TOOLTIP_DELAY_DURATION } from '$lib/constants/tooltip-config';
 
 	let { children } = $props();
 
@@ -169,35 +171,37 @@
 	});
 </script>
 
-<ModeWatcher />
+<Tooltip.Provider delayDuration={TOOLTIP_DELAY_DURATION}>
+	<ModeWatcher />
 
-<Toaster richColors />
+	<Toaster richColors />
 
-<DialogConversationTitleUpdate
-	bind:open={titleUpdateDialogOpen}
-	currentTitle={titleUpdateCurrentTitle}
-	newTitle={titleUpdateNewTitle}
-	onConfirm={handleTitleUpdateConfirm}
-	onCancel={handleTitleUpdateCancel}
-/>
+	<DialogConversationTitleUpdate
+		bind:open={titleUpdateDialogOpen}
+		currentTitle={titleUpdateCurrentTitle}
+		newTitle={titleUpdateNewTitle}
+		onConfirm={handleTitleUpdateConfirm}
+		onCancel={handleTitleUpdateCancel}
+	/>
 
-<Sidebar.Provider bind:open={sidebarOpen}>
-	<div class="flex h-screen w-full" style:height="{innerHeight}px">
-		<Sidebar.Root class="h-full">
-			<ChatSidebar bind:this={chatSidebar} />
-		</Sidebar.Root>
+	<Sidebar.Provider bind:open={sidebarOpen}>
+		<div class="flex h-screen w-full" style:height="{innerHeight}px">
+			<Sidebar.Root class="h-full">
+				<ChatSidebar bind:this={chatSidebar} />
+			</Sidebar.Root>
 
-		<Sidebar.Trigger
-			class="transition-left absolute left-0 z-[900] h-8 w-8 duration-200 ease-linear {sidebarOpen
-				? 'md:left-[var(--sidebar-width)]'
-				: ''}"
-			style="translate: 1rem 1rem;"
-		/>
+			<Sidebar.Trigger
+				class="transition-left absolute left-0 z-[900] h-8 w-8 duration-200 ease-linear {sidebarOpen
+					? 'md:left-[var(--sidebar-width)]'
+					: ''}"
+				style="translate: 1rem 1rem;"
+			/>
 
-		<Sidebar.Inset class="flex flex-1 flex-col overflow-hidden">
-			{@render children?.()}
-		</Sidebar.Inset>
-	</div>
-</Sidebar.Provider>
+			<Sidebar.Inset class="flex flex-1 flex-col overflow-hidden">
+				{@render children?.()}
+			</Sidebar.Inset>
+		</div>
+	</Sidebar.Provider>
+</Tooltip.Provider>
 
 <svelte:window onkeydown={handleKeydown} bind:innerHeight />