From e7d46737ab85e48e86c55cadb9f72593dbcce9d4 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Wed, 29 Jul 2026 23:54:05 +0200
Subject: [PATCH] web/components: make the button group match the figma
 segmented control

a joined group is a tab switcher, but the selected segment was the plain default
variant, which reads as the hovered state of an unselected one, and the group
itself drew nothing.

per figma (design system 605:3859): the group owns the outer border and a
recessed background-subtle surface, the selected segment is default + its inset
shadow so it reads as a raised card, and unselected segments are ghost with the
default foreground rather than ghost's muted one. each segment's own border is
pulled onto the group's (-m-px) so the selected segment's edge doubles as the
divider and unselected segments show no divider at all.

segmentProps() carries the recipe so the call sites stop repeating the variant
ternary. verified pixel for pixel against the figma render: 36px tall, #e5e7eb
border on all four edges, #ffffff on the selected segment against #f9fafb on the
unselected, a 1px divider at the selected segment's edge, and the inset shadow
two rows above the bottom border.

ghost's own foreground is still muted where it's used outside a group, which
figma disagrees with; that's a wider change, left alone here.

Signed-off-by: eti <eti@eti.tf>
---
 .../repo/issues/IssueToolbar.svelte           |  6 ++--
 .../components/ui/ButtonGroup.stories.svelte  | 14 ++++++++-
 web/src/lib/components/ui/ButtonGroup.svelte  | 29 +++++++++++++++++--
 .../lib/components/ui/MarkdownEditor.svelte   |  6 ++--
 4 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/web/src/lib/components/repo/issues/IssueToolbar.svelte b/web/src/lib/components/repo/issues/IssueToolbar.svelte
index 24c527a8..dd07c791 100644
--- a/web/src/lib/components/repo/issues/IssueToolbar.svelte
+++ b/web/src/lib/components/repo/issues/IssueToolbar.svelte
@@ -4,7 +4,7 @@
 	import CircleX from "$icon/circle-x";
 	import Plus from "$icon/plus";
 	import Button from "$lib/components/ui/Button.svelte";
-	import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
+	import ButtonGroup, { segmentProps } from "$lib/components/ui/ButtonGroup.svelte";
 	import IssueSearch from "./IssueSearch.svelte";
 
 	interface Props {
@@ -33,7 +33,7 @@
 		<!-- TODO: wire up state filter navigation -->
 		<Button
 			href={resolve(`${base}?state=open` as "/")}
-			variant={state === "open" ? "default" : "ghost"}
+			{...segmentProps(state === "open")}
 			size="sm"
 			icon={CircleDot}
 		>
@@ -42,7 +42,7 @@
 		</Button>
 		<Button
 			href={resolve(`${base}?state=closed` as "/")}
-			variant={state === "closed" ? "default" : "ghost"}
+			{...segmentProps(state === "closed")}
 			size="sm"
 			icon={CircleX}
 		>
diff --git a/web/src/lib/components/ui/ButtonGroup.stories.svelte b/web/src/lib/components/ui/ButtonGroup.stories.svelte
index e297808f..f2142e3a 100644
--- a/web/src/lib/components/ui/ButtonGroup.stories.svelte
+++ b/web/src/lib/components/ui/ButtonGroup.stories.svelte
@@ -1,7 +1,7 @@
 <script module lang="ts">
 	import { defineMeta } from "@storybook/addon-svelte-csf";
 	import Button from "./Button.svelte";
-	import ButtonGroup from "./ButtonGroup.svelte";
+	import ButtonGroup, { segmentProps } from "./ButtonGroup.svelte";
 
 	const { Story } = defineMeta({
 		title: "UI/ButtonGroup",
@@ -47,3 +47,15 @@
 		</ButtonGroup>
 	</div>
 </Story>
+
+<!--
+	The tab/segment-switcher recipe (Open/Closed issue filters, Write/Preview editor tabs):
+	the selected segment gets the `default` variant + insetShadow, unselected segments are
+	`ghost`. Never plain `default` for unselected — that reads as the hovered state.
+-->
+<Story name="Tab Switcher">
+	<ButtonGroup>
+		<Button {...segmentProps(true)}>Open</Button>
+		<Button {...segmentProps(false)}>Closed</Button>
+	</ButtonGroup>
+</Story>
diff --git a/web/src/lib/components/ui/ButtonGroup.svelte b/web/src/lib/components/ui/ButtonGroup.svelte
index 8dd4d7db..817983ff 100644
--- a/web/src/lib/components/ui/ButtonGroup.svelte
+++ b/web/src/lib/components/ui/ButtonGroup.svelte
@@ -1,14 +1,20 @@
 <script module lang="ts">
 	import { tv, type VariantProps } from "tailwind-variants";
+	import type { ButtonVariants } from "./Button.svelte";
 
 	export const buttonGroup = tv({
 		base: "inline-flex items-center",
 		variants: {
+			// joined groups are the segmented control from Figma: the group draws the outer
+			// border and the recessed surface, and each segment's own 1px border is pulled
+			// onto it (-m-px) so an unselected segment shows the group's surface while a
+			// selected one covers it and reads as a raised card.
 			spaced: {
 				true: "gap-2",
 				false: [
-					"gap-0",
-					"*:relative",
+					"gap-0 rounded border border-border-default bg-background-subtle",
+					"*:relative *:-my-px",
+					"[&>*:first-child]:-ml-px [&>*:last-child]:-mr-px",
 					"[&>*:not(:first-child)]:-ml-px [&>*:not(:first-child)]:[--btn-radius-l:0px]",
 					"[&>*:not(:last-child)]:[--btn-radius-r:0px]",
 					"[&>*:focus-visible]:z-10 [&>*:hover]:z-10"
@@ -21,6 +27,25 @@
 	});
 
 	export type ButtonGroupVariants = VariantProps<typeof buttonGroup>;
+
+	/**
+	 * Recipe for using ButtonGroup as a tab/segment switcher (e.g. Open/Closed issue filters,
+	 * Write/Preview editor tabs). Per Figma, the selected segment reads as a raised, lighter
+	 * surface (`default` + its inset shadow) while unselected segments are flat `ghost`
+	 * buttons — never the plain `default` variant, which reads as the *hovered* state of an
+	 * unselected segment. Figma also gives an unselected segment the same foreground as a
+	 * selected one, where `ghost` on its own is muted, so the recipe overrides the colour
+	 * here rather than changing `ghost` everywhere it's used.
+	 */
+	export function segmentProps(selected: boolean): {
+		variant: ButtonVariants["variant"];
+		insetShadow: boolean;
+		class?: string;
+	} {
+		return selected
+			? { variant: "default", insetShadow: true }
+			: { variant: "ghost", insetShadow: false, class: "text-foreground-default" };
+	}
 </script>
 
 <script lang="ts">
diff --git a/web/src/lib/components/ui/MarkdownEditor.svelte b/web/src/lib/components/ui/MarkdownEditor.svelte
index 8b667208..75bafa25 100644
--- a/web/src/lib/components/ui/MarkdownEditor.svelte
+++ b/web/src/lib/components/ui/MarkdownEditor.svelte
@@ -3,7 +3,7 @@
 	import Eye from "$icon/eye";
 	import Pencil from "$icon/pencil";
 	import Button from "./Button.svelte";
-	import ButtonGroup from "./ButtonGroup.svelte";
+	import ButtonGroup, { segmentProps } from "./ButtonGroup.svelte";
 	import Textarea from "./Textarea.svelte";
 	import { renderMarkup, type MarkupContext } from "$lib/markup";
 
@@ -86,7 +86,7 @@
 			type="button"
 			size="sm"
 			icon={Pencil}
-			variant={tab === "write" ? "default" : "ghost"}
+			{...segmentProps(tab === "write")}
 			onclick={() => (tab = "write")}
 		>
 			Write
@@ -95,7 +95,7 @@
 			type="button"
 			size="sm"
 			icon={Eye}
-			variant={tab === "preview" ? "default" : "ghost"}
+			{...segmentProps(tab === "preview")}
 			onclick={() => (tab = "preview")}
 		>
 			Preview
-- 
2.51.2