From b841c9c3bc6d82d25d45d893a76ec46cd4111040 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Sat, 26 Sep 2026 17:39:10 +0200
Subject: [PATCH] web/repo: move issue labels to a vertical sidebar beside the
 ticket

Signed-off-by: eti <eti@eti.tf>
---
 .../repo/issues/IssueThreadView.svelte        | 125 +++++++++---------
 .../lib/components/repo/tickets/Ticket.svelte |   5 +-
 2 files changed, 65 insertions(+), 65 deletions(-)

diff --git a/web/src/lib/components/repo/issues/IssueThreadView.svelte b/web/src/lib/components/repo/issues/IssueThreadView.svelte
index 97215f4db..991b34fbc 100644
--- a/web/src/lib/components/repo/issues/IssueThreadView.svelte
+++ b/web/src/lib/components/repo/issues/IssueThreadView.svelte
@@ -183,67 +183,70 @@
 	>
 </svelte:head>
 
-<div>
-	<Card class="space-y-lg">
-		<Ticket
-			ticket={{
-				uri: issue.uri,
-				cid: issue.cid ?? "",
-				rkey: issue.rkey,
-				title: issue.title,
-				body: issue.body,
-				bodyHtml: issue.bodyHtml,
-				state: issue.state,
-				author: { did: issue.authorDid, handle: issue.authorHandle },
-				createdAt: issue.createdAt,
-				targetBranch: undefined
-			}}
-			markup={props.markup}
-			reactions={issue.reactions}
-			reactionsAlwaysShow
-			onedit={updateIssue}
-			ondelete={removeIssue}
-		>
-			{#snippet extraActions()}
-				{#if auth.currentDid}
-					<Button
-						icon={subToggling ? Spinner : subscribed ? BellMinus : BellPlus}
-						disabled={subLoading || subToggling}
-						onclick={toggleSubscription}
-					>
-						{#if subToggling}
-							{subscribed ? "Unsubscribing..." : "Subscribing..."}
-						{:else}
-							{subscribed ? "Unsubscribe" : "Subscribe"}
-						{/if}
-					</Button>
-					{#if subError}
-						<span
-							role="status"
-							class="typography-paragraph-small text-foreground-danger"
-							>{subError}</span
+<div class="flex flex-col gap-md lg:flex-row lg:items-start">
+	<div class="min-w-0 flex-1">
+		<Card class="space-y-lg">
+			<Ticket
+				ticket={{
+					uri: issue.uri,
+					cid: issue.cid ?? "",
+					rkey: issue.rkey,
+					title: issue.title,
+					body: issue.body,
+					bodyHtml: issue.bodyHtml,
+					state: issue.state,
+					author: { did: issue.authorDid, handle: issue.authorHandle },
+					createdAt: issue.createdAt,
+					targetBranch: undefined
+				}}
+				markup={props.markup}
+				reactions={issue.reactions}
+				reactionsAlwaysShow
+				onedit={updateIssue}
+				ondelete={removeIssue}
+			>
+				{#snippet extraActions()}
+					{#if auth.currentDid}
+						<Button
+							icon={subToggling ? Spinner : subscribed ? BellMinus : BellPlus}
+							disabled={subLoading || subToggling}
+							onclick={toggleSubscription}
 						>
+							{#if subToggling}
+								{subscribed ? "Unsubscribing..." : "Subscribing..."}
+							{:else}
+								{subscribed ? "Unsubscribe" : "Subscribe"}
+							{/if}
+						</Button>
+						{#if subError}
+							<span
+								role="status"
+								class="typography-paragraph-small text-foreground-danger"
+								>{subError}</span
+							>
+						{/if}
 					{/if}
-				{/if}
-			{/snippet}
-			{#snippet labels()}
-				<SubjectLabelPanel
-					subject={issue.uri}
-					repoUri={props.repo.uri}
-					labels={props.labels ?? NO_SUBJECT_LABELS}
-					listHref={issuesBase}
-					settingsHref={`/${props.repo.ownerHandle}/${props.repo.name}/settings#labels`}
-					canEdit={props.canPush}
-				/>
-			{/snippet}
-		</Ticket>
-	</Card>
-
-	<CommentSection
-		bind:threads={comments}
-		subjectUri={issue.uri}
-		subjectCid={issue.cid}
-		markup={props.markup}
-		class="mt-md"
-	/>
+				{/snippet}
+			</Ticket>
+		</Card>
+
+		<CommentSection
+			bind:threads={comments}
+			subjectUri={issue.uri}
+			subjectCid={issue.cid}
+			markup={props.markup}
+			class="mt-md"
+		/>
+	</div>
+	<aside class="lg:w-48 lg:shrink-0 pt-xs">
+		<SubjectLabelPanel
+			direction="vertical"
+			subject={issue.uri}
+			repoUri={props.repo.uri}
+			labels={props.labels ?? NO_SUBJECT_LABELS}
+			listHref={issuesBase}
+			settingsHref={`/${props.repo.ownerHandle}/${props.repo.name}/settings#labels`}
+			canEdit={props.canPush}
+		/>
+	</aside>
 </div>
diff --git a/web/src/lib/components/repo/tickets/Ticket.svelte b/web/src/lib/components/repo/tickets/Ticket.svelte
index 12ea4738c..171bd4a07 100644
--- a/web/src/lib/components/repo/tickets/Ticket.svelte
+++ b/web/src/lib/components/repo/tickets/Ticket.svelte
@@ -53,7 +53,6 @@
 		ondelete?: () => Promise<void>;
 		extraActions?: Snippet;
 		extraInfo?: Snippet;
-		labels?: Snippet;
 	}
 
 	let {
@@ -71,8 +70,7 @@
 		onedit,
 		ondelete,
 		extraActions,
-		extraInfo,
-		labels
+		extraInfo
 	}: Props = $props();
 
 	const auth = getAuth();
@@ -194,7 +192,6 @@
 	{:else if ticket.body}
 		<TicketBody body={ticket.body} bodyHtml={ticket.bodyHtml} />
 	{/if}
-	{@render labels?.()}
 	{#if !editing && showActionRow}
 		<Reactions {reactions} subjectUri={ticket.uri} alwaysShow={reactionsAlwaysShow} />
 	{/if}
-- 
2.51.2