From 3884c96ddfbe7dc7a1435c0504e0a745601dd6a2 Mon Sep 17 00:00:00 2001
From: ndom91 <yo@ndo.dev>
Date: Wed, 30 Oct 2024 14:34:25 +0100
Subject: [PATCH] feat: double input handling and blur clear

---
 .../branch/StackingSeriesDescription.svelte   | 22 +++++++-------
 .../lib/branch/StackingSeriesHeader.svelte    | 29 ++++++-------------
 .../StackingSeriesHeaderContextMenu.svelte    |  5 +---
 packages/ui/src/lib/Textarea.svelte           |  5 +---
 4 files changed, 23 insertions(+), 38 deletions(-)

diff --git a/apps/desktop/src/lib/branch/StackingSeriesDescription.svelte b/apps/desktop/src/lib/branch/StackingSeriesDescription.svelte
index 25c5990ef..f6349c570 100644
--- a/apps/desktop/src/lib/branch/StackingSeriesDescription.svelte
+++ b/apps/desktop/src/lib/branch/StackingSeriesDescription.svelte
@@ -2,34 +2,36 @@
 	import Textarea from '@gitbutler/ui/Textarea.svelte';
 
 	interface Props {
-		autofocus?: boolean;
-
-		value: string;
+		value?: string;
 		disabled?: boolean;
-		oninput?: (e: Event & { currentTarget: EventTarget & HTMLTextAreaElement }) => void;
 		onEmpty?: () => void;
+		onBlur?: (value: string | undefined | null) => void;
+		textAreaEl?: HTMLDivElement;
 	}
-	const { autofocus, value, disabled = false, oninput, onEmpty }: Props = $props();
 
-	let textareaEl: HTMLDivElement | undefined = $state();
+	let { value, disabled = false, onBlur, onEmpty, textAreaEl = $bindable() }: Props = $props();
 </script>
 
 <div class="branch-description-input">
 	<Textarea
-		bind:textBoxEl={textareaEl}
-		{autofocus}
+		bind:textBoxEl={textAreaEl}
 		class="text-12 text-body"
 		{value}
 		{disabled}
-		{oninput}
 		flex="1"
 		fontSize={12}
 		placeholder="Series description"
 		unstyled
 		padding={{ top: 0, right: 0, bottom: 0, left: 0 }}
+		onblur={() => {
+			if (textAreaEl?.textContent === '') {
+				onEmpty?.();
+			}
+			onBlur?.(textAreaEl?.textContent);
+		}}
 		onkeydown={(e: KeyboardEvent & { currentTarget: EventTarget & HTMLTextAreaElement }) => {
 			if (e.key === 'Escape') {
-				textareaEl?.blur();
+				textAreaEl?.blur();
 
 				if (value === '') {
 					onEmpty?.();
diff --git a/apps/desktop/src/lib/branch/StackingSeriesHeader.svelte b/apps/desktop/src/lib/branch/StackingSeriesHeader.svelte
index 0644f7a4a..d4200fcc3 100644
--- a/apps/desktop/src/lib/branch/StackingSeriesHeader.svelte
+++ b/apps/desktop/src/lib/branch/StackingSeriesHeader.svelte
@@ -28,6 +28,7 @@
 	import Button from '@gitbutler/ui/Button.svelte';
 	import PopoverActionsContainer from '@gitbutler/ui/popoverActions/PopoverActionsContainer.svelte';
 	import PopoverActionsItem from '@gitbutler/ui/popoverActions/PopoverActionsItem.svelte';
+	import { tick } from 'svelte';
 
 	interface Props {
 		currentSeries: PatchSeries;
@@ -58,6 +59,7 @@
 	let kebabContextMenu = $state<ReturnType<typeof ContextMenu>>();
 	let stackingContextMenu = $state<ReturnType<typeof StackingSeriesHeaderContextMenu>>();
 	let kebabContextMenuTrigger = $state<HTMLButtonElement>();
+	let seriesDescriptionEl = $state<HTMLDivElement>();
 
 	let contextMenuOpened = $state(false);
 
@@ -109,8 +111,10 @@
 		}
 	}
 
-	async function editDescription(description: string) {
-		await branchController.updateSeriesDescription(branch.id, currentSeries.name, description);
+	async function editDescription(description: string | undefined | null) {
+		if (description) {
+			await branchController.updateSeriesDescription(branch.id, currentSeries.name, description);
+		}
 	}
 
 	async function toggleDescription() {
@@ -118,6 +122,9 @@
 
 		if (!descriptionVisible) {
 			await branchController.updateSeriesDescription(branch.id, currentSeries.name, '');
+		} else {
+			await tick();
+			seriesDescriptionEl?.focus();
 		}
 	}
 
@@ -133,7 +140,6 @@
 		});
 
 		if (isFailure(messageResult)) {
-			console.error(messageResult.failure);
 			showError('Failed to generate branch name', messageResult.failure);
 
 			return;
@@ -327,23 +333,6 @@
 		flex-grow: 1;
 	}
 
-	.branch-info__label {
-		display: inline-flex;
-
-		&.label-shifted {
-			margin-left: -2px;
-		}
-	}
-
-	.branch-info__content {
-		flex: 1;
-		width: 100%;
-		display: flex;
-		flex-direction: column;
-		gap: 6px;
-		padding: 14px 0;
-	}
-
 	.branch-action {
 		width: 100%;
 		display: flex;
diff --git a/apps/desktop/src/lib/branch/StackingSeriesHeaderContextMenu.svelte b/apps/desktop/src/lib/branch/StackingSeriesHeaderContextMenu.svelte
index 2bc15261d..6924e7293 100644
--- a/apps/desktop/src/lib/branch/StackingSeriesHeaderContextMenu.svelte
+++ b/apps/desktop/src/lib/branch/StackingSeriesHeaderContextMenu.svelte
@@ -58,7 +58,6 @@
 	let newHeadName: string = $state(headName);
 	let isDeleting = $state(false);
 	let aiConfigurationValid = $state(false);
-	let showDescription = $state(!!description);
 
 	$effect(() => {
 		setAIConfigurationValid();
@@ -78,10 +77,9 @@
 <ContextMenu bind:this={contextMenuEl} {target} {onopen} {onclose}>
 	<ContextMenuSection>
 		<ContextMenuItem
-			label={`${!showDescription ? 'Add' : 'Remove'} description`}
+			label={`${!description ? 'Add' : 'Remove'} description`}
 			onclick={async () => {
 				await toggleDescription();
-				showDescription = !showDescription;
 				contextMenuEl?.close();
 			}}
 		/>
@@ -124,7 +122,6 @@
 			<ContextMenuItem
 				label="Copy PR link"
 				onclick={() => {
-					console.log(prUrl);
 					copyToClipboard(prUrl);
 					contextMenuEl?.close();
 				}}
diff --git a/packages/ui/src/lib/Textarea.svelte b/packages/ui/src/lib/Textarea.svelte
index 6148f42aa..a7f5728a7 100644
--- a/packages/ui/src/lib/Textarea.svelte
+++ b/packages/ui/src/lib/Textarea.svelte
@@ -4,7 +4,7 @@
 		id?: string;
 		textBoxEl?: HTMLDivElement;
 		label?: string;
-		value: string | undefined;
+		value?: string;
 		placeholder?: string;
 		disabled?: boolean;
 		fontSize?: number;
@@ -90,8 +90,6 @@
 			}
 		}
 	});
-
-	console.log('placeholder', placeholder);
 </script>
 
 <div
@@ -115,7 +113,6 @@
 		aria-multiline="true"
 		tabindex={disabled ? -1 : 0}
 		contenteditable="plaintext-only"
-		bind:innerText={value}
 		onfocus={(e: Event) => {
 			if (e.currentTarget) {
 				onfocus?.(e as FocusEvent & { currentTarget: EventTarget & HTMLTextAreaElement });