feat: split single field commit message into multiline rendered compo…

…nent with ::first-line
gitbutlerapp · Feb 19, 2025 · 63238f1 · 63238f1
1 parent 64b7870
commit 63238f1
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 4 deletions.
diff --git a/apps/desktop/src/components/v3/CommitRow.svelte b/apps/desktop/src/components/v3/CommitRow.svelte
@@ -12,7 +12,11 @@
 
 	let { first, commit, last, lastBranch, selectedCommitId = $bindable() }: Props = $props();
 
-	$inspect('commit.selectedCommitId', selectedCommitId);
+	const commitTitle = $derived(
+		commit.message.includes('\n\n')
+			? commit.message.substring(0, commit.message.indexOf('\n\n'))
+			: commit.message
+	);
 </script>
 
 <button
@@ -30,7 +34,9 @@
 	}}
 >
 	<CommitLine {commit} {last} {lastBranch} />
-	<div class="commit-content text-13 text-semibold">{commit.message}</div>
+	<div class="commit-content text-13 text-semibold">
+		{commitTitle}
+	</div>
 </button>
 
 <style>

diff --git a/apps/desktop/src/components/v3/StackDetailsCommitHeader.svelte b/apps/desktop/src/components/v3/StackDetailsCommitHeader.svelte
@@ -75,9 +75,17 @@
 </script>
 
 <div class="wrapper">
-	<div class="title text-16 text-bold">{commit.description}</div>
-	<div class="description text-12">{commit.description}</div>
+	<div class="message text-12">{commit.description}</div>
 	<div class="metadata text-11 text-semibold">
+		{#if commit.conflicted}
+			<Tooltip
+				text={"Conflicted commits must be resolved before they can be amended or squashed.\nPlease resolve conflicts using the 'Resolve conflicts' button"}
+			>
+				<span class="conflicted text-13">Conflicted</span>
+			</Tooltip>
+
+			<span class="divider">•</span>
+		{/if}
 		<Tooltip text={commit.author.name}>
 			<img class="avatar" src={commit.author.gravatarUrl} alt={`${commit.author.name} Avatar`} />
 		</Tooltip>
@@ -186,6 +194,16 @@
 		padding: 14px 14px 16px 14px;
 	}
 
+	.message {
+		white-space: pre-wrap;
+		line-height: 18px;
+
+		&::first-line {
+			font-size: 16px;
+			font-weight: 500;
+		}
+	}
+
 	.metadata {
 		display: flex;
 		align-items: center;
@@ -215,6 +233,8 @@
 		display: flex;
 		align-items: center;
 		gap: 2px;
+
+		/* `underline dashed` broken on Linux */
 		text-decoration-line: underline;
 		text-underline-offset: 2px;
 		text-decoration-style: dashed;
@@ -225,4 +245,8 @@
 		align-items: center;
 		gap: 2px;
 	}
+
+	.conflicted {
+		color: var(--clr-theme-err-element);
+	}
 </style>