✨ Quick reply

app/components/Post/PostQuickReply.vue

@@ -1,23 +1,78 @@
 <template>
-  <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-3">
-      <n-button type="primary">
-        <template #icon>
-          <n-icon :component="SendIcon" />
+  <n-card title="Quick Reply" size="small" embedded>
+    <div class="flex flex-col gap-2 mb-1">
+      <pub-select v-model:value="publisher" />
+      <n-input
+        v-model:value="content"
+        type="textarea"
+        placeholder="Talk about this post for a bit."
+        size="large"
+        :rows="3"
+        auto-grow
+        @keydown.meta.enter.exact="submit"
+        @keydown.ctrl.enter.exact="submit"
+      >
+        <template #suffix>
+          <div class="flex items-end h-full py-3">
+            <n-button text :loading="submitting" @click="submit">
+              <template #icon>
+                <n-icon :component="SendIcon" />
+              </template>
+            </n-button>
+          </div>
         </template>
-        Send
-      </n-button>
+      </n-input>
     </div>
   </n-card>
 </template>
 
 <script setup lang="ts">
 import { SendIcon } from "lucide-vue-next"
+import { ref } from "vue"
+import { useSolarNetwork } from "~/composables/useSolarNetwork"
+
+// Interface for uploaded files in the editor
+interface UploadedFile {
+  name: string
+  url: string
+  type: string
+}
+
+const props = defineProps<{
+  repliedPostId: string
+}>()
+
+const emits = defineEmits(["posted"])
+
+const publisher = ref<string | undefined>()
+const content = ref("")
+
+const fileList = ref<UploadedFile[]>([])
+
+const submitting = ref(false)
+
+async function submit() {
+  if (!content.value.trim()) return
+
+  submitting.value = true
+  const api = useSolarNetwork()
+  await api(`/sphere/posts?pub=${publisher.value}`, {
+    method: "POST",
+    headers: {
+      "content-type": "application/json"
+    },
+    body: JSON.stringify({
+      content: content.value,
+      replied_post_id: props.repliedPostId,
+      attachments: fileList.value
+        .filter((e) => e.url != null)
+        .map((e) => e.url!.split("/").reverse()[0])
+    })
+  })
+
+  submitting.value = false
+  content.value = ""
+  fileList.value = []
+  emits("posted")
+}
 </script>

app/components/Post/RepliesList.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="replies-list">
-    <post-quick-reply v-if="!props.hideQuickReply" class="mb-4" />
+    <post-quick-reply
+      v-if="!props.hideQuickReply"
+      :replied-post-id="props.params.postId"
+      @posted="refresh"
+      class="mb-4"
+    />
 
     <!-- Error State -->
     <n-alert

app/components/PubSelect.vue

@@ -1,20 +1,21 @@
 <template>
-  <n-select
-    :options="pubStore.publishers"
-    label-field="nick"
-    value-field="name"
-    :value="props.value"
-    @update:value="(v) => emits('update:value', v)"
-    :render-label="renderLabel"
-    :render-tag="renderTag"
-  />
+  <n-config-provider :theme-overrides="{ common: { borderRadius: '8px' } }">
+    <n-select
+      :options="pubStore.publishers"
+      label-field="nick"
+      value-field="name"
+      :value="props.value"
+      @update:value="(v) => emits('update:value', v)"
+      :render-label="renderLabel"
+      :render-tag="renderTag"
+    />
+  </n-config-provider>
 </template>
 
 <script setup lang="ts">
 import { usePubStore } from "~/stores/pub"
 import { watch, h } from "vue"
 import type { SelectRenderLabel, SelectRenderTag } from "naive-ui"
-import type { SnPublisher } from "~/types/api"
 
 const pubStore = usePubStore()
 const apiBase = useSolarNetworkUrl()
@@ -23,22 +24,25 @@ const props = defineProps<{ value: string | undefined }>()
 const emits = defineEmits(["update:value"])
 
 const renderLabel: SelectRenderLabel = (option) => {
+  const pubData = pubStore.publishers.filter((p) => p.id == option.id)[0]
   return h("div", { class: "flex items-center" }, [
     h(NAvatar, {
-      src: (option.value as SnPublisher)!.picture?.id
-        ? `${apiBase}/drive/files/${(option.value as SnPublisher)!.picture!.id}`
+      round: true,
+      src: pubData?.picture?.id
+        ? `${apiBase}/drive/files/${pubData.picture!.id}`
         : undefined,
       size: "small",
       class: "mr-2"
     }),
     h("div", null, [
-      h("div", null, option.nick as string),
-      h("div", { class: "text-xs opacity-80" }, `@${option.name as string}`)
+      h("div", null, pubData!.nick),
+      h("div", { class: "text-xs opacity-80" }, `@${pubData!.name as string}`)
     ])
   ])
 }
 
 const renderTag: SelectRenderTag = ({ option }) => {
+  const pubData = pubStore.publishers.filter((p) => p.id == option.id)[0]
   return h(
     "div",
     {
@@ -46,10 +50,9 @@ const renderTag: SelectRenderTag = ({ option }) => {
     },
     [
       h(NAvatar, {
-        src: (option.value as SnPublisher)!.picture?.id
-          ? `${apiBase}/drive/files/${
-              (option.value as SnPublisher)!.picture!.id
-            }`
+        round: true,
+        src: pubData?.picture?.id
+          ? `${apiBase}/drive/files/${pubData.picture!.id}`
           : undefined,
         size: "small",
         class: "mr-2"