add post reaction timeline

src/app/feed/components/PostTimeline.tsx

@@ -0,0 +1,31 @@
+import { PostReaction } from '../posts/posts.ts'
+import { Temporal } from '@js-temporal/polyfill'
+
+interface PostTimelineProps {
+  reactions: PostReaction[]
+}
+
+export function PostTimeline({ reactions }: PostTimelineProps) {
+  return (
+    <div className={`flex flex-col gap-4 mb-4 px-4`}>
+      {reactions.map((reaction) => (
+        <div className={`flex flex-col`}>
+          <div className={`text-gray-400 text-xs -mb-1`}>
+            {Temporal.Now.instant().toLocaleString('en-AU', {
+              year: 'numeric',
+              month: 'numeric',
+              day: 'numeric',
+              hour: '2-digit',
+              minute: '2-digit',
+            })}
+          </div>
+          <div className={`flex flex-row items-baseline text-gray-500`}>
+            <span className={`text-gray-400`}>@{reaction.authorName}</span>&nbsp;
+            <span>did</span>&nbsp;
+            <span className={`text-lg`}>{reaction.emoji}</span>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}

src/app/feed/pages/PostPage.tsx

@@ -10,6 +10,7 @@ import { useTranslations } from '../../i18n/translations.ts'
 import { usePostViewModel } from '../posts/usePostViewModel.ts'
 import { Temporal } from '@js-temporal/polyfill'
 import { useUserStore } from '../../user/user.ts'
+import { PostTimeline } from '../components/PostTimeline.tsx'
 
 interface PostPageProps {
   postsService: PostsService
@@ -17,11 +18,11 @@ interface PostPageProps {
 
 export default function PostPage({ postsService }: PostPageProps) {
   const { postId } = useParams<{ postId: string }>()
-  const { posts, setPosts, addReaction, reactions, removeReaction } = usePostViewModel()
+  const { posts, setPosts, addReaction, reactions: _reactions, removeReaction } = usePostViewModel()
   const { t } = useTranslations()
   const username = useUserStore((state) => state.user?.username)
-
   const post = posts.at(0)
+  const reactions = (post?.postId ? _reactions[post.postId] : []) ?? []
 
   useEffect(() => {
     if (!postId) return
@@ -59,11 +60,12 @@ export default function PostPage({ postsService }: PostPageProps) {
           <div className="w-full">
             <PostItem
               post={post}
-              reactions={reactions[post.postId] ?? []}
+              reactions={reactions}
               addReaction={onAddReaction}
               clearReaction={onClearReaction}
               hideViewButton={true}
             />
+            <PostTimeline reactions={reactions} />
           </div>
         )}
       </main>