2 files changed, 63 insertions, 5 deletions

diff --git a/assets/style.scss b/assets/style.scss
index b32e35c..4ad2dd7 100644
--- a/assets/style.scss
+++ b/assets/style.scss
@@ -173,6 +173,7 @@ p {
   padding: 0.5em;
   margin: 0.5em 0;
   box-sizing: border-box;
+  align-items: stretch;
 }
 
 .chats-list-item:hover,
@@ -186,6 +187,51 @@ p {
   /* background: linear-gradient(0deg, #364B3B 0%, #19311F 100%); */
 }
 
+.chats-list-item .item-info, .roster-list-item .item-info {
+  width: 0;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.chats-list-item .main-info, .roster-list-item .main-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.chats-list-item .name, .roster-list-item .name {
+  font-weight: bold;
+  font-size: 1.1em;
+}
+
+.chats-list-item .name, .roster-list-item .name {
+  font-weight: light;
+}
+
+.chats-list-item .sub-info, .roster-list-item .sub-info {
+  display: flex;
+}
+
+.chats-list-item .message-preview {
+  font-weight: light;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: auto;
+}
+
+.roster-list-item .jid {
+  opacity: 0;
+  font-family: Diolce;
+  font-weight: normal;
+}
+
+.roster-list-item:hover .jid {
+  opacity: 100%;
+}
+
 .avatar {
   object-fit: contain;
   border-radius: 50%;
diff --git a/src/lib.rs b/src/lib.rs
index 3b26827..9419d05 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -12,7 +12,7 @@ use std::{
 };
 
 use base64::{Engine, prelude::BASE64_STANDARD};
-use chrono::{NaiveDateTime, TimeDelta, Utc};
+use chrono::{Local, NaiveDateTime, TimeDelta, Utc};
 use filamento::{
     chat::{Body, Chat, ChatStoreFields, Delivery, Message, MessageStoreFields}, db::Db, error::{CommandError, ConnectionError, DatabaseError}, files::{opfs::OPFSError, FileStore, FilesMem, FilesOPFS}, presence::{Offline, Online, Presence, PresenceType, Show}, roster::{Contact, ContactStoreFields}, user::{User, UserStoreFields}, UpdateMessage
 };
@@ -1263,6 +1263,7 @@ pub fn MessageHistoryBuffer(chat: MacawChat) -> impl IntoView {
                         .timestamp()
                         .read()
                         .naive_local();
+                // TODO: mark new day
                 // if message_timestamp.date() > last_timestamp.date() {
                 //     messages_view = messages_view.push(date(message_timestamp.date()));
                 // }
@@ -2055,7 +2056,8 @@ fn RosterListItem(contact: MacawContact) -> impl IntoView {
         <div class="roster-list-item" class:open=move || open() class:focused=move || focused() on:click=open_chat>
             <AvatarWithPresence user=contact_user />
             <div class="item-info">
-                <h3>{name}</h3>
+                <div class="main-info"><p class="name">{name}<span class="jid"> - {move || contact_contact.user_jid().read().to_string()}</span></p></div>
+                <div class="sub-info"><!-- "TODO: status messages" --></div>
             </div>
         </div>
     }
@@ -2125,10 +2127,11 @@ fn ChatsListItem(chat: MacawChat, message: MacawMessage) -> impl IntoView {
     let chat_chat: Store<Chat> = <ArcStore<Chat> as Clone>::clone(&chat.chat).into();
     let chat_user: Store<User> =
         <ArcStore<filamento::user::User> as Clone>::clone(&chat.user).into();
+    let message_message: Store<Message> = <ArcStore<Message> as Clone>::clone(&message.message).into();
     let name = move || get_name(chat_user);
 
     // TODO: store fine-grained reactivity
-    let latest_message_body = move || message.get().body.body;
+    let latest_message_body = move || message_message.body().get().body;
     let open_chats: Store<OpenChatsPanel> =
         use_context().expect("no open chats panel store in context");
 
@@ -2156,12 +2159,21 @@ fn ChatsListItem(chat: MacawChat, message: MacawMessage) -> impl IntoView {
     let focused = move || open().is_focused();
     let open = move || open().is_open();
 
+    let date = move || message_message.timestamp().read().naive_local();
+    let now = move || Local::now().naive_local();
+    let timeinfo = move || if date().date() == now().date() {
+        // TODO: localisation/config
+        date().time().format("%H:%M").to_string()
+    } else {
+        date().date().format("%d/%m").to_string()
+    };
+
     view! {
         <div class="chats-list-item" class:open=move || open() class:focused=move || focused() on:click=open_chat>
             <AvatarWithPresence user=chat_user />
             <div class="item-info">
-                <h3>{name}</h3>
-                <p>{latest_message_body}</p>
+                <div class="main-info"><p class="name">{name}</p><p class="timestamp">{timeinfo}</p></div>
+                <div class="sub-info"><p class="message-preview">{latest_message_body}</p><p><!-- "TODO: delivery or unread state" --></p></div>
             </div>
         </div>
     }