feat: date dividers

3 files changed, 110 insertions, 59 deletions

diff --git a/assets/style.scss b/assets/style.scss
index 1aa37d9..f6e1d55 100644
--- a/assets/style.scss
+++ b/assets/style.scss
@@ -419,6 +419,24 @@ background: #00000060;
   overflow-y: scroll;
 }
 
+
+.messages-buffer .new-day {
+  display: flex;
+  align-items: center;
+  margin: 0.5em 0 0 0;
+  /* margin: 1em -1em; */
+  
+  
+  &:before,
+  &:after {
+    content: "";
+    flex: 1;
+    height: 2px;
+    margin: 0 1em;
+    background: black;
+  }
+}
+
 .chat-message {
   display: flex;
   padding: 4px 0;
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()
+            }
+        }}
     }
 }
diff --git a/src/components/message_history_buffer.rs b/src/components/message_history_buffer.rs
index cf4c328..9dc0473 100644
--- a/src/components/message_history_buffer.rs
+++ b/src/components/message_history_buffer.rs
@@ -111,23 +111,25 @@ pub fn MessageHistoryBuffer(chat: MacawChat) -> impl IntoView {
             .into_iter()
             .map(|(id, message)| {
                 let message_timestamp = message.message.get().timestamp().read().naive_local();
-                // TODO: mark new day
-                // if message_timestamp.date() > last_timestamp.date() {
-                //     messages_view = messages_view.push(date(message_timestamp.date()));
-                // }
-                let major = if last_user.as_ref() != Some(&message.message.get().read().from)
+                let mut major = if last_user.as_ref() != Some(&message.message.get().read().from)
                     || message_timestamp - last_timestamp > TimeDelta::minutes(3)
                 {
                     true
                 } else {
                     false
                 };
+                let new_day = if message_timestamp.date() > last_timestamp.date() {
+                    major = true;
+                    true
+                } else {
+                    false
+                };
                 last_user = Some(message.get().from().get());
                 last_timestamp = message_timestamp;
-                (id, (message, major, false))
+                (id, (message, major, false, new_day))
             })
             .collect::<Vec<_>>();
-        if let Some((_id, (_, _, last))) = messages.last_mut() {
+        if let Some((_id, (_, _, last, _))) = messages.last_mut() {
             *last = true
         }
         messages.into_iter().rev()
@@ -135,8 +137,17 @@ pub fn MessageHistoryBuffer(chat: MacawChat) -> impl IntoView {
 
     view! {
         <div class="messages-buffer">
-            <For each=each key=|message| (message.0, message.1.1, message.1.2) let(message)>
-                <Message message=message.1.0.into() major=message.1.1 r#final=message.1.2 />
+            <For
+                each=each
+                key=|message| (message.0, message.1.1, message.1.2, message.1.3)
+                let(message)
+            >
+                <Message
+                    message=message.1.0.into()
+                    major=message.1.1
+                    r#final=message.1.2
+                    new_day=message.1.3
+                />
             </For>
         </div>
     }