feat: basic publish (#13)

components/account/AccountMe.client.vue

@@ -1,13 +1,17 @@
 <script setup lang="ts">
-const { currentUser } = useAppStore()
+const { currentUser } = $(useAppStore())
+
+const account = $computed(() => currentUser?.account)
 </script>
 
 <template>
   <div flex flex-col gap-4 p4>
     <!-- TODO: multiple account switcher -->
-    <AccountInfo v-if="currentUser?.account" :account="currentUser.account" />
+    <template v-if="account">
+      <AccountInfo :account="account" />
+      <PublishWidget />
+    </template>
     <!-- TODO: dialog for select server -->
     <a v-else href="/api/mas.to/login" px2 py1 bg-teal6 text-white m2 rounded>Login</a>
-    <PublishWidget />
   </div>
 </template>

components/publish/PublishWidget.vue

@@ -1,12 +1,26 @@
 <script setup lang="ts">
+const masto = await useMasto()
 
+let draftPost = $ref('')
+let isSending = $ref(false)
+
+async function publish() {
+  try {
+    isSending = true
+    await masto.statuses.create({ status: draftPost })
+    draftPost = ''
+  }
+  finally {
+    isSending = false
+  }
+}
 </script>
 
 <template>
-  <div flex flex-col gap-4>
+  <div flex flex-col gap-4 :class="isSending ? ' pointer-events-none' : ''">
-    <textarea p2 border-rounded w-full h-40 color-black placeholder="What's on your mind?" />
+    <textarea v-model="draftPost" p2 border-rounded w-full h-40 color-black placeholder="What's on your mind?" />
     <div flex justify-end>
-      <button h-9 w-22 bg-primary border-rounded>
+      <button h-9 w-22 bg-primary border-rounded :disabled="draftPost === ''" @click="publish">
         Publish!
       </button>
     </div>