✨ Basic posting

DysonNetwork.Sphere/Client/src/components/AttachmentItem.vue

@@ -14,5 +14,5 @@ const props = defineProps<{ item: any }>()
 
 const itemType = computed(() => props.item.mime_type.split('/')[0] ?? 'unknown')
 
-const remoteSource = computed(() => `/cgi/drive/files/${props.item.id}`)
+const remoteSource = computed(() => `/cgi/drive/files/${props.item.id}?original=true`)
 </script>

DysonNetwork.Sphere/Client/src/components/PostEditor.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="flex flex-col gap-3">
+    <pub-select v-model:value="publisher" />
+    <n-input
+      type="textarea"
+      placeholder="What's happended?!"
+      v-model:value="content"
+      @keydown.meta.enter.exact="submit"
+      @keydown.ctrl.enter.exact="submit"
+    />
+    <div class="flex justify-between">
+      <div class="flex gap-2"></div>
+      <n-button type="primary" icon-placement="right" :loading="submitting" @click="submit">
+        Post
+        <template #icon>
+          <n-icon><send-round /></n-icon>
+        </template>
+      </n-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NInput, NButton, NIcon } from 'naive-ui'
+import { ref } from 'vue'
+
+import { SendRound } from '@vicons/material'
+
+import PubSelect from './PubSelect.vue'
+
+const emits = defineEmits(['posted'])
+
+const publisher = ref<string | undefined>()
+const content = ref('')
+
+const submitting = ref(false)
+
+async function submit() {
+  submitting.value = true
+  await fetch(`/api/posts?pub=${publisher.value}`, {
+    method: 'POST',
+    headers: {
+      'content-type': 'application/json',
+    },
+    body: JSON.stringify({
+      content: content.value,
+    }),
+  })
+
+  submitting.value = false
+  content.value = ''
+  emits('posted')
+}
+</script>

DysonNetwork.Sphere/Client/src/components/PostEditorPro.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <milkdown />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Milkdown, useEditor } from "@milkdown/vue";
+import { Crepe } from "@milkdown/crepe";
+import "@milkdown/crepe/theme/common/style.css";
+import "@milkdown/crepe/theme/frame.css";
+
+useEditor((root) => {
+  const crepe = new Crepe({
+    root,
+  });
+  return crepe;
+})
+</script>

DysonNetwork.Sphere/Client/src/components/PubSelect.vue

@@ -0,0 +1,97 @@
+<template>
+  <n-select
+    :options="pubStore.publishers"
+    label-field="nick"
+    value-field="name"
+    :value="props.value"
+    :render-label="renderLabel"
+    :render-tag="renderSingleSelectTag"
+    @update:value="(v) => emits('update:value', v)"
+  />
+</template>
+
+<script setup lang="ts">
+import { usePubStore } from '@/stores/pub'
+import { NAvatar, NSelect, NText, type SelectRenderLabel, type SelectRenderTag } from 'naive-ui'
+import { h, watch } from 'vue'
+
+const pubStore = usePubStore()
+
+const props = defineProps<{ value: string | undefined }>()
+const emits = defineEmits(['update:value'])
+
+watch(
+  pubStore,
+  (value) => {
+    if (!props.value && value.publishers) {
+      emits('update:value', pubStore.publishers[0].name)
+    }
+  },
+  { deep: true, immediate: true },
+)
+
+const renderSingleSelectTag: SelectRenderTag = ({ option }: { option: any }) => {
+  return h(
+    'div',
+    {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+      },
+    },
+    [
+      h(NAvatar, {
+        src: option.picture
+          ? `/cgi/drive/files/${option.picture.id}`
+          : undefined,
+        round: true,
+        size: 24,
+        style: {
+          marginRight: '8px',
+        },
+      }),
+      option.nick as string,
+    ],
+  )
+}
+
+const renderLabel: SelectRenderLabel = (option: any) => {
+  return h(
+    'div',
+    {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+      },
+    },
+    [
+      h(NAvatar, {
+        src: option.picture
+          ? `/cgi/drive/files/${option.picture.id}`
+          : undefined,
+        round: true,
+        size: 'small',
+      }),
+      h(
+        'div',
+        {
+          style: {
+            marginLeft: '8px',
+            padding: '4px 0',
+          },
+        },
+        [
+          h('div', null, [option.nick as string]),
+          h(
+            NText,
+            { depth: 3, tag: 'div' },
+            {
+              default: () => `@${option.name}`,
+            },
+          ),
+        ],
+      ),
+    ],
+  )
+}
+</script>