fix(web/ui): improve clickOutside handling and fix spacing in chat

Refactor clickOutside utility to support multiple excluded elements,
enabling better control over click event handling in complex UI parts.
Update HunkDiff to wait for table wrapper mount before setting excluded
elements for clickOutside, ensuring correct behavior. Fix prop names
accordingly in HunkDiffBody. Also replace non-breaking space with normal
space in MessageText for consistent spacing.

Author: estib-vega

apps/web/src/lib/components/chat/MessageText.svelte

@@ -12,6 +12,7 @@
 
 	const userMap = $derived(new Map(mentions.map((user) => [user.id, user])));
 	const words = $derived(getChatMessageWords(text, userMap));
+	const SPACE = ' ';
 </script>
 
 <span>
@@ -21,6 +22,6 @@
 		{:else}
 			<Mention mention={word.mention} />
 		{/if}
-		&nbsp;
+		{SPACE}
 	{/each}
 </span>

packages/ui/src/lib/HunkDiff.svelte

@@ -15,6 +15,7 @@
 		type LineSelector,
 		parseHunk
 	} from '$lib/utils/diffParsing';
+	import { isDefined } from '$lib/utils/typeguards';
 	import type { ContextMenuParams } from '$lib/hunkDiff/HunkDiffRow.svelte';
 	import type { Snippet } from 'svelte';
 	interface Props {
@@ -69,8 +70,6 @@
 
 	const BORDER_WIDTH = 1;
 
-	let tableWidth = $state<number>(0);
-	let tableHeight = $state<number>(0);
 	let numberHeaderWidth = $state<number>(0);
 
 	const hunk = $derived(parseHunk(hunkStr));
@@ -85,11 +84,11 @@
 	const showingCheckboxes = $derived(!hideCheckboxes && staged !== undefined);
 	const hunkHasLocks = $derived(lineLocks && lineLocks.length > 0);
 	const colspan = $derived(showingCheckboxes || hunkHasLocks ? 3 : 2);
+	let tableWrapperElem = $state<HTMLElement>();
 </script>
 
 <div
-	bind:clientWidth={tableWidth}
-	bind:clientHeight={tableHeight}
+	bind:this={tableWrapperElem}
 	class="table__wrapper hide-native-scrollbar contrast-{diffContrast}"
 	style="--tab-size: {tabSize}; --diff-font: {diffFont};"
 	style:font-variant-ligatures={diffLigatures ? 'common-ligatures' : 'none'}
@@ -134,28 +133,38 @@
 				</tr>
 			</thead>
 
-			<HunkDiffBody
-				comment={hunk.comment}
-				{filePath}
-				content={hunk.contentSections}
-				{onLineClick}
-				clearLineSelection={() => clearLineSelection?.(filePath)}
-				{wrapText}
-				{tabSize}
-				{diffFont}
-				{inlineUnifiedDiffs}
-				{selectedLines}
-				{lineLocks}
-				{numberHeaderWidth}
-				onCopySelection={onCopySelection && handleCopySelection}
-				{onQuoteSelection}
-				{staged}
-				{stagedLines}
-				{hideCheckboxes}
-				{handleLineContextMenu}
-				{clickOutsideExcludeElement}
-				{lockWarning}
-			/>
+			{#if tableWrapperElem}
+				<!-- We need to await the table wrapper to be mounted in order to set the array of elements
+			 to ignore when clicking outside.
+			 This is the case because the clickOutside handler needs to know which elements to ignore
+			 at mount time. Reactive updates to the array will not work as expected. -->
+				{@const elemetsToIgnoreInClickOutside = [
+					clickOutsideExcludeElement,
+					tableWrapperElem
+				].filter(isDefined)}
+				<HunkDiffBody
+					comment={hunk.comment}
+					{filePath}
+					content={hunk.contentSections}
+					{onLineClick}
+					clearLineSelection={() => clearLineSelection?.(filePath)}
+					{wrapText}
+					{tabSize}
+					{diffFont}
+					{inlineUnifiedDiffs}
+					{selectedLines}
+					{lineLocks}
+					{numberHeaderWidth}
+					onCopySelection={onCopySelection && handleCopySelection}
+					{onQuoteSelection}
+					{staged}
+					{stagedLines}
+					{hideCheckboxes}
+					{handleLineContextMenu}
+					clickOutsideExcludeElements={elemetsToIgnoreInClickOutside}
+					{lockWarning}
+				/>
+			{/if}
 		</table>
 	</ScrollableContainer>
 </div>

packages/ui/src/lib/hunkDiff/HunkDiffBody.svelte

@@ -36,7 +36,7 @@
 		stagedLines?: LineId[];
 		hideCheckboxes?: boolean;
 		handleLineContextMenu?: (params: ContextMenuParams) => void;
-		clickOutsideExcludeElement?: HTMLElement;
+		clickOutsideExcludeElements?: HTMLElement[];
 		comment?: string;
 		lockWarning?: Snippet<[DependencyLock[]]>;
 	}
@@ -60,7 +60,7 @@
 		stagedLines,
 		hideCheckboxes,
 		handleLineContextMenu,
-		clickOutsideExcludeElement,
+		clickOutsideExcludeElements,
 		lockWarning
 	}: Props = $props();
 
@@ -240,7 +240,7 @@
 		bind:clientHeight={chunkHeight[chunkIdx]}
 		use:clickOutside={{
 			handler: handleClearSelection,
-			excludeElement: clickOutsideExcludeElement
+			excludeElement: clickOutsideExcludeElements
 		}}
 		use:intersectionObserver={{
 			callback: (entries) => {

packages/ui/src/lib/utils/clickOutside.ts

@@ -1,11 +1,25 @@
-export type ClickOpts = { excludeElement?: Element; handler: (event: MouseEvent) => void };
+export type ClickOpts = {
+	excludeElement?: Element | Element[];
+	handler: (event: MouseEvent) => void;
+};
+
+function elementShouldBeExcluded(
+	element: Element | Element[] | undefined,
+	target: HTMLElement
+): boolean {
+	if (!element) return false;
+	if (Array.isArray(element)) {
+		return element.some((el) => el.contains(target));
+	}
+	return element.contains(target);
+}
 
 export function clickOutside(node: HTMLElement, params: ClickOpts) {
 	function onClick(event: MouseEvent) {
 		if (
 			node &&
 			!node.contains(event.target as HTMLElement) &&
-			!params.excludeElement?.contains(event.target as HTMLElement)
+			!elementShouldBeExcluded(params.excludeElement, event.target as HTMLElement)
 		) {
 			params.handler(event);
 		}