refac

src/lib/components/chat/Placeholder/ChatList.svelte

@@ -18,6 +18,7 @@
 	import ChevronRight from '$lib/components/icons/ChevronRight.svelte';
 	import FolderTags from './FolderTags.svelte';
 	import FolderChatMenu from './FolderChatMenu.svelte';
+	import FolderChatLink from './FolderChatLink.svelte';
 	import FolderStatusControl from './FolderStatus.svelte';
 	import StatusIcon from './FolderStatusIcon.svelte';
 	import FolderStatusTime from './FolderStatusTime.svelte';
@@ -235,15 +236,16 @@
 									}}
 								/>
 							{:else}
-								<a
-									data-row-link
-									class="min-w-0 shrink truncate rounded text-[0.8125rem] leading-5 outline-none focus-visible:underline {unread
+								<FolderChatLink
+									rowLink
+									chatId={chat.id}
+									title={chat.title}
+									disabled={!!menuOpen[chat.id]}
+									className="min-w-0 shrink truncate rounded text-[0.8125rem] leading-5 outline-none focus-visible:underline {unread
 										? 'text-gray-900 dark:text-white'
 										: 'text-gray-700 dark:text-gray-200'}"
-									href={`/c/${chat.id}`}
-									title={chat.title}
-									on:click={(event) => openFolderChat(chat, appLayout, event)}>{chat.title}</a
-								>
+									onclick={(event) => openFolderChat(chat, appLayout, event)}
+								/>
 							{/if}
 							{#if chat.search_snippet}
 								<span

src/lib/components/chat/Placeholder/FolderBoard.svelte

@@ -15,6 +15,7 @@
 	import Plus from '$lib/components/icons/Plus.svelte';
 	import ChevronRight from '$lib/components/icons/ChevronRight.svelte';
 	import FolderTags from './FolderTags.svelte';
+	import FolderChatLink from './FolderChatLink.svelte';
 	import FolderStatusControl from './FolderStatus.svelte';
 	import StatusIcon from './FolderStatusIcon.svelte';
 	import FolderStatusTime from './FolderStatusTime.svelte';
@@ -192,15 +193,16 @@
 					{/if}
 				</span>
 			{/if}
-			<a
-				class="min-w-0 flex-1 line-clamp-2 text-[0.8125rem] leading-5 outline-none focus-visible:underline {unread
+			<FolderChatLink
+				chatId={chat.id}
+				title={chat.title}
+				side="right"
+				disabled={!!dragged}
+				className="min-w-0 flex-1 line-clamp-2 text-[0.8125rem] leading-5 outline-none focus-visible:underline {unread
 					? 'text-gray-900 dark:text-white'
 					: 'text-gray-700 dark:text-gray-200'}"
-				href={`/c/${chat.id}`}
-				draggable="false"
-				title={chat.title}
-				on:click={(event) => openFolderChat(chat, appLayout, event)}>{chat.title}</a
-			>
+				onclick={(event) => openFolderChat(chat, appLayout, event)}
+			/>
 		</div>
 
 		{#if chat.search_snippet}

src/lib/components/chat/Placeholder/FolderChatLink.svelte

@@ -0,0 +1,50 @@
+<script context="module" lang="ts">
+	// Like the sidebar, only one hover preview stays open at a time.
+	let closeActive: (() => void) | null = null;
+</script>
+
+<script lang="ts">
+	import { LinkPreview } from 'bits-ui';
+	import { settings } from '$lib/stores';
+	import ChatHoverPreview from '$lib/components/layout/Sidebar/ChatHoverPreview.svelte';
+
+	/** A chat title link with the sidebar's compact hover preview. */
+	export let chatId: string;
+	export let title: string;
+	export let className = '';
+	export let disabled = false;
+	export let side: 'left' | 'right' | 'bottom' | 'top' = 'bottom';
+	export let align: 'start' | 'end' | 'center' = 'start';
+	/** Marks the link for the list's j/k row navigation. */
+	export let rowLink = false;
+	export let onclick: (event: MouseEvent) => void = () => {};
+
+	let open = false;
+	const close = () => (open = false);
+	const opened = (next: boolean) => {
+		if (!next || closeActive === close) return;
+		closeActive?.();
+		closeActive = close;
+	};
+	$: if (disabled) open = false;
+</script>
+
+<LinkPreview.Root
+	openDelay={300}
+	closeDelay={0}
+	disabled={disabled || !($settings?.chatHoverPreview ?? true)}
+	bind:open
+	onOpenChange={opened}
+>
+	<LinkPreview.Trigger
+		class={className}
+		href="/c/{chatId}"
+		draggable="false"
+		data-row-link={rowLink ? '' : undefined}
+		{onclick}
+	>
+		{title}
+	</LinkPreview.Trigger>
+
+	<ChatHoverPreview {chatId} {title} openPreview={open} {side} {align} />
+</LinkPreview.Root>