feat: kickstart scroll

app/javascript/ui/MessageList.vue

@@ -1,8 +1,14 @@
 <script setup>
-import { onMounted, computed, watch } from 'vue';
+import { onMounted, computed, watch, useTemplateRef, nextTick } from 'vue';
 import Message from 'next/message/Message.vue';
 import { useStore } from 'dashboard/composables/store';
 import { useCamelCase } from 'dashboard/composables/useTransformKeys';
+import {
+  useScroll,
+  useEventListener,
+  useThrottleFn,
+  useElementSize,
+} from '@vueuse/core';
 
 const props = defineProps({
   conversationId: {
@@ -11,11 +17,10 @@ const props = defineProps({
   },
 });
 
+const messageListRef = useTemplateRef('messageListRef');
 const store = useStore();
-
-onMounted(() => {
-  store.dispatch('getConversation', props.conversationId);
-});
+const { y } = useScroll(messageListRef);
+const { height } = useElementSize(messageListRef);
 
 const conversation = computed(() => {
   return store.getters.getConversationById(props.conversationId);
@@ -27,16 +32,37 @@ const allMessages = computed(() => {
   return useCamelCase(conversation.value.messages);
 });
 
-watch(conversation, () => {
+watch(conversation, async () => {
   store.dispatch('fetchPreviousMessages', {
     conversationId: conversation.value.id,
     before: allMessages.value[0].id,
   });
+  await nextTick();
+  y.value = height.value;
 });
+
+onMounted(() => {
+  store.dispatch('getConversation', props.conversationId);
+});
+
+useEventListener(
+  messageListRef,
+  'scroll',
+  useThrottleFn(() => {
+    // eslint-disable-next-line no-console
+    console.log('Testing');
+    // if (top.value) {
+    //   store.dispatch('fetchPreviousMessages', {
+    //     conversationId: props.conversationId,
+    //     before: allMessages.value[0].id,
+    //   });
+    // }
+  }, 100)
+);
 </script>
 
 <template>
-  <ul class="px-4 bg-n-background">
+  <ul ref="messageListRef" class="p-4 bg-n-background h-screen overflow-scroll">
     <Message
       v-for="message in allMessages"
       :key="message.id"