src/components/chat/ChatEditor.vue

@@ -1,33 +1,5 @@
 <template>
   <v-form class="flex-grow-1" ref="chat" @submit.prevent="sendMessage">
-    <v-expand-transition>
-      <v-alert
-        v-show="channels.related?.messages?.reply_to"
-        class="mb-3 text-sm"
-        variant="tonal"
-        density="compact"
-        type="info"
-      >
-        You are about replying a message #{{ channels.related?.messages?.reply_to?.id }}
-
-        <template #prepend>
-          <div class="h-[30px] flex items-center justify-center">
-            <v-icon icon="mdi-reply" size="small" />
-          </div>
-        </template>
-
-        <template #append>
-          <v-btn
-            icon="mdi-close"
-            size="x-small"
-            color="info"
-            variant="text"
-            @click="channels.related.messages.reply_to = null"
-          />
-        </template>
-      </v-alert>
-    </v-expand-transition>
-
     <v-expand-transition>
       <v-alert
         v-show="channels.related?.messages?.edit_to"
@@ -134,7 +106,6 @@ const dialogs = reactive({
 
 const data = ref<any>({
   content: "",
-  reply_id: null,
   attachments: []
 })
 
@@ -146,14 +117,11 @@ async function sendMessage() {
     : `/api/channels/${channels.current.alias}/messages`
   const method = channels.related.messages.edit_to ? "PUT" : "POST"
 
-  const payload = data.value
-  payload.reply_to = payload.reply_id
-
   loading.value = true
   const res = await request("messaging", url, {
     method: method,
     headers: { Authorization: `Bearer ${await getAtk()}`, "Content-Type": "application/json" },
-    body: JSON.stringify(payload)
+    body: JSON.stringify(data.value)
   })
   if (res.status !== 200) {
     error.value = await res.text()
@@ -165,15 +133,6 @@ async function sendMessage() {
   loading.value = false
 }
 
-watch(
-  () => channels.related.messages.reply_to,
-  (val) => {
-    if (val) {
-      data.value.reply_id = val.id
-    }
-  }
-)
-
 watch(
   () => channels.related.messages.edit_to,
   (val) => {
@@ -185,7 +144,6 @@ watch(
 
 function resetEditor() {
   chat.value?.reset()
-  channels.related.messages.reply_to = null
   channels.related.messages.edit_to = null
   channels.related.messages.delete_to = null
   data.value = {

src/components/chat/ChatList.vue

@@ -3,8 +3,8 @@
     class="mt-[-16px] overflow-hidden"
     :onLoad="props.loader"
   >
-    <template v-for="item in props.messages" :key="item.id">
-      <chat-message class="px-6 py-2" :id="`m${item.id}`" :item="item" />
+    <template v-for="item in props.messages" :key="item">
+      <chat-message class="px-6 py-2" :item="item" />
     </template>
 
     <template #empty>

src/components/chat/ChatMessage.vue

@@ -1,45 +1,32 @@
 <template>
-  <div class="relative transition-colors transition-300 message-item">
-    <a v-if="props.item?.reply_to" :href="`#m${props.item?.reply_to.id}`">
-      <div class="pl-2 mb-0.5 text-sm opacity-80 flex items-center">
-        <v-icon icon="mdi-reply" class="me-2" />
-        <span class="me-1 text-xs overflow-hidden ws-nowarp text-ellipsis">{{ props.item?.reply_to?.content }}</span>
-        <span class="text-xs overflow-hidden ws-nowarp text-ellipsis">
-          from {{ props.item?.reply_to?.sender.account.name }}
-        </span>
-      </div>
-    </a>
+  <div class="flex gap-2 relative transition-colors transition-300 message-item">
+    <div>
+      <v-avatar
+        color="grey-lighten-2"
+        icon="mdi-account-circle"
+        class="rounded-card"
+        :image="props.item?.sender.account.avatar"
+      />
+    </div>
 
-    <div class="flex gap-2">
-      <div>
-        <v-avatar
-          color="grey-lighten-2"
-          icon="mdi-account-circle"
-          class="rounded-card"
-          :image="props.item?.sender.account.avatar"
-        />
-      </div>
+    <div class="flex-grow-1">
+      <div class="font-bold text-sm">{{ props.item?.sender.account.nick }}</div>
+      <div>{{ props.item?.content }}</div>
 
-      <div class="flex-grow-1">
-        <div class="font-bold text-sm">{{ props.item?.sender.account.nick }}</div>
-        <div>{{ props.item?.content }}</div>
+      <message-attachment
+        v-if="props.item?.attachments && props.item?.attachments.length > 0"
+        class="mt-1"
+        :attachments="props.item?.attachments"
+      />
+    </div>
 
-        <message-attachment
-          v-if="props.item?.attachments && props.item?.attachments.length > 0"
-          class="mt-1"
-          :attachments="props.item?.attachments"
-        />
-      </div>
-
-      <div class="transition-opacity transition-300 message-action">
-        <v-card>
-          <div class="flex px-2 py-0.5">
-            <v-btn icon="mdi-reply" size="x-small" variant="text" @click="replyMessage" />
-            <v-btn icon="mdi-pencil" size="x-small" variant="text" color="warning" @click="editMessage" />
-            <v-btn icon="mdi-delete" size="x-small" variant="text" color="error" @click="deleteMessage" />
-          </div>
-        </v-card>
-      </div>
+    <div class="transition-opacity transition-300 message-action">
+      <v-card>
+        <div class="flex px-2 py-0.5">
+          <v-btn icon="mdi-pencil" size="x-small" variant="text" @click="editMessage" />
+          <v-btn icon="mdi-delete" size="x-small" variant="text" color="error" @click="deleteMessage" />
+        </div>
+      </v-card>
     </div>
   </div>
 </template>
@@ -52,10 +39,6 @@ const channels = useChannels()
 
 const props = defineProps<{ item: any }>()
 
-function replyMessage() {
-  channels.related.messages.reply_to = JSON.parse(JSON.stringify(props.item))
-}
-
 function editMessage() {
   channels.related.messages.edit_to = JSON.parse(JSON.stringify(props.item))
 }

src/components/posts/PostList.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="post-list mx-[-8px]">
     <v-infinite-scroll :items="props.posts" :onLoad="props.loader">
-      <template v-for="(item, idx) in props.posts" :key="item.id">
+      <template v-for="(item, idx) in props.posts" :key="item">
         <div class="mb-3 px-[8px]">
           <v-card>
             <template #text>

src/stores/channels.ts

@@ -26,7 +26,6 @@ export const useChannels = defineStore("channels", () => {
 
     messages: {
       edit_to: null,
-      reply_to: null,
       delete_to: null
     }
   })
@@ -91,7 +90,6 @@ export const useChannels = defineStore("channels", () => {
             messages.value = messages.value.filter((x) => {
               return x.id !== payload.id
             })
-            break
         }
       }
     })

vite.config.ts

@@ -37,8 +37,7 @@ export default defineConfig({
       },
       workbox: {
         sourcemap: true,
-        cleanupOutdatedCaches: true,
-        globPatterns: ['**/*.{js,css,ico,png,svg}'],
+        cleanupOutdatedCaches: true
       }
     })
   ],