feat(list): add loadmore button (#54)

public/app.css

@@ -64,6 +64,11 @@ ul {
   margin: 0 1px;
 }
 
+.button--small {
+  width: fit-content;
+  padding: 4px 10px;
+}
+
 .input {
   width: 100%;
   border: 1px solid transparent;
@@ -276,6 +281,11 @@ ul {
   padding: 0;
 }
 
+.list__cta {
+  margin: 0 auto;
+  padding: 10px 0;
+} 
+
 .messages-list {
   gap: var(--size-0);
   padding: 0;
@@ -1044,9 +1054,9 @@ ul {
 .modal__cta--close {
   cursor: pointer;
   background: transparent;
-  -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.54);
-  -moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.54);
-  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.54);
+  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.18);
+  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.18);
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.18);
   border: 1px solid transparent;
   border-radius: 100%;
   padding: 0;

src/components/molecules/list.rs

@@ -28,6 +28,8 @@ pub struct ListProps<'a> {
     thread: Option<Vec<TimelineMessage>>,
     is_loading: bool,
     on_scroll: EventHandler<'a, ListEvent>,
+    #[props(default = false)]
+    show_load_button: bool
 }
 
 pub fn List<'a>(cx: Scope<'a, ListProps<'a>>) -> Element<'a> {
@@ -357,7 +359,7 @@ pub fn List<'a>(cx: Scope<'a, ListProps<'a>>) -> Element<'a> {
                                                         info!("thread");
                                                     }
                                                 }
-
+                                                 
                                             }
                                         }
                                     ))
@@ -367,6 +369,20 @@ pub fn List<'a>(cx: Scope<'a, ListProps<'a>>) -> Element<'a> {
                     )
                 }
             )
+            if cx.props.show_load_button && !cx.props.is_loading {
+                rsx!(
+                    div {
+                        class: "list__cta",
+                        button {
+                            class: "button button--secondary button--small",
+                            onclick: move |_| {
+                                cx.props.on_scroll.call(ListEvent {  });
+                            },
+                            translate!(i18, "chat.message_list.see_more")
+                        }
+                    }
+                )
+            } 
         }
     })
 }

src/components/organisms/chat/active_room.rs

@@ -112,6 +112,7 @@ pub fn ActiveRoom(cx: Scope) -> Element {
                     messages: messages.clone(),
                     thread: None,
                     is_loading: is_loading,
+                    show_load_button: true,
                     on_scroll: move |_| {
                         use_m.loadmore("{room.get().id}");
                     }