update empty state

src/app/channel/pages/index.page.tsx

@@ -4,13 +4,44 @@ import { ChannelMessageForm } from "@app/channel/components/messages/form";
 import { ChannelMetadata } from "@app/channel/components/metadata";
 import { RelayContext } from "@shared/relayProvider";
 import { useChannelMessages } from "@stores/channels";
-import { dateToUnix } from "@utils/date";
+import { dateToUnix, getHourAgo } from "@utils/date";
 import { usePageContext } from "@utils/hooks/usePageContext";
 import { LumeEvent } from "@utils/types";
 import { useCallback, useContext, useEffect, useRef } from "react";
 import { Virtuoso } from "react-virtuoso";
 import useSWRSubscription from "swr/subscription";
 
+const now = new Date();
+
+const Header = (
+	<div className="relative py-4">
+		<div className="absolute inset-0 flex items-center">
+			<div className="w-full border-t border-zinc-800" />
+		</div>
+		<div className="relative flex justify-center">
+			<div className="inline-flex items-center gap-x-1.5 rounded-full bg-zinc-900 px-3 py-1.5 text-sm font-medium text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-800">
+				{getHourAgo(24, now).toLocaleDateString("en-US", {
+					weekday: "long",
+					year: "numeric",
+					month: "long",
+					day: "numeric",
+				})}
+			</div>
+		</div>
+	</div>
+);
+
+const Empty = (
+	<div className="flex flex-col gap-1 text-center">
+		<h3 className="text-base font-semibold leading-none text-white">
+			Nothing to see here yet
+		</h3>
+		<p className="text-base leading-none text-zinc-400">
+			Be the first to share a message in this channel.
+		</p>
+	</div>
+);
+
 export function Page() {
 	const ndk = useContext(RelayContext);
 	const pageContext = usePageContext();
@@ -97,6 +128,10 @@ export function Page() {
 								overscan={50}
 								increaseViewportBy={{ top: 200, bottom: 200 }}
 								className="scrollbar-hide overflow-y-auto h-full w-full"
+								components={{
+									Header: () => Header,
+									EmptyPlaceholder: () => Empty,
+								}}
 							/>
 						)}
 						<div className="w-full inline-flex shrink-0 px-5 py-3 border-t border-zinc-800">

src/app/chat/components/messageList.tsx

@@ -1,9 +1,41 @@
 import { ChatMessageItem } from "@app/chat/components/messages/item";
 import { useActiveAccount } from "@stores/accounts";
 import { useChatMessages } from "@stores/chats";
+import { getHourAgo } from "@utils/date";
 import { useCallback, useRef } from "react";
 import { Virtuoso } from "react-virtuoso";
 
+const now = new Date();
+
+const Header = (
+	<div className="relative py-4">
+		<div className="absolute inset-0 flex items-center">
+			<div className="w-full border-t border-zinc-800" />
+		</div>
+		<div className="relative flex justify-center">
+			<div className="inline-flex items-center gap-x-1.5 rounded-full bg-zinc-900 px-3 py-1.5 text-sm font-medium text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-800">
+				{getHourAgo(24, now).toLocaleDateString("en-US", {
+					weekday: "long",
+					year: "numeric",
+					month: "long",
+					day: "numeric",
+				})}
+			</div>
+		</div>
+	</div>
+);
+
+const Empty = (
+	<div className="flex flex-col gap-1 text-center">
+		<h3 className="text-base font-semibold leading-none text-white">
+			Nothing to see here yet
+		</h3>
+		<p className="text-base leading-none text-zinc-400">
+			You two didn't talk yet, let's send first message
+		</p>
+	</div>
+);
+
 export function ChatMessageList() {
 	const account = useActiveAccount((state: any) => state.account);
 	const messages = useChatMessages((state: any) => state.messages);
@@ -43,6 +75,10 @@ export function ChatMessageList() {
 				overscan={50}
 				increaseViewportBy={{ top: 200, bottom: 200 }}
 				className="scrollbar-hide h-full w-full overflow-y-auto"
+				components={{
+					Header: () => Header,
+					EmptyPlaceholder: () => Empty,
+				}}
 			/>
 		</div>
 	);