[SOLVED] Problem: Datestamp is hard for humans to reason about (#9)

src/lib/utils.ts

@@ -76,3 +76,32 @@ export function npubToHex(npub: string): string {
   return hex;
 }
 
+export 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;
+}
+}
+

src/lib/views/messages/RenderKind1.svelte

@@ -11,6 +11,7 @@
 	import { viewed } from '@/snort_workers/main';
 	import UserDisplayName from '@/components/UserDisplayName.svelte';
 	import UserProfilePic from '@/components/UserProfilePic.svelte';
+	import { formatTimeAgo } from '../../utils'
 
 	export let note: NostrEvent;
 	export let onClickReply: () => void;
@@ -73,7 +74,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>

src/lib/views/messages/RenderKind1AsThreadHead.svelte

@@ -6,6 +6,7 @@
 	import type { FrontendData } from '@/snort_workers/types';
 	import type { NostrEvent } from 'nostr-tools';
 	import { type Writable } from 'svelte/store';
+	import { formatTimeAgo } from '../../utils'
 
 	export let note: NostrEvent;
 	//export let store: Writable<FrontendData>;
@@ -31,7 +32,7 @@
 					</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>