Handles no commits to rebase

src/webviews/apps/rebase/rebase.ts

@@ -243,7 +243,24 @@ class RebaseEditor extends App {
 		}
 
 		$container.innerHTML = '';
-		if (state.entries.length === 0) return;
+		if (state.entries.length === 0) {
+			$container.classList.add('entries--empty');
+
+			const $button = document.querySelector<HTMLButtonElement>('.button[name="start"]');
+			if ($button != null) {
+				$button.disabled = true;
+			}
+
+			const $entry = document.createElement('li');
+
+			const $el = document.createElement('h3');
+			$el.innerText = 'No commits to rebase';
+
+			$entry.appendChild($el);
+			$container.appendChild($entry);
+
+			return;
+		}
 
 		let squashing = false;
 		let squashToHere = false;

src/webviews/apps/scss/buttons.scss

@@ -16,6 +16,11 @@
 	&:focus {
 		outline: none;
 	}
+
+	&[disabled] {
+		cursor: default !important;
+		opacity: 0.25 !important;
+	}
 }
 
 .button--big {
@@ -29,21 +34,21 @@
 	}
 	.vscode-dark & {
 		border: 1px solid rgba(255, 255, 255, 0.6);
-		color: white !important;
+		color: white;
 	}
 	transition: background-color 250ms, border-color 250ms, color 250ms;
 
-	&:hover,
-	&:focus {
+	&:not([disabled]):hover,
+	&:not([disabled]):focus {
 		.vscode-light & {
 			background-color: var(--color-button-background--darken-30);
 			border-color: var(--color-button-background--darken-30);
-			color: white !important;
+			color: white;
 		}
 		.vscode-dark & {
 			background-color: white;
 			border-color: white;
-			color: black !important;
+			color: black;
 		}
 	}
 
@@ -55,15 +60,15 @@
 .button--flat-inverse {
 	background-color: white;
 	border: 1px solid white;
-	color: black !important;
+	color: black;
 	font-weight: 600;
 	transition: background-color 250ms, border-color 250ms, color 250ms;
 
-	&:hover,
-	&:focus {
+	&:not([disabled]):hover,
+	&:not([disabled]):focus {
 		background: rgba(0, 0, 0, 0.2);
 		border-color: rgba(255, 255, 255, 0.6);
-		color: white !important;
+		color: white;
 	}
 
 	.preload & {
@@ -74,22 +79,22 @@
 .button--flat-primary {
 	background-color: var(--color-button-background);
 	border: 1px solid var(--color-button-background);
-	color: var(--color-button-foreground) !important;
+	color: var(--color-button-foreground);
 	font-weight: 600;
 	transition: background-color 250ms, border-color 250ms, color 250ms;
 
-	&:hover,
-	&:focus {
+	&:not([disabled]):hover,
+	&:not([disabled]):focus {
 		.vscode-dark & {
 			background-color: white;
 			border-color: white;
-			color: black !important;
+			color: black;
 		}
 
 		.vscode-light & {
 			background-color: var(--color-button-background--darken-30);
 			border-color: var(--color-button-background--darken-30);
-			color: white !important;
+			color: white;
 		}
 	}
 

src/webviews/apps/scss/rebase.scss

@@ -47,6 +47,15 @@ h4 {
 	}
 }
 
+.entries--empty {
+	border: none;
+
+	h3 {
+		margin: 1em auto;
+		width: fit-content;
+	}
+}
+
 .shortcuts {
 	grid-area: shortcuts;
 	margin: 0 auto;