From bb16aafac6e5890520bac50305819e2ae4e66fc7 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Tue, 18 Aug 2026 15:56:47 +0000
Subject: [PATCH] web/components: fix star button height when logged out

it now looks identical to when logged in, but it just boots users to the
login page

Signed-off-by: oppiliappan <me@oppi.li>
---
 web/src/lib/auth/guards.ts | 2 +-
 web/src/lib/components/repo/RepoHeader.stories.svelte | 14 ++++----------
 web/src/lib/components/repo/RepoHeader.svelte | 40 ++++++++++++++--------------------------
 web/src/lib/components/repo/StarButton.svelte | 70 ++++++++++++++++++++++++++++++++++++----------------------------------
 web/src/lib/components/repo/issues/IssueToolbar.svelte | 4 ++--
 5 file(s) changed, 57 insertion(s)(+), 73 deletion(s)(-)

diff --git a/web/src/lib/auth/guards.ts b/web/src/lib/auth/guards.ts
--- a/web/src/lib/auth/guards.ts
+++ b/web/src/lib/auth/guards.ts
@@ -9,7 +9,7 @@
 	handle: string;
 }
 
-const loginWithReturn = (returnUrl: string): string =>
+export const loginWithReturn = (returnUrl: string): string =>
 	`/login?return_url=${encodeURIComponent(returnUrl)}`;
 
 export const requireAuth = (event: RequestEvent): RequireAuthResult => {
diff --git a/web/src/lib/components/repo/RepoHeader.stories.svelte b/web/src/lib/components/repo/RepoHeader.stories.svelte
--- a/web/src/lib/components/repo/RepoHeader.stories.svelte
+++ b/web/src/lib/components/repo/RepoHeader.stories.svelte
@@ -8,14 +8,8 @@
 
 	type PlayContext = Pick<StoryContext<Record<string, unknown>>, "canvas">;
 
-	// a ButtonGroup draws the border its segments give up, so it used to stand 2px
-	// taller than the bare star button next to it — signed out, that mismatch shows.
-	const actionsShareAHeight = async ({ canvas }: PlayContext) => {
-		const star = canvas.getAllByTitle("Starred by")[0];
-		const forkGroup = canvas.getAllByRole("link", { name: "Fork" })[0].parentElement!;
-		await expect(star.offsetHeight).toBe(forkGroup.offsetHeight);
-	};
-
+	// the star control is the same ButtonGroup signed in or out, so it always
+	// stands exactly as tall as the fork group beside it
 	const groupsShareAHeight = async ({ canvas }: PlayContext) => {
 		const starGroup = canvas.getAllByTitle("Starred by")[0].parentElement!;
 		const forkGroup = canvas.getAllByRole("link", { name: "Fork" })[0].parentElement!;
@@ -45,7 +39,7 @@
 	});
 </script>
 
-<Story name="Full metadata" asChild play={actionsShareAHeight}>
+<Story name="Full metadata" asChild play={groupsShareAHeight}>
 	<StoryAuthProvider>
 		<RepoHeader {repo} {counts} />
 	</StoryAuthProvider>
@@ -70,7 +64,7 @@
 	</StoryAuthProvider>
 </Story>
 
-<!-- signed in: star becomes a toggle group, so both action groups share a height -->
+<!-- signed in the star segment toggles instead of linking to log in -->
 <Story name="Signed in" asChild play={groupsShareAHeight}>
 	<MockAuthProvider>
 		<RepoHeader {repo} {counts} viewerStarRkey={null} />
diff --git a/web/src/lib/components/repo/RepoHeader.svelte b/web/src/lib/components/repo/RepoHeader.svelte
--- a/web/src/lib/components/repo/RepoHeader.svelte
+++ b/web/src/lib/components/repo/RepoHeader.svelte
@@ -2,12 +2,10 @@
 	import { resolve } from "$app/paths";
 	import GitFork from "$icon/git-fork";
 	import Globe from "$icon/globe";
-	import Star from "$icon/star";
 	import Avatar from "$lib/components/ui/Avatar.svelte";
 	import Button from "$lib/components/ui/Button.svelte";
 	import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
 	import Tag from "$lib/components/ui/Tag.svelte";
-	import { getAuth } from "$lib/auth.svelte";
 	import StarButton from "./StarButton.svelte";
 	import type { RepoCounts, RepoInfo } from "./types";
 	import { formatCount } from "$lib/format";
@@ -20,8 +18,6 @@
 
 	let { repo, counts, viewerStarRkey }: Props = $props();
 
-	const auth = getAuth();
-	const signedIn = $derived(Boolean(auth.currentDid));
 	const base = $derived(`/${repo.ownerHandle}/${repo.name}`);
 	const trimScheme = (url: string) => url.replace(/^https?:\/\//, "").replace(/\/$/, "");
 	const topics = $derived([...new Set(repo.topics ?? [])]);
@@ -29,26 +25,13 @@
 
 {#snippet repoActions(className: string)}
 	<div class={className}>
-		{#if signedIn}
-			<StarButton
-				repoDid={repo.repoDid ?? ""}
-				repoOwnerHandle={repo.ownerHandle}
-				repoName={repo.name}
-				initialCount={counts.stars}
-				initialRkey={viewerStarRkey}
-			/>
-		{:else}
-			<Button
-				href={resolve(`${base}/stars` as "/")}
-				variant="default"
-				size="small"
-				insetShadow={true}
-				icon={Star}
-				title="Starred by"
-			>
-				{formatCount(counts.stars)}
-			</Button>
-		{/if}
+		<StarButton
+			repoDid={repo.repoDid ?? ""}
+			repoOwnerHandle={repo.ownerHandle}
+			repoName={repo.name}
+			initialCount={counts.stars}
+			initialRkey={viewerStarRkey}
+		/>
 
 		<ButtonGroup class="flex-1">
 			<Button
@@ -61,7 +44,12 @@
 			>
 				Fork
 			</Button>
-			<Button href={resolve(`${base}/forks` as "/")} variant="ghost" size="small" title="Forked by">
+			<Button
+				href={resolve(`${base}/forks` as "/")}
+				variant="ghost"
+				size="small"
+				title="Forked by"
+			>
 				{formatCount(counts.forks)}
 			</Button>
 		</ButtonGroup>
@@ -108,7 +96,7 @@
 	</div>
 
 	<div
-		class="flex flex-wrap items-center justify gap-x-4 gap-y-2 typography-paragraph-small text-foreground-muted"
+		class="justify flex flex-wrap items-center gap-x-4 gap-y-2 typography-paragraph-small text-foreground-muted"
 	>
 		{#if repo.description}
 			<span>{repo.description}</span>
diff --git a/web/src/lib/components/repo/StarButton.svelte b/web/src/lib/components/repo/StarButton.svelte
--- a/web/src/lib/components/repo/StarButton.svelte
+++ b/web/src/lib/components/repo/StarButton.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
+	import { resolve } from "$app/paths";
+	import { page } from "$app/state";
 	import Star from "$icon/star";
 	import { getAuth } from "$lib/auth.svelte";
+	import { loginWithReturn } from "$lib/auth/guards";
 	import { createStar, deleteStar } from "$lib/api/graph";
 	import Button from "$lib/components/ui/Button.svelte";
 	import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
@@ -40,6 +43,11 @@
 
 	const starred = $derived(relation.active);
 	const failed = $derived(relation.failed || starCount.failed);
+	// if signed out, sends you to log in first, then back here
+	const loginHref = $derived(
+		resolve(loginWithReturn(page.url.pathname + page.url.search) as "/login")
+	);
+	const starsHref = $derived(resolve(`/${repoOwnerHandle}/${repoName}/stars` as "/"));
 
 	const toggle = async () => {
 		const agent = auth.agent;
@@ -65,37 +73,31 @@
 	};
 </script>
 
-{#if signedIn && repoDid}
-	<div class="flex flex-col flex-1 items-start">
-		<ButtonGroup class="w-full">
-			<Button
-				variant="default"
-				size="small"
-				{insetShadow}
-				loading={relation.loading}
-				disabled={!relation.known}
-				onclick={toggle}
-				class="flex-1"
-			>
-				<Star
-					class={`size-4 shrink-0 ${starred ? "[&_path]:fill-[currentColor]" : ""}`}
-					aria-hidden="true"
-				/>
-				<span>{starred ? "Unstar" : "Star"}</span>
-			</Button>
-			<Button
-				href={`/${repoOwnerHandle}/${repoName}/stars`}
-				variant="ghost"
-				size="small"
-				title="Starred by"
-			>
-				{formatCount(starCount.value)}
-			</Button>
-		</ButtonGroup>
-		{#if failed}
-			<p class="mt-1 typography-paragraph-small text-foreground-danger">
-				Something went wrong. Try again.
-			</p>
-		{/if}
-	</div>
-{/if}
+<div class="flex flex-1 flex-col items-start">
+	<ButtonGroup class="w-full">
+		<Button
+			variant="default"
+			size="small"
+			{insetShadow}
+			href={signedIn ? undefined : loginHref}
+			loading={relation.loading}
+			disabled={signedIn && (!relation.known || !repoDid)}
+			onclick={signedIn ? toggle : undefined}
+			class="flex-1"
+		>
+			<Star
+				class={`size-4 shrink-0 ${starred ? "[&_path]:fill-[currentColor]" : ""}`}
+				aria-hidden="true"
+			/>
+			<span>{starred ? "Unstar" : "Star"}</span>
+		</Button>
+		<Button href={starsHref} variant="ghost" size="small" title="Starred by">
+			{formatCount(starCount.value)}
+		</Button>
+	</ButtonGroup>
+	{#if failed}
+		<p class="mt-1 typography-paragraph-small text-foreground-danger">
+			Something went wrong. Try again.
+		</p>
+	{/if}
+</div>
diff --git a/web/src/lib/components/repo/issues/IssueToolbar.svelte b/web/src/lib/components/repo/issues/IssueToolbar.svelte
--- a/web/src/lib/components/repo/issues/IssueToolbar.svelte
+++ b/web/src/lib/components/repo/issues/IssueToolbar.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { resolve } from "$app/paths";
+	import Ban from "$icon/ban";
 	import CircleDot from "$icon/circle-dot";
-	import CircleX from "$icon/circle-x";
 	import Plus from "$icon/plus";
 	import Button from "$lib/components/ui/Button.svelte";
 	import ButtonGroup, { segmentProps } from "$lib/components/ui/ButtonGroup.svelte";
@@ -47,7 +47,7 @@
 			href={resolve(`${base}?state=closed` as "/")}
 			{...segmentProps(state === "closed")}
 			size="small"
-			icon={CircleX}
+			icon={Ban}
 		>
 			<span>
 				<span class="hidden sm:inline">{formatCount(closedCount)}</span>

--
tangled.sh