From adeac2e7cd93ea449de0ce30247adbd13cd7120d Mon Sep 17 00:00:00 2001
From: cel 🌸 <cel@bunny.garden>
Date: Wed, 11 Jun 2025 22:17:11 +0100
Subject: feat: date dividers

---
 src/components/message.rs | 122 +++++++++++++++++++++++++++-------------------
 1 file changed, 72 insertions(+), 50 deletions(-)

(limited to 'src/components/message.rs')

diff --git a/src/components/message.rs b/src/components/message.rs
index 9eb0b09..1ddb603 100644
--- a/src/components/message.rs
+++ b/src/components/message.rs
@@ -4,69 +4,91 @@ use reactive_stores::{ArcStore, Store};
 
 use crate::{
     message::MacawMessage,
-    user::{NO_AVATAR, get_avatar, get_name},
+    user::{get_avatar, get_name, NO_AVATAR},
 };
 
 use super::icon::Delivery;
 
 #[component]
-pub fn Message(message: MacawMessage, major: bool, r#final: bool) -> impl IntoView {
+pub fn Message(message: MacawMessage, major: bool, r#final: bool, new_day: bool) -> impl IntoView {
     let name = move || get_name(message.user.get().into(), false);
 
     // TODO: chrono-humanize?
     // TODO: if final, show delivery not only on hover.
     // {move || message_message.delivery().read().map(|delivery| delivery.to_string()).unwrap_or_default()}
-    if major {
-        view! {
-            <div class:final=r#final class="chat-message major">
-                <div class="left">
-                    <Transition fallback=|| view! { <img class="avatar" src=NO_AVATAR /> }>
-                        <img class="avatar" src=move || message.user.avatar().get() />
-                    </Transition>
-                </div>
-                <div class="middle">
-                    <div class="message-info">
-                        <div class="message-user-name">{name}</div>
-                        <div class="message-timestamp">
+    view! {
+        {move || {
+            if major {
+                view! {
+                    <div class:final=r#final class="chat-message major">
+                        <div class="left">
+                            <Transition fallback=|| view! { <img class="avatar" src=NO_AVATAR /> }>
+                                <img class="avatar" src=move || message.user.avatar().get() />
+                            </Transition>
+                        </div>
+                        <div class="middle">
+                            <div class="message-info">
+                                <div class="message-user-name">{name}</div>
+                                <div class="message-timestamp">
+                                    {move || {
+                                        message.get().timestamp().read().format("%H:%M").to_string()
+                                    }}
+                                </div>
+                            </div>
+                            <div class="message-text">
+                                {move || message.get().body().read().body.clone()}
+                            </div>
+                        </div>
+                        <div class="right message-delivery">
+                            {move || {
+                                message
+                                    .get()
+                                    .delivery()
+                                    .get()
+                                    .map(|delivery| {
+                                        view! { <Delivery class:light=true delivery /> }
+                                    })
+                            }}
+                        </div>
+                    </div>
+                }
+                    .into_any()
+            } else {
+                view! {
+                    <div class:final=r#final class="chat-message minor">
+                        <div class="left message-timestamp">
                             {move || message.get().timestamp().read().format("%H:%M").to_string()}
                         </div>
+                        <div class="middle message-text">
+                            {move || message.get().body().read().body.clone()}
+                        </div>
+                        <div class="right message-delivery">
+                            {move || {
+                                message
+                                    .get()
+                                    .delivery()
+                                    .get()
+                                    .map(|delivery| view! { <Delivery delivery /> })
+                            }}
+                        </div>
                     </div>
-                    <div class="message-text">
-                        {move || message.get().body().read().body.clone()}
+                }
+                    .into_any()
+            }
+        }}
+        {move || {
+            if new_day {
+                view! {
+                    <div class="new-day">
+                        {move || {
+                            message.get().timestamp().read().format("%Y-%m-%d").to_string()
+                        }}
                     </div>
-                </div>
-                <div class="right message-delivery">
-                    {move || {
-                        message
-                            .get()
-                            .delivery()
-                            .get()
-                            .map(|delivery| view! { <Delivery class:light=true delivery /> })
-                    }}
-                </div>
-            </div>
-        }
-        .into_any()
-    } else {
-        view! {
-            <div class:final=r#final class="chat-message minor">
-                <div class="left message-timestamp">
-                    {move || message.get().timestamp().read().format("%H:%M").to_string()}
-                </div>
-                <div class="middle message-text">
-                    {move || message.get().body().read().body.clone()}
-                </div>
-                <div class="right message-delivery">
-                    {move || {
-                        message
-                            .get()
-                            .delivery()
-                            .get()
-                            .map(|delivery| view! { <Delivery delivery /> })
-                    }}
-                </div>
-            </div>
-        }
-        .into_any()
+                }
+                    .into_any()
+            } else {
+                view! {}.into_any()
+            }
+        }}
     }
 }
-- 
cgit