From 39ece5a0b6b7de7b4e7967fed8f40e289c28c8cc Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Thu, 6 Aug 2026 17:56:01 +0300
Subject: [PATCH] web: slide the content when the active tab changes

TabContent publishes the motion as custom properties on the region it wraps, and app.css decides which boxes actually travel, so a panel welded to the bar above it holds still while its body moves. The repository tabs, the repository settings sub-nav, the profile tabs and /settings all run it.

On the profile the region wraps only the content column, because the profile card beside it is the same on every tab. Followers and following are not in the profile tab list, so those two swaps still change the content with no motion.

Signed-off-by: eti <eti@eti.tf>
---
 web/src/app.css                               |  51 +++++++-
 .../lib/components/profile/ProfileTabs.svelte |  30 +----
 web/src/lib/components/profile/tabs/defs.ts   |  34 ++++++
 web/src/lib/components/repo/RepoTabs.svelte   |  32 +----
 web/src/lib/components/repo/tabs.ts           |  36 ++++++
 .../components/settings/SettingsPanel.svelte  |   3 +
 web/src/lib/components/ui/TabContent.svelte   | 114 ++++++++++++++++++
 web/src/lib/components/ui/TabPanel.svelte     |  22 +++-
 web/src/lib/components/ui/Tabs.svelte         |  58 +++++----
 web/src/routes/[handle]/+layout.svelte        |  13 +-
 .../routes/[handle]/[repo]/+layout@.svelte    |   8 +-
 .../[handle]/[repo]/settings/+layout.svelte   |   9 +-
 web/src/routes/settings/+layout.svelte        |  19 ++-
 13 files changed, 335 insertions(+), 94 deletions(-)
 create mode 100644 web/src/lib/components/profile/tabs/defs.ts
 create mode 100644 web/src/lib/components/repo/tabs.ts
 create mode 100644 web/src/lib/components/ui/TabContent.svelte

diff --git a/web/src/app.css b/web/src/app.css
index e77fabe1..de08cf6d 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -253,18 +253,61 @@
 	line-height: 1.25rem;
 }
 
+/* One tab's content giving way to another's. TabContent publishes the motion as
+   custom properties on the region it wraps; the rules below decide which boxes
+   actually travel, because a panel welded to the tab bar above it has to hold
+   still — a border sliding out from under the active tab breaks the join. */
+@keyframes tab-in {
+	from {
+		translate: var(--tab-from, 0);
+		opacity: 0;
+	}
+}
+
+@layer components {
+	/* everything a tab route lays down travels as one, so a page carrying content
+	   below its card — an overview's readme, an issue list — moves with it. only a
+	   panel's own box is held back, which means everything inside it still travels:
+	   a settings sidebar is chrome for its own sub-nav but content for this move,
+	   arriving on screen for the first time along with the rest */
+	[data-tab-motion] > *:not([data-tab-panel]),
+	[data-tab-motion] > [data-tab-panel] > * {
+		translate: var(--tab-shift, 0);
+		opacity: var(--tab-fade, 1);
+		transition:
+			translate var(--tab-out-duration, 0ms) var(--tab-out-ease, linear),
+			opacity var(--tab-out-duration, 0ms) var(--tab-out-ease, linear);
+		animation: var(--tab-enter, none) var(--tab-in-duration, 0ms) var(--tab-in-ease, linear) both;
+	}
+
+	/* the panel keeps its box and clips whatever its body slides past. `clip` and
+	   not `hidden`, so the vertical axis stays visible and the sticky diff headers
+	   inside still resolve against the document */
+	[data-tab-motion] > [data-tab-panel] {
+		overflow-x: clip;
+	}
+}
+
 @utility popover-transition {
 	opacity: 0;
 	scale: 0.98;
+	/* a transition reads off the state it lands on, so this one is the exit. the
+	   two discrete properties are what keep a closing panel painted long enough
+	   to run it, and firefox has neither — it leans on the popoverExit
+	   attachment instead, which every panel using this utility needs */
 	transition:
-		opacity 120ms ease-out,
-		scale 120ms ease-out,
-		overlay 120ms allow-discrete,
-		display 120ms allow-discrete;
+		opacity 100ms ease-in,
+		scale 100ms ease-in,
+		overlay 100ms allow-discrete,
+		display 100ms allow-discrete;
 
 	&:popover-open {
 		opacity: 1;
 		scale: 1;
+		/* and this one is the entry */
+		transition:
+			opacity 75ms ease-out,
+			scale 75ms ease-out;
 	}
 
 	@starting-style {
diff --git a/web/src/lib/components/profile/ProfileTabs.svelte b/web/src/lib/components/profile/ProfileTabs.svelte
index 1b9b7b61..db1c792a 100644
--- a/web/src/lib/components/profile/ProfileTabs.svelte
+++ b/web/src/lib/components/profile/ProfileTabs.svelte
@@ -1,10 +1,6 @@
 <script lang="ts">
-	import SquareChartGantt from "$icon/square-chart-gantt";
-	import BookMarked from "$icon/book-marked";
-	import Star from "$icon/star";
-	import LineSquiggle from "$icon/line-squiggle";
-	import Shield from "$icon/shield";
-	import Tabs, { type TabDef } from "$lib/components/ui/Tabs.svelte";
+	import Tabs from "$lib/components/ui/Tabs.svelte";
+	import { profileTabs } from "./tabs/defs";
 	import type { ProfileCounts } from "./types";
 
 	interface Props {
@@ -15,27 +11,7 @@
 
 	let { handle, active, counts }: Props = $props();
 
-	const hrefFor = (id: string) => (id === "overview" ? `/${handle}` : `/${handle}?tab=${id}`);
-
-	const tabs = $derived<TabDef[]>([
-		{ id: "overview", label: "Overview", icon: SquareChartGantt, href: hrefFor("overview") },
-		{
-			id: "repos",
-			label: "Repositories",
-			icon: BookMarked,
-			count: counts.repos,
-			href: hrefFor("repos")
-		},
-		{ id: "starred", label: "Starred", icon: Star, count: counts.stars, href: hrefFor("starred") },
-		{
-			id: "strings",
-			label: "Strings",
-			icon: LineSquiggle,
-			count: counts.strings,
-			href: hrefFor("strings")
-		},
-		{ id: "vouches", label: "Vouches", icon: Shield, href: hrefFor("vouches") }
-	]);
+	const tabs = $derived(profileTabs(handle, counts));
 </script>
 
 <Tabs {tabs} {active} overlapBottom={true} label="profile sections" />
diff --git a/web/src/lib/components/profile/tabs/defs.ts b/web/src/lib/components/profile/tabs/defs.ts
new file mode 100644
index 00000000..febbb4d6
--- /dev/null
+++ b/web/src/lib/components/profile/tabs/defs.ts
@@ -0,0 +1,34 @@
+// the profile tab bar, shared by the nav that draws it and the layout's content
+// transition — both have to agree on the ids and on their left-to-right order,
+// which is what decides the direction the content slides
+
+import SquareChartGantt from "$icon/square-chart-gantt";
+import BookMarked from "$icon/book-marked";
+import Star from "$icon/star";
+import LineSquiggle from "$icon/line-squiggle";
+import Shield from "$icon/shield";
+import type { TabDef } from "$lib/components/ui/Tabs.svelte";
+import type { ProfileCounts } from "../types";
+
+export const profileTabs = (handle: string, counts: ProfileCounts): TabDef[] => {
+	const href = (id: string) => (id === "overview" ? `/${handle}` : `/${handle}?tab=${id}`);
+	return [
+		{ id: "overview", label: "Overview", icon: SquareChartGantt, href: href("overview") },
+		{
+			id: "repos",
+			label: "Repositories",
+			icon: BookMarked,
+			count: counts.repos,
+			href: href("repos")
+		},
+		{ id: "starred", label: "Starred", icon: Star, count: counts.stars, href: href("starred") },
+		{
+			id: "strings",
+			label: "Strings",
+			icon: LineSquiggle,
+			count: counts.strings,
+			href: href("strings")
+		},
+		{ id: "vouches", label: "Vouches", icon: Shield, href: href("vouches") }
+	];
+};
diff --git a/web/src/lib/components/repo/RepoTabs.svelte b/web/src/lib/components/repo/RepoTabs.svelte
index b7826854..b6254c63 100644
--- a/web/src/lib/components/repo/RepoTabs.svelte
+++ b/web/src/lib/components/repo/RepoTabs.svelte
@@ -1,10 +1,6 @@
 <script lang="ts">
-	import SquareChartGantt from "$icon/square-chart-gantt";
-	import CircleDot from "$icon/circle-dot";
-	import GitPullRequest from "$icon/git-pull-request";
-	import Layers2 from "$icon/layers-2";
-	import Settings from "$icon/settings";
-	import Tabs, { type TabDef } from "$lib/components/ui/Tabs.svelte";
+	import Tabs from "$lib/components/ui/Tabs.svelte";
+	import { repoTabs } from "./tabs";
 	import type { RepoCounts, RepoInfo } from "./types";
 
 	interface Props {
@@ -15,29 +11,7 @@
 
 	let { repo, counts, active }: Props = $props();
 
-	const base = $derived(`/${repo.ownerHandle}/${repo.name}`);
-
-	const tabs = $derived<TabDef[]>([
-		{ id: "overview", label: "Overview", icon: SquareChartGantt, href: base },
-		{
-			id: "issues",
-			label: "Issues",
-			icon: CircleDot,
-			count: counts.issues,
-			href: `${base}/issues`
-		},
-		{
-			id: "pulls",
-			label: "Pulls",
-			icon: GitPullRequest,
-			count: counts.pulls,
-			href: `${base}/pulls`
-		},
-		{ id: "pipelines", label: "Pipelines", icon: Layers2, href: `${base}/pipelines` },
-		// todo: only show this to collaborators — needs the viewer's push access on
-		// RepoInfo, which the layout load doesn't resolve yet
-		{ id: "settings", label: "Settings", icon: Settings, href: `${base}/settings` }
-	]);
+	const tabs = $derived(repoTabs(repo, counts));
 </script>
 
 <Tabs overlapBottom={true} {tabs} {active} label="repository sections" />
diff --git a/web/src/lib/components/repo/tabs.ts b/web/src/lib/components/repo/tabs.ts
new file mode 100644
index 00000000..44fccfc5
--- /dev/null
+++ b/web/src/lib/components/repo/tabs.ts
@@ -0,0 +1,36 @@
+// the repository tab bar, shared by the nav that draws it and the layout's
+// content transition — both have to agree on the ids and on their left-to-right
+// order, which is what decides the direction the content slides
+
+import SquareChartGantt from "$icon/square-chart-gantt";
+import CircleDot from "$icon/circle-dot";
+import GitPullRequest from "$icon/git-pull-request";
+import Layers2 from "$icon/layers-2";
+import Settings from "$icon/settings";
+import type { TabDef } from "$lib/components/ui/Tabs.svelte";
+import type { RepoCounts, RepoInfo } from "./types";
+
+export const repoTabs = (repo: RepoInfo, counts: RepoCounts): TabDef[] => {
+	const base = `/${repo.ownerHandle}/${repo.name}`;
+	return [
+		{ id: "overview", label: "Overview", icon: SquareChartGantt, href: base },
+		{
+			id: "issues",
+			label: "Issues",
+			icon: CircleDot,
+			count: counts.issues,
+			href: `${base}/issues`
+		},
+		{
+			id: "pulls",
+			label: "Pulls",
+			icon: GitPullRequest,
+			count: counts.pulls,
+			href: `${base}/pulls`
+		},
+		{ id: "pipelines", label: "Pipelines", icon: Layers2, href: `${base}/pipelines` },
+		// todo: only show this to collaborators — needs the viewer's push access on
+		// RepoInfo, which the layout load doesn't resolve yet
+		{ id: "settings", label: "Settings", icon: Settings, href: `${base}/settings` }
+	];
+};
diff --git a/web/src/lib/components/settings/SettingsPanel.svelte b/web/src/lib/components/settings/SettingsPanel.svelte
index 217fe963..cde6e50d 100644
--- a/web/src/lib/components/settings/SettingsPanel.svelte
+++ b/web/src/lib/components/settings/SettingsPanel.svelte
@@ -15,8 +15,11 @@
 <!-- Two shapes for one screen: a bordered card with the nav down its left edge on
      desktop, and below md a full-bleed panel that only keeps its top and bottom
      hairlines, since the phone frame already supplies the side margins. -->
+<!-- data-tab-panel holds this box still under a tab transition so it stays welded
+     to the bar above it; the nav and the content inside both travel, see app.css -->
 <div
 	class="flex w-full flex-col items-stretch gap-4 border-y border-border-default bg-background-default px-3 pt-3 pb-6 md:min-h-150 md:flex-row md:items-start md:overflow-hidden md:rounded-sm md:border md:p-0"
+	data-tab-panel
 >
 	<SettingsNav {items} {active} {label} />
 
diff --git a/web/src/lib/components/ui/TabContent.svelte b/web/src/lib/components/ui/TabContent.svelte
new file mode 100644
index 00000000..2d78a8df
--- /dev/null
+++ b/web/src/lib/components/ui/TabContent.svelte
@@ -0,0 +1,114 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	// tune the feel here: the exit duration is also latency, since the swap is held
+	// open for it, and a hovered tab has usually preloaded by the time you click
+	const DISTANCE = 4;
+	const OUT_DURATION = 75;
+	const OUT_EASE = "ease-in";
+	const IN_DURATION = 75;
+	const IN_EASE = "ease-out";
+
+	export const tabContent = tv({
+		// the content travels sideways, so its overflow has to go somewhere. `clip`
+		// rather than `hidden` because clip doesn't make a scroll container, which
+		// keeps the vertical axis visible and leaves `sticky` children inside alone
+		base: "overflow-x-clip"
+	});
+
+	export type TabContentVariants = VariantProps<typeof tabContent>;
+</script>
+
+<script lang="ts">
+	import { beforeNavigate, onNavigate } from "$app/navigation";
+	import { navigating } from "$app/state";
+	import { tick, type Snippet } from "svelte";
+	import { prefersReducedMotion } from "svelte/motion";
+	import { resolveTabs, tabForUrl, type TabDef } from "./Tabs.svelte";
+
+	interface Props {
+		/** the same defs the matching <Tabs> gets, so the content and the plate agree on where a click lands */
+		tabs: TabDef[];
+		/** id of the tab whose content is on screen */
+		active: string;
+		/** travel up and down instead of side to side, to echo a vertical bar's plate */
+		vertical?: boolean;
+		class?: string;
+		children: Snippet;
+	}
+
+	let { tabs: defs, active, vertical = false, class: className, children }: Props = $props();
+
+	const items = $derived(resolveTabs(defs));
+
+	// which tab a pending navigation is headed for, matched the same way the plate
+	// matches it — so a move deeper inside the same tab (an issue, a file, a
+	// settings subpage) resolves to `active` and never animates
+	const pending = $derived(navigating.to ? tabForUrl(items, navigating.to.url) : undefined);
+	const leaving = $derived(
+		!prefersReducedMotion.current && pending !== undefined && pending !== active
+	);
+
+	// +1 heading right along the bar, -1 heading left, so the content leaves the
+	// same way the plate behind the tabs is travelling
+	const away = $derived.by(() => {
+		if (!leaving) return 1;
+		const from = items.findIndex((item) => item.id === active);
+		const to = items.findIndex((item) => item.id === pending);
+		return to > from ? 1 : -1;
+	});
+
+	// the direction the arriving content comes in from, held only for as long as the
+	// entrance lasts: content that mounts outside a tab switch — an issue opening,
+	// a file being browsed — must not inherit the keyframes and animate too
+	let entering = $state(0);
+	let settle: ReturnType<typeof setTimeout>;
+
+	// the exit starts the moment you click, but onNavigate only runs once the route's
+	// data has landed, so measuring from here lets the hold below give a preloaded
+	// tab a real exit while charging a slow one nothing extra
+	let leftAt = 0;
+	beforeNavigate(() => {
+		leftAt = performance.now();
+	});
+
+	onNavigate(() => {
+		if (!leaving) return;
+		const direction = away;
+		const remaining = Math.max(0, OUT_DURATION - (performance.now() - leftAt));
+		return new Promise<void>((done) =>
+			setTimeout(async () => {
+				entering = direction;
+				clearTimeout(settle);
+				settle = setTimeout(() => (entering = 0), IN_DURATION);
+				// the keyframes have to be on the region before SvelteKit swaps the
+				// content in, or the arriving content paints one frame at full opacity
+				await tick();
+				done();
+			}, remaining)
+		);
+	});
+
+	const travel = (offset: number) => (vertical ? `0 ${offset}px` : `${offset}px`);
+
+	// every property is declared on every render, idle values included. a region
+	// nested inside another one — the repository settings sub-nav sits inside the
+	// repository tabs — would otherwise inherit the outer region's travel and move
+	// twice: once because the card body it lives in is moving, once on its own
+	const motion = $derived(
+		[
+			`--tab-out-duration: ${OUT_DURATION}ms`,
+			`--tab-out-ease: ${OUT_EASE}`,
+			`--tab-in-duration: ${IN_DURATION}ms`,
+			`--tab-in-ease: ${IN_EASE}`,
+			`--tab-shift: ${leaving ? travel(away * -DISTANCE) : "0"}`,
+			`--tab-fade: ${leaving ? 0 : 1}`,
+			`--tab-from: ${entering ? travel(entering * DISTANCE) : "0"}`,
+			`--tab-enter: ${entering ? "tab-in" : "none"}`
+		].join("; ")
+	);
+</script>
+
+<div class={tabContent({ class: className })} style={motion} data-tab-motion>
+	{@render children()}
+</div>
diff --git a/web/src/lib/components/ui/TabPanel.svelte b/web/src/lib/components/ui/TabPanel.svelte
index c8d3ad0d..5396a281 100644
--- a/web/src/lib/components/ui/TabPanel.svelte
+++ b/web/src/lib/components/ui/TabPanel.svelte
@@ -2,12 +2,20 @@
 	import { tv } from "tailwind-variants";
 
 	export const tabPanel = tv({
-		base: "rounded-sm border border-border-default bg-background-default text-foreground-default",
+		slots: {
+			// the card itself: chrome only, so its box can hold still and stay welded to
+			// the tab bar above it while a transition moves what's inside
+			surface:
+				"rounded-sm border border-border-default bg-background-default text-foreground-default",
+			// everything the caller lays out lives in here, which is also what a tab
+			// transition travels — see the [data-tab-motion] rules in app.css
+			body: ""
+		},
 		variants: {
 			// the common surface padding; turn off to lay out children yourself
 			padded: {
-				true: "px-6 py-4",
-				false: ""
+				true: { body: "px-6 py-4" },
+				false: {}
 			}
 		},
 		defaultVariants: {
@@ -28,8 +36,12 @@
 	}
 
 	let { as = "section", padded = true, class: className, children }: Props = $props();
+
+	const style = $derived(tabPanel({ padded }));
 </script>
 
-<svelte:element this={as} class={tabPanel({ padded, class: className })}>
-	{@render children()}
+<svelte:element this={as} class={style.surface()} data-tab-panel>
+	<div class={style.body({ class: className })}>
+		{@render children()}
+	</div>
 </svelte:element>
diff --git a/web/src/lib/components/ui/Tabs.svelte b/web/src/lib/components/ui/Tabs.svelte
index f1858e7e..7de792ab 100644
--- a/web/src/lib/components/ui/Tabs.svelte
+++ b/web/src/lib/components/ui/Tabs.svelte
@@ -1,4 +1,6 @@
 <script module lang="ts">
+	import { resolve } from "$app/paths";
+	import type { ResolvedPathname } from "$app/types";
 	import type { Component } from "svelte";
 	import type { SvelteHTMLElements } from "svelte/elements";
 	import { tv, type VariantProps } from "tailwind-variants";
@@ -11,6 +13,35 @@
 		count?: number;
 	}
 
+	export interface ResolvedTab extends TabDef {
+		url: ResolvedPathname;
+	}
+
+	// resolved up front so a destination url can be matched against a tab's href
+	export const resolveTabs = (defs: TabDef[]): ResolvedTab[] =>
+		defs.map((tab) => ({
+			...tab,
+			url: (tab.href.startsWith("/") ? resolve(tab.href as "/") : tab.href) as ResolvedPathname
+		}));
+
+	/** which tab owns a url, or undefined when none of them does */
+	export const tabForUrl = (items: ResolvedTab[], url: URL): string | undefined => {
+		let best: string | undefined;
+		let bestLength = -1;
+		for (const item of items) {
+			if (item.url === url.pathname + url.search) return item.id;
+			// a plain path also owns everything nested under it, so an issue page
+			// keeps the issues tab lit; a query-scoped tab only matches exactly
+			if (item.url.includes("?")) continue;
+			const owns = url.pathname === item.url || url.pathname.startsWith(`${item.url}/`);
+			if (owns && item.url.length > bestLength) {
+				best = item.id;
+				bestLength = item.url.length;
+			}
+		}
+		return best;
+	};
+
 	export const tabs = tv({
 		slots: {
 			nav: "",
@@ -47,7 +78,8 @@
 					count: "bg-background-muted"
 				},
 				false: {
-					count: "bg-background-muted group-hover/item:bg-background-strong dark:bg-background-subtle group-hover/item:dark:bg-background-subtle"
+					count:
+						"bg-background-muted group-hover/item:bg-background-strong dark:bg-background-subtle group-hover/item:dark:bg-background-subtle"
 				}
 			},
 			ready: { true: { plate: "opacity-100" }, false: { plate: "opacity-0" } },
@@ -91,9 +123,7 @@
 </script>
 
 <script lang="ts">
-	import { resolve } from "$app/paths";
 	import { navigating } from "$app/state";
-	import type { ResolvedPathname } from "$app/types";
 	import { Spring, prefersReducedMotion } from "svelte/motion";
 
 	interface Props {
@@ -114,13 +144,7 @@
 		class: navClass
 	}: Props = $props();
 
-	// resolved up front so the plate can match hrefs against the destination url
-	const items = $derived(
-		defs.map((tab) => ({
-			...tab,
-			url: (tab.href.startsWith("/") ? resolve(tab.href as "/") : tab.href) as ResolvedPathname
-		}))
-	);
+	const items = $derived(resolveTabs(defs));
 
 	// the plate follows where we're heading rather than where we are, so it leaves
 	// the moment you click instead of waiting on the route's load; aria-current
@@ -128,19 +152,7 @@
 	const selected = $derived.by(() => {
 		const dest = navigating.to?.url;
 		if (!dest) return active;
-
-		let best: string | undefined;
-		let bestLength = -1;
-		for (const item of items) {
-			if (item.url === dest.pathname + dest.search) return item.id;
-			if (item.url.includes("?")) continue;
-			const owns = dest.pathname === item.url || dest.pathname.startsWith(`${item.url}/`);
-			if (owns && item.url.length > bestLength) {
-				best = item.id;
-				bestLength = item.url.length;
-			}
-		}
-		return best ?? active;
+		return tabForUrl(items, dest) ?? active;
 	});
 
 	let nav = $state<HTMLElement>();
diff --git a/web/src/routes/[handle]/+layout.svelte b/web/src/routes/[handle]/+layout.svelte
index 8f04d623..e133b247 100644
--- a/web/src/routes/[handle]/+layout.svelte
+++ b/web/src/routes/[handle]/+layout.svelte
@@ -5,6 +5,8 @@
 	import EmptyState from "$lib/components/ui/EmptyState.svelte";
 	import ProfileCard from "$lib/components/profile/ProfileCard.svelte";
 	import ProfileTabs from "$lib/components/profile/ProfileTabs.svelte";
+	import { profileTabs } from "$lib/components/profile/tabs/defs";
+	import TabContent from "$lib/components/ui/TabContent.svelte";
 	import TabPanel from "$lib/components/ui/TabPanel.svelte";
 
 	let { children, data } = $props();
@@ -15,6 +17,7 @@
 	);
 	setContext(PROFILE_COUNTS_KEY, profileCounts);
 	const counts = $derived(profileCounts.value);
+	const tabs = $derived(profileTabs(data.identity.handle, counts));
 	const tabParam = $derived(page.url.searchParams.get("tab") ?? "overview");
 	const activeTab = $derived(
 		["repos", "starred", "strings", "vouches"].includes(tabParam) ? tabParam : "overview"
@@ -40,9 +43,15 @@
 					viewerFollowRkey={data.viewerFollowRkey}
 				/>
 			</aside>
-			<div class="min-w-0 border-t border-border-default p-6 md:col-span-8 md:border-t-0 md:p-0">
+			<!-- only the right column moves: the profile card beside it is the same on
+			     every tab, so the region goes here rather than around the panel -->
+			<TabContent
+				{tabs}
+				active={activeTab}
+				class="min-w-0 border-t border-border-default p-6 md:col-span-8 md:border-t-0 md:p-0"
+			>
 				{@render children()}
-			</div>
+			</TabContent>
 		</TabPanel>
 	{/if}
 </section>
diff --git a/web/src/routes/[handle]/[repo]/+layout@.svelte b/web/src/routes/[handle]/[repo]/+layout@.svelte
index bbd51eb1..92db4271 100644
--- a/web/src/routes/[handle]/[repo]/+layout@.svelte
+++ b/web/src/routes/[handle]/[repo]/+layout@.svelte
@@ -4,9 +4,13 @@
 	import { page } from "$app/state";
 	import RepoHeader from "$lib/components/repo/RepoHeader.svelte";
 	import RepoTabs from "$lib/components/repo/RepoTabs.svelte";
+	import { repoTabs } from "$lib/components/repo/tabs";
+	import TabContent from "$lib/components/ui/TabContent.svelte";
 
 	let { children, data } = $props();
 
+	const tabs = $derived(repoTabs(data.repo, data.counts));
+
 	const fullName = $derived(`${data.repo.ownerHandle}/${data.repo.name}`);
 	const repoUrl = $derived(`${page.url.origin}/${fullName}`);
 	const fullNameWithoutAt = $derived(fullName.replace(/^@/, ""));
@@ -51,5 +55,7 @@
 		<RepoHeader repo={data.repo} counts={data.counts} viewerStarRkey={data.viewerStarRkey} />
 		<RepoTabs repo={data.repo} counts={data.counts} active={activeTab} />
 	{/if}
-	{@render children()}
+	<TabContent {tabs} active={activeTab}>
+		{@render children()}
+	</TabContent>
 </section>
diff --git a/web/src/routes/[handle]/[repo]/settings/+layout.svelte b/web/src/routes/[handle]/[repo]/settings/+layout.svelte
index fb2e78dc..d3c22366 100644
--- a/web/src/routes/[handle]/[repo]/settings/+layout.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/+layout.svelte
@@ -2,6 +2,7 @@
 	import { page } from "$app/state";
 	import type { SettingsNavItem } from "$lib/components/settings/SettingsNav.svelte";
 	import SettingsPanel from "$lib/components/settings/SettingsPanel.svelte";
+	import TabContent from "$lib/components/ui/TabContent.svelte";
 	import SlidersHorizontal from "$icon/sliders-horizontal";
 	import UsersRound from "$icon/users-round";
 	import Layers from "$icon/layers";
@@ -26,6 +27,12 @@
 	const active = $derived(items.some((i) => i.id === segment) ? segment : "general");
 </script>
 
+<!-- the sub-nav is its own tab set, so it needs its own transition: the repo tabs
+     above resolve every settings subpage to the one "settings" tab and sit this
+     move out. travel is vertical here to follow the sidebar's plate, and the flex
+     column has to live on the region itself or the sections inside lose their gap -->
 <SettingsPanel {items} {active} label="Repository settings">
-	{@render children()}
+	<TabContent tabs={items} {active} vertical class="flex w-full min-w-0 flex-col gap-6 md:gap-8">
+		{@render children()}
+	</TabContent>
 </SettingsPanel>
diff --git a/web/src/routes/settings/+layout.svelte b/web/src/routes/settings/+layout.svelte
index a5b82740..36256f6a 100644
--- a/web/src/routes/settings/+layout.svelte
+++ b/web/src/routes/settings/+layout.svelte
@@ -2,6 +2,7 @@
 	import { page } from "$app/state";
 	import type { SettingsNavItem } from "$lib/components/settings/SettingsNav.svelte";
 	import SettingsPanel from "$lib/components/settings/SettingsPanel.svelte";
+	import TabContent from "$lib/components/ui/TabContent.svelte";
 	import User from "$icon/user-round";
 	import Key from "$icon/key";
 	import Mail from "$icon/mail";
@@ -16,7 +17,12 @@
 		{ id: "profile", label: "Profile", href: "/settings", icon: User },
 		{ id: "keys", label: "Keys", href: "/settings/keys", icon: Key },
 		{ id: "emails", label: "Emails", href: "/settings/emails", icon: Mail },
-		{ id: "notifications", label: "Notifications", href: "/settings/notifications", icon: Bell },
+		{
+			id: "notifications",
+			label: "Notifications",
+			href: "/settings/notifications",
+			icon: Bell
+		},
 		{ id: "knots", label: "Knots", href: "/settings/knots", icon: Volleyball },
 		{ id: "spindles", label: "Spindles", href: "/settings/spindles", icon: Spool },
 		{ id: "sites", label: "Sites", href: "/settings/sites", icon: Globe }
@@ -34,7 +40,16 @@
 <div class="flex w-full flex-col items-center md:px-4 md:pt-16 md:pb-32">
 	<div class="flex w-full max-w-300 flex-col">
 		<SettingsPanel {items} {active}>
-			{@render children()}
+			<!-- travel is vertical to follow the sidebar's plate, and the flex column has to
+			     live on the region itself or the sections inside lose their gap -->
+			<TabContent
+				tabs={items}
+				{active}
+				vertical
+				class="flex w-full min-w-0 flex-col gap-6 md:gap-8"
+			>
+				{@render children()}
+			</TabContent>
 		</SettingsPanel>
 	</div>
 </div>
-- 
2.51.2