🐛 Fix bugs

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 flex flex-col">
-      <div v-else class="space-y-4 max-h-96 overflow-y-auto">
         <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 { SendIcon } from "lucide-vue-next"
-import { useSolarNetwork } from '~/composables/useSolarNetwork'
+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/PubSelect.vue

@@ -11,55 +11,61 @@
 </template>
 
 <script setup lang="ts">
-import { usePubStore } from '~/stores/pub'
+import { usePubStore } from "~/stores/pub"
-import { watch, h } from 'vue'
+import { watch, h } from "vue"
-import type { SelectRenderLabel, SelectRenderTag } from 'naive-ui'
+import type { SelectRenderLabel, SelectRenderTag } from "naive-ui"
+import type { SnPublisher } from "~/types/api"
 
 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' }, [
+  return h("div", { class: "flex items-center" }, [
     h(NAvatar, {
-      src: option.picture ? `${apiBase.value}/drive/files/${option.picture.id}` : undefined,
+      src: (option.value as SnPublisher)!.picture?.id
-      size: 'small',
+        ? `${apiBase}/drive/files/${(option.value as SnPublisher)!.picture!.id}`
-      class: 'mr-2'
+        : undefined,
+      size: "small",
+      class: "mr-2"
     }),
-    h('div', null, [
+    h("div", null, [
-      h('div', null, option.nick as string),
+      h("div", null, option.nick as string),
-      h('div', { class: 'text-xs text-gray-500' }, `@${option.name as string}`)
+      h("div", { class: "text-xs opacity-80" }, `@${option.name as string}`)
     ])
   ])
 }
 
 const renderTag: SelectRenderTag = ({ option }) => {
   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,
+        src: (option.value as SnPublisher)!.picture?.id
-        size: 'small',
+          ? `${apiBase}/drive/files/${
-        class: 'mr-2'
+              (option.value as SnPublisher)!.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">
+        <n-card v-else class="w-full">
-          <div class="card-body">
           <post-editor @posted="refreshActivities" />
-          </div>
+        </n-card>
-        </div>
         <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>