From 17b1f979a998ef683fd461b4d315db68801149a9 Mon Sep 17 00:00:00 2001
From: "Tanner Collin (aider)" <git@tannercollin.com>
Date: Thu, 14 Aug 2025 19:40:06 +0000
Subject: [PATCH] feat: implement rangeDelta to display time range duration

---
 mapper/src/App.js | 33 +++++++++++++++++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/mapper/src/App.js b/mapper/src/App.js
index 6ae53e5..aa66d80 100644
--- a/mapper/src/App.js
+++ b/mapper/src/App.js
@@ -167,13 +167,42 @@ function Menu({duration, setDuration, end, setEnd, slider, setSlider}) {
 		}
 	};
 
-	const rangeDelta = (x) => {
+	const rangeDelta = (range) => {
+		const start = moment(range[0]);
+		const end = moment(range[1]);
+		const diff = moment.duration(end.diff(start));
+
+		const parts = [];
+
+		const years = diff.years();
+		if (years > 0) parts.push(`${years} year${years > 1 ? 's' : ''}`);
+
+		const months = diff.months();
+		if (months > 0) parts.push(`${months} month${months > 1 ? 's' : ''}`);
+
+		const days = diff.days();
+		if (days > 0) parts.push(`${days} day${days > 1 ? 's' : ''}`);
+
+		const hours = diff.hours();
+		if (hours > 0) parts.push(`${hours} hour${hours > 1 ? 's' : ''}`);
+
+		const minutes = diff.minutes();
+		if (minutes > 0) parts.push(`${minutes} minute${minutes > 1 ? 's' : ''}`);
+
+		const seconds = diff.seconds();
+		if (seconds > 0) parts.push(`${seconds} second${seconds > 1 ? 's' : ''}`);
+
+		if (parts.length === 0) {
+			return '0 seconds';
+		}
+
+		return parts.join(', ');
 	};
 
 	return (
 		<div className='menu'>
 			{(showRange || !!submenu) && <div className='range'>
-				{rangeTime(range[0])} - {rangeTime(range[1])}
+				{rangeTime(range[0])} - {rangeTime(range[1])} ({rangeDelta(range)})
 			</div>}
 
 			<div className='time-slider'>