♻️ Brand new post list

pkg/views/src/components/posts/PostItem.vue

@@ -0,0 +1,31 @@
+<template>
+  <v-card>
+    <template #text>
+      <div class="flex gap-3">
+        <div>
+          <v-avatar
+            color="grey-lighten-2"
+            icon="mdi-account-circle"
+            class="rounded-card"
+            :src="props.item?.author.avatar"
+          />
+        </div>
+
+        <div>
+          <div class="font-bold">{{ props.item?.author.nick }}</div>
+          {{ props.item?.content }}
+        </div>
+      </div>
+    </template>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ item: any }>();
+</script>
+
+<style scoped>
+.rounded-card {
+  border-radius: 8px;
+}
+</style>

pkg/views/src/components/posts/PostList.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="post-list">
+    <div v-if="props.loading" class="text-center py-8">
+      <v-progress-circular indeterminate />
+    </div>
+
+    <v-infinite-scroll :items="props.posts" :onLoad="props.loader">
+      <template v-for="(item, index) in props.posts" :key="item">
+        <div class="mb-3 px-1">
+          <post-item :item="item" />
+        </div>
+      </template>
+    </v-infinite-scroll>
+  </div>
+</template>
+
+<script setup lang="ts">
+import PostItem from "@/components/posts/PostItem.vue";
+
+const props = defineProps<{ loading: boolean, posts: any[], loader: (opts: any) => Promise<any> }>();
+</script>