SOLVED: Datestamp is hard for humans to reason about (#7)

* Update RenderKind1.svelte Date is now easier to read. Day, Date Month, Year, TI:ME AM/PM * Update RenderKind1AsThreadHead.svelte Date time easier to read on thread * Update RenderKind1.svelte relative dates. seconds, minutes, hours, days ago * Update RenderKind1AsThreadHead.svelte relative dates . seconds , minutes , hours , days ago . * Update ChatLayout.svelte Fixed overlay of message box, and input.
nostrocket · May 20, 2024 · 314d056 · 314d056
1 parent b88f5bc
commit 314d056
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 16 deletions.
diff --git a/src/lib/components/ChatLayout.svelte b/src/lib/components/ChatLayout.svelte
@@ -71,20 +71,20 @@
 		</div>
 	</div>
 
-	<div class="flex-1">
-		<div class="flex-col h-full">
-			<!-- CONTENT-->
-			<div
-				class="h-full relative z-10 bg-white dark:bg-slate-900 overflow-x-hidden overflow-y-scroll no-scrollbar"
-			>
-				<slot />
-			</div>
-			<!-- MESSAGE BOX-->
-			<div class="relative w-full">
-				<div class="z-20 flex absolute inset-x-0 bottom-0 h-36"><slot name="input" /></div>
-			</div>
-		</div>
-	</div>
+	<div class="flex flex-col h-full">
+	   <!-- CONTENT -->
+	   <div class="flex-1 relative overflow-hidden">
+	     <div class="h-full bg-white dark:bg-slate-900 overflow-x-hidden overflow-y-scroll no-scrollbar z-10">
+	       <slot />
+	     </div>
+	   </div>
+	   <!-- MESSAGE BOX -->
+	   <div class="flex flex-row">
+	     <div class="relative w-full bg-white dark:bg-slate-900 z-20">
+	       <slot name="input" />
+	     </div>
+	   </div>
+ 	</div>
 	<div class="hidden flex-1 lg:block">
 		<div class="h-full flex-col">
 			<div class="h-full flex-1 bg-slate-100 dark:bg-cyan-800 overflow-y-scroll">

diff --git a/src/lib/views/messages/RenderKind1.svelte b/src/lib/views/messages/RenderKind1.svelte
@@ -29,6 +29,38 @@ onMount(() => {
 });
 
 	$: childrenCount = $store?.replies.get(note.id) ? $store.replies.get(note.id)!.size : 0;
+
+function formatTimeAgo(timestamp: number): string {
+    const currentTime = Date.now();
+    const secondsAgo = Math.floor((currentTime - timestamp) / 1000);
+
+    if (secondsAgo < 60) {
+      return `${secondsAgo} seconds ago`;
+    } else if (secondsAgo < 3600) {
+      const minutesAgo = Math.floor(secondsAgo / 60);
+      return `${minutesAgo} minute${minutesAgo === 1 ? '' : 's'} ago`;
+    } else if (secondsAgo < 86400) {
+      const hoursAgo = Math.floor(secondsAgo / 3600);
+      return `${hoursAgo} hour${hoursAgo === 1 ? '' : 's'} ago`;
+    } else if (secondsAgo < 604800) {
+      const daysAgo = Math.floor(secondsAgo / 86400);
+      return `${daysAgo} day${daysAgo === 1 ? '' : 's'} ago`;
+    } else {
+      const formattedDate = new Date(timestamp).toLocaleString('en-US', {
+        weekday: 'short',
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: true
+      });
+      return formattedDate;
+    }
+  }	
+
+
+
 </script>
 
 <div bind:this={top} class="w-full pt-2 pl-2 pr-2">
@@ -73,7 +105,7 @@ onMount(() => {
 						<h6 class="text-gray-500 text-xs font-normal leading-4 py-1"></h6>
 						<div class="justify-end items-center inline-flex">
 							<h6 class="text-gray-500 text-xs font-normal leading-4 py-1">
-								{new Date(note.created_at * 1000).toLocaleString()}
+								{formatTimeAgo(note.created_at * 1000)}
 								{#if $viewed.has(note.id)}✓{/if}
 							</h6>
 						</div>

diff --git a/src/lib/views/messages/RenderKind1AsThreadHead.svelte b/src/lib/views/messages/RenderKind1AsThreadHead.svelte
@@ -13,6 +13,37 @@
 	let top: HTMLDivElement;
 
 	//$: childrenCount = $store?.replies.get(note.id) ? $store.replies.get(note.id)!.size : 0;
+	function formatTimeAgo(timestamp: number): string {
+    const currentTime = Date.now();
+    const secondsAgo = Math.floor((currentTime - timestamp) / 1000);
+
+    if (secondsAgo < 60) {
+      return `${secondsAgo} seconds ago`;
+    } else if (secondsAgo < 3600) {
+      const minutesAgo = Math.floor(secondsAgo / 60);
+      return `${minutesAgo} minute${minutesAgo === 1 ? '' : 's'} ago`;
+    } else if (secondsAgo < 86400) {
+      const hoursAgo = Math.floor(secondsAgo / 3600);
+      return `${hoursAgo} hour${hoursAgo === 1 ? '' : 's'} ago`;
+    } else if (secondsAgo < 604800) {
+      const daysAgo = Math.floor(secondsAgo / 86400);
+      return `${daysAgo} day${daysAgo === 1 ? '' : 's'} ago`;
+    } else {
+      const formattedDate = new Date(timestamp).toLocaleString('en-US', {
+        weekday: 'short',
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: true
+      });
+      return formattedDate;
+    }
+  }	
+
+
+
 </script>
 
 <div class="w-full pt-2 pl-2 pr-2">
@@ -31,7 +62,9 @@
 					</div>
 					<div bind:this={top} class="justify-end items-center inline-flex">
 						<h6 class="text-gray-500 text-xs font-normal leading-4 py-1">
-							{new Date(note.created_at * 1000).toLocaleString()}{#if $viewed.has(note.id)}✓{/if}
+								{formatTimeAgo(note.created_at * 1000)}
+
+							{#if $viewed.has(note.id)}✓{/if}
 						</h6>
 					</div>
 				</div>