♻️ Continued to migrate components

app/components/Post/PostItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-card>
+  <n-card :size="compact ? 'small' : 'medium'">
     <div :class="['flex flex-col', compact ? 'gap-1' : 'gap-3']">
       <post-header :item="props.item" :compact="compact" />
 
@@ -22,10 +22,10 @@
       <template v-if="showReferenced">
         <div
           v-if="props.item.repliedPost || props.item.repliedGone"
-          class="border rounded-md"
+          class="border rounded-xl"
         >
           <div class="p-2 flex items-center gap-2">
-            <span class="mdi mdi-reply"></span>
+            <n-icon :component="ReplyIcon" class="ms-2" />
             <span class="font-bold">Replying to</span>
           </div>
           <div
@@ -47,10 +47,10 @@
 
         <div
           v-if="props.item.forwardedPost || props.item.forwardedGone"
-          class="border rounded-md"
+          class="border rounded-xl"
         >
           <div class="p-2 flex items-center gap-2">
-            <span class="mdi mdi-forward"></span>
+            <n-icon :component="ForwardIcon" class="ms-2" />
             <span class="font-bold">Forwarded</span>
           </div>
           <div
@@ -112,6 +112,7 @@ import { ref, watch } from "vue"
 import { useMarkdownProcessor } from "~/composables/useMarkdownProcessor"
 import type { SnPost } from "~/types/api"
 import { useIntersectionObserver } from "@vueuse/core"
+import { ForwardIcon, ReplyIcon } from "lucide-vue-next"
 
 const props = withDefaults(
   defineProps<{

app/components/Post/PostQuickReply.vue

@@ -1,22 +1,14 @@
 <template>
-  <v-card
-    title="Post your reply"
-    prepend-icon="mdi-post-lamp"
-    flat
-    border
-    density="comfortable"
-  >
-    <v-card-text>
-      <v-textarea
-        placeholder="Talk about this post for a bit."
-        disabled
-        max-rows="5"
-        auto-grow
-        :hide-details="true"
-      ></v-textarea>
-      <div class="flex justify-end mt-4">
-        <v-btn append-icon="mdi-send">Send</v-btn>
-      </div>
-    </v-card-text>
-  </v-card>
+  <n-card title="Post your reply" size="small" embedded>
+    <n-input
+      type="textarea"
+      placeholder="Talk about this post for a bit."
+      size="large"
+      :rows="5"
+      auto-grow
+    ></n-input>
+    <div class="flex justify-end mt-4">
+      <n-button append-icon="mdi-send" size="small">Send</n-button>
+    </div>
+  </n-card>
 </template>

app/components/Post/RepliesList.vue

@@ -14,17 +14,16 @@
     </n-alert>
 
     <!-- Replies List -->
-    <v-infinite-scroll
+    <n-infinite-scroll
       class="flex flex-col gap-4 mt-0"
-      height="auto"
-      side="end"
-      manual
+      :distance="10"
       @load="loadMore"
     >
       <template v-for="item in replies" :key="item.id">
         <post-item
           :show-referenced="false"
           :item="item"
+          class="mb-4"
           @click="router.push('/posts/' + item.id)"
           @react="
             (symbol, attitude, delta) =>
@@ -33,23 +32,17 @@
         />
       </template>
 
-      <!-- Loading State -->
-      <template #loading>
-        <div class="flex justify-center py-4">
-          <n-spin size="large" />
-        </div>
-      </template>
-
       <!-- Empty State -->
-      <template #empty>
-        <div v-if="!replies" class="text-center py-8 text-muted-foreground">
-          <n-icon size="48" class="mb-2 opacity-50">
-            <i class="mdi mdi-comment-outline"></i>
-          </n-icon>
-          <p>No replies yet</p>
-        </div>
-      </template>
-    </v-infinite-scroll>
+      <div
+        v-if="!replies || replies.length === 0"
+        class="text-center py-8 text-muted-foreground"
+      >
+        <n-icon size="48" class="mb-2 opacity-50">
+          <i class="mdi mdi-comment-outline"></i>
+        </n-icon>
+        <p>No replies yet</p>
+      </div>
+    </n-infinite-scroll>
   </div>
 </template>
 
@@ -74,7 +67,5 @@ const { replies, hasError, error, loadMore, refresh } = useRepliesList(
 </script>
 
 <style>
-.replies-list .v-infinite-scroll .v-infinite-scroll__side:first-child {
-  display: none;
-}
+/* Removed Vuetify-specific styles */
 </style>