feat: add frontend

frontend/src/views/FavoriteMessages.vue

@@ -0,0 +1,31 @@
+<template>
+  <h1 class="mb-4 font-semibold text-xl">Favorites</h1>
+
+
+  <div v-if="messages.length == 0">Empty...</div>
+  <template v-else>
+    <ListItem v-for="message in messages" :key="message.ID" :item="message" />
+
+    <div class="flex items-center justify-center">
+      <button class="px-4 py-2 hover:bg-slate-100 rounded border text-xl font-semibold w-full"
+        @click="loadMore">LoadMore</button>
+    </div>
+  </template>
+</template>
+
+<script setup>
+import ListItem from "@/components/ListItem.vue";
+import { getFavoriteMessages } from "@/services/messages";
+import { onMounted, ref } from "vue";
+
+const messages = ref([]);
+
+const loadMore = async () => {
+  const items = await getChannelMessages(route.params.channel, { offset: messages.value[messages.value.length - 1].ID });
+  messages.value.push(...items);
+}
+
+onMounted(async () => {
+  messages.value = await getFavoriteMessages();
+});
+</script>