From 29aef69f00906a7ef973bd68df7a56c7a212206f Mon Sep 17 00:00:00 2001
From: Adam Malczewski <github@tradam.dev>
Date: Sun, 7 Jun 2026 14:49:30 +0900
Subject: feat(tabs): polish new-chat button — stuck-only square edge, New Chat
 label
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- isStuckToEnd (pure): square the sticky '+' right edge only while it floats
  over scrolled tabs; rounded at rest. Edge-measured in TabBar via a disposed
  scroll + ResizeObserver effect (RO guarded for non-browser envs).
- Show a temporary 'New Chat' title when the draft is selected, with the '+'
  moved to the trailing close-button slot for consistency with real tabs.
---
 src/features/tabs/ui/TabBar.svelte | 52 +++++++++++++++++++++++++++++++++++---
 1 file changed, 49 insertions(+), 3 deletions(-)

(limited to 'src/features/tabs/ui')

diff --git a/src/features/tabs/ui/TabBar.svelte b/src/features/tabs/ui/TabBar.svelte
index 76fab05..eb5b5e5 100644
--- a/src/features/tabs/ui/TabBar.svelte
+++ b/src/features/tabs/ui/TabBar.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Tab } from "../tabs";
+	import { isStuckToEnd } from "../tabs";
 
 	let {
 		tabs,
@@ -14,9 +15,47 @@
 		onClose: (conversationId: string) => void;
 		onNewDraft: () => void;
 	} = $props();
+
+	// The new-chat button is `position: sticky; right: 0`. It floats over the tabs
+	// only while the strip overflows and isn't scrolled fully right; we square its
+	// right edge only in that "stuck" state. Pure decision (`isStuckToEnd`) +
+	// DOM-measurement at the edge here.
+	let scrollEl = $state<HTMLDivElement>();
+	let stuck = $state(false);
+
+	function recompute(): void {
+		const el = scrollEl;
+		if (el === undefined) {
+			stuck = false;
+			return;
+		}
+		stuck = isStuckToEnd({
+			scrollLeft: el.scrollLeft,
+			clientWidth: el.clientWidth,
+			scrollWidth: el.scrollWidth,
+		});
+	}
+
+	$effect(() => {
+		const el = scrollEl;
+		if (el === undefined) return;
+		// Re-evaluate when the tab set changes (overflow may appear/disappear).
+		void tabs;
+		recompute();
+
+		el.addEventListener("scroll", recompute, { passive: true });
+		const ro =
+			typeof ResizeObserver !== "undefined" ? new ResizeObserver(recompute) : undefined;
+		ro?.observe(el);
+
+		return () => {
+			el.removeEventListener("scroll", recompute);
+			ro?.disconnect();
+		};
+	});
 </script>
 
-<div class="overflow-x-auto border-b border-base-300">
+<div bind:this={scrollEl} class="overflow-x-auto border-b border-base-300">
 	<div class="tabs tabs-border min-w-max">
 		{#each tabs as tab (tab.conversationId)}
 			<div
@@ -43,12 +82,19 @@
 			</div>
 		{/each}
 		<button
-			class="tab sticky right-0 z-10 bg-base-200 shadow-[-2px_0_4px_-1px_rgba(0,0,0,0.2)]"
+			class="tab sticky right-0 z-10 bg-base-200 shadow-[-2px_0_4px_-1px_rgba(0,0,0,0.2)] {stuck
+				? '!rounded-se-none !rounded-ee-none'
+				: ''}"
 			class:tab-active={activeConversationId === null}
 			aria-label="New chat"
 			onclick={() => onNewDraft()}
 		>
-			+
+			{#if activeConversationId === null}
+				<span class="max-w-[120px] truncate">New Chat</span>
+				<span class="btn btn-ghost btn-xs ml-1" aria-hidden="true">+</span>
+			{:else}
+				+
+			{/if}
 		</button>
 	</div>
 </div>
-- 
cgit v1.2.3