Fix transition jump when expanding

src/lib/components/TimerItem.svelte

@@ -4,7 +4,7 @@
 	import { formatDuration, parseTime } from "$lib/utils";
 	import { durationsStore } from "$lib/store";
 	import { slide } from "svelte/transition";
-	import { blurOnEnter } from "$lib/utils";
+	import { blurOnEnter, blurOnEscape } from "$lib/utils";
 
 	/**
 	 * @type {number | null} timer
@@ -19,7 +19,6 @@
 	 * @property {number} duration
 	 * @property {boolean} isRunning
 	 * @property {boolean | undefined} requestFocus
-	 * @property {boolean} isExpanded
 	 * @property {boolean} isInputFocused
 	 * @property {string} notes
 	 * @property {function():void} onDelete
@@ -40,7 +39,6 @@
 		duration = $bindable(),
 		isRunning = $bindable(),
 		requestFocus = false,
-		isExpanded = $bindable(),
 		notes = $bindable(),
 		isInputFocused = $bindable(),
 		onDelete,
@@ -50,9 +48,14 @@
 		onChangeDuration,
 		onChangeNotes,
 		onChangeName,
-		onToggleExpanded,
 	} = $props();
 
+	let isExpanded = $state(false);
+
+	function toggleIsExpanded() {
+		isExpanded = !isExpanded;
+	}
+
 	/**
 	 * @typedef {Object} TotalDuration
 	 * @property {number} value - the total duration in seconds.
@@ -140,7 +143,7 @@
 <div class="timer-item">
 	<div class="timer-item-content">
 		<div class="timer-name-row">
-			<button onclick={onToggleExpanded} class="chevron">
+			<button onclick={toggleIsExpanded} class="chevron">
 				<div>
 					<svg
 						class="chevron {isExpanded ? 'up' : 'down'}"
@@ -166,6 +169,7 @@
 				}}
 				bind:value={name}
 				use:blurOnEnter
+				use:blurOnEscape
 				use:focusOnInit
 			/>
 		</div>
@@ -211,6 +215,7 @@
 						handleBlur();
 						onChangeNotes(notes);
 					}}
+					use:blurOnEscape
 				></textarea>
 			</div>
 		{/if}
@@ -259,7 +264,7 @@
 		background-color: transparent;
 	}
 	.notes {
-		padding: 0px 10px 10px 10px;
+		padding: 10px 10px 0px 10px;
 	}
 	.notes.textarea {
 		padding: 5px;

src/lib/store.js

@@ -13,15 +13,13 @@ class TimerItemValue {
 	 * @param {number} duration
 	 * @param {Date|null} started_at
 	 * @param {string} notes
-	 * @param {boolean} isExpanded
 	 */
-	constructor(id, name, duration, started_at, notes, isExpanded) {
+	constructor(id, name, duration, started_at, notes) {
 		this.id = id;
 		this.name = name;
 		this.duration = duration;
 		this.started_at = started_at;
 		this.notes = notes;
-		this.isExpanded = isExpanded;
 	}
 }
 

src/lib/types.js

@@ -10,7 +10,6 @@
  * @property {number} offsetDuration
  * @property {boolean} isRunning
  * @property {boolean} [requestFocus=false]
- * @property {boolean} isExpanded
  * @property {string} notes
  */
 

src/lib/utils.js

@@ -61,3 +61,30 @@ export function blurOnEnter(node) {
 		},
 	};
 }
+
+/**
+ * Blurs the node when Escape is pressed
+ * @param {HTMLElement} node
+ */
+export function blurOnEscape(node) {
+	/**
+	 * Event handler for the keydown event.
+	 * @param {KeyboardEvent} event
+	 */
+	function handleKey(event) {
+		if (
+			event.key === "Escape" &&
+			node &&
+			typeof node.blur === "function"
+		)
+			node.blur();
+	}
+
+	node.addEventListener("keydown", handleKey);
+
+	return {
+		destroy() {
+			node.removeEventListener("keydown", handleKey);
+		},
+	};
+}

src/routes/+page.svelte

@@ -192,11 +192,14 @@
 
 <div
 	class="timer-list"
-	use:dndzone={{ items: timers, flipDurationMs, dropTargetStyle }}
+	use:dndzone={{
+		items: timers,
+		flipDurationMs,
+		dropTargetStyle,
+		dragDisabled: isInputFocused ? true : false,
+	}}
 	onconsider={handleDndConsider}
 	onfinalize={handleDndFinalize}
-	dragDisabled="false"
-	dropFromOthersDisabled="false"
 >
 	{#each timers as item (item.id)}
 		<div role="listitem" animate:flip={{ duration: flipDurationMs }}>
@@ -207,7 +210,6 @@
 					bind:duration={item.duration}
 					bind:offsetDuration={item.offsetDuration}
 					bind:isRunning={item.isRunning}
-					bind:isExpanded={item.isExpanded}
 					bind:notes={item.notes}
 					requestFocus={item.requestFocus}
 					onDelete={() => deleteTimer(item.id)}

src/routes/todos/+page.svelte

@@ -3,7 +3,7 @@
 	import { dndzone } from "svelte-dnd-action";
 	import { TodoStore } from "$lib/todos_store.js";
 	import { AddButton, CancelButton } from "$lib/components/buttons";
-	import { blurOnEnter } from "$lib/utils";
+	import { blurOnEnter, blurOnEscape } from "$lib/utils";
 
 	const flipDurationMs = 100;
 	const dropTargetStyle = {
@@ -39,6 +39,11 @@
 		}
 	}
 
+	/**
+	 * Whether an input is focused
+	 */
+	let isInputFocused = $state(false);
+
 	/**
 	 * Change the content of a todo
 	 * @param {string} id
@@ -85,7 +90,12 @@
 
 <div
 	class="todo-list"
-	use:dndzone={{ items: todos, flipDurationMs, dropTargetStyle }}
+	use:dndzone={{
+		items: todos,
+		flipDurationMs,
+		dropTargetStyle,
+		dragDisabled: isInputFocused ? true : false,
+	}}
 	onconsider={handleDndConsider}
 	onfinalize={handleDndFinalize}
 >
@@ -94,8 +104,15 @@
 			<input
 				type="text"
 				class="todo-input"
-				onblur={() => updateContent(item.id, item.content)}
+				onblur={() => {
+					updateContent(item.id, item.content);
+					isInputFocused = false;
+				}}
+				onfocus={() => {
+					isInputFocused = true;
+				}}
 				use:blurOnEnter
+				use:blurOnEscape
 				bind:value={item.content}
 			/>
 			<CancelButton

svelte.config.js

@@ -1,6 +1,5 @@
 import adapter from '@sveltejs/adapter-static';
 
-const dev = process.argv.includes('dev');
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {