✨ Quick reply

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"