feat: cache for publish widget

components/account/AccountInfo.vue

@@ -17,7 +17,7 @@ defineProps<{
       <h4 font-bold>
         {{ account.displayName }}
       </h4>
-      <p op50>
+      <p op35 text-sm>
         @{{ account.acct }}
       </p>
     </NuxtLink>

components/account/AccountMe.client.vue

@@ -9,7 +9,7 @@ const account = $computed(() => currentUser?.account)
     <!-- TODO: multiple account switcher -->
     <template v-if="account">
       <AccountInfo :account="account" />
-      <PublishWidget />
+      <PublishWidget draft-key="home" />
     </template>
     <!-- TODO: dialog for select server -->
     <a v-else href="/api/mas.to/login" px2 py1 bg-teal6 text-white m2 rounded>Login</a>

components/publish/PublishWidget.client.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import type { CreateStatusParamsWithStatus } from 'masto'
+
+const {
+  draftKey,
+  placeholder = 'What is on your mind?',
+  inReplyToId,
+} = defineProps<{
+  draftKey: string
+  placeholder?: string
+  inReplyToId?: string
+}>()
+
+const masto = await useMasto()
+
+let isSending = $ref(false)
+const storageKey = `nuxtodon-draft-${draftKey}`
+function getDefaultStatus(): CreateStatusParamsWithStatus {
+  return {
+    status: '',
+    inReplyToId,
+  }
+}
+const draft = useLocalStorage<CreateStatusParamsWithStatus>(storageKey, getDefaultStatus())
+
+async function publish() {
+  try {
+    isSending = true
+    await masto.statuses.create(draft.value)
+    draft.value = getDefaultStatus()
+  }
+  finally {
+    isSending = false
+  }
+}
+
+onUnmounted(() => {
+  if (!draft.value.status) {
+    draft.value = undefined
+    nextTick(() => {
+      localStorage.removeItem(storageKey)
+    })
+  }
+})
+</script>
+
+<template>
+  <div
+    flex flex-col gap-4
+    :class="isSending ? 'pointer-events-none' : ''"
+  >
+    <textarea
+      v-model="draft.status"
+      :placeholder="placeholder"
+      p2 border-rounded w-full h-40
+      bg-gray:10 outline-none border="~ border"
+    />
+    <div flex justify-end>
+      <button
+        h-9 w-22 bg-primary border-rounded
+        :disabled="draft.status === ''"
+        @click="publish"
+      >
+        Publish!
+      </button>
+    </div>
+  </div>
+</template>

components/publish/PublishWidget.vue

@@ -1,33 +0,0 @@
-<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 xl:w-70 flex flex-col gap-4 :class="isSending ? ' pointer-events-none' : ''">
-    <textarea
-      v-model="draftPost"
-      placeholder="What's on your mind?"
-      p2 border-rounded w-full h-40
-      bg-gray:10 outline-none border="~ border"
-    />
-    <div flex justify-end>
-      <button h-9 w-22 bg-primary border-rounded :disabled="draftPost === ''" @click="publish">
-        Publish!
-      </button>
-    </div>
-  </div>
-</template>