✨ Quick reply

app/components/Attachment/AttachmentItem.vue

@@ -29,7 +29,7 @@
 
     <audio
       v-else-if="itemType == 'audio'"
-      class="w-full h-auto"
+      class="w-full"
       :src="remoteSource"
       controls
     />

app/components/Attachment/AttachmentList.vue

@@ -31,8 +31,7 @@
         </n-carousel>
       </div>
 
-      <!-- Mixed content: vertical scrollable -->
-      <div v-else class="space-y-4 max-h-96 overflow-y-auto">
+      <div v-else class="space-y-4 flex flex-col">
         <attachment-item
           v-for="attachment in attachments"
           :key="attachment.id"

app/components/Post/PostEditor.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col gap-2">
+  <div class="flex flex-col gap-3">
     <pub-select v-model:value="publisher" />
     <n-input
       v-model:value="content"
@@ -8,11 +8,11 @@
       @keydown.meta.enter.exact="submit"
       @keydown.ctrl.enter.exact="submit"
     />
-    <div class="flex justify-between">
+    <div class="flex justify-end">
       <n-button type="primary" :loading="submitting" @click="submit">
         Post
         <template #icon>
-          <span class="mdi mdi-send"></span>
+          <n-icon :component="SendIcon" />
         </template>
       </n-button>
     </div>
@@ -20,8 +20,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import { useSolarNetwork } from '~/composables/useSolarNetwork'
+import { SendIcon } from "lucide-vue-next"
+import { ref } from "vue"
+import { useSolarNetwork } from "~/composables/useSolarNetwork"
 
 // Interface for uploaded files in the editor
 interface UploadedFile {
@@ -30,10 +31,10 @@ interface UploadedFile {
   type: string
 }
 
-const emits = defineEmits(['posted'])
+const emits = defineEmits(["posted"])
 
 const publisher = ref<string | undefined>()
-const content = ref('')
+const content = ref("")
 
 const fileList = ref<UploadedFile[]>([])
 
@@ -43,21 +44,21 @@ async function submit() {
   submitting.value = true
   const api = useSolarNetwork()
   await api(`/sphere/posts?pub=${publisher.value}`, {
-    method: 'POST',
+    method: "POST",
     headers: {
-      'content-type': 'application/json',
+      "content-type": "application/json"
     },
     body: JSON.stringify({
       content: content.value,
       attachments: fileList.value
         .filter((e) => e.url != null)
-        .map((e) => e.url!.split('/').reverse()[0]),
-    }),
+        .map((e) => e.url!.split("/").reverse()[0])
+    })
   })
 
   submitting.value = false
-  content.value = ''
+  content.value = ""
   fileList.value = []
-  emits('posted')
+  emits("posted")
 }
 </script>

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,65 +1,74 @@
 <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 { usePubStore } from "~/stores/pub"
+import { watch, h } from "vue"
+import type { SelectRenderLabel, SelectRenderTag } from "naive-ui"
 
 const pubStore = usePubStore()
 const apiBase = useSolarNetworkUrl()
 
 const props = defineProps<{ value: string | undefined }>()
-const emits = defineEmits(['update:value'])
+const emits = defineEmits(["update:value"])
 
 const renderLabel: SelectRenderLabel = (option) => {
-  return h('div', { class: 'flex items-center' }, [
+  const pubData = pubStore.publishers.filter((p) => p.id == option.id)[0]
+  return h("div", { class: "flex items-center" }, [
     h(NAvatar, {
-      src: option.picture ? `${apiBase.value}/drive/files/${option.picture.id}` : undefined,
-      size: 'small',
-      class: 'mr-2'
+      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 text-gray-500' }, `@${option.name as string}`)
+    h("div", null, [
+      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',
+    "div",
     {
-      class: 'flex items-center'
+      class: "flex items-center"
     },
     [
       h(NAvatar, {
-        src: option.picture ? `${apiBase.value}/drive/files/${option.picture.id}` : undefined,
-        size: 'small',
-        class: 'mr-2'
+        round: true,
+        src: pubData?.picture?.id
+          ? `${apiBase}/drive/files/${pubData.picture!.id}`
+          : undefined,
+        size: "small",
+        class: "mr-2"
       }),
       option.nick as string
     ]
   )
 }
 
-
 watch(
   pubStore,
   (value) => {
     if (!props.value && value.publishers) {
-      emits('update:value', pubStore.publishers[0]?.name)
+      emits("update:value", pubStore.publishers[0]?.name)
     }
   },
-  { deep: true, immediate: true },
+  { deep: true, immediate: true }
 )
 </script>

app/composables/useSolarNetwork.ts

@@ -20,7 +20,8 @@ export const useSolarNetwork = () => {
       console.log(`[useSolarNetwork] onRequest for ${request} on ${side}`)
 
       if (devToken) {
-        options.headers = new Headers(options.headers)
+        console.log("[useSolarNetwork] Using dev token...")
+        options.headers.delete("Cookie")
         options.headers.set("Authorization", `Bearer ${devToken}`)
       }
 

app/pages/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container mx-auto px-5">
     <div class="layout">
-      <div class="main">
+      <div class="main pt-4">
         <n-infinite-scroll
           style="overflow: auto"
           :distance="0"
@@ -37,7 +37,7 @@
           </div>
         </n-infinite-scroll>
       </div>
-      <div class="sidebar flex flex-col gap-3">
+      <div class="sidebar flex flex-col gap-3 pt-4">
         <div v-if="!userStore.isAuthenticated">
           <n-card>
             <h2 class="card-title">About</h2>
@@ -54,11 +54,9 @@
             </p>
           </n-card>
         </div>
-        <div v-else class="card w-full bg-base-100 shadow-xl">
-          <div class="card-body">
-            <post-editor @posted="refreshActivities" />
-          </div>
-        </div>
+        <n-card v-else class="w-full">
+          <post-editor @posted="refreshActivities" />
+        </n-card>
         <sidebar-footer class="max-lg:hidden" />
       </div>
     </div>
@@ -180,7 +178,7 @@ async function refreshActivities() {
 @media (min-width: 1280px) {
   .sidebar {
     position: sticky;
-    top: calc(68px + 8px);
+    top: calc(64px);
   }
 }
 </style>

app/plugins/01.auth.ts

@@ -5,7 +5,17 @@ export default defineNuxtPlugin(() => {
   console.log(`[AUTH PLUGIN] Running on ${side}`)
   const userStore = useUserStore()
 
-  // Prevent fetching if it's already in progress
+  // Fix hydration mismatch: if isLoading is true on client, it's likely a stale state
+  // from SSR where the fetch didn't complete before the response was sent.
+  // Reset it to allow the client to fetch properly.
+  if (import.meta.client && userStore.isLoading) {
+    console.log(
+      `[AUTH PLUGIN] Detected stale isLoading state on ${side}. Resetting to allow fetch.`
+    )
+    userStore.isLoading = false
+  }
+
+  // Prevent fetching if it's already in progress (server-side only now)
   if (userStore.isLoading) {
     console.log(
       `[AUTH PLUGIN] User fetch already in progress on ${side}. Skipping.`
@@ -21,4 +31,3 @@ export default defineNuxtPlugin(() => {
     userStore.fetchUser()
   }
 })
-